/* =========================================================
   Dan Mutia x trionn.com clone
   Palette + type captured from live trionn.com
   ========================================================= */

:root {
  --bg: #040508;
  --bg-soft: #0a0b0f;
  --white: #ffffff;
  --text: #d8d8d8;
  --muted: #8a8a90;
  --panel-gray: #c8c8c8;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: #434343;
  --glass-line: rgba(255, 255, 255, 0.18);
  --accent: #ff5a1f;
  --accent-cool: #3a7bff;

  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", monospace;
  --font-display: "Bebas Neue", "Inter", sans-serif;

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --pad-x: clamp(20px, 5vw, 80px);
  --maxw: 1600px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--white); color: var(--bg); }

/* ---------- Shared mono label ---------- */
.side-label { display: none; }
.kicker,
.footer-kicker,
.tools-kicker,
.process-intro-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Custom cursor ---------- */
.cursor, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor { width: 34px; height: 34px; border: 1px solid var(--white); transition: width .25s var(--ease-soft), height .25s var(--ease-soft), background .25s; }
.cursor-dot { width: 5px; height: 5px; background: var(--white); }
.cursor.grow { width: 64px; height: 64px; background: rgba(255,255,255,.08); }
@media (hover: none) { .cursor, .cursor-dot { display: none; } }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--pad-x);
  transition: transform .5s var(--ease-soft), background .4s, backdrop-filter .4s;
}
.site-header.hidden { transform: translateY(-110%); }
.site-header.scrolled { background: rgba(4,5,8,.72); backdrop-filter: blur(14px); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); }
.brand-glyph { display: inline-flex; }
.brand-icon { height: 30px; width: auto; display: block; }
.footer-logo-icon { height: 54px; width: auto; margin-bottom: 20px; display: block; }
.brand-word { font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; font-size: 18px; }
.brand-word sup { font-size: .5em; top: -.9em; font-weight: 500; }
.brand-word.big { font-size: clamp(48px, 9vw, 120px); font-weight: 700; letter-spacing: -.02em; color: var(--white); }

.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 34px;
}
.nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding: 4px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-soft);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header-right { display: flex; align-items: center; gap: 12px; }

.sound-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text);
  transition: border-color .3s, color .3s;
}
.sound-toggle:hover { border-color: var(--white); color: var(--white); }
.sound-toggle.muted .wave { opacity: .2; }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .3s var(--ease-soft), background .3s, color .3s, border-color .3s;
}
.btn-talk { background: var(--white); color: var(--bg); }
.btn-talk:hover { background: var(--panel-gray); }
.btn-menu { border: 1px solid var(--line); color: var(--white); }
.btn-menu:hover { border-color: var(--white); }
.menu-x { transition: transform .3s var(--ease-soft); }
body.menu-open .menu-x { transform: rotate(90deg); }

/* ---------- Overlay menu ---------- */
.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--bg);
  padding: clamp(120px, 18vh, 220px) var(--pad-x) 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-soft);
  pointer-events: none;
}
body.menu-open .overlay-menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.overlay-menu nav { display: flex; flex-direction: column; gap: clamp(4px, 1vw, 10px); }
.overlay-menu nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(44px, 10vw, 130px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--white);
  position: relative;
  width: fit-content;
  opacity: .35;
  transition: opacity .35s, padding-left .4s var(--ease-soft);
}
.overlay-menu nav a::before {
  content: attr(data-idx);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  vertical-align: super;
  margin-right: 14px;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}
.overlay-menu nav a:hover { opacity: 1; padding-left: 20px; }
.overlay-foot { display: flex; gap: 40px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.overlay-foot a:hover { color: var(--white); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad-x);
  overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 60% at 70% 45%, rgba(58,123,255,.08), transparent 70%),
    radial-gradient(50% 50% at 40% 60%, rgba(255,90,31,.06), transparent 70%);
}
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 0 auto; pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }

.hero-lead { max-width: 60vw; }
.hero-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(48px, 8.5vw, 150px);
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--white);
}
.hero-title .line { display: block; overflow: visible; padding-bottom: 0.06em; }
.hero-title .line > * { display: inline-block; }
.dot { color: var(--accent); }
.rotator { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.02em 0.06em 0.18em; margin: 0 -0.06em -0.18em; }
.rot-word { display: inline-block; will-change: transform; }

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  margin-top: clamp(28px, 4vw, 48px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--white);
  min-width: 240px;
  justify-content: space-between;
  transition: border-color .4s;
}
.hero-link:hover { border-color: var(--white); }
.hero-link-arrow { transition: transform .4s var(--ease-soft); }
.hero-link:hover .hero-link-arrow { transform: translateX(8px); }

