/* ============================================================
   PeakPage SEO — PREMIUM stylesheet (light theme)
   White/gray bg · black + orange · Montserrat/Inter/Space Mono
   ============================================================ */
:root{
  --white:#FFFFFF; --gray-50:#F6F6F3; --gray-100:#ECEDE9;
  --ink:#141518; --body:#3A3B3F; --muted:#6E7176;
  --orange:#FD4600; --orange-deep:#E03E00; --line:rgba(20,21,24,.10);
  --footer-bg:#17181C; --footer-line:rgba(255,255,255,.10); --footer-muted:#B7BABE;
  --font-display:"Montserrat",sans-serif; --font-body:"Inter",sans-serif; --font-mono:"Space Mono",monospace;
  --maxw:1200px; --radius:16px; --header-h:80px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--white);color:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}

/* reveal — uses translate (separate channel) so it NEVER blocks hover transforms */
.reveal{opacity:0;translate:0 26px;transition:opacity .6s ease, translate .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;translate:0 0}

.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:700;display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"▲";font-size:.7rem}

.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:.95rem;padding:.8rem 1.4rem;border-radius:100px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease, background .18s ease, box-shadow .18s ease;line-height:1;white-space:nowrap}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 26px -14px rgba(253,70,0,.7)}
.btn-primary:hover{background:var(--orange-deep);transform:translateY(-2px)}
.btn-lg{padding:1rem 1.7rem;font-size:1.02rem}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

