/* FM360 website
   Layout: a control-room feel. Each product sits beside a live-looking panel built in HTML,
   so the page shows the work instead of describing it.
   Colours follow GuardOps: deep blue for action, ink for text, green for "done", amber for "due". */

:root{
  --bg:#F4F6F5;          /* page */
  --surface:#FFFFFF;     /* cards, panels */
  --surface-2:#EEF1F0;   /* bands, rows */
  --ink:#142028;         /* text */
  --muted:#57697A;       /* secondary text */
  --line:#DCE3E6;        /* borders */
  --primary:#1A5CA8;     /* buttons, links */
  --primary-ink:#0E3D6B; /* hover, deep panels */
  --primary-tint:#E5EEF7;
  --ok:#0F6E56;          /* done, on track */
  --ok-tint:#E2F1EC;
  --due:#B8722A;         /* due, attention */
  --due-tint:#F7EADB;
  --bad:#B23A3A;
  --bad-tint:#F8E4E2;
  --console:#0E3D6B;     /* hero control-room panel */
  --console-2:#164B80;
  --console-ink:#E8F0F8;
  --console-muted:#9DB7D2;
  --shadow:0 1px 2px rgba(20,32,40,.06), 0 14px 34px -14px rgba(20,32,40,.22);

  --f-display:'Manrope', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-body:'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --wrap:1180px;
  --gutter:20px;
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E161D; --surface:#16212B; --surface-2:#1C2833; --ink:#E7EEF2; --muted:#8CA0AF; --line:#263341;
    --primary:#5B9BDB; --primary-ink:#CFE2F5; --primary-tint:#1B2C3C;
    --ok:#3FB08D; --ok-tint:#132922; --due:#E0A052; --due-tint:#2E2313; --bad:#E37272; --bad-tint:#301717;
    --console:#122536; --console-2:#1A3247; --console-ink:#E7EEF2; --console-muted:#8CA0AF;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E161D; --surface:#16212B; --surface-2:#1C2833; --ink:#E7EEF2; --muted:#8CA0AF; --line:#263341;
  --primary:#5B9BDB; --primary-ink:#CFE2F5; --primary-tint:#1B2C3C;
  --ok:#3FB08D; --ok-tint:#132922; --due:#E0A052; --due-tint:#2E2313; --bad:#E37272; --bad-tint:#301717;
  --console:#122536; --console-2:#1A3247; --console-ink:#E7EEF2; --console-muted:#8CA0AF;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--f-body); }
img{ max-width:100%; }
a{ color:var(--primary); }
h1,h2,h3{ font-family:var(--f-display); color:var(--ink); text-wrap:balance; margin:0; letter-spacing:-.02em; }
h1{ font-size:clamp(36px, 5.4vw, 60px); line-height:1.05; font-weight:800; }
h2{ font-size:clamp(28px, 3.6vw, 40px); line-height:1.12; font-weight:800; }
h3{ font-size:20px; line-height:1.3; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
.eyebrow{ font:600 12.5px/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.lede{ font-size:19px; color:var(--muted); max-width:58ch; }
.muted{ color:var(--muted); }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:6px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:10px;
  font:700 16px/1 var(--f-body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-ink); }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary:hover{ color:#0E161D; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-primary{ color:#0E161D; } :root:not([data-theme="light"]) .btn-primary:hover{ background:var(--primary-ink); } }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.link-arrow{ font-weight:700; text-decoration:none; color:var(--primary); display:inline-flex; gap:6px; align-items:center; }
.link-arrow:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- Header ---------- */
.site-head{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.head-row{ display:flex; align-items:center; gap:24px; min-height:68px; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none; }
.brand-mark{ width:36px; height:36px; border-radius:9px; background:var(--primary); color:#fff; display:grid; place-items:center;
  font:800 14px/1 var(--f-display); letter-spacing:-.02em; }
.brand-word{ font:800 21px/1 var(--f-display); letter-spacing:-.02em; }
.brand-word span{ color:var(--primary); }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{ white-space:nowrap; text-decoration:none; color:var(--ink); font-weight:600; font-size:15px; padding:9px 12px; border-radius:8px; }
.nav a:hover{ background:var(--surface-2); }
.nav a[aria-current="page"]{ color:var(--primary); background:var(--primary-tint); }
.head-cta{ display:flex; gap:10px; flex:none; }
.head-cta .btn{ min-height:42px; padding:0 16px; font-size:15px; }
.menu-btn{ display:none; margin-left:auto; width:46px; height:46px; border-radius:10px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; }
.menu-btn svg{ width:22px; height:22px; }
@media (max-width:1180px){
  .menu-btn{ display:inline-grid; place-items:center; }
  .nav, .head-cta{ display:none; }
  .site-head.open .nav{ display:flex; flex-direction:column; align-items:stretch; gap:2px; position:absolute; left:0; right:0; top:100%;
    background:var(--bg); border-bottom:1px solid var(--line); padding:10px var(--gutter) 16px; margin:0; }
  .site-head.open .nav a{ padding:13px 12px; font-size:17px; }
  .site-head.open .nav .nav-cta{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
}
.nav-cta{ display:none; }

/* ---------- Sections ---------- */
section{ padding-block:84px; }
.section-head{ display:grid; gap:14px; margin-bottom:44px; max-width:760px; }
.band{ background:var(--surface-2); border-block:1px solid var(--line); }
@media (max-width:720px){ section{ padding-block:60px; } .section-head{ margin-bottom:32px; } }

/* ---------- Hero ---------- */
.hero{ padding-block:72px 64px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; }
.hero-copy{ display:grid; gap:24px; min-width:0; }
.hero-note{ font-size:14.5px; color:var(--muted); }
.crumb{ font-size:14px; color:var(--muted); }
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--ink); }
@media (max-width:920px){ .hero-grid{ grid-template-columns:minmax(0,1fr); gap:40px; } .hero{ padding-block:48px; } }

/* Control-room panel */
.console{ background:var(--console); color:var(--console-ink); border-radius:16px; padding:18px; box-shadow:var(--shadow); min-width:0; }
.console-top{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font:500 12px/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--console-muted); margin-bottom:14px; }
.tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.tile{ background:var(--console-2); border-radius:10px; padding:12px 14px; min-width:0; }
.tile small{ display:block; font-size:12.5px; color:var(--console-muted); }
.tile b{ display:block; font:800 28px/1.15 var(--f-display); letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }
.tile b span{ font-size:15px; font-weight:600; color:var(--console-muted); }
.tile b.due{ color:#F0B46A; }
.feed{ background:var(--surface); color:var(--ink); border-radius:12px; padding:14px; display:grid; gap:8px; }
.feed-head{ display:flex; justify-content:space-between; gap:8px; font-size:13.5px; font-weight:700; }
.feed-head span{ color:var(--muted); font-weight:600; }
.feed-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-size:14.5px; }
.feed-row time{ font:500 13px/1 var(--f-mono); color:var(--muted); }
.feed-row.due{ background:var(--due-tint); border-color:transparent; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); }
.dot.due{ background:var(--due); }
.dot.bad{ background:var(--bad); }
@media (max-width:520px){ .tiles{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .tiles .tile:last-child{ grid-column:1/-1; } .tile b{ font-size:24px; } }

/* Industries strip */
.strip{ padding-block:22px; }
.strip-row{ display:flex; align-items:center; gap:10px 28px; flex-wrap:wrap; }
.strip-row b{ font:600 12px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.strip-row span{ font-weight:600; color:var(--ink); font-size:15.5px; }

/* ---------- Product blocks (home) ---------- */
.products{ display:grid; gap:28px; }
.product{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; padding:40px; }
.product.flip .product-copy{ order:2; }
.product-copy{ display:grid; gap:18px; min-width:0; }
.tag{ display:inline-flex; align-items:center; gap:10px; font:600 13px/1 var(--f-mono); color:var(--muted); letter-spacing:.04em; }
.tag i{ width:34px; height:34px; border-radius:9px; background:var(--primary-tint); color:var(--primary); display:grid; place-items:center; font-style:normal; }
.tag i svg{ width:18px; height:18px; }
.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ticks li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; font-size:16px; }
.ticks li::before{ content:""; width:20px; height:20px; margin-top:3px; border-radius:50%; background:var(--ok-tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230F6E56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
@media (max-width:920px){ .product{ grid-template-columns:minmax(0,1fr); padding:26px 22px; gap:30px; } .product.flip .product-copy{ order:0; } }

/* App window mock */
.window{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:12px; min-width:0; }
.window-bar{ display:flex; align-items:center; gap:6px; padding:4px 6px 12px; font:500 12.5px/1 var(--f-mono); color:var(--muted); }
.window-bar i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.window-bar span{ margin-left:8px; }
.window-body{ background:var(--surface); border-radius:10px; padding:16px; display:grid; gap:10px; }
.wb-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }
.wb-head b{ font-size:16px; }
.wb-head span{ font-size:13.5px; color:var(--muted); }
.cp{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:9px; background:var(--surface-2); font-size:15px; }
.cp .mono{ font-size:13.5px; color:var(--muted); }
.cp.done .mono{ color:var(--ok); font-weight:600; }
.cp.next{ background:var(--due-tint); }
.cp.next .mono{ color:var(--due); font-weight:600; }
.wb-foot{ font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; }
.check{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:10px 12px; border-radius:9px; border:1px solid var(--line); font-size:15px; }
.mark{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font:700 13px/1 var(--f-body); background:var(--ok-tint); color:var(--ok); }
.mark.warn{ background:var(--due-tint); color:var(--due); }
.photo-slot{ border:1.5px dashed var(--line); border-radius:9px; padding:12px; text-align:center; font-size:14px; color:var(--muted); }
.submit{ background:var(--primary); color:#fff; border-radius:9px; padding:11px; text-align:center; font-weight:700; font-size:15px; }
:root[data-theme="dark"] .submit{ color:#0E161D; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .submit{ color:#0E161D; } }
.minis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.mini{ background:var(--surface-2); border-radius:9px; padding:10px 12px; min-width:0; }
.mini small{ display:block; font-size:12.5px; color:var(--muted); }
.mini b{ font:800 22px/1.2 var(--f-display); font-variant-numeric:tabular-nums; }
.wo{ width:100%; border-collapse:collapse; font-size:14.5px; }
.wo th{ text-align:left; font-size:12.5px; font-weight:600; color:var(--muted); padding:8px 6px; border-bottom:1px solid var(--line); }
.wo td{ padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.wo tr:last-child td{ border-bottom:0; }
.table-scroll{ overflow-x:auto; }
.pill{ display:inline-block; font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.pill.ok{ background:var(--ok-tint); color:var(--ok); }
.pill.due{ background:var(--due-tint); color:var(--due); }
.pill.info{ background:var(--primary-tint); color:var(--primary); }
.pill.bad{ background:var(--bad-tint); color:var(--bad); }
.sample{ font:500 12px/1.4 var(--f-mono); color:var(--muted); margin-top:10px; }

/* ---------- Grids of points ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.grid-4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.point{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:grid; gap:10px; align-content:start; min-width:0; }
.point .ic{ width:40px; height:40px; border-radius:10px; background:var(--primary-tint); color:var(--primary); display:grid; place-items:center; }
.point .ic svg{ width:20px; height:20px; }
.point p{ color:var(--muted); font-size:16px; }
.plain{ display:grid; gap:8px; align-content:start; min-width:0; }
.plain p{ color:var(--muted); font-size:16px; }
@media (max-width:980px){ .grid-3, .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .grid-3, .grid-2, .grid-4{ grid-template-columns:minmax(0,1fr); } }

/* Steps: a real sequence, so they are numbered */
.steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; counter-reset:step; }
.step{ border-top:3px solid var(--primary); padding-top:18px; display:grid; gap:8px; align-content:start; min-width:0; }
.step::before{ counter-increment:step; content:"Step " counter(step); font:600 12.5px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--primary); }
.step p{ color:var(--muted); font-size:16px; }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 18px; } }
@media (max-width:560px){ .steps{ grid-template-columns:minmax(0,1fr); } }

/* Templates */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:9px 16px; font-weight:600; font-size:15px; }

/* Languages */
.langs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.langs span{ background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 14px; font-size:16px; }

/* About split */
.split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:start; }
.split-copy{ display:grid; gap:18px; min-width:0; }
@media (max-width:920px){ .split{ grid-template-columns:minmax(0,1fr); gap:32px; } }

/* CTA band */
.cta{ background:var(--primary-ink); color:#fff; border-radius:20px; padding:48px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; }
.cta h2{ color:#fff; }
.cta p{ color:#C9DAEC; margin-top:10px; }
.cta .btn-primary{ background:#fff; color:var(--primary-ink); }
.cta .btn-primary:hover{ background:#E5EEF7; }
.cta .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.cta .btn-ghost:hover{ border-color:#fff; }
:root[data-theme="dark"] .cta{ background:var(--console-2); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cta{ background:var(--console-2); } }
@media (max-width:820px){ .cta{ grid-template-columns:minmax(0,1fr); padding:32px 24px; } }

/* Pair-with */
.pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.pair a{ display:grid; gap:6px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; transition:border-color .15s; }
.pair a:hover{ border-color:var(--primary); }
.pair a b{ font:700 19px/1.3 var(--f-display); color:var(--primary); }
.pair a span{ color:var(--muted); font-size:16px; }
@media (max-width:640px){ .pair{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:start; }
.contact-info{ display:grid; gap:18px; min-width:0; }
.contact-info dl{ margin:0; display:grid; gap:14px; }
.contact-info dt{ font:600 12.5px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.contact-info dd{ margin:0; font-weight:600; }
form.inquiry{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.field{ display:grid; gap:6px; min-width:0; }
.field.full{ grid-column:1/-1; }
.field label{ font-weight:600; font-size:15px; }
.field input, .field select, .field textarea{ width:100%; font:400 16px/1.4 var(--f-body); color:var(--ink); background:var(--bg); border:1.5px solid var(--line);
  border-radius:9px; padding:12px 13px; min-height:48px; }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }
.form-foot{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.form-foot small{ color:var(--muted); }
.form-msg{ grid-column:1/-1; padding:12px 14px; border-radius:9px; font-weight:600; font-size:15px; }
.form-msg.ok{ background:var(--ok-tint); color:var(--ok); }
.form-msg.bad{ background:var(--bad-tint); color:var(--bad); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:920px){ .contact-grid{ grid-template-columns:minmax(0,1fr); gap:32px; } }
@media (max-width:560px){ form.inquiry{ grid-template-columns:minmax(0,1fr); padding:20px; } }

/* ---------- Footer ---------- */
.site-foot{ border-top:1px solid var(--line); padding-block:48px 28px; background:var(--surface); }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap:32px; }
.foot-grid h4{ margin:0 0 12px; font:600 12.5px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-grid a{ color:var(--ink); text-decoration:none; font-size:15.5px; }
.foot-grid a:hover{ color:var(--primary); }
.foot-grid p{ color:var(--muted); font-size:15.5px; max-width:36ch; margin-top:12px; }
.foot-base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .foot-grid > :first-child{ grid-column:1/-1; } }

/* Phone app mock (Guard Ops page) */
.phone{ width:min(260px, 100%); background:var(--ink); border-radius:30px; padding:10px; box-shadow:var(--shadow); }
.phone-screen{ background:var(--bg); border-radius:22px; padding:16px 14px; display:grid; gap:10px; }
.phone-screen .ph-title{ font:700 15px/1.2 var(--f-display); }
.big-btn{ border-radius:12px; padding:14px; text-align:center; font-weight:700; }
.big-btn.blue{ background:var(--primary); color:#fff; }
.big-btn.sos{ background:var(--bad); color:#fff; letter-spacing:.06em; }
:root[data-theme="dark"] .big-btn.blue{ color:#0E161D; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .big-btn.blue{ color:#0E161D; } }
.hero-visual{ display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:16px; align-items:end; min-width:0; }
.hero-visual .phone{ width:100%; }
.hero-grid.wide-visual{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
@media (max-width:920px){ .hero-grid.wide-visual{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .hero-visual{ grid-template-columns:minmax(0,1fr); gap:18px; } .hero-visual .phone{ justify-self:center; width:min(240px, 100%); } }

.nav .btn-primary, .nav .btn-primary:hover{ color:#fff; }
.nav .btn{ padding:0 22px; }
:root[data-theme="dark"] .nav .btn-primary{ color:#0E161D; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav .btn-primary{ color:#0E161D; } }

/* Before / after table (Advantages) */
.compare{ width:100%; min-width:640px; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; font-size:16px; }
.compare th{ text-align:left; font:600 12.5px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:14px 18px; background:var(--surface-2); }
.compare td{ padding:16px 18px; border-top:1px solid var(--line); vertical-align:top; }
.compare td:first-child{ font-weight:700; }
.compare td:nth-child(2){ color:var(--muted); }
.compare td:nth-child(3){ color:var(--ok); font-weight:600; }
@media (max-width:640px){
  .compare{ min-width:0; }
  .compare thead{ display:none; }
  .compare, .compare tbody, .compare tr, .compare td{ display:block; }
  .compare tr{ padding:14px 16px; border-top:1px solid var(--line); }
  .compare tr:first-child{ border-top:0; }
  .compare td{ border:0; padding:3px 0; }
  .compare td:nth-child(2)::before{ content:"Before: "; font-weight:700; color:var(--ink); }
  .compare td:nth-child(3)::before{ content:"With FM360: "; font-weight:700; color:var(--ink); }
}

/* FAQ (Contact) */
.faq{ display:grid; gap:10px; max-width:860px; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 20px; }
.faq summary{ cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:17px; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font:700 22px/1 var(--f-display); color:var(--primary); flex:none; }
.faq details[open] summary::after{ content:"−"; }
.faq details p{ padding:0 0 18px; color:var(--muted); }

/* "A FACILINK product" under the logo */
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-by{ font:500 11px/1 var(--f-mono); letter-spacing:.04em; color:var(--muted); margin-top:4px; }
.foot-base a{ color:var(--ink); }
.foot-base a:hover{ color:var(--primary); }
.head-row{ gap:18px; }
.nav a{ padding:9px 10px; }
@media (max-width:1240px){
  .menu-btn{ display:inline-grid; place-items:center; }
  .nav, .head-cta{ display:none; }
  .site-head.open .nav{ display:flex; flex-direction:column; align-items:stretch; gap:2px; position:absolute; left:0; right:0; top:100%;
    background:var(--bg); border-bottom:1px solid var(--line); padding:10px var(--gutter) 16px; margin:0; }
  .site-head.open .nav a{ padding:13px 12px; font-size:17px; }
  .site-head.open .nav .nav-cta{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
}
.nav{ gap:0; }
.nav a{ padding:9px 9px; font-size:14.5px; }
.head-cta{ gap:8px; }
.head-cta .btn{ padding:0 14px; }

/* Products dropdown in the header */
.nav-drop{ position:relative; }
.nav-drop-btn{ display:inline-flex; align-items:center; gap:5px; font:inherit; font-weight:600; font-size:14.5px; color:var(--ink);
  padding:9px 9px; border-radius:8px; border:0; background:none; cursor:pointer; white-space:nowrap; }
.nav-drop-btn svg{ width:15px; height:15px; transition:transform .2s; }
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn{ background:var(--surface-2); }
.nav-drop.current .nav-drop-btn{ color:var(--primary); }
.nav-drop.open .nav-drop-btn svg{ transform:rotate(180deg); }
.nav-drop-menu{ display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:50; width:300px; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px rgba(14,22,29,.14); }
.nav-drop.open .nav-drop-menu{ display:flex; flex-direction:column; gap:2px; }
@media (hover:hover) and (min-width:1241px){
  .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{ display:flex; flex-direction:column; gap:2px; }
  .nav-drop:hover .nav-drop-btn svg{ transform:rotate(180deg); }
  .nav-drop-menu::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:8px; }   /* keeps the menu open while the pointer moves down */
}
.nav-drop-menu a{ display:flex; flex-direction:column; gap:2px; white-space:normal; padding:10px 12px; border-radius:8px; }
.nav-drop-menu a b{ font-size:15px; }
.nav-drop-menu a small{ font-size:13px; font-weight:400; color:var(--muted); line-height:1.35; }
/* Phone menu: the three products sit under "Products", always open */
@media (max-width:1240px){
  .site-head.open .nav-drop-btn{ width:100%; justify-content:space-between; padding:13px 12px; font-size:17px; pointer-events:none; }
  .site-head.open .nav-drop-btn svg{ display:none; }
  .site-head.open .nav-drop-menu{ display:flex; flex-direction:column; position:static; width:auto; box-shadow:none; border:0;
    background:none; padding:0 0 6px 12px; border-left:2px solid var(--line); margin-left:12px; }
  .site-head.open .nav-drop-menu a{ padding:10px 12px; }
  .site-head.open .nav-drop-menu a small{ display:none; }
  .site-head.open .nav-drop-menu a b{ font-size:16.5px; font-weight:600; }
}