.hero-meta {
  position: absolute;
  right: 0;
  bottom: clamp(20px, 6vh, 60px);
  z-index: 3;
  max-width: 340px;
  text-align: right;
}
.hero-est { display: inline-flex; align-items: center; gap: 14px; justify-content: flex-end; color: var(--white); }
.est-mark { color: var(--text); }
.est-year { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; padding-right: 14px; border-right: 1px solid var(--line); }
.est-copy { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; line-height: 1.5; color: var(--text); text-align: left; }
.hero-mission { margin: 22px 0 0; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.45; color: var(--text); letter-spacing: -.01em; }

.hero-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 26px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text);
  text-align: center;
}
.hint-ico { margin: 0 4px; }

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.section {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(90px, 14vh, 180px) var(--pad-x);
}
.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 80px); }
.kicker { display: inline-block; margin-bottom: 20px; }
.section-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--white);
}
.section-intro { margin: 22px 0 0; font-size: clamp(16px, 1.3vw, 20px); color: var(--muted); max-width: 46ch; }

/* ---------- About ---------- */
.about { padding-left: calc(var(--pad-x) + 40px); }
.about-lede {
  font-size: clamp(24px, 3.4vw, 54px);
  line-height: 1.18;
  letter-spacing: -.03em;
  color: var(--white);
  font-weight: 400;
  max-width: 24ch;
  margin: 0 0 clamp(60px, 10vw, 140px);
}
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.stack-head { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.stack-head span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: .02em;
  color: var(--white);
}
.about-side p { font-size: clamp(15px, 1.2vw, 18px); color: var(--muted); max-width: 40ch; margin: 0 0 30px; }

.vlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
}
.vlink-text { position: relative; }
.vlink-text::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-soft);
}
.vlink:hover .vlink-text::after { transform: scaleX(1); transform-origin: left; }
.vlink span[aria-hidden] { transition: transform .4s var(--ease-soft); }
.vlink:hover span[aria-hidden] { transform: translateX(6px); }

/* ---------- Values marquee ---------- */
.values {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px) 0 clamp(18px, 2vw, 28px);
  overflow: hidden;
  position: relative;
}
.values-track {
  display: flex;
  gap: 40px;
  align-items: center;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.values-track span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 110px);
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--glass-line);
}
.values-track .v-dot { -webkit-text-stroke: 0; color: var(--accent); font-size: clamp(20px, 3vw, 44px); }
.values-sub { text-align: center; margin: 20px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Snapshot / metrics ---------- */
.snapshot-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(50px, 8vw, 100px); }
.snap-title { margin: 0; font-size: clamp(30px, 4vw, 68px); line-height: 1.05; letter-spacing: -.04em; color: var(--white); font-weight: 500; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.metric { background: var(--bg); padding: clamp(30px, 4vw, 56px) clamp(20px, 2.5vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.metric-num { font-family: var(--font-body); font-weight: 600; font-size: clamp(46px, 6vw, 96px); line-height: .9; letter-spacing: -.04em; color: var(--white); }
.metric-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }

/* ---------- Featured work ---------- */
.feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.feature-visual { position: relative; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.feature-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.05); transition: transform 1.1s var(--ease-soft), filter .6s; }
.feature:hover .feature-visual img { transform: scale(1.05); filter: grayscale(0); }
.feature-tag { position: absolute; top: 16px; left: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--white); color: var(--bg); padding: 6px 12px; border-radius: 100px; }
.feature-title { margin: 0 0 18px; font-size: clamp(28px, 3vw, 46px); font-weight: 500; letter-spacing: -.03em; color: var(--white); }
.feature-desc { margin: 0 0 30px; color: var(--muted); max-width: 40ch; }
.feature-stats { display: flex; gap: 44px; margin-bottom: 34px; flex-wrap: wrap; }
.feature-stats strong { display: block; font-size: clamp(24px, 2.4vw, 38px); color: var(--white); font-weight: 600; letter-spacing: -.02em; }
.feature-stats span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.work-note { margin: clamp(50px, 7vw, 90px) 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); max-width: 40ch; }

