body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:root {
  /* Layout: wide bands on deep navy. The slanted cut from the ETG mark frames buttons, tags and bullets; real screens in device frames carry the proof. */
  --ink: #030912;
  --ink-2: #06101d;
  --panel: #0a1524;
  --panel-2: #0f1d31;
  --line: #172740;
  --line-2: #233a5c;
  --fg: #edf2f9;
  --muted: #92a1b7;
  --dim: #64748c;
  --blue: #1690ff;
  --blue-hi: #62b8ff;
  --blue-deep: #0a5fd6;
  --live: #43d99c;
  --concept: #aab5c6;
  --display: "Saira Semi Expanded", "Arial Black", system-ui, sans-serif;
  --wide: "Michroma", "Arial", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --slant: 14px;
  color-scheme: dark;
}
html { background: var(--ink); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  background: var(--ink); color: var(--fg); font-family: var(--body);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(55% 45% at 88% 0%, rgba(22, 144, 255, .16), transparent 70%),
    linear-gradient(118deg, transparent 36%, rgba(22, 144, 255, .07) 47%, transparent 58%);
}
.top, main, .foot { position: relative; z-index: 1; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
a { color: var(--blue-hi); }
p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(34px, 4.6vw, 54px); }
h2 { font-size: clamp(26px, 3.3vw, 40px); }
h3 { font-size: 19px; line-height: 1.25; }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 56ch; }
.eyebrow { font-family: var(--wide); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--blue-hi); }
.lbl { font-family: var(--wide); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-hi); margin-bottom: 14px; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(3, 9, 18, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); }
.brand img { height: 24px; width: auto; display: block; }
.brand span { font-family: var(--wide); font-size: 10px; letter-spacing: .44em; padding-top: 2px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); }
.nav .link { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav .link:hover, .nav .link[aria-current="page"] { color: var(--fg); }
.nav .link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--blue); }
.nav .link:focus-visible, .brand:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 4px; }
@media (max-width: 440px) { .brand span { display: none; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px;
  font-family: var(--display); font-weight: 700; font-size: 13.5px; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transition: background-color .15s, color .15s;
}
.btn--pri { background: var(--blue); color: #fff; }
.btn--pri:hover { background: var(--blue-hi); color: var(--ink); }
.btn--ghost { background: var(--panel-2); color: var(--fg); }
.btn--ghost:hover { background: var(--line-2); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--panel-2); }
.btn--sm { padding: 9px 22px; font-size: 12px; }
.btn:focus-visible { background: var(--fg); color: var(--ink); outline: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* tagline */
.tagline { font-family: var(--wide); font-size: 11px; letter-spacing: .34em; color: var(--fg); display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.1em; }
.tagline b { color: var(--blue); font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0; }

/* device frames */
.browser { margin: 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .75); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #0c1727; border-bottom: 1px solid var(--line); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #25344c; flex: none; }
.browser__bar span { flex: 1; min-width: 0; max-width: 62%; margin-inline: auto; padding: 3px 12px; border-radius: 6px; background: var(--ink); color: var(--dim); font-size: 11.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.phone { margin: 0; padding: 6px; background: #09111d; border: 1px solid var(--line-2); border-radius: 30px; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .85); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1298; object-fit: cover; object-position: top; border-radius: 24px; }
.cap { font-family: var(--wide); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); margin-top: 12px; }

/* sections */
.sec { padding-block: clamp(56px, 8vw, 104px); }
.sec--band { background: var(--ink-2); border-block: 1px solid var(--line); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head > div { display: grid; gap: 12px; }
.sec-head p { color: var(--muted); max-width: 54ch; }

/* hero */
.hero { padding-block: clamp(40px, 7vw, 88px) clamp(56px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.stack { position: relative; padding-bottom: 14%; }
.stack::before { content: ""; position: absolute; top: 0; right: 4%; width: 46%; height: 13%; background: var(--blue); clip-path: polygon(13% 0, 100% 0, 87% 100%, 0 100%); }
.stack .browser { position: relative; width: 90%; margin-top: 8%; }
.stack .phone { position: absolute; right: 0; bottom: 0; width: 27%; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* process */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); }
.step { position: relative; padding: 30px clamp(20px, 2.6vw, 34px); display: grid; gap: 12px; align-content: start; }
.step + .step { border-left: 1px solid var(--line); }
.step__label { font-family: var(--wide); font-size: 12px; letter-spacing: .32em; }
.step p { color: var(--muted); }
.step:not(:last-child)::after {
  content: "\203A"; position: absolute; z-index: 1; top: 24px; right: -13px; width: 26px; height: 26px;
  display: grid; place-items: center; background: var(--blue); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; padding-bottom: 3px;
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
}
@media (max-width: 820px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); }
  .step:not(:last-child)::after { top: auto; bottom: -13px; right: auto; left: clamp(20px, 2.6vw, 34px); transform: rotate(90deg); }
}

/* services */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc__item { background: var(--ink); padding: 28px clamp(20px, 2.4vw, 30px) 30px; display: grid; gap: 12px; align-content: start; }
.svc__item p { color: var(--muted); font-size: 15px; }
.ico { width: 40px; height: 34px; display: grid; place-items: center; color: var(--blue-hi); background: rgba(22, 144, 255, .12); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); margin-bottom: 4px; }
.ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc { grid-template-columns: minmax(0, 1fr); } }

/* build cards */
.builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.build { display: grid; grid-template-rows: auto 1fr; gap: 16px; padding: 12px 12px 22px; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.build:hover { border-color: var(--line-2); transform: translateY(-3px); }
.build:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
.build__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); border: 1px solid var(--line); }
.build__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.build__meta { padding-inline: 8px; display: grid; gap: 10px; align-content: start; }
.build__meta p { color: var(--muted); font-size: 15px; }
.more { color: var(--blue-hi); font-weight: 600; font-size: 14px; margin-top: 4px; }
@media (max-width: 900px) { .builds { grid-template-columns: minmax(0, 1fr); } .build { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto; align-items: center; } }
@media (max-width: 600px) { .build { grid-template-columns: minmax(0, 1fr); } }
.tag { display: inline-flex; justify-self: start; font-family: var(--wide); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; padding: 5px 15px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.tag--live { background: rgba(67, 217, 156, .14); color: var(--live); }
.tag--build { background: rgba(22, 144, 255, .18); color: var(--blue-hi); }
.tag--concept { background: rgba(170, 181, 198, .13); color: var(--concept); }

/* about */
.about { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.portrait { margin: 0; position: relative; max-width: 300px; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%); }
.portrait::after { content: ""; position: absolute; left: -10px; bottom: 18px; width: 46%; height: 14px; background: var(--blue); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.about__copy { display: grid; gap: 18px; }
.about__copy p { color: var(--muted); max-width: 60ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-size: 13.5px; padding: 6px 14px; border: 1px solid var(--line-2); background: var(--panel); }
@media (max-width: 760px) { .about { grid-template-columns: minmax(0, 1fr); } .portrait { max-width: 240px; } }

/* call to action band */
.cta { background: linear-gradient(112deg, var(--blue-deep), var(--blue)); color: #fff; clip-path: polygon(0 22px, 100% 0, 100% calc(100% - 22px), 0 100%); padding-block: clamp(64px, 8vw, 96px); }
.cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta .wrap > div { display: grid; gap: 12px; max-width: 640px; }
.cta p { color: rgba(255, 255, 255, .86); }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 48px 32px; margin-top: clamp(48px, 7vw, 88px); }
.cta + .foot { margin-top: 0; border-top: 0; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.foot__logo { width: min(330px, 100%); height: auto; display: block; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 58%, transparent 100%); margin: -18px 0 0 -18px; }
.foot h4 { font-family: var(--wide); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; font-weight: 400; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--fg); text-decoration: none; }
.foot a:hover { color: var(--blue-hi); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13.5px; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: minmax(0, 1fr); } }

