*, *::before, *::after{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',system-ui,-apple-system,sans-serif}code, .font-mono, [class*="mono"]{font-family:'JetBrains Mono',ui-monospace,monospace!important}body{background:#09090b;color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.015;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#09090b}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}a{text-decoration:none}.mw{max-width:1200px;margin:0 auto;padding:0 24px}.ac{color:#2563EB}@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .7s cubic-bezier(.16,1,.3,1) both}.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}.d5{animation-delay:.5s}.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.rv.vis{opacity:1;transform:translateY(0)}.rv.no-anim{transition:none!important}.bc{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);min-width:0}.bc.vis{opacity:1;transform:translateY(0)}.bc:hover{transform:translateY(-4px)}.bar-an{width:0!important;transition:width 1.8s cubic-bezier(.16,1,.3,1)}.bar-an.vis{width:var(--w)!important}.gr{stroke-dashoffset:327;transition:stroke-dashoffset 2s cubic-bezier(.16,1,.3,1)}.gr.vis{stroke-dashoffset:65}.cr-an{opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .5s ease}.cr-an.vis{opacity:1;transform:translateX(0)}@keyframes spinB{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes outerP{0%, 100%{box-shadow:0 0 24px 2px rgba(37,99,235,.2),0 0 60px 4px rgba(37,99,235,.08)}50%{box-shadow:0 0 32px 4px rgba(37,99,235,.35),0 0 80px 8px rgba(37,99,235,.12)}}@keyframes breathe{0%, 100%{opacity:.03}50%{opacity:.06}}.breathe{animation:breathe 8s ease infinite}.glass{background:rgba(255,255,255,.02);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 32px -8px rgba(0,0,0,.4);border-radius:16px;transition:all .3s}.glass:hover{border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 48px -12px rgba(0,0,0,.5)}.gi{padding:0!important;background:rgba(255,255,255,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 12px -4px rgba(0,0,0,.3);border-radius:16px}.glass-light{background:rgba(255,255,255,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.04),inset 0 0 0 1px rgba(255,255,255,.5);border-radius:16px;padding:32px;transition:all .3s}.glass-light:hover{border-color:rgba(0,0,0,.1);box-shadow:0 16px 40px rgba(0,0,0,.06),inset 0 0 0 1px rgba(255,255,255,.5);transform:translateY(-4px)}.sec{padding:64px 0;position:relative}.sl{background:#FAFBFC;color:#111827;border-radius:32px;position:relative;z-index:1}.sl h2, .sl h3, .sl h4, .sl strong{color:#111827!important}.sl p:not(.kd){color:#4B5563}.sl .hg, .sl .sl + .sl{border-top-left-radius:0;border-top-right-radius:0;margin-top:0}.sl:has(+ .sl){border-bottom-left-radius:0;border-bottom-right-radius:0}.sl .plp{color:#6b7280!important}.sl .pli{background:rgba(37,99,235,.08)!important;border:1px solid rgba(37,99,235,.14)}.sl .ts-type-card{background:rgba(17,24,39,.035)!important;border-color:rgba(17,24,39,.09)!important}.sl .ts-type-card:hover{background:rgba(17,24,39,.06)!important}.sl .ts-type-title, .sl .ts-type-desc{color:#111827!important}.sl .ts-type-desc{opacity:.75}.sl .ts-type-stat{background:rgba(17,24,39,.05)!important;color:#374151!important;border-color:rgba(17,24,39,.08)!important}.sl .cp-step, .sl .cp-path-label, .sl .cp-path-title, .sl .cp-step-title, .sl .cp-step-desc{color:#111827!important}.sl .cp-step-desc{color:#4b5563!important;opacity:.9}.sl .cp-step{border-bottom-color:rgba(17,24,39,.08)!important}.sl .cp-path{background:rgba(17,24,39,.025)!important;border-color:rgba(17,24,39,.08)!important}.sl .cp-path--a{background:rgba(251,113,133,.04)!important;border-color:rgba(251,113,133,.16)!important}.sl .cp-path--b{background:rgba(96,165,250,.04)!important;border-color:rgba(96,165,250,.16)!important}.sl .cp-step-num{background:rgba(17,24,39,.06)!important;color:#111827!important}.sl .cp-mock-thumb, .sl .cp-path-mock{background:rgba(17,24,39,.04)!important;border-color:rgba(17,24,39,.08)!important}.sl .cp-mock-prompt, .sl .cp-mock-face{background:rgba(17,24,39,.04)!important;border-color:rgba(17,24,39,.08)!important;color:#374151}.sl .cp-mock-prompt-text, .sl .cp-mock-face-label, .sl .cp-mock-prompt-label, .sl .cp-mock-filters, .sl .cp-mock-head{color:#374151!important}.sl .cp-converge-label{color:#374151!important;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(96,165,250,.04))!important;border-color:rgba(37,99,235,.2)!important}.sl .ni-tag{background:rgba(17,24,39,.04)!important;border-color:rgba(17,24,39,.08)!important;color:#374151!important}.sl svg[fill="#fff"], .sl svg[fill="white"]{fill:#111827}.sl svg path[fill="#fff"], .sl svg path[fill="white"]{fill:#111827}.sl svg[fill*="255, 255, 255"], .sl svg path[fill*="255, 255, 255"]{fill:#6b7280}.sl [style*="color:#fff"]:not(.cb):not(.ba):not(.bf):not(.tw-cta){color:#111827!important}.sl [style*="color:#fff"]:not(.cb):not(.ba):not(.bf):not(.tw-cta){color:#111827!important}.sl [style*="color:rgba(255, 255, 255, .8)"]:not(.cb):not(.ba){color:#374151!important}.sl [style*="color:rgba(255, 255, 255, .7)"]:not(.cb):not(.ba){color:#4b5563!important}.sl [style*="color:rgba(255, 255, 255, .6)"]:not(.cb):not(.ba){color:#6b7280!important}.sl [style*="color:rgba(255, 255, 255, .5)"]:not(.cb):not(.ba){color:#6b7280!important}.sl [style*="color:rgba(255, 255, 255, .3)"]:not(.cb):not(.ba){color:#9ca3af!important}.sl [style*="color:rgba(255, 255, 255, .25)"]:not(.cb):not(.ba){color:#9ca3af!important}@media (max-width:768px){.mw{padding-left:20px;padding-right:20px}.ts-metrics{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;max-width:100%!important;margin-top:32px!important;padding:0 4px}.ts-metric{padding:14px 6px!important;border-radius:14px!important;text-align:center}.ts-m-icon{font-size:16px!important;margin-bottom:6px!important}.ts-m-val{font-size:12px!important;gap:3px!important;min-height:auto!important;margin-bottom:4px!important;line-height:1.1!important}.ts-m-before{font-size:11px!important}.ts-m-after{font-size:13px!important}.ts-m-single{font-size:15px!important}.ts-m-arrow{font-size:9px!important}.ts-m-lb{font-size:7.5px!important;letter-spacing:.8px!important;margin-top:2px!important}.ts-m-uplift{font-size:8px!important;padding:2px 5px!important;margin-top:8px!important;letter-spacing:.5px!important}.sec{padding:56px 0}.sl{border-radius:24px;margin-left:12px;margin-right:12px;padding:48px 0}.sl + .sl{margin-top:0}h1, .h1{font-size:clamp(34px,8vw,44px)!important;line-height:1.08}.sh, .shl{font-size:clamp(26px,6.5vw,34px)!important;line-height:1.15;letter-spacing:-.02em}.sub, .subl{font-size:15px;line-height:1.55}.hs{font-size:15px;line-height:1.55;padding:0 4px}.la{font-size:11px;letter-spacing:1.5px}.nav{padding:12px 16px}.nav .lg{font-size:15px}.nav .ba{padding:8px 16px;font-size:13px}.hero{padding:96px 0 12px}.hero .mw{padding-left:16px;padding-right:16px}.bav{width:auto;height:auto}.bav>div{width:22px;height:22px;font-size:9px;margin-left:-5px}.bav>div:first-child{margin-left:0}.bav>div:nth-child(n+5){display:none}.pills{flex-wrap:wrap;gap:8px;justify-content:center}.pill{padding:7px 12px;font-size:12px}.pill svg{width:14px;height:14px}#hero-stats{gap:24px}#hero-stats > div{min-width:0}.cb, .ba.glow-brand, .bf, .tw-cta{display:inline-flex;padding:14px 22px;font-size:14px}.cg{width:100%;max-width:360px;margin-left:auto;margin-right:auto}.cg .cb{width:100%;justify-content:center}.comp{gap:20px!important}.comp-card{padding:16px!important;border-radius:16px!important}.comp-card img{border-radius:10px!important}.ts-arrow{transform:rotate(90deg);margin:8px auto!important}.bento{grid-template-columns:1fr!important;gap:14px}.bw, .bf2, .bp{padding:24px!important;border-radius:20px!important}.bh{font-size:18px!important}.bp .num{font-size:42px!important}.cp-paths{grid-template-columns:1fr!important;gap:16px!important}.cp-path{padding:22px 18px!important;border-radius:20px!important}.cp-path-title{font-size:17px!important}.cp-step{padding:10px 0!important;gap:10px!important}.cp-step-title{font-size:12px!important;letter-spacing:1.2px!important}.cp-step-desc{font-size:11.5px!important}.cp-step-badge{width:22px!important;height:22px!important;font-size:10px!important}.cp-path-mock{padding:14px!important;border-radius:14px!important}.cp-mock-thumb{min-height:auto!important}.cp-mock-thumb img{width:100%!important;height:auto!important}.cp-mock-grid{gap:6px!important}.split{grid-template-columns:1fr!important;gap:28px!important}.split .sh{text-align:center!important;margin-bottom:16px!important}.split .ib{margin-left:auto;margin-right:auto}.sc{gap:12px}.sc .glass{padding:18px!important;border-radius:16px!important}.sch{font-size:15px}.cp{font-size:13px}.pls{gap:28px;margin-top:32px}.pl{padding:0 8px}.pli{width:48px;height:48px;border-radius:14px}.pli svg{width:20px;height:20px}.plh{font-size:15px}.plp{font-size:12px}.comp, .proof-viz{gap:16px!important}.ts-types-bento{grid-template-columns:1fr!important;gap:14px!important}.ts-type-card{padding:22px 20px!important;border-radius:20px!important}.ts-type-title{font-size:17px!important}.ts-type-desc{font-size:13px!important}.ts-type-icon{width:40px!important;height:40px!important}.cmp-table{font-size:12px}.cmp-table th, .cmp-table td{padding:10px 8px!important}.prc-grid, .pricing-grid{grid-template-columns:1fr!important;gap:14px!important}.prc-card, .pricing-card{padding:26px 22px!important;border-radius:22px!important}.fl{grid-template-columns:1fr!important;gap:22px!important}.fl .rv > *{text-align:left!important}.fi{border-radius:14px!important}.fq{padding:16px 18px!important;font-size:14px!important;gap:12px}.fa p{font-size:13px;padding:0 18px 16px}.fp{font-size:18px}.tw-head{flex-direction:column!important;align-items:stretch!important;gap:18px!important;margin-bottom:32px!important}.tw-head-copy .shl{text-align:left!important}.tw-head-copy .subl{text-align:left!important}.tw-cta{align-self:flex-start}.tw-trust{justify-content:flex-start!important;gap:20px!important;padding-top:24px!important;margin-bottom:28px!important;flex-direction:column;align-items:flex-start}.tw-trust-item{gap:10px}.tw-trust-ic{width:28px;height:28px}.tw-trust-ic svg{width:14px;height:14px}.tw-trust-val{font-size:13px}.tw-trust-lbl{font-size:11px}.tw-marquee{margin:0 -20px!important;padding:8px 0!important}.tw-card{width:260px!important;padding:16px 16px 14px!important;margin-right:12px!important;border-radius:14px!important}.tw-quote{font-size:13.5px!important;margin-bottom:8px!important}.tw-body{font-size:12px!important;line-height:1.5!important;min-height:auto!important;margin-bottom:12px!important}.tw-stars{font-size:11px;letter-spacing:1.5px}.tw-ava{width:28px!important;height:28px!important}.tw-aname{font-size:12px!important}.tw-arole{font-size:10px!important}.sec.tld{padding:56px 0!important}.fg{grid-template-columns:1fr 1fr!important;gap:28px 20px!important;margin-bottom:28px!important}.fg > div:first-child{grid-column:1 / -1}.fg .lg{font-size:16px}.fg ul{font-size:13px}.fc{flex-direction:column;align-items:flex-start;gap:8px;font-size:12px}.cs--g{padding-top:14px}.cs--g .csh::after{position:static;display:inline-block;margin:0 0 10px 0;font-size:9px;padding:4px 10px;transform:none;animation:none}.cs--g .csh{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:4px;padding:0}.sl + .sl{border-top-left-radius:0;border-top-right-radius:0}.sl:has(+ .sl){border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){.sl{margin-left:8px;margin-right:8px;padding:40px 0}.mw{padding-left:16px;padding-right:16px}h1, .h1{font-size:30px!important}.sh, .shl{font-size:24px!important}.pill{padding:6px 10px;font-size:11px}.tw-card{width:240px!important}#hero-stats{gap:16px;flex-wrap:wrap;justify-content:center}#hero-stats > div{flex-basis:calc(50% - 8px);min-width:100px}}@media (hover:none) and (pointer:coarse){.tw-card:hover, .bw:hover, .bf2:hover{transform:none}}.sec:has(.tw-head) .shl{color:#fff!important}.sec:has(.tw-head) .subl{color:rgba(255,255,255,.55)!important}.sec:has(.tw-head) .subl strong{color:#fff!important}.sec:has(.tw-head) .tw-trust{border-top-color:rgba(255,255,255,.08)!important}.sec:has(.tw-head) .tw-trust-ic{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.08)!important}.sec:has(.tw-head) .tw-trust-ic svg[fill*="15, 23, 42"] path, .sec:has(.tw-head) .tw-trust-ic svg[fill*="15, 23, 42"]{fill:rgba(255,255,255,.7)!important}.sec:has(.tw-head) .tw-trust-ic--star{background:rgba(250,204,21,.12)!important;border-color:rgba(250,204,21,.28)!important}.sec:has(.tw-head) .tw-trust-val{color:#fff!important}.sec:has(.tw-head) .tw-trust-lbl{color:rgba(255,255,255,.5)!important}.sec:has(.tw-head) .tw-card{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 4px 16px -6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.sec:has(.tw-head) .tw-card:hover{background:rgba(255,255,255,.05)!important;border-color:rgba(96,165,250,.28)!important;box-shadow:0 14px 36px -10px rgba(0,0,0,.5),0 0 24px -4px rgba(37,99,235,.25),inset 0 1px 0 rgba(255,255,255,.06)!important;transform:translateY(-3px)}.sec:has(.tw-head) .tw-quote{color:#fff!important}.sec:has(.tw-head) .tw-body{color:rgba(255,255,255,.62)!important}.sec:has(.tw-head) .tw-name{color:#fff!important}.sec:has(.tw-head) .tw-meta{color:rgba(255,255,255,.4)!important}.sec:has(.tw-head) .tw-divider, .sec:has(.tw-head) .tw-card hr, .sec:has(.tw-head) .tw-author{border-top-color:rgba(255,255,255,.06)!important}.sec:has(.tw-head) .tw-aname{color:#fff!important}.sec:has(.tw-head) .tw-arole{color:rgba(255,255,255,.4)!important}.sec:has(.tw-head) .tw-stars{text-shadow:0 1px 2px rgba(250,204,21,.35),0 0 12px rgba(250,204,21,.2)!important}.tdl{position:relative}.tld{position:relative}.glow-brand{box-shadow:0 0 60px -12px rgba(37,99,235,.15)}.glow-brand:hover{box-shadow:0 0 80px -12px rgba(37,99,235,.25)}.cg{position:relative;display:inline-flex;padding:3px;border-radius:18px;overflow:hidden;isolation:isolate;cursor:pointer;animation:outerP 3s ease-in-out infinite;transition:box-shadow .3s}.cg::before{content:'';position:absolute;top:50%;left:50%;width:400%;padding-bottom:400%;background:conic-gradient(from 0deg,#2563EB 0%,#fff 8%,#2563EB 16%,transparent 30%,transparent 50%,#2563EB 60%,rgba(37,99,235,.5) 68%,transparent 80%);animation:spinB 2.2s linear infinite;z-index:0}.cg:hover::before{animation-duration:1.2s}.cg:hover{animation:none;box-shadow:0 0 48px 6px rgba(37,99,235,.35)}.cg a, .cg button{position:relative;z-index:2}.sh{font-size:clamp(28px,4.5vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin-bottom:12px}.sub{font-size:17px;color:rgba(255,255,255,.4);line-height:1.6;max-width:580px;margin:0 auto}.shl{font-size:clamp(28px,4.5vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin-bottom:16px;color:#111827}.subl{font-size:17px;color:#4B5563;line-height:1.6}.la{color:#2563EB;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px}.ch{font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}.cp{font-size:14px;color:rgba(255,255,255,.35);line-height:1.6}.bo{padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.7);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.bo:hover{background:rgba(255,255,255,.05)}.bf{padding:8px 20px;border-radius:8px;border:none;background:#2563EB;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}.bf:hover{background:#3b82f6}.ba{display:inline-block;padding:12px 28px;border-radius:12px;border:none;background:#2563EB;color:#fff;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s}.ba:hover{background:#3b82f6}.cb{padding:16px 48px;border-radius:15px;border:none;background:#2563EB;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s;display:inline-block;text-decoration:none}.cb:hover{background:#3b82f6}.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(9,9,11,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.ni{height:64px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:16px;letter-spacing:-.02em}.nl{display:flex;gap:28px}.nl a{font-size:14px;color:rgba(255,255,255,.5);transition:color .2s}.nl a:hover{color:#fff}.nr{display:flex;gap:12px}@media(max-width:768px){.nl{display:none}}.hero{position:relative;padding:128px 0 24px;overflow:hidden;text-align:center}.hg{position:absolute;top:-300px;left:50%;transform:translateX(-50%);width:900px;height:900px;border-radius:50%;background:rgba(37,99,235,.03);filter:blur(60px);pointer-events:none}.hg2{position:absolute;bottom:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:rgba(37,99,235,.02);filter:blur(60px);pointer-events:none}.badge{display:inline-flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;border-radius:100px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);margin-bottom:32px}.bav{display:flex}.bav>div{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid #09090b;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:rgba(255,255,255,.5);margin-left:-6px}.bav>div:first-child{margin:0}.bav>div{overflow:hidden;background:#1a1a1f;padding:0}.bav>div img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.badge span{font-size:14px;color:rgba(255,255,255,.5)}.badge strong{color:rgba(255,255,255,.7)}h1{font-size:clamp(40px,6.5vw,72px);font-weight:900;letter-spacing:-.04em;line-height:1.05;margin-bottom:24px}.hs{font-size:18px;color:rgba(255,255,255,.45);max-width:560px;margin:0 auto 40px;line-height:1.6}.pills{display:flex;justify-content:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}.pill{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}.pill span{font-size:14px;color:rgba(255,255,255,.5)}.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:640px;margin:64px auto 0}.ht{text-align:center}.hi{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}.hv{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;letter-spacing:-.5px}.hl{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.3);margin-top:4px;letter-spacing:1px;text-transform:uppercase}@media(max-width:600px){.sg{grid-template-columns:1fr;gap:32px}}@keyframes m-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--shift) * -1),0,0)}}@keyframes m-right{from{transform:translate3d(calc(var(--shift) * -1),0,0)}to{transform:translate3d(0,0,0)}}.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(9,9,11,.78) 0%,transparent 70%);pointer-events:none;z-index:0}.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.bw{grid-column:span 2}.bf2{grid-column:span 3}@media(max-width:900px){.bento{grid-template-columns:1fr}.bw, .bf2{grid-column:auto}}.ib{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}.ib--a{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.15)}.cl{display:flex;flex-direction:column;gap:12px}.cr{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.6)}.ci{width:24px;height:24px;border-radius:6px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}.mt{padding:4px 12px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.4);display:inline-block}.mt--a{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.15);color:#2563EB}.mtr{display:flex;justify-content:space-between;padding:8px 12px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:12px}.mtr--g{background:rgba(148,163,184,.04);border:1px solid rgba(148,163,184,.08)}.mtr--a{background:rgba(37,99,235,.04);border:1px solid rgba(37,99,235,.08)}.mtr--gr{background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.08)}.bt{height:6px;border-radius:6px;background:rgba(255,255,255,.04);overflow:hidden}.bfr{height:100%;border-radius:6px;background:linear-gradient(90deg,rgba(239,68,68,.6),#ef4444)}.bfg{height:100%;border-radius:6px;background:linear-gradient(90deg,rgba(34,197,94,.6),#22c55e)}.ss{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}.sn{font-family:'JetBrains Mono',monospace;font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-1px}.slb{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.25);margin-top:8px;letter-spacing:1.5px;text-transform:uppercase}.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}@media(max-width:768px){.split{grid-template-columns:1fr;gap:32px}}.sc{display:flex;flex-direction:column;gap:16px}.sch{font-size:14px;font-weight:600;margin-bottom:4px}.pls{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:64px auto 0}@media(max-width:768px){.pls{grid-template-columns:1fr}}.pl{text-align:center}.pli{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.plh{font-size:14px;font-weight:700;margin-bottom:4px}.plp{font-size:12px;color:rgba(255,255,255,.3)}.comp{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media(max-width:768px){.comp{grid-template-columns:1fr}}.cs{border-radius:16px;overflow:hidden}.cs--r{border:1px solid rgba(239,68,68,.1);background:rgba(239,68,68,.02)}.cs--g{border:1px solid rgba(34,197,94,.15);background:rgba(34,197,94,.02)}.csh{display:flex;align-items:center;gap:8px;padding:24px 32px;font-size:14px;font-weight:700}.csb{padding:0 32px 24px}.cw{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04)}.cwi{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.cwt{font-size:14px;color:rgba(255,255,255,.6)}.cwv{font-family:'JetBrains Mono',monospace;font-size:12px;margin-top:2px}.ct2{display:flex;justify-content:space-between;align-items:center;padding-top:16px;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:14px;color:rgba(255,255,255,.4)}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:768px){.g3{grid-template-columns:1fr}}.gls{font-family:'JetBrains Mono',monospace;font-size:40px;font-weight:700;letter-spacing:-2px;margin-bottom:8px;color:#111827}.glh{font-size:16px;font-weight:600;margin-bottom:8px;color:#111827}.glp{font-size:14px;line-height:1.6;color:#4B5563}.lp{padding:8px 20px;border-radius:100px;border:1px solid #e5e7eb;background:#fff;font-size:14px;color:#374151;display:inline-block}.ts{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}@media(max-width:768px){.ts{grid-template-columns:1fr}}.tsc{display:flex;flex-direction:column;gap:16px;position:relative;max-height:480px;overflow:hidden}.tsf{position:absolute;bottom:0;left:0;right:0;height:112px;background:linear-gradient(to top,#FAFBFC,transparent);pointer-events:none}.tsq{font-size:14px;line-height:1.6;color:#374151;margin-bottom:16px}.tsw{display:flex;align-items:center;gap:12px}.tsa{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#3b82f6);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}.tsn{font-size:14px;font-weight:600;color:#111827;display:block}.tsr{font-size:12px;color:#9CA3AF}.fl{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}@media(max-width:768px){.fl{grid-template-columns:1fr;gap:32px}}.fls{display:flex;flex-direction:column;gap:12px}.fi{border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;background:#fff;transition:all .3s}.fq{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;cursor:pointer;transition:background .15s}.fq:hover{background:#f9fafb}.fq span{font-size:15px;font-weight:600;color:#111827}.fp{color:#9ca3af;font-size:20px;transition:transform .3s,color .3s;display:inline-block}.fi.open .fp{transform:rotate(45deg);color:#2563EB}.fa{max-height:0;overflow:hidden;transition:max-height .4s ease}.fa p{padding:0 24px 16px;font-size:14px;line-height:1.6;color:#4B5563}.footer{border-top:1px solid rgba(255,255,255,.04);padding:48px 0}.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}@media(max-width:768px){.fg{grid-template-columns:1fr 1fr;gap:20px}}.fd{font-size:12px;color:rgba(255,255,255,.25);line-height:1.6;max-width:240px}.fh{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}.fla{display:block;font-size:14px;color:rgba(255,255,255,.25);margin-bottom:8px;transition:color .15s}.fla:hover{color:rgba(255,255,255,.5)}.fb{padding-top:24px;border-top:1px solid rgba(255,255,255,.04);font-size:12px;color:rgba(255,255,255,.2)}.ts-row{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}@media(max-width:768px){.ts-row{grid-template-columns:1fr;gap:16px}.ts-row .ts-arrow{transform:rotate(90deg);margin:0 auto}}.thumb-slot{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#18181b;border:1px solid rgba(255,255,255,.08);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}.thumb-slot--before{border-color:rgba(239,68,68,.35);box-shadow:0 0 0 1px rgba(239,68,68,.1),0 12px 40px -12px rgba(239,68,68,.25)}.thumb-slot--after{border-color:rgba(34,197,94,.4);box-shadow:0 0 0 1px rgba(34,197,94,.12),0 16px 48px -12px rgba(34,197,94,.3)}.thumb-slot--after:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(34,197,94,.2),0 24px 60px -12px rgba(34,197,94,.4)}.thumb-slot--ai{border-color:rgba(139,92,246,.55)!important;box-shadow:0 0 0 1px rgba(139,92,246,.22),0 18px 56px -12px rgba(139,92,246,.5),0 0 90px -16px rgba(37,99,235,.45)!important}.thumb-slot--ai:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(139,92,246,.35),0 28px 80px -12px rgba(139,92,246,.6),0 0 120px -16px rgba(37,99,235,.55)!important}.ts-ai-badge{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(37,99,235,.35));border:1px solid rgba(139,92,246,.5);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;letter-spacing:1.2px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:4;box-shadow:0 0 24px -4px rgba(139,92,246,.5);text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.4)}.ts-ai-badge svg{color:#c4b5fd;filter:drop-shadow(0 0 4px rgba(196,181,253,.6))}.thumb-slot img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}.ts-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.3);font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;pointer-events:none;text-align:center;padding:16px}.thumb-slot--before .ts-placeholder{background:linear-gradient(135deg,#3f3f46,#18181b)}.thumb-slot--after .ts-placeholder{background:linear-gradient(135deg,#1e3a8a,#581c87)}.ts-ph-ic{font-size:28px;opacity:.5}.ts-label{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:10px;padding:4px 10px;border-radius:5px;font-weight:800;letter-spacing:1.5px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:3}.ts-label--before{background:rgba(239,68,68,.25);color:#ef4444;border:1px solid rgba(239,68,68,.4)}.ts-label--after{background:rgba(34,197,94,.3);color:#22c55e;border:1px solid rgba(34,197,94,.45)}.ts-score{position:absolute;bottom:10px;right:10px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:800;padding:5px 11px;border-radius:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:3}.ts-score--low{background:rgba(239,68,68,.25);color:#ef4444;border:1px solid rgba(239,68,68,.4)}.ts-score--high{background:rgba(34,197,94,.3);color:#22c55e;border:1px solid rgba(34,197,94,.45)}.ts-arrow{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.35);color:#2563EB;font-size:22px;font-weight:700;flex-shrink:0;box-shadow:0 0 24px -4px rgba(37,99,235,.4)}.ts-featured{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;max-width:1100px;margin:0 auto}@media(max-width:900px){.ts-featured{grid-template-columns:1fr;gap:20px}.ts-featured .ts-arrow{transform:rotate(90deg);margin:0 auto}}.ts-featured .ts-label{top:14px;left:14px;font-size:11px;padding:5px 12px}.ts-featured .ts-score{bottom:14px;right:14px;font-size:15px;padding:6px 14px}.ts-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:760px;margin:48px auto 0}@media(max-width:600px){.ts-metrics{grid-template-columns:1fr;gap:16px}}.ts-metric{text-align:center;padding:24px 20px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)}.ts-m-val{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:800;letter-spacing:-1px;margin-bottom:4px}.ts-m-val--up{color:#22c55e}.ts-m-lb{font-size:11px;color:rgba(255,255,255,.35);letter-spacing:1.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace}.ts-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}@media(max-width:768px){.ts-gallery{grid-template-columns:1fr}}.ts-pair{background:linear-gradient(135deg,rgba(255,255,255,.028) 0%,rgba(255,255,255,.008) 100%);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;transition:all .4s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);isolation:isolate}.ts-pair:hover{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);transform:translateY(-2px)}.ts-pair-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:11px;color:rgba(255,255,255,.4);font-family:'JetBrains Mono',monospace;letter-spacing:1px;text-transform:uppercase}.ts-pair-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:14px}.ts-pair-row .ts-arrow{width:32px;height:32px;font-size:14px}.ts-pair-result{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:10px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.15)}.ts-pair-metric{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.5px}.ts-pair-value{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:800;color:#22c55e;letter-spacing:-.5px}.thumb-slot::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);pointer-events:none;z-index:2;border-radius:12px 12px 0 0}@keyframes ai-breathe{0%, 100%{box-shadow:0 0 0 1px rgba(139,92,246,.22),0 18px 56px -12px rgba(139,92,246,.5),0 0 90px -16px rgba(37,99,235,.45)}50%{box-shadow:0 0 0 1px rgba(139,92,246,.42),0 26px 74px -12px rgba(139,92,246,.72),0 0 140px -16px rgba(37,99,235,.65)}}.thumb-slot--ai{animation:ai-breathe 4.2s ease-in-out infinite}.ts-featured .thumb-slot::before{content:'';position:absolute;top:0;left:0;width:40px;height:40px;border-top:1.5px solid rgba(255,255,255,.18);border-left:1.5px solid rgba(255,255,255,.18);border-radius:12px 0 0 0;pointer-events:none;z-index:2}.ts-featured .thumb-slot--ai::before{border-color:rgba(196,181,253,.4)}.ts-featured .ts-label{font-size:11px;font-weight:900;padding:6px 13px;letter-spacing:1.8px;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}.ts-featured .ts-label--after{background:linear-gradient(135deg,rgba(34,197,94,.35),rgba(139,92,246,.3));border-color:rgba(139,92,246,.4);color:#d1fae5}.ts-featured .ts-score{font-size:15px;padding:7px 14px;font-weight:900;box-shadow:0 4px 16px -4px rgba(0,0,0,.5)}.ts-featured .ts-score--high{background:linear-gradient(135deg,rgba(34,197,94,.35),rgba(139,92,246,.3));border-color:rgba(139,92,246,.5);color:#bbf7d0}.ts-max{opacity:.5;font-weight:600;margin-left:2px;font-size:.8em}.ts-metrics{max-width:840px;gap:20px}.ts-metric{text-align:center;padding:28px 20px 22px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,.008) 100%);border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden;transition:all .35s cubic-bezier(.16,1,.3,1)}.ts-metric::before{content:'';position:absolute;top:0;left:25%;right:25%;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),transparent)}.ts-metric::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(139,92,246,.06) 0%,transparent 60%);pointer-events:none;opacity:0;transition:opacity .35s}.ts-metric:hover{border-color:rgba(139,92,246,.25);transform:translateY(-3px);box-shadow:0 20px 50px -20px rgba(139,92,246,.25)}.ts-metric:hover::after{opacity:1}.ts-m-icon{font-size:22px;margin-bottom:12px;filter:grayscale(.15);display:block;line-height:1}.ts-m-val{font-family:'JetBrains Mono',monospace;font-weight:800;letter-spacing:-1px;line-height:1;display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:nowrap;margin-bottom:10px;min-height:36px}.ts-m-before{color:#ef4444;opacity:.65;font-size:22px;text-shadow:0 0 16px rgba(239,68,68,.25)}.ts-m-after{background:linear-gradient(135deg,#22c55e 0%,#86efac 60%,#bbf7d0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-size:32px;filter:drop-shadow(0 0 14px rgba(34,197,94,.4))}.ts-m-single{background:linear-gradient(135deg,#c4b5fd 0%,#60a5fa 50%,#22c55e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-size:34px;filter:drop-shadow(0 0 16px rgba(139,92,246,.45));font-family:'JetBrains Mono',monospace;font-weight:800;letter-spacing:-1px}.ts-m-arrow{color:#2563EB;font-size:18px;font-weight:300;display:inline-block;animation:ts-arrow-slide 2.4s ease-in-out infinite;opacity:.75;align-self:center}@keyframes ts-arrow-slide{0%, 100%{transform:translateX(0);opacity:.6}50%{transform:translateX(5px);opacity:1}}.ts-m-lb{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:2px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-top:6px;font-weight:700}.ts-m-uplift{display:inline-block;margin-top:14px;padding:4px 11px;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;letter-spacing:1.2px;background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(37,99,235,.22));border:1px solid rgba(139,92,246,.35);color:#c4b5fd;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 0 20px -6px rgba(139,92,246,.4)}.cp-input{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:26px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 60px -20px rgba(37,99,235,.25),inset 0 1px 0 rgba(255,255,255,.04)}.cp-input-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}.cp-step-num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(37,99,235,.28));border:1px solid rgba(139,92,246,.4);font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:800;color:#c4b5fd;flex-shrink:0}.cp-step-title{font-size:12px;font-weight:800;color:rgba(255,255,255,.7);font-family:'JetBrains Mono',monospace;letter-spacing:1.8px;text-transform:uppercase}.cp-prompt{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);font-size:15px;color:rgba(255,255,255,.88);margin-bottom:16px;font-family:'Inter',sans-serif;line-height:1.4}.cp-prompt-text{flex:1;min-width:0}.cp-cursor{display:inline-block;width:2px;height:17px;background:#60a5fa;animation:cp-cursor-blink 1.1s step-end infinite;vertical-align:middle;box-shadow:0 0 8px rgba(96,165,250,.7);flex-shrink:0}@keyframes cp-cursor-blink{50%{opacity:0}}.cp-tags{display:flex;gap:8px;flex-wrap:wrap}.cp-tag{padding:5px 12px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.6);font-weight:500;white-space:nowrap}.cp-flow-wrap{display:flex;flex-direction:column;align-items:center;margin:20px 0}.cp-flow-line{width:2px;height:24px;background:linear-gradient(180deg,rgba(139,92,246,.5),rgba(37,99,235,.5))}.cp-flow-label{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:100px;background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(37,99,235,.2));border:1px solid rgba(139,92,246,.4);font-size:11px;font-weight:800;color:#ddd6fe;box-shadow:0 0 40px -8px rgba(139,92,246,.6);font-family:'JetBrains Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;margin:4px 0}.cp-flow-label svg{color:#c4b5fd;filter:drop-shadow(0 0 6px rgba(196,181,253,.7))}.cp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:900px){.cp-grid{grid-template-columns:repeat(2,1fr)}}.cp-variant{display:flex;flex-direction:column;gap:8px}.cp-variant .thumb-slot{aspect-ratio:16/9}.cp-variant-name{font-size:11px;color:rgba(255,255,255,.4);font-family:'JetBrains Mono',monospace;letter-spacing:.5px;text-align:center;padding:4px 0}.cp-variant--winner .cp-variant-name{color:#c4b5fd;font-weight:700}.ts-pair-type{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;border:1px solid currentColor;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.ts-pair-type--optimized{color:#34d399;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.4)}.ts-pair-type--created{color:#60a5fa;background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.4)}.ts-pair-type--inspired{color:#fb7185;background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.4)}.topic-input{position:relative;aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg,#18181b 0%,#1e1b2e 100%);border:1px solid rgba(139,92,246,.3);padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(139,92,246,.1),0 12px 36px -12px rgba(139,92,246,.35)}.topic-input::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),transparent)}.topic-input::after{content:'';position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:#c4b5fd;box-shadow:0 0 10px rgba(196,181,253,.9);animation:ti-ping 1.6s ease-in-out infinite}@keyframes ti-ping{0%, 100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}.topic-label{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(196,181,253,.95);margin-bottom:3px}.topic-text{font-size:11px;color:rgba(255,255,255,.9);line-height:1.35;font-weight:500;font-family:'Inter',sans-serif}.topic-cursor{display:inline-block;width:1.5px;height:10px;background:#60a5fa;animation:cp-cursor-blink 1.1s step-end infinite;margin-left:2px;vertical-align:baseline;box-shadow:0 0 6px rgba(96,165,250,.8)}.thumb-slot--viral-ref{border-color:rgba(37,99,235,.5);box-shadow:0 0 0 1px rgba(37,99,235,.18),0 12px 40px -12px rgba(37,99,235,.35)}.ts-label--viral{background:rgba(37,99,235,.3);color:#93c5fd;border:1px solid rgba(37,99,235,.5)}.ts-score--viral{background:linear-gradient(135deg,rgba(251,146,60,.3),rgba(239,68,68,.25));color:#fdba74;border:1px solid rgba(251,146,60,.5)}.ts-pair--optimized{--type-rgb:52,211,153}.ts-pair--created{--type-rgb:96,165,250}.ts-pair--inspired{--type-rgb:251,113,133}.ts-pair{position:relative;overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1)}.ts-pair::after{content:'';position:absolute;top:-35%;right:-28%;width:260px;height:260px;background:radial-gradient(circle,rgba(var(--type-rgb,255,255,255),.2) 0%,transparent 55%);opacity:.35;pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1);z-index:0}.ts-pair > *{position:relative;z-index:1}.ts-pair::before{content:'';position:absolute;top:0;left:18%;right:18%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(var(--type-rgb,255,255,255),.7),transparent);opacity:0;transition:opacity .4s,left .5s cubic-bezier(.16,1,.3,1),right .5s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:3}.ts-pair:hover::before{opacity:1;left:0;right:0}.ts-pair:hover::after{opacity:.65;transform:translateY(12px) scale(1.2)}.ts-pair:hover{border-color:rgba(var(--type-rgb,255,255,255),.28)!important;transform:translateY(-5px);box-shadow:0 26px 60px -16px rgba(var(--type-rgb,0,0,0),.3);background:linear-gradient(135deg,rgba(var(--type-rgb,255,255,255),.04) 0%,rgba(255,255,255,.015) 100%)}.ts-pair-head{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:18px!important}.ts-pair-head > span:first-child{color:rgba(255,255,255,.75);font-weight:700;font-size:11px;letter-spacing:1.3px}.ts-pair-result{padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,rgba(34,197,94,.07),rgba(139,92,246,.04));border:1px solid rgba(34,197,94,.12);transition:all .35s cubic-bezier(.16,1,.3,1)}.ts-pair:hover .ts-pair-result{border-color:rgba(34,197,94,.28);background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(139,92,246,.07))}.ts-pair-metric{color:rgba(255,255,255,.6);font-weight:600;font-size:12px}.ts-pair-value{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#22c55e 0%,#86efac 50%,#bbf7d0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 10px rgba(34,197,94,.4))}@keyframes topic-shimmer{0%, 100%{background-position:0% 0%}50%{background-position:100% 0%}}.topic-input{background:linear-gradient(120deg,#16161a 0%,#211830 40%,#1e1b2e 60%,#16161a 100%);background-size:250% 100%;animation:topic-shimmer 6s ease-in-out infinite}.topic-text{color:rgba(255,255,255,.95);text-shadow:0 1px 2px rgba(0,0,0,.4)}@keyframes viral-flame-pulse{0%, 100%{box-shadow:0 0 12px -2px rgba(251,146,60,.35),0 0 0 1px rgba(251,146,60,.55)}50%{box-shadow:0 0 30px -2px rgba(251,146,60,.85),0 0 0 1px rgba(251,146,60,.8),0 0 56px -10px rgba(239,68,68,.4)}}.ts-score--viral{animation:viral-flame-pulse 2s ease-in-out infinite;font-weight:900;font-size:13px;text-shadow:0 0 8px rgba(251,146,60,.5)}@keyframes viral-ref-glow{0%, 100%{box-shadow:0 0 0 1px rgba(37,99,235,.2),0 12px 40px -12px rgba(37,99,235,.35)}50%{box-shadow:0 0 0 1px rgba(37,99,235,.4),0 16px 52px -12px rgba(37,99,235,.65)}}.thumb-slot--viral-ref{animation:viral-ref-glow 4s ease-in-out infinite}.ts-gallery .thumb-slot--ai .ts-label--after{background:linear-gradient(135deg,rgba(139,92,246,.4),rgba(37,99,235,.3))!important;color:#ddd6fe!important;border-color:rgba(139,92,246,.55)!important;box-shadow:0 4px 14px -4px rgba(139,92,246,.5)}.ts-pair-type{transition:all .3s cubic-bezier(.16,1,.3,1)}.ts-pair-type:hover{transform:translateY(-2px) scale(1.05);filter:brightness(1.2);box-shadow:0 8px 20px -6px currentColor}@keyframes ts-pair-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.ts-gallery.vis .ts-pair{animation:ts-pair-in .65s cubic-bezier(.16,1,.3,1) both}.ts-gallery.vis .ts-pair:nth-child(1){animation-delay:0s}.ts-gallery.vis .ts-pair:nth-child(2){animation-delay:.08s}.ts-gallery.vis .ts-pair:nth-child(3){animation-delay:.16s}.ts-gallery.vis .ts-pair:nth-child(4){animation-delay:.24s}.ts-gallery.vis .ts-pair:nth-child(5){animation-delay:.32s}.ts-gallery.vis .ts-pair:nth-child(6){animation-delay:.4s}@keyframes gen-sparkle{0%, 100%{box-shadow:0 0 0 1px rgba(139,92,246,.45),0 0 12px -2px rgba(139,92,246,.3)}50%{box-shadow:0 0 0 1px rgba(139,92,246,.6),0 0 24px -2px rgba(139,92,246,.6),0 0 40px -8px rgba(37,99,235,.35)}}.ts-gallery .thumb-slot--ai .ts-score--high{animation:gen-sparkle 3s ease-in-out infinite}.ts-types-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:0 auto 56px}@media(max-width:768px){.ts-types-bento{grid-template-columns:1fr}}.ts-type-card{position:relative;padding:26px 24px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1);isolation:isolate;cursor:default}.ts-type-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--tc),transparent);opacity:.85;z-index:2}.ts-type-card::after{content:'';position:absolute;top:-40%;right:-30%;width:240px;height:240px;background:radial-gradient(circle,var(--tcs) 0%,transparent 55%);opacity:.35;pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1);z-index:0}.ts-type-card > *{position:relative;z-index:1}.ts-type-card:hover{border-color:var(--tcb);transform:translateY(-5px);box-shadow:0 26px 60px -16px var(--tcsh);background:rgba(255,255,255,.035)}.ts-type-card:hover::after{opacity:.6;transform:translateY(8px) scale(1.18)}.ts-type-card:hover .ts-type-icon{transform:scale(1.1) rotate(-4deg)}.ts-type-icon{font-size:34px;margin-bottom:14px;display:inline-block;line-height:1;filter:drop-shadow(0 0 18px var(--tcs));transition:transform .45s cubic-bezier(.16,1,.3,1)}.ts-type-title{font-size:16px;font-weight:800;color:var(--tct);margin-bottom:8px;letter-spacing:-.3px}.ts-type-desc{font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;margin-bottom:18px}.ts-type-stat{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;letter-spacing:.8px;background:rgba(var(--tcrgb),.12);border:1px solid rgba(var(--tcrgb),.35);color:var(--tct);text-shadow:0 0 12px var(--tcs)}.ts-type-card--created{--tc:#60a5fa;--tcs:rgba(96,165,250,.4);--tcb:rgba(96,165,250,.4);--tct:#93c5fd;--tcsh:rgba(96,165,250,.3);--tcrgb:96,165,250}.ts-type-card--optimized{--tc:#34d399;--tcs:rgba(52,211,153,.4);--tcb:rgba(52,211,153,.4);--tct:#6ee7b7;--tcsh:rgba(52,211,153,.3);--tcrgb:52,211,153}.ts-type-card--inspired{--tc:#fb7185;--tcs:rgba(251,113,133,.4);--tcb:rgba(251,113,133,.45);--tct:#fda4af;--tcsh:rgba(251,113,133,.32);--tcrgb:251,113,133}.ts-gallery .topic-input{background:linear-gradient(120deg,#16161a 0%,#17223a 40%,#1a2440 60%,#16161a 100%);border:1px solid rgba(96,165,250,.3);box-shadow:0 0 0 1px rgba(96,165,250,.1),0 12px 36px -12px rgba(96,165,250,.35)}.ts-gallery .topic-input::before{background:linear-gradient(90deg,transparent,rgba(96,165,250,.6),transparent)}.ts-gallery .topic-input::after{background:#60a5fa;box-shadow:0 0 10px rgba(96,165,250,.9)}.ts-gallery .topic-label{color:rgba(147,197,253,.95)}.ts-gallery .thumb-slot--ai{border-color:rgba(37,99,235,.55)!important;box-shadow:0 0 0 1px rgba(37,99,235,.22),0 18px 56px -12px rgba(37,99,235,.5),0 0 90px -16px rgba(96,165,250,.45)!important;animation:ai-breathe-blue 4.2s ease-in-out infinite}.ts-gallery .thumb-slot--ai:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(37,99,235,.4),0 28px 80px -12px rgba(37,99,235,.6),0 0 120px -16px rgba(96,165,250,.55)!important}@keyframes ai-breathe-blue{0%, 100%{box-shadow:0 0 0 1px rgba(37,99,235,.25),0 18px 56px -12px rgba(37,99,235,.5),0 0 90px -16px rgba(96,165,250,.45)}50%{box-shadow:0 0 0 1px rgba(37,99,235,.45),0 26px 74px -12px rgba(37,99,235,.72),0 0 140px -16px rgba(96,165,250,.65)}}.ts-gallery .thumb-slot--ai .ts-label--after{background:linear-gradient(135deg,rgba(37,99,235,.4),rgba(59,130,246,.3))!important;color:#dbeafe!important;border-color:rgba(37,99,235,.55)!important;box-shadow:0 4px 14px -4px rgba(37,99,235,.5)!important}@keyframes gen-sparkle-blue{0%, 100%{box-shadow:0 0 0 1px rgba(37,99,235,.45),0 0 12px -2px rgba(37,99,235,.3)}50%{box-shadow:0 0 0 1px rgba(37,99,235,.6),0 0 24px -2px rgba(37,99,235,.6),0 0 40px -8px rgba(96,165,250,.35)}}.ts-gallery .thumb-slot--ai .ts-score--high{animation:gen-sparkle-blue 3s ease-in-out infinite!important}.comp{gap:20px!important;max-width:1080px;margin:0 auto}.cs{position:relative;border-radius:22px!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);isolation:isolate;transition:all .4s cubic-bezier(.16,1,.3,1);overflow:hidden}.cs--r{--csrgb:239,68,68;background:linear-gradient(135deg,rgba(239,68,68,.05) 0%,rgba(239,68,68,.015) 40%,rgba(255,255,255,.005) 100%)!important;border:1px solid rgba(239,68,68,.15)!important;filter:saturate(.92)}.cs--g{--csrgb:34,197,94;background:linear-gradient(135deg,rgba(34,197,94,.08) 0%,rgba(34,197,94,.02) 40%,rgba(255,255,255,.008) 100%)!important;border:1px solid rgba(34,197,94,.22)!important}.cs--g::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.85),transparent);opacity:1;z-index:2}.cs--g .csh::after{content:'★ RECOMMENDED';position:absolute;top:20px;right:20px;padding:5px 11px;font-size:9.5px;font-weight:900;letter-spacing:1.4px;color:#22c55e;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.45);border-radius:100px;box-shadow:0 0 18px -2px rgba(34,197,94,.5),inset 0 1px 0 rgba(255,255,255,.1);animation:cs-ribbon-pulse 3s ease-in-out infinite}@keyframes cs-ribbon-pulse{0%, 100%{box-shadow:0 0 18px -2px rgba(34,197,94,.5),inset 0 1px 0 rgba(255,255,255,.1)}50%{box-shadow:0 0 26px -2px rgba(34,197,94,.85),inset 0 1px 0 rgba(255,255,255,.15)}}.cs .csb{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.02) 1px,transparent 0);background-size:28px 28px}.cs::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(var(--csrgb),.65),transparent);opacity:.85;z-index:2}.cs::after{content:'';position:absolute;top:-40%;right:-30%;width:280px;height:280px;background:radial-gradient(circle,rgba(var(--csrgb),.15) 0%,transparent 55%);opacity:.5;pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1);z-index:0}.cs > *{position:relative;z-index:1}.cs:hover{transform:translateY(-4px);border-color:rgba(var(--csrgb),.3)!important;box-shadow:0 26px 60px -16px rgba(var(--csrgb),.28)}.cs:hover::after{opacity:.8;transform:translateY(10px) scale(1.2)}@keyframes cs-winner-breathe{0%, 100%{box-shadow:0 0 0 1px rgba(34,197,94,.15),0 16px 48px -12px rgba(34,197,94,.25)}50%{box-shadow:0 0 0 1px rgba(34,197,94,.3),0 22px 60px -12px rgba(34,197,94,.45)}}.cs--g{animation:cs-winner-breathe 4s ease-in-out infinite}.cs--g:hover{animation:none}.csh{padding:22px 28px 18px!important;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px!important;letter-spacing:1.8px!important;text-transform:uppercase;font-weight:900!important}.csh > span:first-child{display:inline-flex!important;align-items:center;justify-content:center;width:30px!important;height:30px!important;border-radius:50%;font-size:15px!important;font-weight:900;background:rgba(var(--csrgb),.2);border:1px solid rgba(var(--csrgb),.45);box-shadow:0 0 18px -4px rgba(var(--csrgb),.5)}.csb{padding:18px 28px 26px!important}.cw{padding:16px 0!important;border-bottom:1px solid rgba(255,255,255,.04)!important;align-items:center!important;gap:14px!important}.cw:last-of-type{border-bottom:none!important}.cwi{width:40px!important;height:40px!important;border-radius:11px!important;background:rgba(var(--csrgb),.1)!important;border:1px solid rgba(var(--csrgb),.22);font-size:17px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px -4px rgba(var(--csrgb),.25)!important}.cwt{font-size:14px!important;color:rgba(255,255,255,.82)!important;font-weight:500;line-height:1.45}.cwv{font-family:'JetBrains Mono',monospace!important;font-size:11px!important;letter-spacing:.8px;font-weight:800!important;margin-top:6px!important;display:inline-block;padding:4px 11px;border-radius:100px;background:rgba(var(--csrgb),.12);border:1px solid rgba(var(--csrgb),.28);box-shadow:0 0 12px -4px rgba(var(--csrgb),.3)}.ct2{padding:18px 0 4px!important;margin-top:14px!important;border-top:1px solid rgba(255,255,255,.08)!important;font-size:13px!important;color:rgba(255,255,255,.55)!important;font-weight:600!important;letter-spacing:.5px!important}.ct2 span:last-child{font-family:'JetBrains Mono',monospace!important;font-size:24px!important;font-weight:900!important;letter-spacing:-1px;text-shadow:0 0 26px rgba(var(--csrgb),.45)}.cs--g .cw:first-of-type{margin:8px 0 10px;padding:14px!important;background:linear-gradient(135deg,rgba(96,165,250,.06) 0%,rgba(52,211,153,.06) 50%,rgba(251,113,133,.06) 100%)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:14px;position:relative}.cs--g .cw:first-of-type::before{content:'';position:absolute;inset:-1px;border-radius:14px;padding:1px;background:linear-gradient(135deg,rgba(96,165,250,.35),rgba(52,211,153,.35),rgba(251,113,133,.35));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6;animation:trio-border 6s linear infinite}@keyframes trio-border{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(30deg)}}.cs--g .cw:first-of-type .cwi{background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(52,211,153,.15),rgba(251,113,133,.15))!important;border-color:rgba(255,255,255,.12)!important}.cs--g .cw:first-of-type .cwt{font-weight:600!important;font-size:13.5px!important}.gauge-wrap{width:240px;max-width:100%;margin:0 auto;position:relative;padding-bottom:2px}.gauge-wrap::before{content:'';position:absolute;top:10%;left:50%;transform:translateX(-50%);width:80%;height:60%;background:radial-gradient(ellipse at center,rgba(34,197,94,.18) 0%,transparent 65%);pointer-events:none;z-index:0;filter:blur(8px)}.gauge-wrap > svg{position:relative;z-index:1}.gauge-needle{transform-origin:120px 120px;transform:rotate(-180deg);will-change:transform}.vis .gauge-needle, .glass:hover .gauge-needle{animation:gauge-sweep 2.4s cubic-bezier(.16,1,.3,1) forwards}@keyframes gauge-sweep{0%{transform:rotate(-180deg);opacity:.3}12%{opacity:1}55%{transform:rotate(-6deg)}75%{transform:rotate(-26deg)}90%{transform:rotate(-15deg)}100%{transform:rotate(-18deg);opacity:1}}.gauge-score{font-family:'JetBrains Mono',monospace;font-size:44px;font-weight:900;color:#22c55e;line-height:1;letter-spacing:-1.8px;text-shadow:0 0 32px rgba(34,197,94,.55);margin-top:-2px}.gauge-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:800;margin-top:6px;margin-bottom:14px;font-family:'Inter',sans-serif}.ts-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#22c55e;font-weight:800;margin-bottom:10px;padding:5px 11px;border-radius:100px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);box-shadow:0 0 16px -4px rgba(34,197,94,.3)}.ts-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:ts-eyebrow-pulse 2s ease-in-out infinite}@keyframes ts-eyebrow-pulse{0%, 100%{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(.85)}}.ts-zones{display:flex;justify-content:space-between;width:80%;margin:-4px auto 16px;font-size:9px;letter-spacing:1.6px;font-weight:800;font-family:'JetBrains Mono',monospace}.ts-zone{position:relative;padding:3px 0}.ts-zone--flop{color:#ef4444;text-shadow:0 0 10px rgba(239,68,68,.4)}.ts-zone--mid{color:#eab308;text-shadow:0 0 10px rgba(234,179,8,.4)}.ts-zone--viral{color:#22c55e;text-shadow:0 0 12px rgba(34,197,94,.55)}.ts-score-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:2px}.ts-verdict{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:1.3px;font-weight:800;padding:5px 11px;border-radius:100px;background:rgba(34,197,94,.14);color:#22c55e;border:1px solid rgba(34,197,94,.42);box-shadow:0 0 18px -4px rgba(34,197,94,.55);text-transform:uppercase;animation:ts-verdict-breathe 3s ease-in-out infinite}@keyframes ts-verdict-breathe{0%, 100%{box-shadow:0 0 18px -4px rgba(34,197,94,.55)}50%{box-shadow:0 0 26px -3px rgba(34,197,94,.9)}}.sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}@media(max-width:900px){.sm-grid{grid-template-columns:1fr;gap:24px}}.sm-pitch{display:flex;flex-direction:column;justify-content:center}.sm-mock{position:relative;padding:18px;background:linear-gradient(135deg,rgba(255,255,255,.028) 0%,rgba(255,255,255,.005) 100%);border:1px solid rgba(255,255,255,.08);border-radius:16px;backdrop-filter:blur(14px);overflow:hidden;isolation:isolate}.sm-mock::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.55),transparent);z-index:2}.sm-mock::after{content:'';position:absolute;top:-30%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(96,165,250,.12) 0%,transparent 60%);pointer-events:none;z-index:0}.sm-mock > *{position:relative;z-index:1}.sm-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px;font-weight:700;color:rgba(255,255,255,.6)}.sm-pulse{width:7px;height:7px;border-radius:50%;background:#60a5fa;box-shadow:0 0 10px #60a5fa;animation:sm-pulse 1.6s ease-in-out infinite;flex-shrink:0}@keyframes sm-pulse{0%, 100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.sm-head-text{flex:1;letter-spacing:.3px}.sm-head-time{color:rgba(255,255,255,.32);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600}.sm-thumb{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,#1e293b,#0f172a);margin-bottom:16px;isolation:isolate}.sm-thumb img{width:100%;height:100%;object-fit:cover;display:block}.sm-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.28) 100%);pointer-events:none;z-index:1}.sm-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 45%,rgba(96,165,250,.5) 48%,rgba(96,165,250,.85) 50%,rgba(96,165,250,.5) 52%,transparent 55%,transparent 100%);pointer-events:none;z-index:2;mix-blend-mode:screen;animation:sm-scan-anim 3s cubic-bezier(.6,0,.4,1) infinite}@keyframes sm-scan-anim{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(100%);opacity:0}}.sm-thumb-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;opacity:.25;pointer-events:none}.sm-flag{position:absolute;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;background:#ef4444;border:2px solid rgba(0,0,0,.35);box-shadow:0 0 14px rgba(239,68,68,.75);animation:sm-flag-pulse 2s ease-in-out infinite;transform:translate(-50%,-50%);font-family:'Inter',sans-serif;line-height:1;z-index:3}@keyframes sm-flag-pulse{0%, 100%{box-shadow:0 0 14px rgba(239,68,68,.75);transform:translate(-50%,-50%) scale(1)}50%{box-shadow:0 0 22px rgba(239,68,68,1);transform:translate(-50%,-50%) scale(1.15)}}.sm-metrics{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}.sm-metric{display:grid;grid-template-columns:76px 1fr 26px;gap:10px;align-items:center;font-size:10.5px}.sm-metric-lbl{color:rgba(255,255,255,.55);font-weight:600;text-align:left;letter-spacing:.2px}.sm-metric-bar{height:6px;background:rgba(255,255,255,.04);border-radius:100px;overflow:hidden;border:1px solid rgba(255,255,255,.04)}.sm-metric-fill{height:100%;border-radius:100px;width:0;animation:sm-bar-fill 1.5s cubic-bezier(.16,1,.3,1) .2s forwards}.sm-fill--low{background:linear-gradient(90deg,#dc2626,#ef4444);box-shadow:0 0 8px rgba(239,68,68,.5)}.sm-fill--mid{background:linear-gradient(90deg,#ca8a04,#eab308);box-shadow:0 0 8px rgba(234,179,8,.5)}.sm-fill--high{background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 0 8px rgba(34,197,94,.5)}@keyframes sm-bar-fill{from{width:0}to{width:var(--w)}}.sm-metric-val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;color:rgba(255,255,255,.78);text-align:center}.sm-final{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);border-radius:11px;box-shadow:0 0 22px -6px rgba(239,68,68,.3)}.sm-final-lbl{flex:1;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);font-family:'Inter',sans-serif}.sm-final-val{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:900;color:#ef4444;letter-spacing:-1.2px;line-height:1;text-shadow:0 0 18px rgba(239,68,68,.5)}.sm-final-verdict{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:1px;padding:4px 9px;border-radius:100px;background:rgba(239,68,68,.16);color:#ef4444;border:1px solid rgba(239,68,68,.42);text-transform:uppercase}.ni-marquee{display:flex;flex-direction:column;gap:7px;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);margin:0 -12px}.ni-row{overflow:hidden;width:100%}.ni-track{display:inline-flex;will-change:transform}.ni-row--right .ni-track{animation:ni-right 38s linear infinite}.ni-row--left .ni-track{animation:ni-left 42s linear infinite}.ni-marquee:hover .ni-track{animation-play-state:paused}@keyframes ni-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}@keyframes ni-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}.ni-tag{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:100px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:.2px;flex-shrink:0;margin-right:7px;transition:background .3s,border-color .3s,color .3s,transform .3s;cursor:default;white-space:nowrap}.ni-tag:hover{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.38);color:#fff;transform:translateY(-1px)}.tw-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px;flex-wrap:wrap}.tw-head-copy{flex:1;min-width:300px}.tw-cta{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;font-weight:700;font-size:14px;border-radius:100px;text-decoration:none;box-shadow:0 8px 24px -8px rgba(34,197,94,.55),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .3s ease,box-shadow .3s ease;white-space:nowrap;flex-shrink:0;letter-spacing:.2px}.tw-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px -8px rgba(34,197,94,.7),inset 0 1px 0 rgba(255,255,255,.25)}.tw-trust{display:flex;justify-content:center;gap:56px;margin-bottom:48px;padding-top:40px;border-top:1px solid rgba(15,23,42,.06);flex-wrap:wrap}.tw-trust-item{display:flex;align-items:center;gap:12px}.tw-trust-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.06);flex-shrink:0}.tw-trust-ic--star{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.28)}.tw-trust-val{font-size:14px;font-weight:700;color:#0f172a;line-height:1.3}.tw-trust-lbl{font-size:12px;color:rgba(15,23,42,.5);line-height:1.3;margin-top:2px}.tw-marquee{display:flex;flex-direction:column;gap:18px;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);padding:12px 0;margin:0 -20px}.tw-row{overflow:hidden;width:100%;min-width:0}.tw-track{display:inline-flex;will-change:transform}.tw-row--right .tw-track{animation:tw-right 55s linear infinite}.tw-row--left .tw-track{animation:tw-left 62s linear infinite}.tw-marquee:hover .tw-track{animation-play-state:running}@keyframes tw-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}@keyframes tw-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}.tw-card{width:340px;flex-shrink:0;margin-right:18px;padding:22px 22px 18px;background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:18px;box-shadow:0 4px 16px -6px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.03);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .35s ease}.tw-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px -10px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.04);border-color:rgba(37,99,235,.15)}.tw-stars{color:#FACC15;letter-spacing:2px;font-size:13px;margin-bottom:12px;line-height:1;text-shadow:0 1px 2px rgba(250,204,21,.25)}.tw-quote{font-size:15px;font-weight:800;color:#0f172a;line-height:1.35;margin-bottom:10px;letter-spacing:-.2px}.tw-body{font-size:13px;color:rgba(15,23,42,.6);line-height:1.55;margin-bottom:18px;min-height:60px}.tw-author{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid rgba(15,23,42,.06)}.tw-ava{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;letter-spacing:.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 6px rgba(15,23,42,.1);flex-shrink:0}.tw-aname{color:#0f172a;font-size:13px;font-weight:700;display:block;line-height:1.2}.tw-arole{color:rgba(15,23,42,.5);font-size:11px;display:block;margin-top:1px}@media(max-width:768px){.tw-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:40px}.tw-trust{gap:28px;padding-top:28px;margin-bottom:32px}.tw-card{width:280px;padding:18px;margin-right:14px}.tw-quote{font-size:14px}.tw-body{font-size:12.5px;min-height:auto}}.cp-paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1080px;margin:0 auto}@media(max-width:900px){.cp-paths{grid-template-columns:1fr;gap:20px}}.cp-path{position:relative;border-radius:22px;padding:26px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden;isolation:isolate;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}.cp-path--a{--pathrgb:251,113,133;background:linear-gradient(135deg,rgba(251,113,133,.08) 0%,rgba(251,113,133,.02) 50%,rgba(255,255,255,.005) 100%);border:1px solid rgba(251,113,133,.22)}.cp-path--b{--pathrgb:96,165,250;background:linear-gradient(135deg,rgba(96,165,250,.08) 0%,rgba(96,165,250,.02) 50%,rgba(255,255,255,.005) 100%);border:1px solid rgba(96,165,250,.22)}.cp-path::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(var(--pathrgb),.7),transparent);z-index:2}.cp-path::after{content:'';position:absolute;top:-30%;right:-20%;width:280px;height:280px;background:radial-gradient(circle,rgba(var(--pathrgb),.18) 0%,transparent 55%);opacity:.55;pointer-events:none;z-index:0;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1)}.cp-path > *{position:relative;z-index:1}.cp-path:hover{transform:translateY(-4px);box-shadow:0 26px 60px -16px rgba(var(--pathrgb),.3);border-color:rgba(var(--pathrgb),.4)}.cp-path:hover::after{opacity:.9;transform:translateY(10px) scale(1.15)}.cp-path-label{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:rgb(var(--pathrgb));background:rgba(var(--pathrgb),.13);border:1px solid rgba(var(--pathrgb),.42);border-radius:100px;margin-bottom:14px;box-shadow:0 0 18px -4px rgba(var(--pathrgb),.5)}.cp-path-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:18px;letter-spacing:-.4px;line-height:1.2}.cp-steps{display:flex;flex-direction:column;margin-bottom:20px}.cp-step{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}.cp-step:last-child{border-bottom:none;padding-bottom:4px}.cp-step-badge{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--pathrgb),.14);border:1px solid rgba(var(--pathrgb),.42);font-size:11px;font-weight:900;color:rgb(var(--pathrgb));font-family:'JetBrains Mono',monospace}.cp-step-body{flex:1}.cp-step-title{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:3px;line-height:1.3}.cp-step-desc{font-size:12px;color:rgba(255,255,255,.58);line-height:1.45}.cp-path-mock{margin-top:auto;border-radius:13px;padding:14px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(6px)}.cp-mock-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px;font-weight:700;color:rgba(255,255,255,.72);letter-spacing:.3px}.cp-mock-filters{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}.cp-mock-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:10px;font-weight:700;color:rgba(255,255,255,.55);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:100px}.cp-mock-chip--active{color:rgb(var(--pathrgb));background:rgba(var(--pathrgb),.13);border-color:rgba(var(--pathrgb),.4)}.cp-mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cp-mock-thumb{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}.cp-mock-thumb img{width:100%;height:100%;object-fit:cover}.cp-mock-thumb--viral{border-color:rgba(251,113,133,.65);box-shadow:0 0 18px -4px rgba(251,113,133,.55);animation:mock-viral-pulse 3s ease-in-out infinite}@keyframes mock-viral-pulse{0%, 100%{box-shadow:0 0 18px -4px rgba(251,113,133,.55)}50%{box-shadow:0 0 26px -3px rgba(251,113,133,.85)}}.cp-mock-views{position:absolute;top:6px;left:6px;padding:3px 8px;font-size:10.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.75);border-radius:100px;backdrop-filter:blur(4px);letter-spacing:.2px;box-shadow:0 2px 6px rgba(0,0,0,.4)}.cp-mock-score{position:absolute;bottom:6px;right:6px;min-width:36px;height:36px;padding:0 6px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);border:2px solid rgba(255,255,255,.35);font-family:'JetBrains Mono',monospace;letter-spacing:-.5px;box-shadow:0 4px 14px rgba(34,197,94,.55),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 2px rgba(0,0,0,.25)}.cp-mock-prompt{padding:10px 12px;margin-bottom:8px;background:rgba(255,255,255,.02);border:1px solid rgba(96,165,250,.22);border-radius:8px;position:relative}.cp-mock-prompt-label{font-size:9px;font-weight:800;letter-spacing:1px;color:#60a5fa;text-transform:uppercase;display:block;margin-bottom:4px}.cp-mock-prompt-text{font-size:11px;color:rgba(255,255,255,.88);font-weight:500;font-family:'JetBrains Mono',monospace;line-height:1.4}.cp-mock-prompt-text .cp-cursor{display:inline-block;width:2px;height:11px;background:#60a5fa;margin-left:2px;vertical-align:middle;animation:cp-cursor-blink 1s step-end infinite}.cp-mock-face{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.28);border-radius:8px}.cp-mock-face-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.42);font-size:15px;flex-shrink:0;box-shadow:0 0 12px -4px rgba(96,165,250,.55)}.cp-mock-face-label{font-size:11px;font-weight:800;color:#fff;letter-spacing:.2px}.cp-mock-face-status{font-size:9.5px;color:#22c55e;font-weight:700;margin-top:1px;font-family:'JetBrains Mono',monospace}.cp-converge{display:flex;justify-content:center;align-items:center;gap:18px;margin:44px auto 32px;max-width:720px;padding:0 24px}.cp-converge-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.5),transparent)}.cp-converge-label{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.8);background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(96,165,250,.06));border:1px solid rgba(37,99,235,.3);border-radius:100px;backdrop-filter:blur(12px);box-shadow:0 0 28px -8px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.06);white-space:nowrap}.cp-converge-label svg{color:#60a5fa}@media(max-width:640px){.cp-converge-line{display:none}.cp-converge-label{font-size:10px;padding:9px 14px}}.cp-variant .thumb-slot{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}.cp-variant .thumb-slot img{width:100%;height:100%;object-fit:cover;display:block}.cp-variant--winner .thumb-slot{border-color:rgba(139,92,246,.55);box-shadow:0 0 28px -6px rgba(139,92,246,.55),0 0 0 1px rgba(139,92,246,.25) inset;animation:winner-pulse 3s ease-in-out infinite}@keyframes winner-pulse{0%, 100%{box-shadow:0 0 28px -6px rgba(139,92,246,.55),0 0 0 1px rgba(139,92,246,.25) inset}50%{box-shadow:0 0 40px -4px rgba(139,92,246,.75),0 0 0 1px rgba(139,92,246,.4) inset}}.cp-win-label{position:absolute;top:10px;left:10px;padding:5px 11px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;background:rgba(0,0,0,.7);color:rgba(255,255,255,.9);border-radius:100px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.4)}.cp-win-label--winner{background:linear-gradient(135deg,rgba(251,191,36,.95),rgba(245,158,11,.95));color:#1a1206;border:1px solid rgba(255,255,255,.45);box-shadow:0 4px 14px -2px rgba(245,158,11,.55),0 0 0 1px rgba(255,255,255,.2) inset}.cp-win-views{position:absolute;top:10px;right:10px;padding:4px 10px;font-size:11px;font-weight:800;color:#fff;background:rgba(0,0,0,.75);border-radius:100px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);letter-spacing:.3px;box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:3}.cp-variant--winner .cp-win-views{display:none}.cp-variant--winner .ts-ai-badge{top:10px!important;right:10px!important}.cp-win-score{position:absolute;bottom:10px;right:10px;min-width:44px;height:44px;padding:0 10px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;font-family:'JetBrains Mono',monospace;color:#fff;border:2px solid rgba(255,255,255,.35);letter-spacing:-.5px;box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 2px rgba(0,0,0,.3);z-index:3}.cp-win-score--winner{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 6px 22px rgba(34,197,94,.65),inset 0 1px 0 rgba(255,255,255,.4);font-size:22px}.cp-win-score--high{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 6px 18px rgba(34,197,94,.55),inset 0 1px 0 rgba(255,255,255,.35)}.cp-win-score--mid{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 6px 18px rgba(245,158,11,.55),inset 0 1px 0 rgba(255,255,255,.35)}.cp-win-score--low{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 6px 18px rgba(239,68,68,.55),inset 0 1px 0 rgba(255,255,255,.35)}.cp-variant-name{margin-top:12px;font-size:13px;font-weight:700;color:rgba(255,255,255,.75);text-align:center;letter-spacing:.2px}.cp-variant--winner .cp-variant-name{color:rgba(255,255,255,.95);font-weight:800}@media(max-width:720px){.cp-win-score{min-width:38px;height:38px;font-size:17px;border-radius:10px;padding:0 8px}.cp-win-score--winner{font-size:18px}.cp-win-label, .cp-win-views{font-size:10px;padding:3px 8px}}.tw-ava{overflow:hidden;position:relative}.tw-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}@keyframes hv-dot-pulse{0%, 100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}@media (max-width:768px){body{font-size:15px}.sh, h2.sh, .shl, h2.shl{font-size:clamp(26px,7vw,34px)!important;line-height:1.15!important;letter-spacing:-.02em}.sub, .subl{font-size:15px!important;line-height:1.55}.la{font-size:11px;letter-spacing:1.4px;margin-bottom:12px}.sec{padding:48px 0!important}.hero{padding:96px 0 24px!important}.mw{padding-left:20px;padding-right:20px}.sl{border-radius:20px!important}.sl + .sl{border-top-left-radius:0!important;border-top-right-radius:0!important}.sl:has(+ .sl){border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}h1, .hero h1{font-size:clamp(34px,9vw,44px)!important;line-height:1.1!important;letter-spacing:-.03em}.hero .sub{font-size:15px;padding:0 8px}.nav-links, .nl{display:none}#hero-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px!important}.hs-num{font-size:20px!important}.hs-lbl{font-size:9px!important;letter-spacing:.8px!important}.split, .pls, .comp, .g3, .ts, .fl, .sc, .ts-types-bento, .cp-paths, .ts-row{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}.ts-type-card, .cp-path, .glass, .pl, .fi, .tw-card{border-radius:16px!important;padding:20px!important}.tw-card{width:280px!important;margin-right:12px!important}.tw-quote{font-size:14px!important}.tw-body{font-size:12px!important;min-height:unset!important}.tw-head{flex-direction:column;align-items:flex-start!important;gap:20px!important;margin-bottom:32px!important}.tw-head .shl{text-align:left!important}.tw-head .subl{text-align:left!important}.tw-trust{gap:20px!important;padding-top:28px!important;margin-bottom:32px!important;justify-content:flex-start!important}.tw-trust-item{flex:0 0 auto}.tw-trust-val{font-size:13px!important}.tw-trust-lbl{font-size:10px!important}.tsf, .ts-featured{grid-template-columns:1fr!important;gap:16px!important}#faq .fl, .fl{gap:24px!important}.fi{padding:16px!important}.fq{font-size:14px!important}.cp-paths{gap:16px!important}.cp-path{padding:20px!important;margin-bottom:0!important}.cp-step{gap:10px!important;padding:10px 0!important}.cp-step-title{font-size:11.5px!important;letter-spacing:1.2px!important}.cp-step-desc{font-size:11.5px!important}.cp-mock-grid{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}.cp-converge{display:none}.ts-types-bento{gap:16px!important}.ts-type-card{padding:24px 20px!important}.ts-type-title{font-size:17px!important}.ts-type-desc{font-size:13px!important}.pls{gap:24px!important}.pl{text-align:center!important;padding:16px!important}.pli{width:44px!important;height:44px!important;margin:0 auto 10px!important}.plh{font-size:14px!important}.plp{font-size:12px!important}.cb, .ba, .cta, .hero-cta{min-height:48px;padding:14px 22px!important;font-size:15px!important}.cg{flex-direction:column;gap:10px;width:100%}.cg .cb, .cg .ba{width:100%;text-align:center}.ib{width:40px!important;height:40px!important}.split > div{min-width:0}.split img, .sc img{max-width:100%;height:auto}.fg{grid-template-columns:1fr 1fr!important;gap:24px!important}footer{padding:40px 0 32px!important}.hg, .hg2{opacity:.3!important;filter:blur(80px)}.ac, strong{word-break:keep-all}body, .mw, section{overflow-x:hidden}.sec:has(.tw-head) .tw-card{border-color:rgba(255,255,255,.12)!important}}@media (max-width:480px){.sec{padding:40px 0!important}.hero{padding:80px 0 20px!important}.mw{padding-left:16px;padding-right:16px}.sl{border-radius:16px!important}.ts-type-card, .cp-path, .fi, .glass{border-radius:14px!important;padding:18px!important}.tw-card{width:260px!important}.hs-num{font-size:18px!important}.hs-lbl{font-size:8.5px!important}.cl{grid-template-columns:1fr!important}.cr{font-size:13px}}@media (max-width:768px){.badge{padding:5px 16px 5px 5px;gap:10px}.badge span{font-size:13px}}@media (max-width:768px){.ni{height:48px}.nav{padding:8px 14px}.logo{font-size:14px;gap:6px}.logo svg{width:20px;height:20px}.nav .bo{padding:6px 12px;font-size:12px;border-radius:7px}.nav .bf, .nav .ba{padding:6px 14px;font-size:12px;border-radius:7px}.hero{padding:72px 0 12px!important}}@media (max-width:480px){.ni{height:44px}.nav{padding:6px 12px}.logo svg{width:18px;height:18px}.logo span{font-size:13px}.hero{padding:64px 0 12px!important}}

/* ============================================= */
/* MOBILE FULL-WIDE + NO HORIZONTAL SCROLL FIX   */
/* ============================================= */
@media (max-width: 767px){
  html, body{
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  section, .sec, .hero{
    max-width: 100vw;
    overflow-x: hidden !important;
    width: 100%;
  }
  /* Contain hero gradients that overflow */
  .hg, .hg2, .hg3{
    max-width: 100vw !important;
  }
  /* Contain mosaic rows (they scroll via CSS animation) */
  
  /* Ensure main containers don't exceed viewport */
  .mw{
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* Bento grid full-width on mobile */
  .bento-grid, .bento{
    width: 100%;
    max-width: 100vw;
  }
  /* Any absolutely positioned decorative element that overflows */
  [class*="glow"], [class*="blur"], .ab{
    max-width: 100vw;
  }
  /* Fix very wide SVG backgrounds */
  svg[width], img{
    max-width: 100%;
    height: auto;
  }
  /* Avoid any element exceeding 100vw */
  *{
    max-width: 100vw;
  }
  /* Exceptions: marquees must stay wide to animate */
  [class*="marquee"], [class*="marquee"] *{
    max-width: none !important;
  }
  /* But their parent MUST hide overflow */
  [class*="marquee-wrap"]{
    overflow: hidden !important;
    max-width: 100vw !important;
  }
}
/* ===== PIXADO — Fullwide sections + Mobile nav ===== */
/* .sl white sections: full-wide edge-to-edge on ALL sizes (keeps 32px rounded corners at top/bottom) */
/* Mobile: remove border-radius for truly flat full-wide */
@media (max-width:768px){
  .sl{
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:0 !important;
  }
}
/* Logo image */
.logo{display:inline-flex;align-items:center;gap:0}
.logo img{display:block;height:26px;width:auto}
.footer .logo img{height:22px}
/* Hamburger toggle */
.nav-toggle{
  display:none;
  width:40px;height:40px;padding:0;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
  font-family:inherit;
}
.nav-toggle:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.nav-toggle svg{display:block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav.is-open .nav-toggle svg{transform:rotate(90deg)}
/* Mobile menu panel */
.nav-mobile{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  background:rgba(9,9,11,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:14px 16px 20px;
  flex-direction:column;gap:2px;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.6);
  animation:navSlide .28s cubic-bezier(.16,1,.3,1);
}
@keyframes navSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.nav.is-open .nav-mobile{display:flex}
.nav-mobile a{
  padding:14px 18px;
  color:rgba(255,255,255,.75);
  font-size:15px;font-weight:500;
  border-radius:12px;
  transition:background .2s,color .2s;
}
.nav-mobile a:hover, .nav-mobile a:active{background:rgba(255,255,255,.05);color:#fff}
.nav-mobile-actions{
  display:flex;gap:10px;margin-top:10px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.nav-mobile-actions a{flex:1;text-align:center;padding:12px 18px !important;font-weight:700;font-size:14px}
.nav-mobile-login{border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85) !important}
.nav-mobile-login:hover{background:rgba(255,255,255,.05) !important}
.nav-mobile-cta{background:#2563EB;color:#fff !important;box-shadow:0 4px 14px -4px rgba(37,99,235,.5)}
.nav-mobile-cta:hover{background:#3b82f6 !important}
/* Mobile breakpoint: show hamburger,
  hide desktop nav + CTA */
@media (max-width:768px){
  .nav .nl{display:none !important}
  .nav .nr-desktop{display:none !important}
  .nav-toggle{display:inline-flex !important}
  .nav .nr{gap:8px}
  .nav .logo img{height:24px}
}
body.nav-open{overflow:hidden}

/* ===== Pricing page styles ===== */
/*! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com*/*,
  :after,
  :before{box-sizing:border-box;border:0 solid #e5e7eb}:after, :before{--tw-content:""}:host, html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1, h2, h3, h4, h5, h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b, strong{font-weight:bolder}code, kbd, pre, samp{font-family:JetBrains Mono,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button, input, optgroup, select, textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button, select{text-transform:none}[type=button], [type=reset], [type=submit], button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button, ::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre{margin:0}fieldset{margin:0}fieldset, legend{padding:0}menu, ol, ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder, textarea::placeholder{opacity:1;color:#9ca3af}[role=button], button{cursor:pointer}:disabled{cursor:default}audio, canvas, embed, iframe, img, object, svg, video{display:block;vertical-align:middle}img, video{max-width:100%;height:auto}[hidden]{display:none}*, ::backdrop, :after, :before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-x-0{left:0;right:0}.bottom-0{bottom:0}.left-1\/2{left:50%}.top-0{top:0}.top-20{top:5rem}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-\[300px\]{height:300px}.h-\[400px\]{height:400px}.h-\[500px\]{height:500px}.w-\[500px\]{width:500px}.w-\[800px\]{width:800px}.w-\[900px\]{width:900px}.w-full{width:100%}.max-w-\[1100px\]{max-width:1100px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[240px\]{max-width:240px}.max-w-\[520px\]{max-width:520px}.max-w-\[580px\]{max-width:580px}.max-w-\[820px\]{max-width:820px}.max-w-\[920px\]{max-width:920px}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2, .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-7{gap:1.75rem}.gap-8{gap:2rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-3{row-gap:.75rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.scroll-smooth{scroll-behavior:smooth}.rounded-\[14px\]{border-radius:14px}.rounded-\[15px\]{border-radius:15px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-white\/10{border-color:#ffffff1a}.border-white\/\[\.04\]{border-color:#ffffff0a}.border-white\/\[\.07\]{border-color:#ffffff12}.border-white\/\[\.08\]{border-color:#ffffff14}.bg-brand{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-brand\/\[\.04\]{background-color:#2563eb0a}.bg-brand\/\[\.05\]{background-color:#2563eb0d}.bg-dark{--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity))}.bg-dark\/60{background-color:#09090b99}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/\[\.05\]{background-color:#ffffff0d}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-20{padding-bottom:5rem}.pb-4{padding-bottom:1rem}.pr-16{padding-right:4rem}.pt-28{padding-top:7rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.font-mono{font-family:JetBrains Mono,monospace}.font-sans{font-family:Inter,system-ui,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[1\.05\]{line-height:1.05}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-\[\.15em\]{letter-spacing:.15em}.tracking-\[\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-brand-light{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-white\/20{color:#fff3}.text-white\/30{color:#ffffff4d}.text-white\/40{color:#fff6}.text-white\/45{color:#ffffff73}.text-white\/50{color:#ffffff80}.text-white\/55{color:#ffffff8c}.text-white\/60{color:#fff9}.text-white\/70{color:#ffffffb3}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur-3xl{--tw-blur:blur(64px)}.blur-3xl, .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-white\/20:hover{border-color:#fff3}.hover\:bg-brand-hover:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-white\/5:hover{background-color:#ffffff0d}.hover\:bg-white\/\[\.08\]:hover{background-color:#ffffff14}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:text-white\/60:hover{color:#fff9}.hover\:underline:hover{text-decoration-line:underline}@media (min-width:640px){.sm\:block{display:block}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:768px){.md\:col-span-1{grid-column:span 1/span 1}.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ===== Custom CSS ===== */
/* ===== CTA GLOW (spinning border + pulse) — Pixado blue ===== */
@keyframes cta-spin-border{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cta-outer-pulse{
  0%, 100%{box-shadow:0 0 24px 2px rgba(37,99,235,.2),0 0 60px 4px rgba(37,99,235,.08)}
  50%{box-shadow:0 0 32px 4px rgba(37,99,235,.35),0 0 80px 8px rgba(37,99,235,.12)}
}
.cta-glow{
  position:relative;
  display:inline-flex;
  padding:3px;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  animation:cta-outer-pulse 3s ease-in-out infinite;
  transition:box-shadow .3s;
}
.cta-glow::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:400%;
  padding-bottom:400%;
  background:conic-gradient(from 0deg,#2563EB 0%,#fff 8%,#2563EB 16%,transparent 30%,transparent 50%,#2563EB 60%,rgba(37,99,235,.5) 68%,transparent 80%);
  animation:cta-spin-border 2.2s linear infinite;
  z-index:0;
}
.cta-glow:hover::before{animation-duration:1.2s}
.cta-glow:hover{
  animation:none;
  box-shadow:0 0 48px 6px rgba(37,99,235,.35),0 0 100px 10px rgba(37,99,235,.12);
}
.cta-glow a, .cta-glow button{position:relative;z-index:2}

/* Mobile CTA with glow — wrap mp-cta with glow effect inline */
@media (max-width:767px){
  .mp-cta-wrap{
    position:relative;
    display:block;
    padding:3px;
    border-radius:19px;
    overflow:hidden;
    isolation:isolate;
    margin-top:16px;
    cursor:pointer;
    animation:cta-outer-pulse 3s ease-in-out infinite;
    transition:box-shadow .3s;
  }
  .mp-cta-wrap::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:400%;
    padding-bottom:400%;
    background:conic-gradient(from 0deg,#2563EB 0%,#fff 8%,#2563EB 16%,transparent 30%,transparent 50%,#2563EB 60%,rgba(37,99,235,.5) 68%,transparent 80%);
    animation:cta-spin-border 2.2s linear infinite;
    z-index:0;
  }
  .mp-cta-wrap:hover::before{animation-duration:1.2s}
  .mp-cta-wrap:hover{
    animation:none;
    box-shadow:0 0 48px 6px rgba(37,99,235,.35),0 0 100px 10px rgba(37,99,235,.12);
  }
  .mp-cta-wrap .mp-cta{
    position:relative;
    z-index:2;
    margin-top:0 !important;
    width:100%;
    border-radius:16px;
  }
}

/* ===== FAQ SECTION (pure white) ===== */
.section-light{background:#ffffff;color:#111827;position:relative;z-index:1}
.section-light h2, .section-light h3, .section-light h4, .section-light strong{color:#111827}
.section-light p{color:#4B5563}
.section-light .faq-item{background:#ffffff;border:1px solid #e5e7eb;transition:all .3s}
.section-light .faq-item:hover{border-color:#d1d5db}
.section-light .faq-item.open{border-color:rgba(37,99,235,.4);box-shadow:0 4px 20px rgba(37,99,235,.08)}
.section-light .faq-q{cursor:pointer}
.section-light .faq-q:hover{background:#f9fafb}
.section-light .faq-q span{color:#111827}
.section-light .faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
.section-light .faq-a p{color:#4B5563}
.section-light .faq-plus{transition:transform .3s,color .3s}
.section-light .faq-item.open .faq-plus{transform:rotate(45deg);color:#2563EB}

/* Smooth white → dark transition for the bottom CTA */
.trans-light-dark{position:relative}
.trans-light-dark::before{content:'';position:absolute;top:-40px;left:0;right:0;height:40px;background:linear-gradient(to bottom,#ffffff,#09090b);pointer-events:none;z-index:1}

/* ===== PILLS MARQUEE — 3 SCROLLING ROWS ===== */
.pills-rows{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.pill-row{overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%)}
.pill-track{display:inline-flex;will-change:transform;padding:0}
.pill-row--right .pill-track{animation:pills-right 42s linear infinite}
.pill-row--left .pill-track{animation:pills-left 38s linear infinite}
.pills-rows:hover .pill-track{animation-play-state:paused}
@keyframes pills-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes pills-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.pill-ft{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;margin-right:10px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap;flex-shrink:0;letter-spacing:-.005em;transition:all .3s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill-ft:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
.pill-ft svg{flex-shrink:0;color:rgba(255,255,255,.55)}

/* Colored dots per pill for visual rhythm (like reference image) */
.pill-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px currentColor}
.pill-dot--blue{background:#3B82F6;color:rgba(59,130,246,.6)}
.pill-dot--green{background:#22C55E;color:rgba(34,197,94,.6)}
.pill-dot--red{background:#EF4444;color:rgba(239,68,68,.6)}
.pill-dot--pink{background:#EC4899;color:rgba(236,72,153,.6)}
.pill-dot--orange{background:#F97316;color:rgba(249,115,22,.6)}
.pill-dot--yellow{background:#EAB308;color:rgba(234,179,8,.6)}
.pill-dot--purple{background:#A855F7;color:rgba(168,85,247,.6)}
.pill-dot--cyan{background:#06B6D4;color:rgba(6,182,212,.6)}

/* Mobile: slightly smaller pills */
@media (max-width:768px){
  .pills-rows{gap:10px}
  .pill-ft{padding:8px 14px;font-size:12.5px;gap:7px;margin-right:8px}
  .pill-ft svg{width:12px;height:12px}
  .pill-dot{width:7px;height:7px}
  .pill-row--right .pill-track{animation-duration:32s}
  .pill-row--left .pill-track{animation-duration:28s}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .pill-row--right .pill-track, .pill-row--left .pill-track{animation:none}
}

/* ===== PRICING STYLES ===== */

  /* Bracket pill badges */
  .pill-bracket{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;border:1px solid rgba(37,99,235,.3);background:rgba(37,99,235,.08);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#60A5FA}
  .pill-bracket-light{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;border:1px solid rgba(37,99,235,.2);background:rgba(37,99,235,.08);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#1D4ED8}

  /* Trial pill */
  .trial-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#4ade80;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .trial-pill .dot{width:5px;height:5px;border-radius:50%;background:#4ade80;animation:pulse-dot 2s ease infinite;box-shadow:0 0 8px rgba(74,222,128,.8)}
  @keyframes pulse-dot{0%, 100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}

  /* Feature card (top grid,
  light inside dark — inverted for variety) */
  .feat-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
  .feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(96,165,250,.35),transparent);opacity:0;transition:opacity .35s}
  .feat-card:hover{border-color:rgba(96,165,250,.3);background:rgba(37,99,235,.04);transform:translateY(-2px);box-shadow:0 16px 36px -16px rgba(37,99,235,.35)}
  .feat-card:hover::before{opacity:1}
  .feat-ico{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.22);display:flex;align-items:center;justify-content:center;color:#60A5FA;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .feat-label{font-size:14px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:-.01em;line-height:1.3}

  /* Billing toggle */
  .toggle-wrap{display:inline-flex;align-items:center;gap:14px;padding:6px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
  .toggle-opt{padding:8px 18px;border-radius:999px;font-size:13px;font-weight:700;color:rgba(255,255,255,.6);cursor:pointer;transition:all .25s;font-family:'Inter',sans-serif;border:none;background:transparent;letter-spacing:.01em}
  .toggle-opt.active{background:linear-gradient(135deg,#2563EB,#3B82F6);color:#fff;box-shadow:0 4px 16px -4px rgba(37,99,235,.55)}
  .toggle-opt:hover:not(.active){color:#fff}
  .save-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.28);color:#86efac;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.04em;margin-left:2px}

  /* Pricing cards */
  .price-card{position:relative;padding:28px 26px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));transition:border-color .35s,transform .35s,box-shadow .35s;display:flex;flex-direction:column;backdrop-filter:blur(10px)}
  .price-card:hover{border-color:rgba(255,255,255,.14);transform:translateY(-4px);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
  .price-card.featured{border:1px solid rgba(37,99,235,.5);background:linear-gradient(180deg,rgba(37,99,235,.1),rgba(37,99,235,.02) 40%,rgba(255,255,255,.008));box-shadow:0 0 0 1px rgba(37,99,235,.15),0 28px 80px -30px rgba(37,99,235,.4)}
  .price-card.featured:hover{box-shadow:0 0 0 1px rgba(37,99,235,.25),0 36px 100px -30px rgba(37,99,235,.55);transform:translateY(-6px)}

  /* Best Value badge */
  .best-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:999px;background:linear-gradient(135deg,#2563EB,#3B82F6);color:#fff;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 22px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.25);white-space:nowrap;z-index:2}

  /* Discount chip top-right of featured card */
  .disc-chip{position:absolute;top:16px;right:16px;padding:4px 9px;border-radius:7px;background:#2563EB;color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;letter-spacing:.02em;box-shadow:0 6px 16px -4px rgba(37,99,235,.6);z-index:2}

  /* Old price strikethrough */
  .old-price{text-decoration:line-through;color:rgba(255,255,255,.3);font-size:14px;font-weight:500;margin-right:8px}

  /* Save chip */
  .save-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);color:#86efac;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700}

  /* Feature row inside cards */
  .feat-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:13px;color:rgba(255,255,255,.82);line-height:1.45}
  .feat-row .ck{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.28);display:flex;align-items:center;justify-content:center;color:#4ade80;margin-top:1px}
  .feat-row strong{color:#fff;font-weight:600}
  .feat-row.disabled{opacity:.35}
  .feat-row.disabled .ck{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06);color:rgba(255,255,255,.25)}

  /* Hide inactive price */
  .price-yearly{display:none}
  body.billing-yearly .price-monthly{display:none}
  body.billing-yearly .price-yearly{display:block}

  /* FAQ */
  .faq-item{transition:all .3s}
  .faq-item.open{border-color:rgba(37,99,235,.4);box-shadow:0 4px 20px rgba(37,99,235,.08)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
  .faq-q .faq-plus{transition:transform .3s}
  .faq-item.open .faq-q .faq-plus{transform:rotate(45deg);color:#2563EB}

  /* Logo */
  .logo-mark{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:16px;letter-spacing:-.02em}

  /* Mobile */
  @media (max-width:768px){
    .price-card.featured{transform:none!important}
    .feat-card{padding:14px}
    .feat-ico{width:34px;height:34px}
    .feat-label{font-size:13px}
  }

/* ================================================== */
/* ===== MOBILE PRICING — FEATURES + PICKER (< 768px) */
/* ================================================== */
.mobile-pricing{display:none}

@media (max-width:767px){
  /* Hide the desktop billing toggle + desktop price cards on mobile (the mobile widget has its own toggle) */
  .billing-toggle-wrap{display:none!important}
  .price-card{display:none!important}

  /* Show the unified mobile pricing widget */
  .mobile-pricing{
    display:block;
    max-width:440px;
    margin:0 auto;
    padding:24px 20px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 24px 60px -24px rgba(0,0,0,.6);
  }

  /* ----- Features grid ----- */
  .mp-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 16px;
    margin-bottom:22px;
  }
  .mp-feat{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
  }
  .mp-feat-ic{
    flex-shrink:0;
    width:34px;
    height:34px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(37,99,235,.06));
    border:1px solid rgba(37,99,235,.25);
    color:#60A5FA;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .mp-feat-txt{
    font-size:12.5px;
    line-height:1.35;
    color:rgba(255,255,255,.85);
    padding-top:3px;
    font-weight:500;
  }
  /* Plan-aware feature variants: show Creator version by default,
     swap to Agency version when Studio Agency is selected */
  .mp-feat-agency{display:none}
  .mobile-pricing.is-agency .mp-feat-creator{display:none}
  .mobile-pricing.is-agency .mp-feat-agency{display:block}
  .mp-feat-badge{
    display:inline-block;
    font-size:9.5px;
    font-weight:800;
    font-family:'JetBrains Mono', monospace;
    letter-spacing:.08em;
    color:#60A5FA;
    background:rgba(37,99,235,.18);
    border:1px solid rgba(37,99,235,.35);
    padding:1px 5px;
    border-radius:4px;
    margin-left:6px;
    vertical-align:1px;
    line-height:1.1;
  }

  /* ----- Divider ----- */
  .mp-divider{
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    margin:6px 0 18px;
  }

  /* ----- Toggle row ----- */
  .mp-toggle-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:18px;
    flex-wrap:wrap;
  }
  .mp-toggle-opt{
    background:transparent;
    border:none;
    padding:4px 0;
    font-size:15px;
    font-weight:700;
    color:rgba(255,255,255,.45);
    cursor:pointer;
    transition:color .25s ease;
  }
  .mp-toggle-opt.active{color:#fff}
  .mp-toggle-switch{
    position:relative;
    width:44px;
    height:24px;
    background:rgba(255,255,255,.1);
    border-radius:999px;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.08);
    transition:background .3s ease;
    /* Prevent the page from scrolling when the user drags horizontally on the switch.
       'pan-y' still allows vertical scroll to bubble to the page. */
    touch-action:pan-y;
    /* Prevent text selection when dragging */
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  /* Invisible larger tap target around the switch for easier finger interaction
     (Apple's 44x44pt minimum). The visual size stays unchanged. */
  .mp-toggle-switch::before{
    content:'';
    position:absolute;
    inset:-12px -10px;
    border-radius:inherit;
  }
  .mobile-pricing.is-yearly .mp-toggle-switch{
    background:#2563EB;
    border-color:rgba(96,165,250,.5);
  }
  .mp-toggle-dot{
    position:absolute;
    top:2px;
    left:2px;
    width:18px;
    height:18px;
    background:#fff;
    border-radius:50%;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 2px 6px rgba(0,0,0,.4);
  }
  .mobile-pricing.is-yearly .mp-toggle-dot{transform:translateX(20px)}
  .mp-save-badge{
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(34,197,94,.14);
    color:#4ade80;
    border:1px solid rgba(34,197,94,.3);
    letter-spacing:.01em;
    transition:opacity .25s ease;
  }
  .mobile-pricing.is-yearly .mp-save-badge{
    background:rgba(34,197,94,.22);
    border-color:rgba(34,197,94,.45);
  }

  /* ----- Plan cards ----- */
  .mp-plan{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    margin-bottom:12px;
    border-radius:16px;
    background:rgba(255,255,255,.025);
    border:1.5px solid rgba(255,255,255,.08);
    cursor:pointer;
    transition:border-color .25s ease,background .25s ease,transform .15s ease;
    position:relative;
  }
  .mp-plan:hover{border-color:rgba(255,255,255,.16)}
  .mp-plan:active{transform:scale(.99)}
  .mp-plan--active{
    border-color:#2563EB;
    background:linear-gradient(180deg,rgba(37,99,235,.08),rgba(37,99,235,.02));
    box-shadow:0 0 0 3px rgba(37,99,235,.12),0 8px 24px -10px rgba(37,99,235,.4);
  }
  .mp-plan-body{flex:1;min-width:0}
  .mp-plan-name{
    font-size:15.5px;
    font-weight:700;
    color:#fff;
    margin-bottom:4px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .mp-disc{
    display:none;
    font-size:10.5px;
    font-weight:700;
    padding:2px 7px;
    border-radius:6px;
    background:rgba(37,99,235,.18);
    color:#60A5FA;
    border:1px solid rgba(37,99,235,.35);
    letter-spacing:.02em;
  }
  .mobile-pricing.is-yearly .mp-disc{display:inline-flex}
  .mp-plan-price{
    display:flex;
    align-items:baseline;
    gap:2px;
    margin-bottom:4px;
  }
  .mp-price{display:none;align-items:baseline;gap:2px}
  .mp-price-monthly{display:flex}
  .mobile-pricing.is-yearly .mp-price-monthly{display:none}
  .mobile-pricing.is-yearly .mp-price-yearly{display:flex}
  .mp-num{
    font-size:22px;
    font-weight:800;
    color:#60A5FA;
    letter-spacing:-.02em;
    line-height:1;
  }
  .mp-unit{
    font-size:12px;
    color:rgba(255,255,255,.45);
    font-weight:500;
    margin-left:4px;
  }
  .mp-plan-tag{
    display:block;
    font-size:11.5px;
    color:rgba(255,255,255,.5);
    font-weight:500;
  }
  .mp-radio{
    flex-shrink:0;
    width:24px;
    height:24px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.03);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .25s ease;
  }
  .mp-check{opacity:0;color:#fff;transform:scale(.5);transition:opacity .25s ease,transform .25s ease}
  .mp-plan--active .mp-radio{
    background:#2563EB;
    border-color:#2563EB;
    box-shadow:0 0 0 4px rgba(37,99,235,.15);
  }
  .mp-plan--active .mp-check{opacity:1;transform:scale(1)}

  /* ----- Big CTA ----- */
  .mp-cta-wrap{
    margin-top:18px;
  }
  .mp-cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:100%;
    padding:16px 18px;
    border-radius:14px;
    background:linear-gradient(180deg,#3b82f6,#2563EB);
    color:#fff;
    text-decoration:none;
    font-weight:800;
    box-shadow:0 10px 28px -8px rgba(37,99,235,.65),inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .15s ease,box-shadow .25s ease;
  }
  .mp-cta:hover{box-shadow:0 14px 36px -8px rgba(37,99,235,.75),inset 0 1px 0 rgba(255,255,255,.28)}
  .mp-cta:active{transform:scale(.98)}
  .mp-cta-main{
    font-size:16px;
    line-height:1.2;
  }
  .mp-cta-sub{
    font-size:11.5px;
    color:rgba(255,255,255,.78);
    font-weight:500;
    letter-spacing:.01em;
  }

  /* Tiny screens */
  @media (max-width:380px){
    .mobile-pricing{padding:18px 16px;max-width:100%}
    .mp-features{gap:12px 12px}
    .mp-feat-ic{width:30px;height:30px}
    .mp-feat-txt{font-size:12px}
    .mp-plan{padding:14px}
    .mp-num{font-size:20px}
    .mp-cta-main{font-size:15px}
  }
}

/* ============================================= */
/* MOBILE FULL-WIDE + NO HORIZONTAL SCROLL FIX   */
/* ============================================= */
@media (max-width: 767px){
  html, body{
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  section{
    max-width: 100vw;
    overflow-x: hidden !important;
    width: 100%;
  }
  /* Main containers */
  [class*="max-w-"]{
    max-width: 100vw;
  }
  *{
    max-width: 100vw;
  }
  /* Exceptions: marquee tracks must stay wide to animate */
  .pill-track, .pill-track *, [class*="marquee"], [class*="marquee"] *{
    max-width: none !important;
  }
  /* But their parent MUST hide overflow */
  .pill-row, [class*="marquee-wrap"]{
    overflow: hidden !important;
    max-width: 100vw !important;
  }
}
/* ===== PIXADO — Mobile nav ===== */
.logo-mark img{display:block;height:26px;width:auto}
.nav-toggle{
  display:none;
  width:40px;height:40px;padding:0;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
  font-family:inherit;
}
.nav-toggle:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.nav-toggle svg{display:block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.site-nav.is-open .nav-toggle svg{transform:rotate(90deg)}
.nav-mobile{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  background:rgba(9,9,11,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:14px 16px 20px;
  flex-direction:column;gap:2px;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.6);
  animation:navSlide .28s cubic-bezier(.16,1,.3,1);
}
@keyframes navSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.site-nav.is-open .nav-mobile{display:flex}
.nav-mobile a{
  padding:14px 18px;
  color:rgba(255,255,255,.75);
  font-size:15px;font-weight:500;
  border-radius:12px;
  transition:background .2s,color .2s;
  text-decoration:none;
}
.nav-mobile a:hover, .nav-mobile a:active{background:rgba(255,255,255,.05);color:#fff}
.nav-mobile a.active{color:#fff;background:rgba(255,255,255,.04)}
.nav-mobile-actions{
  display:flex;gap:10px;margin-top:10px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.nav-mobile-actions a{flex:1;text-align:center;padding:12px 18px !important;font-weight:700;font-size:14px}
.nav-mobile-login{border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85) !important}
.nav-mobile-login:hover{background:rgba(255,255,255,.05) !important}
.nav-mobile-cta{background:#2563EB;color:#fff !important;box-shadow:0 4px 14px -4px rgba(37,99,235,.5)}
.nav-mobile-cta:hover{background:#3b82f6 !important}
@media (max-width:768px){
  .site-nav .desktop-only{display:none !important}
  .nav-toggle{display:inline-flex !important}
  .site-nav .nr-row{gap:8px}
  .logo-mark img{height:24px}
}
body.nav-open{overflow:hidden}

/* ============================================= */
/*    USER-REQUESTED MODIFICATIONS               */
/* ============================================= */

/* 1. Force Inter font on the hero title (already global,
  but explicit) */
.hero h1,
  .hero h1 .ac{ font-family: 'Inter', system-ui, -apple-system, sans-serif !important; }

/* 2. White text for hero stat labels: "Creators going viral",
  "Thumbnails engineered",
  "Extra views per video" */
#hero-stats .hl{ color: #ffffff !important; }

/* 3. White text for hero pills: "3× more clicks",
  "Ship in 60 seconds",
  "Engineered to hit" */
.hero .pills .pill span{ color: #ffffff !important; }

/* 4. Hide the mobile horizontal mini-scrollbar inside marquee/sliding sections */
@media (max-width: 768px){
  .ni-marquee,
  .ni-row,
  .tw-marquee,
  .tw-row{
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .ni-marquee::-webkit-scrollbar,
  .ni-row::-webkit-scrollbar,
  .tw-marquee::-webkit-scrollbar,
  .tw-row::-webkit-scrollbar{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* 5. Black bar that grows upward and touches the review card on hover */
.tw-card{ position: relative; overflow: visible; }
.tw-card::before{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 4px;
  height: 0;
  background: #000;
  border-radius: 2px 2px 0 0;
  transition: height .28s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  z-index: 4;
}
.tw-card:hover::before{ height: 28px; }

/* End of user-requested modifications */

/* --- Brighter gray-on-dark text per user request (round 2) --- */
.hero .hs{ color: rgba(255,255,255,.78) !important; }
.sec:not(.sl) .sub,
  .tld .sub,
  .tdl .sub{ color: rgba(255,255,255,.75) !important; }
.sec:not(.sl) .cp,
  .tld .cp{ color: rgba(255,255,255,.72) !important; }
.sec:not(.sl) .cr,
  .tld .cr{ color: rgba(255,255,255,.82) !important; }
.sec:not(.sl) .cwt,
  .tld .cwt{ color: rgba(255,255,255,.82) !important; }
.sec:not(.sl) .plp,
  .tld .plp{ color: rgba(255,255,255,.68) !important; }

/* --- Review-card hover fix (round 2): no jump,
  bar attached cleanly --- */
.tw-card:hover,
  .sec:has(.tw-head) .tw-card:hover{ transform: none !important; }
/* Make the black bar slightly wider and a touch taller for stronger presence */
.tw-card::before{
  width: 6px !important;
  border-radius: 3px 3px 0 0 !important;
}
.tw-card:hover::before{ height: 32px !important; }

/* --- Social-proof badge redesign per user request --- */
.hero .badge{
  background: linear-gradient(135deg, rgba(37,99,235,.18) 0%, rgba(96,165,250,.07) 100%) !important;
  border: 1px solid rgba(96,165,250,.35) !important;
  box-shadow:
    0 0 28px -6px rgba(37,99,235,.40),
    0 4px 14px -4px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 7px 22px 7px 7px !important;
}
.hero .badge span{
  font-size: 14.5px !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
}
.hero .badge strong{
  color: #BFDBFE !important;          /* pale-blue accent for the numbers */
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(96,165,250,.55);
  letter-spacing: 0;
}
/* Slightly stronger avatar-stack outline so it stands out on the new bg */
.hero .badge .bav > div{
  border-color: rgba(9,9,11,.85) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* --- Hide hero kicker visually but keep it in DOM for SEO / a11y --- */
.hero p.la{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  /* Reset any inherited styles that might leak */
  color: transparent !important;
  animation: none !important;
}

/* --- Neo-Glass FAQ section override (dark glassmorphism with neon gradient border) --- */
#faq.sl{
  background: linear-gradient(180deg, #0a0a0f 0%, #0f0f17 100%) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}
#faq.sl::before{
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 60%);
  pointer-events: none;
}
#faq.sl h2.shl,
  #faq.sl .subl,
  #faq.sl strong{ color: #fff !important; }
#faq.sl .subl{ color: rgba(255,255,255,.65) !important; }
#faq.sl p:not(.kd){ color: rgba(255,255,255,.72) !important; }
#faq.sl .ba{
  background: linear-gradient(135deg, #2563EB, #3b82f6) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -8px rgba(37,99,235,.5);
}
#faq.sl .fi{
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
/* Neon gradient border on hover/open */
#faq.sl .fi::after{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(96,165,250,.55), rgba(139,92,246,.45) 50%, rgba(34,197,94,.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
#faq.sl .fi:hover::after,
  #faq.sl .fi.open::after{ opacity: 1; }
#faq.sl .fi:hover{ background: rgba(255,255,255,.04) !important; }
#faq.sl .fq{ padding: 18px 24px !important; }
#faq.sl .fq:hover{ background: transparent !important; }
#faq.sl .fq span{ color: #fff !important; font-weight: 600 !important; letter-spacing: -.005em; }
#faq.sl .fa p{
  color: rgba(255,255,255,.72) !important;
  padding: 0 24px 20px !important;
  line-height: 1.65 !important;
}
#faq.sl .fa em{ color: rgba(255,255,255,.85) !important; font-style: italic; }
#faq.sl .fp{ color: rgba(96,165,250,.7) !important; font-size: 22px !important; font-weight: 300 !important; }
#faq.sl .fi.open .fp{ color: #60A5FA !important; }

/* --- Hide page scrollbar on mobile per user request --- */
@media (max-width: 768px){
  html, body{
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  ::-webkit-scrollbar{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
}

/* --- Mobile: kill nested scroll bug (CORRECTED — don't touch overflow) --- */
@media (max-width: 768px){
  /* CSS quirk: setting overflow-y to a different value than overflow-x makes
     the browser compute it as "auto", which CREATES the scroll we're trying
     to kill. So we ONLY remove max-height — never touch overflow. */
  .tsc,
  .tsf,
  .glass,
  .glass-light,
  .bento,
  .ts-featured,
  .ts-types-bento,
  .ts-type-card,
  .cp-paths,
  .cp-path,
  .cp-grid,
  .cp-variant,
  .cp-path-mock,
  .comp,
  .cs,
  .csb,
  .tw-head,
  .tw-trust,
  .tw-card,
  .pls,
  .pl,
  .g3,
  .fl,
  .fls,
  .fi,
  .sm-mock,
  .sm-grid,
  .sm-pitch,
  .sm-metrics,
  .gauge-wrap,
  .ts-metrics,
  .ts-metric,
  .pricing-grid,
  .prc-grid,
  .prc-card,
  .pricing-card{
    max-height: none !important;
  }
}

}

  50%{ transform: translateX(3px); }
}

@media (max-width: 900px){
  /* Parent already rotates 90° on mobile (set in original CSS) — that's enough.
     The ::after chevron and ::before halo inherit the rotation cleanly. */
  .ts-arrow {
    margin: 12px auto !important;
    width: 56px !important;
    height: 56px !important;
  }
  
}

/* --- iOS Safari fix: disable backdrop-filter on mobile (ALL affected) --- */
@media (max-width: 768px){
  /* Cards with backdrop-filter (creates phantom touch-scroll on iOS Safari) */
  .cp-path,
  .cp-path-mock,
  .cp-input,
  .cp-converge-label,
  .cp-mock-views,
  .cp-win-label,
  .cp-win-views,
  .ts-type-card,
  .glass,
  .glass.bc,
  .glass.bw,
  .glass-light,
  .fi,
  .tw-card,
  .badge,
  .ts-featured,
  .ts-pair,
  .ts-pair-type,
  .sm-mock,
  .nav,
  .gi,
  /* Predictive Thumbnail Analysis section specifically */
  .thumb-slot,
  .ts-ai-badge,
  .ts-label,
  .ts-score,
  .ts-metric,
  /* FAQ */
  #faq.sl .fi{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* --- Reinforce SEO kicker hiding (in case any other rule overrides) --- */
.hero p.la{
  font-size: 0 !important;
  line-height: 0 !important;
  visibility: hidden;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  color: transparent !important;
}
/* On hover-capable devices (desktop),
  keep the scale animation */

/* --- NUCLEAR: kill all backdrop-filter on mobile (iOS Safari scroll-bug source) --- */
@media (max-width: 768px){
  *, *::before, *::after{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* --- FORCE Inter font on hero title (all descendants) --- */
.hero h1,
  .hero h1 *,
  .hero .d1,
  .hero .d1 *,
  .hero h1 .ac,
  .hero h1 span,
  .hero h1 br + span,
  section.hero h1{
  font-family: 'Inter', 'Inter Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  font-feature-settings: "ss01", "cv11";
}

.ts-arrow{
  background: linear-gradient(135deg, rgba(37,99,235,.20) 0%, rgba(96,165,250,.10) 100%) !important;
  border: 1.5px solid rgba(96,165,250,.50) !important;
  color: #93C5FD !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(96,165,250,.7);
  box-shadow:
    0 0 28px -4px rgba(37,99,235,.5),
    0 6px 18px -6px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: box-shadow .3s ease;
}
@media (max-width: 900px) {
  .ts-arrow{ transform: rotate(90deg) !important; margin: 12px auto !important; }
  .ts-arrow:hover, .ts-arrow:active, .ts-arrow:focus{ transform: rotate(90deg) !important; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .ts-arrow:hover{
    box-shadow:
      0 0 42px -2px rgba(37,99,235,.7),
      0 10px 28px -6px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.15) !important;
  }
}

.hero h1 .ac{
  white-space: nowrap;
  display: inline-block;
}
@media (max-width: 768px) {
  .hero h1, .hero .d1{
    font-size: clamp(28px, 7.5vw, 38px) !important;
    line-height: 1.12 !important;
  }
}
@media (max-width: 380px) {
  .hero h1, .hero .d1{
    font-size: 26px !important;
  }
}

/* Arrow: clean text-only design,
  no pseudo-elements,
  no animations */
.ts-arrow{
  background: linear-gradient(135deg, rgba(37,99,235,.22) 0%, rgba(96,165,250,.08) 100%) !important;
  border: 1.5px solid rgba(96,165,250,.55) !important;
  color: #BFDBFE !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  line-height: 1 !important;
  width: 56px !important;
  height: 56px !important;
  box-shadow:
    0 0 32px -6px rgba(37,99,235,.55),
    0 6px 16px -8px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  animation: none !important;
  transition: box-shadow .3s ease;
}
@media (max-width: 900px) {
  .ts-arrow,
  .ts-arrow:hover,
  .ts-arrow:active,
  .ts-arrow:focus,
  .ts-arrow:focus-visible{
    transform: rotate(90deg) !important;
    margin: 14px auto !important;
    width: 52px !important;
    height: 52px !important;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .ts-arrow:hover{
    box-shadow:
      0 0 44px -3px rgba(37,99,235,.75),
      0 10px 24px -8px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }
}

/* --- FINAL: Clean arrow design --- */
.ts-arrow{
  background: linear-gradient(135deg, rgba(37,99,235,.22) 0%, rgba(96,165,250,.08) 100%) !important;
  border: 1.5px solid rgba(96,165,250,.55) !important;
  color: #BFDBFE !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  line-height: 1 !important;
  width: 56px !important;
  height: 56px !important;
  box-shadow:
    0 0 32px -6px rgba(37,99,235,.55),
    0 6px 16px -8px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  animation: none !important;
  transition: box-shadow .3s ease;
}
@media (max-width: 900px) {
  .ts-arrow,
  .ts-arrow:hover,
  .ts-arrow:active,
  .ts-arrow:focus,
  .ts-arrow:focus-visible{
    transform: rotate(90deg) !important;
    margin: 14px auto !important;
    width: 52px !important;
    height: 52px !important;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .ts-arrow:hover{
    box-shadow:
      0 0 44px -3px rgba(37,99,235,.75),
      0 10px 24px -8px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }
}

/* --- FINAL hero title sizing + 3-line mobile layout --- */
.hero h1,
  .hero .d1{
  font-size: clamp(48px, 7vw, 80px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
}
/* The .mbr span is invisible on desktop but becomes a hard line break on mobile */
.hero h1 .mbr{
  display: inline;
}
@media (max-width: 768px) {
  .hero h1, .hero .d1{
    font-size: clamp(36px, 9vw, 48px) !important;
    line-height: 1.1 !important;
  }
  /* Make the .mbr span act as a line break: full-width inline-block of zero height */
  .hero h1 .mbr{
    display: block;
    width: 100%;
    height: 0;
    font-size: 0;
  }
  /* Keep "Explode your views." on a single line if it fits */
  .hero h1 .ac{
    white-space: nowrap;
    display: inline-block;
  }
}
@media (max-width: 380px) {
  .hero h1, .hero .d1{ font-size: 36px !important; }
  /* Allow .ac to wrap on very small screens if needed (rather than overflow) */
  .hero h1 .ac{ white-space: normal; }
}

/* --- Hero badge: stay on a single line on mobile --- */
@media (max-width: 768px){
  .hero .badge{
    padding: 5px 14px 5px 5px !important;
    max-width: calc(100vw - 32px);
    flex-wrap: nowrap !important;
  }
  .hero .badge span{
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero .badge .bav{ flex-shrink: 0; }
  .hero .badge .bav > div{
    width: 20px !important;
    height: 20px !important;
  }
}
@media (max-width: 380px) {
  .hero .badge span{ font-size: 11px !important; }
  .hero .badge .bav > div{ width: 18px !important; height: 18px !important; }
}

/* --- OVERRIDE: title back to 2 lines on mobile (smaller font) --- */
@media (max-width: 768px){
  .hero h1, .hero .d1{
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.12 !important;
  }
  /* .mbr stays inline (just an invisible space) — no forced break */
  .hero h1 .mbr{
    display: inline !important;
    width: auto !important;
    height: auto !important;
    font-size: inherit !important;
  }
  /* .ac: keep on one line if possible */
  .hero h1 .ac{
    white-space: nowrap;
    display: inline-block;
  }
}
@media (max-width: 380px) {
  .hero h1, .hero .d1{
    font-size: 24px !important;
  }
  .hero h1 .ac{ white-space: normal; }
}

/* --- Hero subtitle size on mobile (adjusted) --- */
@media (max-width: 768px){
  .hero .hs{
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
}
@media (max-width: 380px) {
  .hero .hs{
    font-size: 13.5px !important;
  }
}

/* --- Smaller hero title on mobile (still 2 lines) --- */
@media (max-width: 768px){
  .hero h1, .hero .d1{
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.14 !important;
  }
}
@media (max-width: 380px) {
  .hero h1, .hero .d1{
    font-size: 20px !important;
  }
}

/* --- Bump hero title slightly on mobile (round 2) — still 2 lines --- */
@media (max-width: 768px){
  .hero h1, .hero .d1{
    font-size: clamp(26px, 7.2vw, 34px) !important;
    line-height: 1.12 !important;
  }
}
@media (max-width: 380px) {
  .hero h1, .hero .d1{
    font-size: 22px !important;
  }
}

/* ============================================= */
/*  PERFORMANCE + SCROLL-BUG FINAL FIX           */
/* ============================================= */

/* A) Replace overflow:hidden with overflow:clip on all clipping containers
      to eliminate phantom scroll contexts on iOS Safari */
@media (max-width: 768px){
  /* Section-level: clip any horizontal overflow without creating scroll */
  section, .sec, .hero{
    overflow-x: clip !important;
  }
  /* Card-level: visual clipping without scroll context */
  .glass, .glass-light, .glass.bc, .glass.bw,
  .bento, .ts-featured, .ts-types-bento, .ts-type-card,
  .cp-paths, .cp-path, .cp-path-mock, .cp-mock-grid, .cp-grid, .cp-variant,
  .comp, .cs, .csb,
  .tw-head, .tw-trust, .tw-card,
  .pls, .pl, .g3,
  .fl, .fls, .fi, .fa,
  .sm-mock, .sm-grid, .sm-pitch, .sm-metrics, .sm-thumb,
  .gauge-wrap, .ts-metrics, .ts-metric,
  .pricing-grid, .prc-grid, .prc-card, .pricing-card,
  .thumb-slot, .ts-ai-badge, .ts-label, .ts-score,
  .badge, .bav > div,
  
}

/* B) Performance — only render off-screen sections when scrolled into view.
      Massive paint/layout savings on mobile,
  makes hero feel buttery */
@media (max-width: 768px){
  /* All non-hero sections become deferred-render */
  section.sec:not(.hero){
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px; /* placeholder height before render */
  }
  /* Hero stays always-rendered (LCP element) */
  section.hero{
    content-visibility: visible;
  }
}

/* C) Simpler shadows on mobile (box-shadow is expensive) */
@media (max-width: 768px){
  .glass,
  .glass-light,
  .ts-type-card,
  .cp-path,
  .tw-card,
  .fi,
  .ts-metric,
  .badge{
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.3) !important;
  }
}

/* D) GPU compositing hints — promote animated elements to their own layer */

/* E) Image loading: hint to lazy-load anything below 1000px */
@media (max-width: 768px){
  /* Mosaic thumbnails: lower priority */
  
}

/* --- CTA button (.cg) — mobile optimization + scroll-bug prevention --- */
@media (max-width: 768px){
  .cg{
    overflow: clip !important;        /* No scroll context */
    animation: none !important;        /* Stop outerP animation */
  }
  .cg::before{
    animation: spinB 6s linear infinite !important;  /* slower, less GPU */
    opacity: 0.65;                     /* less prominent */
  }
  .cg:hover::before{
    animation-duration: 6s !important;
  }
  /* Better touch target */
  .cg .cb{
    min-height: 50px !important;
    border-radius: 14px !important;
  }
}

/* --- Hero performance round 2: containment + deferred non-critical parts --- */
.hero{
  contain: layout style;  /* Isolate hero layout calculations */
}

@media (max-width: 768px) {
  /* Hero mosaic and video are below-the-fold-ish on mobile — defer their paint */
  
  
  .sg#hero-stats{
    content-visibility: auto;
    contain-intrinsic-size: 100% 200px;
  }
  /* Reduce hg/hg2 background-blob complexity (these are heavy on Mobile GPU) */
  .hero .hg,
  .hero .hg2{
    filter: blur(60px) !important;  /* reduced from 100+px */
    opacity: 0.4 !important;
  }
}

/* --- Mobile nav menu in white mode --- */
.nav-mobile{
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.15) !important;
  /* Keep backdrop-filter only on capable browsers (we already removed it on mobile via nuclear rule) */
}
.nav-mobile a{
  color: #1F2937 !important;          /* gray-800 */
  font-weight: 600 !important;
}
.nav-mobile a:hover,
  .nav-mobile a:active{
  background: rgba(37,99,235,.06) !important;  /* light blue tint on hover */
  color: #2563EB !important;                    /* PIXADO blue */
}
.nav-mobile-actions{
  border-top: 1px solid rgba(0,0,0,.08) !important;
  margin-top: 12px !important;
  padding-top: 14px !important;
}
.nav-mobile-login{
  border: 1.5px solid rgba(0,0,0,.12) !important;
  color: #1F2937 !important;
  background: transparent !important;
}
.nav-mobile-login:hover{
  background: rgba(0,0,0,.04) !important;
  color: #111827 !important;
}
.nav-mobile-cta{
  background: #2563EB !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(37,99,235,.5) !important;
}
.nav-mobile-cta:hover{
  background: #3b82f6 !important;
}
/* Hamburger toggle button — make sure it's visible on the dark nav above */
.nav-toggle{
  color: rgba(255,255,255,.85);
}

/* === HERO MOSAIC + DEMO VIDEO (added) === */
/* ========== HERO MOSAIC + DEMO VIDEO BLOCK ========== */
/* Mosaic rows (background scrolling thumbnails) */
.mosaic-row{display:flex;gap:var(--thumb-gap);flex-shrink:0;will-change:transform}
.mosaic-row.row-a{animation:m-left 90s linear infinite;animation-fill-mode:both}
.mosaic-row.row-b{animation:m-right 120s linear infinite;animation-fill-mode:both}
.mosaic-row img{width:var(--thumb-w);height:calc(var(--thumb-w) * 9 / 16);object-fit:cover;border-radius:10px;flex-shrink:0;background:#18181b;display:block;border:1px solid rgba(96,165,250,.32);box-shadow:0 0 16px -3px rgba(59,130,246,.4),0 0 38px -8px rgba(37,99,235,.26),inset 0 0 0 1px rgba(147,197,253,.16);animation:mosaic-glow-pulse 6s cubic-bezier(.4,0,.2,1) infinite;transition:filter .4s ease,transform .4s ease;will-change:box-shadow,border-color}
.mosaic-row img:nth-child(7n+1){animation-delay:0s}
.mosaic-row img:nth-child(7n+2){animation-delay:-.86s}
.mosaic-row img:nth-child(7n+3){animation-delay:-1.72s}
.mosaic-row img:nth-child(7n+4){animation-delay:-2.58s}
.mosaic-row img:nth-child(7n+5){animation-delay:-3.44s}
.mosaic-row img:nth-child(7n+6){animation-delay:-4.29s}
.mosaic-row img:nth-child(7n+7){animation-delay:-5.15s}
.mosaic-row.row-b img:nth-child(7n+1){animation-delay:-5.15s}
.mosaic-row.row-b img:nth-child(7n+2){animation-delay:-4.29s}
.mosaic-row.row-b img:nth-child(7n+3){animation-delay:-3.44s}
.mosaic-row.row-b img:nth-child(7n+4){animation-delay:-2.58s}
.mosaic-row.row-b img:nth-child(7n+5){animation-delay:-1.72s}
.mosaic-row.row-b img:nth-child(7n+6){animation-delay:-.86s}
.mosaic-row.row-b img:nth-child(7n+7){animation-delay:0s}
@keyframes mosaic-glow-pulse{
  0%{box-shadow:0 0 16px -3px rgba(59,130,246,.4),0 0 38px -8px rgba(37,99,235,.26),inset 0 0 0 1px rgba(147,197,253,.16);border-color:rgba(96,165,250,.32)}
  25%{box-shadow:0 0 22px -2px rgba(96,165,250,.58),0 0 58px -6px rgba(59,130,246,.45),0 0 92px -12px rgba(37,99,235,.24),inset 0 0 0 1px rgba(191,219,254,.28);border-color:rgba(147,197,253,.5)}
  50%{box-shadow:0 0 30px -1px rgba(147,197,253,.75),0 0 78px -4px rgba(59,130,246,.58),0 0 130px -10px rgba(37,99,235,.4),inset 0 0 0 1px rgba(219,234,254,.42);border-color:rgba(191,219,254,.72)}
  75%{box-shadow:0 0 22px -2px rgba(96,165,250,.58),0 0 58px -6px rgba(59,130,246,.45),0 0 92px -12px rgba(37,99,235,.24),inset 0 0 0 1px rgba(191,219,254,.28);border-color:rgba(147,197,253,.5)}
  100%{box-shadow:0 0 16px -3px rgba(59,130,246,.4),0 0 38px -8px rgba(37,99,235,.26),inset 0 0 0 1px rgba(147,197,253,.16);border-color:rgba(96,165,250,.32)}
}
@media(prefers-reduced-motion:reduce){.mosaic-row.row-a,.mosaic-row.row-b,.mosaic-row img{animation:none}}

/* Hero mosaic inline wrapper (full-bleed) */
.hero-mosaic-inline{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-top:-20px;margin-bottom:24px;padding:20px 0}
.mosaic-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:12px 0}
.mosaic-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.mosaic-flat{--thumb-w:240px;--thumb-gap:14px;--copies:7;--shift:calc((var(--thumb-w) + var(--thumb-gap)) * var(--copies));display:flex;flex-direction:column;gap:14px;width:max-content}

/* Demo video wrapper (foreground, blue glow) */
.hero-video-wrap{position:relative;z-index:3;width:min(840px,88vw);pointer-events:auto}
.hero-video{position:relative;aspect-ratio:16/9;border-radius:20px;background:radial-gradient(ellipse at center,#111827 0%,#0b0d14 55%,#050608 100%);border:1.5px solid rgba(96,165,250,.45);box-shadow:0 0 0 1px rgba(147,197,253,.18) inset,0 0 40px -4px rgba(59,130,246,.55),0 0 100px -12px rgba(37,99,235,.5),0 30px 80px -20px rgba(0,0,0,.8);overflow:hidden;cursor:pointer;animation:hv-pulse 4.5s cubic-bezier(.4,0,.2,1) infinite;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hero-video::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(59,130,246,.12) 0%,transparent 45%),radial-gradient(circle at 70% 80%,rgba(37,99,235,.1) 0%,transparent 45%);pointer-events:none;z-index:0}
.hero-video::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(96,165,250,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.045) 1px,transparent 1px);background-size:42px 42px;pointer-events:none;mask-image:radial-gradient(ellipse 80% 60% at center,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at center,#000 0%,transparent 70%);z-index:0}
.hero-video:hover{transform:scale(1.015)}
.hero-video:hover .hv-play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 50px -4px rgba(59,130,246,.95),0 0 120px -10px rgba(37,99,235,.75),0 14px 40px -6px rgba(0,0,0,.7)}
@keyframes hv-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(147,197,253,.18) inset,0 0 40px -4px rgba(59,130,246,.55),0 0 100px -12px rgba(37,99,235,.5),0 30px 80px -20px rgba(0,0,0,.8);border-color:rgba(96,165,250,.45)}
  50%{box-shadow:0 0 0 1px rgba(191,219,254,.32) inset,0 0 60px -2px rgba(96,165,250,.75),0 0 150px -8px rgba(37,99,235,.65),0 30px 80px -20px rgba(0,0,0,.8);border-color:rgba(147,197,253,.7)}
}
.hv-corner{position:absolute;width:8px;height:8px;border-radius:50%;background:#60A5FA;box-shadow:0 0 12px rgba(96,165,250,.95),0 0 24px rgba(59,130,246,.55);z-index:2}
.hv-corner--tl{top:14px;left:14px}
.hv-corner--tr{top:14px;right:14px}
.hv-corner--bl{bottom:14px;left:14px}
.hv-corner--br{bottom:14px;right:14px}
.hv-badge{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(10,12,20,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(96,165,250,.32);font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(147,197,253,.95);z-index:2;font-family:"JetBrains Mono",ui-monospace,monospace;white-space:nowrap}
.hv-badge-dot{width:6px;height:6px;border-radius:50%;background:#60A5FA;box-shadow:0 0 10px rgba(96,165,250,.95);animation:hv-dot-pulse 1.6s ease-in-out infinite}
@keyframes hv-dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 35px -2px rgba(59,130,246,.7),0 0 80px -10px rgba(37,99,235,.6),0 10px 30px -4px rgba(0,0,0,.5);z-index:2;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;font-family:inherit}
.hv-play svg{margin-left:4px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.hv-caption{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:max-content;max-width:88%;text-align:center;font-size:13px;color:rgba(255,255,255,.68);font-weight:500;z-index:2;letter-spacing:.01em;line-height:1.4}
.hv-caption strong{color:#fff;font-weight:700}

/* Tablet adjustments */
@media(max-width:768px){
  .hero-mosaic-inline{margin-bottom:28px;padding:16px 0}
  .mosaic-stage{padding:0}
  .hero-video-wrap{width:min(560px,92vw)}
  .hv-play{width:64px;height:64px}
  .hv-play svg{width:24px;height:24px}
  .hv-caption{font-size:11px;bottom:18px}
  .hv-badge{top:14px;font-size:10px;padding:5px 10px}
  .hv-corner{width:6px;height:6px}
  /* HIDE the mosaic background on mobile — only keep the demo video + blue glow */
  .hero-mosaic-inline .mosaic-mask{display:none!important}
  .hero-mosaic-inline{width:auto;left:auto;right:auto;margin-left:0;margin-right:0}
}
@media(max-width:480px){
  .hv-caption{display:none}
  .hv-corner{display:none}
  .hero-video-wrap{width:100%}
}
@media (hover:none) and (pointer:coarse){
  .mosaic-row img{animation-duration:8s}
}
/* ========== END HERO MOSAIC + DEMO VIDEO BLOCK ========== */

/* === LATE PATCH (logo outline / mobile h1 bigger / demo gap / mobile CTA white) === */
/* 1) Logo: kill any outline/border on the link, the img, and the SVG */
.logo,
.logo:focus,
.logo:focus-visible,
.logo:active,
.logo *,
.logo img,
.logo svg{
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 2) Mobile hero <h1>: bump size, stay on exactly 2 lines via the existing <br> */
@media (max-width: 768px){
  .hero h1,
  .hero h1.fade-up,
  .hero .d1{
    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
  /* keep .mbr as a regular inline space (no forced break) */
  .hero h1 .mbr{
    display: inline !important;
    width: auto !important;
    height: auto !important;
    font-size: inherit !important;
  }
  /* keep "Explode your views." together when there's room */
  .hero h1 .ac{
    white-space: nowrap;
    display: inline-block;
  }
}
@media (max-width: 380px){
  .hero h1,
  .hero h1.fade-up,
  .hero .d1{ font-size: 30px !important; }
  /* allow .ac to wrap on tiny screens to avoid horizontal overflow */
  .hero h1 .ac{ white-space: normal; }
}

/* 3) Demo rectangle: push it a bit further down from the "Try it free" CTA */
.hero-mosaic-inline{
  margin-top: 16px !important;   /* was -20px (pulled UP), now 16px (pushed DOWN) */
}
@media (max-width: 768px){
  .hero-mosaic-inline{
    margin-top: 24px !important;  /* a touch more breathing room on mobile */
    margin-bottom: 28px !important;
  }
}

/* 4) Mobile menu "Start free" button: white text.
   Root cause: `.nav-mobile a` (specificity 0,1,1) was overriding
   `.nav-mobile-cta` (0,1,0) even with !important.
   Fix: bump specificity to (0,2,1). */
.nav-mobile a.nav-mobile-cta,
.nav-mobile a.nav-mobile-cta:hover,
.nav-mobile a.nav-mobile-cta:active,
.nav-mobile a.nav-mobile-cta:focus{
  color: #fff !important;
}

/* === LATE PATCH v2 (icons white / AI section scroll fix / demo breathing room / h1 even bigger) === */

/* 1) Hero stat icons → white. Targets all 3 (chart stroke, star fill, fire fill).
   The third one (Creators going viral / 10,488) had fill="#2563EB" inline. */
#hero-stats .ht .hi svg,
#hero-stats .ht .hi svg path,
#hero-stats .ht .hi svg circle,
#hero-stats .ht .hi svg rect{
  fill: #fff !important;
  stroke: #fff !important;
}
/* keep fill:none paths as outlines (so the chart icon stays as strokes only) */
#hero-stats .ht .hi svg[fill="none"]{
  fill: none !important;  /* don't fill the SVG itself */
}

/* 2) "AI Thumbnail Maker for YouTube" section: prevent iOS Safari from
   treating the section's `overflow:hidden` as a nested scroll container,
   which causes the "double scroll" feeling on mobile.
   Use `overflow:clip` (clips like hidden but DOES NOT create a scroll context)
   on every section that has inline overflow:hidden, plus a global page-flow guard. */
@media (max-width: 768px){
  section[style*="overflow:hidden"],
  section.sec[style*="overflow:hidden"]{
    overflow: clip !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  /* extra safety: prevent any inner element from triggering overscroll/inertia capture */
  .cp-paths,
  .cp-path,
  .cp-path-mock,
  .cp-mock-grid,
  .cp-grid,
  .cp-converge{
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: auto !important;
  }
  /* tame the giant background orb that triggers the wide layout in this section */
  section.sec[style*="overflow:hidden"] > .hg2{
    width: 480px !important;
    height: 480px !important;
    filter: blur(80px) !important;
    opacity: .35 !important;
  }
}

/* 3) Live demo card: more side breathing room on mobile (was touching edges) */
@media (max-width: 768px){
  .hero-mosaic-inline .mosaic-stage{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero-mosaic-inline .hero-video-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 480px){
  .hero-mosaic-inline .mosaic-stage{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 4) Hero h1: even BIGGER on mobile while staying on exactly 2 lines.
   Strategy: tight letter-spacing + viewport-based sizing + nowrap on each line
   (the existing <br> still forces the 2-line break regardless of nowrap). */
@media (max-width: 768px){
  /* trim hero side padding so the title has more breathing room */
  .hero .mw{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .hero h1,
  .hero h1.fade-up,
  .hero .d1{
    font-size: clamp(36px, 10.5vw, 52px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;       /* each line stays one piece */
    margin-bottom: 16px !important;
  }
  .hero h1 .mbr{
    display: inline !important;
    width: auto !important;
    height: auto !important;
    font-size: inherit !important;
  }
  .hero h1 .ac{
    white-space: nowrap;
    display: inline-block;
  }
}
@media (max-width: 380px){
  .hero h1,
  .hero h1.fade-up,
  .hero .d1{
    font-size: 36px !important;
    letter-spacing: -.05em !important;
  }
}

/* === LATE PATCH v3 (mobile nav frosted + no separator / users icon white) === */

/* 1) Mobile top bar — make it visibly frosted (was reading as too transparent),
      and remove the bottom separator that shows under the nav on mobile.       */
@media (max-width: 768px){
  .nav{
    background: rgba(9, 9, 11, 0.92) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  /* For Safari iOS where backdrop-filter is unreliable on fixed elements,
     a near-solid background is the safety net. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav{ background: rgba(9, 9, 11, 0.98) !important; }
  }
  /* Also kill any leftover line on the hero's top edge */
  .hero{ border-top: 0 !important; }
}

/* 2) "Already ship with Pixado" trust card — the users icon was rendering dark
      on dark because the existing override selector
      (svg[fill*="15, 23, 42"] with spaces) doesn't match the actual inline
      attribute fill="rgba(15,23,42,.7)" (no spaces). Force it white. */
.tw-trust-ic--users svg,
.tw-trust-ic--users svg path{
  fill: #ffffff !important;
}
/* Defensive: same fix for any other tw-trust-ic that may carry the dark fill,
   except the gold star which has its own brand color. */
.tw-trust-ic:not(.tw-trust-ic--star) svg[fill*="15,23,42"],
.tw-trust-ic:not(.tw-trust-ic--star) svg[fill*="15,23,42"] path,
.tw-trust-ic:not(.tw-trust-ic--star) svg[fill*="15, 23, 42"],
.tw-trust-ic:not(.tw-trust-ic--star) svg[fill*="15, 23, 42"] path{
  fill: #ffffff !important;
}

/* === LATE PATCH v4 (trust row mobile / AI section scrollbar v2 / users-icon hardening) === */

/* 1) Mobile: keep both trust items on the SAME ROW (was stacking column) */
@media (max-width: 768px){
  .tw-trust{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 22px !important;
    margin-bottom: 26px !important;
  }
  .tw-trust-item{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 9px !important;
    align-items: center !important;
  }
  .tw-trust-ic{
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  .tw-trust-ic svg{ width: 14px !important; height: 14px !important; }
  .tw-trust-val{
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
  .tw-trust-lbl{
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
  }
}
@media (max-width: 380px){
  .tw-trust{ gap: 10px !important; }
  .tw-trust-item{ gap: 7px !important; }
  .tw-trust-ic{ width: 24px !important; height: 24px !important; }
  .tw-trust-ic svg{ width: 12px !important; height: 12px !important; }
  .tw-trust-val{ font-size: 10.5px !important; }
  .tw-trust-lbl{ font-size: 9px !important; }
}

/* 2) AI Thumbnail Maker section — stronger fix for the internal scroll feeling.
      Root cause was the inline `overflow:hidden` combined with a 800×800 absolute
      orb (.hg2). On mobile we just remove the orb and let the section flow normally. */
@media (max-width: 768px){
  /* Remove the giant background orb in any inline-overflow:hidden section */
  section.sec[style*="overflow:hidden"] > .hg2,
  section[style*="overflow:hidden"] > 
  /* Force the section's overflow to NOT create its own scroll context */
  section.sec[style*="overflow:hidden"],
  section[style*="overflow:hidden"]{
    overflow: visible !important;
    overflow-x: hidden !important;
  }
  /* Also defend against any nested element creating scroll capture */
  .cp-paths,
  .cp-path,
  .cp-path-mock,
  .cp-mock-grid{
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: auto !important;
    touch-action: pan-y !important;
  }
}

/* 3) Hardening for the users-icon white override — also catch attribute-quote
      variations (single quote, no spaces, etc.) that inline `fill` may use. */
.tw-trust-ic--users svg *,
.tw-trust-ic--users > svg{ fill: #ffffff !important; }

/* === LATE PATCH v5 (kill the blue halo around the hero "Try it free" CTA) === */
/* The glow was coming from the outerP keyframe pulsing box-shadow on .cg
   (and a similar hover box-shadow). Disable both — keep the spinning
   gradient border inside the wrapper. Targeted at the hero CTA only. */
.hero .cg,
.hero .cg:hover,
section.hero .cg,
section.hero .cg:hover{
  animation: none !important;
  box-shadow: none !important;
}
/* Belt + suspenders: also kill the cg's outline-style glow on focus */
.hero .cg:focus,
.hero .cg:focus-visible,
.hero .cg:active{
  box-shadow: none !important;
}

/* === LATE PATCH v6 (kill stuck-hover transforms on touch — fixes internal scroll on tap) === */
@media (hover: none) and (pointer: coarse){

  /* Any element being hovered (i.e. just tapped) should NOT translate/scale.
     The native :hover on touch devices stays stuck after a tap, so all the
     hover transforms in this site (translateY, scale) cause cards to shift
     past their section bounds — which creates the "internal scroll" feeling. */
  *:hover,
  *:hover::before,
  *:hover::after{
    transform: none !important;
  }

  /* Belt + suspenders: explicitly nail the known offenders so they cannot
     pick up an inherited or animation-driven transform either. */
  .bc:hover,
  .glass:hover,
  .glass-light:hover,
  .thumb-slot:hover,
  .thumb-slot--after:hover,
  .thumb-slot--ai:hover,
  .tw-card:hover,
  .tw-cta:hover,
  .ts-pair:hover,
  .ts-pair-type:hover,
  .ts-type-card:hover,
  .ts-metric:hover,
  .cs:hover,
  .cp-path:hover,
  .ni-tag:hover,
  .cb:hover,
  .ba:hover,
  .bf:hover,
  .bo:hover,
  .ts-type-card:hover .ts-type-icon{
    transform: none !important;
  }

  /* Pseudo-element halos (cards' radial gradients) — keep them in their
     resting state on touch to avoid them sliding outside the section. */
  .ts-pair:hover::before,
  .ts-pair:hover::after,
  .ts-type-card:hover::after,
  .cs:hover::after,
  .cp-path:hover::after,
  .ts-metric:hover::after,
  .ts-metric:hover::before{
    transform: none !important;
  }

  /* Tap highlight — kill the system blue/grey flash that some browsers add */
  *{
    -webkit-tap-highlight-color: transparent;
  }
}

/* ============================================================================
   === LATE PATCH v10 ===========================================================
   Final consolidated cleanup: scroll architecture + performance + neo-glass.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. SCROLL ARCHITECTURE
   -------------------------------------------------------------------------- */

/* Global touch / scroll priorities */
html, body{
  touch-action: pan-y;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: contain;
}

/* Belt-and-suspenders: any future container with overflow:auto/scroll
   should NOT capture page scroll — scroll-chains contained, not none, so
   the user can still scroll within the area but reaching its edge
   continues the page scroll seamlessly. */
[data-scroll-area],
.tw-marquee,
.ni-marquee,
.mosaic-mask,
.mosaic-flat,
.cp-mock-grid,
.tw-row,
.ni-row{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;
}

/* Background mosaic carousel = decorative-only. A swipe on it must scroll
   the page, NOT drag the carousel. Use pointer-events:none on the entire
   background subtree but RESTORE pointer-events on the foreground
   demo-video card that sits above it. */
.hero-mosaic-inline .mosaic-mask,
.hero-mosaic-inline .mosaic-flat,
.hero-mosaic-inline .mosaic-row,
.hero-mosaic-inline .mosaic-row img{
  pointer-events: none !important;
}
.hero-mosaic-inline .hero-video-wrap,
.hero-mosaic-inline .hero-video,
.hero-mosaic-inline .hero-video *{
  pointer-events: auto;
}

/* Testimonial + niche marquees: foreground interactive content stays clickable,
   but the marquee TRACKS themselves don't need to capture vertical scroll.
   touch-action: pan-x lets users still drag the marquee horizontally on touch
   if they want, while vertical pan continues to the page. */
.tw-track,
.ni-track,
.mosaic-row{
  touch-action: pan-x;
  will-change: transform;          /* perf: hint GPU compositing */
  transform: translateZ(0);        /* perf: force its own layer */
  backface-visibility: hidden;
}

/* Hero — natural-height (already true) plus iOS small-viewport safety net */
.hero{
  min-height: auto;       /* keep natural; the content's intrinsic height owns it */
}
@supports (height: 100svh){
  /* On iOS, when the URL bar is visible, vh ≠ svh. svh = small viewport.
     Use it as a SOFT min so the hero never feels cramped, never overflows. */
  .hero{ min-height: clamp(560px, 80svh, 100svh); }
}

/* --------------------------------------------------------------------------
   2. PERFORMANCE — translate3d marquees + GPU layers
   -------------------------------------------------------------------------- */

/* Override the niche-marquee + testimonial-marquee keyframes to use translate3d.
   The earlier 2D translateX definitions are overridden by these (later wins). */
@keyframes ni-right{
  from{ transform: translate3d(-50%, 0, 0); }
  to{   transform: translate3d(0, 0, 0); }
}
@keyframes ni-left{
  from{ transform: translate3d(0, 0, 0); }
  to{   transform: translate3d(-50%, 0, 0); }
}
@keyframes tw-right{
  from{ transform: translate3d(-50%, 0, 0); }
  to{   transform: translate3d(0, 0, 0); }
}
@keyframes tw-left{
  from{ transform: translate3d(0, 0, 0); }
  to{   transform: translate3d(-50%, 0, 0); }
}

/* Hint the compositor on heavy backdrop-filtered surfaces */
.glass,
.glass-light,
.gi,
.nav,
.cs,
.cp-path,
.ts-pair,
.ts-type-card,
.tw-card,
.sm-mock,
.cp-input,
.cp-path-mock{
  will-change: transform;          /* primary hint */
}

/* On very small screens, drop backdrop-filter from the heaviest decorative cards.
   We KEEP it on hero/nav/glass — where the frosted look matters most. */
@media (max-width: 380px){
  .cs, .cp-path, .ts-pair, .ts-type-card, .cp-path-mock,
  .ts-pair *, .cs *, .cp-path *{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Keep them visible by giving a slight opaque-ish background fallback */
  .cs--r{ background: rgba(239,68,68,.045) !important; }
  .cs--g{ background: rgba(34,197,94,.07)  !important; }
  .ts-pair{ background: rgba(255,255,255,.025) !important; }
  .cp-path--a{ background: rgba(251,113,133,.07) !important; }
  .cp-path--b{ background: rgba(96,165,250,.07)  !important; }
  .ts-type-card{ background: rgba(255,255,255,.025) !important; }
}

/* Honour reduced-motion: pause heavy infinite animations */
@media (prefers-reduced-motion: reduce){
  .mosaic-row.row-a, .mosaic-row.row-b,
  .tw-row--right .tw-track, .tw-row--left .tw-track,
  .ni-row--right .ni-track, .ni-row--left .ni-track,
  .mosaic-row img,
  .breathe,
  .thumb-slot--ai,
  .cs--g{
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. CLS / SKELETON STATES on thumbnail wrappers
   -------------------------------------------------------------------------- */

/* aspect-ratio safety net: any thumb-slot or thumb-equivalent that may not
   have already declared 16/9 gets it now. Prevents layout shift while img
   loads (browser reserves the box). */
.thumb-slot,
.cp-mock-thumb,
.cp-variant .thumb-slot,
.sm-thumb,
.tw-ava{
  aspect-ratio: 16 / 9;
}
.tw-ava{
  aspect-ratio: 1 / 1;          /* avatars are square */
}

/* Skeleton — subtle dark gradient under the image. If the image fails or
   is slow, this shows; once img is loaded (z-index:1) it covers fully. */
.thumb-slot:not(.no-skel),
.cp-mock-thumb,
.sm-thumb{
  background-image:
    linear-gradient(110deg,
      rgba(255,255,255,0.02) 0%,
      rgba(255,255,255,0.05) 30%,
      rgba(255,255,255,0.02) 60%);
  background-size: 200% 100%;
  background-position: 0 0;
}
@keyframes skel-shimmer{
  0%{   background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}
/* Only animate skeleton when there's NO loaded img inside */
.thumb-slot:has(> img:not([src])),
.thumb-slot:has(> img[data-broken]),
.cp-mock-thumb:has(> img:not([src])),
.cp-mock-thumb:has(> img[data-broken]){
  animation: skel-shimmer 1.6s linear infinite;
}

/* Broken-image graceful hide: when our JS marks data-broken, fade out */
img[data-broken]{
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   5. CLEANUP — small redundancies / safety
   -------------------------------------------------------------------------- */

/* The 4 -webkit-overflow-scrolling:auto rules I added earlier as belt-suspenders
   are harmless but let's also explicitly note: nothing else should scroll
   inside the page. */
section, .sec, .mw, main{
  -webkit-overflow-scrolling: auto;
}

/* Avoid stuck-tap visual artifacts globally on touch */
@media (hover: none) and (pointer: coarse){
  *{ -webkit-tap-highlight-color: transparent; }
}

/* === LATE PATCH v11 (touch-action fix + dimmer hero halo behind title) === */

/* 1) Page scroll over the avis / niches / hero-mosaic marquees was blocked
      because of touch-action: pan-x on the tracks. Switch to pan-y so the
      page always scrolls vertically when the cursor/finger is over them. */
.tw-track,
.ni-track,
.mosaic-row{
  touch-action: pan-y !important;
}
/* And on the marquee containers themselves, leave it auto so wheel/scroll
   gestures over the section pass through to the page. */
.tw-marquee,
.ni-marquee,
.hero-mosaic-inline,
.hero-mosaic-inline .mosaic-mask{
  touch-action: auto !important;
}

/* === LATE PATCH v12 (moderate halo back at title level) === */

/* Three-layer halo:
   1) NEW: subtle glow behind the title (50% 22%) — moderate density
   2) Existing v11 layer at 50% 60% — ambient under the demo card
   3) Existing v11 layer at 50% 75% — soft outer fade
   The opacity at title is 0.18 — clearly less than v10's original 0.30, but
   strong enough to give the page a "premium glow" identity. */
.hero::before{
  background:
    radial-gradient(ellipse 50% 30% at 50% 22%,
      rgba(37, 99, 235, 0.18) 0%,
      rgba(37, 99, 235, 0.06) 45%,
      transparent 75%),
    radial-gradient(ellipse 55% 40% at 50% 60%,
      rgba(37, 99, 235, 0.14) 0%,
      rgba(37, 99, 235, 0.04) 40%,
      transparent 75%),
    radial-gradient(ellipse 90% 50% at 50% 78%,
      rgba(96, 165, 250, 0.07) 0%,
      transparent 70%) !important;
  filter: blur(52px) !important;
  opacity: .9 !important;
}

@media (max-width: 768px){
  .hero::before{
    background:
      radial-gradient(ellipse 65% 28% at 50% 22%,
        rgba(37, 99, 235, 0.15) 0%,
        rgba(37, 99, 235, 0.05) 45%,
        transparent 75%),
      radial-gradient(ellipse 70% 35% at 50% 65%,
        rgba(37, 99, 235, 0.11) 0%,
        rgba(37, 99, 235, 0.03) 45%,
        transparent 75%),
      radial-gradient(ellipse 95% 45% at 50% 82%,
        rgba(96, 165, 250, 0.05) 0%,
        transparent 70%) !important;
    filter: blur(38px) !important;
    opacity: .8 !important;
  }
}

/* === LATE PATCH v13 (nav-divider removal + 5-section reinforcement) === */

/* ----------------------------------------------------------------------
   1. Remove the divider line between the nav bar and the hero section.
      Applies on both desktop and mobile. The nav is already semi-transparent
      with backdrop-blur, so removing the 1px border lets it blend seamlessly
      into the hero's dark background.
   ---------------------------------------------------------------------- */
.nav,
.nav.fade-up{
  border-bottom: 0 !important;
  box-shadow: none !important;       /* in case anything tries to fake a line */
}
.hero{
  border-top: 0 !important;          /* belt-and-suspenders */
}

/* === LATE PATCH v14 (Pancake mode — all sections flush full-width on mobile) === */
@media (max-width: 768px){

  /* All sections, regardless of class (.sec, .sl, .tld, .tdl, etc.) become
     flush, edge-to-edge, full-width on mobile. No detached-card look.
     Background colors are preserved (set by their own classes). */
  section,
  section.sec,
  section.sl,
  section.sl + .sl,
  section.tld,
  section.tdl,
  section.sec.sl,
  section.sec.sl.tdl,
  section[class*="sec"],
  section[id]{
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    /* keep their own padding for top/bottom breathing room */
  }

  /* Belt-and-suspenders: any .sl that thinks it should be 24px rounded with
     12px lateral margins (from the existing mobile rule) gets overridden */
  .sl,
  .sec.sl,
  .sec.sl.tdl,
  .sec.sl.tld{
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Stacked .sl sections — kill any margin-top adjustments */
  .sl + .sl,
  .sec + .sec,
  section + section{
    margin-top: 0 !important;
  }

  /* Hide all decorative orbs on mobile globally — they no longer have a
     reason to exist now that sections are flat (orbs were originally
     contained inside `overflow:hidden` sections to create the halo effect) */
  .hg,
  

  /* If any section had padding-top:0 or padding-bottom:0 that created a
     visible vertical gap-discontinuity, normalize the minimum vertical
     padding so the flow stays consistent. Don't override sections that
     legitimately want extra breathing room. */
  section.sec[style*="padding-top:0"]{
    padding-top: 24px !important;     /* was 0 — give it some space */
  }
}

/* On VERY small screens, also clamp side padding for content so it
   doesn't get cramped at the edges (the section bg goes edge-to-edge,
   but the .mw container inside still needs lateral breathing room). */
@media (max-width: 380px){
  section .mw{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* === LATE PATCH v15 (uniform static behavior for ALL sections on mobile) === */
@media (max-width: 768px){

  /* EVERY section becomes static on mobile — same treatment as data-mst from v9.
     This guarantees ZERO sections capture scroll/wheel/touch events.
     Children inside keep all their animations (no descendant rules applied). */
  section,
  section.hero,
  section.sec,
  section.sl,
  section.tld,
  section.tdl,
  section[id],
  section[class*="sec"]{
    /* No scroll context */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    /* No containment context */
    contain: none !important;
    /* No stacking context induced by transform/will-change/etc. */
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    isolation: auto !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    perspective: none !important;
    /* No section-level animation/transition */
    animation: none !important;
    transition: none !important;
    /* No scroll-snap or trapping */
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Override ALL inline overflow:hidden on sections (4 sections still had it) */
  section[style*="overflow:hidden"],
  section[style*="overflow: hidden"]{
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* Hide ALL decorative orbs on mobile globally — they were the only reason
     overflow:hidden was needed. Now they're not. */
  .hg, .hg2,
  section .hg, section 

  /* The hero's halo ::before pseudo-element should still work since .hero
     keeps position: relative and the halo z-index:0. But to be safe,
     restore position:relative on the hero (we removed isolation, but pos
     stays for absolute children: .mosaic-mask, .hero-video-wrap, .hg). */
  section.hero{
    position: relative !important;
  }
}

/* === RESTORE v17 — bringing back what v16 cleanup removed === */

/* --- Restored from v7: section[style*="overflow:hidden"] override --- */
@media (max-width: 768px){
  section,
  section.sec,
  section.sec.sl,
  section.sec.tld,
  section[id],
  section[class*="sec"]{
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  section[style*="overflow:hidden"],
  section[style*="overflow: hidden"]{
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .hg, .hg2,
  section .hg, section .hg2,
  section[style*="overflow:hidden"] > .hg,
  section[style*="overflow:hidden"] > .hg2{
    display: none !important;
  }
  html, body{
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body, body * {
    max-width: 100vw;
  }
  .ni-track,
  .tw-track,
  .mosaic-flat,
  .mosaic-row{
    max-width: none !important;
  }
}

/* --- Restored from v8: per-section transition kill on touch --- */
@media (max-width: 768px){
  section#problem,
  section#proof,
  section.sec[style*="overflow:hidden"],
  section.sec[style*="padding-top:0"]{
    overflow: visible !important;
    contain: layout !important;
  }
}
@media (hover: none) and (pointer: coarse){
  section#problem *,
  section#problem *::before,
  section#problem *::after,
  section#proof *,
  section#proof *::before,
  section#proof *::after,
  section.sec[style*="overflow:hidden"] *,
  section.sec[style*="overflow:hidden"] *::before,
  section.sec[style*="overflow:hidden"] *::after,
  section.sec[style*="padding-top:0"] *,
  section.sec[style*="padding-top:0"] *::before,
  section.sec[style*="padding-top:0"] *::after{
    transition: none !important;
  }
  section#proof .cs--g,
  section.sec[style*="padding-top:0"] .thumb-slot--ai,
  section.sec[style*="padding-top:0"] .ts-score--viral,
  section.sec[style*="padding-top:0"] .ts-verdict{
    animation: none !important;
  }
}

/* --- Restored from v9: section[data-mst] static treatment --- */
@media (max-width: 768px){
  section[data-mst]{
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    isolation: auto !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    perspective: none !important;
    animation: none !important;
    transition: none !important;
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }
  section[data-mst][style*="overflow:hidden"]{
    overflow: visible !important;
  }
  section[data-mst] > .hg,
  section[data-mst] > .hg2{
    display: none !important;
  }
}

/* --- Restored from v10: Neo-Glass + Blue Halo + .gi gradient border --- */
.hero{
  position: relative;
  isolation: isolate;
}
.hero .gi{
  position: relative;
}
.hero .gi::after{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(96,165,250,.35) 0%,
    rgba(255,255,255,.06) 40%,
    rgba(37,99,235,.30) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
}

/* --- Restored from v13: section[data-mst] GPU optimization on animated children --- */
section[data-mst] :is(
  .thumb-slot--ai,
  .ts-score--viral,
  .ts-verdict,
  .cs--g,
  .breathe
){
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
section[data-mst]{
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  overscroll-behavior-x: none !important;
}
@media (max-width: 768px){
  section[data-mst] .cs::before,
  section[data-mst] .cs::after,
  section[data-mst] .cp-path::before,
  section[data-mst] .cp-path::after,
  section[data-mst] .ts-pair::before,
  section[data-mst] .ts-pair::after,
  section[data-mst] .ts-type-card::before,
  section[data-mst] .ts-type-card::after,
  section[data-mst] .glass::before,
  section[data-mst] .glass::after,
  section[data-mst] .glass-light::before,
  section[data-mst] .glass-light::after{
    pointer-events: none !important;
  }
}

/* === LATE PATCH v18 (subtle 4th halo at top — fade with the nav bar) === */

.hero::before{
  background:
    /* NEW v18: very subtle blue veil at the top, fading down past the title.
       Opacity 0.08 max (barely visible). The nav above sits over this and
       its backdrop-blur captures the gradient → seamless top-bar fade. */
    radial-gradient(ellipse 70% 25% at 50% 4%,
      rgba(37, 99, 235, 0.08) 0%,
      rgba(37, 99, 235, 0.03) 45%,
      transparent 75%),

    /* v12 layer 1: title area (50% 22%, 0.18 opacity) */
    radial-gradient(ellipse 50% 30% at 50% 22%,
      rgba(37, 99, 235, 0.18) 0%,
      rgba(37, 99, 235, 0.06) 45%,
      transparent 75%),

    /* v12 layer 2: demo area (50% 60%, 0.14 opacity) */
    radial-gradient(ellipse 55% 40% at 50% 60%,
      rgba(37, 99, 235, 0.14) 0%,
      rgba(37, 99, 235, 0.04) 40%,
      transparent 75%),

    /* v12 layer 3: bottom fade (50% 78%, 0.07 opacity) */
    radial-gradient(ellipse 90% 50% at 50% 78%,
      rgba(96, 165, 250, 0.07) 0%,
      transparent 70%) !important;

  filter: blur(52px) !important;
  opacity: .9 !important;
}

@media (max-width: 768px){
  .hero::before{
    background:
      /* NEW v18 mobile: even more subtle (0.06) — small screens read brighter */
      radial-gradient(ellipse 80% 22% at 50% 5%,
        rgba(37, 99, 235, 0.06) 0%,
        rgba(37, 99, 235, 0.025) 50%,
        transparent 75%),

      radial-gradient(ellipse 65% 28% at 50% 22%,
        rgba(37, 99, 235, 0.15) 0%,
        rgba(37, 99, 235, 0.05) 45%,
        transparent 75%),

      radial-gradient(ellipse 70% 35% at 50% 65%,
        rgba(37, 99, 235, 0.11) 0%,
        rgba(37, 99, 235, 0.03) 45%,
        transparent 75%),

      radial-gradient(ellipse 95% 45% at 50% 82%,
        rgba(96, 165, 250, 0.05) 0%,
        transparent 70%) !important;

    filter: blur(38px) !important;
    opacity: .8 !important;
  }
}

/* === LATE PATCH v19 (more visible hero halo, fade into nav) === */

.hero::before{
  background:
    /* Top fade — clearly visible blue veil that the nav's backdrop-blur picks up */
    radial-gradient(ellipse 85% 35% at 50% 4%,
      rgba(37, 99, 235, 0.22) 0%,
      rgba(37, 99, 235, 0.10) 35%,
      transparent 70%),

    /* Title halo — bumped from 0.18 to 0.26 */
    radial-gradient(ellipse 60% 35% at 50% 24%,
      rgba(37, 99, 235, 0.26) 0%,
      rgba(37, 99, 235, 0.10) 50%,
      transparent 80%),

    /* Demo area halo */
    radial-gradient(ellipse 60% 40% at 50% 60%,
      rgba(37, 99, 235, 0.18) 0%,
      rgba(37, 99, 235, 0.05) 45%,
      transparent 80%),

    /* Base ambient blue */
    radial-gradient(ellipse 95% 55% at 50% 80%,
      rgba(96, 165, 250, 0.12) 0%,
      transparent 70%) !important;

  /* Less blur → gradient stays defined, more readable as "glow" */
  filter: blur(38px) !important;
  opacity: 1 !important;
}

@media (max-width: 768px){
  .hero::before{
    background:
      /* mobile top fade */
      radial-gradient(ellipse 95% 30% at 50% 5%,
        rgba(37, 99, 235, 0.18) 0%,
        rgba(37, 99, 235, 0.08) 40%,
        transparent 75%),

      /* mobile title halo */
      radial-gradient(ellipse 80% 30% at 50% 22%,
        rgba(37, 99, 235, 0.22) 0%,
        rgba(37, 99, 235, 0.08) 50%,
        transparent 80%),

      /* mobile demo halo */
      radial-gradient(ellipse 75% 35% at 50% 65%,
        rgba(37, 99, 235, 0.14) 0%,
        rgba(37, 99, 235, 0.04) 45%,
        transparent 80%),

      /* mobile base */
      radial-gradient(ellipse 100% 45% at 50% 85%,
        rgba(96, 165, 250, 0.08) 0%,
        transparent 70%) !important;

    filter: blur(28px) !important;
    opacity: 1 !important;
  }
}

/* === LATE PATCH v20 (visible blue stage halo matching reference) === */

.hero::before{
  background:
    /* Top region — strong blue under the nav, fades into top bar via backdrop-blur */
    radial-gradient(ellipse 70% 35% at 50% 8%,
      rgba(37, 99, 235, 0.40) 0%,
      rgba(37, 99, 235, 0.18) 40%,
      transparent 75%),

    /* Title halo — main peak (50% 28%) */
    radial-gradient(ellipse 55% 35% at 50% 28%,
      rgba(37, 99, 235, 0.50) 0%,
      rgba(37, 99, 235, 0.22) 45%,
      transparent 75%),

    /* Demo area glow */
    radial-gradient(ellipse 60% 35% at 50% 60%,
      rgba(37, 99, 235, 0.25) 0%,
      rgba(37, 99, 235, 0.08) 50%,
      transparent 80%),

    /* Base ambient blue */
    radial-gradient(ellipse 95% 50% at 50% 82%,
      rgba(96, 165, 250, 0.15) 0%,
      transparent 70%) !important;

  filter: blur(30px) !important;
  opacity: 1 !important;
}

@media (max-width: 768px){
  .hero::before{
    background:
      /* mobile top fade */
      radial-gradient(ellipse 95% 30% at 50% 8%,
        rgba(37, 99, 235, 0.32) 0%,
        rgba(37, 99, 235, 0.14) 45%,
        transparent 75%),

      /* mobile title halo */
      radial-gradient(ellipse 80% 28% at 50% 25%,
        rgba(37, 99, 235, 0.40) 0%,
        rgba(37, 99, 235, 0.16) 50%,
        transparent 80%),

      /* mobile demo halo */
      radial-gradient(ellipse 75% 35% at 50% 65%,
        rgba(37, 99, 235, 0.18) 0%,
        rgba(37, 99, 235, 0.05) 50%,
        transparent 80%),

      /* mobile base */
      radial-gradient(ellipse 100% 45% at 50% 85%,
        rgba(96, 165, 250, 0.10) 0%,
        transparent 70%) !important;

    filter: blur(24px) !important;
    opacity: 1 !important;
  }
}

/* === LATE PATCH v21 — invert the .hero-vignette: was DARK, now BLUE === */

/* The .hero-vignette was painting rgba(9,9,11,.78) over the center,
   killing any blue glow added via ::before. Replace its dark gradient
   with a blue one — same shape, same z-index, just different color. */
.hero-vignette{
  background:
    /* Center stage glow — strong blue at hero center */
    radial-gradient(ellipse 70% 55% at 50% 30%,
      rgba(37, 99, 235, 0.50) 0%,
      rgba(37, 99, 235, 0.20) 40%,
      transparent 72%),
    /* Top fade — fades INTO the nav bar via its backdrop-filter */
    radial-gradient(ellipse 100% 40% at 50% 0%,
      rgba(37, 99, 235, 0.35) 0%,
      rgba(37, 99, 235, 0.10) 50%,
      transparent 80%) !important;
}

/* Mobile — slightly less intense + adjusted positioning for narrow viewport */
@media (max-width: 768px){
  .hero-vignette{
    background:
      radial-gradient(ellipse 90% 45% at 50% 28%,
        rgba(37, 99, 235, 0.40) 0%,
        rgba(37, 99, 235, 0.15) 45%,
        transparent 75%),
      radial-gradient(ellipse 100% 30% at 50% 0%,
        rgba(37, 99, 235, 0.28) 0%,
        rgba(37, 99, 235, 0.08) 50%,
        transparent 80%) !important;
  }
}

/* Reset .hero::before to a much lighter complementary glow at the bottom,
   so it doesn't fight with the vignette's main blue at top. */
.hero::before{
  background:
    radial-gradient(ellipse 80% 30% at 50% 80%,
      rgba(96, 165, 250, 0.10) 0%,
      transparent 70%) !important;
  filter: blur(40px) !important;
  opacity: 1 !important;
}
@media (max-width: 768px){
  .hero::before{
    background:
      radial-gradient(ellipse 95% 25% at 50% 85%,
        rgba(96, 165, 250, 0.07) 0%,
        transparent 70%) !important;
    filter: blur(28px) !important;
  }
}

/* === LATE PATCH v22 (intensify blue + global scroll fix) === */

/* ============== 1. INTENSIFIED BLUE LUEUR ============== */
.hero-vignette{
  background:
    /* Center stage glow — bumped from 0.50 → 0.65 */
    radial-gradient(ellipse 75% 60% at 50% 30%,
      rgba(37, 99, 235, 0.65) 0%,
      rgba(37, 99, 235, 0.30) 38%,
      rgba(37, 99, 235, 0.10) 60%,
      transparent 75%),
    /* Top fade vers la nav — bumped from 0.35 → 0.50 */
    radial-gradient(ellipse 110% 45% at 50% 0%,
      rgba(37, 99, 235, 0.50) 0%,
      rgba(37, 99, 235, 0.18) 45%,
      transparent 80%) !important;
}
@media (max-width: 768px){
  .hero-vignette{
    background:
      radial-gradient(ellipse 95% 50% at 50% 28%,
        rgba(37, 99, 235, 0.55) 0%,
        rgba(37, 99, 235, 0.25) 42%,
        rgba(37, 99, 235, 0.08) 65%,
        transparent 80%),
      radial-gradient(ellipse 110% 35% at 50% 0%,
        rgba(37, 99, 235, 0.40) 0%,
        rgba(37, 99, 235, 0.12) 50%,
        transparent 80%) !important;
  }
}

/* Reinforce .hero::before bottom fade */
.hero::before{
  background:
    radial-gradient(ellipse 90% 40% at 50% 80%,
      rgba(96, 165, 250, 0.18) 0%,
      rgba(37, 99, 235, 0.06) 45%,
      transparent 75%) !important;
  filter: blur(36px) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

/* ============== 2. GLOBAL SCROLL FIX (desktop + mobile) ============== */

/* Force overflow:visible on EVERY section regardless of viewport.
   The original .hero{overflow:hidden} creates a scroll context that
   captures wheel events on desktop. Body's overflow-x:hidden handles
   horizontal clipping at the page level — no section needs its own. */
section,
section.hero,
section.sec,
section.sl,
section[class*="sec"],
section[id]{
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
}

/* Override inline overflow:hidden on any section */
section[style*="overflow:hidden"],
section[style*="overflow: hidden"]{
  overflow: visible !important;
}

/* Hide all decorative orbs everywhere — they were the original reason for
   the .hero{overflow:hidden}. Without orbs, no clipping needed. */
.hg, .hg2 { display: none !important; }

/* Body/html: ensure clean scroll behavior on ALL viewports */
html, body{
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: contain !important;
  scroll-behavior: auto !important;       /* explicit: no smooth-scroll jitter */
  -webkit-overflow-scrolling: auto !important;
}

/* The .mw container should never create its own scroll either */
.mw, main{
  overflow: visible !important;
}

/* Ensure .hero stays positioned correctly (children depend on it) */
.hero{
  position: relative !important;
  isolation: isolate !important;
}

/* === LATE PATCH v23 (DEFINITIVE fix for avis section blocking page scroll) === */

/* 1. Revert any overflow:clip on marquees to plain overflow:hidden.
      'clip' has implementation differences across browsers; 'hidden'
      is the universally-compatible behavior. */
.tw-marquee,
.tw-row,
.ni-marquee,
.ni-row{
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: auto !important;
}

/* 2. Make the marquee CONTAINERS (not the interactive cards inside)
      transparent to pointer events. When the cursor is over the marquee
      "background", the browser sees no element to interact with there —
      the wheel event passes through to the body which then scrolls. */
.tw-marquee,
.tw-row,
.tw-track,
.ni-marquee,
.ni-row,
.ni-track{
  pointer-events: none !important;
}

/* 3. Restore pointer-events on actual interactive children */
.tw-card,
.tw-card *,
.ni-tag,
.ni-tag *{
  pointer-events: auto !important;
}

/* 4. Also clear any touch-action restriction on these */
.tw-marquee,
.tw-row,
.ni-marquee,
.ni-row{
  touch-action: pan-y !important;
}
.tw-track,
.ni-track{
  touch-action: pan-y !important;
}


/* ============================================= */
/* MOBILE-ONLY HERO MOSAIC (after stats)         */
/* ============================================= */
.hero-mosaic-mobile{
  display: none;
}

@media (max-width: 767px){
  .hero-mosaic-mobile{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 36px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .hmm-row{
    overflow: hidden;
    width: 100%;
  }
  .hmm-track{
    display: inline-flex;
    gap: 10px;
    will-change: transform;
  }
  .hmm-row--left .hmm-track{
    animation: hmm-scroll-left 28s linear infinite;
  }
  .hmm-row--right .hmm-track{
    animation: hmm-scroll-right 32s linear infinite;
  }
  .hmm-track img{
    width: 168px;
    height: calc(168px * 9 / 16);
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
    background: #18181b;
    display: block;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow:
      0 4px 12px -2px rgba(0, 0, 0, .45),
      0 8px 24px -6px rgba(0, 0, 0, .35),
      inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  @keyframes hmm-scroll-left{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes hmm-scroll-right{
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .hmm-row--left .hmm-track,
    .hmm-row--right .hmm-track{
      animation: none;
    }
  }
}

@media (max-width: 480px){
  .hero-mosaic-mobile{
    margin-top: 28px;
    gap: 8px;
  }
  .hmm-track{
    gap: 8px;
  }
  .hmm-track img{
    width: 148px;
    border-radius: 10px;
  }
}

/* ============================================= */
/* RENFORCER LES BADGES SCORE — Section Predictive Thumbnail Analysis */
/* ============================================= */

.ts-featured .ts-score--low{
  bottom: 18px !important;
  right: 18px !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, .92), rgba(220, 38, 38, .88)) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .35) !important;
  letter-spacing: -1px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 0 18px rgba(239, 68, 68, .4);
  box-shadow:
    0 8px 28px -4px rgba(239, 68, 68, .65),
    0 0 60px -10px rgba(239, 68, 68, .55),
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -2px 4px rgba(0, 0, 0, .2) !important;
  z-index: 5 !important;
  animation: ts-score-low-pulse 2.8s ease-in-out infinite;
}

@keyframes ts-score-low-pulse{
  0%, 100%{
    box-shadow:
      0 8px 28px -4px rgba(239, 68, 68, .65),
      0 0 60px -10px rgba(239, 68, 68, .55),
      inset 0 1px 0 rgba(255, 255, 255, .4),
      inset 0 -2px 4px rgba(0, 0, 0, .2);
    transform: scale(1);
  }
  50%{
    box-shadow:
      0 10px 36px -4px rgba(239, 68, 68, .8),
      0 0 80px -8px rgba(239, 68, 68, .7),
      inset 0 1px 0 rgba(255, 255, 255, .5),
      inset 0 -2px 4px rgba(0, 0, 0, .2);
    transform: scale(1.04);
  }
}

.ts-featured .ts-score--high{
  bottom: 18px !important;
  right: 18px !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #8b5cf6 100%) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .45) !important;
  letter-spacing: -1px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 0 18px rgba(34, 197, 94, .5);
  box-shadow:
    0 10px 36px -4px rgba(34, 197, 94, .75),
    0 0 80px -10px rgba(139, 92, 246, .55),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 4px rgba(0, 0, 0, .15) !important;
  z-index: 5 !important;
  animation: ts-score-high-pulse 2.4s ease-in-out infinite;
}

@keyframes ts-score-high-pulse{
  0%, 100%{
    box-shadow:
      0 10px 36px -4px rgba(34, 197, 94, .75),
      0 0 80px -10px rgba(139, 92, 246, .55),
      inset 0 1px 0 rgba(255, 255, 255, .5),
      inset 0 -2px 4px rgba(0, 0, 0, .15);
    transform: scale(1);
  }
  50%{
    box-shadow:
      0 14px 48px -4px rgba(34, 197, 94, .95),
      0 0 110px -8px rgba(139, 92, 246, .75),
      0 0 30px -2px rgba(34, 197, 94, .6),
      inset 0 1px 0 rgba(255, 255, 255, .55),
      inset 0 -2px 4px rgba(0, 0, 0, .15);
    transform: scale(1.05);
  }
}

.ts-featured .ts-score .ts-max{
  opacity: .65 !important;
  font-weight: 700 !important;
  margin-left: 3px !important;
  font-size: .55em !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767px){
  .ts-featured .ts-score--low,
  .ts-featured .ts-score--high{
    bottom: 12px !important;
    right: 12px !important;
    padding: 9px 14px !important;
    border-radius: 12px !important;
    border-width: 1.5px !important;
  }
  .ts-featured .ts-score--low{
    font-size: 22px !important;
  }
  .ts-featured .ts-score--high{
    font-size: 26px !important;
  }
}


/* ============================================= */
/* LEGAL PAGES — Terms / Privacy / Refund / Cookies */
/* ============================================= */
.legal-page{
  position: relative;
  min-height: 100vh;
  padding: 120px 0 80px;
  overflow: hidden;
}
.legal-bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 600px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(37, 99, 235, .12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.legal-container{
  position: relative;
  z-index: 1;
  max-width: 768px;        /* max-w-3xl equivalent */
  margin: 0 auto;
  padding: 0 24px;
}
.legal-back-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
  margin-bottom: 32px;
}
.legal-back-btn:hover{
  background: rgba(255, 255, 255, .08);
  border-color: rgba(96, 165, 250, .35);
  color: #fff;
  transform: translateX(-2px);
}
.legal-back-btn svg{
  flex-shrink: 0;
}
.legal-header{
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.legal-eyebrow{
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 16px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(37, 99, 235, .1);
  border: 1px solid rgba(37, 99, 235, .3);
}
.legal-title{
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 12px;
  color: #fff;
}
.legal-updated{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .3px;
}

/* ----- LEGAL CONTENT TYPOGRAPHY ----- */
.legal-content{
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .72);
}
.legal-content h2{
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  margin: 48px 0 16px;
  padding-top: 8px;
}
.legal-content h2:first-child{
  margin-top: 0;
  padding-top: 0;
}
.legal-content h3{
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  letter-spacing: -.01em;
  margin: 32px 0 12px;
}
.legal-content p{
  margin-bottom: 16px;
}
.legal-content strong{
  color: rgba(255, 255, 255, .95);
  font-weight: 700;
}
.legal-content a{
  color: #60a5fa;
  text-decoration: underline;
  text-decoration-color: rgba(96, 165, 250, .35);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.legal-content a:hover{
  color: #93c5fd;
  text-decoration-color: rgba(147, 197, 253, .7);
}
.legal-content ul, .legal-content ol{
  margin: 12px 0 20px;
  padding-left: 24px;
}
.legal-content li{
  margin-bottom: 8px;
  padding-left: 4px;
}
.legal-content ul li::marker{
  color: rgba(96, 165, 250, .65);
}
.legal-content ol li::marker{
  color: rgba(96, 165, 250, .8);
  font-weight: 700;
}
.legal-content code{
  font-family: 'JetBrains Mono', monospace;
  font-size: .9em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #93c5fd;
}
.legal-content blockquote{
  margin: 20px 0;
  padding: 16px 20px;
  border-left: 3px solid rgba(96, 165, 250, .55);
  background: rgba(37, 99, 235, .06);
  border-radius: 0 10px 10px 0;
  color: rgba(255, 255, 255, .82);
}
.legal-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  background: rgba(255, 255, 255, .02);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
}
.legal-content th{
  text-align: left;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .04);
  font-weight: 700;
  color: #fff;
  font-size: 13px;
  letter-spacing: .3px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.legal-content td{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  vertical-align: top;
}
.legal-content tr:last-child td{
  border-bottom: none;
}

.legal-footer-cta{
  margin-top: 64px;
  padding: 24px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(139, 92, 246, .04));
  border: 1px solid rgba(37, 99, 235, .15);
  text-align: center;
}
.legal-footer-cta p{
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
}
.legal-footer-cta a{
  color: #60a5fa;
  font-weight: 600;
  text-decoration: none;
}
.legal-footer-cta a:hover{
  text-decoration: underline;
}

/* Footer 5-column adjustment for Legal section */
@media (min-width: 769px){
  .footer .fg{
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }
}

@media (max-width: 768px){
  .legal-page{
    padding: 96px 0 56px;
  }
  .legal-content{
    font-size: 15px;
  }
  .legal-content h2{
    font-size: 21px;
    margin-top: 40px;
  }
  .legal-content h3{
    font-size: 16px;
  }
  .footer .fg{
    grid-template-columns: 1fr 1fr !important;
  }
  .footer .fg > div:first-child{
    grid-column: 1 / -1;
  }
}

/* ============================================= */
/* PRICING — New sections (Trust / Compare / VS / Testi) */
/* ============================================= */

.prc-section-eyebrow{
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(37, 99, 235, .1);
  border: 1px solid rgba(37, 99, 235, .3);
}
.prc-section-title{
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: #fff;
}
.prc-section-sub{
  font-size: 16px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* ----- Money-back guarantee ----- */
.prc-guarantee{
  padding: 48px 0 8px;
}
.prc-guarantee-card{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .08), rgba(34, 197, 94, .02));
  border: 1px solid rgba(34, 197, 94, .25);
  box-shadow: 0 0 32px -8px rgba(34, 197, 94, .25);
}
.prc-guarantee-icon{
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(34, 197, 94, .15);
  border: 1px solid rgba(34, 197, 94, .35);
  color: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prc-guarantee-icon svg{ width: 22px; height: 22px; }
.prc-guarantee-title{
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -.2px;
}
.prc-guarantee-text{
  font-size: 13.5px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.55;
}
.prc-guarantee-text a{
  color: #4ade80;
  font-weight: 600;
  text-decoration: none;
}
.prc-guarantee-text a:hover{ text-decoration: underline; }


/* ----- Trust stats ----- */
.prc-trust{
  padding: 80px 0 64px;
}
.prc-trust-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(96, 165, 250, .8);
  margin-bottom: 14px;
}
.prc-trust-title{
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 40px;
  color: #fff;
}
.prc-trust-stats{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.prc-trust-stat{ text-align: center; }
.prc-trust-num{
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, #60a5fa, #2563EB);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
  margin-bottom: 6px;
}
.prc-trust-lbl{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.prc-trust-divider{
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, .08);
}

/* ----- Comparison table ----- */
.prc-compare{
  padding: 64px 0;
}
.prc-table-wrap{
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .005));
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.prc-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.prc-table th, .prc-table td{
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.prc-table thead th{
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  vertical-align: top;
}
.prc-th-feat{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.prc-th-plan{
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  position: relative;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.prc-th-plan--featured{
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(139, 92, 246, .08)) !important;
  border-bottom-color: rgba(37, 99, 235, .35) !important;
}
.prc-th-name{
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.2px;
  line-height: 1.2;
}
.prc-th-name-row{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}
.prc-th-name-row .prc-th-name{
  display: inline-block;
}
.prc-th-price{
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: rgba(96, 165, 250, .85);
  letter-spacing: .3px;
}
.prc-th-badge{
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(34, 197, 94, .12));
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, .4);
  box-shadow: 0 0 14px -4px rgba(34, 197, 94, .55);
}
.prc-table tbody td{ color: rgba(255, 255, 255, .75); vertical-align: middle; }
.prc-table tbody td:nth-child(2),
.prc-table tbody td:nth-child(3){
  text-align: center;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}
.prc-table tbody td:nth-child(3){
  background: rgba(37, 99, 235, .04);
}
.prc-table tbody tr:last-child td{ border-bottom: none; }
.prc-cat{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #60a5fa !important;
  background: rgba(37, 99, 235, .04);
  padding-top: 18px !important;
  padding-bottom: 8px !important;
}
.prc-yes{
  color: #22c55e;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(34, 197, 94, .45);
}
.prc-no{
  color: rgba(255, 255, 255, .25);
  font-size: 16px;
  font-weight: 700;
}

/* ----- VS competitors ----- */
.prc-vs{
  padding: 64px 0;
}
.prc-vs-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.prc-vs-card{
  position: relative;
  padding: 24px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .005));
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all .35s cubic-bezier(.16, 1, .3, 1);
  filter: saturate(.9);
  opacity: .82;
}
.prc-vs-card--win{
  background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(139, 92, 246, .06));
  border: 1px solid rgba(37, 99, 235, .35);
  box-shadow: 0 16px 40px -16px rgba(37, 99, 235, .35);
  filter: none;
  opacity: 1;
}
.prc-vs-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.prc-vs-logo{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.prc-vs-logo--pixado{ background: linear-gradient(135deg, #2563EB, #3b82f6); box-shadow: 0 4px 14px rgba(37,99,235,.5); }
.prc-vs-logo--canva{ background: linear-gradient(135deg, #00c4cc, #7d2ae8); }
.prc-vs-logo--ps{ background: #001e36; color: #31a8ff; }
.prc-vs-logo--gpt{ background: linear-gradient(135deg, #74aa9c, #10a37f); }
.prc-vs-name{
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex: 1;
  letter-spacing: -.2px;
}
.prc-vs-badge{
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: 100px;
}
.prc-vs-badge--win{
  background: linear-gradient(135deg, rgba(34, 197, 94, .25), rgba(34, 197, 94, .12));
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, .4);
  box-shadow: 0 0 14px -4px rgba(34, 197, 94, .5);
}
.prc-vs-list{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.prc-vs-row{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .75);
}
.prc-vs-ic{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  margin-top: 2px;
}
.prc-vs-row--win .prc-vs-ic{
  background: rgba(34, 197, 94, .2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, .4);
}
.prc-vs-row--lose .prc-vs-ic{
  background: rgba(239, 68, 68, .14);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, .3);
}
.prc-vs-row--lose{ color: rgba(255, 255, 255, .55); }
.prc-vs-time{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .5);
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, .08);
}
.prc-vs-time strong{ color: #60a5fa; font-weight: 800; }
.prc-vs-card--win .prc-vs-time strong{ color: #22c55e; }

/* ----- Testimonials ----- */
.prc-testi{
  padding: 64px 0 48px;
}
.prc-testi-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.prc-testi-card{
  padding: 26px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all .35s cubic-bezier(.16, 1, .3, 1);
}
.prc-testi-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5);
}
.prc-testi-card--featured{
  background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(139, 92, 246, .04));
  border-color: rgba(96, 165, 250, .3);
  box-shadow: 0 16px 40px -16px rgba(37, 99, 235, .35);
}
.prc-testi-stars{
  color: #FACC15;
  letter-spacing: 2px;
  font-size: 13px;
  margin-bottom: 14px;
  text-shadow: 0 1px 2px rgba(250, 204, 21, .25);
}
.prc-testi-quote{
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.55;
  margin-bottom: 20px;
}
.prc-testi-quote strong{
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #86efac);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.prc-testi-author{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.prc-testi-ava{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.prc-testi-ava--photo{
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.prc-testi-ava--photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.prc-testi-name{
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.prc-testi-role{
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  margin-top: 2px;
}

/* ----- Pixado logo in table header ----- */
.prc-th-logo{
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
}

/* ----- Mobile responsive ----- */
@media (max-width: 768px){
  .prc-trust{ padding: 56px 0 40px; }
  /* Keep all 4 stats on a single row instead of wrapping */
  .prc-trust-stats{
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .prc-trust-stat{
    flex: 1 1 0;
    min-width: 0;
  }
  .prc-trust-num{
    font-size: 19px;
    letter-spacing: -0.8px;
    margin-bottom: 4px;
  }
  .prc-trust-lbl{
    font-size: 8.5px;
    letter-spacing: 0.8px;
    line-height: 1.3;
  }
  .prc-trust-divider{ display: none; }

  /* Tighter spacing for very small phones (≤380px) */
  @media (max-width: 380px){
    .prc-trust-stats{ gap: 6px; }
    .prc-trust-num{ font-size: 16px; letter-spacing: -0.6px; }
    .prc-trust-lbl{ font-size: 7.5px; letter-spacing: 0.5px; }
  }

  .prc-compare, .prc-vs, .prc-testi{ padding: 48px 0; }
  /* === COMPARISON TABLE — mobile stacked layout === */
  .prc-table-wrap{
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
  }
  .prc-table{
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }
  .prc-table thead{
    display: none; /* hide table header on mobile */
  }
  .prc-table tbody{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .prc-table tbody tr{
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px 12px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
    border: 1px solid rgba(255, 255, 255, .07);
  }
  .prc-table tbody tr:has(.prc-cat){
    background: transparent;
    border: none;
    padding: 16px 4px 4px;
    grid-template-columns: 1fr;
    margin-top: 8px;
  }
  .prc-table tbody tr:first-child{
    margin-top: 0;
  }
  .prc-table tbody td{
    display: block;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    font-size: 13px;
  }
  .prc-table tbody td:first-child{
    color: rgba(255, 255, 255, .9);
    font-weight: 600;
    grid-column: 1;
  }
  .prc-table tbody td:nth-child(2){
    grid-column: 2;
    text-align: right !important;
    font-size: 12px;
    color: rgba(255, 255, 255, .7) !important;
    padding: 4px 10px !important;
    background: rgba(255, 255, 255, .04);
    border-radius: 6px;
    min-width: 60px;
  }
  .prc-table tbody td:nth-child(3){
    grid-column: 3;
    text-align: right !important;
    font-size: 12px;
    color: #fff !important;
    padding: 4px 10px !important;
    background: rgba(37, 99, 235, .15) !important;
    border: 1px solid rgba(37, 99, 235, .3);
    border-radius: 6px;
    min-width: 60px;
    font-weight: 700;
  }
  .prc-table tbody td:nth-child(2)::before{
    content: 'Creator';
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .35);
    margin-bottom: 1px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
  }
  .prc-table tbody td:nth-child(3)::before{
    content: 'Studio';
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(96, 165, 250, .85);
    margin-bottom: 1px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
  }
  .prc-cat{
    font-size: 11px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #60a5fa !important;
    letter-spacing: 1.6px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800 !important;
    text-transform: uppercase;
  }
  .prc-yes{ font-size: 16px; }
  .prc-no{ font-size: 14px; }

  .prc-vs-grid, .prc-testi-grid{ grid-template-columns: 1fr; gap: 14px; }
  .prc-vs-card, .prc-testi-card{ padding: 20px 18px; }

  .prc-guarantee-card{ flex-direction: column; gap: 14px; padding: 20px; }
  .prc-guarantee-icon{ width: 40px; height: 40px; }
}

/* ============================================= */
/* SIMPLIFIED FINAL CTA (TrendTrack-style)        */
/* Used by pricing.html + affiliate.html          */
/* ============================================= */
.aff-final-cta-simple{
  padding: 56px 0 80px;
}
.aff-cta-simple-inner{
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.aff-cta-simple-title{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: 28px;
  color: #fff;
}
.aff-cta-green{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px 14px 30px;
  border-radius: 100px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .2px;
  box-shadow:
    0 8px 24px -6px rgba(34, 197, 94, .55),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.aff-cta-green:hover{
  transform: translateY(-2px);
  color: #fff;
  box-shadow:
    0 14px 36px -6px rgba(34, 197, 94, .75),
    0 0 50px -10px rgba(34, 197, 94, .55),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.aff-cta-green svg{
  margin-right: -4px;
  flex-shrink: 0;
}

@media (max-width: 768px){
  .aff-final-cta-simple{
    padding: 40px 0 56px;
  }
  .aff-cta-simple-title{
    margin-bottom: 22px;
  }
  .aff-cta-green{
    padding: 13px 24px 13px 26px;
    font-size: 14px;
  }
}

/* Blue variant of the simple CTA (used on pricing page) */
.aff-cta-blue{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px 14px 30px;
  border-radius: 100px;
  background: linear-gradient(135deg, #2563EB 0%, #3b82f6 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .2px;
  box-shadow:
    0 8px 24px -6px rgba(37, 99, 235, .55),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.aff-cta-blue:hover{
  transform: translateY(-2px);
  color: #fff;
  box-shadow:
    0 14px 36px -6px rgba(37, 99, 235, .75),
    0 0 50px -10px rgba(96, 165, 250, .55),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.aff-cta-blue svg{ margin-right: -4px; flex-shrink: 0; }

@media (max-width: 768px){
  .aff-cta-blue{ padding: 13px 24px 13px 26px; font-size: 14px; }
}


/* ============================================= */
/* INSTANT NAVIGATION — skip entrance animations */
/* When navigating between pages of the same site */
/* ============================================= */
.instant-nav .rv,
.instant-nav .reveal,
.instant-nav .fade-up,
.instant-nav .bc{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.instant-nav .rv.no-anim,
.instant-nav .reveal.no-anim{
  /* Already handled but for safety */
  transition: none !important;
}


/* ============================================================ */
/* SCROLL REVEAL — MOBILE OPTIMIZATION                          */
/* Faster duration + smaller travel. NO will-change / translate3d
   in the hidden state: those would force a GPU layer per element
   from parse time, which on a long page (29+ .rv elements) makes
   the initial paint *slower* on mobile — opposite of what we want.
   Plain translateY transitions optimize fine on modern browsers. */
/* Activated by an inline <head> script tagging <html class="m-fast"> */
/* ============================================================ */

.m-fast .rv,
.m-fast .reveal{
  transform: translateY(12px);                     /* was 24px */
  transition: opacity .42s cubic-bezier(.22,.61,.36,1),
              transform .42s cubic-bezier(.22,.61,.36,1);
}
.m-fast .rv.vis,
.m-fast .reveal.vis{
  transform: translateY(0);
}
.m-fast .bc{
  transform: translateY(14px);                     /* was 32px */
  transition: opacity .45s cubic-bezier(.22,.61,.36,1),
              transform .45s cubic-bezier(.22,.61,.36,1);
}
.m-fast .bc.vis{
  transform: translateY(0);
}

/* Slightly faster fade-up entrance on mobile (used by header/badge/h1). */
.m-fast .fade-up{
  animation-duration: .42s;
}
.m-fast .d1{ animation-delay: .04s; }
.m-fast .d2{ animation-delay: .08s; }
.m-fast .d3{ animation-delay: .12s; }
.m-fast .d4{ animation-delay: .16s; }
.m-fast .d5{ animation-delay: .20s; }

/* Compare-grid rows — quicker on mobile. */
.m-fast .cr-an{
  transform: translateX(-10px);
  transition: opacity .35s ease-out, transform .35s ease-out;
}
.m-fast .cr-an.vis{ transform: translateX(0); }

/* Honor user preference: kill all reveal animations entirely. */
@media (prefers-reduced-motion: reduce){
  .rv, .reveal, .bc, .cr-an, .fade-up{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================ */
/* HERO STATS — MOBILE COMPACT                                  */
/* The original mobile media query targets .hs-num / .hs-lbl    */
/* which don't exist in the markup (HTML uses .hv and .hl).      */
/* These rules actually scale the stats grid down on phones.     */
/* ============================================================ */
@media (max-width: 768px){
  /* Reduce top spacing & gap so the section is tighter */
  .sg#hero-stats{
    margin-top: 36px !important;       /* was 64px */
    gap: 10px !important;              /* was 14px */
    max-width: 420px;
  }
  /* Smaller icon tile */
  #hero-stats .ht .hi{
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    margin: 0 auto 6px !important;
  }
  #hero-stats .ht .hi svg{
    width: 16px !important;
    height: 16px !important;
  }
  /* Smaller number */
  #hero-stats .ht .hv{
    font-size: 18px !important;        /* was 28px */
    letter-spacing: -0.4px !important;
  }
  /* Smaller label */
  #hero-stats .ht .hl{
    font-size: 8.5px !important;       /* was 12px */
    letter-spacing: 0.7px !important;
    margin-top: 3px !important;
    line-height: 1.25 !important;
  }
}
@media (max-width: 400px){
  .sg#hero-stats{
    margin-top: 28px !important;
    gap: 8px !important;
  }
  #hero-stats .ht .hi{
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    margin: 0 auto 5px !important;
  }
  #hero-stats .ht .hi svg{
    width: 14px !important;
    height: 14px !important;
  }
  #hero-stats .ht .hv{
    font-size: 16px !important;
  }
  #hero-stats .ht .hl{
    font-size: 8px !important;
    letter-spacing: 0.6px !important;
  }
}