/* CT-Sided Tech Solutions
   Hand-written stylesheet. Dark "instrument panel" theme.

   Rule of the palette: the greys are NEUTRAL graphite, not violet. Purple and
   blue are accents only, so they land where they mean something (buttons, the
   logo, the console, focus states) instead of tinting every surface. Anything
   people have to read or type into gets a light, off-white surface. */

:root {
  /* neutral dark surfaces */
  --void: #0b0b11;
  --panel: #14141d;
  --panel-2: #1b1b26;
  --wash: rgba(255, 255, 255, 0.025);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.2);
  --hair: rgba(255, 255, 255, 0.05);

  --text: #eeedf3;
  --muted: #9a98a8;
  --faint: #6e6c7c;

  /* light surfaces, used sparingly: forms and anything you have to read closely.
     muted off pure white toward a faint lavender so the one light panel on the page
     ties back into the purple brand instead of glaring as a stark white block. */
  --paper: #e5e2f0;
  --paper-2: #eeecf7;
  --paper-line: #d4d0e5;
  --ink: #16151d;
  --ink-muted: #5d5b6b;
  --ink-faint: #8b8998;

  /* accents */
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  --grad-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(59, 130, 246, 0.12));
  /* button gradient. the real gotcha: buttons have a 1px transparent border, and a
     gradient background defaults to origin=padding-box while still painting under the
     border. in that 1px strip the gradient wraps and shows the OPPOSITE end color, a
     genuine 1px streak (measured, not perception). the fix lives on .btn-primary: paint
     the gradient with `border-box` so it is anchored to the outer edge. */
  --grad-btn: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%);
  --up: #34d399;          /* status only, never decoration */

  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 0.6em;
}

p { margin: 0 0 1rem; }
a { color: var(--purple); text-decoration: none; }
/* inline highlight for a word or two inside a heading */
.hl { color: var(--purple); }

/* legal / policy pages: simple readable prose */
.legal h2 { font-size: 1.25rem; margin: 2.1rem 0 0.6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--muted); margin: 0 0 1rem; line-height: 1.7; }
.legal ul { color: var(--muted); margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.7; }
.legal li { margin: 0.25rem 0; }
a:hover { color: #a78bfa; }
img, svg { max-width: 100%; display: block; }

/* ---------- layout ---------- */

.container { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.section { padding: 92px 0; border-top: 1px solid var(--line); }
.section-tight { padding: 60px 0; }
.section.flush { border-top: 0; }

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 18px;
}

.section-head { max-width: 660px; margin-bottom: 50px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.95rem, 3.1vw, 2.6rem); font-weight: 800; }
.section-head p { color: var(--muted); margin-bottom: 0; }
.lead { color: var(--muted); font-size: 1.1rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: filter 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--grad-btn) border-box; color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(1.13); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.btn-outline-light:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.btn-lg { padding: 0.95rem 1.7rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 17, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; }
.brand img { width: 34px; height: 34px; }
.brand-name { font-size: 1.05rem; color: var(--text); line-height: 1.1; }
.brand-name span {
  display: block;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 4px;
}

.main-nav { display: flex; align-items: center; gap: 0.35rem; }
.main-nav a { color: var(--muted); font-weight: 500; font-size: 0.95rem; padding: 0.5rem 0.85rem; border-radius: 8px; }
.main-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.main-nav a.active { color: var(--text); }
.main-nav .btn { margin-left: 0.5rem; }
/* .main-nav a is more specific than .btn-primary, so the button label would
   inherit the muted nav color. Put it back. */
.main-nav a.btn-primary { color: #fff; }
.main-nav a.btn-ghost { color: var(--text); }
.main-nav a.btn-primary:hover { background: var(--grad-btn) border-box; filter: brightness(1.13); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  width: 44px;
  height: 42px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 19px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  margin: 0 auto;
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; padding: 96px 0 88px; }
/* one restrained glow, not a purple wash across the whole page */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 380px at 6% 0%, rgba(139, 92, 246, 0.13), transparent 62%),
    radial-gradient(620px 420px at 100% 26%, rgba(59, 130, 246, 0.1), transparent 62%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 4.4vw, 3.6rem); font-weight: 800; margin-bottom: 22px; }
.hero h1 .grad {
  background: linear-gradient(100deg, #c4b5fd, #7dd3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { color: var(--muted); font-size: 1.1rem; max-width: 34rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 30px; }

/* the signature piece: a care-plan console */
.console {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.console .bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.console .bar b { color: var(--text); font-weight: 600; }
.console .bar .right { margin-left: auto; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16); flex-shrink: 0; }
.console .rows { padding: 6px 0; }
.console .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 15px 18px;
  font-family: var(--mono);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--hair);
}
.console .row:last-child { border-bottom: 0; }
.console .k { color: var(--muted); }
.console .v { color: var(--text); display: flex; align-items: center; gap: 0.5rem; text-align: right; }
.console .ok { color: var(--up); }
.bars { display: flex; gap: 3px; }
.bars i { width: 5px; height: 15px; border-radius: 2px; background: var(--up); opacity: 0.85; display: block; }
.console .foot {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  line-height: 1.7;
}

