:root{
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #eef0f3;
    --border: #dde1e7;
    --text: #12161f;
    --text-2: #4c5666;
    --text-3: #5c6675;
    --accent: #0149b2;
    --accent-2: #023876;
    --accent-soft: rgba(1,73,178,0.12);
    --accent-red: #e8141c;
    --accent-green: #1f7d1a;
    --node: rgba(15,22,31,0.14);
    --shadow: 0 1px 2px rgba(18,22,31,0.04), 0 8px 24px rgba(18,22,31,0.06);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #0a0d13;
      --surface: #10141c;
      --surface-2: #151a24;
      --border: #232a37;
      --text: #eaeef4;
      --text-2: #a4adbb;
      --text-3: #8d98aa;
      --accent: #5b93f5;
      --accent-2: #8ab4ff;
      --accent-soft: rgba(91,147,245,0.14);
      --accent-red: #ff5c60;
      --accent-green: #4ade68;
      --node: rgba(234,238,244,0.16);
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
    }
  }
  :root[data-theme="dark"]{
    --bg: #0a0d13;
    --surface: #10141c;
    --surface-2: #151a24;
    --border: #232a37;
    --text: #eaeef4;
    --text-2: #a4adbb;
    --text-3: #8d98aa;
    --accent: #5b93f5;
    --accent-2: #8ab4ff;
    --accent-soft: rgba(91,147,245,0.14);
    --accent-red: #ff5c60;
    --accent-green: #4ade68;
    --node: rgba(234,238,244,0.16);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (max-width: 780px){
    body{ touch-action: pan-y; }
  }
  h1,h2,h3,h4{
    font-family:"Hanken Grotesk", "IBM Plex Sans", sans-serif;
    text-wrap:balance;
    margin:0;
  }
  p{margin:0;}
  a{color:inherit;}
  .mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}

  /* ---------- Nav ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px clamp(20px,5vw,56px);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .brand{display:flex; align-items:center; gap:14px; cursor:pointer; user-select:none; text-decoration:none;}
  .brand .logo-badge{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px;
    background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .brand .logo-mark{flex:none; display:block;}
  .brand-logo-frame{
    flex:none; display:flex; align-items:center; justify-content:center;
  }
  .brand-logo-dark{display:none;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .brand-logo-frame{display:none;}
    :root:not([data-theme="light"]) .brand-logo-dark{display:block;}
  }
  :root[data-theme="dark"] .brand-logo-frame{display:none;}
  :root[data-theme="dark"] .brand-logo-dark{display:block;}
  .brand-name{font-weight:800; font-size:1.32rem; letter-spacing:-0.015em; color:var(--text);}
  .brand-role{font-size:0.74rem; color:var(--text-2); letter-spacing:0.04em;}

  nav.links{display:flex; gap:clamp(4px,2vw,8px); align-items:center;}
  nav.links a{text-decoration:none; display:inline-block;}
  nav.links a, nav.links button{
    background:none; border:none; color:var(--text-2); cursor:pointer; font-weight:600;
    font-size:1.15rem; font-family:inherit; padding:12px 18px; border-radius:8px;
    transition:background .15s ease, color .15s ease;
    white-space:nowrap;
  }
  nav.links a:hover, nav.links button:hover{ color:var(--text); background:var(--surface-2); }
  nav.links a[aria-current="page"], nav.links button[aria-current="page"]{ color:var(--text); background:var(--surface-2); }
  nav.links a:focus-visible, nav.links button:focus-visible, .brand:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .menu-toggle{
    display:none; background:none; border:1px solid var(--border); border-radius:8px;
    color:var(--text); width:46px; height:46px; cursor:pointer;
    align-items:center; justify-content:center; font-size:22px; line-height:1;
  }

  @media (max-width: 780px){
    nav.links{
      display:none; position:fixed; top:116px; left:0; right:0; height:calc(100vh - 116px);
      background:var(--bg); flex-direction:column; align-items:stretch;
      padding:12px; gap:2px; border-top:1px solid var(--border);
      overflow-y:auto; z-index:100;
    }
    nav.links.open{display:flex;}
    nav.links a, nav.links a, nav.links button{text-align:left; padding:14px 16px; font-size:1rem; text-decoration:none; display:block;}
    .menu-toggle{display:flex;}
  }

  /* ---------- Page shell ---------- */
  main{padding-top:116px;}
  .page{display:block;}
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
  @media (prefers-reduced-motion: reduce){
    .page.active{animation:none;}
  }

  .wrap{max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,56px);}
  .section-label{
    font-family:"IBM Plex Mono", monospace; font-size:0.88rem; font-weight:600; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px;
  }
  .section-label::before{content:""; width:22px; height:1px; background:var(--accent);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    border-bottom:1px solid var(--border); overflow:hidden;
  }
  #net{position:absolute; inset:0; width:100%; height:100%; opacity:0.6;}
  .hero-inner{position:relative; z-index:2; padding-top:36px; padding-bottom:64px;}
  .eyebrow{
    font-family:"IBM Plex Mono", monospace; font-size:0.88rem; font-weight:500; color:var(--text-2);
    letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px;
  }
  .eyebrow b{color:var(--accent); font-weight:600;}
  h1.headline{
    font-size:clamp(2.4rem, 5.4vw, 4.4rem); font-weight:800; line-height:1.03;
    letter-spacing:-0.02em; margin-bottom:22px;
  }
  h1.headline .accent{color:var(--accent);}
  .lede{
    max-width:620px; font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--text-2);
    line-height:1.6; margin-bottom:36px;
  }
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px;}
  .btn{
    font-family:inherit; font-size:0.95rem; font-weight:600; padding:13px 24px;
    border-radius:8px; cursor:pointer; border:1px solid transparent;
    display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, background .15s ease, border-color .15s ease;
    text-decoration:none;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn.primary{ background:var(--accent); color:#ffffff; }
  .btn.primary:hover{ background:var(--accent-2); }
  .btn.ghost{ background:transparent; border-color:var(--border); color:var(--text); }
  .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }

  .stat-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
    border:1px solid var(--border); border-radius:12px; overflow:hidden; max-width:760px;
    margin-bottom:40px;
  }
  .stat{background:var(--surface); padding:20px 18px;}
  .stat .num{font-family:"IBM Plex Mono",monospace; font-size:1.7rem; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums;}
  .stat .lbl{font-size:0.78rem; font-weight:500; color:var(--text-2); margin-top:4px;}
  @media (max-width:640px){ .stat-row{grid-template-columns:repeat(2,1fr);} }

  .trust-strip{max-width:840px;}
  .trust-label{
    font-family:"IBM Plex Mono", monospace; font-size:0.74rem; font-weight:500; color:var(--text-2);
    text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
  }
  .trust-logos{display:flex; flex-wrap:wrap; gap:10px 12px;}
  .trust-logo-text{
    display:flex; align-items:center;
    font-family:"Hanken Grotesk", sans-serif; font-weight:700; font-size:0.92rem;
    color:var(--text-2); letter-spacing:-0.01em; white-space:nowrap;
    height:40px; padding:0 16px;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
  }

  /* ---------- Generic section ---------- */
  section.block{padding:96px 0; border-bottom:1px solid var(--border);}
  section.block:last-child{border-bottom:none;}
  .block-head{margin:14px 0 44px;}
  .block-head h2{font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-0.01em; margin-top:10px;}
  .block-head p.sub{color:var(--text-2); margin-top:14px; max-width:640px; line-height:1.6;}

  .tr-banner{margin:14px 0 32px; border-radius:16px; overflow:hidden; border:1px solid var(--border);}
  .tr-banner img{width:100%; height:auto; display:block;}
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* About */
  .about-copy{overflow:visible;}
  .about-copy p{color:var(--text-2); line-height:1.75; margin-bottom:16px; font-size:1.02rem;}
  .about-sidegrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; clear:both; margin-top:8px;}
  @media (max-width:640px){ .about-sidegrid{grid-template-columns:1fr;} }
  .side-card{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:26px 24px; margin-bottom:0;
  }
  .founder-photo{
    float:right; width:250px; max-width:40%; margin:4px 0 20px 28px;
    border:1px solid var(--border); border-radius:14px; overflow:hidden;
    background:var(--surface);
  }
  @media (max-width:640px){ .founder-photo{float:none; width:200px; max-width:60%; margin:0 auto 20px;} }
  .founder-photo img{width:100%; height:auto; display:block;}
  .founder-photo figcaption{
    padding:12px 16px; font-size:0.82rem; color:var(--text-2); font-weight:600;
    border-top:1px solid var(--border);
  }
  .founder-photo figcaption span{display:block; font-weight:400; color:var(--text-3); font-size:0.76rem; margin-top:2px;}
  .side-card h3{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-2); margin-bottom:16px; font-family:"IBM Plex Mono",monospace; font-weight:600;}
  .chip-row{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{
    font-size:0.82rem; font-weight:600; padding:6px 12px; border-radius:100px; border:1px solid var(--border);
    color:var(--text); background:var(--surface-2);
  }
  .edu-item{margin-bottom:12px; font-size:0.92rem; color:var(--text-2); line-height:1.5;}
  .edu-item b{color:var(--text-2); font-weight:600; display:block; font-size:0.92rem;}
  .award{
    display:flex; gap:12px; align-items:flex-start; font-size:0.92rem; color:var(--text); font-weight:500; line-height:1.5;
  }
  .award .dot{width:6px;height:6px;border-radius:50%;background:var(--accent); margin-top:7px; flex:none;}

  .process-head{margin:56px 0 28px;}
  .process-head h3{font-size:1.3rem; letter-spacing:-0.005em;}
  .process-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:36px 24px;
    position:relative;
  }
  .process-step{
    position:relative; padding:0 18px 0 0; border-top:2px solid var(--border);
  }
  .process-step::before{
    content:""; position:absolute; top:-2px; left:0; width:36px; height:2px; background:var(--accent);
  }
  .process-step .svc-num{
    margin-top:18px; margin-bottom:10px;
  }
  .process-step h4{font-size:1rem; margin-bottom:8px; letter-spacing:-0.005em;}
  .process-step p{font-size:0.87rem; color:var(--text-2); line-height:1.55;}
  @media (max-width:900px){
    .process-row{grid-template-columns:1fr 1fr; gap:32px 24px;}
    .process-step{padding-right:0;}
  }
  @media (max-width:560px){
    .process-row{grid-template-columns:1fr; gap:28px;}
  }

  /* Services */
  .svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .svc-grid{grid-template-columns:1fr;} }
  .svc-card{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .svc-card:hover{
    border-color:var(--accent); transform:translateY(-4px);
    box-shadow:0 10px 28px -12px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .svc-icon{
    width:38px; height:38px; border-radius:10px; background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .svc-icon svg{width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .svc-card{padding:0 0 24px; overflow:hidden;}
  .svc-photo{width:100%; aspect-ratio:8/5; overflow:hidden; margin-bottom:18px;}
  .svc-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .svc-card .svc-icon, .svc-card h3, .svc-card p{margin-left:24px; margin-right:24px;}
  .svc-card .svc-icon{margin-top:0;}
  .svc-num{font-family:"IBM Plex Mono",monospace; color:var(--accent); font-size:0.82rem; margin-bottom:14px;}
  .svc-card h3{font-size:1.08rem; margin-bottom:10px; letter-spacing:-0.005em;}
  .svc-card p{font-size:0.9rem; color:var(--text-2); line-height:1.55;}

  /* Experience timeline */
  .tl{position:relative; padding-left:28px;}
  .tl::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--border);}
  .tl-item{position:relative; padding-bottom:44px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-dot{
    position:absolute; left:-28px; top:5px; width:11px; height:11px; border-radius:50%;
    background:var(--bg); border:2px solid var(--accent);
  }
  .tl-item.current .tl-dot{background:var(--accent-green); border-color:var(--accent-green);}
  .tl-item.current .tl-org{color:var(--accent-green);}
  .tl-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:baseline; margin-bottom:6px;}
  .tl-role{font-size:1.12rem; font-weight:700; letter-spacing:-0.005em;}
  .tl-date{font-family:"IBM Plex Mono",monospace; font-size:0.78rem; font-weight:500; color:var(--text-2); white-space:nowrap;}
  .tl-org{color:var(--accent); font-size:0.92rem; font-weight:500; margin-bottom:12px;}
  .tl-desc{color:var(--text-2); font-size:0.92rem; line-height:1.6; margin-bottom:10px;}
  .tl-bullets{margin:0; padding-left:18px; color:var(--text-2); font-size:0.9rem; line-height:1.7;}
  .tl-bullets li{margin-bottom:4px;}
  .tl-more{
    background:none; border:none; color:var(--accent); font-family:inherit; font-size:0.86rem;
    cursor:pointer; padding:2px 0; margin-top:4px; font-weight:500;
  }
  .tl-extra{display:none;}
  .tl-extra.open{display:block;}

  /* Contact */
  .contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px;}
  @media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-line{display:flex; gap:14px; align-items:center; margin-bottom:18px; font-size:0.98rem;}
  .contact-line .ico{
    width:36px;height:36px;border-radius:9px;background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none;
  }
  .contact-line a{color:var(--text); text-decoration:none; border-bottom:1px solid transparent;}
  .contact-line a:hover{border-color:var(--accent); color:var(--accent);}

  form.cf{display:flex; flex-direction:column; gap:16px;}
  .field label{display:block; font-size:0.8rem; font-weight:600; color:var(--text-2); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em; font-family:"IBM Plex Mono",monospace;}
  .field input, .field textarea{
    width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:12px 14px; color:var(--text); font-family:inherit; font-size:0.96rem;
  }
  .field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
  .field textarea{resize:vertical; min-height:120px;}
  .form-note{font-size:0.8rem; color:var(--text-3); margin-top:2px;}

  footer{padding:32px clamp(20px,5vw,56px); text-align:center; color:var(--text-3); font-size:0.82rem;}
  .footer-tagline{
    font-family:"Hanken Grotesk", sans-serif; font-weight:700; font-size:1rem;
    color:var(--text); letter-spacing:-0.005em; margin-bottom:10px;
  }
  .footer-tagline .accent{color:var(--accent);}