/* ============================================================
   Ahmed Can — portfolio
   Dark, glassy, latent-space. One accent: ice cyan.
   ============================================================ */

/* ---- tokens (accent + fonts are overridden live by Tweaks) ---- */
:root{
  --accent: #5ad1e6;
  --accent-soft: #5ad1e6;
  --font-display: 'Syne', sans-serif;

  --bg:        #07080c;
  --bg-2:      #0b0d13;
  --ink:       #f3f5f8;
  --ink-2:     #b7bdc9;
  --ink-3:     #7c8290;
  --ink-4:     #4a4f5b;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.05);
  --surface:   rgba(255,255,255,.025);
  --surface-2: rgba(255,255,255,.05);

  --font-ui:   'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --grain-opacity: .055;

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);
}

/* accent as rgb channels for alpha mixing */
:root{ --acc-rgb: 90,209,230; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html.no-smooth{ scroll-behavior:auto; }

body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.5;
  cursor:none;
}
/* Hide the native cursor everywhere on fine-pointer devices — links, buttons,
   role="button" and inputs otherwise reassert their own default cursor and
   the real pointer shows through next to the custom "Go" cursor. */
@media (hover:hover) and (pointer:fine){ *,*::before,*::after{ cursor:none !important; } }
@media (hover:none),(pointer:coarse){ body{ cursor:auto; } #cursor{ display:none; } }

::selection{ background:rgba(var(--acc-rgb),.28); color:#fff; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:none; }
img,svg{ display:block; }

/* ============================================================
   Background layers: grain + field canvas
   ============================================================ */
#grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:var(--grain-opacity); mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
}
body::before{ /* radial vignette + accent bloom */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(var(--acc-rgb),.10), transparent 55%),
    radial-gradient(100% 100% at 50% 100%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}

/* ============================================================
   Custom cursor
   ============================================================ */
#cursor{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none;
  mix-blend-mode:screen; will-change:transform; }
.cur-dot{ position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--accent); transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), opacity .25s; }
.cur-ring{ position:absolute; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(var(--acc-rgb),.7); transform:translate(-50%,-50%);
  transition:width .3s var(--ease-spring), height .3s var(--ease-spring), border-color .3s, opacity .3s; }
.cur-label{ position:absolute; transform:translate(-50%,-50%);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bg); background:var(--accent); padding:4px 8px; border-radius:100px;
  white-space:nowrap; opacity:0; transition:opacity .16s linear; font-weight:600; }
body[data-cursor="link"] .cur-ring{ width:50px; height:50px; border-color:rgba(var(--acc-rgb),.5); }
body[data-cursor="open"] .cur-ring,
body[data-cursor="explore"] .cur-ring{ width:14px; height:14px; opacity:0; }
body[data-cursor="open"] .cur-dot,
body[data-cursor="explore"] .cur-dot{ opacity:0; }
body[data-cursor="open"] .cur-label,
body[data-cursor="explore"] .cur-label{ opacity:1; }
body[data-pressed="true"] .cur-ring{ width:24px; height:24px; }
@media (hover:none),(pointer:coarse){ #cursor{ display:none; } }

/* ============================================================
   Intro loader
   ============================================================ */
#loader{ position:fixed; inset:0; z-index:9500; background:var(--bg);
  display:grid; place-items:center; transition:opacity .8s var(--ease); }
#loader-canvas{ width:100%; height:100%; position:absolute; inset:0; }
.loader-meta{ position:absolute; bottom:8vh; left:0; right:0; display:flex;
  justify-content:space-between; padding:0 var(--pad);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.boot-pct{ color:var(--accent); }
body[data-loading="false"] #loader{ opacity:0; pointer-events:none; }

/* ============================================================
   Top bar
   ============================================================ */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  padding:18px var(--pad); transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent; }
.topbar.scrolled{ background:rgba(7,8,12,.55); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line-2); }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:26px; height:26px; fill:var(--ink); transition:fill .3s, transform .5s var(--ease-spring); }
.brand:hover .brand-mark{ fill:var(--accent); transform:rotate(-8deg) scale(1.06); }
.brand-mark.sm{ width:18px; height:18px; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; }
.agent-status{ display:flex; align-items:center; gap:8px; margin-left:2px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); }
.agent-status .pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--acc-rgb),.5);} 70%{ box-shadow:0 0 0 7px rgba(var(--acc-rgb),0);} 100%{ box-shadow:0 0 0 0 rgba(var(--acc-rgb),0);} }
.topnav{ margin-left:auto; display:flex; gap:clamp(8px,1.6vw,26px); }
.topnav a{ position:relative; font-size:14px; color:var(--ink-2); padding:6px 2px; }
.topnav a span{ position:relative; }
.topnav a span::after{ content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:var(--accent); transition:right .35s var(--ease); }
.topnav a:hover{ color:var(--ink); }
.topnav a:hover span::after{ right:0; }
.ask-btn{ display:flex; align-items:center; gap:9px; padding:8px 15px;
  border:1px solid rgba(var(--acc-rgb),.4); border-radius:100px;
  background:rgba(var(--acc-rgb),.07); font-size:13.5px; color:var(--ink);
  transition:border-color .3s, background .3s, transform .3s var(--ease-spring); white-space:nowrap; }
.ask-btn:hover{ border-color:rgba(var(--acc-rgb),.7); background:rgba(var(--acc-rgb),.13); }
.ask-pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6); animation:pulse 2.4s infinite; }
.kbd{ font-family:var(--font-mono); font-size:11px; color:var(--ink-2);
  min-width:16px; text-align:center; }

/* ---- hamburger toggle (mobile only) ---- */
.nav-toggle{ display:none; margin-left:auto; width:44px; height:44px; flex-shrink:0;
  border-radius:11px; border:1px solid var(--line); background:var(--surface);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .3s, background .3s; }
.nav-toggle-bar{ width:20px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .35s var(--ease-spring), opacity .25s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- mobile menu overlay ---- */
.mobile-menu{ position:fixed; inset:0; z-index:190; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(28px,8vh,60px); padding:clamp(72px,14vh,120px) var(--pad) 40px;
  background:rgba(7,8,12,.88); backdrop-filter:blur(22px) saturate(1.2);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; }
body[data-menu="open"] .mobile-menu{ opacity:1; visibility:visible; transform:none; }
.mm-nav{ display:flex; flex-direction:column; gap:clamp(10px,2.6vh,20px); }
.mm-nav a{ display:flex; align-items:baseline; gap:16px; font-family:var(--font-display);
  font-weight:700; letter-spacing:-.02em; font-size:clamp(28px,8vw,44px); color:var(--ink);
  transition:color .25s; }
.mm-nav a:hover, .mm-nav a:active{ color:var(--accent); }
.mm-no{ font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--ink-3); }
.mm-foot{ display:flex; flex-direction:column; gap:14px; padding-top:clamp(20px,4vh,32px);
  border-top:1px solid var(--line); }
.mm-status{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.06em; color:var(--ink-3); }
.mm-status .pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6); animation:pulse 2.4s infinite; }
.mm-mail{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,5vw,24px);
  color:var(--ink); border-bottom:2px solid var(--line); padding-bottom:6px; align-self:flex-start; }
.mm-mail:hover{ color:var(--accent); border-color:var(--accent); }

@media (max-width:760px){
  .topnav{ display:none; }
  .agent-status{ display:none; }
  .ask-btn{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (min-width:761px){ .mobile-menu{ display:none; } }

/* ============================================================
   Generic section chrome
   ============================================================ */
main{ position:relative; z-index:10; }
section{ position:relative; padding:clamp(90px,13vh,180px) var(--pad); max-width:var(--maxw); margin:0 auto; }
.section-head{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(28px,5vh,56px); }
.section-index{ font-family:var(--font-mono); font-size:12px; color:var(--accent);
  border:1px solid rgba(var(--acc-rgb),.3); border-radius:6px; padding:3px 8px; }
.section-kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.section-title{ font-family:var(--font-display); font-weight:700; line-height:1.26;
  letter-spacing:-.02em; font-size:clamp(30px,5vw,62px); }
.section-title .muted{ color:var(--ink-3); font-weight:600; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--accent); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  max-width:none; padding-top:14vh; padding-bottom:8vh; }
.hero-inner{ max-width:var(--maxw); width:100%; margin:0 auto; }
.agent-chip{ display:inline-flex; align-items:center; gap:12px; padding:9px 16px 9px 11px;
  border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px); margin-bottom:clamp(24px,4vh,40px); }
