/* =================================================================
   My Local Everything — homepage sections (bespoke)
   ================================================================= */

/* ============ HERO ============ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:clamp(7rem,12vh,10rem); padding-bottom:clamp(4rem,9vh,7rem); overflow:hidden; color:#fff; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,34,42,.55) 0%, rgba(4,34,42,.30) 35%, rgba(4,34,42,.78) 100%); }
.hero-media::before{ content:""; position:absolute; inset:0; z-index:1; mix-blend-mode:soft-light;
  background:linear-gradient(120deg, rgba(25,181,201,.35), transparent 50%, rgba(242,180,65,.25)); }
.hero .container{ position:relative; z-index:2; width:100%; }
.hero-badge{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1rem; border-radius:100px;
  background:rgba(255,255,255,.13); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22);
  font-size:.8rem; font-weight:500; margin-bottom:1.6rem; }
.hero-badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--gold); position:relative; }
.hero-badge .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--gold);
  animation:ping 1.8s var(--ease-soft) infinite; }
@keyframes ping{ 0%{ transform:scale(.6); opacity:.8;} 100%{ transform:scale(1.8); opacity:0;} }
.hero h1{ color:#fff; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero-sub{ font-size:clamp(1.1rem,1.7vw,1.4rem); color:rgba(255,255,255,.9); max-width:50ch; margin:1.5rem 0 2.2rem; line-height:1.55; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-trust{ display:flex; align-items:center; gap:1.4rem; margin-top:2.8rem; flex-wrap:wrap;
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.16); }
.hero-trust .ht-num{ font-family:var(--display); font-size:1.7rem; line-height:1; color:#fff; }
.hero-trust .ht-lab{ font-size:.78rem; color:rgba(255,255,255,.7); font-family:var(--mono); letter-spacing:.04em; }
.hero-trust .div{ width:1px; height:34px; background:rgba(255,255,255,.2); }
.hero-scroll{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:2;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.6);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.hero-scroll i{ width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:scrolldrop 1.8s var(--ease-soft) infinite; }
@keyframes scrolldrop{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;}
  51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ---------- gradient display type + watermark wordmark (premium kit) ---------- */
.grad-text{ background:linear-gradient(100deg,var(--teal-bright),var(--gold) 60%,var(--coral));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.watermark{ position:absolute; font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  -webkit-text-stroke:1.5px rgba(10,42,56,.06); color:transparent; pointer-events:none; user-select:none;
  font-size:clamp(7rem,20vw,18rem); line-height:.8; z-index:0; white-space:nowrap; }
.watermark.dark{ -webkit-text-stroke:1.5px rgba(255,255,255,.05); }

/* ============ STATS MARQUEE BAND ============ */
.proof{ background:var(--ink); color:var(--sand); padding-block:0; overflow:hidden; }
.proof-row.marquee,.proof-row{ display:flex; gap:3.5rem; align-items:center; white-space:nowrap; padding-block:1.4rem;
  width:max-content; animation:marquee 38s linear infinite; }
.proof:hover .proof-row{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.proof-item{ display:inline-flex; align-items:center; gap:.7rem; font-size:1.02rem; }
.proof-item b{ font-family:var(--display); color:var(--gold); font-size:1.3rem; font-weight:560; }
.proof-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-bright); }
html.no-motion .proof-row{ animation:none; flex-wrap:wrap; white-space:normal; width:auto; justify-content:center; }
@media (prefers-reduced-motion:reduce){ .proof-row{ animation:none; } }

/* ============ RELIEF / EMPATHY ============ */
.relief{ background:linear-gradient(180deg,var(--sand),var(--sand-2)); position:relative; }
.relief-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.relief-copy h2{ margin-bottom:1.4rem; }
.relief-copy h2 .serif-accent{ display:block; }
.before-after{ display:grid; gap:1rem; }
.ba-col h4{ font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.9rem; }
.ba-before h4{ color:var(--coral-deep); } .ba-after h4{ color:var(--teal); }
.ba-list li{ display:flex; gap:.7rem; align-items:flex-start; padding:.55rem 0; font-size:1rem; color:var(--ink-soft);
  border-bottom:1px solid var(--hairline-2); }
