/* ============================================================
   CLIMA PONTES — Engineering / Technical design system
   ============================================================ */

/* ---- Tokens ---- */
:root {
  /* Brand */
  --blue: #5184dc;          /* cold side */
  --blue-deep: #2f5bb0;
  --blue-ink: #1b2a44;      /* near-black cool navy */
  --orange: #d25a2f;        /* heat side */
  --orange-soft: #e07a4f;

  /* Theme accent (overridable by tweaks) */
  --accent: var(--blue);
  --accent-2: var(--orange);

  /* Neutrals (cool toned) */
  --ink: #16202f;
  --ink-2: #41506a;
  --muted: #6c7a92;
  --line: #dde3ec;
  --line-2: #e9edf3;
  --paper: #ffffff;
  --paper-2: #f5f7fb;
  --paper-3: #eef2f8;

  /* Dark surface */
  --navy: #101a2c;
  --navy-2: #16243b;

  /* Type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(27,42,68,.06), 0 2px 8px rgba(27,42,68,.05);
  --shadow-md: 0 8px 30px rgba(27,42,68,.10);
  --shadow-lg: 0 24px 60px rgba(27,42,68,.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--ink); }
p { margin: 0; }
::selection { background: color-mix(in oklch, var(--accent) 28%, white); }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--center { justify-content: center; }

.h-kicker { /* numbered index for engineering feel */
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-2); line-height: 1.65; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: 15.5px;
  padding: 14px 24px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px color-mix(in oklch, var(--accent) 35%, transparent); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in oklch, var(--accent) 42%, transparent); }
