/* Shared 3D building blocks for every theme's landing page. Colours come from the
   theme tokens (--primary, --surface ...); each theme CSS gives them its own look. */
html,body{overflow-x:clip}
.l3-page{position:relative;z-index:1}
.l3-sec{position:relative;padding:clamp(56px,8vw,112px) 0}
.l3-sec.tight{padding:clamp(36px,5vw,64px) 0}
.l3-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.l3-in{width:min(1200px,100% - 32px);margin-inline:auto}
.l3-head{max-width:740px;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.l3-head.left{margin-left:0;text-align:left}
.l3-kicker{display:inline-flex;align-items:center;gap:.45rem;font:700 .72rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--primary);padding:.55rem .85rem;border-radius:99px;background:color-mix(in srgb,var(--primary) 11%,transparent);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent)}
.l3-kicker .ic{width:14px;height:14px}
.l3-h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.75rem,3.7vw,3rem);line-height:1.08;letter-spacing:-.025em;margin:.95rem 0 .75rem}
.l3-sub{color:var(--muted);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.65;margin:0}
.l3-grad{background:linear-gradient(100deg,var(--primary),var(--primary2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.l3-cards{display:grid;gap:clamp(14px,1.6vw,22px)}
.l3-c2{grid-template-columns:repeat(2,minmax(0,1fr))}.l3-c3{grid-template-columns:repeat(3,minmax(0,1fr))}.l3-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.l3-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.l3-check{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.75rem}
.l3-check li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.5}
.l3-check li .ic{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary);margin-top:1px}
.l3-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;background:linear-gradient(145deg,var(--primary),var(--primary2));box-shadow:0 10px 24px -10px var(--primary),inset 0 -3px 6px rgba(0,0,0,.18),inset 0 2px 2px rgba(255,255,255,.35)}
.l3-ic .ic{width:24px;height:24px}

/* ---- 3D platform icons ---- */
.l3-p3d{display:inline-grid;place-items:center;position:relative}
.l3-p3d .platform-dot{width:var(--s,64px);height:var(--s,64px);border-radius:28%;box-shadow:0 calc(var(--s,64px)*.08) 0 rgba(0,0,0,.22),0 calc(var(--s,64px)*.3) calc(var(--s,64px)*.45) calc(var(--s,64px)*-.18) rgba(10,12,30,.55),inset 0 -4px 7px rgba(0,0,0,.22),inset 0 2px 2px rgba(255,255,255,.5)}
.l3-p3d .platform-dot:not(.plat-3d){font-size:calc(var(--s,64px)*.36)}
.l3-cloud{position:absolute;inset:0;pointer-events:none}
.l3-cloud .l3-p3d{position:absolute;left:var(--x);top:var(--y);animation:l3float var(--t,6s) ease-in-out var(--d,0s) infinite}
@keyframes l3float{0%,100%{transform:translate3d(0,0,0) rotate(var(--r,-8deg))}50%{transform:translate3d(0,-16px,0) rotate(calc(var(--r,-8deg) * -1))}}

/* ---- tilt & reveal (JS adds .l3-js on <html>) ---- */
.l3-stage{perspective:1400px;perspective-origin:50% 40%}
[data-tilt]{transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[data-tilt].on{transition:transform .08s linear}
[data-tilt] .l3-z{transform:translateZ(40px)}
.l3-js [data-rv]{opacity:0;transform:translate3d(0,34px,0) rotateX(8deg);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rd,0s)}
.l3-js [data-rv].in{opacity:1;transform:none}
.l3-js [data-rv="left"]{transform:translate3d(-40px,0,0)}.l3-js [data-rv="right"]{transform:translate3d(40px,0,0)}
.l3-js [data-rv="zoom"]{transform:scale(.9)}
.l3-js [data-rv].in{transform:none}

/* ---- marquee ---- */
.l3-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.l3-track{display:flex;gap:14px;width:max-content;animation:l3mq var(--mq,40s) linear infinite}
.l3-marquee:hover .l3-track{animation-play-state:paused}
.l3-track.rev{animation-direction:reverse}
@keyframes l3mq{to{transform:translateX(-50%)}}
.l3-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.05rem .55rem .55rem;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-weight:700;white-space:nowrap}
.l3-chip .platform-dot{width:34px;height:34px}

/* ---- counters ---- */
.l3-stat b{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.02em}
.l3-stat span{display:block;color:var(--muted);font-size:.9rem;margin-top:.45rem}

/* ---- 3D cube ---- */
.l3-cube{--c:150px;width:var(--c);height:var(--c);position:relative;transform-style:preserve-3d;animation:l3spin 18s linear infinite}
.l3-cube>i{position:absolute;inset:0;display:grid;place-items:center;border-radius:22%;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 70%,transparent),color-mix(in srgb,var(--surface2) 85%,transparent));border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));box-shadow:inset 0 0 40px color-mix(in srgb,var(--primary) 22%,transparent);backface-visibility:visible}
.l3-cube>i .platform-dot{width:58%;height:58%}
.l3-cube>i:nth-child(1){transform:translateZ(calc(var(--c)/2))}.l3-cube>i:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--c)/2))}.l3-cube>i:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--c)/2))}.l3-cube>i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--c)/2))}.l3-cube>i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--c)/2))}.l3-cube>i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--c)/2))}
@keyframes l3spin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}

