/* =========================================
   JUSTWEB OS — HOME PAGE STYLES
   home.css  ·  index.php only
   Tokens from base.css are available
   ========================================= */

/* ── SHARED TOKENS (re-declare for isolation) ─────────────────── */
:root {
    --red:       #D93025;
    --red-glow:  rgba(217,48,37,0.22);
    --blue:      #1A56E8;
    --green:     #00C96B;
    --green-dim: rgba(0,201,107,0.55);

    --dark:      #0F1117;
    --dark-2:    #161B27;

    --off-white: #F7F6F2;
    --cream:     #F0EDE6;
    --white:     #FFFFFF;

    --ink:       #0E1018;
    --ink-mid:   #374151;
    --ink-soft:  #6B7280;
    --ink-faint: #9CA3AF;

    --font-b:    'Plus Jakarta Sans', sans-serif;
    --font-m:    'IBM Plex Mono', monospace;

    --ease:      cubic-bezier(0.16,1,0.3,1);

    /* Glass */
    --gl-w:  rgba(255,255,255,0.70);
    --gl-wb: rgba(255,255,255,0.14);
    --gl-d:  rgba(15,17,23,0.78);
    --gl-db: rgba(255,255,255,0.09);
}

/* ── GLOBALS ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
body {
    font-family: var(--font-b);
    background: var(--off-white);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img,video { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
.mono { font-family: var(--font-m); }

.container-wide {
    width:100%; max-width:1360px;
    margin:0 auto; padding:0 44px;
}

/* colour helpers */
.c-red  { color: var(--red); }
.c-blue { color: var(--blue); }

/* ── SHARED UI ATOMS ─────────────────────────────────────────── */

/* Eyebrow label */
.jw-eyebrow {
    display: inline-flex; align-items: center; gap:8px;
    font-family: var(--font-m); font-size:10px;
    letter-spacing:.18em; text-transform:uppercase;
    color: var(--ink-soft); margin-bottom:20px;
}
.jw-eyebrow.light { color:rgba(255,255,255,.38); }
.jw-dot {
    width:6px; height:6px; border-radius:50%;
    background: var(--red); flex-shrink:0;
}
.jw-dot.blue  { background: var(--blue); }
.jw-dot.green {
    background: var(--green);
    box-shadow:0 0 0 0 var(--green-dim);
    animation: dotPulse 2.4s ease infinite;
}
@keyframes dotPulse {
    0%  { box-shadow:0 0 0 0 var(--green-dim); }
    60% { box-shadow:0 0 0 7px transparent; }
    100%{ box-shadow:0 0 0 0 transparent; }
}

/* Buttons */
.jw-btn-red {
    display:inline-flex; align-items:center; gap:10px;
    background: var(--red); color:#fff;
    font-size:14px; font-weight:700;
    padding:15px 30px; border-radius:6px; border:none;
    transition: background .3s, transform .2s, box-shadow .3s;
    white-space:nowrap; cursor:pointer;
}
.jw-btn-red:hover {
    background:#b82920;
    transform:translateY(-2px);
    box-shadow:0 14px 36px var(--red-glow);
}
.jw-btn-red .arr { font-size:17px; transition:transform .3s var(--ease); }
.jw-btn-red:hover .arr { transform:translate(2px,-2px); }

