/*
 * AssureMesh marketing site — shared design system.
 * Light by default, dark when the visitor's system is dark. The homepage
 * (index.html) links this file and adds its own hero and demo styles.
 *
 * Class names are kept stable (site-head, shell, hero, section, card, grid,
 * site-foot ...) so every inner page picks up the theme from this one file.
 */
:root {
  color-scheme: light dark;
  --bg: #eef1f5;
  --paper: #ffffff;
  --ink: #0a1220;
  --muted: #4b5668;
  --faint: #66708a;
  --line: #d3d9e2;
  --soft: #e3e8ef;
  --signal: #ff5a1f;
  --signal-ink: #b93a06;
  --ok: #0a8f7a;
  --btn-bg: #0a1220;
  --btn-fg: #ffffff;
  --term-bg: #0a1220;
  --max: 1180px;
  --display: "Unbounded", "Manrope", "Segoe UI", system-ui, sans-serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #080d16;
    --paper: #0f1726;
    --ink: #eef2f8;
    --muted: #a3adbf;
    --faint: #8791a6;
    --line: #212c42;
    --soft: #16203a;
    --signal: #ff7a45;
    --signal-ink: #ff9a70;
    --ok: #3ddbb8;
    --btn-bg: #eef2f8;
    --btn-fg: #080d16;
    --term-bg: #04080f;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 var(--sans); }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--signal) 60%, transparent); }
a:hover { color: var(--signal-ink); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.skip { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.skip:focus { top: 12px; }
.shell { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }

/* ---------- header ---------- */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); transition: box-shadow .25s; }
.site-head.scrolled { box-shadow: 0 8px 30px -22px rgba(0, 0, 0, .55); }
.site-head .shell { min-height: 68px; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 17px/1 var(--display); letter-spacing: -.02em; }
.logo:hover { color: var(--ink); }
/* Brand mark: the production interlocking-rings logo (same artwork as
   favicon.svg and the homepage), on its dark tile so the pale gold gradient
   stays legible on the light theme. Inline data URI, so every page that uses
   <span class="logo-mark"> picks it up from this file. */
.logo-mark { flex: none; width: 34px; height: 34px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><defs><linearGradient id='ra' x1='11' y1='21' x2='61' y2='71' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%232c4f86'/><stop offset='1' stop-color='%23f3cf96'/></linearGradient><linearGradient id='rb' x1='44' y1='32' x2='84' y2='72' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23f3cf96'/><stop offset='1' stop-color='%238fc4f5'/></linearGradient></defs><rect width='100' height='100' rx='22' fill='%2303060c'/><circle cx='36' cy='46' r='25' stroke='url(%23ra)' stroke-width='7'/><circle cx='53' cy='30' r='7' fill='%2303060c'/><circle cx='64' cy='52' r='20' stroke='url(%23rb)' stroke-width='7'/><circle cx='49' cy='68' r='7' fill='%2303060c'/><path d='M56,64 Q49,73 41,71.5' stroke='url(%23ra)' stroke-width='7' stroke-linecap='round' fill='none'/></svg>") center / contain no-repeat; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav-cta { background: var(--btn-bg); color: var(--btn-fg) !important; border-radius: 999px; padding: 9px 18px; font-weight: 700 !important; transition: transform .2s, background .2s; }
.site-nav a.nav-cta:hover { background: var(--signal); color: #fff !important; transform: translateY(-2px); }
.site-nav a.nav-cta[aria-current="page"] { text-decoration: none; }

/* ---------- type ---------- */
.eyebrow { color: var(--signal-ink); font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
h1 { max-width: 20ch; margin: 16px 0 22px; font-size: clamp(34px, 5.6vw, 68px); font-weight: 800; }
h2 { margin: 0 0 18px; font-size: clamp(26px, 3.8vw, 44px); font-weight: 700; }
h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.lede { max-width: 66ch; color: var(--muted); font-size: clamp(17px, 1.9vw, 20px); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) 0 clamp(52px, 7vw, 84px); border-bottom: 2px solid var(--ink); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .55; }
.hero::before { width: 420px; height: 420px; right: -80px; top: -120px; background: color-mix(in srgb, var(--signal) 40%, transparent); }
.hero::after { width: 360px; height: 360px; left: -120px; bottom: -160px; background: color-mix(in srgb, #2f6bff 30%, transparent); }
.hero .shell { position: relative; z-index: 1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 24px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); text-decoration: none; font: 700 15px var(--sans); cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.button:hover { color: var(--ink); transform: translateY(-2px); }
.button.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.button.primary:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

/* ---------- sections and cards ---------- */
.section { padding: clamp(56px, 7.5vw, 96px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section:nth-of-type(even) { background: var(--paper); }
.intro { max-width: 740px; margin-bottom: 36px; }
.intro p, .muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { padding: 26px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); transition: transform .25s, box-shadow .25s; }
.section:nth-of-type(even) .card { background: var(--bg); }
.card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.card p:last-child { margin-bottom: 0; }
.label { display: inline-flex; padding: 4px 11px; margin-bottom: 14px; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.list { padding-left: 20px; }
.list li { margin: 8px 0; }
.callout { padding: 24px; border: 2px solid var(--ink); border-left-width: 8px; border-left-color: var(--signal); border-radius: 14px; background: var(--paper); color: var(--muted); }

.table-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--signal-ink); font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }

/* ---------- articles and FAQ ---------- */
.article { max-width: 780px; }
.article h2 { margin-top: 58px; font-size: 30px; }
.article h3 { margin-top: 34px; }
.article p, .article li { color: var(--muted); }
.article strong { color: var(--ink); }
.article .byline { font-size: 14px; }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 700 19px/1.3 var(--display); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--signal-ink); font: 500 24px var(--mono); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); max-width: 72ch; }

/* ---------- footer ---------- */
.site-foot { padding: 48px 0; border-top: 2px solid var(--ink); color: var(--muted); background: var(--bg); }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 28px; }
.foot-grid h2 { font: 700 15px var(--display); color: var(--ink); letter-spacing: -.01em; }
.foot-grid a { display: block; margin: 8px 0; color: var(--muted); text-decoration: none; }
.foot-grid a:hover { color: var(--ink); }
.foot-grid .logo { display: inline-flex; margin: 0 0 10px; color: var(--ink); }
.fine { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------- forms (demo page, signup) ---------- */
.form { display: grid; gap: 16px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label { font: 500 13px var(--mono); color: var(--muted); }
.field input, .field textarea { font: 16px var(--sans); background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.form-msg { min-height: 1.3em; font-size: 14px; color: var(--signal-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- motion ---------- */
@keyframes am-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes am-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, 18px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: am-drift 14s ease-in-out infinite; }
  .hero::after { animation: am-drift 17s ease-in-out infinite reverse; }
  .hero .shell > * { animation: am-rise .85s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .shell > *:nth-child(2) { animation-delay: .1s; }
  .hero .shell > *:nth-child(3) { animation-delay: .2s; }
  .hero .shell > *:nth-child(4) { animation-delay: .3s; }
  @supports (animation-timeline: view()) {
    .section .intro, .section .card, .section .callout, .section .table-wrap, .section .article > *, .faq details, .section .grid > div, .section .shell.grid.two > div {
      animation: am-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%;
    }
    .grid .card:nth-child(3n + 2) { animation-range: entry 8% entry 50%; }
    .grid .card:nth-child(3n + 3) { animation-range: entry 16% entry 58%; }
  }
}

@media (max-width: 860px) {
  .site-head .shell { align-items: flex-start; flex-direction: column; padding-block: 14px; gap: 12px; }
  .site-nav { margin-left: 0; gap: 12px 18px; }
  .grid, .grid.two, .foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }