/* =====================================================================
   MUHAMMED UYGUR — "Digital Void" cinematic hero
   Self-contained, dependency-free. All selectors prefixed .hv / .hv__
   ===================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
/* Latin Extended — Turkish (ğ ş İ Ş Ğ …) + other diacritics */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-latinExt.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

.hv, .hv *, .hv *::before, .hv *::after { box-sizing: border-box; }

.hv {
  /* ---- palette ---- */
  --hv-bg:      #05060a;
  --hv-bg-2:    #090b14;
  --hv-ink:     #eef2ff;
  --hv-muted:   #97a1bb;
  --hv-faint:   #5a6485;
  --hv-cyan:    #38e6ff;
  --hv-violet:  #8b6cff;
  --hv-magenta: #ff53a8;
  --hv-line:    rgba(150, 170, 220, 0.14);
  --hv-glass:   rgba(20, 26, 44, 0.44);

  /* ---- interaction vars (driven by JS) ---- */
  --mx: 0;   /* pointer x  -1 … 1 */
  --my: 0;   /* pointer y  -1 … 1 */

  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--hv-bg);
  color: var(--hv-ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  perspective: 1600px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =====================================================================
   BACKGROUND VOID
   ===================================================================== */
/* isolation + z-index:-1 puts the whole background (incl. the opaque WebGL
   fluid) into its OWN compositing layer BEHIND all hero content — otherwise
   the WebGL canvas promotes itself over lower-z siblings and hides the photo. */
.hv__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; isolation: isolate; }

/* seamless hero → body: fade the fluid background into the page base colour
   at the bottom so there's no hard cut into the content sections */
.hv::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(120px, 20vh, 240px); z-index: 5; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--hv-bg) 92%);
}

/* WebGL fluid simulation canvas — the hero's living background */
.hv-fluid {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 0; transform: translateZ(0); will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .hv-fluid { opacity: 0.5; } }

/* colored light mesh — cyan top-left, magenta/violet bottom-right */
.hv__mesh {
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 42% at 22% 20%, rgba(56, 230, 255, 0.20), transparent 70%),
    radial-gradient(45% 45% at 82% 82%, rgba(255, 83, 168, 0.16), transparent 72%),
    radial-gradient(60% 60% at 65% 35%, rgba(139, 108, 255, 0.14), transparent 75%),
    radial-gradient(120% 120% at 50% 8%, rgba(10, 14, 30, 0), rgba(3, 4, 8, 0.9) 100%);
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* slow rotating focal glow behind the subject */
.hv__aurora {
  position: absolute;
  left: 50%; top: 46%;
  width: min(120vh, 1100px); aspect-ratio: 1;
  translate: -50% -50%;
  background:
    conic-gradient(from 0deg,
      rgba(56,230,255,0.00) 0deg,
      rgba(56,230,255,0.16) 60deg,
      rgba(139,108,255,0.05) 150deg,
      rgba(255,83,168,0.16) 250deg,
      rgba(56,230,255,0.00) 360deg);
  filter: blur(60px);
  opacity: 0.7;
  border-radius: 50%;
  animation: hv-spin 46s linear infinite;
  mix-blend-mode: screen;
}

/* perspective floor grid, faded */
.hv__grid {
  position: absolute; inset: 42% -40% -10% -40%;
  background-image:
    linear-gradient(to right, rgba(120,150,220,0.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,220,0.11) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(520px) rotateX(74deg) translate3d(calc(var(--mx) * -18px), 0, 0);
  transform-origin: 50% 100%;
  mask-image: radial-gradient(58% 78% at 50% 12%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(58% 78% at 50% 12%, #000 0%, transparent 72%);
  opacity: 0.5;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}

.hv__stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }

/* faint diagonal light sweep */
.hv__scan {
  position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 44%, rgba(150,190,255,0.05) 50%, transparent 56%);
  animation: hv-sweep 11s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* =====================================================================
   NAV
   ===================================================================== */
.hv__nav {
  position: absolute; z-index: 40; inset: 0 0 auto 0;
  display: flex; align-items: center; gap: 24px;
  padding: clamp(18px, 3vw, 34px) clamp(20px, 5vw, 60px);
}
.hv__brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--hv-ink); }
/* brand mark = the real "M" monogram (logo.png) used as a mask,
   with the site's signature colours spinning inside it */
.hv__brand-mark {
  position: relative;
  width: 34px; height: 24px;
  overflow: hidden;
  -webkit-mask: url("assets/logo.png") center / contain no-repeat;
          mask: url("assets/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(139,108,255,0.5));
}
.hv__brand-mark::before {
  content: "";
  position: absolute; inset: -50%;
  background: conic-gradient(from 140deg, var(--hv-cyan), var(--hv-violet), var(--hv-magenta), var(--hv-cyan));
  animation: hv-spin 12s linear infinite;
}
.hv__brand-name { font-weight: 600; letter-spacing: 0.2px; font-size: 17px; }
.hv__brand-dot { color: var(--hv-cyan); }
.hv__nav-links { display: flex; gap: 26px; margin-left: auto; }
.hv__nav-links a {
  color: var(--hv-muted); text-decoration: none; font-size: 14px; letter-spacing: 0.3px;
  position: relative; padding: 4px 0; transition: color .25s;
}
.hv__nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--hv-cyan), var(--hv-violet)); transition: width .28s ease;
}
.hv__nav-links a:hover { color: var(--hv-ink); }
.hv__nav-links a:hover::after { width: 100%; }

.hv__nav-cta {
  padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--hv-ink); border: 1px solid var(--hv-line);
  background: var(--hv-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.hv__nav-cta:hover { border-color: rgba(56,230,255,0.6); box-shadow: 0 0 24px rgba(56,230,255,0.25); transform: translateY(-1px); }
.hv__burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.hv__burger span { width: 24px; height: 2px; background: var(--hv-ink); border-radius: 2px; }

/* =====================================================================
   SUBJECT (you)
   ===================================================================== */
.hv__subject {
  position: absolute; z-index: 20;
  left: 61%; top: auto; bottom: clamp(12px, 4vh, 44px);
  width: min(54vh, 500px);
  translate: -50% 0;
  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 5px), 0);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.hv__subject-float {
  position: relative;
  /* gentle free-floating sway — synced 1:1 with the code screen so the two
     drift together as one calm composition in the copy-free right zone */
  animation: hv-drift 7s ease-in-out infinite;
  will-change: translate;
}
.hv__subject-img {
  position: relative; z-index: 2;
  display: block; width: 100%; height: auto;
  filter:
    drop-shadow(0 0 1px rgba(56,230,255,0.5))
    drop-shadow(0 14px 40px rgba(0,0,0,0.55))
    drop-shadow(0 0 34px rgba(139,108,255,0.18));
}
/* big soft backlight hugging the figure */
.hv__subject-halo {
  position: absolute; z-index: 0; left: 50%; top: 44%;
  width: 128%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(56,230,255,0.28), rgba(139,108,255,0.12) 55%, transparent 72%);
  filter: blur(18px); opacity: 0.85; mix-blend-mode: screen;
  animation: hv-breathe 7s ease-in-out infinite;
}
.hv__subject-rim {
  position: absolute; z-index: 1; inset: 0;
  background: radial-gradient(60% 40% at 74% 30%, rgba(255,83,168,0.12), transparent 60%);
  mix-blend-mode: screen; pointer-events: none;
}
/* soft light rising from the laptop screen — dialled back + desaturated so it
   reads as gentle screen spill, not a saturated cyan blob on the figure */
.hv__subject-screenglow {
  position: absolute; z-index: 3; left: 52%; top: 71%;
  width: 50%; height: 22%; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(158,205,228,0.16), rgba(120,150,200,0.05) 58%, transparent 80%);
  filter: blur(12px); mix-blend-mode: screen;
  animation: hv-flicker 6.5s ease-in-out infinite;
  pointer-events: none;
}
/* no ground shadow while free-falling */
.hv__subject-shadow { display: none; }