.ba-list li svg{ width:18px; height:18px; flex:none; margin-top:3px; }
.ba-before .ba-list svg{ color:var(--coral); } .ba-after .ba-list svg{ color:var(--teal); }
.relief-visual{ position:relative; }
.relief-card{ background:var(--shell); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-lg);
  border:1px solid var(--hairline-2); position:relative; overflow:hidden; }
.relief-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--teal),var(--teal-bright),var(--gold),var(--coral)); }
.rc-quote{ font-family:var(--display); font-size:1.5rem; line-height:1.3; color:var(--ink); margin:1rem 0 1.5rem; }
.rc-quote::before{ content:"“"; font-size:3rem; color:var(--teal-bright); line-height:0; vertical-align:-.4em; }
.rc-meta{ display:flex; align-items:center; gap:.8rem; }
.rc-avatar{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--coral));
  display:grid; place-items:center; color:#fff; font-family:var(--display); font-size:1.1rem; }
.rc-meta b{ display:block; color:var(--ink); } .rc-meta span{ font-size:.85rem; color:var(--ink-mute); }
.relief-float{ position:absolute; background:var(--shell); border-radius:14px; box-shadow:var(--shadow-md);
  padding:.8rem 1.1rem; display:flex; align-items:center; gap:.7rem; font-size:.88rem; font-weight:600; }
.relief-float svg{ width:22px; height:22px; }
.relief-float.f1{ top:-22px; right:6%; color:var(--teal); }
.relief-float.f2{ bottom:-20px; left:-10px; color:var(--coral-deep); }

/* ============ SERVICES ============ */
.services{ background:var(--shell); overflow:hidden; }
.services .container,.diff .container{ position:relative; z-index:1; }
.diff{ overflow:hidden; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3.2rem; flex-wrap:wrap; }
.sec-head .sh-l{ max-width:60ch; }
.sec-head h2{ margin:.7rem 0 0; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.svc-card{ position:relative; background:var(--sand); border:1px solid var(--hairline-2); border-radius:var(--radius);
  padding:2rem 1.8rem 1.9rem; overflow:hidden; transition:transform var(--t-med) var(--ease-premium), box-shadow var(--t-med), border-color var(--t-med); }
.svc-card::after{ content:""; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(25,181,201,.10), transparent 60%); opacity:0; transition:opacity var(--t-med); }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc-card:hover::after{ opacity:1; }
.svc-ico{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.3rem;
  background:var(--aqua-mist); color:var(--teal); transition:transform var(--t-med) var(--ease-premium); }
