/* ==========================================================================
   VAALMAX LTD — Fire Extinguishing Systems
   Global stylesheet. No external requests. System fonts only.
   Structure: 1) Tokens  2) Reset  3) Base  4) Layout  5) Components
              6) Sections  7) Article  8) Forms  9) Utilities  10) Responsive
   ========================================================================== */

/* 1) DESIGN TOKENS ---------------------------------------------------------- */
:root{
  /* Brand palette — premium, sober, safety-oriented */
  --ink:            #14181d;   /* near-black text / dark sections */
  --ink-2:          #1d2229;   /* elevated dark surface */
  --graphite:       #2b323c;
  --slate:          #5b6572;   /* muted text */
  --line:           #e4e7ec;   /* hairlines */
  --line-dark:      #303844;
  --paper:          #ffffff;
  --paper-2:        #f6f8fb;   /* soft section bg */
  --paper-3:        #eef2f7;

  --flame:          #c1272d;   /* primary accent — refined safety red */
  --flame-dark:     #9c1f24;
  --flame-soft:     #fbeceb;
  --ember:          #e08a1e;   /* secondary warm accent */
  --steel:          #35516b;   /* trust blue-grey */
  --whatsapp:       #25d366;

  /* Typography */
  --serif: "Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  /* Spacing scale */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem; --sp-7:6rem;   --sp-8:8rem;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --radius: 4px;              /* squared, premium — not rounded/childish */
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(20,24,29,.06), 0 1px 3px rgba(20,24,29,.05);
  --shadow-md: 0 6px 24px rgba(20,24,29,.08), 0 2px 6px rgba(20,24,29,.05);
  --shadow-lg: 0 18px 50px rgba(20,24,29,.14);
  --ease: cubic-bezier(.16,.68,.32,1);
}

/* 2) RESET ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; }
img,svg,picture{ max-width:100%; display:block; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; }

/* 3) BASE ------------------------------------------------------------------- */
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.18; color:var(--ink); margin:0 0 .6em; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem,5vw,3.35rem); }
h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.55rem); }
h4{ font-size:1.15rem; }
p{ margin:0 0 1.15em; color:#333a44; }
strong{ color:var(--ink); font-weight:650; }
:focus-visible{ outline:3px solid var(--steel); outline-offset:2px; }

/* 4) LAYOUT ----------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); }
.narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:clamp(3.2rem,7vw,6rem); }
.section--tight{ padding-block:clamp(2.4rem,5vw,4rem); }
.bg-soft{ background:var(--paper-2); }
.bg-dark{ background:var(--ink); color:#dfe4ea; }
.bg-dark h1,.bg-dark h2,.bg-dark h3{ color:#fff; }
.bg-dark p{ color:#b9c1cc; }

.grid{ display:grid; gap:clamp(1.2rem,3vw,2rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }

/* Section heading block */
.eyebrow{
  display:inline-block; font-family:var(--sans); font-weight:700;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--flame); margin-bottom:.9rem;
}
.bg-dark .eyebrow{ color:var(--ember); }
.lead{ font-size:1.18rem; color:var(--slate); max-width:60ch; }
.section-head{ max-width:64ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* 5) COMPONENTS ------------------------------------------------------------- */
/* Buttons — squared, uppercase, premium */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-weight:700; font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.95rem 1.6rem; border-radius:var(--radius);
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--flame); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--flame-dark); box-shadow:var(--shadow-md); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--graphite); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
.bg-dark .btn--ghost,.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.32); }
.bg-dark .btn--ghost:hover,.hero .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--lg{ padding:1.1rem 2rem; font-size:.86rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }

/* Cards */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.1rem); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  height:100%;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#d3d9e2; }
.card h3{ margin-bottom:.5rem; }
.card p{ margin-bottom:0; font-size:.99rem; }
.card .ico{ width:52px; height:52px; margin-bottom:1.1rem; }
.card--link{ display:block; color:inherit; }

/* Icon tile */
.ico-tile{
  width:56px; height:56px; border-radius:var(--radius);
  display:grid; place-items:center; background:var(--flame-soft);
  margin-bottom:1.1rem;
}
.ico-tile svg{ width:30px; height:30px; }

/* Stat / trust bar */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat .n{ font-family:var(--serif); font-size:clamp(2rem,4vw,2.9rem); font-weight:600; color:var(--ink); line-height:1; }
.bg-dark .stat .n{ color:#fff; }
.stat .l{ font-size:.86rem; color:var(--slate); margin-top:.5rem; text-transform:uppercase; letter-spacing:.06em; }

/* Pills / tags */
.tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel); background:var(--paper-3); padding:.35rem .7rem; border-radius:100px; }

