/* ===== self-hosted fonts ===== */
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/hanken-400.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/hanken-600.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/hanken-700.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/jbmono-400.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/jbmono-600.woff2") format("woff2"); }

  /* ---------- I1 Software — hero direction: "core sample" ----------
     Deliberately single-theme (dark). The identity IS sodium-amber on
     blue-graphite ink — an instrument panel, not a document. */

  :root{
    color-scheme: dark;

    --ink:      #0E1116;   /* blue-graphite ground */
    --ink-2:    #10141A;   /* faint elevation */
    --panel:    #141A22;   /* core-sample panel */
    --panel-2:  #171E27;   /* row hover */
    --line:     #232C38;   /* hairlines */
    --line-2:   #2C3745;   /* brighter hairline */

    --text:     #E8ECF3;   /* soft cool white */
    --muted:    #8A94A3;   /* cool grey, biased to ink */
    --faint:    #5C6572;   /* captions */

    --amber:    #F5A623;   /* sodium amber — the accent */
    --amber-hi: #FFC061;   /* highlight */
    --amber-dk: #C77F13;

    --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --maxw: 1200px;
  }

  *{ box-sizing: border-box; }

  html { background: var(--ink); }

  .i1{
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.5;
    /* faint graph-paper texture + sodium glow, both very restrained */
    background-image:
      radial-gradient(120% 80% at 78% -10%, rgba(245,166,35,.10), transparent 55%),
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 100% 100%, 44px 44px, 44px 44px;
  }

  .i1 .wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

  /* ---------------- nav ---------------- */
  .i1 .nav{
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding-block: 22px;
    border-bottom: 1px solid var(--line);
  }
  .i1 .brand{ display: flex; align-items: center; gap: 12px; }
  .i1 .stamp{
    font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .04em;
    color: var(--amber);
    border: 1px solid var(--amber); border-radius: 3px;
    padding: 4px 8px 3px; line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(245,166,35,.12);
  }
  .i1 .brand b{ font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: .26em; color: var(--text); }
  .i1 .navlinks{ display: flex; align-items: center; gap: 30px; }
  .i1 .navlinks a{
    font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); text-decoration: none; transition: color .18s ease;
  }
  .i1 .navlinks a:hover{ color: var(--text); }
  .i1 .status{
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px;
  }
  .i1 .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
    box-shadow: 0 0 0 0 rgba(245,166,35,.55); animation: pulse 2.6s ease-out infinite; }

  /* ---------------- hero grid ---------------- */
  .i1 .hero{
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
    align-items: center; padding-block: clamp(52px, 8vw, 104px);
  }

  .i1 .eyebrow{
    font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--amber); margin: 0 0 26px;
    display: flex; align-items: center; gap: 12px;
  }
  .i1 .eyebrow::before{ content:""; width: 26px; height: 1px; background: var(--amber); opacity: .8; }

  .i1 h1{
    font-family: var(--sans);
    font-weight: 680; font-size: clamp(40px, 6.4vw, 76px); line-height: .98;
    letter-spacing: -0.028em; text-wrap: balance;
    margin: 0 0 24px;
  }
  .i1 h1 .amber{ color: var(--amber); }
  .i1 h1 .b{ display: block; }

  .i1 .sub{
    font-size: clamp(16px, 1.5vw, 18.5px); color: var(--muted);
    max-width: 46ch; margin: 0 0 34px;
  }
  .i1 .sub b{ color: var(--text); font-weight: 600; }

  .i1 .cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
  .i1 .btn{
    font-family: var(--sans); font-size: 15px; font-weight: 600;
    padding: 13px 22px; border-radius: 6px; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .i1 .btn-primary{ background: var(--amber); color: #17130A; box-shadow: 0 8px 30px -12px rgba(245,166,35,.7); }
  .i1 .btn-primary:hover{ background: var(--amber-hi); transform: translateY(-1px); }
  .i1 .btn-ghost{ color: var(--text); border-color: var(--line-2); }
  .i1 .btn-ghost:hover{ border-color: var(--amber); color: var(--amber); }
  .i1 .btn .arw{ transition: transform .16s ease; }
  .i1 .btn:hover .arw{ transform: translateX(3px); }

  .i1 .proof{
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--faint); padding-top: 22px; border-top: 1px solid var(--line);
  }
  .i1 .proof span{ display: inline-flex; align-items: center; gap: 9px; }
  .i1 .proof span::before{ content:"\25C7"; color: var(--amber); font-size: 10px; }
  .i1 .proof.tn{ border-top: 0; padding-top: 0; margin: 0 0 24px; }

  /* ---------------- core sample (signature) ---------------- */
  .i1 .core{
    border: 1px solid var(--line); border-radius: 4px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.015), transparent 30%),
      var(--panel);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
    overflow: hidden;
  }
  .i1 .core-head{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 16px; border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); background: rgba(0,0,0,.16);
  }
  .i1 .core-head .l{ color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
  .i1 .core-head .l::before{ content:""; width: 8px; height: 8px; border: 1px solid var(--amber); transform: rotate(45deg); }

  .i1 .strata{ position: relative; }
  /* the drill wire runs down the index gutter */
  .i1 .strata::before{
    content:""; position: absolute; top: 0; bottom: 0; left: 44px; width: 2px;
    background: linear-gradient(180deg, var(--amber), var(--amber-dk));
    transform: scaleY(0); transform-origin: top; opacity: .55;
    animation: draw 1s cubic-bezier(.5,0,.1,1) .15s forwards;
  }

  .i1 .row{
    position: relative; display: grid; grid-template-columns: 64px 1fr auto; align-items: center;
    gap: 16px; padding: 18px 16px; border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(8px);
    animation: rise .6s ease forwards;
    transition: background .18s ease;
  }
  .i1 .row:last-child{ border-bottom: 0; }
  .i1 .row:hover{ background: var(--panel-2); }

  .i1 .node{
    justify-self: start; position: relative; z-index: 2;
    width: 30px; height: 30px; border-radius: 4px;
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted);
    background: var(--ink); border: 1px solid var(--line-2);
    margin-left: 13px; /* centers node on the wire at left:44px */
    transition: all .18s ease;
  }
  .i1 .row:hover .node{ border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 4px rgba(245,166,35,.1); }

  .i1 .label{ font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .12em;
    color: var(--text); margin: 0 0 3px; }
  .i1 .desc{ font-size: 13.5px; color: var(--muted); margin: 0; max-width: 44ch; }

  .i1 .tag{
    justify-self: end; white-space: nowrap;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--faint);
    border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  }

  .i1 .core-foot{
    padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(0,0,0,.16);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--faint); display: flex; align-items: center; gap: 10px;
  }
  .i1 .core-foot b{ color: var(--amber); font-weight: 600; }

  /* ---------------- motion keyframes ---------------- */
  @keyframes draw{ to{ transform: scaleY(1); } }
  @keyframes rise{ to{ opacity: 1; transform: translateY(0); } }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(245,166,35,.5); }
    70%{ box-shadow: 0 0 0 7px rgba(245,166,35,0); }
    100%{ box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  }
  .i1 .row:nth-child(1){ animation-delay: .30s; }
  .i1 .row:nth-child(2){ animation-delay: .42s; }
  .i1 .row:nth-child(3){ animation-delay: .54s; }
  .i1 .row:nth-child(4){ animation-delay: .66s; }
  .i1 .row:nth-child(5){ animation-delay: .78s; }

  /* ---------------- responsive ---------------- */
  @media (max-width: 900px){
    .i1 .hero{ grid-template-columns: 1fr; gap: 44px; padding-block: 44px; }
    .i1 .navlinks{ display: none; }
  }
  @media (max-width: 540px){
    .i1 .row{ grid-template-columns: 52px 1fr; }
    .i1 .tag{ display: none; }
    .i1 .strata::before{ left: 39px; }
    .i1 .node{ margin-left: 11px; }
    .i1 .proof{ font-size: 10.5px; }
  }

  .i1 a:focus-visible, .i1 .btn:focus-visible{ outline: 2px solid var(--amber-hi); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce){
    .i1 .strata::before{ animation: none; transform: scaleY(1); }
    .i1 .row{ animation: none; opacity: 1; transform: none; }
    .i1 .dot{ animation: none; }
    .i1 .pin{ animation: none; }
    .i1 .navmap .voice .mic{ animation: none; }
  }

  /* ================= two systems ================= */
  .i1 .systems{ border-top: 1px solid var(--line); padding-block: clamp(48px, 8vw, 104px); }

  .i1 .sec-head{ max-width: 64ch; margin: 0 0 clamp(28px, 4vw, 44px); }
  .i1 .sec-head h2{
    font-family: var(--sans); font-weight: 660; font-size: clamp(28px, 3.7vw, 46px);
    letter-spacing: -.022em; line-height: 1.04; margin: 16px 0 16px; text-wrap: balance;
  }
  .i1 .sec-head p{ font-size: clamp(15px, 1.45vw, 18px); color: var(--muted); margin: 0; max-width: 56ch; }
  .i1 .sec-head b{ color: var(--text); font-weight: 600; }

  .i1 .sys{
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.5vw, 68px);
    align-items: center; padding-block: clamp(34px, 5vw, 60px);
    border-top: 1px solid var(--line);
  }
  .i1 .sys.first{ border-top: 0; }
  .i1 .sys .media{ order: 2; }
  .i1 .sys.flip .copy{ order: 2; }
  .i1 .sys.flip .media{ order: 1; }

  .i1 .idx{
    font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--amber); display: flex; align-items: center; gap: 11px; margin: 0 0 18px;
  }
  .i1 .idx::before{ content: ""; width: 22px; height: 1px; background: var(--amber); opacity: .8; }
  .i1 .sys h3{
    font-family: var(--sans); font-weight: 660; font-size: clamp(24px, 2.9vw, 35px);
    letter-spacing: -.02em; line-height: 1.05; margin: 0 0 12px;
  }
  .i1 .lede{ font-size: 15.5px; color: var(--muted); margin: 0 0 24px; max-width: 44ch; }
  .i1 .lede b{ color: var(--text); font-weight: 600; }

  /* integration ladder */
  .i1 .ladder{
    border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
    background: var(--panel); margin: 0 0 26px;
  }
  .i1 .rung{ display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: center;
    padding: 13px 15px; border-top: 1px solid var(--line); transition: background .18s ease; }
  .i1 .rung:first-child{ border-top: 0; }
  .i1 .rung:hover{ background: var(--panel-2); }
  .i1 .rung .lyr{ font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--faint); display: flex; align-items: center; gap: 8px; }
  .i1 .rung .lyr::before{ content: ""; width: 7px; height: 7px; border: 1px solid var(--amber);
    transform: rotate(45deg); flex: none; }
  .i1 .rung .val{ font-size: 13.5px; color: var(--muted); }
  .i1 .rung .val b{ font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--text); }

  .i1 .acts{ display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .i1 .actgroup{ display: flex; flex-direction: column; gap: 8px; }
  .i1 .actgroup + .actgroup{ border-top: 1px solid var(--line); padding-top: 14px; }
  .i1 .actlbl{ font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--faint); }
  .i1 .actlinks{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
  .i1 .link{ font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--amber);
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .16s ease, color .16s ease; }
  .i1 .link:hover{ border-color: var(--amber); }
  .i1 .link.muted{ color: var(--muted); }
  .i1 .link.muted:hover{ color: var(--text); border-color: var(--line-2); }
  .i1 .note{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }

  /* browser window frame */
  .i1 .frame{ position: relative; }
  .i1 .win{ border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; background: var(--panel);
    box-shadow: 0 44px 90px -44px rgba(0,0,0,.9); }
  .i1 .win-bar{ display: flex; align-items: center; gap: 12px; padding: 9px 12px;
    background: #0B0F15; border-bottom: 1px solid var(--line); }
  .i1 .win-dots{ display: flex; gap: 6px; flex: none; }
  .i1 .win-dots i{ width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: block; }
  .i1 .win-url{ flex: 1; min-width: 0; font-family: var(--mono); font-size: 11px; color: var(--muted);
    background: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 5px 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .i1 .win img{ display: block; width: 100%; height: auto; }

  .i1 .inset{ position: absolute; right: -16px; bottom: -24px; width: 43%;
    border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--panel);
    box-shadow: 0 26px 54px -22px rgba(0,0,0,.95); }
  .i1 .inset .win-bar{ padding: 6px 9px; }
  .i1 .inset .win-url{ font-size: 9px; padding: 3px 8px; }
  .i1 .inset img{ display: block; width: 100%; height: auto; }

  /* on-device nav preview (Truck Navigation) — real app screenshots in device frames */
  .i1 .phones{ position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 6px 0 10px; }
  .i1 .phone{ position: relative; border: 1px solid var(--line-2); border-radius: 34px;
    background: #05070B; padding: 7px; box-shadow: 0 44px 90px -40px rgba(0,0,0,.95); }
  .i1 .phone img{ display: block; width: 100%; border-radius: 27px; }
  .i1 .phone.main{ width: min(250px, 58%); z-index: 2; }
  .i1 .phone.inset{ position: absolute; width: min(180px, 43%); right: 1%; bottom: 4px;
    z-index: 1; transform: rotate(3.5deg); transform-origin: bottom right; }
  .i1 .phones .chip{ position: absolute; top: 8px; left: 4px; z-index: 3;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--amber); border: 1px solid rgba(245,166,35,.4); border-radius: 999px;
    padding: 5px 11px; background: rgba(11,15,21,.72); }
  .i1 .phones .tag{ position: absolute; bottom: 4px; left: 4px; z-index: 3;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
    background: rgba(11,15,21,.72); }
  .i1 .pin{ transform-origin: center; animation: ping 2.4s ease-out infinite; }

  .i1 .more{
    margin-top: clamp(30px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  }
  .i1 .more .k{ color: var(--muted); }
  .i1 .more .v{ color: var(--text); }

  @keyframes ping{ 0%{ opacity: .5; } 50%{ opacity: 1; } 100%{ opacity: .5; } }

  @media (max-width: 900px){
    .i1 .sys{ grid-template-columns: 1fr; gap: 30px; }
    .i1 .sys .media, .i1 .sys.flip .media, .i1 .sys.flip .copy{ order: 0; }
    .i1 .inset{ width: 46%; right: -8px; bottom: -16px; }
  }

  /* ================= footer ================= */
  .i1 .foot{ margin-top: clamp(44px, 7vw, 96px); padding: 34px 0 46px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 16px; }
  .i1 .foot-row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
  .i1 .foot-brand{ display: flex; align-items: center; gap: 12px; }
  .i1 .foot-tag{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
  .i1 .foot-meta{ width: 100%; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--faint); }
  .i1 .foot-meta .link{ color: var(--amber); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
  .i1 .foot-meta .link:hover{ border-color: var(--amber); }
  /* ================= also built (supporting products) ================= */
  .i1 .also{ border-top: 1px solid var(--line); padding-block: clamp(48px, 8vw, 100px); }
  .i1 .pgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 32px); }
  .i1 .pcard{ display: flex; flex-direction: column; gap: 15px; padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--line); border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 26%), var(--panel);
    transition: border-color .18s ease, transform .18s ease; }
  .i1 .pcard:hover{ border-color: var(--line-2); transform: translateY(-2px); }
  .i1 .ptag{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--amber); display: inline-flex; align-items: center; gap: 10px; margin: 0; }
  .i1 .ptag::before{ content: ""; width: 18px; height: 1px; background: var(--amber); opacity: .8; }
  .i1 .pcard h3{ font-family: var(--sans); font-weight: 660; font-size: clamp(21px, 2.2vw, 27px);
    letter-spacing: -.02em; margin: 0; }
  .i1 .plede{ font-size: 14.5px; color: var(--muted); margin: 0; }
  .i1 .plede b{ color: var(--text); font-weight: 600; }
  .i1 .console{ border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: #0B0F15; }
  .i1 .console .cbar{ display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
  .i1 .console .cbar i{ width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
  .i1 .console .cbody{ padding: 12px 13px; font-family: var(--mono); font-size: 12px; line-height: 1.7; }
  .i1 .console .cin{ color: var(--text); }
  .i1 .console .cin::before{ content: "> "; color: var(--amber); }
  .i1 .console .cout{ color: var(--muted); }
  .i1 .console .cok{ color: var(--amber); font-weight: 700; }
  .i1 .chips{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }
  .i1 .chips span{ font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
  @media (max-width: 760px){ .i1 .pgrid{ grid-template-columns: 1fr; } }
  /* ================= approach (services) ================= */
  .i1 .approach{ border-top: 1px solid var(--line); padding-block: clamp(48px, 8vw, 100px); }
  .i1 .agrid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3vw, 40px) clamp(30px, 4vw, 60px); }
  .i1 .acard{ display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-2); }
  .i1 .akick{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--amber); margin: 0; display: inline-flex; align-items: center; gap: 10px; }
  .i1 .akick::before{ content: ""; width: 16px; height: 1px; background: var(--amber); opacity: .8; }
  .i1 .acard h3{ font-family: var(--sans); font-weight: 660; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.015em; margin: 0; }
  .i1 .acard .adesc{ font-size: 14.5px; color: var(--muted); margin: 0; }
  .i1 .acard .adesc b{ color: var(--text); font-weight: 600; }
  .i1 .pfoot{ margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
  @media (max-width: 760px){ .i1 .agrid{ grid-template-columns: 1fr; } }
  /* ---- hardened (AI safety capstone) ---- */
  .i1 .hardened{ margin-top: clamp(30px, 4vw, 48px); display: grid; grid-template-columns: 1fr auto;
    gap: clamp(22px, 3vw, 48px); align-items: center; padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--line-2); border-radius: 6px;
    background: linear-gradient(180deg, rgba(245,166,35,.05), transparent 42%), var(--panel); }
  .i1 .hardened h3{ font-family: var(--sans); font-weight: 660; font-size: clamp(19px, 2vw, 25px);
    letter-spacing: -.015em; margin: 8px 0 10px; }
  .i1 .hardened .adesc{ font-size: 14.5px; color: var(--muted); margin: 0; max-width: 56ch; }
  .i1 .hlist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .i1 .hlist li{ font-family: var(--mono); font-size: 12.5px; color: var(--text); white-space: nowrap;
    display: flex; align-items: center; gap: 10px; }
  .i1 .hlist .cok{ color: var(--amber); font-weight: 700; }
  @media (max-width: 760px){ .i1 .hardened{ grid-template-columns: 1fr; } }
  /* ================= nav: mobile menu ================= */
  .i1 .nav{ position: relative; flex-wrap: wrap; }
  .i1 .brand{ text-decoration: none; color: inherit; }
  .i1 .navtoggle{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .i1 .navburger{ display: none; }
  .i1 .navmenu{ display: flex; align-items: center; gap: 30px; }
  @media (max-width: 900px){
    .i1 .navburger{ display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 42px; height: 36px; padding: 8px 9px; cursor: pointer;
      border: 1px solid var(--line-2); border-radius: 6px; }
    .i1 .navburger span{ display: block; height: 1.5px; width: 100%; background: var(--text);
      transition: transform .2s ease, opacity .2s ease; }
    .i1 .navmenu{ display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 30;
      flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 2px 26px;
      background: var(--ink); border-bottom: 1px solid var(--line); }
    .i1 .navmenu .navlinks{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
    .i1 .navtoggle:checked ~ .navmenu{ display: flex; }
    .i1 .navtoggle:checked ~ .navburger span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
    .i1 .navtoggle:checked ~ .navburger span:nth-child(2){ opacity: 0; }
    .i1 .navtoggle:checked ~ .navburger span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
  }
  /* ================= data page ================= */
  .i1 .statband{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
    margin: clamp(32px, 4vw, 52px) 0; }
  .i1 .stat{ background: var(--panel); padding: clamp(18px, 2vw, 26px); }
  .i1 .stat .num{ font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 3.2vw, 40px);
    letter-spacing: -.02em; color: var(--text); line-height: 1; }
  .i1 .stat .num .u{ color: var(--amber); }
  .i1 .stat .lbl{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin-top: 9px; }
  @media (max-width: 820px){ .i1 .statband{ grid-template-columns: repeat(2, 1fr); } }

  .i1 .dsgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 28px); }
  .i1 .dscard{ display: flex; flex-direction: column; gap: 13px; padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--line); border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 26%), var(--panel);
    transition: border-color .18s ease, transform .18s ease; }
  .i1 .dscard:hover{ border-color: var(--line-2); transform: translateY(-2px); }
  .i1 .dskick{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--amber); margin: 0; display: inline-flex; align-items: center; gap: 10px; }
  .i1 .dskick::before{ content: ""; width: 16px; height: 1px; background: var(--amber); opacity: .8; }
  .i1 .dscount{ font-family: var(--sans); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px);
    letter-spacing: -.02em; color: var(--text); line-height: 1; }
  .i1 .dscount .u{ color: var(--amber); }
  .i1 .dscard h3{ font-family: var(--sans); font-weight: 660; font-size: clamp(18px, 1.9vw, 22px);
    letter-spacing: -.015em; margin: 0; }
  .i1 .dsdesc{ font-size: 14px; color: var(--muted); margin: 0; }
  .i1 .dsfields{ display: flex; flex-wrap: wrap; gap: 6px; }
  .i1 .dsfields span{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }
  .i1 .dsval{ margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .i1 .dsval b{ font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--amber); display: block; margin-bottom: 5px; }
  @media (max-width: 820px){ .i1 .dsgrid{ grid-template-columns: 1fr; } }
  /* ---- featured dataset (import intelligence) ---- */
  .i1 .dsfeature{ display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 3vw, 46px);
    align-items: center; padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--line-2); border-radius: 6px;
    background: linear-gradient(180deg, rgba(245,166,35,.05), transparent 40%), var(--panel);
    margin-bottom: clamp(20px, 2.5vw, 28px); }
  .i1 .dsfeature-main{ display: flex; flex-direction: column; gap: 13px; }
  .i1 .dsfeature-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .i1 .fstat{ background: var(--ink-2); padding: clamp(15px, 1.7vw, 21px); }
  .i1 .fstat .num{ font-family: var(--sans); font-weight: 700; font-size: clamp(24px, 2.8vw, 34px);
    letter-spacing: -.02em; color: var(--text); line-height: 1; }
  .i1 .fstat .num .u{ color: var(--amber); }
  .i1 .fstat .lbl{ font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-top: 7px; }
  @media (max-width: 820px){ .i1 .dsfeature{ grid-template-columns: 1fr; } }
  /* ================= about ================= */
  .i1 .about{ border-top:1px solid var(--line); padding-block:clamp(48px,8vw,100px); }
  .i1 .about-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,4.5vw,64px); align-items:center; }
  .i1 .about-copy h2{ font-family:var(--sans); font-weight:660; font-size:clamp(26px,3.4vw,42px); letter-spacing:-.022em; line-height:1.05; margin:16px 0 18px; text-wrap:balance; }
  .i1 .about-copy .lede{ font-size:clamp(15px,1.4vw,17.5px); color:var(--muted); margin:0 0 16px; max-width:52ch; }
  .i1 .about-copy .lede b{ color:var(--text); font-weight:600; }
  .i1 .about-copy p{ font-size:14.5px; color:var(--muted); margin:0 0 24px; max-width:52ch; }
  .i1 .facts{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
  .i1 .facts span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; }
  .i1 .idcard{ border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 30%),var(--panel); box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
  .i1 .idcard-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.16); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .i1 .idcard-head .l{ color:var(--text); font-weight:600; display:inline-flex; align-items:center; gap:9px; }
  .i1 .idcard-head .l::before{ content:""; width:8px; height:8px; border:1px solid var(--amber); transform:rotate(45deg); }
  .i1 .idrow{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; padding:13px 16px; border-top:1px solid var(--line); }
  .i1 .idrow .k{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
  .i1 .idrow .v{ font-size:13.5px; color:var(--text); }
  .i1 .idrow .v.mono{ font-family:var(--mono); font-size:12.5px; }
  @media(max-width:900px){ .i1 .about-grid{ grid-template-columns:1fr; } }

  /* ================= contact ================= */
  .i1 .contact{ border-top:1px solid var(--line); padding-block:clamp(48px,8vw,96px); }
  .i1 .contact-grid{ display:grid; grid-template-columns:1fr auto; gap:clamp(28px,4vw,60px); align-items:center; }
  .i1 .contact-copy h2{ font-family:var(--sans); font-weight:660; font-size:clamp(26px,3.4vw,42px); letter-spacing:-.022em; line-height:1.05; margin:16px 0 16px; text-wrap:balance; }
  .i1 .contact-copy .lede{ font-size:clamp(15px,1.4vw,17.5px); color:var(--muted); margin:0; max-width:48ch; }
  .i1 .contact-copy .lede b{ color:var(--text); font-weight:600; }
  .i1 .contact-methods{ display:flex; flex-direction:column; gap:11px; min-width:min(340px,80vw); }
  .i1 .cmethod{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:13px; color:var(--text); text-decoration:none; border:1px solid var(--line-2); border-radius:8px; padding:13px 16px; transition:border-color .16s ease, background .16s ease; }
  .i1 .cmethod:hover{ border-color:var(--amber); background:var(--panel-2); }
  .i1 .cmethod .k{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--amber); min-width:74px; }
  @media(max-width:820px){ .i1 .contact-grid{ grid-template-columns:1fr; } }

  /* ================= resume ================= */
  .i1 .resume{ padding-block:clamp(40px,6vw,84px); }
  .i1 .rname{ font-family:var(--sans); font-weight:700; font-size:clamp(34px,5.2vw,62px); letter-spacing:-.025em; line-height:1; margin:14px 0 0; }
  .i1 .rtag{ font-size:clamp(15px,1.5vw,18px); color:var(--muted); margin:14px 0 0; max-width:62ch; }
  .i1 .rtag b{ color:var(--text); font-weight:600; }
  .i1 .rcontact{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:20px; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--muted); }
  .i1 .rcontact a{ color:var(--amber); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px; }
  .i1 .rcontact a:hover{ border-color:var(--amber); }
  .i1 .rcontact .sep{ color:var(--faint); }
  .i1 .rsection{ margin-top:clamp(36px,5vw,56px); }
  .i1 .rsummary{ font-size:clamp(15px,1.4vw,17px); color:var(--muted); margin:0; max-width:70ch; }
  .i1 .rsummary b, .i1 .rprojects b, .i1 .rskill .v b{ color:var(--text); font-weight:600; }
  .i1 .rexp{ display:grid; grid-template-columns:190px 1fr; gap:clamp(14px,2vw,34px); padding:22px 0; border-top:1px solid var(--line); }
  .i1 .rexp:first-of-type{ border-top:0; padding-top:4px; }
  .i1 .rexp .when{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }
  .i1 .whenco{ font-family:var(--sans); font-weight:660; font-size:17px; letter-spacing:-.01em; color:var(--text); margin:0 0 4px; }
  .i1 .rstats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:clamp(28px,4vw,44px);
    border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--line); }
  .i1 .rstat{ display:flex; flex-direction:column; gap:5px; padding:16px 18px; background:var(--panel); }
  .i1 .rstat .n{ font-family:var(--sans); font-weight:700; font-size:clamp(20px,2.4vw,28px); letter-spacing:-.02em; color:var(--amber); line-height:1; }
  .i1 .rstat .l{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); line-height:1.3; }
  .i1 .rtype{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:6px; }
  .i1 .rlink{ font-family:var(--mono); font-size:11.5px; color:var(--amber); text-decoration:none; border-bottom:1px solid transparent; margin-right:12px; white-space:nowrap; }
  .i1 .rlink:hover{ border-color:var(--amber); }
  .i1 .rexp-earlier .whenco, .i1 .rexp-earlier li{ color:var(--muted); }
  @media(max-width:820px){ .i1 .rstats{ grid-template-columns:repeat(2,1fr); } }
  .i1 .rexp .role{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:10px; }
  .i1 .rexp ul, .i1 .rprojects{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
  .i1 .rexp li, .i1 .rprojects li{ font-size:14px; color:var(--muted); padding-left:18px; position:relative; }
  .i1 .rexp li::before, .i1 .rprojects li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--amber); }
  .i1 .rskills{ display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
  .i1 .rskill{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:13px 16px; border-top:1px solid var(--line); background:var(--panel); }
  .i1 .rskill:first-child{ border-top:0; }
  .i1 .rskill .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); }
  .i1 .rskill .v{ font-size:13.5px; color:var(--muted); }
  @media(max-width:760px){ .i1 .rexp{ grid-template-columns:1fr; gap:8px; } .i1 .rskill{ grid-template-columns:1fr; gap:4px; } }

  /* ================= blazor error UI (outside .i1 wrapper; hidden until a real error) ================= */
  #blazor-error-ui{
    display:none; position:fixed; bottom:0; left:0; width:100%; z-index:1000; box-sizing:border-box;
    padding:12px 44px 12px 20px;
    background:#241812; color:#FFC061; border-top:1px solid #C77F13;
    font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12.5px; letter-spacing:.02em;
    box-shadow:0 -2px 12px rgba(0,0,0,.45);
  }
  #blazor-error-ui .reload{ color:#F5A623; margin-left:10px; }
  #blazor-error-ui .dismiss{ cursor:pointer; position:absolute; right:16px; top:9px; color:#8A94A3; }