:root{
  --teal:#1a9b8a;
  --teal-bright:#26c2ac;
  --navy:#172a48;
  --navy-deep:#0d1a2e;
  --paper:#f4f7f6;
  --paper-2:#eef3f1;
  --text:#46566e;
  --text-weak:#6a7790;
  --rule:#e3e9e8;

  --sans:'Noto Sans JP', system-ui, sans-serif;
  --head:'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --serif:'Noto Serif JP', serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--navy-deep);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }

/* ============ shared bits ============ */
.eyebrow{
  font-family:var(--head);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--teal-bright);
  text-transform:uppercase;
}
.eyebrow.muted{ color:var(--text-weak); letter-spacing:.36em; text-indent:.36em; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65em;
  font-family:var(--head);
  font-weight:700;
  letter-spacing:.04em;
  border-radius:999px;
  cursor:pointer;
  border:1.5px solid transparent;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
  will-change:transform;
}
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(.28em); }

.btn-fill{
  background:var(--teal);
  color:#fff;
  box-shadow:0 12px 30px -10px rgba(26,155,138,.6);
}
.btn-fill:hover{ background:var(--teal-bright); transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(38,194,172,.65); }

.btn-lg{ font-size:1.06rem; padding:1.15em 2.4em; }
.btn-md{ font-size:.98rem; padding:1em 2.1em; }

.btn-outline{
  background:#fff;
  color:var(--teal);
  border-color:var(--teal);
}
.btn-outline:hover{ background:rgba(26,155,138,.06); transform:translateY(-2px); border-color:var(--teal-bright); color:var(--teal); }