.chip-avatar{ width:24px; height:24px; fill:var(--accent);
  filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.6)); }
.agent-line{ font-family:var(--font-mono); font-size:clamp(12px,1.4vw,14px); color:var(--ink-2); }
.caret{ color:var(--accent); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.hero-title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  line-height:1.22; font-size:clamp(38px,5.6vw,76px); margin-bottom:clamp(26px,4vh,40px); }
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.1em; }
.hero-title .line > span{ display:block; }
.accent-line > span{ color:var(--accent); text-shadow:0 0 40px rgba(var(--acc-rgb),.35); }

.hero-sub{ max-width:54ch; font-size:clamp(16px,1.7vw,21px); color:var(--ink-2);
  line-height:1.6; text-wrap:pretty; }
.hero-sub strong{ color:var(--ink); font-weight:600; }
.hero-sub em{ color:var(--accent); font-style:normal; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,5vh,46px); }
.btn{ position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:15px 24px; border-radius:13px; font-size:15px; font-weight:600;
  transition:transform .3s var(--ease-spring), background .3s, border-color .3s, color .3s; }
.btn-arrow{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn-primary{ background:var(--accent); color:#04161a; }
.btn-primary:hover{ box-shadow:0 14px 44px -10px rgba(var(--acc-rgb),.6); }
.btn-primary:hover .btn-arrow{ transform:translateX(4px); }
.btn-ghost{ border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.btn-ghost:hover{ border-color:rgba(var(--acc-rgb),.45); background:var(--surface-2); }
.kbd-inline{ display:flex; gap:2px; }
.kbd-inline .kbd{ background:rgba(255,255,255,.06); border-radius:5px; padding:1px 5px; }

.scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-word{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); }
.scroll-track{ width:1px; height:46px; background:var(--line); position:relative; overflow:hidden; }
.scroll-dot{ position:absolute; top:0; left:0; width:1px; height:14px; background:var(--accent);
  animation:scrolldrop 2.2s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{ transform:translateY(-16px);} 60%,100%{ transform:translateY(46px);} }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,90px); }
.about-big{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  line-height:1.22; font-size:clamp(26px,3.4vw,46px); text-wrap:balance; }
.about-big .hl{ color:var(--accent); }
.about-body p{ color:var(--ink-2); font-size:clamp(15px,1.5vw,17px); line-height:1.7; margin-bottom:18px; max-width:46ch; }
.about-body strong{ color:var(--ink); font-weight:600; }
.about-facts{ list-style:none; margin-top:30px; border-top:1px solid var(--line); }
.about-facts li{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-2); }
.fact-k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); min-width:96px; flex-shrink:0; }
.fact-v{ font-size:15px; color:var(--ink); }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

/* ============================================================
   WORK
   ============================================================ */
.work .section-title{ margin-bottom:clamp(36px,6vh,64px); }
.work-list{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.6vw,22px); }
.work-card{ position:relative; grid-column:span 3; border:1px solid var(--line);
  border-radius:20px; padding:clamp(24px,2.4vw,34px); background:var(--surface);
  overflow:hidden; transition:transform .5s var(--ease-spring), border-color .4s, background .4s;
  will-change:transform; }
.work-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:radial-gradient(120% 90% at var(--mx,50%) var(--my,0%), rgba(var(--acc-rgb),.14), transparent 60%);
  transition:opacity .4s; pointer-events:none; }
.work-card:hover{ transform:translateY(-5px); border-color:rgba(var(--acc-rgb),.4); background:var(--surface-2); }
.work-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.work-card:hover::before{ opacity:1; }
.work-card.flagship{ grid-column:span 6; display:block;
  border-color:rgba(var(--acc-rgb),.28); background:linear-gradient(120deg, rgba(var(--acc-rgb),.06), var(--surface) 55%); }