/* work page */
.page-head { padding-block: clamp(44px, 6vw, 76px) clamp(28px, 4vw, 40px); display: grid; gap: 18px; justify-items: start; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.jump a { color: var(--fg); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 16px; border: 1px solid var(--line-2); background: var(--panel); }
.jump a:hover { border-color: var(--blue); }
.cs { padding-block: clamp(44px, 6vw, 76px); border-top: 1px solid var(--line); display: grid; gap: clamp(26px, 3.5vw, 40px); scroll-margin-top: 72px; }
.cs__head { display: grid; gap: 12px; justify-items: start; }
.cs__type { color: var(--muted); }
.cs__row { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 34px); align-items: end; }
.cs__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .95fr); gap: clamp(22px, 3.5vw, 44px); align-items: start; }
.cs__body p { color: var(--muted); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 24px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 6px; background: var(--blue); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.facts { margin: 0; background: var(--panel); border: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 16px; }
.facts div + div { border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .cs__body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cs__row { grid-template-columns: minmax(0, 1fr); } .cs__row .shot--phone { width: 58%; justify-self: center; } }
.note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 24px; border: 1px solid var(--line-2); background: var(--panel); margin-block: clamp(12px, 3vw, 24px) 0; }
.note p { color: var(--muted); max-width: 70ch; }
.note strong { color: var(--fg); }

/* start page */
.start { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; padding-bottom: clamp(16px, 4vw, 40px); }
@media (max-width: 900px) { .start { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; gap: 26px; padding: clamp(20px, 3vw, 34px); background: var(--panel); border: 1px solid var(--line); }
.field { display: grid; gap: 8px; }
.field label, .form legend { font-weight: 600; font-size: 14.5px; }
.field small { color: var(--dim); font-weight: 400; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  width: 100%; box-sizing: border-box; background: var(--ink); border: 1px solid var(--line-2); color: var(--fg);
  padding: 12px 14px; font: inherit; font-size: 15.5px; border-radius: 0;
}
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 12px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line-2); background: var(--ink); font-size: 14.5px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.opt span:hover { border-color: var(--blue); }
.opt input:checked + span { background: rgba(22, 144, 255, .18); border-color: var(--blue); }
.opt input:focus-visible + span { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 600px) { .two { grid-template-columns: minmax(0, 1fr); } }
.sent { padding: 14px 16px; border: 1px solid var(--blue); background: rgba(22, 144, 255, .1); }
.next { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.next li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding-block: 18px; border-top: 1px solid var(--line); }
.next li::before { counter-increment: n; content: counter(n, decimal-leading-zero); font-family: var(--wide); font-size: 12px; letter-spacing: .1em; color: var(--blue-hi); padding-top: 3px; }
.next h3 { font-size: 17px; margin-bottom: 4px; }
.next p { color: var(--muted); font-size: 15px; }
.contact { margin-top: 26px; padding: 22px; border: 1px solid var(--line-2); background: var(--panel); display: grid; gap: 10px; }
.contact .num { font-family: var(--display); font-weight: 700; font-size: 24px; user-select: all; }
.contact p { color: var(--muted); font-size: 15px; }

