/* ==========================================================
   Production stylesheet
   1. BISTON design-system tokens (merged, original import order)
   2. Component styles for the tab system + mobile nav
   3. Responsive overrides (inline styles are beaten with !important)
   ========================================================== */

/* ---------- tokens/fonts.css ---------- */
/* BISTON webfonts.
   NOTE: The business card wordmark "BISTON" is a classic transitional serif
   (Times/Georgia family) and the body copy is a neutral grotesque (Arial/Helvetica).
   No brand font files were provided, so these are the nearest Google Fonts matches:
     - Serif display -> Lora
     - UI / body     -> IBM Plex Sans
     - Mono / data   -> IBM Plex Mono
   Flagged for the user: please supply the real brand fonts to replace these. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- tokens/colors.css ---------- */
/* ============================================================
   BISTON — Color tokens
   Brand sampled from the corporate identity (business card):
     navy  #293B85  (primary — wordmark, swoosh, headings)
     green #008649  (secondary — globe, accents, success)
   ============================================================ */
:root {
  /* --- Brand: Navy scale --- */
  --navy-900: #131a3d;
  --navy-800: #1c2757;
  --navy-700: #24316f;
  --navy-600: #293b85; /* core brand navy (from swoosh + wordmark) */
  --navy-500: #3a4d9e;
  --navy-400: #6373b8;
  --navy-300: #97a2d1;
  --navy-200: #c5cbe6;
  --navy-100: #e6e9f4;
  --navy-50:  #f3f5fa;

  /* --- Brand: Green scale --- */
  --green-900: #044a2b;
  --green-800: #036038;
  --green-700: #027543;
  --green-600: #008649; /* core brand green (from globe) */
  --green-500: #16a05d;
  --green-400: #43bb7e;
  --green-300: #7fd3a5;
  --green-200: #b6e7cd;
  --green-100: #e0f5ea;
  --green-50:  #f0faf4;

  /* --- Neutrals (cool grey, corporate) --- */
  --grey-900: #14161c;
  --grey-800: #262a33;
  --grey-700: #3b414d;
  --grey-600: #545b69;
  --grey-500: #737b8a;
  --grey-400: #9aa1ad;
  --grey-300: #c3c8d0;
  --grey-200: #dfe2e8;
  --grey-100: #eef0f3;
  --grey-50:  #f7f8fa;
  --white:    #ffffff;

  /* --- Semantic --- */
  --success: var(--green-600);
  --success-soft: var(--green-100);
  --warning: #c98a00;
  --warning-soft: #fbf0d6;
  --danger:  #c0392b;
  --danger-soft: #fbe6e3;
  --info:    var(--navy-600);
  --info-soft: var(--navy-100);

  /* --- Surfaces --- */
  --surface-page:   var(--white);
  --surface-subtle: var(--grey-50);
  --surface-muted:  var(--grey-100);
  --surface-card:   var(--white);
  --surface-navy:   var(--navy-600);      /* dark corporate band */
  --surface-navy-deep: var(--navy-800);
  --surface-inverse-text: var(--white);

  /* --- Text --- */
  --text-strong:  var(--navy-800);
  --text-body:    var(--grey-700);
  --text-muted:   var(--grey-500);
  --text-inverse: var(--white);
  --text-brand:   var(--navy-600);
  --text-accent:  var(--green-700);
  --text-link:    var(--navy-600);
  --text-link-hover: var(--green-700);

  /* --- Borders --- */
  --border-subtle: var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong: var(--grey-400);
  --border-brand:  var(--navy-600);

  /* --- Focus --- */
  --focus-ring: color-mix(in srgb, var(--navy-500) 55%, transparent);
}

/* ---------- tokens/typography.css ---------- */
/* ============================================================
   BISTON — Typography tokens
   Serif (Lora) for display/headings, matching the serif wordmark.
   IBM Plex Sans for UI + body. IBM Plex Mono for data/figures.
   ============================================================ */