.flagship .wc-tagline{ max-width:62ch; }
.wc-top{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.wc-no{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); }
.wc-flag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(var(--acc-rgb),.4); border-radius:100px; padding:3px 11px; }
.wc-kind{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.wc-title{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(24px,2.4vw,34px); margin-bottom:14px; }
.flagship .wc-title{ font-size:clamp(30px,3.6vw,52px); }
.wc-tagline{ color:var(--ink-2); font-size:clamp(14px,1.4vw,16px); line-height:1.6; max-width:46ch; }
.wc-metrics{ display:flex; flex-wrap:wrap; gap:24px 30px; margin:24px 0 22px; }
.wc-metric{ display:flex; flex-direction:column; gap:3px; }
.m-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.6vw,52px); line-height:1;
  letter-spacing:-.02em; color:var(--accent); }
.m-cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.wc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.wc-tags span{ font-family:var(--font-mono); font-size:11px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:7px; padding:4px 9px; background:rgba(255,255,255,.02); }
.wc-open{ display:inline-flex; align-items:center; gap:7px; margin-top:22px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--accent);
  opacity:.0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.work-card:hover .wc-open, .work-card:focus-visible .wc-open{ opacity:1; transform:none; }
.wc-open svg{ width:14px; height:14px; }
.flagship .wc-right{ align-self:stretch; }
@media (max-width:900px){
  .work-list{ grid-template-columns:1fr; }
  .work-card, .work-card.flagship{ grid-column:1 / -1; }
  .work-card.flagship{ gap:8px; }
  .wc-open{ opacity:1; transform:none; }
}

/* ============================================================
   SKILLS  (grouped grid: icon + label)
   ============================================================ */
.skills-hint{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); margin-top:14px; }
.skills-grid{ margin-top:clamp(30px,5vh,52px); display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(20px,2.4vw,34px); }
.skill-col{ display:flex; flex-direction:column; gap:16px; }
.sk-cat{ display:flex; align-items:center; gap:10px; padding-bottom:12px;
  border-bottom:1px solid var(--line); }
.sk-cat-icon{ width:24px; height:24px; display:grid; place-items:center; color:var(--accent); }
.sk-cat-icon svg{ width:20px; height:20px; }
.sk-cat-name{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); }
.sk-chips{ display:flex; flex-direction:column; gap:9px; }
.skill{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .3s var(--ease), background .3s, transform .3s var(--ease-spring); }
.skill:hover{ border-color:rgba(var(--acc-rgb),.4); background:var(--surface-2); transform:translateX(4px); }
.sk-icon{ width:30px; height:30px; flex-shrink:0; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--line); color:var(--ink-2); background:rgba(255,255,255,.02);
  transition:color .3s, border-color .3s, background .3s; }
.sk-icon svg{ width:17px; height:17px; }
.skill:hover .sk-icon{ color:var(--accent); border-color:rgba(var(--acc-rgb),.4); }
.sk-label{ font-size:15px; color:var(--ink); letter-spacing:-.01em; }
.skill.is-primary{ border-color:rgba(var(--acc-rgb),.32);
  background:linear-gradient(110deg, rgba(var(--acc-rgb),.08), var(--surface) 70%); }
.skill.is-primary .sk-icon{ color:var(--accent); border-color:rgba(var(--acc-rgb),.45);
  background:rgba(var(--acc-rgb),.08); }
.skill.is-primary .sk-label{ font-weight:600; }

/* ============================================================
   EDUCATION
   ============================================================ */
.edu-card{ margin-top:clamp(30px,5vh,52px); display:flex; gap:clamp(20px,3vw,40px);
  border:1px solid var(--line); border-radius:22px; padding:clamp(26px,3vw,44px);
  background:linear-gradient(120deg, rgba(var(--acc-rgb),.05), var(--surface) 60%); }
.edu-icon{ flex-shrink:0; width:clamp(54px,5vw,72px); height:clamp(54px,5vw,72px);
  border-radius:16px; border:1px solid rgba(var(--acc-rgb),.3); display:grid; place-items:center;
  background:rgba(var(--acc-rgb),.06); }