/* feedback button and dialog */
.fb-btn { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: none; }
.fb { border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.fb::backdrop { background: rgba(3, 9, 18, .72); }
.fb .form { border: 0; }
.fb h2 { font-size: 22px; }
.fb p.hint { color: var(--muted); font-size: 15px; margin-top: -14px; }
.form-msg { padding: 12px 14px; border: 1px solid var(--blue); background: rgba(22, 144, 255, .1); }
.form-msg.is-error { border-color: #ff7a7a; background: rgba(255, 122, 122, .1); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.foot { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* ===================== TrustGuard Glass (C183) =====================
   The TrustGuard Glass tiers (LOCKED C97-A, dark values from css/tokens.css), hue-shifted to the ETG navy:
   Tier 0 vignette page, Tier 1 raised cards (sheen band + hairline + top edge highlight + float shadow),
   Tier 2 recessed wells for inputs, Tier 3 frosted glass for the header and the feedback dialog.
   Cards are translucent and frosted here so the page's blue light shows through them. */
:root {
  --glass-page-grad: radial-gradient(120% 80% at 50% -10%, #10213b 0%, #050c18 55%, #030912 100%);
  --glass-surface: #0b1626;
  --tier1-bg: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 80px), rgba(12, 23, 40, .58);
  --tier1-bg-opaque: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 80px), #0b1626;
  --tier2-bg: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 48px), #060e1a;
  --tier2-inset: inset 0 1px 3px rgba(0, 0, 0, .55);
  --tier3-tint: rgba(14, 26, 44, .38);
  --tier3-tint-opaque: #0e1a2c;
  --glass-blur: 15px;
  --glass-saturate: 220%;
  --edge-highlight: rgba(255, 255, 255, .12);
  --hairline: rgba(255, 255, 255, .08);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  --shadow-float: 0 14px 34px -12px rgba(0, 0, 0, .7);
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* Tier 0: vignette page, never flat; ambient blue light for the glass to pick up */
html, body { background: var(--glass-page-grad); background-attachment: fixed; }
body::before {
  background:
    radial-gradient(55% 45% at 88% 0%, rgba(22, 144, 255, .18), transparent 70%),
    radial-gradient(40% 35% at 8% 38%, rgba(22, 144, 255, .10), transparent 70%),
    radial-gradient(45% 40% at 92% 78%, rgba(10, 95, 214, .12), transparent 70%),
    linear-gradient(118deg, transparent 36%, rgba(22, 144, 255, .08) 47%, transparent 58%);
}
.sec--band { background: rgba(255, 255, 255, .015); border-block: 1px solid var(--hairline); }
.foot, .foot__base { border-color: var(--hairline); }
.cs { border-top-color: var(--hairline); }

/* Tier 3: frosted glass header */
.top {
  background: var(--tier3-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--hairline);
}

/* Tier 1: raised glass cards */
.steps, .svc__item, .build, .facts, .note, .form, .contact, .browser {
  background: var(--tier1-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), inset 0 1px 0 var(--edge-highlight);
}
.steps { overflow: visible; }
.step + .step { border-color: var(--hairline); }
.svc { gap: 16px; background: none; border: 0; }
.build { padding: 10px 10px 22px; }
.build:hover { border-color: var(--glass-edge); }
.build__img { border-radius: 8px; border-color: var(--hairline); }
.facts { overflow: hidden; }
.facts div + div { border-top-color: var(--hairline); }
.browser { overflow: hidden; border-color: var(--glass-edge); }
.browser__bar { background: rgba(255, 255, 255, .03); border-bottom-color: var(--hairline); }
.browser__bar i { background: rgba(255, 255, 255, .14); }
.browser__bar span { background: rgba(0, 0, 0, .35); }
.phone { background: rgba(8, 15, 27, .8); border-color: var(--glass-edge); box-shadow: var(--shadow-float), inset 0 1px 0 var(--edge-highlight); }
.next li { border-top-color: var(--hairline); }

/* small raised chips */
.chip, .jump a {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--edge-highlight);
}
.jump a:hover { border-color: var(--blue); }

/* Tier 2: recessed wells for inputs and choices */
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  background: var(--tier2-bg);
  box-shadow: var(--tier2-inset);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.opt span { background: var(--tier2-bg); box-shadow: var(--tier2-inset); border-color: var(--hairline); border-radius: var(--radius-md); }
.opt input:checked + span { background: rgba(22, 144, 255, .2); border-color: var(--blue); box-shadow: inset 0 1px 0 var(--edge-highlight); }
.form-msg { border-radius: var(--radius-md); }

/* Tier 3: the feedback dialog is a frosted glass card over a scrim */
.fb {
  background: var(--tier3-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--edge-highlight);
}
.fb::backdrop { background: rgba(0, 0, 0, .55); }
.fb .form { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* where backdrop-filter is missing, the glass falls back to opaque surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top, .fb { background: var(--tier3-tint-opaque); }
  .steps, .svc__item, .build, .facts, .note, .form, .contact, .browser { background: var(--tier1-bg-opaque); }
}

/* ===================== Pills (C183) =====================
   Buttons and status tags wear TrustGuard's pill box (the .chip recipe, PILL-STYLE1): --radius-md,
   a 1px border and a see-through fill at the dark-mode chip strengths (fill .14, border .42), in the ETG blue. */
:root {
  --chip-blue-bg: rgba(22, 144, 255, .14);
  --chip-blue-bg-hover: rgba(22, 144, 255, .24);
  --chip-blue-border: rgba(22, 144, 255, .42);
  --chip-blue-border-hover: rgba(22, 144, 255, .65);
  --chip-blue-text: #6cbcff;
  --chip-green-bg: rgba(67, 217, 156, .14);
  --chip-green-border: rgba(67, 217, 156, .42);
  --chip-gray-bg: rgba(156, 163, 175, .14);
  --chip-gray-border: rgba(156, 163, 175, .42);
}
.btn { clip-path: none; border-radius: var(--radius-md); border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
.btn--pri { background: var(--chip-blue-bg); border-color: var(--chip-blue-border); color: var(--chip-blue-text); }
.btn--pri:hover, .btn--pri:focus-visible { background: var(--chip-blue-bg-hover); border-color: var(--chip-blue-border-hover); color: #fff; }
.btn--ghost { background: rgba(255, 255, 255, .05); border-color: var(--hairline); color: var(--fg); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255, 255, 255, .09); border-color: var(--glass-edge); color: var(--fg); }
.btn--ink { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .42); color: #fff; }
.btn--ink:hover, .btn--ink:focus-visible { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .65); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
.btn:disabled { opacity: .55; cursor: default; }
/* the floating Feedback pill sits over content, so it gets a frosted base under the blue wash */
.fb-btn {
  background: linear-gradient(var(--chip-blue-bg), var(--chip-blue-bg)), rgba(6, 14, 26, .72);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-float);
}
.fb-btn:hover, .fb-btn:focus-visible { background: linear-gradient(var(--chip-blue-bg-hover), var(--chip-blue-bg-hover)), rgba(6, 14, 26, .78); }

