:root{
  --bg:#ffffff;
  --panel:#f6f7f9;
  --text:#0b1220;
  --muted:#516070;
  --line:#e6e9ee;
  --accent:#0a2a66;
  --accent2:#0b6b5b;
  --shadow: 0 10px 28px rgba(11,18,32,.08);
  --radius:16px;
  --max:980px;

  --padX:16px;
  --gap:14px;
  --headerH:56px;
}
[data-theme="dark"]{
  --bg:#070b12;
  --panel:#0d1320;
  --text:#e7eefc;
  --muted:#a6b2c7;
  --line:#182133;
  --accent:#88a6ff;
  --accent2:#4de2c5;
  --shadow: 0 12px 32px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max); margin:0 auto; padding:20px var(--padX) 44px}

/* Sticky header */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--headerH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:-.02em;
  min-width: 88px;
}
.mark{
  width:12px;height:12px;border-radius:4px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 6px 18px rgba(10,42,102,.18);
  flex: 0 0 auto;
  filter: saturate(1.1);
}

/* Threat badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent2) 25%, var(--line));
  background: color-mix(in srgb, var(--panel) 75%, var(--bg));
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}
.badgeDot{
  width:8px;height:8px;border-radius:50%;
  background: color-mix(in srgb, var(--accent2) 70%, var(--text));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 15%, transparent);
}

.headerActions{display:flex; align-items:center; gap:10px;}

.btn{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  padding:9px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  line-height: 1;
  min-height: 40px;
}
.btn:active{transform: translateY(1px)}
.iconBtn{
  width:42px;
  padding:0;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
.srOnly{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.burger{display:inline-flex; flex-direction:column; gap:4px; width:18px;}
.burger span{
  display:block;
  height:2px;
  border-radius:2px;
  background: color-mix(in srgb, var(--text) 85%, var(--muted));
}

/* Mobile menu */
.menu{
  display:none;
  border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  padding: 10px 0 12px;
  z-index: 9;
}
.menu.is-open{display:block}
.menu.is-open{position: sticky; top: var(--headerH);}

.nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 0 var(--padX);
  color:var(--muted);
  font-weight:900;
}
.nav a{
  padding:10px 10px;
  border:1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.nav a.is-active{
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--panel) 70%, var(--bg));
}
:target{scroll-margin-top: calc(var(--headerH) + 70px);}

@media (min-width: 860px){
  :root{--padX:18px; --headerH:64px; --gap:16px;}
  .wrap{padding:28px var(--padX) 48px}
  .menu{display:block; border-bottom:none; padding:0; background:transparent; position:static}
  .nav{flex-direction:row; padding:0; gap:16px; border:none;}
  .nav a{background:transparent; border:none; padding:6px 0;}
  #menuBtn{display:none}
  .nav a.is-active{
    background: transparent;
    border: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  :target{scroll-margin-top: calc(var(--headerH) + 14px);}
}

/* Hero / headings */
.hero{
  padding: 18px 0 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items:start;
}
.kicker{color:var(--muted); font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:12px;}
h1.title{margin:10px 0 10px; font-size:28px; line-height:1.15; letter-spacing:-.03em;}
.subtitle{margin:0 0 12px; color:var(--muted); max-width: 75ch}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.chip{
  border:1px solid var(--line);
  background:var(--panel);
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size: 13px;
  color: color-mix(in srgb, var(--text) 85%, var(--muted));
}

/* Cards + sections */
.section{padding:16px 0; border-top:1px solid var(--line)}
h2.sectionTitle{margin:0 0 10px; font-size:18px; letter-spacing:-.01em}
.sectionSub{margin:0 0 14px; color:var(--muted)}
.grid{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width: 860px){
  .grid{grid-template-columns:1fr 1fr; gap:14px}
  .section{padding:18px 0}
}
.card{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius: var(--radius);
  padding:16px;
}
.card h3{margin:0 0 10px; font-size:14px}
.card p{margin:0; color:var(--muted)}
.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:8px 0}
.list b{color:var(--text)}

