/* =========================================================================
   Yonda Modern — shared high-end design system
   Loaded AFTER each page's inline <style> so these rules win the cascade.
   Fonts: Space Grotesk (headings) + Inter (body) via Google Fonts <link>.
   ========================================================================= */

:root{
  --ym-ink:#0b1020;
  --ym-ink-2:#141a2e;
  --ym-ink-3:#1c2440;
  --ym-muted:#5b6472;
  --ym-faint:#9aa3b2;
  --ym-surface:#ffffff;
  --ym-surface-soft:#f7f8fb;
  --ym-surface-soft-2:#eef1f7;
  --ym-border:#e6e9ef;
  --ym-border-strong:#d6dbe4;
  --ym-accent:#2563eb;
  --ym-accent-2:#06b6d4;
  --ym-grad:linear-gradient(120deg,#2563eb 0%,#06b6d4 100%);
  --ym-grad-soft:linear-gradient(120deg,rgba(37,99,235,.12),rgba(6,182,212,.12));
  --ym-radius:16px;
  --ym-radius-lg:24px;
  --ym-radius-pill:999px;
  --ym-shadow:0 10px 34px rgba(11,16,32,.08);
  --ym-shadow-sm:0 4px 16px rgba(11,16,32,.06);
  --ym-shadow-lg:0 24px 60px rgba(11,16,32,.14);
  --ym-font-head:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ym-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ----- Base typography retheme (scoped to body, not the chatbot root) ----- */
body{
  font-family:var(--ym-font-body);
  color:var(--ym-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.01em;
}
body h1,body h2,body h3,body h4,
body .section-title,body .hero h1{
  font-family:var(--ym-font-head);
  letter-spacing:-0.02em;
}
/* Keep hero text readable over photo overlays */
.hero,.pricing-hero{color:#fff;}
.hero h1,.hero h2,.hero p,.hero .subtitle,
.pricing-hero h1,.pricing-hero p{color:#fff!important;}

/* Gradient keyword helper */
.ym-grad-text{
  background:var(--ym-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ----- Eyebrow label ----- */
.ym-eyebrow{
  display:inline-block;
  font-family:var(--ym-font-body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ym-accent);
  margin-bottom:1rem;
}
.ym-eyebrow.on-dark{color:#7dd3fc;}

/* ----- Buttons (also retheme legacy .cta-button) ----- */
.ym-btn,
.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--ym-font-body);
  font-weight:600;
  font-size:1rem;
  line-height:1;
  padding:.95rem 1.6rem;
  border-radius:var(--ym-radius-pill);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.ym-btn-primary,
.cta-button:not(.secondary){
  background:var(--ym-ink);
  color:#fff;
  box-shadow:var(--ym-shadow-sm);
}
.ym-btn-primary:hover,
.cta-button:not(.secondary):hover{
  background:var(--ym-ink-2);
  transform:translateY(-2px);
  box-shadow:var(--ym-shadow);
}
.ym-btn-grad{
  background:var(--ym-grad);
  color:#fff;
  box-shadow:0 8px 24px rgba(37,99,235,.32);
}
.ym-btn-grad:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,99,235,.42);}
.ym-btn-ghost,
.cta-button.secondary{
  background:transparent;
  color:var(--ym-ink);
  border:1px solid var(--ym-border-strong);
}
.ym-btn-ghost:hover,
.cta-button.secondary:hover{
  border-color:var(--ym-ink);
  transform:translateY(-2px);
  background:var(--ym-surface);
}
.ym-band-dark .ym-btn-ghost,
.ym-cta-card .ym-btn-ghost,
.photo-hero .ym-btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);}
.ym-band-dark .ym-btn-ghost:hover,
.ym-cta-card .ym-btn-ghost:hover,
.photo-hero .ym-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}

/* ----- Layout helpers ----- */
.ym-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.ym-section{padding:96px 0;}
.ym-section.tight{padding:64px 0;}
.ym-center{text-align:center;}
.ym-grid{display:grid;gap:24px;}
.ym-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.ym-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.ym-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.ym-lede{font-size:1.15rem;color:var(--ym-muted);max-width:680px;margin:0 auto;line-height:1.7;}
.ym-section-head{max-width:720px;margin:0 auto 56px;text-align:center;}
.ym-section-head h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:1rem;line-height:1.1;}

/* ----- Cards (also retheme legacy .service-card) ----- */
.ym-card,
.service-card{
  background:var(--ym-surface);
  border:1px solid var(--ym-border);
  border-radius:var(--ym-radius);
  padding:32px;
  box-shadow:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ym-card:hover,
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--ym-shadow);
  border-color:var(--ym-border-strong);
}
.ym-card h3{font-family:var(--ym-font-head);font-size:1.2rem;margin-bottom:.6rem;color:var(--ym-ink);}
.ym-card p{color:var(--ym-muted);line-height:1.7;}