.tag { clip-path: none; border-radius: var(--radius-md); border: 1px solid transparent; padding: 4px 12px; }
.tag--live { background: var(--chip-green-bg); border-color: var(--chip-green-border); }
.tag--build { background: var(--chip-blue-bg); border-color: var(--chip-blue-border); color: var(--chip-blue-text); }
.tag--concept { background: var(--chip-gray-bg); border-color: var(--chip-gray-border); color: #c6cdd8; }

/* the closing call to action becomes a blue glass panel instead of a solid slab */
.cta {
  background: linear-gradient(112deg, rgba(10, 95, 214, .42), rgba(22, 144, 255, .2));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-block: 1px solid var(--chip-blue-border);
}

/* the blue slanted shape behind the hero screens is gone (Sean, C183) */
.stack::before { content: none; }
.stack .browser { margin-top: 0; }

/* the other solid blue shapes follow the pill look: process arrows and icon tiles become see-through chips;
   the bar under the portrait goes the way of the hero shape */
.step:not(:last-child)::after { clip-path: none; border-radius: 6px; background: var(--chip-blue-bg); border: 1px solid var(--chip-blue-border); color: var(--chip-blue-text); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.ico { clip-path: none; border-radius: var(--radius-md); background: var(--chip-blue-bg); border: 1px solid var(--chip-blue-border); width: 38px; height: 38px; }
.portrait::after { content: none; }

/* footer brand: the flat mark and type, so no dark box shows around the logo render */
.foot__brand { display: grid; gap: 14px; justify-items: start; }
.foot__brand img { height: 40px; width: auto; display: block; }
.foot__brand .wordmark { font-family: var(--wide); font-size: 13px; letter-spacing: .5em; }

/* buttons one step more solid (Sean, C183): deeper blue fill, firmer border */
:root {
  --btn-blue-bg: rgba(16, 116, 235, .30);
  --btn-blue-bg-hover: rgba(16, 116, 235, .44);
  --btn-blue-border: rgba(40, 150, 255, .60);
  --btn-blue-border-hover: rgba(70, 168, 255, .85);
}
.btn--pri { background: var(--btn-blue-bg); border-color: var(--btn-blue-border); color: #a9d6ff; }
.btn--pri:hover, .btn--pri:focus-visible { background: var(--btn-blue-bg-hover); border-color: var(--btn-blue-border-hover); color: #fff; }
.btn--ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.fb-btn { background: linear-gradient(var(--btn-blue-bg), var(--btn-blue-bg)), rgba(6, 14, 26, .8); }
.fb-btn:hover, .fb-btn:focus-visible { background: linear-gradient(var(--btn-blue-bg-hover), var(--btn-blue-bg-hover)), rgba(6, 14, 26, .85); }

/* seams (Sean, C183, after an earlier demo's seams): a thin tapered line, white here,
   on every full-width break between sections, under the header, above the footer, and between builds */
:root {
  --seam-w: min(560px, 70%);
  --seam-line: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0));
}
.sec--band { border-block: 0; }
main > section:not(.cta) + section:not(.cta), .foot, .cs, .top { position: relative; }
.top { position: sticky; border-bottom: 0; }
main > section:not(.cta) + section:not(.cta)::before, .foot::before, .cs::before, .top::after {
  content: ""; position: absolute; left: 50%; z-index: 1; width: var(--seam-w); height: 1px;
  transform: translateX(-50%); background: var(--seam-line); pointer-events: none;
}
main > section:not(.cta) + section:not(.cta)::before, .foot::before, .cs::before { top: -1px; }
.top::after { bottom: -1px; }
.foot, .cs { border-top: 0; }

/* buttons: solid near-black base with the blue wash on top, so they read opaque and black (Sean, C183) */
:root {
  --btn-base: #03070d;
  --btn-blue-wash: rgba(22, 144, 255, .16);
  --btn-blue-wash-hover: rgba(22, 144, 255, .28);
}
.btn--pri { background: linear-gradient(var(--btn-blue-wash), var(--btn-blue-wash)), var(--btn-base); border-color: var(--btn-blue-border); color: #a9d6ff; }
.btn--pri:hover, .btn--pri:focus-visible { background: linear-gradient(var(--btn-blue-wash-hover), var(--btn-blue-wash-hover)), var(--btn-base); border-color: var(--btn-blue-border-hover); color: #fff; }
.btn--ghost { background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)), var(--btn-base); border-color: rgba(255, 255, 255, .16); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), var(--btn-base); border-color: rgba(255, 255, 255, .28); }
.btn--ink { background: var(--btn-base); border-color: rgba(255, 255, 255, .4); }
.btn--ink:hover, .btn--ink:focus-visible { background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)), var(--btn-base); border-color: rgba(255, 255, 255, .65); }
.fb-btn { background: linear-gradient(var(--btn-blue-wash), var(--btn-blue-wash)), var(--btn-base); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fb-btn:hover, .fb-btn:focus-visible { background: linear-gradient(var(--btn-blue-wash-hover), var(--btn-blue-wash-hover)), var(--btn-base); }

/* header (Sean, C183): no line under it; a bigger logo that shrinks once the page scrolls, like the
   earlier demo. The bar is fixed and the page keeps a padded slot for it, so nothing jumps. */
:root { --hdr-h: 92px; --hdr-h-small: 62px; --logo-h: 42px; --logo-h-small: 26px; }
@media (max-width: 600px) { :root { --hdr-h: 76px; --hdr-h-small: 58px; --logo-h: 34px; --logo-h-small: 24px; } }
.top::after { content: none; }
.top { position: fixed; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top, 0px); border-bottom: 0; }
body { padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)); }
.top .wrap { min-height: var(--hdr-h); transition: min-height .28s ease; }
.brand img { height: var(--logo-h); transition: height .28s ease; }
.brand span { font-size: 12px; transition: font-size .28s ease; }
.top.is-scrolled .wrap { min-height: var(--hdr-h-small); }
.top.is-scrolled .brand img { height: var(--logo-h-small); }
.top.is-scrolled .brand span { font-size: 10px; }
.cs { scroll-margin-top: calc(var(--hdr-h-small) + 16px); }
@media (prefers-reduced-motion: reduce) { .top .wrap, .brand img, .brand span { transition: none; } }

