:root{
    --bg: #10141b;
    --bg-2: #0c0f14;
    --panel: #171c25;
    --panel-2: #1d2330;
    --border: #262d3a;
    --text: #e8ecf2;
    --text-dim: #8b93a7;
    --text-faint: #545d70;
    --amber: #f2a93b;
    --green: #3ecf8e;
    --blue: #5b8def;
    --red: #e5646a;

    --display: 'Space Grotesk', 'Inter', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--bg);
    background-image:
      radial-gradient(circle at 15% 0%, rgba(91,141,239,0.08), transparent 45%),
      radial-gradient(circle at 85% 20%, rgba(242,169,59,0.06), transparent 40%);
    color:var(--text);
    font-family:var(--body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }

  ::selection{ background:var(--amber); color:#10141b; }

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

  .wrap{
    max-width:920px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- status bar ---------- */
  .statusbar{
    position:sticky; top:0; z-index:50;
    background:rgba(12,15,20,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .statusbar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:14px; padding-bottom:14px;
    font-family:var(--mono);
    font-size:12px;
    color:var(--text-dim);
  }
  .statusbar .left{ display:flex; align-items:center; gap:8px; }
  .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 3px rgba(62,207,142,0.15);
    flex:none;
  }
  @media (prefers-reduced-motion:no-preference){
    .dot{ animation:pulse 2.4s ease-in-out infinite; }
  }
  @keyframes pulse{
    0%,100%{ box-shadow:0 0 0 3px rgba(62,207,142,0.15); }
    50%{ box-shadow:0 0 0 6px rgba(62,207,142,0.06); }
  }
  .statusbar .op{ color:var(--green); letter-spacing:0.04em; }
  .statusbar .right{ display:none; }
  @media (min-width:640px){ .statusbar .right{ display:block; } }

  /* ---------- hero ---------- */
  .hero{ padding:76px 0 64px; border-bottom:1px solid var(--border); }
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    color:var(--amber);
    letter-spacing:0.14em;
    text-transform:uppercase;
    margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:''; width:22px; height:1px; background:var(--amber); }

  h1.name{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(38px, 7vw, 62px);
    line-height:1.02;
    letter-spacing:-0.01em;
  }
  .role{
    font-family:var(--display);
    font-size:clamp(17px, 2.4vw, 21px);
    color:var(--text-dim);
    margin-top:10px;
    font-weight:500;
  }

  .terminal{
    margin-top:34px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    max-width:560px;
  }
  .terminal .bar{
    display:flex; align-items:center; gap:6px;
    padding:9px 14px;
    background:var(--panel-2);
    border-bottom:1px solid var(--border);
  }
  .terminal .bar span{
    width:9px; height:9px; border-radius:50%; background:var(--text-faint);
  }
  .terminal .bar label{
    margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--text-faint);
  }
  .terminal .body{ padding:16px 18px 20px; font-family:var(--mono); font-size:13px; }
  .terminal .promptline{ color:var(--text-dim); margin-bottom:10px; }
  .terminal .promptline .cmd{ color:var(--text); }
  .terminal .promptline::before{ content:'$ '; color:var(--green); }
  #uptime{ color:var(--text); font-size:14px; }
  .terminal .load{ color:var(--text-dim); margin-top:6px; font-size:12px; }
  .terminal .load b{ color:var(--green); font-weight:600; }

  .hero-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
  .btn{
    font-family:var(--mono);
    font-size:13px;
    padding:11px 18px;
    border-radius:7px;
    text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--border);
    transition:border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn.primary{ background:var(--amber); color:#181008; border-color:var(--amber); font-weight:600; }
  .btn.primary:hover{ background:#ffb94e; }
  .btn.ghost{ color:var(--text); background:var(--panel); }
  .btn.ghost:hover{ border-color:var(--blue); }

  /* ---------- sections ---------- */
  section{ padding:64px 0; border-bottom:1px solid var(--border); }
  .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:34px; flex-wrap:wrap; gap:10px; }
  .section-tag{
    font-family:var(--mono); font-size:11px; color:var(--text-faint);
    letter-spacing:0.1em; text-transform:uppercase;
  }
  h2{
    font-family:var(--display);
    font-size:clamp(22px,3.4vw,28px);
    font-weight:600;
    margin-top:4px;
  }

  /* ---------- service grid ---------- */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
    gap:14px;
  }
  .svc{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:18px;
    transition:border-color .15s ease, transform .15s ease;
  }
  .svc:hover{ border-color:var(--blue); transform:translateY(-2px); }
  .svc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .svc-name{ font-family:var(--display); font-weight:600; font-size:15px; }
  .svc-status{
    font-family:var(--mono); font-size:10px; color:var(--green);
    display:flex; align-items:center; gap:5px; letter-spacing:0.05em;
  }
  .svc-status .dot{ width:6px; height:6px; }
  .svc-desc{ font-size:13px; color:var(--text-dim); line-height:1.55; }

  /* ---------- deployment log ---------- */
  .log{ position:relative; }
  .log::before{
    content:''; position:absolute; left:7px; top:6px; bottom:6px;
    width:1px; background:var(--border);
  }
  .entry{ position:relative; padding-left:34px; margin-bottom:30px; }
  .entry:last-child{ margin-bottom:0; }
  .entry::before{
    content:''; position:absolute; left:0; top:6px;
    width:15px; height:15px; border-radius:50%;
    background:var(--bg); border:2px solid var(--amber);
  }
  .entry.now::before{ border-color:var(--green); }
  .entry-head{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:8px;
  }
  .tag{
    font-family:var(--mono); font-size:10px; font-weight:700;
    letter-spacing:0.06em; padding:3px 8px; border-radius:4px;
  }
  .tag.deploy{ background:rgba(242,169,59,0.14); color:var(--amber); }
  .tag.live{ background:rgba(62,207,142,0.14); color:var(--green); }
  .entry-date{ font-family:var(--mono); font-size:12px; color:var(--text-faint); }
  .entry-role{ font-family:var(--display); font-size:17px; font-weight:600; }
  .entry-org{ color:var(--blue); font-weight:500; }
  .entry ul{ margin-top:10px; padding-left:18px; color:var(--text-dim); font-size:13.5px; }
  .entry li{ margin-bottom:6px; }
  .entry li::marker{ color:var(--text-faint); }

  .earlier{
    margin-top:8px;
    background:none;
    border:1px dashed var(--border);
    color:var(--text-dim);
    font-family:var(--mono);
    font-size:12px;
    padding:11px 16px;
    border-radius:8px;
    cursor:pointer;
    width:100%;
    text-align:left;
    display:flex; align-items:center; justify-content:space-between;
  }
  .earlier:hover{ border-color:var(--blue); color:var(--text); }
  #earlierLog{ display:none; margin-top:24px; }
  #earlierLog.open{ display:block; }
  .mini{ padding-left:34px; position:relative; margin-bottom:20px; font-size:13px; }
  .mini::before{
    content:''; position:absolute; left:2px; top:6px; width:9px; height:9px;
    border-radius:50%; background:var(--panel-2); border:1px solid var(--text-faint);
  }
  .mini .entry-date{ display:block; margin-bottom:2px; }
  .mini .entry-role{ font-size:14px; }

  /* ---------- certifications ---------- */
  .certs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
  .cert{
    display:flex; align-items:center; gap:12px;
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    padding:14px 16px;
  }
  .badge{
    flex:none; width:34px; height:34px; border-radius:50%;
    background:rgba(62,207,142,0.12); color:var(--green);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:14px; font-weight:700;
  }
  .cert-name{ font-size:13.5px; font-weight:600; }
  .cert-org{ font-size:12px; color:var(--text-faint); font-family:var(--mono); }

  /* ---------- escalation / contact ---------- */
  .escalation{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:36px;
    display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
  }
  .esc-left .tag.open{ background:rgba(62,207,142,0.14); color:var(--green); }
  .esc-left h3{ font-family:var(--display); font-size:22px; margin-top:12px; font-weight:600; }
  .esc-left p{ color:var(--text-dim); font-size:13.5px; margin-top:6px; max-width:380px; }
  .esc-right{ display:flex; flex-direction:column; gap:10px; font-family:var(--mono); font-size:13px; }
  .esc-right a{ text-decoration:none; color:var(--text); display:flex; align-items:center; gap:8px; }
  .esc-right a:hover{ color:var(--blue); }
  .esc-right .lbl{ color:var(--text-faint); width:64px; display:inline-block; }

  footer{ padding:32px 0 60px; text-align:center; }
  footer p{ font-family:var(--mono); font-size:11px; color:var(--text-faint); }

  @media (max-width:640px){
    .hero{ padding:56px 0 48px; }
    section{ padding:48px 0; }
    .escalation{ padding:26px; }
  }

