/* usaker v7 — light premium layer. Compositor-only animations (transform/opacity), no images, no web fonts. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- hero: aurora + 3D device stack ---------- */
.v6h{position:relative;isolation:isolate}
.v6h .aurora{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.v6h .aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;opacity:.55;will-change:transform}
.v6h .aurora i:nth-child(1){top:-30vmax;inset-inline-end:-18vmax;background:radial-gradient(circle,rgba(99,102,241,.55),rgba(99,102,241,0) 62%);animation:au1 18s ease-in-out infinite alternate}
.v6h .aurora i:nth-child(2){top:-12vmax;inset-inline-start:-24vmax;background:radial-gradient(circle,rgba(14,165,233,.42),rgba(14,165,233,0) 60%);animation:au2 22s ease-in-out infinite alternate}
.v6h .aurora i:nth-child(3){top:8vmax;inset-inline-end:10vmax;width:44vmax;height:44vmax;background:radial-gradient(circle,rgba(217,70,239,.32),rgba(217,70,239,0) 60%);animation:au3 26s ease-in-out infinite alternate}
:root:not([data-theme="dark"]) .v6h .aurora i{opacity:.34}
@keyframes au1{to{transform:translate3d(-8vmax,6vmax,0) scale(1.12)}}
@keyframes au2{to{transform:translate3d(10vmax,4vmax,0) scale(.92)}}
@keyframes au3{to{transform:translate3d(-6vmax,-5vmax,0) scale(1.2)}}
.v6h.paused .aurora i,.v6h.paused .ph-bars i,.v6h.paused .v6-phone,.v6h.paused .win{animation-play-state:paused}

.v6h h1 .rot span,.v6h h1 .rot{background-size:200% 100%}
.v6h .pill{animation:v6up .7s .05s both}
.v6h .hero-cta{animation:v6up .7s .25s both}
.v6h .stats{animation:v6up .7s .4s both}
.v6h .dev{animation:v6in 1s .15s both}
@keyframes v6up{from{opacity:0;transform:translateY(16px)}}
@keyframes v6in{from{opacity:0;transform:translateY(24px) scale(.97)}}

.v6h .dev{position:relative;perspective:1400px;--rx:0deg;--ry:0deg}
.v6h .win{transform:rotateX(calc(6deg + var(--rx))) rotateY(calc(-12deg + var(--ry)));transform-style:preserve-3d;transition:transform .5s var(--ease);animation:winf 7s ease-in-out infinite}
[dir="rtl"] .v6h .win{transform:rotateX(calc(6deg + var(--rx))) rotateY(calc(12deg + var(--ry)))}
@keyframes winf{50%{translate:0 -10px}}
.v6h .win::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 60%,#38BDF8 75%,#A855F7 88%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
@keyframes spin{to{--ang:360deg}}

