:root{
    --bg:#1B070D;
    --accent:#E3C27E;
    --accent-lt:#F5DFA8;
    --accent-dp:#C49A4E;
    --text:#F8EDEF;
    --muted:#C7A6AC;
    --ink:#2A0A12;
  }

  *{box-sizing:border-box;margin:0;padding:0}

  html,body{height:100%;overflow:hidden}

  body{
    font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo",sans-serif;
    background:var(--bg);
    color:var(--text);
    word-break:keep-all;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* ---------- stage = one screen ---------- */
  .stage{
    position:relative;
    height:100vh;height:100dvh;
    width:100%;
    overflow:hidden;
    isolation:isolate;
    display:flex;flex-direction:column;
    text-align:center;
  }

  /* background image with slow ambient drift */
  .stage::before{
    content:"";position:absolute;inset:-3%;z-index:-3;
    background:url("../../assets/bg.png") center/cover no-repeat;
    animation:drift 28s ease-in-out infinite alternate;
  }
  /* centered vignette for readability */
  .stage::after{
    content:"";position:absolute;inset:0;z-index:-2;
    background:
      radial-gradient(70% 80% at 50% 50%,rgba(27,7,13,.86) 0%,rgba(27,7,13,.5) 45%,rgba(27,7,13,.12) 75%,rgba(27,7,13,0) 100%),
      linear-gradient(180deg,rgba(27,7,13,.55) 0%,rgba(27,7,13,0) 26% 64%,rgba(27,7,13,.7) 100%);
  }
  @keyframes drift{
    from{transform:scale(1)}
    to{transform:scale(1.08)}
  }

  /* floating mint motes */
  .mote{position:absolute;z-index:-1;border-radius:50%;
    background:radial-gradient(circle,rgba(227,194,126,.9),rgba(227,194,126,0));
    opacity:0;animation:floatup linear infinite}
  .mote:nth-child(1){width:6px;height:6px;left:18%;bottom:-10px;animation-duration:15s;animation-delay:0s}
  .mote:nth-child(2){width:4px;height:4px;left:38%;bottom:-10px;animation-duration:20s;animation-delay:4s}
  .mote:nth-child(3){width:8px;height:8px;left:62%;bottom:-10px;animation-duration:17s;animation-delay:7s}
  .mote:nth-child(4){width:3px;height:3px;left:80%;bottom:-10px;animation-duration:23s;animation-delay:10s}
  .mote:nth-child(5){width:5px;height:5px;left:50%;bottom:-10px;animation-duration:18s;animation-delay:2s}
  @keyframes floatup{
    0%{transform:translateY(0);opacity:0}
    12%{opacity:.85}
    88%{opacity:.5}
    100%{transform:translateY(-90vh);opacity:0}
  }

  /* ---------- layout ---------- */
  .brand{
    margin:0 auto clamp(20px,3.4vh,32px);
    width:clamp(128px,16vw,176px);height:auto;display:block;
    filter:drop-shadow(0 6px 22px rgba(227,194,126,.28));
    animation:up .85s .1s cubic-bezier(.2,.7,.2,1) both;
  }

  .content{
    margin:auto;
    padding:0 clamp(22px,5vw,40px);
    max-width:720px;width:100%;
    display:flex;flex-direction:column;align-items:center;
  }

  .eyebrow{
    display:inline-flex;align-items:center;gap:11px;
    font-size:clamp(.72rem,1.6vw,.82rem);font-weight:700;
    letter-spacing:.2em;color:var(--accent);text-transform:uppercase;
    margin-bottom:clamp(16px,2.6vh,24px);
    animation:up .8s .25s cubic-bezier(.2,.7,.2,1) both;
  }
  .eyebrow::before,.eyebrow::after{content:"";width:26px;height:1.5px;background:var(--accent);opacity:.7}

  h1{
    font-size:clamp(2rem,5.6vw,3.7rem);
    font-weight:800;letter-spacing:-.022em;line-height:1.18;
    text-shadow:0 2px 34px rgba(0,0,0,.5);
    animation:up .9s .38s cubic-bezier(.2,.7,.2,1) both;
  }
  h1 .accent{
    background:linear-gradient(100deg,var(--accent-lt) 8%,#FBEFCF 50%,var(--accent) 92%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  .lead{
    margin-top:clamp(14px,2.2vh,20px);
    font-size:clamp(.98rem,1.9vw,1.16rem);
    color:var(--muted);max-width:40ch;line-height:1.6;
    animation:up .9s .5s cubic-bezier(.2,.7,.2,1) both;
  }

  /* 307 reply-code chip */
  .code-chip{
    margin-top:clamp(20px,3vh,28px);
    display:inline-flex;align-items:center;gap:14px;
    padding:11px 13px 11px 20px;
    border:1px solid rgba(227,194,126,.4);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(227,194,126,.12),rgba(227,194,126,.03));
    backdrop-filter:blur(4px);
    animation:up .9s .62s cubic-bezier(.2,.7,.2,1) both;
  }
  .code-chip .label{font-size:.92rem;color:var(--muted);font-weight:600}
  .code-chip .num{
    font-size:1.5rem;font-weight:800;letter-spacing:.04em;color:var(--ink);
    background:linear-gradient(180deg,var(--accent-lt),var(--accent));
    padding:4px 16px;border-radius:9px;line-height:1.25;
    box-shadow:0 6px 18px -6px rgba(227,194,126,.75);
    position:relative;overflow:hidden;
  }
  .code-chip .num::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);
    transform:translateX(-120%);animation:sheen 3.4s 1.4s ease-in-out infinite;
  }

  /* CTA */
  .cta{
    margin-top:clamp(22px,3.4vh,34px);
    display:inline-flex;flex-direction:column;align-items:center;gap:2px;
    text-align:center;text-decoration:none;
    padding:clamp(15px,2.2vh,19px) clamp(26px,4.5vw,44px);
    border-radius:14px;color:var(--ink);
    background:linear-gradient(135deg,var(--accent-lt) 0%,var(--accent) 46%,var(--accent-dp) 100%);
    box-shadow:0 16px 40px -14px rgba(227,194,126,.8),inset 0 1px 0 rgba(255,255,255,.5);
    position:relative;overflow:hidden;
    transition:transform .18s ease,box-shadow .18s ease;
    animation:up .9s .76s cubic-bezier(.2,.7,.2,1) both,glow 3s 1.8s ease-in-out infinite;
  }
  .cta-row{display:flex;align-items:center;justify-content:center;gap:10px}
  .cta-icon{
    width:clamp(22px,4.6vw,26px);height:clamp(22px,4.6vw,26px);
    display:block;border-radius:7px;flex:none;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .cta .m{font-size:clamp(1rem,2.4vw,1.16rem);font-weight:800;letter-spacing:-.01em}
  .cta .s{font-size:clamp(.82rem,1.8vw,.94rem);font-weight:600;opacity:.78}
  .cta::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
    transform:translateX(-130%);animation:sheen 4.2s 2.2s ease-in-out infinite;
  }
  .cta:hover{transform:translateY(-3px);box-shadow:0 22px 52px -14px rgba(227,194,126,.95),inset 0 1px 0 rgba(255,255,255,.5)}
  .cta:active{transform:translateY(-1px)}
  .cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

  .note{
    margin-top:14px;font-size:clamp(.78rem,1.6vw,.86rem);color:rgba(159,190,177,.85);
    animation:up .9s .9s cubic-bezier(.2,.7,.2,1) both;
  }

  /* ---------- keyframes ---------- */
  @keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
  @keyframes brandIn{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
  @keyframes sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
  @keyframes glow{
    0%,100%{box-shadow:0 16px 40px -14px rgba(227,194,126,.65),inset 0 1px 0 rgba(255,255,255,.5)}
    50%{box-shadow:0 18px 54px -12px rgba(227,194,126,1),inset 0 1px 0 rgba(255,255,255,.5)}
  }

  @media (max-width:640px){
    .cta{width:100%}
    .code-chip{width:100%;justify-content:center}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important}
    .brand,.eyebrow,h1,.lead,.code-chip,.cta,.note{opacity:1!important;transform:none!important}
  }