/* ─── RESET ─── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* when Lenis is driving the scroll, native CSS smoothing must be off or the two fight */ html.lenis{scroll-behavior:auto} img,svg{display:block;max-width:100%} ul{list-style:none} a{text-decoration:none;color:inherit} button{cursor:pointer;border:none;background:none;font-family:inherit} input{font-family:inherit} /* ─── TOKENS (unchanged brand palette) ─── */ :root{ --navy:#0B1F3A; --navy-deep:#071629; --white:#FFFFFF; --section:#F8FAFC; --h-color:#111827; --body:#374151; --muted:#6B7280; --border:#E5E7EB; --red:#D91E18; --red-h:#B01515; --red-bg:#FEF2F2; --red-mid:rgba(217,30,24,0.10); --red-border:rgba(217,30,24,0.20); --red-glow:rgba(217,30,24,0.08); --green:#10B981; --green-bg:#D1FAE5; --amber:#F59E0B; --amber-bg:#FEF3C7; --font:'Inter',system-ui,sans-serif; --font-display:'Space Grotesk','Inter',system-ui,sans-serif; --r:14px; --r-sm:8px; --r-lg:20px; --shadow:0 1px 3px rgba(0,0,0,0.07),0 4px 16px rgba(0,0,0,0.05); --shadow-lg:0 8px 32px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.05); --shadow-red:0 4px 20px rgba(217,30,24,0.25); --shadow-navy:0 8px 32px rgba(7,22,41,0.35),0 2px 8px rgba(7,22,41,0.2); --max:1200px; /* ─── MOTION TOKENS (see also main.js EASE_* / DUR_* constants — keep in sync) ─── */ --ease-in:cubic-bezier(0.16,1,0.3,1); /* entrances / reveals */ --ease-bounce:cubic-bezier(0.34,1.56,0.64,1); /* hover / press micro-interactions */ --ease-exit:cubic-bezier(0.7,0,0.84,0); /* exits */ --dur-sm:0.2s; /* icons, badges, buttons */ --dur-md:0.55s; /* cards */ --dur-lg:0.8s; /* hero block, section headers */ } body{font-family:var(--font);color:var(--body);background:var(--white);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* ─── ICON SYSTEM ─── */ .icon{width:1em;height:1em;display:inline-block;flex-shrink:0;vertical-align:-0.125em} .ic-stroke{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .ic-fill{fill:currentColor;stroke:none} /* ─── LAYOUT ─── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 5%} .sec{padding:100px 0} .sec-sm{padding:64px 0} .sec-label{font-family:var(--font-display);display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);margin-bottom:14px} .sec-title{font-family:var(--font-display);font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:700;color:var(--h-color);line-height:1.12;margin-bottom:16px;letter-spacing:-0.02em} .sec-sub{font-size:1rem;color:var(--muted);max-width:540px;line-height:1.75} .sec-head{margin-bottom:60px} .sec-head.center{text-align:center} .sec-head.center .sec-sub{margin:0 auto} /* ─── SCROLL REVEAL (CSS/IntersectionObserver fallback path) ─── When GSAP+ScrollTrigger load successfully, main.js adds .gsap-on to and takes full ownership of entrances — these CSS reveals switch off so the two systems never double-animate the same element. */ .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.55s ease,transform 0.55s ease} .reveal.visible{opacity:1;transform:translateY(0)} .rd1{transition-delay:0.08s}.rd2{transition-delay:0.16s}.rd3{transition-delay:0.24s} .rd4{transition-delay:0.32s}.rd5{transition-delay:0.40s}.rd6{transition-delay:0.48s} .gsap-on .reveal{opacity:1;transform:none;transition:none} /* word-level headline stagger (spans injected by main.js only under .gsap-on; reserved for the hero H1 and the "Why" headline — nothing else) */ .hw{display:inline-block} .hero-h1 em .hw{background:linear-gradient(130deg,var(--red) 0%,#FF4444 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* ─── BUTTONS ─── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;font-size:0.9375rem;border-radius:var(--r-sm);transition:all 0.18s ease;cursor:pointer;white-space:nowrap;letter-spacing:-0.01em} .btn-primary{background:var(--red);color:#fff;padding:13px 26px;box-shadow:var(--shadow-red)} .btn-primary:hover{background:var(--red-h);transform:translateY(-2px);box-shadow:0 6px 24px rgba(217,30,24,0.35)} .btn-ghost{color:var(--navy);padding:13px 26px;border:1.5px solid var(--border)} .btn-ghost:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)} .btn-white{background:#fff;color:var(--red);padding:14px 34px;font-size:1rem;font-weight:700;letter-spacing:-0.01em} .btn-white:hover{background:var(--red-bg);transform:translateY(-2px)} .btn-ghost-dark{color:#fff;padding:13px 26px;border:1.5px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.04)} .btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,0.1)} .btn:focus-visible,a:focus-visible,.audit-card:focus-visible,.faq-q:focus-visible{outline:2px solid var(--red);outline-offset:3px} /* ─── CURSOR RING (fine pointers + GSAP only; injected by main.js) ─── Accompanies — never replaces — the native cursor; grows over interactive elements. Tinted inside so it reads as a lens, not a bare outline. */ .cursor-ring{position:fixed;top:-14px;left:-14px;width:28px;height:28px;border:1.5px solid rgba(217,30,24,0.4);border-radius:50%;background:radial-gradient(circle,rgba(217,30,24,0.14) 0%,rgba(217,30,24,0.05) 55%,transparent 75%);pointer-events:none;z-index:2000;opacity:0;transition:width 0.18s var(--ease-bounce),height 0.18s var(--ease-bounce),border-color 0.18s,opacity 0.25s,margin 0.18s var(--ease-bounce);will-change:transform} .cursor-ring.show{opacity:1} .cursor-ring.on{width:42px;height:42px;margin:-7px 0 0 -7px;border-color:rgba(217,30,24,0.8);background:radial-gradient(circle,rgba(217,30,24,0.22) 0%,rgba(217,30,24,0.08) 55%,transparent 75%)} /* ─── CURSOR SPOTLIGHT TEXT-REVEAL ─── A neon-red duplicate of the page (main.js clones once, strips scripts/ids so nothing re-executes or collides), clipped to a circle that tracks the cursor at the same radius as the ring above. Letters under the circle appear to glow red; everything else stays invisible. */ .cursor-glow-overlay{position:absolute;top:0;left:0;width:100%;z-index:1999;pointer-events:none;opacity:0;transition:opacity 0.2s;clip-path:circle(var(--glow-r,14px) at var(--glow-x,-999px) var(--glow-y,-999px))} .cursor-glow-overlay.show{opacity:1} .cursor-glow-overlay,.cursor-glow-overlay *{background:transparent!important;box-shadow:none!important;border-color:transparent!important} .cursor-glow-overlay,.cursor-glow-overlay *{color:#ff1a1a!important;-webkit-text-fill-color:#ff1a1a!important;text-shadow:0 0 6px rgba(255,26,26,0.9),0 0 18px rgba(255,26,26,0.55)!important} /* ─── NAV ─── */ #nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color 0.25s,box-shadow 0.25s} #nav.scrolled{border-bottom-color:var(--border);box-shadow:0 1px 16px rgba(0,0,0,0.07)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px} .nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;color:var(--navy);letter-spacing:-0.02em} .nav-logo-img{height:40px;width:auto;object-fit:contain;display:block;border-radius:6px} .footer-logo-wrap{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:5px 10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .nav-logo-img-footer{height:36px;width:auto;object-fit:contain;display:block;border-radius:4px} .nav-links{display:flex;align-items:center;gap:32px} .nav-links a{font-size:0.875rem;font-weight:500;color:var(--muted);transition:color 0.15s;position:relative} .nav-links a:hover{color:var(--h-color)} .nav-links a.active{color:var(--red)} .nav-right{display:flex;align-items:center;gap:12px} .hamburger{display:none;flex-direction:column;gap:5px;padding:8px} .hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all 0.2s} .mobile-menu{display:none;position:fixed;inset:70px 0 0 0;background:#fff;z-index:999;flex-direction:column;padding:32px 5%;gap:0;border-top:1px solid var(--border);overflow-y:auto} .mobile-menu.open{display:flex} .mobile-menu a{font-size:1.0625rem;font-weight:500;color:var(--h-color);padding:14px 0;border-bottom:1px solid var(--border)} .mobile-menu .btn-primary{margin-top:20px;width:100%;justify-content:center;border-bottom:none;padding:14px} /* ─── HERO ─── */ #hero{padding:148px 0 90px;background:var(--white);position:relative;overflow:hidden} .hero-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(11,31,58,0.075) 1.5px,transparent 1.5px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 80%);pointer-events:none} .hero-bloom-red{position:absolute;top:-180px;right:-80px;width:680px;height:680px;background:radial-gradient(circle,var(--red-glow) 0%,transparent 65%);pointer-events:none} .hero-bloom-navy{position:absolute;bottom:-120px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(11,31,58,0.04) 0%,transparent 65%);pointer-events:none} .hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:2} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--red-bg);color:#991B1B;font-size:0.74rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:26px;border:1px solid var(--red-border)} .hero-badge .pulse-dot{width:6px;height:6px;background:var(--red);border-radius:50%;animation:blink 2s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}} .hero-h1{font-family:var(--font-display);font-size:clamp(2.5rem,4.6vw,3.75rem);font-weight:700;color:var(--h-color);line-height:1.04;letter-spacing:-0.03em;margin-bottom:22px} .hero-h1 em{font-style:normal;background:linear-gradient(130deg,var(--red) 0%,#FF4444 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-p{font-size:1.0625rem;color:var(--muted);line-height:1.78;max-width:490px;margin-bottom:34px} .hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:24px} .hero-cta{animation:ctapulse 3s ease-in-out infinite} @keyframes ctapulse{0%,100%{box-shadow:var(--shadow-red)}50%{box-shadow:0 4px 28px rgba(217,30,24,0.45)}} .hero-cta:hover{animation:none} .hero-secondary-link{display:inline-flex;align-items:center;gap:6px;font-size:0.875rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:2px;transition:color 0.15s,border-color 0.15s} .hero-secondary-link:hover{color:var(--red);border-color:var(--red)} .hero-trust{display:flex;align-items:center;gap:0;flex-wrap:wrap;font-size:0.78rem;color:var(--muted)} .hero-trust span{padding:0 12px 0 0;display:flex;align-items:center;gap:6px} .hero-trust span:first-child{padding-left:0} .hero-trust .trust-check{color:var(--green)} /* ─── HERO SIGNATURE VISUAL: LIVE MISSED-CALL ESTIMATE ─── The one element on the page that keeps the 24px signature radius. Replaces the old mocked analytics dashboard: nothing here resembles client data — the only number shown is computed from the visitor's own slider input. */ .hero-visual{position:relative} .hero-engine{position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(120% 130% at 20% 0%,#16305a 0%,var(--navy) 46%,var(--navy-deep) 100%);box-shadow:0 24px 60px -12px rgba(7,22,41,0.45);padding:56px 44px;min-height:460px;display:flex;align-items:center;justify-content:center} .hero-engine-grain{position:absolute;inset:0;opacity:0.5;background-image:radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay;pointer-events:none} .hero-engine-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .cine-path{fill:none;stroke-width:1.4;stroke-linecap:round} .cine-path.p1{stroke:rgba(217,30,24,0.85);stroke-dasharray:6 10;animation:flow 5s linear infinite} .cine-path.p2{stroke:rgba(255,255,255,0.18);stroke-dasharray:3 9;animation:flow 8s linear infinite} .cine-path.p3{stroke:rgba(255,255,255,0.10);stroke-dasharray:2 12;animation:flow 11s linear infinite reverse} @keyframes flow{to{stroke-dashoffset:-160}} .cine-node{fill:#FF6B5E;filter:drop-shadow(0 0 6px rgba(217,30,24,0.8))} .hero-engine-glow{position:absolute;top:-20%;right:-10%;width:70%;height:70%;background:radial-gradient(circle,rgba(217,30,24,0.20) 0%,transparent 70%);pointer-events:none} .hero-calc{position:relative;z-index:2;width:100%;max-width:340px;background:rgba(255,255,255,0.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.14);border-radius:var(--r);padding:28px 26px;text-align:center} .hero-calc-label{font-family:var(--font-display);font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:14px} .hero-calc-num{font-family:var(--font-display);font-size:3rem;font-weight:700;color:#fff;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums} .hero-calc-per{font-size:0.8rem;color:rgba(255,255,255,0.5);margin:8px 0 24px} .hero-calc-slider-row{margin-bottom:16px} .hero-calc-slider-row .calc-slider{background:rgba(255,255,255,0.18)} .hero-calc-slider-meta{font-size:0.8rem;color:rgba(255,255,255,0.65);margin-top:10px} .hero-calc-slider-meta strong{color:#fff;font-variant-numeric:tabular-nums} .hero-calc-note{font-size:0.7rem;color:rgba(255,255,255,0.38);line-height:1.6;margin-bottom:16px} .hero-calc-link{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;font-weight:600;color:#FF8A8A;transition:color 0.15s,gap 0.15s} .hero-calc-link:hover{color:#fff;gap:10px} /* ─── PROOF (industries + trust chips, merged) ─── */ #proof{background:var(--section);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:44px 0 40px} .proof-label{text-align:center;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:22px} .marquee-wrap{overflow:hidden;position:relative} .marquee-wrap::before,.marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none} .marquee-wrap::before{left:0;background:linear-gradient(to right,var(--section),transparent)} .marquee-wrap::after{right:0;background:linear-gradient(to left,var(--section),transparent)} .marquee-track{display:flex;gap:12px;animation:marquee 32s linear infinite;width:max-content} @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .marquee-wrap:hover .marquee-track{animation-play-state:paused} .ind-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 18px;font-size:0.84rem;font-weight:600;color:var(--body);white-space:nowrap;transition:all 0.18s;cursor:default} .ind-chip .icon{color:var(--red)} .ind-chip:hover{border-color:var(--red-border);color:var(--red);transform:translateY(-1px)} .caps-inner{padding:26px 0 0;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:30px} .cap-chip{display:inline-flex;align-items:center;gap:7px;font-size:0.8rem;font-weight:600;color:var(--muted)} .cap-chip .icon{color:var(--red);width:15px;height:15px} /* ─── SELF-AUDIT ─── */ #audit{background:var(--white)} .audit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:40px} .audit-card{background:#fff;border:2px solid var(--border);border-radius:var(--r);padding:24px 14px;text-align:center;cursor:pointer;transition:border-color 0.2s,transform 0.2s;user-select:none} .audit-card:hover{transform:translateY(-3px)} .audit-icon{width:28px;height:28px;margin:0 auto 12px;color:var(--muted)} .audit-name{font-size:0.8125rem;font-weight:700;color:var(--h-color);margin-bottom:14px;line-height:1.3} .audit-badge{position:relative;width:32px;height:32px;border-radius:50%;background:var(--section);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto;font-weight:800;font-size:0.95rem;color:var(--muted);transition:all 0.2s} .audit-card .audit-icon{transition:transform 0.15s var(--ease-bounce)} .audit-card:hover .audit-icon{transform:rotate(2deg) scale(1.08)} /* the ?/check/x marks: the active mark draws itself in via stroke-dashoffset */ .ab-q{transition:opacity 0.15s} .ab-mark{position:absolute;inset:4px;width:auto;height:auto;opacity:0;transition:opacity 0.1s} .ab-draw{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26} .audit-card[data-state="yes"] .ab-q,.audit-card[data-state="no"] .ab-q{opacity:0} .audit-card[data-state="yes"] .ab-check{opacity:1} .audit-card[data-state="yes"] .ab-check .ab-draw{stroke-dashoffset:0;transition:stroke-dashoffset 0.3s var(--ease-in) 0.05s} .audit-card[data-state="no"] .ab-x{opacity:1} .audit-card[data-state="no"] .ab-x .ab-draw{stroke-dashoffset:0;transition:stroke-dashoffset 0.22s var(--ease-in) 0.05s} .audit-card[data-state="no"] .ab-x .ab-draw.d2{transition-delay:0.2s} .audit-card[data-state="yes"]{border-color:var(--green)} .audit-card[data-state="yes"] .audit-icon,.audit-card[data-state="yes"] .audit-badge{color:var(--green)} .audit-card[data-state="yes"] .audit-badge{background:var(--green-bg);border-color:var(--green)} .audit-card[data-state="no"]{border-color:var(--red-border)} .audit-card[data-state="no"] .audit-icon,.audit-card[data-state="no"] .audit-badge{color:var(--red)} .audit-card[data-state="no"] .audit-badge{background:var(--red-bg);border-color:var(--red)} @keyframes auditPulse{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}} .audit-card.pulsing{animation:auditPulse 0.2s var(--ease-bounce)} .audit-result{background:var(--section);border:1px solid var(--border);border-radius:var(--r);padding:40px;text-align:center;box-shadow:var(--shadow-lg);max-width:600px;margin:0 auto} .audit-score{font-family:var(--font-display);font-size:2.75rem;font-weight:700;color:var(--h-color);margin-bottom:8px;letter-spacing:-0.02em} .audit-msg{font-size:0.9375rem;color:var(--muted);margin-bottom:24px;min-height:24px} .audit-bar-track{width:100%;max-width:400px;margin:0 auto 28px;height:8px;background:var(--border);border-radius:99px;overflow:hidden} .audit-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--red),var(--green));border-radius:99px;transition:width 0.45s ease} /* ─── SOLUTIONS BENTO (deliberately asymmetric — no template 3-col grid) ─── */ #solutions{background:var(--section)} .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px} .sb{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:30px 28px;position:relative;overflow:hidden;transition:box-shadow 0.18s var(--ease-bounce),transform 0.18s var(--ease-bounce),border-color 0.18s} .sb::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 0.28s ease;border-radius:3px 3px 0 0} .sb:hover{box-shadow:0 10px 36px rgba(217,30,24,0.10),0 2px 10px rgba(7,22,41,0.08);transform:translateY(-4px) scale(1.015);border-color:var(--red-border)} .sb:hover::before{transform:scaleX(1)} .sb.featured{grid-column:span 5;grid-row:span 2;display:flex;flex-direction:column} .sb.featured .sb-body{flex:1} .sb:nth-child(2){grid-column:span 7} .sb:nth-child(3){grid-column:span 4} .sb:nth-child(4){grid-column:span 3} .sb:nth-child(5){grid-column:span 4} .sb.wide{grid-column:span 8;display:flex;align-items:center;gap:36px} .sb.wide .sb-text{flex:1} .sb-ico{width:48px;height:48px;background:var(--section);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--red)} .sb-ico .icon{width:22px;height:22px;transition:transform 0.15s var(--ease-bounce)} .sb:hover .sb-ico .icon{transform:rotate(2deg) scale(1.1)} .sb-wide-ico{flex-shrink:0;width:60px;height:60px;background:var(--red-bg);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--red)} .sb-wide-ico .icon{width:28px;height:28px;transition:transform 0.15s var(--ease-bounce)} .sb:hover .sb-wide-ico .icon{transform:rotate(-2deg) scale(1.1)} .sb-name{font-size:1.05rem;font-weight:700;color:var(--h-color);margin-bottom:8px} .sb-desc{font-size:0.865rem;color:var(--muted);line-height:1.68} .sb-tag{display:inline-block;font-size:0.67rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--red);background:var(--red-bg);border-radius:4px;padding:3px 8px;margin-bottom:14px} .sb-mini-rank{margin-top:auto;padding-top:20px;border-top:1px solid var(--border)} .sb-mini-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:0.72rem} .smr-pos{width:18px;height:18px;background:var(--navy);color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:0.58rem;font-weight:800;flex-shrink:0} .smr-pos.t1{background:var(--red)} .smr-pos .icon{width:11px;height:11px;color:#fff} .smr-kw{flex:1;color:var(--h-color);font-weight:500} .smr-arr{color:var(--green);font-weight:700} .sb-wide-divider{width:1px;height:56px;background:var(--border);flex-shrink:0} .sb-micro{display:inline-flex;align-items:center;gap:6px;font-size:0.82rem;font-weight:600;color:var(--red);margin-top:14px;transition:gap 0.15s} .sb-micro:hover{gap:10px} .solutions-note{text-align:center;margin-top:44px;font-size:0.9rem;color:var(--muted)} .solutions-note strong{color:var(--h-color)} /* ─── CALCULATOR SLIDER (shared by the hero missed-call calculator) ─── padding enlarges the native slider's hit area toward the 44px touch-target guideline without changing the thin track's visual weight (the track renders centered within the input's box in every major browser) */ .calc-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;padding-block:15px;background-clip:content-box;border-radius:99px;background:var(--border);outline:none;cursor:pointer;touch-action:manipulation} .calc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--red);cursor:pointer;box-shadow:0 2px 8px rgba(217,30,24,0.4);border:3px solid #fff} .calc-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--red);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(217,30,24,0.4)} /* ─── SHIFT / TRANSFORMATION (row-by-row problem→solution) ─── */ #transformation{background:var(--section)} .shift-flow{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .shift-pair{display:grid;grid-template-columns:1fr 44px 1.15fr;align-items:stretch;gap:0} .sp-old{position:relative;display:flex;align-items:center;gap:11px;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:16px 20px;font-size:0.9rem;font-weight:500;color:var(--body)} .sp-old-text{position:relative} .sp-old-text::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--muted);transform:scaleX(0);transform-origin:left;transition:transform 0.3s var(--ease-in)} .sp-old.resolved{opacity:0.5} .sp-old.resolved .sp-old-text::after{transform:scaleX(1)} .sp-x{color:#B91C1C;flex-shrink:0;width:17px;height:17px} .sp-arrow{display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;transition:color 0.3s var(--ease-in)} .shift-pair.lit .sp-arrow{color:var(--red)} .sp-new{display:flex;align-items:center;gap:11px;background:var(--navy);color:#fff;border-radius:10px;padding:16px 20px;font-size:0.9rem;font-weight:600;box-shadow:var(--shadow-navy)} .sp-check{color:var(--green);flex-shrink:0;width:17px;height:17px} @media(max-width:640px){ .shift-pair{grid-template-columns:1fr;gap:6px} .sp-arrow{transform:rotate(90deg);padding:2px 0} } /* ─── PROCESS ─── */ #process{background:var(--white)} .steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px} .step{background:var(--section);border:1px solid var(--border);border-radius:var(--r);padding:28px 26px;transition:border-color 0.2s,transform 0.2s} .step:hover{border-color:var(--red-border);transform:translateY(-3px)} .step-circle{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.95rem;font-weight:800;margin-bottom:18px} .step-h{font-size:1rem;font-weight:700;color:var(--h-color);margin-bottom:8px} .step-p{font-size:0.8425rem;color:var(--muted);line-height:1.68} /* ─── PORTFOLIO / CASE STUDIES ─── */ #case-studies{background:var(--section)} .port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .port-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow 0.18s var(--ease-bounce),transform 0.18s var(--ease-bounce),border-color 0.18s;position:relative} .port-card:hover{box-shadow:0 10px 36px rgba(7,22,41,0.14),0 2px 10px rgba(7,22,41,0.08);transform:translateY(-4px) scale(1.015);border-color:var(--red-border)} .port-img{height:168px;position:relative;overflow:hidden;background:var(--navy)} .port-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s var(--ease-bounce)} .port-card:hover .port-img img{transform:scale(1.05)} .concept-badge{position:absolute;top:12px;left:12px;z-index:1;background:rgba(7,22,41,0.75);backdrop-filter:blur(4px);color:#fff;font-size:0.62rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.25)} .port-body{padding:20px 22px} .port-tag{font-size:0.67rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--red);margin-bottom:6px} .port-h{font-size:0.9375rem;font-weight:700;color:var(--h-color);margin-bottom:7px} .port-p{font-size:0.8rem;color:var(--muted);line-height:1.55} .port-soon{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:0.7rem;font-weight:600;color:var(--muted)} /* ─── AMBIENT LIGHT + MATERIAL (shared by navy sections) ─── Blooms drift on a slow 60–90s loop; grain matches the hero engine panel so every navy surface reads as the same material. */ @keyframes bloomDrift{ 0%{transform:translate(0,0);opacity:1} 50%{transform:translate(-20px,14px);opacity:0.75} 100%{transform:translate(14px,-18px);opacity:1} } .hero-bloom-red,.hero-bloom-navy,.why-bloom,.why-bloom-2,.cta-bloom{animation:bloomDrift 75s ease-in-out infinite alternate} .why-bloom-2,.hero-bloom-navy{animation-duration:90s;animation-delay:-30s} #why::after,#cta-final::after{content:'';position:absolute;inset:0;opacity:0.4;background-image:radial-gradient(rgba(255,255,255,0.045) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay;pointer-events:none;z-index:0} /* ─── WHY (story + commitment merged) ─── */ #why{background:var(--navy);position:relative;overflow:hidden;padding-top:150px} .why-curve{position:absolute;top:0;left:0;width:100%;height:80px;display:block;z-index:0} .why-bloom{position:absolute;top:-150px;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(217,30,24,0.12) 0%,transparent 65%);pointer-events:none} .why-bloom-2{position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(11,31,58,0.5) 0%,transparent 65%);pointer-events:none} .why-intro{max-width:720px;margin:0 auto 56px;text-align:center;position:relative;z-index:1} .why-intro p{font-size:1.0625rem;color:rgba(255,255,255,0.62);line-height:1.85;margin-bottom:16px} .why-intro p:last-child{margin-bottom:0} .promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1} .promise-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:32px 28px;transition:background 0.18s,border-color 0.18s,transform 0.18s var(--ease-bounce),box-shadow 0.18s} .promise-card:hover{background:rgba(217,30,24,0.1);border-color:rgba(217,30,24,0.35);transform:scale(1.015);box-shadow:0 12px 40px rgba(7,22,41,0.45)} .promise-ico{width:26px;height:26px;color:#FF8A8A;margin-bottom:18px;transition:transform 0.15s var(--ease-bounce)} .promise-card:hover .promise-ico{transform:rotate(2deg) scale(1.1)} .promise-h{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:10px} .promise-p{font-size:0.875rem;color:rgba(255,255,255,0.52);line-height:1.74} .promise-divider{border-top:1px solid rgba(255,255,255,0.08);margin-top:56px;padding-top:48px;text-align:center;position:relative;z-index:1} .promise-note{font-size:0.875rem;color:rgba(255,255,255,0.38);margin-bottom:24px;line-height:1.7} /* ─── FOUNDER BLOCK (real-asset slot — never a stock/AI face) ─── */ .founder-block{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center;max-width:760px;margin:0 auto 56px;position:relative;z-index:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:32px} .founder-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,0.15);display:block} .founder-quote{font-size:1rem;color:rgba(255,255,255,0.75);line-height:1.8;margin-bottom:16px;font-style:italic} .founder-name{font-family:var(--font-display);font-size:0.85rem;font-weight:600;color:#fff;letter-spacing:0.02em} @media(max-width:640px){ .founder-block{grid-template-columns:1fr;gap:24px;padding:24px} .founder-photo{max-width:220px;margin:0 auto} } /* ─── PRICING ─── */ #pricing{background:var(--white)} .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start} .price-card{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:36px 30px;transition:all 0.2s;position:relative} .price-card.featured{border-color:var(--red);box-shadow:var(--shadow-lg);transform:scale(1.03)} .price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap} .price-name{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--h-color);margin-bottom:8px} .price-tagline{font-size:0.875rem;color:var(--muted);margin-bottom:24px;line-height:1.6;min-height:42px} .price-features{margin-bottom:28px} .price-features li{position:relative;padding-left:26px;font-size:0.875rem;color:var(--body);margin-bottom:12px;line-height:1.5} .price-features li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:800} .pricing-note{text-align:center;margin-top:36px;font-size:0.875rem;color:var(--muted);max-width:560px;margin-left:auto;margin-right:auto;line-height:1.7} /* ─── FAQ ─── */ #faq{background:var(--section)} .faq-wrap{max-width:760px;margin:0 auto} .faq-item{border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;overflow:hidden;transition:border-color 0.2s;background:#fff} .faq-item.open{border-color:var(--red-border)} .faq-q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:#fff;font-size:1rem;font-weight:600;color:var(--h-color);cursor:pointer;transition:background 0.15s} .faq-q:hover{background:var(--red-bg)} .faq-icon{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:0.9rem;flex-shrink:0;transition:all 0.22s;font-style:normal;font-weight:700} .faq-item.open .faq-icon{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(45deg)} .faq-body{max-height:0;overflow:hidden;transition:max-height 0.34s ease} .faq-a{padding:16px 24px 22px;font-size:0.9rem;color:var(--muted);line-height:1.78;border-top:1px solid var(--border);background:#fff;opacity:0;transform:translateY(-6px);transition:opacity 0.25s var(--ease-in),transform 0.25s var(--ease-in)} .faq-item.open .faq-a{opacity:1;transform:translateY(0);transition-delay:0.08s} /* ─── FINAL CTA ─── */ #cta-final{background:var(--navy);padding:100px 0;position:relative;overflow:hidden} #cta-final::before{content:'';position:absolute;top:50%;left:-10%;width:120%;height:1px;background:linear-gradient(to right,transparent,rgba(217,30,24,0.2),transparent);pointer-events:none} .cta-bloom{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(217,30,24,0.12) 0%,transparent 65%);pointer-events:none} .cta-inner{max-width:700px;margin:0 auto;text-align:center;position:relative;z-index:2} .cta-final-h{font-size:clamp(2.1rem,4.5vw,3.25rem);font-weight:900;color:#fff;line-height:1.08;margin-bottom:18px;letter-spacing:-0.02em} .cta-final-p{font-size:1rem;color:rgba(255,255,255,0.58);line-height:1.76;margin-bottom:28px} .cta-trust{font-size:0.78rem;color:rgba(255,255,255,0.5);margin-top:20px;letter-spacing:0.01em} .scarcity{display:inline-flex;align-items:center;gap:7px;background:var(--amber-bg);color:#78350F;font-size:0.74rem;font-weight:700;padding:6px 14px;border-radius:7px;border:1px solid rgba(245,158,11,0.22);margin-bottom:30px} .s-dot{width:6px;height:6px;background:var(--amber);border-radius:50%;animation:blink 2s ease-in-out infinite} /* scarcity badge relocated into the pricing section header */ .sec-head .scarcity{margin:22px 0 0} .scarcity-sub{max-width:560px;margin:12px auto 0;font-size:0.82rem;color:var(--muted);line-height:1.65} /* audit benefit list (above the form) */ .cta-benefits{max-width:460px;margin:0 auto 36px;text-align:left} .cta-benefits-title{font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:12px} .cta-benefits ul li{display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;color:rgba(255,255,255,0.78);line-height:1.6;margin-bottom:10px} .cta-benefits ul li .icon{color:var(--green);flex-shrink:0;width:17px;height:17px;margin-top:3px} /* ─── GROWTH AUDIT FORM ─── */ .cta-form{max-width:580px;margin:8px auto 0;text-align:left;background:rgba(255,255,255,0.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.14);border-radius:var(--r);padding:32px;position:relative;z-index:2} .cta-form-head{text-align:center;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.1)} .cta-form-title{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:-0.01em} .cta-form-desc{font-size:0.875rem;color:rgba(255,255,255,0.55);line-height:1.6} .cta-form-textarea::placeholder{color:rgba(17,24,39,0.38);font-size:0.85rem} .cta-form-consent{margin-top:18px} .cta-form-consent label{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .cta-form-consent input[type="checkbox"]{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--red);cursor:pointer} .cta-form-consent span{font-size:0.72rem;color:rgba(255,255,255,0.48);line-height:1.6} .cta-form-consent a{color:rgba(255,255,255,0.75);text-decoration:underline;text-underline-offset:2px} .cta-form-consent a:hover{color:#fff} .cta-book-btn{margin:18px auto 0;display:flex;max-width:360px} .cta-form-divider{display:flex;align-items:center;gap:14px;margin:22px 0} .cta-form-divider::before,.cta-form-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.12)} .cta-form-divider span{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.4)} .cta-form-book-direct{width:100%} .cta-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cta-form-group{margin-bottom:18px} .cta-form-group:last-of-type{margin-bottom:0} .cta-form-label{display:block;font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:7px} .cta-form-optional{font-weight:400;color:rgba(255,255,255,0.5)} .cta-form-input{width:100%;background:rgba(255,255,255,0.96);border:1.5px solid rgba(255,255,255,0.15);border-radius:var(--r-sm);padding:11px 14px;font-size:0.9375rem;color:var(--h-color);font-family:var(--font)} .cta-form-input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(217,30,24,0.25)} .cta-form-textarea{resize:vertical;min-height:80px;font-family:var(--font)} .cta-form-counter{display:block;text-align:right;font-size:0.72rem;color:rgba(255,255,255,0.5);margin-top:5px} .cta-form-counter.limit{color:#FCA5A5} .cta-form-submit{width:100%;margin-top:18px} .cta-form-submit:disabled{opacity:0.55;cursor:not-allowed;transform:none;animation:none} .cta-form-status{margin-top:14px;font-size:0.875rem;text-align:center;line-height:1.6} .cta-form-status.success{color:#6EE7B7} .cta-form-status.error{color:#FCA5A5} .cta-form-honey{position:absolute;left:-9999px;opacity:0;height:0;width:0} @media(max-width:640px){.cta-form-row{grid-template-columns:1fr}.cta-form{padding:24px}} /* ─── FOOTER ─── */ footer{background:var(--navy-deep);border-top:1px solid rgba(255,255,255,0.07);padding:60px 0 32px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:52px} .footer-brand .nav-logo{color:#fff;margin-bottom:16px} .footer-brand p{font-size:0.875rem;color:rgba(255,255,255,0.38);line-height:1.72;max-width:280px} .footer-col h4{font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.38);margin-bottom:18px} .footer-col ul li{margin-bottom:11px} .footer-col ul a{font-size:0.875rem;color:rgba(255,255,255,0.42);transition:color 0.15s} .footer-col ul a:hover{color:#fff} .footer-contact a{font-size:0.875rem;color:rgba(255,255,255,0.42);display:flex;align-items:center;gap:8px;margin-bottom:11px;transition:color 0.15s} .footer-contact a:hover{color:#fff} .footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} .footer-copy{font-size:0.78rem;color:rgba(255,255,255,0.26)} .footer-socials{display:flex;gap:10px} .footer-socials a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:0.88rem;color:rgba(255,255,255,0.38);transition:all 0.18s;border:1px solid rgba(255,255,255,0.08)} .footer-socials a .icon{width:16px;height:16px} .footer-socials a:hover{background:var(--red);color:#fff;border-color:var(--red)} .footer-legal-links{display:flex;align-items:center;gap:8px;font-size:0.78rem;color:rgba(255,255,255,0.45)} .footer-legal-links a{color:rgba(255,255,255,0.6);transition:color 0.15s} .footer-legal-links a:hover{color:#fff} /* ─── MOBILE STICKY ─── */ .mobile-cta-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:998;padding:12px 16px;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 24px rgba(0,0,0,0.09)} .mobile-cta-bar .btn-primary{width:100%;justify-content:center;padding:14px} /* ─── RESPONSIVE ─── */ @media(max-width:1024px){ .bento{grid-template-columns:repeat(2,1fr)} .sb.featured{grid-column:span 1;grid-row:span 1} .sb:nth-child(2),.sb:nth-child(3),.sb:nth-child(4),.sb:nth-child(5){grid-column:span 1} .sb.wide{grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:20px} .sb-wide-divider{display:none} .promise-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} .steps-row{grid-template-columns:repeat(2,1fr)} .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto} .price-card.featured{transform:none} .audit-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:768px){ .hero-inner{grid-template-columns:1fr;gap:44px} /* compact — but never hidden — hero calculator on mobile */ .hero-engine{min-height:0;padding:40px 22px} .hero-calc{max-width:100%;padding:24px 20px} .hero-calc-num{font-size:2.5rem} .nav-links,.nav-right{display:none} .hamburger{display:flex} .bento{grid-template-columns:1fr} .sb.featured,.sb.wide,.sb:nth-child(2),.sb:nth-child(3),.sb:nth-child(4),.sb:nth-child(5){grid-row:auto;grid-column:auto;flex-direction:column;align-items:flex-start;gap:16px} .promise-grid,.port-grid{grid-template-columns:1fr} .steps-row{grid-template-columns:1fr} .shift-grid{grid-template-columns:1fr} .caps-inner{gap:10px} .footer-grid{grid-template-columns:1fr} .mobile-cta-bar{display:block} body{padding-bottom:80px} .audit-grid{grid-template-columns:repeat(2,1fr);gap:10px} .audit-card{padding:18px 8px} .sec{padding:72px 0} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:0.01ms!important} .reveal{opacity:1;transform:none} }