/* ---------- trust strip ---------- */

.trust { border-top: 1px solid var(--line); background: var(--wash); }
.trust .container { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; justify-content: space-between; padding: 30px 1.5rem; }
.trust .stat strong { font-family: "Plus Jakarta Sans", sans-serif; display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.trust .stat span { color: var(--faint); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card h3 { font-size: 1.25rem; font-weight: 800; }
.card p { color: var(--muted); margin-bottom: 0; }
.card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  color: #c4b5fd;
  margin-bottom: 1.1rem;
}
.card-icon svg { width: 22px; height: 22px; }

.badge-soft {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c4b5fd;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* ---------- care plan spec sheet ---------- */

.spec { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.spec .line {
  display: grid;
  grid-template-columns: 210px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hair);
}
.spec .line:last-child { border-bottom: 0; }
.spec .line:nth-child(odd) { background: var(--wash); }
.spec .name { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.spec .desc { color: var(--text); font-size: 0.98rem; }
.spec .tick { font-family: var(--mono); font-size: 0.78rem; color: var(--up); }

.price { display: flex; align-items: baseline; gap: 0.7rem; margin-top: 32px; }
.price b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; }
.price span { color: var(--muted); font-family: var(--mono); font-size: 0.85rem; }
.price .price-pre { align-self: center; color: var(--muted); font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.04em; }

/* ---------- process steps ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.step .num {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--faint);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.step h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.4rem; }
.step p { color: var(--muted); font-size: 0.96rem; margin-bottom: 0; }

/* ---------- page-builder comparison ---------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.compare .box { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.compare .box.them { background: transparent; }
.compare .box.us { background: var(--panel); }
.compare h3 {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 18px;
}
.compare ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.compare li { display: flex; gap: 0.7rem; color: var(--muted); font-size: 0.97rem; }
.compare li b { color: var(--text); font-weight: 600; }
.compare .mark { font-family: var(--mono); flex-shrink: 0; }
.compare .them .mark { color: var(--faint); }
.compare .us .mark { color: var(--purple); }

/* ---------- portfolio ---------- */

.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.work-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.work-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.work-card .thumb { border-bottom: 1px solid var(--line); background: var(--panel-2); }
.work-card .thumb img { width: 100%; height: auto; }
.work-card .meta { padding: 22px 24px 26px; }
.work-card .meta .tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #a78bfa; }
.work-card .meta h3 { font-size: 1.2rem; font-weight: 800; margin: 0.35rem 0 0.4rem; }
.work-card .meta p { color: var(--muted); font-size: 0.96rem; margin: 0; }

/* ---------- estimate / plan panels ---------- */

.estimate-card {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  padding: 32px;
  background: var(--wash);
}
.estimate-card h3 { font-size: 1.4rem; font-weight: 800; }
.estimate-card p { color: var(--muted); }

.plan {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 460px;
}
.plan.featured { border-color: var(--line-2); box-shadow: var(--shadow); }
.plan .price { margin: 0.6rem 0 0.2rem; }
.plan ul { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: 0.75rem; }
.plan li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--muted); font-size: 0.97rem; }
.plan li svg { flex-shrink: 0; margin-top: 5px; color: var(--purple); }
.plan-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }

/* ---------- value list ---------- */

.value-list { display: grid; gap: 1.2rem; }
.value-list .v { display: flex; gap: 1rem; }
.value-list .v .dot {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: var(--grad-soft); border: 1px solid var(--line); color: #c4b5fd;
  display: grid; place-items: center;
  box-shadow: none;
}
.value-list .v h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.2rem; }
.value-list .v p { color: var(--muted); margin: 0; font-size: 0.96rem; }

/* ---------- interior page hero ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 52px;
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 260px at 5% -20%, rgba(139, 92, 246, 0.1), transparent 62%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(2rem, 3.9vw, 3rem); font-weight: 800; }
.page-hero p { color: var(--muted); font-size: 1.08rem; max-width: 42rem; margin-bottom: 0; }
.crumbs { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.crumbs a { color: var(--faint); }
.crumbs a:hover { color: var(--purple); }

/* ---------- about ---------- */

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.founder-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.founder-card .who { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.founder-card .avatar {
  width: 54px; height: 54px; border-radius: 12px;
  background: var(--grad-soft); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.founder-card .who b { display: block; font-family: "Plus Jakarta Sans", sans-serif; }
.founder-card .who span { color: var(--faint); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; }

/* ---------- the founders ---------- */

.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.person {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.person:hover { border-color: var(--line-2); transform: translateY(-3px); }
.person .shot {
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--grad-soft);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.person .shot svg { width: 50px; height: 50px; color: #c4b5fd; }
/* both headshots are square crops centered on the face; a slight scale tightens
   the framing inside the circle, and both get the same treatment so they match */
.person .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.14); }
.person h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.2rem; }
.person .role {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 0.7rem;
}
.person a { font-size: 0.92rem; color: var(--muted); word-break: break-all; }
.person a:hover { color: var(--purple); }

/* a quiet, honest note. not a sales pitch, so it stays understated. */
.note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--purple);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--wash);
  padding: 22px 26px;
}
.note h3 { font-family: var(--mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.note p { color: var(--muted); font-size: 0.96rem; margin-bottom: 0.7rem; }
.note p:last-child { margin-bottom: 0; }

/* ---------- service area ---------- */

.area { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; background: var(--wash); }
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.area .towns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.area .towns span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
}

/* ---------- faq ---------- */

.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.2rem 1.3rem;
  margin-bottom: 0.7rem;
  background: var(--wash);
}
.faq details[open] { border-color: var(--line-2); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-family: "Plus Jakarta Sans", sans-serif;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.2rem; color: var(--purple); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding-bottom: 1rem; margin: 0; }