.btn--wa { background: #20a85a; color:#fff; box-shadow: 0 6px 18px rgba(32,168,90,.32); }
.btn--wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(32,168,90,.4); background:#1d9a52; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--light { background:#fff; color: var(--blue-ink); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--lg { padding: 17px 30px; font-size: 16.5px; }

/* blueprint grid background util */
.grid-bg::before {
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(81,132,220,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(81,132,220,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
  pointer-events:none;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, #fff 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(27,42,68,.06); }
.header__bar { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav a {
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  padding: 9px 14px; border-radius: 8px; transition: color .15s, background .15s;
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header__actions .phone { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink); display:flex; align-items:center; gap:8px;}
.header__actions .phone svg { width:16px; height:16px; color: var(--accent); }
.burger { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.burger svg{ width:22px; height:22px; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; display:none; }
.drawer.is-open { display:block; }
.drawer__scrim { position:absolute; inset:0; background: rgba(16,26,44,.4); backdrop-filter: blur(2px); }
.drawer__panel { position:absolute; top:0; right:0; height:100%; width: min(86vw, 360px); background:#fff; padding: 24px; display:flex; flex-direction:column; gap:6px; box-shadow: var(--shadow-lg); transform: translateX(8px); }
.drawer__panel a { padding: 14px 12px; border-radius:10px; font-weight:500; font-size:17px; border-bottom:1px solid var(--line-2); }
.drawer__panel a:hover{ background: var(--paper-2); }
.drawer__close{ align-self:flex-end; width:44px;height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer; margin-bottom:8px;}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 104px); background: linear-gradient(180deg, var(--paper-2), #fff 70%); }
.hero__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(36px, 5vw, 72px); align-items: center; position: relative; z-index: 2; }
.hero__tags { display:flex; gap:8px; flex-wrap:wrap; margin: 22px 0 0; }
.tag { font-family: var(--mono); font-size: 11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-2); border:1px solid var(--line); border-radius: 100px; padding: 6px 13px; background:#fff; }
.hero h1 { font-size: clamp(38px, 5.4vw, 68px); margin-top: 20px; }
.hero h1 .accent { color: var(--accent); }
.hero h1 .accent-2 { color: var(--accent-2); }
.hero__lead { margin-top: 22px; max-width: 30em; }
.hero__cta { display:flex; gap:14px; flex-wrap:wrap; margin-top: 30px; }
.hero__metrics { display:flex; gap: 30px; margin-top: 42px; flex-wrap:wrap; }
.metric .n { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight:600; color: var(--ink); letter-spacing:-.02em; }
.metric .n span { color: var(--accent); }
.metric .l { font-family: var(--mono); font-size: 11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-top: 2px; }
.metric { position:relative; padding-left: 18px; }
.metric::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; background: var(--accent); opacity:.5; border-radius:2px; }

/* hero visual: spec panel */
.hero__visual { position: relative; }
.specpanel {
  background: var(--navy);
  border-radius: 18px;
  padding: 26px;
  color: #e8eefb;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.specpanel::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 30px 30px; pointer-events:none;
}
.specpanel__head { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.specpanel__dot { display:flex; gap:6px; }
.specpanel__dot i { width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.25); }
.specpanel__dot i:first-child{ background: var(--orange); }
.specpanel__tag { font-family: var(--mono); font-size: 11px; letter-spacing:.14em; color: rgba(255,255,255,.55); text-transform:uppercase; }
.specimg {
  margin-top: 18px; height: 230px; border-radius: 12px; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, rgba(255,255,255,0) 10px 20px),
    linear-gradient(160deg, #1d3358, #16243b);
  border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.specimg .ph { font-family: var(--mono); font-size: 12px; letter-spacing:.1em; color: rgba(255,255,255,.5); text-transform:uppercase; text-align:center; }
.specimg .ph svg{ width:34px;height:34px; margin: 0 auto 10px; display:block; opacity:.6; }
.specrows { margin-top: 18px; position:relative; z-index:1; display:grid; gap:0; }
.specrow { display:flex; justify-content:space-between; align-items:center; padding: 11px 0; border-top:1px solid rgba(255,255,255,.09); font-size: 14px; }
.specrow:first-child{ border-top:none; }
.specrow .k { font-family: var(--mono); font-size: 12px; letter-spacing:.06em; color: rgba(255,255,255,.5); text-transform:uppercase;}
.specimg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 50%; display:block; }
.specimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,32,.35), transparent 55%); pointer-events:none; }
.specrow .v { font-weight:600; color:#fff; }
.specrow .v.ok { color: #58d08a; }
.hero__badge {
  position:absolute; bottom: -22px; left: -22px; z-index: 3;
  background:#fff; border:1px solid var(--line); border-radius: 14px; padding: 14px 18px;
  box-shadow: var(--shadow-md); display:flex; align-items:center; gap:12px;
}
.hero__badge .ico { width:42px; height:42px; border-radius:10px; background: color-mix(in oklch, var(--accent) 14%, white); color: var(--accent); display:flex; align-items:center; justify-content:center; }
.hero__badge .ico svg{ width:22px; height:22px; }
.hero__badge .t { font-weight:700; font-size:15px; }
.hero__badge .s { font-family:var(--mono); font-size:11px; letter-spacing:.08em; color: var(--muted); text-transform:uppercase; }

/* ============================================================
   MARQUEE / TRUST STRIP
   ============================================================ */
.strip { border-block:1px solid var(--line); background: #fff; }
.strip__inner { display:flex; align-items:center; gap: 28px; padding-block: 22px; flex-wrap:wrap; justify-content:space-between; }
.strip__label { font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
.strip__segs { display:flex; gap: 10px; flex-wrap:wrap; }
.seg { font-family: var(--mono); font-size: 12.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-2); display:flex; align-items:center; gap:8px; }
.seg::before{ content:""; width:7px; height:7px; border-radius:2px; background: var(--accent); transform: rotate(45deg); }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.shead { max-width: 720px; margin-bottom: clamp(40px, 5vw, 60px); }
.shead.center { margin-inline:auto; text-align:center; }
.shead h2 { font-size: clamp(30px, 4vw, 48px); margin-top: 16px; }
.shead p { margin-top: 18px; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.svc {
  position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 30px 28px; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  overflow:hidden;
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.svc__num { font-family: var(--mono); font-size: 12px; letter-spacing:.14em; color: var(--muted); }
.svc__ico { width:52px; height:52px; border-radius: 12px; background: var(--paper-3); color: var(--accent); display:flex; align-items:center; justify-content:center; margin: 18px 0 20px; transition: background .2s, color .2s; }
.svc__ico svg{ width:26px; height:26px; }
.svc:hover .svc__ico { background: var(--accent); color:#fff; }
.svc h3 { font-size: 22px; }
.svc p { margin-top: 11px; color: var(--ink-2); font-size: 15.5px; }
.svc__list { margin: 18px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.svc__list li { font-size: 14px; color: var(--ink-2); display:flex; gap:9px; align-items:flex-start; font-family: var(--mono); letter-spacing:.01em; }
.svc__list li::before{ content:""; flex:0 0 auto; width:6px; height:6px; margin-top:7px; background: var(--accent); border-radius:1px; transform: rotate(45deg); }

/* ============================================================
   SYSTEMS — VRF vs SPLIT
   ============================================================ */
.sys { background: var(--paper-2); }
.sys-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.syscard { background:#fff; border:1px solid var(--line); border-radius: 16px; padding: 32px; position:relative; overflow:hidden; }
.syscard.feat { border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); box-shadow: var(--shadow-md); }
.syscard__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.syscard__abbr { font-family:var(--display); font-size: 13px; font-weight:600; letter-spacing:.1em; color:#fff; background: var(--accent); padding: 6px 11px; border-radius:7px; }
.syscard.alt .syscard__abbr{ background: var(--accent-2); }
.syscard h3 { font-size: 26px; margin-top: 22px; }
.syscard__sub { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-top:6px; }
.syscard > p { margin-top: 16px; color: var(--ink-2); font-size: 15.5px; }
.specline { display:flex; justify-content:space-between; padding: 12px 0; border-top:1px dashed var(--line); font-size:14.5px; }
.specline:first-of-type { margin-top: 22px; }
.specline .k { color: var(--muted); font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; }
.specline .v { font-weight:600; color: var(--ink); }
.syscard__use { margin-top:22px; font-size:13.5px; color:var(--ink-2); }
.syscard__use b{ color: var(--ink); }

/* ============================================================
   PMOC — dark feature
   ============================================================ */
.pmoc { background: var(--navy); color: #dbe6fb; overflow:hidden; position:relative; }
.pmoc__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items:center; position:relative; z-index:2; }
.pmoc .eyebrow{ color: color-mix(in oklch, var(--accent) 80%, white); }
.pmoc h2 { color:#fff; font-size: clamp(30px, 4vw, 46px); margin-top:16px; }
.pmoc__lead { margin-top:20px; color: rgba(219,230,251,.78); font-size: 17.5px; line-height:1.65; }
.pmoc__law { margin-top: 24px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color: rgba(219,230,251,.6); border-left:2px solid var(--accent); padding-left:14px; }
.pmoc__check { list-style:none; margin: 8px 0 0; padding:0; display:grid; gap:14px; }
.pmoc__check li { display:flex; gap:14px; align-items:flex-start; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 18px; }
.pmoc__check .ck { flex:0 0 auto; width:26px; height:26px; border-radius:7px; background: color-mix(in oklch, var(--accent) 24%, transparent); color: color-mix(in oklch, var(--accent) 80%, white); display:flex; align-items:center; justify-content:center; }
.pmoc__check .ck svg{ width:15px; height:15px; }
.pmoc__check .tx b { color:#fff; display:block; font-size:15.5px; }
.pmoc__check .tx span { font-size:14px; color: rgba(219,230,251,.7); }

/* ============================================================
   PROCESS
   ============================================================ */
.proc-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background:#fff; }
.proc { padding: 30px 26px 34px; border-right:1px solid var(--line); position:relative; transition: background .2s; }
.proc:last-child{ border-right:none; }
.proc:hover{ background: var(--paper-2); }
.proc__n { font-family: var(--display); font-size: 15px; font-weight:600; color:#fff; background: var(--accent); width: 34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.proc h3 { font-size: 19px; margin-top: 22px; }
.proc p { font-size: 14.5px; color: var(--ink-2); margin-top:10px; }

/* ============================================================
   DIFERENCIAIS / why
   ============================================================ */
.why-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,64px); align-items:center; }
.why__list { display:grid; gap: 4px; }
.why__item { display:flex; gap:18px; padding: 22px 0; border-top:1px solid var(--line); }
.why__item:first-child{ border-top:none; }
.why__item .ico { flex:0 0 auto; width:48px; height:48px; border-radius:12px; background: var(--paper-3); color: var(--accent); display:flex; align-items:center; justify-content:center; }
.why__item .ico svg{ width:24px; height:24px; }
.why__item h3 { font-size: 19px; }
.why__item p { font-size: 15px; color: var(--ink-2); margin-top:6px; }
.statbox { background: var(--navy); border-radius: 18px; padding: 40px; color:#fff; position:relative; overflow:hidden; }
.statbox__grid { display:grid; grid-template-columns: 1fr 1fr; gap: 30px 26px; position:relative; z-index:1; }
.statbox .n { font-family: var(--display); font-size: clamp(34px, 4.4vw, 46px); font-weight:600; letter-spacing:-.02em; }
.statbox .n span{ color: color-mix(in oklch, var(--accent) 75%, white); }
.statbox .l { font-family:var(--mono); font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.6); margin-top:6px; }

/* ============================================================
   GALLERY
   ============================================================ */
.gal-grid { display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 168px; gap: 16px; }
.gal { border-radius: var(--radius); min-height:0; overflow:hidden; position:relative; border:1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 14px, var(--paper-3) 14px 28px);
  display:flex; align-items:flex-end; padding: 20px; transition: transform .2s; }
.gal:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gal.tall { grid-row: span 2; }
figure.gal{ margin:0; padding:0; align-items:flex-end; }
.gal img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
figure.gal:hover img{ transform: scale(1.04); }
.gal__cap{ position:relative; z-index:1; width:100%; margin:auto 0 0; padding:36px 20px 18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:linear-gradient(to top, rgba(10,12,14,.82), rgba(10,12,14,0)); }
.gal.wide { grid-column: span 2; }
.gal__ph { font-family: var(--mono); font-size: 11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); background:#fff; border:1px solid var(--line); padding: 5px 11px; border-radius: 100px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.test-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.test{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 28px; display:flex; flex-direction:column; }
.test__stars{ display:flex; gap:3px; color: var(--accent-2); }
.test__stars svg{ width:17px; height:17px; }
.test p{ margin-top:16px; color: var(--ink); font-size:16px; line-height:1.6; flex:1; }
.test__by{ margin-top:22px; display:flex; align-items:center; gap:12px; }
.test__av{ width:42px; height:42px; border-radius:50%; background: var(--paper-3); color: var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:16px; }
.test__by .nm{ font-weight:600; font-size:14.5px; }
.test__by .rl{ font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color: var(--muted); text-transform:uppercase; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{ max-width: 820px; margin-inline:auto; }
.faq{ border-top:1px solid var(--line); }
.faq:last-child{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding: 24px 6px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family: var(--display); font-weight:500; font-size: 19px; color: var(--ink); letter-spacing:-.01em; }
.faq__ico{ flex:0 0 auto; width:30px; height:30px; border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; transition: transform .25s, background .2s, color .2s, border-color .2s; }
.faq__ico svg{ width:16px; height:16px; }
.faq.open .faq__ico{ background: var(--accent); color:#fff; border-color: var(--accent); transform: rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition: max-height .32s ease; }
.faq__a p{ padding: 0 6px 24px; color: var(--ink-2); font-size: 15.5px; max-width: 62ch; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; overflow:hidden; }
.cta__card{ background: var(--navy); border-radius: 24px; padding: clamp(40px, 6vw, 76px); position:relative; overflow:hidden; text-align:center; }
.cta__card .eyebrow{ color: color-mix(in oklch, var(--accent) 80%, white); }
.cta__card h2{ color:#fff; font-size: clamp(30px, 4.6vw, 54px); margin-top:16px; }
.cta__card p{ color: rgba(219,230,251,.8); margin: 20px auto 0; max-width: 46ch; font-size: 18px; }
.cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top: 34px; }
.cta__glow{ position:absolute; width: 480px; height:480px; border-radius:50%; filter: blur(80px); opacity:.4; }
.cta__glow.a{ background: var(--accent); top:-180px; right:-120px; }
.cta__glow.b{ background: var(--accent-2); bottom:-220px; left:-120px; opacity:.28; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#0b1322; color: #aebbd4; padding-block: clamp(56px, 7vw, 84px) 30px; }
.footer__grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer__brand img{ height: 34px; filter: brightness(0) invert(1); opacity:.95; }
.footer__brand p{ margin-top:18px; font-size:14.5px; color: #8593b0; max-width: 30ch; line-height:1.6; }
.footer h4{ font-family: var(--mono); font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:500; margin-bottom: 18px; }
.footer__col a, .footer__col p{ display:block; color:#9aa8c6; font-size:14.5px; padding: 6px 0; transition: color .15s; }
.footer__col a:hover{ color:#fff; }
.footer__contact a{ display:flex; align-items:flex-start; gap:11px; color:#cdd7ec; font-size:14.5px; padding:9px 0; }
.footer__contact svg{ width:17px; height:17px; flex:0 0 auto; margin-top:2px; color: color-mix(in oklch, var(--accent) 75%, white); }
.footer__bottom{ margin-top: 48px; padding-top: 24px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size: 13px; color:#71809f; font-family:var(--mono); letter-spacing:.02em; }

/* tweakable hooks */
body.no-grid .grid-bg::before { display: none; }

/* float whatsapp */
.wa-float{ position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 58px; height:58px; border-radius:50%; background:#20a85a; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px rgba(32,168,90,.45); transition: transform .2s; }
.wa-float:hover{ transform: scale(1.07); }
.wa-float svg{ width:30px; height:30px; }

/* reveal */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .header__actions .phone{ display:none; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ max-width: 540px; }
  .proc-grid{ grid-template-columns: 1fr 1fr; }
  .proc:nth-child(2){ border-right:none; }
  .proc:nth-child(1),.proc:nth-child(2){ border-bottom:1px solid var(--line); }
  .why-grid{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr 1fr; gap:32px; }
}
@media (max-width: 720px){
  body{ font-size: 16px; }
  .svc-grid{ grid-template-columns: 1fr; }
  .sys-grid{ grid-template-columns: 1fr; }
  .test-grid{ grid-template-columns: 1fr; }
  .gal-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .gal.wide{ grid-column: span 2; }
  .statbox__grid{ grid-template-columns: 1fr 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .hero__badge{ left: 0; }
  .strip__inner{ gap:14px; }
}
@media (max-width: 460px){
  .proc-grid{ grid-template-columns: 1fr; }
  .proc{ border-right:none; border-bottom:1px solid var(--line); }
  .proc:last-child{ border-bottom:none; }
  .hero__metrics{ gap:18px; }
}