@font-face {
    font-family: 'Space Grotesk';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/SpaceGrotesk-500.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/SpaceGrotesk-700.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Inter-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Inter-600.woff2') format('woff2');
  }

  :root {
    --ink: #071827;
    --bone: #f5f9fa;
    --paper: #eaf2f2;
    --teal: #0fb5a3;
    --teal-deep: #0a8a7c;
    --blue: #1d5fd6;
    --blue-deep: #123a8a;
    --slate: #52717a;
    --line: rgba(7,24,39,0.12);
    --line-strong: rgba(7,24,39,0.45);
    --card: #ffffff;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ink: #eaf4f4;
      --bone: #061219;
      --paper: #0b1c26;
      --teal: #29e0c8;
      --teal-deep: #17b5a0;
      --blue: #5b8dff;
      --blue-deep: #7fa4ff;
      --slate: #8fa8b0;
      --line: rgba(234,244,244,0.14);
      --line-strong: rgba(234,244,244,0.5);
      --card: #0f232e;
    }
  }
  :root[data-theme="dark"] {
    --ink: #eaf4f4; --bone: #061219; --paper: #0b1c26; --teal: #29e0c8;
    --teal-deep: #17b5a0; --blue: #5b8dff; --blue-deep: #7fa4ff; --slate: #8fa8b0;
    --line: rgba(234,244,244,0.14); --line-strong: rgba(234,244,244,0.5); --card: #0f232e;
  }
  :root[data-theme="light"] {
    --ink: #071827; --bone: #f5f9fa; --paper: #eaf2f2; --teal: #0fb5a3;
    --teal-deep: #0a8a7c; --blue: #1d5fd6; --blue-deep: #123a8a; --slate: #52717a;
    --line: rgba(7,24,39,0.12); --line-strong: rgba(7,24,39,0.45); --card: #ffffff;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bone);
    color: var(--ink);
    font-family: 'Inter', 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 15.5px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  .display {
    font-family: 'Space Grotesk', 'Segoe UI', -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: uppercase;
  }
  .mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }
  a { color: inherit; }
  ::selection { background: var(--teal); color: var(--ink); }

  /* ===== nav ===== */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px; padding-bottom: 18px;
    background: color-mix(in srgb, var(--bone) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .logo { display:flex; align-items:center; gap:9px; text-decoration:none; }
  .logo .mark {
    width: 26px; height: 26px; border-radius: 7px;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:13px; color:#fff;
  }
  .logo span { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; }
  .navlinks { display:flex; gap: clamp(16px,3vw,32px); align-items:center; }
  .navlinks a {
    text-decoration:none; font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--slate);
  }
  .navlinks a:hover { color: var(--ink); }
  .navlinks .cta {
    background: var(--ink); color: var(--bone); padding: 10px 18px; border-radius: 999px;
  }
  .navlinks .cta:hover { background: var(--teal); color: var(--ink); }
  @media (max-width:760px){ .navlinks a:not(.cta){ display:none; } }

  main { width: 90%; max-width: 1440px; margin: 0 auto; }
  header.nav { padding-left: 5%; padding-right: 5%; }
  @media (max-width: 600px) {
    main { width: 94%; }
    header.nav { padding-left: 3%; padding-right: 3%; }
  }

  /* ===== hero ===== */
  .hero { padding: clamp(64px,10vw,110px) 0 60px; position: relative; }
  .hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 7px 14px; border: 2px solid var(--teal-deep); border-radius: 999px; margin-bottom: 28px;
  }
  .hero-tag .pulse { width:8px; height:8px; border-radius:50%; background: var(--teal); animation: pulse 1.6s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
  @media (prefers-reduced-motion: reduce) { .hero-tag .pulse { animation:none; } }

  h1.hero-h {
    font-size: clamp(2.4rem, 6.8vw, 6.1rem);
    line-height: 0.98;
    margin: 0 0 30px;
  }
  @media (min-width: 560px) {
    h1.hero-h { white-space: nowrap; }
  }
  @media (max-width: 559px) {
    h1.hero-h { white-space: normal; text-wrap: balance; }
  }
  .grad {
    background: linear-gradient(100deg, var(--blue) 15%, var(--teal) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .grad-rev {
    background: linear-gradient(100deg, var(--teal) 15%, var(--blue) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero-sub {
    font-size: clamp(1.1rem, 1.9vw, 1.4rem);
    max-width: 100%;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 36px;
  }
  .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 56px; }
  .btn {
    font-weight: 800; font-size: 14.5px; text-transform: uppercase; letter-spacing: 0.02em;
    padding: 16px 28px; border-radius: 999px; text-decoration: none; display:inline-flex; align-items:center; gap:10px;
    border: 2px solid var(--ink);
  }
  .btn.solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
  .btn.solid:hover { background: var(--teal); color: var(--ink); border-color: var(--teal); }
  .btn.outline { color: var(--ink); border-color: var(--line-strong); }
  .btn.outline:hover { background: var(--teal); color: var(--ink); border-color: var(--teal); }

  .metric-row {
    display: grid; grid-template-columns: repeat(5,1fr); border-top: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep);
  }
  .metric { padding: 22px 20px; }
  .metric:not(:last-child) { border-right: 1px solid var(--line); }
  .metric .n { font-size: clamp(1.5rem,2.6vw,2rem); font-weight: 900; display:block; line-height:1; margin-bottom:8px; }
  .metric .n.grad { background: linear-gradient(100deg, var(--blue), var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .metric .l {
    font-size: 12px; color: var(--slate); font-weight: 600; letter-spacing: 0.005em; line-height: 1.45;
  }
  @media (max-width:900px){
    .metric-row{ grid-template-columns: repeat(3,1fr); }
    .metric:nth-child(3n){ border-right: none; }
    .metric:nth-child(1),.metric:nth-child(2),.metric:nth-child(3){ border-bottom: 1px solid var(--line); padding-bottom:18px; }
    .metric:nth-child(4),.metric:nth-child(5){ padding-top:18px; }
  }
  @media (max-width:560px){
    .metric-row{ grid-template-columns: repeat(2,1fr); }
    .metric:nth-child(odd){ border-right: 1px solid var(--line); }
    .metric:nth-child(3n){ border-right: 1px solid var(--line); }
    .metric:nth-child(even){ border-right: none; }
  }

  /* ===== section label ===== */
  section { padding: clamp(60px,9vw,100px) 0; border-bottom: 1px solid var(--line); }
  .section-kicker {
    display:flex; align-items:center; gap:14px; margin-bottom: 18px;
  }
  .section-kicker .num { font-weight: 900; font-size: 14px; color: var(--teal-deep); }
  .section-kicker .txt { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
  h2.big {
    font-size: clamp(1.2rem, 3.4vw, 3.1rem); line-height: 1.05; margin: 0 0 22px;
    white-space: nowrap;
  }
  @media (max-width: 900px) {
    h2.big { white-space: normal; text-wrap: balance; font-size: clamp(1.6rem, 5vw, 2.6rem); }
  }
  .section-dek {
    font-size: 16.5px; color: var(--slate); max-width: 100%; margin: 0 0 44px;
    font-weight: 400; letter-spacing: -0.005em; line-height: 1.65;
  }

  /* ===== capability cards ===== */
  .capgrid { display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); }
  @media (max-width: 860px){ .capgrid{ grid-template-columns: 1fr; } }
  .cap {
    background: var(--card); padding: 32px clamp(24px,3vw,40px);
    display:flex; flex-direction: column; justify-content: space-between;
    transition: background .15s ease, color .15s ease;
  }
  .cap:hover { background: var(--ink); color: var(--bone); }
  .cap:hover h3 { color: var(--teal); }
  .cap:hover .cap-num { color: var(--teal); }
  .cap:hover p { color: color-mix(in srgb, var(--bone) 72%, transparent); }
  .cap:hover .cap-stat { color: var(--teal); }
  .cap:hover .cap-stat-l { color: color-mix(in srgb, var(--bone) 60%, transparent); }
  .cap-top { display:flex; align-items:baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
  .cap-num, .persona .pk {
    font-weight: 900; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
    display:block;
  }
  .cap-num { color: var(--teal-deep); }
  .persona .pk { color: var(--blue-deep); }
  .cap h3 { font-size: 1.28rem; margin: 0 0 12px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: var(--blue-deep); }
  @media (max-width: 500px){ .cap h3 { white-space: normal; } }
  .cap p {
    font-size: 14.5px; font-weight: 450; letter-spacing: -0.005em;
    color: var(--slate); margin: 0 0 22px; line-height: 1.62;
  }
  .cap-stat-row {
    display:grid; grid-template-columns: repeat(4,1fr); gap: 14px;
    padding-top: 18px; border-top: 1px solid var(--line);
  }
  @media (max-width: 560px){ .cap-stat-row{ grid-template-columns: repeat(2,1fr); } }
  .cap-stat { font-size: 1.22rem; font-weight: 900; display:block; line-height:1; color: var(--blue-deep); }
  .cap-stat-l { font-size: 10.8px; color: var(--slate); font-weight: 600; line-height: 1.3; margin-top: 5px; display:block; }

  /* ===== framework / proof section ===== */
  .ids-name {
    display:flex; flex-direction: column; gap: 4px; margin-bottom: 36px;
  }
  .ids-name .short {
    font-weight: 900; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--teal-deep);
  }
  .ids-name .long { font-size: 15px; color: var(--ink); }

  .evidence-wrap { overflow-x: auto; border: 1px solid var(--line); }
  table.evidence { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  table.evidence th, table.evidence td { text-align:left; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  table.evidence th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); font-weight: 700; }
  table.evidence tr:last-child td { border-bottom: none; }
  table.evidence td.win {
    font-weight: 900; font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, var(--blue) 15%, var(--teal) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .evidence-note { font-size: 13px; color: var(--slate); margin-top: 16px; max-width: 100%; line-height: 1.6; }

  .spec-list { display:flex; flex-direction:column; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
  .spec-item { display:grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
  @media (max-width: 700px){ .spec-item{ grid-template-columns: 1fr; gap:8px; } }
  .spec-item .k { font-weight: 900; font-size: 13.5px; color: var(--teal-deep); }
  .spec-item .v { font-size: 15px; color: var(--ink); line-height: 1.6; }

  /* ===== work / systems ===== */
  .worklist { display:flex; flex-direction: column; }
  .work-item {
    display:grid; grid-template-columns: 90px 1fr; gap: 26px; padding: 30px 0; border-top: 1px solid var(--line);
    align-items: start;
  }
  .work-item:last-child { border-bottom: 1px solid var(--line); }
  @media (max-width:640px){ .work-item{ grid-template-columns: 50px 1fr; gap:16px; } }
  .work-item .wnum { font-weight: 900; font-size: 15px; color: var(--slate); padding-top: 4px; }
  .work-item h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: var(--blue-deep); }
  .work-item p {
    margin: 0; color: var(--slate); font-size: 15px; font-weight: 400; letter-spacing: -0.005em;
    line-height: 1.65; max-width: none;
  }
  /* ===== shared pill system ===== */
  .pill {
    display:inline-flex; align-items:center; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; border-radius: 999px; border: 1px solid transparent;
  }
  .pill.pill-neutral {
    background: var(--paper); border-color: var(--line-strong); color: var(--blue-deep);
  }
  .pill.pill-accent {
    background: color-mix(in srgb, var(--teal) 12%, transparent);
    border-color: color-mix(in srgb, var(--teal-deep) 40%, transparent);
    color: var(--teal-deep);
  }
  .work-item .chip {
    font-size: 11.5px; padding: 4px 10px; margin-bottom: 12px;
  }

  /* ===== how we work — fast steps ===== */
  .steps { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  @media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
  .step { background: var(--card); padding: 28px 22px; }
  .step .sw { font-weight: 900; font-size: 34px; -webkit-text-stroke: 0; line-height:1; margin-bottom: 16px;
    background: linear-gradient(100deg, var(--blue), var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .step h4 { font-size: 1.02rem; margin: 0 0 8px; font-weight: 800; color: var(--blue-deep); }
  .step p { font-size: 13.8px; color: var(--slate); margin: 0; line-height: 1.55; }

  /* ===== sectors ===== */
  .tagcloud { display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 8px; }
  .tagcloud .pill { font-size: 13px; padding: 10px 16px; }
  .tag-group-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--slate); margin: 28px 0 14px;
  }

  /* ===== who we build for ===== */
  .persona-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 40px; }
  @media (max-width: 760px){ .persona-grid{ grid-template-columns: 1fr; } }
  .persona {
    background: var(--card); padding: 26px 24px;
    transition: background .15s ease, color .15s ease;
  }
  .persona:hover { background: var(--ink); color: var(--bone); }
  .persona:hover .pk { color: var(--teal); }
  .persona:hover h4 { color: var(--teal); }
  .persona:hover p { color: color-mix(in srgb, var(--bone) 72%, transparent); }
  .persona .pk { margin-bottom: 10px; }
  .persona h4 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: var(--blue-deep); }
  .persona p {
    margin: 0; font-size: 13.8px; font-weight: 450; letter-spacing: -0.005em;
    color: var(--slate); line-height: 1.6;
  }

  .platform-row { display:grid; grid-template-columns: repeat(4, max-content); gap: 10px; justify-content: start; }
  .platform-row .pill { font-size: 12.5px; padding: 9px 14px; justify-content: center; }
  @media (max-width: 760px) { .platform-row { grid-template-columns: repeat(2, max-content); } }
  @media (max-width: 420px) { .platform-row { grid-template-columns: 1fr; } }

  /* ===== contact chooser ===== */
  .choose-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 44px; }
  @media (max-width: 900px){ .choose-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .choose-grid{ grid-template-columns: 1fr; } }
  .choose {
    background: var(--card); padding: 26px 22px; text-decoration:none; color: var(--ink);
    display:flex; flex-direction: column; gap: 10px; transition: background .15s ease, color .15s ease;
  }
  .choose:hover { background: linear-gradient(135deg, var(--blue), var(--teal)); color:#fff; }
  .choose:hover h4 { color: #fff; }
  .choose .ic { font-size: 22px; }
  .choose h4 { margin:0; font-size: 1rem; font-weight: 800; color: var(--blue-deep); }
  .choose p { margin:0; font-size: 13px; color: var(--slate); line-height:1.5; }
  .choose:hover p { color: rgba(255,255,255,0.85); }

  /* ===== footer / cta ===== */
  footer { padding: clamp(60px,9vw,100px) 0 48px; border-bottom: none; }
  .cta-block { text-align: left; margin-bottom: 20px; }
  .cta-block h2 { font-size: clamp(2.2rem,6vw,4.6rem); line-height: 0.94; margin: 0 0 22px; max-width: 18ch; text-wrap: balance; }
  .cta-block p { font-size: 17px; color: var(--slate); max-width: 100%; margin: 0 0 8px; font-weight: 500; }
  .foot-meta {
    display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 14px;
    padding-top: 28px; border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--slate); font-weight: 600;
  }
  .foot-meta a { text-decoration: none; }
  .foot-meta a:hover { color: var(--ink); }

  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes rise { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
  }