/* Shared v2 design system — the "scan-field" theme. Loaded on every page
   so nav, buttons, cards, footer and section helpers stay consistent
   without duplicating the full block index.html defines inline for its
   own hero/process mechanics. */

:root{
  --primary:#006735; --primary-end:#008345; --bright:#8ff9ad; --tint:#E6F3EC;
  --dark:#171d18; --base:#f5fbf2; --line:#E2E8F0; --ink:#171d18; --ink-soft:#3e4a40;
  --amber:#b98a2e; --crit:#9a3646;
}

/* ---------- Nav redesign — targets the existing nav structurally so it
   applies site-wide without touching markup in every page. nav.js's
   hooks (.nav-dropdown, #mobile-menu, etc.) are untouched. ---------- */
body > nav{ transition:background .3s ease, box-shadow .3s ease; }
body > nav.nav-compact > div:first-child{ padding-top:10px !important; padding-bottom:10px !important; }
body > nav.nav-compact{ box-shadow:0 8px 24px -16px rgba(0,0,0,.1); }
body > nav img[alt="ComplyArmor Logo"]{ transition:height .25s cubic-bezier(.16,1,.3,1); }
body > nav.nav-compact img[alt="ComplyArmor Logo"]{ height:34px !important; }

body > nav .nav-links-scroll > a,
body > nav .nav-dropdown-toggle{
  padding:8px 14px; border-radius:100px; transition:background .2s ease, color .2s ease;
}
body > nav .nav-links-scroll > a:hover,
body > nav .nav-dropdown-toggle:hover{ background:var(--tint); }

body > nav .nav-dropdown-panel{
  border-radius:16px !important; overflow:hidden; border-color:var(--line) !important;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.18); backdrop-filter:blur(16px);
}
body > nav .nav-dropdown-panel a{ border-radius:10px; margin:2px 6px; }

/* Login / Free Scan outlined pills */
body > nav a[href="https://app.complyarmor.com"],
body > nav a[href="free-scan.html"]{
  border-radius:100px !important; transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
body > nav a[href="https://app.complyarmor.com"]:hover,
body > nav a[href="free-scan.html"]:hover{ box-shadow:0 6px 16px -8px rgba(0,103,53,.3); }

/* Book a Demo gradient pill */
body > nav a.cta-btn{ border-radius:100px !important; }

/* Mobile drawer links: pill hover instead of flat border rows */
#mobile-menu a{ border-radius:10px; transition:background .2s ease; }
#mobile-menu a:hover{ background:var(--tint); border-color:transparent !important; }

/* ---------- Glass-frame upgrade for the raw-utility card pattern (same
   visual family as .glass-panel, assembled from Tailwind utilities
   instead — requires .border specifically so it never matches the nav
   bar's .border-b/.border-t). ---------- */
.bg-glass-surface.border{ position:relative; box-shadow:0 20px 44px -26px rgba(0,80,40,.18); }
.bg-glass-surface.border::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,.45), transparent 40%);
}

/* ---------- Temporarily hidden nav/footer entries (pages stay live,
   just not linked from navigation) — remove these rules to bring them
   back. ---------- */
.nav-links-scroll a[href="pricing.html"],
#mobile-menu a[href="pricing.html"],
.footer-grid a[href="pricing.html"],
.nav-links-scroll a[href="referral.html"],
#mobile-menu a[href="referral.html"],
.footer-grid a[href="referral.html"]{
  display:none !important;
}
.footer-grid li:has(> a[href="pricing.html"]),
.footer-grid li:has(> a[href="referral.html"]){
  display:none !important;
}

/* ---------- Buttons (shared pill CTAs beyond nav) ---------- */
.cta-btn, .cta-btn-glow{ border-radius:100px !important; }

