/* ══════════════════════════════════════════════════════════════════
   home-new.css — stylesheet for the /home-new page (resources/views/home-new.blade.php).
   Ported from the standalone prototype, which carried its own ~200KB of
   inline <style>. Kept as a plain stylesheet rather than a Vite entry to
   match how the live home page already ships (public/css/home.css).

   Two blocks are borrowed from home.css at the end of this file — the mega
   menu (the prototype delegated it to a js file that does not exist here)
   and the Design Studio showcase (the live one is a later, richer mock than
   the prototype's). Both are noted where they start.
   ══════════════════════════════════════════════════════════════════ */

:root{--dark:#F3EBEF;--dark2:#E8DDE3;--cream:#1A1625;--purple:#8E21CA;--blue:#254AAD;--gold:#7C3AED;--green:#1A8B4E;--red:#C0392B;--muted:rgba(32,26,20,0.78);--dim:rgba(32,26,20,0.10);--border:rgba(32,26,20,0.20);--tc:32,26,20;--oc:243,235,239;--selection-bg:rgba(142,33,202,0.15);--cta-start:#EDE3E8;--gold-btn-text:#FFFFFF;--gold-dark:#7C3AED;--logo-filter:brightness(0.12);--noise-opacity:0.012;--hero-grid-opacity:0.06;--shadow-card:0 4px 18px rgba(32,26,20,0.09),0 1px 4px rgba(32,26,20,0.10);--shadow-nav:0 1px 4px rgba(32,26,20,0.05);--shadow-hover:0 12px 36px rgba(32,26,20,0.16),0 4px 10px rgba(32,26,20,0.08);--section-alt:#E1D4DC;--text-heading:#1A1218;--text-body:#1F1828;--text-caption:#3E3450;--review-quote-opacity:0.12;--hero-glow-mult:0.7;--cta-glow-bg:radial-gradient(ellipse at center,var(--cta-start) 0%,var(--dark) 70%);--btn-gradient:linear-gradient(129deg,#9B3FD4,#3A5BC7);--line-purple:rgba(142,33,202,0.45);--line-gold:rgba(142,33,202,0.40);--line-blue:rgba(37,74,173,0.40);--line-weight:2.5px;--dot-size:8px;--dot-blur:2px;--dot-glow-purple:0 0 24px rgba(142,33,202,0.6),0 0 48px rgba(142,33,202,0.3);--dot-glow-gold:0 0 24px rgba(142,33,202,0.5),0 0 48px rgba(142,33,202,0.2);--nav-scrolled-bg:rgba(243,235,239,0.97)}
[data-theme="dark"]{--dark:#0A0810;--dark2:#100D18;--cream:#FFFDF9;--gold:#C58BEB;--green:#2ECC71;--red:#E74C3C;--muted:rgba(var(--tc),0.62);--dim:rgba(var(--tc),0.08);--border:rgba(var(--tc),0.04);--tc:255,253,249;--oc:10,8,16;--selection-bg:rgba(142,33,202,0.25);--cta-start:#16102A;--gold-btn-text:#0A0810;--gold-dark:#C58BEB;--logo-filter:none;--noise-opacity:0.028;--hero-grid-opacity:0.15;--shadow-card:none;--shadow-nav:none;--shadow-hover:none;--section-alt:#0D0A14;--text-heading:#FFFDF9;--text-body:rgba(255,253,249,0.75);--text-caption:rgba(255,253,249,0.55);--review-quote-opacity:0.12;--hero-glow-mult:1;--cta-glow-bg:radial-gradient(ellipse at center,#16102A 0%,#0A0810 70%);--btn-gradient:linear-gradient(129deg,#8E21CA,#254AAD);--line-purple:rgba(142,33,202,0.35);--line-gold:rgba(142,33,202,0.25);--line-blue:rgba(37,74,173,0.3);--line-weight:2px;--dot-size:6px;--dot-blur:1px;--dot-glow-purple:0 0 20px rgba(142,33,202,0.6),0 0 40px rgba(142,33,202,0.3);--dot-glow-gold:0 0 20px rgba(142,33,202,0.5),0 0 40px rgba(142,33,202,0.2);--nav-scrolled-bg:#16102A;
  --purple:#8E21CA;
  --blue:#254AAD;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:var(--dark);color:var(--text-body);font-family:var(--bd);overflow-x:hidden;transition:background 0.4s,color 0.4s}
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--noise-opacity);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' 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}
::selection{background:var(--selection-bg);color:var(--cream)}
.eyebrow{font-family:var(--lb);font-size:13px;letter-spacing:6px;text-transform:uppercase;color:var(--purple)}
@keyframes gD{0%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-15px) scale(1.04)}100%{transform:translate(-15px,10px) scale(0.97)}}
@keyframes cG{0%,100%{box-shadow:0 0 16px rgba(142,33,202,0);border-color:rgba(var(--tc),0.2)}50%{box-shadow:0 0 28px rgba(142,33,202,0.15);border-color:rgba(142,33,202,0.4)}}
@keyframes sB{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(10px);opacity:0.2}}
@keyframes navFadeIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes navShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.site-nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:18px 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;box-shadow:none;overflow:visible;transition:background 0.5s cubic-bezier(0.16,1,0.3,1),box-shadow 0.5s,border-color 0.5s,backdrop-filter 0.5s}
.site-nav.scrolled{background:var(--nav-scrolled-bg);backdrop-filter:blur(20px);border-bottom-color:var(--border);box-shadow:0 2px 32px rgba(0,0,0,0.10),0 1px 4px rgba(0,0,0,0.05)}
.site-nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.3),rgba(142,33,202,0.2),rgba(37,74,173,0.3),transparent);background-size:200% 100%;animation:navShimmer 6s linear infinite;opacity:0;transition:opacity 0.4s}
.site-nav.scrolled::after{opacity:1}
.nav-left{display:flex;align-items:center;gap:16px;animation:navFadeIn 0.6s ease 0.2s both}.nav-logo{display:flex;justify-content:center;animation:navFadeIn 0.6s ease 0.1s both}.nav-logo img{width:460px;max-width:40vw;height:auto;display:block;content:url('/theme/site/assets/inkgility-logo.svg?v=2');transition:opacity 0.3s}[data-theme="dark"] .nav-logo img{content:url('/theme/site/assets/inkgility-logo-white.svg')}.nav-right{display:flex;align-items:center;gap:24px;justify-content:flex-end;animation:navFadeIn 0.6s ease 0.3s both}
.menu-btn,.search-btn{font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;background:none;border:none;color:var(--muted);cursor:pointer;padding:8px 0;transition:color 0.3s}.menu-btn:hover,.search-btn:hover{color:var(--cream)}
.search-btn{display:flex;align-items:center;gap:8px}.search-btn svg{width:14px;height:14px}
.start-btn{font-family:var(--hl);font-size:15px;font-weight:400;padding:10px 24px;border-radius:60px;cursor:pointer;background:var(--btn-gradient);border:none;color:white;transition:box-shadow 0.3s,transform 0.3s;animation:startBtnPulse 3s ease-in-out infinite}.start-btn:hover{box-shadow:0 0 32px rgba(142,33,202,0.25);transform:scale(1.03);animation:none}
@keyframes startBtnPulse{0%,100%{box-shadow:0 0 0 0 rgba(142,33,202,0)}50%{box-shadow:0 0 20px 4px rgba(142,33,202,0.15)}}
/* === IMMERSIVE MEGA MENU === */
.mega-menu{position:fixed;inset:0;z-index:190;background:rgba(var(--oc),0.96);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:110px 24px 24px;overflow:hidden;opacity:0;visibility:hidden;transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1),visibility 0.4s cubic-bezier(0.16,1,0.3,1)}.mega-menu.open{opacity:1;visibility:visible}
.mega-menu::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;opacity:var(--noise-opacity);pointer-events:none;z-index:0}
.menu-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;will-change:transform,opacity}
.menu-orb-1{width:400px;height:400px;background:radial-gradient(circle,rgba(142,33,202,0.08),transparent 70%);top:-5%;left:10%;animation:menuOrbFloat1 12s ease-in-out infinite}
.menu-orb-2{width:350px;height:350px;background:radial-gradient(circle,rgba(142,33,202,0.06),transparent 70%);bottom:-5%;right:10%;animation:menuOrbFloat2 15s ease-in-out infinite}
.menu-orb-3{width:280px;height:280px;background:radial-gradient(circle,rgba(37,74,173,0.05),transparent 70%);top:40%;left:50%;transform:translateX(-50%);animation:menuOrbFloat3 10s ease-in-out infinite}
[data-theme="dark"] .menu-orb-1{background:radial-gradient(circle,rgba(142,33,202,0.15),transparent 70%)}
[data-theme="dark"] .menu-orb-2{background:radial-gradient(circle,rgba(142,33,202,0.10),transparent 70%)}
[data-theme="dark"] .menu-orb-3{background:radial-gradient(circle,rgba(37,74,173,0.08),transparent 70%)}
@keyframes menuOrbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
@keyframes menuOrbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,-15px)}}
@keyframes menuOrbFloat3{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,25px)}}
.menu-inner{max-width:1100px;width:100%;position:relative;z-index:1;opacity:0;transform:translateY(12px) scale(0.985);transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1) 0.08s,transform 0.45s cubic-bezier(0.16,1,0.3,1) 0.08s}
.mega-menu.open .menu-inner{opacity:1;transform:translateY(0) scale(1)}
.menu-cats{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-bottom:1px solid var(--border);margin-bottom:32px;position:relative}
.menu-cats-underline{position:absolute;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(142,33,202,0.6));border-radius:2px;transition:left 0.35s cubic-bezier(0.16,1,0.3,1),width 0.35s cubic-bezier(0.16,1,0.3,1)}
.menu-cat{padding:16px 4px;text-align:center;font-family:var(--lb);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(var(--tc),0.55);cursor:pointer;border-bottom:2px solid transparent;transition:color 0.3s;white-space:nowrap}.menu-cat:hover{color:var(--cream)}.menu-cat.active{color:var(--gold);border-bottom-color:transparent}
.menu-items{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-height:calc(100vh - 320px);overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(var(--tc),0.12) transparent}.menu-items::-webkit-scrollbar{width:4px}.menu-items::-webkit-scrollbar-track{background:transparent}.menu-items::-webkit-scrollbar-thumb{background:rgba(var(--tc),0.12);border-radius:4px}.menu-items::-webkit-scrollbar-thumb:hover{background:rgba(var(--tc),0.25)}
.menu-item{padding:0;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;gap:0;transition:all 0.25s cubic-bezier(0.16,1,0.3,1);position:relative;border:1px solid transparent;opacity:0;transform:translateY(8px);overflow:hidden;text-decoration:none}.mega-menu.open .menu-item{opacity:1;transform:translateY(0)}
.menu-item:hover{border-color:rgba(142,33,202,0.15);box-shadow:0 0 20px rgba(142,33,202,0.06),inset 0 0 20px rgba(142,33,202,0.02)}
[data-theme="dark"] .menu-item:hover{border-color:rgba(142,33,202,0.25);box-shadow:0 0 24px rgba(142,33,202,0.12),inset 0 0 24px rgba(142,33,202,0.04)}
.menu-item:active{transform:scale(0.98)}
.menu-item::after{content:'';position:absolute;left:10%;right:10%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--purple),var(--gold),var(--purple),transparent);border-radius:2px;transform:translateY(4px) scaleX(0.4);opacity:0;transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),opacity 0.3s;pointer-events:none;filter:blur(0.3px)}
.menu-item:hover::after{transform:translateY(0) scaleX(1);opacity:1}
.menu-item-thumb-wrap{position:relative;width:100%;overflow:hidden;border-radius:12px 12px 0 0}
.menu-item-thumb-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(10,5,20,0.45) 100%);pointer-events:none;transition:opacity 0.3s;border-radius:12px 12px 0 0}
.menu-item-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);border-radius:12px 12px 0 0}.menu-item:hover .menu-item-thumb{transform:scale(1.08)}
.menu-item-thumb-placeholder{width:100%;aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,rgba(142,33,202,0.06) 0%,rgba(37,74,173,0.04) 100%);transition:background 0.25s;position:relative;overflow:hidden;border-radius:12px 12px 0 0;animation:none;border:1px solid var(--border)}
[data-theme="dark"] .menu-item-thumb-placeholder{background:linear-gradient(135deg,#1a0a2e 0%,#2d1b4e 100%);border-color:transparent}
.menu-item-thumb-placeholder::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(142,33,202,0.18),transparent 60%),radial-gradient(circle at 80% 80%,rgba(37,74,173,0.10),transparent 55%);pointer-events:none}
[data-theme="dark"] .menu-item-thumb-placeholder::before{background:radial-gradient(circle at 30% 20%,rgba(142,33,202,0.25),transparent 60%),radial-gradient(circle at 80% 80%,rgba(212,175,55,0.10),transparent 55%)}
.menu-item-thumb-placeholder svg{width:36px;height:36px;flex-shrink:0;stroke:rgba(var(--tc),0.55);fill:none;stroke-width:1.4;transition:stroke 0.25s,filter 0.25s;position:relative;z-index:1}
.menu-item:hover .menu-item-thumb-placeholder svg{stroke:var(--purple);filter:drop-shadow(0 0 8px rgba(142,33,202,0.45))}
[data-theme="dark"] .menu-item:hover .menu-item-thumb-placeholder svg{stroke:var(--gold);filter:drop-shadow(0 0 8px rgba(212,175,55,0.5))}
.menu-item-thumb-placeholder-chip{font-family:var(--lb);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--tc),0.55);position:relative;z-index:1;padding:2px 8px;border:1px solid rgba(var(--tc),0.15);border-radius:10px;background:rgba(var(--tc),0.04)}
.menu-item-content{padding:12px 12px 14px}
.menu-item-name{font-family:var(--bd);font-size:13px;font-weight:500;color:rgba(var(--tc),0.70);transition:color 0.25s;line-height:1.25}.menu-item:hover .menu-item-name{color:var(--cream)}
.menu-item-text{display:flex;flex-direction:column;gap:1px}
.menu-item-desc{font-family:var(--lb);font-size:11px;letter-spacing:0.5px;color:rgba(var(--tc),0.45);transition:color 0.25s;margin-top:1px;line-height:1.35}.menu-item:hover .menu-item-desc{color:rgba(var(--tc),0.35)}
.menu-item-price{font-family:var(--lb);font-size:10px;letter-spacing:0.5px;color:var(--gold);margin-top:6px;display:inline-block;transition:text-shadow 0.3s}
.menu-item:hover .menu-item-price{text-shadow:0 0 10px rgba(212,175,55,0.5),0 0 18px rgba(142,33,202,0.25)}
.menu-bottom{margin-top:40px;text-align:center;padding-top:24px;border-top:1px solid rgba(var(--tc),0.04);opacity:0;transform:translateY(6px);transition:opacity 0.4s 0.25s,transform 0.4s 0.25s}
.mega-menu.open .menu-bottom{opacity:1;transform:translateY(0)}
.menu-bottom-link{font-family:var(--hl);font-size:15px;color:var(--gold);cursor:pointer;background:none;border:none;transition:opacity 0.2s,letter-spacing 0.3s}.menu-bottom-link:hover{opacity:0.7;letter-spacing:1px}
/* === IMMERSIVE SEARCH OVERLAY === */
.search-overlay{position:fixed;inset:0;z-index:300;background:rgba(243,235,239,0.92);backdrop-filter:blur(0px);display:flex;align-items:flex-start;justify-content:center;padding-top:18vh;opacity:0;visibility:hidden;transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1),backdrop-filter 0.5s cubic-bezier(0.16,1,0.3,1),visibility 0.35s}
.search-overlay.open{opacity:1;visibility:visible;backdrop-filter:blur(30px)}
.search-overlay::before{content:'';position:absolute;top:12%;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(142,33,202,0.06) 0%,transparent 70%);pointer-events:none;filter:blur(40px);opacity:0;transition:opacity 0.5s 0.15s}.search-overlay.open::before{opacity:1}
[data-theme="dark"] .search-overlay::before{background:radial-gradient(ellipse,rgba(142,33,202,0.12) 0%,transparent 70%)}
.search-box{width:90%;max-width:600px;position:relative;opacity:0;transform:translateY(-20px) scale(0.97);transition:opacity 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.08s,transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.08s}
.search-overlay.open .search-box{opacity:1;transform:translateY(0) scale(1)}
.search-input-wrap{position:relative}
.search-input-glow{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:0;height:2px;background:linear-gradient(90deg,transparent,var(--purple),var(--gold),var(--purple),transparent);border-radius:2px;transition:width 0.5s cubic-bezier(0.16,1,0.3,1);filter:blur(0.5px)}
.search-input:focus ~ .search-input-glow{width:100%}
.search-input{width:100%;font-family:var(--hl);font-size:clamp(24px,4vw,40px);background:none;border:none;border-bottom:1.5px solid rgba(var(--tc),0.06);color:var(--cream);padding:12px 0;outline:none;transition:border-color 0.3s}.search-input:focus{border-bottom-color:rgba(var(--tc),0.12)}.search-input::placeholder{color:rgba(var(--tc),0.40);transition:color 0.3s}.search-input:focus::placeholder{color:rgba(var(--tc),0.25)}
.search-close{position:absolute;top:-48px;right:0;font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;background:none;border:none;color:var(--muted);cursor:pointer;transition:color 0.2s}.search-close:hover{color:var(--cream)}
.search-hint{position:absolute;top:-48px;left:0;font-family:var(--lb);font-size:13px;letter-spacing:2px;color:rgba(var(--tc),0.50);padding:4px 10px;border:1px solid rgba(var(--tc),0.08);border-radius:6px;transition:border-color 0.3s,box-shadow 0.3s}
.search-ai-badge{position:absolute;top:-48px;left:50%;transform:translateX(-50%);font-family:var(--lb);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--purple);background:rgba(142,33,202,0.06);border:1px solid rgba(142,33,202,0.18);border-radius:20px;padding:4px 12px;white-space:nowrap;pointer-events:none}
[data-theme="dark"] .search-ai-badge{background:rgba(142,33,202,0.12);border-color:rgba(142,33,202,0.30)}
.search-beta-badge{font-family:var(--lb);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:rgba(142,33,202,0.10);border:1px solid rgba(142,33,202,0.25);border-radius:10px;padding:1px 6px;margin-left:6px;vertical-align:middle}
[data-theme="dark"] .search-beta-badge{background:rgba(142,33,202,0.10);border-color:rgba(142,33,202,0.28)}
.search-hint-flash{animation:hintFlash 0.6s ease}
@keyframes hintFlash{0%{border-color:var(--purple);box-shadow:0 0 12px rgba(142,33,202,0.2)}100%{border-color:rgba(var(--tc),0.08);box-shadow:none}}
.search-results{margin-top:24px;max-height:55vh;overflow-y:auto;padding-bottom:4px}
.sr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.search-result{padding:0;margin:0;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:0;transition:all 0.25s cubic-bezier(0.16,1,0.3,1);border:1px solid transparent;opacity:0;transform:translateY(8px);animation:searchResultIn 0.3s cubic-bezier(0.16,1,0.3,1) forwards;overflow:hidden}
.search-result:hover{border-color:rgba(142,33,202,0.15);box-shadow:0 0 20px rgba(142,33,202,0.06),inset 0 0 20px rgba(142,33,202,0.02)}
[data-theme="dark"] .search-result:hover{border-color:rgba(142,33,202,0.25);box-shadow:0 0 24px rgba(142,33,202,0.12),inset 0 0 24px rgba(142,33,202,0.04)}
@keyframes searchResultIn{to{opacity:1;transform:translateY(0)}}
@keyframes shimmerSlide{0%{background-position:200% 0}100%{background-position:-200% 0}}
.prod-thumb-placeholder,.sr-thumb-placeholder{background:linear-gradient(90deg,var(--dim) 25%,rgba(var(--tc),0.10) 50%,var(--dim) 75%);background-size:300% 100%;animation:shimmerSlide 2s ease-in-out infinite}
.sr-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.search-result:hover .sr-thumb{transform:scale(1.06)}
.sr-thumb-placeholder{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--dim);transition:background 0.25s}
.search-result:hover .sr-thumb-placeholder{background:rgba(142,33,202,0.07)}
.sr-thumb-placeholder svg{width:26px;height:26px;flex-shrink:0;stroke:rgba(var(--tc),0.20);fill:none;stroke-width:1.4;transition:stroke 0.25s,filter 0.25s}
.search-result:hover .sr-thumb-placeholder svg{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(142,33,202,0.3))}
[data-theme="dark"] .search-result:hover .sr-thumb-placeholder svg{filter:drop-shadow(0 0 8px rgba(142,33,202,0.4))}
.sr-body{padding:10px 12px}
.sr-name{font-family:var(--bd);font-size:13px;font-weight:500;color:rgba(var(--tc),0.70);transition:color 0.25s}
.search-result:hover .sr-name{color:var(--cream)}
.sr-name mark{background:none;color:var(--gold)}
.sr-desc{font-family:var(--lb);font-size:11px;letter-spacing:0.5px;color:rgba(var(--tc),0.45);transition:color 0.25s;margin-top:2px}
.sr-tag{font-family:var(--lb);font-size:10px;letter-spacing:2px;color:var(--purple);text-transform:uppercase;margin-top:4px;display:block}
.search-popular-label{font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:rgba(var(--tc),0.70);margin-bottom:16px}
.search-popular-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.search-pill{font-family:var(--bd);font-size:13px;font-weight:500;padding:8px 16px;border-radius:60px;background:rgba(var(--tc),0.04);border:1px solid rgba(var(--tc),0.06);color:rgba(var(--tc),0.60);cursor:pointer;transition:all 0.25s cubic-bezier(0.16,1,0.3,1);opacity:0;transform:translateY(4px);animation:pillFloat 0.4s cubic-bezier(0.16,1,0.3,1) forwards}
.search-pill:hover{background:rgba(142,33,202,0.06);border-color:rgba(142,33,202,0.12);color:var(--cream);box-shadow:0 0 12px rgba(142,33,202,0.06)}
[data-theme="dark"] .search-pill{background:rgba(var(--tc),0.03);border-color:rgba(var(--tc),0.06)}
[data-theme="dark"] .search-pill:hover{background:rgba(142,33,202,0.10);border-color:rgba(142,33,202,0.20);box-shadow:0 0 16px rgba(142,33,202,0.08)}
@keyframes pillFloat{to{opacity:1;transform:translateY(0)}}
.modal-overlay{position:fixed;inset:0;z-index:400;background:rgba(243,235,239,0.94);backdrop-filter:blur(24px);display:none;align-items:center;justify-content:center;padding:24px}.modal-overlay.open{display:flex}
.modal-box{width:100%;max-width:480px;border:1px solid var(--border);border-radius:20px;padding:48px 40px;background:var(--dark2);position:relative;box-shadow:var(--shadow-hover)}
.modal-context{font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--purple);margin-bottom:20px}
.modal-title{font-family:var(--hl);font-size:28px;color:var(--text-heading);margin-bottom:8px}
.modal-sub{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:32px}
.modal-label{font-family:var(--lb);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--tc),0.55);margin-bottom:8px;display:block}
.modal-input{width:100%;font-family:var(--bd);font-size:15px;background:rgba(var(--tc),0.04);border:1px solid rgba(var(--tc),0.06);border-radius:12px;padding:14px 16px;color:var(--cream);outline:none;margin-bottom:20px;transition:border-color 0.2s}.modal-input:focus{border-color:var(--purple)}.modal-input::placeholder{color:rgba(var(--tc),0.55)}
textarea.modal-input{resize:vertical;min-height:80px}
.modal-submit{width:100%;font-family:var(--hl);font-size:17px;padding:16px;border-radius:60px;cursor:pointer;background:linear-gradient(129deg,var(--purple),var(--blue));border:none;color:white;margin-top:8px;transition:all 0.3s}.modal-submit:hover{box-shadow:0 0 40px rgba(142,33,202,0.2);transform:translateY(-1px)}
.modal-close{position:absolute;top:20px;right:24px;font-family:var(--lb);font-size:13px;letter-spacing:3px;background:none;border:none;color:var(--muted);cursor:pointer;text-transform:uppercase}.modal-close:hover{color:var(--cream)}
.modal-success{text-align:center;display:none}.modal-success.show{display:block}
.modal-success-check{width:56px;height:56px;margin:0 auto 20px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:24px}
.modal-success-title{font-family:var(--hl);font-size:24px;color:var(--text-heading);margin-bottom:12px}
.modal-success-sub{font-size:14px;color:var(--muted);line-height:1.6}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding-top:80px;background:var(--dark)}
/* Mobile bottom nav permanently disabled */
.ink-mob-nav,#ink-mob-nav,[class*="ink-mob-nav"]{display:none!important}
body.has-mobile-bottom-nav{padding-bottom:0!important}
/* ── Editorial hero effects (visible in BOTH themes) ─────────────────── */
.hero-ink,.hero-hairline,.hero-spotlight{display:block}
/* Ink-bleed blooms — bold watercolor washes (5 blooms, more saturated).
   Pre-soft gradient tails replace the old live blur(55px); the blends stay —
   screen is what lifts the dark hero's luminosity and costs ~nothing. */
:root[data-theme="dark"] .hero-ink,
:root[data-theme="dark"] .hero-spotlight{mix-blend-mode:screen}
.hero-ink{position:absolute;border-radius:50%;pointer-events:none;z-index:0;mix-blend-mode:multiply;opacity:0;animation:inkBloom 16s ease-in-out infinite;will-change:transform,opacity}
.hero-ink-1{width:680px;height:680px;background:radial-gradient(circle,rgba(142,33,202,0.42),rgba(142,33,202,0.16) 42%,transparent 84%);top:0%;left:-6%;animation-delay:0s}
.hero-ink-2{width:600px;height:600px;background:radial-gradient(circle,rgba(142,33,202,0.40),rgba(142,33,202,0.15) 42%,transparent 84%);top:42%;right:-4%;animation-delay:4s}
.hero-ink-3{width:540px;height:540px;background:radial-gradient(circle,rgba(37,74,173,0.36),rgba(37,74,173,0.13) 42%,transparent 84%);bottom:2%;left:28%;animation-delay:8s}
.hero-ink-4{width:480px;height:480px;background:radial-gradient(circle,rgba(212,73,170,0.34),rgba(212,73,170,0.12) 42%,transparent 84%);top:20%;right:18%;animation-delay:11s}
.hero-ink-5{width:440px;height:440px;background:radial-gradient(circle,rgba(232,184,55,0.38),rgba(232,184,55,0.14) 42%,transparent 84%);bottom:25%;left:8%;animation-delay:13s}
@keyframes inkBloom{
  0%,100%{opacity:0;transform:scale(0.78)}
  14%{opacity:0.85;transform:scale(0.95)}
  42%{opacity:1;transform:scale(1.12)}
  70%{opacity:0.65;transform:scale(1.04)}
  90%{opacity:0;transform:scale(0.85)}
}

/* Gold hairlines — thicker, brighter, with glow (5 lines) */
.hero-hairline{position:absolute;left:0;right:0;height:2px;pointer-events:none;z-index:1;transform-origin:left center;transform:scaleX(0);animation:hairlineDraw 11s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(142,33,202,0.4))}
/* Hairlines live in two bands that must never overlap the hero content.
   home-new.js measures the empty space above/below .hero-content and sets
   --hz-top-start/--hz-top-size and --hz-bot-start/--hz-bot-size in px;
   each line takes a fixed fraction of its band. The old 12-26% / 82-96%
   values remain as no-JS fallbacks. Bands too small to be safe get the
   hz-top-off / hz-bot-off class and hide. */
