/* Self-hosted fonts (no Google CDN — keeps visitor IPs off Google's servers,
   GDPR-safe). Inlined here (was @import of fonts.css) to avoid a render-blocking
   request chain. Paths are relative to this file (assets/css/). */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#08050f;
  --panel:#0f0b1a;
  --card:#151023;
  --purple:#3d1f8a;
  --purple2:#5a3aaf;
  --purple3:#7c5cd4;
  --teal:#00b8a0;
  --teal2:#00d4ba;
  --teal3:#00edd4;
  --white:#ffffff;
  --dim:#ffffff;   /* client: all body/secondary text is white for readability (was 42% grey) */
  --dimmer:#ffffff;/* client: all faint/label text is white for readability (was 18% grey) */
  --border:rgba(255,255,255,0.07);
  --border-teal:rgba(0,184,160,0.2);
  --border-purple:rgba(61,31,138,0.35);
  --border-purple-hi:rgba(61,31,138,1); /* gradient purple (#3d1f8a) hover highlight for cards — matches the hero gradient */
  --accent:#00d4ba;
  --accent-soft:rgba(0,212,186,.5);
}
html{scroll-behavior:smooth;background:#000;min-height:100%}
/* The page background is solid black; only the HERO carries the left-to-right
   purple-to-teal gradient (see the "SINGLE GRADIENT" block at the end of this
   file, where the hero gradient and the unified black surfaces are defined). */
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:#000;min-height:100vh;color:var(--white);overflow-x:hidden;line-height:1.6;letter-spacing:-.01em}
/* Brand typography (approved 2026-06): Outfit for headings, Hanken Grotesk for body (self-hosted, see assets/fonts/fonts.css). Body tracking -10 (-.01em). Headings now use .008em site-wide to match the approved Fund./Build./Protect. hero treatment (was -.023em per the original brand manual; client preferred the more open spacing). */
h1,h2,h3,h4,h5,h6{font-family:'Outfit',system-ui,sans-serif;letter-spacing:.008em}
/* Native <select> dropdown popups default to a white background. The selects are
   styled dark with white text, so without this the open option list renders
   white-on-white. Force readable dark text on a white popup for every select. */
select option{background:#ffffff;color:#1a1a2e}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 5%}
.nav-blur{position:absolute;inset:0;background:rgba(8,5,15,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:-1;transition:background .25s,border-color .25s,backdrop-filter .25s}
nav.scrolled .nav-blur{background:rgba(8,5,15,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.logo-img{filter:none}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.1}
.nav-logo-text span:first-child{font-size:.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff}
.nav-logo-text span:last-child{font-size:.88rem;font-weight:800;letter-spacing:.5px;color:var(--white)}
.nav-links{display:flex;align-items:center;gap:0.9rem}
.nav-links a{color:var(--white);text-decoration:none;font-size:.78rem;font-weight:500;letter-spacing:.3px;transition:color .2s;position:relative}
.nav-links a:hover{color:var(--teal)}
.nav-links a.active{color:var(--teal)}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:-1rem;background:var(--panel);border:1px solid var(--border-purple);border-radius:10px;padding:.5rem;min-width:220px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,transform .2s;z-index:200}
.nav-dropdown-menu::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;pointer-events:all;transform:translateY(0)}
.nav-dropdown-menu a{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border-radius:6px;color:var(--dim);font-size:.82rem;transition:background .15s,color .15s}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,.05);color:var(--white)}
.nav-dropdown-menu .dd-icon{font-size:.9rem;width:22px;text-align:center}
.nav-cta{display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(135deg,#4a2aa0,#3d1f8a);color:#fff!important;padding:.55rem 1.2rem;border-radius:999px;font-weight:600!important;font-size:.78rem!important;letter-spacing:-.1px;text-transform:none;border:1px solid rgba(124,92,212,.5);box-shadow:0 8px 22px rgba(61,31,138,.5),inset 0 1px 0 rgba(255,255,255,.45);transition:background .22s,border-color .22s,transform .15s!important}
.nav-cta:hover{background:linear-gradient(135deg,#5e38c0,#4a2aa0);border-color:rgba(124,92,212,.7);transform:translateY(-1px)}

/* ── BUTTONS (glass pill) ── */
.btn-teal,.btn-primary{display:inline-flex;align-items:center;gap:.5rem;font-family:inherit;background:linear-gradient(135deg,#4a2aa0,#3d1f8a);color:#fff;padding:.95rem 1.7rem;border-radius:999px;font-weight:600;font-size:.92rem;text-decoration:none;text-transform:none;letter-spacing:-.1px;border:1px solid rgba(124,92,212,.5);box-shadow:0 14px 34px rgba(61,31,138,.5),inset 0 1px 0 rgba(255,255,255,.45);transition:background .22s,border-color .22s,transform .15s;white-space:nowrap}
.btn-teal:hover,.btn-primary:hover{background:linear-gradient(135deg,#5e38c0,#4a2aa0);border-color:rgba(124,92,212,.7);transform:translateY(-2px)}
/* Teal CTA variant (e.g. homepage hero 'Book a call') — overrides the purple primary to give a purple-to-teal feel across the hero buttons */
.btn-teal-cta{background:linear-gradient(135deg,rgba(0,212,186,.9),rgba(0,184,160,.78));color:#062826;border-color:rgba(0,237,212,.55);box-shadow:0 14px 34px rgba(0,184,160,.28),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-teal-cta:hover{background:linear-gradient(135deg,rgba(0,237,212,.98),rgba(0,212,186,.88));border-color:rgba(0,237,212,.85)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:#fff;padding:.95rem 1.7rem;border-radius:999px;font-weight:500;font-size:.92rem;text-decoration:none;text-transform:none;letter-spacing:-.1px;border:1px solid var(--teal);transition:background .22s,border-color .22s,transform .15s;white-space:nowrap}
.btn-ghost:hover{background:rgba(0,184,160,.12);border-color:var(--teal2);color:#fff;transform:translateY(-2px)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* ── SECTION COMMON ── */
.sec-lbl{font-size:.68rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:1.25rem}
.sec-h{font-size:clamp(2rem,4vw,3.5rem);font-weight:900;letter-spacing:.008em;line-height:1.05;margin-bottom:1rem}
.sec-p{font-size:.95rem;color:var(--dim);line-height:1.8;max-width:580px}
.sec-center{text-align:center}
.sec-center .sec-p{margin-left:auto;margin-right:auto}

/* ── MARQUEE ── */
.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(61,31,138,0.06);padding:1.1rem 0}
.mq-track{display:flex;gap:2.5rem;width:max-content;animation:mq 28s linear infinite}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{font-size:.68rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:1rem}
.mq-sep{color:var(--teal);font-size:.4rem}

/* ── STATS BAND ── */
.stats-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(61,31,138,.25),rgba(0,184,160,.06));display:grid;grid-template-columns:repeat(3,1fr)}
.stat-cell{padding:55px 20px;text-align:center;border-right:1px solid var(--border)}
.stat-cell:last-child{border-right:none}
.stat-num{font-size:3rem;font-weight:900;letter-spacing:-2px;line-height:1;display:block;background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:.65rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);margin-top:.5rem;display:block}

/* ── CARDS ── */
.card-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;align-items:start}
.card-grid-3{grid-template-columns:repeat(3,1fr);max-width:1100px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--border-purple);border-radius:12px;padding:2rem;transition:border-color .25s,transform .2s;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--teal2));transform:scaleX(0);transform-origin:left;transition:transform .35s}
.card:hover{border-color:var(--border-purple-hi);transform:translateY(-3px)}
.card:hover::after{transform:scaleX(1)}
.card-icon{font-size:1.8rem;margin-bottom:1.25rem;display:block}
.card h3{font-size:1rem;font-weight:700;margin-bottom:.6rem;letter-spacing:.008em}
.card p{font-size:.85rem;color:var(--dim);line-height:1.7}

/* ── SERVICE HERO (inner pages) ── */
.page-hero{padding:160px 5% 100px;position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#1a0533 0%,#2d1065 25%,#3d1f8a 50%,#007a8a 75%,#00b8a0 100%)}
/* With the motion system on, drop the opaque hero fill to a translucent scrim so
   the living aurora (fixed, z-index:0) glows through the inner hero like it does
   on the homepage. The scrim keeps headline/sub contrast over the brighter
   teal end of the gradient. Static fallback keeps the original solid gradient. */
.motion-on .page-hero{background:linear-gradient(135deg,rgba(10,4,24,.62),rgba(13,11,26,.42) 55%,rgba(0,40,46,.5))}
.page-hero::before{content:'';position:absolute;inset:0;background:var(--hero-photo) center/cover no-repeat;opacity:.10;filter:grayscale(.35) brightness(.65);mix-blend-mode:overlay;z-index:0}
.page-hero-mesh{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 70% at 10% 50%,rgba(61,31,138,.25) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 90% 30%,rgba(0,184,160,.15) 0%,transparent 55%);pointer-events:none}
.page-hero-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.page-hero-inner{position:relative;z-index:2;max-width:700px}
.page-hero-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border-teal);background:rgba(0,184,160,.07);color:var(--teal);font-size:.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:.4rem 1rem;border-radius:100px;margin-bottom:1.75rem}
.page-hero h1{font-size:clamp(2.8rem,6vw,5.5rem);font-weight:900;letter-spacing:.008em;line-height:.95;margin-bottom:1.5rem}
.page-hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero-p{font-size:1.05rem;color:var(--dim);line-height:1.8;max-width:560px;margin-bottom:2.5rem}

