/* ============================================================
   IDEAL GAS — Design System v2 · "Clinical Minimal"
   Hairline surfaces · deep clinical green brand · RTL-first
   (amber #E8A33D is reserved for urgent-call CTAs only)
   ============================================================ */

/* ============================================================
   UI FONT — Vazirmatn (always the site typeface).
   Declared here so it loads even if admin font settings change:
   primary = optimized woff2 (assets/fonts/vazirmatn/),
   fallback = official TTF builds (fonts/ folder in site root).
   ============================================================ */
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:300; font-display:swap;
  src:url('assets/fonts/vazirmatn/Vazirmatn-300.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/vazirmatn/Vazirmatn-400.woff2') format('woff2'),
      url('fonts/Vazirmatn-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/vazirmatn/Vazirmatn-500.woff2') format('woff2'),
      url('fonts/Vazirmatn-Medium.ttf') format('truetype');
}
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/vazirmatn/Vazirmatn-600.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/vazirmatn/Vazirmatn-700.woff2') format('woff2'),
      url('fonts/Vazirmatn-Bold.ttf') format('truetype');
}

:root{
  /* ---- surfaces: clinical whites + soft sage tints ---- */
  --bg:        #FBFCFA;
  --bg-2:      #F4F7F3;
  --surface:   #ffffff;
  --surface-2: #F5F8F4;
  --surface-3: #EAF0EA;
  --border:        rgba(22,66,60,.12);
  --border-strong: rgba(22,66,60,.26);

  /* ---- text ---- */
  --text:  #182420;
  --muted: #5A665F;
  --faint: #8B988F;

  /* ---- brand: deep clinical green / teal ---- */
  --teal:   #3E8E7E;
  --ink:    #16423C;
  --sage:   #7FC8B5;
  --sky:    #7FC8B5;      /* legacy aliases */
  --blue:   #3E8E7E;
  --indigo: #16423C;
  --purple: #3E8E7E;
  --cyan:   #7FC8B5;
  --indigo-ink: #16423C;
  --amber:  #E8A33D;      /* urgent-call CTA only */

  --grad:      linear-gradient(135deg, #16423C, #2E7266);
  --grad-soft: linear-gradient(135deg, rgba(62,142,126,.10), rgba(22,66,60,.05));
  --glow:       rgba(22,66,60,.18);
  --glow-purple: rgba(127,200,181,.18);
  --shadow:    0 1px 2px rgba(22,66,60,.04), 0 12px 32px -20px rgba(22,66,60,.16);
  --shadow-lg: 0 1px 2px rgba(22,66,60,.04), 0 28px 64px -32px rgba(22,66,60,.22);
  --scroll-track:#F0F3EE;
  --scroll-thumb:#C9D4C8;
  --glass:       rgba(255,255,255,.82);
  --glass-2:     rgba(255,255,255,.94);
  --glass-solid: rgba(255,255,255,.98);

  /* ---- geometry ---- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --maxw: 1180px;
  --measure: 62ch;              /* narrow reading lines for prose */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* single typeface — overridable per install via site_settings.font_family_css */
  --font-main: 'Vazirmatn', system-ui, sans-serif;
  --mono: var(--font-main);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-main);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(62,142,126,.18); color:var(--text); }

/* accessible focus — thin clinical ring */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}

/* skip link (a11y / SEO) */
.skip-link{ position:fixed; top:10px; inset-inline-start:10px; z-index:200;
  padding:10px 18px; border-radius:var(--r-sm); background:var(--ink); color:#fff;
  font-size:14px; transform:translateY(-64px); transition:transform .2s var(--ease); }
