@import url('../../common/fonts/zen-kaku-gothic-new.css');
@import url('../../common/fonts/bangers.css');
@import url('../../common/fonts/dela-gothic-one.css');

:root{
  --abyss:#021018; --deep:#03263a; --foam:#cdeef0; --blood:#ff3b3b;
  --gold:#ffd23f; --teal:#3fd0e6; --danger:#ff5b4a;
  --font-body:'Zen Kaku Gothic New',system-ui,sans-serif;
  --font-display:'Bangers','Zen Kaku Gothic New',fantasy;
  --font-kanji:'Dela Gothic One','Zen Kaku Gothic New',sans-serif;
}
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);color:var(--foam);
    background:var(--abyss);line-height:1.85;overflow-x:hidden;
  }
  a{color:var(--gold);}
  .ambient-fish{
    position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  }
  .ambient-fish__fish{
    position:absolute;top:var(--top);left:-28vw;width:var(--fish-w);height:var(--fish-h);
    font-size:var(--fish-h);border-radius:50%;color:#010c12;
    background:currentColor;filter:blur(var(--blur));opacity:var(--alpha);
    box-shadow:0 0 28px rgba(63,208,230,.05);
    animation:swim-right var(--dur) linear infinite;animation-delay:var(--delay);
  }
  .ambient-fish__fish::before{
    content:"";position:absolute;left:-.82em;top:50%;transform:translateY(-50%);
    width:.95em;height:1.08em;background:currentColor;
    clip-path:polygon(100% 50%,0 8%,0 92%);
  }
  .ambient-fish__fish::after{
    content:"";position:absolute;left:28%;top:-.34em;
    border-style:solid;border-width:0 .55em .58em 0;border-color:transparent transparent currentColor transparent;
  }
  .ambient-fish__fish.is-reverse{
    left:auto;right:-28vw;animation-name:swim-left;
  }
  @keyframes swim-right{
    from{transform:translate3d(-12vw,0,0);}
    50%{transform:translate3d(62vw,var(--bob),0);}
    to{transform:translate3d(138vw,0,0);}
  }
  @keyframes swim-left{
    from{transform:translate3d(12vw,0,0) scaleX(-1);}
    50%{transform:translate3d(-62vw,var(--bob),0) scaleX(-1);}
    to{transform:translate3d(-138vw,0,0) scaleX(-1);}
  }
  .hero .kicker,.hero .logo,.hero .tagline,.hero .cta-row,
  .wrap,footer>*{position:relative;z-index:2;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:40px 24px;
    background:radial-gradient(ellipse at 50% -10%, #0a4f63 0%, #03263a 42%, #021018 100%);
    overflow:hidden;
  }
  /* descending light shafts */
  .hero::before{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(105deg, transparent 46%, rgba(205,238,240,.05) 48%, transparent 52%),
      linear-gradient(80deg, transparent 60%, rgba(205,238,240,.04) 62%, transparent 66%);
    pointer-events:none;
  }
  .hero .bubbles{position:absolute;inset:0;pointer-events:none;}
  .bubble{position:absolute;bottom:-30px;border-radius:50%;
    background:rgba(205,238,240,.16);animation:rise linear infinite;}
  @keyframes rise{to{transform:translateY(-110vh);opacity:0;}}

  .kicker{font-weight:700;letter-spacing:.35em;font-size:12px;opacity:.7;margin-bottom:18px;}
  .logo{position:relative;margin:0;font-family:var(--font-display);font-size:clamp(54px,16vw,94px);line-height:.86;letter-spacing:0;filter:drop-shadow(0 18px 18px rgba(0,0,0,.32));animation:titleFloat 4.6s 1.2s ease-in-out infinite;}
  .logo .gyaku{font-family:var(--font-kanji);font-size:clamp(82px,23vw,132px);font-weight:400;color:var(--blood);display:block;transform:rotate(-3deg);-webkit-text-stroke:1.5px #ff9b7a;paint-order:stroke fill;text-shadow:0 0 34px rgba(255,59,59,.72),0 8px 0 #720000,2px 2px 0 #9d0000,-2px 2px 0 #9d0000,2px -1px 0 #9d0000,-2px -1px 0 #9d0000;animation:gyakuSlam .95s cubic-bezier(.16,1.45,.35,1) both,gyakuPulse 2.8s 1.25s ease-in-out infinite;}
  .logo .fish{color:var(--foam);display:block;text-shadow:0 4px 0 rgba(2,16,24,.75),0 0 22px rgba(205,238,240,.28);animation:fishSettle .78s .28s cubic-bezier(.18,1.22,.36,1) both,fishLoop 4.8s 1.1s ease-in-out infinite;}
  @keyframes titleFloat{0%,100%{transform:translateY(0) rotate(-.3deg);}50%{transform:translateY(-7px) rotate(.5deg);}}
  @keyframes gyakuSlam{0%{opacity:0;transform:translateY(-80px) scale(1.28) rotate(-13deg);filter:blur(4px);}58%{opacity:1;transform:translateY(7px) scale(.96) rotate(2deg);filter:blur(0);}78%{transform:translateY(-4px) scale(1.03) rotate(-5deg);}100%{transform:translateY(0) scale(1) rotate(-3deg);}}
  @keyframes gyakuPulse{0%,100%{text-shadow:0 0 28px rgba(255,59,59,.62),0 8px 0 #720000,2px 2px 0 #9d0000,-2px 2px 0 #9d0000,2px -1px 0 #9d0000,-2px -1px 0 #9d0000;}50%{text-shadow:0 0 46px rgba(255,59,59,.9),0 8px 0 #720000,3px 2px 0 #9d0000,-3px 2px 0 #9d0000,2px -1px 0 #9d0000,-2px -1px 0 #9d0000;}}
  @keyframes fishSettle{0%{opacity:0;transform:translateY(46px) scaleY(.78);filter:blur(3px);}70%{opacity:1;transform:translateY(-5px) scaleY(1.05);filter:blur(0);}100%{opacity:1;transform:translate(0,0) scaleY(1);filter:blur(0);}}
  @keyframes fishLoop{0%,100%{transform:translate(0,0) scaleY(1) skewX(0deg);}35%{transform:translate(3px,-2px) scaleY(1.01) skewX(-1.3deg);}68%{transform:translate(-2px,1px) scaleY(.99) skewX(1.1deg);}}
  .tagline{margin-top:26px;font-size:clamp(16px,4.0vw,22px);font-weight:700;
    max-width:600px;line-height:1.6;text-wrap:balance;word-break:keep-all;}
  .tagline b{color:var(--gold);}
  .cta-row{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
  .btn{
    font-family:var(--font-body);font-weight:900;font-size:19px;color:var(--abyss);background:var(--gold);
    border:none;border-radius:50px;padding:15px 40px;cursor:pointer;text-decoration:none;
    box-shadow:0 7px 0 #b3870a,0 12px 26px rgba(0,0,0,.5);transition:transform .08s, box-shadow .08s;
    letter-spacing:.06em;
  }
  .btn:active{transform:translateY(5px);box-shadow:0 2px 0 #b3870a,0 5px 12px rgba(0,0,0,.5);}
  .btn.ghost{background:transparent;color:var(--foam);box-shadow:inset 0 0 0 2px rgba(205,238,240,.4);}
  .btn-play{letter-spacing:.08em;}
  .scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
    z-index:2;font-size:12px;opacity:.6;font-weight:700;letter-spacing:.2em;animation:bob 2s ease-in-out infinite;}
  @keyframes bob{50%{transform:translate(-50%,6px);}}

  /* ---------- SECTIONS ---------- */
  .wrap{max-width:760px;margin:0 auto;padding:0 24px;}
  section{padding:78px 0;position:relative;}
  .band{background:linear-gradient(180deg,#03222f,#021018);}
  .sec-tag{font-family:var(--font-display);font-size:16px;color:var(--teal);letter-spacing:.08em;margin-bottom:8px;}
  h2{font-size:clamp(26px,6.4vw,38px);font-weight:900;line-height:1.25;margin-bottom:22px;}
  h2 .accent{color:var(--gold);}
  p.lead{font-size:17px;opacity:.92;}

  /* concept */
  .concept-card{
    margin-top:26px;border-radius:20px;padding:26px;
    background:rgba(10,79,99,.22);border:1px solid rgba(63,208,230,.22);
  }
  .concept-card strong{color:var(--gold);}

  /* steps */
  .steps{margin-top:30px;display:flex;flex-direction:column;gap:18px;}
  .step{
    display:flex;gap:18px;align-items:flex-start;
    background:rgba(2,16,24,.5);border:1px solid rgba(205,238,240,.12);
    border-radius:18px;padding:20px 22px;
  }
  .step .num{
    flex:0 0 auto;width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:23px;color:var(--abyss);background:var(--gold);
  }
  .step h3{font-size:18px;margin-bottom:4px;}
  .step p{font-size:15px;opacity:.86;}

  /* mechanic gauges */
  .mech{margin-top:28px;display:grid;gap:16px;}
  .gauge-row{
    border-radius:16px;padding:18px 20px;border:1px solid rgba(205,238,240,.12);
    background:rgba(2,16,24,.5);
  }
  .gauge-row h4{font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:9px;}
  .dot{width:13px;height:13px;border-radius:50%;display:inline-block;}
  .bar{height:12px;border-radius:8px;margin:8px 0 10px;
    background:linear-gradient(90deg,#1f8ad0,#3fd0e6 45%,#ffd23f 55%,#ff5b4a);}
  .gauge-row p{font-size:14.5px;opacity:.85;}
  .kbd{display:inline-block;background:rgba(205,238,240,.12);border:1px solid rgba(205,238,240,.25);
    border-radius:6px;padding:1px 9px;font-weight:700;font-size:13px;}

  /* tips */
  .tips{margin-top:26px;display:grid;gap:14px;}
  .tip{display:flex;gap:13px;align-items:flex-start;font-size:15px;}
  .tip .ico{
    flex:0 0 auto;width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--abyss);background:rgba(255,210,63,.92);
    font-family:var(--font-display);font-size:14px;line-height:1;
    box-shadow:0 0 0 4px rgba(255,210,63,.12);
  }

  /* phases */
  .flow{margin-top:26px;display:flex;flex-direction:column;gap:0;}
  .phase{position:relative;padding:0 0 26px 30px;border-left:2px solid rgba(63,208,230,.4);}
  .phase:last-child{border-left-color:transparent;padding-bottom:0;}
  .phase::before{content:"";position:absolute;left:-8px;top:2px;width:14px;height:14px;
    border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(63,208,230,.15);}
  .phase h3{font-size:17px;margin-bottom:3px;}
  .phase p{font-size:14.5px;opacity:.85;}
  .phase .big{color:var(--gold);font-family:var(--font-display);font-size:16px;letter-spacing:.04em;}

  /* footer cta */
  .final{
    text-align:center;
    background:radial-gradient(ellipse at 50% 120%, #0a4f63, #021018 60%);
  }
  .final h2{margin-bottom:16px;}
  footer{padding:34px 24px 50px;text-align:center;font-size:13px;color:rgba(205,238,240,.62);}
  .footer-copy{font-weight:700;letter-spacing:.03em;}
  .footer-links{margin-top:8px;display:flex;column-gap:10px;row-gap:3px;flex-wrap:wrap;align-items:center;justify-content:center;line-height:1.35;}
  .footer-links a{color:rgba(255,210,63,.82);text-decoration:none;line-height:1.35;}
  .footer-links a::after{content:"/";color:rgba(205,238,240,.32);margin-left:10px;}
  .footer-links a:last-child::after{content:"";margin-left:0;}

  .danger{color:var(--danger);}
  .gold{color:var(--gold);}
  .teal{color:var(--teal);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .bubble,.ambient-fish__fish,.logo,.logo .gyaku,.logo .fish{animation:none;}
    .ambient-fish__fish{left:var(--static-left);right:auto;transform:none;}
    .ambient-fish__fish.is-reverse{transform:scaleX(-1);}
  }