.edu-icon svg{ width:54%; height:54%; fill:var(--accent);
  filter:drop-shadow(0 0 8px rgba(var(--acc-rgb),.5)); }
.edu-main{ flex:1; min-width:0; }
.edu-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.edu-degree{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(20px,2.2vw,30px); line-height:1.1; }
.edu-period{ font-family:var(--font-mono); font-size:13px; color:var(--accent); white-space:nowrap; }
.edu-school{ margin-top:8px; font-size:clamp(15px,1.5vw,17px); color:var(--ink-2); }
.edu-note{ margin-top:14px; max-width:62ch; color:var(--ink-2); line-height:1.65;
  font-size:15px; text-wrap:pretty; }
.edu-focus{ list-style:none; margin-top:24px; border-top:1px solid var(--line-2); }
.edu-focus li{ display:flex; gap:18px; padding:13px 0; border-bottom:1px solid var(--line-2); flex-wrap:wrap; }
.edu-focus .ef-k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); min-width:116px; flex-shrink:0; }
.edu-focus .ef-v{ font-size:15px; color:var(--ink); }
@media (max-width:620px){ .edu-card{ flex-direction:column; gap:20px; } }

/* ============================================================
   EXPERIENCE
   ============================================================ */
.exp-list{ margin-top:clamp(30px,5vh,52px); display:grid; gap:clamp(18px,2.4vw,26px); }
.exp-card{ position:relative; border:1px solid var(--line); border-radius:22px;
  padding:clamp(24px,3vw,40px) clamp(26px,3.4vw,46px); overflow:hidden;
  background:linear-gradient(120deg, rgba(var(--acc-rgb),.045), var(--surface) 60%);
  transition:border-color .4s ease, transform .4s ease; }
.exp-card:hover{ border-color:rgba(var(--acc-rgb),.35); transform:translateY(-3px); }
.exp-rail{ position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), transparent); opacity:.7; }
.exp-head{ display:flex; flex-direction:column; gap:6px; }
.exp-titleline{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.exp-role{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(19px,2.1vw,28px); line-height:1.1; }
.exp-type{ color:var(--ink-3); font-weight:500; }
.exp-period{ font-family:var(--font-mono); font-size:13px; color:var(--accent); white-space:nowrap; }
.exp-org{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); }
.exp-note{ margin-top:16px; max-width:64ch; color:var(--ink-2); line-height:1.7;
  font-size:clamp(15px,1.5vw,16px); text-wrap:pretty; }
.exp-note strong{ color:var(--ink); font-weight:600; }
.exp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.exp-tags span{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:999px; padding:5px 12px; }
.exp-tags span.primary{ color:var(--accent); border-color:rgba(var(--acc-rgb),.35);
  background:rgba(var(--acc-rgb),.06); }
@media (max-width:620px){ .exp-titleline{ flex-direction:column; gap:4px; } }

/* ============================================================
   ASK THE AGENT
   ============================================================ */
.agent-intro{ max-width:60ch; margin-top:18px; font-size:clamp(15px,1.6vw,18px);
  color:var(--ink-2); line-height:1.65; text-wrap:pretty; }
.agent-console{ margin-top:clamp(28px,4vh,46px); display:grid; grid-template-columns:240px 1fr;
  gap:1px; border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:var(--line);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.7); }
.ac-rail{ background:linear-gradient(180deg, rgba(var(--acc-rgb),.06), rgba(0,0,0,.25));
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:22px; }
.ac-avatar{ position:relative; width:64px; height:64px; display:grid; place-items:center; }
.ac-avatar svg{ width:40px; height:40px; fill:var(--accent);
  filter:drop-shadow(0 0 10px rgba(var(--acc-rgb),.6)); z-index:1; }
.ac-orbit{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--acc-rgb),.4);
  border-top-color:var(--accent); animation:spin 3.4s linear infinite; opacity:.45; transition:opacity .3s; }