.hero-hairline-1{top:calc(var(--hz-top-start,12%) + 0*var(--hz-top-size,14%));background:linear-gradient(90deg,transparent,rgba(142,33,202,0.85) 20%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.85) 80%,transparent);animation-delay:0.5s}
.hero-hairline-2{top:calc(var(--hz-top-start,12%) + 0.357*var(--hz-top-size,14%));background:linear-gradient(90deg,transparent,rgba(142,33,202,0.80) 20%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.80) 80%,transparent);animation-delay:2.5s;filter:drop-shadow(0 0 8px rgba(142,33,202,0.5))}
.hero-hairline-3{top:calc(var(--hz-top-start,12%) + 0.714*var(--hz-top-size,14%));background:linear-gradient(90deg,transparent,rgba(142,33,202,0.85) 20%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.85) 80%,transparent);animation-delay:4.5s}
.hero-hairline-4{top:calc(var(--hz-top-start,12%) + 1*var(--hz-top-size,14%));background:linear-gradient(90deg,transparent,rgba(37,74,173,0.80) 20%,rgba(37,74,173,1) 50%,rgba(37,74,173,0.80) 80%,transparent);animation-delay:6.5s;filter:drop-shadow(0 0 8px rgba(37,74,173,0.5))}
.hero-hairline-5{top:calc(var(--hz-bot-start,82%) + 0*var(--hz-bot-size,14%));background:linear-gradient(90deg,transparent,rgba(142,33,202,0.85) 20%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.85) 80%,transparent);animation-delay:1.5s}
.hero-hairline-6{top:calc(var(--hz-bot-start,82%) + 0.357*var(--hz-bot-size,14%));background:linear-gradient(90deg,transparent,rgba(142,33,202,0.80) 20%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.80) 80%,transparent);animation-delay:3.5s;filter:drop-shadow(0 0 8px rgba(142,33,202,0.5))}
.hero-hairline-7{top:calc(var(--hz-bot-start,82%) + 0.714*var(--hz-bot-size,14%));background:linear-gradient(90deg,transparent,rgba(142,33,202,0.85) 20%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.85) 80%,transparent);animation-delay:5.5s}
.hero-hairline-8{top:calc(var(--hz-bot-start,82%) + 1*var(--hz-bot-size,14%));background:linear-gradient(90deg,transparent,rgba(37,74,173,0.80) 20%,rgba(37,74,173,1) 50%,rgba(37,74,173,0.80) 80%,transparent);animation-delay:8s;filter:drop-shadow(0 0 8px rgba(37,74,173,0.5))}
.hero.hz-top-off .hero-hairline-1,.hero.hz-top-off .hero-hairline-2,.hero.hz-top-off .hero-hairline-3,.hero.hz-top-off .hero-hairline-4,.hero.hz-top-off .hero-vline:not(.bot){display:none}
.hero.hz-bot-off .hero-hairline-5,.hero.hz-bot-off .hero-hairline-6,.hero.hz-bot-off .hero-hairline-7,.hero.hz-bot-off .hero-hairline-8,.hero.hz-bot-off .hero-vline.bot{display:none}
/* Vertical editorial accent lines — short segments in top & bottom safe bands only (never cross text/button) */
.hero-vline{position:absolute;top:var(--hz-top-start,12%);height:var(--hz-top-size,14%);width:2px;pointer-events:none;z-index:1;transform-origin:center top;transform:scaleY(0);animation:vhairlineDraw 12s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(142,33,202,0.35))}
.hero-vline.bot{top:var(--hz-bot-start,82%);height:var(--hz-bot-size,14%)}
/* Simple full-gradient on the short verticals — no gap needed since they're physically out of the text zone */
.hero-vline-1{left:6%;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.9) 25%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.9) 75%,transparent);animation-delay:1s}
.hero-vline-2{left:11%;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.85) 25%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.85) 75%,transparent);animation-delay:3s;filter:drop-shadow(0 0 6px rgba(142,33,202,0.4))}
.hero-vline-3{left:16%;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.9) 25%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.9) 75%,transparent);animation-delay:5s}
.hero-vline-4{left:84%;background:linear-gradient(180deg,transparent,rgba(37,74,173,0.85) 25%,rgba(37,74,173,1) 50%,rgba(37,74,173,0.85) 75%,transparent);animation-delay:2s;filter:drop-shadow(0 0 6px rgba(37,74,173,0.4))}
.hero-vline-5{left:89%;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.9) 25%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.9) 75%,transparent);animation-delay:4s}
.hero-vline-6{left:94%;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.85) 25%,rgba(142,33,202,1) 50%,rgba(142,33,202,0.85) 75%,transparent);animation-delay:6s;filter:drop-shadow(0 0 6px rgba(142,33,202,0.4))}
@keyframes vhairlineDraw{
  0%,100%{transform:scaleY(0);opacity:0;transform-origin:center top}
  4%{opacity:1}
  28%{transform:scaleY(1);opacity:1;transform-origin:center top}
  29%{transform-origin:center bottom}
  68%{transform:scaleY(1);opacity:1;transform-origin:center bottom}
  92%{transform:scaleY(0);opacity:0;transform-origin:center bottom}
  93%{opacity:0;transform-origin:center top}
}
.hero-vline{display:block}
@keyframes hairlineDraw{
  0%,100%{transform:scaleX(0);opacity:0;transform-origin:left center}
  4%{opacity:1}
  28%{transform:scaleX(1);opacity:1;transform-origin:left center}
  29%{transform-origin:right center}
  68%{transform:scaleX(1);opacity:1;transform-origin:right center}
  92%{transform:scaleX(0);opacity:0;transform-origin:right center}
  93%{opacity:0;transform-origin:left center}
}

/* Cursor-following spotlight — larger, brighter, multi-color halo */
.hero-spotlight{position:absolute;top:0;left:0;width:720px;height:720px;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(142,33,202,0.32) 0%,rgba(142,33,202,0.16) 25%,rgba(142,33,202,0.10) 45%,transparent 68%);mix-blend-mode:multiply;opacity:0;transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity}
.hero-spotlight.on{opacity:1}
@media(hover:none),(max-width:900px){.hero-spotlight{display:none!important}}

.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--hero-grid-opacity);overflow:hidden}
.hero-grid::before{content:'';position:absolute;top:-80px;left:-80px;right:0;bottom:0;background-image:linear-gradient(rgba(var(--tc),0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--tc),0.08) 1px,transparent 1px);background-size:80px 80px;animation:gridDrift 14s linear infinite;will-change:transform}
@keyframes gridDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(80px,80px,0)}}
.hero-grid::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 600px 500px at 30% 40%,rgba(142,33,202,calc(0.08 * var(--hero-glow-mult))),transparent 60%);animation:gridGlow 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes gridGlow{0%{opacity:0.5;transform:translate(-10%,-5%) scale(0.8)}50%{opacity:1;transform:translate(10%,5%) scale(1.2)}100%{opacity:0.5;transform:translate(-10%,-5%) scale(0.8)}}

.hero-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.h-line{position:absolute;left:-10%;width:120%;height:var(--line-weight,2.5px);opacity:0}
.h-line-1{top:14%;background:linear-gradient(90deg,transparent 0%,var(--line-purple) 20%,var(--line-gold) 50%,var(--line-purple) 80%,transparent 100%);animation:hLineSlide 7s linear infinite;filter:blur(0.5px)}
.h-line-2{top:88%;background:linear-gradient(90deg,transparent 0%,var(--line-blue) 30%,var(--line-purple) 60%,transparent 100%);animation:hLineSlide 10s linear 2s infinite;filter:blur(0.5px)}
.h-line-3{top:94%;background:linear-gradient(90deg,transparent 0%,var(--line-gold) 40%,var(--line-purple) 70%,transparent 100%);animation:hLineSlide 8s linear 4s infinite;filter:blur(0.5px)}
/* Existing v-lines also shortened to top safe band — bottom segment added via the .bot duplicate concept could be used but for now keep these compact */
.v-line{position:absolute;top:12%;height:14%;width:var(--line-weight,2.5px);opacity:0}
.v-line.bot{top:82%;height:14%}
/* Vertical lines fade out behind the text zone (~28%-72%) to never cross headlines */
.v-line-1{left:22%;background:linear-gradient(180deg,transparent,var(--line-purple) 30%,var(--line-gold) 50%,var(--line-purple) 70%,transparent);animation:vLineSlide 9s linear 1s infinite;filter:blur(0.5px)}
.v-line-2{left:73%;background:linear-gradient(180deg,transparent,var(--line-blue) 30%,var(--line-purple) 50%,var(--line-blue) 70%,transparent);animation:vLineSlide 7s linear 3s infinite;filter:blur(0.5px)}
@keyframes hLineSlide{0%{opacity:0.3;transform:translateX(-100%)}10%{opacity:0.9}50%{opacity:0.6}90%{opacity:0.9}100%{opacity:0.3;transform:translateX(100%)}}
@keyframes vLineSlide{0%{opacity:0.3;transform:translateY(-100%)}10%{opacity:0.8}50%{opacity:0.5}90%{opacity:0.8}100%{opacity:0.3;transform:translateY(100%)}}

.hero-lines::before,.hero-lines::after{content:'';position:absolute;width:var(--dot-size,8px);height:var(--dot-size,8px);border-radius:50%;background:var(--purple);opacity:0;filter:blur(var(--dot-blur,1px))}
.hero-lines::before{top:28%;left:22%;animation:dotPulse 8s ease-in-out 2s infinite;box-shadow:var(--dot-glow-purple)}
.hero-lines::after{top:55%;left:73%;animation:dotPulse 10s ease-in-out 5s infinite;box-shadow:var(--dot-glow-gold);background:var(--gold)}
@keyframes dotPulse{0%,100%{opacity:0;transform:scale(0.5)}25%{opacity:0.9;transform:scale(2.5)}50%{opacity:1;transform:scale(4)}75%{opacity:0.6;transform:scale(2)}}
.hero-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 700px 700px at 30% 40%,rgba(142,33,202,calc(0.06 * var(--hero-glow-mult))) 0%,transparent 70%),radial-gradient(ellipse 500px 500px at 70% 60%,rgba(37,74,173,calc(0.04 * var(--hero-glow-mult))) 0%,transparent 60%);animation:gD 10s ease-in-out infinite alternate}
.hero-content{position:relative;text-align:center;padding:0 24px;z-index:5}
.hero-headline{font-family:var(--hl);font-weight:400;font-size:clamp(36px,7.5vw,88px);color:var(--text-heading);line-height:1.1}
.hero-verb{color:var(--gold);border-bottom:2px solid rgba(142,33,202,0.25);padding-bottom:2px;display:inline-block;min-width:2ch;transition:opacity .32s ease, filter .32s ease, transform .32s ease}
.hero-verb.swap,.hero-industry.swap{opacity:0;filter:blur(6px);transform:translateY(4px)}
.hero-industry{background:linear-gradient(129deg,var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;min-width:4ch;transition:opacity .32s ease, filter .32s ease, transform .32s ease}
.hero-line{width:100px;height:1px;margin:40px auto;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.37),transparent)}
.hero-sub{font-size:clamp(15px,1.8vw,17px);color:var(--muted);line-height:1.7;max-width:520px;margin:0 auto 36px}
.hero-cta{font-family:var(--hl);font-size:17px;padding:16px 44px;border-radius:60px;cursor:pointer;border:1px solid rgba(var(--tc),0.12);background:transparent;color:rgba(var(--tc),0.70);transition:all 0.4s;animation:cG 4s ease-in-out infinite;position:relative;z-index:10}.hero-cta:hover{border-color:var(--gold);color:var(--gold);animation:none}
.hero-trust-signal{font-family:var(--lb);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--tc),0.30);margin-top:18px;position:relative;z-index:10}
.prefooter-trust-signal{font-family:var(--lb);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--tc),0.35);margin-top:16px}
.hero-fade{position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(transparent,var(--dark));z-index:6}
.hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:6}
.scroll-mouse{width:24px;height:38px;border-radius:12px;border:1.5px solid rgba(var(--tc),0.15);display:flex;justify-content:center;padding-top:8px}
.scroll-dot{width:3px;height:8px;border-radius:2px;background:rgba(var(--tc),0.30);animation:sB 2s ease-in-out infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══ HERO — IMMERSIVE ENHANCEMENT LAYERS ═══ */
/* Uses CSS custom properties so effects adapt to light/dark theme */
/* Light theme hero: gentle, airy — colors should complement a white/off-white bg */
:root{--hero-orb-purple:rgba(142,33,202,0.04);--hero-orb-gold:rgba(142,33,202,0.03);--hero-orb-blue:rgba(37,74,173,0.04);--hero-star-opacity:0.45;--hero-particle-opacity:0.35;--hero-geo-opacity:0.3;--hero-sweep-opacity:0.02;--hero-vignette-strength:0;--hero-verb-glow-alpha:0.3;--hero-effect-filter:blur(140px)}
/* Dark theme hero: full intensity immersive */
[data-theme="dark"]{--hero-orb-purple:rgba(142,33,202,0.25);--hero-orb-gold:rgba(142,33,202,0.15);--hero-orb-blue:rgba(37,74,173,0.20);--hero-star-opacity:1;--hero-particle-opacity:0.9;--hero-geo-opacity:0.85;--hero-sweep-opacity:0.08;--hero-vignette-strength:0.55;--hero-verb-glow-alpha:0.6;--hero-effect-filter:blur(100px)}

/* Drifting orbs — large ambient gradient blobs */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;opacity:0;animation:heroOrbDrift 14s ease-in-out infinite;will-change:transform,opacity}
.hero-orb.ho1{width:700px;height:700px;background:radial-gradient(circle,var(--hero-orb-purple),transparent 70%);top:0%;left:0%;animation-delay:0s}
.hero-orb.ho2{width:600px;height:600px;background:radial-gradient(circle,var(--hero-orb-gold),transparent 70%);bottom:5%;right:0%;animation-delay:4s}
.hero-orb.ho3{width:550px;height:550px;background:radial-gradient(circle,var(--hero-orb-blue),transparent 70%);top:30%;right:15%;animation-delay:8s}
@keyframes heroOrbDrift{0%,100%{opacity:0;transform:translate(0,0) scale(0.85)}20%{opacity:0.8}50%{opacity:1;transform:translate(30px,-25px) scale(1.2)}80%{opacity:0.7}100%{opacity:0;transform:translate(-15px,20px) scale(0.85)}}

/* Constellation stars — pulsing dots */
.hero-star{position:absolute;border-radius:50%;pointer-events:none;z-index:0;animation:heroStarPulse 4s ease-in-out infinite}
.hero-star:nth-child(1){width:4px;height:4px;background:var(--purple);top:15%;left:12%;animation-delay:0s}
.hero-star:nth-child(2){width:3px;height:3px;background:var(--purple);top:25%;right:15%;animation-delay:1s}
.hero-star:nth-child(3){width:4px;height:4px;background:var(--blue);bottom:30%;left:20%;animation-delay:2s}
.hero-star:nth-child(4){width:3px;height:3px;background:var(--gold);top:40%;left:35%;animation-delay:0.6s}
.hero-star:nth-child(5){width:4px;height:4px;background:var(--purple);bottom:25%;right:25%;animation-delay:3s}
.hero-star:nth-child(6){width:3px;height:3px;background:var(--blue);top:60%;left:65%;animation-delay:1.5s}
.hero-star:nth-child(7){width:3px;height:3px;background:var(--gold);top:18%;left:55%;animation-delay:3.5s}
.hero-star:nth-child(8){width:4px;height:4px;background:var(--purple);bottom:35%;right:40%;animation-delay:2.5s}
.hero-star:nth-child(9){width:3px;height:3px;background:var(--blue);top:50%;right:10%;animation-delay:0.4s}
.hero-star:nth-child(10){width:4px;height:4px;background:var(--gold);bottom:40%;left:45%;animation-delay:2.8s}
@keyframes heroStarPulse{0%,100%{opacity:0.1;transform:scale(0.8);box-shadow:none}50%{opacity:var(--hero-star-opacity);transform:scale(2.2);box-shadow:0 0 12px currentColor,0 0 24px currentColor}}

/* Rising particles */
.hero-particle{position:absolute;width:3px;height:3px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;animation:heroParticleRise 10s linear infinite}
.hero-particle:nth-child(1){background:var(--purple);bottom:10%;left:15%;animation-delay:0s}
.hero-particle:nth-child(2){background:var(--gold);bottom:5%;left:35%;animation-delay:1.5s}
.hero-particle:nth-child(3){background:var(--blue);bottom:8%;left:55%;animation-delay:3s}
.hero-particle:nth-child(4){background:var(--purple);bottom:12%;left:75%;animation-delay:4.5s}
.hero-particle:nth-child(5){background:var(--gold);bottom:6%;left:25%;animation-delay:6s}
.hero-particle:nth-child(6){background:var(--blue);bottom:15%;left:85%;animation-delay:2s}
.hero-particle:nth-child(7){background:var(--purple);bottom:4%;left:45%;animation-delay:7.5s}
.hero-particle:nth-child(8){background:var(--gold);bottom:10%;left:65%;animation-delay:5s}
@keyframes heroParticleRise{0%{opacity:0;transform:translateY(0) scale(1)}10%{opacity:var(--hero-particle-opacity)}50%{opacity:calc(var(--hero-particle-opacity) * 0.7)}85%{opacity:calc(var(--hero-particle-opacity) * 0.3)}100%{opacity:0;transform:translateY(-90vh) scale(0.4)}}

/* Floating geometric shapes */
.hero-geo{position:absolute;border-radius:10px;pointer-events:none;z-index:0;opacity:0;animation:heroGeoFloat 18s ease-in-out infinite}
.hero-geo:nth-child(1){width:60px;height:60px;border:1.5px solid rgba(142,33,202,0.15);top:12%;right:10%;transform:rotate(45deg);animation-delay:0s}
.hero-geo:nth-child(2){width:45px;height:45px;border:1.5px solid rgba(142,33,202,0.12);bottom:28%;left:8%;transform:rotate(45deg);animation-delay:3s}
.hero-geo:nth-child(3){width:70px;height:70px;border:1.5px solid rgba(37,74,173,0.12);top:55%;right:18%;transform:rotate(45deg);animation-delay:6s;border-radius:50%}
.hero-geo:nth-child(4){width:50px;height:50px;border:1.5px solid rgba(142,33,202,0.10);bottom:45%;left:25%;transform:rotate(45deg);animation-delay:9s}
@keyframes heroGeoFloat{0%,100%{opacity:0;transform:rotate(45deg) translate(0,0)}20%{opacity:var(--hero-geo-opacity)}50%{opacity:var(--hero-geo-opacity);transform:rotate(45deg) translate(15px,-22px)}80%{opacity:calc(var(--hero-geo-opacity) * 0.6)}100%{opacity:0;transform:rotate(45deg) translate(-10px,15px)}}

/* Diagonal sweep beam */
.hero-sweep{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-sweep::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 40%,rgba(142,33,202,var(--hero-sweep-opacity)) 46%,rgba(142,33,202,calc(var(--hero-sweep-opacity) * 0.75)) 50%,rgba(37,74,173,var(--hero-sweep-opacity)) 54%,transparent 60%);animation:heroSweep 8s linear infinite}
@keyframes heroSweep{0%{transform:translateX(-35%) translateY(-35%)}100%{transform:translateX(35%) translateY(35%)}}

/* Vignette overlay */
.hero-vignette{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 65% 60% at 50% 45%,transparent 35%,rgba(var(--oc),var(--hero-vignette-strength)) 100%)}

/* Verb glow pulse on swap */
.hero-verb{transition:text-shadow 0.6s ease}
.hero-verb-glow{text-shadow:0 0 24px rgba(142,33,202,var(--hero-verb-glow-alpha)),0 0 48px rgba(142,33,202,calc(var(--hero-verb-glow-alpha) * 0.4)),0 0 80px rgba(142,33,202,calc(var(--hero-verb-glow-alpha) * 0.15))}

/* Industry gradient shimmer */
.hero-industry{background-size:200% 100%;animation:heroIndustryShimmer 4s ease-in-out infinite}
@keyframes heroIndustryShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.trust-section{position:relative;padding:64px 0 56px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;background:var(--dark);text-align:center}
.trust-ticker-label{text-align:center}
.trust-tracks{margin-left:auto;margin-right:auto}
.trust-grid-bg{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(var(--tc),0.065) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;opacity:0.7}
.trust-fade-left,.trust-fade-right{position:absolute;top:0;bottom:0;width:180px;pointer-events:none;z-index:3}
.trust-fade-left{left:0;background:linear-gradient(to right,var(--dark) 0%,transparent 100%)}.trust-fade-right{right:0;background:linear-gradient(to left,var(--dark) 0%,transparent 100%)}
.trust-stats{display:flex;align-items:center;justify-content:center;gap:0;margin-top:40px;position:relative;z-index:2}
.trust-stat{display:flex;flex-direction:column;align-items:center;padding:0 36px}
.trust-stat-num{font-family:var(--bd);font-size:clamp(15px,1.6vw,18px);font-weight:600;color:rgba(var(--tc),0.70);line-height:1;letter-spacing:0}
.trust-stat-label{font-family:var(--lb);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--tc),0.35);margin-top:5px}
.trust-stat-divider{width:1px;height:28px;background:var(--border);flex-shrink:0}
.trust-ticker-label{text-align:center;font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:rgba(var(--tc),0.38);margin-bottom:28px;position:relative;z-index:2}
.trust-tracks{display:flex;flex-direction:column;gap:12px;overflow:visible;position:relative;z-index:2}
.ticker-track{display:flex;width:max-content;gap:10px;padding:4px 0}
.ticker-track-fwd{animation:tickerScrollLeft 55s linear infinite}
.ticker-track-rev{animation:tickerScrollRight 48s linear infinite}
.ticker-track-fwd:hover,.ticker-track-rev:hover{animation-play-state:paused}
@keyframes tickerScrollLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes tickerScrollRight{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.ticker-chip{flex-shrink:0;display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 16px;background:rgba(var(--tc),0.04);border:1px solid rgba(var(--tc),0.08);border-radius:10px;cursor:default;transition:all 0.28s cubic-bezier(0.16,1,0.3,1)}
.ticker-chip:hover{background:rgba(var(--tc),0.08);border-color:rgba(142,33,202,0.35);box-shadow:0 0 22px rgba(142,33,202,0.14),0 4px 16px rgba(0,0,0,0.08);transform:translateY(-2px)}
.ticker-chip-logo{width:22px;height:22px;object-fit:contain;border-radius:4px;flex-shrink:0;display:block}
.ticker-chip-name{font-family:var(--bd);font-size:14px;font-weight:500;color:rgba(var(--tc),0.80);white-space:nowrap;line-height:1.2}
/* Light-mode editorial contrast — brand pills, stats & label sit on cream */
:root:not([data-theme="dark"]) .ticker-chip{background:rgba(32,26,20,0.04);border-color:rgba(32,26,20,0.18);box-shadow:0 1px 3px rgba(32,26,20,0.04)}
:root:not([data-theme="dark"]) .ticker-chip-name{color:rgba(32,26,20,0.85)}
:root:not([data-theme="dark"]) .trust-stat-num{color:rgba(32,26,20,0.95);font-weight:700}
:root:not([data-theme="dark"]) .trust-stat-label{color:rgba(32,26,20,0.68)}
:root:not([data-theme="dark"]) .trust-ticker-label{color:rgba(32,26,20,0.62)}
:root:not([data-theme="dark"]) .trust-stat-divider{background:rgba(32,26,20,0.16)}
.convo{padding:120px 32px;background:var(--section-alt);position:relative}
.convo-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 500px 500px at 80% 30%,rgba(142,33,202,0.1) 0%,transparent 60%);animation:gD 14s ease-in-out infinite alternate}
.convo-inner{max-width:1000px;margin:0 auto;position:relative}
.convo-headline{font-family:var(--hl);font-weight:400;font-size:clamp(28px,5vw,48px);color:var(--text-heading);line-height:1.55}
.blank{padding-bottom:3px;border-bottom:1.5px solid rgba(var(--tc),0.06);color:rgba(var(--tc),0.55);transition:all 0.3s}.blank.filled{color:var(--gold);border-bottom-color:rgba(142,33,202,0.31)}
.chip-label{font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:rgba(var(--tc),0.50);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.chip{font-family:var(--hl);font-size:16px;padding:11px 24px;border-radius:60px;cursor:pointer;white-space:nowrap;border:1.5px solid var(--dim);background:transparent;color:var(--muted);transition:all 0.2s}.chip:hover{border-color:rgba(var(--tc),0.55);color:var(--cream);background:rgba(var(--tc),0.02)}.chip.active{border-color:var(--gold);color:var(--gold);background:rgba(142,33,202,0.07)}
.products{padding:120px 32px;background:var(--dark)}.products-inner{max-width:1000px;margin:0 auto}
.filter-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:48px}
.pill{font-family:var(--lb);font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;border-radius:60px;cursor:pointer;border:1px solid rgba(var(--tc),0.06);background:transparent;color:var(--muted);transition:all 0.25s}.pill:hover{border-color:rgba(var(--tc),0.50);color:var(--cream)}.pill.active{border-color:var(--purple);background:rgba(142,33,202,0.082);color:var(--purple)}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:rgba(var(--tc),0.04);border-radius:16px;overflow:hidden}
.prod-card{padding:0;background:var(--dark2);cursor:pointer;transition:all 0.3s;box-shadow:var(--shadow-card);overflow:hidden}.prod-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.prod-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.prod-card:hover .prod-thumb{transform:scale(1.06)}
.prod-thumb-placeholder{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--dim);transition:background 0.25s}
.prod-card:hover .prod-thumb-placeholder{background:rgba(142,33,202,0.07)}
.prod-thumb-placeholder svg{width:26px;height:26px;flex-shrink:0;stroke:rgba(var(--tc),0.20);fill:none;stroke-width:1.4;transition:stroke 0.25s,filter 0.25s}
.prod-card:hover .prod-thumb-placeholder svg{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(142,33,202,0.3))}
[data-theme="dark"] .prod-card:hover .prod-thumb-placeholder svg{filter:drop-shadow(0 0 8px rgba(142,33,202,0.4))}
.prod-content{padding:20px 22px}
.prod-name{font-family:var(--hl);font-size:16px;color:rgba(var(--tc),0.55);margin-bottom:4px;transition:all 0.3s}.prod-card:hover .prod-name{color:var(--cream)}
.prod-sub{font-family:var(--bd);font-size:13px;color:rgba(var(--tc),0.50);line-height:1.5;transition:color 0.3s}.prod-card:hover .prod-sub{color:rgba(var(--tc),0.70)}
.prod-tag{display:flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--lb);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--tc),0.45)}
.prod-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.view-more-btn{font-family:var(--hl);font-size:17px;padding:16px 44px;border:1.5px solid var(--gold);border-radius:60px;background:transparent;color:var(--gold);cursor:pointer;transition:all 0.35s;margin-top:40px}.view-more-btn:hover{background:var(--gold);color:var(--gold-btn-text)}
.how{padding:120px 32px;background:var(--section-alt)}.how-inner{max-width:1000px;margin:0 auto}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:rgba(var(--tc),0.04);border-radius:16px;overflow:hidden}
.step{padding:44px 32px;background:var(--dark2);transition:all 0.3s;box-shadow:var(--shadow-card)}.step:hover{background:rgba(var(--tc),0.02);box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.step-num{font-family:var(--lb);font-size:13px;color:var(--purple);letter-spacing:3px;margin-bottom:20px;transition:color 0.3s}.step:hover .step-num{color:var(--gold)}
.step-line{width:20px;height:1px;background:rgba(var(--tc),0.06);margin-bottom:20px;transition:all 0.3s}.step:hover .step-line{width:36px;background:var(--gold)}
.step-title{font-family:var(--hl);font-size:20px;color:var(--text-heading);margin-bottom:12px}
.step-desc{font-size:15px;color:var(--text-body);line-height:1.7}
.trust{padding:120px 32px;background:var(--dark)}.trust-inner{max-width:1000px;margin:0 auto}
.stats-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;padding:48px 0;border-top:1px solid rgba(var(--tc),0.04);border-bottom:1px solid rgba(var(--tc),0.04);margin-bottom:80px}
.stat{text-align:center;flex:1 1 100px}.stat-num{font-family:var(--hl);font-size:clamp(28px,4vw,40px);color:var(--text-heading)}.stat-label{font-family:var(--lb);font-size:13px;letter-spacing:3px;color:var(--muted);margin-top:6px}
.reviews-section{text-align:center;margin-bottom:64px}
/* Flex column so the quote centers inside the JS-locked min-height (tallest
   review) and the dots stay pinned to the bottom — the card never resizes
   between rotations, so nothing below the section jumps. The two auto
   margins split the spare space above and below the quote block. */