/* Feature list with check icons */
.checklist{ list-style:none; }
.checklist li{ position:relative; padding-left:2rem; margin-bottom:.8rem; color:#333a44; }
.checklist li::before{
  content:""; position:absolute; left:0; top:.28rem; width:1.3rem; height:1.3rem;
  background:var(--flame); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/1rem no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/1rem no-repeat;
}

/* 6) HEADER / NAV ----------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:76px; }
.brand{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand img{ height:40px; width:auto; }
.brand .bname{ font-family:var(--serif); font-weight:600; font-size:1.28rem; letter-spacing:.02em; color:var(--ink); }
.brand .bname span{ color:var(--flame); }
.nav-links{ display:flex; align-items:center; gap:1.9rem; list-style:none; }
.nav-links a{ font-size:.94rem; font-weight:550; color:#3a424e; transition:color .2s; position:relative; }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--flame); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--flame);
}
.nav-actions{ display:flex; align-items:center; gap:.9rem; }
.lang-switch{ display:flex; align-items:center; gap:.3rem; font-size:.82rem; font-weight:700; letter-spacing:.03em; }
.lang-switch a{ padding:.25rem .45rem; border-radius:var(--radius); color:var(--slate); }
.lang-switch a[aria-current="true"]{ color:var(--ink); background:var(--paper-3); }
.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line); background:var(--paper);
  border-radius:var(--radius); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); transition:.25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 7) HERO ------------------------------------------------------------------- */
.hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 82% 15%, rgba(193,39,45,.30), transparent 55%),
    radial-gradient(80% 70% at 10% 90%, rgba(53,81,107,.35), transparent 60%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  padding-block:clamp(3.5rem,8vw,6.5rem); }