/* ---- 3D ring of icons ---- */
.l3-ring{--rr:230px;position:relative;width:calc(var(--rr)*2);height:calc(var(--rr)*2);transform-style:preserve-3d;transform:rotateX(68deg);animation:l3ring 26s linear infinite}
.l3-ring>span{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:rotateZ(calc(var(--i)*360deg/var(--n))) translateY(calc(var(--rr)*-1))}
.l3-ring>span>em{display:block;transform:translate(-50%,-50%) rotateZ(calc(var(--i)*-360deg/var(--n))) rotateX(-68deg)}
.l3-ring>span>em .l3-p3d{animation:l3ringc 26s linear infinite reverse}
@keyframes l3ring{to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes l3ringc{to{transform:rotateZ(0)}}

/* ---- sphere ---- */
.l3-sphere{width:var(--sz,260px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0,color-mix(in srgb,var(--primary2) 70%,#fff) 9%,var(--primary) 46%,color-mix(in srgb,var(--primary) 40%,#000) 100%);box-shadow:inset -24px -30px 60px rgba(0,0,0,.35),inset 12px 10px 30px rgba(255,255,255,.25),0 40px 80px -30px var(--primary)}

/* ---- perspective floor ---- */
.l3-floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:62%;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;background-image:linear-gradient(color-mix(in srgb,var(--primary) 38%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--primary) 38%,transparent) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:linear-gradient(0deg,#000 10%,transparent 85%);mask:linear-gradient(0deg,#000 10%,transparent 85%);animation:l3floor 3.2s linear infinite;pointer-events:none}
@keyframes l3floor{to{background-position:0 56px}}

/* ---- 3D bars ---- */
.l3-bars{display:flex;align-items:flex-end;gap:12px;height:160px}
.l3-bars i{flex:1;height:var(--h);position:relative;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--primary2),var(--primary));transform-origin:bottom;animation:l3bar 1.4s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s);box-shadow:8px 0 0 color-mix(in srgb,var(--primary) 60%,#000)}
@keyframes l3bar{from{transform:scaleY(.05)}}

/* ---- steps ---- */
.l3-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);counter-reset:st;position:relative}
.l3-step{position:relative;counter-increment:st}
.l3-step .l3-n::before{content:counter(st,decimal-leading-zero)}

/* ---- code ---- */
.l3-code{margin:0;font:500 .82rem/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow:auto;padding:1.2rem 1.3rem;border-radius:var(--radius);background:#0c0f1a;color:#d6e2ff;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.l3-code .k{color:#ff8fd8}.l3-code .s{color:#8ef0c2}.l3-code .c{color:#7a85a8}
.l3-dots{display:flex;gap:6px;margin-bottom:.9rem}.l3-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.l3-dots i:nth-child(2){background:#febc2e}.l3-dots i:nth-child(3){background:#28c840}

/* ---- reviews ---- */
.l3-stars{color:#f5b301;letter-spacing:2px;font-size:.95rem}

/* ---- FAQ (shared look, themes recolour) ---- */
.l3-faq details{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:.7rem;padding:0 1.2rem;transition:box-shadow .3s,border-color .3s}
.l3-faq details[open]{border-color:color-mix(in srgb,var(--primary) 40%,var(--border));box-shadow:0 18px 40px -26px var(--primary)}
.l3-faq summary{cursor:pointer;font-weight:700;padding:1.1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.l3-faq summary::-webkit-details-marker{display:none}
.l3-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:1.15rem;transition:transform .3s}
.l3-faq details[open] summary::after{transform:rotate(45deg)}
.l3-faq details p{margin:0 0 1.1rem;color:var(--muted);line-height:1.65}

/* ---- rich footer block ---- */
.l3-foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(20px,3vw,40px);padding:clamp(36px,5vw,60px) 0 10px;border-top:1px solid var(--border)}
.l3-foot h4{margin:0 0 .9rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.l3-foot a{display:block;color:var(--text);text-decoration:none;opacity:.85;margin-bottom:.55rem}.l3-foot a:hover{opacity:1;color:var(--primary)}
.l3-foot .brand-row{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem;margin-bottom:.8rem}
.l3-foot .brand-row a{display:inline-flex;align-items:center;gap:.55rem;margin:0;opacity:1}

@media (max-width:1020px){.l3-c4{grid-template-columns:repeat(2,minmax(0,1fr))}.l3-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.l3-foot{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.l3-split{grid-template-columns:1fr}.l3-c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.l3-c2,.l3-c3,.l3-c4,.l3-steps{grid-template-columns:1fr}.l3-ring{--rr:140px}.l3-cube{--c:110px}.l3-foot{grid-template-columns:1fr 1fr}.l3-foot>div:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.l3-page *,.l3-page *::before,.l3-page *::after,.l3-hero *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.l3-js [data-rv]{opacity:1;transform:none}}