.review-carousel{position:relative;max-width:700px;margin:0 auto;padding:40px 0;display:flex;flex-direction:column}
.review-carousel .review-quote-mark{margin-top:auto}
.review-carousel .review-author{margin-bottom:auto}
.review-quote-mark{font-family:var(--hl);font-size:96px;color:rgba(142,33,202,var(--review-quote-opacity));line-height:1;margin-bottom:-20px}
.review-text{font-family:var(--hl);font-size:clamp(22px,3.5vw,32px);color:var(--text-body);line-height:1.5;margin-bottom:32px;min-height:120px;transition:opacity 0.4s}
.review-stars{color:var(--gold);font-size:16px;letter-spacing:4px;margin-bottom:24px}
.review-author{margin-bottom:4px}
.review-name{font-family:var(--bd);font-size:15px;font-weight:600;color:var(--text-heading)}
.review-biz{font-family:var(--lb);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--tc),0.55);margin-top:4px}
.review-dots{display:flex;justify-content:center;gap:8px;margin-top:32px}
.review-dot{width:8px;height:8px;border-radius:50%;background:rgba(var(--tc),0.06);cursor:pointer;transition:all 0.3s;border:none;padding:0}.review-dot:hover{background:rgba(var(--tc),0.12)}.review-dot.active{background:var(--gold);box-shadow:0 0 20px rgba(142,33,202,0.5),0 0 40px rgba(142,33,202,0.2)}
.eco-bar{margin-top:64px;padding:36px 40px;border-radius:16px;border:1px solid rgba(var(--tc),0.04);display:flex;gap:24px;align-items:center}.eco-text{font-size:15px;color:rgba(var(--tc),0.55);line-height:1.6}.eco-text strong{color:var(--cream)}
.cta-section{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:120px 32px;position:relative;overflow:hidden;background:var(--cta-glow-bg)}
.cta-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 450px 450px at 40% 45%,rgba(142,33,202,0.11) 0%,transparent 65%);animation:gD 16s ease-in-out infinite alternate-reverse}
.cta-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:380px;height:380px;border-radius:50%;border:1px solid rgba(142,33,202,0.06);pointer-events:none}
.cta-inner{text-align:center;max-width:650px;position:relative;z-index:2}
.cta-headline{font-family:var(--hl);font-size:clamp(32px,5.5vw,64px);color:var(--text-heading);line-height:1.15;margin-bottom:20px}
.cta-highlight{background:linear-gradient(129deg,var(--purple),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.cta-sub{font-size:16px;color:var(--muted);line-height:1.7;margin-bottom:40px}
.cta-btn{font-family:var(--hl);font-size:17px;padding:20px 52px;border-radius:60px;cursor:pointer;border:1.5px solid rgba(var(--tc),0.12);background:transparent;color:var(--cream);transition:all 0.4s;animation:cG 4s ease-in-out infinite}.cta-btn:hover{border-color:var(--gold);background:var(--gold);color:var(--gold-btn-text);animation:none}
.site-footer{padding:80px 32px 32px;border-top:1px solid var(--border);background:var(--section-alt)}.footer-inner{max-width:1000px;margin:0 auto}
.footer-top{margin-bottom:56px}
.footer-brand{display:flex;flex-direction:column;gap:12px}
/* dark-theme remote logo override removed — local logo works in both themes */
.footer-tagline{font-family:var(--hl);font-size:15px;color:rgba(var(--tc),0.55)}
.footer-slogan{font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:rgba(var(--tc),0.55);margin-top:8px}
.footer-socials{display:flex;gap:12px;margin-top:16px}
.footer-social{width:32px;height:32px;border-radius:50%;border:1px solid rgba(var(--tc),0.06);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 0.2s;color:rgba(var(--tc),0.55);font-size:13px}.footer-social:hover{border-color:var(--purple);color:var(--purple)}
.footer-col-title{font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:rgba(var(--tc),0.70);margin-bottom:16px}
.footer-link{display:block;font-size:14px;color:rgba(var(--tc),0.70);padding:5px 0;cursor:pointer;transition:color 0.2s;text-decoration:none}.footer-link:hover{color:var(--cream)}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-family:var(--lb);font-size:13px;letter-spacing:3px;color:rgba(var(--tc),0.70)}
.footer-help{font-family:var(--lb);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--tc),0.55);text-decoration:none;cursor:pointer;transition:color 0.2s}.footer-help:hover{color:var(--gold)}
@media(max-width:900px){.wink-grid{grid-template-columns:1fr!important}
/* Long testimonials ran 12+ lines at phone widths, and the carousel's
   tallest-review lock (home-new.js) reserved that height for every slide.
   Clamp all quotes to the same 5 lines — the lock then measures the clamped
   clone, so the card stays short AND nothing below the section jumps. */
.review-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}}
@media(max-width:640px){
.site-nav{padding:14px 16px}.nav-logo img{width:min(240px,42vw)}.nav-right{gap:12px}
.hero{min-height:90vh;padding-top:70px}.hero-headline{font-size:clamp(28px,8vw,48px)}.hero-sub{font-size:14px;padding:0 8px}.hero-cta{font-size:15px;padding:14px 36px}
.trust-section{padding:28px 0 28px}.trust-stat{padding:0 18px}.trust-stat-num{font-size:14px}.trust-stat-divider{height:22px}.ticker-chip{padding:8px 13px}.ticker-chip-name{font-size:13px}.trust-fade-left,.trust-fade-right{width:72px}.trust-ticker-label{margin-bottom:16px}

.chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none}.chips::-webkit-scrollbar{display:none}.chip{flex-shrink:0;font-size:14px;padding:9px 18px}
.filter-pills{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none}.filter-pills::-webkit-scrollbar{display:none}.pill{flex-shrink:0;font-size:13px;padding:8px 14px}
.prod-grid{grid-template-columns:repeat(2,1fr)}
.how{padding:64px 16px}.steps-grid{grid-template-columns:1fr 1fr}.step{padding:28px 20px}
.wink-grid{grid-template-columns:1fr!important;gap:12px!important}
.review-text{font-size:clamp(18px,4vw,24px)!important;min-height:80px!important}
.review-carousel{padding:24px 0}
.cta-section{padding:80px 16px;min-height:50vh}.cta-ring{width:220px;height:220px}.cta-btn{font-size:15px;padding:16px 40px}
.trust{padding:64px 16px}
.search-btn span{display:none}
.mega-menu{padding:72px 16px 16px}.menu-orb{display:none}.menu-cats{grid-template-columns:repeat(3,1fr);gap:0}.menu-cat{font-size:13px;letter-spacing:3px;padding:12px 4px}.menu-items{grid-template-columns:repeat(2,1fr);gap:6px}.sr-grid{grid-template-columns:repeat(2,1fr)}.menu-item{padding:0}.menu-item-content{padding:8px 10px}.menu-item-name{font-size:12px}.menu-bottom{margin-top:24px}
.modal-box{padding:32px 24px}.modal-title{font-size:22px}
.footer-top{grid-template-columns:1fr}.footer-brand{align-items:center;text-align:center}.footer-socials{justify-content:center}
.footer-bottom{flex-direction:column;text-align:center;gap:8px}
}
@media(max-width:420px){.menu-cats{grid-template-columns:repeat(2,1fr)}.menu-items{grid-template-columns:repeat(2,1fr)}.sr-grid{grid-template-columns:repeat(2,1fr)}
.site-nav{padding:12px 12px}.nav-logo img{width:min(200px,40vw)}
.start-btn{display:none}.nav-right{gap:10px}
.hero-headline{font-size:clamp(24px,7vw,36px)}
.prod-grid{grid-template-columns:1fr}
.steps-grid{grid-template-columns:1fr}
.menu-cats{grid-template-columns:repeat(2,1fr)}.menu-items{grid-template-columns:repeat(2,1fr)}.sr-grid{grid-template-columns:repeat(2,1fr)}

.ticker-item{padding:0 20px;font-size:14px}
}

/* ===== SCROLL ANIMATIONS ===== */


/* Step stagger */


/* Hero line draw */


/* Product card entrance */

/* Stat counter */


/* CTA glow pulse */
.cta-glow{animation:ctaGlowPulse 4s ease-in-out infinite alternate}
@keyframes ctaGlowPulse{0%{opacity:0.6;transform:scale(0.95)}100%{opacity:1;transform:scale(1.05)}}

/* Review card */


/* Why grid stat cards */

.hero-line{width:100px!important;transition:none!important}
.cta-glow{animation:none!important}
}

/* ===== PAGE ANIMATIONS (pure CSS — no JS needed) ===== */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes drawLine{from{width:0}to{width:100px}}
@keyframes countFadeIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes cardStagger{from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Hero line draws from center */
.hero-line{animation:drawLine 1.2s cubic-bezier(0.25,0.46,0.45,0.94) 0.8s both}

/* Sections fade-slide up with staggered delays */
section.convo{animation:fadeSlideUp 0.8s ease 0.3s both}
section.how{animation:fadeSlideUp 0.8s ease 0.5s both}
section.wink-section{animation:fadeSlideUp 0.8s ease 0.7s both}
section.rev-section{animation:fadeSlideUp 0.8s ease 0.9s both}
section.cta-immersive{animation:fadeSlideUp 0.8s ease 1.1s both}
.review-carousel{animation:fadeSlideUp 0.8s ease 0.8s both}

/* Steps stagger in */
.steps-grid .step:nth-child(1){animation:fadeSlideUp 0.5s ease 0.6s both}
.steps-grid .step:nth-child(2){animation:fadeSlideUp 0.5s ease 0.75s both}
.steps-grid .step:nth-child(3){animation:fadeSlideUp 0.5s ease 0.9s both}
.steps-grid .step:nth-child(4){animation:fadeSlideUp 0.5s ease 1.05s both}

/* Why stats pop in */
.wink-grid>.wink-card:nth-child(1){animation:countFadeIn 0.5s ease 0.8s both}
.wink-grid>.wink-card:nth-child(2){animation:countFadeIn 0.5s ease 0.95s both}
.wink-grid>.wink-card:nth-child(3){animation:countFadeIn 0.5s ease 1.1s both}

/* Product cards stagger */
.prod-grid .prod-card:nth-child(1){animation:cardStagger 0.3s ease 0.3s both}
.prod-grid .prod-card:nth-child(2){animation:cardStagger 0.3s ease 0.35s both}
.prod-grid .prod-card:nth-child(3){animation:cardStagger 0.3s ease 0.4s both}
.prod-grid .prod-card:nth-child(4){animation:cardStagger 0.3s ease 0.45s both}
.prod-grid .prod-card:nth-child(5){animation:cardStagger 0.3s ease 0.5s both}
.prod-grid .prod-card:nth-child(6){animation:cardStagger 0.3s ease 0.55s both}
.prod-grid .prod-card:nth-child(7){animation:cardStagger 0.3s ease 0.6s both}
.prod-grid .prod-card:nth-child(8){animation:cardStagger 0.3s ease 0.65s both}
.prod-grid .prod-card:nth-child(9){animation:cardStagger 0.3s ease 0.7s both}
.prod-grid .prod-card:nth-child(10){animation:cardStagger 0.3s ease 0.75s both}
.prod-grid .prod-card:nth-child(11){animation:cardStagger 0.3s ease 0.8s both}
.prod-grid .prod-card:nth-child(12){animation:cardStagger 0.3s ease 0.85s both}

/* CTA glow breathes */
.cta-glow{animation:ctaGlowPulse 4s ease-in-out infinite alternate}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
*{animation-duration:0.01s!important;animation-delay:0s!important}
}

/* AI COCKPIT */
@keyframes pulseG{0%,100%{opacity:0.4;box-shadow:0 0 4px rgba(46,204,113,0.2)}50%{opacity:1;box-shadow:0 0 12px rgba(46,204,113,0.5)}}
@keyframes ringPrev{to{stroke-dashoffset:102}}
/* Business Score Section */
.biz-score-section{position:relative;padding:100px 32px;overflow:hidden;background:var(--section-alt)}
[data-theme="dark"] .biz-score-section{background:var(--dark)}
[data-theme="dark"] .biz-score-section *{color:var(--cream)}
.biz-score-section .bscore-muted{color:var(--text-caption)}
.biz-score-section .bscore-dim{color:var(--muted)}
.biz-score-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.biz-score-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.bscore-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px}
.bscore-ring-wrap{position:relative;width:220px;height:220px}
.bscore-ring-bg{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.08) 0%,transparent 70%);animation:bscorePulse 4s ease-in-out infinite}
@keyframes bscorePulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.08);opacity:1}}
.bscore-orbit{position:absolute;width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-50%);animation:bscoreOrbitSpin 30s linear infinite}
@keyframes bscoreOrbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.bscore-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;animation:bscoreOrbitSpin 30s linear infinite reverse}
.bscore-node-dot{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;backdrop-filter:blur(8px);border:1px solid var(--border);transition:transform 0.3s,box-shadow 0.3s}
.bscore-node-dot svg{width:55%;height:55%}
.bscore-feat-icon svg{width:16px;height:16px;color:var(--purple)}
.bscore-node:hover .bscore-node-dot{transform:scale(1.15);box-shadow:0 0 20px rgba(142,33,202,0.3)}
.bscore-node-label{font-family:var(--lb);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;color:var(--text-body)}
.bscore-node:nth-child(1){top:0;left:50%}
.bscore-node:nth-child(2){top:19%;left:89%}
.bscore-node:nth-child(3){top:61%;left:99%}
.bscore-node:nth-child(4){top:95%;left:72%}
.bscore-node:nth-child(5){top:95%;left:28%}
.bscore-node:nth-child(6){top:61%;left:1%}
.bscore-node:nth-child(7){top:19%;left:11%}
.bscore-content{position:relative}
.bscore-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold)!important;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.bscore-eyebrow::before{content:'';width:24px;height:1px;background:var(--gold)}
.bscore-h2{font-family:var(--hl);font-size:clamp(32px,4.5vw,52px);font-weight:400;line-height:1.15;margin-bottom:20px;color:var(--text-heading)!important}
.bscore-h2 em{background:linear-gradient(135deg,var(--gold),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bscore-desc{font-size:16px;line-height:1.7;color:var(--text-body)!important;max-width:440px;margin-bottom:32px}
.bscore-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:40px}
.bscore-feat{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-body)!important}
.bscore-feat-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;background:rgba(142,33,202,0.1);flex-shrink:0}
.bscore-cta{font-family:var(--hl);font-size:17px;padding:16px 36px;border-radius:60px;cursor:pointer;background:linear-gradient(135deg,var(--purple),var(--purple));border:none;color:var(--cream);font-weight:600;position:relative;overflow:hidden;transition:transform 0.3s,box-shadow 0.3s}
.bscore-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(142,33,202,0.3)}
.bscore-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transform:translateX(-100%);transition:transform 0.6s}.bscore-cta:hover::after{transform:translateX(100%)}
.bscore-glow-1{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.12),transparent 60%);top:-10%;left:-5%;animation:bscoreFloat1 8s ease-in-out infinite}
.bscore-glow-2{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.08),transparent 60%);bottom:-10%;right:-5%;animation:bscoreFloat2 10s ease-in-out infinite}
.bscore-glow-3{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(37,74,173,0.08),transparent 60%);top:40%;left:40%;animation:bscoreFloat3 12s ease-in-out infinite}
@keyframes bscoreFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}
@keyframes bscoreFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,30px)}}
@keyframes bscoreFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,15px)}}
.bscore-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bscore-line{position:absolute;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.06),transparent);width:1px}
.bscore-line:nth-child(1){left:15%;height:100%;animation:bscoreLineDrift 15s linear infinite}
.bscore-line:nth-child(2){left:35%;height:80%;top:10%;animation:bscoreLineDrift 20s linear infinite 3s}
.bscore-line:nth-child(3){left:55%;height:100%;animation:bscoreLineDrift 18s linear infinite 6s}
.bscore-line:nth-child(4){left:75%;height:70%;top:15%;animation:bscoreLineDrift 22s linear infinite 9s}
.bscore-line:nth-child(5){left:90%;height:90%;top:5%;animation:bscoreLineDrift 16s linear infinite 12s}
@keyframes bscoreLineDrift{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(100%)}}
@keyframes bscoreRingFill{to{stroke-dashoffset:188}}
@media(max-width:900px){
.biz-score-inner{grid-template-columns:1fr;gap:40px;text-align:center}
.bscore-visual{min-height:300px}
.bscore-ring-wrap{width:180px;height:180px}
.bscore-orbit{width:280px;height:280px}
.bscore-features{justify-content:center}
.bscore-desc{margin-left:auto;margin-right:auto}
.bscore-eyebrow{justify-content:center}
}
@media(max-width:640px){
.biz-score-section{padding:72px 20px}
.bscore-visual{min-height:260px}
.bscore-ring-wrap{width:150px;height:150px}
.bscore-orbit{width:240px;height:240px}
.bscore-node-dot{width:32px;height:32px;font-size:14px}
.bscore-node-label{font-size:12px}
.bscore-features{grid-template-columns:1fr}
}
.cmd-chip{font-size:13px;padding:6px 14px;border-radius:60px;border:1px solid var(--border);color:var(--muted);cursor:pointer;background:none;transition:all 0.2s;font-family:var(--bd)}.cmd-chip:hover{border-color:var(--purple);color:var(--cream)}
.qact{background:var(--dark2);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:all 0.3s;box-shadow:var(--shadow-card);overflow:hidden;position:relative}.qact:hover{border-color:rgba(142,33,202,0.2);transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.qact-img{width:100%;height:140px;object-fit:cover;display:block;transition:transform 0.5s ease}.qact:hover .qact-img{transform:scale(1.05)}
.qact-body{padding:14px 16px 16px}
.qact-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:16px;display:none}
.qact-name{font-family:var(--hl);font-size:16px;margin-bottom:4px}
.qact-desc{font-size:13px;color:var(--muted);line-height:1.4}
.ai-bub{background:var(--dark2);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:left;animation:fadeSlideUp 0.4s ease both;box-shadow:var(--shadow-card)}
.ai-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ai-card{padding:14px;border-radius:10px;border:1px solid var(--border);background:rgba(var(--tc),0.02);cursor:pointer;transition:all 0.2s}.ai-card:hover{border-color:var(--purple)}
.ai-card-n{font-family:var(--hl);font-size:15px;margin-bottom:3px}
.ai-card-d{font-size:13px;color:var(--muted)}
.ai-card-p{display:none}
.wiz-opt{padding:14px 18px;border-radius:12px;border:1px solid var(--border);background:rgba(var(--tc),0.02);cursor:pointer;text-align:left;transition:all 0.2s;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.wiz-opt:hover{border-color:rgba(142,33,202,0.2)}.wiz-opt.sel{border-color:var(--purple);background:rgba(142,33,202,0.06)}
.wiz-chk{width:18px;height:18px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;color:transparent;flex-shrink:0}.wiz-opt.sel .wiz-chk{border-color:var(--purple);color:var(--purple)}
.score-rec{padding:14px;border-radius:10px;border:1px solid var(--border);background:rgba(var(--tc),0.02);cursor:pointer;transition:all 0.2s}.score-rec:hover{border-color:var(--purple)}
@media(max-width:900px){.ai-cards{grid-template-columns:1fr}#scoreRecs{grid-template-columns:1fr}}

/* QUOTE MODAL */
.q-overlay{position:fixed;inset:0;z-index:200;background:rgba(243,235,239,0.94);backdrop-filter:blur(24px);display:none;align-items:center;justify-content:center;padding:24px}
.q-overlay.open{display:flex}
.q-panel{width:100%;max-width:460px;border:1px solid var(--border);border-radius:16px;padding:36px;background:var(--dark2);position:relative;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-hover)}
.q-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--lb);font-size:13px;letter-spacing:3px}.q-close:hover{color:var(--cream)}
.q-label{font-family:var(--lb);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--tc),0.70);display:block;margin-bottom:6px}
.q-input{width:100%;font-family:var(--bd);font-size:14px;background:rgba(var(--tc),0.04);border:1px solid var(--border);border-radius:10px;padding:13px 16px;color:var(--cream);outline:none;margin-bottom:14px}.q-input:focus{border-color:var(--purple)}.q-input::placeholder{color:rgba(var(--tc),0.65)}
.q-submit{width:100%;font-family:var(--hl);font-size:16px;padding:14px;border-radius:60px;cursor:pointer;background:linear-gradient(135deg,var(--purple),var(--blue));border:none;color:white;margin-top:4px;transition:opacity 0.2s,transform 0.2s}
.q-submit:disabled{opacity:0.65;cursor:not-allowed;transform:none}
.q-input.error{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(192,57,43,0.15)}
.q-field-error{font-family:var(--lb);font-size:10px;letter-spacing:0.5px;color:var(--red);margin:-10px 0 10px;display:none}
.q-field-error.visible{display:block}
.q-form-error{background:rgba(192,57,43,0.08);border:1px solid rgba(192,57,43,0.25);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:14px;display:none;font-family:var(--bd)}
.q-form-error.visible{display:block}

/* PAGE TRANSITION */
.page-loader{position:fixed;inset:0;z-index:9998;background:var(--dark);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.3s ease;pointer-events:none}
.page-loader.hidden{opacity:0}
.loader-ring{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ AI COCKPIT — FULL IMMERSIVE ═══ */
.cmd-section{position:relative;padding:120px 32px 100px;overflow:hidden;background:var(--section-alt)}
[data-theme="dark"] .cmd-section{background:var(--dark)}
[data-theme="dark"] .cmd-section *{color:var(--cream)}

/* === AMBIENT CANVAS — grid, glows, particles, scan line, data streams === */
.cmdc-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cmdc-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(142,33,202,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(142,33,202,0.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 20%,transparent 70%)}
[data-theme="dark"] .cmdc-grid{background-image:linear-gradient(rgba(142,33,202,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(142,33,202,0.10) 1px,transparent 1px)}
.cmdc-glow-1{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.18),transparent 60%);top:-20%;left:15%;animation:cmdcFloat1 10s ease-in-out infinite}
.cmdc-glow-2{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,74,173,0.12),transparent 60%);bottom:-15%;right:5%;animation:cmdcFloat2 12s ease-in-out infinite}
.cmdc-glow-3{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.06),transparent 60%);top:40%;left:55%;animation:cmdcFloat3 14s ease-in-out infinite}
[data-theme="dark"] .cmdc-glow-1{background:radial-gradient(circle,rgba(142,33,202,0.35),transparent 60%)}
[data-theme="dark"] .cmdc-glow-2{background:radial-gradient(circle,rgba(37,74,173,0.25),transparent 60%)}
[data-theme="dark"] .cmdc-glow-3{background:radial-gradient(circle,rgba(142,33,202,0.15),transparent 60%)}
@keyframes cmdcFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-35px)}}
@keyframes cmdcFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes cmdcFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,-25px)}}

/* Particles */
.cmdc-particles{position:absolute;inset:0}
.cmdc-particle{position:absolute;width:3px;height:3px;border-radius:50%;opacity:0}
.cmdc-particle:nth-child(1){background:rgba(142,33,202,0.7);left:8%;top:18%;animation:cmdcPart 6s ease-in-out infinite}
.cmdc-particle:nth-child(2){background:rgba(37,74,173,0.6);left:25%;top:55%;animation:cmdcPart 8s ease-in-out 1s infinite}
.cmdc-particle:nth-child(3){background:rgba(142,33,202,0.6);left:68%;top:25%;animation:cmdcPart 7s ease-in-out 2s infinite}
.cmdc-particle:nth-child(4){background:rgba(142,33,202,0.5);left:82%;top:65%;animation:cmdcPart 9s ease-in-out 3s infinite}
.cmdc-particle:nth-child(5){background:rgba(46,204,113,0.5);left:48%;top:12%;animation:cmdcPart 10s ease-in-out 4s infinite}
.cmdc-particle:nth-child(6){background:rgba(37,74,173,0.4);left:15%;top:78%;animation:cmdcPart 11s ease-in-out 5s infinite}
.cmdc-particle:nth-child(7){background:rgba(142,33,202,0.4);left:90%;top:35%;animation:cmdcPart 8.5s ease-in-out 2.5s infinite}
.cmdc-particle:nth-child(8){background:rgba(142,33,202,0.3);left:55%;top:85%;animation:cmdcPart 12s ease-in-out 6s infinite}
@keyframes cmdcPart{0%,100%{opacity:0;transform:translateY(0) scale(1)}25%{opacity:0.9;transform:translateY(-25px) scale(1.8)}50%{opacity:0.3;transform:translateY(-50px) scale(1)}75%{opacity:0.7;transform:translateY(-20px) scale(1.4)}}
[data-theme="dark"] .cmdc-particle:nth-child(1){background:rgba(142,33,202,1)}
[data-theme="dark"] .cmdc-particle:nth-child(2){background:rgba(37,74,173,0.9)}
[data-theme="dark"] .cmdc-particle:nth-child(3){background:rgba(142,33,202,0.9)}
[data-theme="dark"] .cmdc-particle:nth-child(4){background:rgba(142,33,202,0.8)}
[data-theme="dark"] .cmdc-particle:nth-child(5){background:rgba(46,204,113,0.8)}
[data-theme="dark"] .cmdc-particle:nth-child(6){background:rgba(37,74,173,0.7)}
[data-theme="dark"] .cmdc-particle:nth-child(7){background:rgba(142,33,202,0.7)}
[data-theme="dark"] .cmdc-particle:nth-child(8){background:rgba(142,33,202,0.6)}
[data-theme="dark"] .cmdc-particle{width:4px;height:4px;box-shadow:0 0 8px currentColor}

/* Horizontal scan line */
.cmdc-scanline{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.3),rgba(37,74,173,0.2),transparent);animation:cmdcScan 6s linear infinite;opacity:0.6}
[data-theme="dark"] .cmdc-scanline{height:1px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.20),rgba(37,74,173,0.12),transparent);opacity:0.35;box-shadow:none}
@keyframes cmdcScan{0%{top:-2px;opacity:0}5%{opacity:0.6}95%{opacity:0.6}100%{top:100%;opacity:0}}

/* Vertical data stream lines */
.cmdc-streams{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cmdc-stream{position:absolute;width:1px;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.08),transparent)}
[data-theme="dark"] .cmdc-stream{width:2px;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.20),transparent);box-shadow:0 0 6px rgba(142,33,202,0.10)}
.cmdc-stream:nth-child(1){left:12%;height:100%;animation:cmdcStreamDrift 14s linear infinite}
.cmdc-stream:nth-child(2){left:28%;height:80%;top:10%;animation:cmdcStreamDrift 18s linear infinite 2s}
.cmdc-stream:nth-child(3){left:52%;height:100%;animation:cmdcStreamDrift 16s linear infinite 4s}
.cmdc-stream:nth-child(4){left:72%;height:70%;top:15%;animation:cmdcStreamDrift 20s linear infinite 6s}
.cmdc-stream:nth-child(5){left:88%;height:90%;top:5%;animation:cmdcStreamDrift 15s linear infinite 8s}
@keyframes cmdcStreamDrift{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(100%)}}

/* === RADAR PULSE — visual centerpiece behind the input === */
.cmdc-radar{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:520px;height:520px;pointer-events:none}
.cmdc-radar-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(142,33,202,0.06)}
.cmdc-radar-ring:nth-child(1){inset:30%}
.cmdc-radar-ring:nth-child(2){inset:15%}
.cmdc-radar-ring:nth-child(3){inset:0}
.cmdc-radar-pulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(142,33,202,0.25);animation:cmdcRadarPulse 4s ease-out infinite;opacity:0}
.cmdc-radar-pulse:nth-child(5){animation-delay:2s}
@keyframes cmdcRadarPulse{0%{transform:scale(0.3);opacity:0.8}100%{transform:scale(1.2);opacity:0}}
.cmdc-radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(142,33,202,0.08) 40deg,transparent 80deg);animation:cmdcSweep 6s linear infinite}
@keyframes cmdcSweep{to{transform:rotate(360deg)}}

/* === STATUS BAR — live mission-control feel === */
.cmdc-status-bar{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.cmdc-status-item{display:flex;align-items:center;gap:8px;font-family:var(--lb);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-body)!important}
.cmdc-status-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.cmdc-status-dot.green{background:var(--green);box-shadow:0 0 8px rgba(46,204,113,0.4);animation:cmdcStatusPulse 2s ease-in-out infinite}
.cmdc-status-dot.purple{background:var(--purple);box-shadow:0 0 8px rgba(142,33,202,0.4);animation:cmdcStatusPulse 2.5s ease-in-out infinite 0.5s}
.cmdc-status-dot.gold{background:var(--gold);box-shadow:0 0 8px rgba(142,33,202,0.4);animation:cmdcStatusPulse 3s ease-in-out infinite 1s}
@keyframes cmdcStatusPulse{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}

