/* divikriti.com — shared stylesheet.
 * Tokens, type scale, spacing, radii and page specs from
 * DIVIKRITI_TOKENS_AND_SPECS.md (Claude Design export, applied 2026-08-26).
 * Mobile-first: base = 390 spec; the 768px breakpoint applies the 1140 spec.
 */

:root {
  /* brand / accents */
  --brand-slate: #22314A;
  --brand-ink: #0A0F1E;
  --accent-diviplace: #0066FF;
  --accent-diviplace-2: #00A8FF;
  --accent-cyan: #00D4FF;
  --accent-diviauto: #0E9384;
  --accent-diviauto-2: #2DD4BF;
  --accent-divitrading: #B25E09;
  --accent-divitrading-2: #E08A00;
  /* neutrals, light */
  --ink: #0F1B2D;
  --body-c: #3D4D63;
  --muted: #51617A;
  --faint: #6B7A8F;
  --disabled: #9AA6B5;      /* disabled controls only — never readable text */
  --border: #E3E8EE;
  --input-border: #D0D7E0;
  --surface: #FFFFFF;
  --surface-alt: #F7F9FC;
  /* neutrals, dark (on --brand-ink) */
  --d-text: #FFFFFF;
  --d-muted: #8FA3BC;
  --d-faint: #4A6A8A;       /* decorative browser-chrome URL only */
  --d-panel: #0F1830;
  --d-panel-border: #1E2D50;
  --d-hairline: rgba(255,255,255,.08);
  /* status */
  --live-ink: #0A7A4F;   --live-bg: #E7F8F0;
  --neutral-ink: #51617A; --neutral-bg: #EEF1F4;
  /* AA: export's #B25E09 on #FEF4E6 measured 4.29:1 at badge size — darkened,
     same treatment the addendum gave the LIVE badge. Accent text/strips keep #B25E09. */
  --coming-ink: #8F4E06;  --coming-bg: #FEF4E6;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, Menlo, monospace;
  --shadow-card: 0 1px 2px rgba(15,27,45,.04), 0 4px 12px rgba(15,27,45,.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--surface); font-size: 14px; line-height: 1.6;
}
a { color: var(--accent-diviplace); text-underline-offset: 3px; }
img { max-width: 100%; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ── header ── */
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.brand img { width: 32px; height: 32px; display: block; }
.nav-toggle { display: none; }
.nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.nav-burger span { width: 18px; height: 2px; background: var(--ink); display: block; }
.site-nav { display: none; }
.nav-toggle:checked ~ .site-nav {
  display: flex; position: absolute; right: 20px; top: 58px; z-index: 10;
  flex-direction: column; gap: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 22px;
  box-shadow: var(--shadow-card);
}
.site-nav a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.site-nav a[aria-current="page"] { color: var(--ink); }

/* ── dark hero (landing) ── */
.hero-dark { background: var(--brand-ink); color: var(--d-text); padding: 40px 0 48px; }
.pill {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent-cyan); border: 1px solid rgba(0,212,255,.35);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 18px;
}
.hero-dark h1 {
  font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #FFFFFF 55%, var(--accent-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-dark .sub { font-size: 14.5px; line-height: 1.6; color: var(--d-muted); max-width: 560px; margin: 0 0 22px; }
.cta-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.cta {
  display: inline-block; text-align: center; text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 8px;
}
.cta-primary { background: linear-gradient(135deg, var(--accent-diviplace), var(--accent-diviplace-2)); color: #fff; }
.cta-ghost { color: var(--d-text); border: 1px solid rgba(255,255,255,.25); }
.hero-frame {
  background: var(--d-panel); border: 1px solid var(--d-panel-border);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,102,255,.18);
}
.hero-frame img { display: block; width: 100%; height: auto; }

/* ── sections ── */
section { padding: 40px 0; }
.band-alt { background: var(--surface-alt); padding: 36px 0; }
/* AA: --faint on --surface-alt measured 4.14:1 — eyebrows step to --muted per the
   addendum's fallback clause; --faint keeps captions/footnotes on white. */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 18px; }

/* products */
.products { display: grid; grid-template-columns: 1fr; gap: 14px; }
.product-card {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.product-card .strip { height: 4px; }
.strip-diviplace   { background: linear-gradient(135deg, var(--accent-diviplace), var(--accent-diviplace-2)); }
.strip-diviauto    { background: linear-gradient(135deg, var(--accent-diviauto), var(--accent-diviauto-2)); }
.strip-divitrading { background: linear-gradient(135deg, var(--accent-divitrading), var(--accent-divitrading-2)); }
.product-card .inner { padding: 18px; display: grid; gap: 10px; }
.product-card h3 { margin: 0; font-size: 17px; font-weight: 700; }
.badge {
  display: inline-block; justify-self: start; font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
}
.badge-live    { color: var(--live-ink); background: var(--live-bg); }
.badge-neutral { color: var(--neutral-ink); background: var(--neutral-bg); }
.badge-coming  { color: var(--coming-ink); background: var(--coming-bg); }
.product-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.product-card .card-link { font-size: 13px; font-weight: 600; text-decoration: none; }

/* founders */
.founders-grid { display: flex; gap: 12px; margin: 18px 0; }
.founder { flex: 1; }
.founder .photo {
  aspect-ratio: 1; width: 100%; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--border); display: block; margin-bottom: 10px;
}
.founder h3 { margin: 0; font-size: 15px; font-weight: 700; }
.founder p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.read-story { font-size: 14px; font-weight: 600; text-decoration: none; }