/* ---------- interactive terminal ---------- */
.terminal .output{ max-height:260px; overflow-y:auto; scrollbar-width:thin; }
.terminal .output::-webkit-scrollbar{ width:6px; }
.terminal .output::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
.term-line{ margin-bottom:8px; white-space:pre-wrap; word-break:break-word; }
.term-line.echoed{ color:var(--text-dim); }
.term-line.echoed::before{ content:'ravi@career:~$ '; color:var(--green); }
.term-line.out{ color:var(--text); }
.term-line.err{ color:var(--red); }
.term-line.dim{ color:var(--text-faint); }
.term-line a{ color:var(--blue); text-decoration:underline; }
.term-inputrow{ display:flex; align-items:center; gap:6px; margin-top:10px; }
.term-inputrow .p{ color:var(--green); flex:none; }
.term-inputrow input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:var(--mono); font-size:13px;
  caret-color:var(--green);
}
.term-inputrow input::placeholder{ color:var(--text-faint); }
.term-hint{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); font-size:11px; color:var(--text-faint); }
.term-hint b{ color:var(--text-dim); font-weight:600; }

/* ---------- smartscape node graph ---------- */
.smartscape-wrap{
  position:relative;
  max-width:620px;
  margin:0 auto;
}
.smartscape-wrap svg{ width:100%; height:auto; display:block; }
.ss-line{ stroke:var(--border); stroke-width:1.5; transition:stroke .2s ease, stroke-width .2s ease; }
.ss-line.active{ stroke:var(--amber); stroke-width:2; }
.ss-node-circle{ fill:var(--panel); stroke:var(--green); stroke-width:2; transition:stroke .2s ease, fill .2s ease, r .2s ease; cursor:pointer; }
.ss-node-circle.active{ stroke:var(--amber); fill:var(--panel-2); }
.ss-node-circle.center{ fill:var(--amber); stroke:var(--amber); }
.ss-label{ font-family:var(--mono); font-size:12px; fill:var(--text-dim); pointer-events:none; }
.ss-label.center{ fill:#181008; font-weight:700; font-size:13px; }
.ss-dot{ fill:var(--green); }
.ss-tooltip{
  position:absolute;
  max-width:220px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--text-dim);
  line-height:1.5;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -12px);
  transition:opacity .12s ease;
  z-index:10;
}
.ss-tooltip.show{ opacity:1; }
.ss-tooltip b{ color:var(--text); display:block; margin-bottom:3px; font-size:12px; }
.smartscape-caption{
  text-align:center; margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--text-faint);
}
.smartscape-caption b{ color:var(--green); }