.jw-btn-ghost {
    display:inline-flex; align-items:center;
    color:rgba(255,255,255,.7); font-size:14px; font-weight:600;
    padding:14px 0; border-bottom:1.5px solid rgba(255,255,255,.22);
    transition:color .25s,border-color .25s;
}
.jw-btn-ghost:hover { color:#fff; border-color:rgba(255,255,255,.65); }

.jw-btn-outline-dark {
    display:inline-flex; align-items:center; gap:8px;
    color: var(--ink); font-family:var(--font-m);
    font-size:10px; font-weight:600; letter-spacing:.14em;
    padding:13px 22px; border:1.5px solid rgba(0,0,0,.18);
    border-radius:6px; transition:background .3s,color .3s;
}
.jw-btn-outline-dark:hover { background:var(--ink); color:#fff; }

/* Glassmorphism base */
.glass-light {
    background: var(--gl-w);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--gl-wb);
    border-radius:16px;
}
.glass-dark {
    background: var(--gl-d);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid var(--gl-db);
    border-radius:16px;
}

/* Scroll reveal */
.reveal {
    opacity:0; transform:translateY(32px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.revealed { opacity:1; transform:translateY(0); }

/* Grain texture */
%grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px;
}

/* ═══════════════════════════════════════════════════════════════
   § 1  HERO
   Dark video bg · split grid · glass chips
   ═══════════════════════════════════════════════════════════════ */
.h-hero {
    position:relative; min-height:100vh;
    display:flex; align-items:center;
    background: var(--dark); overflow:hidden;
}

.h-hero__video-wrap { position:absolute; inset:0; z-index:0; }
.h-hero__video { width:100%; height:100%; object-fit:cover; opacity:.38; }
.h-hero__video-scrim {
    position:absolute; inset:0;
    background:
        linear-gradient(180deg,rgba(15,17,23,.6) 0%,rgba(15,17,23,.15) 45%,rgba(15,17,23,.9) 100%),
        linear-gradient(90deg,rgba(15,17,23,.75) 0%,transparent 65%);
}

.h-hero__grain {
    position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.038;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px;
}

/* Bottom gradient line */
.h-hero::after {
    content:''; position:absolute; bottom:0; left:0;
    width:100%; height:1px; z-index:10;
    background:linear-gradient(90deg,transparent,var(--red) 35%,var(--blue) 65%,transparent);
}

/* GRID */
.h-hero__grid {
    position:relative; z-index:5;
    display:grid; grid-template-columns:1fr 420px;
    gap:56px; align-items:center;
    padding-top:96px; padding-bottom:96px;
}

/* Copy */
.h-hero__eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-m); font-size:10px;
    letter-spacing:.18em; color:rgba(255,255,255,.38);
    margin-bottom:32px;
    animation:fadeUp .9s var(--ease) .1s both;
}
.h-hero__live-dot {
    width:5px; height:5px; background:var(--green);
    border-radius:50%; flex-shrink:0;
    box-shadow:0 0 0 0 var(--green-dim);
    animation:dotPulse 2.4s ease infinite;
}

.h-hero__headline {
    font-size:clamp(48px,6.5vw,96px);
    font-weight:800; line-height:1.0; letter-spacing:-.035em;
    color:#fff; margin-bottom:4px;
    animation:fadeUp .9s var(--ease) .2s both;
}

.h-hero__rotator-wrap { display:block; overflow:hidden; height:1.06em; }
.h-hero__rotator {
    display:block; color:var(--red);
    font-size:clamp(48px,6.5vw,96px);
    font-weight:800; letter-spacing:-.035em;
}

.h-hero__sub {
    font-size:17px; font-weight:400; line-height:1.72;
    color:rgba(255,255,255,.55); max-width:480px;
    margin:26px 0 44px;
    animation:fadeUp .9s var(--ease) .32s both;
}

.h-hero__actions {
    display:flex; align-items:center; gap:28px; flex-wrap:wrap;
    animation:fadeUp .9s var(--ease) .44s both;
}

/* Right panel */
.h-hero__panel {
    position:relative;
    animation:fadeUp .9s var(--ease) .3s both;
}

.h-hero__img-card {
    border-radius:20px; overflow:hidden;
    box-shadow:0 40px 100px rgba(0,0,0,.55);
    position:relative;
}
.h-hero__img { width:100%; height:340px; object-fit:cover; display:block; }
.h-hero__img-scrim {
    position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(15,17,23,.75) 100%);
}
.h-hero__img-tag {
    position:absolute; bottom:16px; left:20px;
    font-size:9px; letter-spacing:.18em;
    color:rgba(255,255,255,.5);
}

/* Glass chips */
.h-hero__chip {
    position:absolute;
    background: var(--gl-d);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px; padding:16px 22px;
    box-shadow:0 12px 40px rgba(0,0,0,.4);
    min-width:160px;
}
.h-hero__chip--tl {
    top:-20px; left:-24px;
    animation:floatA 5s ease-in-out infinite;
}
.h-hero__chip--br {
    bottom:-20px; right:-24px;
    animation:floatB 5s ease-in-out infinite 1.3s;
}
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.chip-lbl {
    display:block; font-size:9px; letter-spacing:.16em;
    color:rgba(255,255,255,.38); margin-bottom:6px;
}
.chip-val {
    display:block; font-size:26px; font-weight:800;
    color:#fff; letter-spacing:-.03em; line-height:1; margin-bottom:10px;
}
.chip-u { font-size:15px; font-weight:700; color:var(--red); }
.chip-bar { height:2px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.chip-fill { height:100%; background:linear-gradient(90deg,var(--red),var(--blue)); border-radius:2px; }

/* Scroll hint */
.h-hero__scroll {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    z-index:6; display:flex; flex-direction:column; align-items:center; gap:7px;
}
.h-hero__scroll span { font-family:var(--font-m); font-size:8px; letter-spacing:.24em; color:rgba(255,255,255,.2); }
.h-hero__scroll-line {
    width:1px; height:44px;
    background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
    animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100%{opacity:.35; transform:scaleY(1)}
    50%{opacity:.9; transform:scaleY(.55)}
}

@keyframes fadeUp {
    from{opacity:0;transform:translateY(26px)}
    to{opacity:1;transform:translateY(0)}
}


/* ═══════════════════════════════════════════════════════════════
   § 2  PROOF — white bg, stats, marquee
   ═══════════════════════════════════════════════════════════════ */
.h-proof {
    background: var(--white);
    padding:100px 0 0; overflow:hidden;
}

.h-proof__top { margin-bottom:68px; }

.h-proof__title {
    font-size:clamp(26px,3.2vw,44px); font-weight:700;
    letter-spacing:-.025em; line-height:1.22; color:var(--ink);
    max-width:680px;
}
.h-proof__title em { font-style:normal; color:var(--blue); }

/* Stats row */
.h-proof__stats {
    display:flex; align-items:flex-start;
    border-top:1px solid rgba(0,0,0,.07);
    border-bottom:1px solid rgba(0,0,0,.07);
    padding:52px 0; margin-bottom:0;
}
.h-proof__stat { flex:1; padding-right:40px; }
.h-proof__sep { width:1px; height:76px; background:rgba(0,0,0,.09); align-self:center; margin-right:40px; flex-shrink:0; }

.h-proof__n {
    font-size:clamp(40px,5vw,68px); font-weight:800;
    letter-spacing:-.04em; line-height:1; color:var(--ink); margin-bottom:8px;
}
.h-proof__n sup { font-size:.42em; color:var(--red); font-weight:700; vertical-align:super; }
.h-proof__n small { font-size:.36em; color:var(--ink-soft); font-weight:700; vertical-align:super; letter-spacing:0; }
.h-proof__lbl { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mid); margin-bottom:10px; }
.h-proof__stat > p { font-size:13px; line-height:1.65; color:var(--ink-soft); max-width:200px; }

/* Marquee */
.h-proof__marquee {
    border-top:1px solid rgba(0,0,0,.06);
    padding:18px 0; overflow:hidden;
}
.h-proof__track {
    display:flex; align-items:center; gap:28px;
    white-space:nowrap; width:max-content;
    animation:marqueeRoll 30s linear infinite;
}
@keyframes marqueeRoll {
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}
.h-proof__track > span {
    font-family:var(--font-m); font-size:10px; font-weight:600;
    letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase;
}
.h-proof__track .sep { color:var(--red); opacity:.5; font-size:9px; }


/* ═══════════════════════════════════════════════════════════════
   § 3  SERVICES — cream bg, 3-pillar grid with photos
   ═══════════════════════════════════════════════════════════════ */
.h-svcs {
    background: var(--cream);
    padding:110px 0 120px;
    border-top:1px solid rgba(0,0,0,.05);
}

.h-svcs__hdr { margin-bottom:60px; }
.h-svcs__title {
    font-size:clamp(34px,4.5vw,60px); font-weight:800;
    letter-spacing:-.035em; color:var(--ink); margin-bottom:16px;
}
.h-svcs__sub {
    font-size:16px; line-height:1.72; color:var(--ink-soft); max-width:580px;
}

/* Grid */
.h-svcs__grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}

/* Individual card */
.svc-card {
    background: var(--white);
    border-radius:16px; overflow:hidden;
    border:1px solid rgba(0,0,0,.07);
    display:flex; flex-direction:column;
    transition:transform .4s var(--ease), box-shadow .4s ease;
    position:relative;
}
.svc-card:hover {
    transform:translateY(-8px);
    box-shadow:0 28px 64px rgba(0,0,0,.1);
}