/* type (Sean's pick, C183): Rajdhani headings and buttons, IBM Plex Mono labels; Plex Sans body stays,
   and Michroma stays only where it is part of the logo lockup (the WORKS wordmark and the tagline) */
:root {
  --display: "Rajdhani", "Arial Narrow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0; line-height: 1.02; }
h1 { font-size: clamp(42px, 5.8vw, 68px); }
h2 { font-size: clamp(32px, 4vw, 48px); }
h3 { font-size: 23px; line-height: 1.12; }
.next h3 { font-size: 20px; }
.fb h2 { font-size: 28px; }
.btn { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: .08em; }
.btn--sm { font-size: 14px; }
.contact .num { font-size: 28px; }
.eyebrow, .lbl, .step__label, .tag, .cap, .foot h4 { font-family: var(--mono); font-weight: 500; letter-spacing: .14em; }
.eyebrow { font-size: 12.5px; }
.lbl { font-size: 11.5px; }
.step__label { font-size: 13px; color: var(--blue-hi); }
.tag { font-size: 10.5px; }
.cap, .foot h4 { font-size: 10.5px; }

/* header (Sean, C183): TrustGuard's dark gray glass with only a hint of blue. More tint and less saturation,
   so the blue light behind the page no longer floods through it */
.top {
  background: rgba(24, 26, 31, .84);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top { background: #181a1f; } }

/* seams in pure black (Sean, C183) */
:root { --seam-line: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 50%, rgba(0, 0, 0, 0)); }

/* black seams at 2px so they read on the dark page (Sean, C183) */
main > section:not(.cta) + section:not(.cta)::before, .foot::before, .cs::before { height: 2px; top: -1px; }

/* tiles in the header's gray (Sean, C183): every card takes the header's charcoal glass, keeps the
   Tier 1 sheen band, and stops boosting the blue behind it; input wells and the feedback dialog follow */
:root {
  --tile-gray: rgba(24, 26, 31, .84);
  --tier1-bg: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 80px), var(--tile-gray);
  --tier1-bg-opaque: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 80px), #181a1f;
  --tier2-bg: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 48px), #111215;
  --tier3-tint: rgba(24, 26, 31, .86);
  --tier3-tint-opaque: #181a1f;
}
.steps, .svc__item, .build, .facts, .note, .form, .contact, .fb {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
}
.fb .form { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* tiles: a touch more blue and a touch more solid than the header (Sean, C183) */
:root {
  --tile-gray: rgba(21, 27, 38, .90);
  --tier1-bg: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 80px), var(--tile-gray);
  --tier1-bg-opaque: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 80px), #151b26;
}

/* hero character field (Sean, C183): small, faint machine characters under a soft glow, drifting in and
   out of sight in moving patches; a click on the empty hero sends a blue ripple through them. Drawn by
   js/site.js on a canvas behind the hero content. */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }

/* header and tiles more see-through (Sean, C183) */
:root {
  --tile-gray: rgba(21, 27, 38, .64);
  --tier1-bg: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 80px), var(--tile-gray);
}
.top { background: rgba(24, 26, 31, .60); }

/* header: same see-through, a little less blur so it reads as clearer glass (Sean, C183) */
.top { -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }

/* the hero (and its character field) runs up under the glass header to the very top of the page (Sean, C183);
   the extra top padding keeps the hero content exactly where it was */
.hero {
  margin-top: calc(-1 * (var(--hdr-h) + env(safe-area-inset-top, 0px)));
  padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + clamp(40px, 7vw, 88px));
}

/* characters show through the header: a lighter blur, so they read as characters, not haze (C183) */
.top { -webkit-backdrop-filter: blur(1px) saturate(120%); backdrop-filter: blur(1px) saturate(120%); }

