/* r3 shared skeleton: hero eclipse, straight devices, tap-to-live, stickers,
   glowing rail, C-style prices, form, dock. Each page skins it. */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:"SF Pro Display","Helvetica Neue",-apple-system,BlinkMacSystemFont,sans-serif;
  color:#1E1C19;background:#EDEFF1;overflow-x:hidden}

.jost{font-family:"Jost",sans-serif}
.wm{font-weight:500;letter-spacing:-.02em;display:inline-flex;align-items:baseline;
  white-space:nowrap;color:inherit;text-decoration:none}
.wm .dot{border-radius:50%;background:#1FA4F5;display:inline-block}
.wm.m{font-size:21px}.wm.m .dot{width:5.4px;height:5.4px;margin-left:2.5px}

nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:12px 20px;color:#F2F5F8;
  transition:background .3s ease,color .3s ease}
nav.lit{color:#1E1C19;background:rgba(242,243,244,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.05)}
nav .go{display:inline-flex;align-items:center;min-height:38px;padding:0 17px;border-radius:99px;
  background:#1FA4F5;color:#fff;font-size:13.5px;font-weight:500;text-decoration:none;
  box-shadow:0 6px 18px -8px rgba(31,164,245,.9)}
@media(min-width:880px){nav{padding:14px 5vw}}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
  padding:0 28px;border-radius:99px;background:#1FA4F5;color:#fff;text-decoration:none;
  font-size:16.5px;font-weight:500;box-shadow:0 14px 34px -10px rgba(31,164,245,.9)}
.cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── hero: black at the top, the full eclipse below ── */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden;color:#F2F5F8;
  text-align:center;background:linear-gradient(180deg,#050608,#0A0D11 52%,#080A0D)}
.hcopy{position:relative;z-index:6;padding:72px 22px 0;max-width:860px;margin:0 auto}
.giant{font-weight:500;letter-spacing:-.045em;line-height:.95;font-size:clamp(72px,23vw,270px)}
.giant i{font-style:normal;color:#1FA4F5}
.hero h1{margin-top:8px;font-size:clamp(20px,5.4vw,32px);font-weight:500;
  letter-spacing:-.022em;line-height:1.16}
.hero .sub{margin:10px auto 0;font-size:14.5px;line-height:1.5;color:rgba(226,238,250,.7);max-width:430px}
.hero .sub b{font-weight:500;color:#fff}
.hero .cta{margin-top:16px;width:min(100%,330px)}
.hero .after{margin-top:10px;font-size:12.5px;color:rgba(226,238,250,.55)}
.planet{position:absolute;left:50%;bottom:-33%;transform:translateX(-50%);
  width:min(690px,152vw);aspect-ratio:1;border-radius:50%;z-index:2}
.planet .ring{position:absolute;inset:0;border-radius:50%;
  box-shadow:0 -8px 30px 3px rgba(120,212,255,.9), 0 -26px 90px 12px rgba(38,174,255,.55),
    0 -60px 190px 26px rgba(38,174,255,.22)}
.planet .ball{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(105% 105% at 50% 30%, #16191E, #0B0D10 76%)}
.planet .ball canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.glass{backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.bdot{width:6px;height:6px;border-radius:50%;background:#2FB1FF;box-shadow:0 0 14px #2FB1FF;flex:none}
.halchip{position:absolute;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:6;border-radius:15px;display:flex;align-items:center;gap:10px;padding:13px 15px;
  font-size:12.5px;color:rgba(240,244,248,.88);line-height:1.4;text-align:left}
.halchip .go{font-weight:500;color:#6FC6FF;white-space:nowrap;margin-left:auto}
@media(min-width:880px){
  .halchip{left:50%;right:auto;transform:translateX(-50%);min-width:480px;bottom:26px}
  .planet{bottom:-46%}
}

/* ── devices: straight, big, tappable ── */
.devwrap{position:relative;margin:30px auto 0;display:flex;justify-content:center}
.phone{position:relative;width:min(315px,82vw);border-radius:46px;padding:10px;
  background:linear-gradient(180deg,#2B2F34,#131619 74%);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 0 0 1.5px rgba(126,138,150,.4),
    0 60px 110px -40px rgba(10,16,24,.5), 0 18px 44px -22px rgba(10,16,24,.32)}
.phone .scr{position:relative;border-radius:37px;overflow:hidden;background:#0B0D10}
.phone img{display:block;width:100%;height:auto}
.phone .notch{position:absolute;z-index:3;top:18px;left:50%;transform:translateX(-50%);
  width:34%;height:24px;border-radius:99px;background:#101317}
img.warm{filter:brightness(1.14) saturate(1.05)}
img.hqshot{filter:brightness(1.07)}
.laptop{position:relative;width:min(700px,94vw)}
.laptop .scr{position:relative;border-radius:16px 16px 0 0;padding:9px 9px 0;
  background:linear-gradient(180deg,#2B2F34,#15181D);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 0 0 1.5px rgba(126,138,150,.4),
    0 60px 120px -40px rgba(0,4,12,.85), 0 0 100px rgba(38,174,255,.14)}
.laptop img{display:block;width:100%;height:auto;border-radius:9px 9px 0 0}
.laptop .base{height:13px;margin:0 -4.5%;border-radius:2px 2px 14px 14px;
  background:linear-gradient(180deg,#3A4046,#23272C 70%,#15181C);
  box-shadow:0 10px 30px -12px rgba(0,4,12,.8)}

/* the tap indicator */
.tapchip{position:absolute;z-index:7;left:50%;bottom:26px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;
  border:0;border-radius:99px;cursor:pointer;white-space:nowrap;
  background:rgba(8,12,17,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 30px -12px rgba(0,6,14,.7);
  font:500 12.5px/1 "SF Pro Display","Helvetica Neue",-apple-system,sans-serif;color:#fff}
.tapchip i{font-style:normal;position:relative;width:8px;height:8px;border-radius:50%;
  background:#2FB1FF;box-shadow:0 0 12px #2FB1FF;flex:none}
.tapchip i::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid rgba(47,177,255,.7);animation:tapring 1.8s ease-out infinite}
@keyframes tapring{0%{transform:scale(.6);opacity:1}80%,100%{transform:scale(1.8);opacity:0}}
.tapchip.went{background:rgba(10,120,60,.82)}
.tapchip.went i::after{animation:none;border-color:transparent}
@media(prefers-reduced-motion:reduce){.tapchip i::after{animation:none}}

/* pop-out stickers (the 9:41 move) */
.stick{position:absolute;z-index:6;display:inline-flex;flex-direction:column;align-items:center;
  padding:13px 18px;border-radius:16px;background:#0B0E12;color:#fff;transform:rotate(-5deg);
  box-shadow:0 18px 40px -14px rgba(4,8,14,.7),0 0 0 1px rgba(255,255,255,.08)}
.stick b{font-size:23px;font-weight:500;letter-spacing:-.02em;line-height:1;color:#6FC6FF}
.stick em{font-style:normal;font-family:"Jost",sans-serif;font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;margin-top:6px;opacity:.9;white-space:nowrap;color:#fff}
.stick.blue{background:#1FA4F5;transform:rotate(5deg);
  box-shadow:0 18px 40px -14px rgba(31,164,245,.75)}
.stick.blue b{color:#fff}
.devwrap .stick{right:max(4px,calc(50% - 235px));top:-10px}
.devwrap .stick.low{right:auto;left:max(4px,calc(50% - 235px));top:56%;bottom:auto}
@media(min-width:880px){
  .devwrap .stick{right:calc(50% - 310px);top:16px}
  .devwrap .stick.low{left:calc(50% - 310px);top:52%}
}

/* C-style price row */
.pricerow{margin-top:26px;display:flex;justify-content:center;align-items:baseline;gap:10px;flex-wrap:wrap}
.pricerow b{font-size:clamp(34px,9vw,44px);font-weight:300;letter-spacing:-.03em}
.pricerow s{font-size:13px;opacity:.5}
.pricerow span{font-size:13px;opacity:.7}
.fine{margin-top:6px;font-size:12.5px;opacity:.6;line-height:1.5}

/* the glowing rail */
.rail{position:relative;z-index:6;display:flex;justify-content:center;gap:clamp(24px,8vw,46px);
  padding:30px 10px 34px}
.rl{display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:"Jost",sans-serif;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:#9aa2ab;text-decoration:none}
.rl i{position:relative;width:9px;height:9px;border-radius:50%;background:#C4CAD1;font-style:normal}
.rl.on{color:#1177C4}
.rl.on i{background:#1FA4F5;box-shadow:0 0 0 5px rgba(31,164,245,.16),0 0 16px rgba(31,164,245,.8)}
.rl.on i::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(31,164,245,.55);animation:tapring 2.2s ease-out infinite}
.dark-rail .rl{color:rgba(233,238,244,.4)}
.dark-rail .rl i{background:rgba(233,238,244,.25)}
.dark-rail .rl.on{color:#6FC6FF}

/* form + footer + dock */
.formwrap{max-width:640px;margin:0 auto;text-align:center}
.formcard{margin:24px auto 0;text-align:left;background:linear-gradient(180deg,#FFFFFF,#FBFCFD);
  border:1px solid rgba(30,44,60,.065);border-radius:22px;padding:24px 20px;
  box-shadow:0 30px 70px -40px rgba(30,60,90,.4)}
.field{display:block;margin-top:13px}
.field span{display:block;font-family:"Jost",sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:500;color:#8b9199;margin-bottom:7px}
.field input,.field textarea{width:100%;min-height:48px;padding:12px 15px;border-radius:12px;
  border:1px solid rgba(30,44,60,.14);background:#fff;font:inherit;font-size:16px;color:#1E1C19}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid #1FA4F5;outline-offset:1px;border-color:transparent}
.formcard button{margin-top:20px;width:100%;min-height:54px;border:0;border-radius:99px;cursor:pointer;
  background:#1FA4F5;color:#fff;font:inherit;font-size:16px;font-weight:500;
  box-shadow:0 14px 32px -12px rgba(31,164,245,.85)}
.after2{margin-top:10px;font-size:12.5px;color:#8a8a90;text-align:center;line-height:1.5}
.chiprow{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tchip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:99px;
  background:rgba(255,255,255,.8);border:1px solid rgba(30,44,60,.09);
  font-size:12.5px;font-weight:500;color:#3d444c}
.tchip i{font-style:normal;width:5px;height:5px;border-radius:50%;background:#1FA4F5;flex:none}
@media(min-width:880px){.formcard{padding:32px 34px 28px}}

footer{padding:54px 22px 120px;text-align:center;color:rgba(233,238,244,.6);
  background:radial-gradient(120% 80% at 50% 118%, rgba(47,177,255,.34), rgba(47,177,255,.06) 48%, transparent 74%), #07090C}
footer .sentence{font-size:15.5px;line-height:1.55;max-width:460px;margin:0 auto;color:#F2F5F8}
footer .wm{margin-top:24px;font-size:23px;color:#F2F5F8}
footer .wm .dot{width:5.8px;height:5.8px;margin-left:2.8px}
footer .meta{margin-top:16px;font-family:"Jost",sans-serif;font-size:9px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(233,238,244,.35)}

.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;
  gap:12px;padding:10px 10px 10px 18px;border-radius:18px;
  background:rgba(10,13,17,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px -20px rgba(0,0,0,.55);
  transform:translateY(130%);transition:transform .35s ease;color:#fff}
.dock.on{transform:none}
.dock .dtx{font-size:12.5px;line-height:1.35;color:rgba(240,246,252,.85)}
.dock .dtx b{color:#fff;font-weight:500}
.dock a{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:0 18px;border-radius:13px;background:#1FA4F5;color:#fff;font-size:14px;font-weight:500;
  text-decoration:none;white-space:nowrap}
@media(min-width:880px){.dock{display:none}}

/* mockup-only: hop between the three iterations */
.switch{position:fixed;left:12px;bottom:88px;z-index:70;display:flex;gap:5px;padding:5px;
  border-radius:99px;background:rgba(10,13,17,.72);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14)}
.switch a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font:500 13px/1 "SF Pro Display",-apple-system,sans-serif;color:rgba(240,246,252,.7);
  text-decoration:none}
.switch a.on{background:#1FA4F5;color:#fff}

/* the narrator chip: rides the device during a live tour */
.tourchip{position:absolute;z-index:9;left:50%;bottom:-24px;transform:translate(-50%,8px);
  display:flex;align-items:center;gap:9px;max-width:min(86vw,340px);width:max-content;
  padding:12px 16px;border-radius:14px;opacity:0;transition:opacity .3s ease,transform .3s ease;
  background:rgba(8,12,17,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(120,205,255,.3);box-shadow:0 18px 44px -16px rgba(0,6,14,.7),
    0 0 30px rgba(38,174,255,.15);
  font:400 13px/1.45 "SF Pro Text","SF Pro Display",-apple-system,sans-serif;
  color:rgba(240,246,252,.95);text-align:left;pointer-events:none}
.tourchip.show{opacity:1;transform:translate(-50%,0)}
.tourchip i{font-style:normal;position:relative;flex:none;width:7px;height:7px;border-radius:50%;
  background:#2FB1FF;box-shadow:0 0 12px #2FB1FF}

/* the statement inks in word by word */
.statement p b,.statement p i{transition:color .6s ease}
.statement p:not(.in) b{color:inherit}
.statement p:not(.in) i{color:inherit}
.statement p.in b:nth-of-type(1){transition-delay:.1s}
.statement p.in b:nth-of-type(2){transition-delay:.5s}
.statement p.in b:nth-of-type(3){transition-delay:.9s}
.statement p.in i{transition-delay:1.4s}

/* explainer pop-ups: quiet background chips that tell you what you're seeing */
.know{position:relative;z-index:5;display:inline-flex;align-items:flex-start;gap:8px;
  margin:18px auto 0;max-width:min(88vw,380px);padding:11px 15px;border-radius:13px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 12px 30px -18px rgba(20,50,80,.35);
  font:400 12.5px/1.5 "SF Pro Text",-apple-system,sans-serif;color:#3d444c;text-align:left}
.know i{font-style:normal;flex:none;width:6px;height:6px;border-radius:50%;margin-top:5px;
  background:#1FA4F5;box-shadow:0 0 10px rgba(31,164,245,.8)}
.know b{font-weight:500;color:#16181B}
.know.ondark{background:rgba(10,16,24,.6);border-color:rgba(120,205,255,.25);color:rgba(230,240,248,.8)}
.know.ondark b{color:#fff}