/* Dark variant */
.svc-card--dark { background: var(--dark-2); border-color:rgba(255,255,255,.06); }
.svc-card--dark .svc-card__body { color:rgba(255,255,255,.85); }
.svc-card--dark .svc-card__tag { color:rgba(255,255,255,.35); }
.svc-card--dark .svc-card__title { color:#fff; }
.svc-card--dark .svc-card__list strong { color:#fff; }
.svc-card--dark .svc-card__list p { color:rgba(255,255,255,.5); }
.svc-card--dark .svc-card__link { color:var(--red); border-color:rgba(255,255,255,.1); }
.svc-card--dark .svc-card__link:hover { color:#fff; border-color:rgba(255,255,255,.45); }

/* Image wrap */
.svc-card__img-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; }
.svc-card__img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc-card:hover .svc-card__img { transform:scale(1.05); }
.svc-card__img-scrim {
    position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.55) 100%);
}

.svc-card__num {
    position:absolute; top:16px; left:20px;
    font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.5);
}
.svc-card__badge {
    position:absolute; top:16px; right:16px;
    background:var(--red); color:#fff;
    font-family:var(--font-m); font-size:8px; font-weight:600;
    letter-spacing:.14em; padding:3px 8px; border-radius:3px;
}

/* Body */
.svc-card__body { padding:28px 28px 32px; flex:1; display:flex; flex-direction:column; }
.svc-card__tag {
    font-size:9px; letter-spacing:.2em; color:var(--ink-faint);
    display:block; margin-bottom:12px;
}
.svc-card__title {
    font-size:18px; font-weight:700; letter-spacing:-.02em;
    color:var(--ink); margin-bottom:20px; line-height:1.2;
}

/* List */
.svc-card__list { list-style:none; display:flex; flex-direction:column; gap:14px; flex:1; margin-bottom:28px; }
.svc-card__list li { display:flex; align-items:flex-start; gap:12px; }
.li-dot {
    width:5px; height:5px; border-radius:50%;
    background:var(--blue); flex-shrink:0; margin-top:6px;
}
.li-dot.r { background:var(--red); }
.svc-card__list strong { font-size:13px; font-weight:700; display:block; margin-bottom:2px; color:var(--ink); }
.svc-card__list p { font-size:12px; line-height:1.6; color:var(--ink-soft); margin:0; }

/* CTA link */
.svc-card__link {
    font-size:10px; letter-spacing:.16em; font-family:var(--font-m);
    color:var(--blue); border-bottom:1px solid rgba(26,86,232,.2);
    padding-bottom:2px; transition:color .2s, border-color .2s; align-self:flex-start;
}
.svc-card__link:hover { color:var(--ink); border-color:var(--ink); }


/* ═══════════════════════════════════════════════════════════════
   § 4  PROCESS — dark charcoal, photo bg, 3 steps + callout
   ═══════════════════════════════════════════════════════════════ */
.h-proc {
    position:relative; overflow:hidden;
    background: var(--dark);
    padding:120px 0;
}

.h-proc__photo { position:absolute; inset:0; z-index:0; }
.h-proc__photo img { width:100%; height:100%; object-fit:cover; opacity:.2; }
.h-proc__photo-scrim {
    position:absolute; inset:0;
    background:
        linear-gradient(90deg,var(--dark) 0%,rgba(15,17,23,.7) 60%,var(--dark) 100%),
        linear-gradient(180deg,var(--dark) 0%,transparent 20%,transparent 80%,var(--dark) 100%);
}

.h-proc__inner { position:relative; z-index:5; }

.h-proc__hdr { margin-bottom:64px; }
.h-proc__title {
    font-size:clamp(36px,5vw,72px); font-weight:800;
    letter-spacing:-.04em; line-height:1.0; color:#fff;
}

/* Steps */
.h-proc__steps {
    display:flex; align-items:flex-start; gap:0;
    margin-bottom:64px;
}
.h-proc__step {
    flex:1; display:flex; flex-direction:column; gap:16px;
    padding-right:32px;
}
.h-proc__step-line {
    width:1px; height:100px;
    background:linear-gradient(180deg,var(--red),rgba(255,255,255,.06));
    flex-shrink:0; align-self:flex-start; margin-top:48px; margin-right:32px;
}
.h-proc__step-n {
    font-size:11px; letter-spacing:.18em;
    color:var(--red); margin-bottom:4px;
}
.h-proc__step-body h3 {
    font-size:20px; font-weight:700; color:#fff;
    letter-spacing:-.02em; margin-bottom:12px;
}
.h-proc__step-body p { font-size:14px; line-height:1.75; color:rgba(255,255,255,.52); }

