/* TechFlash — self-hosted webfonts (latin subset only; site is English) */
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../fonts/mulish-latin-var.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-latin-700.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/poppins-latin-800.woff2") format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700 800; font-display: swap;
  src: url("../fonts/poppins-latin-700-italic.woff2") format('woff2'); }

/* TechFlash — Color tokens
   Derived from the shield logo: cyan-blue (left) → lime-green (right),
   split by a lightning bolt, on a neutral graphite wordmark. */

:root {
  /* ---- Brand cores ---- */
  --tf-blue: #1FA8DC;          /* primary "Flash" cyan-blue */
  --tf-green: #8BC53F;         /* secondary lime-green */
  --tf-ink: #58595B;           /* wordmark graphite */

  /* ---- Signature gradient (the lightning split, ~120deg) ---- */
  --tf-gradient: linear-gradient(120deg, #1FA8DC 0%, #4FBE9E 52%, #8BC53F 100%); /* @kind color */
  --tf-gradient-soft: linear-gradient(120deg, #E8F6FC 0%, #F1F8E7 100%); /* @kind color */

  /* ---- Blue scale ---- */
  --blue-50:  #E8F6FC;
  --blue-100: #C5E9F7;
  --blue-200: #8FD5EF;
  --blue-300: #54BFE6;
  --blue-400: #2EB0DF;
  --blue-500: #1FA8DC;
  --blue-600: #107AA3;          /* darkened from #1487B4 for WCAG AA text */
  --blue-700: #0F6A8D;
  --blue-800: #0B4E68;

  /* ---- Green scale ---- */
  --green-50:  #F1F8E7;
  --green-100: #DDEFC2;
  --green-200: #C0E191;
  --green-300: #A2D261;
  --green-400: #8BC53F;
  --green-500: #76B22E;
  --green-600: #5E9223;
  --green-700: #47701B;

  /* ---- Neutral (cool graphite) scale ---- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F8FA;
  --gray-100: #EDF1F4;
  --gray-200: #DCE3E8;
  --gray-300: #C2CCD3;
  --gray-400: #97A3AC;
  --gray-500: #646F78;          /* darkened from #6C7780 for WCAG AA on gray-50 */
  --gray-600: #4F595F;
  --gray-700: #3A3D42;
  --gray-800: #25282C;
  --gray-900: #14161A;

  /* ---- Semantic status ---- */
  --status-success: #5E9223;
  --status-success-bg: #F1F8E7;
  --status-warning: #E8941A;
  --status-warning-bg: #FDF1DD;
  --status-danger: #DA3633;
  --status-danger-bg: #FCEBEA;
  --status-info: #1487B4;
  --status-info-bg: #E8F6FC;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--tf-blue);
  --color-primary-hover: var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-secondary: var(--tf-green);
  --color-secondary-hover: var(--green-500);

  --text-strong: var(--gray-800);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-500);   /* was gray-400: 2.6:1 contrast on white, fails WCAG AA */
  --text-on-brand: #FFFFFF;
  --text-link: var(--blue-600);

  --surface-page: var(--gray-50);
  --surface-card: var(--gray-0);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--gray-900);
  --surface-brand-tint: var(--blue-50);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-focus: var(--tf-blue);

  --icon-default: var(--gray-500);
  --icon-strong: var(--gray-700);
  --icon-brand: var(--tf-blue);
}

/* TechFlash — Typography tokens */

:root {
  /* Families */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;   /* headings, wordmark feel */
  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;        /* body & UI */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* system mono: saves a 31 KB webfont used for 7 glyphs */

  /* Type scale (1.250 major-third, 16px base) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;   /* the "IT CONSULTING" tagline tracking */
}

/* TechFlash — Spacing & sizing tokens (4px 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 */

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;

  /* Control heights */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
}

/* TechFlash — Radii, shadows, borders, motion */

