/* ============================================================
   Answerly — Design System
   Display: Space Grotesk · Body: Inter · Data/Mono: IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --black:#111111;
  --ink:#1a1a1a;
  --ink-soft:#52525b;
  --ink-faint:#8a8a92;
  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --blue-tint:#EEF3FF;
  --red:#E53935;
  --red-tint:#FDECEC;
  --white:#FFFFFF;
  --off-white:#FAFAF9;
  --paper:#F5F4F1;
  --line:#E7E5E1;
  --line-soft:#EFEDE9;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;

  --shadow-sm:0 1px 2px rgba(17,17,17,0.05), 0 1px 1px rgba(17,17,17,0.03);
  --shadow-md:0 8px 24px rgba(17,17,17,0.07), 0 2px 6px rgba(17,17,17,0.04);
  --shadow-lg:0 24px 60px rgba(17,17,17,0.12), 0 6px 16px rgba(17,17,17,0.06);

  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; font-size:inherit;}

:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--black);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 3px var(--red-tint);
}

.container{
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}
.container-narrow{max-width:840px; margin:0 auto; padding:0 28px;}

section{padding:100px 0;}
.section-tight{padding:64px 0;}
@media (max-width:768px){
  section{padding:64px 0;}
  .section-tight{padding:44px 0;}
}

.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,42px); margin-top:14px;}
.section-head p{color:var(--ink-soft); font-size:17px; margin-top:16px;}

.bg-paper{background:var(--paper);}
.bg-black{background:var(--black); color:var(--white);}
.bg-black h2, .bg-black h3, .bg-black h4{color:var(--white);}
.bg-blue-tint{background:var(--blue-tint);}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-weight:600;
  font-size:15px;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--black); color:var(--white);}
.btn-primary:hover{background:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-accent{background:var(--blue); color:var(--white);}
.btn-accent:hover{background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,99,235,.35);}
.btn-outline{background:transparent; color:var(--black); border-color:var(--line);}
.btn-outline:hover{border-color:var(--black); transform:translateY(-2px);}
.btn-ghost-white{background:transparent; color:var(--white); border-color:rgba(255,255,255,.28);}
.btn-ghost-white:hover{border-color:var(--white); transform:translateY(-2px);}
.btn-white{background:var(--white); color:var(--black);}
.btn-white:hover{background:var(--blue); color:var(--white); transform:translateY(-2px);}
.btn-sm{padding:10px 18px; font-size:13.5px;}
.btn-block{width:100%;}

.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

/* ---------------- Navigation ---------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:1240px; margin:0 auto;
}
.nav-logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--black);}
.nav-logo img{height:30px; width:auto;}
.nav-links{display:flex; align-items:center; gap:2px;}
.nav-item{position:relative;}
.nav-link{
  display:flex; align-items:center; gap:5px;
  padding:10px 15px; border-radius:100px;
  font-size:14.5px; font-weight:500; color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav-link:hover, .nav-link.active{background:var(--paper); color:var(--blue);}
.nav-link svg{width:13px; height:13px; transition:transform .25s var(--ease);}
.nav-item:hover .nav-link svg{transform:rotate(180deg);}

.mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  width:560px; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:18px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.nav-item:hover .mega{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.mega a{display:flex; flex-direction:column; gap:3px; padding:11px 14px; border-radius:12px; transition:background .2s;}
.mega a:hover{background:var(--paper);}
.mega a strong{font-size:14px; font-weight:600; color:var(--black);}
.mega a span{font-size:12.5px; color:var(--ink-faint);}

.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;}
.nav-toggle span{width:22px; height:2px; background:var(--black); border-radius:2px; transition:.3s;}

@media (max-width:1080px){
  .nav-links, .nav-cta .btn-outline{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta .btn-accent{padding:10px 16px; font-size:13.5px;}
}

.mobile-menu{
  position:fixed; inset:0; background:var(--white); z-index:1200;
  transform:translateX(100%); transition:transform .4s var(--ease);
  overflow-y:auto; padding:24px 24px 60px;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px;}
.mobile-menu a{display:block; padding:14px 4px; font-size:17px; font-weight:600; border-bottom:1px solid var(--line-soft);}
.mobile-menu .mobile-sub a{font-size:14.5px; font-weight:500; color:var(--ink-soft); padding:10px 4px;}
.mobile-close{background:none; border:none; font-size:28px; line-height:1; color:var(--black);}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  padding:88px 0 100px;
  background:
    radial-gradient(700px 420px at 82% -10%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(500px 320px at 4% 8%, rgba(229,57,53,.09), transparent 60%),
    var(--white);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(38px,5.2vw,64px); letter-spacing:-0.03em;}
.hero h1 .accent{color:var(--blue);}
.hero p.lead{font-size:18px; color:var(--ink-soft); max-width:520px; margin-top:20px;}
.hero-proof{display:flex; align-items:center; gap:14px; margin-top:34px; font-size:13.5px; color:var(--ink-faint);}
.avatar-stack{display:flex;}
.avatar-stack span{width:30px; height:30px; border-radius:50%; border:2px solid var(--white); background:var(--paper); margin-left:-8px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; color:var(--ink-soft);}
.avatar-stack span:first-child{margin-left:0;}

@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
}

/* --- Signature: live call visualizer card --- */
.call-card{
  background:var(--black); color:var(--white); border-radius:var(--radius-xl);
  padding:26px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.call-card::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(280px 200px at 90% -10%, rgba(37,99,235,.35), transparent 60%);
  pointer-events:none;
}
.call-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.call-status{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:#9CA8C4;}
.call-status .dot{width:7px; height:7px; border-radius:50%; background:#34d17c; box-shadow:0 0 0 3px rgba(52,209,124,.25); animation:pulse-dot 1.6s infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;} 50%{opacity:.35;}}
.call-timer{font-family:var(--font-mono); font-size:12px; color:#9CA8C4;}

.waveform{display:flex; align-items:flex-end; gap:3px; height:56px; margin:6px 0 22px;}
.waveform span{
  flex:1; background:linear-gradient(180deg, var(--blue), #7fa6ff);
  border-radius:3px; min-width:3px;
  animation:wave 1.2s ease-in-out infinite;
}
.waveform span:nth-child(odd){background:linear-gradient(180deg, var(--red), #ff8f8a);}
@keyframes wave{
  0%,100%{ transform:scaleY(.25); }
  50%{ transform:scaleY(1); }
}
.call-card .waveform span:nth-child(1){animation-delay:.0s; height:30%;}
.call-card .waveform span:nth-child(2){animation-delay:.1s; height:80%;}
.call-card .waveform span:nth-child(3){animation-delay:.2s; height:45%;}
.call-card .waveform span:nth-child(4){animation-delay:.3s; height:95%;}
.call-card .waveform span:nth-child(5){animation-delay:.15s; height:60%;}
.call-card .waveform span:nth-child(6){animation-delay:.35s; height:35%;}
.call-card .waveform span:nth-child(7){animation-delay:.05s; height:75%;}
.call-card .waveform span:nth-child(8){animation-delay:.25s; height:50%;}
.call-card .waveform span:nth-child(9){animation-delay:.4s; height:90%;}
.call-card .waveform span:nth-child(10){animation-delay:.2s; height:40%;}
.call-card .waveform span:nth-child(11){animation-delay:.1s; height:65%;}
.call-card .waveform span:nth-child(12){animation-delay:.3s; height:30%;}
.call-card .waveform span:nth-child(13){animation-delay:.0s; height:70%;}
.call-card .waveform span:nth-child(14){animation-delay:.2s; height:45%;}
.call-card .waveform span:nth-child(15){animation-delay:.15s; height:85%;}
.call-card .waveform span:nth-child(16){animation-delay:.35s; height:55%;}
.call-card .waveform span:nth-child(17){animation-delay:.05s; height:38%;}
.call-card .waveform span:nth-child(18){animation-delay:.25s; height:72%;}

.call-transcript{display:flex; flex-direction:column; gap:10px; font-size:13.5px;}
.call-transcript .line{display:flex; gap:10px; opacity:0; animation:fadein .5s var(--ease) forwards;}
.call-transcript .who{font-family:var(--font-mono); font-size:11px; color:#7C89A8; min-width:52px; padding-top:2px;}
.call-transcript .txt{color:#E7EAF3;}
@keyframes fadein{ to{opacity:1;} }
.call-transcript .line:nth-child(1){animation-delay:.3s;}
.call-transcript .line:nth-child(2){animation-delay:.9s;}
.call-transcript .line:nth-child(3){animation-delay:1.5s;}
.call-outcome{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between;}
.call-outcome .tag{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; background:rgba(52,209,124,.15); color:#5FE39A; padding:6px 10px; border-radius:100px;}

.hero-stat-strip{display:flex; gap:10px; margin-top:22px;}
.hero-stat-strip div{flex:1; background:var(--paper); border-radius:var(--radius-sm); padding:14px 14px; }
.hero-stat-strip strong{display:block; font-family:var(--font-display); font-size:20px; color:var(--black);}
.hero-stat-strip span{font-size:12px; color:var(--ink-faint);}

/* ---------------- Logos strip ---------------- */
.logo-strip{padding:44px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.logo-strip .label{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-align:center; margin-bottom:26px;}
.logo-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center;}
.logo-row .item{font-family:var(--font-display); font-weight:600; font-size:19px; color:#B9B7B0; letter-spacing:-.02em; transition:color .3s;}
.logo-row .item:hover{color:var(--ink);}

/* ---------------- Cards / grids ---------------- */
.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-md);
  padding:30px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line);}
.card .icon{
  width:44px; height:44px; border-radius:12px; background:var(--blue-tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.card .icon.red{background:var(--red-tint); color:var(--red);}
.card h3{font-size:18px; margin-bottom:10px;}
.card p{color:var(--ink-soft); font-size:14.5px; margin:0;}

.feature-row{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.feature-row.reverse{direction:rtl;}
.feature-row.reverse > *{direction:ltr;}
@media (max-width:900px){.feature-row{grid-template-columns:1fr; gap:36px;}}
.feature-media{
  background:var(--paper); border-radius:var(--radius-lg); padding:34px; min-height:280px;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.feature-list{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-soft);}
.feature-list svg{flex-shrink:0; margin-top:3px; color:var(--blue);}

/* ---------------- Stats ---------------- */
.stat-block{text-align:center;}
.stat-block strong{font-family:var(--font-display); font-size:clamp(34px,4vw,50px); color:var(--white); display:block;}
.stat-block span{font-size:13.5px; color:#9CA8C4; font-family:var(--font-mono);}

/* ---------------- Steps ---------------- */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}
.step{position:relative; padding-top:8px;}
.step .num{font-family:var(--font-mono); font-size:13px; color:var(--blue); margin-bottom:14px; display:block;}
.step h3{font-size:17px; margin-bottom:8px;}
.step p{font-size:14px; color:var(--ink-soft);}

/* ---------------- Testimonials ---------------- */
.tcard{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:28px; display:flex; flex-direction:column; gap:18px;}
.tcard .stars{color:var(--red); font-size:13px; letter-spacing:2px;}
.tcard p{font-size:15px; color:var(--ink); margin:0;}
.tcard .who{display:flex; align-items:center; gap:12px; margin-top:auto;}
.tcard .who .ava{width:38px; height:38px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);}
.tcard .who strong{display:block; font-size:13.5px;}
.tcard .who span{font-size:12px; color:var(--ink-faint);}

/* ---------------- Pricing ---------------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
@media (max-width:940px){.pricing-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}
.price-card{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:34px; display:flex; flex-direction:column;}
.price-card.featured{background:var(--black); color:var(--white); border-color:var(--black); box-shadow:var(--shadow-lg); transform:scale(1.03);}
.price-card.featured .ink-soft{color:#B7BDC9;}
.price-card .plan{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);}
.price-card.featured .plan{color:#7fa6ff;}
.price-card .amount{font-family:var(--font-display); font-size:44px; margin:14px 0 4px; color:var(--black);}
.price-card.featured .amount{color:var(--white);}
.price-card .per{font-size:13px; color:var(--ink-faint);}
.price-card .desc{font-size:14px; color:var(--ink-soft); margin:14px 0 22px;}
.price-card.featured .desc{color:#B7BDC9;}
.price-card ul{display:flex; flex-direction:column; gap:12px; margin:22px 0 26px; flex:1;}
.price-card li{display:flex; gap:10px; font-size:14px; align-items:flex-start;}
.price-card li svg{flex-shrink:0; margin-top:3px; color:var(--blue);}
.price-card.featured li svg{color:#7fa6ff;}
.badge-pop{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--red); color:var(--white); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; padding:6px 14px; border-radius:100px;}
.price-card{position:relative;}

/* ---------------- FAQ ---------------- */
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; background:none; border:none; text-align:left; font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--black);}
.faq-q .plus{flex-shrink:0; width:22px; height:22px; position:relative;}
.faq-q .plus::before,.faq-q .plus::after{content:''; position:absolute; background:var(--black); transition:transform .3s var(--ease), opacity .3s;}
.faq-q .plus::before{width:100%; height:2px; top:50%; left:0; transform:translateY(-50%);}
.faq-q .plus::after{width:2px; height:100%; left:50%; top:0; transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{color:var(--ink-soft); font-size:14.5px; padding-bottom:22px; margin:0; max-width:680px;}

/* ---------------- Blog ---------------- */
.blog-card{border:1px solid var(--line-soft); border-radius:var(--radius-md); overflow:hidden; background:var(--white); transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.blog-thumb{height:170px; background:linear-gradient(135deg, var(--paper), #EDEBFE); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.blog-body{padding:22px;}
.blog-tag{font-family:var(--font-mono); font-size:11px; color:var(--blue); text-transform:uppercase; letter-spacing:.06em;}
.blog-body h3{font-size:16.5px; margin:10px 0 8px;}
.blog-body p{font-size:13.5px; color:var(--ink-soft); margin:0 0 14px;}
.blog-meta{font-size:12px; color:var(--ink-faint); font-family:var(--font-mono); display:flex; justify-content:space-between;}

/* ---------------- CTA banner ---------------- */
.cta-banner{
  background:var(--black); border-radius:var(--radius-xl); padding:64px; text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before{content:''; position:absolute; inset:0; background:radial-gradient(500px 260px at 50% -20%, rgba(37,99,235,.35), transparent 65%);}
.cta-banner *{position:relative;}
.cta-banner h2{color:var(--white); font-size:clamp(26px,4vw,38px); max-width:600px; margin:0 auto;}
.cta-banner p{color:#B7BDC9; margin:16px auto 30px; max-width:480px;}
.cta-banner .btn-row{justify-content:center;}

/* ---------------- Forms ---------------- */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.field label{font-size:13px; font-weight:600; color:var(--black);}
.field input, .field textarea, .field select{
  padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14.5px; background:var(--white);
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); outline:none;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}
.form-card{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-md);}
.check-row{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-soft);}

/* ---------------- Info strip (contact detail cards) ---------------- */
.info-card{display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line-soft);}
.info-card:last-child{border-bottom:none;}
.info-card .ic{width:40px; height:40px; border-radius:10px; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info-card strong{display:block; font-size:14.5px; margin-bottom:3px;}
.info-card span, .info-card a{font-size:13.5px; color:var(--ink-soft);}

.map-placeholder{
  border-radius:var(--radius-lg); overflow:hidden; height:340px; position:relative;
  background:
    linear-gradient(rgba(17,17,17,.55), rgba(17,17,17,.35)),
    repeating-linear-gradient(0deg, #d9d6cf 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, #d9d6cf 0 1px, transparent 1px 40px),
    var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.map-placeholder .pin{background:var(--white); padding:14px 20px; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); text-align:center;}
.map-placeholder .pin strong{font-family:var(--font-display); font-size:14.5px;}
.map-placeholder .pin span{font-size:12px; color:var(--ink-faint); font-family:var(--font-mono);}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--black); color:#C9CDD6; padding:76px 0 30px;}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:30px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1);}
@media (max-width:940px){.footer-top{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.footer-top{grid-template-columns:repeat(2,1fr);}}
.footer-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--white); margin-bottom:14px;}
.footer-brand img{height:26px;}
.footer-top p{font-size:13.5px; color:#8B90A0; max-width:260px; margin:0 0 20px;}
.footer-col h4{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#7C89A8; margin-bottom:16px; font-weight:500;}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:13.5px; color:#C9CDD6; transition:color .2s;}
.footer-col a:hover{color:var(--white);}
.social-row{display:flex; gap:10px; margin-top:6px;}
.social-row a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; transition:.25s;}
.social-row a:hover{background:var(--blue); border-color:var(--blue);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; color:#7C8194; flex-wrap:wrap; gap:12px;}
.footer-bottom .legal-links{display:flex; gap:18px; flex-wrap:wrap;}
.footer-bottom a:hover{color:var(--white);}

/* ---------------- Misc ---------------- */
.tag-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:100px; background:var(--paper); font-size:12.5px; font-weight:500; color:var(--ink-soft);}
.divider{height:1px; background:var(--line-soft); margin:0;}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

.page-hero{padding:64px 0 60px; background:var(--paper); text-align:center;}
.page-hero h1{font-size:clamp(32px,5vw,52px); margin-top:16px;}
.page-hero p{max-width:600px; margin:16px auto 0; color:var(--ink-soft); font-size:16.5px;}
.breadcrumb{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-bottom:6px;}
.breadcrumb a:hover{color:var(--blue);}

.table-compare{width:100%; border-collapse:collapse; margin-top:20px;}
.table-compare th, .table-compare td{padding:16px; text-align:left; border-bottom:1px solid var(--line-soft); font-size:14px;}
.table-compare th{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);}
.table-compare td.check{color:var(--blue); text-align:center;}
.table-compare .rowlabel{font-weight:600;}

.value-card{display:flex; gap:16px;}
.value-card .n{font-family:var(--font-mono); color:var(--blue); font-size:13px; flex-shrink:0; padding-top:3px;}

.job-card{display:flex; justify-content:space-between; align-items:center; padding:26px 0; border-bottom:1px solid var(--line-soft); gap:20px; flex-wrap:wrap;}
.job-card h3{font-size:17px; margin-bottom:6px;}
.job-meta{display:flex; gap:14px; flex-wrap:wrap;}
.job-meta span{font-size:12.5px; color:var(--ink-faint); font-family:var(--font-mono);}

.industry-tile{display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--line-soft); border-radius:var(--radius-md); transition:.3s;}
.industry-tile:hover{border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-3px);}
.industry-tile .ic{width:38px; height:38px; border-radius:10px; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center;}
.industry-tile h3{font-size:15.5px;}
.industry-tile span{font-size:13px; color:var(--ink-soft);}

.err-code{font-family:var(--font-display); font-size:clamp(90px,18vw,180px); color:var(--black); line-height:1; letter-spacing:-.04em;}

.newsletter-box{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:44px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-form input{padding:14px 18px; border-radius:100px; border:1px solid var(--line); min-width:260px;}

@media (max-width:768px){
  .feature-row, .grid-2{gap:28px;}
  .cta-banner{padding:44px 24px;}
  .newsletter-box{flex-direction:column; text-align:center;}
}