/* ---------- Services ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--bg); padding: clamp(30px, 3vw, 50px); min-height: 280px; display: flex; flex-direction: column; transition: background .4s; position: relative; }
.card:hover { background: var(--bg-soft); }
.card-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); margin-bottom: auto; }
.card h3 { margin: 40px 0 12px; font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; letter-spacing: -.02em; color: var(--white); }
.card p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; }

/* ---------- Tools strip ---------- */
.tools { text-align: center; padding-top: clamp(60px, 8vw, 100px); padding-bottom: clamp(60px, 8vw, 100px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; }
.tools-kicker { display: block; margin-bottom: 40px; }
.tools-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 4vw, 70px); }
.tools-row span { font-family: var(--font-body); font-weight: 600; font-size: clamp(18px, 2vw, 30px); letter-spacing: -.02em; color: var(--muted); opacity: .55; transition: opacity .3s, color .3s; }
.tools-row span:hover { opacity: 1; color: var(--white); }

/* ---------- Testimonials ---------- */
.testi-head { margin: 0 0 clamp(40px, 5vw, 70px); font-size: clamp(28px, 3.6vw, 60px); line-height: 1.1; letter-spacing: -.035em; color: var(--white); font-weight: 500; }
.clients { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 60px); margin-bottom: clamp(50px, 7vw, 90px); }
.clients span { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; color: var(--muted); }
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quote { background: var(--bg); margin: 0; padding: clamp(30px, 3vw, 50px); display: flex; flex-direction: column; gap: 20px; }
.stars { color: var(--accent); font-size: 13px; letter-spacing: 3px; }
.quote blockquote { margin: 0; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--text); letter-spacing: -.01em; }
.quote figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.q-name { color: var(--white); font-weight: 600; }
.q-role { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.btn-become { margin: clamp(50px, 6vw, 80px) auto 0; display: flex; width: fit-content; background: var(--white); color: var(--bg); }
.btn-become:hover { background: var(--panel-gray); }

/* ---------- Process ---------- */
.process-intro { margin: 0 0 clamp(50px, 7vw, 90px); font-size: clamp(20px, 2.4vw, 36px); line-height: 1.25; letter-spacing: -.03em; color: var(--white); max-width: 24ch; font-weight: 400; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step { background: var(--bg); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.step-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.step h3 { margin: 0; font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; color: var(--white); letter-spacing: -.02em; }
.step p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ---------- FAQ ---------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(24px, 3vw, 38px) 0;
  text-align: left;
  font-size: clamp(19px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--white);
  transition: color .3s;
}
.acc-trigger:hover { color: var(--panel-gray); }
.acc-icon { font-family: var(--font-mono); font-size: 26px; color: var(--muted); transition: transform .4s var(--ease-soft); flex-shrink: 0; }
.acc-item.open .acc-icon { transform: rotate(45deg); color: var(--accent); }
.acc-panel { overflow: hidden; height: 0; }
.acc-panel p { margin: 0; padding: 0 0 clamp(24px, 3vw, 38px); max-width: 60ch; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 12vh, 160px) var(--pad-x) 40px; }
.footer-cta { border-top: 1px solid var(--line); padding-top: clamp(50px, 7vw, 90px); margin-bottom: clamp(60px, 9vw, 120px); }
.footer-kicker { display: block; margin-bottom: 24px; }
.footer-title { margin: 0 0 26px; font-size: clamp(44px, 8vw, 130px); line-height: .98; letter-spacing: -.045em; color: var(--white); font-weight: 600; }
.footer-em { color: var(--muted); }
.footer-copy { max-width: 52ch; color: var(--muted); margin: 0 0 36px; font-size: clamp(15px, 1.2vw, 18px); }
.footer-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-ghost { border: 1px solid var(--line); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(30px, 5vw, 60px); padding-bottom: clamp(50px, 7vw, 90px); border-bottom: 1px solid var(--line); }
.footer-brand p { color: var(--muted); max-width: 24ch; margin: 20px 0 0; font-size: 15px; }
.footer-col h4 { margin: 0 0 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.footer-col a, .footer-col .addr { display: block; margin-bottom: 12px; color: var(--text); font-size: 15px; transition: color .3s; }
.footer-col a:hover { color: var(--white); }
.footer-col .addr { color: var(--muted); }

.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 30px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal.in { opacity: 1; transform: none; }
.reveal-lines { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.reveal-lines.in { opacity: 1; transform: none; }

/* =========================================================
   ADDED SECTIONS (story, sites, experience, competencies, stack, education)
   ========================================================= */
.accent-soft { color: var(--muted); }

/* Story */
.story-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 5vw, 70px); max-width: 1000px; }
.story-body p { margin: 0; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; color: var(--text); letter-spacing: -.01em; }

/* Sites built & ranked */
.sites-title { margin: clamp(60px, 8vw, 100px) 0 clamp(24px, 3vw, 40px); font-size: clamp(20px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; color: var(--white); }
.sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.site-card { background: var(--bg); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 14px; min-height: 150px; transition: background .4s; }
.site-card:hover { background: var(--bg-soft); }
.site-name { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; letter-spacing: -.02em; color: var(--white); }
.site-url { margin-top: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); transition: color .3s; }
.site-card:hover .site-url { color: var(--accent); }
.site-thumb { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); background: var(--bg-soft); }
.site-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-soft); }
.site-card:hover .site-thumb img { transform: scale(1.05); }