:root {
  /* Corner radii — moderately rounded, echoing the friendly wordmark */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation — cool, soft, low-contrast (clean SaaS feel) */
  --shadow-xs: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 22, 26, 0.08), 0 1px 2px rgba(20, 22, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 22, 26, 0.08), 0 2px 4px rgba(20, 22, 26, 0.04);
  --shadow-lg: 0 12px 28px rgba(20, 22, 26, 0.12), 0 4px 8px rgba(20, 22, 26, 0.05);
  --shadow-brand: 0 8px 24px rgba(31, 168, 220, 0.28);

  /* Focus ring */
  --ring-focus: 0 0 0 3px rgba(31, 168, 220, 0.35);

  /* Border widths */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* Motion — quick, confident, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}

/* TechFlash — base element defaults (lightweight reset + type baseline) */

*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd { font-family: var(--font-mono); }

::selection { background: var(--blue-100); color: var(--blue-800); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }


/* ---------- page-local layout ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg { max-width: 100%; }
.icon { flex: none; display: inline-block; vertical-align: middle; }
body { color: var(--text-body); }
.wrap { width: 100%; max-width: var(--container-xl); margin: 0 auto;
  padding: 0 max(var(--space-5), env(safe-area-inset-right)) 0 max(var(--space-5), env(safe-area-inset-left)); }
section { position: relative; }
.eyebrow {
  font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: var(--text-sm); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--blue-600); margin: 0 0 var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--tf-gradient); border-radius: 2px; }
h2.section-title { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
.lead { font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-relaxed); max-width: 60ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-sm);
  height: var(--control-md); padding: 0 var(--space-5);
  border-radius: var(--radius-pill); border: none; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--tf-gradient); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(31,168,220,0.42); transform: translateY(-1px); }
.btn-ghost { background: var(--gray-0); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-default); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--blue-300); color: var(--blue-700); }
.btn-lg { height: var(--control-lg); padding: 0 var(--space-6); font-size: var(--text-base); }

/* ---------- header ---------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand img { height: 38px; width: auto; display: block; }
.brand .brand-text { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--gray-700); line-height: 1; }
.brand .brand-text b { color: var(--tf-blue); font-style: italic; }
.brand .brand-sub { display: block; font-family: var(--font-body); font-weight: 700; font-size: 9px; letter-spacing: var(--tracking-caps); color: var(--text-faint); margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { color: var(--text-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.nav-links a:hover { color: var(--blue-600); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: var(--space-3); }
.menu-toggle { display: none; place-items: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: none; border-radius: var(--radius-md); cursor: pointer; color: var(--gray-700); -webkit-tap-highlight-color: transparent; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }
.menu-toggle span { display: block; line-height: 0; }

/* ---------- hero ---------- */
.hero { overflow: hidden; background:
    radial-gradient(120% 120% at 85% -10%, var(--green-50) 0%, transparent 45%),
    radial-gradient(120% 120% at 0% 0%, var(--blue-50) 0%, transparent 50%),
    var(--gray-0); }
.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7);
  align-items: center; padding: var(--space-9) 0; }
.hero h1 { font-size: var(--text-5xl); line-height: 1.04; letter-spacing: -0.03em; color: var(--gray-800); }
.hero h1 .grad { background: var(--tf-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p.lead { margin-top: var(--space-5); font-size: var(--text-lg); max-width: 52ch; }
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero-meta { display: flex; gap: var(--space-6); margin: var(--space-7) 0 0; flex-wrap: wrap; }
.hero-meta dd { margin: 0; }
.hero-meta .m-num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--gray-800); line-height: 1; }
.hero-meta .m-lab { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.hero-visual { position: relative; display: grid; place-items: center; padding: var(--space-5); }
.hero-visual .disc { position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--blue-50) 46%, var(--green-50) 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(31,168,220,0.12); }
.hero-visual .glow { position: absolute; inset: 12% 12%; background: var(--tf-gradient); filter: blur(64px); opacity: 0.20; border-radius: 50%; }
.hero-visual img { position: relative; width: 100%; max-width: 268px; height: auto;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, rgba(0,0,0,0.4) 72%, transparent 84%);
  mask-image: radial-gradient(circle at 50% 50%, #000 58%, rgba(0,0,0,0.4) 72%, transparent 84%);
  filter: drop-shadow(0 18px 36px rgba(20,135,180,0.22)); }