:root {
  --font-serif: 'Lora', 'Georgia', 'Times New Roman', serif;
  --font-sans:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Type scale (1.250 major-third-ish, corporate) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  2.9375rem; /* 47 */
  --text-4xl:  3.75rem;   /* 60 */

  /* Weights */
  --fw-regular: 400;   /* @kind other */
  --fw-medium:  500;   /* @kind other */
  --fw-semibold: 600;  /* @kind other */
  --fw-bold:    700;   /* @kind other */

  /* Line heights */
  --lh-tight:  1.12;   /* @kind other */
  --lh-snug:   1.28;   /* @kind other */
  --lh-normal: 1.55;   /* @kind other */
  --lh-relaxed: 1.7;   /* @kind other */

  /* Letter spacing */
  --ls-tight:  -0.02em;  /* @kind other */
  --ls-normal: 0;        /* @kind other */
  --ls-wide:   0.04em;   /* @kind other */
  --ls-eyebrow: 0.18em;  /* @kind other */

  /* Semantic roles */
  --display-font: var(--font-serif);
  --heading-font: var(--font-serif);
  --body-font:    var(--font-sans);
  --eyebrow-font: var(--font-sans);
}

/* ---------- tokens/spacing.css ---------- */
/* ============================================================
   BISTON — Spacing & layout tokens (8px base grid)
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 820px;
  --gutter: var(--space-5);
  --section-y: var(--space-9);
}

/* ---------- tokens/effects.css ---------- */
/* ============================================================
   BISTON — Effects: radius, borders, shadows, motion
   Corporate & restrained: small radii, crisp borders, soft shadows.
   ============================================================ */
:root {
  /* Radius — conservative, corporate */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Border widths */
  --border-hair: 1px;
  --border-thick: 2px;
  --border-accent: 3px;   /* underline accents beneath section eyebrows */

  /* Shadows — subtle, cool-tinted */
  --shadow-xs: 0 1px 2px rgba(20, 22, 28, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 22, 28, 0.08), 0 1px 2px rgba(20, 22, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 22, 28, 0.08), 0 2px 4px rgba(20, 22, 28, 0.04);
  --shadow-lg: 0 12px 28px rgba(19, 26, 61, 0.12), 0 4px 8px rgba(20, 22, 28, 0.06);
  --shadow-navy: 0 14px 34px rgba(41, 59, 133, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
}

/* ---------- tokens/base.css ---------- */
/* ============================================================
   BISTON — Base element defaults & shared helpers
   Opt-in resets scoped so cards/components inherit brand basics.
   ============================================================ */
:root {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--heading-font);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); }