.svc-ico svg{ width:26px; height:26px; }
.svc-card:hover .svc-ico{ transform:scale(1.08) rotate(-4deg); background:var(--teal); color:#fff; }
.svc-card h3{ font-size:1.3rem; margin-bottom:.6rem; }
.svc-card p{ font-size:.96rem; color:var(--ink-soft); margin-bottom:1.1rem; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.svc-tags span{ font-size:.74rem; font-family:var(--mono); letter-spacing:.02em; padding:.25rem .6rem; border-radius:7px;
  background:var(--shell); border:1px solid var(--hairline-2); color:var(--ink-mute); }
.svc-num{ position:absolute; top:1.4rem; right:1.5rem; font-family:var(--display); font-size:1.05rem; color:var(--hairline); }

/* ============ DASHBOARD (signature interaction) ============ */
.command{ background:var(--teal-ink); color:var(--aqua-mist); position:relative; overflow:hidden; }
.command::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(800px circle at 15% 10%, rgba(25,181,201,.18), transparent 50%),
    radial-gradient(700px circle at 90% 90%, rgba(242,180,65,.10), transparent 50%); }
.command .grid-lines{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:54px 54px; mask:radial-gradient(circle at 50% 40%,#000,transparent 75%); }
.command .container{ position:relative; z-index:1; }
.command .sec-head h2{ color:#fff; }
.command .eyebrow{ color:var(--teal-bright); }
.command .sec-head .lead{ color:rgba(221,238,240,.75); }

.console{ background:linear-gradient(160deg,rgba(8,46,55,.9),rgba(4,28,35,.95));
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  overflow:hidden; backdrop-filter:blur(4px); }
.console-bar{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02); }
.console-dots{ display:flex; gap:.45rem; }
.console-dots i{ width:11px; height:11px; border-radius:50%; }
.console-dots i:nth-child(1){ background:#ff5f57; } .console-dots i:nth-child(2){ background:#febc2e; } .console-dots i:nth-child(3){ background:#28c840; }
.console-title{ font-family:var(--mono); font-size:.82rem; color:rgba(221,238,240,.85); display:flex; align-items:center; gap:.5rem; }
.console-status{ margin-left:auto; font-family:var(--mono); font-size:.72rem; color:#28c840; display:flex; align-items:center; gap:.45rem; }
.console-status .live-dot{ width:7px; height:7px; border-radius:50%; background:#28c840; box-shadow:0 0 0 0 rgba(40,200,64,.6);
  animation:pulse-live 1.6s infinite; }
@keyframes pulse-live{ 0%{ box-shadow:0 0 0 0 rgba(40,200,64,.5);} 70%{ box-shadow:0 0 0 7px rgba(40,200,64,0);} 100%{ box-shadow:0 0 0 0 rgba(40,200,64,0);} }

.console-body{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; }
@media (max-width:880px){ .console-body{ grid-template-columns:1fr; } }

/* left — KPI tiles + feed */
.con-left{ padding:1.5rem; border-right:1px solid rgba(255,255,255,.08); }
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:1.4rem; }
.kpi{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:.95rem 1rem; }
.kpi .k-lab{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(221,238,240,.55); }
.kpi .k-val{ font-family:var(--display); font-size:1.7rem; color:#fff; line-height:1.1; margin-top:.25rem; }
.kpi .k-val .unit{ font-size:.9rem; color:var(--teal-bright); }
.kpi .k-trend{ font-size:.72rem; color:#28c840; display:flex; align-items:center; gap:.25rem; margin-top:.2rem; }
.feed-head{ font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(221,238,240,.5);
  display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; }
.feed{ display:flex; flex-direction:column; gap:.5rem; height:218px; overflow:hidden; position:relative; mask:linear-gradient(180deg,#000 78%,transparent); }
.feed-item{ display:flex; align-items:center; gap:.75rem; padding:.6rem .8rem; border-radius:11px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); font-size:.84rem;
  animation:feedin .5s var(--ease-premium); }
@keyframes feedin{ from{ opacity:0; transform:translateY(-8px);} }
.feed-item .fi-ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none; }
.feed-item .fi-ico svg{ width:16px; height:16px; }
.feed-item .fi-txt{ flex:1; min-width:0; } .feed-item .fi-txt b{ color:#fff; font-weight:600; }
.feed-item .fi-txt span{ color:rgba(221,238,240,.6); display:block; font-size:.74rem; }
.feed-item .fi-time{ font-family:var(--mono); font-size:.68rem; color:rgba(221,238,240,.4); }

/* right — integrations grid */
.con-right{ padding:1.5rem; display:flex; flex-direction:column; }
.con-right .cr-head{ font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(221,238,240,.5); margin-bottom:.9rem; }
.stack-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:1.2rem; }
.stack-chip{ aspect-ratio:1; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:.4rem;
  transition:transform var(--t-fast) var(--ease-premium), background var(--t-fast), border-color var(--t-fast); position:relative; }
.stack-chip svg{ width:22px; height:22px; color:var(--teal-bright); }
.stack-chip .sc-name{ font-size:.6rem; color:rgba(221,238,240,.6); text-align:center; line-height:1; }
.stack-chip:hover{ transform:translateY(-3px); background:rgba(25,181,201,.12); border-color:rgba(25,181,201,.4); }
.stack-chip.active::after{ content:""; position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%;
  background:#28c840; box-shadow:0 0 8px #28c840; }
.con-sum{ margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; }
.con-sum .cs-l{ font-size:.82rem; color:rgba(221,238,240,.7); }
.con-sum .cs-l b{ color:#fff; font-family:var(--display); font-size:1.2rem; }
.con-toast{ position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:#28c840; color:#04222a; font-weight:700; font-size:.82rem; padding:.6rem 1.1rem; border-radius:100px;
  display:flex; align-items:center; gap:.5rem; box-shadow:0 10px 30px -8px rgba(40,200,64,.5); opacity:0; pointer-events:none;
  transition:opacity .4s, transform .4s var(--ease-premium); z-index:5; }
.con-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.con-toast svg{ width:16px; height:16px; }

.command-note{ display:flex; gap:1.5rem; margin-top:2rem; flex-wrap:wrap; }
.command-note .cn{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:rgba(221,238,240,.75); }
.command-note .cn svg{ width:20px; height:20px; color:var(--teal-bright); flex:none; }

/* ============ DIFFERENTIATORS ============ */
.diff{ background:var(--sand); }
.diff-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.4rem; }
.diff-card{ background:var(--shell); border:1px solid var(--hairline-2); border-radius:var(--radius); padding:2rem;
  position:relative; overflow:hidden; transition:transform var(--t-med) var(--ease-premium), box-shadow var(--t-med); }
.diff-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.diff-card.wide{ grid-column:span 7; } .diff-card.narrow{ grid-column:span 5; }
.diff-card.third{ grid-column:span 4; }
@media (max-width:860px){ .diff-card.wide,.diff-card.narrow,.diff-card.third{ grid-column:span 12; } }
.diff-card h3{ font-size:1.4rem; margin:1rem 0 .6rem; }
.diff-card p{ color:var(--ink-soft); font-size:.97rem; }
.diff-big{ font-family:var(--display); font-size:clamp(2.6rem,5vw,3.8rem); line-height:1; color:var(--teal);
  display:flex; align-items:baseline; gap:.3rem; }
.diff-big .plus{ color:var(--coral); } .diff-big .small{ font-size:1rem; color:var(--ink-mute); font-family:var(--sans); }
.diff-card .d-ico{ width:48px; height:48px; border-radius:12px; background:var(--aqua-mist); color:var(--teal);
  display:grid; place-items:center; } .diff-card .d-ico svg{ width:24px; height:24px; }
.diff-bars{ display:flex; gap:.4rem; align-items:flex-end; height:70px; margin-top:1.2rem; }
.diff-bars i{ flex:1; border-radius:5px 5px 0 0; background:linear-gradient(var(--teal-bright),var(--teal)); opacity:.85; }

/* ============ SERVICE AREAS / MAP ============ */
.areas-sec{ background:linear-gradient(180deg,var(--teal-deep),var(--teal-ink)); color:var(--aqua-mist); overflow:hidden; }
.areas-sec .eyebrow{ color:var(--gold); }
.areas-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.areas-copy h2{ color:#fff; margin-bottom:1.3rem; }
.areas-copy .lead{ color:rgba(221,238,240,.8); margin-bottom:1.8rem; }
.areas-list{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem .8rem; margin-bottom:2rem; }
.areas-list li{ display:flex; align-items:center; gap:.6rem; font-size:.98rem; color:var(--aqua-mist); }
.areas-list li svg{ width:16px; height:16px; color:var(--teal-bright); flex:none; }
.map-wrap{ position:relative; }
.map-wrap svg{ width:100%; height:auto; overflow:visible; }
.map-city{ cursor:pointer; }
.map-city .mc-dot{ fill:var(--gold); transition:r .3s var(--ease-premium); }
.map-city .mc-ring{ fill:none; stroke:var(--gold); stroke-width:1.2; opacity:0; }
.map-city .mc-label{ fill:#fff; font-family:var(--mono); font-size:9px; letter-spacing:.04em; }
.map-city.hq .mc-dot{ fill:var(--coral); }
.map-pulse{ transform-origin:center; }

/* ============ PORTFOLIO ============ */
.work{ background:var(--shell); }
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.work-card{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm);
  border:1px solid var(--hairline-2); }
.work-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-premium); }
.work-card:hover img{ transform:scale(1.07); }
.work-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(4,34,42,.88)); }
.work-cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:1.3rem; color:#fff;
  transform:translateY(8px); opacity:.9; transition:transform var(--t-med) var(--ease-premium); }
.work-card:hover .work-cap{ transform:translateY(0); opacity:1; }
.work-cap .wc-cat{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.work-cap h4{ color:#fff; font-size:1.2rem; margin-top:.2rem; }
.work-cap .wc-tag{ font-size:.85rem; color:rgba(255,255,255,.8); }

/* ============ PROCESS ============ */
.process{ background:var(--sand); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step; }
.step{ position:relative; padding-top:2.2rem; }
.step::before{ counter-increment:step; content:"0" counter(step); position:absolute; top:0; left:0;
  font-family:var(--display); font-size:1.5rem; color:var(--teal-bright); }
.step::after{ content:""; position:absolute; top:.55rem; left:3rem; right:-.7rem; height:1.5px;
  background:repeating-linear-gradient(90deg,var(--hairline) 0 6px,transparent 6px 12px); }
.step:last-child::after{ display:none; }
.step h4{ font-size:1.2rem; margin:.3rem 0 .5rem; }
.step p{ font-size:.93rem; color:var(--ink-soft); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr 1fr; } .step::after{ display:none; } }

/* ============ FAQ ============ */
.faq{ background:var(--shell); }
.faq-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.faq-list{ border-top:1px solid var(--hairline); }
.faq-item{ border-bottom:1px solid var(--hairline); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left;
  padding:1.4rem 0; font-family:var(--display); font-size:1.18rem; color:var(--ink); }
.faq-q .fi-plus{ width:26px; height:26px; flex:none; position:relative; }
.faq-q .fi-plus::before,.faq-q .fi-plus::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--teal); transition:transform var(--t-fast) var(--ease-premium); }
.faq-q .fi-plus::before{ width:13px; height:2px; } .faq-q .fi-plus::after{ width:2px; height:13px; }
.faq-item.open .fi-plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-premium); }
.faq-a p{ padding-bottom:1.4rem; color:var(--ink-soft); max-width:60ch; }

/* ============ FINAL CTA ============ */
.cta{ position:relative; background:var(--teal-ink); color:#fff; text-align:center; overflow:hidden; }
.cta video,.cta .cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32; z-index:0; }
.cta::after{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at 50% 60%, rgba(4,34,42,.5), var(--teal-ink) 78%); }
.cta .container{ position:relative; z-index:2; }
.cta h2{ color:#fff; font-size:clamp(2.3rem,5vw,4rem); max-width:18ch; margin:0 auto 1.2rem; }
.cta p{ color:rgba(221,238,240,.85); max-width:48ch; margin:0 auto 2.2rem; font-size:1.15rem; }
.cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cta-sub{ margin-top:1.8rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:rgba(221,238,240,.6); }

/* ============ responsive ============ */
@media (max-width:980px){
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .relief-grid,.areas-grid,.faq-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .svc-grid,.work-grid,.kpi-row,.stack-grid{ grid-template-columns:1fr 1fr; }
  .areas-list{ grid-template-columns:1fr; }
  .hero-trust .div:nth-child(even){ display:none; }
}