:root{
  --bg:#050505; --bg2:#090909; --panel:#0c0c0c;
  --fg:#f4f4f1; --muted:#858581; --dim:#343431;
  --line:rgba(255,255,255,.105); --soft:rgba(255,255,255,.045);
  --max:1460px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  font-synthesis:none;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;image-rendering:auto}
button{font:inherit}
.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}
.line{border-top:1px solid var(--line)}
.nav{
  height:78px;position:fixed;z-index:90;left:0;right:0;top:0;
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(5,5,5,.94),rgba(5,5,5,.68) 64%,transparent);
  backdrop-filter:saturate(120%) blur(14px)
}
.navin{display:flex;align-items:center;justify-content:space-between;gap:26px}
.logo img{width:112px}
.links{display:flex;align-items:center;gap:26px;color:#90908c;font-size:13px}
.links a{transition:.2s}.links a:hover{color:#fff}
.actions{display:flex;gap:10px}
.btn{
  min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #ecece8;
  background:#f4f4f0;color:#070707;font-weight:750;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.25s ease
}
.btn:hover{transform:translateY(-2px)}
.btn.outline{background:rgba(255,255,255,.018);color:#f4f4f0;border-color:var(--line)}
.btn.outline:hover{background:#f4f4f0;color:#050505}
.eyebrow{
  display:flex;align-items:center;gap:12px;color:#777773;
  text-transform:uppercase;letter-spacing:.17em;font-size:10px
}
.eyebrow:before{content:"";width:28px;height:1px;background:#777773}
.title{
  font-size:110px;line-height:.92;letter-spacing:0;
  font-weight:800;margin:20px 0 0;text-wrap:balance
}
.title .dim{color:var(--dim)}
.desc{color:var(--muted);font-size:17px;line-height:1.6;max-width:660px;margin-top:24px}

/* motion system */
.reveal{
  opacity:1;
  transform:none;
}
.js .reveal{
  --drift:0px;
  --slideX:0px;
  --rot:0deg;
  opacity:0;
  transform:translate3d(var(--slideX),calc(52px + var(--drift)),0) scale(.975) rotate(var(--rot));
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform 1.08s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity;
}
.js .reveal.in{
  opacity:1;
  transform:translate3d(var(--slideX),var(--drift),0) scale(1) rotate(var(--rot));
}
.motionProgress{
  position:fixed;z-index:100;left:0;top:0;width:2px;height:0;
  background:#fff;opacity:.72;pointer-events:none
}
.heroText,.visual,.heroLamaWrap,.hero:before{will-change:transform,opacity}
.hero .eyebrow,.hero h1,.hero p,.heroBtns,.heroMeta{will-change:transform,opacity}
.referral:after{
  content:"LAMA VPN  ·  LAMA VPN  ·  LAMA VPN";
  position:absolute;left:-8vw;right:auto;bottom:-42px;
  white-space:nowrap;font-size:160px;font-weight:900;letter-spacing:0;
  color:rgba(0,0,0,.035);pointer-events:none;will-change:transform
}
.referral{position:relative;overflow:hidden}


/* HERO */
.hero{
  min-height:100svh;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding-top:78px;
  background:
    radial-gradient(900px 650px at 77% 46%,rgba(255,255,255,.07),transparent 66%),
    linear-gradient(#070707,#050505)
}
.hero:before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--soft) 1px,transparent 1px);
  background-size:84px 84px;opacity:.34;
  mask-image:linear-gradient(to bottom,transparent 5%,#000 42%,transparent 95%)
}
.heroGrid{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(540px,1.08fr);
  align-items:center;gap:22px;padding:40px 0 34px;
  transform:scale(var(--hero-scale,1));opacity:var(--hero-opacity,1);transform-origin:center center
}
.heroText{position:relative}
.hero h1{
  margin:26px 0 0;font-size:124px;line-height:.84;
  letter-spacing:0;font-weight:800;text-wrap:balance
}
.hero h1>span{display:block}.hero h1 .heroLine.mutedLine{color:#343431}
.hero p{
  max-width:670px;color:#a2a29d;font-size:21px;
  line-height:1.48;letter-spacing:0;margin:30px 0 0
}
.heroBtns{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
.heroMeta{
  display:flex;gap:30px;flex-wrap:wrap;margin-top:42px;padding-top:22px;border-top:1px solid var(--line);
  color:#70706c;font-size:11px;text-transform:uppercase;letter-spacing:.09em
}
.heroMeta b{color:#eee;font-weight:650}
.visual{
  min-height:700px;position:relative;display:grid;place-items:center;isolation:isolate
}
.visual:before,.visual:after{
  content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.10)
}
.visual:before{width:560px;height:560px}
.visual:after{width:420px;height:420px;border-color:rgba(255,255,255,.055)}
.heroLama{
  position:relative;z-index:3;width:min(570px,100%); /* < native 640px; no upscale */
  transform:translateY(18px);filter:none;opacity:1
}
.heroLamaWrap{transform:translate3d(0,0,0)}
.float{
  position:absolute;z-index:4;border:1px solid rgba(255,255,255,.08);background:rgba(7,7,7,.82);
  border-radius:18px;padding:16px 18px 15px;min-width:196px;
  font-size:12px;color:#666661;backdrop-filter:blur(10px);
  box-shadow:0 12px 32px rgba(0,0,0,.25)
}
.float b{
  display:block;color:#f7f7f3;font-size:15px;margin-bottom:6px;font-weight:760;letter-spacing:0
}
.f1{left:18px;top:172px}
.f2{right:8px;top:265px}
.f3{left:72px;bottom:96px}

/* LOGO RAIL */
.services{overflow:hidden;border-bottom:1px solid var(--line);background:#070707}
.serviceTrack{
  display:flex;width:max-content;align-items:center;gap:16px;padding:18px 0;
  animation:marquee 34s linear infinite
}
@keyframes marquee{to{transform:translateX(-50%)}}
.servicePill{
  width:210px;height:62px;border:1px solid var(--line);border-radius:15px;
  display:flex;align-items:center;justify-content:center;padding:0 18px;color:#a2a29e;background:#080808;text-align:center
}

.servicePill b{font-size:13px;font-weight:700;color:#eaeae7;letter-spacing:0}

/* SECTIONS */
.section{padding:108px 0;border-bottom:1px solid var(--line)}
.headGrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:end}
.headGrid .desc{margin:0 0 8px}

/* WHY - sticky editorial layout */
.whyGrid{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;margin-top:58px;align-items:start
}
.sticky{position:sticky;top:126px}
.userCount{font-size:13px;color:#777773;margin-top:30px}
.userCount strong{color:#f0f0ed;font-size:28px;letter-spacing:0}
.featureList{border-top:1px solid var(--line)}
.feature{
  min-height:280px;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:80px 1fr auto;gap:26px;align-items:center;padding:42px 0
}
.featureNo{font-size:11px;color:#575754}
.feature h3{font-size:58px;letter-spacing:0;margin:0 0 16px}
.feature p{margin:0;color:#858581;line-height:1.55;max-width:590px}
.featureMetric{
  min-width:180px;text-align:right;font-size:72px;font-weight:850;letter-spacing:0
}
.featureMetric small{display:block;font-size:10px;color:#666662;letter-spacing:.14em;text-transform:uppercase;margin-top:8px}

/* ACCOUNT / PAYMENT */
.accountGrid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px
}
.accountPanel{
  min-height:445px;border:1px solid var(--line);border-radius:30px;padding:34px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#0e0e0e,#080808)
}
.panelLabel{font-size:10px;color:#666662;letter-spacing:.14em;text-transform:uppercase}
.accountPanel h3{font-size:56px;letter-spacing:0;line-height:.98;margin:24px 0 14px}
.accountPanel p{color:#868681;line-height:1.55;max-width:520px}
.loginMock{
  position:absolute;left:34px;right:34px;bottom:34px;border:1px solid #202020;border-radius:22px;
  background:#090909;padding:20px
}
.loginMock h4{margin:0 0 7px;font-size:21px}.loginMock small{color:#70706c}
.mockBtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.mockBtn{height:48px;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:13px}
.mockBtn.white{background:#f3f3ef;color:#050505}
.payWays{display:flex;gap:9px;flex-wrap:wrap;position:absolute;left:34px;bottom:40px}
.payWays span{border:1px solid var(--line);padding:11px 14px;border-radius:999px;color:#aaa;font-size:12px}

/* HOW */
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px;border-top:1px solid var(--line)}
.step{
  min-height:300px;padding:30px 30px 36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative
}
.step:first-child{border-left:1px solid var(--line)}
.stepNo{font-size:11px;color:#5e5e5a}.stepArrow{position:absolute;right:28px;top:28px;color:#666;font-size:28px}
.step h3{margin:115px 0 14px;font-size:31px;letter-spacing:0}
.step p{margin:0;color:#83837e;line-height:1.55}

/* WINDOWS */
.windows{
  display:grid;grid-template-columns:.88fr 1.12fr;gap:80px;align-items:center
}
.appFrame{
  min-height:480px;border:1px solid var(--line);border-radius:30px;background:#090909;position:relative;overflow:hidden;
  display:grid;place-items:center
}
.appFrame:after{
  display:none
}
.appHeart{
  position:relative;z-index:3;width:min(82%,420px);max-height:88%;object-fit:contain;
  filter:grayscale(1) contrast(1.08);transform:translateY(4px)
}
.windows h2{font-size:82px;letter-spacing:0;line-height:.92;margin:18px 0}
.windows p{color:#898984;line-height:1.55;max-width:620px}
.version{display:inline-flex;margin-top:17px;border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:#777;font-size:11px}

/* REFERRAL inverted */
.referral{background:#f1f1ed;color:#050505;padding:96px 0}
.refGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end}
.referral .eyebrow{color:#70706b}.referral .eyebrow:before{background:#70706b}
.referral .title{font-size:116px}
.referral .title .dim{color:#aaa9a4}
.referral .desc{color:#555550;margin-bottom:7px}
.referral .btn{background:#050505;color:#f2f2ee;border-color:#050505}
.referral .btn.outline{background:transparent;color:#050505;border-color:rgba(0,0,0,.2)}
.refStats{border-top:1px solid rgba(0,0,0,.18)}
.refRow{display:flex;justify-content:space-between;gap:30px;padding:24px 0;border-bottom:1px solid rgba(0,0,0,.18);font-size:13px}
.refRow span:first-child{color:#666}

/* FAQ */
.faqGrid{display:grid;grid-template-columns:.62fr 1.38fr;gap:58px;margin-top:52px}
.faqSide img{width:min(430px,100%);margin:10px auto 0;filter:none}
.faqList{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:25px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:26px;font-size:21px;letter-spacing:0}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:27px;color:#686864;font-weight:300}
details[open] summary:after{content:"−"}
details p{color:#858580;line-height:1.62;max-width:800px;margin:17px 0 2px}

/* FINAL */
.final{padding:86px 0 42px}
.finalBox{
  min-height:500px;border:1px solid var(--line);border-radius:32px;position:relative;overflow:hidden;
  display:flex;align-items:center;padding:64px;background:
  radial-gradient(620px 460px at 83% 45%,rgba(255,255,255,.07),transparent 68%),#080808
}
.finalCopy{max-width:720px;position:relative;z-index:3}
.finalCopy h2{font-size:112px;line-height:.86;letter-spacing:0;margin:20px 0}
.finalCopy p{color:#858580;line-height:1.55;max-width:570px}
.finalLama{position:absolute;right:2%;bottom:-34px;width:460px;filter:none}
.finalBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
footer{
  padding:30px 0 0;display:grid;grid-template-columns:auto 1fr;gap:30px;
  color:#5f5f5a;font-size:11px
}
.footerLinks{display:flex;gap:17px;flex-wrap:wrap;justify-content:flex-end}
.footerLinks a:hover{color:#fff}

@media(max-width:1050px){
  .links{display:none}
  .heroGrid{grid-template-columns:1fr}.visual{position:absolute;right:-24vw;top:15%;width:70vw;opacity:.42}
  .heroText{z-index:7}.hero h1{font-size:92px}.hero p{max-width:650px}
  .headGrid,.whyGrid,.accountGrid,.windows,.refGrid,.faqGrid{grid-template-columns:1fr}
  .sticky{position:relative;top:auto}.feature{grid-template-columns:55px 1fr}.featureMetric{grid-column:2;text-align:left}
  .refGrid{gap:45px}
}

@media(max-width:900px) and (min-width:721px){
  .hero h1{font-size:70px}
  .heroLineInner{white-space:nowrap}
  .visual{right:-25vw;top:21%;width:68vw;opacity:.32}
  .hero p{max-width:610px}
  .finalBox{min-height:560px;padding:40px}
  .finalCopy{max-width:520px}
  .finalCopy h2{font-size:68px}
  .finalCopy p{max-width:370px}
  .finalLama{right:-72px;width:330px;opacity:.54}
}

@media(max-width:1280px) and (min-width:1051px){
  .hero h1{font-size:100px}
  .title{font-size:88px}
  .feature h3{font-size:50px}
  .featureMetric{font-size:62px}
  .accountPanel h3{font-size:48px}
  .windows h2{font-size:70px}
  .referral .title{font-size:94px}
  .finalCopy h2{font-size:94px}
}

/* Desktop card-stack transition: the content deck moves over the opening scene. */
@media(min-width:721px){
  main{position:relative;isolation:isolate}
  .hero{position:sticky;top:0;z-index:0}
  main>.services,
  main>.section,
  main>.referral,
  main>.final{
    position:relative;
    z-index:2;
    border-radius:28px 28px 0 0;
    box-shadow:0 -24px 70px rgba(0,0,0,.62),0 -1px 0 rgba(255,255,255,.11)
  }
  main>.services{margin-top:-28px}
  main>.section,main>.referral,main>.final{margin-top:-22px}
}

@media(max-width:720px){
  .wrap{width:min(var(--max),calc(100% - 30px))}
  .nav{height:66px}.logo img{width:96px}.actions .outline{display:none}.btn{min-height:40px;padding:0 14px;font-size:12px}
  .hero{padding-top:66px;min-height:850px}.heroGrid{padding:80px 0}.hero h1{font-size:52px}.hero p{max-width:100%;font-size:16px}
  .visual{right:-40vw;top:8%;width:100vw;opacity:.42}.visual:before{width:470px;height:470px}.visual:after{width:350px;height:350px}
  .float{display:none}
  .section{padding:96px 0}.title{font-size:48px}.headGrid{gap:30px}
  .servicePill{width:148px}
  .whyGrid{margin-top:55px;gap:40px}.feature{grid-template-columns:38px 1fr;gap:14px;padding:34px 0;min-height:280px}
  .featureMetric{grid-column:2}
  .accountGrid{margin-top:48px}.accountPanel{min-height:500px;padding:24px}.loginMock{left:24px;right:24px;bottom:24px}.payWays{left:24px;bottom:26px}
  .steps{grid-template-columns:1fr}.step,.step:first-child{border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:270px}.step h3{margin-top:75px}
  .windows{gap:35px}.appFrame{min-height:350px}
  .referral{padding:90px 0}.referral .title{font-size:48px}
  .faqGrid{gap:35px}.faqSide{display:none}
  .final{padding-top:80px}.finalBox{min-height:650px;padding:32px;align-items:flex-start}.finalLama{width:370px;right:-120px;bottom:-15px;opacity:.42}
  footer{grid-template-columns:1fr}.footerLinks{justify-content:flex-start}
}
/* v7 stronger motion + denser composition */
.headGrid.reveal{--slideX:-18px}
.accountPanel.reveal:nth-child(1){--slideX:-28px;--rot:-.35deg}
.accountPanel.reveal:nth-child(2){--slideX:28px;--rot:.35deg}
.step.reveal:nth-child(1){--slideX:-24px}
.step.reveal:nth-child(2){--slideX:0px}
.step.reveal:nth-child(3){--slideX:24px}
.feature.reveal:nth-child(odd){--slideX:28px}
.feature.reveal:nth-child(even){--slideX:-28px}
.faqSide.reveal{--slideX:-22px}
.finalBox.reveal{--slideX:0px}
.section{
  background:
    radial-gradient(700px 360px at var(--sx,80%) 10%,rgba(255,255,255,.025),transparent 70%),
    var(--bg);
}
.featureList,.accountGrid,.steps,.faqGrid{position:relative}
.feature,.accountPanel,.step,.faqList{will-change:transform}
.serviceTrack{animation-duration:26s}
.servicePill{transition:transform .3s ease,border-color .3s ease,background .3s ease}
.servicePill:hover{transform:translateY(-5px) scale(1.02);border-color:rgba(255,255,255,.2);background:#0d0d0d}
.visual:before{width:610px;height:610px}
.visual:after{width:455px;height:455px}
.float{box-shadow:0 18px 60px rgba(0,0,0,.35)}


/* v8 detail motion + sharper typography */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
.heroLine{overflow:hidden;display:block;padding-bottom:.055em;margin-bottom:-.055em}
.heroLineInner{
  display:block;
  transform:translate3d(0,112%,0);
  animation:heroLineIn 1.05s var(--ease-out) forwards;
  will-change:transform;
}
.heroLine:nth-child(2) .heroLineInner{animation-delay:.11s}
@keyframes heroLineIn{to{transform:translate3d(0,0,0)}}

.heroText>.eyebrow{
  opacity:0;transform:translateY(12px);
  animation:microIntro .7s .08s var(--ease-out) forwards
}
.heroText>p{
  opacity:0;transform:translateY(18px);
  animation:microIntro .85s .26s var(--ease-out) forwards
}
.heroBtns{
  opacity:0;transform:translateY(16px);
  animation:microIntro .8s .36s var(--ease-out) forwards
}
.heroMeta{
  opacity:0;transform:translateY(12px);
  animation:microIntro .75s .48s var(--ease-out) forwards
}
@keyframes microIntro{to{opacity:1;transform:translate3d(0,0,0)}}

.visual:before{
  animation:ringRotateA 18s linear infinite;
  transform-origin:center;
  will-change:transform
}
.visual:after{
  animation:ringRotateB 26s linear infinite reverse;
  transform-origin:center;
  will-change:transform
}
@keyframes ringRotateA{to{transform:rotate(360deg) scale(1.025)}}
@keyframes ringRotateB{to{transform:rotate(360deg) scale(.985)}}

.float{
  overflow:hidden;
  animation:floatCard 7.2s ease-in-out infinite;
  will-change:transform
}
.f2{animation-delay:-2.1s}.f3{animation-delay:-4.2s}
@keyframes floatCard{50%{transform:translate3d(0,-4px,0)}}

.btn{position:relative;overflow:hidden}
.btn:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.34) 48%,transparent 72%);
  transform:translateX(-140%);transition:transform .65s var(--ease-out);
  pointer-events:none
}
.btn:hover:after{transform:translateX(140%)}
.btn:hover{letter-spacing:.01em}

.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500}
.featureNo,.stepNo,.panelLabel,.version{font-family:"JetBrains Mono",ui-monospace,monospace}

.feature{
  position:relative;
  transition:border-color .35s ease,background .35s ease
}
.feature:before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:#fff;opacity:.52;transition:width .8s var(--ease-out)
}
.feature:hover:before{width:100%}
.feature:hover{background:linear-gradient(90deg,rgba(255,255,255,.018),transparent 74%)}
.featureMetric{
  transition:transform .55s var(--ease-out),color .35s ease;
  transform-origin:right center
}
.feature:hover .featureMetric{transform:scale(1.055);color:#fff}

.accountPanel{
  transition:border-color .35s ease,transform .35s var(--ease-out),background .35s ease
}
.accountPanel:hover{
  border-color:rgba(255,255,255,.20);
  background:linear-gradient(150deg,#121212,#090909)
}
.loginMock{
  transition:transform .55s var(--ease-out),border-color .35s ease;
  will-change:transform
}
.accountPanel:hover .loginMock{transform:translateY(-7px);border-color:rgba(255,255,255,.18)}
.mockBtn{transition:transform .25s ease,background .25s ease,border-color .25s ease}
.mockBtn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.26)}

.step{overflow:hidden;transition:background .35s ease}
.step:before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.03));
  transition:height .55s var(--ease-out)
}
.step:hover:before{height:100%}
.stepArrow{transition:transform .45s var(--ease-out),color .25s ease}
.step:hover .stepArrow{transform:translate3d(5px,5px,0);color:#fff}

details{transition:background .3s ease,padding .3s ease}
details:hover{background:rgba(255,255,255,.012)}
summary:after{transition:transform .35s var(--ease-out),color .25s ease}
details[open] summary:after{transform:rotate(180deg);color:#fff}
details p{
  animation:faqAnswer .42s var(--ease-out) both;
  transform-origin:top
}
@keyframes faqAnswer{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

.servicePill{position:relative;overflow:hidden}
.servicePill:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);opacity:.55
}
.servicePill:hover:after{transform:scaleX(1)}


.referral .title,.referral .desc,.refStats,.referral .btn{
  will-change:transform
}
.finalLama{will-change:transform}
.finalBox:before{
  content:"";position:absolute;inset:-35% auto auto 58%;
  width:520px;height:520px;border:1px solid rgba(255,255,255,.075);border-radius:50%;
  animation:finalRing 18s linear infinite
}
@keyframes finalRing{to{transform:rotate(360deg) scale(1.05)}}

.nav{
  transition:height .35s var(--ease-out),background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent
}
.nav.compact{
  height:64px;background:rgba(5,5,5,.88);border-bottom-color:var(--line)
}

::selection{background:#f4f4f0;color:#050505}

/* Production typography and responsive pass. The visual language above is the
   supplied concept; these rules only make it readable and robust on devices. */
body *{letter-spacing:0}
.links{font-size:14px}
.btn{font-size:14px}
.eyebrow,.featureNo,.stepNo,.panelLabel,.version{font-size:12px}
.userCount,footer{font-size:13px}
.servicePill b{font-size:14px}
.mockBtn,.payWays span{font-size:13px}
.faqList a{text-decoration:underline;text-underline-offset:3px}

/* Alternating content deck. Each tone has its own surfaces and controls. */
.tone-dark{
  --fg:#f4f4f1;--muted:#858581;--dim:#343431;
  --line:rgba(255,255,255,.105);--soft:rgba(255,255,255,.045)
}
.section.tone-dark,.referral.tone-dark,.final.tone-dark{background:#050505;color:#f4f4f1}
.tone-light{
  --fg:#0a0a09;--muted:#5e5e59;--dim:#b7b7b1;
  --line:rgba(0,0,0,.14);--soft:rgba(0,0,0,.045);
  background:#f1f1ed!important;color:#090909
}
.tone-light .title .dim{color:#aaa9a4}
.tone-light .eyebrow,.tone-light .featureNo,.tone-light .stepNo,.tone-light .panelLabel{color:#6f6f69}
.tone-light .eyebrow:before{background:#777771}
.tone-light .desc,.tone-light p,.tone-light details p{color:#575752}
.tone-light .userCount{color:#686862}
.tone-light .userCount strong{color:#090909}
.tone-light .accountPanel{
  background:linear-gradient(150deg,#fafaf7,#e8e8e3);
  border-color:rgba(0,0,0,.15);box-shadow:0 22px 70px rgba(0,0,0,.08)
}
.tone-light .loginMock{background:#f5f5f1;border-color:rgba(0,0,0,.14)}
.tone-light .mockBtn{border-color:rgba(0,0,0,.14)}
.tone-light .mockBtn.white{background:#080808;color:#f4f4f0}
.tone-light .payWays span,.tone-light .version{color:#4e4e49;border-color:rgba(0,0,0,.16)}
.tone-light .appFrame{background:#e5e5e0;border-color:rgba(0,0,0,.15);box-shadow:0 26px 75px rgba(0,0,0,.09)}
.tone-light .appFrame:after{color:#d3d3cd}
.tone-light .btn{background:#080808;color:#f4f4f0;border-color:#080808}
.tone-light .btn.outline{background:transparent;color:#080808;border-color:rgba(0,0,0,.22)}
.tone-light details:hover{background:rgba(0,0,0,.025)}
.tone-light summary:after,.tone-light details[open] summary:after{color:#52524d}

.referral.tone-dark .eyebrow{color:#777773}
.referral.tone-dark .eyebrow:before{background:#777773}
.referral.tone-dark .title .dim{color:#343431}
.referral.tone-dark .desc{color:#858581}
.referral.tone-dark .btn{background:#f4f4f0;color:#070707;border-color:#ecece8}
.referral.tone-dark .btn.outline{background:transparent;color:#f4f4f0;border-color:rgba(255,255,255,.14)}
.referral.tone-dark .refStats{border-color:rgba(255,255,255,.14)}
.referral.tone-dark .refRow{border-color:rgba(255,255,255,.14)}
.referral.tone-dark .refRow span:first-child{color:#777773}
.referral.tone-dark:after{color:rgba(255,255,255,.025)}
.final.tone-dark{overflow:hidden;isolation:isolate}

@media(max-width:1050px){
  .hero{min-height:900px}
  .heroGrid{padding-top:86px}
  .hero h1{font-size:92px}
  .hero p{max-width:650px}
  .visual{right:-20vw;top:17%;width:72vw}
  .title,.referral .title{font-size:74px}
  .headGrid,.whyGrid,.accountGrid,.windows,.refGrid,.faqGrid{gap:44px}
}

@media(max-width:720px){
  .wrap{width:calc(100% - 28px)}
  .nav{height:66px;background:rgba(5,5,5,.92)}
  .navin{gap:12px}
  .logo img{width:98px}
  .actions{gap:7px}
  .actions .outline{display:none}
  .actions .btn{min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap}

  .hero{min-height:790px;padding-top:66px;align-items:flex-start}
  .heroGrid{min-height:724px;padding:72px 0 46px;display:block}
  .heroText{max-width:100%}
  .hero h1{margin-top:22px;font-size:52px;line-height:.9}
  .hero p{max-width:100%;margin-top:24px;font-size:16px;line-height:1.58}
  .heroBtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:26px}
  .heroBtns .btn{width:100%;min-width:0;min-height:46px;padding:0 12px;font-size:13px;text-align:center}
  .heroBtns .btn:nth-child(n+3){grid-column:1/-1}
  .heroMeta{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px;margin-top:28px;padding-top:18px;font-size:11px}
  .visual{right:-152px;top:255px;width:430px;min-height:430px;opacity:.26}
  .visual:before{width:410px;height:410px}
  .visual:after{width:305px;height:305px}
  .heroLama{width:390px}
  .float{display:none}

  .services{position:relative;z-index:3}
  .serviceTrack{padding:14px 0}
  .servicePill{width:156px;height:54px;border-radius:12px}

  .section{padding:76px 0}
  .headGrid{gap:24px}
  .title,.referral .title{margin-top:16px;font-size:48px;line-height:.96}
  .desc{margin-top:0;font-size:16px;line-height:1.6}

  .whyGrid{margin-top:42px;gap:30px}
  .userCount{margin-top:0}
  .userCount strong{font-size:30px}
  .feature{min-height:0;grid-template-columns:42px 1fr;gap:13px;padding:30px 0}
  .feature h3{font-size:32px;line-height:1.05;margin-bottom:12px}
  .feature p{font-size:15px}
  .featureMetric{grid-column:2;min-width:0;text-align:left;font-size:44px}

  .accountGrid{margin-top:38px;gap:14px}
  .accountPanel{min-height:0;padding:24px;border-radius:20px}
  .accountPanel h3{font-size:40px;line-height:1;margin-top:20px}
  .accountPanel p{font-size:15px}
  .loginMock{position:relative;left:auto;right:auto;bottom:auto;margin-top:34px;padding:17px;border-radius:16px}
  .loginMock h4{font-size:19px}
  .mockBtns{grid-template-columns:1fr;margin-top:16px}
  .mockBtn{height:46px}
  .payWays{position:relative;left:auto;bottom:auto;margin-top:30px}

  .steps{grid-template-columns:1fr;margin-top:38px}
  .step,.step:first-child{min-height:220px;padding:26px 24px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .step h3{margin-top:66px;font-size:28px}

  .windows{gap:34px}
  .appFrame{min-height:290px;border-radius:20px}
  .appHeart{width:min(86%,280px);max-height:270px}
  .windows h2{font-size:48px;line-height:.96;margin:16px 0}

  .referral{padding:76px 0}
  .refGrid{gap:36px}
  .referral:after{font-size:90px;bottom:-18px}
  .refRow{display:grid;grid-template-columns:1fr;gap:6px;padding:18px 0}

  .faqGrid{margin-top:38px;gap:28px}
  .faqSide{display:none}
  details{padding:21px 0}
  summary{font-size:17px;line-height:1.35}
  details p{font-size:15px}

  .final{padding:64px 0 30px}
  .finalBox{min-height:570px;padding:30px 24px;align-items:flex-start;border-radius:20px}
  .finalCopy h2{font-size:52px;line-height:.9;margin:18px 0}
  .finalCopy p{font-size:16px}
  .finalLama{width:350px;right:-118px;bottom:-20px;opacity:.42}
  .finalBtns{display:grid;grid-template-columns:1fr 1fr;width:100%}
  footer{grid-template-columns:1fr;gap:20px;font-size:12px;line-height:1.55}
  .footerLinks{justify-content:flex-start;gap:13px 18px}
  .reveal{--slideX:0px!important;--rot:0deg!important}
}

@media(max-width:420px){
  .hero{min-height:760px}
  .heroGrid{min-height:694px;padding-top:56px}
  .hero h1{font-size:44px}
  .hero p{font-size:15px}
  .heroBtns{grid-template-columns:1fr}
  .heroBtns .btn{grid-column:1!important}
  .visual{right:-150px;top:250px;width:380px;opacity:.22}
  .heroLama{width:345px}
  .title,.referral .title{font-size:41px}
  .feature h3{font-size:28px}
  .accountPanel h3{font-size:35px}
  .windows h2{font-size:42px}
  .finalCopy h2{font-size:45px}
  .finalBtns{grid-template-columns:1fr}
}

@media(max-width:350px){
  .wrap{width:calc(100% - 22px)}
  .actions .btn{padding-inline:11px;font-size:12px}
  .hero h1{font-size:39px}
  .hero p{font-size:14px}
  .title,.referral .title{font-size:36px}
  .feature{grid-template-columns:34px 1fr}
  .feature h3{font-size:25px}
}

@media(max-height:650px) and (max-width:720px){
  .hero{min-height:620px}
  .heroGrid{min-height:554px;padding-top:38px;padding-bottom:26px}
  .hero h1{font-size:40px}
  .hero p{margin-top:18px;line-height:1.45}
  .heroBtns{margin-top:18px}
  .heroMeta{margin-top:18px}
  .visual{display:none}
}

@media(max-height:780px) and (min-width:901px){
  .heroGrid{padding:18px 0 22px}
  .visual{min-height:570px}
  .hero h1{font-size:88px}
  .hero p{margin-top:18px;font-size:18px}
  .heroBtns{margin-top:22px}
  .heroMeta{margin-top:24px;padding-top:16px}
}