/* Uppercase section eyebrow used across BISTON surfaces */
.biston-eyebrow {
  font-family: var(--eyebrow-font);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
}
/* Green accent rule that sits under eyebrows / headings */
.biston-rule {
  width: 56px;
  height: var(--border-accent);
  background: var(--green-600);
  border: 0;
  margin: var(--space-3) 0 0;
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- styles.css (entry point: @imports only, inlined above) ---------- */

/* ---------- hover states (ported from the design's style-hover attribute) ---------- */

[data-hv="hv1"]:hover{background:var(--green-700)}

[data-hv="hv2"]:hover{background:rgba(255,255,255,.08)}

[data-hv="hv3"]:hover{color:var(--green-300)}

[data-hv="hv4"]:hover{color:var(--white)}

/* ---------- components: tab system ---------- */
[hidden]{display:none !important}

.tab-btn{
  font-family:var(--body-font);
  font-size:1rem;
  font-weight:600;
  padding:13px 26px;
  min-height:44px;
  cursor:pointer;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
  background:var(--white);
  color:var(--navy-700);
  box-shadow:none;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.tab-btn:hover{background:var(--grey-50)}
.tab-btn.tab-active{
  border-color:var(--navy-600);
  background:var(--navy-600);
  color:var(--white);
  box-shadow:var(--shadow-xs);
}

/* ---------- components: mobile nav (pure CSS, checkbox pattern) ---------- */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0;pointer-events:none}
.nav-burger{display:none}
.nav-phone{display:none}

/* ---------- global safety ---------- */
img,iframe,video,svg{max-width:100%}
p{overflow-wrap:break-word}

/* =========================================================
   Responsive overrides — inline styles need !important
   Breakpoints: 960 (nav) / 768 / 640 (grids) / 600 / 480 / 400
   ========================================================= */

/* --- header collapses into a hamburger --- */
@media (max-width:960px){
  .hdr-inner{position:relative}
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    order:5;width:48px;height:48px;padding:12px 11px;
    border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
    background:var(--white);cursor:pointer;flex:0 0 auto;
  }
  .nav-burger span{display:block;height:2px;background:var(--navy-700);border-radius:2px}
  .hdr-phone{display:none !important}
  .nav-phone{display:flex !important}
  .hdr-cta{order:4;margin-left:auto}
  .site-nav{
    display:none !important;order:10;flex-basis:100%;width:100%;
    flex-direction:column !important;gap:0 !important;margin-left:0 !important;
    margin-top:6px;padding-top:2px;border-top:1px solid var(--border-subtle);
  }
  .nav-toggle:checked ~ .site-nav{display:flex !important}
  #site-header:has(.nav-toggle:checked) .site-nav{display:flex !important}
  .site-nav a{
    display:flex;align-items:center;min-height:44px;
    padding:12px 4px !important;border-bottom:1px solid var(--border-subtle);
  }
  .nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--focus-ring);outline-offset:2px}
  /* floating WhatsApp button is fixed at full size here — keep the footer clear of it */
  .pricing-page{padding-bottom:88px}
}

/* --- flex items that were sized for desktop --- */
@media (max-width:768px){
  [style*="min-width:260px"],[style*="min-width:280px"]{min-width:0 !important}
  [style*="flex:1 1 420px"],[style*="flex:1 1 380px"]{flex:1 1 100% !important;min-width:0 !important}
  [style*="justify-content:flex-end"]{justify-content:center !important}
}

/* --- auto-fit grids: minmax(300px,1fr) overflows a 320px viewport --- */
@media (max-width:640px){
  [style*="repeat(auto-fit"]{grid-template-columns:1fr !important}
  [style*="repeat(auto-fit"] > *{min-width:0}
}

/* --- type scale on small screens --- */
@media (max-width:600px){
  h1{font-size:clamp(1.5rem,6vw,2.125rem) !important;line-height:1.25 !important}
  h2{font-size:clamp(1.375rem,5.4vw,1.75rem) !important}
  h3{font-size:1.1875rem !important}
  .section-heading p{font-size:1rem !important}
  #wa-float{right:12px !important;bottom:12px !important;padding:13px 18px !important;font-size:.9375rem !important;min-height:48px !important}
  .pricing-page{padding-bottom:76px}
}

/* --- header stacks: logo + burger, then the WhatsApp CTA full width --- */
@media (max-width:560px){
  .hdr-inner{gap:10px !important;padding-left:16px !important;padding-right:16px !important}
  .hdr-cta{order:9;flex-basis:100%;width:100%;margin-left:0 !important}
  .hdr-cta .wa-cta{flex:1 1 auto;justify-content:center}
  .nav-burger{margin-left:auto}
}

/* --- hero CTAs stack full-width --- */
@media (max-width:480px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta > a{width:100%;justify-content:center}
  .tab-btn{padding:13px 16px !important;font-size:.9375rem !important}
  .tab-bar{gap:8px !important}
}

/* --- narrowest supported width --- */
@media (max-width:400px){
  .page-wrap{min-width:0 !important}
  .brand-en{display:none}
  [style*="max-width:1200px"]{padding-left:16px !important;padding-right:16px !important}
}