/* Premium Corporate 3-Color Palette */
:root {
    --primary: #FEC802; /* Vibrant Yellow */
    --black: #000000;   /* Pure Black */
    --white: #FFFFFF;   /* Pure White */
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* !important: the theme's reset.css also declares `body { font-family: ... }`
   with the exact same selector (equal specificity) and loads AFTER this
   stylesheet, so on a tie the later source wins and silently replaces
   Montserrat with the reset's system-font stack everywhere on the page. */
body {
    font-family: 'Montserrat', sans-serif !important;
    background-color: var(--white);
    color: var(--black);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
/* Same tie as the body font-family above: the theme's reset.css ships
   placeholder pink/navy link and button colors (#c36 / #336) meant to be
   overridden, at equal specificity, loading after this file. Any <a> or
   form button we haven't explicitly classed (e.g. Contact Form 7's submit
   button, which has no styling of its own at all) falls through to those
   placeholders instead of the brand palette. */
a {
    color: var(--primary);
}
a:hover, a:active {
    color: #b8860b;
}
.nav-links a:hover, .white-links a:hover, .mobile-menu-links a:hover {
    color: var(--primary);
}
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
    display: inline-block;
    background-color: var(--primary);
    color: var(--black);
    border: none;
    border-radius: 50px;
    padding: 16px 40px;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.4s ease;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
    background-color: var(--black);
    color: var(--white);
}

/* NOTE: overflow-x:hidden stays on body only (it was already there before
   this file's "mobile responsive" pass and isn't the issue) — do NOT add it
   to html too. html having ANY non-visible overflow breaks position:sticky
   for every descendant on the page (the "How We Work" sticky left column
   and the AI-Insights scroll-scrub pin both rely on it). The mobile
   horizontal-overflow bugs this was guarding against are already fixed at
   the source (min-width:0 on .container/grid children, width:100% +
   min-width:0 on the marquee wrappers) — this was always meant as a backup,
   never load-bearing, and it's not safe to re-add here. */

/* Typography */
h1, h2, h3, h4, .logo {
    font-weight: 800;
    line-height: 1.2;
}

h1 { font-size: 4.2rem; letter-spacing: -1.5px; margin-bottom: 1.5rem; }
h2 { font-size: 2.8rem; margin-bottom: 1.5rem; letter-spacing: -1px; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; }
p { margin-bottom: 1.5rem; font-size: 1.1rem; font-weight: 500; }

.subtitle { 
    font-size: 0.85rem; 
    color: var(--black); 
    background-color: var(--primary);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
}

.subtitle.danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.subtitle.dark {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary);
}

.subtitle.light {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--black);
}

/* Subtitles inside yellow sections */
.bg-primary .subtitle {
    background-color: var(--black);
    color: var(--white);
}

