:root{
    --bg:#0B1513;
    --bg-2:#0F1D1A;
    --panel:#12231E;
    --panel-2:#16281F;
    --line:#26473D;
    --line-soft:#1B332B;
    --ink:#EAF1EC;
    --muted:#82998f;
    --muted-2:#566a61;
    --amber:#E7A93C;   /* request  — travels down */
    --mint:#5CD6AE;    /* response — travels up   */
    --shadow:0 24px 60px -30px rgba(0,0,0,.8);
    --display:"Bricolage Grotesque", system-ui, sans-serif;
    --body:"Hanken Grotesk", system-ui, sans-serif;
    --mono:"JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* faint engineering-grid texture */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:64px 64px;
    opacity:.28;
    mask-image:radial-gradient(circle at 70% 0%, #000 0%, transparent 75%);
  }
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--amber); color:#12100a;}

  .wrap{max-width:1120px; margin:0 auto; padding:0 28px; position:relative; z-index:1;}

  /* ---------- top bar ---------- */
  header.bar{
    position:sticky; top:0; z-index:50;
    backdrop-filter:blur(10px);
    background:linear-gradient(to bottom, rgba(11,21,19,.9), rgba(11,21,19,.55));
    border-bottom:1px solid var(--line-soft);
  }
  .bar-in{display:flex; align-items:center; justify-content:space-between; height:60px;}
  .brand{font-family:var(--mono); font-size:13px; letter-spacing:.02em; display:flex; gap:8px; align-items:center;}
  .brand .dot{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint);}
  nav.top{display:flex; gap:26px; font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;}
  nav.top a{color:var(--muted); transition:color .2s;}
  nav.top a:hover, nav.top a:focus-visible{color:var(--ink);}
  nav.top a span{color:var(--muted-2);}
  @media(max-width:640px){ nav.top{display:none;} }

  /* ---------- hero ---------- */
  .hero{display:grid; grid-template-columns:1fr 1.15fr; gap:52px; align-items:center; padding:74px 0 54px;}
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:10px; margin-bottom:22px;}
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--amber);}
  h1.name{
    font-family:var(--display); font-weight:800;
    font-size:clamp(44px, 7vw, 78px); line-height:.98; letter-spacing:-.02em; margin:0 0 20px;
  }
  h1.name .u{background:linear-gradient(transparent 72%, rgba(231,169,60,.35) 0); }
  .lede{font-size:clamp(16px,1.9vw,19px); color:#c3d0c9; max-width:30ch; margin:0 0 30px;}
  .lede b{color:var(--ink); font-weight:600;}
  .cta{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{
    font-family:var(--mono); font-size:13px; letter-spacing:.02em;
    padding:12px 20px; border-radius:9px; border:1px solid var(--line);
    display:inline-flex; align-items:center; gap:9px; transition:.2s; cursor:pointer;
  }
  .btn.primary{background:var(--amber); color:#12100a; border-color:var(--amber); font-weight:700;}
  .btn.primary:hover, .btn.primary:focus-visible{filter:brightness(1.08); transform:translateY(-2px);}
  .btn.ghost{background:var(--panel); color:var(--ink);}
  .btn.ghost:hover, .btn.ghost:focus-visible{border-color:var(--mint); color:var(--mint); transform:translateY(-2px);}

  /* ---------- signature: request lifecycle ---------- */
  .stackcard{
    background:linear-gradient(180deg, var(--panel), var(--bg-2));
    border:1px solid var(--line); border-radius:16px; padding:20px 20px 16px;
    box-shadow:var(--shadow); position:relative;
  }
  .stackcard .head{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-bottom:14px;}
  .stackcard .head .live{display:flex; align-items:center; gap:7px;}
  .stackcard .head .live b{color:var(--ink); font-weight:500;}
  .pill{color:var(--amber);}
  .rig{display:grid; grid-template-columns:26px 1fr; gap:14px;}
  .rail{position:relative;}
  .rail-line{position:absolute; left:50%; top:14px; bottom:14px; width:2px; transform:translateX(-50%); background:var(--line);}
  .rail-fill{position:absolute; left:50%; top:14px; width:2px; transform:translateX(-50%); background:var(--amber); height:0; box-shadow:0 0 10px var(--amber);}
  .packet{position:absolute; left:50%; top:14px; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); background:var(--amber); box-shadow:0 0 0 4px rgba(231,169,60,.18), 0 0 16px var(--amber); z-index:2;}
  .layers{display:flex; flex-direction:column; gap:9px;}
  .layer{
    background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px;
    padding:11px 14px; display:flex; align-items:center; justify-content:space-between;
    transition:border-color .25s, transform .25s, background .25s; cursor:default;
  }
  .layer .l-main{display:flex; flex-direction:column; gap:3px;}
  .layer .l-name{font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.03em;}
  .layer .l-tech{font-size:11.5px; color:var(--muted); font-family:var(--mono);}
  .layer .l-ms{font-family:var(--mono); font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums;}
  .layer.hot{border-color:var(--amber); background:#1a2a20; transform:translateX(3px);}
  .layer.hot.resp{border-color:var(--mint);}
  .layer.hot .l-ms{color:var(--ink);}
  .legend{display:flex; gap:18px; margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--muted);}
  .legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle;}
  .legend .dn i{background:var(--amber);} .legend .up i{background:var(--mint);}

  /* ---------- generic section ---------- */
  .section{padding:64px 0; border-top:1px solid var(--line-soft);}
  .sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:36px;}
  .sec-num{font-family:var(--mono); font-size:12px; color:var(--amber);}
  .sec-title{font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,36px); letter-spacing:-.015em; margin:0;}
  .sec-sub{font-family:var(--mono); font-size:12px; color:var(--muted); margin-left:auto;}
  @media(max-width:640px){ .sec-sub{display:none;} }

  /* ---------- stack detail ---------- */
  .stack-detail{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel);}
  .srow{display:grid; grid-template-columns:150px 1fr; gap:20px; padding:20px 22px; border-bottom:1px solid var(--line-soft); align-items:baseline; transition:background .2s;}
  .srow:last-child{border-bottom:0;}
  .srow:hover{background:var(--panel-2);}
  .srow .sk-layer{font-family:var(--mono); font-size:13px; color:var(--amber); letter-spacing:.03em;}
  .srow .sk-layer small{display:block; color:var(--muted-2); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; margin-top:4px;}
  .tags{display:flex; flex-wrap:wrap; gap:8px;}
  .tag{font-family:var(--mono); font-size:12px; color:#c3d0c9; background:var(--bg-2); border:1px solid var(--line-soft); padding:5px 11px; border-radius:7px; transition:.2s;}
  .tag:hover{border-color:var(--mint); color:var(--mint);}
  @media(max-width:560px){ .srow{grid-template-columns:1fr; gap:12px;} }

  /* ---------- work ---------- */
  .grid-work{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
  @media(max-width:720px){ .grid-work{grid-template-columns:1fr;} }
  .proj{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px;
    display:flex; flex-direction:column; gap:14px; transition:.25s; position:relative; overflow:hidden;
  }
  .proj::after{content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 1px transparent; transition:.25s;}
  .proj:hover{transform:translateY(-4px); border-color:var(--line);}
  .proj:hover::after{box-shadow:inset 0 0 0 1px var(--amber);}
  .proj .p-top{display:flex; justify-content:space-between; align-items:center;}
  .proj .p-kind{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
  .proj .p-arrow{font-family:var(--mono); color:var(--muted-2); transition:.2s;}
  .proj:hover .p-arrow{color:var(--amber); transform:translate(3px,-3px);}
  .proj h3{font-family:var(--display); font-weight:700; font-size:21px; margin:0; letter-spacing:-.01em;}
  .proj p{margin:0; font-size:14.5px; color:#b8c6bf;}
  .proj .p-arch{font-family:var(--mono); font-size:11.5px; color:var(--muted); padding-top:12px; border-top:1px solid var(--line-soft); letter-spacing:.02em;}
  .proj .p-arch b{color:var(--mint); font-weight:500;}

  /* ---------- about ---------- */
  .about-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:44px; align-items:start;}
  @media(max-width:720px){ .about-grid{grid-template-columns:1fr; gap:28px;} }
  .about-grid p{font-size:16.5px; color:#c9d5ce; margin:0 0 18px;}
  .about-grid p:last-child{margin-bottom:0;}
  .facts{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
  .fact{display:flex; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line-soft); font-family:var(--mono); font-size:12.5px;}
  .fact:last-child{border-bottom:0;}
  .fact .k{color:var(--muted);}
  .fact .v{color:var(--ink);}
  .fact .v.on{color:var(--mint);}

  /* ---------- footer / contact ---------- */
  footer{border-top:1px solid var(--line); padding:70px 0 44px; margin-top:20px;}
  .foot-cta{font-family:var(--display); font-weight:800; font-size:clamp(30px,5vw,52px); letter-spacing:-.02em; line-height:1.05; margin:0 0 26px;}
  .foot-cta a{background:linear-gradient(transparent 74%, rgba(92,214,174,.4) 0);}
  .foot-cta a:hover{color:var(--mint);}
  .foot-links{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:13px;}
  .foot-links a{color:var(--muted); display:flex; align-items:center; gap:7px; transition:.2s;}
  .foot-links a:hover, .foot-links a:focus-visible{color:var(--ink);}
  .foot-links a::before{content:"→"; color:var(--amber);}
  .foot-meta{margin-top:44px; font-family:var(--mono); font-size:11px; color:var(--muted-2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* reveal */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}

  :focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:4px;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
    *{animation:none !important;}
}

.brand {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* contact */
.contact-message {
    text-align: center;
}

.contact-message h2 {
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    max-width: 18ch;
    margin: 14px auto 0;
}

.contact-message p {
    color: var(--muted);
    margin-top: 16px;
    font-size: 18px;
}

.cform {
    max-width: 540px;
    margin: 38px auto 0;
    display: grid;
    gap: 12px;
    text-align: left;
}

.cform .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cform input, .cform textarea{
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    font-family:var(--body);
    font-size: 15px;
    color: var(--ink);
    color: black;
}

.cform textarea{
    min-height: 120px;
    resize: vertical;
}

.cform .btn{
    justify-content: center;
}

.calt{
    margin-top: 20px;
    color: var(--muted);
    font-size: 15px;
}

.calt a{
    color: var(--acent);
    font-weight: 600;
}

.btn-solid:hover{
    background-color: var(--muted);
    transform: translateY(-2px);
    
}