/* ---------- articles / field notes ---------- */
.articles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px;
}
.article-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  display:block;
  transition:border-color .15s ease, transform .15s ease;
}
.article-card:hover{ border-color:var(--amber); transform:translateY(-3px); }
.article-card img{ width:100%; display:block; aspect-ratio:1200/627; object-fit:cover; border-bottom:1px solid var(--border); }
.article-card .ac-body{ padding:14px 16px 18px; }
.article-card .ac-tag{ font-family:var(--mono); font-size:10.5px; color:var(--amber); letter-spacing:0.06em; }
.article-card h3{ font-family:var(--display); font-size:16px; font-weight:600; margin-top:6px; line-height:1.3; }
.article-card p{ font-size:12.5px; color:var(--text-dim); margin-top:6px; line-height:1.5; }

/* ---------- article detail page ---------- */
.article-hero{ padding:0; border-bottom:1px solid var(--border); }
.article-hero img{ width:100%; display:block; }
.article-meta{
  padding:34px 0 8px;
  font-family:var(--mono); font-size:12px; color:var(--text-faint);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.article-meta .amber{ color:var(--amber); }
.article-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,5vw,44px); line-height:1.08; margin-top:12px; letter-spacing:-0.01em;
}
.article-subtitle{ font-family:var(--display); font-size:18px; color:var(--text-dim); margin-top:12px; font-weight:500; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px; color:var(--text-dim);
  text-decoration:none; padding:18px 0 0;
}
.back-link:hover{ color:var(--blue); }

.article-body{ max-width:720px; margin:0 auto; padding:44px 0 20px; }
.article-body h2{
  font-family:var(--display); font-size:22px; font-weight:600; margin:38px 0 14px;
}
.article-body p{ font-size:16px; line-height:1.75; color:var(--text-dim); margin-bottom:16px; }
.article-body p.lead{ font-size:18px; color:var(--text); font-weight:500; }
.article-body ul{ margin:8px 0 20px 0; padding-left:0; list-style:none; }
.article-body ul li{
  font-size:15px; color:var(--text-dim); line-height:1.6; padding-left:24px; position:relative; margin-bottom:10px;
}
.article-body ul li::before{ content:'→'; color:var(--amber); position:absolute; left:0; font-family:var(--mono); }
.article-question{
  background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--blue);
  border-radius:8px; padding:18px 20px; margin:30px 0; font-size:15.5px; color:var(--text);
}
.article-question b{ color:var(--blue); }
.article-cta{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:26px; margin-top:34px; text-align:center;
}
.article-cta p{ color:var(--text-dim); font-size:14px; margin-bottom:14px; }

.article-nav{
  display:flex; justify-content:space-between; gap:16px; padding:34px 0 60px;
  border-top:1px solid var(--border); margin-top:20px; flex-wrap:wrap;
}
.article-nav a{
  font-family:var(--mono); font-size:12.5px; color:var(--text-dim); text-decoration:none;
  border:1px solid var(--border); border-radius:8px; padding:12px 16px; max-width:260px;
  transition:border-color .15s ease;
}
.article-nav a:hover{ border-color:var(--blue); color:var(--text); }
.article-nav .lbl{ display:block; color:var(--text-faint); font-size:10.5px; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.05em; }