/* =====================================================================
   FALLING ICON FIELDS  (depth via CSS vars set per icon in JS)
   ===================================================================== */
.hv__field { position: absolute; inset: 0; pointer-events: none; }
.hv__field--back  { z-index: 12; transform: translate3d(calc(var(--mx) * -20px), calc(var(--my) * -13px), 0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hv__field--front { z-index: 30; transform: translate3d(calc(var(--mx) *  40px), calc(var(--my) *  26px), 0); transition: transform .45s cubic-bezier(.2,.7,.2,1); }

.hv__ic {
  position: absolute; top: 0; left: var(--x, 50%);
  animation: hv-fall var(--dur, 16s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
.hv__ic-i {
  position: relative;                 /* containing box for shatter shards */
  transform: scale(var(--s, 1));
  filter: blur(var(--b, 0px));
  opacity: 0;
  animation: hv-icon-in .9s ease forwards var(--delay, 0s);
}
.hv.is-in .hv__ic-i { opacity: var(--o, .8); }

/* --- shatter → reassemble shards ("parçala + birleştir") --- */
.hv__shatter { position: absolute; inset: 0; pointer-events: none; }
.hv__shard {
  position: absolute; inset: 0;
  animation: hv-shard 1.2s cubic-bezier(.33, 0, .2, 1) both;
  will-change: transform;
}
.hv__shard > * { position: absolute; top: 0; left: 0; margin: 0; }
.hv__shard .hv__chip,
.hv__shard .hv__logo {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
@keyframes hv-shard {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); filter: brightness(1) drop-shadow(0 0 3px rgba(130,190,255,.35)); }
  38%  { transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)) scale(.82); filter: brightness(1.4) drop-shadow(0 0 10px rgba(130,190,255,.65)); }
  60%  { transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)) scale(.82); filter: brightness(1.4) drop-shadow(0 0 10px rgba(130,190,255,.65)); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); filter: brightness(1) drop-shadow(0 0 3px rgba(130,190,255,.35)); }
}