/* Glass callout strip */
.h-proc__callout { }
.h-proc__callout-glass {
    display:flex; align-items:center; justify-content:space-between;
    padding:36px 44px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    gap:32px; flex-wrap:wrap;
}
.h-proc__cstat { display:flex; align-items:center; gap:24px; }
.h-proc__cstat-n {
    font-size:clamp(52px,6vw,80px); font-weight:800;
    color:#fff; letter-spacing:-.05em; line-height:1;
}
.h-proc__cstat-n span { font-size:.5em; color:var(--red); font-weight:700; }
.h-proc__cstat-lbl {
    font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.45);
    max-width:220px; line-height:1.6;
}


/* ═══════════════════════════════════════════════════════════════
   § 5  TESTIMONIALS — white bg, cards + aside stat
   ═══════════════════════════════════════════════════════════════ */
.h-testi {
    background: var(--white);
    padding:110px 0 120px;
    border-top:1px solid rgba(0,0,0,.05);
}

.h-testi__hdr { margin-bottom:60px; }
.h-testi__title {
    font-size:clamp(32px,4vw,56px); font-weight:800;
    letter-spacing:-.03em; line-height:1.1; color:var(--ink);
}

/* Layout */
.h-testi__layout {
    display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start;
}

.h-testi__cards { display:flex; flex-direction:column; gap:20px; }

/* Testimonial card */
.testi-card {
    background: var(--off-white);
    border:1px solid rgba(0,0,0,.07);
    border-radius:14px; padding:40px;
    position:relative; overflow:hidden;
    transition:border-color .3s, box-shadow .3s;
}
.testi-card:hover { border-color:rgba(0,0,0,.16); box-shadow:0 16px 48px rgba(0,0,0,.07); }

/* Glassmorphism accent on hover */
.testi-card::before {
    content:''; position:absolute; top:0; left:0;
    width:100%; height:3px;
    background:linear-gradient(90deg,var(--red),var(--blue));
    transform:scaleX(0); transform-origin:left;
    transition:transform .4s var(--ease);
}
.testi-card:hover::before { transform:scaleX(1); }
.testi-card--accent { border-left:3px solid var(--red); }

.testi-card__q {
    font-size:60px; line-height:.6; color:var(--red);
    font-family:Georgia,serif; margin-bottom:22px; opacity:.65;
}
.testi-card blockquote {
    font-size:15px; font-weight:400; line-height:1.8;
    color:var(--ink-mid); font-style:normal; margin-bottom:30px;
}
.testi-card__foot { display:flex; align-items:center; gap:14px; }
.testi-card__av {
    width:42px; height:42px; border-radius:50%;
    object-fit:cover; flex-shrink:0;
    border:2px solid rgba(0,0,0,.08);
}
.testi-card__who { flex:1; display:flex; flex-direction:column; gap:2px; }
.testi-card__who strong { font-size:14px; font-weight:700; color:var(--ink); }
.testi-card__who span  { font-size:12px; color:var(--ink-soft); }
.testi-card__tag {
    font-size:9px; letter-spacing:.12em; color:var(--ink-faint);
    border:1px solid rgba(0,0,0,.1); padding:3px 8px; border-radius:3px;
    flex-shrink:0;
}

/* Aside panel */
.h-testi__aside { display:flex; flex-direction:column; gap:20px; }

.h-testi__aside-stat {
    padding:36px; background:var(--cream);
    border-radius:14px; border:1px solid rgba(0,0,0,.06);
}
.h-testi__aside-n {
    display:block; font-size:clamp(48px,5vw,68px);
    font-weight:800; letter-spacing:-.045em; color:var(--ink); line-height:1;
    margin-bottom:14px;
}
.h-testi__aside-n sup { font-size:.42em; color:var(--red); font-weight:700; vertical-align:super; }
.h-testi__aside-stat > p { font-size:13px; line-height:1.7; color:var(--ink-soft); margin-bottom:20px; }