/* section shells */
.section{padding:clamp(4rem,8vw,7rem) 0}
.section--white{background:var(--white)}
.section--gray{background:var(--gray-50)}
.section--dark{background:var(--footer-bg);color:#fff}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.sec-head{max-width:58ch;margin-bottom:3rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(1.9rem,3.7vw,2.8rem)}
.sec-head p{margin-top:1rem;color:var(--muted);font-size:1.08rem}
.section--dark .sec-head p{color:rgba(245,245,245,.72)}
h2 .hl{color:var(--orange)}
.head-ico{display:inline-flex;width:.86em;height:.86em;color:var(--orange);vertical-align:-.05em}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--orange)}
.link-arrow .arw{transition:transform .18s}.link-arrow:hover .arw{transform:translateX(4px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.tagline-mono{font-family:var(--font-mono);color:var(--orange);letter-spacing:.04em}

/* ============================================================ HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);transition:box-shadow .25s ease, background .25s ease}
@media (min-width:861px){.site-header{backdrop-filter:blur(12px);background:rgba(255,255,255,.82)}}
.site-header.scrolled{box-shadow:0 8px 30px -18px rgba(20,21,24,.18);background:rgba(255,255,255,.97)}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand-logo{height:52px;width:auto}
.main-nav{display:flex;align-items:center;gap:2rem}
.nav-list{display:flex;align-items:center;gap:1.9rem;list-style:none}
.nav-list>li{position:relative}
.nav-list a{font-size:.95rem;font-weight:500;color:var(--body);transition:color .15s;padding:.4rem 0}
.nav-list a:hover,.nav-list a.active{color:var(--ink)}
.nav-list a.active{position:relative}
.nav-list a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--orange);border-radius:2px}
.caret{font-size:.7rem;color:var(--muted)}
.has-dropdown .dropdown{position:absolute;top:calc(100% + 14px);left:-16px;min-width:250px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:.5rem;list-style:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease, visibility .2s;box-shadow:0 24px 50px -20px rgba(20,21,24,.22)}
.has-dropdown .dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li a{display:block;padding:.7rem .9rem;border-radius:8px;font-weight:500;color:var(--body)}
.dropdown li a:hover{background:rgba(253,70,0,.10);color:var(--orange)}
.header-actions{display:flex;align-items:center;gap:1rem}
.nav-cta-mobile{display:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{width:26px;height:2px;background:var(--ink);display:block;transition:.25s}
.nav-close{display:none;position:absolute;top:1.2rem;right:1.4rem;background:none;border:0;color:var(--ink);font-size:2rem;cursor:pointer;line-height:1}

/* ============================================================ HERO */
.hero{position:relative;background:var(--gray-50);overflow:hidden;padding:clamp(2rem,4vw,3.4rem) 0 clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero-copy{max-width:600px}
.hero-title{font-size:clamp(2rem,4vw,3.15rem);font-weight:900;margin:1rem 0 0;letter-spacing:-.03em;color:var(--ink);line-height:1.06}
.hero-title .hl{color:var(--orange)}
.hero-lead{margin-top:1.3rem;font-size:1.08rem;color:var(--body);max-width:50ch}
.hero-cta{margin-top:2rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.hero-call{display:flex;align-items:center;gap:.7rem}
.call-ico{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid rgba(253,70,0,.45);display:flex;align-items:center;justify-content:center;background:#fff}
.call-text{display:flex;flex-direction:column;line-height:1.2}
.call-text small{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.call-text b{font-family:var(--font-mono);font-size:1rem;color:var(--ink)}
.trust-strip{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.trust-strip.ts-row1{margin-top:1.8rem}.trust-strip.ts-row2{margin-top:.9rem;gap:5rem;justify-content:center}
.trust-strip li{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.01em;color:var(--body);border:1px solid var(--line);border-radius:100px;padding:.45rem .85rem;background:var(--white);white-space:nowrap}
.trust-strip li b{color:var(--orange);font-weight:700}
.hero-visual{position:relative;justify-self:end;width:100%;max-width:430px}
.hero-img-box{position:relative;z-index:2;border-radius:22px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);box-shadow:0 44px 80px -34px rgba(20,21,24,.4)}
.hero-img-box img{width:100%;height:100%;object-fit:cover}
.hv-accent{position:absolute;z-index:1;right:-22px;bottom:-22px;width:72%;height:66%;background:var(--orange);border-radius:22px;opacity:.16}
.hv-badge{position:absolute;z-index:3;left:-26px;bottom:34px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:.9rem 1.15rem;display:flex;align-items:center;gap:.7rem;box-shadow:0 22px 44px -18px rgba(20,21,24,.3)}
.hv-badge b{font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--orange);line-height:1}
.hv-badge span{font-size:.8rem;color:var(--body);line-height:1.2}

/* ============================================================ ABOUT */
.about2-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:3.4rem;align-items:center}
.about2-visual{position:relative;max-width:560px}
.about2-img{position:relative;z-index:2;border-radius:22px;overflow:hidden;aspect-ratio:5/4;border:1px solid var(--line);box-shadow:0 44px 80px -34px rgba(20,21,24,.38)}
.about2-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.about2-visual:hover .about2-img img{transform:scale(1.05)}
.a2-accent{position:absolute;z-index:1;left:-22px;top:-22px;width:60%;height:60%;background:var(--orange);opacity:.14;border-radius:22px}
.a2-badge{position:absolute;z-index:3;right:-22px;bottom:26px;background:var(--footer-bg);color:#fff;border-radius:14px;padding:.85rem 1.1rem;display:flex;align-items:center;gap:.7rem;box-shadow:0 22px 44px -18px rgba(20,21,24,.4)}
.a2-badge-ico{width:34px;height:34px;flex:none;border-radius:9px;background:var(--orange);display:flex;align-items:center;justify-content:center}
.a2-badge span{font-size:.78rem;line-height:1.25;color:#fff}
.about2-copy h2{margin-top:1rem;font-size:clamp(1.9rem,3.6vw,2.6rem)}
.about2-copy>p{margin-top:1.1rem;color:var(--body);max-width:58ch}
.vm-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.vm-box{background:var(--gray-50);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:10px;padding:1.1rem 1.2rem}
.vm-box h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:.4rem}
.vm-box p{font-size:.92rem;color:var(--body)}
.about2-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}

/* ============================================================ SERVICES (premium) */
.services-premium{position:relative;background:var(--gray-50);padding:clamp(4rem,8vw,7rem) 0}
.sp-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sp-glow{position:absolute;top:-120px;right:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle, rgba(253,70,0,.10), transparent 62%)}
.sp-contour{position:absolute;left:-40px;bottom:-40px;width:360px;opacity:.6}
.sp-head{position:relative;z-index:1;text-align:center;max-width:640px;margin:0 auto 3.4rem}
.sp-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:1rem}
.sp-eyebrow svg{width:15px;height:15px}
.sp-head h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;color:var(--ink);font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.1;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.2em;align-items:center}
.sp-head h2 .head-ico{display:inline-flex;width:.9em;height:.9em;color:var(--orange);transform:translateY(.06em)}
.sp-head p{margin-top:1rem;color:var(--muted);font-size:1.08rem}
.sp-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start}
.sp-grid>.sp-card:nth-child(3n+2){margin-top:3.4rem}
.sp-card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:2rem 1.9rem 1.9rem;display:flex;flex-direction:column;min-height:300px;z-index:1;will-change:transform;box-shadow:0 2px 4px rgba(20,21,24,.03);transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease}
.sp-card:hover{transform:translateY(-18px) scale(1.07);box-shadow:0 60px 110px -22px rgba(20,21,24,.5),0 0 0 2px rgba(253,70,0,.35);border-color:transparent;z-index:5}
.sp-card.dark:hover{box-shadow:0 64px 120px -26px rgba(0,0,0,.8),0 0 0 2px rgba(253,70,0,.55);border-color:transparent}
.sp-num{position:absolute;top:1rem;right:1.3rem;font-family:var(--font-display);font-weight:900;font-size:3.4rem;line-height:1;color:rgba(20,21,24,.05);transition:color .35s ease;pointer-events:none}
.sp-card:hover .sp-num{color:rgba(253,70,0,.12)}
.sp-ico{width:60px;height:60px;border-radius:16px;background:rgba(253,70,0,.10);display:flex;align-items:center;justify-content:center;color:var(--orange);margin-bottom:1.3rem;transition:background .35s ease, color .35s ease, transform .35s ease}
.sp-ico svg{width:28px;height:28px}
.sp-card:hover .sp-ico{background:var(--orange);color:#fff;transform:rotate(-6deg) scale(1.06)}
.sp-card h3{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--ink);margin-bottom:.55rem;letter-spacing:-.01em}
.sp-card p{color:var(--muted);font-size:.96rem;line-height:1.55;flex:1}
.sp-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 1.2rem}
.sp-tags span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.03em;color:var(--body);border:1px solid var(--line);border-radius:100px;padding:.28rem .6rem;background:var(--gray-50)}
.sp-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--orange);font-family:var(--font-display);font-weight:700;font-size:.9rem;margin-top:auto}
.sp-link .arw{transition:transform .25s ease}.sp-card:hover .sp-link .arw{transform:translateX(5px)}
.sp-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sp-card:hover .sp-bar{transform:scaleX(0)}
.sp-card.dark{background:linear-gradient(160deg,#2C2D31,#17181C);border-color:rgba(255,255,255,.10);padding-top:2.6rem;box-shadow:0 40px 70px -34px rgba(0,0,0,.55)}
.sp-card.dark h3{color:#fff}.sp-card.dark p{color:rgba(245,245,245,.72)}
.sp-card.dark .sp-num{color:rgba(255,255,255,.06)}.sp-card.dark:hover .sp-num{color:rgba(253,70,0,.18)}
.sp-card.dark .sp-tags span{color:rgba(245,245,245,.8);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.sp-card.dark .sp-ico{background:rgba(253,70,0,.18)}
.sp-flag{position:absolute;top:1.15rem;left:1.9rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--orange);z-index:2}

/* ============================================================ WHY CHOOSE (pcard) */
.pcard{position:relative;overflow:hidden;background:var(--gray-50);border:1px solid var(--line);border-radius:18px;padding:1.9rem;z-index:1;will-change:transform;transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease, border-color .3s ease}
.pcard:hover{transform:translateY(-14px) scale(1.04);box-shadow:0 48px 90px -28px rgba(20,21,24,.4),0 0 0 2px rgba(253,70,0,.3);border-color:transparent;z-index:5}
.pcard-n{position:absolute;top:1.2rem;right:1.4rem;font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:var(--orange);opacity:.5}
.pcard-ico{width:52px;height:52px;border-radius:14px;background:rgba(253,70,0,.10);display:flex;align-items:center;justify-content:center;color:var(--orange);margin-bottom:1.1rem;transition:background .3s, color .3s, transform .3s}
.pcard-ico svg{width:24px;height:24px}
.pcard:hover .pcard-ico{background:var(--orange);color:#fff;transform:rotate(-6deg) scale(1.05)}
.pcard h3{font-size:1.15rem;margin-bottom:.5rem}
.pcard p{color:var(--muted);font-size:.95rem}
.pcard-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard-bar{transform:scaleX(1)}

/* ============================================================ AEO band */
.aeo2{position:relative;overflow:hidden}
.aeo2-glow{position:absolute;top:-100px;left:-60px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(253,70,0,.14),transparent 62%);pointer-events:none}
.aeo-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.aeo-copy h2{margin:1rem 0 1.1rem;font-size:clamp(1.8rem,3.4vw,2.5rem)}
.aeo-copy p{color:rgba(245,245,245,.82);margin-bottom:1rem;max-width:52ch}
.aeo-copy strong{color:#fff}.aeo-copy .muted-light{color:rgba(245,245,245,.6)}
.aeo-copy .btn{margin-top:.8rem}
.chat-demo{background:#22232a;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.4rem;box-shadow:0 40px 80px -44px rgba(0,0,0,.6)}
.chat-q{font-family:var(--font-mono);font-size:.82rem;color:var(--footer-muted);padding:.85rem 1rem;background:rgba(255,255,255,.05);border-radius:12px;margin-bottom:.9rem}
.chat-a{font-size:.96rem;color:rgba(245,245,245,.92);padding:.95rem 1rem;background:rgba(253,70,0,.12);border:1px solid rgba(253,70,0,.3);border-radius:12px;line-height:1.55}
.chat-a b{color:var(--orange)}
.chat-a .cursor{display:inline-block;width:7px;height:1em;background:var(--orange);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ============================================================ PROCESS */
.steps2{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.steps2-line{position:absolute;top:29px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px);z-index:0}
.step2{position:relative;z-index:1;text-align:center;padding:0 .4rem;transition:transform .3s ease}
.step2:hover{transform:translateY(-6px)}
.step2-n{width:58px;height:58px;margin:0 auto 1rem;border-radius:50%;background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.3rem;border:2px solid var(--line);transition:background .3s, color .3s, border-color .3s, box-shadow .3s}
.step2:hover .step2-n{border-color:var(--orange);color:var(--orange);box-shadow:0 12px 26px -12px rgba(253,70,0,.5)}
.step2.summit .step2-n{background:var(--orange);color:#fff;border-color:var(--orange)}
.step2 h3{font-size:1.05rem;margin-bottom:.4rem}
.step2 p{color:var(--muted);font-size:.9rem}

/* ============================================================ INDUSTRIES (dark photo grid) */
.ind2-grid{gap:1.4rem}
.ind2-card{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:#1f2025;display:block;z-index:1;will-change:transform;transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease, border-color .3s}
.ind2-card:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 50px 90px -28px rgba(0,0,0,.7),0 0 0 2px rgba(253,70,0,.5);border-color:transparent;z-index:5}
.ind2-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.ind2-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ind2-card:hover .ind2-img img{transform:scale(1.1)}
.ind2-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,16,19,.85),rgba(15,16,19,.15) 60%,transparent)}
.ind2-body{position:relative;padding:1.3rem 1.4rem 1.5rem;margin-top:-3.2rem;z-index:2}
.ind2-body h3{color:#fff;font-size:1.18rem;margin-bottom:.35rem}
.ind2-body p{color:rgba(245,245,245,.72);font-size:.92rem}
.ind2-arw{position:absolute;right:1.3rem;bottom:1.5rem;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .3s, transform .3s}
.ind2-card:hover .ind2-arw{opacity:1;transform:translateX(0)}

/* ============================================================
   WHAT TO EXPECT — PREMIUM USP / FLIP SECTION
============================================================ */

.expect-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
  gap:3.5rem;
  align-items:stretch;
}


/* ============================================================
   LEFT SIDE
============================================================ */

.expect-left{
  min-width:0;

  display:flex;
  flex-direction:column;
  justify-content:center;
}


.expect-left h2{
  margin-top:1rem;

  font-size:
    clamp(1.9rem,3.5vw,2.65rem);

  line-height:1.05;

  letter-spacing:-.025em;
}


.expect-intro{
  margin-top:1.1rem;

  max-width:650px;

  color:var(--body);

  font-size:1rem;

  line-height:1.7;
}


/* ============================================================
   LEFT COMMITMENTS
============================================================ */

.expect-left .commitments{
  display:grid;

  gap:1rem;

  margin-top:2rem;

  max-width:650px;
}


.expect-left .commit{
  background:var(--white);

  border:1px solid var(--line);

  border-radius:14px;

  padding:1.35rem 1.5rem;

  transition:
    box-shadow .3s ease,
    border-color .3s ease;
}


/*
   IMPORTANT:
   The commitment cards do NOT move.
   No translateX / translateY here.
*/

.expect-left .commit:hover{
  box-shadow:
    0 20px 40px -26px
    rgba(20,21,24,.28);

  border-color:
    rgba(253,70,0,.22);
}


.expect-left .commit .ck{
  font-family:var(--font-mono);

  font-size:.7rem;

  letter-spacing:.1em;

  text-transform:uppercase;

  color:var(--orange);

  font-weight:700;
}


.expect-left .commit p{
  margin-top:.4rem;

  color:var(--body);

  font-size:.96rem;

  line-height:1.55;
}


/* ============================================================
   EVERY MONTH + AFTER EVERY REPORT
============================================================ */

.commit--report{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    1px
    minmax(0,1fr);

  gap:1.25rem;

  align-items:center;
}


.commit-divider{
  width:1px;

  align-self:stretch;

  min-height:70px;

  background:var(--line);
}


.commit-followup{
  padding-left:.05rem;
}


.commit-followup p{
  max-width:330px;
}


/* ============================================================
   RIGHT USP COLUMN
============================================================ */

.expect-usp-column{
  height:100%;

  min-width:0;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:1rem;
}


/* ============================================================
   FLIP CARD — FIXED POSITION
============================================================ */

.expect-flip-card{
  position:relative;

  width:min(100%,360px);

  aspect-ratio:1 / 1;

  flex:0 0 auto;

  perspective:1500px;

  cursor:pointer;

  outline:none;

  /*
    CRITICAL:
    The CARD itself never transforms.
    Only .expect-flip-inner rotates.
  */
}


/* ============================================================
   INNER ROTATION LAYER
============================================================ */

.expect-flip-inner{
  position:relative;

  width:100%;
  height:100%;

  transform-style:preserve-3d;

  transition:
    transform .72s
    cubic-bezier(.22,.61,.36,1);

  will-change:transform;
}


/* ONLY THIS ELEMENT ROTATES */

.expect-flip-card.is-flipped
.expect-flip-inner{
  transform:rotateY(180deg);
}


/* ============================================================
   CARD FACES
============================================================ */

.expect-flip-face{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  overflow:hidden;

  border-radius:17px;

  backface-visibility:hidden;

  -webkit-backface-visibility:hidden;

  transform-style:preserve-3d;
}


/* ============================================================
   FRONT IMAGE
============================================================ */

.expect-flip-front{
  background:#141518;

  border:
    1px solid
    rgba(20,21,24,.12);

  box-shadow:
    0 24px 50px -28px
    rgba(20,21,24,.5);
}


.expect-flip-front img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:.52;

  filter:
    grayscale(15%)
    contrast(1.08);

  /*
    NO MOVEMENT.
    Image remains fixed while mouse moves.
  */

  transform:none;
}


/* ============================================================
   IMAGE OVERLAY
============================================================ */

.expect-image-overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      145deg,
      rgba(12,13,16,.24),
      rgba(12,13,16,.82)
    );

  pointer-events:none;
}


/* ============================================================
   FRONT CONTENT
============================================================ */

.expect-front-content{
  position:absolute;

  inset:0;

  z-index:3;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:1.5rem;
}


.expect-flip-number{
  position:absolute;

  top:1rem;
  left:1rem;

  color:var(--orange);

  font-family:var(--font-mono);

  font-size:.62rem;

  font-weight:700;

  letter-spacing:.12em;
}


/* ============================================================
   REAL 3D TYPOGRAPHY
============================================================ */

.expect-3d-title{
  position:relative;

  width:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  font-family:var(--font-display);

  font-size:
    clamp(1.55rem,2.65vw,2.15rem);

  line-height:.91;

  letter-spacing:-.045em;

  text-transform:uppercase;

  font-weight:900;

  transform:
    translateZ(45px);

  transform-style:preserve-3d;
}


/*
   Every depth layer occupies exactly
   the same position.
*/

.expect-3d-title > span{
  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  pointer-events:none;
}


/* Deepest layer */

.expect-3d-depth.depth-3{
  color:#261b1a;

  transform:
    translate3d(7px,7px,-4px);
}


/* Middle layer */

.expect-3d-depth.depth-2{
  color:#6b2818;

  transform:
    translate3d(4.5px,4.5px,-2px);
}


/* Near layer */

.expect-3d-depth.depth-1{
  color:#a93618;

  transform:
    translate3d(2px,2px,0);
}


/* Main visible typography */

.expect-3d-main{
  position:relative !important;

  color:#fff;

  transform:
    translate3d(0,0,5px);
}


/* Orange word */

.expect-3d-title b{
  display:block;

  color:var(--orange);

  font-weight:900;
}


/* Orange depth layers */

.expect-3d-depth.depth-3 b{
  color:#241511;
}

.expect-3d-depth.depth-2 b{
  color:#742712;
}

.expect-3d-depth.depth-1 b{
  color:#bd3b16;
}


/* Longer title */

.expect-3d-title--long{
  font-size:
    clamp(1.25rem,2.15vw,1.8rem);

  line-height:.94;
}


/* ============================================================
   FRONT HINT
============================================================ */

.expect-flip-hint{
  position:absolute;

  bottom:1rem;

  display:flex;

  align-items:center;

  gap:.45rem;

  color:
    rgba(255,255,255,.72);

  font-family:var(--font-mono);

  font-size:.56rem;

  letter-spacing:.08em;

  text-transform:uppercase;
}


.expect-flip-hint b{
  display:inline-flex;

  width:24px;
  height:24px;

  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(253,70,0,.8);

  border-radius:50%;

  color:var(--orange);

  font-size:.78rem;

  font-weight:400;
}


/* ============================================================
   BACK FACE
============================================================ */

.expect-flip-back{
  background:#141518;

  border:
    1px solid
    rgba(253,70,0,.38);

  transform:rotateY(180deg);

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.025),

    0 25px 60px -25px
    rgba(20,21,24,.5);
}


