*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-family-subtext);color:var(--n2);background:var(--background-color);-webkit-font-smoothing:antialiased;line-height:1.55}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--space-8)}
a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--btn-padding-y) var(--btn-padding-x);border-radius:var(--radius-box-ms);font-weight:var(--btn-font-weight);font-size:var(--btn-font-size);transition:var(--btn-transition);cursor:pointer;border:var(--btn-border-width) solid transparent;font-family:var(--btn-font-family)}
.btn-p{background:var(--primary-color);color:#fff;box-shadow:var(--btn-primary-shadow)}
.btn-p:hover{box-shadow:var(--btn-primary-shadow-hover)}
.btn-g{background:#fff;color:var(--n2);border:1.5px solid var(--border-color)}
.btn-g:hover{color:var(--primary-color)}

.shead{max-width:720px;margin:0 auto var(--space-12);text-align:center}
.shead p{color:var(--muted);font-size:var(--fs-body-lg);margin-top:var(--space-3)}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Hero */
.hero{position:relative;overflow:hidden}
.hg{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-12);align-items:center}
.hl h1{margin:var(--space-5) 0}
.hl h1 .g{background:var(--primary-color);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl p.ld{font-size:var(--fs-body-lg);color:var(--muted);max-width:540px;margin:0 0 var(--space-6)}
.hcta{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hmk{position:relative}
.hmk img{width:100%;display:block}
.hmk-card{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-nav);padding:var(--space-5);box-shadow:var(--shadow);transform:rotateY(-4deg) rotateX(2deg)}
.hh{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--space-4);border-bottom:1px solid var(--border-color);margin-bottom:var(--space-4)}
.hh b{font-size:var(--fs-small);color:var(--n2);font-weight:800}
.liv{display:flex;align-items:center;gap:var(--space-1);font-size:var(--fs-caption);color:var(--color-success);font-weight:700;letter-spacing:.04em}
.liv i{width:6px;height:6px;border-radius:50%;background:var(--color-success);animation:pulse 2s ease-in-out infinite}
.hk{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-bottom:var(--space-3)}
.hkb{background:var(--background-color);border-radius:var(--radius-badge);padding:var(--space-3) var(--space-3)}
.hkb .l{font-size:var(--fs-caption);color:var(--muted);font-weight:700;letter-spacing:.04em}
.hkb .v{font-size:var(--fs-body-lg);font-weight:800;color:var(--n2);margin-top:var(--space-1);letter-spacing:-.02em}
.hkb .v.c{color:var(--primary-color)}
.hmap{background:var(--surface-blue);border-radius:var(--radius-badge);height:148px;position:relative;overflow:hidden}
.hmap .gd{position:absolute;inset:0;background-image:none}
.hmap .zn{position:absolute;border:1.5px dashed rgba(var(--primary-rgb),.6);border-radius:var(--radius-box-icon);background:rgba(var(--primary-rgb),.04)}
.hmap .z1{top:18px;left:30px;width:84px;height:50px}
.hmap .z2{top:78px;right:36px;width:70px;height:46px;border-color:rgba(22,163,74,.6);background:rgba(22,163,74,.05)}
.hmap .dt{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--primary-color);box-shadow:0 0 8px rgba(var(--primary-rgb),.7);animation:pulse 2s ease-in-out infinite}
.hmap .dt:nth-child(3){top:30px;left:62px;animation-delay:.2s}
.hmap .dt:nth-child(4){top:90px;left:130px;animation-delay:.5s}
.hmap .dt:nth-child(5){top:54px;right:80px;animation-delay:.7s}
.hmap .dt:nth-child(6){top:106px;right:54px;animation-delay:.9s;background:var(--color-danger);box-shadow:var(--shadow-1)}
.hmap .dt:nth-child(7){top:70px;left:96px;animation-delay:1.1s}
.hfl{position:absolute;background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-btn);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-3);font-size:var(--fs-caption);font-weight:700;color:var(--n2);display:flex;align-items:center;gap:var(--space-2);animation:floaty 6s ease-in-out infinite}
.hfl .fc{width:24px;height:24px;border-radius:var(--radius-box-icon);background:var(--primary-color);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hfl .fc svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hfl.f1{bottom:30px;left:-18px}
.hfl.f2{top:-12px;right:-14px;animation-delay:2s}
@media(max-width:980px){.hg{grid-template-columns:1fr;gap:var(--space-10)}.hmk-card{transform:none}}

/* Modes */
.mod .shead{max-width:720px;margin:0 auto var(--space-10);text-align:center}
.mod .shead p{margin:var(--space-3) auto 0;text-align:center}

.mod-car{position:relative}
.mod-track{display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--space-2)}
.mod-track::-webkit-scrollbar{display:none}