/* glass chip that holds an icon glyph */
.hv__chip {
  --c: var(--hv-cyan);
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 16px;
  color: var(--c);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--c) 20%, transparent), transparent 60%),
    linear-gradient(150deg, rgba(42,54,90,0.62), rgba(14,20,38,0.46));
  border: 1px solid color-mix(in srgb, var(--c) 38%, rgba(150,180,255,0.2));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 10px 26px rgba(0,0,0,0.42),
    0 0 30px color-mix(in srgb, var(--c) 46%, transparent);
}
.hv__chip svg { width: 27px; height: 27px; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--c) 60%, transparent)); }
.hv__chip span { text-shadow: 0 0 14px color-mix(in srgb, var(--c) 65%, transparent); }
.hv__chip--bare {
  background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; width: auto; height: auto;
  color: #fff;
  text-shadow: 0 0 22px color-mix(in srgb, var(--c) 95%, transparent), 0 0 8px color-mix(in srgb, var(--c) 80%, transparent);
  font-weight: 700;
}
.hv__chip--bare svg { width: 42px; height: 42px; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c) 70%, transparent)); }
.hv__chip--glyph { font-size: 42px; line-height: 1; font-weight: 700; letter-spacing: -1px; color: color-mix(in srgb, var(--c) 82%, #ffffff); }

/* small card variant (UI card / terminal) */
.hv__chip--card {
  width: 92px; height: 64px; border-radius: 12px; padding: 8px; place-items: stretch;
}
.hv__card-bar { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--c) 55%, transparent); margin-bottom: 6px; width: 60%; }
.hv__card-bar + .hv__card-bar { width: 90%; background: rgba(150,180,255,0.22); }
.hv__card-bar:nth-child(3){ width: 74%; }
.hv__term { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--c); text-align: left; }
.hv__term b { color: #fff; }

/* =====================================================================
   CONTENT
   ===================================================================== */
.hv__content {
  position: absolute; z-index: 35; inset: 0 auto 0 0;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: safe center;   /* center when it fits; on short screens fall back to top instead of clipping */
  padding: clamp(88px, 13vh, 132px) clamp(20px, 5vw, 60px) clamp(48px, 9vh, 88px);
  max-width: min(660px, 92vw);
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -5px), 0);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;   /* let the fluid canvas receive pointer over empty areas */
}
.hv__content > * { pointer-events: auto; }
.hv__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--hv-muted);
  padding: 7px 14px; border: 1px solid var(--hv-line); border-radius: 999px;
  background: rgba(10,14,26,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hv__status {
  width: 8px; height: 8px; border-radius: 50%; background: #35ffa3;
  box-shadow: 0 0 0 0 rgba(53,255,163,0.6); animation: hv-pulse 2.4s ease-out infinite;
}
.hv__title {
  margin: 0 0 20px; font-weight: 600;
  font-size: clamp(28px, 7vw, 64px); line-height: 0.99; letter-spacing: -0.02em;
}
.hv__title-line { display: block; white-space: nowrap; }
.hv__grad {
  background: linear-gradient(100deg, var(--hv-cyan), var(--hv-violet) 55%, var(--hv-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(139,108,255,0.35);
}
.hv__sub { margin: 0 0 16px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: #cdd5ea; max-width: 30ch; }
.hv__intro { margin: 0 0 32px; font-size: 15px; line-height: 1.65; color: var(--hv-muted); max-width: 42ch; }

.hv__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hv__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s, box-shadow .3s, background .3s, border-color .3s;
}
.hv__btn svg { transition: transform .25s; }
.hv__btn--primary {
  color: #06111a;
  background: linear-gradient(100deg, var(--hv-cyan), var(--hv-violet));
  box-shadow: 0 8px 30px rgba(56,230,255,0.28), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.hv__btn--primary:hover { box-shadow: 0 12px 40px rgba(56,230,255,0.52); filter: brightness(1.06); }
.hv__btn--primary:hover svg { transform: translateX(4px); }
.hv__btn--ghost {
  color: var(--hv-ink); border-color: var(--hv-line);
  background: rgba(20,26,44,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hv__btn--ghost:hover { border-color: rgba(139,108,255,0.6); box-shadow: 0 0 26px rgba(139,108,255,0.25); background: rgba(28,34,58,0.55); }

.hv__socials { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--hv-faint); }
.hv__socials a { color: var(--hv-muted); text-decoration: none; transition: color .2s; }
.hv__socials a:hover { color: var(--hv-cyan); }

/* =====================================================================
   OVERLAYS
   ===================================================================== */
.hv__vignette {
  position: absolute; inset: 0; z-index: 33; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 42%, transparent 62%, rgba(3,4,8,0.42) 100%),
    linear-gradient(to bottom, rgba(3,4,8,0.42), transparent 20% 80%, rgba(3,4,8,0.8));
}
.hv__grain {
  position: absolute; inset: 0; z-index: 34; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hv__scrollhint {
  position: absolute; z-index: 36; left: 50%; bottom: 22px; translate: -50% 0;
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--hv-faint); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none;
}
.hv__scrollhint-line { width: 1px; height: 40px; background: linear-gradient(var(--hv-cyan), transparent); position: relative; overflow: hidden; }
.hv__scrollhint-line::after { content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background: var(--hv-ink); animation: hv-scroll 2.2s ease-in-out infinite; }

/* =====================================================================
   TOASTS (Sonner-flavoured)
   ===================================================================== */
.hv__toasts {
  position: fixed; z-index: 100; right: 22px; bottom: 22px;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.hv__toast {
  pointer-events: auto; min-width: 220px; max-width: 340px;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 13px; font-size: 14px; color: var(--hv-ink);
  background: rgba(16,20,34,0.72); border: 1px solid var(--hv-line);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(16px) scale(0.96); opacity: 0;
  animation: hv-toast-in .4s cubic-bezier(.2,.9,.3,1) forwards;
}
.hv__toast.is-out { animation: hv-toast-out .3s ease forwards; }
.hv__toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hv-cyan); box-shadow: 0 0 12px var(--hv-cyan); flex: none; }

/* =====================================================================
   REVEAL ON LOAD
   ===================================================================== */
[data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.hv.is-in [data-reveal] {
  opacity: 1; transform: none; filter: none;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease;
}
.hv.is-in .hv__kicker { transition-delay: .05s; }
.hv.is-in .hv__title  { transition-delay: .14s; }
.hv.is-in .hv__sub    { transition-delay: .30s; }
.hv.is-in .hv__intro  { transition-delay: .40s; }
.hv.is-in .hv__cta    { transition-delay: .50s; }
.hv.is-in .hv__socials{ transition-delay: .60s; }

.hv__subject { opacity: 0; transform: translateY(40px) scale(0.98); }
.hv.is-in .hv__subject {
  opacity: 1;
  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 5px), 0);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@keyframes hv-fall {
  from { transform: translate3d(0, -28vh, 0) rotate(var(--r0, 0deg)); }
  to   { transform: translate3d(var(--dx, 0px), 128vh, 0) rotate(var(--r1, 0deg)); }
}
@keyframes hv-icon-in { to { opacity: var(--o, .8); } }
@keyframes hv-float {
  0%,100% { transform: translateY(0) rotateZ(0deg) rotateY(0deg); }
  33%     { transform: translateY(-15px) rotateZ(1.4deg) rotateY(6deg); }
  66%     { transform: translateY(5px)   rotateZ(-1.2deg) rotateY(-5deg); }
}
/* slow zero-gravity tumble — continuous in-plane rotation + gentle fall sway
   (in-plane = the photo never goes edge-on, so the face always stays solid) */
@keyframes hv-tumble {
  0%   { transform: translate(0, 0)        rotate(0deg); }
  25%  { transform: translate(20px, -14px) rotate(90deg); }
  50%  { transform: translate(0, 12px)     rotate(180deg); }
  75%  { transform: translate(-20px, -10px) rotate(270deg); }
  100% { transform: translate(0, 0)        rotate(360deg); }
}
@keyframes hv-breathe { 0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
@keyframes hv-flicker { 0%,100%{opacity:.85} 45%{opacity:1} 55%{opacity:.7} 70%{opacity:.95} }
@keyframes hv-spin { to { transform: rotate(360deg); } }
@keyframes hv-breathe-mark { }
@keyframes hv-sweep { 0%,100%{ transform: translateX(-12%);} 50%{ transform: translateX(12%);} }
@keyframes hv-pulse { 0%{ box-shadow: 0 0 0 0 rgba(53,255,163,0.6);} 100%{ box-shadow: 0 0 0 12px rgba(53,255,163,0);} }
@keyframes hv-scroll { 0%{ transform: translateY(0);} 100%{ transform: translateY(340%);} }
@keyframes hv-toast-in  { to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes hv-toast-out { to { transform: translateY(10px) scale(0.96); opacity: 0; } }

/* aurora spin uses hv-spin but needs to keep translate origin */
.hv__aurora { will-change: transform; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
  .hv__subject { left: 72%; width: min(52vh, 440px); opacity: .9; }
  .hv__content { max-width: 60vw; }
}
@media (max-width: 820px) {
  .hv__nav-links { display: none; }
  .hv__nav-cta { display: none; }
  .hv__burger { display: flex; }
  .hv__content {
    top: auto; bottom: 8%; translate: 0 0;
    max-width: 100%; text-align: left;
  }
  /* let long title lines wrap instead of clipping off the right edge on narrow screens */
  .hv__title-line { white-space: normal; }
  .hv__title { font-size: clamp(30px, 8.5vw, 60px); }
  .hv__subject { left: 50%; top: 3%; bottom: auto; translate: -50% 0; width: min(56vh, 340px); }
  .hv__sub { max-width: 92%; }
  .hv__intro { display: none; }
  .hv__vignette {
    background:
      radial-gradient(120% 70% at 50% 20%, transparent 40%, rgba(3,4,8,0.7) 100%),
      linear-gradient(to bottom, rgba(3,4,8,0.4), rgba(3,4,8,0.2) 30%, rgba(3,4,8,0.92));
  }
}
@media (max-width: 560px) {
  .hv__subject { width: min(58vh, 300px); }
  .hv__kicker { font-size: 11px; letter-spacing: 1.1px; }
}

/* =====================================================================
   ACCESSIBILITY — reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hv *,
  .hv *::before,
  .hv *::after { animation: none !important; transition: none !important; }
  .hv__ic { display: none; }
  [data-reveal], .hv__subject { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* =====================================================================
   BRAND LOGOS (falling toolkit) + floating code editor & terminal
   ===================================================================== */
.hv__logo {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 15px;
  font-weight: 800; font-size: 21px; letter-spacing: -0.5px; line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 10px 26px rgba(0,0,0,0.5),
    0 0 26px color-mix(in srgb, var(--g, #6cf) 45%, transparent);
  overflow: hidden;
}

/* floating live code editor */
.hv__codepanel {
  position: absolute; z-index: 28; left: 49%; top: 60%;
  width: 288px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, rgba(22,28,48,0.74), rgba(10,14,26,0.6));
  border: 1px solid rgba(150,180,255,0.16);
  backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
  box-shadow: 0 26px 64px rgba(0,0,0,0.55), 0 0 42px rgba(56,230,255,0.10), inset 0 1px 0 rgba(255,255,255,0.07);
  transform: translate3d(calc(var(--mx) * 38px), calc(var(--my) * 26px), 0) rotate(-4deg);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  /* same drift, same tempo as the subject → they float together */
  animation: hv-drift 7s ease-in-out infinite;
  will-change: transform, translate;
}
.hv__cp-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid rgba(150,180,255,0.1); background: rgba(255,255,255,0.02); }
.hv__cp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--d); }
.hv__cp-bar em { margin-left: 8px; font-style: normal; font-size: 11px; color: var(--hv-faint); font-family: ui-monospace, Menlo, monospace; }
.hv__code { margin: 0; padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.65; color: #c6d0ea; white-space: pre; }
.hv__code .l { display: block; }
.hv__code .kw { color: #ff79c6; } .hv__code .fn { color: #8be9fd; } .hv__code .tag { color: #7ee787; }
.hv__code .attr { color: #ffb457; } .hv__code .str { color: #a5d6ff; } .hv__code .op { color: #8a93a8; }
.hv__caret { display: inline-block; width: 7px; height: 13px; margin-left: 1px; background: var(--hv-cyan); vertical-align: middle; box-shadow: 0 0 8px var(--hv-cyan); animation: hv-blink 1.05s steps(1) infinite; }

/* floating terminal */
.hv__termfx {
  position: absolute; z-index: 28; left: 30%; top: 11%; bottom: auto;
  padding: 12px 15px; border-radius: 12px; max-width: 300px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.75;
  background: rgba(8,11,20,0.6); border: 1px solid rgba(150,180,255,0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translate3d(calc(var(--mx) * -30px), calc(var(--my) * -20px), 0) rotate(2.5deg);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  animation: hv-panelfloat 11s ease-in-out infinite reverse;
}
.hv__tp { color: var(--hv-violet); } .hv__tc { color: #eaf0ff; } .hv__tok { color: #35ffa3; }

@keyframes hv-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@keyframes hv-panelfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* gentle, organic free-float — the subject + code screen drift together
   in the copy-free right zone. Uses `translate` so it never fights the
   pointer-parallax `transform` on the same elements. */
@keyframes hv-drift {
  0%   { translate: 0 0; }
  25%  { translate: 5px -7px; }
  50%  { translate: 0 -13px; }
  75%  { translate: -5px -6px; }
  100% { translate: 0 0; }
}

@media (max-width: 1080px) { .hv__codepanel { left: 40%; top: 8%; } .hv__termfx { left: 4%; } }
@media (max-width: 860px)  { .hv__codepanel, .hv__termfx { display: none; } }

/* =====================================================================
   NEW EFFECTS: rotating portal · holographic scan · flowing grid
   ===================================================================== */
/* slow-rotating light portal behind the subject */
.hv__portal {
  position: absolute; z-index: 15; left: 61%; top: 42%;
  width: min(66vh, 640px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(56,230,255,0.55) 45deg, transparent 130deg,
    rgba(139,108,255,0.45) 210deg, transparent 285deg, rgba(255,83,168,0.4) 335deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 63%, #000 66%, #000 73%, transparent 77%);
          mask: radial-gradient(closest-side, transparent 63%, #000 66%, #000 73%, transparent 77%);
  filter: blur(3px); opacity: 0.7; mix-blend-mode: screen;
  animation: hv-spin 26s linear infinite;
}
.hv__portal--2 {
  width: min(52vh, 500px);
  background: conic-gradient(from 180deg,
    transparent 0deg, rgba(255,83,168,0.4) 50deg, transparent 140deg, rgba(56,230,255,0.5) 230deg, transparent 320deg);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 73%, #000 78%, transparent 82%);
          mask: radial-gradient(closest-side, transparent 70%, #000 73%, #000 78%, transparent 82%);
  animation-duration: 34s; animation-direction: reverse; opacity: 0.55;
}

/* holographic scan sweeping over the subject's silhouette */
.hv__subject-scan {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  -webkit-mask-image: url("assets/subject.webp"); mask-image: url("assets/subject.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(180deg, transparent 44%, rgba(120,240,255,0.5) 49%, rgba(195,250,255,0.85) 50%, rgba(120,240,255,0.5) 51%, transparent 56%);
  background-size: 100% 260%; background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: hv-scan 5s ease-in-out infinite;
}
@keyframes hv-scan {
  0%       { background-position: 0 -130%; opacity: 0; }
  12%      { opacity: 0.9; }
  55%      { background-position: 0 130%; opacity: 0.9; }
  62%,100% { background-position: 0 130%; opacity: 0; }
}

/* flowing grid floor */
.hv__grid { animation: hv-gridflow 2.4s linear infinite; }
@keyframes hv-gridflow { to { background-position: 0 62px, 0 62px; } }

/* demo spacer (not part of the drop-in) */
.hv-demo-next { min-height: 60vh; display: grid; place-items: center; background: #05060a; color: #2c3450; font-family: system-ui; }

/* =====================================================================
   SITE INTEGRATION — make the main nav's brand mark the same spinning
   gradient "M" as the hero logo (overrides the flat one in style.css).
   ===================================================================== */
#nav .brand-mark {
  position: relative;
  overflow: hidden;
  background: none;                    /* drop style.css's flat currentColor fill */
  /* mask (logo.png) + size are inherited from style.css */
}
#nav .brand-mark::before {
  content: "";
  position: absolute; inset: 0;
  /* static, always-vibrant palette gradient (same as the "digital" headline) —
     no spin, so it never lands on a dark/violet-only frame */
  background: linear-gradient(100deg, #38e6ff, #8b6cff 55%, #ff53a8);
}

/* =====================================================================
   SITE-WIDE ATMOSPHERE — extend the hero's "digital void" look through
   the whole body + footer, so content never lands on flat black.
   Fixed layer sits under all content and never blocks interaction.
   ===================================================================== */
/* base colour lives on <html> so the fixed atmosphere (z-index:-1) can show
   through the now-transparent <body> instead of being hidden behind it */
html { background: var(--bg, #05060a); }
body { background: transparent; }

/* seamless hero → body: carry the hero's dark base into the top of the content
   so the fixed atmosphere fades IN gradually instead of hitting a hard black→purple band */
main { position: relative; }
main::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: clamp(280px, 44vh, 560px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #05060a 0%, rgba(5,6,10,0.72) 32%, transparent 100%);
}

.site-atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* soft coloured nebulae — the hero mesh, carried down the page (subtle: text stays crisp) */
.site-atmos__mesh {
  position: absolute; inset: -12%;
  background:
    radial-gradient(40% 36% at 10% 6%,  rgba(56,230,255,0.20), transparent 70%),
    radial-gradient(44% 42% at 90% 20%, rgba(139,108,255,0.20), transparent 72%),
    radial-gradient(48% 44% at 82% 68%, rgba(255,83,168,0.16), transparent 72%),
    radial-gradient(42% 42% at 14% 88%, rgba(56,230,255,0.14), transparent 72%),
    radial-gradient(65% 55% at 50% 48%, rgba(139,108,255,0.10), transparent 80%);
}
/* slow aurora sweep */
.site-atmos__aurora {
  position: absolute; left: 50%; top: 42%; width: min(160vh, 1500px); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(56,230,255,0.12) 70deg, transparent 150deg,
              rgba(139,108,255,0.09) 230deg, rgba(255,83,168,0.11) 300deg, transparent 360deg);
  filter: blur(90px); opacity: 0.85; mix-blend-mode: screen;
  animation: hv-spin 90s linear infinite;
}
/* tech grid, fading toward the top so it meets the hero cleanly */
.site-atmos__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120,150,220,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,220,0.07) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(140% 75% at 50% -4%, #000 0%, transparent 72%);
          mask-image: radial-gradient(140% 75% at 50% -4%, #000 0%, transparent 72%);
  opacity: 0.7;
}
/* film grain to match the hero */
.site-atmos__grain {
  position: absolute; inset: 0; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* footer — its own neon accent + rising glow, echoing the hero */
#contact {
  position: relative;
  background: radial-gradient(80% 130% at 50% 125%, rgba(139,108,255,0.12), rgba(56,230,255,0.06) 42%, transparent 72%);
}

/* light theme: pull the dark atmosphere back so light content stays readable */
:root[data-theme="light"] .site-atmos { opacity: 0.35; }
:root[data-theme="light"] .site-atmos__grain { opacity: 0.02; }
:root[data-theme="light"] #contact {
  background: radial-gradient(80% 130% at 50% 125%, rgba(139,108,255,0.10), rgba(56,230,255,0.05) 42%, transparent 72%);
}

/* reduced motion: freeze the aurora */
@media (prefers-reduced-motion: reduce) { .site-atmos__aurora { animation: none; } }

/* =====================================================================
   COMET CURSOR — full-screen canvas overlay + hide the native pointer
   ===================================================================== */
.comet-cursor { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
/* native cursor stays visible for precise pointing; the comet is a decorative trail behind it */

/* =====================================================================
   ABOUT — redesigned to match the site: glass stat cards + a neon skill
   panel with cyan markers (overrides the plain version in style.css).
   ===================================================================== */
/* stats become glass cards, echoing the Work highlight cards */
.stats { gap: clamp(12px, 1.4vw, 20px); }
.stat {
  position: relative; gap: 10px; overflow: hidden;
  padding: clamp(16px, 1.9vw, 26px) clamp(14px, 1.6vw, 22px);
  border-radius: 16px;
  border: 1px solid rgba(150,180,255,0.14);
  background: linear-gradient(155deg, rgba(20,26,44,0.5), rgba(8,11,20,0.32));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.stat::before {                         /* top neon accent line */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #38e6ff, #8b6cff, transparent);
  opacity: 0.55; transition: opacity .3s;
}
.stat:hover {
  transform: translateY(-4px);
  border-color: rgba(56,230,255,0.4);
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), 0 0 30px rgba(56,230,255,0.12);
}
.stat:hover::before { opacity: 1; }
.stat-n {
  background: linear-gradient(100deg, #38e6ff, #8b6cff 62%, #ff53a8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* clip-text needs room below the baseline or descenders (Turkish "yıl") get cut */
  line-height: 1.16; padding-bottom: 0.1em;
}

/* skills become a neon glass panel with glowing cyan markers */
.skills {
  gap: 0; padding: clamp(4px, 0.8vw, 10px) clamp(16px, 1.8vw, 22px);
  border-radius: 18px;
  border: 1px solid rgba(150,180,255,0.12);
  background: linear-gradient(160deg, rgba(16,20,34,0.36), rgba(8,11,20,0.2));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.skills li {
  position: relative; display: flex; align-items: center; gap: 13px;
  font-size: 14.5px; color: var(--ink-dim);
  padding: clamp(13px, 1.5vw, 17px) 0;
  border-bottom: 1px solid rgba(150,180,255,0.08);
  transition: color .3s, transform .3s;
}
.skills li:last-child { border-bottom: 0; }
.skills li::before {                    /* glowing cyan marker */
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #38e6ff; box-shadow: 0 0 10px rgba(56,230,255,0.75);
  transition: transform .3s, box-shadow .3s;
}
.skills li:hover { color: var(--ink); transform: translateX(6px); }
.skills li:hover::before { transform: scale(1.45); box-shadow: 0 0 16px rgba(56,230,255,0.95); }

/* top of About: intro text (left) + skills panel (right), top-aligned */
.about-body { align-items: start; }
.about-side { display: flex; flex-direction: column; gap: clamp(16px, 2.2vh, 26px); }

/* metrics + availability: one full-width row where every card is the SAME height
   (grid stretch) with even spacing — the stats and status card align top & bottom */
.about-cards {
  display: grid; grid-template-columns: repeat(3, 1fr) 1.35fr;
  gap: clamp(14px, 1.5vw, 22px);
  margin-top: clamp(30px, 4.5vh, 56px);
  align-items: stretch;
}
.about-cards > .stat,
.about-cards > .about-status { height: 100%; }     /* fill the row's shared height */
@media (max-width: 900px) { .about-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .about-cards { grid-template-columns: 1fr; } }
.about-status {
  position: relative; overflow: hidden;
  padding: clamp(20px, 2.1vw, 28px); border-radius: 18px;
  border: 1px solid rgba(56,230,255,0.18);
  background: linear-gradient(160deg, rgba(20,26,44,0.42), rgba(8,11,20,0.24));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.about-status::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #38e6ff, #8b6cff, transparent); opacity: 0.6;
}
.about-status__top {
  display: flex; align-items: center; gap: 12px; margin: 0 0 8px;
  font-size: clamp(18px, 1.5vw, 23px); font-weight: 600; color: #eceae4; letter-spacing: -0.01em;
}
.about-status__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: #38e6ff;
  box-shadow: 0 0 12px #38e6ff; animation: about-pulse 2.2s ease-in-out infinite;
}
@keyframes about-pulse {
  0%,100% { box-shadow: 0 0 6px #38e6ff; }
  50%     { box-shadow: 0 0 16px #38e6ff, 0 0 0 6px rgba(56,230,255,0.12); }
}
.about-status__loc { margin: 0 0 16px; color: var(--ink-dim); font-size: 14.5px; }
.about-status__cta {
  display: inline-flex; align-items: center; gap: 8px;
  color: #38e6ff; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: gap .3s ease;
}
.about-status__cta:hover { gap: 13px; }
@media (prefers-reduced-motion: reduce) { .about-status__dot { animation: none; } }

/* single-column: stat cards go horizontal (number beside label) so they aren't too tall */
@media (max-width: 560px) {
  .about-cards .stat { flex-direction: row; align-items: center; gap: 18px; padding: 16px 18px; }
}

/* =====================================================================
   CONTACT / FOOTER — redesigned, on-brand, icon cards
   ===================================================================== */
.hvc { position: relative; padding-bottom: clamp(46px, 9vh, 100px); }
.hvc__wrap { max-width: 780px; position: relative; z-index: 1; }
.hvc__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #97a1bb;
  padding: 7px 14px; border: 1px solid rgba(150,170,220,0.16); border-radius: 999px;
  background: rgba(10,14,26,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hvc__pulse { width: 8px; height: 8px; border-radius: 50%; background: #35ffa3;
  box-shadow: 0 0 0 0 rgba(53,255,163,.6); animation: hv-pulse 2.4s ease-out infinite; }
.hvc__head { font-weight: 300; font-size: clamp(30px, 5.4vw, 60px); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0 0 34px; color: #eceae4; }
.hvc__grad { background: linear-gradient(100deg, #38e6ff, #8b6cff 55%, #ff53a8);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

.hvc__mail {
  display: inline-flex; align-items: center; gap: 15px; max-width: 100%;
  padding: 15px 20px; border-radius: 16px; margin-bottom: 34px;
  font-size: clamp(17px, 2.4vw, 27px); font-weight: 400; letter-spacing: -0.01em; color: #eceae4;
  border: 1px solid rgba(150,180,255,0.16);
  background: linear-gradient(150deg, rgba(22,28,48,0.5), rgba(10,14,26,0.4));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color .3s, box-shadow .3s, transform .2s;
}
.hvc__mail:hover { border-color: rgba(56,230,255,0.55); box-shadow: 0 0 44px rgba(56,230,255,0.18); transform: translateY(-2px); }
.hvc__mail-tx { overflow: hidden; text-overflow: ellipsis; }
.hvc__mail-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none; color: #38e6ff; background: rgba(56,230,255,0.10); }
.hvc__mail-ic svg { width: 22px; height: 22px; }
.hvc__mail-ar { margin-left: auto; color: #8b6cff; flex: none; transition: transform .25s; }
.hvc__mail-ar svg { width: 20px; height: 20px; }
.hvc__mail:hover .hvc__mail-ar { transform: translate(3px,-3px); }

.hvc__links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 40px; }
.hvc__card { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 14px;
  border: 1px solid rgba(150,180,255,0.14);
  background: linear-gradient(150deg, rgba(22,28,48,0.4), rgba(10,14,26,0.3));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s, box-shadow .3s, transform .2s; }
.hvc__card:hover { transform: translateY(-3px); border-color: rgba(139,108,255,0.5);
  box-shadow: 0 12px 34px rgba(0,0,0,0.4), 0 0 26px rgba(139,108,255,0.16); }
.hvc__card-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none;
  color: #cdd5ea; background: rgba(150,180,255,0.08); transition: color .3s, background .3s; }
.hvc__card-ic svg { width: 21px; height: 21px; }
.hvc__card:hover .hvc__card-ic { color: #38e6ff; background: rgba(56,230,255,0.12); }
.hvc__card-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hvc__card-tx b { font-weight: 600; font-size: 15px; color: #eceae4; }
.hvc__card-tx em { font-style: normal; font-size: 12px; color: #97a1bb; }
.hvc .copyright { color: #565a66; font-size: 13px; }
@media (max-width: 620px) { .hvc__links { grid-template-columns: 1fr; } }

/* =====================================================================
   WORK — interactive highlights: cursor spotlight + mouse-tilt 3D cards
   ===================================================================== */
.work-highlights {
  position: relative; margin: clamp(24px, 4vh, 48px) 0 clamp(40px, 7vh, 84px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.5vw, 22px);
  perspective: 1000px;   /* no outer panel padding/border → cards align with the section edge */
}
/* cursor-following spotlight */
.work-highlights::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 25%),
              rgba(56,230,255,0.15), rgba(139,108,255,0.06) 40%, transparent 62%);
  opacity: 0; transition: opacity .4s ease;
}
.work-highlights:hover::before { opacity: 1; }

.wh-card {
  position: relative; z-index: 1;
  padding: clamp(20px, 2.3vw, 30px); border-radius: 16px;
  background: linear-gradient(150deg, rgba(24,30,52,0.55), rgba(10,14,26,0.42));
  border: 1px solid rgba(150,180,255,0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform-style: preserve-3d; will-change: transform;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.wh-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 50%), rgba(139,108,255,0.18), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.wh-card:hover { border-color: rgba(56,230,255,0.42); box-shadow: 0 18px 44px rgba(0,0,0,0.42), 0 0 32px rgba(56,230,255,0.12); }
.wh-card:hover::after { opacity: 1; }
.wh-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  color: #38e6ff; background: rgba(56,230,255,0.1); margin-bottom: 16px; transform: translateZ(30px); }
.wh-ic svg { width: 24px; height: 24px; }
.wh-card h3 { font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; letter-spacing: -0.01em; color: #eceae4; margin: 0 0 8px; transform: translateZ(20px); }
.wh-card p { font-size: 14px; line-height: 1.55; color: #97a1bb; margin: 0; transform: translateZ(12px); }
/* the cards are links → they jump the big screen to a representative project */
.wh-card { text-decoration: none; color: inherit; cursor: pointer; }
.wh-go {
  position: absolute; top: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); z-index: 2;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: #38e6ff; border: 1px solid rgba(56,230,255,0.22); background: rgba(56,230,255,0.06);
  opacity: 0.4; transform: translateZ(26px);
  transition: opacity .3s, background .3s, border-color .3s, transform .3s;
}
.wh-go svg { width: 15px; height: 15px; }
.wh-card:hover .wh-go { opacity: 1; background: rgba(56,230,255,0.16); border-color: rgba(56,230,255,0.5); }

/* section headers left-aligned, full content width; short titles fill naturally
   (no justify) so the spacing stays tight */
.section-head { text-align: left; }
.section-title { max-width: none; }
/* two-tone section titles: emphasised part gets the neon gradient (same as hero/CTA),
   applied both to the raw .st-grad span and to per-word .rh-word.is-grad after splitTitle */
.section-title .st-grad,
.section-title .rh-word.is-grad {
  background: linear-gradient(100deg, #38e6ff, #8b6cff 55%, #ff53a8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width: 820px) { .work-highlights { grid-template-columns: 1fr; perspective: none; } .wh-card { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .wh-card { transform: none !important; } }

/* the detailed project list is replaced by the slider + marquee */
.showcase .show-item { display: none; }

/* =====================================================================
   WORK — one big "TV"; hovering (or tapping) a thumbnail below swaps
   that project onto the big screen (crossfade "channel change").
   ===================================================================== */
.work-tv { margin: clamp(22px, 4vh, 50px) 0 0; }

/* split showcase: project info (left) + big live-site preview (right) */
.wtv-main {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.82fr);
  gap: clamp(24px, 3.4vw, 60px); align-items: center;
}
.wtv-screen { grid-column: 1; grid-row: 1; }   /* big live-site preview on the LEFT */
.wtv-info   { grid-column: 2; grid-row: 1; }   /* project info on the RIGHT, same row */
.wtv-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; }
.wtv-info__title { font-size: clamp(24px, 2.7vw, 42px); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; color: #fff; }
.wtv-info__sub { color: var(--ink-dim, #97a1bb); font-size: clamp(14px, 1.15vw, 18px); }
/* "Visit site" CTA — glass pill, neon gradient hairline, launching arrow chip.
   idle: dark glass + bright gradient chip · hover: fills gradient, content inverts to dark */
.wtv-info__cta {
  position: relative; isolation: isolate; margin-top: 10px;
  display: inline-flex; align-items: center; gap: 13px;
  padding: 8px 9px 8px 22px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  color: #eef3ff; border: 1px solid transparent;
  background:
    linear-gradient(#0b0e15, #0b0e15) padding-box,
    linear-gradient(120deg, rgba(56,230,255,.5), rgba(139,108,255,.45) 55%, rgba(255,83,168,.4)) border-box;
  box-shadow: 0 12px 30px -16px rgba(56,230,255,0.5);
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .3s, color .25s;
}
.wtv-info__cta::before {                 /* gradient fill that blooms in on hover */
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, #38e6ff, #8b6cff 55%, #ff53a8);
  opacity: 0; transition: opacity .3s;
}
.wtv-info__cta-ico {                      /* circular arrow chip on the right */
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; font-weight: 700; line-height: 1;
  background: linear-gradient(120deg, #38e6ff, #8b6cff); color: #06121a;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s;
}
.wtv-info__cta:hover {
  transform: translateY(-2px); color: #06121a;
  box-shadow: 0 20px 44px -16px rgba(56,230,255,0.7);
}
.wtv-info__cta:hover::before { opacity: 1; }
.wtv-info__cta:hover .wtv-info__cta-ico { transform: translate(3px, -3px); background: #0b0e15; color: #eef3ff; }
.wtv-info__cta:focus-visible { outline: 2px solid var(--hv-cyan, #38e6ff); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .wtv-info__cta, .wtv-info__cta-ico { transition: color .2s, background .2s, opacity .2s; }
  .wtv-info__cta:hover, .wtv-info__cta:hover .wtv-info__cta-ico { transform: none; }
}
.wtv-info.is-swap { animation: wtv-swap .45s ease; }   /* re-fade the text on project switch */
@keyframes wtv-swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .wtv-main { grid-template-columns: 1fr; gap: clamp(12px, 2.2vh, 20px); }
  .wtv-screen, .wtv-info { grid-column: auto; grid-row: auto; }
  .wtv-screen { order: -1; }              /* preview first — it's the tappable link that opens the site */
  .wtv-info { gap: 6px; }
  .wtv-info__cta { display: none; }        /* no floating button on phones — tap the preview to open */
}
@media (prefers-reduced-motion: reduce) { .wtv-info.is-swap { animation: none; } }

/* --- the big screen: television bezel with a heavier bottom "chin" --- */
.wtv-screen {
  position: relative; border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden;
  /* thin neon gradient border in the site palette (cyan → violet → magenta),
     matching the "digital" headline gradient — a coloured frame, not a black TV bezel */
  border: clamp(3px, 0.4vw, 6px) solid transparent;
  background:
    linear-gradient(#06070b, #06070b) padding-box,
    linear-gradient(100deg, #38e6ff, #8b6cff 55%, #ff53a8) border-box;
  box-shadow: 0 30px 72px rgba(0,0,0,0.5), 0 0 34px rgba(56,230,255,0.22), 0 0 66px rgba(139,108,255,0.14);
}
/* browser chrome bar → the screenshot reads as a live website, not a flat image */
.wtv-chrome {
  display: flex; align-items: center; gap: clamp(8px, 1vw, 14px);
  height: clamp(32px, 3.4vw, 42px); padding: 0 clamp(12px, 1.4vw, 18px);
  background: linear-gradient(#0d1018, #0a0c12);
  border-bottom: 1px solid rgba(150,180,255,0.10);
}
.wtv-dots { display: inline-flex; gap: 7px; flex: none; }
.wtv-dots i { width: clamp(8px, 0.85vw, 11px); aspect-ratio: 1; border-radius: 50%; display: block; }
.wtv-dots i:nth-child(1) { background: #38e6ff; box-shadow: 0 0 8px rgba(56,230,255,0.5); }
.wtv-dots i:nth-child(2) { background: #8b6cff; box-shadow: 0 0 8px rgba(139,108,255,0.5); }
.wtv-dots i:nth-child(3) { background: #ff53a8; box-shadow: 0 0 8px rgba(255,83,168,0.5); }
.wtv-url {
  flex: 1 1 auto; min-width: 0; max-width: 66%; margin: 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: clamp(3px, 0.5vw, 6px) clamp(10px, 1.2vw, 16px); border-radius: 8px;
  background: rgba(150,180,255,0.06); border: 1px solid rgba(150,180,255,0.08);
  font-size: clamp(11px, 0.9vw, 13px); letter-spacing: .01em; color: #9aa4bb; white-space: nowrap;
}
.wtv-url svg { width: clamp(11px, 1vw, 13px); height: auto; flex: none; color: #38e6ff; opacity: .85; }
.wtv-url-tx { overflow: hidden; text-overflow: ellipsis; }
.wtv-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

/* stacked works — the active "page" slides in from the right while the previous
   one fades; reads as turning to the next page rather than a flat crossfade */
.wtv-slide {
  position: absolute; inset: 0; display: block; text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateX(7%) scale(1.015);
  transition: opacity .45s ease, transform .65s cubic-bezier(.2,.7,.2,1), visibility 0s .65s;
  pointer-events: none;
}
.wtv-slide.is-on {
  opacity: 1; visibility: visible; transform: translateX(0) scale(1);
  transition: opacity .45s ease, transform .65s cubic-bezier(.2,.7,.2,1);
  pointer-events: auto;
}
.wtv-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.wtv-slide::after {                                   /* subtle bottom fade so the shot melts into the frame */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,5,9,0.5), transparent 24%);
}

/* screen edge line + subtle cyan bloom so the panel reads as a live display */
.wtv-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);   /* faint inner hairline, no TV recess */
}

/* caption */
.wtv-cap {
  position: absolute; left: clamp(16px, 2.6vw, 32px); right: clamp(16px, 2.6vw, 32px);
  bottom: clamp(14px, 2.2vw, 26px); z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0; transform: translateY(14px); transition: opacity .55s .2s, transform .55s .2s;
}
.wtv-slide.is-on .wtv-cap { opacity: 1; transform: none; }
.wtv-cap b { font-size: clamp(17px, 1.6vw, 24px); font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.wtv-cap > span { font-size: clamp(12px, 1vw, 14px); color: #cdd5ea; }
.wtv-cap em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--hv-cyan, #38e6ff); margin-top: 5px; }

/* --- the thumbnail rail (the "other works") --- */
.wtv-thumbs {
  display: flex; gap: clamp(16px, 2vw, 28px); justify-content: flex-start;
  margin-top: clamp(32px, 5vh, 64px); padding: 6px 0;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
          mask-image: linear-gradient(90deg, #000 92%, transparent);   /* fade only the right (scroll) edge */
}
.wtv-thumbs::-webkit-scrollbar { display: none; }
.wtv-thumb {
  position: relative; flex: 0 0 clamp(112px, 13.5vw, 160px); aspect-ratio: 16 / 10;
  border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0;
  border: 2px solid rgba(150,180,255,0.14); background: #0b0e15;
  opacity: 0.5; filter: saturate(0.85);
  transition: opacity .3s, border-color .3s, transform .3s, box-shadow .3s, filter .3s;
}
.wtv-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.wtv-thumb span {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  font-size: clamp(11px, 0.95vw, 13px); font-weight: 600; letter-spacing: .02em;
  color: #eaf2ff; text-align: center; padding: 15px 6px 7px;
  background: linear-gradient(to top, rgba(3,4,8,0.92), transparent);
}
.wtv-thumb:hover, .wtv-thumb:focus-visible {
  opacity: 1; filter: none; border-color: rgba(56,230,255,0.45); transform: translateY(-3px); outline: none;
}
.wtv-thumb.is-active {
  opacity: 1; filter: none; border-color: transparent;
  background:
    linear-gradient(#0b0e15, #0b0e15) padding-box,
    linear-gradient(100deg, #38e6ff, #8b6cff 55%, #ff53a8) border-box;
  box-shadow: 0 10px 26px rgba(0,0,0,0.42), 0 0 22px rgba(56,230,255,0.26), 0 0 36px rgba(139,108,255,0.16);
}
@media (prefers-reduced-motion: reduce) {
  .wtv-slide { transition: opacity .001s; transform: none; }
  .wtv-slide.is-on { transform: none; }
}

/* =====================================================================
   WORK — interactive neon marquee that breaks up the project rhythm
   ===================================================================== */
.work-marquee {
  position: relative; margin: clamp(6px, 1.5vh, 24px) 0;
  padding: clamp(28px, 4.5vh, 54px) 0;
  display: flex; flex-direction: column; gap: clamp(4px, 1vh, 12px);
  border-top: 1px solid rgba(150,180,255,0.12);
  border-bottom: 1px solid rgba(150,180,255,0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wm-row { display: flex; overflow: hidden; }
.wm-track {
  display: flex; align-items: center; gap: clamp(22px, 3vw, 46px);
  flex: none; padding-right: clamp(22px, 3vw, 46px);
  animation: wm-scroll 36s linear infinite; will-change: transform;
}
.wm-row--rev .wm-track { animation-direction: reverse; animation-duration: 44s; }
.work-marquee:hover .wm-track { animation-play-state: paused; }
.wm-item {
  font-size: clamp(24px, 4.2vw, 50px); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap;
  background: linear-gradient(100deg, #38e6ff, #8b6cff 55%, #ff53a8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.5; transition: opacity .35s ease;
}
.wm-sep { color: #38e6ff; font-size: clamp(13px, 1.8vw, 20px); opacity: 0.45; text-shadow: 0 0 12px rgba(56,230,255,0.6); }
.work-marquee:hover .wm-item { opacity: 0.92; }

/* row 2 — conference cities & partners: outlined + uppercase so the proper
   nouns (Rome, London, Springer…) read as places/partners, not skill words */
.wm-row--places .wm-item {
  background: none;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(125,228,255,0.82);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: clamp(17px, 2.9vw, 34px); font-weight: 500;
  text-shadow: 0 0 20px rgba(56,230,255,0.22);
  opacity: 0.62;
}
.wm-row--places .wm-sep { color: #8b6cff; text-shadow: 0 0 12px rgba(139,108,255,0.6); }
.work-marquee:hover .wm-row--places .wm-item { -webkit-text-stroke-color: rgba(160,242,255,1); opacity: 1; }
@keyframes wm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wm-track { animation: none; } }

/* =====================================================================
   SIDE-RAIL — retheme to the cyan/violet palette + section icons
   (overrides the amber styling from style.css)
   ===================================================================== */
.sr-top { color: #97a1bb; border-color: rgba(150,180,255,0.22); }
.sr-top:hover, .sr-top.active { color: #38e6ff; border-color: rgba(56,230,255,0.5); }
.sr-top:focus-visible { outline-color: #38e6ff; }
.sr-index a { color: #5a6485; }
.sr-index a:hover { color: #cdd5ea; }
.sr-index a.active { color: #38e6ff; }
.sr-index a:focus-visible { outline-color: #38e6ff; }
.sr-fill { background: linear-gradient(#38e6ff, #8b6cff); }
.sr-cursor { background: #38e6ff; box-shadow: 0 0 0 3px rgba(56,230,255,0.5), 0 0 12px rgba(56,230,255,0.7); }
.sr-index a.active .sr-dot { background: #38e6ff; box-shadow: 0 0 0 3px rgba(56,230,255,0.22), 0 0 10px rgba(56,230,255,0.6); }
.sr-index a:hover .sr-dot { box-shadow: inset 0 0 0 1px #cdd5ea; }
.sr-index a.active .sr-name { color: #38e6ff; }
/* section icon that replaces the plain number */
.sr-ic { display: grid; place-items: center; width: 20px; height: 20px; color: inherit; }
.sr-ic svg { width: 16px; height: 16px; }

/* =====================================================================
   HERO / BACKGROUND FIX — calm the busy right side: soften the rotating
   portal and pull the near-field falling icons back so the subject +
   code screen read cleanly (no muddy purple blur behind the figure).
   ===================================================================== */
.hv__portal   { opacity: 0.42; filter: blur(6px); }
.hv__portal--2{ opacity: 0.32; }
.hv__field--front .hv__ic-i { opacity: calc(var(--o, .6) * 0.7) !important; }  /* dial back the big blurry foreground chips */
.hv__subject-rim { opacity: 0.5; }
/* =====================================================================
   HERO RECOMPOSE — figure to the LEFT, big horizontal headline to the
   RIGHT so the type reaches toward the subject (editorial, not a flat
   left-aligned "document" block).
   ===================================================================== */
/* professional one-line description under the headline — fills the hero and
   frames what he does (kept to a single muted line, not a paragraph block) */
.hv__subtitle {
  color: var(--hv-muted); font-size: clamp(15px, 1.25vw, 20px); line-height: 1.55;
  font-weight: 400; margin: 2px 0 26px; max-width: 60ch;
}

@media (min-width: 821px) {
  .hv__subject   { left: 21%; }
  /* code editor + terminal moved OFF the figure into the bottom corners
     (decorative floating cards) so the photo reads cleanly */
  .hv__codepanel { left: auto; right: 4.5%; top: auto; bottom: 6%; }
  .hv__termfx    { left: 3.5%; right: auto; top: auto; bottom: 11%; }

  .hv__content {
    left: auto; right: clamp(22px, 4vw, 56px);
    top: 0; bottom: 0;                 /* full height so justify-content: safe center keeps the title clear of the top */
    align-items: flex-end;             /* right-aligned editorial column — title, subtitle AND buttons hug the right */
    text-align: right;
    max-width: min(820px, 58vw);  /* tighter right column so the nowrap title stays clear of the photo */
    padding-inline: 0;                 /* keep the block (top/bottom) padding from the base rule for nav clearance */
  }
  .hv__title  { font-size: clamp(38px, 5.4vw, 80px); line-height: 0.92; letter-spacing: -0.035em; margin-bottom: 24px; }
  .hv__subtitle { max-width: 48ch; margin-left: auto; margin-bottom: 30px; }
  .hv__cta,
  .hv__socials { justify-content: flex-end; }
}

/* wide screens: fill the empty middle — a larger headline that reaches back
   toward the photo (bigger + closer, while still clearing the figure) */
@media (min-width: 1121px) {
  .hv__subject { left: 26%; width: min(52vh, 480px); bottom: clamp(44px, 9vh, 104px); }
  .hv__content { max-width: min(1040px, 70vw); }
  .hv__title   { font-size: clamp(72px, 6.6vw, 100px); }
}

/* =====================================================================
   DESIGN GALLERY — horizontal sliders by category + lightbox
   ===================================================================== */
.design-cat { margin-top: clamp(30px, 4.5vh, 56px); }
.design-cat:first-of-type { margin-top: clamp(22px, 3.5vh, 40px); }
.design-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(12px, 1.6vh, 18px); }
.design-cat__title { margin: 0; font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; letter-spacing: .02em; color: #eceae4; }
.design-cat__nav { display: inline-flex; gap: 8px; flex: none; }
.dcn {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; font-size: 20px; line-height: 1;
  color: #cdd5ea; background: rgba(20,26,44,0.5); border: 1px solid rgba(150,180,255,0.14); border-radius: 999px;
  transition: background .25s, border-color .25s, color .25s, opacity .25s;
}
.dcn:hover { background: rgba(56,230,255,0.16); border-color: rgba(56,230,255,0.5); color: #fff; }
.dcn[disabled] { opacity: .3; cursor: default; }
@media (hover: none) { .design-cat__nav { display: none; } }

.design-row {
  display: flex; gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; padding: 6px 2px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.design-row::-webkit-scrollbar { display: none; }
.design-item {
  flex: 0 0 auto; height: clamp(240px, 34vh, 400px); scroll-snap-align: start;
  position: relative; display: block; border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(150,180,255,0.12); background: #0b0e15;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.design-item img { display: block; height: 100%; width: auto; }
.design-item--logo { height: clamp(150px, 19vh, 190px); }
@media (max-width: 620px) { .design-item { height: clamp(220px, 42vh, 320px); } .design-item--logo { height: 130px; } }
.design-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 3px; padding: 40px 16px 15px;
  background: linear-gradient(to top, rgba(4,5,9,0.94), rgba(4,5,9,0.5) 55%, transparent);
  opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s;
}
.design-item figcaption b { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.design-item figcaption span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #38e6ff; }
.design-item::after {
  content: ""; position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(10,14,26,0.55) center/16px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338e6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  border: 1px solid rgba(56,230,255,0.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s;
}
.design-item:hover, .design-item:focus-visible {
  transform: translateY(-4px); outline: none; border-color: rgba(56,230,255,0.45);
  box-shadow: 0 18px 46px rgba(0,0,0,0.5), 0 0 30px rgba(56,230,255,0.14), 0 0 60px rgba(139,108,255,0.10);
}
.design-item:hover figcaption, .design-item:focus-visible figcaption { opacity: 1; transform: none; }
.design-item:hover::after, .design-item:focus-visible::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .design-item, .design-item figcaption, .design-item::after, .design-row { transition: none; scroll-behavior: auto; } }

html.dlb-locked { overflow: hidden; }
.dlb {
  position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px); background: rgba(3,4,8,0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.dlb.is-open { display: flex; animation: dlb-in .25s ease; }
@keyframes dlb-in { from { opacity: 0; } to { opacity: 1; } }
.dlb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 92vw; }
.dlb__img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 44px rgba(56,230,255,0.12); }
.dlb__cap { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; justify-content: center; color: #cdd5ea; font-size: 14px; }
.dlb__cap b { color: #fff; font-weight: 600; }
.dlb__cap span { color: #38e6ff; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.dlb__btn {
  position: absolute; display: grid; place-items: center; cursor: pointer; color: #eceae4; line-height: 1;
  background: rgba(20,26,44,0.55); border: 1px solid rgba(150,180,255,0.16); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s, border-color .25s, transform .2s;
}
.dlb__btn:hover { background: rgba(56,230,255,0.16); border-color: rgba(56,230,255,0.5); }
.dlb__close { top: clamp(14px, 2.4vw, 28px); right: clamp(14px, 2.4vw, 28px); width: 44px; height: 44px; font-size: 26px; }
.dlb__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; }
.dlb__nav:hover { transform: translateY(-50%) scale(1.06); }
.dlb__prev { left: clamp(8px, 2vw, 26px); }
.dlb__next { right: clamp(8px, 2vw, 26px); }
@media (max-width: 560px) { .dlb__nav { width: 42px; height: 42px; font-size: 26px; } }

/* ---- category cards (accordion): click a card, its works open inside ---- */
.dcat-card {
  position: relative; width: 100%; cursor: pointer; text-align: left; color: inherit; font: inherit; appearance: none;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic . go" "title title title" "desc desc desc";
  padding: clamp(20px, 2.3vw, 30px); border-radius: 20px;
  border: 1px solid rgba(150,180,255,0.12);
  background: linear-gradient(155deg, rgba(20,26,44,0.5), rgba(8,11,20,0.32));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .3s, box-shadow .3s, transform .3s, background .3s;
}
.dcat-card__ic {
  grid-area: ic; display: grid; place-items: center; width: clamp(48px, 4.6vw, 60px); aspect-ratio: 1; border-radius: 15px;
  color: #38e6ff; background: rgba(56,230,255,0.10); border: 1px solid rgba(56,230,255,0.18);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.dcat-card__ic svg { width: 50%; height: 50%; }
.dcat-card__go {
  grid-area: go; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none;
  color: #cdd5ea; border: 1px solid rgba(150,180,255,0.16); background: rgba(10,14,26,0.4);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s, background .3s, border-color .3s;
}
.dcat-card__go svg { width: 20px; height: 20px; }
.dcat-card__title { grid-area: title; font-size: clamp(21px, 2.3vw, 30px); font-weight: 600; letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; }
.dcat-card__desc { grid-area: desc; font-size: clamp(14px, 1.35vw, 17px); line-height: 1.5; color: #9aa4bb; margin: 0; max-width: 48ch; }
.dcat-card:hover, .dcat-card:focus-visible {
  outline: none; transform: translateY(-2px); border-color: rgba(56,230,255,0.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.42), 0 0 30px rgba(56,230,255,0.10);
}
.dcat-card:hover .dcat-card__go, .dcat-card:focus-visible .dcat-card__go { color: #fff; background: rgba(56,230,255,0.16); border-color: rgba(56,230,255,0.5); }
.design-cat[data-open="true"] > .dcat-card { border-color: rgba(56,230,255,0.42); background: linear-gradient(155deg, rgba(24,32,54,0.62), rgba(10,14,26,0.42)); }
.design-cat[data-open="true"] > .dcat-card .dcat-card__go { transform: rotate(90deg); color: #38e6ff; background: rgba(56,230,255,0.14); border-color: rgba(56,230,255,0.5); }

.dcat-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.design-cat[data-open="true"] > .dcat-panel { grid-template-rows: 1fr; }
.dcat-panel__inner { overflow: hidden; min-height: 0; }
.design-cat[data-open="true"] > .dcat-panel > .dcat-panel__inner { padding-top: clamp(12px, 1.8vh, 20px); }
.dcat-panel__inner .design-cat__nav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .dcat-panel { transition: none; } .dcat-card__go { transition: color .3s; } }