@font-face{font-family:"Fira Sans";src:url("assets/fonts/FiraSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("assets/fonts/FiraSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("assets/fonts/FiraSans-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

:root{--green:#4cfd00;--purple:#8722df;--ink:#030304}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#000}
body{overflow:hidden;font-family:"Fira Sans",Arial,sans-serif;color:#fff}
a{color:inherit;text-decoration:none}
.viewport{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#000}
.stage{position:absolute;left:50%;top:0;transform-origin:top center;overflow:hidden;background:
  radial-gradient(ellipse 68% 60% at 56% 4%,rgba(146,36,235,.93) 0%,rgba(109,23,178,.82) 25%,rgba(65,13,105,.54) 50%,rgba(34,8,52,.25) 70%,rgba(12,7,16,0) 84%),
  radial-gradient(ellipse 56% 58% at 31% 24%,rgba(72,15,116,.68) 0%,rgba(45,9,72,.40) 47%,rgba(22,8,31,0) 79%),
  linear-gradient(180deg,#1a151d 0%,#151018 45%,#0c0910 70%,#060606 100%);
}
.stage--desktop{width:1600px;height:900px}
.stage--mobile{display:none;width:375px;height:750px}
.logo,.lollipop,.arrow,.stamp{position:absolute;display:block;height:auto}
.d-logo{left:68px;top:39px;width:168px;z-index:20}
.nav{position:absolute;top:57px;left:1282px;display:flex;gap:68px;z-index:30;align-items:center}
.nav a,.nav span{font-size:10px;line-height:1;font-weight:400;white-space:nowrap}
.nav--disabled{pointer-events:none;user-select:none}
.target{position:absolute;width:22px;height:22px;border:1.2px solid #fff;border-radius:50%;z-index:20}
.target::before,.target::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.target::before{width:30px;height:1.2px}.target::after{width:1.2px;height:30px}
.d-target{left:66px;top:109px;transform:scale(.75)}
.d-lollipop{left:154px;top:109px;width:1274px;z-index:5}
.d-arrow{left:730px;top:72px;width:348px;z-index:12}
.idea{position:absolute;display:grid;place-items:center;background:var(--green);color:#050505;z-index:14}
.idea span{display:block;text-align:center;font-weight:900;font-style:normal;line-height:.92;letter-spacing:-.045em}
.d-idea{left:1137px;top:144px;width:323px;height:151px;border-radius:52% 48% 50% 50% / 50% 50% 50% 50%;transform:rotate(-1.2deg);z-index:4}
.d-idea span{font-size:36px;transform:rotate(-3.4deg) translateY(1px)}
.stamp{animation:spin 14s linear infinite;transform-origin:50% 50%;will-change:transform}
.d-stamp{left:74px;top:367px;width:165px;z-index:16}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stamp{animation:none}}
.hero{position:absolute;z-index:18}
.hero h1,.hero p{margin:0;font-style:normal;font-weight:900}
.d-hero{left:68px;top:585px}
.d-hero h1{font-size:60px;line-height:.91;letter-spacing:0}
.d-hero p{margin-top:20px;font-size:24px;line-height:1;font-weight:900;letter-spacing:0;color:#9b1df0}
.cta{position:absolute;z-index:22}
.hello-pill,.email-pill{position:absolute;display:flex;align-items:center;justify-content:center;color:#050505;font-weight:900;font-style:normal;line-height:1;white-space:nowrap}
.d-cta{left:0;top:0;width:1600px;height:900px;pointer-events:none;z-index:auto}
.d-cta a{pointer-events:auto}
.d-cta .hello-pill{left:883px;top:611px;width:206px;height:63px;background:linear-gradient(180deg,#8b24e9 0%,#7c20cc 100%);border-radius:999px;transform:rotate(3deg);font-size:27px;letter-spacing:0;z-index:4}
.d-cta .email-pill{left:971px;top:665px;width:404px;height:67px;background:var(--green);border-radius:999px;transform:rotate(-4deg);font-size:26px;letter-spacing:0;z-index:22}
.side-code{position:absolute;left:1508px;top:411px;width:31px;height:240px;z-index:18;display:flex;align-items:center;flex-direction:column;gap:9px}
.side-number{font-size:8px;font-weight:400;letter-spacing:.02em;writing-mode:vertical-rl;transform:rotate(180deg)}
.barcode{display:block;width:31px;height:154px;background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 2px,#fff 2px 4px,transparent 4px 5px,#fff 5px 6px,transparent 6px 8px,#fff 8px 10px,transparent 10px 12px)}
.side-icons{position:absolute;left:1509px;top:675px;width:30px;z-index:18;display:grid;place-items:center;gap:10px}
.mini-globe{position:relative;display:block;width:26px;height:26px;border:1.3px solid #fff;border-radius:50%}
.mini-globe::before{content:"";position:absolute;inset:3px 8px;border-left:1px solid #fff;border-right:1px solid #fff;border-radius:50%}
.mini-globe::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;background:#fff;box-shadow:0 -5px 0 -0.2px rgba(255,255,255,.9),0 5px 0 -0.2px rgba(255,255,255,.9)}
.mini-target{position:relative;left:auto;top:auto;width:19px;height:19px;transform:scale(.78)}

/* Mobile reference frame: 375 × 750 */
.menu-pill{position:absolute;pointer-events:none;cursor:default;left:291px;top:24px;width:59px;height:32px;padding:0;border:0;border-radius:999px;background:#f7f7f7;z-index:30;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}
.menu-pill i{display:block;width:15px;height:1.5px;background:#171717;border-radius:2px}
.m-logo{left:24px;top:25px;width:116px;z-index:20}
.m-hero{left:24px;top:92px}
.m-hero h1{font-size:38px;line-height:.86;letter-spacing:0}
.m-hero p{margin-top:15px;font-size:20.5px;line-height:1;font-weight:900;letter-spacing:0;color:#9b1df0}
.m-arrow{position:absolute;left:20px;top:205px;width:146px;height:auto;z-index:12}
.m-lollipop{left:25px;top:248px;width:300px;z-index:5}
.m-idea{left:203px;top:227px;width:140px;height:66px;border-radius:52% 48% 50% 50% / 50% 50% 50% 50%;transform:rotate(-1deg);z-index:4}
.m-idea span{font-size:17px;line-height:.92;letter-spacing:0;transform:rotate(-3.5deg)}
.m-stamp{left:25px;top:493px;width:96px;z-index:16}

.m-cta{left:0;top:0;width:375px;height:750px;pointer-events:none;transform:translateY(-18px)}
.m-cta a{pointer-events:auto}
.m-cta .hello-pill{left:92px;top:608px;width:143px;height:46px;background:linear-gradient(180deg,#8b24e9 0%,#7c20cc 100%);border-radius:999px;transform:rotate(6.7deg);font-size:17px;letter-spacing:0}
.m-cta .email-pill{left:43px;top:657px;width:278px;height:46px;background:var(--green);border-radius:999px;transform:rotate(-4deg);font-size:17px;letter-spacing:0}



@media(max-width:700px){
  .stage--desktop{display:none}
  .stage--mobile{display:block}
}


/* Right-side identity block: visible HTML text for indexing + supplied SVG graphics. */
.side-block{position:absolute;z-index:18;pointer-events:none}
.side-graphics{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.side-label{position:absolute;color:#fff;font-family:"Fira Sans",Arial,sans-serif;font-weight:400;font-style:normal;white-space:nowrap;line-height:1;transform:rotate(-90deg);transform-origin:left top;z-index:2}
.d-side-block{left:1500px;top:328px;width:32px;height:400px}
.d-side-label{left:12.1px;top:142px;font-size:9.75px;letter-spacing:0}
.m-side-block{left:333px;top:489px;width:16px;height:131px}
.m-side-label{left:5.8px;top:86px;font-size:5.5px;letter-spacing:.2px}

.stage--mobile{background:
  radial-gradient(ellipse 105% 58% at 52% 39%,rgba(93,16,147,.80) 0%,rgba(67,10,105,.62) 34%,rgba(35,6,54,.34) 57%,rgba(14,5,20,0) 78%),
  linear-gradient(180deg,#0b0710 0%,#100617 44%,#0a050e 72%,#050505 100%);
}


/* iPhone / mobile viewport edge fill: continue the approved mobile background
   outside the scaled 375×750 stage so Safari never reveals black side gutters. */
@media(max-width:700px){
  html,
  body,
  .viewport{
    background:
      radial-gradient(ellipse 105% 58% at 52% 39%,rgba(93,16,147,.80) 0%,rgba(67,10,105,.62) 34%,rgba(35,6,54,.34) 57%,rgba(14,5,20,0) 78%),
      linear-gradient(180deg,#0b0710 0%,#100617 44%,#0a050e 72%,#050505 100%);
  }
}