/* === EYEBROW + TITLE === */
.cmdc-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--purple)!important;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:10px}
.cmdc-eyebrow .cmdc-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseG 2s ease-in-out infinite}
.cmdc-badge,[data-theme="dark"] .cmdc-badge{font-family:var(--lb);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#0A0810!important;background:linear-gradient(135deg,#E8C547,#C58BEB)!important;padding:3px 9px;border-radius:60px;font-weight:700;line-height:1;display:inline-block;margin-left:4px;vertical-align:middle;box-shadow:0 1px 8px rgba(142,33,202,0.3)}
.cmdc-title{font-family:var(--hl);font-size:clamp(32px,5.5vw,58px);font-weight:400;line-height:1.12;margin-bottom:12px;text-align:center;color:var(--text-heading)!important}
.cmdc-title em{background:linear-gradient(129deg,var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cmdc-sub{font-family:var(--hl);font-size:18px;color:var(--text-caption)!important;text-align:center;margin-bottom:40px}

/* === HOLOGRAPHIC INPUT — animated border glow === */
.cmdc-input-outer{position:relative;max-width:660px;margin:0 auto;border-radius:18px;padding:2px;background:linear-gradient(90deg,rgba(142,33,202,0.3),rgba(37,74,173,0.2),rgba(142,33,202,0.15),rgba(142,33,202,0.3));background-size:300% 100%;animation:cmdcHoloBorder 4s linear infinite}
@keyframes cmdcHoloBorder{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.cmdc-input-outer::before{content:'';position:absolute;inset:-1px;border-radius:19px;background:linear-gradient(90deg,rgba(142,33,202,0.15),rgba(37,74,173,0.1),rgba(142,33,202,0.08),rgba(142,33,202,0.15));background-size:300% 100%;animation:cmdcHoloBorder 4s linear infinite;filter:blur(12px);opacity:0.6;z-index:-1}
.cmdc-input-wrap{position:relative;border-radius:16px;background:#fff;backdrop-filter:blur(16px);transition:box-shadow 0.3s}
.cmdc-input-wrap:focus-within{box-shadow:0 0 80px rgba(142,33,202,0.15)}
.cmdc-input-wrap input{width:100%;font-family:var(--bd);font-size:16px;background:none;border:none;color:#1A1218!important;padding:22px 130px 22px 24px;outline:none}
.cmdc-input-wrap input::placeholder{color:rgba(26,18,24,0.42)}
[data-theme="dark"] .cmdc-input-wrap input{color:#1A1218!important}
[data-theme="dark"] .cmdc-input-wrap input::placeholder{color:rgba(26,18,24,0.42)}
.cmdc-go-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--hl);font-size:15px;padding:12px 28px;border-radius:60px;cursor:pointer;background:linear-gradient(135deg,var(--purple),var(--blue));border:none;color:var(--cream)!important;z-index:2;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 2px 16px rgba(142,33,202,0.2)}
.cmdc-go-btn:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 4px 24px rgba(142,33,202,0.4)}

/* === CHIP ROW === */
.cmdc-chips{display:flex;gap:6px;margin-top:16px;justify-content:center;flex-wrap:wrap}
.cmdc-chips .cmd-chip{border-color:var(--border);color:var(--muted)!important;background:rgba(var(--tc),0.03);transition:all 0.25s}
.cmdc-chips .cmd-chip:hover{border-color:rgba(142,33,202,0.4);color:var(--cream)!important;background:rgba(142,33,202,0.08)}
.cmdc-chips .cmd-chip-gold{border-color:rgba(142,33,202,0.2)!important;color:rgba(142,33,202,0.8)!important}
.cmdc-chips .cmd-chip-gold:hover{border-color:rgba(142,33,202,0.5)!important;color:var(--gold)!important}
.cmdc-chips .cmd-chip-purple{border-color:rgba(142,33,202,0.25)!important;background:linear-gradient(135deg,rgba(142,33,202,0.1),transparent)!important;color:rgba(142,33,202,0.8)!important;font-family:var(--hl);font-size:12px!important;font-weight:400}
.cmdc-chips .cmd-chip-purple:hover{color:var(--purple)!important}

/* === BOTTOM CTA (cockpit) === */
.cmdc-fullcta{display:inline-flex;align-items:center;gap:8px;font-family:var(--hl);font-size:15px;color:var(--text-caption)!important;text-decoration:none;transition:color 0.3s;margin-top:48px}
.cmdc-fullcta:hover{color:var(--cream)!important}
.cmdc-fullcta span{display:inline-block;width:28px;height:28px;border-radius:50%;border:1px solid rgba(142,33,202,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;transition:all 0.3s}
.cmdc-fullcta:hover span{border-color:rgba(142,33,202,0.6);background:rgba(142,33,202,0.1);transform:translateX(3px)}

/* === AI COCKPIT RESPONSIVE === */
@media(max-width:900px){
.cmd-section .qact-name{font-size:15px}
.cmdc-radar{width:380px;height:380px}
.cmdc-status-bar{gap:16px}
}
@media(max-width:640px){
.cmd-section{padding:70px 16px 60px!important}
.cmdc-title{font-size:clamp(24px,7vw,36px)!important}
.cmdc-radar{width:280px;height:280px;top:38%}
.cmd-chip{font-size:13px;padding:5px 12px}
.ai-bub{padding:16px}
.ai-cards{grid-template-columns:1fr!important}
.ai-card{padding:12px}
.cmdc-status-bar{gap:12px}
.cmdc-status-item{font-size:12px;letter-spacing:1.5px}
}
@media(max-width:420px){
.cmdc-radar{display:none}
}

/* ═══ HOW IT WORKS — IMMERSIVE SECTION ═══ */
.hiw-section{position:relative;padding:120px 32px;overflow:hidden;background:var(--dark)}
[data-theme="dark"] .hiw-section{background:linear-gradient(180deg,var(--dark) 0%,var(--dark) 50%,var(--dark) 100%)}
[data-theme="dark"] .hiw-section *{color:var(--cream)}

/* Ambient */
.hiw-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hiw-glow-1{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.12),transparent 55%);top:-20%;left:-10%;animation:hiwFloat1 11s ease-in-out infinite}
.hiw-glow-2{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,74,173,0.08),transparent 55%);bottom:-15%;right:-5%;animation:hiwFloat2 13s ease-in-out infinite}
.hiw-glow-3{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.05),transparent 55%);top:50%;left:50%;transform:translate(-50%,-50%);animation:hiwFloat3 15s ease-in-out infinite}
@keyframes hiwFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(35px,-25px)}}
@keyframes hiwFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,20px)}}
@keyframes hiwFloat3{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 20px),calc(-50% - 15px))}}

/* Subtle grid */
.hiw-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(142,33,202,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(142,33,202,0.025) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black 20%,transparent 70%)}

/* Drifting vertical lines */
.hiw-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hiw-line{position:absolute;width:1px;background:linear-gradient(180deg,transparent,rgba(142,33,202,0.06),transparent)}
.hiw-line:nth-child(1){left:18%;height:100%;animation:hiwLineDrift 16s linear infinite}
.hiw-line:nth-child(2){left:42%;height:80%;top:10%;animation:hiwLineDrift 20s linear infinite 3s}
.hiw-line:nth-child(3){left:65%;height:100%;animation:hiwLineDrift 18s linear infinite 6s}
.hiw-line:nth-child(4){left:85%;height:70%;top:20%;animation:hiwLineDrift 22s linear infinite 9s}
@keyframes hiwLineDrift{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(100%)}}

/* Header */
.hiw-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--purple)!important;margin-bottom:16px;text-align:center;display:flex;align-items:center;justify-content:center;gap:12px}
.hiw-eyebrow::before,.hiw-eyebrow::after{content:'';width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.5))}
.hiw-eyebrow::after{background:linear-gradient(90deg,rgba(142,33,202,0.3),transparent)}
.hiw-title{font-family:var(--hl);font-size:clamp(28px,4.5vw,52px);font-weight:400;line-height:1.15;margin-bottom:12px;text-align:center;color:var(--text-heading)!important}
.hiw-title em{background:linear-gradient(135deg,var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hiw-subtitle{font-family:var(--hl);font-size:17px;color:var(--text-caption)!important;text-align:center;margin-bottom:80px;max-width:480px;margin-left:auto;margin-right:auto}

/* Timeline wrapper — holds both connector and grid */
.hiw-timeline-wrap{position:relative;max-width:1100px;margin:0 auto}

/* Central vertical connector — positioned in wrapper, outside grid */
.hiw-connector{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(142,33,202,0.15) 10%,rgba(142,33,202,0.15) 90%,transparent);z-index:1}
.hiw-connector::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:rgba(142,33,202,0.4);box-shadow:0 0 12px rgba(142,33,202,0.3)}
.hiw-connector::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:rgba(142,33,202,0.4);box-shadow:0 0 12px rgba(142,33,202,0.3)}

/* Timeline grid — only contains .hiw-step children */
.hiw-timeline{display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative;z-index:2}

/* Step cards — alternating sides (now nth-child works correctly) */
.hiw-step{position:relative;padding:40px}
.hiw-step:nth-child(odd){grid-column:1;grid-row:auto;text-align:right;padding-right:60px}
.hiw-step:nth-child(even){grid-column:2;grid-row:auto;text-align:left;padding-left:60px}
/* Explicit grid rows so each step gets its own row */
.hiw-step:nth-child(1){grid-row:1}
.hiw-step:nth-child(2){grid-row:2}
.hiw-step:nth-child(3){grid-row:3}
.hiw-step:nth-child(4){grid-row:4}

/* Node on the timeline */
.hiw-node{position:absolute;top:48px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--lb);font-size:12px;font-weight:700;letter-spacing:1px;border:2px solid rgba(142,33,202,0.3);background:rgba(243,235,239,0.9);backdrop-filter:blur(8px);z-index:2;transition:all 0.4s}
.hiw-step:nth-child(odd) .hiw-node{right:-22px}
.hiw-step:nth-child(even) .hiw-node{left:-22px}
.hiw-step:hover .hiw-node{border-color:rgba(142,33,202,0.7);box-shadow:0 0 24px rgba(142,33,202,0.2);transform:scale(1.1)}

/* Number color */
.hiw-node-num{color:rgba(142,33,202,0.8)!important;transition:color 0.3s}
.hiw-step:hover .hiw-node-num{color:var(--purple)!important}

/* Step card inner */
.hiw-card{padding:32px;border-radius:16px;border:1px solid var(--border);background:rgba(var(--tc),0.02);backdrop-filter:blur(8px);transition:all 0.4s}
.hiw-step:hover .hiw-card{border-color:rgba(142,33,202,0.2);background:rgba(var(--tc),0.04);box-shadow:0 12px 40px rgba(142,33,202,0.08)}

/* Step icon */
.hiw-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(142,33,202,0.08);border:1px solid rgba(142,33,202,0.12);margin-bottom:20px;transition:all 0.4s}
.hiw-step:nth-child(odd) .hiw-icon{margin-left:auto}
.hiw-step:hover .hiw-icon{background:rgba(142,33,202,0.15);border-color:rgba(142,33,202,0.3);transform:scale(1.05)}

/* Step text */
.hiw-step-title{font-family:var(--hl);font-size:22px;font-weight:400;margin-bottom:10px;color:var(--text-heading)!important}
.hiw-step-desc{font-size:15px;color:var(--text-body)!important;line-height:1.7}

/* Step accent line */
.hiw-accent{width:24px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(142,33,202,0.4),rgba(37,74,173,0.2));margin-bottom:16px;transition:width 0.4s}
.hiw-step:nth-child(odd) .hiw-accent{margin-left:auto}
.hiw-step:hover .hiw-accent{width:48px;background:linear-gradient(90deg,var(--purple),var(--blue))}

/* Stagger entrance */
.hiw-step:nth-child(1){animation:hiwStepIn 0.6s ease 0.1s both}
.hiw-step:nth-child(2){animation:hiwStepIn 0.6s ease 0.3s both}
.hiw-step:nth-child(3){animation:hiwStepIn 0.6s ease 0.5s both}
.hiw-step:nth-child(4){animation:hiwStepIn 0.6s ease 0.7s both}
@keyframes hiwStepIn{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media(max-width:900px){
.hiw-timeline{grid-template-columns:1fr;padding-left:40px}
.hiw-timeline-wrap{padding-left:0}
.hiw-connector{left:20px}
.hiw-step:nth-child(odd),.hiw-step:nth-child(even){grid-column:1;text-align:left;padding:24px 24px 24px 40px}
.hiw-step:nth-child(odd) .hiw-node,.hiw-step:nth-child(even) .hiw-node{left:-42px;right:auto}
.hiw-step:nth-child(odd) .hiw-icon{margin-left:0}
.hiw-step:nth-child(odd) .hiw-accent{margin-left:0}
}
@media(max-width:640px){
.hiw-section{padding:72px 16px}
.hiw-timeline{padding-left:30px}
.hiw-connector{left:14px}
.hiw-step:nth-child(odd),.hiw-step:nth-child(even){padding:20px 16px 20px 32px}
.hiw-step:nth-child(odd) .hiw-node,.hiw-step:nth-child(even) .hiw-node{left:-36px;width:36px;height:36px;font-size:13px}
.hiw-card{padding:24px}
.hiw-icon{width:40px;height:40px;font-size:18px}
.hiw-step-title{font-size:19px}
.hiw-step-desc{font-size:14px}
}

/* ═══ WHY INKGILITY — FULL IMMERSIVE SECTION ═══ */
.wink-section{position:relative;overflow:hidden;background:var(--section-alt);padding:120px 32px 100px}
[data-theme="dark"] .wink-section{background:linear-gradient(180deg,var(--dark),var(--dark),var(--dark))}
[data-theme="dark"] .wink-section,[data-theme="dark"] .wink-section *{color:var(--cream)}

/* Ambient canvas */
.wink-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wink-canvas .wg{position:absolute;border-radius:50%;filter:blur(100px);opacity:0;animation:winkGlowDrift 12s ease-in-out infinite}
.wink-canvas .wg1{width:500px;height:500px;background:radial-gradient(circle,rgba(142,33,202,0.12),transparent 70%);top:10%;left:10%;animation-delay:0s}
.wink-canvas .wg2{width:400px;height:400px;background:radial-gradient(circle,rgba(142,33,202,0.08),transparent 70%);bottom:15%;right:10%;animation-delay:4s}
.wink-canvas .wg3{width:350px;height:350px;background:radial-gradient(circle,rgba(37,74,173,0.10),transparent 70%);top:50%;left:55%;animation-delay:8s}
@keyframes winkGlowDrift{0%,100%{opacity:0;transform:translate(0,0) scale(0.9)}50%{opacity:1;transform:translate(20px,-15px) scale(1.1)}}

/* Grid pattern */
.wink-bg-grid{position:absolute;inset:0;opacity:0.04;background-image:linear-gradient(rgba(var(--tc),0.3) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--tc),0.3) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,0,0,0.6),transparent);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,0,0,0.6),transparent)}

/* Floating hex shapes */
.wink-hex{position:absolute;width:60px;height:60px;border:1px solid rgba(142,33,202,0.08);border-radius:12px;transform:rotate(45deg);opacity:0;animation:winkHexFloat 18s ease-in-out infinite}
.wink-hex:nth-child(1){top:8%;left:5%;animation-delay:0s;width:40px;height:40px}
.wink-hex:nth-child(2){top:25%;right:8%;animation-delay:3s;border-color:rgba(142,33,202,0.08);width:50px;height:50px}
.wink-hex:nth-child(3){bottom:20%;left:12%;animation-delay:6s;border-color:rgba(37,74,173,0.08)}
.wink-hex:nth-child(4){bottom:10%;right:15%;animation-delay:9s;width:35px;height:35px}
.wink-hex:nth-child(5){top:60%;left:40%;animation-delay:12s;width:45px;height:45px;border-color:rgba(142,33,202,0.06)}
@keyframes winkHexFloat{0%,100%{opacity:0;transform:rotate(45deg) translate(0,0)}25%{opacity:0.6}50%{opacity:0.8;transform:rotate(45deg) translate(10px,-20px)}75%{opacity:0.4}100%{opacity:0;transform:rotate(45deg) translate(-5px,15px)}}

/* Horizontal beam */
.wink-beam{position:absolute;top:50%;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.06) 30%,rgba(142,33,202,0.04) 50%,rgba(37,74,173,0.06) 70%,transparent);opacity:0.5}

/* Particles */
.wink-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(142,33,202,0.4);animation:winkParticleDrift 10s linear infinite;opacity:0}
.wink-particle:nth-child(1){top:15%;left:20%;animation-delay:0s}
.wink-particle:nth-child(2){top:35%;left:75%;animation-delay:2s;background:rgba(142,33,202,0.4)}
.wink-particle:nth-child(3){top:65%;left:30%;animation-delay:4s;background:rgba(37,74,173,0.4)}
.wink-particle:nth-child(4){top:80%;left:60%;animation-delay:6s}
.wink-particle:nth-child(5){top:45%;left:85%;animation-delay:8s;background:rgba(142,33,202,0.3)}
.wink-particle:nth-child(6){top:20%;left:50%;animation-delay:1s;background:rgba(37,74,173,0.3)}
@keyframes winkParticleDrift{0%{opacity:0;transform:translateY(0)}20%{opacity:0.8}80%{opacity:0.6}100%{opacity:0;transform:translateY(-60px)}}

/* Section header */
.wink-eyebrow{font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-dark)!important;text-align:center;margin-bottom:16px}
.wink-title{font-family:var(--hl);font-size:clamp(32px,5vw,56px);text-align:center;line-height:1.15;margin-bottom:16px;color:var(--text-heading)!important}
.wink-title em{background:linear-gradient(135deg,var(--purple),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.wink-subtitle{font-family:var(--hl);font-size:17px;color:var(--text-caption)!important;text-align:center;margin-bottom:80px;max-width:560px;margin-left:auto;margin-right:auto}

/* Stats grid */
.wink-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1100px;margin:0 auto}

/* Stat card */
.wink-card{position:relative;padding:48px 32px 40px;border-radius:24px;background:rgba(var(--tc),0.02);border:1px solid var(--border);backdrop-filter:blur(12px);text-align:center;transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);overflow:hidden}
.wink-card::before{content:'';position:absolute;inset:0;border-radius:24px;background:radial-gradient(ellipse 300px 200px at 50% 0%,var(--card-glow),transparent 70%);opacity:0;transition:opacity 0.5s}
.wink-card:hover{transform:translateY(-6px);border-color:var(--card-accent);box-shadow:0 20px 60px var(--card-shadow)}
.wink-card:hover::before{opacity:1}

/* Top accent line */
.wink-card-line{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:80px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,transparent,var(--card-accent),transparent);transition:width 0.4s}
.wink-card:hover .wink-card-line{width:120px}

/* Ring visual */
.wink-ring-wrap{width:120px;height:120px;margin:0 auto 24px;position:relative}
.wink-ring-bg{fill:none;stroke:rgba(var(--tc),0.04);stroke-width:3}
.wink-ring-fg{fill:none;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 10px var(--card-shadow));animation:winkRingSpin 6s linear infinite}
.wink-ring-pulse{fill:none;stroke:var(--card-accent);stroke-width:1.5;opacity:0;animation:winkRingPulse 2.5s ease-out infinite}
@keyframes winkRingPulse{0%{r:50;opacity:0.5;stroke-width:1.5}100%{r:58;opacity:0;stroke-width:0.5}}
@keyframes winkRingSpin{0%{stroke-dashoffset:var(--ring-offset,63)}25%{stroke-dashoffset:calc(var(--ring-offset,63) + 80)}50%{stroke-dashoffset:var(--ring-offset,63)}75%{stroke-dashoffset:calc(var(--ring-offset,63) - 80)}100%{stroke-dashoffset:var(--ring-offset,63)}}
@keyframes winkRingRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Entire SVG wrapper slow rotation */
.wink-ring-wrap svg{animation:winkWrapSpin 20s linear infinite}
.wink-card:nth-child(2) .wink-ring-wrap svg{animation-direction:reverse;animation-duration:25s}
.wink-card:nth-child(3) .wink-ring-wrap svg{animation-duration:22s}
@keyframes winkWrapSpin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}

/* Number in ring */
.wink-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--hl);font-size:42px;font-weight:400}
.wink-num-val{transition:color 0.3s}

/* Card text */
.wink-card-title{font-family:var(--bd);font-size:17px;font-weight:600;color:var(--text-heading)!important;margin-bottom:10px}
.wink-card-desc{font-size:14px;color:var(--text-caption)!important;line-height:1.7;max-width:260px;margin:0 auto}

/* Card micro-detail: corner dots */
.wink-corner{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--card-accent);opacity:0;transition:opacity 0.4s}
.wink-card:hover .wink-corner{opacity:0.4}
.wink-corner.tl{top:16px;left:16px}
.wink-corner.tr{top:16px;right:16px}
.wink-corner.bl{bottom:16px;left:16px}
.wink-corner.br{bottom:16px;right:16px}

/* Stagger entrance */
.wink-card:nth-child(1){animation:winkCardIn 0.6s ease 0.2s both}
.wink-card:nth-child(2){animation:winkCardIn 0.6s ease 0.4s both}
.wink-card:nth-child(3){animation:winkCardIn 0.6s ease 0.6s both}
@keyframes winkCardIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Card color themes */
.wink-card.gold{--card-accent:rgba(142,33,202,0.5);--card-glow:rgba(142,33,202,0.06);--card-shadow:rgba(142,33,202,0.12)}
[data-theme="dark"] .wink-card.gold{--card-accent:rgba(142,33,202,0.5);--card-glow:rgba(142,33,202,0.06);--card-shadow:rgba(142,33,202,0.12)}
.wink-card.gold .wink-ring-fg{stroke:var(--gold)}
.wink-card.gold .wink-num-val{color:var(--gold)!important}
.wink-card.gold .wink-ring-pulse{stroke:var(--gold)}

.wink-card.purple{--card-accent:rgba(142,33,202,0.5);--card-glow:rgba(142,33,202,0.06);--card-shadow:rgba(142,33,202,0.12)}
.wink-card.purple .wink-ring-fg{stroke:var(--purple)}
.wink-card.purple .wink-num-val{color:var(--purple)!important}
.wink-card.purple .wink-ring-pulse{stroke:var(--purple)}

.wink-card.blue{--card-accent:rgba(37,74,173,0.5);--card-glow:rgba(37,74,173,0.06);--card-shadow:rgba(37,74,173,0.12)}
.wink-card.blue .wink-ring-fg{stroke:var(--blue)}
.wink-card.blue .wink-num-val{color:var(--blue)!important}
.wink-card.blue .wink-ring-pulse{stroke:var(--blue)}

/* Bottom tagline */
.wink-bottom{text-align:center;margin-top:64px}
.wink-bottom-text{font-family:var(--lb);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)!important}

/* Responsive */
@media(max-width:900px){
.wink-grid{grid-template-columns:1fr;max-width:420px}
.wink-section{padding:80px 24px 72px}
}
@media(max-width:640px){
.wink-section{padding:64px 16px 56px}
.wink-card{padding:36px 24px 32px}
.wink-ring-wrap{width:100px;height:100px}
.wink-num{font-size:36px}
.wink-subtitle{margin-bottom:48px}
}

/* ═══ WHAT BUSINESSES SAY — FULL IMMERSIVE SECTION ═══ */
.rev-section{position:relative;overflow:hidden;background:var(--dark);padding:120px 32px 100px}
[data-theme="dark"] .rev-section{background:linear-gradient(180deg,var(--dark),var(--dark),var(--dark))}
[data-theme="dark"] .rev-section,[data-theme="dark"] .rev-section *{color:var(--cream)}

/* Ambient canvas */
.rev-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rev-canvas .rg{position:absolute;border-radius:50%;filter:blur(110px);opacity:0;animation:revGlowDrift 14s ease-in-out infinite}
.rev-canvas .rg1{width:450px;height:450px;background:radial-gradient(circle,rgba(142,33,202,0.12),transparent 70%);top:20%;right:10%;animation-delay:0s}
.rev-canvas .rg2{width:400px;height:400px;background:radial-gradient(circle,rgba(142,33,202,0.10),transparent 70%);bottom:10%;left:15%;animation-delay:5s}
[data-theme="dark"] .rev-canvas .rg1{background:radial-gradient(circle,rgba(142,33,202,0.18),transparent 70%)}
[data-theme="dark"] .rev-canvas .rg2{background:radial-gradient(circle,rgba(142,33,202,0.15),transparent 70%)}
@keyframes revGlowDrift{0%,100%{opacity:0;transform:translate(0,0) scale(0.9)}50%{opacity:1;transform:translate(-15px,10px) scale(1.1)}}

/* Grid pattern */
.rev-bg-grid{position:absolute;inset:0;opacity:0.08;background-image:linear-gradient(rgba(var(--tc),0.3) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--tc),0.3) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(0,0,0,0.6),transparent);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(0,0,0,0.6),transparent)}
[data-theme="dark"] .rev-bg-grid{opacity:0.15}
/* Animated sweeping lines for reviews section */
.rev-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.rev-h-line{position:absolute;left:-10%;width:120%;height:2px;opacity:0}
.rev-h-line-1{top:30%;background:linear-gradient(90deg,transparent 0%,rgba(142,33,202,0.25) 30%,rgba(142,33,202,0.20) 60%,transparent 100%);animation:hLineSlide 9s linear infinite;filter:blur(0.5px)}
.rev-h-line-2{top:70%;background:linear-gradient(90deg,transparent 0%,rgba(142,33,202,0.20) 40%,rgba(37,74,173,0.15) 70%,transparent 100%);animation:hLineSlide 12s linear 3s infinite;filter:blur(0.5px)}
.rev-v-line{position:absolute;top:-10%;height:120%;width:2px;opacity:0}
.rev-v-line-1{left:25%;background:linear-gradient(180deg,transparent 0%,rgba(142,33,202,0.20) 35%,rgba(142,33,202,0.15) 65%,transparent 100%);animation:vLineSlide 11s linear 2s infinite;filter:blur(0.5px)}
.rev-v-line-2{left:75%;background:linear-gradient(180deg,transparent 0%,rgba(142,33,202,0.18) 30%,rgba(142,33,202,0.12) 70%,transparent 100%);animation:vLineSlide 8s linear 5s infinite;filter:blur(0.5px)}
[data-theme="dark"] .rev-h-line-1{background:linear-gradient(90deg,transparent 0%,rgba(142,33,202,0.35) 30%,rgba(142,33,202,0.30) 60%,transparent 100%)}
[data-theme="dark"] .rev-h-line-2{background:linear-gradient(90deg,transparent 0%,rgba(142,33,202,0.30) 40%,rgba(37,74,173,0.25) 70%,transparent 100%)}
[data-theme="dark"] .rev-v-line-1{background:linear-gradient(180deg,transparent 0%,rgba(142,33,202,0.30) 35%,rgba(142,33,202,0.25) 65%,transparent 100%)}
[data-theme="dark"] .rev-v-line-2{background:linear-gradient(180deg,transparent 0%,rgba(142,33,202,0.28) 30%,rgba(142,33,202,0.18) 70%,transparent 100%)}
/* Dot pulses at line intersections */
.rev-lines::before,.rev-lines::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;opacity:0;filter:blur(1px)}
.rev-lines::before{top:30%;left:25%;background:var(--gold);animation:dotPulse 10s ease-in-out 3s infinite;box-shadow:0 0 16px rgba(142,33,202,0.4),0 0 32px rgba(142,33,202,0.2)}
.rev-lines::after{top:70%;left:75%;background:var(--purple);animation:dotPulse 12s ease-in-out 6s infinite;box-shadow:0 0 16px rgba(142,33,202,0.4),0 0 32px rgba(142,33,202,0.2)}

/* Floating quote marks */
.rev-float-q{position:absolute;font-family:var(--hl);font-size:200px;line-height:1;color:rgba(142,33,202,0.03)!important;pointer-events:none;animation:revQFloat 20s ease-in-out infinite}
.rev-float-q.q1{top:5%;left:5%;animation-delay:0s}
.rev-float-q.q2{bottom:5%;right:5%;transform:rotate(180deg);animation-delay:10s;color:rgba(142,33,202,0.03)!important}
@keyframes revQFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.rev-float-q.q2{animation-name:revQFloat2}
@keyframes revQFloat2{0%,100%{transform:rotate(180deg) translateY(0)}50%{transform:rotate(180deg) translateY(-15px)}}

/* Drifting stars */
.rev-star{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(142,33,202,0.3);animation:revStarPulse 4s ease-in-out infinite}
.rev-star:nth-child(1){top:12%;left:20%;animation-delay:0s}
.rev-star:nth-child(2){top:30%;right:18%;animation-delay:1s;background:rgba(142,33,202,0.3)}
.rev-star:nth-child(3){bottom:25%;left:35%;animation-delay:2s}
.rev-star:nth-child(4){top:60%;right:30%;animation-delay:3s;background:rgba(37,74,173,0.3)}
.rev-star:nth-child(5){bottom:15%;right:12%;animation-delay:0.5s}
.rev-star:nth-child(6){top:45%;left:8%;animation-delay:1.5s;background:rgba(142,33,202,0.25)}
@keyframes revStarPulse{0%,100%{opacity:0.2;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* Eyebrow */
.rev-eyebrow{font-family:var(--lb);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-dark)!important;text-align:center;margin-bottom:20px}
.rev-rating-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--tc),0.04);border:1px solid rgba(var(--tc),0.08);border-radius:40px;padding:8px 18px;margin-bottom:36px;font-family:var(--bd)}
.rev-rating-stars{color:#FBBC05;font-size:13px;letter-spacing:2px}
.rev-rating-score{font-size:14px;font-weight:600;color:rgba(var(--tc),0.85)}
.rev-rating-sep{color:rgba(var(--tc),0.25);font-size:13px}
.rev-tp-icon{width:16px;height:15px;flex-shrink:0}
.rev-tp-label{font-family:var(--lb);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(var(--tc),0.40)}

/* Review card container */
.rev-carousel-wrap{position:relative;max-width:750px;margin:0 auto;padding:48px 40px;border-radius:24px;background:rgba(var(--tc),0.02);border:1px solid var(--border);backdrop-filter:blur(12px)}
.rev-carousel-wrap::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:100px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.4),transparent)}