.h-testi__aside-bar {
    height:3px; background:rgba(0,0,0,.08);
    border-radius:3px; overflow:hidden; margin-bottom:8px;
}
.h-testi__aside-fill {
    height:100%; width:0;
    background:linear-gradient(90deg,var(--red),var(--blue));
    border-radius:3px; transition:width 1.4s var(--ease);
}
.h-testi__aside-meta {
    display:flex; justify-content:space-between;
    font-size:9px; letter-spacing:.14em; color:var(--ink-faint);
    margin-bottom:24px;
}

.h-testi__aside-photo {
    border-radius:14px; overflow:hidden;
    aspect-ratio:4/3; position:relative;
}
.h-testi__aside-photo img { width:100%; height:100%; object-fit:cover; }
.h-testi__aside-photo-scrim {
    position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 50%,rgba(14,16,24,.4) 100%);
}


/* ═══════════════════════════════════════════════════════════════
   § 6  CTA — dark photo bg, glass info card
   ═══════════════════════════════════════════════════════════════ */
.h-cta {
    position:relative; overflow:hidden;
    padding:120px 0; background:var(--dark-2);
}

.h-cta__photo { position:absolute; inset:0; z-index:0; }
.h-cta__photo img { width:100%; height:100%; object-fit:cover; opacity:.18; }
.h-cta__photo-scrim {
    position:absolute; inset:0;
    background:
        linear-gradient(135deg,rgba(15,17,23,.9) 0%,rgba(22,27,39,.75) 100%);
}

.h-cta__inner {
    position:relative; z-index:5;
    display:grid; grid-template-columns:1fr 360px;
    gap:60px; align-items:center;
}

.h-cta__title {
    font-size:clamp(44px,6.5vw,88px); font-weight:800;
    letter-spacing:-.045em; color:#fff; line-height:1.0; margin-bottom:24px;
}
.h-cta__body {
    font-size:16px; line-height:1.75; color:rgba(255,255,255,.52);
    max-width:480px; margin-bottom:44px;
}
.h-cta__body strong { color:rgba(255,255,255,.85); }
.h-cta__acts { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }

/* Glass info card */
.h-cta__glass {
    background: rgba(255,255,255,.07);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px; padding:10px 0; overflow:hidden;
}
.h-cta__meta {
    display:flex; flex-direction:column; gap:5px;
    padding:24px 32px;
}
.h-cta__meta > span { font-family:var(--font-m); font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.3); display:block; }
.h-cta__meta strong { font-size:17px; font-weight:700; color:#fff; }
.h-cta__sep { height:1px; background:rgba(255,255,255,.07); margin:0; }

/* Top red accent on CTA glass card */
.h-cta__glass::before {
    content:''; display:block; height:2px;
    background:linear-gradient(90deg,var(--red),var(--blue));
    margin-bottom:0;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
    .container-wide { padding:0 28px; }

    .h-hero__grid { grid-template-columns:1fr; gap:48px; padding-top:80px; }
    .h-hero__panel { display:none; }       /* hide right panel on tablet, save space */

    .h-proof__stats { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
    .h-proof__sep   { display:none; }

    .h-svcs__grid { grid-template-columns:1fr 1fr; }

    .h-proc__steps { flex-direction:column; gap:32px; }
    .h-proc__step-line { display:none; }
    .h-proc__step { padding-right:0; }

    .h-testi__layout { grid-template-columns:1fr; }
    .h-testi__aside { flex-direction:row; }
    .h-testi__aside-stat { flex:1; }
    .h-testi__aside-photo { flex:1; }

    .h-cta__inner { grid-template-columns:1fr; gap:44px; }
    .h-cta__glass { max-width:440px; }
}

@media (max-width:768px) {
    .container-wide { padding:0 20px; }
    .h-hero { min-height:90vh; }
    .h-hero__headline { font-size:clamp(40px,10vw,58px); }
    .h-hero__rotator  { font-size:clamp(40px,10vw,58px); }
    .h-hero__actions  { flex-direction:column; align-items:flex-start; gap:16px; }

    .h-proof__stats   { grid-template-columns:1fr 1fr; gap:28px; padding:36px 0; }

    .h-svcs__grid     { grid-template-columns:1fr; }

    .h-proc__callout-glass { flex-direction:column; align-items:flex-start; padding:28px; }

    .h-testi__aside   { flex-direction:column; }
    .h-testi__aside-photo { aspect-ratio:16/9; }

    .h-cta__title { font-size:clamp(40px,10vw,60px); }
    .h-cta__acts  { flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (max-width:480px) {
    .h-proof__stats { grid-template-columns:1fr; }
}