:root,
  [data-theme="dark"] {
    /* surfaces */
    --bg-page: #F1F2ED;
    --bg-raised: #FFFFFF;
    --bg-deep: #0E1626;
    --bg-deep-mid: #1B2A4A;
    --bg-deep-card: #16223E;
    --header-bg: rgba(241,242,237,0.86);

    /* text */
    --text-primary: #12192B;
    --text-secondary: #5C6577;
    --text-on-deep: #F6F3EA;
    --text-on-deep-soft: #B7BECF;
    --text-on-deep-faint: #8189A0;
    --text-on-deep-faint2: #6C7690;

    /* lines / borders */
    --line: #D9DCE2;
    --line-on-deep: #232E4C;
    --line-on-deep-soft: #2E3B60;
    --border-card-deep: #263457;

    /* accent + brand */
    --accent: #C68A2E;
    --accent-soft: #E4C48B;
    --brand: #1B2A4A;

    /* status */
    --status-green: #6FCF8F;
    --error: #E39B7A;

    /* triangle diagram cells */
    --tri-cell-fill: #1D2A47;
    --tri-cell-stroke: #2A3A61;
  }

  [data-theme="light"] {
    /* surfaces */
    --bg-page: #FFFFFF;
    --bg-raised: #F7F7F5;
    --bg-deep: #EDF0F5;
    --bg-deep-mid: #E3E8F1;
    --bg-deep-card: #FFFFFF;
    --header-bg: rgba(255,255,255,0.86);

    /* text */
    --text-primary: #12192B;
    --text-secondary: #5C6577;
    --text-on-deep: #12192B;
    --text-on-deep-soft: #4B5468;
    --text-on-deep-faint: #6B7280;
    --text-on-deep-faint2: #7C8494;

    /* lines / borders */
    --line: #E2E4E8;
    --line-on-deep: #D7DBE3;
    --line-on-deep-soft: #CDD2DD;
    --border-card-deep: #DCE0E8;

    /* accent + brand */
    --accent: #B9791F;
    --accent-soft: #8F5E14;
    --brand: #1B2A4A;

    /* status */
    --status-green: #2E9E5B;
    --error: #C24E2A;

    /* triangle diagram cells */
    --tri-cell-fill: #E7EAF1;
    --tri-cell-stroke: #C7CEDC;
  }

  :root {
    --font-display: 'IBM Plex Serif', 'IBM Plex Sans', serif;
    --font-body: 'Inter', 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', 'IBM Plex Sans', monospace;

    --max: 1180px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-page);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s ease, color .2s ease;
  }
  img, svg { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.08; letter-spacing: -0.01em; }
  p { margin: 0; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
  section { padding: 88px 0; }
  @media (max-width: 720px) { section { padding: 56px 0; } .wrap { padding: 0 22px; } }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }
  .eyebrow::before {
    content: '';
    width: 22px; height: 1px;
    background: var(--accent);
    display: inline-block;
  }

  /* -------- Nav -------- */
  header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  nav.wrap {
    display: flex; align-items: center; justify-content: space-between;
    height: 76px;
  }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); }
  .brand-mark { width: 32px; height: 32px; color: var(--text-primary); flex-shrink: 0; }
  .brand-word {
    font-family: var(--font-mono);
    font-size: 14.5px;
    letter-spacing: 0.09em;
    color: var(--text-primary);
    white-space: nowrap;
  }
  @media (max-width: 560px) { .brand-word { display: none; } }
  .navlinks { display: flex; gap: 34px; font-size: 14.5px; font-weight: 500; }
  .navlinks a { text-decoration: none; color: var(--text-secondary); transition: color .15s; }
  .navlinks a:hover { color: var(--brand); }
  .nav-cta {
    font-family: var(--font-mono); font-size: 13px;
    border: 1px solid var(--text-primary); padding: 9px 16px;
    text-decoration: none; color: var(--text-primary);
    transition: all .15s;
  }
  .nav-cta:hover { background: var(--text-primary); color: var(--bg-page); }
  .navlinks-wrap { display: flex; align-items: center; gap: 24px; }
  @media (max-width: 780px) { .navlinks { display: none; } }

  .lang-switch {
    height: 36px;
    border: 1px solid var(--line);
    background: none;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 0 8px;
    cursor: pointer;
  }
  .lang-switch:hover { border-color: var(--text-primary); }

  .theme-toggle {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    background: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .theme-toggle:hover { border-color: var(--text-primary); }
  .theme-toggle svg { width: 17px; height: 17px; }
  .theme-toggle .icon-moon { display: block; }
  .theme-toggle .icon-sun { display: none; }
  [data-theme="light"] .theme-toggle .icon-moon { display: none; }
  [data-theme="light"] .theme-toggle .icon-sun { display: block; }

  /* -------- Hero -------- */
  .hero {
    background: var(--bg-deep);
    color: var(--text-on-deep);
    padding: 96px 0 88px 0;
    overflow: hidden;
    position: relative;
  }
  .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
  @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
  .hero h1 {
    font-size: clamp(38px, 5vw, 62px);
    color: var(--text-on-deep);
  }
  .hero h1 em { color: var(--accent-soft); font-style: normal; }
  .hero .sub {
    margin-top: 26px;
    font-size: 18px;
    color: var(--text-on-deep-soft);
    max-width: 480px;
  }
  .hero .cta-row { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }
  .btn {
    font-family: var(--font-mono); font-size: 13.5px;
    padding: 13px 22px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all .15s;
  }
  .btn-primary { background: var(--accent); color: var(--text-primary); }
  .btn-primary:hover { background: var(--accent-soft); color: var(--text-on-deep); }
  .btn-ghost { border: 1px solid var(--line-on-deep-soft); color: var(--text-on-deep-soft); }
  .btn-ghost:hover { border-color: var(--text-on-deep-soft); color: var(--text-on-deep); }

  .hero-visual { position: relative; padding: 40px 0 8px 0; }
  .tri-caption { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-on-deep-faint2); margin-top: 14px; letter-spacing: 0.04em; }

  /* triangle grid cells animation */
  .tri-cell { fill: var(--tri-cell-fill); stroke: var(--tri-cell-stroke); stroke-width: 1; }
  .tri-cell.on { fill: var(--accent); opacity: 0.85; }
  .tri-cell.fade { opacity: 0; animation: cellIn .5s ease forwards; }
  @keyframes cellIn { to { opacity: 1; } }

  /* -------- Expertise -------- */
  .expertise { background: var(--bg-page); }
  .expertise .grid2 {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 40px;
    align-items: stretch;
  }
  @media (max-width: 900px) { .expertise .grid2 { grid-template-columns: 1fr; grid-template-rows: auto; gap: 24px; } }
  .expertise-title { grid-column: 1; grid-row: 1; }
  .expertise-body { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; }
  @media (max-width: 900px) { .expertise-title, .expertise-body { grid-column: 1; grid-row: auto; } }
  .expertise h2 { font-size: clamp(28px, 3.4vw, 40px); }
  .expertise .lead { font-size: 17px; color: var(--text-secondary); max-width: 460px; margin-bottom: 44px; }

  .method-list {
    grid-column: 2; grid-row: 2;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  @media (max-width: 900px) { .method-list { grid-column: 1; grid-row: auto; } }
  .method-item {
    display: grid; grid-template-columns: 90px 1fr;
    gap: 24px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
  }
  .method-item:last-child { border-bottom: 1px solid var(--line); }
  .method-item .tag { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.04em; padding-top: 3px; }
  .method-item h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
  .method-item p { color: var(--text-secondary); font-size: 15px; }

  .research-stack { display: flex; flex-direction: column; gap: 22px; flex: 1; }
  .research-card {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    padding: 34px;
    flex: 1;
  }
  .research-card h3 { font-size: 17px; margin-bottom: 12px; }
  .research-card p { color: var(--text-secondary); font-size: 15px; }

  /* -------- Products -------- */
  .products { background: var(--bg-deep-mid); color: var(--text-on-deep); }
  .products .head { max-width: 560px; margin-bottom: 56px; }
  .products h2 { color: var(--text-on-deep); font-size: clamp(28px, 3.4vw, 40px); }
  .products .sub { margin-top: 18px; color: var(--text-on-deep-soft); font-size: 17px; }
  .product-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 860px) { .product-cards { grid-template-columns: 1fr; } }
  .p-card {
    background: var(--bg-deep-card);
    border: 1px solid var(--border-card-deep);
    padding: 40px;
  }
  .p-card .p-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-deep-faint); margin-bottom: 14px; }
  .p-card.live .p-eyebrow { color: var(--accent); }
  .p-card h3 { font-family: var(--font-display); font-size: 26px; color: var(--text-on-deep); margin-bottom: 16px; }
  .p-card p.desc { color: var(--text-on-deep-soft); font-size: 15.5px; margin-bottom: 26px; }
  .feat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
  .feat-chip { font-family: var(--font-mono); font-size: 11.5px; border: 1px solid var(--line-on-deep-soft); padding: 6px 11px; color: var(--text-on-deep-faint); }
  .p-card .link-out { font-family: var(--font-mono); font-size: 13.5px; color: var(--accent-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
  .p-card.soon { display: flex; flex-direction: column; justify-content: space-between; }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 8px; }
  .status-dot.live { background: var(--status-green); }
  .status-dot.dev { background: var(--accent); }

  /* -------- Development -------- */
  .development { background: var(--bg-page); border-top: 1px solid var(--line); }
  .development .head { max-width: 600px; }
  .development h2 { font-size: clamp(28px, 3.4vw, 40px); }
  .development .sub { margin-top: 18px; color: var(--text-secondary); font-size: 17px; }

  .dev-cards { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  @media (max-width: 860px) { .dev-cards { grid-template-columns: 1fr; } }
  .dev-card { background: var(--bg-raised); padding: 32px; min-height: 190px; }
  .dev-tag {
    display: inline-block;
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 5px 10px; margin-bottom: 18px;
    border: 1px solid var(--line); color: var(--text-secondary);
  }
  .dev-tag.current { color: var(--brand); border-color: var(--brand); }
  .dev-tag.latest { color: var(--status-green); border-color: var(--status-green); }
  .dev-tag.next { color: var(--accent); border-color: var(--accent); }
  .dev-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; min-height: 44px; }
  .dev-card p { color: var(--text-secondary); font-size: 14.5px; }

  .dev-log-link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 34px;
    font-family: var(--font-mono); font-size: 13.5px;
    color: var(--brand); text-decoration: none;
    border-bottom: 1px solid var(--brand);
    padding-bottom: 2px;
  }
  .dev-log-link:hover { color: var(--accent); border-color: var(--accent); }
  .dev-lang-note { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }

  /* -------- Custom solutions -------- */
  .custom { background: var(--bg-page); }
  .custom .head { max-width: 620px; }
  .custom h2 { font-size: clamp(28px, 3.4vw, 40px); }
  .custom .sub { margin-top: 18px; color: var(--text-secondary); font-size: 17px; }

  .custom-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  @media (max-width: 860px) { .custom-grid { grid-template-columns: 1fr; } }
  .c-card { background: var(--bg-raised); padding: 34px; }
  .c-card .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 18px; }
  .c-card h3 { font-size: 18px; margin-bottom: 10px; font-weight: 600; }
  .c-card p { color: var(--text-secondary); font-size: 14.5px; }

  .engagements { margin-top: 60px; border-top: 1px solid var(--line); padding-top: 40px; }
  .engagements .e-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 22px; }
  .e-row { display: flex; flex-wrap: wrap; gap: 14px 40px; }
  .e-item { font-size: 15px; color: var(--text-primary); display: flex; align-items: baseline; gap: 10px; }
  .e-item .loc { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
  @media (max-width: 720px) {
    .e-item { flex-direction: column; align-items: flex-start; gap: 4px; }
  }

  /* -------- About -------- */
  .about { background: var(--bg-page); border-top: 1px solid var(--line); }
  .about-top { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  @media (max-width: 860px) { .about-top { grid-template-columns: 1fr; gap: 36px; } }
  .about h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 16px; }
  .about p { color: var(--text-secondary); font-size: 15.5px; }

  .clients-strip { margin-top: 70px; padding-top: 36px; border-top: 1px solid var(--line); }
  .clients-strip .e-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
  .flag-row { display: flex; gap: 30px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 14px; color: var(--brand); }

  .team { margin-top: 80px; padding-top: 36px; border-top: 1px solid var(--line); }
  .team .e-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 26px; }
  .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
  @media (max-width: 860px) { .team-grid { grid-template-columns: 1fr; } }
  .member { text-align: center; }
  .member .photo {
    width: 112px; height: 112px; border-radius: 50%;
    background: var(--brand); color: #FFFFFF;
    margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 30px;
    overflow: hidden;
    position: relative;
  }
  .member .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .member h4 { font-size: 16px; font-weight: 600; margin-bottom: 3px; }
  .member .role { font-size: 13.5px; color: var(--accent); font-family: var(--font-mono); margin-bottom: 8px; }
  .member .desc { font-size: 14px; color: var(--text-secondary); text-align: left; }

  /* -------- Contact -------- */
  .contact { background: var(--bg-deep); color: var(--text-on-deep); }
  .contact .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  @media (max-width: 860px) { .contact .grid2 { grid-template-columns: 1fr; gap: 40px; } }
  .contact h2 { color: var(--text-on-deep); font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 20px; }
  .contact .sub { color: var(--text-on-deep-soft); font-size: 16.5px; max-width: 420px; }
  .contact-list { margin-top: 40px; }
  .c-row { display: flex; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line-on-deep); }
  .c-row:last-child { border-bottom: 1px solid var(--line-on-deep); }
  .c-row .label { font-family: var(--font-mono); font-size: 12px; color: var(--text-on-deep-faint2); width: 90px; flex-shrink: 0; padding-top: 3px; text-transform: uppercase; letter-spacing: 0.05em;}
  .c-row a { text-decoration: none; color: var(--text-on-deep); font-size: 16px; }
  .c-row a:hover { color: var(--accent-soft); }

  .contact-form { display: flex; flex-direction: column; gap: 18px; }
  .cf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .cf-row { display: flex; flex-direction: column; gap: 8px; }
  .cf-row label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-on-deep-faint); }
  .cf-row input, .cf-row textarea {
    background: var(--bg-deep-card);
    border: 1px solid var(--line-on-deep-soft);
    color: var(--text-on-deep);
    font-family: var(--font-body);
    font-size: 15px;
    padding: 12px 14px;
    resize: vertical;
  }
  .cf-row input:focus, .cf-row textarea:focus { outline: none; border-color: var(--accent); }
  .contact-form .btn { align-self: flex-start; border: none; cursor: pointer; }
  .contact-form .btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .cf-status { font-family: var(--font-mono); font-size: 13px; color: var(--text-on-deep-soft); min-height: 18px; }
  .cf-status.error { color: var(--error); }
  .cf-consent { font-size: 12.5px; color: var(--text-on-deep-faint); margin-top: -4px; }
  .cf-consent a { color: var(--text-on-deep-soft); text-decoration: underline; }
  .cf-consent a:hover { color: var(--accent-soft); }

  .map-frame {
    margin-top: 64px;
    border: 1px solid var(--line-on-deep);
    height: 360px;
    overflow: hidden;
  }
  .map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.15) contrast(1.05); }

  footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--line-on-deep);
    color: var(--text-on-deep-faint2);
    padding: 34px 0;
  }
  footer .wrap { display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 14px; }
  footer a { color: var(--text-on-deep-soft); text-decoration: none; }
  footer a:hover { color: var(--accent-soft); }
  .foot-links { display: flex; gap: 26px; }

  /* -------- Product carousel -------- */
  .carousel { position: relative; margin: 22px 0 26px 0; border: 1px solid var(--border-card-deep); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-deep-card); }
  .carousel-track { position: relative; width: 100%; height: 100%; }
  .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
  .carousel-slide.active { opacity: 1; }
  .carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
  .carousel-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
  .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; padding: 0; cursor: pointer; }
  .carousel-dot.active { background: var(--accent); }

  @media (prefers-reduced-motion: reduce) {
    .tri-cell.fade { animation: none; opacity: 1; }
  }

  /* -------- Coming-soon badge (distinct from feature chips) -------- */
  .coming-soon-badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--accent);
    color: var(--text-primary);
    padding: 7px 13px;
    border: 1px solid var(--accent);
  }