.hero h1{ color:#fff; margin-bottom:1.1rem; }
.hero .lead{ color:#c4ccd6; font-size:1.22rem; }
.hero-art{ position:relative; }
.hero-art img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.hero-badges{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.2rem; }
.hero-badges .b{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:#c4ccd6; }
.hero-badges svg{ width:22px; height:22px; color:var(--ember); flex-shrink:0; }

/* 8) CTA band --------------------------------------------------------------- */
.cta-band{ background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:clamp(2.2rem,5vw,3.6rem);
  position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; right:-40px; top:-40px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(193,39,45,.4), transparent 65%); }
.cta-band .inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band h2{ color:#fff; margin-bottom:.4rem; }
.cta-band p{ color:#c4ccd6; margin:0; }

/* 9) ARTICLE / BLOG --------------------------------------------------------- */
.post-hero{ background:var(--paper-2); border-bottom:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem); }
.breadcrumb{ font-size:.84rem; color:var(--slate); margin-bottom:1.1rem; }
.breadcrumb a:hover{ color:var(--flame); }
.breadcrumb span{ margin-inline:.4rem; opacity:.5; }
.post-meta{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.86rem; color:var(--slate); margin-top:1rem; }
.post-meta .dot{ opacity:.4; }

.article{ font-size:1.09rem; }
.article > p:first-of-type{ font-size:1.2rem; color:#2a313b; }
.article h2{ margin-top:2.4em; scroll-margin-top:100px; }
.article h3{ margin-top:1.8em; }
.article ul,.article ol{ margin:0 0 1.3em 1.2em; }
.article li{ margin-bottom:.55em; padding-left:.3rem; }
.article img{ border-radius:var(--radius-lg); margin:2rem 0; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.article figure{ margin:2rem 0; }
.article figcaption{ font-size:.86rem; color:var(--slate); text-align:center; margin-top:.7rem; }
.article a:not(.btn){ color:var(--flame); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.article a:not(.btn):hover{ color:var(--flame-dark); }

/* Info / tip / summary boxes */
.box{ border-radius:var(--radius-lg); padding:1.4rem 1.6rem; margin:2rem 0; border:1px solid var(--line);
  background:var(--paper-2); }
.box .box-title{ display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-weight:750;
  font-size:.98rem; margin-bottom:.5rem; letter-spacing:.01em; }
.box p:last-child,.box ul:last-child{ margin-bottom:0; }
.box svg{ width:22px; height:22px; flex-shrink:0; }
.box--tip{ background:#eefaf1; border-color:#c9ecd4; }
.box--tip .box-title{ color:#1c7a3e; }
.box--info{ background:#eef4fb; border-color:#cfe0f2; }
.box--info .box-title{ color:var(--steel); }
.box--warn{ background:#fdf3ec; border-color:#f6d9c2; }
.box--warn .box-title{ color:#b5641a; }
.box--key{ background:var(--flame-soft); border-color:#f3cfcd; }
.box--key .box-title{ color:var(--flame-dark); }

/* Tables */
.table-wrap{ overflow-x:auto; margin:2rem 0; border:1px solid var(--line); border-radius:var(--radius-lg); }
table{ width:100%; border-collapse:collapse; font-size:.98rem; min-width:520px; }
thead th{ background:var(--ink); color:#fff; text-align:left; font-family:var(--sans); font-weight:650;
  font-size:.85rem; letter-spacing:.03em; padding:.9rem 1.1rem; }
tbody td{ padding:.85rem 1.1rem; border-top:1px solid var(--line); vertical-align:top; }
tbody tr:nth-child(even){ background:var(--paper-2); }

/* TOC */
.toc{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.4rem 1.6rem; margin:2rem 0; }
.toc .toc-title{ font-family:var(--sans); font-weight:750; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:.8rem; }
.toc ol{ margin:0 0 0 1.1rem; }
.toc li{ margin-bottom:.4rem; }
.toc a{ color:var(--steel); }
.toc a:hover{ color:var(--flame); }

/* FAQ (details) */
.faq{ margin:1.5rem 0; }
.faq details{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.7rem; background:var(--paper); }
.faq summary{ cursor:pointer; padding:1.05rem 1.3rem; font-weight:650; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--flame); line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 1.3rem 1.2rem; color:#333a44; }

/* Blog cards */
.post-card{ display:flex; flex-direction:column; height:100%; overflow:hidden; padding:0; }
.post-card .thumb{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--paper-2); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.post-card:hover .thumb img{ transform:scale(1.04); }
.post-card .body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.post-card h3{ font-size:1.24rem; margin:.6rem 0 .5rem; }
.post-card p{ font-size:.96rem; color:var(--slate); margin-bottom:1rem; }
.post-card .more{ margin-top:auto; font-weight:700; font-size:.83rem; letter-spacing:.06em; text-transform:uppercase; color:var(--flame); display:inline-flex; align-items:center; gap:.4rem; }

/* Author / share */
.article-foot{ border-top:1px solid var(--line); margin-top:2.5rem; padding-top:1.8rem; }

/* 10) FORMS ----------------------------------------------------------------- */
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-weight:650; font-size:.92rem; margin-bottom:.4rem; }
.field .req{ color:var(--flame); }
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius);
  background:var(--paper); transition:border-color .2s, box-shadow .2s; font-size:1rem;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--steel); box-shadow:0 0 0 3px rgba(53,81,107,.14);
}
.field textarea{ resize:vertical; min-height:140px; }
.form-note{ font-size:.82rem; color:var(--slate); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }  /* honeypot */
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:#333a44; }
.consent input{ width:auto; margin-top:.3rem; flex-shrink:0; }
.form-status{ padding:1rem 1.2rem; border-radius:var(--radius); margin-top:1rem; font-size:.95rem; display:none; }
.form-status.ok{ display:block; background:#eefaf1; color:#1c7a3e; border:1px solid #c9ecd4; }
.form-status.err{ display:block; background:var(--flame-soft); color:var(--flame-dark); border:1px solid #f3cfcd; }

/* Contact info list */
.contact-list{ list-style:none; }
.contact-list li{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.contact-list .ci{ width:44px; height:44px; border-radius:var(--radius); background:var(--flame-soft);
  display:grid; place-items:center; flex-shrink:0; }
.contact-list .ci svg{ width:22px; height:22px; color:var(--flame); }
.contact-list .lab{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); font-weight:700; }
.contact-list .val{ font-weight:600; color:var(--ink); }
.contact-list a.val:hover{ color:var(--flame); }

/* 11) FOOTER ---------------------------------------------------------------- */
.site-footer{ background:var(--ink); color:#aeb7c2; padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.5rem; }
.site-footer h4{ color:#fff; font-family:var(--sans); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.site-footer a{ color:#aeb7c2; transition:color .2s; }
.site-footer a:hover{ color:#fff; }
.footer-links{ list-style:none; }
.footer-links li{ margin-bottom:.7rem; font-size:.95rem; }
.footer-brand .bname{ font-family:var(--serif); font-size:1.4rem; color:#fff; }
.footer-brand .bname span{ color:var(--flame); }
.footer-brand p{ color:#96a0ac; font-size:.95rem; margin-top:.9rem; max-width:34ch; }
.footer-bottom{ border-top:1px solid var(--line-dark); margin-top:2.8rem; padding-top:1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:#818b98; }
.footer-bottom a:hover{ color:#fff; }

/* 13) UTILITIES ------------------------------------------------------------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.8rem 1.2rem; z-index:100; border-radius:0 0 var(--radius) 0; }
.skip-link:focus{ left:0; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.logo-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2.5rem; opacity:.7; }
.logo-strip span{ font-weight:700; letter-spacing:.05em; color:var(--slate); font-size:.95rem; }

/* Reveal on scroll (progressive; visible by default if JS/anim disabled) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .scroll-progress,.finder-result.pop{ transition:none; animation:none; }
  .card.has-spot::before{ display:none; }
}

/* 13b) INTERACTIVE ENHANCEMENTS --------------------------------------------- */
/* Scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:linear-gradient(90deg,var(--flame),var(--ember));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .08s linear;
  pointer-events:none;
}
/* Header condenses on scroll */
.site-header{ transition:box-shadow .25s var(--ease), background .25s var(--ease); }
.site-header.scrolled{ box-shadow:0 6px 24px rgba(20,24,29,.09); background:rgba(255,255,255,.96); }
.site-header.scrolled .nav{ height:64px; transition:height .25s var(--ease); }
.nav{ transition:height .25s var(--ease); }

/* Back-to-top button */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:60; width:46px; height:46px;
  display:grid; place-items:center; border:1px solid var(--line-dark);
  background:var(--ink); color:#fff; border-radius:50%; cursor:pointer;
  box-shadow:var(--shadow-md); opacity:0; transform:translateY(12px) scale(.9);
  pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease), background .2s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--flame); }

/* Card cursor spotlight */
.card.has-spot{ position:relative; overflow:hidden; }
.card.has-spot::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(193,39,45,.10), transparent 60%);
  transition:opacity .3s var(--ease);
}
.card.has-spot:hover::before{ opacity:1; }
.card.has-spot > *{ position:relative; z-index:1; }

/* TOC scroll-spy active state */
.toc a{ transition:color .2s, border-color .2s; border-left:2px solid transparent; padding-left:.6rem; margin-left:-.6rem; display:inline-block; }
.toc a.active{ color:var(--flame); border-left-color:var(--flame); font-weight:650; }

/* Interactive System Finder */
.finder{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:stretch; }
.finder-opts{ display:flex; flex-direction:column; gap:.7rem; }
.finder-opt{
  display:flex; align-items:center; gap:.9rem; text-align:left; width:100%;
  padding:1rem 1.15rem; border:1.5px solid var(--line); border-radius:var(--radius-lg);
  background:var(--paper); cursor:pointer; font-weight:600; color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease), box-shadow .2s;
}
.finder-opt:hover{ border-color:#d0d6df; transform:translateX(3px); }
.finder-opt.active{ border-color:var(--flame); background:var(--flame-soft); box-shadow:var(--shadow-sm); }
.finder-opt .fo-ico{ width:38px; height:38px; border-radius:var(--radius); background:var(--paper-3); display:grid; place-items:center; flex-shrink:0; transition:background .2s; }
.finder-opt.active .fo-ico{ background:#fff; }
.finder-opt .fo-ico svg{ width:22px; height:22px; color:var(--flame); }
.finder-result{
  background:var(--ink); color:#dfe4ea; border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.2rem); display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; min-height:260px;
}
.finder-result::after{ content:""; position:absolute; right:-50px; top:-50px; width:220px; height:220px;
  background:radial-gradient(circle, rgba(193,39,45,.35), transparent 65%); pointer-events:none; }
.finder-result > *{ position:relative; z-index:1; }
.finder-result h3{ color:#fff; margin:.2rem 0 .5rem; }
.finder-result p{ color:#b9c1cc; }
.finder-result .btn{ align-self:flex-start; margin-top:.6rem; }
.finder-tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); }
.finder-result.is-empty h3{ color:#8b95a1; }
.finder-result.pop{ animation:finderPop .4s var(--ease); }
@keyframes finderPop{ from{ opacity:.3; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* 14) RESPONSIVE ------------------------------------------------------------ */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:520px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:2rem; }
}
@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav-actions .btn--primary{ display:none; }  /* CTA lives in the menu + WhatsApp float on mobile */
  .nav-links{
    position:absolute; top:76px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    padding:.5rem 1.1rem 1.1rem; display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ border-bottom:1px solid var(--line); }
  .nav-links li:last-child{ border-bottom:0; }
  .nav-links a{ display:block; padding:.95rem .2rem; font-size:1rem; }
  .nav-links a[aria-current="page"]::after{ display:none; }
  .split{ grid-template-columns:1fr; gap:2rem; }
  .g-3,.g-2{ grid-template-columns:1fr; }
  .cta-band .inner{ flex-direction:column; align-items:flex-start; }
  .article{ font-size:1.05rem; }
  .finder{ grid-template-columns:1fr; }
  .finder-result{ min-height:0; order:2; }
}
@media (max-width:560px){
  .g-4,.stats{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .btn{ width:100%; justify-content:center; }
  .btn-row .btn{ width:auto; }
  .hero-badges{ gap:1rem; }
}