.skip-link:focus{ transform:translateY(0); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
section{ position:relative; }
.section{ padding-block:108px; }
@media(max-width:760px){
  .section{ padding-block:64px; }
  .wrap{ padding-inline:20px; }
}
/* ---------- type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-weight:600; padding:6px 0;
}
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 4px rgba(62,142,126,.12); animation:pulse 2.8s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.75)} }

.h-display{ font-size:clamp(34px,5.2vw,62px); font-weight:700; line-height:1.12;
  letter-spacing:-.015em; margin:0; color:var(--ink); }
.h2{ font-size:clamp(26px,3.6vw,40px); font-weight:700; line-height:1.2;
  letter-spacing:-.01em; margin:0; color:var(--ink); }
.h3{ font-size:clamp(19px,2.2vw,24px); font-weight:700; margin:0; color:var(--ink); }
.lede{ font-size:clamp(16px,1.4vw,18.5px); color:var(--muted); line-height:1.85;
  max-width:var(--measure); font-weight:400; }
.grad-text{ color:var(--teal); }
.mono{ font-family:var(--mono); }
.faint{ color:var(--faint); }

.section-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:52px; }
.section-head .h2{ max-width:22ch; }

/* ---------- buttons (flat clinical) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:15px; padding:13px 24px; border-radius:var(--r);
  border:1px solid transparent; white-space:nowrap; position:relative;
  transition:transform .25s var(--ease), box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.btn svg{ width:17px; height:17px; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--ink); color:#fff;
  box-shadow:0 10px 24px -14px rgba(22,66,60,.55); }
.btn-primary:hover{ background:#1D544B; transform:translateY(-2px);
  box-shadow:0 16px 34px -16px rgba(22,66,60,.6); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--surface-2); transform:translateY(-2px); }
.btn-sm{ padding:9px 16px; font-size:13.5px; border-radius:var(--r-sm); }
.btn-block{ width:100%; }

/* urgent call CTA — the only amber element on the site */
.btn-urgent{ background:var(--amber) !important; color:#fff; border-color:transparent;
  box-shadow:0 10px 24px -14px rgba(232,163,61,.85); }
.btn-urgent:hover{ background:#D9962E !important; transform:translateY(-2px); }

.link-arrow{ display:inline-flex; align-items:center; gap:7px; color:var(--teal);
  font-weight:600; font-size:15px; transition:gap .25s var(--ease), color .2s; }
.link-arrow:hover{ gap:12px; color:var(--indigo-ink); }
.link-arrow svg{ width:15px; height:15px; }

/* ---------- chips (technical labels) ---------- */
.chip{ font-size:11.5px; letter-spacing:.03em; padding:4px 10px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface-2); color:var(--muted);
  white-space:nowrap; }

/* ---------- cards (generic) ---------- */
.card{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); position:relative; }

/* ---------- page-level helpers (previously inline styles) ---------- */
.breadcrumb{ display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:13px; color:var(--faint); margin-bottom:28px; }
.breadcrumb a{ color:var(--faint); transition:color .2s; }
.breadcrumb a:hover{ color:var(--teal); }
.breadcrumb svg{ width:13px; height:13px; transform:scaleX(-1); }
.page-hero{ padding-top:132px; padding-bottom:40px; }
.rich-text{ font-size:16.5px; line-height:2; max-width:var(--measure); }
.rich-text h2{ font-size:22px; font-weight:700; margin:36px 0 12px; }
.rich-text h3{ font-size:18px; font-weight:700; margin:28px 0 10px; }
.rich-text p{ margin:0 0 16px; }
.rich-text ul, .rich-text ol{ margin:0 0 18px; padding-inline-start:22px; line-height:2; }
.rich-text a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.rich-text img{ border-radius:var(--r); border:1px solid var(--border); margin:20px 0; }
/* ---------- header / nav (transparent → white hairline on scroll) ---------- */
.site-header{ position:fixed; inset-block-start:0; inset-inline:0; z-index:80;
  transition:background .3s var(--ease), border-color .3s, box-shadow .3s; }
.site-header.scrolled{ background:rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(1.3);
  border-block-end:1px solid var(--border); box-shadow:0 8px 30px -26px rgba(22,66,60,.4); }
.nav{ display:flex; align-items:center; gap:18px; height:70px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:17.5px;
  letter-spacing:-.01em; color:var(--ink); }
.brand .logo{ width:32px; height:32px; border-radius:9px; background:var(--grad);
  display:grid; place-items:center; color:#fff; flex:none; }
.brand .logo svg{ width:18px; height:18px; }
.brand small{ display:block; font-size:9.5px; font-weight:500; letter-spacing:.18em;
  color:var(--faint); margin-top:-2px; }
.nav-links{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; }
.nav-links a{ padding:8px 14px; border-radius:var(--r-sm); font-size:14.5px; color:var(--muted);
  transition:color .2s, background .2s; }
.nav-links a:hover{ color:var(--ink); background:var(--surface-2); }
.nav-cta{ display:flex; align-items:center; gap:9px; }
.nav-toggle{ display:none; width:42px; height:42px; border-radius:var(--r);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
  align-items:center; justify-content:center; }
.nav-toggle svg{ width:19px; height:19px; }
@media(max-width:940px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
}

/* mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:90; background:var(--surface);
  display:flex; flex-direction:column; padding:26px 22px;
  transform:translateY(-102%); transition:transform .45s var(--ease-out); }
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-size:23px; font-weight:600; color:var(--text); padding:15px 2px;
  border-bottom:1px solid var(--border); }
.mobile-menu a:hover{ color:var(--ink); }
.mobile-menu .mm-top{ display:flex; justify-content:space-between; align-items:center;
  margin-bottom:22px; font-weight:700; color:var(--ink); }
.mobile-menu .mm-top .brand .logo{ display:none; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; }
}

/* ---------- placeholder media ---------- */
.ph{ position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--surface-2); border:1px dashed var(--border-strong);
  display:grid; place-items:center; }
