/* PeakLogic Solutions — marketing site
   Brand tokens carried over from the product marketing app (PeakLogic-Azure-V2/marketing)
   so this front matches the platform once it ships. */
:root {
  --white: #ffffff;
  --paper: #f7f8fb;
  --paper-2: #eef0f7;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #5b6478;
  --faint: #94a0b5;
  --line: #e7e6f1;
  --line-2: #d9d8ea;
  --purple: #7c3aed;
  --purple-mid: #8b5cf6;
  --purple-deep: #5b21b6;
  --purple-soft: #f2effe;
  --green: #22c55e;
  --green-ink: #15803d;
  --green-soft: #e8fbef;
  --amber: #f59e0b;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --dark: #0a0e1a;
  --dark-2: #131a2c;
  --shadow: 0 1px 2px rgba(16,21,42,.04), 0 10px 30px rgba(16,21,42,.06);
  --shadow-lg: 0 24px 60px rgba(16,21,42,.14);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --r: 16px; --r-sm: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; line-height: 1.55; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--purple); font-weight: 700; }
.eyebrow--light { color: var(--purple-mid); }
.eyebrow--onDark { color: #b9a6f7; }
h1, h2, h3 { letter-spacing: -.025em; text-wrap: balance; margin: 0; }
.h1 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 660; line-height: 1.08; }
.h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 760; line-height: 1.12; }
.h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 66ch; line-height: 1.55; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.center { text-align: center; } .mx { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14.5px; font-weight: 650; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .06s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: linear-gradient(135deg, var(--purple-deep), var(--purple) 65%, var(--purple-mid)); color: #fff; box-shadow: 0 0 0 1px rgba(139,92,246,.5), 0 0 0 5px rgba(139,92,246,.14), 0 10px 24px rgba(91,33,182,.38); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(139,92,246,.7), 0 0 0 6px rgba(139,92,246,.22), 0 12px 30px rgba(91,33,182,.5); filter: brightness(1.06); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--purple); color: var(--purple); }
.btn--light { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--light:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.btn--text { background: none; border: none; color: #fff; font-weight: 650; padding: 12px 6px; }
.btn--text:hover { color: var(--purple-mid); }
.btn--sm { padding: 9px 17px; font-size: 13.5px; }
.btn svg { width: 15px; height: 15px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(6,9,17,.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(139,92,246,.18); }
.nav__in { display: flex; align-items: center; gap: 26px; height: 68px; }
/* Logo lockup: brand guide v1.1 section 8 (marketing/brand/BRAND_GUIDELINES.md).
   One font-size on .brand sizes everything; the mark is 1.2em tall, 0.4667em
   before the text, and hangs 0.3em below the baseline, matching the canonical
   logotype file exactly. No `gap`: use the icon's margin. */
.brand { display: flex; align-items: baseline; flex-shrink: 0; font-size: 20px; line-height: 1; }
.brand svg { width: 1.6em; height: 1.2em; margin-right: .4667em; position: relative; top: .3em; flex-shrink: 0; }
.brand__word { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.0333em; }
.brand__word .peak { color: #fff; } .brand__word .logic { color: var(--purple); } /* "Logic" is always #7C3AED */
/* The 0.3em hang moves the visible lockup below its layout box, so the nav
   (align-items: center) would center the box, not the logo, and the logo
   would sit 0.225em low against the nav links. Shifting the whole lockup up
   by that amount puts the logo's visual center on the links' center line,
   while its internal geometry stays exactly per the guide. */
.nav .brand { transform: translateY(-.225em); }
.nav__links { display: flex; gap: 22px; margin-left: 12px; position: relative; align-items: center; }
.nav__links > a, .nav__links .has-drop > a { font-size: 14px; font-weight: 550; color: #c3cadd; padding: 8px 0; display: inline-block; }
.nav__links > a:hover, .nav__links > a.active,
.nav__links .has-drop > a:hover, .nav__links .has-drop > a.active { color: #fff; }
.has-drop { position: relative; }
.has-drop .drop { position: absolute; top: 100%; left: -14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 260px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .12s ease, transform .12s ease; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; pointer-events: auto; transform: translateY(0); }
.drop a { display: block; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.drop a:hover { background: var(--purple-soft); color: var(--purple-deep); }
.drop a span { display: block; font-size: 12px; font-weight: 500; color: var(--faint); margin-top: 2px; }
.nav__cta { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nav__burger { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: transparent; cursor: pointer; margin-left: 8px; }
.nav__burger svg { width: 19px; height: 19px; color: #fff; }
@media (max-width: 900px) {
  .nav__links { display: none; position: absolute; top: 68px; left: 0; right: 0; margin-left: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--dark); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-lg); padding: 10px 24px 16px; }
  .nav__links.open { display: flex; }
  .nav__links > a, .nav__links .has-drop > a { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
  .nav__links .has-drop > a { display: block; } /* full-width row, so its separator spans like the others */
  .nav__links > a:first-child { border-top: none; }
  .has-drop .drop { position: static; opacity: 1; pointer-events: auto; transform: none; box-shadow: none; border: none; padding: 0 0 8px 12px; display: none; background: transparent; }
  .has-drop.open .drop { display: block; }
  .has-drop .drop a { color: #c3cadd; }
  .has-drop .drop a span { color: #7c89a5; }
  .nav__burger { display: inline-flex; }
}
.nav__links .nav__mobile-only { display: none; }
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .nav__in { gap: 12px; }
  .nav__cta .btn--text { display: none; }
  .nav__links.open .nav__mobile-only { display: inline-block; }
}
@media (max-width: 380px) {
  .nav__in { gap: 10px; }
  .brand { font-size: 18px; }
  .nav__cta .btn--sm { padding: 8px 12px; font-size: 13px; }
  .nav__burger { margin-left: 0; }
}

/* Section rhythm */
section { padding: 84px 0; }
.sec-tight { padding: 56px 0; }
.sec-paper { background: var(--paper); }
.sec-dark { background: var(--dark); color: #fff; }
.sec-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.sec-head.left { text-align: left; margin: 0 0 34px; max-width: 760px; }
.sec-head .lede { margin: 14px auto 0; }
.sec-head.left .lede { margin: 14px 0 0; }
.sec-dark .lede { color: #aab4c9; }
.sec-dark .muted { color: #9aa5bd; }

/* Hero (home) — full-bleed photography, not an isometric render */
.hero-photo { position: relative; overflow: hidden; color: #fff; }
.hero-photo__bg { position: absolute; inset: 0; z-index: 0; }
.hero-photo__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%; }
.hero-photo__bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,9,18,.96) 6%, rgba(6,9,18,.86) 34%, rgba(6,9,18,.58) 62%, rgba(6,9,18,.28) 100%),
    linear-gradient(0deg, rgba(6,9,18,.55), rgba(6,9,18,0) 42%); }
.hero-photo__in { position: relative; z-index: 1; max-width: 920px; padding-top: 120px; padding-bottom: 90px; }
.hero-photo h1 { color: #fff; margin: 18px 0 18px; }
.hero-photo .lede { color: #cad0e3; }
.hero-photo .cta-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-photo__stats { display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.hero-photo__stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
/* Brand text gradient (white, then purple fading to green) split across the three stats */
.hero-photo__stat:nth-child(2) b, .hero-photo__stat:nth-child(3) b { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-photo__stat:nth-child(2) b { background-image: linear-gradient(90deg, var(--purple-mid), #6f86cc); }
.hero-photo__stat:nth-child(3) b { background-image: linear-gradient(90deg, #6390c4, #3fae8f 55%, var(--green)); }
.hero-photo__stat span { font-size: 12px; color: #9aa5bd; }
@media (max-width: 720px) { .hero-photo__in { padding-top: 92px; padding-bottom: 64px; } }

.stat-row { display: flex; gap: 32px; flex-wrap: wrap; }
.stat-row__item b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.stat-row__item span { font-size: 12px; color: var(--muted); }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.07); color: #e2e5f3; border: 1px solid rgba(255,255,255,.16); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.chip--onLight { background: var(--paper-2); color: var(--ink-2); border-color: var(--line-2); }

/* Industry / inner hero — full-bleed photography behind a gradient.
   Default: centered text (the 4 industry pages). .ihero--left (About
   page) switches to the homepage .hero-photo's left-aligned treatment. */
.ihero { position: relative; overflow: hidden; color: #fff; padding: 110px 0 96px; }
.ihero__bg { position: absolute; inset: 0; z-index: 0; }
.ihero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ihero-pos, 50% 50%); }
.ihero__bg::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 60% at 82% 0%, rgba(124,58,237,.2), transparent 70%),
    radial-gradient(60% 65% at 50% 45%, rgba(6,9,18,.5), transparent 72%),
    linear-gradient(180deg, rgba(6,9,18,.82) 0%, rgba(6,9,18,.78) 100%); }
.ihero__in { position: relative; z-index: 1; text-align: center; max-width: 1040px; margin: 0 auto; }
.ihero h1 { color: #fff; margin: 14px 0 16px; }
.ihero p.lede { color: #cad0e3; margin: 0 auto; }
.ihero .cta-row { justify-content: center; margin-top: 26px; }

/* .ihero--left — the homepage-matching left-aligned variant (About page) */
.ihero--left .ihero__bg::after {
  background:
    radial-gradient(55% 60% at 92% 0%, rgba(124,58,237,.2), transparent 70%),
    linear-gradient(100deg, rgba(6,9,18,.95) 8%, rgba(6,9,18,.84) 36%, rgba(6,9,18,.55) 64%, rgba(6,9,18,.25) 100%),
    linear-gradient(0deg, rgba(6,9,18,.5), rgba(6,9,18,0) 40%); }
.ihero--left .ihero__in { text-align: left; max-width: 920px; margin: 0 auto; }
.ihero--left p.lede { margin: 0; }
.ihero--left .cta-row { justify-content: flex-start; }
/* About hero, desktop: a split layout. The crew stands mid-photo, so a
   full-bleed photo puts their faces behind the copy (a 3:2 photo in this wide
   strip can only be cropped top and bottom). Instead the copy takes a narrower
   left column and the photo fills the right half, fading into the dark on its
   left edge. A half-width box is close to the photo's own shape, so nearly the
   whole scene shows. Below 1024px the full-bleed layout stays. */
@media (min-width: 1024px) {
  .ihero--about { background: #060912; }
  .ihero--about .ihero__bg--about { left: 50%; }
  .ihero--about .ihero__bg--about img { object-position: 40% 50%; }
  .ihero--about .ihero__bg--about::after {
    background:
      linear-gradient(90deg, #060912 0%, rgba(6,9,18,.55) 18%, rgba(6,9,18,.12) 45%, rgba(6,9,18,.08) 100%),
      linear-gradient(0deg, rgba(6,9,18,.45), rgba(6,9,18,0) 35%); }
  .ihero--about .ihero__in > * { max-width: 500px; }
}

/* Cards */
.grid { display: grid; gap: 20px; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card .ico { color: var(--purple); margin-bottom: 14px; }
.card .ico svg { width: 25px; height: 25px; }
.card h3 { margin-bottom: 7px; }
.card p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5; }

/* Industry tiles (home overview grid, photo-backed, editorial not icon-grid) */
.itile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .itile-grid { grid-template-columns: 1fr; } }
.itile { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/11; display: block; box-shadow: var(--shadow); }
.itile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.3,1), filter .3s ease; filter: saturate(.92); }
.itile:hover img { transform: scale(1.045); filter: saturate(1.02); }
.itile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(6,9,18,0) 32%, rgba(6,9,18,.9) 100%); }
.itile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; z-index: 1; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.itile__label b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.itile__label span { font-size: 12.5px; color: #b7bfd6; }
.itile__arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); display: grid; place-items: center; flex: none; transition: background .2s ease, border-color .2s ease; }
.itile__arrow svg { width: 15px; height: 15px; }
.itile:hover .itile__arrow { background: #fff; border-color: #fff; color: var(--ink); }

/* How it works flow */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; margin-top: 20px; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr 1fr; gap: 16px; } }
.flow__step { position: relative; padding: 22px 16px; text-align: center; }
.flow__step .n { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .08em; margin-bottom: 10px; }
.flow__step .fico { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 14px; display: grid; place-items: center; border: 1.5px solid var(--line-2); color: var(--purple); }
.flow__step .fico svg { width: 22px; height: 22px; }
.flow__step h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.flow__step p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.flow__step .arrow { position: absolute; top: 38px; right: -10px; color: var(--line-2); }
@media (max-width: 860px) { .flow__step .arrow { display: none; } }

/* Why-unique list (dark, editorial) */
.why { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }
.why__item { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); }
.why__item:first-child { border-top: none; }
.why__item .k { flex: none; color: var(--green); padding-top: 2px; }
.why__item .k svg { width: 19px; height: 19px; }
.why__item h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: #fff; }
.why__item p { margin: 0; font-size: 13.5px; color: #9aa5bd; line-height: 1.5; }

/* Hardware panel — houses the sensor render as a supporting diagram, not a hero.
   White background, matching the original marketing app's hero-image treatment
   (the render's own background is transparent, so it sits directly on the page). */
.hw-panel { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; position: relative; }
@media (max-width: 900px) { .hw-panel { grid-template-columns: 1fr; } }
.hw-panel::before { content: ""; position: absolute; right: 0; top: 50%; width: 52%; height: 520px; transform: translateY(-50%);
  background: radial-gradient(60% 60% at 70% 50%, rgba(139,92,246,.14), transparent 70%), radial-gradient(50% 50% at 30% 70%, rgba(34,197,94,.09), transparent 70%);
  pointer-events: none; z-index: 0; }
.hw-panel__art { position: relative; max-width: 560px; margin: 0 auto; }
.hw-panel__art img { width: 100%; height: auto; }

/* Challenge / Solution split (AssetWatch industry-page pattern) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.split__panel { border-radius: var(--r); padding: 30px; }
.split__panel--problem { background: var(--red-soft); border: 1px solid #fbd6d6; }
.split__panel--solution { background: linear-gradient(150deg, var(--purple-deep), var(--purple)); color: #fff; }
.split__panel h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; font-weight: 750; margin-bottom: 18px; }
.split__panel--problem h3 { color: #b91c1c; }
.split__panel--solution h3 { color: rgba(255,255,255,.85); }
.split__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.split__panel li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 550; line-height: 1.4; }
.split__panel li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.split__panel--problem li svg { color: var(--red); }
.split__panel--solution li svg { color: #a7f3d0; }

/* Stats band */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 720px) { .statband { grid-template-columns: 1fr 1fr; } }
.statband .s b { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; display: block; background: linear-gradient(100deg, #fff, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.statband .s span { color: #9fb0cf; font-size: 13px; }

/* Equipment / asset chips — neutral, not pastel */
.eqgrid { display: flex; flex-wrap: wrap; gap: 10px; }
.eqchip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.eqchip svg { width: 17px; height: 17px; color: var(--purple); }

/* CTA band */
.ctaband { background: linear-gradient(135deg, #1b0f38, #5b21b6 55%, #7c3aed 130%); color: #fff; border-radius: 24px; padding: 56px; text-align: center; position: relative; overflow: hidden; }
.ctaband::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 90% 0%, rgba(34,197,94,.16), transparent 60%); pointer-events: none; }
.ctaband h2 { color: #fff; position: relative; } .ctaband p { color: rgba(255,255,255,.78); max-width: 56ch; margin: 12px auto 26px; position: relative; }
.ctaband .cta-row, .ctaband .btn { position: relative; }
/* Scope statement (assisted living): a full-width purple band under the
   equipment list, styled like .ctaband but quieter. */
.scope-note { background: linear-gradient(135deg, #1b0f38, #5b21b6 60%, #7c3aed 130%); color: rgba(255,255,255,.88);
  border-radius: 16px; padding: 22px 32px; margin: 36px auto 0; max-width: 960px; text-align: center; font-size: 14px; line-height: 1.6; }

/* Footer */
footer { background: var(--dark); color: #c7cfdf; padding: 56px 0 32px; border-top: 1px solid rgba(255,255,255,.06); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 800px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
footer h5 { color: #fff; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; font-weight: 700; }
footer a { display: block; color: #9fb0cf; font-size: 14px; padding: 5px 0; }
footer a:hover { color: #fff; }
.foot__brand .brand__word .peak { color: #fff; }
.foot__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding-top: 20px; display: flex; justify-content: center; text-align: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #7c89a5; }

/* AI + human-in-the-loop steps (About page) */
.ai-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; position: relative; }
@media (max-width: 860px) { .ai-steps { grid-template-columns: 1fr; } }
.ai-step { position: relative; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 28px; }
.ai-step .n { display: block; font-family: var(--mono); font-size: 11px; color: #b9a6f7; letter-spacing: .12em; margin-bottom: 16px; }
.ai-step .ico2 { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(34,197,94,.14)); border: 1px solid rgba(139,92,246,.3); color: #c4b5fd; }
.ai-step .ico2 svg { width: 22px; height: 22px; }
.ai-step h4 { color: #fff; font-size: 16.5px; font-weight: 700; margin: 0 0 9px; letter-spacing: -.01em; }
.ai-step p { color: #aab4c9; font-size: 13.5px; line-height: 1.6; margin: 0; }
.ai-step__arrow { display: none; position: absolute; top: 44px; right: -37px; color: rgba(255,255,255,.22); z-index: 1; }
@media (min-width: 861px) { .ai-step__arrow { display: block; } }
.ai-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding: 18px 20px; background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.18); border-radius: 14px; }
.ai-note svg { width: 19px; height: 19px; color: var(--green); flex: none; margin-top: 2px; }
.ai-note p { margin: 0; font-size: 13.5px; color: #b7c8bf; line-height: 1.55; }

/* About */
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .value-grid { grid-template-columns: 1fr; } }
.about-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; } }

/* Contact / form */
.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info .ci { display: flex; gap: 12px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); }
.contact-info .ci:first-child { border-top: none; }
.contact-info .ci .k { flex: none; color: var(--purple); padding-top: 1px; }
.contact-info .ci .k svg { width: 19px; height: 19px; }
.contact-info .ci b { font-size: 14px; display: block; } .contact-info .ci span { font-size: 13px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field label .req { color: var(--purple); }
.field input, .field select, .field textarea { font-family: inherit; font-size: 14.5px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); outline: none; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
.field textarea { min-height: 108px; resize: vertical; }

.hidden { display: none !important; }

/* Legal pages (privacy.html): one plain reading column. */
.legal { padding: 64px 0 84px; }
.legal__in { max-width: 760px; }
.legal__date { color: var(--muted, #5b6478); font-size: 14px; margin: 0 0 28px; }
.legal h2 { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 36px 0 10px; }
.legal h3 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; max-width: 68ch; }
.legal ul { padding-left: 1.3em; margin: 8px 0 14px; }
.legal li { margin: 6px 0; }
.foot__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-privacy { font-size: 13px; color: var(--muted, #5b6478); margin: 12px 0 0; }