/* Experience */
.exp-list { display: flex; flex-direction: column; }
.exp { display: grid; grid-template-columns: 280px 1fr; gap: clamp(24px, 4vw, 70px); padding: clamp(36px, 4vw, 56px) 0; border-top: 1px solid var(--line); }
.exp:last-child { border-bottom: 1px solid var(--line); }
.exp-meta { display: flex; flex-direction: column; gap: 10px; }
.exp-years { font-family: var(--font-body); font-weight: 600; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; color: var(--white); }
.exp-co { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); line-height: 1.5; }
.exp-body h3 { margin: 0 0 14px; font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; letter-spacing: -.02em; color: var(--white); }
.exp-lead { margin: 0 0 26px; color: var(--text); max-width: 60ch; }
.exp-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 50px); }
.exp-cols > div:only-child { grid-column: 1 / -1; }
.exp-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.exp-body ul { display: flex; flex-direction: column; gap: 10px; }
.exp-body li { position: relative; padding-left: 20px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.exp-body li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--muted); }

/* Competencies */
.comp-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.comp-list li { display: flex; align-items: baseline; gap: 18px; padding: clamp(18px, 2vw, 28px) 4px; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em; color: var(--white); transition: padding-left .35s var(--ease-soft), color .3s; }
.comp-list li span { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: .06em; }
.comp-list li:hover { padding-left: 16px; color: var(--panel-gray); }
@media (min-width: 681px) { .comp-list li:nth-child(odd) { padding-right: 40px; } }

/* Full stack */
.stack-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.stack-row { display: grid; grid-template-columns: 260px 1fr; gap: clamp(20px, 3vw, 50px); padding: clamp(24px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.stack-cat { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; font-size: 14px; color: var(--text); cursor: default; transition: transform .35s var(--ease-soft), border-color .35s, color .35s, box-shadow .35s, background .35s; }
.chips span:hover { border-color: var(--white); color: var(--white); }

/* Education */
.edu-timeline { border-top: 1px solid var(--line); }
.edu-item { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 4vw, 60px); padding: clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.edu-years { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--accent); }
.edu-body h3 { margin: 0 0 8px; font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; letter-spacing: -.02em; color: var(--white); }
.edu-body p { margin: 0; color: var(--muted); }

/* Wide testimonial */
.quote-wide { grid-column: 1 / -1; }

/* Selected work — pinned stacking scroll */
.work { position: relative; }
.work-head { padding-bottom: clamp(30px, 4vw, 50px); }
.stack-scroll { position: relative; }
.panel {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  display: grid;
  place-items: center;
  padding: clamp(70px, 9vh, 120px) var(--pad-x);
  background: var(--bg);
  will-change: transform, opacity;
  transform-origin: center center;
}
.panel-card { width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: center; }
.panel-media { overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--bg-soft); }
.panel-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.03); will-change: transform; }
.panel-index { font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; color: var(--white); }
.panel-index i { font-style: normal; color: var(--line-strong); }
.panel-title { margin: 14px 0 10px; font-size: clamp(34px, 5vw, 88px); font-weight: 500; line-height: .98; letter-spacing: -.04em; color: var(--white); }
.panel-cat { margin: 0 0 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.panel-desc { margin: 0 0 28px; color: var(--muted); max-width: 34ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; }
.panel-stats { display: flex; gap: 40px; margin: 0 0 28px; flex-wrap: wrap; }
.panel-stats strong { display: block; font-size: clamp(22px, 2.2vw, 34px); color: var(--white); font-weight: 600; letter-spacing: -.02em; }
.panel-stats span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* =========================================================
   INNER PAGES (page hero, case studies, carousels, capabilities, tool groups)
   ========================================================= */
.page-hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(140px, 20vh, 240px) var(--pad-x) clamp(50px, 8vw, 100px); }
.page-hero .kicker { display: block; margin-bottom: 22px; }
.page-hero-title { margin: 0; font-weight: 500; font-size: clamp(48px, 9vw, 150px); line-height: .95; letter-spacing: -.05em; color: var(--white); }
.page-hero-title em { font-style: normal; color: var(--muted); }
.page-hero-tag { margin: clamp(24px, 3vw, 40px) 0 0; max-width: 46ch; font-size: clamp(16px, 1.4vw, 21px); color: var(--muted); line-height: 1.5; }
.page-hero.has-media { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.page-hero.has-media .page-hero-tag { max-width: 40ch; }
.page-hero-media { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-soft); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Case studies */
.cases { display: flex; flex-direction: column; }
.case { border-top: 1px solid var(--line); padding: clamp(50px, 7vw, 100px) 0; }
.case-top { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.case-index { font-family: var(--font-body); font-weight: 600; font-size: clamp(28px, 3vw, 48px); color: var(--accent); letter-spacing: -.02em; }
.case-name { margin: 0; font-size: clamp(34px, 5vw, 84px); font-weight: 500; letter-spacing: -.04em; color: var(--white); line-height: 1; }
.case-url { display: inline-block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--accent); }
.case-url:hover { color: var(--white); }
.case-tagline { margin: 0 0 clamp(36px, 5vw, 60px); color: var(--muted); font-size: clamp(16px, 1.3vw, 20px); }
.case-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 5vw, 80px); margin-bottom: clamp(40px, 5vw, 70px); }
.case-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.case-sub::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.case-cols p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; max-width: 42ch; }
.case-did { display: flex; flex-direction: column; gap: 14px; }
.case-did li { position: relative; padding-left: 22px; color: var(--text); line-height: 1.5; font-size: clamp(15px, 1.1vw, 17px); }
.case-did li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--accent); }
.case-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.case-results .res { background: var(--bg); padding: clamp(24px, 3vw, 40px); }
.res-value { display: block; font-family: var(--font-body); font-weight: 600; font-size: clamp(30px, 4vw, 60px); color: var(--accent); letter-spacing: -.03em; line-height: 1; margin-bottom: 12px; }
.res-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }

