/* =========================================================
   style.css — how everything looks.
   All colours (dark + light) are in section 1.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-clock: "Segoe UI Variable Display", "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --max: 1120px;
  --radius: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.5, .64, 1);
  --grad: linear-gradient(90deg, var(--accent), var(--accent-2));
}

:root, [data-theme="dark"] {
  --bg: #061019;
  --text: #e6f1f7;
  --muted: #9db3c0;
  --faint: #60798a;
  --line: rgba(190, 225, 250, .1);
  --accent: #3cc8dc;            /* teal that leans blue */
  --accent-2: #9fd4ff;          /* pale baby blue */
  --on-accent: #03222c;
  --ok: #5ee0a8;
  --card: rgba(160, 210, 255, .04);
  --shadow: 0 12px 40px rgba(0, 0, 0, .35);
  /* glass */
  --glass-top: rgba(190, 230, 255, .08);
  --glass-bottom: rgba(190, 230, 255, .025);
  --glass-edge: rgba(190, 230, 255, .15);
  --glass-shine: rgba(255, 255, 255, .22);
  --glass-shade: rgba(0, 0, 0, .25);
  --liquid-tint: rgba(150, 210, 240, .08);
  --liquid-glint: rgba(255, 255, 255, .16);
  --pill-bg: rgba(160, 220, 255, .16);
  --card-glass-bg: rgba(10, 26, 38, .42);
  --ca-bg: rgba(0, 0, 0, .18);
  /* lock-screen wallpaper */
  --wall-base: radial-gradient(ellipse 80% 70% at 30% 20%, #0c2c3d, #061019 70%);
  --wall-op: .5;
  --aurora-color: rgba(60, 200, 220, .14);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #eef6fb;                /* pale baby blue */
  --text: #0e2230;
  --muted: #4a6372;
  --faint: #86a0ae;
  --line: rgba(14, 34, 48, .11);
  --accent: #0b7c93;
  --accent-2: #3d8fd1;
  --on-accent: #ffffff;
  --ok: #138a5e;
  --card: rgba(255, 255, 255, .6);
  --shadow: 0 12px 32px rgba(20, 60, 90, .1);
  --glass-top: rgba(255, 255, 255, .9);
  --glass-bottom: rgba(255, 255, 255, .55);
  --glass-edge: rgba(255, 255, 255, .95);
  --glass-shine: #ffffff;
  --glass-shade: rgba(14, 34, 48, .08);
  --liquid-tint: rgba(255, 255, 255, .35);
  --liquid-glint: rgba(255, 255, 255, .9);
  --pill-bg: rgba(255, 255, 255, .8);
  --card-glass-bg: rgba(255, 255, 255, .45);
  --ca-bg: rgba(255, 255, 255, .55);
  --wall-base: radial-gradient(ellipse 80% 70% at 30% 20%, #ffffff, #e4f1fa 65%);
  --wall-op: .42;
  --aurora-color: rgba(11, 124, 147, .09);
  color-scheme: light;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.7 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
p { margin: 0 0 1em; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.container { width: min(var(--max), 100% - 48px); margin-inline: auto; }
main, footer { position: relative; z-index: 1; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); text-decoration: none; }
.skip:focus { top: 16px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
code { padding: 2px 6px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: 500 .9em var(--font-mono); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- 3. Liquid mouse effect + background glow ---------- */
/* Sits above the side nav on purpose: then the glass nav never has to re-bend the moving ink behind it,
   which keeps the animation smooth. pointer-events: none means you can click straight through it. */
#fluid { position: fixed; inset: 0; z-index: 55; width: 100%; height: 100%; pointer-events: none; }
/* Soft glow behind the About section. It's a pure gradient that fades out
   well inside its box, so it never shows a hard edge. */
.aurora { position: absolute; left: 0; right: 0; top: 100vh; height: 130vh; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 45% 38% at 10% 50%, var(--aurora-color), transparent 72%); }

/* ---------- 4. Glass ---------- */
/* .glass = cards. Glossy edges, no heavy blur (keeps scrolling smooth) */
.glass {
  background: linear-gradient(160deg, var(--glass-top), var(--glass-bottom));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 1px var(--glass-shine), inset 0 -1px 1px var(--glass-shade), var(--shadow);
}
/* .liquid = Apple-style liquid glass for floating controls.
   Edge/Chrome bend what's behind it; other browsers get frosted glass. */
.liquid {
  position: relative; isolation: isolate;
  background: var(--liquid-tint);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: url(#liquid-refract) blur(2px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 1px var(--glass-shine),
    inset 0 -1px 1px var(--glass-shade),
    inset 0 0 22px rgba(255, 255, 255, .05),
    0 12px 32px -12px rgba(0, 0, 0, .35);
}
.liquid::after {   /* a highlight that follows the mouse, like light on glass */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140px circle at var(--lx, 30%) var(--ly, 0%), var(--liquid-glint), transparent 70%);
}

/* ---------- 5. Side navigation (dock at the bottom on phones) ---------- */
.sidenav { position: fixed; left: 16px; top: 50%; translate: 0 -50%; z-index: 50; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 28px; }
.sidenav a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; padding: 10px 4px 8px; border-radius: 20px; color: var(--muted); font: 500 10.5px/1 var(--font-body); text-decoration: none; transition: color .25s; }
.sidenav a:hover, .sidenav a.active { color: var(--text); }
.sidenav a.active svg { color: var(--accent); }
.sidenav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: color .25s; }
.sidenav-pill {   /* the glass droplet that slides to the active section */
  position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 20px; opacity: 0;
  background: var(--pill-bg);
  box-shadow: inset 0 1px 1px var(--glass-shine), inset 0 -1px 1px var(--glass-shade), 0 4px 14px rgba(0, 0, 0, .14);
  transition: transform .55s var(--spring), width .35s var(--ease), height .35s var(--ease), opacity .3s;
}

/* ---------- 6. Pull-cord light/dark switch ---------- */
.cord { --rest: 90px; position: fixed; top: 0; right: clamp(14px, 3vw, 40px); z-index: 60; display: flex; flex-direction: column; align-items: center; width: 36px; padding: 0 0 6px; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.cord-line { display: block; width: 2px; height: calc(var(--rest) + var(--pull, 0px)); background: linear-gradient(to bottom, transparent, var(--faint) 30%, var(--muted)); transition: height .75s cubic-bezier(.34, 1.9, .5, 1); }
.cord.dragging .cord-line { transition: none; }
.cord-knob { display: block; width: 18px; height: 24px; margin-top: -1px; border-radius: 9px 9px 11px 11px; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .85), transparent 40%), linear-gradient(160deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 -3px 6px rgba(0, 0, 0, .15); }
.cord-hint { position: absolute; right: calc(100% + 2px); bottom: 10px; color: var(--muted); font: 500 11px/1 var(--font-mono); white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.cord.used .cord-hint { opacity: 0; }
.cord:focus-visible { outline: none; }
.cord:focus-visible .cord-knob { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- 7. Shared type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--accent); font: 500 13px/1.4 var(--font-mono); letter-spacing: .02em; }
h1, h2, h3 { margin: 0; }
h2 { margin-bottom: 18px; font: 400 clamp(40px, 5.4vw, 62px)/1.05 var(--font-display); letter-spacing: -.01em; }
h2 em { font-style: italic; color: var(--accent); }
.section { position: relative; padding: clamp(84px, 11vw, 140px) 0; }
.section-head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head > p:not(.eyebrow) { color: var(--muted); font-size: 18px; }
.btn-plain { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; color: var(--muted); font: 500 14.5px var(--font-body); text-decoration: none; transition: color .2s; }
.btn-plain:hover { color: var(--accent); }
.btn-plain.glass { padding: 12px 22px; color: var(--text); }

/* ---------- 8. Lock screen (the intro) ---------- */
.lock { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: center; padding: 90px 0 70px; }
/* Only the wallpaper is clipped (its bottom fades into the page), so shadows of the card and widgets are never cut off */
.wallpaper { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--wall-base); }
.wallpaper i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--wall-op); }
.wallpaper i:nth-child(1) { width: 75vmax; height: 34vmax; left: -18vmax; top: 34%; background: var(--accent); rotate: -16deg; }
.wallpaper i:nth-child(2) { width: 60vmax; height: 28vmax; right: -22vmax; top: 2%; background: var(--accent-2); rotate: 14deg; }
.wallpaper i:nth-child(3) { width: 40vmax; height: 40vmax; right: 6%; bottom: -26vmax; background: #8a96ff; }
.wallpaper::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(transparent, var(--bg)); }
.lock-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.clock { margin: 0; font: 600 clamp(84px, 11vw, 148px)/.9 var(--font-clock); letter-spacing: -.035em; }
.date { margin: 16px 0 0; color: var(--muted); font: 500 clamp(17px, 1.7vw, 21px) var(--font-body); }
.widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; margin: 44px 0 0; padding: 0; list-style: none; }
.widget { padding: 16px 18px 15px; border-radius: 20px; }
.widget b { display: block; font: 400 36px/1 var(--font-display); }
.widget span { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.signin {
  padding: 30px 30px 24px; border-radius: 30px; text-align: center;
  background: var(--card-glass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 1px var(--glass-shine), inset 0 -1px 1px var(--glass-shade), 0 30px 80px -30px rgba(0, 0, 0, .45);
}
.avatar { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 16px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--accent), transparent 65%), radial-gradient(circle at 80% 85%, var(--accent-2), transparent 60%), #0b1c28; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.avatar span { color: #fff; font: italic 400 52px/1 var(--font-display); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.signin h1 { margin: 0 0 6px; font: 400 clamp(32px, 3.2vw, 40px)/1.05 var(--font-display); }
.role { margin: 0 0 14px; color: var(--accent); font: 500 13px var(--font-mono); }
.pitch { max-width: 40ch; margin: 0 auto 20px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.ca { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--ca-bg); text-align: left; }
.ca-title { margin: 0 0 6px; color: var(--faint); font: 500 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.checks { margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
.checks li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); font-size: 11px; font-weight: 700; }
.checks li span { color: var(--muted); }
.checks li b { margin-left: auto; font-weight: 600; transition: opacity .3s; }
.checks li.pending::before { content: ""; width: 14px; height: 14px; margin: 2px; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); background: none; animation: spin .8s linear infinite; }
.checks li.pending b { opacity: 0; }
@keyframes spin { to { rotate: 360deg; } }
.access { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font: 600 14px var(--font-body); }
.access .when-done { color: var(--ok); }
.access .when-pending { display: none; color: var(--muted); }
.access.pending .when-pending { display: inline; }
.access.pending .when-done { display: none; }
.signin-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.btn-enter { display: flex; justify-content: center; gap: 10px; width: 100%; padding: 15px 22px; border-radius: 999px; color: var(--text); font: 600 16px/1 var(--font-body); text-decoration: none; transition: transform .3s var(--spring); }
.btn-enter:hover { transform: scale(1.02); }
.quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.quick-links a { padding: 6px 12px; border-radius: 999px; color: var(--muted); font: 500 14px var(--font-body); text-decoration: none; transition: color .2s, background-color .2s; }
.quick-links a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-enter:active { transform: scale(.98); }