/* ---------- cta band ---------- */

.cta-band {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(139, 92, 246, 0.12), transparent 66%),
    var(--panel);
}
.cta-band h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800; }
.cta-band p { color: var(--muted); max-width: 34rem; margin-inline: auto; }
.cta-band .btn-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- the contact form: a light card, because people have to read and
   type in it. dark purple inputs look murky and feel unprofessional. ---------- */

.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }

.form {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: grid;
  gap: 1.05rem;
  color: var(--ink);
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.8);
}
.form h2 { color: var(--ink); }
.form .intro { color: var(--ink-muted); margin: 0; font-size: 0.97rem; }

.field { display: grid; gap: 0.4rem; }
.field.row2 { grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.field label { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.field .hint { color: var(--ink-faint); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}
.form-note { font-size: 0.84rem; color: var(--ink-faint); margin: 0; }

.form-status {
  display: none;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: 0.94rem;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.form-status.show { display: block; }
.form-status.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* form paused, monthly submission limit reached */
.form-paused[hidden] { display: none; }
.form-paused {
  border: 1px solid #ddd8f3;
  border-radius: var(--radius);
  padding: 24px;
  background: #f0edfd;
}
.form-paused h3 { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: 0.4rem; }
.form-paused p { color: var(--ink-muted); font-size: 0.94rem; margin: 0 0 1.1rem; }
.paused-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.paused-actions .btn-ghost { color: var(--ink); border-color: var(--paper-line); background: var(--paper-2); }
.paused-actions .btn-ghost:hover { color: var(--ink); background: #fff; }
.form.is-paused > *:not(.form-paused) { opacity: 0.4; filter: grayscale(1); pointer-events: none; user-select: none; }

.contact-cards { display: grid; gap: 0.8rem; }
.contact-line {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  gap: 0.9rem;
  align-items: center;
}
.contact-line .ic {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--grad-soft); border: 1px solid var(--line);
  color: #c4b5fd;
  display: grid; place-items: center; flex-shrink: 0;
}
.contact-line b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.95rem; }
.contact-line a, .contact-line span { color: var(--muted); font-size: 0.94rem; }
/* stack multiple contact links (both founder emails) instead of running them together */
.contact-line a { display: block; }
.contact-line a:hover { color: var(--purple); }

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 1.5rem;
  background: rgba(6, 6, 10, 0.75);
  backdrop-filter: blur(5px);
}
.modal.open { display: grid; }
.modal-card {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  max-width: 740px;
  width: 100%;
  padding: 40px;
  box-shadow: var(--shadow);
  position: relative;
  animation: pop 0.2s ease;
}
@keyframes pop { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font-size: 1.1rem; cursor: pointer;
}
.modal-close:hover { color: var(--text); }
.modal-head { text-align: center; margin-bottom: 1.8rem; }
.modal-head h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.4rem; }
.modal-head p { color: var(--muted); margin: 0; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.choice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  background: var(--void);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.choice:hover { border-color: var(--line-2); transform: translateY(-2px); }
.choice .ic {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--grad); color: #fff;
  display: grid; place-items: center; margin-bottom: 1rem;
}
.choice h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.4rem; }
.choice p { color: var(--muted); font-size: 0.94rem; flex-grow: 1; }
.choice .btn { margin-top: 1rem; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.site-footer p { color: var(--muted); max-width: 22rem; font-size: 0.95rem; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}
.footer-col a { display: block; color: var(--muted); padding: 0.28rem 0; font-size: 0.95rem; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--faint);
}

/* ---------- reveal on scroll ---------- */

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  .hero-grid, .about-grid, .area-grid, .plan-split, .contact-grid, .compare, .people { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .spec .line { grid-template-columns: 1fr; gap: 0.35rem; }
  .spec .tick { display: none; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 1.5rem 1.2rem;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 0.75rem 0.6rem; }
  .main-nav .btn { margin: 0.5rem 0 0; }

  .section { padding: 60px 0; }
  .grid-3, .grid-2, .grid-4, .steps, .choice-grid, .field.row2, .footer-grid { grid-template-columns: 1fr; }
  .cta-band, .area, .modal-card, .form { padding: 28px 22px; }
  .trust .container { gap: 1.4rem 2.2rem; }
  .person { flex-direction: column; text-align: center; padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transition: none; opacity: 1; transform: none; }
  * { animation: none !important; }
}