/* ============================================================
   BACK 3D DEPTH WORD
============================================================ */

.expect-back-depth{
  position:absolute;

  right:-.3rem;

  bottom:-.45rem;

  color:
    rgba(253,70,0,.055);

  font-family:var(--font-display);

  font-size:
    clamp(4rem,7vw,6.5rem);

  line-height:.8;

  font-weight:900;

  letter-spacing:-.07em;

  transform:
    translateZ(1px)
    rotate(-8deg);

  pointer-events:none;

  user-select:none;
}


/* ============================================================
   BACK CONTENT
============================================================ */

.expect-back-content{
  position:relative;

  z-index:4;

  height:100%;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:1.5rem;

  transform:
    translateZ(35px);

  transform-style:preserve-3d;
}


.expect-back-eyebrow{
  margin-bottom:.65rem;

  color:var(--orange);

  font-family:var(--font-mono);

  font-size:.6rem;

  line-height:1.2;

  letter-spacing:.13em;

  text-transform:uppercase;

  font-weight:700;
}


.expect-back-content h3{
  margin:0;

  max-width:95%;

  color:#fff;

  font-family:var(--font-display);

  font-size:
    clamp(1.35rem,2.25vw,1.85rem);

  line-height:1.02;

  letter-spacing:-.035em;

  text-transform:uppercase;

  font-weight:900;

  /*
     Layered shadow = 3D typography.
  */

  text-shadow:
    1px 1px 0 #6e2413,
    2px 2px 0 #8f2d15,
    3px 3px 0 rgba(253,70,0,.18),
    0 10px 25px rgba(0,0,0,.45);
}


.expect-back-content p{
  margin:.8rem 0 0;

  max-width:95%;

  color:
    rgba(255,255,255,.74);

  font-size:.75rem;

  line-height:1.55;
}


.expect-back-content p strong{
  color:#fff;

  font-weight:700;
}


.expect-back-tags{
  display:block;

  margin-top:auto;

  padding-top:1rem;

  color:var(--orange);

  font-family:var(--font-mono);

  font-size:.52rem;

  line-height:1.4;

  letter-spacing:.08em;

  font-weight:700;
}


/* ============================================================
   KEYBOARD ACCESS
============================================================ */

.expect-flip-card:focus-visible{
  box-shadow:
    0 0 0 3px
    rgba(253,70,0,.35);

  border-radius:20px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width:900px){

  .expect-grid{
    grid-template-columns:1fr;

    gap:2.5rem;
  }


  .expect-left{
    max-width:760px;
  }


  .expect-usp-column{
    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    justify-items:center;

    align-items:center;

    gap:1rem;

    height:auto;
  }


  .expect-flip-card{
    width:100%;

    max-width:360px;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:600px){

  .expect-grid{
    gap:2rem;
  }


  .expect-left h2{
    font-size:2rem;
  }


  .expect-intro{
    font-size:.94rem;

    line-height:1.65;
  }


  .expect-left .commitments{
    margin-top:1.5rem;
  }


  .commit--report{
    grid-template-columns:1fr;

    gap:.8rem;
  }


  .commit-divider{
    width:100%;

    height:1px;

    min-height:1px;

    align-self:auto;
  }


  .expect-usp-column{
    display:flex;

    flex-direction:column;

    gap:1rem;

    height:auto;
  }


  .expect-flip-card{
    width:100%;

    max-width:400px;
  }


  .expect-3d-title{
    font-size:1.85rem;
  }


  .expect-3d-title--long{
    font-size:1.55rem;
  }


  .expect-back-content{
    padding:1.4rem;
  }


  .expect-back-content h3{
    font-size:1.55rem;
  }


  .expect-back-content p{
    font-size:.76rem;
  }

}

/* ============================================================ VIDEO */
.video-frame{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;background:linear-gradient(135deg,#2b2c30,#17181c);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border:1px solid var(--line);overflow:hidden}
.video-play{width:80px;height:80px;border-radius:50%;background:var(--orange);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 36px -14px rgba(253,70,0,.7);transition:transform .2s;position:relative}
.video-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(253,70,0,.5);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.video-play:hover{transform:scale(1.06)}
.video-play svg{width:30px;height:30px;margin-left:4px}
.video-note{font-family:var(--font-mono);font-size:.8rem;color:var(--footer-muted);letter-spacing:.05em}

/* ============================================================ MARQUEE */
.marquee{background:var(--footer-bg);overflow:hidden;padding:1.3rem 0;border-top:1px solid var(--footer-line);border-bottom:1px solid var(--footer-line)}
.marquee-track{display:inline-flex;align-items:center;gap:1.6rem;white-space:nowrap;animation:scroll-x 26s linear infinite;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;text-transform:uppercase;letter-spacing:-.01em}
.marquee-track i{color:var(--orange);font-style:normal;font-size:.8rem}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================ FAQ */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.3rem 0;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--ink);transition:color .2s}
.faq-q:hover{color:var(--orange)}
.faq-q .ic{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--orange);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:transform .25s;line-height:1}
.faq-q[aria-expanded="true"] .ic{transform:rotate(45deg);background:var(--orange);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 1.3rem;color:var(--muted);font-size:1rem;max-width:64ch}
/* Reduce space between FAQ and Client Reviews */
#faq{
  padding-bottom:3rem;
}

/* ============================================================
   TRUSTED BRANDS
============================================================ */

.trusted-brands{
  background:#141518;
  padding:2.8rem 0;
  overflow:hidden;
}

.trusted-brands-wrap{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 1.5rem;
}


/* ================= LABEL ================= */

.trusted-brands-label{
  text-align:center;

  font-family:"Space Mono",monospace;

  font-size:.7rem;

  letter-spacing:.14em;

  text-transform:uppercase;

  color:#FD4600;

  margin-bottom:1rem;
}


/* ================= WHITE PILL ================= */

.trusted-logo-pill{

  width:100%;

  background:#FFFFFF;

  border-radius:999px;

  padding:1.1rem 0;

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 40px rgba(0,0,0,.22);

  overflow:hidden;
}


/* ================= VIEWPORT ================= */

.trusted-logo-viewport{
  width:100%;
  overflow:hidden;
}


/* ================= TRACK ================= */

.trusted-logo-track{

  display:flex;

  align-items:center;

  width:max-content;

  gap:0;

  will-change:transform;

  animation:
    trustedLogoScroll 30s linear infinite;
}


/* ================= LOGO ================= */

.trusted-logo{

  width:210px;

  height:78px;

  flex:0 0 210px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:0 2rem;

  position:relative;
}


/* Vertical divider */

.trusted-logo:not(:last-child)::after{

  content:"";

  position:absolute;

  right:0;

  top:14px;

  width:1px;

  height:50px;

  background:rgba(20,21,24,.14);
}


/* Logo image */

.trusted-logo img{

  display:block;

  max-width:130px;

  max-height:42px;

  width:auto;

  height:auto;

  object-fit:contain;

  opacity:.72;

  filter:grayscale(100%);

  transition:
    opacity .25s ease,
    filter .25s ease,
    transform .25s ease;
}


/* Hover */

.trusted-logo:hover img{

  opacity:1;

  filter:grayscale(0%);

  transform:scale(1.04);
}


/* ================= CONTINUOUS MOTION ================= */

@keyframes trustedLogoScroll{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}


/* ================= PAUSE ON HOVER ================= */

.trusted-logo-pill:hover .trusted-logo-track{

  animation-play-state:paused;

}


/* ================= TABLET ================= */

@media (max-width:900px){

  .trusted-brands{
    padding:2.4rem 0;
  }

  .trusted-logo{
    width:180px;
    flex-basis:180px;
  }

  .trusted-logo img{
    max-width:115px;
  }

}


/* ================= MOBILE ================= */

@media (max-width:600px){

  .trusted-brands{
    padding:2rem 0;
  }

  .trusted-brands-wrap{
    padding:0 1rem;
  }

  .trusted-brands-label{
    font-size:.65rem;
    margin-bottom:.8rem;
  }

  .trusted-logo-pill{
    border-radius:28px;
    padding:.8rem 0;
  }

  .trusted-logo{
    width:150px;
    height:65px;
    flex-basis:150px;
    padding:0 1rem;
  }

  .trusted-logo:not(:last-child)::after{
    top:12px;
    height:40px;
  }

  .trusted-logo img{
    max-width:100px;
    max-height:34px;
  }

}

/* ============================================================
   CLIENT REVIEWS
============================================================ */

.client-reviews{
  background:#F6F6F3;
  padding:3rem 0 5rem;
  overflow:hidden;
}

.reviews-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem;
}


/* ================= TOP ================= */

.reviews-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:3rem;
  margin-bottom:3rem;
}

.reviews-eyebrow{
  display:block;
  font-family:"Space Mono",monospace;
  font-size:.78rem;
  letter-spacing:.08em;
  color:#FD4600;
  margin-bottom:.9rem;
}

.reviews-title h2{
  margin:0;
  font-family:"Montserrat",sans-serif;
  font-size:clamp(2rem,4vw,2.65rem);
  line-height:1.2;
  letter-spacing:-.025em;
  color:#141518;
  font-weight:800;
}

.reviews-title h2 span{
  color:#FD4600;
}


/* ================= TRUSTPILOT ================= */

.trustpilot-box{
  flex:none;
  width:390px;
  min-height:108px;

  border:1px solid rgba(20,21,24,.10);
  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:1rem;
  padding:1rem 1.3rem;

  background:#FFFFFF;

  box-shadow:0 2px 8px rgba(20,21,24,.025);
}

.trust-rating strong{
  font-family:"Montserrat",sans-serif;
  font-size:3.4rem;
  line-height:1;
  color:#141518;
  font-weight:800;
}