/* ============ SECTION 1 — HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    radial-gradient(120% 90% at 50% 38%, #1a3358 0%, var(--navy) 42%, var(--navy-deep) 100%);
  isolation:isolate;
}
.hero::after{ /* vignette + grain feel */
  content:"";
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(140% 110% at 50% 30%, transparent 55%, rgba(7,14,26,.65) 100%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:3;
  width:min(1080px, 90vw);
  margin:0 auto;
  padding:7vh 0;
  text-align:center;
}
.hero-content{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hero-content.show{ opacity:1; transform:none; }

.hero-title{
  font-family:var(--head);
  font-weight:600;
  color:#fff;
  line-height:1.16;
  letter-spacing:.01em;
  font-size:clamp(2.5rem, 5.4vw, 4.4rem);
  margin:.55em 0 .7em;
  text-wrap:pretty;
}
.hero-title .line{ display:block; }
.hero-title .accent{ color:var(--teal-bright); }

.hero-sub{
  color:rgba(255,255,255,.82);
  font-size:clamp(1rem, 1.7vw, 1.28rem);
  font-weight:400;
  letter-spacing:.02em;
  margin-bottom:2.6em;
}

.scroll-cue{
  position:absolute;
  left:50%; bottom:3.2vh;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7em;
  font-family:var(--head);
  font-weight:700;
  font-size:.64rem;
  letter-spacing:.4em;
  text-indent:.4em;
  color:rgba(255,255,255,.5);
  opacity:0;
  transition:opacity 1.2s var(--ease) .4s;
}
.scroll-cue.show{ opacity:1; }
.scroll-cue .bar{
  width:1px; height:46px;
  background:linear-gradient(rgba(255,255,255,.5), transparent);
  animation:scrollBounce 1.9s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollBounce{
  0%,100%{ transform:translateY(0) scaleY(1); opacity:.55; }
  50%{ transform:translateY(8px) scaleY(.7); opacity:.95; }
}

/* skip button */
.skip{
  position:absolute;
  right:max(3vw, 18px); bottom:max(3vh, 16px);
  z-index:6;
  font-family:var(--head);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.22em;
  text-indent:.22em;
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:.6em 1.3em;
  cursor:pointer;
  transition:color .3s, border-color .3s, opacity .6s var(--ease);
}
.skip:hover{ color:#fff; border-color:rgba(255,255,255,.4); }

/* ---- the gate ---- */
.gate{
  position:absolute; inset:0; z-index:5;
  overflow:hidden;
  transition:opacity 1s var(--ease);
}
.gate.ended{ opacity:0; pointer-events:none; }

.gate .glow{
  position:absolute; left:50%; top:50%;
  width:140vmax; height:140vmax;
  transform:translate(-50%,-50%) scale(.2);
  background:radial-gradient(circle, rgba(38,194,172,.55) 0%, rgba(38,194,172,.18) 22%, transparent 55%);
  opacity:0;
}
.gate .beam{
  position:absolute; left:50%; top:50%;
  width:2px; height:0;
  transform:translate(-50%,-50%);
  background:linear-gradient(transparent, #cdfff4 18%, #fff 50%, #cdfff4 82%, transparent);
  box-shadow:0 0 24px 6px rgba(173,255,240,.85), 0 0 60px 14px rgba(38,194,172,.5);
  opacity:0;
}

.door{
  position:absolute; top:0; bottom:0;
  width:50.5%;
  background:
    linear-gradient(180deg, #0f1f38 0%, #0a1424 60%, #070e1a 100%);
  box-shadow:inset 0 0 120px rgba(0,0,0,.7);
  z-index:2;
}
.door::before{ /* faint panel sheen */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.025) 50%, transparent);
}
.door-l{ left:0; }
.door-r{ right:0; }
.door .edge{
  position:absolute; top:0; bottom:0; width:2px;
  background:linear-gradient(transparent, rgba(38,194,172,.9), transparent);
  box-shadow:0 0 18px 3px rgba(38,194,172,.55);
}
.door-l .edge{ right:0; }
.door-r .edge{ left:0; }

.suite-mark{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:3;
  font-family:var(--head);
  font-weight:900;
  font-size:clamp(2.4rem, 8vw, 6rem);
  letter-spacing:.34em;
  text-indent:.34em;
  color:#fff;
  text-shadow:0 0 30px rgba(173,255,240,.7), 0 0 70px rgba(38,194,172,.55);
  opacity:0;
}

/* gate timeline (plays only when .playing) */
.gate.playing .beam{ animation:beamRise 1s var(--ease) .3s forwards; }
.gate.playing .glow{ animation:glowFill 3.4s var(--ease) 1s forwards; }
.gate.playing .door-l{ animation:openL 1.7s var(--ease) 1.1s forwards; }
.gate.playing .door-r{ animation:openR 1.7s var(--ease) 1.1s forwards; }
.gate.playing .suite-mark{ animation:suiteFlash 1.7s var(--ease) 1.9s forwards; }

@keyframes beamRise{
  0%{ height:0; opacity:0; }
  35%{ opacity:1; }
  100%{ height:78%; opacity:.9; }
}
@keyframes glowFill{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
  45%{ opacity:1; transform:translate(-50%,-50%) scale(.85); }
  100%{ opacity:.5; transform:translate(-50%,-50%) scale(1.25); }
}
@keyframes openL{ to{ transform:translateX(-101%); } }
@keyframes openR{ to{ transform:translateX(101%); } }
@keyframes suiteFlash{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.96); letter-spacing:.5em; }
  35%{ opacity:1; transform:translate(-50%,-50%) scale(1); letter-spacing:.34em; }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.06); letter-spacing:.28em; }
}

/* ============ SECTION 2 — STORY ============ */
.story{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(120% 80% at 50% 50%, #16294a 0%, var(--navy) 50%, var(--navy-deep) 100%);
  padding:14vh 0;
  isolation:isolate;
}
.story::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(7,14,26,.6) 100%);
  pointer-events:none;
}
.story-inner{
  position:relative; z-index:2;
  width:min(940px, 90vw);
  margin:0 auto;
  text-align:center;
}
.story .eyebrow{ margin-bottom:2.4em; }