/* ---------- trust strip ---------- */
.strip { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--gray-0); }
.strip-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-5); padding-top: var(--space-5); padding-bottom: var(--space-5); margin: 0 auto; list-style: none; flex-wrap: wrap; }
.strip-inner li { font-weight: var(--weight-semibold); color: var(--text-muted); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-2); }
.strip-inner li svg { width: 18px; height: 18px; color: var(--tf-green); }

/* ---------- generic section padding ---------- */
.pad { padding: var(--space-9) 0; }
.section-head { max-width: 64ch; margin-bottom: var(--space-7); }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: center; }
.about-card { background: var(--tf-gradient); border-radius: var(--radius-xl); padding: var(--space-7); color: #fff; box-shadow: var(--shadow-lg); }
.about-card .big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1; color: #fff; margin: 0; }
.about-card .strong { font-weight: 600; }
.about-card p { color: rgba(255,255,255,0.92); margin-top: var(--space-3); }
.about-card .rule { height: 1px; background: rgba(255,255,255,0.3); margin: var(--space-5) 0; }
.about-text h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); }
.about-text p + p { margin-top: var(--space-4); }

/* ---------- why cards ---------- */
.why { background: var(--gray-50); }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.feature {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.feature .ico { width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--blue-50); color: var(--blue-600); margin-bottom: var(--space-4); }
.feature:nth-child(2) .ico { background: var(--green-50); color: var(--green-600); }
.feature .ico svg { width: 26px; height: 26px; }
.feature h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--gray-800); }
.feature p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }

/* ---------- services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.svc {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); position: relative; overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.svc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tf-gradient); transform: scaleY(0); transform-origin: top; transition: transform var(--duration-base) var(--ease-out); }
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.svc:hover::before { transform: scaleY(1); }
.svc .ico { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-brand-tint); color: var(--blue-600); margin-bottom: var(--space-4); }
.svc .ico svg { width: 22px; height: 22px; }
.svc h3 { font-size: var(--text-md); margin-bottom: var(--space-2); color: var(--gray-800); }
.svc p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
.svc.more { background: var(--gray-800); color: #fff; }
.svc.more h3, .svc.more p { color: #fff; }
.svc.more p { color: rgba(255,255,255,0.78); }
.svc.more .ico { background: rgba(255,255,255,0.12); color: var(--green-300); }
.svc.more a { color: var(--green-300); font-weight: 700; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); }

/* ---------- benefits ---------- */
.benefits { background: var(--gray-900); color: #fff; }
.benefits .eyebrow { color: var(--green-300); }
.benefits h2.section-title { color: #fff; }
.benefits .lead { color: rgba(255,255,255,0.7); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.benefit { padding: var(--space-5); border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.benefit .num { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--green-300); font-weight: 600; }
.benefit h3 { font-size: var(--text-md); color: #fff; margin: var(--space-3) 0 var(--space-2); }
.benefit p { font-size: var(--text-sm); color: rgba(255,255,255,0.7); line-height: var(--leading-relaxed); }

/* ---------- contact ---------- */
.contact { background: var(--gray-50); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
.contact-info h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); }
.contact-info .lead { margin-bottom: var(--space-6); }
.contact-item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.contact-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.contact-item .ci-ico { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-brand-tint); color: var(--blue-600); }
.contact-item .ci-ico svg { width: 20px; height: 20px; }
.contact-item .ci-lab { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); font-weight: 700; }
.contact-item .ci-val { font-size: var(--text-md); font-weight: 600; color: var(--gray-800); }
.contact-item a.ci-val:hover { color: var(--blue-600); text-decoration: none; }

.form-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-sm); font-weight: 700; color: var(--gray-700); }
.field label .req { color: var(--status-danger); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--gray-800);
  background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 0 var(--space-4); height: var(--control-lg); width: 100%;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.field textarea { height: auto; padding: var(--space-3) var(--space-4); resize: vertical; min-height: 116px; line-height: var(--leading-normal); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--status-danger); }
