/* ==============================================
       ART PECKER —  Cinematic Video Production
       Hero: exact designindc.com screenshot replica
       Font: Barlow Condensed (condensed headlines)
       Accent: #4f46e5 (indigo — exact from screenshot)
    ============================================== */
:root {
    --white:  #ffffff;
    --black:  #0a0a0a;
    --dark:   #111111;
    --dark2:  #1a1a1a;
    --g1:     #f5f5f5;
    --g2:     #ebebeb;
    --g3:     #d0d0d0;
    --g4:     #888888;
    --g5:     #555555;
    --bd:     #e8e8e8;
    --red:    #cc1a1a;
    --red2:   #a81515;
    --indigo: #cc1a1a;
    --ind2:   #a81515;
    --yellow: #cc1a1a;
    --yw2:    #a81515;
    --nav-h:  68px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',sans-serif;
    background:var(--white);color:var(--black);
    line-height:1.5;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 48px}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}
.d4{transition-delay:.36s}.d5{transition-delay:.45s}


/* ══════════════════════════════════════
   NAV — exact designindc.com screenshot
   Logo left · links center · pill btn right
══════════════════════════════════════ */
header{
    position:sticky;top:0;z-index:300;
    background:white;
    border-bottom:1px solid #1c1c1c;
}
nav{
    display:flex;align-items:center;
    height:var(--nav-h);
    padding:0 48px;
    max-width:1440px;margin:0 auto;
}

/* ─ LOGO: "ART PECKER" stacked-style like "DESIGN in DC" ─ */
.nav-logo{
    display:flex;align-items:center;gap:6px;
    margin-right:36px;flex-shrink:0;
    text-decoration:none;
}
.logo-stack{
    display:flex;flex-direction:column;
    line-height:1;
    width: 150px;
    font-family:'Inter',sans-serif;
}
.logo-top{
    font-size:8px;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,255,255,.35);
}
.logo-main{
    font-size:36px;font-weight:900;
    letter-spacing:-.04em;color:#ffffff;
    line-height:.9;
}
.logo-main em{
    font-style:normal;
    font-size:13px;font-weight:400;
    vertical-align:super;
    color:rgba(255,255,255,.35);letter-spacing:0;
    margin:0 1px;
}

/* ─ NAV LINKS ─ */
.nav-ul{
    display:flex;align-items:center;
    height:100%;flex:1;
}
.nav-ul>li{
    position:relative;height:100%;
    display:flex;align-items:center;
}
.nav-ul>li>a{
    display:flex;align-items:center;gap:4px;
    padding:0 14px;height:100%;
    font-size:14px;font-weight:400;
    color:var(--red);
    transition:color .18s;white-space:nowrap;
}
.nav-ul>li>a:hover,.nav-ul>li:hover>a{color:black}
.chev{
    width:10px;height:10px;opacity:.45;
    transition:transform .2s;flex-shrink:0;
}
.nav-ul>li:hover>a .chev{transform:rotate(180deg)}