/* Coverflow carousel (graphics / data) */
.cf-section { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); }
.cf-head { text-align: center; margin-bottom: clamp(40px, 6vw, 80px); }
.cf-head .kicker { display: block; margin-bottom: 18px; }
.cf-head h2 { margin: 0; font-weight: 600; font-size: clamp(40px, 6vw, 96px); letter-spacing: -.04em; color: var(--white); line-height: 1; }
.coverflow { position: relative; perspective: 1000px; perspective-origin: 50% 42%; height: clamp(400px, 50vw, 660px); overflow: hidden; }
.cf-track { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(6deg) rotateZ(-2deg); }
.cf-item {
  position: absolute; top: 50%; left: 50%;
  width: clamp(300px, 66vw, 1050px);
  transform: translate(-50%, -50%);
  transition: transform .75s var(--ease-soft), opacity .75s var(--ease-soft);
  will-change: transform, opacity;
  transform-style: preserve-3d;
}
.cf-media { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; aspect-ratio: 16 / 10; background: var(--bg-soft); box-shadow: 0 40px 90px rgba(0,0,0,.6); }
.cf-item.is-active .cf-media { border-color: rgba(234,91,45,.5); box-shadow: 0 50px 120px rgba(0,0,0,.7), 0 0 60px rgba(168,85,247,.25), 0 0 0 1px rgba(234,91,45,.4); }
.cf-media img { width: 100%; height: 100%; object-fit: cover; }
.cf-cap { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; text-align: center; opacity: 0; transition: opacity .5s; }
/* arc carousel nav arrows */
.cf-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 300;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(0,0,0,.35); color: #fff;
  display: grid; place-items: center; font-size: 22px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .3s, background .3s, transform .3s;
}
.cf-nav:hover { border-color: var(--accent); background: rgba(0,0,0,.6); }
.cf-prev { left: clamp(8px, 3vw, 40px); }
.cf-next { right: clamp(8px, 3vw, 40px); }
/* liquid-style settle on the incoming slide (rest state is always clean, never hidden) */
@keyframes cfWarp {
  0%   { filter: blur(14px) saturate(1.3); transform: scale(1.12) skewX(4deg); opacity: .3; }
  55%  { filter: blur(3px) saturate(1.1);  transform: scale(1.03) skewX(-1.5deg); opacity: .9; }
  100% { filter: blur(0);  transform: scale(1) skewX(0); opacity: 1; }
}
.cf-media img.cf-warp { animation: cfWarp .85s var(--ease-soft); }
@media (prefers-reduced-motion: reduce) { .cf-media img.cf-warp { animation: none; } }
/* Data & Metrics: wide dashboard screenshots shown in full, slim letterbox */
#data .cf-item { width: clamp(320px, 66vw, 1050px); }
#data .cf-media { aspect-ratio: 1.9 / 1; background: #090b10; }
#data .cf-media img { object-fit: contain; }
#data .coverflow { height: clamp(320px, 44vw, 620px); }
.cf-item.is-active .cf-cap { opacity: 1; }
.cf-cap strong { color: var(--white); font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.cf-cap span { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.cf-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); border: none; padding: 0; transition: background .3s, transform .3s; }
.cf-dot.on { background: var(--accent); transform: scale(1.3); }