.story-line{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.story.in .story-line{ opacity:1; transform:none; }
.story.in .story-line.l0{ transition-delay:0s; }
.story.in .story-line.l1{ transition-delay:.4s; }
.story.in .story-line.l2{ transition-delay:1s; }
.story.in .story-line.l3{ transition-delay:1.7s; }
.story.in .story-line.l4{ transition-delay:2.4s; }

.story-line.mincho{
  font-family:var(--serif);
  color:#fff;
  font-weight:500;
  letter-spacing:.04em;
  text-wrap:pretty;
}
.l1{ font-size:clamp(1.5rem, 3.4vw, 2.5rem); line-height:1.5; margin-bottom:1.5em; }
.l2{ font-size:clamp(1.1rem, 2vw, 1.55rem); line-height:1.95; color:rgba(255,255,255,.82); font-weight:400; margin-bottom:1.9em; }
.l3{ font-size:clamp(1.35rem, 3vw, 2.2rem); line-height:1.65; margin-bottom:2.4em; }
.l3 .accent{ color:var(--teal-bright); }
.l4{
  font-family:var(--sans);
  font-size:clamp(.95rem, 1.4vw, 1.1rem);
  color:rgba(255,255,255,.62);
  letter-spacing:.08em;
  margin-bottom:3.2em;
}

.pill{
  display:inline-flex;
  align-items:center;
  font-family:var(--head);
  font-weight:700;
  font-size:clamp(.82rem, 1.4vw, 1rem);
  letter-spacing:.05em;
  color:var(--teal-bright);
  border:1.5px solid rgba(38,194,172,.55);
  border-radius:999px;
  padding:.85em 1.7em;
  background:rgba(38,194,172,.06);
  opacity:0;
  transform:translateY(16px) scale(.98);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.story.in .pill{ opacity:1; transform:none; transition-delay:3s; }

/* ============ SECTION 3 — CTA ============ */
.cta{
  background:var(--paper);
  padding:clamp(5rem, 12vh, 9rem) 0;
  text-align:center;
}
.cta-inner{ width:min(720px, 90vw); margin:0 auto; }
.cta-title{
  font-family:var(--head);
  font-weight:600;
  color:var(--navy);
  font-size:clamp(2rem, 5.2vw, 3.4rem);
  line-height:1.3;
  letter-spacing:.01em;
  margin-bottom:.7em;
  text-wrap:balance;
}
.cta-title .accent{ color:var(--teal); }

.cta-sub{
  color:var(--text-weak);
  font-size:clamp(.95rem, 1.5vw, 1.08rem);
  line-height:1.95;
  letter-spacing:.02em;
  margin-bottom:2.8em;
  text-wrap:pretty;
}

.cta-card{
  background:#fff;
  border-radius:24px;
  box-shadow:0 30px 60px -28px rgba(23,42,72,.28), 0 2px 10px rgba(23,42,72,.05);
  border:1px solid var(--rule);
  padding:clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 5vw, 3.6rem);
}
.cta-note{
  color:var(--text-weak);
  font-size:.95rem;
  letter-spacing:.02em;
  margin-bottom:1.8em;
}

/* ============ SECTION 4 — FOR BUSINESS ============ */
.biz{
  background:var(--paper-2);
  padding:clamp(3.5rem, 9vh, 6rem) 0 clamp(4.5rem, 10vh, 7rem);
}
.biz-inner{
  width:min(720px, 90vw);
  margin:0 auto;
  border-top:1px solid var(--rule);
  padding-top:clamp(3rem, 7vh, 5rem);
  text-align:center;
}
.biz .eyebrow{ margin-bottom:1.5em; }
.biz-title{
  font-family:var(--head);
  font-weight:700;
  color:var(--navy);
  font-size:clamp(1.25rem, 2.6vw, 1.7rem);
  letter-spacing:.02em;
  margin-bottom:.7em;
}
.biz-line{
  color:var(--text-weak);
  font-size:.92rem;
  letter-spacing:.02em;
  margin-bottom:2.2em;
}

/* ============ responsive ============ */
@media (max-width:640px){
  .hero-inner{ width:88vw; }
  .hero-sub{ margin-bottom:2.2em; }
  .btn-lg, .btn-md{ width:100%; }
  .cta-card .btn, .biz .btn{ width:100%; }
  .hero-content .btn{ width:100%; }
  .pill{ width:100%; justify-content:center; text-align:center; }
  .story-inner{ width:88vw; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .gate{ display:none !important; }
  .hero-content{ opacity:1 !important; transform:none !important; }
  .scroll-cue{ opacity:1 !important; }
  .scroll-cue .bar{ animation:none; }
  .skip{ display:none !important; }
  .story-line, .pill{ opacity:1 !important; transform:none !important; transition:none !important; }
}