.mc{flex:0 0 calc((100% - 3*var(--space-5))/4);scroll-snap-align:start;background:none;border:0;border-radius:0;padding:0;position:relative;transition:.25s}
.mc:hover{transform:none;box-shadow:none}
.mc .mf{height:240px;margin-bottom:var(--space-4);border:0;border-radius:var(--radius-nav);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;transition:.25s}
.mc .mf img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius-nav)}
.mc .mf:has(img){height:auto;aspect-ratio:16/10}
.mc .mf svg{width:100%;height:auto;display:block}
.mc .mtg{position:static;display:inline;font-size:20px;font-weight:var(--font-weight-semibold);letter-spacing:0;color:var(--muted);text-transform:none;margin-right:var(--space-2)}
.mc h3{display:inline;font-size:20px}
.mc p{margin-top:var(--space-2);font-size:var(--fs-small);color:var(--muted);line-height:var(--line-height-body)}

.mod-nav{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-8)}
.mod-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-color);background:#fff;color:var(--n2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.mod-arrow svg{width:18px;height:18px}
.mod-arrow:hover:not(:disabled){border-color:var(--primary-color);color:var(--surface);box-shadow:var(--shadow-1);background:var(--primary-color)}
.mod-arrow:disabled{opacity:.35;cursor:default}

@media(max-width:980px){.mc{flex-basis:calc((100% - 2*var(--space-5))/3)}}
@media(max-width:760px){.mc{flex-basis:calc((100% - var(--space-5))/2)}.mc .mf{height:200px}}
@media(max-width:520px){.mc{flex-basis:82%}}

/* Challenges */

/* Feature Row */
.fr{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin:0 auto}
.fr.flip .ft{order:2}
.fr.flip .fv{order:1}
.ft .eyebrow{margin-bottom:var(--space-4)}
.ft p.fl{font-size:var(--fs-body-lg);color:var(--muted);line-height:var(--line-height-body);margin-bottom:var(--space-6)}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.ft ul li{font-size:var(--fs-small);color:var(--n2);display:flex;gap:var(--space-3);align-items:flex-start;line-height:1.55}
.ft ul li:before{content:"";width:18px;height:18px;border-radius:50%;flex:0 0 auto;margin-top:var(--space-1);background:rgba(var(--primary-rgb),.1) url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.600098 4.59998L4.59539 8.59998L12.6001 0.599976' stroke='%232563FF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px auto no-repeat}
@media(max-width:880px){.fr{grid-template-columns:1fr;gap:var(--space-10)}.fr.flip .ft{order:1}.fr.flip .fv{order:2}}

.fv img{display:block;width:100%;height:auto;border-radius:var(--radius-nav)}

/* Operator Story */

/* White-label */

/* Pricing Teaser */
.pt-s{background:var(--background-color)}
.pt-c{max-width:920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-8) var(--space-10);background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);flex-wrap:wrap}
.pt-l{flex:1;min-width:240px}
.pt-l .eyebrow{margin-bottom:var(--space-2)}
.pt-l h3{margin:var(--space-2) 0}
.pt-l p{font-size:var(--fs-small);color:var(--muted);line-height:var(--line-height-body)}
.pt-l p b{color:var(--n2);font-weight:700}


/* Reveal */
.rev{opacity:0;transform:translateY(20px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev,.hfl,.hmap .dt{animation:none;opacity:1;transform:none;transition:none}}

/* 768px–980px */
@media (min-width:768px) and (max-width:980px){
  .hg{grid-template-columns:1.05fr 1fr;gap:var(--space-8)}
}

/* ≤768px */
@media (max-width:768px){
  .wrap{padding:0 var(--container-pad)}
  .shead,
  .mod .shead{margin-bottom:var(--space-3)}
  .hl h1{margin-top:var(--space-4);margin-bottom:var(--space-4)}
  .ft .eyebrow{margin-bottom:0}
  .mod-nav{margin-top:var(--space-3)}
}

/* ≤600px */
@media (max-width:600px){
  .shead h2{margin-bottom:var(--space-4)}
  .hl p.ld,
  .shead p,
  .ft p.fl{font-size:var(--fs-body)}
  .pt-c{flex-direction:column;align-items:center;text-align:center;padding:var(--space-8) var(--space-6)}
  .pt-l{flex:0 1 auto;min-width:0}
}

/* ≤520px */
@media (max-width:520px){
  .mc{flex-basis:100%}
}

/* ≤420px */
@media (max-width:420px){
  .btn{padding:var(--space-3) var(--space-6);font-size:var(--fs-small)}
}