/* Terminal widget */
.terminal{
  position: relative;
  border:1px solid color-mix(in srgb, var(--accent2) 28%, var(--line));
  border-radius: var(--radius);
  overflow:hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 72%, var(--bg)),
    color-mix(in srgb, var(--panel) 92%, var(--bg))
  );
  box-shadow: var(--shadow);
}
.termTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
  position: relative;
  z-index: 2;
}
.dots{display:flex; gap:6px; align-items:center}
.dot{
  width:10px;height:10px;border-radius:50%;
  background: color-mix(in srgb, var(--muted) 35%, var(--panel));
  border:1px solid var(--line);
}
.termTitle{
  font-weight:900;
  color: color-mix(in srgb, var(--text) 84%, var(--muted));
  letter-spacing:-.01em;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.termBody{
  position: relative;
  z-index: 2;
  padding:12px 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
}
.prompt{ color: color-mix(in srgb, var(--accent2) 70%, var(--text)); font-weight:900; }
.ok{ color: color-mix(in srgb, var(--accent2) 75%, var(--text)); font-weight:900; }
.warn{ color: color-mix(in srgb, #d6a100 75%, var(--text)); font-weight:900; }
.muted{ color: var(--muted); }
.blink{
  display:inline-block;
  width:8px;
  height:14px;
  margin-left:4px;
  vertical-align:-2px;
  background: color-mix(in srgb, var(--accent2) 65%, var(--text));
  opacity:.85;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.terminal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(77,226,197,0.05),
      rgba(77,226,197,0.05) 1px,
      rgba(0,0,0,0) 6px,
      rgba(0,0,0,0) 10px
    );
  mix-blend-mode: overlay;
  opacity: .55;
  z-index: 1;
}
.terminal::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height: 70px;
  top:-80px;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(77,226,197,0),
    rgba(77,226,197,0.14),
    rgba(77,226,197,0)
  );
  animation: scan 5.8s linear infinite;
  opacity: .85;
  z-index: 1;
}
@keyframes scan{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(calc(100% + 220px)); }
}

@media (prefers-reduced-motion: reduce){
  .terminal::after{ animation: none; display:none; }
  .blink{ animation:none; }
}

.footer{
  padding-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  color:var(--muted);
  font-size:14px
}
.sep{color:color-mix(in srgb, var(--muted) 70%, transparent)}

code, pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}
pre{
  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  overflow:auto;
}

/* ===== Profile Card (final clean) ===== */

/* Desktop: 2-column hero */
@media (min-width: 860px){
  .hero{
    grid-template-columns: 1.2fr .8fr;
    align-items: start;
  }
}

/* Card */
.heroCard{
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 70%, transparent));
  border-radius: var(--radius);
  padding:14px 16px;
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent2) 18%, transparent);
}

/* Avatar */
.profileAvatar{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.profileAvatar img{
  width:95px;
  height:95px;
  border-radius:50%;
  object-fit:cover;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

/* Header */
.profileHeader{
  text-align:center;
  margin: 4px 0 12px;
}
.profileHeader h2{
  margin: 6px 0 2px;
  font-size:18px;
  letter-spacing: -.02em;
}
.profileHeader .role{
  margin:0;
  font-size:13px;
  color:var(--muted);
  font-weight:650;
}

/* Meta */
.meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:14px;
}
.meta strong{color:var(--text)}

/* Social icons */
.socialRow{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:12px;
}
.socialRow a{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  transition:all .2s ease;
}
.socialRow svg{
  width:18px;
  height:18px;
}
.socialRow a:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* Mobile: profile first + slightly bigger avatar */
@media (max-width: 859px){
  .hero{ display:flex; flex-direction:column; }
  .heroCard{ order:-1; margin-bottom:20px; padding:18px; }
  .profileAvatar img{ width:120px; height:120px; }
  .profileHeader h2{ font-size:20px; }
  .socialRow{ gap:14px; }
  .socialRow a{ width:40px; height:40px; }
}