/* buttons see-through again (Sean, C183): the black base drops to a quarter strength with a light blur, so the characters behind show through */
:root { --btn-base: rgba(3, 7, 13, .25); }
.btn--pri, .btn--ghost, .btn--ink, .fb-btn { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* header: a bit more frost (Sean, C183): a touch more tint and blur, characters still faintly behind it */
.top { background: rgba(24, 26, 31, .68); -webkit-backdrop-filter: blur(2.5px) saturate(120%); backdrop-filter: blur(2.5px) saturate(120%); }

/* a little more contrast between sections (Sean, C183): the alternating band sections sit darker */
.sec--band { background: rgba(0, 0, 0, .3); }

/* seams in ETG blue (Sean, C183; were black), still 2px and tapered */
:root { --seam-line: linear-gradient(90deg, rgba(22, 144, 255, 0), #1690ff 50%, rgba(22, 144, 255, 0)); }

/* seams back to 1px (Sean, C183), still ETG blue */
main > section:not(.cta) + section:not(.cta)::before, .foot::before, .cs::before { height: 1px; top: -1px; }

/* profile photo: every corner the same, slightly rounded (Sean, C183; the cut bottom-right corner is gone) */
.portrait img { clip-path: none; border-radius: 10px; }

/* profile photo dimmed to sit with the dark page (Sean, C183) */
.portrait img { filter: brightness(.78) contrast(1.04); }

/* features page (C183): twelve features in alternating rows, copy on one side and the screen on the other;
   desktop screens sit in browser frames, phone screens in phone frames */
.feats { display: grid; }
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 6vw, 72px); position: relative; scroll-margin-top: calc(var(--hdr-h-small) + 16px); }
.feat + .feat::before { content: ""; position: absolute; top: 0; left: 50%; width: var(--seam-w); height: 1px; transform: translateX(-50%); background: var(--seam-line); }
.feat:nth-child(even) .feat__copy { order: 2; }
.feat__copy { display: grid; gap: 14px; align-content: center; }
.feat__copy > p:not(.lbl) { color: var(--muted); font-size: 17px; max-width: 46ch; }
.feat__copy h2 { font-size: clamp(28px, 3.4vw, 40px); }
.feat__copy .lbl { margin-bottom: 0; }
.feat--phone { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.feat--phone .shot--phone { position: relative; justify-self: center; width: min(280px, 100%); }
.push {
  position: absolute; left: -18%; right: -18%; top: 9%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 11px 14px; border-radius: 16px; font-size: 13px; line-height: 1.35;
  background: rgba(30, 32, 38, .78); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.push b { font-weight: 600; }
.push span { grid-column: 1; color: var(--muted); }
.push em { grid-column: 2; grid-row: 1; font-style: normal; color: var(--dim); font-size: 12px; }
.feats .note { margin-block: clamp(24px, 4vw, 40px) clamp(48px, 6vw, 72px); }
@media (max-width: 860px) {
  .feat, .feat--phone { grid-template-columns: minmax(0, 1fr); }
  .feat:nth-child(even) .feat__copy { order: 0; }
  .push { left: -6%; right: -6%; }
}
/* header button reads "Start" on small phones so the three nav items fit */
.btn .sm { display: none; }
@media (max-width: 480px) { .btn .lg { display: none; } .btn .sm { display: inline; } .nav { gap: 12px; } .nav .link { font-size: 14px; } }

/* section contrast on every page (Sean, C183): every other block on Features and Work, and the form area on
   Start, sit on the same darker full-width band as the home page. The box-shadow and clip-path pair paints
   the band edge to edge without making the page scroll sideways. */
.feat:nth-child(even), .cs:nth-of-type(even), .wrap.start {
  background: rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
  clip-path: inset(0 -100vmax);
}
.wrap.start { padding-block: clamp(36px, 5vw, 56px); margin-bottom: clamp(32px, 5vw, 56px); }

/* the Features index: one quiet line of small links instead of a block of buttons; on phones it scrolls
   sideways in a single row and fades at the edge */
.jump.jump--index {
  flex-wrap: nowrap; gap: 0; margin-top: 10px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  padding-right: 40px;
}
.jump.jump--index::-webkit-scrollbar { display: none; }
.jump.jump--index a {
  flex: none; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 4px 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted);
  border-left: 1px solid var(--hairline);
}
.jump.jump--index a:first-child { padding-left: 0; border-left: 0; }
.jump.jump--index a:hover { color: var(--fg); }
@media (min-width: 1180px) { .jump.jump--index { -webkit-mask-image: none; mask-image: none; padding-right: 0; } }

/* hero phone: smaller corner radius to suit its smaller size (Sean, C183) */
.stack .phone { border-radius: 18px; padding: 4px; }
.stack .phone img { border-radius: 14px; }

/* the Features index must never widen the page: the heading column cannot grow past the screen, and the
   index stretches to that column and scrolls inside it (fixes the page sliding sideways on phones) */
.page-head { grid-template-columns: minmax(0, 1fr); }
.jump.jump--index { justify-self: stretch; min-width: 0; width: 100%; box-sizing: border-box; }

/* features: the lead feature, "Run your entire business by text" (Sean, C183). A blue-edged glass panel with
   the copy and a grid of things to text it on one side, and a live-looking text conversation on a phone on the
   other, built in HTML so it stays sharp */
.feat.feat--hero {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); margin-top: 6px;
  padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(22, 144, 255, .12), rgba(22, 144, 255, .02) 60%), var(--tile-gray);
  border: 1px solid var(--chip-blue-border); box-shadow: var(--shadow-float), inset 0 1px 0 var(--edge-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); backdrop-filter: blur(var(--glass-blur)) saturate(120%);
}
.feat--hero h2 { font-size: clamp(32px, 4.2vw, 50px); }
.feat--hero .lbl { display: flex; align-items: center; gap: 10px; }
.feat--hero .lbl .tag { letter-spacing: .14em; }
.uses__h { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-hi); }
.uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.uses li { font-size: 14px; line-height: 1.35; color: var(--fg); padding: 9px 12px; border-radius: 10px; background: var(--tier2-bg); box-shadow: var(--tier2-inset); border: 1px solid var(--hairline); }
.feat--hero .shot--phone { justify-self: center; width: min(310px, 100%); }
.phone--sms { padding: 6px; }
.sms { aspect-ratio: 9 / 19.5; border-radius: 24px; overflow: hidden; background: #000; display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #fff; }
.sms__bar { display: flex; justify-content: space-between; padding: 11px 20px 4px; font-size: 12px; font-weight: 600; }
.sms__icons { font-size: 8px; letter-spacing: 1px; opacity: .9; }
.sms__head { display: grid; justify-items: center; gap: 1px; padding: 4px 0 9px; background: #0d0d0f; border-bottom: 1px solid #1d1d20; }
.sms__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 600; background: linear-gradient(180deg, #6f7682, #4a505a); margin-bottom: 3px; }
.sms__head b { font-size: 12px; font-weight: 600; }
.sms__head small { font-size: 10px; color: #8e8e93; }
.sms__thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 8px 9px; overflow: hidden; }
.sms__thread p { margin: 0; max-width: 80%; padding: 6px 10px; border-radius: 15px; font-size: 11px; line-height: 1.3; }
.sms__thread .out { align-self: flex-end; background: #1690ff; color: #fff; border-bottom-right-radius: 5px; }
.sms__thread .in { align-self: flex-start; background: #262629; color: #ececee; border-bottom-left-radius: 5px; }
.sms__input { margin: 6px 10px 14px; padding: 7px 13px; border: 1px solid #2c2c30; border-radius: 17px; font-size: 11px; color: #6b6b70; }
@media (max-width: 860px) {
  .feat.feat--hero { grid-template-columns: minmax(0, 1fr); }
  .uses { grid-template-columns: minmax(0, 1fr); }
}
/* lead feature layout: copy and the examples stack on the left with the phone beside them on desktop; on
   phones the conversation comes right after the copy and the examples follow */
.feat.feat--hero { grid-template-areas: "copy phone" "uses phone"; row-gap: 22px; align-items: start; }
.feat--hero .feat__copy { grid-area: copy; }
.feat--hero .feat__uses { grid-area: uses; display: grid; gap: 12px; }
.feat--hero .feat__uses .uses__h { margin-top: 0; }
.feat--hero .shot--phone { grid-area: phone; align-self: center; }
@media (max-width: 860px) { .feat.feat--hero { grid-template-areas: "copy" "phone" "uses"; } }

/* ===================== Content pass (ETG c002, 2026-10-19) =====================
   New homepage sections (why now, quality, custom coded, built for what's next, the three "Let's get technical"
   panels, recent work, questions, guides), the prose pages (About, Privacy, Terms, guides) and the new footer.
   Every card here is a Tier 1 tile in the same glass as the others. */
.tile, .panel, .qa, .guide-card, .recent__item {
  background: var(--tier1-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), inset 0 1px 0 var(--edge-highlight);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tile, .panel, .qa, .guide-card, .recent__item { background: var(--tier1-bg-opaque); }
}
.tile { padding: clamp(20px, 3vw, 30px); }
.go { color: var(--blue-hi); font-weight: 600; text-decoration: none; }
.go:hover, .go:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* hero: the hook sits under the line, set off by a thin blue rule */
.hook { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.2; color: var(--fg); padding-left: 16px; border-left: 2px solid var(--blue); max-width: 30ch; }
.hook b { color: var(--blue-hi); font-weight: 700; }

/* two-column section body: copy on one side, a tile on the other */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split__copy { display: grid; gap: 18px; align-content: start; justify-items: start; }
.split__copy > p { color: var(--muted); max-width: 56ch; font-size: 17px; }
.split__copy > p strong { color: var(--fg); }
.split__copy > .statement { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; color: var(--fg) !important; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* why now: before and now, side by side */
.vs { width: 100%; border-collapse: collapse; }
.vs th { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding: 0 0 12px; color: var(--dim); width: 50%; }
.vs th + th { color: var(--blue-hi); }
.vs td { padding: 15px 16px 15px 0; border-top: 1px solid var(--hairline); vertical-align: top; color: var(--muted); }
.vs td + td { color: var(--fg); font-weight: 600; padding-right: 0; }

/* quality: what every change passes */
.checks { list-style: none; margin: 0; padding: 0; display: grid; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.checks li:first-child { border-top: 0; padding-top: 0; }
.checks li:last-child { padding-bottom: 0; }
.checks li::before {
  content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; box-sizing: border-box;
  border: 1px solid var(--chip-blue-border);
  background: var(--chip-blue-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362b8ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.checks__h { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-hi); margin-bottom: 16px; }

/* custom coded: the menu of features as links */
.menu { display: flex; flex-wrap: wrap; gap: 8px; }
a.chip { color: var(--fg); text-decoration: none; transition: border-color .15s; }
a.chip:hover, a.chip:focus-visible { border-color: var(--blue); }
.tile .checks__h + .menu { margin-bottom: 20px; }

/* built for what's next: two tiles and the closing line */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duo .tile { display: grid; gap: 12px; align-content: start; justify-items: start; }
.duo .tile p { color: var(--muted); }
.closer { margin-top: clamp(28px, 4vw, 44px); font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; color: var(--blue-hi); text-wrap: balance; }
@media (max-width: 760px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* let's get technical: three panels that open on tap (details and summary, so they work by keyboard too) */
.panels { display: grid; gap: 14px; }
.panel { scroll-margin-top: calc(var(--hdr-h-small) + 16px); }
.panel > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 16px; padding: 20px clamp(18px, 3vw, 28px); border-radius: var(--radius-lg);
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: -2px; }
.panel__key { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--chip-blue-text); width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--chip-blue-bg); border: 1px solid var(--chip-blue-border); }
.panel__title { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.1; }
.panel__title small { display: block; font-family: var(--body); font-weight: 400; font-size: 14.5px; line-height: 1.4; color: var(--muted); margin-top: 4px; }
.panel__sign { position: relative; width: 16px; height: 16px; }
.panel__sign::before, .panel__sign::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 1px; background: var(--blue-hi); transition: transform .2s; }
.panel__sign::after { transform: rotate(90deg); }
.panel[open] .panel__sign::after { transform: rotate(0deg); }
.panel > summary:hover .panel__title { color: #fff; }
.panel__body { padding: 0 clamp(18px, 3vw, 28px) 26px; }
.terms { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.terms div { padding: 14px 0; border-top: 1px solid var(--hairline); }
.terms dt { font-weight: 600; color: var(--fg); }
.terms dd { margin: 3px 0 0; color: var(--muted); font-size: 15px; }
.panel__note { margin-top: 18px; font-style: italic; color: var(--muted); }
@media (max-width: 760px) { .terms { grid-template-columns: minmax(0, 1fr); } }

/* recent work: TrustGuard's own screen beside a short list */
.recent { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.recent__list { display: grid; gap: 16px; }
.recent__item { padding: 22px 24px; display: grid; gap: 10px; justify-items: start; }
.recent__item p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .recent { grid-template-columns: minmax(0, 1fr); } }

/* questions: each answer leads with its first sentence */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.qa { padding: 22px 24px; display: grid; gap: 10px; }
.qa h3 { font-size: 22px; }
.qa p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 800px) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* guides: plain-language reads, linked from the homepage, the guides page and the footer */
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guide-card { padding: 22px 24px; display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.guide-card:hover { border-color: var(--glass-edge); transform: translateY(-3px); }
.guide-card:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
.guide-card h3 { font-size: 22px; }
.guide-card p { color: var(--muted); font-size: 15px; }
.sub-head { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; margin: clamp(48px, 6vw, 72px) 0 20px; }
@media (max-width: 900px) { .guides { grid-template-columns: minmax(0, 1fr); } }

/* prose pages: About, Privacy, Terms and the guides */
.prose { max-width: 72ch; display: grid; gap: 16px; padding-bottom: clamp(48px, 7vw, 88px); }
.prose h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 22px; }
.prose h3 { font-size: 21px; margin-top: 8px; }
.prose p, .prose li { color: var(--muted); font-size: 17px; }
.prose strong { color: var(--fg); }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose .facts { margin-top: 10px; }
.prose .cta-row { margin-top: 12px; }
.meta-line { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--dim); }
.crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--fg); }

/* start page: support terms and the email addresses under the call box */
.contact a { color: var(--blue-hi); }
.contact + .contact { margin-top: 14px; }

/* footer: company line, then Privacy and Terms, then the email address */
.foot__base { align-items: center; }
.foot__base a { color: var(--muted); }
.foot__base a:hover { color: var(--blue-hi); }
.foot__legal { display: flex; gap: 20px; }
.checks__lead { color: var(--fg); font-weight: 500; margin-bottom: 18px; }
.sub-head h2 { font-size: clamp(26px, 2.8vw, 32px); }
.guides--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: clamp(48px, 7vw, 88px); }
.guides--index { margin-bottom: clamp(48px, 7vw, 88px); }
@media (max-width: 760px) { .guides--two { grid-template-columns: minmax(0, 1fr); } }
.prose + .sub-head { margin-top: 0; }

/* ===================== Free custom demo (ETG c002, 2026-10-22) =====================
   The homepage demo form (#free-demo), its waitlist notice, inline validation and success state; plus the
   review fixes: --dim raised to at least 4.5:1 on the page and tile backgrounds, anchors land below the fixed
   header, and the Feedback button shrinks on phones and steps aside while a form is on screen. */
:root { --dim: #8492aa; }
.form ::placeholder { color: var(--dim); opacity: 1; }
main [id] { scroll-margin-top: calc(var(--hdr-h-small) + 16px); }

.split--demo { align-items: start; }
@media (min-width: 901px) { .split--demo .split__copy { position: sticky; top: calc(var(--hdr-h-small) + 28px); } }
.scope-note { display: grid; gap: 10px; padding-left: 14px; border-left: 1px solid var(--hairline); }
.scope-note p { font-size: 15px; color: var(--dim); }
.demo__full { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--chip-blue-border); background: var(--chip-blue-bg); border-radius: var(--radius-md); color: var(--fg); font-weight: 500; }
.help { color: var(--muted); font-size: 14.5px; }
.form fieldset .help { margin: -4px 0 12px; }
.demo__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.demo__send .help { color: var(--muted); }
.demo__done { display: grid; gap: 14px; }
.demo__done h3 { font-size: 28px; }
.demo__done h3:focus { outline: none; }
.demo__done p { color: var(--muted); }

/* feature chips: a real checkbox look, so the selected state is more than a border change */
.opts--check .opt span { display: inline-flex; align-items: center; gap: 9px; }
.opts--check .opt span::before {
  content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, .38); background: transparent;
}
.opts--check .opt input:checked + span { background: rgba(22, 144, 255, .28); border-color: var(--blue-hi); color: #fff; font-weight: 600; }
.opts--check .opt input:checked + span::before {
  border-color: var(--blue-hi);
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* "I don't have a website yet" */
.field .check { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; font-size: 15px; cursor: pointer; justify-self: start; margin-top: 4px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.form input:disabled { opacity: .45; }

/* validation: next to the field, plus a summary at the top of the form */
.field-err { color: #ffa3a3; font-size: 14px; font-weight: 500; }
.form [aria-invalid="true"] { border-color: #ff7a7a !important; }
.opts--check.is-invalid .opt span { border-color: rgba(255, 122, 122, .7); }
.form-errors { padding: 12px 16px; border: 1px solid #ff7a7a; background: rgba(255, 122, 122, .1); border-radius: var(--radius-md); }
.form-errors:focus { outline: 2px solid #ff9a9a; outline-offset: 2px; }
.form-errors p { font-weight: 600; }
.form-errors ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.form-errors a { color: #ffc2c2; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* the Feedback button: smaller on phones, and out of the way while a form is on screen */
.fb-btn { transition: opacity .2s, transform .2s, visibility .2s; }
.fb-btn.is-away { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
@media (max-width: 700px) { .fb-btn { padding: 7px 14px; font-size: 12.5px; } }

/* launch (2026-10-22): the Feedback button is gone, so the footer no longer keeps room for it */
.foot { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }