:root{
    --ink:#12161c;
    --cream:#f8f3e8;
    --cream-2:#eee6d4;
    --white:#ffffff;
    --sky:#5aa9dd;
    --sky-deep:#2c6fa3;
    --sky-bright:#8fc9ec;
    --line: rgba(44,111,163,0.28);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:
      radial-gradient(ellipse at 50% 0%, var(--white) 0%, var(--cream) 55%, var(--cream-2) 100%);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
  }

  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:5;
    opacity:0.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
  }

  .stage{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
  }

  .frame{
    position:fixed;
    inset:18px;
    pointer-events:none;
    z-index:2;
  }
  .frame svg{ width:100%; height:100%; }
  .frame path{
    fill:none;
    stroke:var(--sky-deep);
    stroke-width:1;
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    animation:draw 3.2s cubic-bezier(.2,.8,.2,1) forwards .3s;
    opacity:0.55;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  .content{
    position:relative;
    z-index:3;
    width:100%;
    max-width:760px;
    text-align:center;
  }

  .eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    font-size:11px;
    letter-spacing:0.42em;
    text-transform:uppercase;
    color:var(--sky-deep);
    opacity:0;
    animation:fadeUp .9s ease forwards .4s;
  }
  .eyebrow .bar{ width:28px; height:1px; background:var(--sky-deep); display:inline-block; }

  h1{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(48px, 9vw, 108px);
    line-height:1.02;
    margin:26px 0 8px;
    letter-spacing:0.01em;
    color:var(--ink);
    opacity:0;
    animation:fadeUp 1.1s ease forwards .6s;
  }
  h1 em{
    font-style:italic;
    font-weight:300;
    background:linear-gradient(100deg, var(--sky-deep) 0%, var(--sky-bright) 35%, var(--sky-deep) 60%, var(--sky-bright) 85%);
    background-size:250% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmer 6s linear infinite, fadeUp 1.1s ease forwards .6s;
  }
  @keyframes shimmer{ to{ background-position:-250% center; } }

  .sub{
    font-family:'Jost', sans-serif;
    font-weight:300;
    font-size:15px;
    letter-spacing:0.04em;
    color:#4a5560;
    max-width:440px;
    margin:0 auto 46px;
    line-height:1.85;
    opacity:0;
    animation:fadeUp 1.1s ease forwards .85s;
  }

  .divider{
    width:1px;
    height:44px;
    margin:0 auto 40px;
    background:linear-gradient(var(--sky-deep), transparent);
    opacity:0;
    animation:fadeUp 1s ease forwards 1s;
  }

  .countdown{
    display:flex;
    justify-content:center;
    gap:clamp(14px,4vw,42px);
    margin-bottom:56px;
    opacity:0;
    animation:fadeUp 1.1s ease forwards 1.1s;
  }
  .unit{ text-align:center; min-width:64px; }
  .unit .num{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(34px,6vw,56px);
    color:var(--ink);
    line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .unit .lbl{
    display:block;
    margin-top:10px;
    font-size:10px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--sky-deep);
  }
  .sep{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(28px,5vw,44px);
    color:var(--sky-deep);
    opacity:0.5;
    align-self:flex-start;
    margin-top:2px;
  }

  .socials{
    margin-top:8px;
    display:flex;
    justify-content:center;
    gap:26px;
    opacity:0;
    animation:fadeUp 1.1s ease forwards 1.3s;
  }
  .socials a{
    color:#5a6470;
    text-decoration:none;
    font-size:10px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    position:relative;
    padding-bottom:4px;
  }
  .socials a::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:0; height:1px;
    background:var(--sky-deep);
    transition:width .35s ease;
  }
  .socials a:hover{ color:var(--sky-deep); }
  .socials a:hover::after{ width:100%; }

  .contact-line{
    margin-top:34px;
    font-size:12px;
    letter-spacing:0.06em;
    color:#5a6470;
    opacity:0;
    animation:fadeUp 1.1s ease forwards 1.45s;
  }
  .contact-line a{
    color:var(--sky-deep);
    text-decoration:none;
    border-bottom:1px solid var(--line);
    padding-bottom:1px;
    transition:color .3s ease, border-color .3s ease;
  }
  .contact-line a:hover{ color:var(--sky-bright); border-color:var(--sky-deep); }

  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
  }

  @media (max-width:560px){
    .frame{ inset:10px; }
  }

  a:focus-visible{
    outline:1px solid var(--sky-deep);
    outline-offset:3px;
  }