.agent-console.thinking .ac-orbit{ opacity:1; animation-duration:.9s; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.ac-status{ display:flex; flex-direction:column; gap:6px; }
.ac-state{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:13px; color:var(--ink); }
.ac-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6); animation:pulse 2.4s infinite; }
.ac-meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.ac-knows{ list-style:none; margin-top:auto; display:flex; flex-direction:column; gap:9px; }
.ac-knows li{ position:relative; padding-left:18px; font-family:var(--font-mono);
  font-size:11.5px; color:var(--ink-3); line-height:1.4; }
.ac-knows li::before{ content:""; position:absolute; left:0; top:6px; width:7px; height:7px;
  border:1px solid var(--accent); border-radius:2px; }

.ac-main{ background:rgba(8,9,14,.72); display:flex; flex-direction:column;
  min-width:0; padding:clamp(22px,2.6vw,34px); gap:20px; }
.ac-screen{ min-height:200px; display:flex; flex-direction:column; gap:18px; }
.ac-query{ display:flex; gap:10px; font-family:var(--font-mono); font-size:14px; color:var(--ink-2);
  padding-bottom:16px; border-bottom:1px solid var(--line-2); }
.ac-query[hidden]{ display:none; }
.ac-query .ac-arrow{ color:var(--accent); flex-shrink:0; }
.ac-answer{ font-size:clamp(17px,1.9vw,22px); line-height:1.55; color:var(--ink);
  font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; text-wrap:pretty; }
.ac-answer.idle{ color:var(--ink-3); font-family:var(--font-ui); font-weight:400;
  font-size:clamp(15px,1.6vw,17px); }
.ac-answer-text.dim{ color:var(--ink-3); }
.agent-console.thinking .ac-answer{ font-family:var(--font-ui); font-weight:400;
  font-size:clamp(15px,1.6vw,17px); }
.ac-caret{ display:none; width:9px; height:1.05em; vertical-align:-2px; margin-left:3px;
  background:var(--accent); animation:blink 1s steps(1) infinite; }
.agent-console.thinking .ac-caret, .agent-console.typing .ac-caret{ display:inline-block; }

.ac-suggest{ display:flex; flex-wrap:wrap; gap:9px; }
.ac-suggest button{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:100px; padding:8px 14px; background:rgba(255,255,255,.02);
  transition:border-color .3s, background .3s, color .3s, transform .3s var(--ease-spring); cursor:none; }
.ac-suggest button:hover{ border-color:rgba(var(--acc-rgb),.5); color:var(--ink);
  background:rgba(var(--acc-rgb),.07); transform:translateY(-2px); }
.ac-form{ display:flex; align-items:center; gap:12px; padding:6px 6px 6px 16px;
  border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03);
  transition:border-color .3s; }
.ac-form:focus-within{ border-color:rgba(var(--acc-rgb),.5); }
.ac-prompt{ font-family:var(--font-mono); color:var(--accent); font-size:16px; }
#ac-input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--ink);
  font-family:var(--font-ui); font-size:16px; }
#ac-input::placeholder{ color:var(--ink-4); }
.ac-send{ flex-shrink:0; width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent); color:#04161a; transition:transform .3s var(--ease-spring), box-shadow .3s; cursor:none; }
.ac-send svg{ width:20px; height:20px; }
.ac-send:hover{ box-shadow:0 10px 30px -8px rgba(var(--acc-rgb),.6); }
.ac-send:disabled{ opacity:.4; cursor:none; }
@media (max-width:760px){ .agent-console{ grid-template-columns:1fr; }
  .ac-knows{ display:none; } .ac-rail{ flex-direction:row; align-items:center; gap:18px; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding-bottom:0; }
.contact-inner{ padding-bottom:clamp(60px,9vh,110px); }
.agent-chip.closing{ margin-bottom:clamp(26px,4vh,40px); }
.contact-title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  line-height:1.24; font-size:clamp(30px,4.4vw,58px); }
.contact-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:28px; margin-top:clamp(34px,5vh,56px); }
.contact-mails{ display:flex; flex-direction:column; gap:clamp(18px,2.6vh,30px); }
.contact-mail{ display:inline-flex; flex-direction:column; gap:6px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3vw,40px);
  letter-spacing:-.02em; padding-bottom:8px; border-bottom:2px solid var(--line);
  transition:border-color .4s, color .4s; }