/* Override review styles for immersive */
.rev-section .review-quote-mark{color:rgba(142,33,202,0.25)!important}
.rev-section .review-text{color:var(--text-heading)!important;}
.rev-section .review-stars{color:var(--gold)!important}
.rev-section .review-name{color:var(--text-heading)!important}
.rev-section .review-biz{color:var(--text-caption)!important}
.rev-section .review-dot{background:var(--dim);border:none}
.rev-section .review-dot:hover{background:rgba(var(--tc),0.15)}
.rev-section .review-dot.active{background:var(--gold);box-shadow:0 0 20px rgba(142,33,202,0.5)}

/* Responsive */
@media(max-width:900px){.rev-section{padding:80px 24px 72px}.rev-carousel-wrap{padding:32px 24px}}
@media(max-width:640px){.rev-section{padding:64px 16px 56px}.rev-carousel-wrap{padding:24px 16px}}

/* ═══ CTA — FULL IMMERSIVE SECTION ═══ */
.cta-immersive{position:relative;overflow:hidden;background:var(--section-alt);padding:140px 32px;min-height:70vh;display:flex;align-items:center;justify-content:center}
[data-theme="dark"] .cta-immersive{background:linear-gradient(180deg,var(--dark),var(--dark),var(--dark))}
[data-theme="dark"] .cta-immersive,[data-theme="dark"] .cta-immersive *{color:var(--cream)}

/* Canvas */
.cta-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cta-canvas .cg{position:absolute;border-radius:50%;filter:blur(120px);opacity:0;animation:ctaGlowFloat 16s ease-in-out infinite}
.cta-canvas .cg1{width:600px;height:600px;background:radial-gradient(circle,rgba(142,33,202,0.15),transparent 70%);top:30%;left:20%;animation-delay:0s}
.cta-canvas .cg2{width:500px;height:500px;background:radial-gradient(circle,rgba(142,33,202,0.08),transparent 70%);bottom:20%;right:15%;animation-delay:5s}
.cta-canvas .cg3{width:400px;height:400px;background:radial-gradient(circle,rgba(37,74,173,0.10),transparent 70%);top:10%;right:30%;animation-delay:10s}
@keyframes ctaGlowFloat{0%,100%{opacity:0;transform:translate(0,0) scale(0.85)}50%{opacity:1;transform:translate(15px,-10px) scale(1.15)}}

/* Concentric rings */
.cta-ring-outer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.cta-ring-outer .cr{border-radius:50%;border:1px solid rgba(142,33,202,0.06);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.cta-ring-outer .cr1{width:300px;height:300px;animation:ctaRingSpin 30s linear infinite}
.cta-ring-outer .cr2{width:450px;height:450px;border-color:rgba(142,33,202,0.04);animation:ctaRingSpin 45s linear infinite reverse}
.cta-ring-outer .cr3{width:600px;height:600px;border-color:rgba(37,74,173,0.03);animation:ctaRingSpin 60s linear infinite}
@keyframes ctaRingSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Ring dots */
.cta-ring-outer .cr::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:rgba(142,33,202,0.3)}
.cta-ring-outer .cr2::before{background:rgba(142,33,202,0.25)}
.cta-ring-outer .cr3::before{background:rgba(37,74,173,0.2)}

/* Scan line */
.cta-scan{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.06),transparent);animation:ctaScan 8s linear infinite}
@keyframes ctaScan{0%{top:0}100%{top:100%}}

/* Particles */
.cta-p{position:absolute;width:2px;height:2px;border-radius:50%;animation:ctaPFloat 12s linear infinite;opacity:0}
.cta-p:nth-child(1){background:rgba(142,33,202,0.4);top:20%;left:15%;animation-delay:0s}
.cta-p:nth-child(2){background:rgba(142,33,202,0.3);top:40%;right:20%;animation-delay:2s}
.cta-p:nth-child(3){background:rgba(37,74,173,0.4);bottom:30%;left:40%;animation-delay:4s}
.cta-p:nth-child(4){background:rgba(142,33,202,0.3);top:60%;right:35%;animation-delay:6s}
.cta-p:nth-child(5){background:rgba(142,33,202,0.3);bottom:20%;left:25%;animation-delay:8s}
.cta-p:nth-child(6){background:rgba(37,74,173,0.3);top:15%;right:10%;animation-delay:3s}
.cta-p:nth-child(7){background:rgba(142,33,202,0.25);bottom:40%;right:45%;animation-delay:7s}
.cta-p:nth-child(8){background:rgba(142,33,202,0.25);top:70%;left:60%;animation-delay:1s}
@keyframes ctaPFloat{0%{opacity:0;transform:translateY(0) scale(1)}25%{opacity:0.8}75%{opacity:0.5}100%{opacity:0;transform:translateY(-80px) scale(0.5)}}

/* CTA content */
.cta-im-inner{text-align:center;max-width:700px;position:relative;z-index:2}
.cta-im-headline{font-family:var(--hl);font-size:clamp(36px,6vw,72px);line-height:1.1;margin-bottom:20px;color:var(--text-heading)!important}
.cta-im-highlight{background:linear-gradient(135deg,var(--purple),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-im-sub{font-size:17px;color:var(--text-caption)!important;line-height:1.7;margin-bottom:48px;max-width:500px;margin-left:auto;margin-right:auto}
.cta-im-btn{font-family:var(--hl);font-size:18px;padding:22px 60px;border-radius:60px;cursor:pointer;border:1.5px solid rgba(142,33,202,0.3);background:transparent;color:var(--cream)!important;transition:all 0.4s;position:relative;overflow:hidden}
.cta-im-btn::before{content:'';position:absolute;inset:0;border-radius:60px;background:linear-gradient(135deg,rgba(142,33,202,0.08),rgba(142,33,202,0.05));opacity:0;transition:opacity 0.4s}
.cta-im-btn:hover{border-color:var(--gold);background:var(--gold);color:var(--cream)!important;transform:translateY(-2px);box-shadow:0 12px 40px rgba(142,33,202,0.2)}
.cta-im-btn:hover::before{opacity:1}

/* Responsive */
@media(max-width:900px){.cta-immersive{padding:100px 24px;min-height:50vh}}
@media(max-width:640px){.cta-immersive{padding:80px 16px;min-height:40vh}.cta-im-btn{font-size:16px;padding:18px 44px}.cta-im-headline{font-size:clamp(28px,7vw,48px)!important}}

/* ═══ FOOTER — FULL IMMERSIVE ═══ */
/* ═══ PRE-FOOTER CTA BAND ═══ */
.prefooter{position:relative;overflow:hidden;background:var(--section-alt);padding:120px 32px;display:flex;align-items:center;justify-content:center;text-align:center;border-top:1px solid var(--border)}
[data-theme="dark"] .prefooter{background:linear-gradient(180deg,var(--dark),var(--dark),var(--dark))}
.prefooter-inner{max-width:700px;margin:0 auto;position:relative;z-index:2}
.prefooter-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:rgba(var(--tc),0.40);margin-bottom:24px}
.prefooter-headline{font-family:var(--hl);font-weight:400;font-size:clamp(36px,5.5vw,72px);color:var(--text-heading);line-height:1.12;margin-bottom:20px}
.prefooter-sub{font-family:var(--bd);font-size:16px;color:rgba(var(--tc),0.55);line-height:1.6;margin-bottom:40px;max-width:480px;margin-left:auto;margin-right:auto}
.prefooter-cta,html body .prefooter-cta{display:inline-flex!important;align-items:center;gap:10px;font-family:var(--hl);font-size:18px;padding:22px 60px;border-radius:60px;border:none!important;background:linear-gradient(129deg,#8E21CA,#254AAD)!important;color:#fff!important;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s,filter 0.3s;text-decoration:none;box-shadow:0 8px 24px rgba(142,33,202,0.30)!important}
.prefooter-cta:hover,html body .prefooter-cta:hover{transform:translateY(-2px)!important;box-shadow:0 18px 50px rgba(142,33,202,0.45)!important;filter:brightness(1.08)!important;background:linear-gradient(129deg,#9B3FD4,#3A5BC7)!important}
@media(max-width:640px){.prefooter{padding:64px 24px 48px;min-height:auto}.prefooter-headline{font-size:clamp(28px,8vw,42px)}.prefooter-sub{margin-bottom:28px}.prefooter-trust-signal{margin-top:12px}}

/* ═══ FAQ — pre-footer accordion ═══ */
.faq-section{position:relative;background:var(--section-alt);padding:120px 32px 100px;border-top:1px solid var(--border);overflow:hidden}
[data-theme="dark"] .faq-section{background:var(--dark)}
.faq-inner{max-width:880px;margin:0 auto;position:relative;z-index:2}
.faq-head{text-align:center;margin-bottom:56px}
.faq-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:rgba(var(--tc),0.40);margin-bottom:18px}
.faq-h2{font-family:var(--hl);font-weight:400;font-size:clamp(34px,5vw,58px);color:var(--text-heading);line-height:1.15;margin-bottom:14px}
.faq-h2 em{background:linear-gradient(129deg,#8E21CA,#254AAD);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.faq-sub{font-family:var(--bd);font-size:16px;color:rgba(var(--tc),0.62);line-height:1.6;max-width:540px;margin:0 auto}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid rgba(var(--tc),0.10);border-radius:14px;background:rgba(var(--tc),0.025);overflow:hidden;transition:border-color 0.25s,background 0.25s}
.faq-item[open]{border-color:rgba(142,33,202,0.35);background:rgba(142,33,202,0.04)}
.faq-q{cursor:pointer;list-style:none;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:var(--bd);font-size:17px;font-weight:500;color:var(--text-heading);line-height:1.4}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';font-family:var(--hl);font-size:30px;line-height:1;color:rgba(var(--tc),0.55);font-weight:400;transition:transform 0.3s,color 0.25s;flex-shrink:0}
.faq-item[open] .faq-q::after{transform:rotate(45deg);color:var(--purple)}
.faq-a{padding:0 28px 24px;font-family:var(--bd);font-size:15px;color:rgba(var(--tc),0.70);line-height:1.7}
.faq-a a{color:var(--purple);text-decoration:none;border-bottom:1px solid rgba(142,33,202,0.3)}
.faq-a a:hover{border-bottom-color:var(--purple)}
@media(max-width:640px){.faq-section{padding:72px 18px 56px}.faq-q{padding:18px 20px;font-size:15px}.faq-a{padding:0 20px 20px;font-size:14px}}

/* ═══ MEMBERSHIP — three engagement plans ═══ */
.plans-section{position:relative;background:var(--dark);padding:120px 32px;border-top:1px solid var(--border);overflow:hidden}
.plans-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 600px 500px at 50% 0%,rgba(142,33,202,0.10) 0%,transparent 60%)}
.plans-inner{max-width:1120px;margin:0 auto;position:relative;z-index:2}
.plans-head{text-align:center;margin-bottom:56px}
.plans-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:rgba(var(--tc),0.40);margin-bottom:18px}
.plans-h2{font-family:var(--hl);font-weight:400;font-size:clamp(34px,5vw,58px);color:var(--text-heading);line-height:1.15;margin-bottom:14px}
.plans-h2 em{background:linear-gradient(129deg,#8E21CA,#254AAD);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.plans-sub{font-family:var(--bd);font-size:16px;color:rgba(var(--tc),0.62);line-height:1.6;max-width:600px;margin:0 auto}
.plans-toggles{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:36px}
.plans-pill{display:inline-flex;background:rgba(var(--tc),0.04);border:1px solid rgba(var(--tc),0.10);border-radius:60px;padding:4px;gap:2px;flex-wrap:wrap;justify-content:center}
.plans-pill-btn{font-family:var(--bd);font-size:13px;font-weight:600;padding:9px 18px;border-radius:60px;border:none;background:transparent;color:rgba(var(--tc),0.62);cursor:pointer;transition:all 0.25s;display:inline-flex;align-items:center;gap:8px;letter-spacing:0.3px;white-space:nowrap}
.plans-pill-btn:hover{color:var(--text-heading)}
.plans-pill-btn.active{background:linear-gradient(129deg,#8E21CA,#254AAD);color:#fff;box-shadow:0 4px 14px rgba(142,33,202,0.30)}
.plans-save-chip{font-family:var(--lb);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:3px 7px;border-radius:20px;background:rgba(46,204,113,0.18);color:#5dd49a}
.plans-pill-btn.active .plans-save-chip{background:rgba(255,255,255,0.20);color:#fff}
.plans-pill-label{font-family:var(--lb);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--tc),0.40);margin-right:6px;align-self:center}
.plan-price-orig{font-family:var(--bd);font-size:14px;color:rgba(var(--tc),0.40);text-decoration:line-through;margin-right:6px;font-weight:400}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan-card{position:relative;background:rgba(var(--tc),0.03);border:1px solid rgba(var(--tc),0.10);border-radius:18px;padding:28px 24px 26px;display:flex;flex-direction:column;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s}
.plan-card:hover{transform:translateY(-4px);border-color:rgba(var(--tc),0.22);box-shadow:0 16px 40px rgba(0,0,0,0.18)}
.plan-card.featured{background:linear-gradient(180deg,rgba(142,33,202,0.10),rgba(37,74,173,0.06));border:1px solid rgba(142,33,202,0.45);box-shadow:0 20px 60px rgba(142,33,202,0.22)}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:var(--lb);font-size:10px;letter-spacing:3px;text-transform:uppercase;padding:6px 14px;border-radius:20px;background:linear-gradient(129deg,#8E21CA,#254AAD);color:#fff;font-weight:500}
.plan-name{font-family:var(--hl);font-size:22px;color:var(--text-heading);margin-bottom:8px;text-align:center}
.plan-price{font-family:var(--hl);font-size:36px;color:var(--text-heading);line-height:1;margin-bottom:6px;text-align:center}
.plan-price small{font-family:var(--bd);font-size:13px;color:rgba(var(--tc),0.55);font-weight:400;margin-left:4px}
.plan-tagline{font-family:var(--bd);font-size:13px;color:rgba(var(--tc),0.62);line-height:1.5;margin-bottom:18px;min-height:38px;text-align:center}
.plan-feats{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.plan-feats li{font-family:var(--bd);font-size:13.5px;color:rgba(var(--tc),0.78);line-height:1.5;padding-left:22px;position:relative}
.plan-feats li::before{content:'';position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:linear-gradient(129deg,#8E21CA,#254AAD) center/cover no-repeat,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5 5.5-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px no-repeat}
.plan-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--bd);font-size:13.5px;font-weight:600;padding:12px 20px;border-radius:60px;border:1px solid rgba(var(--tc),0.20);background:transparent;color:var(--text-heading);cursor:pointer;text-decoration:none;transition:all 0.25s;letter-spacing:0.4px}
.plan-cta:hover{border-color:rgba(142,33,202,0.55);color:var(--purple);background:rgba(142,33,202,0.05)}
.plan-card.featured .plan-cta{background:linear-gradient(129deg,#8E21CA,#254AAD);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(142,33,202,0.32)}
.plan-card.featured .plan-cta:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 36px rgba(142,33,202,0.45)}
@media(max-width:1100px){.plans-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:640px){.plans-grid{grid-template-columns:1fr}.plans-section{padding:72px 18px}.plan-card{padding:26px 22px}.plan-card.featured{order:-1}.plan-cta{align-self:center;width:min(280px,100%)}}

/* ═══ CONTACT US CTA — closer band ═══ */
.contact-section{position:relative;background:var(--section-alt);padding:120px 32px;border-top:1px solid var(--border);text-align:center;overflow:hidden}
[data-theme="dark"] .contact-section{background:linear-gradient(180deg,var(--dark),var(--dark2))}
.contact-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 700px 400px at 50% 50%,rgba(37,74,173,0.10) 0%,transparent 65%)}
.contact-inner{max-width:780px;margin:0 auto;position:relative;z-index:2}
.contact-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:rgba(var(--tc),0.40);margin-bottom:18px}
.contact-h2{font-family:var(--hl);font-weight:400;font-size:clamp(32px,5vw,54px);color:var(--text-heading);line-height:1.15;margin-bottom:14px}
.contact-h2 em{background:linear-gradient(129deg,#8E21CA,#254AAD);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.contact-sub{font-family:var(--bd);font-size:17px;color:rgba(var(--tc),0.62);line-height:1.65;max-width:600px;margin:0 auto 36px}
.contact-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.contact-btn-p{display:inline-flex;align-items:center;gap:10px;font-family:var(--hl);font-size:17px;padding:18px 42px;border-radius:60px;border:none;background:linear-gradient(129deg,#8E21CA,#254AAD);color:#fff;cursor:pointer;text-decoration:none;box-shadow:0 8px 24px rgba(142,33,202,0.32);transition:transform 0.3s,box-shadow 0.3s,filter 0.3s}
.contact-btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(142,33,202,0.45);filter:brightness(1.08)}
.contact-btn-g{display:inline-flex;align-items:center;gap:10px;font-family:var(--hl);font-size:17px;padding:18px 42px;border-radius:60px;border:1.5px solid rgba(var(--tc),0.22);background:transparent;color:var(--text-heading);cursor:pointer;text-decoration:none;transition:all 0.25s}
.contact-btn-g:hover{border-color:var(--purple);color:var(--purple);background:rgba(142,33,202,0.04)}
.contact-channels{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;padding-top:32px;border-top:1px solid rgba(var(--tc),0.08)}
.contact-channel{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--bd);text-decoration:none;color:rgba(var(--tc),0.70);transition:color 0.25s}
.contact-channel:hover{color:var(--purple)}
.contact-channel-label{font-family:var(--lb);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--tc),0.45)}
.contact-channel-value{font-size:15px;font-weight:500}
@media(max-width:640px){.contact-section{padding:72px 18px}.contact-ctas{flex-direction:column;align-items:center}.contact-btn-p,.contact-btn-g{justify-content:center;width:min(280px,100%)}.contact-channels{gap:22px}}

/* ═══ FOOTER ═══ */
.foot-section{position:relative;overflow:hidden;background:var(--dark);padding:72px 32px 36px}
[data-theme="dark"] .foot-section{background:var(--dark)}

/* Canvas */
.foot-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.foot-bg-grid{position:absolute;inset:0;opacity:0.04;background-image:linear-gradient(rgba(var(--tc),0.25) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--tc),0.25) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(180deg,rgba(0,0,0,0.5) 0%,transparent 70%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.5) 0%,transparent 70%)}
.foot-glow{position:absolute;border-radius:50%;filter:blur(120px)}
.foot-glow.fg1{width:600px;height:500px;background:radial-gradient(circle,rgba(142,33,202,0.14),transparent 70%);top:-80px;left:5%;animation:footGlow1 18s ease-in-out infinite alternate}
.foot-glow.fg2{width:500px;height:400px;background:radial-gradient(circle,rgba(142,33,202,0.09),transparent 70%);top:20%;right:5%;animation:footGlow2 22s ease-in-out infinite alternate}
.foot-glow.fg3{width:400px;height:300px;background:radial-gradient(circle,rgba(37,74,173,0.08),transparent 70%);bottom:0;left:40%;animation:footGlow1 26s ease-in-out infinite alternate-reverse}
@keyframes footGlow1{0%{transform:translate(0,0)}100%{transform:translate(40px,-30px)}}
@keyframes footGlow2{0%{transform:translate(0,0)}100%{transform:translate(-50px,20px)}}

/* Top divider */
.foot-divider{position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(142,33,202,0.30) 25%,rgba(142,33,202,0.20) 50%,rgba(37,74,173,0.30) 75%,transparent 95%)}

/* Flowing diagonal lines */
.foot-flow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.foot-flow::before{content:'';position:absolute;inset:-100%;background-image:repeating-linear-gradient(-45deg,transparent,transparent 56px,rgba(var(--tc),0.018) 56px,rgba(var(--tc),0.018) 57px);animation:footFlowDrift 50s linear infinite}
@keyframes footFlowDrift{from{transform:translate(0,0)}to{transform:translate(114px,114px)}}

/* Footer inner */
.foot-inner{max-width:1100px;margin:0 auto;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:40px;margin-bottom:60px}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-logo{display:block;margin-bottom:4px}
.foot-logo img{width:180px!important;height:auto!important;max-width:100%!important;display:block!important;min-height:24px;filter:none!important}
/* Light theme shows the same full-colour compact cut as the mobile header
   (gradient wordmark, black tagline) — the old brightness(0.12) darkening is
   dropped. Dark theme swaps to the white-tagline cut, since the light file's
   tagline is now solid black and would vanish on the dark footer. */
[data-theme="dark"] .foot-logo img{content:url('/theme/site/assets/inkgility-logo-compact-white.svg')}
.foot-logo a{display:inline-block;text-decoration:none}
.foot-tagline{font-family:var(--hl);font-size:15px;color:rgba(var(--tc),0.55)}
.foot-contact{font-family:var(--lb);font-size:11px;letter-spacing:2px;color:rgba(var(--tc),0.40);margin-top:8px;line-height:1.8}
.foot-socials{display:grid;grid-template-columns:repeat(4,40px);gap:10px;margin-top:18px;justify-content:start}
.foot-social{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;color:rgba(var(--tc),0.65);text-decoration:none;background:rgba(var(--tc),0.02)}
.foot-social svg{width:18px;height:18px;display:block;color:inherit;fill:currentColor;transition:transform 0.2s}
.foot-social:hover{border-color:var(--purple);color:var(--purple);background:rgba(142,33,202,0.10);box-shadow:0 0 16px rgba(142,33,202,0.15);transform:translateY(-2px)}
.foot-social:hover svg{transform:scale(1.08)}
@media(max-width:520px){.foot-socials{grid-template-columns:repeat(4,36px)}.foot-social{width:36px;height:36px}.foot-social svg{width:16px;height:16px}}
.foot-col-title{font-family:var(--lb);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:rgba(var(--tc),0.50);margin-bottom:18px}
.foot-link{display:block;font-family:var(--bd);font-size:14px;color:rgba(var(--tc),0.55);padding:4px 0;cursor:pointer;transition:color 0.2s;text-decoration:none}
.foot-link:hover{color:rgba(var(--tc),0.90)}
.foot-bottom{padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-copy{font-family:var(--lb);font-size:11px;letter-spacing:3px;color:rgba(var(--tc),0.38)}
.foot-legal{display:flex;gap:24px}
.foot-help{font-family:var(--lb);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--tc),0.38);text-decoration:none;cursor:pointer;transition:color 0.3s}
.foot-help:hover{color:var(--gold)}

/* Responsive */
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media(max-width:640px){
.foot-section{padding:48px 20px 28px}
.foot-grid{grid-template-columns:1fr;gap:28px;text-align:center}
.foot-brand{align-items:center;text-align:center}
.foot-logo img{margin:0 auto}
.foot-socials{justify-content:center}
.foot-bottom{flex-direction:column;text-align:center;gap:8px}.foot-legal{justify-content:center}
}

/* ═══ QUICK ACTIONS — IMMERSIVE SHOWCASE SECTION ═══ */
.qa-section{position:relative;padding:100px 32px 120px;overflow:hidden;background:var(--dark)}
[data-theme="dark"] .qa-section{background:linear-gradient(180deg,var(--dark) 0%,var(--dark) 40%,var(--dark) 100%)}
[data-theme="dark"] .qa-section *{color:var(--cream)}

/* Ambient canvas */
.qa-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.qa-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(142,33,202,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(142,33,202,0.02) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 50% at 50% 50%,black 20%,transparent 70%)}
.qa-glow-1{position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.10),transparent 55%);top:-25%;right:-10%;animation:qaFloat1 12s ease-in-out infinite}
.qa-glow-2{position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(142,33,202,0.06),transparent 55%);bottom:-20%;left:-5%;animation:qaFloat2 14s ease-in-out infinite}
.qa-glow-3{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(37,74,173,0.08),transparent 55%);top:30%;left:50%;animation:qaFloat3 16s ease-in-out infinite}
@keyframes qaFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes qaFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-25px)}}
@keyframes qaFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-20px)}}

/* Constellation dots */
.qa-stars{position:absolute;inset:0}
.qa-star{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(var(--tc),0.15);animation:qaStar 4s ease-in-out infinite}
.qa-star:nth-child(1){left:5%;top:10%;animation-delay:0s}
.qa-star:nth-child(2){left:15%;top:70%;animation-delay:0.5s}
.qa-star:nth-child(3){left:30%;top:20%;animation-delay:1s}
.qa-star:nth-child(4){left:45%;top:85%;animation-delay:1.5s}
.qa-star:nth-child(5){left:60%;top:15%;animation-delay:2s}
.qa-star:nth-child(6){left:75%;top:60%;animation-delay:2.5s}
.qa-star:nth-child(7){left:88%;top:30%;animation-delay:3s}
.qa-star:nth-child(8){left:92%;top:80%;animation-delay:3.5s}
.qa-star:nth-child(9){left:50%;top:45%;animation-delay:1.2s}
.qa-star:nth-child(10){left:20%;top:90%;animation-delay:2.8s}
@keyframes qaStar{0%,100%{opacity:0.1;transform:scale(1)}50%{opacity:0.6;transform:scale(2)}}

/* Horizontal light beam */
.qa-beam{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(142,33,202,0.12) 20%,rgba(142,33,202,0.08) 50%,rgba(142,33,202,0.12) 80%,transparent 100%);top:0}