.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--primary-end)); color:#fff; padding:16px 32px; border-radius:100px; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:8px; box-shadow:0 16px 40px -12px rgba(0,103,53,.45); transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease; will-change:transform; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 48px -12px rgba(0,103,53,.55); }
.btn-ghost{ border:1.5px solid var(--line); padding:16px 32px; border-radius:100px; font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(8px); transition:border-color .15s ease; }
.btn-ghost:hover{ border-color:var(--primary); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:1280px; margin:0 auto; padding:0 28px; }
.section-pad{ padding:128px 0; }
@media (max-width:768px){ .section-pad{ padding:84px 0; } }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--primary); letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; display:block; }
.section-h2{ font-size:clamp(32px,4.4vw,56px); font-weight:800; letter-spacing:-0.02em; line-height:1.05; }

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  .reveal.is-in{ opacity:1; transform:translateY(0); }
}

/* ---------- Marquee ---------- */
.marquee-wrap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; overflow:hidden; position:relative; background:rgba(255,255,255,.4); }
.marquee-wrap::before, .marquee-wrap::after{ content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none; }
.marquee-wrap::before{ left:0; background:linear-gradient(90deg,var(--base),transparent); }
.marquee-wrap::after{ right:0; background:linear-gradient(-90deg,var(--base),transparent); }
.marquee-track{ display:flex; gap:40px; width:max-content; animation:ca-marquee 32s linear infinite; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }
.marquee-track span{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:10px; }
.marquee-track span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--primary); }
@keyframes ca-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Surfaces bento (reusable grid of surface/feature cards) ---------- */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:860px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } }
.surf-card{ background:rgba(255,255,255,.55); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:20px; padding:26px; display:flex; flex-direction:column; gap:12px;
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; min-height:170px; }
.surf-card:hover{ transform:translateY(-4px); border-color:var(--primary); box-shadow:0 24px 48px -20px rgba(0,103,53,.25); }
.surf-card .ic{ width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--primary-end)); display:flex; align-items:center; justify-content:center; color:#fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.surf-card:hover .ic{ transform:rotate(-8deg) scale(1.08); }
.surf-card h3{ font-size:19px; font-weight:700; }
.surf-card p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
.surf-card.feature{ background:var(--dark); border-color:var(--dark); position:relative; overflow:hidden; }
.surf-card.feature h3, .surf-card.feature p{ color:rgba(255,255,255,.9); }
.surf-card.feature p{ color:rgba(255,255,255,.6); }

/* ---------- USP glass-frame mocks (chat / diff / view) ---------- */
.usp-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
@media (max-width:860px){ .usp-grid{ grid-template-columns:1fr; } }
.usp-card{ background:rgba(255,255,255,.6); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:16px;
  transition:border-color .2s ease, box-shadow .2s ease; }
.usp-card:hover{ border-color:var(--primary); box-shadow:0 20px 44px -22px rgba(0,103,53,.2); }
.usp-tag{ display:inline-flex; align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; background:var(--tint); color:var(--primary); padding:5px 12px; border-radius:100px; text-transform:uppercase; }
.usp-card h3{ font-size:24px; font-weight:800; }
.usp-card p{ color:var(--ink-soft); font-size:15px; line-height:1.6; }
.usp-stack{ display:flex; flex-direction:column; gap:20px; }
.chat-mock{ background:#fff; border:1px solid rgba(255,255,255,.9); border-radius:16px; padding:16px; margin-top:auto; display:flex; flex-direction:column; gap:8px; position:relative;
  box-shadow:0 20px 44px -22px rgba(0,80,40,.3), 0 1px 0 rgba(255,255,255,.9) inset; }