.cm-kind{ font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-2); transition:color .4s; }
.cm-row{ display:inline-flex; align-items:center; gap:16px; }
.contact-mail svg{ width:clamp(24px,2.6vw,34px); height:clamp(24px,2.6vw,34px); transition:transform .35s var(--ease); }
.contact-mail:hover{ border-color:var(--accent); color:var(--accent); }
.contact-mail:hover .cm-kind{ color:var(--accent); }
.contact-mail:hover svg{ transform:translateX(6px); }
.contact-links{ list-style:none; display:flex; gap:8px 26px; flex-wrap:wrap; }
.contact-links a{ position:relative; font-size:15px; color:var(--ink-2); }
.contact-links a span::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:var(--accent); transition:right .35s var(--ease); }
.contact-links a:hover{ color:var(--ink); }
.contact-links a:hover span::after{ right:0; }

.site-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:26px var(--pad); border-top:1px solid var(--line); max-width:var(--maxw); margin:0 auto;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-3); }
.foot-brand{ display:flex; align-items:center; gap:9px; color:var(--ink-2); }
.foot-brand .brand-mark{ fill:var(--ink-3); }

/* shared fade keyframe (used by the case-study overlay) */
@keyframes fade{ from{ opacity:0; } }

/* ============================================================
   CASE STUDY OVERLAY
   ============================================================ */
.case{ position:fixed; inset:0; z-index:7000; display:none; }
.case.open{ display:block; }
.case-scrim{ position:absolute; inset:0; background:rgba(4,5,8,.78); backdrop-filter:blur(10px); animation:fade .4s; }
.case-panel{ position:absolute; top:0; right:0; height:100%; width:min(780px,94vw);
  background:linear-gradient(180deg, var(--bg-2), var(--bg)); border-left:1px solid var(--line);
  overflow-y:auto; padding:clamp(28px,4vw,64px); box-shadow:-40px 0 120px -20px rgba(0,0,0,.7);
  transform:translateX(100%); transition:transform .6s var(--ease-spring); }
.case.open .case-panel{ transform:none; }
.case-close{ position:absolute; top:24px; right:24px; width:42px; height:42px; border-radius:11px;
  border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2);
  background:var(--surface); transition:border-color .3s, color .3s, transform .3s; z-index:2; }
.case-close:hover{ border-color:rgba(var(--acc-rgb),.5); color:var(--accent); transform:rotate(90deg); }
.case-eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.case-eyebrow .ce-no{ color:var(--ink-3); }
.case-title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1;
  font-size:clamp(34px,5vw,60px); margin-bottom:14px; }
.case-lede{ font-size:clamp(16px,1.7vw,20px); color:var(--ink-2); line-height:1.6; max-width:52ch; text-wrap:pretty; }
.case-metrics{ display:flex; flex-wrap:wrap; gap:14px; margin:30px 0; }
.case-metric{ flex:1; min-width:120px; border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  background:var(--surface); }
.case-metric .cm-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,40px);
  color:var(--accent); line-height:1; letter-spacing:-.02em; }