/* Section header */
.qa-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--gold-dark)!important;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:12px}
.qa-eyebrow::before,.qa-eyebrow::after{content:'';width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.5))}
.qa-eyebrow::after{background:linear-gradient(90deg,rgba(142,33,202,0.3),transparent)}
.qa-title{font-family:var(--hl);font-size:clamp(28px,4.5vw,48px);font-weight:400;line-height:1.15;margin-bottom:12px;text-align:center;color:var(--text-heading)!important}
.qa-title em{background:linear-gradient(135deg,var(--gold),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.qa-subtitle{font-family:var(--hl);font-size:17px;color:var(--text-caption)!important;text-align:center;margin-bottom:60px;max-width:500px;margin-left:auto;margin-right:auto}

/* Large showcase cards — 2×4 grid with separate image + text */
.qa-grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto}
.qa-card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);border:1px solid var(--border);background:rgba(var(--tc),0.03);display:flex;flex-direction:column}
.qa-card::before{display:none}
.qa-card:hover{transform:translateY(-8px);border-color:rgba(142,33,202,0.3);box-shadow:0 20px 60px rgba(142,33,202,0.12),0 0 0 1px rgba(142,33,202,0.1)}
[data-theme="dark"] .qa-card:hover{box-shadow:0 20px 60px rgba(142,33,202,0.18),0 0 0 1px rgba(142,33,202,0.15)}
.qa-card-img-wrap{position:relative;overflow:hidden;border-radius:15px 15px 0 0}
.qa-card-img{width:100%;height:200px;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.qa-card:hover .qa-card-img{transform:scale(1.06)}
.qa-card-content{padding:18px 20px 20px;position:relative;transition:transform 0.4s}
.qa-card:hover .qa-card-content{transform:translateY(-2px)}
.qa-card-name{font-family:var(--hl);font-size:18px;font-weight:400;margin-bottom:6px;color:var(--text-heading)!important}
.qa-card-desc{font-family:var(--bd);font-size:13px;color:var(--text-caption)!important;line-height:1.5}
.qa-card-arrow{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(var(--tc),0.08);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(var(--tc),0.25)!important;z-index:3;opacity:0;transform:translateX(-8px);transition:all 0.3s;background:rgba(243,235,239,0.7);backdrop-filter:blur(8px)}
.qa-card:hover .qa-card-arrow{opacity:1;transform:translateX(0);border-color:rgba(142,33,202,0.3);color:rgba(142,33,202,0.8)!important;background:rgba(243,235,239,0.9)}

/* Stagger entrance */
.qa-card:nth-child(1){animation:qaCardIn 0.6s ease 0.1s both}
.qa-card:nth-child(2){animation:qaCardIn 0.6s ease 0.2s both}
.qa-card:nth-child(3){animation:qaCardIn 0.6s ease 0.3s both}
.qa-card:nth-child(4){animation:qaCardIn 0.6s ease 0.4s both}
.qa-card:nth-child(5){animation:qaCardIn 0.6s ease 0.5s both}
.qa-card:nth-child(6){animation:qaCardIn 0.6s ease 0.6s both}
.qa-card:nth-child(7){animation:qaCardIn 0.6s ease 0.7s both}
.qa-card:nth-child(8){animation:qaCardIn 0.6s ease 0.8s both}
.qa-card:nth-child(9){animation:qaCardIn 0.6s ease 0.9s both}
.qa-card:nth-child(10){animation:qaCardIn 0.6s ease 1.0s both}
.qa-card:nth-child(11){animation:qaCardIn 0.6s ease 1.1s both}
.qa-card:nth-child(12){animation:qaCardIn 0.6s ease 1.2s both}
@keyframes qaCardIn{from{opacity:0;transform:translateY(30px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Bottom CTA */
.qa-cta-wrap{text-align:center;margin-top:56px}
.qa-cta{font-family:var(--hl);font-size:17px;padding:16px 40px;border-radius:60px;cursor:pointer;background:linear-gradient(135deg,#8E21CA,#5F2EBF 55%,#254AAD)!important;border:1px solid transparent;color:#fff!important;transition:all 0.3s;box-shadow:0 6px 22px rgba(142,33,202,0.32), inset 0 1px 0 rgba(255,255,255,0.18)}
.qa-cta:hover{filter:brightness(1.06);color:#fff!important;transform:translateY(-2px);box-shadow:0 10px 32px rgba(142,33,202,0.42), inset 0 1px 0 rgba(255,255,255,0.22)}

/* Responsive */
@media(max-width:900px){
.qa-grid-cards{grid-template-columns:repeat(2,1fr);gap:16px}
.qa-card-img{height:180px}
.qa-card-name{font-size:16px}
.qa-card-content{padding:16px 18px 18px}
}
@media(max-width:640px){
.qa-section{padding:60px 16px 80px}
.qa-grid-cards{grid-template-columns:repeat(2,1fr);gap:14px}
.qa-card-img{height:150px}
.qa-card-content{padding:14px 16px 16px}
.qa-card-name{font-size:15px}
.qa-card-desc{font-size:12px}
.qa-card-arrow{display:none}
}
@media(max-width:420px){
.qa-grid-cards{grid-template-columns:repeat(2,1fr);gap:12px}
.qa-card-img{height:130px}
.qa-card-content{padding:12px 14px 14px}
}

/* Dark theme eyebrow color overrides — restore translucent look on dark */
[data-theme="dark"] .cmdc-eyebrow{color:rgba(142,33,202,0.8)!important}
[data-theme="dark"] .hiw-eyebrow{color:rgba(142,33,202,0.7)!important}
[data-theme="dark"] .wink-eyebrow{color:rgba(142,33,202,0.7)!important}
[data-theme="dark"] .rev-eyebrow{color:rgba(142,33,202,0.7)!important}
[data-theme="dark"] .qa-eyebrow{color:rgba(142,33,202,0.7)!important}

/* Light theme ambient effect adjustments */
.cmdc-canvas,.hiw-canvas,.wink-canvas,.rev-canvas,.cta-canvas,.foot-canvas,.qa-canvas,.biz-score-canvas{opacity:0.55}
[data-theme="dark"] .cmdc-canvas,[data-theme="dark"] .hiw-canvas,[data-theme="dark"] .wink-canvas,[data-theme="dark"] .rev-canvas,[data-theme="dark"] .cta-canvas,[data-theme="dark"] .foot-canvas,[data-theme="dark"] .qa-canvas,[data-theme="dark"] .biz-score-canvas{opacity:1}

/* Light theme contrast boost — cards, borders, dividers */
.hiw-card,.wink-card,.rev-carousel-wrap{background:rgba(var(--tc),0.04)}
[data-theme="dark"] .hiw-card,[data-theme="dark"] .wink-card,[data-theme="dark"] .rev-carousel-wrap{background:rgba(var(--tc),0.02)}
.hiw-step:hover .hiw-card{background:rgba(var(--tc),0.07)}
[data-theme="dark"] .hiw-step:hover .hiw-card{background:rgba(var(--tc),0.04)}
.hiw-connector{background:linear-gradient(180deg,transparent,rgba(142,33,202,0.25) 10%,rgba(142,33,202,0.25) 90%,transparent)}
[data-theme="dark"] .hiw-connector{background:linear-gradient(180deg,transparent,rgba(142,33,202,0.15) 10%,rgba(142,33,202,0.15) 90%,transparent)}
.foot-bottom{border-top:1px solid var(--border)}
.foot-divider{opacity:0.8}
[data-theme="dark"] .foot-divider{opacity:1}
.rev-carousel-wrap::before{background:linear-gradient(90deg,transparent,rgba(142,33,202,0.5),transparent)}
[data-theme="dark"] .rev-carousel-wrap::before{background:linear-gradient(90deg,transparent,rgba(142,33,202,0.4),transparent)}
.wink-card-line{background:linear-gradient(90deg,transparent,var(--card-accent),transparent)}
.cmdc-input-wrap{border:1px solid var(--border)}
[data-theme="dark"] .cmdc-input-wrap{border-color:transparent}

/* WHY SECTION RESPONSIVE */
@media(max-width:900px){
#whyGrid{grid-template-columns:1fr!important;gap:16px!important}
#whyGrid>div{padding:28px 20px!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   EDITORIAL FRAMEWORK — applied via auto-injected markup at page load
   Section dividers + numbered folios always-on, corner blooms light-mode only
   ═══════════════════════════════════════════════════════════════════════ */

/* Section divider — animated gold hairline between every major section */
.section-divider{position:relative;height:1px;margin:0 auto;max-width:1200px;overflow:visible;pointer-events:none}
.section-divider::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(107,79,15,0.55) 25%,rgba(107,79,15,0.95) 50%,rgba(107,79,15,0.55) 75%,transparent 100%)}
.section-divider::after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--dark);padding:0 12px;font-size:11px;color:#6B4F0F;letter-spacing:0;opacity:1}
[data-theme="dark"] .section-divider::before{background:linear-gradient(90deg,transparent 0%,rgba(142,33,202,0.45) 25%,rgba(142,33,202,0.75) 50%,rgba(142,33,202,0.45) 75%,transparent 100%)}
[data-theme="dark"] .section-divider::after{color:var(--gold)}
[data-theme="dark"] .section-folio{color:rgba(142,33,202,0.85)}
[data-theme="dark"] .section-folio .folio-num,
[data-theme="dark"] .section-folio .folio-label{color:rgba(142,33,202,0.95)}
[data-theme="dark"] .section-folio .folio-rule{background:linear-gradient(90deg,transparent,rgba(142,33,202,0.85),transparent)}

/* Numbered folio above every section heading — magazine TOC style */
.section-folio{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--lb);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#6B4F0F;margin-bottom:22px;margin-top:8px;opacity:1}
.section-folio .folio-num{font-weight:700;color:#6B4F0F}
.section-folio .folio-rule{flex:0 0 40px;height:1.5px;background:linear-gradient(90deg,transparent,#6B4F0F,transparent);opacity:1}
.section-folio .folio-label{color:#6B4F0F;font-weight:600}
.section-folio .folio-badge,[data-theme="dark"] .section-folio .folio-badge{display:inline-block;font-family:var(--lb);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#0A0810!important;background:linear-gradient(135deg,#E8C547,#C58BEB)!important;padding:3px 8px;border-radius:60px;font-weight:700;line-height:1;margin-left:8px;vertical-align:middle;box-shadow:0 1px 8px rgba(142,33,202,0.35)}
[data-theme="dark"] .section-folio{color:rgba(142,33,202,0.75)}
[data-theme="dark"] .section-folio .folio-num,
[data-theme="dark"] .section-folio .folio-label{color:rgba(142,33,202,0.85)}

/* Corner ink blooms — light mode only ambient color depth */
.section-bloom{position:absolute!important;border-radius:50%;pointer-events:none;z-index:0;mix-blend-mode:multiply;opacity:0.6;animation:sectionBloom 18s ease-in-out infinite;will-change:transform,opacity}
.section-bloom.tl{width:360px;height:360px;top:-8%;left:-8%}
.section-bloom.br{width:320px;height:320px;bottom:-8%;right:-8%;animation-delay:9s}
.section-bloom.purple{background:radial-gradient(circle,rgba(142,33,202,0.30),rgba(142,33,202,0.09) 50%,transparent 88%)}
.section-bloom.gold{background:radial-gradient(circle,rgba(142,33,202,0.28),rgba(142,33,202,0.07) 50%,transparent 88%)}
.section-bloom.blue{background:radial-gradient(circle,rgba(37,74,173,0.26),rgba(37,74,173,0.07) 50%,transparent 88%)}
.section-bloom.pink{background:radial-gradient(circle,rgba(212,73,170,0.26),rgba(212,73,170,0.07) 50%,transparent 88%)}
[data-theme="dark"] .section-bloom{display:none}
@keyframes sectionBloom{
  0%,100%{opacity:0;transform:scale(0.9)}
  25%{opacity:0.7;transform:scale(1)}
  60%{opacity:0.85;transform:scale(1.05)}
  85%{opacity:0.3;transform:scale(0.95)}
}

/* Hairline frame upgrade for cards in light mode — subtle gold inner border + hover lift */
:root:not([data-theme="dark"]) .qa-card,
:root:not([data-theme="dark"]) .pf-card,
:root:not([data-theme="dark"]) .pricing-card,
:root:not([data-theme="dark"]) .hiw-card,
:root:not([data-theme="dark"]) .wink-card{
  border:1px solid rgba(142,33,202,0.18) !important;
  box-shadow:inset 0 0 0 1px rgba(142,33,202,0.04),0 2px 12px rgba(32,26,20,0.05),0 1px 3px rgba(32,26,20,0.06);
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(0.16,1,0.3,1);
}
:root:not([data-theme="dark"]) .qa-card:hover,
:root:not([data-theme="dark"]) .pf-card:hover,
:root:not([data-theme="dark"]) .pricing-card:hover,
:root:not([data-theme="dark"]) .hiw-card:hover,
:root:not([data-theme="dark"]) .wink-card:hover{
  border-color:rgba(142,33,202,0.50);
  box-shadow:inset 0 0 0 1px rgba(142,33,202,0.10),0 12px 32px rgba(32,26,20,0.12),0 4px 10px rgba(32,26,20,0.08);
  transform:translateY(-3px);
}

/* Make sections relative so corner blooms position correctly */
.cmd-section,.qa-section,.biz-score-section,.hiw-section,.wink-section,.rev-section,.prefooter,.portfolio-section,.pricing-section{position:relative;overflow:hidden}

/* ──────────── BATCH 2: Typography polish (light mode only) ──────────── */

/* Drop caps removed — subheads are too short for the editorial float treatment */

/* Broken image fallback — when an image fails to load, the .img-fail class swaps in a gradient placeholder */
.img-fail{display:none !important}
.qa-card-img-wrap.img-fail-wrap,
.pf-thumb.img-fail-wrap{
  background:linear-gradient(135deg,rgba(142,33,202,0.10),rgba(142,33,202,0.08));
  min-height:200px;
  position:relative;
}
.qa-card-img-wrap.img-fail-wrap::before,
.pf-thumb.img-fail-wrap::before{
  content:'';
  position:absolute;inset:30% 40%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8941E' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M3 4h18v16H3z'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0.4;
}


/* SCORE OVERLAY RESPONSIVE */
@media(max-width:640px){
#scoreOverlay>div{padding:16px;max-width:100%}
#scoreRecs{grid-template-columns:1fr!important}
.wiz-opt{padding:12px 14px}
}

/* QUOTE MODAL RESPONSIVE */
@media(max-width:640px){
.q-panel{padding:24px 20px;margin:0;border-radius:12px}
.q-input{font-size:16px;padding:12px 14px}
}

/* TRUST/REVIEWS RESPONSIVE */
@media(max-width:640px){
.rev-section{padding:60px 16px!important}
.review-text{font-size:clamp(18px,4vw,24px)!important}
}

/* HOW SECTION RESPONSIVE */
@media(max-width:640px){
.steps-grid{grid-template-columns:1fr!important}
.step{padding:20px 16px!important}
}

/* CTA RESPONSIVE */
@media(max-width:640px){
.cta-immersive{padding:60px 16px!important;min-height:40vh!important}
.cta-im-headline{font-size:clamp(24px,6vw,40px)!important}
}

/* THEME TOGGLE */
.theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid rgba(var(--tc),0.12);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.3s;color:var(--text-caption);position:relative}
.theme-toggle:hover{border-color:var(--purple);color:var(--purple)}
.theme-toggle svg{width:18px;height:18px;position:absolute;transition:opacity 0.3s,transform 0.3s}
.theme-icon-sun{opacity:1;transform:rotate(0)}
.theme-icon-moon{opacity:0;transform:rotate(-90deg)}
[data-theme="dark"] .theme-icon-sun{opacity:0;transform:rotate(90deg)}
[data-theme="dark"] .theme-icon-moon{opacity:1;transform:rotate(0)}

/* ── BACK TO TOP ── */
.back-top{position:fixed;bottom:32px;right:28px;width:44px;height:44px;border-radius:50%;background:rgba(243,235,239,0.92);backdrop-filter:blur(14px);border:1px solid var(--border);color:var(--cream);font-size:18px;line-height:1;cursor:pointer;z-index:150;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(14px);transition:opacity 0.35s,transform 0.35s,background 0.3s,box-shadow 0.3s;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,0.12)}
.back-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-top:hover{background:var(--purple);border-color:var(--purple);box-shadow:0 4px 24px rgba(142,33,202,0.35)}

/* ── MOBILE STICKY CTA ── */
.mobile-cta-bar{display:none}
@media(max-width:640px){
  .mobile-cta-bar{display:block;position:fixed;bottom:0;left:0;right:0;z-index:170;background:rgba(243,235,239,0.97);backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:12px 20px 16px;transform:translateY(100%);transition:transform 0.45s cubic-bezier(0.16,1,0.3,1);pointer-events:none}
  .mobile-cta-bar.visible{transform:translateY(0);pointer-events:auto}
  .mobile-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .mobile-cta-sub{font-family:var(--lb);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--tc),0.45);line-height:1.4}
  .mobile-cta-btn{font-family:var(--hl);font-size:15px;padding:11px 26px;border-radius:60px;background:var(--btn-gradient);border:none;color:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0;box-shadow:0 4px 20px rgba(142,33,202,0.25)}
  .back-top{bottom:80px}
}

/* ── COOKIE CONSENT BANNER ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:300;background:rgba(243,235,239,0.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;transform:translateY(100%);opacity:0;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1),opacity 0.5s cubic-bezier(0.16,1,0.3,1);pointer-events:none;box-shadow:0 -4px 32px rgba(0,0,0,0.12)}
.cookie-banner.visible{transform:translateY(0);opacity:1;pointer-events:auto}
.cookie-banner-text{font-family:var(--lb);font-size:11px;letter-spacing:0.5px;color:rgba(var(--tc),0.65);line-height:1.6;max-width:680px;flex:1 1 300px}
.cookie-banner-text a{color:var(--purple);text-decoration:none;border-bottom:1px solid rgba(142,33,202,0.3);transition:border-color 0.2s}
.cookie-banner-text a:hover{border-bottom-color:var(--purple)}
.cookie-banner-btns{display:flex;gap:10px;flex-shrink:0;align-items:center}
.cookie-btn-accept{font-family:var(--hl);font-size:14px;padding:9px 22px;border-radius:60px;background:var(--btn-gradient);border:none;color:#fff;cursor:pointer;white-space:nowrap;box-shadow:0 3px 14px rgba(142,33,202,0.25);transition:box-shadow 0.25s,transform 0.25s}
.cookie-btn-accept:hover{box-shadow:0 4px 22px rgba(142,33,202,0.4);transform:translateY(-1px)}
.cookie-btn-decline{font-family:var(--lb);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:9px 16px;border-radius:60px;background:transparent;border:1px solid var(--border);color:rgba(var(--tc),0.45);cursor:pointer;white-space:nowrap;transition:color 0.2s,border-color 0.2s}
.cookie-btn-decline:hover{color:rgba(var(--tc),0.7);border-color:rgba(var(--tc),0.35)}
@media(max-width:640px){
  .cookie-banner{padding:14px 18px 18px;flex-direction:column;align-items:stretch;gap:12px}
  .cookie-banner-btns{flex-direction:row;justify-content:flex-end}
  .cookie-banner-text{font-size:10px}
}

/* PRINT */
@media print{.site-nav,.mega-menu,.search-overlay,.modal-overlay,.q-overlay,.page-loader,.hero-glow,.hero-grid,.hero-lines,.hero-scroll,.hero-fade,.cta-canvas,.cta-ring-outer,.convo-glow,.trust-ticker,.foot-socials,.theme-toggle,.rev-canvas,.foot-canvas,.wink-canvas{display:none!important}body::after{display:none!important}.hero{min-height:auto;padding:40px 20px}.cta-immersive{min-height:auto;padding:40px 20px;background:none!important}.trust-section{display:none!important}*{animation:none!important;transition:none!important;box-shadow:none!important}}

/* ── PORTFOLIO SECTION ── */
.portfolio-section{position:relative;padding:120px 32px 100px;overflow:hidden;background:var(--section-alt)}
[data-theme="dark"] .portfolio-section{background:var(--dark2)}
.portfolio-inner{max-width:1100px;margin:0 auto}
.portfolio-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--purple);margin-bottom:16px;text-align:center}
.portfolio-headline{font-family:var(--hl);font-size:clamp(32px,4vw,52px);line-height:1.1;color:var(--text-heading);text-align:center;margin-bottom:16px}
.portfolio-sub{font-size:15px;color:rgba(var(--tc),0.55);text-align:center;max-width:520px;margin:0 auto 48px;line-height:1.6}
.portfolio-filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.pf-btn{font-family:var(--lb);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:8px 18px;border-radius:60px;border:1px solid var(--border);background:transparent;color:rgba(var(--tc),0.50);cursor:pointer;transition:all 0.2s}
.pf-btn:hover{color:rgba(var(--tc),0.80);border-color:rgba(var(--tc),0.30)}
.pf-btn.active{background:var(--btn-gradient);border-color:transparent;color:#fff;box-shadow:0 3px 14px rgba(142,33,202,0.22)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pf-card{border-radius:16px;overflow:hidden;background:var(--dark);border:1px solid var(--border);cursor:pointer;transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),box-shadow 0.35s;position:relative}
[data-theme="dark"] .pf-card{background:var(--dark)}
.pf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.pf-card-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:linear-gradient(135deg,var(--dim),rgba(var(--tc),0.12));transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.pf-card:hover .pf-card-img{transform:scale(1.04)}
.pf-card-placeholder{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--dim),rgba(var(--tc),0.05));font-size:32px;color:rgba(var(--tc),0.20);transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.pf-card:hover .pf-card-placeholder{transform:scale(1.04)}
.pf-card-body{padding:14px 16px 16px}
.pf-card-cat{font-family:var(--lb);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--purple);margin-bottom:4px}
.pf-card-name{font-family:var(--bd);font-size:14px;font-weight:500;color:var(--text-heading);margin-bottom:3px}
.pf-card-desc{font-size:12px;color:rgba(var(--tc),0.50);line-height:1.4}
.pf-card-cta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(243,235,239,0.88);backdrop-filter:blur(8px);opacity:0;transition:opacity 0.25s;border-radius:16px}
[data-theme="dark"] .pf-card-cta{background:rgba(10,8,16,0.88)}
.pf-card:hover .pf-card-cta{opacity:1}
.pf-card-cta-label{font-family:var(--hl);font-size:15px;color:var(--purple);border-bottom:1px solid rgba(142,33,202,0.4);padding-bottom:2px}
.portfolio-bottom{text-align:center;margin-top:44px}
.portfolio-bottom-link{font-family:var(--lb);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--tc),0.50);background:transparent;border:1px solid var(--border);padding:12px 28px;border-radius:60px;cursor:pointer;transition:all 0.25s}
.portfolio-bottom-link:hover{color:rgba(var(--tc),0.80);border-color:rgba(var(--tc),0.30)}
@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.portfolio-section{padding:80px 16px 60px}.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ── PRICING SECTION ── */
.pricing-section{position:relative;padding:120px 32px 100px;overflow:hidden;background:var(--dark)}
.pricing-inner{max-width:1100px;margin:0 auto}
.pricing-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--purple);margin-bottom:16px;text-align:center}
.pricing-headline{font-family:var(--hl);font-size:clamp(32px,4vw,52px);line-height:1.1;color:var(--text-heading);text-align:center;margin-bottom:16px}
.pricing-sub{font-size:15px;color:rgba(var(--tc),0.55);text-align:center;max-width:520px;margin:0 auto 64px;line-height:1.6}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.pricing-card{background:var(--dark2);border:1px solid var(--border);border-radius:20px;padding:36px 32px 32px;position:relative;transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),box-shadow 0.35s}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.pricing-card.featured{border-color:rgba(142,33,202,0.35);background:linear-gradient(160deg,rgba(142,33,202,0.06) 0%,var(--dark2) 60%);box-shadow:0 0 0 1px rgba(142,33,202,0.12),0 8px 40px rgba(142,33,202,0.10)}
.pricing-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:var(--lb);font-size:10px;letter-spacing:2px;text-transform:uppercase;background:var(--btn-gradient);color:#fff;padding:4px 16px;border-radius:20px;white-space:nowrap}
.pricing-tier{font-family:var(--lb);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--tc),0.45);margin-bottom:12px}
.pricing-card.featured .pricing-tier{color:var(--purple)}
.pricing-price{font-family:var(--hl);font-size:42px;color:var(--text-heading);line-height:1;margin-bottom:6px}
.pricing-price-unit{font-family:var(--bd);font-size:14px;color:rgba(var(--tc),0.45);font-style:normal;margin-bottom:20px}
.pricing-desc{font-size:14px;color:rgba(var(--tc),0.60);line-height:1.6;margin-bottom:24px;min-height:44px}
.pricing-divider{height:1px;background:var(--border);margin-bottom:24px}
.pricing-features{list-style:none;margin:0;padding:0;margin-bottom:28px}
.pricing-features li{font-size:13px;color:rgba(var(--tc),0.65);padding:6px 0;display:flex;align-items:flex-start;gap:10px;line-height:1.4}
.pricing-features li::before{content:'✓';color:var(--green);font-size:12px;flex-shrink:0;margin-top:1px}
.pricing-features li.dim::before{content:'—';color:rgba(var(--tc),0.25)}
.pricing-features li.dim{color:rgba(var(--tc),0.30)}
.pricing-cta{width:100%;font-family:var(--hl);font-size:15px;padding:13px;border-radius:60px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-heading);transition:all 0.25s}
.pricing-cta:hover{background:rgba(var(--tc),0.06);border-color:rgba(var(--tc),0.25)}
.pricing-card.featured .pricing-cta{background:var(--btn-gradient);border-color:transparent;color:#fff;box-shadow:0 4px 20px rgba(142,33,202,0.25)}
.pricing-card.featured .pricing-cta:hover{box-shadow:0 6px 28px rgba(142,33,202,0.40);transform:translateY(-1px)}
.pricing-note{text-align:center;font-family:var(--lb);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(var(--tc),0.30);margin-top:36px}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}}
@media(max-width:640px){.pricing-section{padding:80px 16px 60px}.pricing-card{padding:28px 20px 24px}}

/* ── ACCESSIBILITY ── */
/* Skip to content link */
.skip-link{position:absolute;top:-100%;left:16px;z-index:10000;background:var(--purple);color:#fff;font-family:var(--lb);font-size:12px;letter-spacing:1px;padding:10px 20px;border-radius:0 0 10px 10px;text-decoration:none;transition:top 0.15s}
.skip-link:focus{top:0}
/* Global focus-visible rings — visible keyboard nav, invisible mouse */
:focus{outline:none}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}
.q-input:focus-visible,.search-input:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:8px}

/* Pause off-screen CSS animations to save GPU */
.anim-paused *{animation-play-state:paused!important}

/* SMOOTH THEME TRANSITION */
body *{transition:background-color 0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s}

/* COMING SOON PILL — for stub-routed tiles */
.soon-pill{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid var(--gold,#7C3AED);border-radius:999px;font-family:var(--lb);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#7C3AED);background:rgba(142,33,202,.06);vertical-align:middle;line-height:1.4;white-space:nowrap}
.menu-item-soon .menu-item-name,.prod-card-soon .prod-name{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px}
.prod-card{cursor:pointer;text-decoration:none;color:inherit;display:block}


/* ── PAGE ATMOSPHERE — body-level baseline (Option D) ────────────────── */
#page-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
#page-atmosphere > *{position:absolute;pointer-events:none}
body{position:relative}


/* Baseline orbs — softer than the hero's, fixed in viewport corners.
   Pre-soft gradients (no filter:blur) sized ~1.5× the old blurred discs so
   the glow footprint matches; centers offset to compensate for the growth. */
.pa-orb{border-radius:50%;will-change:transform,opacity}
.pa-orb-1{width:900px;height:900px;background:radial-gradient(circle closest-side,rgba(142,33,202,.14),rgba(142,33,202,.11) 38%,rgba(142,33,202,.04) 68%,transparent 98%);top:-24%;left:-16%;animation:paOrb1 24s ease-in-out infinite}
.pa-orb-2{width:780px;height:780px;background:radial-gradient(circle closest-side,rgba(142,33,202,.10),rgba(142,33,202,.08) 38%,rgba(142,33,202,.03) 68%,transparent 98%);bottom:-22%;right:-16%;animation:paOrb2 28s ease-in-out infinite}
.pa-orb-3{width:700px;height:700px;background:radial-gradient(circle closest-side,rgba(212,73,170,.10),rgba(212,73,170,.08) 38%,rgba(212,73,170,.03) 68%,transparent 98%);top:28%;right:-2%;animation:paOrb3 22s ease-in-out infinite}
.pa-orb-4{width:720px;height:720px;background:radial-gradient(circle closest-side,rgba(37,74,173,.10),rgba(37,74,173,.08) 38%,rgba(37,74,173,.03) 68%,transparent 98%);bottom:10%;left:6%;animation:paOrb4 26s ease-in-out infinite}
[data-theme="dark"] .pa-orb-1{background:radial-gradient(circle closest-side,rgba(142,33,202,.22),rgba(142,33,202,.17) 38%,rgba(142,33,202,.06) 68%,transparent 98%)}
[data-theme="dark"] .pa-orb-2{background:radial-gradient(circle closest-side,rgba(142,33,202,.18),rgba(142,33,202,.14) 38%,rgba(142,33,202,.05) 68%,transparent 98%)}
[data-theme="dark"] .pa-orb-3{background:radial-gradient(circle closest-side,rgba(212,73,170,.16),rgba(212,73,170,.12) 38%,rgba(212,73,170,.05) 68%,transparent 98%)}
[data-theme="dark"] .pa-orb-4{background:radial-gradient(circle closest-side,rgba(37,74,173,.14),rgba(37,74,173,.11) 38%,rgba(37,74,173,.04) 68%,transparent 98%)}
@keyframes paOrb1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(50px,-30px,0)}}
@keyframes paOrb2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-40px,25px,0)}}
@keyframes paOrb3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-35px,40px,0)}}
@keyframes paOrb4{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(45px,-20px,0)}}

/* Ink blooms — slow pulses */
.pa-ink{border-radius:50%;opacity:0;animation:paInk 22s ease-in-out infinite;will-change:transform,opacity}
.pa-ink-1{width:520px;height:520px;background:radial-gradient(circle,rgba(142,33,202,.32),rgba(142,33,202,.10) 45%,transparent 85%);top:18%;left:22%;animation-delay:0s}
.pa-ink-2{width:460px;height:460px;background:radial-gradient(circle,rgba(212,73,170,.28),rgba(212,73,170,.09) 45%,transparent 85%);bottom:14%;right:18%;animation-delay:11s}
@keyframes paInk{0%,100%{opacity:0;transform:scale(.85)}40%{opacity:.45;transform:scale(1.08)}70%{opacity:.25;transform:scale(1)}}

/* Drifting grid — sitewide texture. The pattern lives on an oversized
   ::before whose transform drifts one 80px tile per loop (seamless), instead
   of animating background-position, which repainted the full viewport every
   frame forever. */