/* Tool groups (hands-on experience) */
.toolgroups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.toolgroup { background: var(--bg); padding: clamp(28px, 3vw, 46px); }
.toolgroup .tg-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--accent); }
.toolgroup h3 { margin: 14px 0 12px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; color: var(--white); letter-spacing: -.02em; }
.toolgroup p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Active nav link */
.nav a.active { color: var(--white); }
.nav a.active::after { transform: scaleX(1); }

/* =========================================================
   THEME: LIGHT / WARM (amphora-style) — scoped to .theme-light
   ========================================================= */
body.theme-light {
  --bg: #f6f3ee;
  --bg-soft: #ffffff;
  --white: #17150f;   /* headings / bright text become dark on light */
  --text: #2b2825;
  --muted: #6f6b63;
  --line: rgba(20, 18, 15, 0.10);
  --line-strong: #d9d3c8;
  --glass-line: rgba(20, 18, 15, 0.14);
  --accent: #ea5b2d;
}
body.theme-light .site-header.scrolled { background: rgba(246, 243, 238, 0.82); }
body.theme-light .btn-menu,
body.theme-light .btn-ghost { border-color: rgba(20, 18, 15, 0.16); }
body.theme-light .brand-word { color: var(--white); }

/* soften + round the shared components on light */
body.theme-light .page-hero-media { border-radius: 26px; }
body.theme-light .metrics,
body.theme-light .sites,
body.theme-light .cards,
body.theme-light .toolgroups { background: transparent; border: none; gap: 16px; }
body.theme-light .metric,
body.theme-light .site-card,
body.theme-light .card,
body.theme-light .toolgroup { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px; }
body.theme-light .metric { box-shadow: 0 1px 0 rgba(20,18,15,.02); }
body.theme-light .exp {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-soft);
  padding: clamp(24px, 3vw, 40px);
  margin-bottom: 16px;
}
body.theme-light .exp:last-child { border-bottom: 1px solid var(--line); }
body.theme-light .edu-timeline { border-top: none; }
body.theme-light .edu-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-soft);
  padding: clamp(20px, 2.5vw, 30px) clamp(22px, 3vw, 34px);
  margin-bottom: 12px;
}
body.theme-light .comp-list { border-top-color: var(--line); }
body.theme-light .comp-list li:hover { color: var(--accent); }
body.theme-light .chips span { background: var(--bg-soft); }
body.theme-light ::selection { background: var(--accent); color: #fff; }

/* amphora hero extras: CTA + avatar social proof */
.hero-cta { margin-top: 32px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn-accent {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 100px;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .3s var(--ease-soft), filter .3s;
}
.btn-accent:hover { filter: brightness(1.07); transform: translateY(-1px); }
.hero-textlink { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--white); border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; }
.proof { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.proof-avatars { display: flex; }
.proof-avatars span {
  width: 42px; height: 42px; border-radius: 50%; margin-left: -12px;
  border: 2px solid var(--bg); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #fff;
}
.proof-avatars span:first-child { margin-left: 0; }
.proof-a1 { background: #ea5b2d; } .proof-a2 { background: #2f8f83; } .proof-a3 { background: #3a6ea5; } .proof-a4 { background: #b0472b; }
.proof-text { font-size: 14px; color: var(--muted); line-height: 1.4; }
.proof-text strong { color: var(--white); font-weight: 600; }

/* amphora "built with heart" feature cards */
.heart-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.heart-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 22px; padding: clamp(28px, 3vw, 44px); transition: transform .4s var(--ease-soft); }
.heart-card:hover { transform: translateY(-4px); }
.heart-ico { width: 54px; height: 54px; border-radius: 15px; background: rgba(234, 91, 45, 0.12); color: var(--accent); display: grid; place-items: center; margin-bottom: 24px; }
.heart-card h3 { margin: 0 0 10px; font-size: clamp(20px, 1.7vw, 26px); font-weight: 600; letter-spacing: -.02em; color: var(--white); }
.heart-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }

/* amphora client marquee (light) */
.logo-marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.logo-marquee .lm-track { display: flex; gap: 64px; width: max-content; animation: marquee 30s linear infinite; }
.logo-marquee .lm-track span { font-weight: 600; font-size: clamp(18px, 2vw, 28px); letter-spacing: -.01em; color: var(--muted); white-space: nowrap; }
.logo-marquee .lm-track span::after { content: "\2022"; margin-left: 64px; color: var(--accent); }

/* =========================================================
   THEME: NEON (amphora-style, dark + animated glows) — .theme-neon
   ========================================================= */
body.theme-neon { background: #06060c; }

/* animated ambient background glows (the "in 4 steps" feel) */
.neon-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.neon-layer { position: absolute; left: 0; top: 0; width: 100%; height: 200vh; will-change: transform; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.neon-bg .glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.45; will-change: transform; }
/* tile A (0-100vh) */
.neon-bg .g1 { width: 55vw; height: 55vw; background: radial-gradient(circle, #4f7bff, transparent 68%); left: -8%; top: 2vh; animation: neonDrift1 24s ease-in-out infinite alternate; }
.neon-bg .g2 { width: 52vw; height: 52vw; background: radial-gradient(circle, #a855f7, transparent 68%); right: -6%; top: 52vh; animation: neonDrift2 28s ease-in-out infinite alternate; }
.neon-bg .g3 { width: 46vw; height: 46vw; background: radial-gradient(circle, #16c8b0, transparent 68%); left: 40%; top: 34vh; animation: neonDrift3 32s ease-in-out infinite alternate; }
.neon-bg .g4 { width: 40vw; height: 40vw; background: radial-gradient(circle, #ff4d9d, transparent 68%); right: 18%; top: 76vh; opacity: 0.30; animation: neonDrift1 30s ease-in-out infinite alternate-reverse; }
/* tile B (identical, +100vh) for seamless looping */
.neon-bg .g1.b { top: 102vh; } .neon-bg .g2.b { top: 152vh; } .neon-bg .g3.b { top: 134vh; } .neon-bg .g4.b { top: 176vh; }
@keyframes neonDrift1 { to { transform: translate(16vw, 14vh) scale(1.15); } }
@keyframes neonDrift2 { to { transform: translate(-13vw, -11vh) scale(1.12); } }
@keyframes neonDrift3 { to { transform: translate(-11vw, 9vh) scale(1.2); } }
body.theme-neon .site-header { z-index: 200; }
body.theme-neon main { position: relative; z-index: 1; }

/* translucent glass cards over the glow */
body.theme-neon .metrics,
body.theme-neon .cards,
body.theme-neon .sites,
body.theme-neon .steps,
body.theme-neon .toolgroups { background: transparent; border: none; gap: 16px; }
body.theme-neon .metric,
body.theme-neon .card,
body.theme-neon .site-card,
body.theme-neon .step,
body.theme-neon .toolgroup,
body.theme-neon .exp,
body.theme-neon .edu-item {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .4s, box-shadow .4s, transform .4s var(--ease-soft), background .4s;
}
body.theme-neon .exp { padding: clamp(24px, 3vw, 40px); margin-bottom: 16px; }
body.theme-neon .edu-timeline { border-top: none; }
body.theme-neon .edu-item { padding: clamp(20px, 2.5vw, 30px) clamp(22px, 3vw, 34px); margin-bottom: 12px; }
/* neon glow on hover for standard cards */
body.theme-neon .metric:hover,
body.theme-neon .card:hover,
body.theme-neon .site-card:hover,
body.theme-neon .step:hover,
body.theme-neon .toolgroup:hover {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 18px 50px rgba(88, 60, 160, 0.35);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
}
body.theme-neon .chips span { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
body.theme-neon .chips span:hover {
  transform: translateY(-4px);
  border-color: rgba(168,85,247,.7);
  color: #fff;
  background: linear-gradient(90deg, rgba(234,91,45,.18), rgba(168,85,247,.2));
  box-shadow: 0 10px 26px rgba(120,40,170,.4), 0 0 18px rgba(234,91,45,.22);
}

/* animated neon gradient border on feature cards (the amphora "popular" card effect) */
body.theme-neon .heart-card {
  position: relative;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  transition: transform .4s var(--ease-soft), box-shadow .4s;
}
body.theme-neon .heart-card::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(120deg, #ff7a3c, #ff4d9d, #a855f7, #5b8cff, #16c8b0, #ff7a3c);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.35;
  animation: neonBorder 6s linear infinite;
  transition: opacity .4s;
  pointer-events: none;
}
body.theme-neon .heart-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(120, 40, 170, 0.4); }
body.theme-neon .heart-card:hover::before { opacity: 1; }
@keyframes neonBorder { to { background-position: 300% 0; } }
body.theme-neon .heart-ico { background: rgba(168, 85, 247, 0.16); color: #c9a6ff; }

/* gradient neon accent text on emphasised words */
body.theme-neon .page-hero-title em,
body.theme-neon .section-title em,
body.theme-neon .grad-text {
  font-style: italic;
  background: linear-gradient(90deg, #ff7a3c, #ff4d9d, #a855f7, #5b8cff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
  padding-right: 0.14em;   /* room for the italic overhang so the last letter isn't clipped */
  margin-right: -0.14em;   /* compensate so following characters aren't pushed */
}

/* gradient buttons with animated hover glow */
.btn-accent {
  background: linear-gradient(90deg, #ff7a3c, #ff4d9d, #a855f7);
  background-size: 220% auto;
  transition: background-position .6s var(--ease-soft), box-shadow .4s, transform .3s;
}
.btn-accent:hover { background-position: right center; box-shadow: 0 10px 36px rgba(168, 85, 247, 0.55); transform: translateY(-2px); }
body.theme-neon .btn-talk {
  background: linear-gradient(90deg, #ff7a3c, #ff4d9d, #a855f7);
  background-size: 220% auto; color: #fff;
  transition: background-position .6s var(--ease-soft), box-shadow .4s, transform .3s;
}
body.theme-neon .btn-talk:hover { background-position: right center; box-shadow: 0 10px 34px rgba(168, 85, 247, 0.5); transform: translateY(-2px); }
body.theme-neon .btn-ghost:hover, body.theme-neon .btn-menu:hover { border-color: rgba(168,85,247,.6); box-shadow: 0 0 24px rgba(168,85,247,.3); }
body.theme-neon .hero-textlink { border-bottom-color: rgba(255,255,255,.25); }
body.theme-neon .logo-marquee .lm-track span::after { color: #a855f7; }
body.theme-neon .proof-avatars span { border-color: #06060c; }

@media (prefers-reduced-motion: reduce) {
  .neon-bg .glow { animation: none; }
  body.theme-neon .heart-card::before { animation: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .nav { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; }
  .hero-lead { max-width: 100%; }
  .hero-meta { position: static; text-align: left; max-width: 100%; margin-top: 50px; }
  .hero-est { justify-content: flex-start; }
  .hero-mission { text-align: left; }
  .sites { grid-template-columns: repeat(2, 1fr); }
  .story-body { grid-template-columns: 1fr; }
  .exp { grid-template-columns: 1fr; gap: 20px; }
  .stack-row { grid-template-columns: 1fr; gap: 14px; }
  .edu-item { grid-template-columns: 1fr; gap: 8px; }
  .panel-card { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  .panel-media { aspect-ratio: 16 / 10; }
  .case-cols { grid-template-columns: 1fr; }
  .toolgroups { grid-template-columns: 1fr; }
  .page-hero.has-media { grid-template-columns: 1fr; }
  .page-hero.has-media .page-hero-media { max-width: 420px; }
}

@media (max-width: 680px) {
  .btn-talk { display: none; }
  .quotes { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .side-label { display: none; }
  .about { padding-left: var(--pad-x); }
  .hero-hint { display: none; }
  .snapshot-head { align-items: flex-start; }
  .sites { grid-template-columns: 1fr; }
  .comp-list { grid-template-columns: 1fr; }
  .exp-cols { grid-template-columns: 1fr; }
  .case-results { grid-template-columns: 1fr; }
  .cf-item { width: 78vw; }
  .coverflow { height: clamp(300px, 70vw, 460px); }
  .cf-nav { width: 42px; height: 42px; font-size: 18px; }
  /* larger, more visible glows on mobile so the scrollable background reads */
  .neon-bg .glow { width: 135vw; height: 135vw; opacity: 0.55; filter: blur(70px); }
  .neon-bg .g4 { opacity: 0.4; }
  .heart-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-lines { opacity: 1; transform: none; }
  .values-track { animation: none; }
  .hero-canvas { display: none; }
  .cursor, .cursor-dot { display: none; }
  .panel { position: relative; height: auto; min-height: 0; opacity: 1 !important; transform: none !important; padding-top: clamp(50px, 7vh, 90px); padding-bottom: clamp(50px, 7vh, 90px); }
}