/* ---------- 9. Cards (shared) + mouse spotlight ---------- */
.spot { position: relative; overflow: hidden; }
.spot > * { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%); opacity: 0; transition: opacity .4s; }
.spot:hover::before { opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font: 400 13.5px/1 var(--font-body); white-space: nowrap; transition: border-color .3s, color .3s; }
.chips li:hover { border-color: var(--accent); color: var(--text); }
.chips li.certified { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); }
.chips li.certified::after { content: " ✓"; color: var(--accent); }

/* ---------- 10. About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr); gap: clamp(36px, 6vw, 80px); align-items: start; margin-bottom: clamp(36px, 5vw, 56px); }
.about-grid .section-head { max-width: none; margin-bottom: 28px; }
.now { margin: 0; padding: 0; list-style: none; color: var(--muted); line-height: 2; }
.now b { display: inline-block; min-width: 96px; color: var(--accent); font: 500 13px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.facts { padding: 26px 26px 24px; border-radius: var(--radius); }
.facts-avatar { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--accent), transparent 65%), radial-gradient(circle at 80% 85%, var(--accent-2), transparent 60%), #0b1c28; color: #fff; font: italic 400 32px/1 var(--font-display); }
.facts dl { display: grid; gap: 14px; margin: 0; }
.facts dt { color: var(--faint); font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.facts dd { margin: 2px 0 0; font-weight: 500; font-size: 15.5px; }
.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.method-card { padding: 30px 28px; border-radius: var(--radius); }
.method-card .num { color: var(--accent); font: 500 13px var(--font-mono); }
.method-card h3 { margin: 16px 0 12px; font: 400 30px/1.1 var(--font-display); }
.method-card p { margin: 0; color: var(--muted); font-size: 16px; }

/* ---------- 11. Experience: sticky side + timeline that follows your scroll ---------- */
.exp-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.exp-side { position: sticky; top: 110px; }
.exp-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.exp-now b { color: var(--accent); font: 400 56px/1 var(--font-display); }
.exp-now .of { color: var(--faint); font: 500 13px var(--font-mono); }
.exp-now p { flex-basis: 100%; margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.timeline { position: relative; padding-left: 44px; }
.tl-track { position: absolute; left: 7px; top: 9px; bottom: 0; width: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.tl-progress { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--accent), var(--accent-2)); transform-origin: top; transform: scaleY(0); }
.tl-head { position: absolute; left: 8px; top: 9px; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 22px 2px color-mix(in srgb, var(--accent) 70%, transparent); will-change: transform; }
.tl-item { position: relative; padding-bottom: 60px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-marker { position: absolute; left: -44px; top: 1px; z-index: 1; width: 16px; height: 16px; border: 2px solid var(--faint); border-radius: 50%; background: var(--bg); transition: border-color .4s, background-color .4s, transform .4s var(--ease); }
.tl-item.passed .tl-marker { border-color: var(--accent); background: var(--accent); transform: scale(.75); }
.tl-date { margin: 0 0 8px; color: var(--muted); font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.tl-item h3 { margin-bottom: 6px; font: 600 21px/1.35 var(--font-body); letter-spacing: -.01em; }
.tl-org { margin: 0 0 4px; color: var(--accent); font-size: 15.5px; }
.tl-item > .list { margin-top: 14px; }
.tl-group { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 20px; margin-top: 20px; }
.tl-group h4 { margin: 8px 0 0; font: 600 14px var(--font-body); }
.list { margin: 0; padding: 0; list-style: none; }
.list li { position: relative; margin: 7px 0; padding-left: 18px; color: var(--muted); font-size: 16px; }
.list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 1.5px; background: var(--accent); }

/* ---------- 12. Case studies ---------- */
.studies { display: grid; gap: 20px; }
.study { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 48px); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); }
.study-no { margin: 0 0 10px; color: var(--faint); font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.study h3 { margin-bottom: 20px; font: 400 clamp(28px, 3vw, 36px)/1.1 var(--font-display); }
.metric { margin-bottom: 20px; padding: 14px 16px; border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.metric b { display: block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font: 400 clamp(32px, 3.4vw, 42px)/1.1 var(--font-display); }
.metric span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.steps { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px 18px; margin: 0; }
.steps dt { color: var(--accent); font: 600 11.5px/2.1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.steps dd { margin: 0; color: var(--muted); }
.flowchart { display: flex; align-items: stretch; gap: 8px; margin-top: 26px; }
.node { flex: 1 1 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 14px; font-weight: 600; line-height: 1.35; }
.node small { display: block; margin-top: 4px; color: var(--faint); font: 500 11px/1.3 var(--font-mono); }
.node.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.node.ok small { color: var(--ok); }
.flowchart .arrow { align-self: center; color: var(--faint); }
.also { margin-top: 20px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.also h3 { margin-bottom: 6px; font: 400 26px var(--font-display); }
.also ul { margin: 0; padding: 0; list-style: none; }
.also li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.also li:first-child { border-top: 0; }
.also b { font-weight: 600; }
.also span { color: var(--muted); }

/* ---------- 13. Console (Windows Terminal, always dark) ---------- */
.console-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.console-grid .section-head { margin-bottom: 0; }
.term {
  --t-bg: #0b1622; --t-bar: #050c14; --t-text: #e3eef5; --t-dim: #6f8797; --t-line: rgba(190, 225, 250, .1);
  --t-yellow: #f2e8a0; --t-cyan: #5fd7e8; --t-blue: #9fd4ff; --t-green: #6ee7a8; --t-amber: #ffc56b; --t-red: #ff7b7b;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(190, 230, 255, .16); border-radius: 14px; background: var(--t-bg); color: var(--t-text);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 30px -10px rgba(0, 0, 0, .4);
  font: 400 13px/1.6 var(--font-mono);
}
.term:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.term-bar { display: flex; align-items: flex-end; gap: 4px; height: 40px; padding: 0 0 0 8px; background: var(--t-bar); color: var(--t-dim); font: 400 12px var(--font-body); }
.term-tab { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px 8px 0 0; background: var(--t-bg); color: var(--t-text); }
.ps-icon { display: grid; place-items: center; width: 16px; height: 14px; border-radius: 3px; background: #2f6fb3; color: #fff; font: 700 8px/1 var(--font-mono); }
.tab-x { margin-left: 10px; color: var(--t-dim); font-size: 10px; }
.term-plus { align-self: center; padding: 0 8px; font-size: 16px; }
.win-ctrls { display: flex; align-self: stretch; margin-left: auto; }
.win-ctrls span { display: grid; place-items: center; width: 44px; color: var(--t-dim); font-size: 12px; }
.term-body { height: 340px; padding: 14px 16px; overflow-y: auto; cursor: text; scrollbar-width: thin; scrollbar-color: #24384a transparent; }
.tl { min-height: 1.6em; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl a { color: var(--t-cyan); }
.term-line { display: flex; align-items: center; gap: 8px; }
.prompt { color: var(--t-text); white-space: nowrap; }
.term-input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--t-yellow); font: inherit; caret-color: var(--t-text); }
.term-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--t-line); }
.term-chips button { padding: 5px 9px; border: 1px solid var(--t-line); border-radius: 6px; background: #0f1e2c; color: var(--t-dim); font: 500 12px var(--font-mono); cursor: pointer; transition: color .2s, border-color .2s; }
.term-chips button:hover { color: var(--t-text); border-color: var(--t-cyan); }
.c-cmd { color: var(--t-yellow); } .c-arg { color: var(--t-dim); } .c-dim { color: var(--t-dim); }
.c-ok { color: var(--t-green); } .c-warn { color: var(--t-amber); } .c-err { color: var(--t-red); } .c-cy { color: var(--t-cyan); } .c-blue { color: var(--t-blue); }

/* ---------- 14. Skills & credentials ---------- */
.skills { margin-bottom: clamp(70px, 9vw, 110px); border-bottom: 1px solid var(--line); }
.skill-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px 32px; align-items: start; padding: 24px 0; border-top: 1px solid var(--line); }
.skill-row h3 { font: 400 26px/1.2 var(--font-display); }
.cred-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cred { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); transition: border-color .3s, transform .4s var(--ease); }
.cred:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.cred.featured { grid-column: 1 / -1; padding: 30px 32px; }
.cred.featured h3 { font: 400 34px/1.1 var(--font-display); }
.cred small { display: block; margin-bottom: 8px; color: var(--accent); font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.cred h3 { font: 600 17px/1.45 var(--font-body); }
.cred p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.cred time { padding-top: 2px; color: var(--faint); font: 500 12.5px var(--font-mono); white-space: nowrap; }

/* ---------- 15. Contact & footer ---------- */
.contact { text-align: center; }
.contact h2 { margin: 0 auto 20px; font-size: clamp(56px, 9vw, 112px); line-height: .98; }
.contact .lead { max-width: 50ch; margin: 0 auto 36px; color: var(--muted); font-size: clamp(17px, 1.5vw, 19px); }
.email-row { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 26px; border-radius: 999px; font-size: clamp(16px, 2.2vw, 22px); }
.email-row a { font-weight: 500; text-decoration: none; }
.copy-btn { padding: 12px 18px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: 500 13px var(--font-mono); cursor: pointer; transition: background-color .3s; }
.copy-btn:hover { background: var(--accent); color: var(--on-accent); }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.contact-form { display: grid; gap: 16px; max-width: 640px; margin: 48px auto 0; padding: clamp(22px, 3vw, 30px); border-radius: var(--radius); text-align: left; }
.contact-form h3 { margin: 0; font: 400 28px/1.1 var(--font-display); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 6px; color: var(--muted); font: 500 13.5px var(--font-body); }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--text); font: 400 16px/1.5 var(--font-body); resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.contact-form textarea::placeholder { color: var(--faint); }
.contact-form .btn-enter:disabled { opacity: .6; cursor: wait; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* hidden trap for spam bots */
.form-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 14.5px; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: #e5534b; }
@media (max-width: 760px) { .form-row { grid-template-columns: 1fr; } }
.hint { margin-top: 26px; color: var(--faint); font: 400 13.5px var(--font-mono); }
.footer { padding: 32px 0 40px; border-top: 1px solid var(--line); color: var(--faint); font: 400 13px/1.6 var(--font-mono); }
.footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* ---------- 16. Scroll-in animation (kept gentle) ---------- */
.js .reveal { opacity: 0; translate: 0 14px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* ---------- 17. Screen sizes ---------- */
@media (min-width: 761px) {
  .container { width: min(var(--max), 100% - 240px); }   /* leaves room for the side nav */
}
@media (max-width: 1080px) {
  .lock-grid, .about-grid, .exp-grid, .study, .console-grid { grid-template-columns: minmax(0, 1fr); }
  .lock { min-height: 0; padding-top: 110px; }
  .lock-grid { justify-items: start; }
  /* one column: clock → your name card → number widgets, so your name is on the first screen */
  .lock-left { display: contents; }
  .lock-time { order: 1; }
  .signin { order: 2; }
  .widgets { order: 3; margin-top: 0; }
  .clock { font-size: clamp(64px, 10vw, 104px); }
  .signin { width: min(100%, 480px); }
  .exp-side { position: static; }
  .exp-now { display: none; }
  .facts { max-width: 380px; }
  .method, .cred-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { padding-bottom: 88px; }
  .sidenav { top: auto; bottom: 12px; left: 50%; translate: -50% 0; flex-direction: row; max-width: calc(100% - 24px); padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 26px; }
  .sidenav::-webkit-scrollbar { display: none; }
  .sidenav a { flex: none; width: 54px; padding: 8px 2px 7px; font-size: 9.5px; }
  .sidenav svg { width: 18px; height: 18px; }
  .cord { --rest: 64px; }
  .cord-hint { display: none; }
  .widgets { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps dd { margin-bottom: 14px; }
  .flowchart { flex-direction: column; }
  .flowchart .arrow { rotate: 90deg; }
  .also li, .skill-row, .tl-group { grid-template-columns: minmax(0, 1fr); }
  .tl-group h4 { margin-top: 4px; }
  .term-body { height: 300px; }
  .win-ctrls span { width: 34px; }
  .email-row { flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .container { width: min(var(--max), 100% - 32px); }
  .signin { padding: 24px 20px 20px; }
  .timeline { padding-left: 34px; }
  .tl-marker { left: -34px; }
  .cred { flex-direction: column; gap: 10px; }
}

/* ---------- 18. Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}