.pa-grid{inset:0;overflow:hidden;opacity:.04;mask-image:radial-gradient(ellipse 90% 75% at 50% 50%,#000,transparent 92%)}
.pa-grid::before{content:'';position:absolute;top:-80px;left:-80px;right:0;bottom:0;background-image:linear-gradient(rgba(142,33,202,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(142,33,202,.16) 1px,transparent 1px);background-size:80px 80px;animation:paGrid 18s linear infinite;will-change:transform}
[data-theme="dark"] .pa-grid{opacity:.10}
@keyframes paGrid{from{transform:translate3d(0,0,0)}to{transform:translate3d(80px,80px,0)}}

/* Cursor-following spotlight — viewport-wide */
.pa-spot{width:700px;height:700px;background:radial-gradient(circle,rgba(142,33,202,.22) 0%,rgba(142,33,202,.10) 30%,transparent 62%);opacity:0;transition:opacity .6s cubic-bezier(.16,1,.3,1);will-change:transform,opacity;top:0;left:0}
[data-theme="dark"] .pa-spot{background:radial-gradient(circle,rgba(142,33,202,.30) 0%,rgba(142,33,202,.14) 30%,transparent 62%)}
.pa-spot.on{opacity:1}

/* Targeted boosts — sections that get an extra accent */
.pa-boost{position:relative;isolation:isolate}
.pa-boost::before{content:'';position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(212,73,170,.18),rgba(212,73,170,.06) 45%,transparent 80%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;animation:paBoost 12s ease-in-out infinite;will-change:transform,opacity}
/* pa-boost children — only force position:relative on STATIC elements (not absolute canvases that need to stay full-bleed) */
.pa-boost > *:not([class*="canvas"]):not([class*="-bg"]):not([class*="-ring"]):not([class*="-orb"]):not([class*="-glow"]){position:relative;z-index:1}
/* And make pa-boost's own ::before glow sit below children via negative z-index (works because of isolation:isolate) */
.pa-boost::before{z-index:-1!important}
@keyframes paBoost{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}
[data-theme="dark"] .pa-boost::before{background:radial-gradient(circle,rgba(212,73,170,.28),rgba(212,73,170,.09) 45%,transparent 80%)}

/* Pricing-band variant — cooler blue tilt */
.pa-boost.cool::before{background:radial-gradient(circle,rgba(37,74,173,.22),rgba(37,74,173,.07) 45%,transparent 80%)}
[data-theme="dark"] .pa-boost.cool::before{background:radial-gradient(circle,rgba(37,74,173,.32),rgba(37,74,173,.11) 45%,transparent 80%)}

/* Mobile gating */
@media(max-width:760px){
  .pa-orb-3,.pa-orb-4,.pa-ink-1,.pa-ink-2,.pa-spot{display:none}
  .pa-grid{opacity:.025}
  .pa-boost::before{width:340px;height:340px}
}

/* Reduce-motion */
@media (prefers-reduced-motion: reduce){
  .pa-orb,.pa-ink,.pa-grid,.pa-boost::before{animation:none!important}
  .pa-spot{display:none!important}
}



/* ── Atmosphere v4 — the v2 look at v3 cost. The glows are pre-soft radial
   gradients (no live filter:blur) and the grids drift via transform, but the
   layer keeps v2's placement ABOVE the sections with its multiply/screen
   blends: the screen blend is what lifts the dark theme's luminosity, and
   A/B frame timing showed the blends cost ~nothing — the real expense was
   the live blurs and the background-position paint loops, both gone. ── */
#page-atmosphere{z-index:100!important;pointer-events:none!important;contain:layout style!important}
.pa-orb,.pa-ink{mix-blend-mode:multiply}
[data-theme="dark"] .pa-orb,[data-theme="dark"] .pa-ink{mix-blend-mode:screen}
.pa-grid{mix-blend-mode:multiply;opacity:.05}
[data-theme="dark"] .pa-grid{mix-blend-mode:screen;opacity:.12}
.pa-spot{mix-blend-mode:multiply;opacity:0;transition:opacity .5s}
[data-theme="dark"] .pa-spot{mix-blend-mode:screen}
/* Keep interactive UI above the page stacking games */
.site-nav,.mega-menu,.search-overlay,.modal-overlay,.q-overlay{z-index:200!important;isolation:isolate}
.cat-hero-copy h1,.cat-hero-copy h2,.cat-hero-copy .btn-primary,.cat-hero-copy .btn-outline{position:relative;z-index:200;isolation:isolate}

/* ── MOBILE RESPONSIVENESS PASS — sitewide ─────────────────────────── */
/* Universal box-sizing safety + horizontal overflow killer */
html,body{max-width:100%;overflow-x:hidden}

/* ── ≤980px (tablet) ────────────────────────────────────────────── */
@media(max-width:980px){
  /* Hero collapses to 1-col already; tighten padding */
  .cat-hero-v2{padding:88px 1.25rem 48px!important}
  .cat-hero-grid{grid-template-columns:1fr!important;gap:32px!important}
  .cat-hero-copy h1{font-size:clamp(36px,8vw,56px)!important}
  /* Nav padding tighter */
  .site-nav{padding:14px 18px!important}
  .nav-logo img{max-width:200px!important}
  /* Hero stats — 2 columns */
  .cat-hero-copy .hero-stats{grid-template-columns:repeat(2,1fr)!important;gap:14px!important}
  /* Trust strip — 2 columns */
  .bc-trust-inner{grid-template-columns:repeat(2,1fr)!important;gap:22px!important}
  /* Paths band — 2 columns */
  .bc-paths-grid{grid-template-columns:repeat(2,1fr)!important}
  /* AI Cockpit input + chips wrap */
  .cmdc-input-wrap{flex-wrap:wrap!important}
  .cmdc-chips{justify-content:center!important;gap:8px!important}
  .cmd-chip{font-size:12px!important;padding:8px 14px!important}
  .cmdc-title{font-size:clamp(28px,5vw,44px)!important}
  .cmdc-sub{font-size:15px!important;padding:0 8px!important}
  /* QA grid — stack to 2 */
  .qa-grid-cards{grid-template-columns:repeat(2,1fr)!important}
  /* Biz score, HIW, wink, reviews — generally 1-col */
  .biz-score-inner,.case-block{grid-template-columns:1fr!important;gap:32px!important}
  /* Carousel arrows always visible on touch (no hover) */
  .card-arrow{opacity:.92!important}
  /* Trim atmosphere on tablet */
  .pa-orb-3,.pa-orb-4{opacity:.6!important}
  .pa-spot{display:none!important}
}

/* ── ≤640px (large phone) ─────────────────────────────────────────── */
@media(max-width:640px){
  .cat-hero-v2{padding:80px 1rem 40px!important}
  .cat-hero-copy h1{font-size:clamp(32px,9vw,48px)!important;margin-bottom:18px!important}
  .cat-hero-copy .lede,.cat-hero-copy .cat-hero-sub{font-size:14.5px!important;line-height:1.55!important;margin-bottom:20px!important}
  .cat-hero-copy .breadcrumb{font-size:10px!important;margin-bottom:16px!important}
  .cat-hero-copy .hero-eyebrow{font-size:10px!important;margin-bottom:18px!important;letter-spacing:.14em!important}
  .cat-hero-copy .hero-stats{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;padding-top:14px!important;margin-top:14px!important}
  .cat-hero-copy .hs-val{font-size:22px!important}
  .cat-hero-copy .hs-label{font-size:9px!important;letter-spacing:.04em!important}
  .cat-hero-ctas,.hero-ctas{gap:10px!important}
  .cat-hero-ctas .btn-primary,.hero-ctas .btn-primary{padding:11px 22px!important;font-size:15px!important}
  .cat-hero-ctas .btn-outline,.cat-hero-ctas .btn-ghost,.hero-ctas .btn-outline,.hero-ctas .btn-ghost{padding:11px 18px!important;font-size:10px!important}
  /* Carousel — shorter aspect on phone */
  .carousel-stage{aspect-ratio:4/3!important}
  .card-arrow{width:38px!important;height:38px!important;font-size:24px!important}
  .card-arrow-prev{left:8px!important}
  .card-arrow-next{right:8px!important}
  .card-slide-label{font-size:9px!important;padding:7px 12px!important;bottom:14px!important;left:14px!important}
  .card-dots{bottom:14px!important;right:14px!important}
  /* Trust strip stays at 2 cols, smaller numbers */
  .bc-trust{padding:24px 1rem!important}
  .bc-trust-num{font-size:28px!important}
  .bc-trust-lbl{font-size:10px!important}
  /* Paths grid stays 2 cols, smaller cards */
  .bc-paths{padding:36px 1rem!important}
  .bc-paths-grid{gap:10px!important}
  .path{padding:14px 12px!important}
  .path-label{font-size:12px!important}
  .path-desc{font-size:10px!important}
  .path-icon{width:34px!important;height:34px!important}
  /* AI cockpit input/chips */
  .cmd-section,.cmdc-section{padding:60px 1rem!important}
  .cmdc-input-wrap{flex-direction:column!important;gap:10px!important;border-radius:14px!important;padding:8px!important}
  .cmdc-input-wrap input{font-size:15px!important;padding:12px 14px!important}
  .cmdc-go-btn{width:100%!important;justify-content:center!important;padding:12px!important;font-size:15px!important}
  .cmdc-status-bar{flex-wrap:wrap!important;gap:8px!important;font-size:10px!important}
  .cmdc-chips{padding:0!important;gap:6px!important}
  .cmd-chip{font-size:11px!important;padding:7px 11px!important}
  /* QA grid → 1 col */
  .qa-grid-cards{grid-template-columns:1fr!important;gap:14px!important}
  .qa-title,.bscore-h2,.hiw-title,.wink-title{font-size:clamp(26px,7vw,38px)!important}
  /* Section padding */
  .sec,.section,.cmdc-section,.qa-section,.biz-score-section,.hiw-section,.wink-section,.rev-section,.prefooter,.trust-section{padding-left:1rem!important;padding-right:1rem!important}
  /* Atmosphere — reduce intensity */
  .pa-orb-3,.pa-orb-4{display:none!important}
  .pa-ink-2{display:none!important}
  .pa-grid{opacity:.025!important}
  /* Footer columns stack */
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:24px!important}
  .foot-brand{grid-column:1/-1!important}
  /* Modal sizing */
  .modal-box,.ink-exit-card{padding:24px 18px!important;max-width:100%!important;border-radius:14px!important}
  .modal-title{font-size:22px!important}
}

/* ── ≤420px (small phone) ─────────────────────────────────────────── */
@media(max-width:420px){
  .cat-hero-v2{padding:72px 0.875rem 32px!important}
  .cat-hero-copy h1{font-size:clamp(28px,9vw,40px)!important;letter-spacing:-0.02em!important;line-height:1.08!important}
  .cat-hero-copy .lede,.cat-hero-copy .cat-hero-sub{font-size:14px!important}
  .cat-hero-copy .hero-stats{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .cat-hero-copy .hs-val{font-size:20px!important}
  /* Stack CTAs full width */
  .cat-hero-ctas,.hero-ctas{flex-direction:column!important;align-items:stretch!important}
  .cat-hero-ctas .btn-primary,.cat-hero-ctas .btn-outline,.cat-hero-ctas .btn-ghost,.hero-ctas .btn-primary,.hero-ctas .btn-outline,.hero-ctas .btn-ghost{width:100%!important;text-align:center!important;justify-content:center!important}
  .bc-trust-num{font-size:24px!important}
  .bc-paths-grid{grid-template-columns:1fr!important}
  .qa-title,.bscore-h2,.hiw-title,.wink-title{font-size:clamp(24px,8vw,32px)!important}
  /* Footer stacks fully */
  .foot-grid{grid-template-columns:1fr!important;gap:18px!important}
  /* Atmosphere — minimal on tiny screens */
  .pa-ink-1{opacity:.5!important}
  .pa-orb-1,.pa-orb-2{width:300px!important;height:300px!important}
}


/* ── Mega-menu thumb-art (nav.js) — designed gradient fallback when image is missing ── */
.menu-item-thumb-art{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;position:relative;border-radius:12px 12px 0 0}
.menu-item-thumb-art::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,0.18),transparent 55%),radial-gradient(circle at 82% 82%,rgba(0,0,0,0.22),transparent 55%);pointer-events:none}
.menu-item-thumb-art svg{width:36px;height:36px;fill:none;stroke:rgba(255,255,255,0.92);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:rgba(255,255,255,0.92);position:relative;z-index:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.25));transition:transform 0.45s cubic-bezier(0.16,1,0.3,1)}
.menu-item-thumb-art svg circle[fill="currentColor"],.menu-item-thumb-art svg [fill="currentColor"]{fill:rgba(255,255,255,0.92)}
.menu-item:hover .menu-item-thumb-art svg{transform:scale(1.08)}
.menu-item-thumb-art-chip{font-family:var(--lb);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.7);position:relative;z-index:1;padding:2px 8px;border:1px solid rgba(255,255,255,0.22);border-radius:10px;background:rgba(0,0,0,0.22)}