.trust-stars{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.trust-star-row{
  color:#FD4600;
  font-size:1.05rem;
  letter-spacing:.05em;
  line-height:1;
}

.trust-stars span{
  font-size:.72rem;
  color:#6E7176;
  white-space:nowrap;
}

.trustpilot-brand{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-left:.5rem;
}

.trustpilot-star{
  color:#FD4600;
  font-size:2rem;
  line-height:1;
}

.trustpilot-brand div:last-child{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  color:#141518;
}

.trustpilot-brand strong{
  font-size:.78rem;
  font-weight:700;
}

.trustpilot-brand span{
  font-size:.72rem;
  color:#6E7176;
}


/* ================= CAROUSEL ================= */

.reviews-carousel{
  width:100%;
  overflow:hidden;
}

.reviews-viewport{
  width:100%;
  overflow:hidden;
}

.reviews-track{
  display:flex;
  gap:1.4rem;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}


/* ================= REVIEW CARD ================= */

.review-card{
  flex:0 0 calc((100% - 1.4rem) / 2);
  min-width:0;

  background:#FFFFFF;

  border:1px solid rgba(20,21,24,.10);
  border-radius:17px;

  padding:2rem 2.1rem 1.8rem;

  min-height:284px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  box-shadow:0 2px 6px rgba(20,21,24,.025);
}


/* ================= REVIEW TOP ================= */

.review-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.35rem;
}

.review-avatar{
  width:43px;
  height:43px;
  border-radius:50%;

  background:rgba(253,70,0,.08);
  color:#FD4600;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:"Montserrat",sans-serif;
  font-size:.7rem;
  font-weight:800;

  border:1px solid rgba(253,70,0,.18);
}

.review-stars{
  color:#FD4600;
  font-size:1rem;
  letter-spacing:.08em;
}


/* ================= REVIEW TEXT ================= */

.review-text{
  margin:0;
  color:#3A3B3F;

  font-family:"Inter",sans-serif;
  font-size:1rem;
  line-height:1.65;

  flex:1;
}


/* ================= REVIEW BOTTOM ================= */

.review-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  margin-top:1.7rem;
}

.review-person{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}

/* NAME = BLACK */

.review-person span{
  font-family:"Inter",sans-serif;
  font-size:.72rem;
  color:#141518;
  font-weight:700;
  text-transform:uppercase;
}

/* POSITION = ORANGE */

.review-person strong{
  font-family:"Montserrat",sans-serif;
  font-size:1.02rem;
  color:#FD4600;
  font-weight:800;
}


/* ================= QUOTE ================= */

.review-quote{
  width:49px;
  height:49px;

  border-radius:9px;

  background:#141518;
  color:#FFFFFF;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:Georgia,serif;
  font-size:2.4rem;
  font-weight:700;
  line-height:1;

  padding-bottom:.35rem;

  transition:
    background .2s ease,
    transform .2s ease;
}

.review-card:hover .review-quote{
  background:#FD4600;
  transform:translateY(-2px);
}


/* ================= DOTS ================= */

.reviews-dots{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:.45rem;
  margin-top:2.5rem;
}

.review-dot{
  width:11px;
  height:11px;

  padding:0;
  border:0;
  border-radius:50%;

  background:#E2E2DF;

  cursor:pointer;

  transition:
    transform .2s ease,
    background .2s ease;
}

.review-dot.active{
  background:#141518;
  transform:scale(1.05);
}

.review-dot:hover{
  background:#FD4600;
  transform:scale(1.15);
}


/* ================= TABLET ================= */

@media (max-width:900px){

  .reviews-head{
    flex-direction:column;
  }

  .trustpilot-box{
    width:100%;
    max-width:390px;
  }

}


/* ================= MOBILE ================= */

@media (max-width:600px){

  .client-reviews{
    padding:4rem 0;
  }

  .reviews-head{
    gap:2rem;
    margin-bottom:2rem;
  }

  .reviews-title h2 br{
    display:none;
  }

  .trustpilot-box{
    width:100%;
    min-height:96px;
    gap:.7rem;
    padding:.8rem;
  }

  .trust-rating strong{
    font-size:2.6rem;
  }

  .trustpilot-brand{
    margin-left:0;
  }

  .review-card{
    flex:0 0 100%;
    min-height:300px;
    padding:1.6rem 1.4rem;
  }

  .reviews-track{
    gap:1rem;
  }

}

/* ============================================================ FINAL CTA */
.cta-band{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding-top:3rem;
}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(253,70,0,.16),transparent 60%);pointer-events:none}
.cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.cta-inner h2{font-size:clamp(2rem,4.4vw,3rem);margin:1rem 0}
.cta-inner p{color:rgba(245,245,245,.8);font-size:1.1rem;margin-bottom:1.8rem}
.cta-row{display:flex;gap:1.2rem;justify-content:center;align-items:center;flex-wrap:wrap}
.cta-call{font-family:var(--font-mono);color:var(--footer-muted);font-size:.9rem}.cta-call b{color:#fff}

/* ============================================================ BLOG */
.post2{position:relative;z-index:1;will-change:transform;transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease}
.post2:hover{transform:translateY(-12px) scale(1.02);z-index:5}
.post2 a{display:block;background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 2px 6px rgba(20,21,24,.04);transition:box-shadow .4s ease, border-color .3s}
.post2:hover a{box-shadow:0 48px 90px -30px rgba(20,21,24,.35);border-color:rgba(253,70,0,.4)}
.post2-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.post2-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.post2:hover .post2-img img{transform:scale(1.08)}
.post2-cat{position:absolute;left:1rem;bottom:1rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--orange);padding:.3rem .7rem;border-radius:100px}
.post2-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.8rem}
.post2-body h3{font-size:1.1rem;line-height:1.3}
.post2-soon{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
/* ============================================================
   BLOG CAROUSEL
============================================================ */

.blog-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
}

.blog-viewport{
  width:100%;
  overflow:hidden;
  min-width:0;
}

.blog-track{
  display:flex;
  gap:1.4rem;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}

.blog-track .post2{
  flex:0 0 calc((100% - 2.8rem) / 3);
  min-width:0;
}

.blog-arrow{
  flex:none;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.25rem;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
  z-index:3;
}

.blog-arrow:hover{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
  transform:scale(1.08);
  box-shadow:0 12px 28px -14px rgba(253,70,0,.7);
}

.blog-arrow span{
  line-height:1;
}

/* Tablet — 2 cards */
@media (max-width:900px){
  .blog-track .post2{
    flex:0 0 calc((100% - 1.4rem) / 2);
  }
}

/* Mobile — 1 full-width card; arrows overlay the image edges so they
   don't squeeze the card (that was making it render ~236px instead of full width) */
@media (max-width:600px){
  .blog-carousel{
    gap:0;
    position:relative;
  }

  .blog-viewport{
    width:100%;
  }

  .blog-track .post2{
    flex:0 0 100%;
  }

  .blog-arrow{
    position:absolute;
    top:32%;
    transform:translateY(-50%);
    z-index:6;
    width:40px;
    height:40px;
    font-size:1.05rem;
    background:rgba(255,255,255,.92);
    box-shadow:0 6px 18px -8px rgba(20,21,24,.5);
  }

  .blog-prev{ left:6px; }
  .blog-next{ right:6px; }
}

/* ============================================================ FOOTER */
.site-footer{background:var(--footer-bg);color:var(--footer-muted);padding-top:4rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.6fr;gap:2.5rem;padding-bottom:1.5rem}
.footer-logo{height:100px;width:180px;margin-bottom:.2rem}
.footer-brand p{font-size:.92rem;max-width:36ch;line-height:1.6}
.socials{display:flex;gap:.7rem;margin-top:1.3rem}
.socials a{width:38px;height:38px;border-radius:9px;border:1px solid var(--footer-line);display:flex;align-items:center;justify-content:center;color:var(--footer-muted);transition:.18s}
.socials a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.footer-col h4{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:1.1rem}
.footer-col ul{list-style:none}
.footer-col>ul>li{margin-bottom:.65rem;font-size:.92rem}
.footer-col a{transition:color .15s}.footer-col a:hover{color:var(--orange)}
.footer-contact ul li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.5}
.fc-ico{flex:none;margin-top:.15rem}
.footer-bottom{border-top:1px solid var(--footer-line);padding:1.5rem 0}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;font-size:.82rem}

/* ============================================================ RESPONSIVE */
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}.footer-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .about2-grid,.aeo-grid,.expect-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero-visual{justify-self:center;max-width:400px;margin:0 auto}
  .sp-grid{grid-template-columns:repeat(2,1fr)}
  .sp-grid>.sp-card:nth-child(3n+2){margin-top:0}
  .steps2{grid-template-columns:repeat(2,1fr);gap:2rem}.steps2-line{display:none}
  .about2-visual{max-width:480px;margin:0 auto}
}
@media (max-width:860px){
  .burger{display:flex}.nav-cta{display:none}
  .main-nav{position:fixed;top:0;right:0;bottom:0;width:min(86%,360px);background:var(--white);flex-direction:column;align-items:flex-start;gap:0;padding:5rem 1.8rem 2rem;z-index:1001;transform:translateX(100%);transition:transform .3s ease;border-left:1px solid var(--line);overflow-y:auto;box-shadow:-20px 0 50px -20px rgba(20,21,24,.2)}
  .main-nav.open{transform:translateX(0)}.nav-close{display:block}
  .nav-list{flex-direction:column;align-items:flex-start;gap:.2rem;width:100%}
  .nav-list>li{width:100%}
  .nav-list a{display:block;padding:.9rem 0;font-size:1.05rem;border-bottom:1px solid var(--line);width:100%;color:var(--ink)}
  .nav-list a.active::after{display:none}
  .has-dropdown .dropdown{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:none;box-shadow:none;padding:0 0 .5rem 1rem;min-width:0;display:none}
  .has-dropdown.open-sub .dropdown{display:block}
  .dropdown li a{font-size:.95rem;padding:.6rem 0;border-bottom:none;color:var(--muted)}
  .nav-cta-mobile{display:inline-flex;margin-top:1.5rem}
  .nav-backdrop{position:fixed;inset:0;background:rgba(20,21,24,.5);z-index:90;opacity:0;visibility:hidden;transition:.3s}
  .nav-backdrop.show{opacity:1;visibility:visible}
}
@media (max-width:600px){
  .grid-3,.sp-grid,.steps2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start}
  .vm-row{grid-template-columns:1fr}
  .marquee-track{font-size:1.2rem}
  .cta-row{flex-direction:column}
  .hero-cta{gap:1.1rem}
  .hv-badge{left:10px;bottom:14px;padding:.7rem .9rem}.hv-badge b{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;translate:none}
}
/* ============================================================
   PEAKPAGE LEAD FORM
============================================================ */


/* ================= OVERLAY ================= */

.pp-form-overlay{

  position:fixed;

  inset:0;

  z-index:99999;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:1.5rem;

  background:
    rgba(20,21,24,.82);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .3s ease,
    visibility .3s ease;

  overflow-y:auto;
}


.pp-form-overlay.is-open{

  opacity:1;

  visibility:visible;
}


/* ================= MODAL ================= */

.pp-form-modal{

  position:relative;

  width:min(680px,100%);

  max-height:calc(100vh - 3rem);

  overflow-y:auto;

  background:#FFFFFF;

  border-radius:24px;

  border:1px solid rgba(20,21,24,.10);

  box-shadow:
    0 40px 100px rgba(0,0,0,.35);

  padding:2.2rem;

  transform:
    translateY(25px)
    scale(.97);

  transition:
    transform .35s cubic-bezier(.2,.7,.2,1);

  scrollbar-width:thin;
}


.pp-form-overlay.is-open .pp-form-modal{

  transform:
    translateY(0)
    scale(1);
}


/* ================= CLOSE ================= */

.pp-form-close{

  position:absolute;

  top:1rem;
  right:1rem;

  width:40px;
  height:40px;

  border-radius:50%;

  border:1px solid rgba(20,21,24,.12);

  background:#FFFFFF;

  color:#141518;

  font-size:1.7rem;

  line-height:1;

  cursor:pointer;

  display:flex;

  align-items:center;
  justify-content:center;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.pp-form-close:hover{

  background:#FD4600;

  color:#FFFFFF;

  border-color:#FD4600;

  transform:rotate(90deg);
}


/* ================= HEADER ================= */

.pp-form-header{

  padding-right:3rem;

  margin-bottom:1.7rem;
}


.pp-form-eyebrow{

  display:block;

  margin-bottom:.7rem;

  font-family:"Space Mono",monospace;

  font-size:.72rem;

  letter-spacing:.14em;

  color:#FD4600;

  text-transform:uppercase;
}


.pp-form-header h2{

  margin:0;

  font-family:"Montserrat",sans-serif;

  font-size:clamp(1.8rem,4vw,2.5rem);

  line-height:1.08;

  letter-spacing:-.025em;

  color:#141518;

  font-weight:800;
}


.pp-form-header h2 span{

  color:#FD4600;
}


.pp-form-header p{

  margin:.8rem 0 0;

  max-width:55ch;

  font-family:"Inter",sans-serif;

  color:#6E7176;

  font-size:.95rem;

  line-height:1.6;
}


/* ================= FORM ================= */

.pp-lead-form{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:1rem;
}


.pp-field{

  display:flex;

  flex-direction:column;

  gap:.45rem;
}


.pp-field-full{

  grid-column:1 / -1;
}


.pp-field label{

  font-family:"Space Mono",monospace;

  font-size:.68rem;

  letter-spacing:.05em;

  text-transform:uppercase;

  color:#141518;

  font-weight:700;
}


.pp-field label span{

  color:#FD4600;
}


.pp-field input,
.pp-field select,
.pp-field textarea{

  width:100%;

  box-sizing:border-box;

  border:1px solid rgba(20,21,24,.14);

  border-radius:10px;

  background:#F6F6F3;

  color:#141518;

  font-family:"Inter",sans-serif;

  font-size:.92rem;

  padding:.82rem .9rem;

  outline:none;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.pp-field input::placeholder,
.pp-field textarea::placeholder{

  color:#9A9CA0;
}


.pp-field input:focus,
.pp-field select:focus,
.pp-field textarea:focus{

  background:#FFFFFF;

  border-color:#FD4600;

  box-shadow:
    0 0 0 3px rgba(253,70,0,.10);
}


.pp-field textarea{

  min-height:105px;

  resize:vertical;

  line-height:1.5;
}


.pp-field select{

  cursor:pointer;

  appearance:auto;
}


/* ================= INVALID ================= */

.pp-field input.pp-invalid,
.pp-field select.pp-invalid,
.pp-field textarea.pp-invalid{

  border-color:#FD4600;

  box-shadow:
    0 0 0 3px rgba(253,70,0,.08);
}


/* ================= SUBMIT ================= */

.pp-submit{

  grid-column:1 / -1;

  width:100%;

  border:0;

  border-radius:999px;

  padding:1rem 1.3rem;

  background:#FD4600;

  color:#FFFFFF;

  font-family:"Montserrat",sans-serif;

  font-size:.95rem;

  font-weight:800;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:.6rem;

  box-shadow:
    0 12px 30px rgba(253,70,0,.25);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.pp-submit:hover{

  background:#E03E00;

  transform:translateY(-2px);

  box-shadow:
    0 18px 36px rgba(253,70,0,.30);
}


.pp-submit:active{

  transform:translateY(0);
}


.pp-submit:disabled{

  opacity:.7;

  cursor:not-allowed;

  transform:none;
}


.pp-submit-arrow{

  font-size:1.2rem;

  transition:
    transform .2s ease;
}


.pp-submit:hover .pp-submit-arrow{

  transform:translateX(4px);
}


/* ================= STATUS ================= */

.pp-form-status{

  grid-column:1 / -1;

  min-height:20px;

  text-align:center;

  font-family:"Inter",sans-serif;

  font-size:.82rem;

  color:#6E7176;
}


.pp-form-status.error{

  color:#FD4600;
}


.pp-form-status.success{

  color:#16845B;
}


/* ================= NOTE ================= */

.pp-form-note{

  grid-column:1 / -1;

  margin:0;

  text-align:center;

  font-family:"Space Mono",monospace;

  font-size:.62rem;

  line-height:1.5;

  color:#8A8C90;
}


/* ================= HONEYPOT ================= */

.pp-hp{

  position:absolute !important;

  left:-9999px !important;

  width:1px !important;

  height:1px !important;

  overflow:hidden !important;
}


/* ================= SUCCESS ================= */

.pp-form-success{

  text-align:center;

  padding:2rem .5rem .5rem;
}


.pp-success-icon{

  width:64px;
  height:64px;

  margin:0 auto 1rem;

  border-radius:50%;

  background:rgba(253,70,0,.10);

  border:1px solid rgba(253,70,0,.18);

  color:#FD4600;

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:2rem;

  font-weight:800;
}


.pp-form-success h3{

  margin:0;

  font-family:"Montserrat",sans-serif;

  font-size:1.6rem;

  color:#141518;
}


.pp-form-success p{

  max-width:45ch;

  margin:.7rem auto 1.5rem;

  color:#6E7176;

  font-family:"Inter",sans-serif;

  line-height:1.6;
}


/* ================= WHATSAPP ================= */

.pp-whatsapp-btn{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:.6rem;

  width:100%;

  box-sizing:border-box;

  padding:.9rem 1.2rem;

  border-radius:999px;

  background:#141518;

  color:#FD4600;

  font-family:"Montserrat",sans-serif;

  font-size:.9rem;

  font-weight:800;

  text-decoration:none;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.pp-whatsapp-btn:hover{

  background:#FD4600;

  color:#FFFFFF;

  transform:translateY(-2px);
}


.pp-success-close{

  margin-top:1rem;

  border:0;

  background:none;

  color:#6E7176;

  font-family:"Space Mono",monospace;

  font-size:.7rem;

  cursor:pointer;
}


.pp-success-close:hover{

  color:#FD4600;
}


/* ================= MOBILE ================= */

@media (max-width:600px){

  .pp-form-overlay{

    padding:.75rem;

    align-items:flex-start;

    padding-top:1rem;
  }


  .pp-form-modal{

    max-height:
      calc(100vh - 2rem);

    border-radius:20px;

    padding:1.5rem;

  }


  .pp-form-header{

    padding-right:2.5rem;

    margin-bottom:1.4rem;
  }


  .pp-form-header h2{

    font-size:1.8rem;
  }


  .pp-lead-form{

    grid-template-columns:1fr;

    gap:.9rem;
  }


  .pp-field-full{

    grid-column:auto;
  }


  .pp-submit{

    grid-column:auto;
  }


  .pp-form-status{

    grid-column:auto;
  }


  .pp-form-note{

    grid-column:auto;
  }

}
/* ============================================================
   MOBILE HERO — CLEAN ALIGNMENT
============================================================ */

@media (max-width:600px){

  /* Keep the hero content centered and stable */
  .hero{
    padding-top:1.5rem;
    padding-bottom:2.8rem;
  }

  .hero-inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2rem;
  }

  .hero-copy{
    width:100%;
    max-width:none;
    text-align:left;
  }


  /* -------------------------
     HERO TEXT
  ------------------------- */

  .hero-title{
    margin-top:.8rem;
    font-size:clamp(2rem,9vw,2.7rem);
    line-height:1.04;
  }

  .hero-lead{
    margin-top:1rem;
    max-width:none;
    font-size:1rem;
    line-height:1.65;
  }


  /* -------------------------
     MAIN CTA
  ------------------------- */

  .hero-cta{
    width:100%;

    display:flex;
    flex-direction:column;

    align-items:stretch;

    gap:1.15rem;

    margin-top:1.5rem;
  }


  .hero-cta > .btn-lg{
    width:100%;

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:.9rem 1.2rem;

    border-radius:999px;
  }


  /* -------------------------
     CALL US BLOCK
  ------------------------- */

  .hero-call{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:.8rem;

    padding:.15rem 0;
  }


  .call-ico{
    width:48px;
    height:48px;

    flex:0 0 48px;
  }


  .call-text{
    min-width:0;
  }


  .call-text small{
    font-size:.64rem;
    letter-spacing:.1em;
  }


  .call-text b{
    font-size:.98rem;

    white-space:nowrap;
  }


  /* -------------------------
     13+ YEARS TRUST PILL
  ------------------------- */

  .trust-strip{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:nowrap;

    gap:0;
  }


  .trust-strip.ts-row1{
    margin-top:.45rem;
  }


  .trust-strip.ts-row1 li{

    width:auto;

    max-width:100%;

    text-align:center;

    padding:.55rem 1rem;
  }


  /* -------------------------
     SECOND TRUST ROW
  ------------------------- */

  .trust-strip.ts-row2{

    margin-top:.65rem;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:.9rem;
  }


  .trust-strip.ts-row2 li{

    width:max-content;

    max-width:100%;

    text-align:center;

    padding:.55rem 1rem;
  }


  /* -------------------------
     HERO IMAGE
  ------------------------- */

  .hero-visual{

    width:100%;

    max-width:400px;

    margin:0 auto;

    justify-self:center;
  }


  .hero-img-box{

    width:100%;

    border-radius:20px;
  }

}
/* ============================================================
   MOBILE / TOUCH — scroll-triggered motion (no hover on touch)
   Cards "pop" as they scroll into the centre of the screen.
   ============================================================ */
@media (hover:none){
  .reveal{translate:0 34px}                 /* a touch more travel so reveals read on mobile */

    .sp-card,.pcard,.ind2-card,.post2,.review-card,.commit,.step2,.checklist-row,.milestone,.def-card,.platform-chip,.trend-mini,.price-card,.disc-card,.gallery-item{
    transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease, border-color .4s ease, background .4s ease, color .4s ease;
  }
  /* services */
  .sp-card.in-view{transform:translateY(-10px) scale(1.05);box-shadow:0 40px 80px -26px rgba(20,21,24,.45),0 0 0 2px rgba(253,70,0,.4);border-color:transparent;z-index:4}
  .sp-card.in-view .sp-ico{background:var(--orange);color:#fff;transform:rotate(-6deg) scale(1.05)}
  .sp-card.in-view .sp-bar{transform:scaleX(1)}
  .sp-card.in-view .sp-num{color:rgba(253,70,0,.14)}
  /* why-choose */
  .pcard.in-view{transform:translateY(-8px) scale(1.035);box-shadow:0 36px 70px -30px rgba(20,21,24,.4),0 0 0 2px rgba(253,70,0,.35);border-color:transparent;z-index:4}
  .pcard.in-view .pcard-ico{background:var(--orange);color:#fff;transform:rotate(-6deg) scale(1.05)}
  .pcard.in-view .pcard-bar{transform:scaleX(1)}
  /* industries */
  .ind2-card.in-view{transform:translateY(-8px) scale(1.03);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 2px rgba(253,70,0,.5);border-color:transparent;z-index:4}
  .ind2-card.in-view .ind2-img img{transform:scale(1.08)}
  .ind2-card.in-view .ind2-arw{opacity:1;transform:translateX(0)}
  /* blog */
  .post2.in-view{transform:translateY(-8px) scale(1.02);z-index:4}
  .post2.in-view a{box-shadow:0 40px 80px -32px rgba(20,21,24,.4);border-color:rgba(253,70,0,.4)}
  .post2.in-view .post2-img img{transform:scale(1.06)}
  /* reviews + commitments + process */
  .review-card.in-view{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(20,21,24,.3)}
  .commit.in-view{transform:translateX(6px);box-shadow:0 20px 40px -26px rgba(20,21,24,.3)}
    .step2.in-view .step2-n{border-color:var(--orange);color:var(--orange);box-shadow:0 12px 26px -12px rgba(253,70,0,.5)}
  /* seo page: checklist + milestones */
  .checklist-row.in-view{transform:translateX(6px);background:var(--gray-50)}
  .checklist-row.in-view .cl-check{background:var(--orange);color:#fff}
    .milestone.in-view{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(20,21,24,.3)}
  /* aeo/geo page */
  .def-card.in-view{transform:translateY(-8px);box-shadow:0 34px 60px -30px rgba(20,21,24,.32)}
    .platform-chip.in-view{border-color:var(--orange);color:var(--orange)}
  /* social media page */
  .trend-mini.in-view{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(20,21,24,.3)}
    .price-card.in-view{transform:translateY(-10px);box-shadow:0 44px 80px -30px rgba(20,21,24,.4)}
  .disc-card.in-view{transform:translateY(-10px);box-shadow:0 40px 80px -30px rgba(20,21,24,.4);border-color:transparent}
  .gallery-item.in-view img{transform:scale(1.07)}
  .gallery-item.in-view .g-overlay{opacity:1}
}
/* ============================================================
   INNER PAGES (about, contact, services, blog, industries)
   Reuses the homepage system; only a few helpers added.
   ============================================================ */
.breadcrumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:var(--muted);margin-bottom:1rem;display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--muted);transition:color .15s}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb .sep{opacity:.45}
.breadcrumb .cur{color:var(--orange)}
.page-hero .hero-title{font-size:clamp(2rem,4vw,3rem)}
.prose p{color:var(--body);font-size:1.05rem;line-height:1.7;margin-bottom:1.1rem;max-width:70ch}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}
.lead-2col{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.lead-2col h2{font-size:clamp(1.7rem,3.3vw,2.4rem)}
@media (max-width:900px){.lead-2col{grid-template-columns:1fr;gap:1.4rem}}

/* ============================================================
   SEO PAGE — unique components (not on homepage)
   ============================================================ */

/* ---- SERP mockup: "where you are today" ---- */
.serp-mock{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.4rem;box-shadow:0 30px 60px -34px rgba(20,21,24,.3);max-width:460px}
.serp-mock-bar{display:flex;align-items:center;gap:.6rem;background:var(--gray-50);border:1px solid var(--line);border-radius:100px;padding:.6rem 1rem;margin-bottom:1.1rem;color:var(--muted);font-size:.85rem}
.serp-mock-bar svg{width:16px;height:16px;flex:none;color:var(--muted)}
.serp-list{list-style:none;display:flex;flex-direction:column;gap:.15rem}
.serp-row{display:flex;align-items:center;gap:.8rem;padding:.6rem .5rem;border-radius:10px}
.serp-rank{font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:var(--muted);width:1.4rem;flex:none}
.serp-row b{display:block;font-size:.92rem;color:var(--ink);font-weight:700}
.serp-row small{color:var(--muted);font-size:.78rem}
.serp-row--gap{border-top:1px dashed var(--line);margin-top:.3rem;padding-top:.9rem}
.serp-row--you{background:rgba(253,70,0,.06);opacity:.55}
.serp-row--you .serp-rank{color:var(--orange)}
.serp-mock-caption{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.serp-mock-caption b{color:var(--ink)}
.serp-tag-illustrative{display:inline-block;margin-bottom:.9rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- Audit checklist rows (replaces generic card grid) ---- */
.checklist{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white)}
.checklist-row{display:flex;align-items:flex-start;gap:1.1rem;padding:1.4rem 1.6rem;border-bottom:1px solid var(--line);transition:transform .3s ease, background .3s ease}
.checklist-row:last-child{border-bottom:0}
@media (hover:hover){
  .checklist-row:hover{transform:translateX(6px);background:var(--gray-50)}
  .checklist-row:hover .cl-check{background:var(--orange);color:#fff}}
.cl-check{width:38px;height:38px;flex:none;border-radius:50%;background:rgba(253,70,0,.1);color:var(--orange);display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.cl-check svg{width:18px;height:18px}
.cl-body{flex:1}
.cl-body h3{font-size:1.05rem;margin-bottom:.3rem}
.cl-body p{color:var(--muted);font-size:.92rem}
.cl-tag{flex:none;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:.3rem .7rem;align-self:flex-start;margin-top:.15rem;white-space:nowrap}

/* ---- Local map-pack mockup ---- */
.map-mock{background:var(--gray-50);border:1px solid var(--line);border-radius:18px;padding:1.4rem;max-width:440px}
.map-mock-head{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.map-mock-head svg{width:15px;height:15px;color:var(--orange)}
.map-row{display:flex;align-items:center;gap:.8rem;padding:.7rem;border-radius:10px;background:var(--white);border:1px solid var(--line);margin-bottom:.6rem}
.map-row:last-child{margin-bottom:0}
.map-pin{width:30px;height:30px;flex:none;border-radius:50%;background:var(--gray-100);color:var(--muted);display:flex;align-items:center;justify-content:center}
.map-pin svg{width:15px;height:15px}
.map-row--you{border-color:rgba(253,70,0,.4);box-shadow:0 0 0 2px rgba(253,70,0,.12)}
.map-row--you .map-pin{background:var(--orange);color:#fff}
.map-row b{display:block;font-size:.9rem;color:var(--ink)}
.map-row small{display:block;color:var(--muted);font-size:.76rem;margin-top:.1rem}

/* ---- Milestone timeline (honest expectations) ---- */
.milestone-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative}
.milestone{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.7rem;transition:transform .3s ease, box-shadow .3s ease}
@media (hover:hover){
  .milestone:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(20,21,24,.3)}
}
.ms-n{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(253,70,0,.35);border-radius:100px;padding:.3rem .8rem;margin-bottom:.9rem}
.milestone h3{font-size:1.12rem;margin-bottom:.5rem}
.milestone p{color:var(--muted);font-size:.92rem}
.milestone--peak{background:var(--footer-bg);border-color:rgba(255,255,255,.1)}
.milestone--peak h3{color:#fff}
.milestone--peak p{color:rgba(245,245,245,.72)}
.milestone--peak .ms-n{color:var(--orange);border-color:rgba(253,70,0,.5)}

/* ---- AEO/GEO cross-link teaser (dark, reuses chat-q/chat-a look) ---- */
.aeo-teaser{background:var(--footer-bg);border-radius:20px;padding:2.2rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;position:relative;overflow:hidden}
.aeo-teaser::before{content:"";position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(253,70,0,.16),transparent 65%);pointer-events:none}
.aeo-teaser-copy{position:relative;z-index:1}
.aeo-teaser-copy h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.7rem);margin:.8rem 0}
.aeo-teaser-copy p{color:rgba(245,245,245,.75);font-size:.96rem;margin-bottom:1rem}
.aeo-teaser-copy .link-arrow{color:var(--orange)}
.aeo-teaser-visual{position:relative;z-index:1}

/* ---- Related services cross-links ---- */
.related-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;justify-content:center;margin-top:2.4rem}
.related-row>span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rel-chip{font-family:var(--font-mono);font-size:.78rem;color:var(--body);border:1px solid var(--line);border-radius:100px;padding:.5rem 1rem;transition:.2s;background:var(--white)}
.rel-chip:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}

@media (max-width:760px){
  .milestone-row{grid-template-columns:1fr}
  .aeo-teaser{grid-template-columns:1fr}
  .checklist-row{flex-wrap:wrap}
  .cl-tag{flex-basis:100%;margin:.9rem 0 0 calc(38px + 1.1rem);align-self:flex-start}
}


/* ============================================================
   AEO & GEO PAGE — unique components
   ============================================================ */

/* ---- Dark hero variant (this page only) ---- */
.hero--dark{background:var(--footer-bg);border-bottom:1px solid rgba(255,255,255,.08)}
.hero--dark .hero-bg{display:none}
.hero--dark .breadcrumb,.hero--dark .breadcrumb a{color:rgba(245,245,245,.55)}
.hero--dark .breadcrumb .cur{color:var(--orange)}
.hero--dark .hero-title{color:#fff}
.hero--dark .hero-lead{color:rgba(245,245,245,.78)}
.hero--dark .call-text small{color:rgba(245,245,245,.5)}
.hero--dark .call-text b{color:#fff}
.hero--dark .call-ico{background:rgba(255,255,255,.06);border-color:rgba(253,70,0,.5)}
.hero--dark .trust-strip li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(245,245,245,.85)}

/* ---- AI answer card (hero visual + reused smaller in "the shift") ---- */
.ai-answer-card{position:relative;background:#20212a;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:1.6rem;box-shadow:0 44px 90px -30px rgba(0,0,0,.55)}
.ai-platform-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.08)}
.ai-platform-label{width:100%;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,245,.4);margin-bottom:.5rem}
.ai-chip{font-family:var(--font-mono);font-size:.68rem;color:rgba(245,245,245,.78);border:1px solid rgba(255,255,255,.15);border-radius:100px;padding:.35rem .8rem}
.ai-citation{margin-top:.9rem;font-family:var(--font-mono);font-size:.7rem;color:rgba(245,245,245,.4)}

/* ---- Definitions duo (AEO vs GEO glossary cards) ---- */
.def-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.def-card{background:var(--gray-50);border:1px solid var(--line);border-radius:20px;padding:2rem;z-index:1;will-change:transform;transition:transform .3s ease, box-shadow .3s ease}
.def-letters{font-family:var(--font-display);font-weight:900;font-size:3rem;color:var(--orange);line-height:1;margin-bottom:.7rem}
.def-card h3{font-size:1.05rem;margin-bottom:.6rem}
.def-card p{color:var(--muted);font-size:.94rem}

/* ---- Platform chip grid (standalone section) ---- */
.platform-grid{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.platform-chip{font-family:var(--font-mono);font-size:.85rem;color:var(--body);border:1px solid var(--line);border-radius:100px;padding:.7rem 1.3rem;background:var(--white);z-index:1;will-change:transform;transition:transform .3s ease, border-color .3s ease, color .3s ease}

/* ---- hover states: desktop only, so nothing sticks on touch ---- */
@media (hover:hover){
  .def-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -30px rgba(20,21,24,.32)}
  .platform-chip:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
}

@media (max-width:760px){
  .def-duo{grid-template-columns:1fr}
}

/* ============================================================
   SOCIAL MEDIA MARKETING PAGE — unique components
   ============================================================ */

/* ---- Phone mockup: branded post preview (hero visual) ---- */
.phone-mock{background:var(--white);border:1px solid var(--line);border-radius:28px;padding:.9rem;max-width:300px;margin-left:auto;box-shadow:0 44px 90px -30px rgba(20,21,24,.4)}
@media (max-width:900px){
  .phone-mock{margin:0 auto}
}
.phone-mock-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:.7rem}
.phone-mock-head{display:flex;align-items:center;gap:.6rem;padding:.2rem .3rem .8rem}
.phone-mock-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#B93400);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:.85rem}
.phone-mock-head b{font-size:.85rem;color:var(--ink);display:block}
.phone-mock-head span{font-size:.68rem;color:var(--muted)}
.phone-mock-img{aspect-ratio:1/1;border-radius:16px;background:linear-gradient(135deg,#2C2D31,#17181C);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.phone-mock-img svg{width:64px;height:64px;opacity:.85}
.phone-mock-actions{display:flex;align-items:center;gap:1rem;padding:.8rem .3rem .3rem}
.phone-mock-actions svg{width:20px;height:20px;color:var(--body)}
.phone-mock-caption{padding:.2rem .3rem .3rem;font-size:.76rem;color:var(--body)}
.phone-mock-caption b{color:var(--ink)}

/* ---- Content calendar mockup (before/after + standalone) ---- */
.cal-mock{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.3rem;width:100%;max-width:380px;justify-self:center}
.cal-mock-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.cal-cell{aspect-ratio:1;border-radius:6px;background:var(--gray-100)}
.cal-cell.is-post{background:var(--orange)}
.cal-cell.is-post.is-soft{background:rgba(253,70,0,.45)}
.cal-cell.is-empty{background:var(--gray-50);border:1px dashed var(--line)}
.cal-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.cal-legend span{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--muted)}
.cal-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---- Trend mini cards (organic growth, no fabricated numbers) ---- */
.trend-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.trend-mini{background:var(--gray-50);border:1px solid var(--line);border-radius:16px;padding:1.4rem;text-align:center;z-index:1;will-change:transform;transition:transform .3s ease, box-shadow .3s ease}
.trend-mini svg{width:100%;height:44px;margin-bottom:.8rem}
.trend-mini h4{font-size:.98rem;color:var(--ink)}
.trend-mini span{font-family:var(--font-mono);font-size:.7rem;color:var(--orange);text-transform:uppercase;letter-spacing:.05em}

/* ---- Ad preview mock (Meta Ads teaser visual) ---- */
.ad-preview{background:#20212a;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.2rem;max-width:300px;margin-left:auto}
.ad-preview-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,245,.4);margin-bottom:.9rem}
.ad-preview-img{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,var(--orange),#B93400);margin-bottom:.9rem;display:flex;align-items:center;justify-content:center}
.ad-preview-img svg{width:38px;height:38px;color:rgba(255,255,255,.9)}
.ad-preview-cta{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.06);border-radius:8px;padding:.7rem .9rem}
.ad-preview-cta b{color:#fff;font-size:.82rem}
.ad-preview-cta span{font-family:var(--font-mono);font-size:.68rem;color:var(--orange)}

@media (hover:hover){
  .trend-mini:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(20,21,24,.3)}
}

@media (max-width:760px){
  .trend-row{grid-template-columns:1fr}
}
/* ---- Even 2-column grid for symmetric card-vs-card comparisons ---- */
.lead-2col-even{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media (max-width:900px){
  .lead-2col-even{grid-template-columns:1fr;gap:1.4rem}
}

/* ============================================================
   GOOGLE ADS PAGE — unique components
   ============================================================ */

/* ---- Search ad anatomy mockup (hero visual) — kept in brand palette, not Google's colors ---- */
.gads-mock{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.6rem;max-width:420px;margin-left:auto;box-shadow:0 44px 90px -30px rgba(20,21,24,.4)}
.gads-mock-tag{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:1.1rem}
.gads-ad-label{display:inline-block;font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--orange);border:1px solid var(--orange);border-radius:3px;padding:0 .4rem;margin-right:.5rem;vertical-align:middle}
.gads-url{font-size:.82rem;color:var(--body)}
.gads-headline{font-size:1.15rem;color:var(--ink);font-weight:700;margin:.4rem 0;line-height:1.3}
.gads-desc{font-size:.9rem;color:var(--muted);line-height:1.55}
.gads-sitelinks{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.gads-sitelinks span{font-size:.82rem;color:var(--orange);font-weight:600}

/* ---- Funnel visual (Keyword -> Ad -> Landing Page -> Conversion) ---- */
.funnel{max-width:420px;margin:0 auto}
.funnel-seg{color:#fff;text-align:center;padding:1.15rem 1rem;font-family:var(--font-display);font-weight:700;font-size:.95rem;margin:0 auto}
.funnel-seg small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-top:.35rem}
.funnel-seg.f1{background:#141518;width:100%;clip-path:polygon(0 0,100% 0,93% 100%,7% 100%)}
.funnel-seg.f2{background:#3A3B3F;width:78%;clip-path:polygon(0 0,100% 0,91% 100%,9% 100%);margin-top:3px}
.funnel-seg.f3{background:#B93400;width:56%;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);margin-top:3px}
.funnel-seg.f4{background:var(--orange);width:34%;border-radius:10px;margin-top:3px}

@media (max-width:760px){
  .gads-mock{margin-left:0;margin-right:0}
}

/* ============================================================
   WEBSITE DEVELOPMENT PAGE — unique components
   ============================================================ */

/* ---- Browser window mockup (hero + reused in before/after & features) ---- */
.browser-mock{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 44px 90px -30px rgba(20,21,24,.42)}
.browser-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;background:var(--gray-50);border-bottom:1px solid var(--line)}
.browser-dots{display:flex;gap:.4rem}
.browser-dots i{width:11px;height:11px;border-radius:50%;background:var(--gray-100);display:block}
.browser-dots i:first-child{background:#ff5f57}.browser-dots i:nth-child(2){background:#febc2e}.browser-dots i:nth-child(3){background:#28c840}
.browser-url{flex:1;background:var(--white);border:1px solid var(--line);border-radius:100px;padding:.3rem .8rem;font-family:var(--font-mono);font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.browser-url svg{width:11px;height:11px;color:var(--orange)}
.browser-body{padding:1.3rem}
.bm-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.bm-logo{width:46px;height:10px;border-radius:3px;background:var(--ink)}
.bm-links{display:flex;gap:.5rem}
.bm-links span{width:24px;height:6px;border-radius:3px;background:var(--gray-100)}
.bm-hero{background:linear-gradient(135deg,#2C2D31,#17181C);border-radius:10px;padding:1.1rem;margin-bottom:1rem}
.bm-line{height:9px;border-radius:3px;background:rgba(255,255,255,.85);margin-bottom:.5rem}
.bm-line.w70{width:70%}.bm-line.w45{width:45%;background:var(--orange)}.bm-line.sm{height:6px;background:rgba(255,255,255,.3)}
.bm-btn{display:inline-block;margin-top:.6rem;width:74px;height:22px;border-radius:100px;background:var(--orange)}
.bm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.bm-card{background:var(--gray-50);border:1px solid var(--line);border-radius:8px;height:52px;padding:.5rem}
.bm-card i{display:block;width:20px;height:20px;border-radius:5px;background:rgba(253,70,0,.18);margin-bottom:.4rem}
.bm-card b{display:block;height:5px;width:80%;border-radius:2px;background:var(--gray-100)}
.hero-visual .browser-mock{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---- Before / After redesign comparison ---- */
.ba-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:center}
.ba-frame{position:relative}
.ba-badge{position:absolute;top:-12px;left:16px;z-index:2;font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:100px}
.ba-frame.old .ba-badge{background:var(--gray-100);color:var(--muted)}
.ba-frame.new .ba-badge{background:var(--orange);color:#fff}
.ba-frame.old .browser-mock{filter:grayscale(1) contrast(.9);opacity:.85}
.ba-frame.old .bm-hero{background:#9a9ba0}
.ba-frame.old .bm-btn{background:#6E7176}
.ba-frame.old .bm-line.w45{background:#c9cacd}
.ba-arrow{width:44px;height:44px;flex:none;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -12px rgba(253,70,0,.7)}
.ba-arrow svg{width:22px;height:22px}
.ba-note{text-align:center;font-size:.78rem;color:var(--muted);margin-top:.9rem;font-family:var(--font-mono)}
.ba-frame.new .ba-note{color:var(--orange)}

/* ---- Tech-stack scrolling band ---- */
.tech-band{background:var(--footer-bg);border-top:1px solid var(--footer-line);border-bottom:1px solid var(--footer-line);padding:1.4rem 0;overflow:hidden}
.tech-track{display:inline-flex;align-items:center;gap:1rem;white-space:nowrap;animation:tech-scroll 32s linear infinite}
.tech-track span{font-family:var(--font-mono);font-size:.9rem;color:rgba(245,245,245,.85);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:.5rem 1.1rem}
.tech-track i{color:var(--orange);font-style:normal}
@keyframes tech-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Alternating feature split rows ---- */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center;margin-bottom:4.5rem}
.feature-split:last-child{margin-bottom:0}
.feature-split.reverse .fs-visual{order:-1}
.fs-copy .fs-eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:700}
.fs-copy h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:.8rem 0 1rem}
.fs-copy>p{color:var(--body);font-size:1.03rem;line-height:1.7;margin-bottom:1.2rem}
.fs-points{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.fs-points li{display:flex;align-items:flex-start;gap:.7rem;color:var(--body);font-size:.96rem}
.fs-points svg{width:20px;height:20px;flex:none;color:var(--orange);margin-top:.1rem}
.fs-panel{background:var(--gray-50);border:1px solid var(--line);border-radius:20px;padding:2rem;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.fs-panel--dark{background:linear-gradient(150deg,#2C2D31,#17181C);border-color:rgba(255,255,255,.1)}
.speed-gauge{text-align:center}
.speed-gauge svg{width:180px;height:110px}
.speed-gauge b{display:block;font-family:var(--font-display);font-weight:900;font-size:2.4rem;margin-top:-.4rem}
.speed-gauge span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.device-stack{display:flex;align-items:flex-end;gap:1rem;justify-content:center}
.device{background:var(--white);border:2px solid var(--ink);border-radius:8px;position:relative}
.device.desktop{width:150px;height:100px;border-radius:8px 8px 0 0}
.device.desktop::after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:60px;height:8px;background:var(--ink);border-radius:0 0 6px 6px}
.device.phone{width:44px;height:82px}
.device i{position:absolute;inset:8px;background:linear-gradient(135deg,rgba(253,70,0,.9),#B93400);border-radius:3px}
.device.phone i{inset:5px}

/* ---- Pricing tiers ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.price-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:2rem 1.8rem;display:flex;flex-direction:column;position:relative;z-index:1;will-change:transform;transition:transform .35s ease, box-shadow .35s ease}
.price-card h3{font-size:1.2rem;margin-bottom:.3rem}
.price-tagline{color:var(--muted);font-size:.9rem;margin-bottom:1.2rem}
.price-amount{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--orange);margin-bottom:1.3rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.price-feats{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.6rem;flex:1}
.price-feats li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:var(--body)}
.price-feats svg{width:18px;height:18px;flex:none;color:var(--orange);margin-top:.1rem}
.price-card .btn{width:100%;justify-content:center}
.price-card.featured{background:linear-gradient(160deg,#2C2D31,#17181C);border-color:transparent;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.price-card.featured h3{color:#fff}.price-card.featured .price-tagline{color:rgba(245,245,245,.7)}
.price-card.featured .price-feats li{color:rgba(245,245,245,.85)}
.price-card.featured .price-amount{border-color:rgba(255,255,255,.12)}
.price-flag{position:absolute;top:1.2rem;right:1.2rem;font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--orange);padding:.25rem .6rem;border-radius:100px}

@media (hover:hover){
  .price-card:hover{transform:translateY(-10px);box-shadow:0 44px 80px -30px rgba(20,21,24,.4)}
  .price-card.featured:hover{box-shadow:0 54px 100px -30px rgba(0,0,0,.65)}
}

@media (max-width:900px){
  .feature-split{grid-template-columns:1fr;gap:1.8rem;margin-bottom:3rem}
  .feature-split.reverse .fs-visual{order:0}
  .price-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .ba-compare{grid-template-columns:1fr;gap:2.4rem}
  .ba-arrow{transform:rotate(90deg);margin:0 auto}
}


/* ============================================================
   GRAPHIC DESIGNING PAGE — unique components
   ============================================================ */

/* ---- Brand-board hero visual (CSS, shows craft immediately) ---- */
.brand-board{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 44px 90px -30px rgba(20,21,24,.42);max-width:430px;margin-left:auto}
.bb-top{background:linear-gradient(150deg,#2C2D31,#17181C);padding:2.2rem;display:flex;align-items:center;justify-content:center}
.bb-mark svg{width:120px;height:64px}
.bb-mid{display:flex}
.bb-swatch{flex:1;height:56px}
.bb-body{padding:1.4rem 1.6rem 1.7rem}
.bb-type{display:flex;align-items:baseline;gap:.8rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1rem}
.bb-type b{font-family:var(--font-display);font-weight:900;font-size:2.6rem;color:var(--ink);line-height:1}
.bb-type span{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.bb-row{display:flex;gap:.5rem}
.bb-row i{height:8px;border-radius:3px;background:var(--gray-100);display:block}
.bb-row i.a{width:60%;background:var(--orange)}.bb-row i.b{width:25%}.bb-row i.c{width:15%}

/* ---- Portfolio gallery (masonry-style grid) ---- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:1rem}
.gallery-item{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--gray-50);z-index:1}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gallery-item .g-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,16,19,.82),transparent 55%);display:flex;align-items:flex-end;padding:1.1rem;opacity:0;transition:opacity .35s ease}
.gallery-item .g-overlay b{color:#fff;font-family:var(--font-display);font-weight:700;font-size:1rem}
.gallery-item .g-overlay span{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);margin-top:.2rem}
.g-tall{grid-row:span 2}.g-wide{grid-column:span 2}
.gallery-tag{text-align:center;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-top:1.4rem}

@media (hover:hover){
  .gallery-item:hover img{transform:scale(1.07)}
  .gallery-item:hover .g-overlay{opacity:1}
}

/* ---- Color palette strip ---- */
.palette{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.swatch{width:120px;text-align:center}
.swatch i{display:block;height:120px;border-radius:16px;border:1px solid var(--line);margin-bottom:.6rem}
.swatch b{font-family:var(--font-mono);font-size:.8rem;color:var(--ink);display:block}
.swatch span{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}

/* ---- Video sample frame ---- */
.gd-video{position:relative;max-width:920px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 44px 90px -34px rgba(20,21,24,.5);aspect-ratio:16/9;background:#17181C}
.gd-video img{width:100%;height:100%;object-fit:cover;opacity:.9}
.gd-video-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(15,16,19,.25);color:#fff}
.gd-video-btn{width:84px;height:84px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px -12px rgba(253,70,0,.7);position:relative}
.gd-video-btn::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(253,70,0,.5);animation:pulse 2s ease-out infinite}
.gd-video-btn svg{width:32px;height:32px;margin-left:5px}
.gd-video-play span{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;color:rgba(245,245,245,.85)}

/* ---- AI vs Human comparison (the key argument) ---- */
.ai-vs{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:920px;margin:0 auto}
.ai-vs-card{border-radius:20px;padding:2rem}
.ai-vs-card.generic{background:var(--gray-50);border:1px dashed var(--line)}
.ai-vs-card.human{background:linear-gradient(160deg,#2C2D31,#17181C);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}
.ai-vs-card.human::before{content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(253,70,0,.18),transparent 65%)}
.ai-vs-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.3rem;position:relative}
.ai-vs-head .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.ai-vs-card.generic .ic{background:var(--gray-100);color:var(--muted)}
.ai-vs-card.human .ic{background:var(--orange);color:#fff}
.ai-vs-head h3{font-size:1.15rem}.ai-vs-card.human .ai-vs-head h3{color:#fff}
.ai-vs-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;position:relative}
.ai-vs-list li{display:flex;align-items:flex-start;gap:.7rem;font-size:.95rem}
.ai-vs-card.generic li{color:var(--muted)}.ai-vs-card.human li{color:rgba(245,245,245,.9)}
.ai-vs-list svg{width:19px;height:19px;flex:none;margin-top:.1rem}
.ai-vs-card.generic svg{color:var(--muted)}.ai-vs-card.human svg{color:var(--orange)}

/* ---- Discipline cards with mini creative visuals ---- */
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.disc-card{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;z-index:1;will-change:transform;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,border-color .3s}
.disc-visual{height:120px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.disc-visual svg{width:50px;height:50px;position:relative;z-index:1}
.disc-body{padding:1.5rem}
.disc-body h3{font-size:1.12rem;margin-bottom:.4rem}
.disc-body p{color:var(--muted);font-size:.93rem}
.dv-orange{background:linear-gradient(135deg,rgba(253,70,0,.12),rgba(253,70,0,.03));color:var(--orange)}
.dv-dark{background:linear-gradient(150deg,#2C2D31,#17181C);color:#fff}
.dv-gray{background:var(--gray-50);color:var(--ink)}

@media (hover:hover){
  .disc-card:hover{transform:translateY(-10px);box-shadow:0 40px 80px -30px rgba(20,21,24,.4);border-color:transparent}
}

@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .ai-vs{grid-template-columns:1fr}
  .disc-grid{grid-template-columns:1fr}
  .brand-board{margin:0 auto}
}

/* ============================================================
   BLOG HUB PAGE — unique components
   ============================================================ */

/* ---- Sticky category tab bar ---- */
.blog-cat-nav{position:sticky;top:var(--header-h);z-index:60;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.blog-cat-nav-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem 2rem;padding:1.1rem 0}
.blog-cat-tab{flex:none;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--body);padding-bottom:.5rem;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s ease, border-color .2s ease}
.blog-cat-tab:hover{color:var(--ink)}
.blog-cat-tab.active{color:var(--orange);border-color:var(--orange)}

/* ---- Category section ---- */
.blog-cat-section{padding:3.4rem 0;scroll-margin-top:calc(var(--header-h) + 70px)}
.blog-cat-section:nth-child(even){background:var(--gray-50)}
.blog-cat-head{display:flex;align-items:center;gap:.9rem;margin-bottom:2rem}
.blog-cat-ico{width:46px;height:46px;flex:none;border-radius:12px;background:rgba(253,70,0,.1);color:var(--orange);display:flex;align-items:center;justify-content:center}
.blog-cat-ico svg{width:22px;height:22px}
.blog-cat-head h2{font-size:clamp(1.4rem,2.6vw,1.8rem)}
.blog-cat-head .cat-count{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-left:.3rem}

/* ---- Blog card (image, title, description, read more) ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.blog-card{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;z-index:1;will-change:transform;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,border-color .3s}
.bc-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.bc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bc-soon{position:absolute;left:1rem;bottom:1rem;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(20,21,24,.65);backdrop-filter:blur(4px);padding:.3rem .7rem;border-radius:100px}
.bc-body{padding:1.3rem 1.4rem 1.5rem}
.bc-body h3{font-size:1.08rem;line-height:1.35;margin-bottom:.5rem}
.bc-body p{color:var(--muted);font-size:.9rem;line-height:1.55;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--orange);font-family:var(--font-display);font-weight:700;font-size:.86rem}
.bc-link .arw{transition:transform .25s ease}

@media (hover:hover){
  .blog-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -28px rgba(20,21,24,.32);border-color:transparent}
  .blog-card:hover .bc-img img{transform:scale(1.06)}
  .blog-card:hover .bc-link .arw{transform:translateX(4px)}
}

/* ---- Services strip (bottom of hub) ---- */
.svc-strip{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.svc-strip a{font-family:var(--font-mono);font-size:.85rem;color:var(--body);border:1px solid var(--line);border-radius:100px;padding:.7rem 1.4rem;background:var(--white);transition:.2s}

@media (hover:hover){
  .svc-strip a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
}

@media (max-width:900px){
  .blog-grid{grid-template-columns:1fr}
  .blog-cat-nav-inner{gap:1.4rem}
}
.site-footer{position:relative}
.site-footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(253,70,0,.55) 50%, transparent);
}
.site-footer::after{
  content:"";
  position:absolute;
  top:-19px; left:50%;
  transform:translateX(-50%);
  width:38px; height:38px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 10px 24px -8px rgba(253,70,0,.65);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18l6-8 4 5 3-4 5 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
}
.phone-mock-img img{width:100%;height:100%;object-fit:cover;display:block}
.ad-preview-img{overflow:hidden;position:relative}
.ad-preview-img img{width:100%;height:100%;object-fit:cover;display:block}
.fs-panel img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}