.case-metric .cm-cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); margin-top:8px; display:block; }
.case-block{ margin-top:32px; }
.case-block h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.case-block h4::before{ content:""; width:18px; height:1px; background:var(--accent); }
.case-block p{ color:var(--ink-2); font-size:16px; line-height:1.7; margin-bottom:14px; }
.case-block strong{ color:var(--ink); font-weight:600; }
.case-arch{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.arch-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; background:rgba(255,255,255,.02); }
.arch-row .ar-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(var(--acc-rgb),.3); border-radius:6px; padding:3px 8px; flex-shrink:0; }
.arch-row .ar-text{ font-size:14px; color:var(--ink-2); }
.case-stack{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.case-stack span{ font-family:var(--font-mono); font-size:12px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:8px; padding:6px 11px; }
.case-role{ display:flex; gap:20px; flex-wrap:wrap; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.case-role div{ display:flex; flex-direction:column; gap:4px; }
.case-role .cr-k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.case-role .cr-v{ font-size:15px; color:var(--ink); }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks{ position:fixed; top:84px; right:20px; z-index:8800; width:288px;
  background:rgba(11,13,19,.95); border:1px solid var(--line); border-radius:16px;
  backdrop-filter:blur(20px); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); overflow:hidden;
  font-family:var(--font-ui); }
.tweaks[hidden]{ display:none; }
.tweaks-head{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line-2); cursor:grab; }
.tweaks-title{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:14px; }
.tweaks-title .brand-mark{ fill:var(--accent); }
.tweaks-close{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  color:var(--ink-3); font-size:13px; transition:background .2s, color .2s; }
.tweaks-close:hover{ background:var(--surface-2); color:var(--ink); }
.tweaks-body{ padding:16px; display:flex; flex-direction:column; gap:18px; max-height:70vh; overflow-y:auto; }
.tw-group{ display:flex; flex-direction:column; gap:9px; }
.tw-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.tw-swatches{ display:flex; gap:8px; }
.tw-sw{ width:30px; height:30px; border-radius:9px; border:2px solid transparent; transition:transform .2s, border-color .2s; cursor:none; }
.tw-sw:hover{ transform:scale(1.1); }
.tw-sw.active{ border-color:#fff; }
.tw-seg{ display:flex; gap:4px; background:rgba(255,255,255,.04); border-radius:10px; padding:3px; }
.tw-seg button{ flex:1; padding:7px 6px; border-radius:7px; font-family:var(--font-ui); font-size:12px;
  color:var(--ink-3); transition:background .2s, color .2s; cursor:none; }
.tw-seg button.active{ background:var(--accent); color:#04161a; font-weight:600; }
.tw-range{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px;
  background:var(--line); outline:none; cursor:none; }
.tw-range::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); cursor:none; box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18); }
.tw-range::-moz-range-thumb{ width:16px; height:16px; border:none; border-radius:50%; background:var(--accent); }
.tw-rowbetween{ display:flex; justify-content:space-between; align-items:center; }
.tw-val{ font-family:var(--font-mono); font-size:11px; color:var(--accent); }
.tw-text{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; color:var(--ink); font-family:var(--font-ui); font-size:13px; outline:none; resize:none; cursor:text; }
.tw-text:focus{ border-color:rgba(var(--acc-rgb),.4); }
@media (max-width:560px){ .tweaks{ left:12px; right:12px; width:auto; } }

/* ============================================================
   Reveals
   ============================================================ */
[data-reveal]{ opacity:0; }
[data-reveal="fade"]{ transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal="fade"].in{ opacity:1; transform:none; }
[data-reveal="line"] > span{ transform:translateY(102%); transition:transform .9s var(--ease-spring); display:block; }
[data-reveal="line"]{ opacity:1; }
[data-reveal="line"].in > span{ transform:none; }
[data-reveal="lines"]{ opacity:1; }
[data-reveal="lines"] .rl{ display:block; overflow:hidden; padding-bottom:.12em; }
[data-reveal="lines"] .rl > span{ display:block; transform:translateY(110%); transition:transform .8s var(--ease-spring); }
[data-reveal="lines"].in .rl > span{ transform:none; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-reveal] > span, [data-reveal] .rl > span{ transform:none !important; }
  .scroll-dot, .agent-status .pulse{ animation:none !important; }
}

/* ---- small-screen polish ---- */
@media (max-width:760px){
  .topbar{ padding:14px var(--pad); }
  .scroll-cue{ display:none; }
}
@media (max-width:560px){
  section{ padding:clamp(70px,10vh,120px) var(--pad); }
  .hero{ padding-top:18vh; }
  .agent-console{ box-shadow:0 20px 60px -30px rgba(0,0,0,.7); }
  .ac-rail{ flex-wrap:wrap; }
  .contact-actions{ flex-direction:column; align-items:flex-start; gap:36px; }
  .site-footer{ justify-content:flex-start; gap:8px 16px; }
}
@media (max-width:380px){
  .brand-name{ font-size:15px; }
  .case-panel{ width:100vw; }
}