/* CSS phone mockup */
.v6-phone{position:absolute;z-index:3;bottom:-56px;inset-inline-end:-22px;width:150px;height:300px;border-radius:30px;padding:8px;background:linear-gradient(160deg,#2A2660,#0B0A24);box-shadow:0 40px 70px -30px rgba(10,8,40,.85),inset 0 0 0 1px rgba(255,255,255,.12);animation:phf 6s ease-in-out infinite;will-change:transform}
@keyframes phf{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
[dir="rtl"] .v6-phone{animation-name:phfr}
@keyframes phfr{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.ph-notch{position:absolute;top:12px;left:50%;width:46px;height:12px;margin-left:-23px;border-radius:10px;background:#05041A;z-index:2}
.ph-scr{height:100%;border-radius:23px;overflow:hidden;background:linear-gradient(180deg,#F6F5FF,#ECEBFE);padding:30px 12px 12px;display:flex;flex-direction:column;gap:9px}
:root[data-theme="dark"] .ph-scr{background:linear-gradient(180deg,#17143D,#0C0A24)}
.ph-top{display:flex;align-items:center;gap:7px}
.ph-top i{width:22px;height:22px;border-radius:7px;background:var(--grad)}
.ph-top b{flex:1;height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.ph-card{border-radius:12px;padding:10px;background:var(--grad);display:grid;gap:6px}
.ph-card span{height:7px;border-radius:4px;background:rgba(255,255,255,.75);width:80%}
.ph-card span+span{width:50%;background:rgba(255,255,255,.45)}
.ph-bars{display:flex;align-items:flex-end;gap:5px;height:64px;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.ph-bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#818CF8,#38BDF8);transform-origin:bottom;animation:bar 2.8s ease-in-out infinite}
.ph-bars i:nth-child(1){height:35%}.ph-bars i:nth-child(2){height:55%;animation-delay:.2s}.ph-bars i:nth-child(3){height:42%;animation-delay:.4s}
.ph-bars i:nth-child(4){height:70%;animation-delay:.6s}.ph-bars i:nth-child(5){height:60%;animation-delay:.8s}.ph-bars i:nth-child(6){height:88%;animation-delay:1s;background:linear-gradient(180deg,#E879F9,#818CF8)}
@keyframes bar{50%{transform:scaleY(.72)}}
.ph-list{display:grid;gap:6px}
.ph-list p{margin:0;height:18px;border-radius:7px;background:var(--surface);border:1px solid var(--line)}
.ph-btn{margin-top:auto;height:26px;border-radius:999px;background:var(--grad);box-shadow:0 8px 18px -8px rgba(99,102,241,.9)}
.f-live{top:-26px;inset-inline-start:30px;z-index:4;font-size:13px;font-weight:700;animation:phf 8s ease-in-out infinite reverse}
.f-live>i{width:10px;height:10px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ---------- section headings ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 14px 6px 12px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--brand);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(129,140,248,.9)}
.sec-head h2{background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 72%,var(--brand)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- animated gradient borders on cards ---------- */
.card.glow,.post.glow,.why .glow,.way.glow,.wk-c{position:relative}
.card.glow::after,.post.glow::after,.why .glow::after,.way.glow::after,.wk-c::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 55%,#38BDF8 72%,#818CF8 82%,#E879F9 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:2}
.card.glow:hover::after,.post.glow:hover::after,.why .glow:hover::after,.way.glow:hover::after,.wk-c:hover::after{opacity:1;animation:spin 3.2s linear infinite}
.post .thumb{overflow:hidden}
.post .thumb img{transition:transform .8s var(--ease)}
.post:hover .thumb img{transform:scale(1.06)}
.card .ic,.svc-ic,.why-ic{transition:transform .5s var(--ease)}
.glow:hover .why-ic,.glow:hover .svc-ic{transform:translateY(-3px) rotate(-6deg)}

/* ---------- process: numbers light up in sequence ---------- */
.steps.in li::before{animation:stepon .6s var(--ease) both}
.steps.in li:nth-child(2)::before{animation-delay:.25s}.steps.in li:nth-child(3)::before{animation-delay:.5s}.steps.in li:nth-child(4)::before{animation-delay:.75s}
.steps.in li:nth-child(5)::before{animation-delay:1s}.steps.in li:nth-child(6)::before{animation-delay:1.25s}.steps.in li:nth-child(7)::before{animation-delay:1.5s}
@keyframes stepon{from{transform:scale(.6);opacity:.2}60%{transform:scale(1.12)}}

/* ---------- marquee edge fade ---------- */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}

/* ---------- inner page heads get the aurora too ---------- */
.phead.stage{isolation:isolate}
.phead.stage::after{content:"";position:absolute;z-index:-1;top:-40%;inset-inline-end:-10%;width:70%;height:180%;pointer-events:none;background:radial-gradient(closest-side,rgba(99,102,241,.28),transparent),radial-gradient(closest-side at 30% 70%,rgba(14,165,233,.2),transparent);animation:au1 20s ease-in-out infinite alternate;will-change:transform}
.phead h1{background:linear-gradient(100deg,var(--ink) 40%,var(--brand) 75%,#C084FC);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- scroll progress (CSS scroll-timeline where supported) ---------- */
.sprog{position:fixed;top:0;inset-inline:0;height:3px;z-index:200;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
[dir="rtl"] .sprog{transform-origin:100% 50%}
@supports (animation-timeline:scroll()){.sprog{animation:sp linear both;animation-timeline:scroll(root)}}
@keyframes sp{to{transform:scaleX(1)}}

/* ---------- scroll-driven reveal for long pages (progressive enhancement) ---------- */
@supports (animation-timeline:view()){
  .prose>h2,.prose>.table-wrap,.prose>figure{animation:v6rev linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes v6rev{from{opacity:.001;transform:translateY(22px)}}

/* ---------- layout fixes ---------- */
@media (max-width:980px){
  .v6-phone{width:118px;height:236px;bottom:-40px;inset-inline-end:-6px;border-radius:24px}
  .ph-scr{border-radius:18px;padding-top:24px}
  .f-live{display:none}
  .v6h .win{transform:none!important}
}
@media (max-width:640px){.v6-phone{display:none}.callw{bottom:14px}}
.hero .stats{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .v6h .aurora i,.v6-phone,.v6h .win,.v6h .win::after,.ph-bars i,.f-live,.f-live>i,.cta.stage::after,.phead.stage::after,.steps.in li::before,.v6h .pill,.v6h .hero-cta,.v6h .stats,.v6h .dev{animation:none!important}
  .card.glow:hover::after,.post.glow:hover::after,.why .glow:hover::after{animation:none}
  .sprog{display:none}
}

/* ---------- v6 fixes ---------- */
.f-live{top:42%;inset-inline-start:-46px}
.sec-dark .chips li:has(>a){border:0;padding:0;background:none}
.sec-dark .chips a{display:inline-block;padding:9px 18px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:background .3s,border-color .3s}
.sec-dark .chips a:hover{background:rgba(139,131,255,.16);border-color:#8B83FF;color:#fff}
.home-wk{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.home-wk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.home-wk{grid-template-columns:1fr}}
.wk-c{transition:transform .4s var(--ease),box-shadow .4s}
.wk-c:hover{transform:translateY(-6px);box-shadow:var(--glow)}
.wk-i{overflow:hidden}.wk-i img{transition:transform .9s var(--ease)}.wk-c:hover .wk-i img{transform:scale(1.05)}

/* ===================== v7: light everywhere ===================== */
/* formerly dark bands → airy light panels */
.sec-dark{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#FFFFFF,#F4F3FD);border-block:1px solid var(--line)}
:root[data-theme="dark"] .sec-dark{background:var(--bg-2)}
.sec-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(600px 300px at 85% 0%,rgba(99,102,241,.10),transparent 70%),radial-gradient(500px 300px at 10% 100%,rgba(14,165,233,.08),transparent 70%)}
.sec-dark .chips li:has(>a){border:0;padding:0;background:none}
.sec-dark .chips a{display:inline-block;padding:9px 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);text-decoration:none;transition:border-color .3s,color .3s,transform .3s var(--ease)}
.sec-dark .chips a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}

/* CTA card: white with a flowing gradient border */
.cta.stage{background:linear-gradient(135deg,#FFFFFF,#F3F2FF)!important}
.cta.stage::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 55%,#38BDF8 72%,#818CF8 84%,#E879F9 94%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 7s linear infinite;pointer-events:none}

/* tech layer: circuit traces with travelling data packets (transform-only) */
.tk{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent);mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent)}
.tk::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(79,70,229,.16) 1px,transparent 1.4px);background-size:28px 28px}
.tk i{position:absolute;height:1px;width:38%;background:linear-gradient(90deg,transparent,rgba(99,102,241,.28),transparent)}
.tk i::after{content:"";position:absolute;top:-2px;left:0;width:26px;height:5px;border-radius:5px;background:linear-gradient(90deg,transparent,#6366F1,#38BDF8);box-shadow:0 0 10px rgba(99,102,241,.7);animation:pkt 5.5s linear infinite}
.tk i:nth-child(1){top:18%;left:4%}.tk i:nth-child(2){top:46%;right:2%;width:30%}.tk i:nth-child(3){top:78%;left:22%;width:34%}
.tk i:nth-child(2)::after{animation-duration:7s;animation-delay:1.5s;background:linear-gradient(90deg,transparent,#A855F7,#E879F9)}
.tk i:nth-child(3)::after{animation-duration:6.2s;animation-delay:3s}
.tk b{position:absolute;width:1px;height:30%;background:linear-gradient(180deg,transparent,rgba(99,102,241,.22),transparent)}
.tk b::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:22px;border-radius:5px;background:linear-gradient(180deg,transparent,#38BDF8);animation:pktv 6s linear infinite}
.tk b:nth-of-type(1){left:12%;top:10%}.tk b:nth-of-type(2){right:16%;top:50%;height:36%}.tk b:nth-of-type(2)::after{animation-delay:2.5s;animation-duration:7.5s}
@keyframes pkt{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(calc(38vw - 26px));opacity:0}}
@keyframes pktv{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(28vh);opacity:0}}
.sec-alt,.sec-dark{position:relative;isolation:isolate}

/* eyebrow gets a terminal caret */
.eyebrow::after{content:"";width:7px;height:2px;margin-inline-start:2px;background:currentColor;align-self:flex-end;margin-bottom:4px;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* cards: scan line on hover */
.card.glow,.post.glow,.why .glow,.wk-c{overflow:hidden}
.card.glow::before,.why .glow::before{transition:opacity .3s}
.why .glow .why-ic{position:relative}
.card.glow:hover .ic,.why .glow:hover .why-ic{box-shadow:0 0 0 6px var(--brand-soft)}

/* ===================== header ===================== */
.hdr{transition:background-color .35s,box-shadow .35s,backdrop-filter .35s}
.hdr.scrolled,.hdr.solid{background:rgba(255,255,255,.82);box-shadow:0 10px 30px -18px rgba(23,21,58,.25)}
:root[data-theme="dark"] .hdr.scrolled,:root[data-theme="dark"] .hdr.solid{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.hdr::before{height:2px;background:linear-gradient(90deg,#38BDF8,#6366F1,#A855F7,#E879F9,#38BDF8);background-size:200% 100%;animation:hline 8s linear infinite}
@keyframes hline{to{background-position:200% 0}}
.hdr::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.55),transparent);transform:translateX(-60%);width:60%;animation:hscan 7s ease-in-out infinite;pointer-events:none}
@keyframes hscan{0%{transform:translateX(-100%)}100%{transform:translateX(220%)}}
@media (min-width:981px){.nav{background:rgba(255,255,255,.72);box-shadow:0 6px 20px -14px rgba(23,21,58,.25)}}
:root[data-theme="dark"] .nav{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.nav a{transition:color .25s,background-color .25s,transform .25s var(--ease)}
.nav a:hover{background:var(--brand-soft);transform:translateY(-1px)}
.hdr .btn-cta{position:relative;overflow:hidden}
.hdr .btn-cta::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;background:conic-gradient(from var(--ang),#38BDF8,#6366F1,#A855F7,#E879F9,#38BDF8);animation:spin 4s linear infinite;filter:blur(6px);opacity:.55}
.hdr .icon-btn{transition:transform .3s var(--ease),border-color .3s,color .3s}
.hdr .icon-btn:hover{transform:translateY(-2px) rotate(-8deg);color:var(--brand);border-color:var(--brand)}
.topbar .dot{animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* ===================== logo: ribbon U (mk7) ===================== */
.mk7{width:44px;height:44px;flex:none;overflow:visible;filter:drop-shadow(0 8px 16px rgba(99,102,241,.28));transition:transform .6s var(--ease)}
.logo:hover .mk7{transform:translateY(-2px) rotate(-6deg)}
@media (prefers-reduced-motion:no-preference){
  .mk7 .mk-l{stroke-dasharray:100;animation:mkdraw 1.1s .1s cubic-bezier(.65,0,.35,1) both}
  .mk7 .mk-r,.mk7 .mk-gap{stroke-dasharray:100;animation:mkdraw .6s 1s cubic-bezier(.65,0,.35,1) both}
  .mk7 .mk-flow{animation:mkflow 3.2s 1.6s linear infinite;opacity:0}
  .mk7 .mk-bg{animation:mkbg 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .logo:hover .mk7 .mk-l{animation:mkdraw .8s cubic-bezier(.65,0,.35,1) both}
  .logo:hover .mk7 .mk-r,.logo:hover .mk7 .mk-gap{animation:mkdraw .5s .55s cubic-bezier(.65,0,.35,1) both}
}
@keyframes mkdraw{from{stroke-dashoffset:100}}
@keyframes mkflow{0%{stroke-dashoffset:100;opacity:0}8%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes mkbg{50%{transform:scale(1.04)}}
.logo .word b span:first-child{background:linear-gradient(180deg,#22D3EE,#6366F1);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===================== footer: light, gentle motion ===================== */
.ftr{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#F7F7FD 0%,#FFFFFF 55%,#F3F2FD 100%)!important;border-top:1px solid var(--line)}
:root[data-theme="dark"] .ftr{background:var(--bg-2)!important}
.ftr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(800px 260px at 50% 0,rgba(99,102,241,.10),transparent 70%)}
.ftr-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ftr .wrap{position:relative;z-index:1}
.ftr-wave{position:absolute;top:0;left:0;width:200%;height:40px;fill:rgba(99,102,241,.07);transform:scaleY(-1) translateX(0);will-change:transform;animation:fwave 24s linear infinite}
.ftr-wave.w2{height:30px;fill:rgba(56,189,248,.07);animation-duration:16s;animation-direction:reverse}
@keyframes fwave{from{transform:scaleY(-1) translateX(0)}to{transform:scaleY(-1) translateX(-50%)}}
.fo{position:absolute;border-radius:50%;will-change:transform}
.fo1{width:460px;height:460px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(99,102,241,.10),transparent 62%);animation:fo1 20s ease-in-out infinite alternate}
.fo2{width:420px;height:420px;bottom:-180px;right:-100px;background:radial-gradient(circle,rgba(217,70,239,.08),transparent 62%);animation:fo2 24s ease-in-out infinite alternate}
.fo3{width:340px;height:340px;bottom:12%;left:40%;background:radial-gradient(circle,rgba(14,165,233,.08),transparent 62%);animation:fo1 28s ease-in-out infinite alternate-reverse}
@keyframes fo1{to{transform:translate3d(120px,70px,0) scale(1.12)}}
@keyframes fo2{to{transform:translate3d(-140px,-50px,0) scale(.9)}}
.fbeam{position:absolute;top:0;left:0;width:28%;height:2px;background:linear-gradient(90deg,transparent,#818CF8,#38BDF8,transparent);animation:fbeam 6.5s ease-in-out infinite}
@keyframes fbeam{0%{transform:translateX(-100%)}100%{transform:translateX(460%)}}
.fs{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:#818CF8;opacity:0;animation:frise 10s linear infinite}
.fs.s0{left:6%}.fs.s1{left:15%;animation-delay:1.2s;animation-duration:12s;background:#38BDF8}.fs.s2{left:24%;animation-delay:3s;background:#C084FC}.fs.s3{left:35%;animation-delay:5s;animation-duration:13s}
.fs.s4{left:47%;animation-delay:.6s;background:#38BDF8}.fs.s5{left:58%;animation-delay:2.4s;animation-duration:11s;background:#E879F9}.fs.s6{left:67%;animation-delay:4.2s}
.fs.s7{left:76%;animation-delay:1.8s;animation-duration:14s;background:#38BDF8}.fs.s8{left:86%;animation-delay:3.6s;background:#C084FC}.fs.s9{left:94%;animation-delay:6s}
@keyframes frise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:.55}80%{opacity:.3}100%{opacity:0;transform:translateY(-520px) scale(1)}}
.ftr h2{color:var(--ink)}
.ftr h2::after{animation:fbar 3.2s ease-in-out infinite;transform-origin:var(--o,left)}
[dir="rtl"] .ftr h2::after{--o:right}
@keyframes fbar{50%{transform:scaleX(1.7)}}
.ftr-grid a{position:relative;display:inline-block;color:var(--ink-2);transition:color .25s,transform .25s var(--ease)}
.ftr-grid a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1.5px;background:var(--grad);transform:scaleX(0);transform-origin:var(--o,left);transition:transform .35s var(--ease)}
[dir="rtl"] .ftr-grid a::after{--o:right}
.ftr-grid a:hover{color:var(--brand);transform:translateX(4px)}
[dir="rtl"] .ftr-grid a:hover{transform:translateX(-4px)}
.ftr-grid a:hover::after{transform:scaleX(1)}
.ftr-grid .logo:hover{transform:none}.ftr-grid .logo::after{display:none}
/* giant wordmark: soft pastel gradient, letters drift in a wave */
.ftr p.ftr-big{position:relative;display:flex;justify-content:center;opacity:1;background:none;-webkit-text-fill-color:initial}
.ftr-big span{display:inline-block;color:transparent;background:linear-gradient(180deg,rgba(99,102,241,.20),rgba(168,85,247,.04) 85%);-webkit-background-clip:text;background-clip:text;animation:fletter 6s ease-in-out infinite;will-change:transform}
.ftr-big .l1{animation-delay:.25s}.ftr-big .l2{animation-delay:.5s}.ftr-big .l3{animation-delay:.75s}.ftr-big .l4{animation-delay:1s}.ftr-big .l5{animation-delay:1.25s}
@keyframes fletter{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ftr p.ftr-big::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);transform:translateX(-100%);animation:fsweep 7s ease-in-out infinite;pointer-events:none}
@keyframes fsweep{60%,100%{transform:translateX(100%)}}
.ftr-base .status i{animation:ping 2.2s infinite}
.ftr-app a{transition:transform .35s var(--ease),box-shadow .35s}
.ftr-app a:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(99,102,241,.6)}
@supports (animation-timeline:view()){.ftr-grid>div,.ftr-app{animation:v6rev linear both;animation-timeline:view();animation-range:entry 0% entry 55%}}

/* ===================== portfolio grid ===================== */
.wk-g{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px}
@media (max-width:980px){.wk-g{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.wk-g{grid-template-columns:1fr!important}}
.wk-i{aspect-ratio:16/10!important;background:#F4F3FD}
.wk-i img{object-fit:cover;object-position:top center}
.wk-t{background:rgba(255,255,255,.92)!important;color:var(--ink)!important;box-shadow:0 4px 14px -6px rgba(23,21,58,.3);backdrop-filter:none!important}
.wk .wk-cta{display:flex!important;align-items:stretch;background:linear-gradient(135deg,#FFFFFF,#F1F0FF);border:1px dashed var(--line-2);text-decoration:none;color:inherit}
.wk-cta .wk-b{justify-content:center;gap:14px;padding:32px}
.wk-cta h3{font-size:22px!important}
.wk-cta .btn{align-self:flex-start;margin-top:6px}
.wk-cta .eyebrow{align-self:flex-start;margin:0}

@media (max-width:640px){.fo3,.fs.s1,.fs.s3,.fs.s5,.fs.s7,.fs.s9,.tk b{display:none}.ftr-wave{height:26px}}
@media (prefers-reduced-motion:reduce){
  .tk i::after,.tk b::after,.eyebrow::after,.hdr::before,.hdr::after,.hdr .btn-cta::before,.topbar .dot,
  .ftr-wave,.fo,.fbeam,.fs,.ftr-big span,.ftr p.ftr-big::after,.ftr h2::after,.ftr-base .status i,.ftr-grid>div,.ftr-app,.cta.stage::after{animation:none!important}
  .fs,.fbeam,.hdr::after{display:none}
}

/* ---------- v7 fixes ---------- */
.f-live{top:-34px;inset-inline-start:34%}
.ftr-app a{color:var(--ink);background:linear-gradient(135deg,#FFFFFF,#F3F2FF);border:1px solid var(--line-2);box-shadow:0 22px 44px -26px rgba(79,70,229,.45)}
.ftr-app a::after{background:linear-gradient(100deg,transparent,rgba(99,102,241,.10),transparent)}
.ftr-app small{color:var(--muted);opacity:1}
.ftr-app .gp{background:var(--brand-soft);color:var(--brand)}
:root[data-theme="dark"] .ftr-app a{background:var(--surface);color:var(--ink)}
html{overflow-x:clip}body{overflow-x:visible!important}

/* ---------- country boost + countries hub ---------- */
.gd-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:980px){.gd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.gd-grid{grid-template-columns:1fr}}
.gd{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.gd:first-child{background:linear-gradient(135deg,#FFFFFF,#EEF2FF);border-color:var(--line-2)}
.gd:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--glow)}
.gd-k{align-self:flex-start;font-size:12px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:3px 10px;border-radius:999px}
.gd b{font-size:15.5px;line-height:1.5}
.sec-head.mt{margin-top:56px}
.ct-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.ct-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ct-grid{grid-template-columns:1fr}}
.ct{position:relative;padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:10px}
.ct-h{display:flex;align-items:center;gap:10px}.ct-h h3{margin:0;font-size:19px}
.ct-cc{font:700 12px/1 var(--mono);padding:6px 8px;border-radius:8px;background:var(--brand-soft);color:var(--brand)}
.ct-c{margin:0;font-size:13.5px;color:var(--muted)}
.ct ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ct ul a{color:var(--ink-2);text-decoration:none;font-size:14.5px}.ct ul a:hover{color:var(--brand)}
.ct-g{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--brand);text-decoration:none}
.uk-n{margin:22px 0 0;color:var(--muted)}.uk-n a{color:var(--brand);font-weight:700}
.f-score .ok-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,#10B981,#0EA5E9);box-shadow:0 10px 22px -10px rgba(16,185,129,.8)}
.f-score .ok-ic svg{width:22px;height:22px}
/* per-country tailoring block */
.lc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.lc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.lc-grid{grid-template-columns:1fr}}
.lc{position:relative;padding:20px 20px 18px;border-radius:18px;border:1px solid var(--line);background:var(--surface);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.lc::before{content:"";position:absolute;inset-inline-start:20px;top:0;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--grad)}
.lc:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--glow)}
.lc b{display:block;font-size:16px;margin-bottom:6px}.lc p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.75}
.lc-faq{margin-top:26px;max-width:none}
.chips a{color:inherit;text-decoration:none}

/* ===================== v7.2 — light hero composition ===================== */
.v6h .f-live{display:none}
:root:not([data-theme="dark"]) .v6h .win{--ink:#15133A;--muted:#8A88A8;--line:#ECEBF5;--line-2:#DCDAF0;--brand-soft:#EEF0FF;--code-ink:#3A3860;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,245,255,.94));border:1px solid #E4E3F0;box-shadow:0 50px 90px -42px rgba(49,46,129,.45),0 0 0 1px rgba(255,255,255,.6) inset}
:root:not([data-theme="dark"]) .v6h .code{color:#3A3860}
:root:not([data-theme="dark"]) .v6h .code p::before{color:#C9C7E0}
:root:not([data-theme="dark"]) .v6h .code .c{color:#9A98B8}
:root:not([data-theme="dark"]) .v6h .code .k{color:#7C3AED}
:root:not([data-theme="dark"]) .v6h .code .f{color:#2563EB}
:root:not([data-theme="dark"]) .v6h .code .s{color:#059669}
:root:not([data-theme="dark"]) .v6h .code .n{color:#DB2777}
:root:not([data-theme="dark"]) .v6h .code .t{color:#10B981}
:root:not([data-theme="dark"]) .v6h .win-bar{background:rgba(244,243,253,.8);border-radius:var(--r-l) var(--r-l) 0 0}
:root:not([data-theme="dark"]) .v6-phone{background:linear-gradient(160deg,#FFFFFF,#ECEBFE);box-shadow:0 40px 70px -30px rgba(49,46,129,.45),inset 0 0 0 1px #DCDAF0}
:root:not([data-theme="dark"]) .ph-notch{background:#DCDAF0}
/* a soft glowing halo behind the device stack */
.v6h .dev::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;background:radial-gradient(closest-side,rgba(99,102,241,.22),rgba(56,189,248,.10) 55%,transparent);filter:none;animation:halo 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes halo{to{transform:scale(1.08) translateY(-10px)}}
/* chips placement: score top-outside, ssl bottom-outside */
.v6h .f-score{top:-28px;inset-inline-end:-18px}
.v6h .f-ssl{bottom:-26px;inset-inline-start:-18px}
/* section rhythm a touch tighter */
.sec{padding-block:clamp(64px,8vw,104px)}
/* service cards: richer hover */
.card.glow .ic,.card .ic{transition:transform .5s var(--ease),box-shadow .5s}
.card.glow:hover .ic{transform:translateY(-4px) rotate(-6deg);box-shadow:0 16px 30px -12px rgba(99,102,241,.7)}
.card.glow{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 85%,#EEF0FF))}
@media (prefers-reduced-motion:reduce){.v6h .dev::before{animation:none}}
.hero h1 .hl{background:linear-gradient(100deg,#0EA5E9,#6366F1 45%,#A855F7 80%,#0EA5E9);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hlflow 6s ease-in-out infinite}
@keyframes hlflow{50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.hero h1 .hl{animation:none}}

/* ===================== v7.3 — header pinned + footer polish ===================== */
/* header: always pinned at the top while scrolling */
.hdr{position:sticky!important;top:0!important;transform:none!important;z-index:60}

/* 1) footer logo: mark beside the wordmark, same as the header */
.ftr-grid a.logo{display:inline-flex;align-items:center;gap:12px;transform:none!important}
.ftr-grid a.logo .mk7{width:44px;height:44px}

/* 2) app card: compact, vertical */
.ftr-app a{flex-direction:column;align-items:center;text-align:center;gap:10px;width:210px;padding:18px 16px 16px;border-radius:22px}
.ftr-app a>span:last-child{display:flex;flex-direction:column;align-items:center}
.ftr-app .ic{width:44px;height:44px;border-radius:13px}
.ftr-app b{font-size:14.5px;margin-top:1px}
.ftr-app small{font-size:11.5px}
.ftr-app .gp{font-size:11.5px;margin-top:8px;padding:3px 10px}

/* 3) top waves: clearer, layered, gently moving */
.ftr-wave{height:64px;fill:rgba(99,102,241,.14)}
.ftr-wave.w2{height:46px;fill:rgba(56,189,248,.16)}
.fbeam{height:2px;width:34%;background:linear-gradient(90deg,transparent,#6366F1,#38BDF8,#E879F9,transparent)}

/* 5) background: drifting dot-grid + slow orbit rings (transform-only) */
.ftr-fx::before{content:"";position:absolute;inset:-60px;background-image:radial-gradient(rgba(99,102,241,.20) 1.2px,transparent 1.6px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000 30%,transparent 75%);animation:fdots 18s linear infinite;will-change:transform}
@keyframes fdots{to{transform:translate3d(30px,30px,0)}}
.ftr-fx::after{content:"";position:absolute;left:50%;bottom:-340px;width:760px;height:760px;margin-left:-380px;border-radius:50%;
  border:1px dashed rgba(99,102,241,.22);box-shadow:0 0 0 70px rgba(99,102,241,.035),0 0 0 140px rgba(56,189,248,.03);animation:forbit 60s linear infinite;will-change:transform}
@keyframes forbit{to{transform:rotate(360deg)}}
.fo1{background:radial-gradient(circle,rgba(99,102,241,.18),transparent 62%)}
.fo2{background:radial-gradient(circle,rgba(217,70,239,.14),transparent 62%)}
.fo3{background:radial-gradient(circle,rgba(14,165,233,.14),transparent 62%)}


@media (max-width:640px){.ftr-fx::after{width:480px;height:480px;margin-left:-240px;bottom:-240px}}
@media (prefers-reduced-motion:reduce){.ftr-fx::before,.ftr-fx::after{animation:none!important}}

/* ===================== v7.4 — app banner (wide, gradient border) ===================== */
.ftr-app{margin:40px 0 0;display:flex;justify-content:center}
.ftr-app a.ap{position:relative;display:flex;flex-direction:row;align-items:center;gap:18px;width:min(780px,100%);padding:16px 18px 16px 22px;border-radius:22px;text-align:start;
  color:var(--ink);text-decoration:none;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#6366F1,#A855F7,#EC4899) border-box;border:2px solid transparent;
  box-shadow:0 22px 50px -30px rgba(99,102,241,.6);transition:transform .35s var(--ease),box-shadow .35s;overflow:hidden}
:root[data-theme="dark"] .ftr-app a.ap{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(90deg,#6366F1,#A855F7,#EC4899) border-box}
.ftr-app a.ap::after{content:"";position:absolute;top:0;bottom:0;width:30%;inset-inline-start:-40%;background:linear-gradient(100deg,transparent,rgba(168,85,247,.10),transparent);animation:xshine 6s ease-in-out infinite;pointer-events:none}
.ftr-app a.ap:hover{transform:translateY(-3px);box-shadow:0 28px 60px -28px rgba(168,85,247,.7)}
.ap-ic{flex:none;width:62px;height:62px;border-radius:16px;box-shadow:0 0 0 5px rgba(99,102,241,.08),0 12px 26px -12px rgba(49,46,129,.7);animation:xbob 3.4s ease-in-out infinite}
.ap-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.ap-t small{font-size:13px;font-weight:700;color:#DB2777}
.ap-t b{font-size:19px;line-height:1.35;color:var(--ink)}
.ap-t em{font-style:normal;font-size:14px;color:var(--muted)}
.gp-b{flex:none;display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:11px;background:#000;color:#fff;border:1px solid #3a3a3a;transition:transform .3s var(--ease)}
.gp-b .gp-tri{width:22px;height:24px}
.gp-b small{display:block;font-size:10px;line-height:1.1;letter-spacing:.02em;color:#fff;opacity:.9}
.gp-b b{display:block;font:600 19px/1.05 Arial,Helvetica,sans-serif;color:#fff;letter-spacing:-.2px}
.ap:hover .gp-b{transform:scale(1.04)}
@media (max-width:640px){.ftr-app a.ap{flex-wrap:wrap;justify-content:center;text-align:center;padding:18px}.ap-t{align-items:center;flex-basis:100%}.ap-ic{width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){.ap-ic,.ftr-app a.ap::after{animation:none}}
.ftr-app a.ap>.gp-b{flex-direction:row;align-items:center}.ftr-app a.ap>.gp-b>span{display:block;text-align:start}
/* country round 2 */
.l2-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;margin-top:44px}
@media (max-width:900px){.l2-grid{grid-template-columns:1fr}}
.l2-p{color:var(--muted);margin:6px 0 14px}
.city-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.city-l li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.city-l b{font-size:15.5px}.city-l span{color:var(--muted);font-size:14px}
.tl{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:10px}
.tl li{counter-increment:t;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.tl li::before{content:counter(t);flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font:700 13px/1 var(--mono);color:#fff;background:var(--grad)}
.tl b{flex:1;font-size:15px}.tl span{color:var(--brand);font-weight:700;font-size:14px}
.prose.uq{max-width:860px}
.prose.uq h3{margin-top:28px}
/* keep header decorations inside the viewport (RTL mobile overflow fix) */
.hdr{overflow-x:clip;overflow-y:visible}
.hdr::after{left:0;right:auto;width:40%;animation-name:hscan2}
@keyframes hscan2{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* ===================== v7.5 — performance budget =====================
   Only a handful of infinite animations stay on; everything below the fold is skipped by
   content-visibility until it scrolls into view, so off-screen animations cost nothing. */
main>section:not(:first-child),.ftr-cta{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* site-wide floating particles: removed (always on screen, never useful) */
.parts{display:none!important}
/* header: static decorations (it is on screen all the time) */
.hdr::before{animation:none!important;background-size:100% 100%}
.hdr::after{display:none!important}
.hdr .btn-cta::before{animation:none!important}
.hdr .btn-cta::after{animation:none!important}
.topbar .dot{animation:none!important}
.eyebrow::after{animation:none!important;opacity:.7}
/* logo: draw once on load, no infinite loops */
.mk7 .mk-flow{display:none}
.mk7 .mk-bg{animation:none!important}
/* hero: keep aurora + phone float + rotating word; drop the rest */
.v6h .fx .orb,.v6h .fx .scan,.v6h .fx .beam,.v6h .fx .grid,.v6h .circuit .pulse,.v6h .win,.v6h .win::after,.v6h .dev::before,.ph-bars i,.v6h .float,.f-live>i{animation:none!important}
.v6h .circuit .pulse{display:none}
.v6h .aurora i{animation-duration:30s,30s!important}
/* other page heads and CTAs: static glow */
.phead.stage::after,.cta.stage::after,.cta.stage .fx .orb,.phead .fx .orb,.phead .fx .grid,.phead .fx .beam,.fx .scan{animation:none!important}
/* footer: fewer layers */
.fs.s1,.fs.s3,.fs.s5,.fs.s7,.fs.s9,.fo3{display:none}
.ftr-fx::before{animation-duration:40s}
/* small screens: decoration only where it is cheap */
@media (max-width:760px){
  .v6h .aurora i,.v6-phone,.tk i::after,.tk b::after,.ftr-wave,.fo,.fs,.fbeam,.ftr-fx::before,.ftr-fx::after,.ftr-big span,.ftr p.ftr-big::after,.ftr h2::after,.marquee .track,.ap-ic,.ftr-app a.ap::after{animation:none!important}
  .tk,.ftr-fx::before,.ftr-fx::after,.fbeam,.fs{display:none}
}
/* v7.5b — stop the remaining always-visible loops */
.word b,.word small i,.topbar .dot,.ftr-base .status i{animation:none!important}
.code p,.code .caret{animation:none!important}
.code .caret{opacity:1}
.callw summary,.callw summary::after,.callw .cw-ic svg,.callw:not([open]) .cw-ic svg{animation:none!important}
.stage .fx .orb,.stage .fx .grid,.stage .fx .scan,.stage .fx .beam{animation:none!important}

/* ===================== scope calculator ===================== */
.sc-wrap{display:grid;grid-template-columns:1.25fr .85fr;gap:28px;align-items:start}
@media (max-width:960px){.sc-wrap{grid-template-columns:1fr}}
.sc-form{display:grid;gap:18px}
.sc-form fieldset{margin:0;padding:18px 18px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.sc-form legend{padding:0 8px;font-weight:700;font-size:16px}
.sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:540px){.sc-grid{grid-template-columns:1fr}}
.sc-row{display:flex;flex-wrap:wrap;gap:10px}
.sc-opt{position:relative;display:block;cursor:pointer}
.sc-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sc-opt span{display:block;padding:11px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);font-size:14.5px;transition:border-color .2s,background-color .2s,color .2s}
.sc-opt input:checked+span{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:700}
.sc-opt input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.sc-out{position:sticky;top:96px;padding:22px;border-radius:22px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#38BDF8,#6366F1,#A855F7) border-box;border:2px solid transparent;box-shadow:0 30px 60px -36px rgba(79,70,229,.55)}
:root[data-theme="dark"] .sc-out{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#38BDF8,#6366F1,#A855F7) border-box}
.sc-out h2{font-size:20px;margin:0 0 12px}.sc-out h3{font-size:16px;margin:18px 0 8px}
.sc-k{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--line)}
.sc-k span{color:var(--muted);font-size:14px}.sc-k b{font-size:16px;text-align:end}
.sc-tier.t0{color:#059669}.sc-tier.t1{color:#2563EB}.sc-tier.t2{color:#7C3AED}.sc-tier.t3{color:#DB2777}
.sc-meter{height:8px;border-radius:8px;background:var(--line);overflow:hidden;margin:4px 0 6px}
.sc-meter i{display:block;height:100%;width:25%;border-radius:inherit;background:var(--grad);transition:width .5s var(--ease)}
.sc-meter.m1 i{width:50%}.sc-meter.m2 i{width:75%}.sc-meter.m3 i{width:100%}
.sc-prep{margin:0;padding-inline-start:20px;display:grid;gap:6px;font-size:14.5px;color:var(--ink-2)}
.sc-acts{display:grid;gap:10px;margin-top:18px}.sc-acts .btn{width:100%;justify-content:center}
.sc-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
@media print{.hdr,.topbar,.ftr,.ftr-cta,.callw,.sprog,.phead .fx,.sc-acts,.sec-alt,.faq{display:none!important}.sc-wrap{grid-template-columns:1fr}.sc-out{position:static;box-shadow:none}}
@media (max-width:960px){.sc-out{position:static}}

/* ===================== v7.6 — hero code window, mobile app card, mobile footer word ===================== */
/* code lines are always visible; they slide in once, then an "active line" highlight steps through them */
.v6h .code{position:relative}
.v6h .code p{max-width:none!important;opacity:0;transform:translateX(-10px);animation:codein .55s cubic-bezier(.2,.8,.2,1) forwards!important}
.v6h .code p:nth-child(1){animation-delay:.25s!important}.v6h .code p:nth-child(2){animation-delay:.4s!important}.v6h .code p:nth-child(3){animation-delay:.55s!important}
.v6h .code p:nth-child(4){animation-delay:.7s!important}.v6h .code p:nth-child(5){animation-delay:.85s!important}.v6h .code p:nth-child(6){animation-delay:1s!important}
.v6h .code p:nth-child(7){animation-delay:1.15s!important}.v6h .code p:nth-child(8){animation-delay:1.3s!important}
@keyframes codein{to{opacity:1;transform:none}}
.v6h .code::after{content:"";position:absolute;left:8px;right:8px;top:18px;height:27px;border-radius:6px;pointer-events:none;
  background:linear-gradient(90deg,rgba(99,102,241,.12),rgba(99,102,241,.03) 70%,transparent);border-left:2px solid rgba(99,102,241,.55);
  opacity:0;animation:codeline 9.6s steps(1) 1.8s infinite;will-change:transform}
@keyframes codeline{0%{opacity:1;transform:translateY(0)}12.5%{transform:translateY(27px)}25%{transform:translateY(54px)}37.5%{transform:translateY(81px)}50%{transform:translateY(108px)}62.5%{transform:translateY(135px)}75%{transform:translateY(162px)}87.5%{transform:translateY(189px)}100%{opacity:1;transform:translateY(0)}}
.v6h .code .caret{display:inline-block;width:7px;height:15px;margin-left:3px;vertical-align:-2px;background:#6366F1;border-radius:1px;animation:blink 1s steps(1) infinite!important}
:root[data-theme="dark"] .v6h .code .caret{background:#A5A0FF}
@media (max-width:980px){.v6h .code::after{top:14px;height:24px}}
@media (prefers-reduced-motion:reduce){.v6h .code p{opacity:1;transform:none;animation:none!important}.v6h .code::after,.v6h .code .caret{animation:none!important}}

/* app card on phones: small, horizontal, neat */
@media (max-width:640px){
  .ftr-app{margin-top:28px}
  .ftr-app a.ap{flex-wrap:nowrap;justify-content:flex-start;text-align:start;gap:10px;width:min(360px,100%);padding:10px 12px;border-radius:16px;border-width:1.5px}
  .ap-ic{width:42px;height:42px;border-radius:11px;box-shadow:0 0 0 3px rgba(99,102,241,.08)}
  .ap-t{flex:1;flex-basis:auto;align-items:flex-start}
  .ap-t small{font-size:10.5px}.ap-t b{font-size:13.5px;line-height:1.3}.ap-t em{display:none}
  .gp-b{padding:6px 9px 6px 7px;gap:6px;border-radius:9px}.gp-b .gp-tri{width:15px;height:17px}
  .gp-b small{font-size:7.5px}.gp-b b{font-size:12.5px}
}

/* footer wordmark: same animation on phones as on desktop */
@media (max-width:760px){
  .ftr .ftr-big span{animation-name:fletter!important;animation-duration:6s!important;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important}
  .ftr .ftr-big .l0{animation-delay:0s!important}.ftr .ftr-big .l1{animation-delay:.25s!important}.ftr .ftr-big .l2{animation-delay:.5s!important}
  .ftr .ftr-big .l3{animation-delay:.75s!important}.ftr .ftr-big .l4{animation-delay:1s!important}.ftr .ftr-big .l5{animation-delay:1.25s!important}
  .ftr p.ftr-big::after{animation-name:fsweep!important;animation-duration:7s!important;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.ftr .ftr-big span,.ftr p.ftr-big::after{animation:none!important}}