/* Mega */
.mega{
    position:absolute;top:100%;left:0;
    background:#161616;
    border:1px solid #2a2a2a;
    border-top:2px solid var(--red);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    padding:28px 32px;min-width:480px;
    display:none;gap:28px;z-index:400;
}
.nav-ul>li:hover .mega{display:flex}
.mc{min-width:190px}
.mc+.mc{padding-left:24px;border-left:1px solid #2a2a2a}
.mt{
    font-size:10px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.28);margin-bottom:14px;
}
.mega ul{display:flex;flex-direction:column;gap:9px}
.mega ul li a{
    font-size:13px;color:rgba(255,255,255,.52);
    transition:color .15s;
}
.mega ul li a:hover{color:#ffffff}

/* ─ NAV RIGHT ─ */
.nav-right{
    display:flex;align-items:center;gap:14px;
    margin-left:auto;flex-shrink:0;
}
/* Blue pill — exact screenshot */
.btn-demo{
    display:inline-flex;align-items:center;
    padding:11px 26px;border-radius:50px;
    background:var(--indigo);color:var(--white);
    font-size:14px;font-weight:600;
    border:none;cursor:pointer;
    transition:background .18s,transform .18s;
    white-space:nowrap;
}
.btn-demo:hover{background:var(--ind2);transform:translateY(-1px)}
/* Client Login — blue text */
.nav-login{
    font-size:14px;font-weight:500;
    color:rgba(255,255,255,.6);
    transition:color .18s;
}
.nav-login:hover{color:#ffffff}


/* ══════════════════════════════════════
   HERO — EXACT SCREENSHOT
   Left half: huge condensed mixed-weight headline
   Right half: two-col card mosaic, auto-scrolls up
══════════════════════════════════════ */
.hero{
    display:grid;
    grid-template-columns:52% 48%;
    min-height:calc(100vh - var(--nav-h));
    overflow:hidden;
    background:#0a0a0a;
}

/* LEFT */
.hero-l{
    display:flex;flex-direction:column;
    justify-content:center;
    padding:80px 60px 80px 48px;
}

/*
  HEADLINE — Barlow Condensed, mixed bold/thin
  Exact screenshot:
    "Elevating Brands" → BOLD (900)
    " Through" → THIN (300)
    "Creative" → THIN italic-ish (300)
    " Strategy" → BOLD (900)
    " & " → THIN (300)
    "Conversion-Focused" → THIN (300)
    " Marketing" → BOLD (900)
*/
.hero-h1{
    font-family:'Barlow Condensed',sans-serif;
    font-size:clamp(56px,6vw,88px);
    line-height:1.0;
    letter-spacing:-.01em;
    color:#ffffff;
    margin-bottom:28px;
}
.hero-h1 .th{ font-weight:300; color:rgba(255,255,255,.45); }
.hero-h1 .bk{ font-weight:900; color:#ffffff; }

.hero-sub{
    font-size:16px;font-weight:400;
    color:rgba(255,255,255,.5);line-height:1.65;
    max-width:430px;margin-bottom:44px;
}

/* Pill buttons — exact screenshot */
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-pill-black{
    display:inline-flex;align-items:center;
    padding:16px 36px;border-radius:50px;
    background:var(--black);color:var(--white);
    font-size:15px;font-weight:600;
    border:none;cursor:pointer;
    transition:all .2s;
}
.btn-pill-black:hover{background:#2a2a2a;transform:translateY(-2px)}
.btn-pill-blue{
    display:inline-flex;align-items:center;
    padding:16px 36px;border-radius:50px;
    background:var(--indigo);color:var(--white);
    font-size:15px;font-weight:600;
    border:none;cursor:pointer;
    transition:all .2s;
}
.btn-pill-blue:hover{background:var(--ind2);transform:translateY(-2px)}

/* RIGHT — card mosaic */
.hero-r{
    position:relative;
    overflow:hidden;
    /* Start immediately from top of hero */
}

/* The scrolling mosaic wrapper */
.mosaic-wrap{
    position:absolute;inset:0;
    overflow:hidden;
}

/* Two-column grid that scrolls upward */
.mosaic{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:10px;
    /* Double height content for seamless loop */
    animation:scrollUp 22s linear infinite;
}
.mosaic:hover{animation-play-state:paused}
@keyframes scrollUp{
    from{transform:translateY(0)}
    to{transform:translateY(-50%)}
}

/* Individual cards */
.mc-card{
    border-radius:18px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    flex-shrink:0;
}
.mc-card::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 55%);
    pointer-events:none;
}
.mc-card .mc-img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s;
}
.mc-card:hover .mc-img{transform:scale(1.04)}

/* Card label */
.mc-label{
    position:absolute;bottom:14px;left:16px;right:16px;
    z-index:2;
    font-size:15px;font-weight:700;
    color:var(--white);
    letter-spacing:-.01em;
    text-shadow:0 1px 6px rgba(0,0,0,.4);
}

/* Card heights */
.mc-tall{ height:320px; }
.mc-med{  height:220px; }
.mc-short{height:170px; }

/* Card visual backgrounds (rich photo-like gradients) */
.c-vid{
    background:linear-gradient(160deg,#c9d6e3 0%,#b8cdd8 20%,#8badb5 50%,#4a7a8a 80%,#1a3a45 100%);
}
.c-vid::before{
    content:'';position:absolute;inset:0;z-index:1;
    /* Hand holding lens silhouette effect */
    background:
            radial-gradient(ellipse 40% 50% at 50% 60%,rgba(0,0,0,.25) 0%,transparent 100%),
            radial-gradient(circle 70px at 50% 55%,rgba(100,160,220,.6) 0%,rgba(70,130,180,.3) 40%,transparent 70%);
}

.c-robot{
    background:linear-gradient(135deg,#87ceeb 0%,#b0d4e8 20%,#d4b8c4 50%,#c4909a 75%,#8b5a65 100%);
}
.c-robot::before{
    content:'';position:absolute;inset:0;z-index:1;
    background:
            radial-gradient(ellipse 30% 55% at 55% 45%,rgba(220,160,150,.5) 0%,transparent 70%),
            linear-gradient(to bottom,rgba(135,206,235,.4) 0%,transparent 50%);
}

.c-brand{
    background:linear-gradient(160deg,#ff6b6b 0%,#ee5a24 25%,#c0392b 55%,#2d3436 80%,#1a1a1a 100%);
}
.c-brand::before{
    content:'';position:absolute;inset:0;z-index:1;
    background:
            linear-gradient(to bottom right,rgba(255,255,255,.05) 0%,transparent 50%);
}
/* "WHERE CREATIVITY KNOWS NO BOUNDS" text effect */
.c-brand-txt{
    position:absolute;bottom:50px;left:16px;right:16px;z-index:2;
    font-size:18px;font-weight:900;
    color:var(--white);line-height:1.1;
    letter-spacing:-.01em;
    text-transform:uppercase;
}

.c-mobile{
    background:linear-gradient(160deg,#e8a44a 0%,#d4883a 30%,#c07a30 60%,#6b4226 100%);
}
.c-mobile::before{
    content:'';position:absolute;inset:0;z-index:1;
    background:radial-gradient(ellipse 35% 60% at 48% 62%,rgba(0,0,0,.35) 0%,transparent 70%);
}

.c-design{
    background:linear-gradient(135deg,#6b8f71 0%,#8aab7a 30%,#a8bf9e 60%,#c4d5bc 100%);
}
.c-design::before{
    content:'';position:absolute;inset:0;z-index:1;
    background:radial-gradient(circle 80px at 50% 40%,rgba(255,255,255,.25) 0%,transparent 70%);
}

.c-web{
    background:linear-gradient(160deg,#e8d5b8 0%,#d4be98 30%,#b8a078 60%,#8b7550 100%);
}

.c-film{
    background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);
}

.c-strat{
    background:linear-gradient(160deg,#2c3e50 0%,#3d5a73 30%,#4a8aaa 60%,#5ab4d4 100%);
}


/* ══════════════════════════════════════
   SCROLLING SERVICE STRIP
══════════════════════════════════════ */
.strip{border-top:1px solid #1c1c1c;overflow:hidden;background:#111}
.strip-track{
    display:flex;animation:stripScroll 32s linear infinite;width:max-content;
}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes stripScroll{to{transform:translateX(-50%)}}
.strip-item{
    display:flex;align-items:center;gap:12px;
    padding:15px 24px;border-right:1px solid #222;
    white-space:nowrap;flex-shrink:0;
    transition:background .2s;
}
.strip-item:hover{background:#1a1a1a}
.si-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--red);flex-shrink:0;
}
.si-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.6)}


/* ══════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════ */
.eyebrow{
    font-size:11px;font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;
    color:rgba(255,255,255,.28);margin-bottom:14px;
}
.eyebrow-r{color:var(--red);letter-spacing:.22em}
.sec-h2{
    font-family:'Barlow Condensed',sans-serif;
    font-size:clamp(32px,3.5vw,52px);
    font-weight:700;line-height:1.05;
    letter-spacing:-.01em;margin-bottom:18px;
}
.sec-h2 em{font-style:italic;font-weight:300}
.sec-p{font-size:15px;color:var(--g5);line-height:1.75;margin-bottom:26px}
.sec-p-w{font-size:15px;color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:26px}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:13px 26px;border-radius:6px;
    font-size:14px;font-weight:600;
    border:none;cursor:pointer;
    transition:all .18s;white-space:nowrap;
}
.btn-lg{padding:15px 30px;font-size:15px}
.btn-blk{background:var(--black);color:var(--white)}
.btn-blk:hover{background:#2a2a2a;transform:translateY(-1px)}
.btn-ind{background:var(--indigo);color:var(--white)}
.btn-ind:hover{background:var(--ind2);transform:translateY(-1px)}
.btn-yw{background:var(--yellow);color:var(--black)}
.btn-yw:hover{background:var(--yw2);transform:translateY(-1px)}
.btn-bd{background:transparent;color:#fff;border:1.5px solid #444}
.btn-bd:hover{border-color:#fff;transform:translateY(-1px)}
.btn-bd-w{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.25)}
.btn-bd-w:hover{border-color:var(--white)}


/* ══════════════════════════════════════
   GROWTH SECTION (dark)
══════════════════════════════════════ */
.growth{background:var(--black);color:var(--white);padding:96px 0}
.growth-in{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.vid-block{
    border-radius:14px;overflow:hidden;
    aspect-ratio:16/10;position:relative;
    background:#1e1e1e;border:1px solid rgba(255,255,255,.08);
}
.vid-glow{position:absolute;inset:0;background:linear-gradient(135deg,rgba(79,70,229,.08),transparent 60%)}
.vid-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid-play{
    width:64px;height:64px;border-radius:50%;
    background:var(--white);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.45);
    transition:transform .25s,background .25s;
}
.vid-play:hover{transform:scale(1.1);background:var(--indigo)}
.vid-play:hover svg{fill:var(--white)}
.vid-play svg{width:22px;height:22px;margin-left:3px;fill:var(--black)}
.vid-cap{position:absolute;bottom:18px;left:18px;font-size:12px;color:rgba(255,255,255,.5);font-weight:500}


/* ══════════════════════════════════════
   LOGOS MARQUEE
══════════════════════════════════════ */
.logos{padding:36px 0;border-bottom:1px solid var(--bd);overflow:hidden}
.logos-hd{text-align:center;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g4);margin-bottom:26px}
.logos-track{display:flex;align-items:center;animation:stripScroll 24s linear infinite;width:max-content}
.logos:hover .logos-track{animation-play-state:paused}
.logo-item{padding:0 32px;border-right:1px solid var(--bd);height:44px;display:flex;align-items:center;flex-shrink:0}
.logo-txt{font-size:14px;font-weight:700;color:var(--g3);white-space:nowrap;transition:color .2s}
.logo-item:hover .logo-txt{color:var(--black)}


/* ══════════════════════════════════════
   NUMBERED STEPS (white)
══════════════════════════════════════ */
.steps{padding:96px 0;background:#111;color:#fff}
.steps-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:64px}
.steps-list{display:flex;flex-direction:column}
.step{
    display:grid;grid-template-columns:64px 1fr 1fr;
    border-top:1px solid #222;min-height:180px;
    transition:background .2s;
}
.step:last-child{border-bottom:1px solid #222}
.step:hover{background:#1a1a1a}
.step-num{
    display:flex;align-items:flex-start;justify-content:center;
    padding:32px 0 0;border-right:1px solid #222;
    font-size:12px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:.05em;
}
.step-body{padding:32px 36px;border-right:1px solid #222}
.step-title{
    font-family:'Barlow Condensed',sans-serif;
    font-size:22px;font-weight:700;
    letter-spacing:-.01em;margin-bottom:10px;
}
.step-desc{font-size:14px;color:rgba(255,255,255,.45);line-height:1.7}
.step-icon{display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--g3);padding:32px}


/* ══════════════════════════════════════
   360° SERVICES (dark)
══════════════════════════════════════ */
.svc360{background:var(--black);color:var(--white);padding:96px 0}
.svc-head{margin-bottom:48px}
.svc-list{border-top:1px solid rgba(255,255,255,.09)}
.svc-item{border-bottom:1px solid rgba(255,255,255,.09);overflow:hidden}
.svc-trig{
    display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:16px;padding:20px 0;cursor:pointer;
}
.svc-trig:hover .svc-name{opacity:.75}
.svc-left{display:flex;align-items:center;gap:18px}
.svc-no{font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.28);width:24px}
.svc-name{
    font-family:'Barlow Condensed',sans-serif;
    font-size:24px;font-weight:700;
    letter-spacing:-.01em;color:var(--white);
    transition:opacity .18s;
}
.svc-plus{
    width:28px;height:28px;border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;color:var(--white);
    transition:transform .25s,background .25s,border-color .25s;flex-shrink:0;
}
.svc-item.open .svc-plus{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}
.svc-body{display:none;padding:0 0 22px 42px}
.svc-item.open .svc-body{display:grid;grid-template-columns:1fr 1fr;gap:7px 28px}
.svc-body li{font-size:13.5px;color:rgba(255,255,255,.48);display:flex;align-items:center;gap:7px;padding:3px 0}
.svc-body li::before{content:'▸';color:var(--red);font-size:10px;flex-shrink:0}


/* ══════════════════════════════════════
   PARTNERSHIPS (white)
══════════════════════════════════════ */
.partner{padding:96px 0;background:#0a0a0a;color:#fff}
.partner-in{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.pvids{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pvid{
    border-radius:12px;aspect-ratio:3/4;
    background:#1a1a1a;border:1px solid #2a2a2a;
    display:flex;align-items:center;justify-content:center;
    font-size:44px;color:var(--g3);
    position:relative;overflow:hidden;transition:border-color .2s;
}
.pvid:nth-child(2){margin-top:22px}
.pvid:hover{border-color:var(--red)}
.pvid-btn{
    position:absolute;width:40px;height:40px;border-radius:50%;
    background:var(--black);color:var(--white);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;cursor:pointer;transition:transform .2s,background .2s;
}
.pvid:hover .pvid-btn{transform:scale(1.08);background:var(--indigo)}


/* ══════════════════════════════════════
   PORTFOLIO (dark)
══════════════════════════════════════ */
.portfolio{background:var(--black);color:var(--white);padding:96px 0}
.port-hd{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:48px}
.port-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px}
.pc{border-radius:10px;overflow:hidden;position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.07);background:var(--dark2);transition:border-color .3s}
.pc:hover{border-color:rgba(255,255,255,.22)}
.pc.tall{grid-row:span 2}
.pc-img{width:100%;aspect-ratio:16/10;background:#222;display:flex;align-items:center;justify-content:center;font-size:56px;position:relative}
.pc.tall .pc-img{aspect-ratio:3/4}
.pc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.78))}
.pc-body{padding:18px 20px}
.pc-tag{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:5px}
.pc-title{font-size:16px;font-weight:700;color:var(--white);margin-bottom:6px;letter-spacing:-.01em}
.pc-desc{font-size:12.5px;color:rgba(255,255,255,.46);line-height:1.6}
.pc-hover{position:absolute;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.pc:hover .pc-hover{opacity:1}


/* ══════════════════════════════════════
   LOCAL/GLOBAL (white)
══════════════════════════════════════ */
.local{padding:96px 0;background:#0a0a0a;color:#fff}
.local-in{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.globe{
    aspect-ratio:1;border-radius:50%;max-width:380px;margin:0 auto;
    background:radial-gradient(circle at 35% 38%,#3a3a3a 0%,#111 60%,#0a0a0a 100%);
    border:1px solid #2a2a2a;
    display:flex;align-items:center;justify-content:center;
    font-size:50px;position:relative;overflow:hidden;
}
.globe::before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,transparent,transparent 15px,rgba(255,255,255,.03) 15px,rgba(255,255,255,.03) 16px)}
.globe::after{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(90deg,transparent,transparent 15px,rgba(255,255,255,.03) 15px,rgba(255,255,255,.03) 16px)}


/* ══════════════════════════════════════
   WHY US 6-GRID (dark)
══════════════════════════════════════ */
.why{background:var(--black);color:var(--white);padding:96px 0}
.why-hd{margin-bottom:52px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.09)}
.wi{padding:36px 32px;border-right:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);transition:background .22s}
.wi:nth-child(3n){border-right:none}
.wi:nth-child(n+4){border-bottom:none}
.wi:hover{background:rgba(255,255,255,.025)}
.wi-icon{width:44px;height:44px;background:rgba(255,255,255,.06);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.wi-title{font-size:15px;font-weight:700;color:var(--white);margin-bottom:8px;letter-spacing:-.01em}
.wi-desc{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.65}


/* ══════════════════════════════════════
   ROI FRAMEWORK (dark alt)
══════════════════════════════════════ */
.roi{padding:96px 0;background:var(--dark);color:var(--white)}
.roi-in{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.pm-screen{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#1a1a1a}
.pm-bar{background:#222;border-bottom:1px solid rgba(255,255,255,.08);padding:10px 14px;display:flex;align-items:center;gap:5px}
.pm-dot{width:10px;height:10px;border-radius:50%}
.pm-body{padding:16px}
.pm-row{background:#1e1e1e;border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:10px 13px;margin-bottom:7px;display:flex;align-items:center;gap:10px}
.pm-tag{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:20px;white-space:nowrap}
.t-grn{background:rgba(34,197,94,.15);color:#22c55e}
.t-yw{background:rgba(232,255,0,.15);color:var(--red)}
.t-bl{background:rgba(59,130,246,.15);color:#60a5fa}
.t-pu{background:rgba(168,85,247,.15);color:#c084fc}
.pm-txt{font-size:11.5px;color:rgba(255,255,255,.48);flex:1}


/* ══════════════════════════════════════
   PRICING CTA (white)
══════════════════════════════════════ */
.pricing-cta{padding:72px 0;background:#111;border-top:1px solid #222;border-bottom:1px solid #222}
.pc-in{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.pc-h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(24px,3vw,42px);font-weight:700;letter-spacing:-.01em;line-height:1.1;color:#fff}
.pc-p{font-size:15px;color:rgba(255,255,255,.45);margin-top:8px;max-width:420px;line-height:1.65}
.pc-btns{display:flex;gap:10px;flex-shrink:0}


/* ══════════════════════════════════════
   BLOG (white)
══════════════════════════════════════ */
.blog{padding:96px 0;background:#0f0f0f;color:#fff}
.blog-hd{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;margin-bottom:44px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bc{border-radius:10px;overflow:hidden;border:1px solid #2a2a2a;background:#161616;transition:border-color .22s,transform .22s,box-shadow .22s}
.bc:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.4)}
.bc-img{aspect-ratio:16/9;background:#222;display:flex;align-items:center;justify-content:center;font-size:36px;color:#555;border-bottom:1px solid #2a2a2a}
.bc-body{padding:20px 20px 24px}
.bc-meta{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:9px}
.bc-title{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.35;margin-bottom:8px;color:#fff}
.bc-ex{font-size:13px;color:rgba(255,255,255,.45);line-height:1.65}
.bc-link{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:11.5px;font-weight:700;color:var(--red);letter-spacing:.04em;text-transform:uppercase}
.bc-link:hover{color:#fff}


/* ══════════════════════════════════════
   TESTIMONIALS (dark)
══════════════════════════════════════ */
.testi{background:var(--black);color:var(--white);padding:96px 0}
.testi-hd{margin-bottom:48px}
.testi-slides{overflow:hidden}
.testi-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.testi-slide{min-width:100%;flex-shrink:0;display:grid;grid-template-columns:2fr 1fr;gap:56px;align-items:start}
.ts-q{font-size:72px;line-height:.6;color:var(--red);margin-bottom:18px;font-family:'Playfair Display',serif}
.ts-txt{font-size:clamp(15px,1.5vw,19px);color:rgba(255,255,255,.8);line-height:1.65;margin-bottom:24px;font-style:italic}
.ts-auth{display:flex;align-items:center;gap:12px}
.ts-av{width:42px;height:42px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0}
.ts-name{font-size:14px;font-weight:700;color:var(--white)}
.ts-role{font-size:11.5px;color:rgba(255,255,255,.38);margin-top:2px}
.ts-stats{display:flex;flex-direction:column;gap:12px}
.ts-stat{border:1px solid rgba(255,255,255,.09);border-radius:7px;padding:18px 20px}
.ts-n{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--red);line-height:1}
.ts-l{font-size:12px;color:rgba(255,255,255,.38);margin-top:4px;line-height:1.4}
.t-ctrl{display:flex;align-items:center;gap:10px;margin-top:36px}
.t-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:15px;transition:background .2s,border-color .2s}
.t-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.t-dots{display:flex;gap:5px}
.t-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:all .2s}
.t-dot.on{background:var(--red);width:18px;border-radius:3px}


/* ══════════════════════════════════════
   FINAL CTA (yellow)
══════════════════════════════════════ */
.final{background:#0f0f0f;padding:80px 0;text-align:center;border-top:3px solid var(--red)}
.final h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,68px);font-weight:900;letter-spacing:-.02em;color:#ffffff;line-height:1.0;margin-bottom:12px}
.final p{font-size:16px;color:rgba(255,255,255,.45);margin-bottom:32px}
.final-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}


/* ══════════════════════════════════════
   FOOTER (dark)
══════════════════════════════════════ */
footer{background:var(--black);color:var(--white);padding:72px 0 28px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.foot-logo{

}
.foot-logo-icon{
    width:100px;height:100px;background:var(--red);
}
.foot-logo-icon svg{width:16px;height:16px}
.foot-tag{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.7;max-width:230px;margin-bottom:22px}
.foot-soc{display:flex;gap:8px}
.foot-soc a{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:12.5px;color:rgba(255,255,255,.48);transition:background .2s,color .2s}
.foot-soc a:hover{background:var(--red);color:#fff}
.foot-col h5{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:16px}
.foot-col ul{display:flex;flex-direction:column;gap:9px}
.foot-col ul li a{font-size:13.5px;color:rgba(255,255,255,.5);transition:color .18s}
.foot-col ul li a:hover{color:var(--white)}
.foot-btm{padding-top:26px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.foot-btm p{font-size:12px;color:rgba(255,255,255,.26)}


    /* Card visual backgrounds (rich photo-like gradients) */
    .c-vid{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20600%22%3E%0A%3Cdefs%3E%0A%20%20%3CradialGradient%20id=%22a%22%20cx=%2252%25%22%20cy=%2255%25%22%20r=%2255%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%231b3a5c%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%2304090f%22/%3E%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id=%22b%22%20cx=%2250%25%22%20cy=%2250%25%22%20r=%2250%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%235ba3d9%22/%3E%3Cstop%20offset=%2235%25%22%20stop-color=%22%231a5080%22/%3E%3Cstop%20offset=%2270%25%22%20stop-color=%22%23061828%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23020810%22/%3E%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id=%22c%22%20cx=%2238%25%22%20cy=%2236%25%22%20r=%2245%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%23ffffff%22%20stop-opacity=%220.35%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%235ba3d9%22%20stop-opacity=%220%22/%3E%3C/radialGradient%3E%0A%3C/defs%3E%0A%3Crect%20width=%22400%22%20height=%22600%22%20fill=%22url%28%23a%29%22/%3E%0A%3C%21--%20camera%20body%20--%3E%0A%3Crect%20x=%2255%22%20y=%22180%22%20width=%22290%22%20height=%22200%22%20rx=%2216%22%20fill=%22%23111%22%20stroke=%22%232a2a2a%22%20stroke-width=%222%22/%3E%0A%3Crect%20x=%2270%22%20y=%22195%22%20width=%22260%22%20height=%22170%22%20rx=%2210%22%20fill=%22%230d0d0d%22/%3E%0A%3C%21--%20grip%20texture%20lines%20--%3E%0A%3Cline%20x1=%2255%22%20y1=%22220%22%20x2=%2255%22%20y2=%22360%22%20stroke=%22%231a1a1a%22%20stroke-width=%223%22/%3E%0A%3Cline%20x1=%2261%22%20y1=%22220%22%20x2=%2261%22%20y2=%22360%22%20stroke=%22%231a1a1a%22%20stroke-width=%222%22/%3E%0A%3C%21--%20main%20lens%20barrel%20rings%20--%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%22108%22%20fill=%22%230a0a0a%22%20stroke=%22%23222%22%20stroke-width=%224%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%2296%22%20fill=%22%23080808%22%20stroke=%22%231e1e1e%22%20stroke-width=%222%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%2282%22%20fill=%22url%28%23b%29%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%2282%22%20fill=%22url%28%23c%29%22/%3E%0A%3C%21--%20inner%20lens%20rings%20--%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%2266%22%20fill=%22none%22%20stroke=%22%235ba3d9%22%20stroke-width=%220.8%22%20stroke-opacity=%220.35%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%2250%22%20fill=%22none%22%20stroke=%22%235ba3d9%22%20stroke-width=%220.6%22%20stroke-opacity=%220.25%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%2234%22%20fill=%22%23041220%22%20stroke=%22%235ba3d9%22%20stroke-width=%220.8%22%20stroke-opacity=%220.4%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%2216%22%20fill=%22%23030c18%22/%3E%0A%3C%21--%20lens%20reflection%20hexagon%20--%3E%0A%3Cpolygon%20points=%22200%2C255%20218%2C264%20218%2C284%20200%2C293%20182%2C284%20182%2C264%22%20fill=%22none%22%20stroke=%22%23a0d4ff%22%20stroke-width=%220.8%22%20stroke-opacity=%220.2%22/%3E%0A%3C%21--%20aperture%20blades%20--%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22280%22%20r=%2210%22%20fill=%22%235ba3d9%22%20fill-opacity=%220.12%22/%3E%0A%3C%21--%20flare%20--%3E%0A%3Cellipse%20cx=%22172%22%20cy=%22252%22%20rx=%2214%22%20ry=%229%22%20fill=%22white%22%20fill-opacity=%220.12%22%20transform=%22rotate%28-25%2C172%2C252%29%22/%3E%0A%3Cellipse%20cx=%22165%22%20cy=%22246%22%20rx=%226%22%20ry=%224%22%20fill=%22white%22%20fill-opacity=%220.18%22%20transform=%22rotate%28-25%2C165%2C246%29%22/%3E%0A%3C%21--%20top%20flash/hotshoe%20--%3E%0A%3Crect%20x=%22145%22%20y=%22158%22%20width=%22110%22%20height=%2226%22%20rx=%226%22%20fill=%22%23111%22%20stroke=%22%23222%22%20stroke-width=%221.5%22/%3E%0A%3Crect%20x=%22160%22%20y=%22164%22%20width=%2280%22%20height=%2214%22%20rx=%223%22%20fill=%22%230a0a0a%22/%3E%0A%3C%21--%20shutter%20button%20--%3E%0A%3Ccircle%20cx=%22300%22%20cy=%22196%22%20r=%2210%22%20fill=%22%231a1a1a%22%20stroke=%22%23333%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22300%22%20cy=%22196%22%20r=%226%22%20fill=%22%23cc1a1a%22/%3E%0A%3C%21--%20mode%20dial%20--%3E%0A%3Ccircle%20cx=%22100%22%20cy=%22196%22%20r=%2214%22%20fill=%22%23181818%22%20stroke=%22%23333%22%20stroke-width=%221.5%22/%3E%0A%3Cline%20x1=%22100%22%20y1=%22183%22%20x2=%22100%22%20y2=%22188%22%20stroke=%22%23888%22%20stroke-width=%221.5%22/%3E%0A%3Cline%20x1=%22113%22%20y1=%22196%22%20x2=%22108%22%20y2=%22196%22%20stroke=%22%23888%22%20stroke-width=%221.5%22/%3E%0A%3C%21--%20viewfinder%20eyepiece%20--%3E%0A%3Crect%20x=%22270%22%20y=%22188%22%20width=%2252%22%20height=%2236%22%20rx=%226%22%20fill=%22%230d0d0d%22%20stroke=%22%23222%22%20stroke-width=%221.5%22/%3E%0A%3Crect%20x=%22276%22%20y=%22194%22%20width=%2240%22%20height=%2224%22%20rx=%223%22%20fill=%22%23111e2e%22/%3E%0A%3C%21--%20subtle%20ambient%20dots%20--%3E%0A%3Ccircle%20cx=%2240%22%20cy=%2280%22%20r=%222%22%20fill=%22%235ba3d9%22%20fill-opacity=%220.3%22/%3E%0A%3Ccircle%20cx=%22360%22%20cy=%22120%22%20r=%221.5%22%20fill=%22%235ba3d9%22%20fill-opacity=%220.25%22/%3E%0A%3Ccircle%20cx=%2280%22%20cy=%22510%22%20r=%222%22%20fill=%22%235ba3d9%22%20fill-opacity=%220.2%22/%3E%0A%3Ccircle%20cx=%22340%22%20cy=%22490%22%20r=%221.5%22%20fill=%22%235ba3d9%22%20fill-opacity=%220.2%22/%3E%0A%3C/svg%3E");background-size:cover;background-position:center;}

    .c-robot{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20400%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id=%22sky%22%20x1=%2220%25%22%20y1=%220%25%22%20x2=%2280%25%22%20y2=%22100%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%238bbbd4%22/%3E%3Cstop%20offset=%2245%25%22%20stop-color=%22%23c9a8b8%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23e8c9b8%22/%3E%3C/linearGradient%3E%0A%20%20%3CradialGradient%20id=%22rim%22%20cx=%2272%25%22%20cy=%2218%25%22%20r=%2255%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%23fff8f2%22%20stop-opacity=%220.65%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23e8c9b8%22%20stop-opacity=%220%22/%3E%3C/radialGradient%3E%0A%3C/defs%3E%0A%3Crect%20width=%22400%22%20height=%22400%22%20fill=%22url%28%23sky%29%22/%3E%0A%3Crect%20width=%22400%22%20height=%22400%22%20fill=%22url%28%23rim%29%22/%3E%0A%3C%21--%20horizon%20haze%20--%3E%0A%3Cellipse%20cx=%22200%22%20cy=%22400%22%20rx=%22240%22%20ry=%2280%22%20fill=%22%23f0ddd0%22%20fill-opacity=%220.4%22/%3E%0A%3C%21--%20figure%20silhouette%20--%3E%0A%3Cellipse%20cx=%22205%22%20cy=%22398%22%20rx=%2272%22%20ry=%2218%22%20fill=%22%2310101a%22%20fill-opacity=%220.25%22/%3E%0A%3C%21--%20torso%20--%3E%0A%3Cpath%20d=%22M165%20370%20Q158%20310%20162%20270%20Q166%20240%20205%20232%20Q244%20240%20248%20270%20Q252%20310%20245%20370Z%22%20fill=%22%2310101a%22/%3E%0A%3C%21--%20neck%20--%3E%0A%3Crect%20x=%22193%22%20y=%22220%22%20width=%2224%22%20height=%2222%22%20rx=%224%22%20fill=%22%2310101a%22/%3E%0A%3C%21--%20head%20--%3E%0A%3Cellipse%20cx=%22205%22%20cy=%22192%22%20rx=%2240%22%20ry=%2246%22%20fill=%22%2310101a%22/%3E%0A%3C%21--%20hair%20volume%20--%3E%0A%3Cellipse%20cx=%22205%22%20cy=%22162%22%20rx=%2236%22%20ry=%2222%22%20fill=%22%230a0a14%22%20fill-opacity=%220.7%22/%3E%0A%3C%21--%20rim%20light%20on%20left%20edge%20--%3E%0A%3Cpath%20d=%22M165%20220%20Q160%20280%20164%20340%22%20stroke=%22%23d4b8a8%22%20stroke-width=%224%22%20fill=%22none%22%20stroke-opacity=%220.55%22/%3E%0A%3Cpath%20d=%22M166%20190%20Q161%20210%20162%20235%22%20stroke=%22%23d4b8a8%22%20stroke-width=%223%22%20fill=%22none%22%20stroke-opacity=%220.4%22/%3E%0A%3C%21--%20rim%20light%20on%20right%20--%3E%0A%3Cpath%20d=%22M245%20220%20Q250%20280%20246%20340%22%20stroke=%22%23ffeedd%22%20stroke-width=%223%22%20fill=%22none%22%20stroke-opacity=%220.3%22/%3E%0A%3C%21--%20shoulder%20catchlight%20line%20--%3E%0A%3Cellipse%20cx=%22205%22%20cy=%22248%22%20rx=%2278%22%20ry=%2212%22%20fill=%22%23e8d0c0%22%20fill-opacity=%220.2%22/%3E%0A%3C%21--%20left%20arm%20--%3E%0A%3Cpath%20d=%22M165%20260%20Q138%20300%20142%20348%22%20stroke=%22%2310101a%22%20stroke-width=%2224%22%20fill=%22none%22%20stroke-linecap=%22round%22/%3E%0A%3C%21--%20right%20arm%20--%3E%0A%3Cpath%20d=%22M245%20260%20Q272%20300%20268%20348%22%20stroke=%22%2310101a%22%20stroke-width=%2224%22%20fill=%22none%22%20stroke-linecap=%22round%22/%3E%0A%3C/svg%3E");background-size:cover;background-position:center;}

    .c-brand{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20600%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id=%22rb%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%22100%25%22%20y2=%22100%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%23cc1a1a%22/%3E%3Cstop%20offset=%2255%25%22%20stop-color=%22%238b0a0a%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%231a0505%22/%3E%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Crect%20width=%22400%22%20height=%22600%22%20fill=%22url%28%23rb%29%22/%3E%0A%3C%21--%20subtle%20grid%20--%3E%0A%3Cline%20x1=%220%22%20y1=%22100%22%20x2=%22400%22%20y2=%22100%22%20stroke=%22white%22%20stroke-opacity=%220.05%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%220%22%20y1=%22200%22%20x2=%22400%22%20y2=%22200%22%20stroke=%22white%22%20stroke-opacity=%220.05%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%220%22%20y1=%22300%22%20x2=%22400%22%20y2=%22300%22%20stroke=%22white%22%20stroke-opacity=%220.05%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%220%22%20y1=%22400%22%20x2=%22400%22%20y2=%22400%22%20stroke=%22white%22%20stroke-opacity=%220.05%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%220%22%20y1=%22500%22%20x2=%22400%22%20y2=%22500%22%20stroke=%22white%22%20stroke-opacity=%220.05%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%22100%22%20y1=%220%22%20x2=%22100%22%20y2=%22600%22%20stroke=%22white%22%20stroke-opacity=%220.05%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%22200%22%20y1=%220%22%20x2=%22200%22%20y2=%22600%22%20stroke=%22white%22%20stroke-opacity=%220.05%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%22300%22%20y1=%220%22%20x2=%22300%22%20y2=%22600%22%20stroke=%22white%22%20stroke-opacity=%220.05%22%20stroke-width=%221%22/%3E%0A%3C%21--%20diagonal%20light%20slash%20--%3E%0A%3Cpolygon%20points=%22-30%2C250%2080%2C600%20180%2C600%2070%2C250%22%20fill=%22white%22%20fill-opacity=%220.04%22/%3E%0A%3C%21--%20walking%20silhouettes%20--%3E%0A%3Cellipse%20cx=%22230%22%20cy=%22418%22%20rx=%2218%22%20ry=%2222%22%20fill=%22black%22%20fill-opacity=%220.45%22/%3E%0A%3Crect%20x=%22218%22%20y=%22438%22%20width=%2224%22%20height=%2262%22%20rx=%2210%22%20fill=%22black%22%20fill-opacity=%220.45%22/%3E%0A%3Cpath%20d=%22M218%20488%20Q208%20520%20204%20550%22%20stroke=%22black%22%20stroke-width=%2213%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-opacity=%220.45%22/%3E%0A%3Cpath%20d=%22M242%20488%20Q252%20520%20256%20550%22%20stroke=%22black%22%20stroke-width=%2213%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-opacity=%220.45%22/%3E%0A%3C%21--%20second%20figure%20smaller%20--%3E%0A%3Cellipse%20cx=%22295%22%20cy=%22432%22%20rx=%2213%22%20ry=%2216%22%20fill=%22black%22%20fill-opacity=%220.3%22/%3E%0A%3Crect%20x=%22284%22%20y=%22446%22%20width=%2222%22%20height=%2255%22%20rx=%228%22%20fill=%22black%22%20fill-opacity=%220.3%22/%3E%0A%3Cpath%20d=%22M284%20490%20Q276%20515%20273%20545%22%20stroke=%22black%22%20stroke-width=%2210%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-opacity=%220.3%22/%3E%0A%3Cpath%20d=%22M306%20490%20Q314%20515%20317%20545%22%20stroke=%22black%22%20stroke-width=%2210%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-opacity=%220.3%22/%3E%0A%3C/svg%3E");background-size:cover;background-position:center;}
    .c-mobile{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20400%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id=%22mb%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%22100%25%22%20y2=%22100%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%231e1208%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%230a0805%22/%3E%3C/linearGradient%3E%0A%20%20%3ClinearGradient%20id=%22sc%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%220%25%22%20y2=%22100%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%230f2540%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23060e1a%22/%3E%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Crect%20width=%22400%22%20height=%22400%22%20fill=%22url%28%23mb%29%22/%3E%0A%3C%21--%20clapperboard%20body%20--%3E%0A%3Crect%20x=%2272%22%20y=%2280%22%20width=%22256%22%20height=%22264%22%20rx=%2210%22%20fill=%22%23181818%22%20stroke=%22%232e2e2e%22%20stroke-width=%222%22/%3E%0A%3C%21--%20clapper%20top%20%28striped%20section%29%20--%3E%0A%3Crect%20x=%2272%22%20y=%2280%22%20width=%22256%22%20height=%2272%22%20rx=%2210%22%20fill=%22%23f2f2f2%22/%3E%0A%3Crect%20x=%2272%22%20y=%22120%22%20width=%22256%22%20height=%2232%22%20fill=%22%23f2f2f2%22/%3E%0A%3CclipPath%20id=%22cl%22%3E%3Crect%20x=%2272%22%20y=%2280%22%20width=%22256%22%20height=%2268%22%20rx=%2210%22/%3E%3C/clipPath%3E%0A%3Cg%20clip-path=%22url%28%23cl%29%22%3E%0A%20%20%3Crect%20x=%2272%22%20y=%2280%22%20width=%22256%22%20height=%2268%22%20fill=%22white%22/%3E%0A%20%20%3Crect%20x=%22100%22%20y=%2280%22%20width=%2232%22%20height=%2268%22%20fill=%22%23111%22/%3E%0A%20%20%3Crect%20x=%22164%22%20y=%2280%22%20width=%2232%22%20height=%2268%22%20fill=%22%23111%22/%3E%0A%20%20%3Crect%20x=%22228%22%20y=%2280%22%20width=%2232%22%20height=%2268%22%20fill=%22%23111%22/%3E%0A%20%20%3Crect%20x=%22292%22%20y=%2280%22%20width=%2236%22%20height=%2268%22%20fill=%22%23111%22/%3E%0A%20%20%3C%21--%20angled%20stripe%20overlay%20--%3E%0A%20%20%3Cpolygon%20points=%2272%2C80%20104%2C80%2072%2C148%22%20fill=%22white%22/%3E%0A%20%20%3Cpolygon%20points=%22104%2C80%20136%2C80%20104%2C148%2072%2C148%22%20fill=%22%23111%22/%3E%0A%20%20%3Cpolygon%20points=%22136%2C80%20168%2C80%20136%2C148%20104%2C148%22%20fill=%22white%22/%3E%0A%20%20%3Cpolygon%20points=%22168%2C80%20200%2C80%20168%2C148%20136%2C148%22%20fill=%22%23111%22/%3E%0A%20%20%3Cpolygon%20points=%22200%2C80%20232%2C80%20200%2C148%20168%2C148%22%20fill=%22white%22/%3E%0A%20%20%3Cpolygon%20points=%22232%2C80%20264%2C80%20232%2C148%20200%2C148%22%20fill=%22%23111%22/%3E%0A%20%20%3Cpolygon%20points=%22264%2C80%20296%2C80%20264%2C148%20232%2C148%22%20fill=%22white%22/%3E%0A%20%20%3Cpolygon%20points=%22296%2C80%20328%2C80%20296%2C148%20264%2C148%22%20fill=%22%23111%22/%3E%0A%3C/g%3E%0A%3C%21--%20info%20bar%20--%3E%0A%3Crect%20x=%2272%22%20y=%22148%22%20width=%22256%22%20height=%2244%22%20fill=%22%231e1e1e%22/%3E%0A%3Crect%20x=%2290%22%20y=%22157%22%20width=%2276%22%20height=%227%22%20rx=%222%22%20fill=%22%23444%22/%3E%0A%3Crect%20x=%2290%22%20y=%22170%22%20width=%2255%22%20height=%226%22%20rx=%222%22%20fill=%22%23333%22/%3E%0A%3Crect%20x=%22218%22%20y=%22157%22%20width=%2290%22%20height=%227%22%20rx=%222%22%20fill=%22%23444%22/%3E%0A%3Crect%20x=%22218%22%20y=%22170%22%20width=%2268%22%20height=%226%22%20rx=%222%22%20fill=%22%23333%22/%3E%0A%3C%21--%20screen%20--%3E%0A%3Crect%20x=%2288%22%20y=%22204%22%20width=%22224%22%20height=%22118%22%20rx=%225%22%20fill=%22url%28%23sc%29%22/%3E%0A%3C%21--%20video%20thumbnails%20on%20screen%20--%3E%0A%3Crect%20x=%2296%22%20y=%22212%22%20width=%2262%22%20height=%2242%22%20rx=%223%22%20fill=%22%230a2840%22/%3E%0A%3Cpolygon%20points=%22116%2C227%20116%2C241%20130%2C234%22%20fill=%22%23cc1a1a%22/%3E%0A%3Crect%20x=%22166%22%20y=%22212%22%20width=%2262%22%20height=%2242%22%20rx=%223%22%20fill=%22%230a2840%22/%3E%0A%3Cpolygon%20points=%22186%2C227%20186%2C241%20200%2C234%22%20fill=%22%23cc1a1a%22/%3E%0A%3Crect%20x=%22236%22%20y=%22212%22%20width=%2268%22%20height=%2242%22%20rx=%223%22%20fill=%22%230a2840%22/%3E%0A%3Cpolygon%20points=%22254%2C227%20254%2C241%20268%2C234%22%20fill=%22%23cc1a1a%22/%3E%0A%3C%21--%20timeline%20--%3E%0A%3Crect%20x=%2296%22%20y=%22263%22%20width=%22216%22%20height=%227%22%20rx=%223%22%20fill=%22%230f2030%22/%3E%0A%3Crect%20x=%2296%22%20y=%22263%22%20width=%22100%22%20height=%227%22%20rx=%223%22%20fill=%22%23cc1a1a%22/%3E%0A%3Ccircle%20cx=%22196%22%20cy=%22266%22%20r=%226%22%20fill=%22white%22/%3E%0A%3C%21--%20controls%20--%3E%0A%3Ccircle%20cx=%22148%22%20cy=%22298%22%20r=%229%22%20fill=%22%230f2030%22%20stroke=%22%231a3050%22%20stroke-width=%221%22/%3E%0A%3Ccircle%20cx=%22180%22%20cy=%22298%22%20r=%2211%22%20fill=%22%23cc1a1a%22/%3E%0A%3Cpolygon%20points=%22177%2C294%20177%2C302%20184%2C298%22%20fill=%22white%22/%3E%0A%3Ccircle%20cx=%22212%22%20cy=%22298%22%20r=%229%22%20fill=%22%230f2030%22%20stroke=%22%231a3050%22%20stroke-width=%221%22/%3E%0A%3Ccircle%20cx=%22244%22%20cy=%22298%22%20r=%229%22%20fill=%22%230f2030%22%20stroke=%22%231a3050%22%20stroke-width=%221%22/%3E%0A%3C%21--%20hinge%20--%3E%0A%3Crect%20x=%2270%22%20y=%22142%22%20width=%22260%22%20height=%2210%22%20rx=%223%22%20fill=%22%232a2a2a%22%20stroke=%22%233a3a3a%22%20stroke-width=%221%22/%3E%0A%3C/svg%3E");background-size:cover;background-position:center;}

    .c-design{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20400%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id=%22db%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%22100%25%22%20y2=%22100%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%230e1e10%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23060c07%22/%3E%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Crect%20width=%22400%22%20height=%22400%22%20fill=%22url%28%23db%29%22/%3E%0A%3C%21--%20dot%20grid%20--%3E%0A%3Ccircle%20cx=%2280%22%20cy=%2280%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22160%22%20cy=%2280%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22240%22%20cy=%2280%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22320%22%20cy=%2280%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%0A%3Ccircle%20cx=%2280%22%20cy=%22160%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22240%22%20cy=%22160%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22320%22%20cy=%22160%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%0A%3Ccircle%20cx=%2280%22%20cy=%22240%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22160%22%20cy=%22240%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22320%22%20cy=%22240%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%0A%3Ccircle%20cx=%2280%22%20cy=%22320%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22160%22%20cy=%22320%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22240%22%20cy=%22320%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%3Ccircle%20cx=%22320%22%20cy=%22320%22%20r=%221%22%20fill=%22%232a3a2a%22/%3E%0A%3C%21--%20SHADOWS%20wheel%20--%3E%0A%3Ccircle%20cx=%22112%22%20cy=%22148%22%20r=%2260%22%20fill=%22none%22%20stroke=%22%232a3a2a%22%20stroke-width=%222%22/%3E%0A%3Cpath%20d=%22M112%2C88%20A60%2C60%200%200%2C1%20172%2C148%20L112%2C148Z%22%20fill=%22%23cc3333%22%20fill-opacity=%220.85%22/%3E%0A%3Cpath%20d=%22M172%2C148%20A60%2C60%200%200%2C1%20112%2C208%20L112%2C148Z%22%20fill=%22%2333cc33%22%20fill-opacity=%220.85%22/%3E%0A%3Cpath%20d=%22M112%2C208%20A60%2C60%200%200%2C1%2052%2C148%20L112%2C148Z%22%20fill=%22%233333cc%22%20fill-opacity=%220.85%22/%3E%0A%3Cpath%20d=%22M52%2C148%20A60%2C60%200%200%2C1%20112%2C88%20L112%2C148Z%22%20fill=%22%23cccc33%22%20fill-opacity=%220.85%22/%3E%0A%3Ccircle%20cx=%22112%22%20cy=%22148%22%20r=%2220%22%20fill=%22%23060c07%22%20stroke=%22%232a3a2a%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22112%22%20cy=%22148%22%20r=%225%22%20fill=%22white%22%20fill-opacity=%220.7%22/%3E%0A%3Ctext%20x=%22112%22%20y=%22226%22%20text-anchor=%22middle%22%20font-family=%22monospace%22%20font-size=%229%22%20fill=%22%236a8a6a%22%20letter-spacing=%222%22%3ESHADOWS%3C/text%3E%0A%3C%21--%20MIDTONES%20wheel%20--%3E%0A%3Ccircle%20cx=%22288%22%20cy=%22130%22%20r=%2248%22%20fill=%22none%22%20stroke=%22%232a3a2a%22%20stroke-width=%222%22/%3E%0A%3Cpath%20d=%22M288%2C82%20A48%2C48%200%200%2C1%20336%2C130%20L288%2C130Z%22%20fill=%22%23ff8c00%22%20fill-opacity=%220.8%22/%3E%0A%3Cpath%20d=%22M336%2C130%20A48%2C48%200%200%2C1%20288%2C178%20L288%2C130Z%22%20fill=%22%2300ccaa%22%20fill-opacity=%220.8%22/%3E%0A%3Cpath%20d=%22M288%2C178%20A48%2C48%200%200%2C1%20240%2C130%20L288%2C130Z%22%20fill=%22%23aa00ff%22%20fill-opacity=%220.8%22/%3E%0A%3Cpath%20d=%22M240%2C130%20A48%2C48%200%200%2C1%20288%2C82%20L288%2C130Z%22%20fill=%22%23ffee00%22%20fill-opacity=%220.8%22/%3E%0A%3Ccircle%20cx=%22288%22%20cy=%22130%22%20r=%2216%22%20fill=%22%23060c07%22%20stroke=%22%232a3a2a%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22288%22%20cy=%22130%22%20r=%224%22%20fill=%22white%22%20fill-opacity=%220.7%22/%3E%0A%3Ctext%20x=%22288%22%20y=%22198%22%20text-anchor=%22middle%22%20font-family=%22monospace%22%20font-size=%229%22%20fill=%22%236a8a6a%22%20letter-spacing=%222%22%3EMIDTONES%3C/text%3E%0A%3C%21--%20HIGHLIGHTS%20wheel%20--%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22310%22%20r=%2240%22%20fill=%22none%22%20stroke=%22%232a3a2a%22%20stroke-width=%222%22/%3E%0A%3Cpath%20d=%22M200%2C270%20A40%2C40%200%200%2C1%20240%2C310%20L200%2C310Z%22%20fill=%22%23ff4488%22%20fill-opacity=%220.8%22/%3E%0A%3Cpath%20d=%22M240%2C310%20A40%2C40%200%200%2C1%20200%2C350%20L200%2C310Z%22%20fill=%22%2344ffcc%22%20fill-opacity=%220.8%22/%3E%0A%3Cpath%20d=%22M200%2C350%20A40%2C40%200%200%2C1%20160%2C310%20L200%2C310Z%22%20fill=%22%234488ff%22%20fill-opacity=%220.8%22/%3E%0A%3Cpath%20d=%22M160%2C310%20A40%2C40%200%200%2C1%20200%2C270%20L200%2C310Z%22%20fill=%22%23ffcc44%22%20fill-opacity=%220.8%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22310%22%20r=%2213%22%20fill=%22%23060c07%22%20stroke=%22%232a3a2a%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22310%22%20r=%223.5%22%20fill=%22white%22%20fill-opacity=%220.7%22/%3E%0A%3Ctext%20x=%22200%22%20y=%22372%22%20text-anchor=%22middle%22%20font-family=%22monospace%22%20font-size=%229%22%20fill=%22%236a8a6a%22%20letter-spacing=%222%22%3EHIGHLIGHTS%3C/text%3E%0A%3C%21--%20dashed%20connectors%20--%3E%0A%3Cline%20x1=%22158%22%20y1=%22175%22%20x2=%22250%22%20y2=%22162%22%20stroke=%22%232a3a2a%22%20stroke-width=%221%22%20stroke-dasharray=%224%2C3%22/%3E%0A%3Cline%20x1=%22252%22%20y1=%22168%22%20x2=%22222%22%20y2=%22276%22%20stroke=%22%232a3a2a%22%20stroke-width=%221%22%20stroke-dasharray=%224%2C3%22/%3E%0A%3Cline%20x1=%22218%22%20y1=%22278%22%20x2=%22160%22%20y2=%22188%22%20stroke=%22%232a3a2a%22%20stroke-width=%221%22%20stroke-dasharray=%224%2C3%22/%3E%0A%3C/svg%3E");background-size:cover;background-position:center;}

    .c-web{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20400%22%3E%0A%3Cdefs%3E%0A%20%20%3CradialGradient%20id=%22wb%22%20cx=%2250%25%22%20cy=%2245%25%22%20r=%2260%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%23221808%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23080604%22/%3E%3C/radialGradient%3E%0A%3C/defs%3E%0A%3Crect%20width=%22400%22%20height=%22400%22%20fill=%22url%28%23wb%29%22/%3E%0A%3C%21--%20reel%20outer%20--%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22190%22%20r=%22145%22%20fill=%22%23130e06%22%20stroke=%22%232a2010%22%20stroke-width=%223%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22190%22%20r=%22130%22%20fill=%22none%22%20stroke=%22%231e1608%22%20stroke-width=%221.5%22/%3E%0A%3C%21--%20spokes%20--%3E%0A%3Cline%20x1=%22200%22%20y1=%2245%22%20x2=%22200%22%20y2=%22335%22%20stroke=%22%231e1608%22%20stroke-width=%2220%22/%3E%0A%3Cline%20x1=%2275%22%20y1=%22115%22%20x2=%22325%22%20y2=%22265%22%20stroke=%22%231e1608%22%20stroke-width=%2220%22/%3E%0A%3Cline%20x1=%2275%22%20y1=%22265%22%20x2=%22325%22%20y2=%22115%22%20stroke=%22%231e1608%22%20stroke-width=%2220%22/%3E%0A%3C%21--%20spoke%20holes%20--%3E%0A%3Ccircle%20cx=%22200%22%20cy=%2260%22%20r=%2218%22%20fill=%22%23070504%22%20stroke=%22%232a2010%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22320%22%20r=%2218%22%20fill=%22%23070504%22%20stroke=%22%232a2010%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%2288%22%20cy=%22123%22%20r=%2218%22%20fill=%22%23070504%22%20stroke=%22%232a2010%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22312%22%20cy=%22123%22%20r=%2218%22%20fill=%22%23070504%22%20stroke=%22%232a2010%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%2288%22%20cy=%22257%22%20r=%2218%22%20fill=%22%23070504%22%20stroke=%22%232a2010%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22312%22%20cy=%22257%22%20r=%2218%22%20fill=%22%23070504%22%20stroke=%22%232a2010%22%20stroke-width=%221.5%22/%3E%0A%3C%21--%20hub%20--%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22190%22%20r=%2242%22%20fill=%22%230e0a04%22%20stroke=%22%232a2010%22%20stroke-width=%223%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22190%22%20r=%2226%22%20fill=%22%23070504%22%20stroke=%22%232a2010%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22190%22%20r=%2211%22%20fill=%22%23cc1a1a%22/%3E%0A%3Ccircle%20cx=%22200%22%20cy=%22190%22%20r=%225%22%20fill=%22%23ff4444%22/%3E%0A%3C%21--%20film%20strip%20along%20bottom%20--%3E%0A%3Crect%20x=%2210%22%20y=%22348%22%20width=%22380%22%20height=%2246%22%20rx=%225%22%20fill=%22%23130e06%22%20stroke=%22%232a2010%22%20stroke-width=%221.5%22/%3E%0A%3Crect%20x=%2218%22%20y=%22354%22%20width=%2214%22%20height=%2234%22%20rx=%223%22%20fill=%22%23070504%22/%3E%0A%3Crect%20x=%2240%22%20y=%22354%22%20width=%2214%22%20height=%2234%22%20rx=%223%22%20fill=%22%23070504%22/%3E%0A%3Crect%20x=%22368%22%20y=%22354%22%20width=%2214%22%20height=%2234%22%20rx=%223%22%20fill=%22%23070504%22/%3E%0A%3Crect%20x=%22346%22%20y=%22354%22%20width=%2214%22%20height=%2234%22%20rx=%223%22%20fill=%22%23070504%22/%3E%0A%3C%21--%20frame%20thumbnails%20--%3E%0A%3Crect%20x=%2262%22%20y=%22357%22%20width=%2254%22%20height=%2228%22%20rx=%222%22%20fill=%22%23cc1a1a%22%20fill-opacity=%220.55%22/%3E%0A%3Cpolygon%20points=%2280%2C365%2080%2C375%2091%2C370%22%20fill=%22white%22%20fill-opacity=%220.7%22/%3E%0A%3Crect%20x=%22124%22%20y=%22357%22%20width=%2254%22%20height=%2228%22%20rx=%222%22%20fill=%22%230a2840%22%20fill-opacity=%220.9%22/%3E%0A%3Crect%20x=%22186%22%20y=%22357%22%20width=%2254%22%20height=%2228%22%20rx=%222%22%20fill=%22%231a2a10%22%20fill-opacity=%220.9%22/%3E%0A%3Crect%20x=%22248%22%20y=%22357%22%20width=%2254%22%20height=%2228%22%20rx=%222%22%20fill=%22%232a1010%22%20fill-opacity=%220.9%22/%3E%0A%3Crect%20x=%22310%22%20y=%22357%22%20width=%2228%22%20height=%2228%22%20rx=%222%22%20fill=%22%23cc1a1a%22%20fill-opacity=%220.35%22/%3E%0A%3C/svg%3E");background-size:cover;background-position:center;}

    .c-film{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20600%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id=%22fb%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%220%25%22%20y2=%22100%25%22%3E%0A%20%20%20%20%3Cstop%20offset=%220%25%22%20stop-color=%22%230a0a20%22/%3E%0A%20%20%20%20%3Cstop%20offset=%2230%25%22%20stop-color=%22%231a0e2e%22/%3E%0A%20%20%20%20%3Cstop%20offset=%2260%25%22%20stop-color=%22%232e140e%22/%3E%0A%20%20%20%20%3Cstop%20offset=%22100%25%22%20stop-color=%22%230a0504%22/%3E%0A%20%20%3C/linearGradient%3E%0A%20%20%3CradialGradient%20id=%22glow%22%20cx=%2250%25%22%20cy=%2242%25%22%20r=%2230%25%22%3E%0A%20%20%20%20%3Cstop%20offset=%220%25%22%20stop-color=%22%23ff9944%22%20stop-opacity=%220.55%22/%3E%0A%20%20%20%20%3Cstop%20offset=%22100%25%22%20stop-color=%22%23ff4400%22%20stop-opacity=%220%22/%3E%0A%20%20%3C/radialGradient%3E%0A%3C/defs%3E%0A%3Crect%20width=%22400%22%20height=%22600%22%20fill=%22url%28%23fb%29%22/%3E%0A%3C%21--%20stars%20--%3E%0A%3Ccircle%20cx=%2255%22%20cy=%2255%22%20r=%221.5%22%20fill=%22white%22%20fill-opacity=%220.75%22/%3E%0A%3Ccircle%20cx=%22140%22%20cy=%2235%22%20r=%221%22%20fill=%22white%22%20fill-opacity=%220.6%22/%3E%0A%3Ccircle%20cx=%22265%22%20cy=%2265%22%20r=%221.8%22%20fill=%22white%22%20fill-opacity=%220.8%22/%3E%0A%3Ccircle%20cx=%22345%22%20cy=%2242%22%20r=%221%22%20fill=%22white%22%20fill-opacity=%220.5%22/%3E%0A%3Ccircle%20cx=%2290%22%20cy=%22105%22%20r=%221%22%20fill=%22white%22%20fill-opacity=%220.45%22/%3E%0A%3Ccircle%20cx=%22310%22%20cy=%22118%22%20r=%221.5%22%20fill=%22white%22%20fill-opacity=%220.6%22/%3E%0A%3Ccircle%20cx=%22190%22%20cy=%2282%22%20r=%222%22%20fill=%22white%22%20fill-opacity=%220.9%22/%3E%0A%3Ccircle%20cx=%2242%22%20cy=%22160%22%20r=%221%22%20fill=%22white%22%20fill-opacity=%220.35%22/%3E%0A%3Ccircle%20cx=%22370%22%20cy=%2295%22%20r=%221%22%20fill=%22white%22%20fill-opacity=%220.4%22/%3E%0A%3Ccircle%20cx=%22220%22%20cy=%22145%22%20r=%221%22%20fill=%22white%22%20fill-opacity=%220.5%22/%3E%0A%3C%21--%20horizon%20glow%20--%3E%0A%3Cellipse%20cx=%22200%22%20cy=%22340%22%20rx=%22220%22%20ry=%22100%22%20fill=%22url%28%23glow%29%22/%3E%0A%3C%21--%20mountain%20silhouettes%20--%3E%0A%3Cpolygon%20points=%220%2C440%2070%2C290%20145%2C370%20210%2C265%20275%2C330%20340%2C210%20400%2C270%20400%2C600%200%2C600%22%20fill=%22%23080506%22/%3E%0A%3C%21--%20foreground%20ridge%20--%3E%0A%3Cpolygon%20points=%220%2C520%20100%2C460%20200%2C490%20300%2C450%20400%2C480%20400%2C600%200%2C600%22%20fill=%22%23050304%22/%3E%0A%3C%21--%20lone%20tree%20left%20--%3E%0A%3Crect%20x=%2244%22%20y=%22390%22%20width=%227%22%20height=%2255%22%20fill=%22%23060404%22/%3E%0A%3Cpolygon%20points=%2247%2C355%2028%2C398%2066%2C398%22%20fill=%22%23060404%22/%3E%0A%3Cpolygon%20points=%2247%2C338%2031%2C372%2063%2C372%22%20fill=%22%23060404%22/%3E%0A%3C%21--%20tree%20right%20--%3E%0A%3Crect%20x=%22348%22%20y=%22405%22%20width=%226%22%20height=%2245%22%20fill=%22%23060404%22/%3E%0A%3Cpolygon%20points=%22351%2C374%20334%2C413%20368%2C413%22%20fill=%22%23060404%22/%3E%0A%3C%21--%20road/path%20--%3E%0A%3Cpath%20d=%22M185%2C600%20Q200%2C440%20200%2C310%22%20stroke=%22%231a0e08%22%20stroke-width=%2222%22%20fill=%22none%22%20stroke-opacity=%220.45%22/%3E%0A%3Cpath%20d=%22M185%2C600%20Q200%2C440%20200%2C310%22%20stroke=%22%232a1808%22%20stroke-width=%224%22%20fill=%22none%22%20stroke-opacity=%220.25%22%20stroke-dasharray=%2222%2C14%22/%3E%0A%3C%21--%20cinematic%20black%20bars%20--%3E%0A%3Crect%20width=%22400%22%20height=%2268%22%20fill=%22black%22%20fill-opacity=%220.88%22/%3E%0A%3Crect%20y=%22532%22%20width=%22400%22%20height=%2268%22%20fill=%22black%22%20fill-opacity=%220.88%22/%3E%0A%3C/svg%3E");background-size:cover;background-position:center;}

    .c-strat{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20300%22%3E%0A%3Cdefs%3E%0A%20%20%3ClinearGradient%20id=%22sb%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%22100%25%22%20y2=%22100%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%2308101e%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%2304080f%22/%3E%3C/linearGradient%3E%0A%20%20%3ClinearGradient%20id=%22wf%22%20x1=%220%25%22%20y1=%220%25%22%20x2=%220%25%22%20y2=%22100%25%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%23cc1a1a%22%20stop-opacity=%220.75%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23cc1a1a%22%20stop-opacity=%220.06%22/%3E%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Crect%20width=%22400%22%20height=%22300%22%20fill=%22url%28%23sb%29%22/%3E%0A%3C%21--%20grid%20lines%20--%3E%0A%3Cline%20x1=%220%22%20y1=%2275%22%20x2=%22400%22%20y2=%2275%22%20stroke=%22%230f2030%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%220%22%20y1=%22150%22%20x2=%22400%22%20y2=%22150%22%20stroke=%22%230f2030%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%220%22%20y1=%22225%22%20x2=%22400%22%20y2=%22225%22%20stroke=%22%230f2030%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%2280%22%20y1=%220%22%20x2=%2280%22%20y2=%22300%22%20stroke=%22%230f2030%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%22160%22%20y1=%220%22%20x2=%22160%22%20y2=%22300%22%20stroke=%22%230f2030%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%22240%22%20y1=%220%22%20x2=%22240%22%20y2=%22300%22%20stroke=%22%230f2030%22%20stroke-width=%221%22/%3E%0A%3Cline%20x1=%22320%22%20y1=%220%22%20x2=%22320%22%20y2=%22300%22%20stroke=%22%230f2030%22%20stroke-width=%221%22/%3E%0A%3C%21--%20area%20fill%20under%20curve%20--%3E%0A%3Cpath%20d=%22M0%2C210%20C30%2C195%2050%2C200%2080%2C165%20S120%2C125%20160%2C102%20S190%2C45%20215%2C72%20S245%2C88%20270%2C65%20S305%2C122%20330%2C105%20S370%2C118%20400%2C108%20L400%2C300%20L0%2C300Z%22%20fill=%22url%28%23wf%29%22/%3E%0A%3C%21--%20main%20red%20line%20--%3E%0A%3Cpath%20d=%22M0%2C210%20C30%2C195%2050%2C200%2080%2C165%20S120%2C125%20160%2C102%20S190%2C45%20215%2C72%20S245%2C88%20270%2C65%20S305%2C122%20330%2C105%20S370%2C118%20400%2C108%22%20stroke=%22%23cc1a1a%22%20stroke-width=%222.5%22%20fill=%22none%22/%3E%0A%3C%21--%20secondary%20blue%20line%20--%3E%0A%3Cpath%20d=%22M0%2C228%20C40%2C218%2070%2C240%20110%2C218%20S155%2C198%20190%2C208%20S228%2C216%20256%2C190%20S295%2C158%20326%2C175%20S368%2C145%20400%2C155%22%20stroke=%22%234a90c4%22%20stroke-width=%221.5%22%20fill=%22none%22%20stroke-opacity=%220.55%22/%3E%0A%3C%21--%20data%20points%20on%20red%20line%20--%3E%0A%3Ccircle%20cx=%22160%22%20cy=%22102%22%20r=%224.5%22%20fill=%22%23cc1a1a%22%20stroke=%22%23ff4444%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22215%22%20cy=%2272%22%20r=%224.5%22%20fill=%22%23cc1a1a%22%20stroke=%22%23ff4444%22%20stroke-width=%221.5%22/%3E%0A%3Ccircle%20cx=%22270%22%20cy=%2265%22%20r=%224.5%22%20fill=%22%23cc1a1a%22%20stroke=%22%23ff4444%22%20stroke-width=%221.5%22/%3E%0A%3C%21--%20vertical%20marker%20line%20at%20peak%20--%3E%0A%3Cline%20x1=%22270%22%20y1=%2220%22%20x2=%22270%22%20y2=%22280%22%20stroke=%22white%22%20stroke-width=%221%22%20stroke-opacity=%220.12%22%20stroke-dasharray=%224%2C5%22/%3E%0A%3C%21--%20tooltip%20bubble%20--%3E%0A%3Crect%20x=%22256%22%20y=%2232%22%20width=%2258%22%20height=%2222%22%20rx=%224%22%20fill=%22%23cc1a1a%22/%3E%0A%3Ctext%20x=%22285%22%20y=%2247%22%20text-anchor=%22middle%22%20font-family=%22monospace%22%20font-size=%2210%22%20fill=%22white%22%20font-weight=%22bold%22%3E+68%25%3C/text%3E%0A%3C%21--%20Y%20axis%20labels%20--%3E%0A%3Ctext%20x=%2272%22%20y=%2278%22%20text-anchor=%22end%22%20font-family=%22monospace%22%20font-size=%228%22%20fill=%22%232a4a6a%22%3E100%3C/text%3E%0A%3Ctext%20x=%2272%22%20y=%22153%22%20text-anchor=%22end%22%20font-family=%22monospace%22%20font-size=%228%22%20fill=%22%232a4a6a%22%3E50%3C/text%3E%0A%3Ctext%20x=%2272%22%20y=%22228%22%20text-anchor=%22end%22%20font-family=%22monospace%22%20font-size=%228%22%20fill=%22%232a4a6a%22%3E0%3C/text%3E%0A%3C/svg%3E");background-size:cover;background-position:center;}

/* ══════════════════════════════════════
   PRICING SECTION — exact screenshot style
   Dark bg, 3 cards: left/right dark, center red+elevated
══════════════════════════════════════ */
.pricing{background:#0d0d0d;color:#fff;padding:100px 0}
.pricing-hd{text-align:center;margin-bottom:68px}
.pricing-hd .eyebrow{justify-content:center;display:flex;margin-bottom:14px}
.pricing-cards{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
    max-width:1100px;margin:0 auto;
    align-items:stretch;
}

/* Base card */
.pcard{
    background:#141414;
    padding:48px 40px 40px;
    display:flex;flex-direction:column;
    position:relative;
    border:1px solid #2a2a2a;
}
.pcard:first-child{border-radius:12px 0 0 12px}
.pcard:last-child{border-radius:0 12px 12px 0}

/* Middle featured card — RED, elevated */
.pcard.featured{
    background:var(--red);
    border-color:var(--red);
    z-index:2;
    margin:-16px 0;
    padding-top:64px;
    border-radius:12px;
    box-shadow:0 32px 80px rgba(204,26,26,.4);
}

/* MOST POPULAR badge */
.pcard-badge{
    position:absolute;top:0;right:0;
    background:var(--red);
    font-size:10px;font-weight:800;
    letter-spacing:.2em;text-transform:uppercase;
    color:#fff;padding:8px 16px;
    border-radius:0 11px 0 8px;
}
.pcard.featured .pcard-badge{
    background:#a81515;
    border-radius:0 11px 0 8px;
}

/* Plan tier label */
.pcard-tier{
    font-size:11px;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,255,255,.4);
    margin-bottom:18px;
}
.pcard.featured .pcard-tier{color:rgba(255,255,255,.7)}

/* Plan name */
.pcard-name{
    font-family:'Barlow Condensed',sans-serif;
    font-size:clamp(36px,4vw,54px);
    font-weight:900;
    letter-spacing:-.01em;
    color:#fff;
    line-height:1;
    margin-bottom:18px;
    text-transform:uppercase;
}
.pcard.featured .pcard-name{color:#fff}

/* Plan description */
.pcard-desc{
    font-size:14px;
    color:rgba(255,255,255,.5);
    line-height:1.6;
    margin-bottom:32px;
    min-height:48px;
}
.pcard.featured .pcard-desc{color:rgba(255,255,255,.8)}

/* Feature list */
.pcard-features{
    display:flex;flex-direction:column;
    flex:1;margin-bottom:36px;
}
.pcard-feat{
    display:flex;align-items:center;gap:12px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-size:14px;color:rgba(255,255,255,.65);
    line-height:1.4;
}
.pcard.featured .pcard-feat{
    border-bottom:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.9);
}
.pcard-feat:last-child{border-bottom:none}
.pf-arrow{
    color:rgba(255,255,255,.35);
    font-size:10px;flex-shrink:0;
    font-weight:900;
}
.pcard.featured .pf-arrow{color:rgba(255,255,255,.7)}

/* CTA button */
.pcard-btn{
    display:block;
    text-align:center;
    padding:16px 24px;
    font-size:13px;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;
    border:1.5px solid rgba(255,255,255,.2);
    color:#fff;
    background:transparent;
    border-radius:4px;
    cursor:pointer;
    transition:all .2s;
    margin-top:auto;
}
.pcard-btn:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.pcard.featured .pcard-btn{
    background:#0a0a0a;
    border-color:#0a0a0a;
    color:#fff;
}
.pcard.featured .pcard-btn:hover{background:#1a1a1a;border-color:#1a1a1a}

@media(max-width:1024px){
    .pricing-cards{grid-template-columns:1fr;gap:16px;max-width:480px}
    .pcard:first-child,.pcard:last-child{border-radius:12px}
    .pcard.featured{margin:0;padding-top:64px}
}

/* ══════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════ */
.contact{background:#0a0a0a;color:#fff;padding:96px 0;border-top:1px solid #1c1c1c}
.contact-in{
    display:grid;grid-template-columns:1fr 1fr;
    gap:80px;align-items:start;
}
.contact-l .eyebrow{margin-bottom:16px}
.contact-h2{
    font-family:'Barlow Condensed',sans-serif;
    font-size:clamp(36px,4vw,60px);font-weight:900;
    letter-spacing:-.01em;line-height:1.0;
    color:#fff;margin-bottom:20px;
}
.contact-p{
    font-size:15px;color:rgba(255,255,255,.5);
    line-height:1.75;margin-bottom:32px;
}
.contact-email{
    display:inline-flex;align-items:center;gap:10px;
    font-size:17px;font-weight:700;
    color:#fff;
    border-bottom:2px solid var(--red);
    padding-bottom:4px;
    transition:color .2s;
}
.contact-email:hover{color:var(--red)}
.contact-email-icon{font-size:20px}

/* Contact form */
.contact-form{
    background:#141414;
    border:1px solid #2a2a2a;
    border-radius:12px;
    padding:36px 32px;
}
.cf-row{margin-bottom:18px}
.cf-label{
    display:block;
    font-size:10.5px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.35);
    margin-bottom:8px;
}
.cf-input,.cf-textarea{
    width:100%;
    background:#1c1c1c;
    border:1px solid #2e2e2e;
    border-radius:6px;
    padding:13px 16px;
    font-size:14px;
    color:#fff;
    font-family:'Inter',sans-serif;
    transition:border-color .2s;
    outline:none;
}
.cf-input:focus,.cf-textarea:focus{border-color:var(--red)}
.cf-input::placeholder,.cf-textarea::placeholder{color:rgba(255,255,255,.2)}
.cf-textarea{height:110px;resize:vertical}
.cf-submit{
    width:100%;
    padding:15px;
    background:var(--red);
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:13px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;
    cursor:pointer;
    transition:background .2s,transform .2s;
    margin-top:4px;
}
.cf-submit:hover{background:var(--red2);transform:translateY(-1px)}

@media(max-width:1024px){
    .contact-in{grid-template-columns:1fr}
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1024px){
    .container{padding:0 24px}
    nav{padding:0 24px}
    .hero{grid-template-columns:1fr;min-height:auto}
    .hero-l{padding:80px 24px 56px}
    .hero-r{display:none}
    .growth-in,.steps-head,.partner-in,.local-in,.roi-in,.testi-slide{grid-template-columns:1fr}
    .step{grid-template-columns:56px 1fr}
    .step-icon{display:none}
    .svc-item .svc-body{grid-template-columns:1fr}
    .port-grid{grid-template-columns:1fr}
    .pc.tall{grid-row:span 1}
    .why-grid{grid-template-columns:1fr 1fr}
    .wi:nth-child(3n){border-right:1px solid rgba(255,255,255,.09)}
    .wi:nth-child(2n){border-right:none}
    .ts-stats{flex-direction:row}
    .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
    .blog-grid{grid-template-columns:1fr}
    .pc-in{flex-direction:column;align-items:flex-start}
    .nav-ul{display:none}
    .pricing-cards{grid-template-columns:1fr;gap:16px;max-width:480px;margin:0 auto}
    .pcard.featured{margin:0;padding-top:64px}
    .pcard:first-child,.pcard:last-child{border-radius:12px}
    .contact-in{grid-template-columns:1fr}
}


/* ══════════════════════════════════════
   FOUNDERS
══════════════════════════════════════ */
.founders{
    background:var(--dark);
    padding:100px 0;
}
.founders-hd{
    text-align:center;
    margin-bottom:64px;
}
.founders-sub{
    font-size:16px;
    color:rgba(255,255,255,.45);
    margin-top:14px;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    text-align: left;
}
.founders-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    max-width:960px;
    margin:0 auto;
}
.founder-card{
    display:flex;
    flex-direction:column;
    gap:0;
    overflow:hidden;
    border-radius:4px;
    background:var(--dark2);
    transition:transform .3s;
}
.founder-card:hover{
    transform:translateY(-6px);
}
.founder-img-wrap{
    position:relative;
    width:100%;
    aspect-ratio:3/4;
    overflow:hidden;
}
.founder-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    filter:grayscale(100%);
    transition:filter .4s, transform .4s;
    display:block;
}
.founder-card:hover .founder-img{
    filter:grayscale(60%);
    transform:scale(1.03);
}
.founder-img-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(10,10,10,.85) 0%, transparent 50%);
    pointer-events:none;
}
.founder-info{
    padding:20px 24px 24px;
    border-top:2px solid var(--red);
}
.founder-name{
    font-family:'Barlow Condensed',sans-serif;
    font-size:26px;
    font-weight:700;
    color:var(--white);
    letter-spacing:.02em;
    text-transform:uppercase;
}
.founder-role{
    font-size:12px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--red);
    margin-top:4px;
}

@media(max-width:768px){
    .founders-grid{
        grid-template-columns:1fr;
        max-width:380px;
    }
}