.err-msg { font-size: var(--text-xs); color: var(--status-danger); font-weight: 600; display: none; }
.field.invalid .err-msg { display: block; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); flex-wrap: wrap; }
.form-foot .note { font-size: var(--text-xs); color: var(--text-muted); max-width: 32ch; }
.form-success { display: none; text-align: center; padding: var(--space-7) var(--space-4); }
.form-success .check { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; margin: 0 auto var(--space-5); }
.form-success .check svg { width: 32px; height: 32px; }
.form-success h3 { font-size: var(--text-xl); color: var(--gray-800); margin-bottom: var(--space-2); }
.form-success p { color: var(--text-muted); }
form.sent .form-body { display: none; }
form.sent .form-success { display: block; }
.form-error { display: none; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-danger-bg); color: var(--status-danger); font-size: var(--text-sm); font-weight: 600; }
.form-error.show { display: block; }

/* ---------- footer ---------- */
footer.foot { background: var(--gray-900); color: rgba(255,255,255,0.7); padding: var(--space-8) 0 var(--space-6); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid rgba(255,255,255,0.1); }
.foot .brand-text { color: #fff; }
.foot .brand-text b { color: var(--blue-300); }
.foot p.about { margin-top: var(--space-4); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: 40ch; }
.foot .foot-h { font-family: var(--font-display); color: #fff; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-4); }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.foot ul a, .foot ul li { color: rgba(255,255,255,0.7); font-size: var(--text-sm); }
.foot ul a:hover { color: var(--green-300); text-decoration: none; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-5); padding-bottom: env(safe-area-inset-bottom); font-size: var(--text-xs); color: rgba(255,255,255,0.6); flex-wrap: wrap; gap: var(--space-3); }
.foot-bottom .lic { font-family: var(--font-mono); }
.foot .brand img { height: 34px; width: auto; }
.foot .brand-sub { color: rgba(255,255,255,0.55); }

/* ---------- form extras ---------- */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background: var(--gray-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C7780' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.form-success:focus { outline: none; }
.form-error a { color: inherit; text-decoration: underline; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }

/* ---------- accessibility ---------- */
.skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: 100; background: var(--gray-900); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: 700; }
.skip-link:focus { top: var(--space-3); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (hover: none) {
  .feature:hover, .svc:hover, .btn-primary:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .nav-links { gap: var(--space-5); }
}
@media (max-width: 960px) {
  .menu-toggle { display: grid; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-2) var(--space-5) var(--space-4);
    background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-md);
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: var(--space-3) 0; font-size: var(--text-base); border-bottom: 1px solid var(--border-subtle); }
  .nav-links a:last-child { border-bottom: 0; }
}
@media (max-width: 900px) {
  .hero-inner, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-inner { padding: var(--space-8) 0; gap: var(--space-6); }
  .hero-visual { max-width: 300px; margin: 0 auto; }
  .hero-visual img { max-width: 200px; }
  .about-grid, .contact-grid { gap: var(--space-7); }
  .cards-3, .services-grid, .benefit-grid { grid-template-columns: 1fr 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-top > :first-child { grid-column: 1 / -1; }
  .hero h1 { font-size: var(--text-4xl); }
  .pad { padding: var(--space-8) 0; }
}
@media (max-width: 620px) {
  .cards-3, .services-grid, .benefit-grid, .form-row, .foot-top { grid-template-columns: 1fr; }
  .hero-inner { padding: var(--space-7) 0; }
  .hero h1 { font-size: 2.125rem; }
  .hero p.lead { font-size: var(--text-md); }
  .hero-visual { display: none; }
  .hero-meta { gap: var(--space-5); }
  h2.section-title, .about-text h2, .contact-info h2 { font-size: var(--text-2xl); }
  .about-card, .form-card { padding: var(--space-5); }
  .pad { padding: var(--space-7) 0; }
  .section-head { margin-bottom: var(--space-6); }
  .strip-inner { justify-content: flex-start; }
  .form-foot .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .nav-cta-btn { display: none; }
  .wrap { padding-left: max(var(--space-4), env(safe-area-inset-left)); padding-right: max(var(--space-4), env(safe-area-inset-right)); }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: flex; align-items: center; padding: var(--space-8) 0; }
.notfound .brand { margin-bottom: var(--space-7); }
.notfound h1 { margin-bottom: var(--space-4); }
.section-head .lead { margin-top: var(--space-4); }