/* Utilities */
.bg-primary { background-color: var(--primary); color: var(--black); }
.bg-black { background-color: #0a0a0a; color: var(--white); }
.bg-white { background-color: var(--white); color: var(--black); }
.bg-light { background-color: #f8f9fa; color: var(--black); }

.black-text { color: var(--black) !important; }
.white-text { color: var(--white) !important; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.hidden { display: none !important; }
.align-items-center { align-items: center; }

/* Premium UI Utilities */

/* Container */
.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    /* Several sections (.v3-hero, .rounded-cta-box's grid-2 wrapper, etc.)
       are `display: flex`/`grid` with .container as their only real child,
       which makes it a flex/grid item — those default to `min-width: auto`,
       letting the item refuse to shrink below its content's natural width
       and silently overflow the viewport on narrow screens. min-width: 0
       here is always safe (it's a no-op when .container isn't a flex/grid
       item) and removes that failure mode everywhere at once. */
    min-width: 0;
}
@media (max-width: 480px) { .container { padding: 0 1.25rem; } }

/* Same min-width:auto flex/grid-item overflow as .container above, but for
   the direct children of every grid/flex container on the page that can
   hold a heading or other wide content — each one is a grid/flex item and
   so can refuse to shrink below its content's natural width, silently
   pushing the whole page wider than the viewport on narrow screens. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *,
.v3-eng-grid > *, .v3-stats-row > *, .v3-protect-grid > *,
.v3-footer-grid > *, .pillar-grid > *, .proof-grid > *,
.v3-score-body > *, .v3-funnel-row > *, .v3-score-metric-row > * {
    min-width: 0;
}

/* Buttons (Runok Pill Style) */
.btn {
    display: inline-block;
    padding: 16px 40px;
    font-weight: 700;
    text-transform: none;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s ease;
    font-size: 1.05rem;
    border: none;
}

.btn-black {
    background-color: var(--black);
    color: var(--white);
}

.btn-black:hover {
    background-color: var(--primary);
    color: var(--black);
    transform: translateY(-3px);
}

.bg-primary .btn-black:hover, .mega-menu-sidebar .btn-black:hover {
    background-color: var(--white);
    color: var(--black);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--black);
}

.btn-primary:hover {
    background-color: var(--black);
    color: var(--white);
    transform: translateY(-3px);
}

.bg-black .btn-primary:hover, .hero .btn-primary:hover {
    background-color: var(--white);
    color: var(--black);
}

.btn-outline {
    background-color: transparent;
    color: var(--black);
    border: 2px solid var(--black);
    padding: 14px 38px;
}

.btn-outline:hover {
    background-color: var(--black);
    color: var(--white);
    transform: translateY(-3px);
}

.btn-outline-white {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 14px 38px;
}

.btn-outline-white:hover {
    background-color: var(--white);
    color: var(--black);
    transform: translateY(-3px);
}

/* Navbar */
.navbar {
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo {
    height: 60px;
    width: auto;
    display: block;
}

.footer-logo {
    height: 60px;
    width: auto;
    display: block;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    color: var(--black);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    padding: 5px 0;
}

.white-links a {
    color: var(--white);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Mega Menu */
.mega-menu {
    position: absolute;
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid rgba(0,0,0,0.05);
}

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

.mega-menu {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 850px;
    padding: 0;
    display: flex;
    overflow: hidden;
}

.mega-menu-item:hover .mega-menu {
    transform: translateX(-50%) translateY(0);
}

.mega-menu-sidebar {
    width: 35%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mega-menu-sidebar h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.mega-menu-sidebar p {
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 500;
}

.mega-menu-content {
    width: 65%;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.mega-column h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.mega-column h4 i { 
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.mega-column:hover h4 i {
    transform: translateX(3px) translateY(-3px);
}

.mega-menu-content a {
    display: block;
    color: var(--black) !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.6rem 0;
    transition: color 0.3s, transform 0.3s;
}

.mega-menu-content a:hover {
    color: var(--primary) !important;
    transform: translateX(5px);
}


/* Nav Actions (Cart & Button) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Mobile hamburger + slide-in menu */
.hamburger-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.hamburger-btn:hover, .hamburger-btn:focus { background: none; }
.hamburger-btn span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; background: #0a0a0a; z-index: 999; display: flex; flex-direction: column; padding: 1.5rem 2rem 2.5rem; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; flex-shrink: 0; }
.mobile-menu-close { background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 0; }
.mobile-menu-close:hover, .mobile-menu-close:focus { background: none; color: var(--primary); }
/* flex:1 + min-height:0 is the reliable cross-browser way to make one flex
   child scroll while its siblings (header above, action buttons below)
   stay fixed in place — without min-height:0 a flex item won't shrink
   below its content's natural height in some browsers, which silently
   breaks the scrolling instead of just scrolling the whole drawer. This
   replaces an earlier margin-bottom:auto + position:sticky combination
   that pushed the action buttons off-screen entirely on some viewport
   sizes (confirmed on iPhone 14 Pro Max emulation, 430x932) even though
   it tested fine on others — sticky's stuck-offset calculation interacting
   with an auto-margin sibling is not consistent across browsers. */
.mobile-menu-links { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mobile-menu-links a { color: #fff; font-size: 1.4rem; font-weight: 700; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); text-decoration: none; }

/* Mobile nav accordion groups — each mirrors a desktop mega-menu column so
   phone users can still reach every sub-page, not just one representative
   link per category. */
.mm-group { border-bottom: 1px solid rgba(255,255,255,0.1); }
.mm-group summary { color: #fff; font-size: 1.4rem; font-weight: 700; padding: 1rem 0; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.mm-group summary::-webkit-details-marker { display: none; }
.mm-group summary i { font-size: 0.9rem; color: rgba(255,255,255,0.5); transition: transform 0.25s; }
.mm-group[open] summary i { transform: rotate(180deg); }
.mm-sublinks { display: flex; flex-direction: column; padding: 0 0 1rem 0.5rem; }
.mm-sublinks a { color: #fff; font-size: 1.05rem; font-weight: 600; padding: 0.6rem 0; border-bottom: 1px solid rgba(254,200,2,0.35); }
.mm-sublinks a:last-child { border-bottom: none; }
.mm-sublinks a:hover { color: var(--primary); }
/* Plain flow item, outside the scrolling .mobile-menu-links region above —
   always visible regardless of how much accordion content there is or how
   tall the viewport is, no scrolling or sticky positioning involved. */
.mobile-menu-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.mobile-menu-actions .btn { text-align: center; width: 100%; }

@media (max-width: 992px) {
    .hamburger-btn { display: flex; }
    /* Both nav-action buttons are duplicated inside .mobile-menu-actions, so
       hide the whole group here rather than just one button — otherwise the
       "Book an Audit" pill fights the hamburger for space next to the logo
       on narrow phones. !important: the header markup sets `style="display:
       flex"` inline on this element, which otherwise beats any stylesheet
       rule regardless of source order or media query. */
    .nav-actions { display: none !important; }
}
@media (min-width: 993px) {
    .mobile-menu { display: none !important; }
}

/* Hero Section */
.hero {
    padding: 8rem 0 14rem;
    position: relative;
    overflow: hidden;
}

/* Sections Global Layout */
.about, .services {
    padding: 10rem 0;
}

/* Overlapping About Section & Creative Sections */
.about {
    margin-top: -8rem;
    position: relative;
    z-index: 10;
    border-radius: 40px 40px 0 0;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Cards & Grids */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .grid-2 { grid-template-columns: 1fr; gap: 2rem; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
    .grid-5 { grid-template-columns: 1fr; }
}

/* AI Tools & Scanner */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Footer CTA */
.footer-cta {
    padding: 8rem 0 0;
    border-radius: 40px 40px 0 0;
    margin-top: -40px;
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding-bottom: 6rem;
    align-items: center;
}

.footer-info .logo {
    font-size: 3rem;
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 3rem 0;
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1.5rem;
}
.footer-links a {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7) !important;
}
.footer-links a:hover {
    color: var(--primary) !important;
}

/* Responsive */
@media (max-width: 992px) {
    .hero { padding: 4rem 0 10rem; }
     .footer-grid { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .footer-action { text-align: left; }
    h1 { font-size: 3.5rem; }
    .about { margin-top: 0; border-radius: 0; }
}

/* --- NEW ICON & COMPONENT STYLES --- */

/* Utility */
.mt-4 { margin-top: 2rem !important; }

/* Hero Bullets */

/* Hero Visual Overrides (Mockup Floating Cards) */

/* Card Icons */

/* Social Icons */
/* --- MASSIVE REDESIGN UTILITY CLASSES --- */

/* Split Screen (Section 3) */

/* Ecosystem Connectors (Section 4) */

/* Animated Counters & Charts (Section 5) */

/* Horizontal Timeline (Section 7) */

/* Success Story Magazine Layout (Section 8) */

/* Asymmetrical Bento Grid (Section 9) */


/* Testimonial Cluster (Section 12) */

/* Tech Stack Grid (Section 13) */

/* Accordion FAQ (Section 15) */

/* Animations */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(254, 200, 2, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(254, 200, 2, 0); }
    100% { box-shadow: 0 0 0 0 rgba(254, 200, 2, 0); }
}


/* --- LAYOUT FIXES --- */

/* Split Screen Max-Width Fix (Section 3) */

/* Bento Grid Row Fix (Section 9) */

/* Testimonial Mobile Fix (Section 12) */

/* --- FINAL DESIGN UTILITIES --- */

/* 5 Column Grid */

/* 4 Column Flex/Grid for Services */

/* 3 Column Grid for Testimonials */

/* Split Background Section */
.split-bg {
    background: linear-gradient(to right, #0a0a0a 50%, #f8f9fa 50%);
}

.split-bg-reverse {
    background: linear-gradient(to right, #f8f9fa 50%, #0a0a0a 50%);
}

@media (max-width: 992px) {
    .split-bg {
        background: #0a0a0a; /* Default to dark on mobile, will add a light bg to the right card */
    }
    .split-bg-reverse {
        background: #f8f9fa;
    }
}

/* Minimalist Icon Cards (Section 5) */

/* Rounded Final CTA (Section 8) */
.rounded-cta-box {
    background: #0a0a0a;
    border-radius: 32px;
    padding: 5rem 4rem;
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   HOMEPAGE REDESIGN — v2 additions
   Scroll reveals, Services Ecosystem, Interactive Timeline, Proof Strip.
   Everything below is plain CSS + vanilla JS: no plugins required.
   ========================================================================== */

/* Mono accent font (technical / terminal feel) */
.mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; }

/* Scroll reveal system (fixes the previously-broken .fade-up hook) */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Proof Strip ---- */
.proof-strip { background: #0a0a0a; padding: 3.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.proof-item { text-align: center; }
.proof-item .num { font-size: 3rem; font-weight: 900; color: var(--primary); line-height: 1; }
.proof-item .label { color: #fff; font-size: 0.85rem; margin-top: 0.6rem; font-weight: 600; }
@media (max-width: 768px) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }

/* ---- Services Ecosystem (Build / Protect / Grow) ---- */
.ecosystem-wrap { position: relative; }

.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; position: relative; z-index: 2; }
@media (max-width: 992px) { .pillar-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.pillar-card {
    background: #fff;
    border: 1px solid rgba(10,10,10,0.08);
    border-radius: 28px;
    padding: 2.75rem 2.25rem 2.25rem;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.175,.885,.32,1.275), box-shadow .4s, border-color .4s;
}
.pillar-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--primary), #ffe27a, var(--primary));
}
.pillar-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.16); border-color: rgba(254,200,2,0.5); }
.pillar-bg-icon { position: absolute; right: -1.25rem; bottom: -1.75rem; font-size: 11rem; color: rgba(10,10,10,0.035); pointer-events: none; line-height: 1; z-index: 0; }
.pillar-num { position: absolute; top: 1.6rem; left: 2rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; color: rgba(10,10,10,0.25); z-index: 1; }
.pillar-icon {
    width: 76px; height: 76px; margin: 0.5rem auto 1.5rem; border-radius: 20px; position: relative; z-index: 1;
    background: var(--primary); color: #0a0a0a; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; box-shadow: 0 0 0 7px rgba(254,200,2,0.12), 0 14px 30px rgba(254,200,2,0.35);
}
.pillar-card h3 { color: #0a0a0a; font-size: 1.9rem; margin-bottom: 0.6rem; position: relative; z-index: 1; }
.pillar-card > p { color: #666; font-size: 0.96rem; line-height: 1.6; margin-bottom: 1.5rem; position: relative; z-index: 1; }

.pillar-list { display: flex; flex-direction: column; margin-bottom: 1.5rem; border-top: 1px solid rgba(10,10,10,0.08); position: relative; z-index: 1; }
.pillar-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 0.9rem 0.15rem; border-bottom: 1px solid rgba(10,10,10,0.08);
    text-decoration: none; color: #2a2a2a; font-size: 0.92rem; font-weight: 600; text-align: left;
    opacity: 0; transform: translateX(-10px);
    transition: opacity .5s cubic-bezier(.34,1.56,.64,1), transform .5s cubic-bezier(.34,1.56,.64,1), background .2s ease, padding-left .2s ease;
}
.pillar-card.in-view .pillar-row { opacity: 1; transform: translateX(0); }
.pillar-row:nth-child(1) { transition-delay: .05s; }
.pillar-row:nth-child(2) { transition-delay: .15s; }
.pillar-row:nth-child(3) { transition-delay: .25s; }
.pillar-row span { display: flex; align-items: center; gap: 10px; }
.pillar-row span i { color: var(--primary); background: #0a0a0a; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; flex-shrink: 0; }
.pillar-row .row-arrow { color: rgba(10,10,10,0.2); font-size: 0.75rem; transition: transform .2s, color .2s; }
.pillar-row.is-link:hover { background: rgba(254,200,2,0.1); padding-left: 0.6rem; }
.pillar-row.is-link:hover .row-arrow { color: #0a0a0a; transform: translateX(3px); }
.pillar-row:not(.is-link) { color: #888; cursor: default; }
.pillar-row:not(.is-link) span i { background: #ddd; color: #888; }

.pillar-card details { text-align: left; margin-top: auto; position: relative; z-index: 1; }
.pillar-card summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #0a0a0a; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;
}
.pillar-card summary::-webkit-details-marker { display: none; }
.pillar-card summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; color: var(--primary); transition: transform .3s; }
.pillar-card details[open] summary::after { transform: rotate(180deg); }
.pillar-card .details-body { color: #666; font-size: 0.9rem; line-height: 1.6; padding-top: 1rem; text-align: center; }

.flow-arrows { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 3.5rem; color: rgba(255,255,255,0.35); font-weight: 700; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; }
.flow-arrows i { color: var(--primary); opacity: 0.6; }
@media (max-width: 768px) { .flow-arrows { flex-direction: column; gap: 0.5rem; } .flow-arrows i.rotate-mobile { transform: rotate(90deg); } }

/* ---- Case study / industry CTA row ---- */
.section-cta-row { text-align: center; margin-top: 3.5rem; }

/* ---- Decorative corner vector icons (ambient background texture) ---- */
.corner-icon { position: absolute; font-size: 9rem; color: rgba(10,10,10,0.045); pointer-events: none; z-index: 0; line-height: 1; }
.corner-icon.on-dark { color: rgba(255,255,255,0.045); }
.corner-icon.on-primary { color: rgba(10,10,10,0.07); }
.corner-icon-tl { top: -1.5rem; left: -1.5rem; }
.corner-icon-tr { top: -1.5rem; right: -1.5rem; }
.corner-icon-bl { bottom: -1.5rem; left: -1.5rem; }
.corner-icon-br { bottom: -1.5rem; right: -1.5rem; }
/* Same overflow pattern as .glow-orb above: corner-icon-tr/-br sit with a
   negative right offset, deliberately bleeding past their container's edge
   for a desktop background-watermark effect. At 5.5rem that bleed still
   pushes past narrow viewports (confirmed: a few px of real horizontal
   overflow on 390px-wide screens). It's pointer-events:none at ~4.5%
   opacity, so hiding it below the breakpoint is unnoticeable and safe. */
@media (max-width: 640px) { .corner-icon { display: none !important; } }

/* ==========================================================================
   PREMIUM IMMERSIVE LAYER — grain, glass, glow, depth
   Additive only. Palette (#FEC802 / #000 / #FFF) and fonts unchanged.
   ========================================================================== */

/* Subtle cinematic film-grain texture for dark sections */
.grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
}

/* Soft ambient color blobs for depth (place inside position:relative + overflow:hidden parents) */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
/* Every .glow-orb instance sets its own inline width/top/right (etc.) sized
   for a desktop bleed effect — often 400px+ wide, deliberately positioned
   half off the edge of its section. Sections aren't given overflow:hidden
   to contain that bleed because several of them (e.g. the "How We Work"
   sticky column) rely on overflow staying visible for position:sticky to
   work. On narrow viewports that same offset pushes the orb, and with it
   the whole page, past the viewport width, causing real horizontal scroll
   (confirmed: body.scrollWidth drops back to the viewport width the moment
   a .glow-orb is hidden). Since it's a decorative, pointer-events:none blur
   with no content, hiding it below the breakpoint where it starts causing
   trouble is the safe fix rather than re-tuning dozens of inline offsets.*/
@media (max-width: 640px) {
    .glow-orb { display: none !important; }
}

/* Frosted glass surface for dark backgrounds */
.glass-chip {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Frosted glass surface for light backgrounds */
.glass-chip-light {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(10,10,10,0.06);
    box-shadow: 0 20px 45px rgba(10,10,10,0.1);
}

@keyframes float-chip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .glass-chip[style*="float-chip"] { animation: none !important; }
}

/* ---- Proof strip: glass stat cards with divider rhythm ---- */
.proof-item { position: relative; padding: 0 1rem; }
.proof-item + .proof-item { border-left: 1px solid rgba(255,255,255,0.08); }
.proof-item .stat-icon { color: var(--primary); opacity: 0.6; font-size: 1.3rem; margin-bottom: 0.75rem; display: block; }
.proof-item .num { text-shadow: 0 0 34px rgba(254,200,2,0.4); }
@media (max-width: 768px) {
    .proof-item + .proof-item { border-left: none; }
    .proof-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
}

/* ---- Expertise section: floating stat badge on mission images ---- */
.mission-img-inner {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    position: relative;
    transition: box-shadow 0.4s ease;
}
.mission-img-inner::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); border-radius: 24px; pointer-events: none; }
.mission-img-wrapper:hover .mission-img-inner { box-shadow: 0 40px 80px rgba(254,200,2,0.18); }
.mission-stat-badge {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    background: #0a0a0a;
    color: #fff;
    border-radius: 16px;
    padding: 1.1rem 1.4rem;
    box-shadow: 0 20px 45px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
    border: 1px solid rgba(254,200,2,0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}
.mission-stat-badge .stat-num { font-size: 1.6rem; font-weight: 900; color: var(--primary); line-height: 1; text-shadow: 0 0 20px rgba(254,200,2,0.4); }
.mission-stat-badge .stat-label { font-size: 0.72rem; color: #fff; font-weight: 600; max-width: 132px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.3px; }
@media (max-width: 640px) { .mission-stat-badge { left: 1rem; bottom: -1.25rem; padding: 0.85rem 1.1rem; } }

/* ---- Testimonials: deeper glow + ring lift on hover ---- */
.review-card:hover { box-shadow: 0 25px 55px rgba(254,200,2,0.22); }
.reviewer-img { box-shadow: 0 0 0 3px rgba(254,200,2,0.18), 0 5px 15px rgba(0,0,0,0.1); transition: box-shadow 0.3s ease; }
.review-card:hover .reviewer-img { box-shadow: 0 0 0 3px rgba(254,200,2,0.4), 0 5px 15px rgba(0,0,0,0.15); }

/* ---- Marquee edge fade (matches tech-stack marquee treatment) ---- */
.marquee-fade { mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }


/* ==========================================================================
   HOMEPAGE REDESIGN v3 — Motion-driven, per spec.
   New component classes only (prefixed "v3-"). Requires window.Motion
   (vendored Framer Motion vanilla build) for: hero score count-up, stats
   count-up, Build/Protect/Grow scroll-linked line draw, 6-Phase scroll-fill
   line, testimonial crossfade, FAQ height animation. Everything else here
   (hover states, marquee, pulse dots) is plain CSS — no JS needed for those.
   prefers-reduced-motion is respected in script.js for every Motion call.
   ========================================================================== */

:root {
    --v3-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --v3-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 1. Hero: full-viewport, weight-contrast headline, live score card ---------- */
.v3-hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; background: #060606; padding: 8rem 0 4rem; }
@media (max-width: 640px) { .v3-hero { padding: 7rem 0 3rem; } }
.v3-hero-bg-image { position: absolute; inset: -10%; z-index: 0; pointer-events: none; background-image: url('hero-bg.jpg?v=2'); background-size: cover; background-position: center; opacity: 0.32; -webkit-mask-image: radial-gradient(circle at 60% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%); mask-image: radial-gradient(circle at 60% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%); }
.v3-hero-mesh { position: absolute; inset: -20%; z-index: 0; pointer-events: none; background:
    radial-gradient(circle at 20% 30%, rgba(254,200,2,0.14) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(254,200,2,0.09) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(254,200,2,0.06) 0%, transparent 50%);
    animation: v3-mesh-drift 22s ease-in-out infinite alternate;
    filter: blur(10px);
}
@keyframes v3-mesh-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-3%, 2%) scale(1.06); } }
.v3-hero-grid-bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 56px 56px; animation: v3-grid-drift 60s linear infinite; }
@keyframes v3-grid-drift { 0% { background-position: 0 0; } 100% { background-position: 56px 112px; } }
@media (prefers-reduced-motion: reduce) { .v3-hero-mesh, .v3-hero-grid-bg { animation: none; } }

.v3-hero-h1 { font-size: clamp(2.6rem, 5.4vw + 1rem, 4.6rem); line-height: 1.1; margin: 2rem 0 1.5rem; }
.v3-hero-h1 .w-medium { display: block; font-weight: 500; color: rgba(255,255,255,0.85); }
.v3-hero-h1 .w-bold { display: block; font-weight: 900; color: #fff; }
.v3-hero-h1 .w-bold span { color: var(--primary); }

.v3-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: #0a0a0a; padding: 16px 40px; border-radius: 50px; font-weight: 700; text-decoration: none; border: none; transition: transform 150ms var(--v3-ease-out), box-shadow 150ms var(--v3-ease-out), background 150ms var(--v3-ease-out), color 150ms var(--v3-ease-out); box-shadow: 0 8px 24px rgba(254,200,2,0.18); }
.v3-btn-primary:hover { background: #0a0a0a; color: var(--primary); transform: scale(1.02); box-shadow: 0 12px 34px rgba(254,200,2,0.3); }
.v3-btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #fff; padding: 15px 39px; border-radius: 50px; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(255,255,255,0.25); transition: 150ms var(--v3-ease-out); }
.v3-btn-ghost:hover { border-color: #fff; background: #fff; color: #0a0a0a; transform: scale(1.02); }

.v3-score-card { position: relative; width: 100%; max-width: 440px; background: #fff; border: 1px solid rgba(10,10,10,0.06); border-radius: 20px; padding: 2rem; box-shadow: 0 30px 70px rgba(0,0,0,0.35); }
.v3-score-head { display: flex; align-items: center; gap: 10px; margin-bottom: 1.75rem; }
.v3-score-head .dot { width: 8px; height: 8px; border-radius: 50%; background: #27c93f; box-shadow: 0 0 10px #27c93f; animation: v3-breathe 2s ease-in-out infinite; }
.v3-score-head strong { color: #0a0a0a; font-size: 0.92rem; font-weight: 700; }
.v3-score-head span.url { margin-left: auto; font-size: 0.7rem; color: rgba(10,10,10,0.35); }
.v3-score-body { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
@media (max-width: 480px) { .v3-score-body { grid-template-columns: 1fr; text-align: center; } }
.v3-score-gauge { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.v3-score-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.v3-score-gauge circle.track { fill: none; stroke: #eee; stroke-width: 8; }
.v3-score-gauge circle.bar { fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; filter: drop-shadow(0 0 8px rgba(254,200,2,0.5)); }
.v3-score-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.v3-score-num .n { font-size: 1.9rem; font-weight: 900; color: #0a0a0a; line-height: 1; }
.v3-score-num .l { font-size: 0.6rem; color: rgba(10,10,10,0.4); text-transform: uppercase; letter-spacing: 1px; }
.v3-score-metrics { display: flex; flex-direction: column; gap: 0.75rem; }
.v3-score-metric-row { display: grid; grid-template-columns: 100px 1fr 30px; align-items: center; gap: 10px; }
.v3-score-metric-row span:first-child { color: rgba(10,10,10,0.6); font-size: 0.8rem; font-weight: 600; }
.v3-score-metric-row .track { height: 5px; border-radius: 3px; background: #eee; overflow: hidden; }
.v3-score-metric-row .fill { display: block; height: 100%; border-radius: 3px; background: var(--primary); width: 0%; }
.v3-score-metric-row .val { color: #b8900a; font-size: 0.75rem; font-weight: 700; text-align: right; }
@keyframes v3-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- 2. Hosting strip: grayscale->color on hover, edge fade ----------
   .v3-hosting-track is an unwrapped `width: max-content` flex row (the full,
   un-looped logo list) — by design much wider than the viewport, meant to be
   clipped by its masked ancestor. overflow:hidden alone only clips PAINT
   though; it doesn't stop a `width: auto` block ancestor from being SIZED to
   fit a wide descendant in some layout/rendering-engine edge cases. `width:
   100%` + `min-width: 0` on every ancestor in the chain removes that
   ambiguity outright, so the 3700px+ track can never widen the page itself. */
.v3-hosting-strip { background: #fafafa; padding: 3rem 0; border-bottom: 1px solid #eee; overflow: hidden; position: relative; width: 100%; min-width: 0; }
.v3-hosting-mask { width: 100%; min-width: 0; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); overflow: hidden; }
.v3-hosting-track { display: flex; width: max-content; gap: 3.5rem; align-items: center; animation: v3-marquee 50s linear infinite; }
.v3-hosting-track:hover { animation-play-state: paused; }
@keyframes v3-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.v3-hosting-item { font-size: 1.5rem; font-weight: 800; color: #999; filter: grayscale(1); opacity: 0.6; transition: opacity 0.3s, filter 0.3s; white-space: nowrap; }
.v3-hosting-item:hover { opacity: 1; filter: grayscale(0); }
@media (max-width: 640px) { .v3-hosting-item { font-size: 1.15rem; } .v3-hosting-track { gap: 2.25rem; } }
@media (prefers-reduced-motion: reduce) { .v3-hosting-track { animation: none; } }

/* ---------- 3. Stats bar: count-up, thin dividers — white band with a
   hairline top/bottom border so it stays legible between its neighbors ---------- */
.v3-stats { background: #fff; padding: 4.5rem 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.v3-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .v3-stats-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; } }
.v3-stat { text-align: center; border-left: 1px solid rgba(10,10,10,0.1); padding: 0 1rem; }
.v3-stat:first-child { border-left: none; }
@media (max-width: 768px) { .v3-stat:nth-child(odd) { border-left: none; } }
.v3-stat .n { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 900; color: #0a0a0a; line-height: 1; }
.v3-stat .l { color: #666; font-size: 0.85rem; margin-top: 0.6rem; font-weight: 700; }

/* ---------- 4. Build/Protect/Grow: scroll-linked connector diagram ---------- */
.v3-bpg { background: #0a0a0a; padding: 9rem 0; position: relative; overflow: hidden; }
.v3-bpg-diagram { --v3-bpg-dot: 60px; position: relative; max-width: 880px; margin: 0 auto 5rem; padding: 0 1rem; }
/* Track is inset by exactly half the node-dot width on each side, so its
   endpoints land precisely under the first/last node centers — no SVG
   viewBox stretching to fight with. Dot size is a variable so the mobile
   breakpoint below can shrink it without breaking that alignment math. */
.v3-bpg-track { position: absolute; left: calc(1rem + var(--v3-bpg-dot) / 2); right: calc(1rem + var(--v3-bpg-dot) / 2); top: calc(var(--v3-bpg-dot) / 2); height: 2px; background: rgba(255,255,255,0.08); }
.v3-bpg-track-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--primary); box-shadow: 0 0 8px rgba(254,200,2,0.7); }
.v3-bpg-nodes { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.v3-bpg-node { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.v3-bpg-node .dot { width: var(--v3-bpg-dot); height: var(--v3-bpg-dot); border-radius: 50%; background: #131313; border: 2px solid rgba(254,200,2,0.25); color: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: border-color 0.5s, color 0.5s, box-shadow 0.5s, transform 0.5s; }
.v3-bpg-node.lit .dot { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 30px rgba(254,200,2,0.35); transform: scale(1.08); }
.v3-bpg-node span.lbl { font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); transition: color 0.5s; }
.v3-bpg-node.lit span.lbl { color: #fff; }
@media (max-width: 480px) {
    .v3-bpg-diagram { --v3-bpg-dot: 44px; }
    .v3-bpg-node .dot { font-size: 1.1rem; }
    .v3-bpg-node span.lbl { font-size: 0.68rem; letter-spacing: 0.5px; }
}

/* ---------- 5. Engineered Not Templated: zig-zag text/graph rows.
   4 grid children in DOM order [text1, graph1, graph2, text2] naturally lay
   out as row1: text | graph, row2: graph | text with a plain 2-col grid. ---------- */
.v3-eng { background: #fff; padding: 9rem 0; }
.v3-eng-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 5rem; align-items: center; }
@media (max-width: 992px) { .v3-eng-grid { grid-template-columns: 1fr; gap: 3rem; } }
.v3-eng-visual { background: #f8f9fa; border-radius: 20px; padding: 2.5rem; }
.v3-eng-visual .v3-eng-visual-label { display: block; font-size: 0.72rem; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.25rem; }
.v3-eng-visual .v3-wave { margin: 0; }
.v3-eng-visual .v3-funnel { margin: 0; }
@media (max-width: 480px) {
    .v3-eng-visual { padding: 1.5rem; }
    .v3-funnel-row { grid-template-columns: 70px 1fr 38px; gap: 8px; }
}
.v3-eng-tag { display: inline-flex; align-items: center; gap: 10px; background: #0a0a0a; color: var(--primary); padding: 8px 16px; border-radius: 12px; font-weight: 700; margin-bottom: 1.5rem; font-size: 0.9rem; }

/* This class lived only in the original page's section-scoped <style> block
   — re-declared globally here since the redesigned Expertise section reuses it. */
.mission-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 2rem; font-weight: 700; color: var(--black); padding: 0.9rem 1.6rem; border: 2px solid var(--black); border-radius: 50px; text-decoration: none; transition: 0.25s; font-size: 0.95rem; }
.mission-cta:hover { background: var(--black); color: var(--primary); }

.v3-wave { display: flex; align-items: flex-end; gap: 5px; height: 90px; margin: 2rem 0; padding: 1.5rem; background: #f8f9fa; border-radius: 16px; }
.v3-wave span { display: block; height: 100%; flex: 1; background: linear-gradient(180deg, var(--primary), #ffe27a); border-radius: 3px; animation: v3-wave-bounce 1.4s ease-in-out infinite; }
@keyframes v3-wave-bounce { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .v3-wave span { animation: none; transform: scaleY(0.7); } }

.v3-funnel { display: flex; flex-direction: column; gap: 0.6rem; margin: 2rem 0; }
.v3-funnel-row { display: grid; grid-template-columns: 90px 1fr 50px; align-items: center; gap: 12px; }
.v3-funnel-row .lbl { font-size: 0.82rem; color: #666; font-weight: 600; }
.v3-funnel-row .bar-track { height: 30px; background: #f0f0f0; border-radius: 8px; overflow: hidden; }
.v3-funnel-row .bar-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #0a0a0a, var(--primary)); border-radius: 8px; }
.v3-funnel-row .pct { font-size: 0.8rem; font-weight: 700; color: #0a0a0a; text-align: right; }

/* ---------- 6. Tech Stack: auto-scrolling carousel (no heading).
   These classes lived only in the original static page's section-scoped
   <style> block; re-declared globally here since this section reuses them
   but nothing carried the CSS over when the markup was copied in. ---------- */
.v3-tech { background: #f8f9fa; padding: 5rem 0; width: 100%; min-width: 0; overflow-x: hidden; }
/* Same width:100% + min-width:0 containment as the hosting strip above —
   .tech-marquee-track is an inline-flex row of un-looped pills, intentionally
   much wider than the viewport and meant to be clipped by this masked
   ancestor; overflow:hidden alone isn't a reliable enough guarantee. */
.marquee-wrapper { position: relative; width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; margin-bottom: 1.5rem; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.tech-marquee-track { display: inline-flex; gap: 1.5rem; animation: marquee-scroll 38s linear infinite; padding-right: 1.5rem; }
.tech-marquee-track.reverse { animation: marquee-scroll-reverse 42s linear infinite; }
.tech-pill { background: #fff; border: 1px solid #ececec; border-radius: 50px; padding: 1.1rem 2.2rem; display: inline-flex; align-items: center; gap: 14px; box-shadow: 0 2px 10px rgba(10,10,10,0.04); transition: 0.3s; }
.tech-pill:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-2px); }
.tech-pill i, .tech-pill svg { font-size: 1.6rem; }
.tech-pill span { color: var(--black); font-weight: 700; font-size: 1.05rem; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee-scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@media (max-width: 640px) { .tech-pill { padding: 0.9rem 1.5rem; gap: 10px; } .tech-pill i, .tech-pill svg { font-size: 1.3rem; } .tech-pill span { font-size: 0.9rem; } }
@media (max-width: 420px) { .tech-pill { padding: 0.75rem 1.15rem; gap: 8px; } .tech-pill i, .tech-pill svg { font-size: 1.1rem; } .tech-pill span { font-size: 0.82rem; } }
@media (prefers-reduced-motion: reduce) { .tech-marquee-track, .tech-marquee-track.reverse { animation: none; } }

/* ---------- 7. Protect In Detail: dark-on-darker cards ---------- */
.v3-protect { background: #000; padding: 9rem 0; }
.v3-protect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .v3-protect-grid { grid-template-columns: 1fr; } }
.v3-protect-card { background: #16130a; border: 1px solid rgba(254,200,2,0.15); border-radius: 22px; padding: 2.5rem; transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--v3-ease-out); }
.v3-protect-card:hover { border-color: rgba(254,200,2,0.4); box-shadow: 0 0 40px rgba(254,200,2,0.1); transform: translateY(-6px); }
.v3-protect-card .ico { width: 54px; height: 54px; border-radius: 14px; background: var(--primary); color: #0a0a0a; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1.75rem; }
.v3-protect-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 10px; }
.v3-protect-card p { color: #fff; font-size: 0.92rem; line-height: 1.6; margin: 0; }
.v3-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #27c93f; box-shadow: 0 0 10px #27c93f; display: inline-block; animation: v3-breathe 2s ease-in-out infinite; }

/* ---------- 8. 6-Phase Framework: vertical stepped timeline, scroll-fill line ---------- */
.v3-phases { background: #0a0a0a; padding: 9rem 0; position: relative; }
.v3-phases-rail { position: relative; max-width: 760px; margin: 4rem auto 0; padding-left: 100px; }
@media (max-width: 640px) { .v3-phases-rail { padding-left: 60px; } }
.v3-phases-line-track { position: absolute; left: 39px; top: 8px; bottom: 8px; width: 2px; background: rgba(255,255,255,0.08); }
@media (max-width: 640px) { .v3-phases-line-track { left: 19px; } }
.v3-phases-line-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--primary), #ffe27a); box-shadow: 0 0 12px rgba(254,200,2,0.5); }
.v3-phase-row { position: relative; padding-bottom: 4rem; }
.v3-phase-row:last-child { padding-bottom: 0; }
.v3-phase-num { position: absolute; left: -100px; top: -6px; font-family: 'IBM Plex Mono', monospace; font-size: 2.4rem; font-weight: 700; color: rgba(255,255,255,0.12); width: 80px; text-align: right; }
@media (max-width: 640px) { .v3-phase-num { position: static; display: block; margin-bottom: 0.5rem; font-size: 1.5rem; text-align: left; } }
.v3-phase-dot { position: absolute; left: -100px; top: 6px; width: 80px; display: flex; justify-content: flex-end; }
.v3-phase-dot span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #0a0a0a; border: 2px solid rgba(254,200,2,0.4); margin-left: 32px; }
@media (max-width: 640px) { .v3-phase-dot { display: none; } }
.v3-phase-row h3 { color: #fff; font-size: 1.5rem; margin-bottom: 0.6rem; }
.v3-phase-row p { color: #fff; font-size: 0.98rem; line-height: 1.6; margin: 0; max-width: 480px; }

/* ---------- AI Insights polish (additive only, scoped to this section) ---------- */
.ai-assemble-content .subtitle.dark.mono { animation: v3-breathe 2.4s ease-in-out infinite; }
.ai-assemble-content .btn.btn-primary { animation: v3-cta-glow 2.4s ease-in-out infinite; }
@keyframes v3-cta-glow { 0%, 100% { box-shadow: 0 0 30px rgba(254,200,2,0.4); } 50% { box-shadow: 0 0 46px rgba(254,200,2,0.7); } }

/* ---------- 10. Testimonials: single large featured, crossfade ---------- */
.v3-testi { background: #fff; padding: 9rem 0; }
.v3-testi-wrap { max-width: 760px; margin: 4rem auto 0; text-align: center; position: relative; min-height: 280px; }
.v3-testi-slide { display: none; }
.v3-testi-slide.active { display: block; }
.v3-testi-slide i.fa-quote-left { color: var(--primary); font-size: 2rem; opacity: 0.5; margin-bottom: 1.5rem; display: block; }
.v3-testi-slide p.quote { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600; line-height: 1.5; color: #111; margin-bottom: 2rem; }
.v3-testi-who { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.v3-testi-who img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(254,200,2,0.15); }
.v3-testi-who strong { font-size: 1.05rem; color: #0a0a0a; }
.v3-testi-who span { font-size: 0.88rem; color: #888; }
.v3-testi-stars { color: #f59e0b; font-size: 0.85rem; margin-bottom: 1.25rem; }
.v3-testi-nav { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2.5rem; }
.v3-testi-nav button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(10,10,10,0.12); background: #fff; cursor: pointer; color: #0a0a0a; transition: 0.25s; }
.v3-testi-nav button:hover { background: var(--primary); border-color: var(--primary); }
.v3-testi-dots { display: flex; gap: 8px; }
.v3-testi-dots button { width: 8px; height: 8px; border-radius: 50%; background: #ddd; border: none; padding: 0; cursor: pointer; transition: 0.25s; }
.v3-testi-dots button.active { background: var(--primary); width: 22px; border-radius: 4px; }

/* ---------- 11. FAQ: Motion-animated accordion ---------- */
.v3-faq { background: #fff; padding: 9rem 0; }
.v3-faq-list { max-width: 800px; margin: 4rem auto 0; }
.v3-faq-item { border-bottom: 1px solid #eee; }
/* !important on color/border/background: the theme's reset stylesheet
   targets bare <button> elements and was winning over this single-class
   selector in a way plain specificity math didn't predict (likely a rule
   nested in a @media block) — forcing wins outright rather than chasing it. */
.v3-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.6rem 0; background: none !important; border: none !important; text-align: left; cursor: pointer; font-size: 1.05rem; font-weight: 700; color: #0a0a0a !important; font-family: inherit; }
.v3-faq-icon { width: 28px; height: 28px; border-radius: 50%; background: #f4f4f5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; transition: background 0.25s, transform 0.3s var(--v3-ease-out); }
.v3-faq-icon::before, .v3-faq-icon::after { content: ''; position: absolute; background: #0a0a0a; transition: transform 0.3s var(--v3-ease-out); }
.v3-faq-icon::before { width: 10px; height: 2px; }
.v3-faq-icon::after { width: 2px; height: 10px; }
.v3-faq-item.open .v3-faq-icon { background: var(--primary); transform: rotate(45deg); }
.v3-faq-a { overflow: hidden; height: 0; }
.v3-faq-a-inner { padding-bottom: 1.6rem; color: #666; font-size: 0.96rem; line-height: 1.65; max-width: 640px; }

/* ---------- 12. Final CTA: full-width bold yellow block ---------- */
.v3-final-cta { background: var(--primary); padding: 7rem 0; text-align: center; position: relative; overflow: hidden; }
.v3-final-cta h2 { color: #0a0a0a; font-size: clamp(2.2rem, 4.5vw + 1rem, 3.6rem); letter-spacing: -1px; margin: 0 auto 1.25rem; max-width: 700px; line-height: 1.15; }
.v3-final-cta p { color: rgba(10,10,10,0.65); font-size: 1.15rem; margin: 0 auto 2.5rem; max-width: 480px; font-weight: 600; }
.v3-final-cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.v3-final-btn-dark { display: inline-flex; align-items: center; gap: 10px; background: #0a0a0a; color: #fff; padding: 16px 40px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: transform 150ms var(--v3-ease-out); }
.v3-final-btn-dark:hover { transform: scale(1.02); }
.v3-final-btn-outline { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #0a0a0a; padding: 15px 39px; border-radius: 50px; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(10,10,10,0.3); transition: 150ms var(--v3-ease-out); }
.v3-final-btn-outline:hover { background: rgba(10,10,10,0.08); transform: scale(1.02); }

/* ---------- 13. Footer: multi-column, monospace copyright ---------- */
.v3-footer { background: #000; padding: 6rem 0 2.5rem; }
.v3-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 900px) { .v3-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 560px) { .v3-footer-grid { grid-template-columns: 1fr; } }
.v3-footer-col h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.25rem; font-weight: 700; }
.v3-footer-col a { display: block; color: #fff; font-size: 0.92rem; margin-bottom: 0.75rem; text-decoration: none; transition: color 0.2s; }
.v3-footer-col a:hover { color: var(--primary); }
.v3-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; flex-wrap: wrap; gap: 1rem; }
.v3-footer-bottom .copy { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px; color: rgba(255,255,255,0.35); }

/* Reveal / spring utilities for Motion.inView-driven entrances */
.v3-reveal { opacity: 0; transform: translateY(24px); }
.v3-reveal.v3-in { opacity: 1; transform: translateY(0); transition: opacity 0.7s var(--v3-ease-out), transform 0.7s var(--v3-ease-out); }
@media (prefers-reduced-motion: reduce) { .v3-reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   REUSABLE SECTION LIBRARY — for every internal page beyond the homepage.
   Generic, content-agnostic building blocks ("pg-" prefix) meant to be
   assembled per page (pick 4-7, fill in copy) rather than custom-designed
   each time. Pairs with the still-generic v3-stats / v3-testi / v3-faq /
   v3-final-cta / tech-marquee components above, which every page can also
   reuse as-is. All entrance animation hooks (.v3-reveal, [data-stagger])
   are wired up globally in script.js already — no new JS needed per page.
   ========================================================================== */

/* ---- Page hero: deliberately NOT a reskin of the homepage hero (no dark
   cinematic bg, no animated mesh, no live score card) — a light, editorial
   header instead, so landing on an interior page reads as a distinct,
   calmer "you're inside the site now" moment rather than a second homepage. ---- */
.pg-hero { background: #fff; padding: 10rem 0 3rem; position: relative; overflow: hidden; }
@media (max-width: 640px) { .pg-hero { padding: 7.5rem 0 2.5rem; } }
.pg-hero-glow { position: absolute; top: -180px; right: -120px; width: 480px; height: 480px; border-radius: 50%; background: rgba(254,200,2,0.16); filter: blur(90px); pointer-events: none; z-index: 0; }
.pg-breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-bottom: 1.75rem; font-size: 0.85rem; color: rgba(10,10,10,0.45); flex-wrap: wrap; }
.pg-breadcrumb a { color: rgba(10,10,10,0.45); text-decoration: none; transition: color 0.2s; }
.pg-breadcrumb a:hover { color: #0a0a0a; }
.pg-breadcrumb i { font-size: 0.6rem; opacity: 0.5; }
.pg-hero h1 { position: relative; z-index: 1; color: #0a0a0a; font-size: clamp(2.4rem, 4.5vw + 1rem, 3.6rem); letter-spacing: -1px; line-height: 1.14; margin: 0.5rem 0 1.5rem; max-width: 760px; }
.pg-hero h1 span { color: var(--primary); }
.pg-hero p.lead { position: relative; z-index: 1; color: #555; font-size: 1.2rem; max-width: 600px; line-height: 1.6; margin-bottom: 2.5rem; }
@media (max-width: 640px) { .pg-hero p.lead { font-size: 1.05rem; } }
.pg-hero-stats { position: relative; z-index: 1; display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid rgba(10,10,10,0.1); }
.pg-hero-stats .item strong { display: block; font-size: 1.8rem; font-weight: 900; color: #0a0a0a; line-height: 1; }
.pg-hero-stats .item span { font-size: 0.78rem; color: rgba(10,10,10,0.45); text-transform: uppercase; letter-spacing: 1px; }
/* Dark-on-light ghost button to pair with .v3-btn-primary in a .pg-hero (the
   homepage's .v3-btn-ghost is a white-on-transparent outline, invisible here) ---- */
.pg-btn-outline { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #0a0a0a; padding: 15px 39px; border-radius: 50px; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(10,10,10,0.25); transition: 150ms var(--v3-ease-out); }
.pg-btn-outline:hover { border-color: #0a0a0a; background: #0a0a0a; color: #fff; transform: scale(1.02); }

/* Optional right-side visual for a two-column .pg-hero (use .container.grid-2
   with the text block + a .pg-hero-visual as the two children — grid-2
   already collapses to one column under it on tablet/mobile). */
.pg-hero-visual { position: relative; z-index: 1; }
.pg-hero-visual img { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: 0 30px 70px rgba(10,10,10,0.16); border: 1px solid rgba(10,10,10,0.06); }
.pg-hero-visual .badge { position: absolute; bottom: -1.25rem; left: -1.25rem; background: #0a0a0a; color: #fff; border-radius: 16px; padding: 1rem 1.3rem; box-shadow: 0 20px 45px rgba(0,0,0,0.28); display: flex; align-items: center; gap: 12px; }
.pg-hero-visual .badge i { color: var(--primary); font-size: 1.4rem; flex-shrink: 0; }
.pg-hero-visual .badge strong { display: block; font-size: 0.95rem; color: #fff; line-height: 1.3; }
.pg-hero-visual .badge span { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
@media (max-width: 992px) { .pg-hero-visual { margin-top: 3.5rem; max-width: 480px; } }
@media (max-width: 480px) { .pg-hero-visual .badge { left: 0.75rem; bottom: -1rem; padding: 0.85rem 1.1rem; } }

/* ---- Feature / benefit grid: icon + heading + paragraph cards ---- */
.pg-features { background: #fff; padding: 7rem 0; }
.pg-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 3.5rem; }
@media (max-width: 900px) { .pg-features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pg-features-grid { grid-template-columns: 1fr; } }
.pg-feature-card { background: #f8f9fa; border-radius: 22px; padding: 2.25rem; transition: transform 0.4s var(--v3-ease-out), box-shadow 0.4s; }
.pg-feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(10,10,10,0.08); }
.pg-feature-card .ico { width: 52px; height: 52px; border-radius: 14px; background: #0a0a0a; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1.5rem; }
.pg-feature-card h3 { font-size: 1.2rem; margin-bottom: 0.65rem; color: #0a0a0a; }
.pg-feature-card p { color: #666; font-size: 0.94rem; line-height: 1.65; margin: 0; }
.pg-feature-card-dark { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.pg-feature-card-dark p { color: #fff; }
.pg-feature-card-dark a { color: var(--primary); font-weight: 700; font-size: 0.9rem; margin-top: 1rem; display: inline-block; }

/* ---- Cost Calculator widget ---- */
.pg-calc { background: #fff; border-radius: 28px; box-shadow: 0 30px 80px rgba(10,10,10,0.1); padding: 3rem; max-width: 780px; margin: 0 auto; position: relative; }
.pg-calc-step-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10,10,10,0.4); margin-bottom: 1.25rem; }
.pg-calc-step-label .n { background: var(--primary); color: #0a0a0a; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 0.7rem; }
.pg-calc h3 { font-size: 1.4rem; margin-bottom: 1.5rem; color: #0a0a0a; }
.pg-calc-step { display: none; }
.pg-calc-step.active { display: block; }
.pg-calc-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; align-items: stretch; }
.pg-calc-options.pg-calc-tiers { grid-template-columns: repeat(3, 1fr); }
.pg-calc-option { text-align: left; background: #f8f9fa; border: 2px solid transparent; border-radius: 16px; padding: 1.25rem 1.4rem; cursor: pointer; transition: 0.2s; font-family: inherit; display: flex; flex-direction: column; align-self: stretch; }
.pg-calc-tiers .pg-calc-option { justify-content: space-between; }
.pg-calc-option:hover { background: #f2ede0; }
.pg-calc-option.selected { background: var(--primary); border-color: #0a0a0a; }
.pg-calc-option .ico { font-size: 1.3rem; color: #0a0a0a; margin-bottom: 0.6rem; display: block; }
.pg-calc-option strong { display: block; font-size: 1rem; color: #0a0a0a; margin-bottom: 0.25rem; }
.pg-calc-option span { display: block; font-size: 0.82rem; color: #666; line-height: 1.4; }
.pg-calc-option.selected span { color: rgba(10,10,10,0.65); }
.pg-calc-back { background: none; border: none; color: #666; font-weight: 700; font-size: 0.85rem; cursor: pointer; margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: 6px; padding: 0; font-family: inherit; }
.pg-calc-back:hover { color: #0a0a0a; background-color: transparent; }
.pg-calc-result { text-align: center; padding: 1rem 0 0; }
.pg-calc-result-label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10,10,10,0.4); margin-bottom: 0.75rem; }
.pg-calc-result-amount { display: block; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 900; color: #0a0a0a; line-height: 1; margin-bottom: 0.5rem; }
.pg-calc-result-note { color: #666; font-size: 0.95rem; margin-bottom: 2rem; }
.pg-calc-result-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) {
    .pg-calc { padding: 2rem 1.5rem; }
    .pg-calc-options, .pg-calc-options.pg-calc-tiers { grid-template-columns: 1fr; }
}

/* ---- Process / steps grid: numbered cards, connector line on desktop ---- */
.pg-process { background: #f8f9fa; padding: 7rem 0; }
.pg-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; margin-top: 3.5rem; }
@media (max-width: 900px) { .pg-process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pg-process-grid { grid-template-columns: 1fr; } }
.pg-process-step { position: relative; background: #fff; border-radius: 20px; padding: 2.1rem 1.6rem; border: 1px solid rgba(10,10,10,0.06); }
.pg-process-step .num { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 700; color: var(--primary); background: #0a0a0a; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; margin-bottom: 1.25rem; }
.pg-process-step h3 { font-size: 1.05rem; margin-bottom: 0.6rem; color: #0a0a0a; }
.pg-process-step p { color: #666; font-size: 0.88rem; line-height: 1.6; margin: 0; }
.pg-process-step:not(:last-child)::after { content: ''; position: absolute; top: 2.75rem; left: 100%; width: 1.75rem; height: 2px; background: rgba(10,10,10,0.12); }
@media (max-width: 900px) { .pg-process-step::after { display: none; } }

/* ---- Pricing / package cards, 3-up with a highlighted "popular" tier ---- */
.pg-pricing { background: #0a0a0a; padding: 7rem 0; }
.pg-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 4.5rem; align-items: start; }
@media (max-width: 900px) { .pg-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }
/* White cards with a thin yellow border read as "premium, quiet" against
   the dark section; the "popular" tier flips to a filled yellow card so it
   reads as the obvious pick without needing a second color. */
.pg-price-card { background: #fff; border: 2px solid var(--primary); border-radius: 24px; padding: 2.5rem; min-width: 0; position: relative; }
.pg-price-card.popular { background: var(--primary); border-color: #0a0a0a; box-shadow: 0 20px 50px rgba(254,200,2,0.3); }
@media (min-width: 901px) { .pg-price-card.popular { transform: scale(1.03); } }
.pg-price-card.popular::before { content: 'Most Popular'; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); background: #0a0a0a; color: var(--primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 8px 20px; border-radius: 50px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,0.35); z-index: 2; }
.pg-price-card h3 { color: #0a0a0a; font-size: 1.2rem; margin-bottom: 0.5rem; }
.pg-price-card .price { display: flex; align-items: baseline; gap: 6px; margin: 1rem 0 1.5rem; }
.pg-price-card .price .amount { font-size: 2.5rem; font-weight: 900; color: #0a0a0a; }
.pg-price-card .price .period { color: rgba(10,10,10,0.5); font-size: 0.88rem; }
.pg-price-card p.desc { color: rgba(10,10,10,0.65); font-size: 0.9rem; margin-bottom: 1.75rem; line-height: 1.55; }
.pg-price-card ul { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.pg-price-card li { display: flex; align-items: flex-start; gap: 10px; color: rgba(10,10,10,0.8); font-size: 0.98rem; font-weight: 700; line-height: 1.4; }
.pg-price-card li i { color: #0a0a0a; margin-top: 3px; flex-shrink: 0; }
.pg-price-cta { display: block; text-align: center; width: 100%; padding: 14px; border-radius: 50px; font-weight: 700; text-decoration: none; background: #0a0a0a; color: #fff; transition: 0.25s; }
/* Scoped per card background rather than one flat hover color: on a white
   card the button inverts to brand yellow (matches .btn-black:hover
   elsewhere on the site); on the yellow "popular" card that would blend
   into the card itself, so it inverts to white instead — both stay legible. */
.pg-price-card:not(.popular) .pg-price-cta:hover { background: var(--primary); color: #0a0a0a; transform: scale(1.02); }
.pg-price-card.popular .pg-price-cta:hover { background: #fff; color: #0a0a0a; transform: scale(1.02); }

/* ---- Simple prose page (legal pages: privacy / terms / security) ---- */
.pg-prose { background: #fff; padding: 4rem 0 7rem; }
.pg-prose .container { max-width: 820px; }
.pg-prose h1 { font-size: clamp(2rem, 3.5vw + 1rem, 2.8rem); letter-spacing: -1px; margin-bottom: 0.75rem; color: #0a0a0a; }
.pg-prose .updated { color: #888; font-size: 0.88rem; margin-bottom: 3rem; }
.pg-prose h2 { font-size: 1.4rem; margin: 2.5rem 0 1rem; color: #0a0a0a; }
.pg-prose p, .pg-prose li { color: #444; font-size: 1rem; line-height: 1.75; }
.pg-prose ul { padding-left: 1.25rem; margin-bottom: 1.5rem; }
.pg-prose li { margin-bottom: 0.5rem; }
.pg-prose a { color: #0a0a0a; font-weight: 700; text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.pg-prose a:hover { color: #b8860b; }
.pg-prose blockquote { border-left: 3px solid var(--primary); padding-left: 1.25rem; margin: 2rem 0; color: #444; font-style: italic; }
.pg-prose img { max-width: 100%; border-radius: 16px; margin: 1.5rem 0; }

/* ---- Blog: category tabs, post card grid, single-post meta ---- */
.pg-blog-tabs { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.pg-blog-tab { display: inline-flex; align-items: center; padding: 0.6rem 1.4rem; border-radius: 50px; border: 1.5px solid rgba(10,10,10,0.15); color: #0a0a0a; font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: 0.2s; }
.pg-blog-tab:hover { border-color: #0a0a0a; }
.pg-blog-tab.active { background: #0a0a0a; border-color: #0a0a0a; color: var(--primary); }
.pg-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; }
.pg-blog-card { display: flex; flex-direction: column; background: #f8f9fa; border-radius: 22px; overflow: hidden; text-decoration: none; transition: transform 0.35s var(--v3-ease-out), box-shadow 0.35s; }
.pg-blog-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(10,10,10,0.1); }
.pg-blog-card .thumb { aspect-ratio: 16/10; background: #0a0a0a; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pg-blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg-blog-card .thumb .placeholder-ico { color: rgba(254,200,2,0.4); font-size: 2.5rem; }
.pg-blog-card .body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; }
.pg-blog-card .cat { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #b8860b; margin-bottom: 0.75rem; }
.pg-blog-card h3 { font-size: 1.15rem; color: #0a0a0a; margin-bottom: 0.6rem; line-height: 1.35; }
.pg-blog-card p { color: #666; font-size: 0.9rem; line-height: 1.6; flex-grow: 1; margin-bottom: 1rem; }
.pg-blog-card .meta { color: #999; font-size: 0.8rem; }
.pg-blog-empty { text-align: center; padding: 4rem 2rem; color: #888; }
.pg-blog-empty i { font-size: 2rem; color: rgba(10,10,10,0.15); margin-bottom: 1rem; display: block; }
.pg-single-meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pg-single-meta .cat { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--primary); color: #0a0a0a; padding: 0.3rem 0.85rem; border-radius: 50px; text-decoration: none; }
.pg-single-meta .date { color: #888; font-size: 0.88rem; }
@media (max-width: 900px) { .pg-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pg-blog-grid { grid-template-columns: 1fr; } }

/* ---- Testimonials (original static-site design — this is what the
   homepage actually uses, not the newer v3-testi carousel). Promoted here
   from a section-scoped <style> block on the homepage so every page can
   reuse the exact same design without redeclaring it. ---- */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } }
.review-card { background: #fff; border: 2px solid var(--primary); border-radius: 24px; padding: 3rem 2.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-width: 0; transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; }
.review-card::before { content: '\f10d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: -10px; right: 15px; font-size: 8rem; color: var(--primary); opacity: 0.08; z-index: 0; transform: rotate(10deg); }
.review-card > * { position: relative; z-index: 1; }
.review-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
.star-rating { color: #f59e0b; font-size: 0.9rem; margin-bottom: 1.5rem; display: flex; gap: 5px; }
.review-quote { color: #0a0a0a; font-size: 1.15rem; line-height: 1.7; margin-bottom: 2rem; font-weight: 500; flex-grow: 1; }
.reviewer-info { display: flex; align-items: center; gap: 1rem; }
.reviewer-img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); flex-shrink: 0; }
.review-card strong { color: #0a0a0a; }
.review-card .role { color: #666 !important; }
/* Reviewer photo + role/company hidden site-wide — name and star rating
   only. Hidden via CSS rather than stripped from every page's HTML so this
   is a single toggle, not a per-page edit. */
.review-card .reviewer-img { display: none; }
.review-card .role { display: none; }

/* ---- FAQ (original static-site design — native <details>/<summary>
   accordion, no JS). Also promoted from a section-scoped <style> block on
   the homepage for the same reason as above. Pair with .container.grid-2
   (heading + CTA in the first column, the accordion in the second). ---- */
.faq-section { position: relative; overflow: hidden; }
@media (max-width: 992px) { .faq-section .grid-2 > div:first-child { padding-right: 0 !important; } }
details.faq { background: white; border-radius: 12px; margin-bottom: 1rem; padding: 1.5rem; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; cursor: pointer; }
details.faq[open] { box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
details.faq summary { font-weight: 700; font-size: 1.1rem; color: var(--black); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--primary); transition: 0.3s; flex-shrink: 0; }
details.faq[open] summary::after { transform: rotate(45deg); }
.faq-content { padding-top: 1rem; color: #555; font-size: 0.95rem; line-height: 1.6; border-top: 1px solid #eee; margin-top: 1rem; }

/* ---- Final CTA (original static-site design — the dark rounded box that
   floats up and overlaps the section above it via a negative margin, not
   the newer v3-final-cta flat yellow band). Promoted from a section-scoped
   <style> block on the homepage. Needs .rounded-cta-box (already global,
   see "Rounded Final CTA" above) plus .grid-2 on the same element. The
   overlap only works if the PRECEDING section reserves room for it — give
   it padding-bottom: 18rem (see .faq-section usage) or similar. ---- */
.final-cta-box { margin-top: -14rem; }
@media (max-width: 992px) { .final-cta-box { margin-top: -6rem; padding: 3.5rem 2rem !important; } .final-cta-box .cta-actions { text-align: left !important; margin-top: 2rem; } }
@media (max-width: 480px) { .final-cta-box { margin-top: -3.5rem; } .final-cta-box h2 { font-size: 2.1rem !important; } }
/* .cta-actions has no base flex/gap styling at all — on desktop its two
   .btn links are just inline-block with `text-align: right`, which reads
   fine since they sit side by side. Once the 992px query above switches
   them to wrap (text-align: left, no explicit width), they stack with only
   a single inline whitespace gap between them and no equal-width look. */
@media (max-width: 640px) {
    .final-cta-box .cta-actions { display: flex; flex-direction: column; gap: 1rem; }
    .final-cta-box .cta-actions .btn { width: 100%; text-align: center; }
}