/* about */
.page-h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 14px; }
.about-intro { font-size: 14px; line-height: 1.7; color: var(--body-c); max-width: 640px; }
.story { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
.story-block { border-top: 2px solid var(--ink); padding-top: 14px; }
.kicker { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; margin: 0 0 10px; }
.kicker-start   { color: var(--accent-diviplace); }
.kicker-factory { color: var(--accent-diviauto); }
.kicker-point   { color: var(--accent-divitrading); }
.story-block p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--body-c); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.contact-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 10px; }
form.contact { display: grid; gap: 14px; border: 1px solid var(--border);
  border-radius: 14px; padding: 22px; box-shadow: var(--shadow-card); }
form.contact label { font-size: 12px; font-weight: 600; display: grid; gap: 6px; color: var(--ink); }
input, textarea {
  font: inherit; font-size: 14px; padding: 0 12px; height: 44px;
  border: 1px solid var(--input-border); border-radius: 6px; width: 100%;
  background: var(--surface); color: var(--ink);
}
textarea { min-height: 140px; padding: 10px 12px; height: auto; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--accent-diviplace); outline-offset: 1px; border-color: var(--accent-diviplace); }
button.submit {
  font: inherit; font-weight: 600; font-size: 14px; padding: 12px 22px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-diviplace), var(--accent-diviplace-2));
  color: #fff; border: 0; border-radius: 8px; justify-self: start;
}
button.submit[disabled] { opacity: .6; cursor: default; }
.form-note { font-size: 11px; min-height: 1.4em; margin: 0; }
.form-note.ok { color: var(--live-ink); }
.form-note.err { color: #991B1B; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reply-note { font-size: 11.5px; color: var(--faint); margin: 8px 0 0; }

/* contact band (landing #contact) */
.contact-band { background: var(--brand-ink); color: var(--d-text); padding: 40px 0; }
.contact-band h2 { color: var(--d-text); }
.contact-band p { color: var(--d-muted); font-size: 14.5px; margin: 0 0 12px; }
.contact-band a { color: var(--accent-cyan); font-weight: 600; }

/* legal prose */
.prose { max-width: 68ch; padding: 40px 0; color: var(--body-c); font-size: 14px; line-height: 1.7; }
.prose h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.prose h2 { font-size: 22px; margin-top: 30px; color: var(--ink); }

/* footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; }
.site-footer .wrap {
  padding: 22px 20px; display: flex; flex-direction: column; gap: 10px;
  align-items: center; text-align: center;
  font-size: 10.5px; line-height: 1.7; color: var(--muted);
}
.site-footer nav { display: flex; gap: 16px; }
.site-footer a { color: var(--muted); }

/* ── 1140 spec ── */
@media (min-width: 768px) {
  body { font-size: 14.5px; }
  .wrap { padding: 0 56px; }
  .site-header .wrap { padding-top: 22px; padding-bottom: 22px; }
  .nav-burger { display: none; }
  .site-nav { display: flex !important; position: static; flex-direction: row; gap: 26px;
    border: 0; padding: 0; box-shadow: none; background: none; }
  .site-nav a { font-size: 13px; font-weight: 500; }
  .hero-dark { padding: 72px 0 80px; }
  .hero-dark h1 { font-size: 58px; line-height: 1.05; letter-spacing: -0.035em; }
  .hero-dark .sub { font-size: 17px; }
  .cta-row { flex-direction: row; gap: 12px; }
  .hero-frame { box-shadow: 0 24px 80px rgba(0,102,255,.18); }
  section { padding: 76px 0; }
  .band-alt { padding: 60px 0; }
  .eyebrow { font-size: 12px; }
  h2 { font-size: 30px; }
  .products { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .product-card .inner { padding: 20px; gap: 12px; }
  .product-card h3 { font-size: 19px; }
  .product-card p { font-size: 13.5px; }
  .badge { font-size: 10px; }
  .founders-grid { gap: 14px; }
  .founder { flex: 0 0 160px; }
  .founder .photo { width: 160px; border-radius: 14px; }
  .page-h1 { font-size: 46px; }
  .about-intro { font-size: 14.5px; }
  .story { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .kicker { font-size: 10.5px; }
  .contact-grid { grid-template-columns: 1fr 460px; gap: 64px; }
  .contact-grid .page-h1 { font-size: 44px; }
  input { height: 38px; font-size: 13.5px; }
  .site-footer .wrap { flex-direction: row; justify-content: space-between; text-align: left; font-size: 11.5px; }
}

/* services bridge section (co-founder review 2026-08-26) */
.services-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
.services-close { margin-top: 20px; font-weight: 600; color: var(--ink); }
.services-close a { margin-left: 10px; }