.ph .ph-label{ font-size:12px; color:var(--faint); letter-spacing:.1em;
  text-transform:uppercase; text-align:center; padding:8px 14px; }

/* decorative shimmer — subtle, clinical */
.frost{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 70% 10%, rgba(127,200,181,.10), transparent 65%); }

/* ---------- footer (minimal, hairline) ---------- */
.site-footer{ border-block-start:1px solid var(--border); background:var(--surface);
  padding-block:64px 32px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
@media(max-width:840px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:480px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-col h5{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:0 0 14px; font-weight:600; }
.foot-col a{ display:block; color:var(--muted); padding:4px 0; font-size:14.5px;
  transition:color .2s; }
.foot-col a:hover{ color:var(--teal); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:48px; padding-top:22px; border-top:1px solid var(--border); flex-wrap:wrap;
  font-size:13px; color:var(--faint); }

/* floating call button (mobile) */
.floating-call{ display:none; }
@media(max-width:940px){
  .floating-call{ position:fixed; bottom:16px; inset-inline:16px; z-index:70;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 20px; border-radius:100px; background:var(--amber); color:#fff;
    font-weight:700; font-size:15.5px; box-shadow:0 14px 34px -12px rgba(232,163,61,.6); }
  .floating-call svg{ width:19px; height:19px; }
  body{ padding-bottom:74px; }
}
@media(min-width:941px){ .floating-call{ display:none !important; } }

/* large touch targets */
@media(max-width:940px){
  .nav-links a{ padding:12px 16px; }
  .field input, .field select, .field textarea{ padding:14px 16px; font-size:16px; }
  .btn{ padding:14px 24px; }
}
/* ============================================================
   Dark mode — clinical deep-green night
   ============================================================ */
html[data-theme="dark"]{
  --bg:        #0C1512;
  --bg-2:      #0F1A16;
  --surface:   #12211C;
  --surface-2: #15261F;
  --surface-3: #1A2F27;
  --border:        rgba(127,200,181,.14);
  --border-strong: rgba(127,200,181,.30);

  --text:  #E9F1EC;
  --muted: #A2B4AB;
  --faint: #6D8078;

  --ink:        #E9F1EC;
  --indigo-ink: #9CCBBD;

  --grad-soft: linear-gradient(135deg, rgba(62,142,126,.22), rgba(22,66,60,.28));
  --glow: rgba(62,142,126,.38);
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 14px 40px -24px rgba(0,0,0,.6);
  --shadow-lg: 0 1px 2px rgba(0,0,0,.3), 0 30px 80px -34px rgba(0,0,0,.7);

  --scroll-track:#0F1A16;
  --scroll-thumb:#1E362E;
  --glass:       rgba(12,21,18,.78);
  --glass-2:     rgba(18,33,27,.94);
  --glass-solid: rgba(12,21,18,.98);
}
html[data-theme="dark"] ::selection{ background:rgba(62,142,126,.32); color:#fff; }
html[data-theme="dark"] .site-header.scrolled{ background:rgba(12,21,18,.86); }
html[data-theme="dark"] .mobile-menu{ background:var(--surface); }
html[data-theme="dark"] .btn-primary{ background:#2E7266; }
html[data-theme="dark"] .btn-primary:hover{ background:#358374; }
html[data-theme="dark"] .btn-ghost{ background:transparent; color:var(--indigo-ink); }
html[data-theme="dark"] .h-display, html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3, html[data-theme="dark"] .brand,
html[data-theme="dark"] .foot-col a:hover, html[data-theme="dark"] .nav-links a:hover{
  color:var(--text); }
html[data-theme="dark"] .btn-urgent{ background:var(--amber) !important; color:#1A1208; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--scroll-track); }
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:10px;
  border:3px solid var(--scroll-track); }
::-webkit-scrollbar-thumb:hover{ background:var(--teal); }

/* ---------- theme transition ---------- */
html{ transition:background .35s var(--ease); }
body, .site-header.scrolled, .card, .product-card, .service-card, .stat, .field input,
.field select, .field textarea, .btn-ghost, .hero-canister, .heroB .ro, .spec-cell,
.w-feature-card, .w-faq-item, .blog-card, .pn-card, .rel-card, .svc-other{
  transition:background-color .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease), box-shadow .35s var(--ease);
}