/* ── Mega menu — dark theme + visible close button + click-outside ── */
[data-theme="dark"] .mega-menu{background:rgba(10,8,16,0.97)!important;backdrop-filter:blur(40px)}
.mega-menu-close{position:absolute;top:22px;right:32px;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.10);border:1px solid var(--border);color:var(--text-heading);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;z-index:5;transition:background .2s,border-color .2s,transform .2s;font-family:"Space Mono",monospace;font-weight:400;opacity:0;pointer-events:none}
[data-theme="dark"] .mega-menu-close{background:rgba(255,255,255,0.06)}
.mega-menu.open .mega-menu-close{opacity:1;pointer-events:auto;transition-delay:.2s}
.mega-menu-close:hover{background:var(--purple);border-color:var(--purple);color:#fff;transform:rotate(90deg) scale(1.05)}
(max-width:640px){.mega-menu-close{top:14px;right:16px;width:38px;height:38px;font-size:18px}}

/* ── Search overlay — light + dark theme readability fix ──────────── */
[data-theme="dark"] .search-overlay{background:rgba(10,8,16,0.94)!important;backdrop-filter:blur(40px)}
.search-overlay.open{backdrop-filter:blur(40px)!important}
/* Input + placeholder */
.search-input{color:var(--text-heading)!important;border-bottom-color:rgba(142,33,202,0.30)!important}
.search-input::placeholder{color:var(--text-caption)!important;opacity:0.85}
.search-input:focus{border-bottom-color:var(--purple)!important}
.search-hint{color:var(--text-body)!important;background:rgba(142,33,202,0.06)!important;border-color:rgba(142,33,202,0.20)!important;font-weight:700}
.search-close{color:var(--text-body)!important;font-weight:700}
.search-close:hover{color:var(--purple)!important}
/* Pills (Business Cards / Logo Design etc.) */
.search-pill{color:var(--text-heading)!important;background:rgba(var(--tc),0.06)!important;border-color:rgba(var(--tc),0.18)!important;font-weight:600}
.search-pill:hover{background:rgba(142,33,202,0.14)!important;border-color:var(--purple)!important;color:var(--purple)!important}
[data-theme="dark"] .search-pill{background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.16)!important}
[data-theme="dark"] .search-pill:hover{background:rgba(142,33,202,0.22)!important;border-color:var(--purple)!important;color:#C58BEB!important}
/* Section labels */
.search-popular-label{color:var(--text-heading)!important;font-weight:700;opacity:0.9}
/* Result cards */
.search-result{border:1px solid rgba(var(--tc),0.10)!important;background:rgba(var(--tc),0.02)!important;border-radius:14px;overflow:hidden}
.search-result:hover{border-color:var(--purple)!important;background:rgba(142,33,202,0.06)!important;transform:translateY(-2px);box-shadow:0 12px 32px rgba(142,33,202,0.16)}
[data-theme="dark"] .search-result{border-color:rgba(255,255,255,0.10)!important;background:rgba(255,255,255,0.03)!important}
[data-theme="dark"] .search-result:hover{background:rgba(142,33,202,0.14)!important}
.sr-name{color:var(--text-heading)!important;font-weight:600;font-size:14px!important}
.sr-desc{color:var(--text-body)!important;font-weight:500;opacity:0.85}
.sr-tag{color:var(--purple)!important;font-weight:700}
/* Result thumb fallback */
.sr-thumb-placeholder{background:linear-gradient(135deg,rgba(142,33,202,0.10),rgba(37,74,173,0.10))!important}
.sr-thumb-placeholder svg{stroke:var(--purple)!important;stroke-width:1.6}
[data-theme="dark"] .sr-thumb-placeholder{background:linear-gradient(135deg,rgba(142,33,202,0.18),rgba(37,74,173,0.18))!important}
[data-theme="dark"] .sr-thumb-placeholder svg{stroke:#C58BEB!important}

/* ── Nav clutter cleanup — A + B ────────────────────────────────── */
/* A: Hide the favorites count when it shows "0" (empty too) */
[data-wish-count]:empty,[data-wish-count]:where(.is-zero){display:none}
[data-wl-quick],[data-ink-search]{position:relative}
/* B: Hide the "Search" word, leave just the icon. Add cursor tooltip via title attr */
.search-btn span{display:none}
.search-btn,.menu-btn[aria-label="Sign in"]{padding:6px 8px;border-radius:8px;transition:background .15s,color .15s}
.search-btn:hover,.menu-btn[aria-label="Sign in"]:hover{background:rgba(142,33,202,0.08);color:var(--purple)}
[data-theme="dark"] .search-btn:hover,[data-theme="dark"] .menu-btn[aria-label="Sign in"]:hover{background:rgba(142,33,202,0.16)}
/* Add title-tooltip-on-hover styling already free via browser tooltip */

  .start-btn{padding:8px 14px!important;font-size:13px!important}
  .start-btn span{display:none}
}

/* ── CTAs · ensure white text on purple-gradient backgrounds (sitewide) ──── */
.btn-primary,.start-btn,.hero-cta,.cmdc-go-btn,.bscore-cta,.qa-cta,.prefooter-cta,.tier-cta,.tier.featured .tier-cta,.modal-submit,.cat-hero-ctas .btn-primary,.hero-ctas .btn-primary,.bc-paths .btn-primary,.btn-p,.dir-cta a,.partner-hero-primary,.svc-hero-ctas .btn-p,.closer-ctas .btn-p,.cta-hero-primary,.get-started-btn,.q-submit{color:#fff!important}
.btn-primary:hover,.start-btn:hover,.hero-cta:hover,.cmdc-go-btn:hover,.bscore-cta:hover,.qa-cta:hover,.prefooter-cta:hover,.tier-cta:hover,.tier.featured .tier-cta:hover,.modal-submit:hover,.cat-hero-ctas .btn-primary:hover,.hero-ctas .btn-primary:hover,.btn-p:hover,.dir-cta a:hover,.partner-hero-primary:hover,.svc-hero-ctas .btn-p:hover,.closer-ctas .btn-p:hover,.q-submit:hover{color:#fff!important}
/* Any anchor/button with inline brand-gradient style → force white */
button[style*="linear-gradient(129deg"],a[style*="linear-gradient(129deg"],button[style*="var(--btn-gradient)"],a[style*="var(--btn-gradient)"]{color:#fff!important}
/* In light mode, also ensure SVG arrows / spans inside CTAs are white */
.btn-primary svg,.start-btn svg,.hero-cta svg,.cmdc-go-btn svg,.bscore-cta svg,.qa-cta svg,.prefooter-cta svg,.tier-cta svg,.btn-p svg{color:#fff!important;fill:currentColor;stroke:currentColor}
.btn-primary span,.start-btn span,.hero-cta span,.btn-p span{color:#fff!important}

/* ── CTA white text — boosted specificity (html body...) so it wins every cascade ──── */
html body .btn-primary,html body .start-btn,html body .hero-cta,html body .cmdc-go-btn,html body .bscore-cta,html body .qa-cta,html body .prefooter-cta,html body .tier-cta,html body .tier.featured .tier-cta,html body .modal-submit,html body .btn-p,html body .dir-cta a,html body .partner-hero-primary,html body .q-submit{color:#fff!important}
html body .btn-primary *,html body .start-btn *,html body .hero-cta *,html body .cmdc-go-btn *,html body .bscore-cta *,html body .qa-cta *,html body .prefooter-cta *,html body .tier-cta *,html body .modal-submit *,html body .btn-p *,html body .dir-cta a *,html body .partner-hero-primary *,html body .q-submit *{color:#fff!important}

/* ── Center the major sections on index ─────────────────────────────── */
.biz-score-section,.prefooter,.wink-section,.hiw-section,.rev-section,.trust-section{text-align:center}
.biz-score-inner{grid-template-columns:1fr!important;text-align:center;margin-left:auto;margin-right:auto;max-width:780px}
.bscore-visual,.bscore-content{margin-left:auto;margin-right:auto;text-align:center}
.bscore-features{justify-content:center!important;margin-left:auto;margin-right:auto}
.prefooter-inner{margin-left:auto;margin-right:auto;text-align:center}
.wink-grid{justify-content:center}
.hiw-step,.hiw-timeline{text-align:center}

/* Sledgehammer center for the prefooter CTA band — every direct child
   forced to center alignment with !important so nothing else in the
   cascade can left-align it. */
section.prefooter{text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
section.prefooter .prefooter-inner{text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:700px!important;width:100%}
section.prefooter .prefooter-inner > *{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
section.prefooter .section-folio{justify-content:center!important;margin-left:auto!important;margin-right:auto!important}
section.prefooter .prefooter-cta{display:inline-flex!important;margin-left:auto!important;margin-right:auto!important}

/* ─── typography aliases (was <style id="ink-hl">) ─── */
:root{--hl:'Bricolage Grotesque',sans-serif;--bd:'Inter',sans-serif;--ac:'Fraunces',serif;--lb:'JetBrains Mono',monospace;} em,i{font-style:normal;} .review-text,.review-quote-mark{font-family:var(--ac);}

/* ─── ambient glow suppression (was <style id="ink-noglow">) ─── */
/* remove ambient purple glow from all non-hero sections (hero keeps its atmosphere) */.convo-glow,.cta-glow,.plans-glow,.contact-glow,.foot-glow,.bscore-glow-1,.bscore-glow-2,.bscore-glow-3,.bscore-ring-bg,.cmdc-glow-1,.cmdc-glow-2,.cmdc-glow-3,.hiw-glow-1,.hiw-glow-2,.hiw-glow-3,.wg1,.wg2,.wg3,.qa-glow-1,.qa-glow-2,.qa-glow-3,.pa-ink-1,.pa-ink-2,.pa-spot,.cg1,.cg2,.cg3,.fg1,.fg2,.fg3,.rg1,.rg2{display:none!important;}

/* ─── responsive polish (was <style id="ink-resp-polish">) ─── */
/* Responsive polish — homepage (added 2026-08-18) */
/* Hero CTAs: stack full-width at very narrow widths */
@media(max-width:420px){
  .hero-cta{width:100%;justify-content:center;text-align:center;}
  .hero-content > div[style*="display:flex"][style*="gap:14px"]{flex-direction:column;width:100%;gap:10px !important;}
}
/* 7-node BScore ring: prevent label overflow past viewport on mobile */
@media(max-width:640px){
  .bscore-node-label{font-size:10px !important;letter-spacing:1px !important;}
  .bscore-visual{overflow:visible;}
}
@media(max-width:480px){
  .bscore-orbit{width:200px !important;height:200px !important;}
  .bscore-node-dot{width:28px !important;height:28px !important;font-size:12px !important;}
  .bscore-node-label{font-size:9px !important;letter-spacing:.5px !important;}
}
/* Trust stats: wrap gracefully on narrow */
@media(max-width:640px){
  .trust-stats{flex-wrap:wrap;justify-content:center;row-gap:12px;}
  .trust-stat-divider{display:none;}
}
/* Footer newsletter: stack cleanly on mobile */
@media(max-width:760px){
  .ink-foot-nl form{width:100%;flex-direction:column;}
  .ink-foot-nl input,.ink-foot-nl button{width:100%;}
}
/* Prefooter CTA + rings: prevent horizontal overflow */
.prefooter,.cta-canvas{overflow:hidden;}
/* Studio mockup: ensure it never pushes viewport wider */
@media(max-width:900px){
  .studio-mockup,.studio-side{max-width:100%;overflow:hidden;}
}
/* Universal: kill any accidental horizontal scroll on mobile */
@media(max-width:640px){
  html,body{overflow-x:hidden;max-width:100vw;}
}

/* ─── page-level block (was an inline <style> in <body>) ─── */
  .hero-verb {
    color: var(--gold);
    border-bottom: 2px solid rgba(142,33,202, 0.25);
    padding-bottom: 2px;
    display: inline-block;
    min-width: 2ch;
    transition: text-shadow 0.6s ease;
  }
  .hero-verb-glow {
    text-shadow:
      0 0 24px rgba(142,33,202,0.55),
      0 0 48px rgba(142,33,202,0.22),
      0 0 80px rgba(142,33,202,0.08);
  }
  .hero-industry {
    
    background: linear-gradient(129deg, var(--purple), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    min-width: 4ch;
    background-size: 200% 100%;
    animation: heroIndustryShimmer 4s ease-in-out infinite;
  }
  @keyframes heroIndustryShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  .hero-line {
    width: 100px;
    height: 1px;
    margin: 40px auto;
    background: linear-gradient(90deg, transparent, rgba(142,33,202,0.37), transparent);
  }
  @keyframes heroScrollDot {
    0%   { opacity: 0; transform: translate(-50%, 0); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 12px); }
  }

/* ══════════════════════════════════════════════════════════════════
   MEGA MENU — lifted verbatim from home.css.

   The prototype mounted the menu into <div id="inkMegaMenuMount"> and let
   js/inkgility-mega-menu.js inject both the chrome and its styles. That file
   does not exist in this repo, so /home-new uses the live home page's menu
   markup instead, and needs the matching CSS.
   ══════════════════════════════════════════════════════════════════ */

    /* === IMMERSIVE MEGA MENU === */
    .mega-menu {
      position: fixed;
      inset: 0;
      z-index: 190;
      background: rgba(var(--oc), 0.96);
      backdrop-filter: blur(40px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 110px 24px 24px;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1)
    }

    .mega-menu.open {
      opacity: 1;
      visibility: visible
    }

    .mega-menu::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
      background-size: 128px 128px;
      pointer-events: none;
      z-index: 0
    }

    .menu-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0
    }

    .menu-orb-1 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(142, 33, 202, 0.08), transparent 70%);
      top: -5%;
      left: 10%;
      animation: menuOrbFloat1 12s ease-in-out infinite
    }

    .menu-orb-2 {
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(142, 33, 202, 0.06), transparent 70%);
      bottom: -5%;
      right: 10%;
      animation: menuOrbFloat2 15s ease-in-out infinite
    }

    .menu-orb-3 {
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(37, 74, 173, 0.05), transparent 70%);
      top: 40%;
      left: 50%;
      transform: translateX(-50%);
      animation: menuOrbFloat3 10s ease-in-out infinite
    }

    [data-theme="dark"] .menu-orb-1 {
      background: radial-gradient(circle, rgba(142, 33, 202, 0.15), transparent 70%)
    }

    [data-theme="dark"] .menu-orb-2 {
      background: radial-gradient(circle, rgba(142, 33, 202, 0.10), transparent 70%)
    }

    [data-theme="dark"] .menu-orb-3 {
      background: radial-gradient(circle, rgba(37, 74, 173, 0.08), transparent 70%)
    }

    @keyframes menuOrbFloat1 {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(30px, 20px)
      }
    }

    @keyframes menuOrbFloat2 {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(-25px, -15px)
      }
    }

    @keyframes menuOrbFloat3 {

      0%,
      100% {
        transform: translate(-50%, 0)
      }

      50% {
        transform: translate(-50%, 25px)
      }
    }

    .menu-inner {
      max-width: 1100px;
      width: 100%;
      position: relative;
      z-index: 1;
      opacity: 0;
      transform: translateY(12px) scale(0.985);
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s
    }

    .mega-menu.open .menu-inner {
      opacity: 1;
      transform: translateY(0) scale(1)
    }

    .menu-cats {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 32px;
      position: relative
    }

    .menu-cats-underline {
      position: absolute;
      bottom: -1px;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), rgba(142, 33, 202, 0.6));
      border-radius: 2px;
      transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1)
    }

    .menu-cat {
      padding: 16px 0;
      text-align: center;
      font-family: 'Space Mono', monospace;
      font-size: 13px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: rgba(var(--tc), 0.55);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.3s
    }

    .menu-cat:hover {
      color: var(--cream)
    }

    .menu-cat.active {
      color: var(--gold);
      border-bottom-color: transparent
    }

    .menu-items {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      max-height: calc(100vh - 370px);
      overflow-y: auto;
      padding-right: 4px;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--tc), 0.12) transparent
    }

    .menu-items::-webkit-scrollbar {
      width: 4px
    }

    .menu-items::-webkit-scrollbar-track {
      background: transparent
    }

    .menu-items::-webkit-scrollbar-thumb {
      background: rgba(var(--tc), 0.12);
      border-radius: 4px
    }

    .menu-items::-webkit-scrollbar-thumb:hover {
      background: rgba(var(--tc), 0.25)
    }

    .menu-item {
      padding: 0;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 0;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      border: 1px solid transparent;
      opacity: 0;
      transform: translateY(8px);
      overflow: hidden;
      text-decoration: none
    }

    .mega-menu.open .menu-item {
      opacity: 1;
      transform: translateY(0)
    }

    .menu-item:hover {
      border-color: rgba(142, 33, 202, 0.15);
      box-shadow: 0 0 20px rgba(142, 33, 202, 0.06), inset 0 0 20px rgba(142, 33, 202, 0.02)
    }

    [data-theme="dark"] .menu-item:hover {
      border-color: rgba(142, 33, 202, 0.25);
      box-shadow: 0 0 24px rgba(142, 33, 202, 0.12), inset 0 0 24px rgba(142, 33, 202, 0.04)
    }

    .menu-item-thumb {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    }

    .menu-item:hover .menu-item-thumb {
      transform: scale(1.06)
    }

    .menu-item-thumb-placeholder {
      width: 100%;
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--dim);
      transition: background 0.25s
    }

    .menu-item:hover .menu-item-thumb-placeholder {
      background: rgba(142, 33, 202, 0.07)
    }

    .menu-item-thumb-placeholder svg {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      stroke: rgba(var(--tc), 0.20);
      fill: none;
      stroke-width: 1.4;
      transition: stroke 0.25s, filter 0.25s
    }

    .menu-item:hover .menu-item-thumb-placeholder svg {
      stroke: var(--gold);
      filter: drop-shadow(0 0 6px rgba(142, 33, 202, 0.3))
    }

    [data-theme="dark"] .menu-item:hover .menu-item-thumb-placeholder svg {
      filter: drop-shadow(0 0 8px rgba(142, 33, 202, 0.4))
    }

    .menu-item-content {
      padding: 10px 12px
    }

    .menu-item-name {
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: rgba(var(--tc), 0.70);
      transition: color 0.25s
    }

    .menu-item:hover .menu-item-name {
      color: var(--cream)
    }

    .menu-item-text {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .menu-item-desc {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.5px;
      color: rgba(var(--tc), 0.45);
      transition: color 0.25s;
      margin-top: 2px
    }

    .menu-item:hover .menu-item-desc {
      color: rgba(var(--tc), 0.35)
    }

    .menu-bottom {
      margin-top: 40px;
      text-align: center;
      padding-top: 24px;
      border-top: 1px solid rgba(var(--tc), 0.04);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.4s 0.25s, transform 0.4s 0.25s
    }

    .mega-menu.open .menu-bottom {
      opacity: 1;
      transform: translateY(0)
    }

    .menu-bottom-link {
      font-family: 'Instrument Serif', serif;
      font-size: 15px;
      font-style: italic;
      color: var(--gold);
      cursor: pointer;
      background: none;
      border: none;
      transition: opacity 0.2s, letter-spacing 0.3s
    }

    .menu-bottom-link:hover {
      opacity: 0.7;
      letter-spacing: 1px
    }


/* ══════════════════════════════════════════════════════════════════
   DESIGN STUDIO SHOWCASE — lifted from home.css (9221-9369).

   Deliberately the live page's version, not the prototype's: the live mock is
   a later revision that matches the real studio (zoom control, full left rail,
   empty-state canvas), and the markup in the Blade view is the live one too —
   they are a matched pair, so the prototype's older .studio-* block is left
   out entirely rather than merged.

   Only two things are rewritten: the hardcoded 'Instrument Serif'/'Space
   Mono'/'DM Sans' stack becomes this page's --ac/--lb/--bd, and var(--bg)
   becomes var(--dark), which is what the prototype calls the page background.
   ══════════════════════════════════════════════════════════════════ */

    .studio-showcase-section{position:relative;padding:120px 24px;background:var(--dark);overflow:hidden}
    .studio-showcase-section::before{content:'';position:absolute;top:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(142,33,202,0.10),transparent 60%);pointer-events:none;z-index:0}
    .studio-showcase-section::after{content:'';position:absolute;bottom:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(37,74,173,0.10),transparent 60%);pointer-events:none;z-index:0}
    .studio-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto}
    .studio-head{text-align:center;max-width:780px;margin:0 auto 64px}
    .studio-eyebrow{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--purple);margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:12px}
    .studio-eyebrow::before,.studio-eyebrow::after{content:'';width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(142,33,202,0.5))}
    .studio-eyebrow::after{background:linear-gradient(90deg,rgba(142,33,202,0.3),transparent)}
    .studio-h2{font-family:var(--ac);font-size:clamp(36px,5vw,58px);font-weight:400;color:var(--text-heading);line-height:1.1;margin-bottom:20px}
    .studio-h2 em{font-style:italic;background:linear-gradient(129deg,var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .studio-lede{font-family:var(--bd);font-size:17px;line-height:1.65;color:var(--muted)}
    /* Mock */
    .studio-mock-wrap{position:relative;margin:0 auto 80px;max-width:1100px}
    .studio-mock{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 80px rgba(0,0,0,0.18),0 8px 20px rgba(142,33,202,0.08);background:#0e0b1f;aspect-ratio:16/9}
    .studio-mock-nav{display:flex;align-items:center;gap:8px;padding:7px 12px;background:linear-gradient(90deg,#3a2d9c 0%,#241a63 55%,#191340 100%);color:#fff;font-family:var(--bd);font-size:11px;letter-spacing:0.3px;border-bottom:1px solid rgba(255,255,255,0.07)}
    .studio-mock-back{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.82);font-size:15px}
    .studio-mock-logo{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
    .studio-mock-logo img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
    .studio-mock-wordmark{font-family:var(--bd);font-weight:600;font-size:12px;letter-spacing:.2px;color:#fff}
    .studio-mock-format-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);padding:5px 10px 5px 12px;border-radius:18px;font-size:10px;color:#fff;margin-left:12px}
    .studio-mock-format-pill strong{font-weight:600}
    .studio-mock-format-pill .sub{opacity:.6;margin-left:4px}
    .studio-mock-format-pill::after{content:"▾";font-size:9px;opacity:.7;margin-left:2px}
    .studio-mock-doctitle{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:5px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:18px;font-size:10px;color:rgba(255,255,255,0.9)}
    .studio-mock-doctitle svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.7;opacity:.7}
    .studio-mock-nav-tools{display:flex;gap:5px;margin-left:auto;align-items:center}
    .studio-mock-nav-icon{width:23px;height:23px;border-radius:6px;background:rgba(255,255,255,0.07);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.82);font-size:11px}
    .studio-mock-nav-more{display:none}
    .studio-mock-zoom{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:2px 4px;color:#fff;font-size:10px}
    .studio-mock-zoom span{padding:0 5px}
    .studio-mock-zoom b{font-weight:600;min-width:30px;text-align:center;font-size:9px}
    .studio-mock-nav-dl{display:inline-flex;align-items:center;gap:4px;color:#fff;font-size:10px;font-weight:600;padding:4px 8px;border-radius:8px}
    .studio-mock-nav-share{color:#fff;font-size:10px;font-weight:600;padding:4px 8px;border-radius:8px}
    .studio-mock-nav-order{font-family:var(--ac);font-style:italic;background:transparent;color:#cbb1ff;border:1px solid rgba(180,150,255,0.55);padding:4px 13px;border-radius:14px;font-size:12px;font-weight:400}
    .studio-mock-nav-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#8E21CA,#5F2EBF);color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,0.5)}
    .studio-mock-body{display:grid;grid-template-columns:64px 1fr;height:calc(100% - 40px - 36px)}
    .studio-mock-rail{background:#120e26;border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0;overflow:hidden}
    .studio-mock-rail-item{width:50px;padding:6px 0 5px;border-radius:9px;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(255,255,255,0.55);font-size:7.5px;font-family:var(--bd);text-align:center;line-height:1}
    .studio-mock-rail-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
    .studio-mock-rail-item.active{background:linear-gradient(135deg,rgba(142,33,202,0.32),rgba(95,46,191,0.20));color:#fff}
    .studio-mock-rail-item.active svg{color:#c5a3ff}
    .studio-mock-rail-bottom{margin-top:auto}
    .studio-mock-rail-more{display:none}
    .studio-mock-rail-more svg circle{fill:currentColor;stroke:none}
    .studio-mock-canvas{background:#0e0b1f;display:flex;align-items:center;justify-content:center;position:relative;padding:24px}
    .studio-mock-empty{width:min(92%,470px);text-align:center;color:#fff}
    .studio-mock-empty-h{font-family:var(--ac);font-size:clamp(22px,3vw,32px);font-weight:400;color:#fff;margin:0 0 6px;line-height:1.05}
    .studio-mock-empty-sub{font-family:var(--bd);font-size:11px;color:rgba(255,255,255,0.55);margin:0 0 16px}
    .studio-mock-empty-input{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.16);border-radius:26px;padding:5px 5px 5px 14px;margin-bottom:14px}
    .studio-mock-empty-input .spark{color:#a875ff;font-size:13px}
    .studio-mock-empty-input .ph{flex:1;text-align:left;font-family:var(--bd);font-size:11px;color:rgba(255,255,255,0.45)}
    .studio-mock-empty-go{background:linear-gradient(135deg,#8E21CA,#254AAD);color:#fff;font-family:var(--bd);font-weight:600;font-size:11px;padding:9px 16px;border-radius:20px}
    .studio-mock-empty-or{display:flex;align-items:center;gap:10px;width:64%;margin:0 auto 14px;color:rgba(255,255,255,0.4);font-family:var(--bd);font-size:9px;letter-spacing:1.5px;text-transform:uppercase}
    .studio-mock-empty-or::before,.studio-mock-empty-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.12)}
    .studio-mock-empty-actions{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
    .studio-mock-empty-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,0.18);background:transparent;color:rgba(255,255,255,0.85);font-family:var(--bd);font-size:11px;padding:8px 14px;border-radius:10px}
    .studio-mock-empty-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
    .studio-mock-empty-cap{font-family:var(--bd);font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin:0 0 9px}
    .studio-mock-empty-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:400px;margin:0 auto}
    .studio-mock-empty-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.78);font-family:var(--bd);font-size:10px;padding:5px 10px;border-radius:999px}
    .studio-mock-pages{height:36px;background:#120e26;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;gap:8px;padding:0 14px}
    .studio-mock-page-thumb{width:34px;height:22px;border-radius:3px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.06);position:relative}
    .studio-mock-page-thumb.active{background:rgba(142,33,202,0.35);border-color:var(--purple)}
    .studio-mock-page-thumb.add{background:transparent;border:1px dashed rgba(255,255,255,0.22);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);font-size:11px}
    .studio-mock-pages-right{margin-left:auto;display:flex;align-items:center;gap:8px}
    .studio-mock-pages-btn{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,0.72);font-family:var(--bd);font-size:10px;padding:5px 11px;border-radius:8px;border:1px solid rgba(255,255,255,0.12)}
    .studio-mock-pages-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7}
    /* Callouts */
    .studio-callout{position:absolute;font-family:var(--lb);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--purple);background:var(--dark);border:1px solid rgba(142,33,202,0.35);padding:6px 10px;border-radius:14px;white-space:nowrap;box-shadow:0 4px 16px rgba(142,33,202,0.18);z-index:3}
    .studio-callout-1{top:8%;left:-4%}
    .studio-callout-2{top:32%;left:-8%}
    .studio-callout-3{top:62%;left:-2%}
    .studio-callout-4{top:14%;right:-6%}
    .studio-callout-5{top:46%;right:-10%}
    .studio-callout-6{bottom:8%;right:-4%}
    .studio-callout-lines{position:absolute;inset:0;pointer-events:none;z-index:2}
    .studio-callout-lines line{stroke:rgba(142,33,202,0.45);stroke-width:1;stroke-dasharray:3 3}
    /* Triple CTA */
    .studio-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
    .studio-cta-primary{font-family:var(--ac);font-style:italic;font-size:17px;padding:14px 32px;border-radius:60px;background:linear-gradient(129deg,var(--purple),var(--blue));color:#fff!important;text-decoration:none;transition:all .3s;border:1px solid transparent;box-shadow:0 8px 24px rgba(142,33,202,0.28)}
    .studio-cta-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(142,33,202,0.4)}
    .studio-cta-ghost{font-family:var(--ac);font-style:italic;font-size:17px;padding:14px 32px;border-radius:60px;background:transparent;color:var(--text-heading);text-decoration:none;border:1px solid rgba(var(--tc),0.22);transition:all .3s}
    .studio-cta-ghost:hover{border-color:var(--purple);color:var(--purple)}
    /* 3 Cards */
    .studio-ways{margin-top:96px}
    .studio-ways-sub{font-family:var(--lb);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--purple);text-align:center;margin-bottom:10px}
    .studio-ways-h3{font-family:var(--ac);font-size:clamp(28px,3.4vw,40px);font-weight:400;color:var(--text-heading);text-align:center;margin-bottom:48px}
    .studio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .studio-card{background:var(--card-bg,rgba(255,255,255,0.6));border:1px solid var(--border);border-radius:18px;padding:32px 28px;transition:all .35s;position:relative;overflow:hidden}
    [data-theme="dark"] .studio-card{background:rgba(255,255,255,0.03)}
    .studio-card:hover{transform:translateY(-4px);border-color:rgba(142,33,202,0.4);box-shadow:0 18px 48px rgba(142,33,202,0.12)}
    .studio-card-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,rgba(142,33,202,0.12),rgba(37,74,173,0.08));display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--purple)}
    .studio-card-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
    .studio-card-h4{font-family:var(--ac);font-size:24px;font-weight:400;color:var(--text-heading);margin-bottom:10px;line-height:1.2}
    .studio-card-desc{font-family:var(--bd);font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:22px;min-height:46px}
    .studio-card-cta{font-family:var(--lb);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--purple);text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid rgba(142,33,202,0.3);border-radius:30px;transition:all .25s}
    .studio-card-cta:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
    @media (max-width:900px){
      /* Same treatment as the wink-grid cards: one narrow centered column,
         content centered — not full-width left-aligned slabs. */
      .studio-cards{grid-template-columns:1fr;max-width:420px;margin:0 auto}
      .studio-card{text-align:center}
      .studio-card-icon{margin-left:auto;margin-right:auto}
      .studio-callout{display:none}
      .studio-mock-body{grid-template-columns:54px 1fr}
      .studio-mock-doctitle,.studio-mock-nav-share{display:none}
      .studio-showcase-section{padding:80px 18px}
      .studio-ways{margin-top:64px}
    }
    /* ── Phone: mirror the Studio's mobile layout — canvas-first column with a
       horizontal bottom tab bar (Templates · AI hero · Uploads · Apps) ── */
    @media (max-width:600px){
      .studio-mock{aspect-ratio:auto;height:560px;display:flex;flex-direction:column;padding-bottom:54px}
      /* Compact top nav — drop secondary tools behind a ⋯, Download icon-only */
      .studio-mock-nav{padding:7px 10px;gap:6px}
      .studio-mock-wordmark,.studio-mock-format-pill,.studio-mock-zoom,
      .studio-mock-nav-order,
      .studio-mock-nav-icon[title="Undo"],.studio-mock-nav-icon[title="Redo"],
      .studio-mock-nav-icon[title="History"],.studio-mock-nav-icon[title="Grid"],
      .studio-mock-nav-icon[title="Image"],.studio-mock-nav-icon[title="Layers"],
      .studio-mock-nav-icon[title="Fullscreen"],.studio-mock-nav-icon[title="Add"],
      .studio-mock-nav-icon[title="Pages"]{display:none}
      .studio-mock-doctitle{display:inline-flex;flex:1;min-width:0;margin-left:6px;overflow:hidden;white-space:nowrap}
      .studio-mock-nav-dl .dl-txt{display:none}
      .studio-mock-nav-dl{padding:4px 6px}
      .studio-mock-nav-more{display:inline-flex}
      /* Body becomes a single canvas column; rail moves to the bottom */
      .studio-mock-body{display:flex;grid-template-columns:none;flex:1;min-height:0;height:auto}
      .studio-mock-canvas{flex:1;padding:18px 14px}
      /* Bottom page strip: thumbs only */
      .studio-mock-pages{height:34px}
      .studio-mock-pages-right{display:none}
      /* Rail → fixed horizontal bottom tab bar */
      .studio-mock-rail{position:absolute;left:0;right:0;bottom:0;z-index:4;width:auto;height:54px;flex-direction:row;align-items:center;justify-content:space-around;gap:0;padding:0 8px;border-right:none;border-top:1px solid rgba(255,255,255,0.07);overflow:visible}
      .studio-mock-rail-item{flex:0 0 auto;width:auto;padding:5px 6px;font-size:8px}
      .studio-mock-rail-item svg{width:19px;height:19px}
      .studio-mock-rail-bottom{margin-top:0}
      /* Show Projects · Templates · AI · Uploads · More; AI becomes the elevated hero */
      .studio-mock-rail-item:nth-child(3),.studio-mock-rail-item:nth-child(4),
      .studio-mock-rail-item:nth-child(5),.studio-mock-rail-item:nth-child(7),
      .studio-mock-rail-item:nth-child(9),
      .studio-mock-rail-item:nth-child(10),.studio-mock-rail-item:nth-child(11){display:none}
      .studio-mock-rail-more{display:flex}
      .studio-mock-rail-item:nth-child(8){order:-1}  /* Projects → first, matching design-studio */
      .studio-mock-rail-item.active{width:46px;height:46px;border-radius:50%;padding:0;transform:translateY(-12px);justify-content:center;background:linear-gradient(135deg,#8E21CA,#5F2EBF);border:3px solid #120e26;box-shadow:0 8px 20px rgba(142,33,202,0.45)}
      .studio-mock-rail-item.active svg{width:21px;height:21px;color:#fff}
      .studio-mock-rail-item.active span{display:none}
      /* Empty state: tighten for the narrow canvas, hide industry chips */
      .studio-mock-empty-h{font-size:22px}
      .studio-mock-empty-or{width:80%}
      .studio-mock-empty-actions{flex-wrap:wrap}
      .studio-mock-empty-cap,.studio-mock-empty-chips{display:none}
    }

/* ══════════════════════════════════════════════════════════════════
   Plans grid — additions for live data.

   The prototype's six cards were hand-written and every bullet was a feature
   the plan HAD, so .plan-feats li unconditionally draws a gradient tick. Real
   plan rows also carry features a tier does NOT include (is_included = false),
   which the tick would misrepresent as included.

   Two grids rather than one, and a Teams note, both come from the same change
   — see the comment in public/js/home-new.js.
   ══════════════════════════════════════════════════════════════════ */

.plan-feats li.is-excluded {
  color: rgba(var(--tc), 0.38);
}

.plan-feats li.is-excluded::before {
  background: rgba(var(--tc), 0.10);
  /* A dash, not a tick — the shape has to disagree with "included". */
  -webkit-mask: none;
  mask: none;
  box-shadow: inset 0 0 0 1px rgba(var(--tc), 0.12);
}

.plan-feats li.is-excluded::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(var(--tc), 0.34);
}

.plans-teams-note {
  text-align: center;
  font-family: var(--bd);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(var(--tc), 0.55);
  max-width: 760px;
  margin: 0 auto 26px;
}

.plans-foot {
  text-align: center;
  margin-top: 32px;
  font-family: var(--bd);
  font-size: 13px;
  color: rgba(var(--tc), 0.55);
}

.plans-foot a {
  color: var(--purple);
  text-decoration: none;
  border-bottom: 1px solid rgba(142, 33, 202, 0.35);
}

/* The grids are swapped with [hidden], which a display:grid rule would beat. */
.plans-grid[hidden],
.plans-teams-note[hidden] {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════
   Design Studio showcase — corrections on top of the block borrowed
   from home.css.
   ══════════════════════════════════════════════════════════════════ */

/* 1. The mock's chrome was measured for the live page's narrower type stack
      ('DM Sans'). Re-set in Inter the same strings are wider, so "Business
      Card", "3.5 x 2 in" and "Order Print" each wrapped to a second line — and
      a taller nav is what then pushed the pages bar out of a fixed 16/9 box and
      under overflow:hidden. Stop the wrapping at the source. */
.studio-mock-nav {
  flex-wrap: nowrap;
  min-height: 40px;
}

.studio-mock-format-pill,
.studio-mock-format-pill strong,
.studio-mock-format-pill .sub,
.studio-mock-nav-order,
.studio-mock-nav-dl,
.studio-mock-nav-share,
.studio-mock-wordmark,
.studio-mock-zoom {
  white-space: nowrap;
  flex-shrink: 0;
}

/* The document title is the one piece allowed to lose room rather than wrap. */
.studio-mock-doctitle {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2. Height by layout, not by arithmetic. The borrowed rule was
      height:calc(100% - 40px - 36px) — two magic numbers that have to match the
      nav and pages bars exactly and stop matching the moment either changes.
      A flex column lets the body take whatever is left, so the pages bar is
      always the last thing on screen and can never be clipped. */
.studio-mock {
  display: flex;
  flex-direction: column;
}

.studio-mock-nav,
.studio-mock-pages {
  flex: 0 0 auto;
}

.studio-mock-body {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* 3. The canvas shows the reference page's business-card artwork and its
      floating text toolbar rather than the live page's empty state, so those
      rules come across from the reference page's own stylesheet. */
.studio-mock-canvas {
  position: relative;
}

.studio-mock-card{width:min(58%,380px);aspect-ratio:1.75/1;background:linear-gradient(135deg,#fff 0%,#f4eeff 100%);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.5);padding:22px;display:flex;flex-direction:column;justify-content:space-between;color:#1a1530;position:relative;overflow:hidden}
.studio-mock-card::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(142,33,202,0.18),transparent 70%)}
.studio-mock-card-brand{font-family:var(--hl);font-size:22px;color:var(--purple);position:relative;z-index:1}
.studio-mock-card-info{font-family:var(--bd);font-size:9px;line-height:1.5;color:#3b2a5e;position:relative;z-index:1}
.studio-mock-card-info strong{display:block;font-size:11px;color:#1a1530;margin-bottom:2px}
.studio-mock-floattb{position:absolute;left:50%;top:calc(50% - 120px);transform:translateX(-50%);background:#fff;border-radius:8px;padding:5px 7px;box-shadow:0 8px 28px rgba(0,0,0,0.35),0 2px 6px rgba(0,0,0,0.18);display:flex;align-items:center;gap:4px;font-family:var(--bd);font-size:10px;color:#1a1218}
.studio-mock-floattb::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:#fff;border-right:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
.studio-mock-floattb .ft-sel{padding:3px 7px;border:1px solid rgba(26,18,24,.16);border-radius:5px;font-size:9px;display:inline-flex;align-items:center;gap:3px}
.studio-mock-floattb .ft-sel::after{content:"▾";font-size:7px;opacity:.6}
.studio-mock-floattb .ft-num{width:26px;padding:3px 4px;border:1px solid rgba(26,18,24,.16);border-radius:5px;font-size:9px;text-align:center}
.studio-mock-floattb .ft-col{width:14px;height:14px;border-radius:3px;background:#8E21CA;border:1px solid rgba(26,18,24,.18)}
.studio-mock-floattb .ft-btn{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;font-size:10px;color:#3a3a55;font-weight:600}
.studio-mock-floattb .ft-btn.active{background:rgba(142,33,202,.18);color:#8E21CA}
.studio-mock-floattb .ft-btn.b{font-weight:800}
.studio-mock-floattb .ft-btn.i{}
.studio-mock-floattb .ft-btn.u{text-decoration:underline}
.studio-mock-floattb .ft-sep{width:1px;height:14px;background:rgba(26,18,24,.14)}
.studio-mock-floattb .ft-more{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;color:#3a3a55;font-weight:700}
.studio-mock-floattb{top:calc(50% - 90px);transform:translateX(-50%) scale(.85);transform-origin:center bottom}


/* ══════════════════════════════════════════════════════════════════
   Header logo.

   The reference page drove this with content:url() on a single <img> — one
   element, the file swapped per theme — but hot-linked both files off
   www.inkgility.com, so the header depended on production being up and on
   those paths never moving. Same mechanism, local files (fixed above).

   What the reference page did NOT do is swap to the compact mark on narrow
   viewports; it only scaled the full wordmark down, which at phone widths
   leaves the tagline unreadable. The live home page carries a compact cut for
   exactly this, so wire it in through the same mechanism at the live page's
   own 640px breakpoint.
   ══════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 640px) {
  .nav-logo img {
    content: url('/theme/site/assets/inkgility-logo-compact.svg?v=2');
    /* Sized like the live home page's mobile mark: width-driven at
       min(240px, 48vw), not a fixed height. max-width needs !important only
       to beat the ported 980px block's max-width:200px!important above. */
    width: min(240px, 48vw);
    height: auto;
    max-width: none !important;
  }

  [data-theme="dark"] .nav-logo img {
    content: url('/theme/site/assets/inkgility-logo-compact-white.svg');
  }
}

/* The live home page's own guard: on the narrowest phones the mark also yields
   to the nav's side clusters so it never collides with them. */
@media screen and (max-width: 430px) {
  .nav-logo img {
    width: min(240px, 48vw, calc(100vw - 190px));
  }
}

/* The floating toolbar sat at top:calc(50% - 120px) in the reference page — an
   offset tuned to that page's shorter canvas. This canvas is taller, so the
   same number dropped the toolbar 23px INTO the card it is supposed to hover
   above. Centre both in a column instead and the gap holds at any canvas
   height. position:relative rather than static so the little pointer arrow
   (::after) stays anchored to the toolbar. */
.studio-mock-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.studio-mock-floattb {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════
   Mobile header — matched to the live home page.

   Two differences, both of which showed up on a real phone:

   1. The reference page kept "Get Started" in the header all the way down to
      420px, shrinking it and dropping its label along the way. The live page
      drops it at 900px instead, and it is right to: below that the button is
      competing with Menu, search and sign-in for the same row, and the same
      CTA is repeated in the hero, the pre-footer and the sticky mobile bar. So
      nothing is lost by removing it and the row stops being cramped.

   2. Plain `1fr` tracks do not shrink below their content, so the moment the
      left or right cluster is wider than its share the middle track — the
      logo — slides off centre. minmax(0, 1fr) lets both sides give way, which
      is what actually keeps the logo centred on small phones. Same fix, and
      the same 430px breakpoint, as the live page.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .start-btn {
    display: none;
  }
}

@media (max-width: 640px) {
  .nav-left .theme-toggle {
    width: 28px;
    height: 28px;
  }

  .nav-left {
    gap: 12px;
  }
}

@media (max-width: 430px) {
  .site-nav {
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .nav-left,
  .nav-right {
    gap: 6px;
  }

  .menu-btn {
    font-size: 12px;
    letter-spacing: 2px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Command bar under the hero — mobile.

   The reference page's ≤640px block already meant to stack the input and the
   Go button, but it only half did it: it set flex-direction:column on
   .cmdc-input-wrap, which is not a flex container, and width:100% on the Go
   button, which is still position:absolute + top:50% + translateY(-50%). A
   full-width absolutely-positioned button centred over the field covers the
   field completely — you could type, but never see what you typed.

   Two declarations it was missing: make the wrap an actual flex column, and
   take the button out of absolute positioning so it flows underneath. The
   input's 130px right padding also goes, since nothing overlaps it any more.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .cmdc-input-wrap {
    display: flex;
  }

  .cmdc-input-wrap input {
    padding-right: 14px !important;
  }

  .cmdc-go-btn {
    position: static !important;
    transform: none !important;
  }

  .cmdc-go-btn:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Hero headline on phones — matched to the live home page.

   The reference page stepped the headline DOWN twice: a 28px floor at 640px,
   then clamp(24px,7vw,36px) at 420px — about 27px on a 390px phone. The live
   page holds a 38px floor and never shrinks again, so the headline stays the
   loudest thing above the fold. Appended after both ported rules; same
   specificity, later in the file, so it wins at every phone width.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(38px, 8vw, 48px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   Client logo slider — chip rules for the live page's server-rendered
   inline-SVG marks.

   The ported chip CSS was written for the reference page's chips: a 22px
   Clearbit <img> plus a text name. The live page's chips are a single ~150px
   inline SVG wordmark and nothing else, so without these rules every logo
   renders at the SVG's intrinsic size and in whatever fill the artwork was
   exported with.

   The fills are forced to a muted single tone per theme — the marks are
   mixed-source artwork (some black, some full colour), and a "trusted by"
   strip works as texture, not as 25 competing brand palettes. Same values as
   the live page. This page's :root palette is LIGHT; [data-theme="dark"] is
   the override, so the fills follow the same split.
   ══════════════════════════════════════════════════════════════════ */

.ticker-chip svg {
  width: 150px;
  height: auto;
  display: block;
}

.ticker-chip svg path,
.ticker-chip svg g,
.ticker-chip svg polygon,
.ticker-chip svg rect {
  fill: rgba(34, 33, 31, 0.62) !important;
}

[data-theme="dark"] .ticker-chip svg path,
[data-theme="dark"] .ticker-chip svg g,
[data-theme="dark"] .ticker-chip svg polygon,
[data-theme="dark"] .ticker-chip svg rect {
  fill: rgba(255, 253, 249, 0.62) !important;
}

/* ══ PERFORMANCE PATCH (ported from home.css) ═══════════════════════
   1) content-visibility:auto — below-fold sections skip render work AND
      their animations pause while offscreen (auto-resumed near viewport;
      contain-intrinsic-size keeps the scrollbar stable).
   2) Phones: the big orbs/inks/boost glows stay visible but stop
      animating — large layers re-compositing every frame are the single
      biggest mobile cost.
   (The atmosphere itself was rebuilt above: gradients instead of live
   blur, no blend modes, behind the content, transform-driven grid.) */
.biz-score-section,.cmd-section,.contact-section,.faq-section,.hiw-section,.prefooter,.plans-section,.qa-section,.rev-section,.studio-showcase-section,.trust-section,.wink-section{content-visibility:auto;contain-intrinsic-size:auto 900px}
@media(max-width:760px){
  .pa-orb,.pa-ink{animation:none!important}
  .pa-boost::before{animation:none!important;opacity:.6}
}
/* Accessibility + battery: kill decorative motion when the OS asks */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}