.chat-mock::before{ content:''; position:absolute; inset:-24px; z-index:-1; border-radius:28px; background:radial-gradient(circle at 70% 20%, rgba(143,249,173,.3), transparent 60%); filter:blur(18px); }
.bubble{ font-size:13px; padding:9px 13px; border-radius:12px; max-width:85%; }
.bubble.user{ align-self:flex-end; background:#eef1ee; border-bottom-right-radius:4px; }
.bubble.ai{ align-self:flex-start; background:var(--tint); border:1px solid rgba(0,103,53,.15); border-bottom-left-radius:4px; }
.typing-dots{ align-self:flex-start; display:flex; gap:4px; background:var(--tint); border:1px solid rgba(0,103,53,.15); border-radius:12px; border-bottom-left-radius:4px; padding:10px 13px; }
.typing-dots span{ width:5px; height:5px; border-radius:50%; background:var(--primary); opacity:.4; }
@media (prefers-reduced-motion: no-preference){ .typing-dots span{ animation:typing-bounce 1.1s ease-in-out infinite; } .typing-dots span:nth-child(2){animation-delay:.15s} .typing-dots span:nth-child(3){animation-delay:.3s} }
@keyframes typing-bounce{ 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }
.diff-mock{ background:var(--dark); color:#fff; border-radius:14px; padding:14px; font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.7; position:relative;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.08) inset; }
.diff-mock::before{ content:''; position:absolute; inset:-20px; z-index:-1; border-radius:24px; background:radial-gradient(circle at 30% 80%, rgba(143,249,173,.22), transparent 60%); filter:blur(16px); }
.diff-mock .del{ color:#ff9d93; } .diff-mock .add{ color:var(--bright); }
.view-mock{ border:1px solid rgba(255,255,255,.9); border-radius:14px; overflow:hidden; position:relative; box-shadow:0 20px 40px -22px rgba(0,80,40,.3), 0 1px 0 rgba(255,255,255,.9) inset; }
.view-tabs{ display:flex; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; text-transform:uppercase; }
.view-tabs div{ flex:1; text-align:center; padding:9px; }
.view-tabs div:first-child{ background:var(--tint); color:var(--primary); } .view-tabs div:last-child{ color:var(--ink-soft); }
.view-mock p{ padding:12px; font-size:13px; color:var(--ink-soft); }

/* ---------- Trust / dark coverage band ---------- */
.trust{ background:var(--dark); color:#fff; border-radius:32px; padding:72px 56px; position:relative; overflow:hidden; }
@media (max-width:768px){ .trust{ padding:48px 24px; } }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-bottom:48px; }
@media (max-width:768px){ .trust-grid{ grid-template-columns:1fr 1fr; } }
.trust-grid .num{ font-family:'JetBrains Mono',monospace; font-size:40px; font-weight:700; background:linear-gradient(135deg,var(--bright),#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.trust-grid .label{ font-size:13px; opacity:.6; margin-top:4px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:'JetBrains Mono',monospace; font-size:12px; padding:8px 16px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); display:inline-flex; align-items:center; gap:6px; }

/* ---------- Why / feature-pair cards ---------- */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:768px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{ background:rgba(255,255,255,.55); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:20px; padding:30px; }
.why-card h3{ font-size:20px; font-weight:700; margin-bottom:10px; }
.why-card p{ font-size:15px; color:var(--ink-soft); line-height:1.6; }

/* ---------- FAQ accordion — site-wide, auto-applied by motion.js to every
   <details> (except .owasp-mapping). No markup changes needed anywhere. ---------- */
details:not(.owasp-mapping) summary{ display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; list-style:none; }
details:not(.owasp-mapping) summary::-webkit-details-marker{ display:none; }
.faq-plus-auto{ position:relative; width:18px; height:18px; flex-shrink:0; }
.faq-plus-auto::before, .faq-plus-auto::after{ content:''; position:absolute; top:50%; left:50%; background:var(--primary); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.faq-plus-auto::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.faq-plus-auto::after{ width:2px; height:14px; transform:translate(-50%,-50%); }
details[open] .faq-plus-auto::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-body-auto{ height:0; overflow:hidden; transition:height .3s cubic-bezier(.16,1,.3,1); }
.faq-body-auto > div{ padding-top:12px; }

/* ---------- FAQ accordion (smooth height, JS-driven via theme-v2.js) ---------- */
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:768px){ .faq-grid{ grid-template-columns:1fr; } }
.faq-grid details{ background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:16px; padding:22px 24px; overflow:hidden; transition:border-color .2s ease; }
.faq-grid details[open]{ border-color:var(--primary); }
.faq-grid summary{ font-weight:700; font-size:16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-grid summary::-webkit-details-marker{ display:none; }
.faq-plus{ position:relative; width:18px; height:18px; flex-shrink:0; }
.faq-plus::before, .faq-plus::after{ content:''; position:absolute; top:50%; left:50%; background:var(--primary); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.faq-plus::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.faq-plus::after{ width:2px; height:14px; transform:translate(-50%,-50%); }
.faq-grid details[open] .faq-plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-body{ height:0; overflow:hidden; transition:height .3s cubic-bezier(.16,1,.3,1); }
.faq-body > div{ padding-top:12px; }
.faq-grid p{ font-size:14px; color:var(--ink-soft); line-height:1.6; }

/* ---------- CTA glow ---------- */
.cta-section{ text-align:center; padding:150px 0 180px; position:relative; }
.cta-glow{ position:absolute; left:50%; top:50%; width:360px; height:360px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(143,249,173,.35), transparent 70%); z-index:1; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){ .cta-glow{ animation:cta-pulse 3s ease-in-out infinite; } }
@keyframes cta-pulse{ 0%,100%{opacity:.5; transform:translate(-50%,-50%) scale(1);} 50%{opacity:.9; transform:translate(-50%,-50%) scale(1.15);} }
.cta-section h2{ font-size:clamp(40px,6vw,72px); margin-bottom:24px; position:relative; z-index:2; }
.cta-section p{ font-size:18px; color:var(--ink-soft); max-width:480px; margin:0 auto 40px; position:relative; z-index:2; }
.cta-section .hero-ctas{ position:relative; z-index:2; justify-content:center; margin-bottom:0; display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- CTA v3: rounded gradient spotlight card, replacing the old
   flat full-bleed dark band sitewide. ---------- */
.cta-v3-wrap{ width:100%; padding:0 28px; max-width:1440px; margin:0 auto; box-sizing:border-box; }
@media (max-width:768px){ .cta-v3-wrap{ padding:0 16px; } }
.cta-v3{
  position:relative; overflow:hidden; border-radius:32px; isolation:isolate;
  background:linear-gradient(155deg,#0d130e 0%,var(--dark) 45%,var(--primary) 150%);
  padding:88px 40px; text-align:center;
}
@media (max-width:768px){ .cta-v3{ padding:56px 24px; border-radius:24px; } }
.cta-v3::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.08;
  background-image:linear-gradient(to right,#8ff9ad 1px,transparent 1px),linear-gradient(to bottom,#8ff9ad 1px,transparent 1px);
  background-size:56px 56px;
}
.cta-v3-sweep{
  position:absolute; top:-20%; right:-15%; width:60%; aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(143,249,173,.35) 0deg, rgba(143,249,173,.12) 20deg, transparent 50deg);
  filter:blur(6px);
}
@media (prefers-reduced-motion: no-preference){ .cta-v3-sweep{ animation:cta-v3-sweep-spin 9s linear infinite; } }
@keyframes cta-v3-sweep-spin{ to{ transform:rotate(360deg); } }
.cta-v3-glow{
  position:absolute; left:50%; top:46%; width:420px; height:420px; max-width:70vw; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(143,249,173,.3), transparent 70%); z-index:0; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){ .cta-v3-glow{ animation:cta-pulse 3s ease-in-out infinite; } }
.cta-v3-inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:20px; }
.cta-v3 .eyebrow{ color:var(--bright); }
.cta-v3 h2{ color:#fff; font-size:clamp(32px,4.6vw,52px); font-weight:800; letter-spacing:-0.03em; line-height:1.05; margin:0; }
.cta-v3 p{ color:rgba(255,255,255,.65); font-size:17px; line-height:1.6; margin:0; }
.cta-v3-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.cta-v3-btn-primary{
  background:linear-gradient(135deg,var(--bright),var(--primary-end)); color:var(--dark); padding:15px 30px; border-radius:100px; font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; gap:8px; box-shadow:0 16px 40px -14px rgba(143,249,173,.5); transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.cta-v3-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 48px -14px rgba(143,249,173,.6); }
.cta-v3-btn-ghost{
  border:1.5px solid rgba(255,255,255,.25); color:#fff; padding:15px 30px; border-radius:100px; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:8px; transition:border-color .15s ease, background .15s ease;
}
.cta-v3-btn-ghost:hover{ border-color:var(--bright); background:rgba(255,255,255,.06); }

/* ---------- Bolder CTA headline — "Stop shipping vulnerabilities. Start
   shipping secure." was only 700-weight by default; match the homepage's
   800-weight, slightly larger CTA treatment sitewide. ---------- */
section.reveal.bg-on-background h2.font-display-lg{
  font-weight:800; letter-spacing:-0.03em; font-size:clamp(34px,5vw,56px); line-height:1.05;
}

/* ---------- Dark CTA band (shared across ~17 inner pages) — pill the
   secondary button (same missing-radius bug as .cta-btn) and add the
   pulsing center glow signature from the homepage CTA. ---------- */
section.reveal.bg-on-background .border-outline{ border-radius:100px !important; transition:box-shadow .2s ease; }
section.reveal.bg-on-background .border-outline:hover{ box-shadow:0 6px 16px -8px rgba(143,249,173,.25); }
section.reveal.bg-on-background{ position:relative; }
section.reveal.bg-on-background > div.relative.z-10::before{
  content:''; position:absolute; left:50%; top:40%; width:360px; height:360px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(143,249,173,.3), transparent 70%); z-index:-1; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  section.reveal.bg-on-background > div.relative.z-10::before{ animation:cta-pulse 3s ease-in-out infinite; }
}

/* ---------- Shared rounded form field (used by contact + free-scan forms) ---------- */
.form-field {
  width:100%; background:rgba(255,255,255,.6); border:1.5px solid var(--line) !important;
  border-radius:12px !important; padding:12px 14px !important; color:var(--ink);
  font-family:'JetBrains Mono',monospace; font-size:13.5px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-field:focus{ outline:none; border-color:var(--primary) !important; background:#fff; box-shadow:0 0 0 4px rgba(0,103,53,.1); }
.form-field::placeholder{ color:#94a3b8; }
textarea.form-field{ resize:vertical; min-height:110px; }

/* ---------- Simple page hero (surface pages, core marketing pages) ---------- */
.page-hero{ padding:160px 0 72px; position:relative; }
@media (max-width:768px){ .page-hero{ padding:120px 0 56px; } }
/* Used on surface/inner pages as a <header> already nested inside a
   padded <main> (handles nav clearance itself) — only bottom spacing applies. */
header.page-hero{ padding-top:0; padding-bottom:0; }
/* Typography-only variant for headers that already manage their own
   top padding (e.g. pt-32 directly on the header, not on <main>) —
   must not touch padding, only re-style the heading/lead. */
.page-hero-type h1{ font-size:clamp(38px,5.6vw,64px); font-weight:800; letter-spacing:-0.02em; line-height:1.03; }
.page-hero-type .lead, .page-hero-type p:first-of-type{ font-size:clamp(16px,1.4vw,18px); color:var(--ink-soft); line-height:1.6; }
.page-hero h1{ font-size:clamp(38px,5.6vw,64px); font-weight:800; letter-spacing:-0.02em; line-height:1.03; margin-bottom:20px; }
.page-hero .lead{ font-size:clamp(16px,1.4vw,18px); color:var(--ink-soft); max-width:640px; line-height:1.6; margin-bottom:32px; }
.page-hero .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- Footer (multi-column) ---------- */
.site-footer-v2{ padding:0; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:64px 0 36px; }
@media (max-width:768px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
.footer-grid h4{ font-size:13px; font-weight:700; margin-bottom:16px; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:10px; padding:0; margin:0; }
.footer-grid a{ opacity:.72; transition:opacity .15s ease; }
.footer-grid a:hover{ opacity:1; color:var(--primary); }
.footer-brand p{ max-width:280px; line-height:1.6; opacity:.75; font-size:14px; margin-top:12px; }
.footer-bottom{ border-top:1px solid var(--line); padding:20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; opacity:.7; font-size:13px; }