/* ----- Line icon chip ----- */
.ym-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;height:52px;
  border-radius:14px;
  background:var(--ym-grad-soft);
  border:1px solid var(--ym-border);
  margin-bottom:20px;
  color:var(--ym-accent);
}
.ym-icon svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.ym-icon.on-dark{background:rgba(125,211,252,.12);border-color:rgba(125,211,252,.25);color:#7dd3fc;}

/* ----- Eyebrow/section-title legacy retheme ----- */
.section-title{font-size:clamp(1.9rem,4vw,2.8rem)!important;line-height:1.1;}
.section-subtitle{color:var(--ym-muted)!important;}

/* ----- Photo hero ----- */
.photo-hero{
  position:relative;
  border-radius:var(--ym-radius-lg);
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:center;
  isolation:isolate;
}
.photo-hero>img,.photo-hero .photo-hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
.photo-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,rgba(11,16,32,.92) 0%,rgba(11,16,32,.72) 45%,rgba(11,16,32,.35) 100%);
}
.photo-hero .photo-hero-inner{padding:64px;color:#fff;max-width:760px;}
.photo-hero h1{color:#fff!important;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;margin-bottom:1.2rem;}
.photo-hero p{color:rgba(255,255,255,.86);font-size:1.15rem;line-height:1.7;max-width:560px;}

/* ----- Media figure (rounded photo) ----- */
.ym-media{
  border-radius:var(--ym-radius-lg);
  overflow:hidden;
  border:1px solid var(--ym-border);
  box-shadow:var(--ym-shadow);
}
.ym-media img{display:block;width:100%;height:100%;object-fit:cover;}
.ym-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.ym-split .ym-media{min-height:380px;}

/* ----- Dark band + dark CTA card ----- */
.ym-band-dark{
  position:relative;
  background:var(--ym-ink);
  color:#fff;
  overflow:hidden;
}
.ym-band-dark::before{
  content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.28),transparent 60%);
  pointer-events:none;
}
.ym-band-dark .ym-container{position:relative;z-index:1;}
.ym-band-dark h2,.ym-band-dark h3{color:#fff;}
.ym-band-dark p{color:rgba(255,255,255,.72);}

.ym-stat-num{font-family:var(--ym-font-head);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:700;
  background:var(--ym-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;line-height:1;}
.ym-stat-label{color:rgba(255,255,255,.66);margin-top:.5rem;font-size:.95rem;}

.ym-cta-card{
  position:relative;
  background:var(--ym-ink);
  color:#fff;
  border-radius:var(--ym-radius-lg);
  padding:72px 48px;
  text-align:center;
  overflow:hidden;
}
.ym-cta-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(37,99,235,.35),transparent 60%);
}
.ym-cta-card>*{position:relative;z-index:1;}
.ym-cta-card h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1rem;}
.ym-cta-card p{color:rgba(255,255,255,.78);max-width:560px;margin:0 auto 2rem;}

/* ----- Pill / chip list (tools) ----- */
.ym-pills{display:flex;flex-wrap:wrap;gap:12px;}
.ym-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:var(--ym-radius-pill);
  border:1px solid var(--ym-border);background:var(--ym-surface);
  font-weight:500;font-size:.95rem;color:var(--ym-ink);
  box-shadow:var(--ym-shadow-sm);
}
.ym-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ym-grad);}
.ym-band-dark .ym-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;}

/* ----- Numbered steps ----- */
.ym-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:var(--ym-ink);color:#fff;font-family:var(--ym-font-head);font-weight:700;
  margin-bottom:18px;
}

/* ----- Header retheme (lighter, crisper) ----- */
body>header{
  background:rgba(255,255,255,.82)!important;
  border-bottom:1px solid var(--ym-border)!important;
  box-shadow:none!important;
}
.nav-links a{color:var(--ym-muted);}
.nav-links a:hover{color:var(--ym-ink);}

/* ----- Responsive header (authoritative — overrides per-page rules) ----- */
body>header nav{gap:1.5rem;flex-wrap:nowrap;}
.logo{flex-shrink:0;}
.logo-icon,.logo-text{flex-shrink:0;width:auto;}
.logo-text{height:26px;max-width:none;}
.nav-links{flex-wrap:nowrap;align-items:center;}
.nav-links a{white-space:nowrap;}
@media (min-width:1025px){
  .mobile-menu-btn{display:none!important;}
}
@media (max-width:1024px){
  .mobile-menu-btn{display:block!important;z-index:101;}
  .nav-links{
    position:fixed;top:0;right:-100%;height:100vh;width:78%;max-width:320px;
    background:#fff;flex-direction:column;align-items:flex-start;
    padding:5.5rem 2rem 2rem;gap:1.25rem;
    box-shadow:-2px 0 40px rgba(11,16,32,.18);
    transition:right .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;
  }
  .nav-links.active{right:0;}
  .nav-links a{font-size:1.05rem;}
}

/* ----- Footer retheme ----- */
body>footer{background:var(--ym-ink)!important;}

/* ----- Responsive ----- */
@media (max-width:900px){
  .ym-grid.cols-3,.ym-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .ym-split{grid-template-columns:1fr;gap:32px;}
  .photo-hero .photo-hero-inner{padding:40px 28px;}
}
@media (max-width:560px){
  .ym-grid.cols-2,.ym-grid.cols-3,.ym-grid.cols-4{grid-template-columns:1fr;}
  .ym-section{padding:64px 0;}
  .ym-cta-card{padding:48px 24px;}
}

/* ----- Respect reduced motion ----- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;}
}