/* ── BREADCRUMB ── */
.breadcrumb{position:static;height:auto;z-index:auto;justify-content:flex-start;display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--dimmer);padding:1.25rem 5%;border-bottom:1px solid var(--border)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.breadcrumb li{display:flex;align-items:center;gap:.5rem}
.breadcrumb li:not(:last-child)::after{content:'\203A';color:var(--teal)}
.breadcrumb a{color:var(--dimmer);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb span{color:var(--teal)}
.bc-sep{color:#fff}

/* ── TWO-COL LAYOUT ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;padding:100px 5%}
.two-col.flip{direction:rtl}
.two-col.flip>*{direction:ltr}
.two-col-text .sec-lbl{display:block}
.two-col-visual{border:1px solid var(--border-purple);border-radius:14px;background:var(--panel);overflow:hidden}
.tcv-bar{background:rgba(255,255,255,.03);border-bottom:1px solid var(--border);padding:.6rem 1rem;display:flex;align-items:center;gap:.4rem}
.tcv-dot{width:8px;height:8px;border-radius:50%}
.tcv-dot:nth-child(1){background:#ff5f57}.tcv-dot:nth-child(2){background:#febc2e}.tcv-dot:nth-child(3){background:#28c840}
.tcv-body{padding:1.5rem}

/* ── FEATURES LIST ── */
.features-list{display:flex;flex-direction:column;gap:1.25rem;margin-top:2rem}
.feature-item{display:flex;gap:1rem;align-items:flex-start}
.feature-check{width:22px;height:22px;border-radius:50%;background:rgba(0,184,160,.12);border:1px solid rgba(0,184,160,.3);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:.7rem;flex-shrink:0;margin-top:2px}
.feature-item strong{display:block;font-size:.92rem;font-weight:700;margin-bottom:.2rem}
.feature-item p{font-size:.85rem;color:var(--dim);line-height:1.65}

/* ── PROCESS STEPS ── */
.process{padding:80px 5%;background:rgba(61,31,138,.07);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:3rem;position:relative}
.process-step{background:var(--panel);border:1px solid var(--border-purple);border-radius:12px;padding:1.75rem;position:relative;transition:border-color .25s}
.process-step:hover{border-color:var(--border-purple-hi)}
.step-num{font-size:.65rem;font-weight:700;color:var(--teal);letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem;display:block}
.step-icon{font-size:1.5rem;margin-bottom:.75rem;display:block}
.process-step h3{font-size:.95rem;font-weight:700;margin-bottom:.5rem}
.process-step p{font-size:.82rem;color:var(--dim);line-height:1.65}

/* ── FAQ ── */
.faq-section{padding:80px 5%}
.faq-list{max-width:720px;margin:3rem auto 0;display:flex;flex-direction:column;gap:.75rem}
.faq-item{border:1px solid var(--border-purple);border-radius:10px;overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:var(--border-teal)}
.faq-q{width:100%;background:transparent;border:none;color:var(--white);font-family:inherit;font-size:.9rem;font-weight:600;padding:1.25rem 1.5rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-q:hover{color:var(--teal)}
.faq-arrow{font-size:.75rem;color:var(--teal);transition:transform .25s;flex-shrink:0}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s}
.faq-item.open .faq-a{max-height:400px;padding:0 1.5rem 1.25rem}
.faq-a p{font-size:.85rem;color:var(--dim);line-height:1.75}

/* ── RELATED SERVICES ── */
.related{padding:80px 5%;border-top:1px solid var(--border)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:2.5rem}
.rel-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1.4rem;text-decoration:none;transition:border-color .2s,transform .2s;display:flex;align-items:center;gap:1rem}
.rel-card:hover{border-color:var(--border-purple-hi);transform:translateY(-2px)}
.rel-icon{font-size:1.3rem;width:36px;text-align:center;flex-shrink:0}
.rel-text strong{display:block;font-size:.85rem;font-weight:700;color:var(--white);margin-bottom:.2rem}
.rel-text span{font-size:.72rem;color:var(--dimmer)}

/* ── CTA BANNER ── */
.cta-banner{padding:120px 5%;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--border)}
.cta-banner-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(61,31,138,.5) 0%,transparent 65%),radial-gradient(ellipse 40% 30% at 20% 50%,rgba(0,184,160,.1) 0%,transparent 60%);pointer-events:none}
.cta-banner-inner{position:relative;z-index:1}
.cta-banner h2{font-size:clamp(2.2rem,5vw,4.5rem);font-weight:900;letter-spacing:.008em;line-height:1;margin-bottom:1.5rem}
.cta-banner h2 em{font-style:normal;background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-banner p{font-size:1rem;color:var(--dim);max-width:480px;margin:0 auto 2.5rem;line-height:1.8}
.cta-phone{margin-top:1.5rem;font-size:.8rem;color:var(--dimmer)}
.cta-phone a{color:var(--teal);text-decoration:none;font-weight:700}

/* ── TESTIMONIALS ── */
.testi-section{padding:100px 5%;border-top:1px solid var(--border)}
.google-rating-badge{display:inline-block;margin-top:.75rem;font-size:.78rem;font-weight:600;color:var(--teal);letter-spacing:.5px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem;grid-auto-rows:1fr}
.testi-card{background:var(--panel);border:1px solid var(--border-purple);border-radius:12px;padding:2rem;transition:border-color .25s;position:relative}
.testi-card:hover{border-color:var(--border-purple-hi)}
.testi-stars{color:var(--teal);letter-spacing:2px;font-size:.82rem;margin-bottom:1rem}
.testi-text{font-size:.88rem;color:#fff;line-height:1.8;font-style:italic;margin-bottom:1.5rem}
.testi-author{font-size:.72rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px}
.testi-who{font-size:.72rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px}

/* ── MOCKUP BITS ── */
.mock-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.1rem}
.mock-stat{background:rgba(61,31,138,.2);border:1px solid rgba(124,92,212,.15);border-radius:8px;padding:.85rem;text-align:center}
.msn{font-size:1.4rem;font-weight:900;color:var(--teal);display:block;line-height:1}
.msl{font-size:.58rem;color:var(--dimmer);text-transform:uppercase;letter-spacing:1px;margin-top:.2rem}
.deal-list{display:flex;flex-direction:column;gap:.6rem}
.deal{display:flex;align-items:center;gap:.8rem;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;padding:.8rem .95rem;transition:border-color .2s}
.deal:hover{border-color:var(--border-purple-hi)}
.deal-icon{font-size:1rem}
.deal-info{flex:1}
.deal-name{font-size:.78rem;font-weight:600;color:var(--white);margin-bottom:.12rem}
.deal-type{font-size:.63rem;color:var(--dimmer);text-transform:uppercase;letter-spacing:.8px}
.badge{font-size:.65rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;flex-shrink:0}
.badge-g{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.2)}
.badge-t{background:rgba(0,184,160,.1);color:var(--teal);border:1px solid rgba(0,184,160,.2)}
.badge-p{background:rgba(124,92,212,.1);color:var(--purple3);border:1px solid rgba(124,92,212,.2)}
.bar-list{display:flex;flex-direction:column;gap:.65rem}
.bar-row{display:flex;align-items:center;gap:.8rem}
.bar-label{font-size:.7rem;color:var(--dim);width:130px;flex-shrink:0}
.bar-track{flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--teal3));animation:bar-grow 1.5s ease forwards}
@keyframes bar-grow{from{width:0}to{width:var(--w)}}
.bar-val{font-size:.7rem;font-weight:700;color:var(--teal);width:32px;text-align:right;flex-shrink:0}
.tl-wrap{display:flex;position:relative}
.tl-step{flex:1;text-align:center;position:relative}
.tl-step::before{content:'';position:absolute;top:9px;left:50%;right:-50%;height:1px;background:var(--border)}
.tl-step:last-child::before{display:none}
.tl-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);background:var(--panel);margin:0 auto .4rem;position:relative;z-index:1}
.tl-dot.done{border-color:var(--teal);background:rgba(0,184,160,.15)}
.tl-dot.active{border-color:var(--teal);background:var(--teal);box-shadow:0 0 10px rgba(0,184,160,.5)}
.tl-label{font-size:.6rem;color:var(--dimmer)}
.prot-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.prot-card{background:rgba(61,31,138,.15);border:1px solid rgba(124,92,212,.15);border-radius:8px;padding:.9rem;text-align:center;transition:border-color .2s}
.prot-card:hover{border-color:var(--border-purple-hi)}
.prot-icon{font-size:1.3rem;margin-bottom:.4rem}
.prot-name{font-size:.72rem;font-weight:700;color:var(--white);margin-bottom:.2rem}
.prot-val{font-size:.67rem;color:var(--teal)}
.chat-wrap{display:flex;flex-direction:column;gap:.8rem}
.cmsg{display:flex;gap:.6rem;align-items:flex-end}
.cmsg.r{flex-direction:row-reverse}
.c-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;flex-shrink:0}
.c-av.cli{background:rgba(255,255,255,.1);color:#fff}
.c-av.tmc{background:rgba(0,184,160,.2);color:var(--teal);border:1px solid rgba(0,184,160,.3)}
.cbub{border-radius:10px;padding:.55rem .85rem;font-size:.75rem;line-height:1.5;max-width:240px}
.cbub.cli{background:rgba(255,255,255,.06);border:1px solid var(--border);color:#fff;border-radius:10px 10px 10px 3px}
.cbub.tmc{background:rgba(61,31,138,.3);border:1px solid rgba(124,92,212,.25);color:#fff;border-radius:10px 10px 3px 10px}

/* ── NAV (index variants) ── */
.nav-fill{position:absolute;inset:0;background:rgba(8,5,15,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:-1}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-img{height:38px;width:auto;display:block}
.nav-dd{position:relative}
.nav-dd-menu{position:absolute;top:calc(100% + 1rem);left:-1rem;background:var(--panel);border:1px solid var(--border-purple);border-radius:10px;padding:.5rem;min-width:220px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .2s;z-index:200}
.nav-dd:hover .nav-dd-menu{opacity:1;pointer-events:all;transform:translateY(0)}
.nav-dd-menu a{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border-radius:6px;color:var(--dim);font-size:.82rem;transition:background .15s,color .15s}
.nav-dd-menu a:hover{background:rgba(255,255,255,.05);color:var(--white)}
.dd-ic{font-size:.9rem;width:22px;text-align:center}

/* ── HERO ── */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 5% 60px;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a0533 0%,#2d1065 25%,#3d1f8a 50%,#007a8a 75%,#00b8a0 100%)}
.hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:64px 64px;pointer-events:none;z-index:0}
.hero-noise{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:900px;margin:0 auto}
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border-teal);background:rgba(0,184,160,.07);color:var(--teal);font-size:.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:.4rem 1rem;border-radius:100px;margin-bottom:1.75rem}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse-beat 1.8s ease-in-out infinite}
@keyframes pulse-beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero h1{font-size:clamp(3.5rem,7.5vw,7rem);font-weight:900;letter-spacing:.008em;line-height:.95;margin-bottom:1.5rem;text-align:center}
h1 .plain,h1 .glow,h1 .outline{display:block}
.plain{color:var(--white)}
.glow{background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 80px rgba(0,212,186,.5),0 0 160px rgba(0,184,160,.25)}
.outline{-webkit-text-stroke:1.5px rgba(255,255,255,.25);-webkit-text-fill-color:transparent;color:transparent}
.hero-sub{font-size:1.1rem;color:#fff;line-height:1.8;max-width:500px;margin-bottom:2.5rem;text-align:center}
.hero-btns{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center}

/* ── HERO CARD / TICKER ── */
.hero-card{background:var(--panel);border:1px solid var(--border-purple);border-radius:16px;overflow:hidden;padding:1.25rem 0 1.5rem;width:100%;max-width:780px;margin:0 auto}
.hc-top{display:flex;align-items:center;gap:.6rem;padding:0 1.25rem 1rem;border-bottom:1px solid var(--border)}
.hc-live{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:pulse-beat 1.8s ease-in-out infinite;flex-shrink:0}
.hc-lbl{font-size:.7rem;font-weight:600;color:var(--dim);letter-spacing:.5px}
.tk-row{overflow:hidden;margin-top:1rem}
.tk-track{display:flex;gap:.6rem;width:max-content;flex-wrap:nowrap;animation:tk-fwd 22s linear infinite}
.tk-track.rev{animation:tk-rev 24s linear infinite}
@keyframes tk-fwd{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tk-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;border-radius:100px;font-size:.72rem;font-weight:600;white-space:nowrap;border:1px solid var(--border-purple);background:rgba(61,31,138,.15);color:var(--dim);flex-shrink:0}
.chip.a{border-color:var(--border-teal);background:rgba(0,184,160,.08);color:#fff}
.chip.b{border-color:rgba(124,92,212,.25);background:rgba(124,92,212,.1);color:#fff}
.chip-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
/* Keep the pillar colour in the dot now that the chip label is white (AA contrast). */
.chip.a .chip-dot{background:#00d4ba}
.chip.b .chip-dot{background:#7c5cd4}

/* ── SERVICES ── */
.svc-section{padding:100px 5%;border-top:1px solid var(--border)}
.svc-layout{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;margin-top:3rem}
.svc-tabs{display:flex;flex-direction:column;gap:.4rem}
.tab{width:100%;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--dim);font-family:inherit;font-size:.82rem;font-weight:500;padding:.8rem 1rem;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.6rem;transition:background .15s,color .15s,border-color .15s}
.tab:hover{background:rgba(255,255,255,.04);color:var(--white)}
.tab.on{background:rgba(61,31,138,.2);border-color:var(--border-purple);color:var(--white)}
.tab-ic{font-size:1rem;width:22px;text-align:center;flex-shrink:0}
.tab-n{margin-left:auto;font-size:.65rem;color:var(--teal);font-weight:700;letter-spacing:1px}
.panel-wrap{position:relative;min-height:280px}
.panel{display:none;background:var(--panel);border:1px solid var(--border-purple);border-radius:12px;padding:2.5rem;animation:fade-in .25s ease}
.panel.on{display:block}
@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.panel-h{font-size:1.5rem;font-weight:800;letter-spacing:.008em;margin-bottom:1rem}
.panel-p{font-size:.92rem;color:var(--dim);line-height:1.8;margin-bottom:1.5rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.tag{font-size:.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--border-purple);border-radius:4px;padding:.25rem .6rem;color:var(--dimmer)}
.panel-link{font-size:.82rem;font-weight:700;color:var(--teal);text-decoration:none;letter-spacing:.3px;transition:opacity .15s}
.panel-link:hover{opacity:.7}

/* ── STATS BAND (index) ── */
.sc{padding:55px 20px;text-align:center;border-right:1px solid var(--border)}
.sc:last-child{border-right:none}
.sn{font-size:3rem;font-weight:900;letter-spacing:-2px;line-height:1;display:block;background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sl{font-size:.65rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--dimmer);margin-top:.5rem;display:block}

/* ── FEATURES / FR ROWS ── */
.features{padding:100px 5%;border-top:1px solid var(--border)}
.feat-head{text-align:center;margin-bottom:4rem}
.feat-rows{display:flex;flex-direction:column;gap:6rem}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.fr.rev{direction:rtl}
.fr.rev>*{direction:ltr}
.fr.fr-solo{grid-template-columns:1fr;max-width:780px;margin:0 auto;text-align:center}
.fr-lbl{font-size:.68rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.fr-h{font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:900;letter-spacing:.008em;line-height:1.1;margin-bottom:1rem}
.fr-p{font-size:.92rem;color:var(--dim);line-height:1.8}
.fv{background:var(--panel);border:1px solid var(--border-purple);border-radius:14px;overflow:hidden}
.fv-top{display:flex;gap:.4rem;padding:.75rem 1rem;background:rgba(255,255,255,.02);border-bottom:1px solid var(--border)}
.fvd{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.1)}
.fv-body{padding:1.5rem}
.cav{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;flex-shrink:0}

/* ── MISC ── */
.bdg{font-size:.65rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;flex-shrink:0}
.center{text-align:center}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── FOOTER ── */
footer{background:#05030d;border-top:1px solid var(--border);padding:80px 5% 40px}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
.footer-logo-name{margin-bottom:.75rem}
.footer-logo-img{height:32px;width:auto;display:block}
.footer-about{font-size:.78rem;color:#fff;line-height:1.8;max-width:260px}
.footer-social{display:flex;gap:.75rem;margin-top:1.25rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);color:#fff;transition:color .2s,border-color .2s,transform .2s}
.footer-social a:hover{color:var(--teal);border-color:var(--border-teal);transform:translateY(-2px)}
.footer-social svg{width:16px;height:16px;fill:currentColor}
.footer-col h2{font-size:.62rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);margin-bottom:1.25rem}
.footer-col a{display:block;color:#fff;text-decoration:none;font-size:.8rem;margin-bottom:.55rem;transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid var(--border);padding-top:2rem;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.footer-legal{font-size:.82rem;color:#fff;line-height:1.7;max-width:760px}
.footer-legal p+p{margin-top:.6rem}
.footer-copy{font-size:.68rem;color:#fff;white-space:nowrap;text-align:right}
.footer-credit{display:block;margin-top:.45rem}
.footer-credit a{color:var(--teal);text-decoration:underline}
.footer-credit a:hover{text-decoration:underline}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .two-col{grid-template-columns:1fr;gap:3rem}
  .two-col.flip{direction:ltr}
  .stats-band{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  nav .nav-links a:not(.nav-cta){display:none}
  .hero-inner{padding:120px 0 60px}
  .svc-layout{grid-template-columns:1fr}
  .svc-tabs{flex-direction:row;flex-wrap:wrap;gap:.35rem}
  .fr{grid-template-columns:1fr;gap:2rem}
  .fr.rev{direction:ltr}
  .card-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:580px){
  .stats-band{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .prot-grid{grid-template-columns:1fr 1fr}
  .card-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── TESTIMONIAL STARS ── */
.testi-stars::before{content:'★★★★★';color:var(--teal);letter-spacing:3px;font-size:.9rem}

/* ── HOMEPAGE TRUST STRIP (top-of-page scrolling reviews) ── */
.trust-strip{position:relative;margin-top:70px;background:linear-gradient(90deg,rgba(0,184,160,0.10) 0%,rgba(124,92,212,0.07) 100%);border-bottom:1px solid var(--border-teal);overflow:hidden;z-index:50}
.trust-strip-inner{display:flex;align-items:center;gap:1.75rem;height:44px;padding:0 5%;max-width:1400px;margin:0 auto}
.trust-strip-badge{flex-shrink:0;display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.3px;color:var(--white);white-space:nowrap}
.trust-strip-badge::before{content:'★★★★★';color:#ffc44d;letter-spacing:1.5px;font-size:.85rem;margin-right:.15rem}
.trust-strip-badge .ts-sep{opacity:.35;margin:0 .15rem}
.trust-strip-badge .ts-meta{color:#fff;font-weight:500}
.trust-strip-mq{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.trust-strip-track{display:flex;gap:3rem;width:max-content;animation:trust-scroll 60s linear infinite}
.trust-strip:hover .trust-strip-track{animation-play-state:paused}
.trust-strip-item{display:flex;align-items:center;gap:.55rem;font-size:.8rem;line-height:1;color:#fff;white-space:nowrap}
.trust-strip-item::before{content:'★★★★★';color:#ffc44d;letter-spacing:1px;font-size:.72rem;flex-shrink:0}
.trust-strip-item em{font-style:normal;color:#fff;margin-left:.15rem}
@keyframes trust-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:768px){
  .trust-strip-inner{height:40px;gap:1rem;padding:0 4%}
  .trust-strip-badge{font-size:.7rem}
  .trust-strip-badge .ts-meta{display:none}
  .trust-strip-badge::before{font-size:.78rem}
  .trust-strip-item{font-size:.72rem}
  .trust-strip-item::before{font-size:.65rem}
  .trust-strip-track{animation-duration:45s;gap:2rem}
}
@media (prefers-reduced-motion:reduce){
  .trust-strip-track{animation:none}
}

/* ── HAMBURGER BUTTON ── */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:10;flex-shrink:0}
.nav-close{display:none}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s,opacity .25s}
nav.open .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .nav-hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
nav.open .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE NAV ── */
@media(max-width:1240px){
  .nav-hamburger{display:flex}

  /* Slide-out panel from right */
  nav .nav-links{
    display:flex;flex-direction:column;
    position:fixed;top:0;right:0;bottom:0;
    width:min(320px,88vw);
    background:rgba(5,3,13,.99);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    padding:72px 1.75rem 120px;
    overflow-y:auto;gap:0;
    z-index:299;
    border-left:1px solid var(--border);
    box-shadow:-24px 0 80px rgba(0,0,0,.7);
    transform:translateX(110%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  nav.open .nav-links{transform:translateX(0)}

  /* Backdrop */
  .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:298;opacity:0;pointer-events:none;transition:opacity .32s ease}
  nav.open .nav-backdrop{opacity:1;pointer-events:all}

  /* Close button */
  .nav-close{position:absolute;top:1.1rem;right:1.1rem;background:rgba(255,255,255,.07);border:1px solid var(--border);color:var(--white);width:34px;height:34px;border-radius:50%;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0}
  .nav-close:hover{background:rgba(255,255,255,.15)}

  /* Links inside panel */
  nav .nav-links a:not(.nav-cta){display:block;padding:.88rem 0;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--dim);transition:color .15s}
  nav .nav-links a:not(.nav-cta):hover{color:var(--white)}

  /* Dropdown sections — always expanded in panel */
  nav .nav-dd,nav .nav-dropdown{position:static;display:flex;flex-direction:column}
  nav .nav-dd>a:first-child,nav .nav-dropdown>a:first-child{color:var(--teal)!important;font-size:.6rem!important;font-weight:700!important;letter-spacing:2.5px;text-transform:uppercase;padding:.88rem 0 .2rem!important;border-bottom:none!important}
  nav .nav-dd-menu,nav .nav-dropdown-menu{position:static!important;opacity:1!important;pointer-events:all!important;transform:none!important;background:transparent;border:none;box-shadow:none;padding:0 0 .5rem .75rem;min-width:unset}
  nav .nav-dd-menu a,nav .nav-dropdown-menu a{padding:.52rem 0!important;border-bottom:1px solid rgba(255,255,255,.05)!important;font-size:.83rem!important;color:var(--dim);border-radius:0}
  nav .nav-cta{display:block!important;margin-top:1.75rem;text-align:center;padding:1rem!important;font-size:.88rem!important}
}

/* ── STICKY MOBILE CTA ── */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(8,5,15,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border-teal);padding:12px 16px;gap:10px;z-index:390;align-items:center}
.sticky-cta-primary{flex:1;display:block;background:linear-gradient(135deg,#4a2aa0,#3d1f8a);color:#fff;font-size:.82rem;font-weight:800;padding:12px 8px;border-radius:6px;text-align:center;text-decoration:none;letter-spacing:.3px}
.sticky-cta-ghost{flex:1;display:block;border:1.5px solid var(--border-purple);color:var(--white);font-size:.82rem;font-weight:600;padding:12px 8px;border-radius:6px;text-align:center;text-decoration:none}
@media(max-width:768px){
  .sticky-cta{display:flex}
  body{padding-bottom:68px}
}

/* ── PAGE FUNNEL STRIP ── */
.page-funnel-strip{background:linear-gradient(135deg,rgba(61,31,138,.25),rgba(0,184,160,.07));border-top:1px solid var(--border-purple);border-bottom:1px solid var(--border);padding:64px 5%}
.page-funnel-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:3rem}
.pfs-left{flex:1}
.pfs-heading{font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:900;letter-spacing:.008em;line-height:1.1;margin-bottom:.75rem}
.pfs-heading em{font-style:normal;color:var(--teal2)}
.pfs-sub{font-size:.9rem;color:var(--dim);line-height:1.75;max-width:480px;margin-bottom:0}
.pfs-right{text-align:center;flex-shrink:0}
.pfs-cta{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#4a2aa0,#3d1f8a);color:#fff;font-size:.92rem;font-weight:600;padding:.95rem 1.7rem;border-radius:999px;text-decoration:none;letter-spacing:-.1px;border:1px solid rgba(124,92,212,.5);box-shadow:0 14px 34px rgba(61,31,138,.5),inset 0 1px 0 rgba(255,255,255,.45);transition:background .22s,border-color .22s,transform .15s;white-space:nowrap}
.pfs-cta:hover{background:linear-gradient(135deg,#5e38c0,#4a2aa0);border-color:rgba(124,92,212,.7);transform:translateY(-2px)}
.pfs-trust{font-size:.68rem;color:var(--dimmer);margin-top:10px;letter-spacing:.3px}
.pfs-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:500;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);padding:.85rem 1.5rem;border-radius:999px;margin-left:.75rem;letter-spacing:-.1px;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);transition:background .22s,border-color .22s;white-space:nowrap}
.pfs-link:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38);color:#fff}
@media (max-width:760px){.pfs-link{display:block;margin:.75rem 0 0;text-align:center}}
@media(max-width:768px){
  .page-funnel-inner{flex-direction:column;gap:2rem}
  .pfs-right{width:100%}
  .pfs-cta{display:block;text-align:center}
}

/* ── TRUST BAR ── */
.trust-bar{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;padding:28px 5%;border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}
.trust-item{display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;color:var(--dimmer);letter-spacing:.5px;white-space:nowrap}
.trust-item-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0}

/* ── LENDER CHIPS ── */
.lender-band{padding:48px 5%;border-bottom:1px solid var(--border);overflow:hidden}
.lender-band-label{text-align:center;font-size:.65rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--dimmer);margin-bottom:1.5rem}
.lender-scroller{display:flex;gap:.75rem;width:max-content;animation:lender-scroll 30s linear infinite}
.lender-scroller:hover{animation-play-state:paused}
@keyframes lender-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lender-chip{display:inline-flex;align-items:center;padding:.4rem 1rem;border:1px solid var(--border);border-radius:100px;font-size:.72rem;font-weight:600;color:#fff;white-space:nowrap;flex-shrink:0;letter-spacing:.3px}

/* ── COPYRIGHT UPDATE ── */
.footer-copy{font-size:.7rem;color:#fff;white-space:nowrap}

/* ── BLOG ARTICLE ── */
.blog-body{max-width:800px;margin:0 auto;padding:64px 5% 80px}
.blog-meta{display:flex;align-items:center;gap:.75rem;font-size:.72rem;color:var(--dimmer);margin-bottom:2.5rem;flex-wrap:wrap}
.blog-meta-tag{border:1px solid var(--border-teal);color:var(--teal);padding:.2rem .65rem;border-radius:100px;font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.blog-body h2{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:800;letter-spacing:.008em;line-height:1.2;margin:2.75rem 0 .9rem;color:var(--white)}
.blog-body h3{font-size:1.05rem;font-weight:700;margin:2rem 0 .65rem;color:#fff}
.blog-body p{color:var(--dim);line-height:1.9;margin-bottom:1.2rem;font-size:.96rem}
.blog-body ul,.blog-body ol{color:var(--dim);line-height:1.9;margin-bottom:1.2rem;padding-left:1.5rem;font-size:.96rem}
.blog-body li{margin-bottom:.45rem}
.blog-body strong{color:#fff}
.blog-body a{color:var(--teal);text-decoration:none}
.blog-body a:hover{text-decoration:underline}
.blog-callout{background:rgba(0,184,160,.05);border:1px solid rgba(0,184,160,.2);border-radius:8px;padding:1.5rem 1.75rem;margin:2.5rem 0}
.blog-callout p{margin-bottom:0;font-size:.9rem}
.blog-callout strong{color:var(--teal)}

/* ── RESOURCE GUIDE COMPONENTS ── */
.doc-section{scroll-margin-top:90px}
.format-warning{background:rgba(0,184,160,.06);border:1px solid var(--border-teal);border-left:3px solid var(--teal);border-radius:10px;padding:1.25rem 1.5rem;margin:0 0 2rem;font-size:.95rem;line-height:1.7;color:#fff}
.format-warning strong{display:block;font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem}
.on-this-page{background:var(--panel);border:1px solid var(--border-purple);border-radius:10px;padding:1.25rem 1.5rem;margin:0 0 2.5rem}
.on-this-page h4{font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:.75rem}
.on-this-page a{display:block;color:var(--teal);text-decoration:none;font-weight:600;font-size:.95rem;padding:.3rem 0;transition:color .2s}
.on-this-page a:hover{color:var(--teal3)}
.doc-preview{background:var(--card);border:1px solid var(--border-purple);border-radius:12px;padding:1.5rem;margin:1.75rem 0;max-width:520px}
.doc-preview-head{font-size:.95rem;font-weight:700;color:var(--white);border-bottom:1px solid var(--border);padding-bottom:.75rem;margin-bottom:.75rem}
.doc-preview-row{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;color:#fff;padding:.3rem 0}
.doc-preview-row.total{border-top:1px solid var(--border);margin-top:.5rem;padding-top:.6rem;color:var(--white);font-weight:700}
.doc-preview-cap{font-size:.78rem;color:var(--dim);margin-top:.85rem;font-style:italic}
.back-to-top{display:inline-block;font-size:.8rem;color:var(--dim);text-decoration:none;margin-top:1rem;transition:color .2s}
.back-to-top:hover{color:var(--teal)}

/* ── Section rhythm: tonal bands over the fixed gradient ── */
body > section.band-dark  { background: rgba(7,4,16,.42); }
body > section.band-light { background: rgba(255,255,255,.035); }
/* quiet hairline between routine sections (inset = no layout shift) */
body > section.seam       { box-shadow: inset 0 1px 0 var(--border); }
/* glowing teal seam at major transitions */
body > section.seam-glow  { box-shadow: inset 0 1px 0 rgba(0,237,212,.6), 0 -1px 20px -3px rgba(0,212,186,.5); }

/* ════════════════════════════════════════════════════════════════
   MOTION SYSTEM  (living background, cursor, hero particles, tilt,
   magnetic, enhanced reveal, hero headline, pillar connector, CTA echo)
   All appearance here; behaviour in assets/js/motion.js.
   Static fallback is the default; effects opt-in via .motion-on on <html>.
   ════════════════════════════════════════════════════════════════ */

/* Global reduced-motion guard: kill all motion-system animation/transition. */
@media (prefers-reduced-motion: reduce) {
  .motion-bg, .motion-glow, #hero-fx, .hero-iris { display: none !important; }
}

/* Safety: clip horizontal bleed so the page never scrolls sideways. This
   covers the oversized aurora layer AND a pre-existing off-canvas mobile nav
   panel (.nav-links is position:fixed; translateX(110%)) that overflowed ~93px
   on phones before this work. The clip must be on the ROOT element: position:
   fixed descendants (the nav panel) escape body-level clipping and are only
   constrained at the viewport. overflow-x:clip (not hidden) avoids creating a
   scroll container, so smooth scrolling, the fixed gradient and sticky/fixed
   elements are unaffected; vertical scrolling is untouched. */
html{overflow-x:clip}

/* ── Living background ── */
/* DISABLED per client: the drifting aurora/beams/godray overlay is hidden so the
   background shows the original clean diagonal gradient. All other motion (cursor
   glow, hero particles, interactive headline, tilt, magnetic CTAs, reveals) stays.
   To restore the living background, delete the rule on the next line. */
#motion-bg{display:none !important}
/* Pinned to the viewport (inset:0) + overflow:hidden so the oversized blurred
   blobs are clipped and never widen the page (mobile horizontal-scroll fix).
   The scale(1.08)+translate parallax is a visual transform only — it provides
   the edge bleed and movement without adding to layout width. */
.motion-bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;
  transform:translate3d(calc(var(--mx,0)*-22px),calc(var(--my,0)*-22px),0) scale(1.08);
  will-change:transform}
.motion-bg .mb-beams{position:absolute;inset:-30%;opacity:.42;mix-blend-mode:screen;
  background:conic-gradient(from 210deg at 50% -10%,transparent 0deg,rgba(0,212,186,.16) 18deg,transparent 36deg,transparent 90deg,rgba(124,92,212,.16) 110deg,transparent 130deg);
  animation:mb-spin 48s linear infinite}
.motion-bg .mb-godray{position:absolute;inset:-40%;opacity:.3;mix-blend-mode:screen;
  background:conic-gradient(from 0deg at 50% 50%,transparent,rgba(0,237,212,.16),transparent 30%,transparent 60%,rgba(124,92,212,.14),transparent 92%);
  animation:mb-spin 60s linear infinite reverse}
.motion-bg .mb-aurora{position:absolute;inset:-15%;filter:blur(64px)}
.motion-bg .mb-blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.motion-bg .mb-b1{width:48vw;height:48vw;left:-6vw;top:-10vw;background:radial-gradient(circle at 30% 30%,rgba(124,92,212,.85),transparent 64%);animation:mb-d1 24s ease-in-out infinite}
.motion-bg .mb-b2{width:44vw;height:44vw;right:-8vw;top:0;background:radial-gradient(circle at 60% 40%,rgba(0,212,186,.7),transparent 64%);animation:mb-d2 28s ease-in-out infinite}
.motion-bg .mb-b3{width:54vw;height:54vw;left:18vw;bottom:-26vw;background:radial-gradient(circle at 50% 50%,var(--accent,#00d4ba),transparent 60%);opacity:.5;animation:mb-d3 32s ease-in-out infinite;transition:background 1s ease}
@keyframes mb-spin{to{transform:rotate(360deg)}}
@keyframes mb-d1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vw) scale(1.18)}}
@keyframes mb-d2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-8vw,9vw) scale(.88)}}
@keyframes mb-d3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-8vw) scale(1.25)}}
/* Calmer background away from the homepage hero so content stays readable. */
body:not(.is-home) .motion-bg{opacity:.6}
/* Lighter on small screens. */
@media(max-width:760px){.motion-bg .mb-beams,.motion-bg .mb-godray{display:none}.motion-bg{opacity:.7}}

/* ── Cursor glow (fine pointer only) — soft accent halo; system cursor kept ── */
.motion-glow{position:fixed;top:0;left:0;width:160px;height:160px;margin:-80px 0 0 -80px;z-index:3;pointer-events:none;border-radius:50%;background:radial-gradient(circle,var(--accent-soft,rgba(0,212,186,.45)),transparent 65%);mix-blend-mode:screen;opacity:0;transition:opacity .4s;will-change:transform}
@media(pointer:coarse){.motion-glow{display:none}}

/* ── Hero particle field (homepage .hero AND inner .page-hero) ── */
#hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero{position:relative}
.hero>.hero-inner,.hero>.hero-noise{position:relative;z-index:2}
@media(pointer:coarse){#hero-fx{display:none}}

/* ── Inner-page hero comes alive (motion on) ───────────────────────────────
   Brings the homepage hero energy to every .page-hero: the headline + badge +
   paragraph + CTAs ignite in on load, the accent <em> word shimmers like the
   homepage glow word, and the block tilts subtly with the cursor. Scoped to
   .motion-on so reduced-motion / no-JS shows a fully static, readable hero. */
.motion-on .page-hero{perspective:1100px}
/* keep the hero content above the injected particle canvas (#hero-fx, z-index:1) */
.motion-on .page-hero-inner{position:relative;z-index:2;transition:transform .25s ease;transform:rotateX(calc(var(--my,0)*-2deg)) rotateY(calc(var(--mx,0)*3deg));transform-style:preserve-3d}
.motion-on .page-hero-inner>*{opacity:0;animation:ph-rise .85s cubic-bezier(.2,.8,.2,1) forwards}
.motion-on .page-hero-inner>*:nth-child(1){animation-delay:.15s}
.motion-on .page-hero-inner>*:nth-child(2){animation-delay:.32s}
.motion-on .page-hero-inner>*:nth-child(3){animation-delay:.49s}
.motion-on .page-hero-inner>*:nth-child(4){animation-delay:.66s}
.motion-on .page-hero-inner>*:nth-child(n+5){animation-delay:.8s}
@keyframes ph-rise{from{opacity:0;transform:translateY(30px);filter:blur(8px)}60%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
.motion-on .page-hero h1 em{background:linear-gradient(110deg,var(--teal),var(--teal2) 40%,var(--teal3) 60%,var(--teal) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 70px var(--accent-soft,rgba(0,212,186,.4));animation:hero-shimmer 5s linear infinite}

/* ── Hero headline (interactive Fund/Build/Protect) ── */
.motion-on .hero-h{position:relative;transition:transform .25s ease;transform:rotateX(calc(var(--my,0)*-5deg)) rotateY(calc(var(--mx,0)*6deg))}
.motion-on .hero-line{display:block;opacity:0;filter:blur(16px);transform:translateY(46px) scale(.96);animation:hero-ignite 1s ease forwards}
.motion-on .hero-line:nth-child(1){animation-delay:.5s}
.motion-on .hero-line:nth-child(2){animation-delay:.78s}
.motion-on .hero-line:nth-child(3){animation-delay:1.06s}
@keyframes hero-ignite{60%{opacity:1;filter:blur(0);transform:translateY(-4px) scale(1.02)}100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
.hero-h .word{display:inline-block;color:#fff;position:relative;cursor:pointer;transition:transform .4s cubic-bezier(.2,.8,.2,1),color .45s,opacity .45s,filter .45s,text-shadow .5s}
.hero-h .word.glow{background:linear-gradient(110deg,var(--teal),var(--teal2) 40%,var(--teal3) 60%,var(--teal) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 90px var(--accent-soft,rgba(0,212,186,.5));animation:hero-shimmer 5s linear infinite}
@keyframes hero-shimmer{to{background-position:220% center}}
.hero[data-active="fund"] .word:not(.w-fund),.hero[data-active="build"] .word:not(.w-build),.hero[data-active="protect"] .word:not(.w-protect){opacity:.2;filter:blur(2px)}
.hero[data-active="fund"] .w-fund,.hero[data-active="build"] .w-build,.hero[data-active="protect"] .w-protect{transform:scale(1.06);text-shadow:0 0 70px var(--accent-soft,rgba(0,212,186,.5))}
/* The active word glows the same shimmering teal whichever one it is (matches
   the hover mockup the client approved), so Fund / Build / Protect are consistent. */
.hero[data-active="fund"] .w-fund,.hero[data-active="protect"] .w-protect{background:linear-gradient(110deg,var(--teal),var(--teal2) 40%,var(--teal3) 60%,var(--teal) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 70px var(--accent-soft,rgba(0,212,186,.5));animation:hero-shimmer 5s linear infinite}
.hero-tagline{height:1.4em;line-height:1.4;margin:0 auto 1.1rem;font-size:.72rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal2);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
@media(max-width:480px){.hero-tagline{font-size:.6rem;letter-spacing:1.5px}}
.hero-tagline.show{opacity:1;transform:translateY(0)}
/* Hero chips dim/highlight by active pillar. */
/* Chips stay fully lit at all times — no dimming/scaling as the hero pillar
   rotates (client: keep the scrolling bar always lit, not switching dark/light). */
.hero[data-active="fund"] .chip:not([data-p="fund"]),.hero[data-active="build"] .chip:not([data-p="build"]),.hero[data-active="protect"] .chip:not([data-p="protect"]){opacity:1}
.hero[data-active="fund"] .chip[data-p="fund"],.hero[data-active="build"] .chip[data-p="build"],.hero[data-active="protect"] .chip[data-p="protect"]{box-shadow:none;transform:none}
.chip{transition:opacity .4s,box-shadow .4s,transform .4s,border-color .4s,color .4s}

/* ── Pillar colour wash pulse ── */
.motion-wash{position:fixed;left:50%;top:42%;z-index:2;pointer-events:none;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 60%);opacity:0;mix-blend-mode:screen}
.motion-wash.go{animation:motion-wash .8s ease-out}
@keyframes motion-wash{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(36)}}

/* ── Cinematic load ── */
.hero-iris{position:fixed;inset:0;z-index:9990;background:#08050f;pointer-events:none;clip-path:circle(75% at 50% 42%);animation:hero-iris 1.15s .05s cubic-bezier(.7,0,.25,1) forwards}
@keyframes hero-iris{to{clip-path:circle(0% at 50% 42%)}}
.hero-flash{position:fixed;inset:0;z-index:9991;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.6),rgba(0,237,212,.22) 30%,transparent 60%);animation:hero-flash 1.3s .7s ease forwards}
@keyframes hero-flash{0%{opacity:0}14%{opacity:.9}100%{opacity:0}}

/* ── Magnetic + ripple ── */
.mag{will-change:transform;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.motion-ripple{position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(0,237,212,.7);z-index:9997;pointer-events:none;animation:motion-ripple .7s ease-out forwards}
@keyframes motion-ripple{to{transform:scale(13);opacity:0}}

/* ── 3D tilt cards ── */
/* Glare is an injected child (.tilt-glare), NOT ::after — so it coexists with
   .card::after (the animated bottom-border line) instead of overriding it. */
.motion-on .tilt-ready{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s;position:relative}
.tilt-glare{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.16),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:5}
.motion-on .tilt-ready:hover .tilt-glare{opacity:1}

/* ── Enhanced staggered reveal (only when motion is on) ── */
.motion-on .reveal{transform:translateY(38px) scale(.985);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease;transition-delay:var(--reveal-d,0s)}
.motion-on .reveal.visible{transform:translateY(0) scale(1);filter:blur(0)}

/* ── Pillars signature connector (desktop) ── */
#pillars [style*="grid-template-columns"]{position:relative}
.pillar-connector{display:none}
@media(min-width:961px){
  .motion-on .pillar-connector{display:block;position:absolute;top:50%;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,transparent,var(--teal2),var(--purple3),var(--teal2),transparent);opacity:.5;box-shadow:0 0 16px rgba(0,212,186,.4);transition:transform 1.1s cubic-bezier(.2,.8,.2,1);z-index:0}
  .motion-on .pillar-connector.drawn{transform:scaleX(1)}
}

/* ── Chat bubble reveal inside Features ── */
.motion-on .fr .cmsg{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.motion-on .fr.visible .cmsg{opacity:1;transform:none}
.motion-on .fr.visible .cmsg:nth-child(2){transition-delay:.15s}
.motion-on .fr.visible .cmsg:nth-child(3){transition-delay:.3s}
.motion-on .fr.visible .cmsg:nth-child(4){transition-delay:.45s}

/* ── Closing CTA echo ── */
.motion-on .cta-banner .cta-banner-bg{animation:cta-breathe 7s ease-in-out infinite}
@keyframes cta-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.motion-on .cta-banner h2 em{text-shadow:0 0 60px rgba(0,212,186,.45)}
/* END MOTION SYSTEM */

/* ──────────────────────────────────────────────────────────────────────────
   SINGLE GRADIENT  (client request, 2026-06-01)
   One consistent purple-to-teal gradient flows top-to-bottom across every page
   (set on <body> above). This block neutralises every layer that used to
   compete with it — per-section tints, the inner-page hero gradient/photo/mesh,
   and all BACKGROUND motion (drifting aurora + floating particles). Foreground
   wow-factor motion stays: cursor glow, interactive headline, tilt, magnetic
   CTAs. To restore the old layered look, delete this whole block.
   ────────────────────────────────────────────────────────────────────────── */

/* No background motion: hide the aurora layer and the hero particle canvas even
   when motion is on (cursor glow / tilt / headline are separate and remain). */
#motion-bg, #hero-fx { display: none !important; }

/* Only the HERO carries the gradient (diagonal, purple to teal); everything
   below sits on solid black. No own photo, mesh or grid on the heroes. */
.hero, .page-hero { background: linear-gradient(135deg,#1a0533 0%,#2d1065 25%,#3d1f8a 50%,#007a8a 75%,#00b8a0 100%) !important; }
.hero::after, .page-hero::before, .page-hero-mesh, .page-hero-grid { display: none !important; }

/* Below the hero the PAGE is solid black (body + section bands), so there are no
   competing full-width shades. CARDS, however, sit on a subtly raised surface so
   they read as real panels — not neon outlines on black — with a stronger brand
   border and a soft drop shadow for depth. */
:root { --panel: #15101f; --card: #15101f; --ink: #000; }
.marquee, .process, .stats-band { background: transparent !important; }
footer { background: #000 !important; }
.cta-banner-bg { display: none !important; }   /* drop the closing CTA glow */
/* Card depth: raised surface + brand border (var) + soft shadow + top highlight.
   Applies to every card-like surface site-wide so the treatment is consistent. */
.tilt, .card, .testi-card, .process-step, .panel, .fv, .two-col-visual, .on-this-page {
  box-shadow: 0 16px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* Hover highlight for the inline-styled .tilt cards (tool/pillar cards). Pure
   CSS :hover so it always clears on mouse-out — no JS, no sticking. !important
   beats the inline rest border only while hovered. */
.tilt:hover { border-color: var(--border-purple-hi) !important; }
/* keep the homepage hero's own "what we do" card visible on the gradient */
.hero-card { background: #15101f !important; }