/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* CORE: COLOR PRIMITIVES */
  --color-neutral-0: #ffffff;
  --color-neutral-25: #f8f6f1;
  --color-neutral-50: #f0eee9;
  --color-neutral-100: #ede8de;
  --color-neutral-150: #e4dfd4;
  --color-neutral-300: #9e9890;
  --color-neutral-500: #6b6460;
  --color-neutral-550: #888079;
  --color-neutral-600: #4a4640;
  --color-neutral-800: #161511;
  --color-neutral-850: #141210;
  --color-neutral-875: #111109;
  --color-neutral-900: #080807;
  --color-neutral-920: #0e0d0b;

  --color-accent-400: #ff5520;
  --color-accent-500: #ff3d00;
  --color-accent-500-rgb: 255, 61, 0;

  /* SEMANTIC: DARK THEME */
  --color-bg-base: var(--color-neutral-900);
  --color-bg-elev-1: var(--color-neutral-920);
  --color-bg-elev-2: var(--color-neutral-800);
  --color-bg-card: var(--color-neutral-875);
  --color-border-soft: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-550);
  --color-text-muted: var(--color-neutral-600);

  /* SEMANTIC: LIGHT THEME */
  --color-light-bg: var(--color-neutral-100);
  --color-light-bg-alt: var(--color-neutral-150);
  --color-light-card: rgba(0, 0, 0, 0.04);
  --color-light-border: rgba(0, 0, 0, 0.08);
  --color-light-text-primary: var(--color-neutral-850);
  --color-light-text-secondary: var(--color-neutral-500);
  --color-light-text-muted: var(--color-neutral-300);

  /* ACCENT SEMANTICS */
  --color-accent-primary: var(--color-accent-500);
  --color-accent-weak: rgba(var(--color-accent-500-rgb), 0.10);
  --color-accent-faint: rgba(var(--color-accent-500-rgb), 0.06);
  --color-accent-border: rgba(var(--color-accent-500-rgb), 0.35);
  --color-accent-scrollbar: rgba(var(--color-accent-500-rgb), 0.40);

  /* TYPOGRAPHY */
  --font-family-base: 'Manrope', sans-serif;
  --font-family-heading: 'Anonymous Pro', monospace;
  --font-family-mono: 'Anonymous Pro', monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.1;
  --line-height-base: 1.55;
  --line-height-relaxed: 1.75;
  --font-size-2xs: 0.57rem;
  --font-size-xs: 0.68rem;
  --font-size-sm: 0.82rem;
  --font-size-md: 0.95rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.35rem;
  --font-size-2xl: 1.9rem;

  /* SPACING SCALE */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-18: 36px;
  --space-20: 40px;
  --space-22: 44px;
  --space-24: 48px;
  --space-28: 56px;
  --space-32: 64px;
  --space-34: 68px;
  --space-40: 80px;
  --space-48: 96px;

  /* RADIUS */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-pill: 100px;
  --radius-round: 999px;

  /* SHADOWS + BLUR */
  --shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.09);
  --shadow-modal: 0 26px 70px rgba(0, 0, 0, 0.42);
  --shadow-accent: 0 10px 24px rgba(var(--color-accent-500-rgb), 0.24);
  --blur-nav: 16px;
  --blur-glass: 20px;

  /* MOTION */
  --motion-fast: .15s;
  --motion-base: .3s;
  --motion-slow: .42s;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-emphasis: cubic-bezier(.16, 1, .3, 1);

  /* Z-INDEX */
  --z-base: 0;
  --z-nav: 100;
  --z-modal: 140;
  --z-cursor-outer: 9997;
  --z-cursor-inner: 9998;
  --z-preloader: 9999;

  /* LAYOUT */
  --layout-content-max: 1360px;
  --layout-content-gutter: 24px;
  --layout-content-pad: max(var(--layout-content-gutter), calc((100vw - var(--layout-content-max)) / 2));

  /* BREAKPOINTS (REFERENCE TOKENS) */
  --bp-sm: 560px;
  --bp-md: 860px;
  --bp-lg: 1100px;

  /* COMPAT ALIASES FOR CURRENT CODEBASE */
  --d: var(--color-bg-base);
  --d2: var(--color-bg-elev-1);
  --d3: var(--color-bg-elev-2);
  --card: var(--color-bg-card);
  --bd: var(--color-border-soft);
  --bdh: var(--color-border-strong);
  --t: var(--color-text-primary);
  --tm: var(--color-text-secondary);
  --tdim: var(--color-text-muted);

  --l: var(--color-light-bg);
  --l2: var(--color-light-bg-alt);
  --lcard: var(--color-light-card);
  --lborder: var(--color-light-border);
  --lt: var(--color-light-text-primary);
  --ltm: var(--color-light-text-secondary);
  --ltdim: var(--color-light-text-muted);

  --a: var(--color-accent-primary);
  --adim: var(--color-accent-weak);
  --afade: var(--color-accent-faint);

  --fb: var(--font-family-base);
  --fh: var(--font-family-heading);
  --fm: var(--font-family-mono);

  --content-max: var(--layout-content-max);
  --content-pad: var(--layout-content-pad);
}

html { scroll-behavior: smooth; }
body {
  background: var(--d);
  color: var(--t);
  font-family: var(--fb);
  overflow-x: hidden;
  line-height: 1.55;
}
body.lock { overflow: hidden; }
body.menu-open,
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* scrollbar */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-thumb { background: rgba(255,61,0,0.4); }

/* noise texture */
body::after {
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='f'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.032'/%3E%3C/svg%3E");
  opacity:.55;
}

/* ─── CURSOR ─── */
.cur { position:fixed; width:7px; height:7px; background:var(--a); border-radius:50%; pointer-events:none; z-index:9998; transition:transform .15s; }
.cur-r { position:fixed; width:32px; height:32px; border:1px solid rgba(255,61,0,.35); border-radius:50%; pointer-events:none; z-index:9997; transition:width .3s,height .3s,border-color .3s; }

/* ─── PRELOADER ─── */
#pl {
  position:fixed; inset:0; background:var(--d); z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.pl-text {
  font-family:var(--fm);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight:700; letter-spacing:-.02em;
  color:rgba(255,255,255,.12);
  position:relative; display:inline-block; user-select:none;
}
.pl-fill {
  position:absolute; top:0; left:0;
  color:var(--t);
  clip-path:inset(0 100% 0 0);
  white-space:nowrap; pointer-events:none;
}
.pl-dot { color:var(--a); }

/* ─── NAV ─── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px var(--content-pad);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0;
  transition:background .3s, backdrop-filter .3s;
}
nav.scrolled {
  background: rgba(8,8,7,.88);
  backdrop-filter: blur(16px);
}
nav::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(8,8,7,.85) 0%, transparent 100%);
  pointer-events:none;
  transition:opacity .3s;
}
nav.scrolled::before { opacity:0; }

.nav-logo { font-family:var(--fm); font-size:.95rem; font-weight:700; position:relative; z-index:1; }
.nav-logo span { color:var(--a); }
.nav-links { display:flex; gap:32px; list-style:none; position:relative; z-index:1; }
.nav-links a {
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:6px 2px;
  font-family:var(--fm);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tm);
  transition:color .2s;
}
.nav-links a:hover { color:var(--t); }
.lang-switch {
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(8,8,7,.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lang-switch-btn {
  min-width:40px;
  min-height:32px;
  padding:0 10px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(240,238,233,.78);
  font-family:var(--fm);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lang-switch-btn:hover { color:#fff; }
.lang-switch-btn.is-active {
  background:rgba(255,61,0,.82);
  color:#fff;
}

.nav-cta {
  position:relative; z-index:1;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 22px;
  border:1px solid rgba(255,255,255,.12); border-radius:100px;
  font-family:var(--fm); font-size:.72rem; font-weight:700; color:var(--t);
  transition:all .25s;
}
.nav-cta:hover { background:var(--a); color:#fff; border-color:var(--a); }

.nav-burger {
  display:none;
  width:42px; height:42px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(8,8,7,.48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  align-items:center; justify-content:center;
  cursor:pointer;
  position:relative; z-index:2;
  transition:background .25s, border-color .25s;
}
.nav-burger:hover { border-color:rgba(255,255,255,.34); background:rgba(12,12,10,.68); }
.nav-burger span {
  position:absolute;
  width:18px; height:1.5px;
  border-radius:99px;
  background:var(--t);
  transition:transform .28s ease, opacity .22s ease;
}
.nav-burger span:nth-child(1) { transform:translateY(-6px); }
.nav-burger span:nth-child(2) { transform:translateY(0); }
.nav-burger span:nth-child(3) { transform:translateY(6px); }
.nav-burger.is-open span:nth-child(1) { transform:translateY(0) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity:0; transform:scaleX(.4); }
.nav-burger.is-open span:nth-child(3) { transform:translateY(0) rotate(-45deg); }

.nav-mobile-menu {
  position:fixed; inset:0;
  z-index:99;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease;
}
.nav-mobile-menu::before {
  content:'';
  position:absolute; inset:0;
  background:rgba(5,5,4,.44);
}
.nav-mobile-menu.open { opacity:1; visibility:visible; pointer-events:auto; }
.nav-mobile-panel {
  position:absolute;
  top:78px; left:24px; right:24px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:12px;
  background:rgba(12,11,10,.56);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow:0 20px 50px rgba(0,0,0,.34);
  transform:translateY(-10px) scale(.985);
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-mobile-menu.open .nav-mobile-panel { transform:translateY(0) scale(1); opacity:1; }
.nav-mobile-links {
  display:flex;
  flex-direction:column;
  gap:4px;
  list-style:none;
}
.nav-mobile-links a {
  display:block;
  padding:14px 12px;
  border-radius:10px;
  font-family:var(--fm);
  font-size:.77rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:rgba(240,238,233,.92);
  transition:background .22s ease, color .22s ease;
}
.nav-mobile-links a:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-mobile-cta {
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,61,0,.55);
  background:rgba(255,61,0,.14);
  color:#fff;
  font-family:var(--fm);
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .22s ease, border-color .22s ease;
}
.nav-mobile-cta:hover {
  background:rgba(255,61,0,.24);
  border-color:rgba(255,61,0,.72);
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .nav-mobile-panel { background:rgba(10,9,8,.93); }
  .nav-burger { background:rgba(10,9,8,.9); }
}

@media(min-width:1101px){
  .nav-mobile-menu { display:none; }
}
@media(pointer:coarse){
  .nav-links a{ min-height:44px; padding:8px 4px; }
  .nav-cta{ min-height:44px; }
  .lang-switch-btn{ min-height:36px; }
  .faq-q{ min-height:48px; padding:16px 0; }
}

/* ─── CONTACT MODAL ─── */
.contact-modal {
  position:fixed; inset:0;
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}
.contact-modal::before {
  content:'';
  position:absolute; inset:0;
  background:rgba(5,5,4,.56);
}
.contact-modal.open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.contact-modal-dialog {
  position:relative;
  width:min(560px, 100%);
  max-height:calc(100vh - 44px);
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(11,10,9,.56);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
  box-shadow:0 26px 70px rgba(0,0,0,.42);
  padding:24px;
  transform:translateY(12px) scale(.98);
  opacity:0;
  transition:transform .32s ease, opacity .32s ease;
}
.contact-modal.open .contact-modal-dialog {
  transform:translateY(0) scale(1);
  opacity:1;
}
.contact-modal-close {
  position:absolute; top:12px; right:12px;
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:rgba(240,238,233,.95);
  font-family:var(--fm);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:all .22s ease;
}
.contact-modal-close:hover { background:rgba(255,61,0,.2); border-color:rgba(255,61,0,.55); color:#fff; }
.contact-modal-logo {
  font-family:var(--fm);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--t);
  margin-bottom:16px;
}
.contact-modal-logo span { color:var(--a); }
.contact-modal-kicker {
  font-family:var(--fm);
  font-size:.62rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(240,238,233,.6);
  margin-bottom:10px;
}
.contact-modal-title {
  font-family:var(--fh);
  font-size:clamp(1.35rem, 3.3vw, 2rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--t);
  margin-bottom:10px;
}
.contact-modal-sub {
  font-size:.86rem;
  color:rgba(240,238,233,.82);
  line-height:1.65;
  margin-bottom:18px;
}
.contact-modal-links {
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}
.cm-link {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  transition:all .24s ease;
}
.cm-link-label {
  font-family:var(--fm);
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(240,238,233,.58);
}
.cm-link-value {
  font-size:.9rem;
  color:rgba(240,238,233,.96);
  word-break:break-word;
}
.cm-link:hover {
  background:rgba(255,61,0,.14);
  border-color:rgba(255,61,0,.58);
  transform:translateY(-2px);
}
.cm-link:hover .cm-link-label,
.cm-link:hover .cm-link-value { color:#fff; }

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .contact-modal-dialog { background:rgba(10,9,8,.95); }
}

/* ─── SHARED SECTION ─── */
section { padding:96px var(--content-pad); position:relative; }

.section-label {
  font-family:var(--fm); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tm); margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.section-label::before { content:''; width:16px; height:1px; background:currentColor; flex-shrink:0; }

.section-title {
  font-family:var(--fh);
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight:700; letter-spacing:-.035em; line-height:1.07;
  margin-bottom:14px;
}
.section-sub { font-size:.95rem; color:var(--tm); line-height:1.75; max-width:540px; margin-bottom:56px; }

/* reveal */
.rev { opacity:0; transform:translateY(24px); filter:blur(4px); }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:100px;
  font-family:var(--fm); font-size:.75rem; font-weight:700; letter-spacing:.02em;
  line-height:1;
  -webkit-appearance:none;
  appearance:none;
  transition:all .3s; cursor:pointer; border:none;
}
.btn-p { background:var(--a); color:#fff; }
.btn-p:hover { background:#ff5520; transform:translateY(-2px); }
.btn-s { background:transparent; border:1px solid rgba(255,255,255,.14); color:var(--t); }
.btn-s:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.05); transform:translateY(-2px); }
.btn[disabled],
.btn.is-disabled {
  cursor:not-allowed;
  pointer-events:none;
  transform:none !important;
  box-shadow:none !important;
}
.btn-p[disabled],
.btn-p.is-disabled {
  background:var(--a);
  color:#fff;
  border-color:transparent;
  opacity:.46;
}
.btn-p[disabled]:hover,
.btn-p.is-disabled:hover {
  background:var(--a);
  color:#fff;
}
/* btn-s on light bg */
.sl .btn-s { border-color:rgba(0,0,0,.16); color:var(--lt); }
.sl .btn-s:hover { border-color:rgba(0,0,0,.3); background:rgba(0,0,0,.05); }

/* ══════════════════════════════════════════════════════════════════
   LIGHT SECTION BASE
══════════════════════════════════════════════════════════════════ */
.sl {
  background: var(--l);
  color: var(--lt);
}
/* Gradient fade-in at top of light section from dark */
.sl::before {
  content:''; position:absolute; top:0; left:0; right:0; height:80px;
  background:linear-gradient(to bottom, rgba(8,8,7,.18) 0%, transparent 100%);
  pointer-events:none; z-index:0;
}
.sl + .sl::before { display:none; }
.sl + .sl { border-top:1px solid rgba(0,0,0,.06); }
.sl > * { position:relative; z-index:1; }

.sl .section-label { color:var(--ltm); }
.sl .section-label::before { background:var(--ltm); }
.sl .section-title { color:var(--lt); }
.sl .section-sub { color:var(--ltm); }

/* ══════════════════════════════════════════════════════════════════
   01  HERO — DARK
══════════════════════════════════════════════════════════════════ */
#hero {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,440px);
  gap:clamp(26px,3vw,64px);
  align-items:center;
  padding:130px var(--content-pad) 80px;
  background:var(--d);
  overflow:hidden;
}
/* inner max-width wrapper */
.hero-inner {
  display:contents; /* keeps grid behaviour */
}

/* Hero background: no grid, subtle film grain */
.hero-grid-bg {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(120% 90% at 72% 24%, rgba(255,61,0,.09) 0%, rgba(255,61,0,0) 62%),
    radial-gradient(95% 90% at 50% 112%, rgba(0,0,0,.48) 0%, rgba(0,0,0,0) 58%);
}
.hero-grid-bg::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 100%);
  opacity:.95;
}
.hero-grid-bg::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 70% 40%, rgba(255,61,0,.05) 0%, transparent 68%);
  opacity:.85;
}
.hero-film-grain {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:overlay;
  opacity:.28;
  filter:contrast(1.18) saturate(.92);
}
.hero-glow {
  position:absolute; top:5%; right:-5%;
  width:50%; height:80%;
  background:radial-gradient(ellipse at 70% 40%, rgba(255,61,0,.055) 0%, transparent 65%);
  z-index:1;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .hero-film-grain { display:none; }
}

/* LEFT */
.hero-left { position:relative; z-index:2; max-width:840px; }

.hero-eye {
  font-family:var(--fm); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--a); margin-bottom:28px; opacity:0;
  display:flex; align-items:center; gap:10px;
}
.hero-eye::before { content:''; display:block; width:20px; height:1px; background:var(--a); }

.hero-h1 {
  font-family:var(--fh);
  font-size: clamp(1.95rem, 3vw, 3rem);
  font-weight:700; line-height:1.04; letter-spacing:-.03em;
  text-wrap:balance;
  margin-bottom:10px;
}
.hero-h2 {
  font-family:var(--fh);
  font-size:clamp(1.25rem,2.05vw,1.95rem);
  font-weight:700; line-height:1.12; letter-spacing:-.02em;
  text-wrap:balance;
  margin-bottom:26px;
  color:var(--t);
}
.hero-h1 .ln, .hero-h2 .ln { display:block; overflow:hidden; }
.hero-h1 .ln-in, .hero-h2 .ln-in { display:block; transform:translateY(105%); }
.hero-h1 em { font-style:normal; color:var(--a); }

.hero-sub {
  font-size:.97rem; color:var(--tm); line-height:1.75;
  max-width:620px; margin-bottom:40px; opacity:0;
}
.hero-ctas { display:flex; gap:11px; flex-wrap:wrap; margin-bottom:52px; opacity:0; }
.hero-trust { display:flex; flex-direction:column; gap:8px; opacity:0; }
.trust-i { display:flex; align-items:center; gap:9px; font-size:.77rem; color:var(--tm); }
.trust-i::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--a); flex-shrink:0; }

/* RIGHT — photo */
.hero-right { position:relative; z-index:2; opacity:0; justify-self:end; width:100%; max-width:440px; }
.hero-photo-wrap { width:100%; max-width:440px; margin-left:auto; }

.hero-photo-frame {
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  /* Cinematic orange-black backdrop */
  background:
    radial-gradient(140% 95% at 50% 8%, #ff7a3d 0%, #ff5b22 28%, #b43109 58%, #1a0703 100%);
  border:1px solid rgba(255,108,56,.3);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.hero-photo-frame::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(90% 65% at 50% 6%, rgba(255,170,120,.42) 0%, rgba(255,124,66,.15) 34%, rgba(0,0,0,0) 62%);
  z-index:1;
  pointer-events:none;
}
.hero-pixel-canvas {
  width:100%;
  height:100%;
  display:block;
  position:relative; z-index:2;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  transform:translateZ(0);
  transition:filter .35s ease;
}
.hero-photo-frame:hover .hero-pixel-canvas {
  filter:contrast(1.04) brightness(1.02);
}

/* bottom gradient fade within frame */
.hero-photo-fade {
  position:absolute; bottom:0; left:0; right:0; height:45%;
  background:linear-gradient(to top, rgba(4,2,1,.72) 0%, rgba(4,2,1,.22) 45%, transparent 100%);
  z-index:3; pointer-events:none;
}

/* meta row below photo */
.hero-photo-meta {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px 0;
}
.hero-photo-name { font-family:var(--fh); font-size:.92rem; font-weight:700; letter-spacing:-.02em; color:var(--t); }
.hero-photo-tag {
  font-family:var(--fm); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--a); padding:4px 10px; border:1px solid rgba(255,61,0,.3); border-radius:100px;
}

/* ══════════════════════════════════════════════════════════════════
   02  SERVICES — LIGHT
══════════════════════════════════════════════════════════════════ */
#services { background:var(--l); color:var(--lt); }

.services-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:48px; flex-wrap:wrap; gap:20px;
}
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--lborder);
  border:1px solid var(--lborder); border-radius:18px; overflow:hidden;
  margin-bottom:0;
}
.svc {
  background:var(--l); padding:34px 30px;
  transition:background .25s; cursor:default;
}
.svc:hover { background:var(--l2); }
.svc-n {
  display:inline-flex; align-items:center;
  font-family:var(--fm); font-size:.74rem; font-weight:700; letter-spacing:.12em;
  color:#ff4816;
  margin-bottom:18px;
  padding:3px 10px;
  border:1px solid rgba(255,61,0,.26);
  border-radius:999px;
  background:rgba(255,61,0,.08);
  filter:none;
}
.svc-t { font-family:var(--fh); font-size:.98rem; font-weight:700; letter-spacing:-.02em; color:var(--lt); margin-bottom:9px; line-height:1.22; }
.svc-d { font-size:.82rem; color:var(--ltm); line-height:1.65; }

/* ══════════════════════════════════════════════════════════════════
   03  WHAT I DO — DARK
══════════════════════════════════════════════════════════════════ */
#what-i-do { background:var(--d); }

.skills-wrap { display:grid; grid-template-columns:340px 1fr; gap:80px; align-items:start; }
.skills-l { position:sticky; top:120px; }
.skills-desc { font-size:.93rem; color:var(--tm); line-height:1.75; margin-top:18px; }
.skills-link { display:inline-flex; align-items:center; gap:8px; margin-top:28px; font-family:var(--fm); font-size:.77rem; font-weight:700; color:var(--a); transition:gap .2s; }
.skills-link:hover { gap:14px; }

.skill { display:grid; grid-template-columns:1fr auto; align-items:center; gap:32px; padding:26px 0; border-bottom:1px solid var(--bd); transition:padding-left .25s; }
.skill:first-child { border-top:1px solid var(--bd); }
.skill:hover { padding-left:10px; }
.skill-name { font-family:var(--fh); font-size:1.22rem; font-weight:700; letter-spacing:-.025em; color:var(--t); margin-bottom:7px; transition:color .2s; }
.skill:hover .skill-name { color:var(--a); }
.skill-desc { font-size:.82rem; color:var(--tm); line-height:1.6; }
.skill-tag { font-family:var(--fm); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tdim); padding:4px 10px; border:1px solid var(--bd); border-radius:100px; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════
   04  FORMATS — LIGHT
══════════════════════════════════════════════════════════════════ */
#formats { background:var(--l); color:var(--lt); }

.fmt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:44px; }
.fmt {
  padding:40px 32px;
  border:1px solid var(--lborder); border-radius:18px;
  background:var(--lcard);
  transition:all .35s; position:relative; overflow:hidden;
}
.fmt:hover { border-color:rgba(0,0,0,.18); transform:translateY(-4px); background:rgba(0,0,0,.06); }
.fmt-n {
  font-family:var(--fm); font-size:2.8rem; font-weight:700; letter-spacing:-.06em;
  color:rgba(0,0,0,.07); line-height:1; margin-bottom:18px;
  transition:color .3s;
}
.fmt:hover .fmt-n { color:var(--a); }
.fmt-t { font-family:var(--fh); font-size:1.08rem; font-weight:700; letter-spacing:-.02em; color:var(--lt); margin-bottom:10px; }
.fmt-d { font-size:.83rem; color:var(--ltm); line-height:1.65; }
.fmt-tag { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-family:var(--fm); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ltdim); }
.fmt-tag::before { content:''; width:10px; height:1px; background:var(--ltdim); }

/* ══════════════════════════════════════════════════════════════════
   05  WHY — DARK
══════════════════════════════════════════════════════════════════ */
#why { background:var(--d); }

.why-intro { max-width:620px; margin-bottom:60px; }
#why .section-title {
  font-size: clamp(1.55rem, 2.8vw, 2.45rem);
  line-height:1.12;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.why-quote {
  font-family:var(--fm); font-size:.9rem; color:rgba(240,238,233,.78); line-height:1.8;
  padding-left:18px; border-left:2px solid var(--a); margin-top:20px;
}
.why-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:44px; }
.why-m {
  padding:28px 24px;
  border:1px solid var(--bd); border-radius:16px;
  background:var(--card); transition:all .3s;
}
.why-m:hover { border-color:rgba(255,61,0,.4); background:rgba(255,61,0,.04); }
.why-m-val { font-family:var(--fm); font-size:clamp(1.5rem,2.2vw,2.2rem); font-weight:700; color:var(--a); line-height:1; margin-bottom:10px; letter-spacing:-.02em; }
.why-m-t { font-size:.8rem; font-weight:700; color:var(--t); margin-bottom:5px; }
.why-m-d { font-size:.74rem; color:rgba(240,238,233,.72); line-height:1.55; }

.why-fn-label { font-family:var(--fm); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.68); margin-bottom:14px; }
.why-fns { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:32px; }
.fn-tag {
  padding:6px 14px; border:1px solid rgba(255,255,255,.18); border-radius:100px;
  font-family:var(--fm); font-size:.75rem; color:rgba(240,238,233,.86); transition:all .22s;
}
.fn-tag:hover { border-color:var(--a); color:var(--a); background:var(--adim); }
.why-bottom {
  font-family:var(--fm); font-size:.9rem; color:rgba(240,238,233,.84); line-height:1.7;
  padding:18px 22px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.035);
}
.why-bottom strong { color:var(--t); }

/* ══════════════════════════════════════════════════════════════════
   06  OWN PROJECTS — LIGHT + MacBook
══════════════════════════════════════════════════════════════════ */
#own-projects {
  background:linear-gradient(180deg, #e4dfd4 0%, #ddd7ca 100%);
  color:var(--lt);
}

.own-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.own-card { border:1px solid var(--lborder); border-radius:22px; background:rgba(255,255,255,.6); overflow:hidden; transition:all .4s; }
.own-card:hover { border-color:rgba(0,0,0,.16); box-shadow:0 16px 48px rgba(0,0,0,.09); transform:translateY(-4px); }

/* MacBook */
.mb-wrap { padding:24px 24px 0; background:var(--l2); }
.mb-lid {
  border-radius:8px 8px 0 0;
  background:#191818;
  border:5px solid #222;
  border-bottom:none;
  position:relative;
}
.mb-notch { height:16px; display:flex; align-items:center; justify-content:center; background:#191818; }
.mb-cam { width:5px; height:5px; background:#2e2e2e; border-radius:50%; }
.mb-screen {
  width:100%; aspect-ratio:16/10;
  background:#060504; overflow:hidden; position:relative;
}
.mb-screen img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }
.mb-screen-bg { position:absolute; inset:0; }
.vs-bg {
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255,61,0,.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,200,0,.1) 0%, transparent 45%),
    #060504;
}
.ai-bg {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(100,60,255,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(255,61,0,.12) 0%, transparent 45%),
    #060504;
}
.mb-ui { position:relative; z-index:2; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.mb-ui-logo { font-family:var(--fm); font-size:clamp(.9rem,2.5vw,1.8rem); font-weight:700; color:rgba(255,255,255,.14); letter-spacing:-.02em; }
.mb-ui-bars { display:flex; flex-direction:column; gap:4px; width:100px; }
.mb-ui-bar { height:2px; border-radius:2px; background:rgba(255,255,255,.06); }
.mb-ui-bar:first-child { width:70%; }
.mb-ui-bar:nth-child(3) { width:55%; }

.mb-chin { height:10px; background:#111; border:5px solid #222; border-top:none; border-radius:0 0 2px 2px; }
.mb-hinge { height:3px; background:linear-gradient(to bottom,#1c1c1c,#111); }
.mb-base { height:12px; background:linear-gradient(to bottom,#202020,#191919); border-radius:0 0 3px 3px; }
.mb-foot-w { display:flex; justify-content:center; padding:2px 0 4px; background:var(--l2); }
.mb-foot { width:38%; height:3px; background:#191919; border-radius:0 0 4px 4px; }

/* card body */
.own-body { padding:28px 30px 32px; }
.own-tag { display:inline-flex; align-items:center; gap:5px; font-family:var(--fm); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ltdim); margin-bottom:12px; }
.own-tag-dot { width:5px; height:5px; border-radius:50%; background:var(--a); }
.own-title { font-family:var(--fh); font-size:1.4rem; font-weight:700; letter-spacing:-.03em; color:var(--lt); margin-bottom:10px; }
.own-text { font-size:.83rem; color:var(--ltm); line-height:1.7; margin-bottom:24px; }
.own-btns { display:flex; gap:8px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════════════
   07  ABOUT — DARK + photo
══════════════════════════════════════════════════════════════════ */
#about { background:var(--d); }

.about-wrap {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,520px);
  gap:clamp(32px,4.6vw,72px);
  align-items:start;
}

.about-name { font-family:var(--fh); font-size:clamp(2.2rem,3.8vw,3.5rem); font-weight:700; letter-spacing:-.04em; line-height:1.0; margin-bottom:6px; }
.about-role { font-family:var(--fm); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--a); margin-bottom:32px; }
.about-text { font-size:.93rem; color:var(--tm); line-height:1.8; margin-bottom:32px; }

.theses { margin-bottom:36px; }
.thesis { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--bd); font-size:.86rem; color:var(--tm); line-height:1.5; transition:all .2s; }
.thesis:first-child { border-top:1px solid var(--bd); }
.thesis:hover { color:var(--t); padding-left:6px; }
.thesis-arr { font-family:var(--fm); color:var(--a); font-size:.8rem; flex-shrink:0; margin-top:1px; }

/* right col */
.about-right { display:flex; flex-direction:column; gap:16px; width:100%; max-width:520px; justify-self:end; }
.about-photo {
  position:relative;
  isolation:isolate;
  aspect-ratio:4 / 5;
  max-height:min(74vh, 760px);
  border-radius:18px; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,61,0,.18) 0%, transparent 55%),
    linear-gradient(170deg, #1a1308 0%, #0d0a05 100%);
  border:1px solid var(--bd);
}
.about-photo::after {
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to top, rgba(6,5,4,.88) 0%, rgba(6,5,4,.42) 48%, rgba(6,5,4,0) 100%);
  z-index:2; pointer-events:none;
}
.about-photo img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; mix-blend-mode:luminosity; opacity:.88; transition:opacity .4s; }
.about-photo:hover img { mix-blend-mode:normal; opacity:1; }

.about-photo .about-stats {
  position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.astat {
  padding:15px 12px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:12px;
  background:rgba(8,8,7,.68);
  backdrop-filter:blur(7px);
  transition:all .3s;
}
.astat:hover { border-color:rgba(255,61,0,.3); background:rgba(255,61,0,.04); }
.astat-v { font-family:var(--fm); font-size:1.35rem; font-weight:700; letter-spacing:-.04em; color:var(--t); line-height:1; }
.astat-v span { color:var(--a); }
.astat-l { font-size:.66rem; color:rgba(240,238,233,.78); margin-top:5px; line-height:1.38; }

.about-tools {
  margin-top:44px;
  position:relative;
  overflow:visible;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  background:rgba(255,255,255,.02);
}
.about-tools-viewport {
  overflow:hidden;
}
.about-tools-runner {
  position:absolute;
  left:0; right:0;
  top:-44px;
  height:48px;
  width:100%;
  pointer-events:none;
  z-index:4;
}
.about-tools-track {
  display:flex; align-items:center; gap:10px;
  width:max-content;
  padding:12px 0;
  animation:aboutToolsMarquee 40s linear infinite;
  will-change:transform;
}
.about-tools:hover .about-tools-track,
.about-tools.is-paused .about-tools-track { animation-play-state:paused; }
.tool-chip {
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:100px;
  background:rgba(8,8,7,.62);
  color:rgba(240,238,233,.9);
  font-family:var(--fm); font-size:.68rem; letter-spacing:.03em;
  line-height:1;
  white-space:nowrap;
}
.tool-chip img,
.tool-fallback {
  width:20px;
  height:20px;
  flex:0 0 20px;
  align-self:center;
}
.tool-chip img {
  display:block;
  object-fit:contain;
  object-position:center;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  filter:brightness(0) invert(1) saturate(0) contrast(1.06);
  opacity:.96;
}
.tool-fallback {
  display:none;
  align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:rgba(240,238,233,.96);
  font-family:'Space Grotesk', sans-serif;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  font-variant-ligatures:none;
  font-feature-settings:'liga' 0, 'kern' 1;
}
.tool-chip > span:last-child {
  display:inline-flex;
  align-items:center;
  min-height:20px;
  line-height:1;
}
@keyframes aboutToolsMarquee {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════
   08  CASES — LIGHT
══════════════════════════════════════════════════════════════════ */
#cases {
  background:linear-gradient(180deg, #e9e4d8 0%, #e4dfd4 100%);
  color:var(--lt);
}

.cases-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:20px; }
.cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:44px; }
.cases-more { text-align:center; }
.cases-header .btn.btn-s,
.cases-more .btn.btn-s {
  background:var(--a);
  color:#fff;
  border-color:var(--a);
  box-shadow:0 10px 24px rgba(255,61,0,.24);
}
.cases-header .btn.btn-s:hover,
.cases-more .btn.btn-s:hover {
  background:#ff5520;
  border-color:#ff5520;
  color:#fff;
  box-shadow:0 14px 30px rgba(255,61,0,.32);
}
.cases-grid > .case:nth-child(n+10) { display:none !important; }
.cases-grid .case.case-extra { display:none !important; }
.case {
  display:block; border:1px solid var(--lborder); border-radius:14px;
  overflow:hidden; background:rgba(255,255,255,.55);
  transition:all .35s;
}
.case:hover { border-color:rgba(0,0,0,.16); box-shadow:0 10px 32px rgba(0,0,0,.09); transform:translateY(-5px); }
.case-thumb { aspect-ratio:16/10; background:#0a0906; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.case-thumb::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.52) 0%, rgba(0,0,0,.12) 52%, rgba(0,0,0,.06) 100%);
  z-index:1; pointer-events:none;
}
.case-thumb-img,
.case-thumb-video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  opacity:.92;
  filter:saturate(.92) contrast(1.03) brightness(.9);
  transform:scale(1.01);
  transition:transform .35s, filter .35s, opacity .35s;
  pointer-events:none;
}
.case:hover .case-thumb-img,
.case:hover .case-thumb-video {
  opacity:1;
  transform:scale(1.05);
  filter:saturate(1.02) contrast(1.06) brightness(.95);
}
.case-thumb-n {
  font-family:var(--fm); font-size:3rem; font-weight:700;
  color:rgba(255,255,255,.18);
  text-shadow:0 2px 10px rgba(0,0,0,.28);
  letter-spacing:-.06em; position:relative; z-index:2; transition:color .3s, text-shadow .3s;
}
.case:hover .case-thumb-n {
  color:rgba(255,61,0,.72);
  text-shadow:0 4px 18px rgba(255,61,0,.3);
}
.case-glow { position:absolute; inset:0; z-index:1; background:radial-gradient(circle, rgba(255,61,0,.07) 0%, transparent 70%); opacity:0; transition:opacity .3s; }
.case:hover .case-glow { opacity:1; }
.case-badge {
  position:absolute; bottom:9px; right:9px;
  padding:4px 11px; background:var(--a); color:#fff; border-radius:100px;
  font-family:var(--fm); font-size:.57rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  z-index:3;
  opacity:0; transform:translateY(5px); transition:all .3s;
}
.case:hover .case-badge { opacity:1; transform:translateY(0); }
.case-body { padding:16px 18px 20px; }
.case-t { font-family:var(--fh); font-size:.87rem; font-weight:700; letter-spacing:-.01em; color:var(--lt); margin-bottom:4px; line-height:1.3; }
.case-s { font-size:.73rem; color:var(--ltm); margin-bottom:10px; }
.case-tags { display:flex; flex-wrap:wrap; gap:4px; }
.ctag { padding:2px 7px; border:1px solid var(--lborder); border-radius:4px; font-family:var(--fm); font-size:.57rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ltdim); }

/* ══════════════════════════════════════════════════════════════════
   09  FAQ — LIGHT
══════════════════════════════════════════════════════════════════ */
#faq { background:var(--l); color:var(--lt); }
#faq .section-label { color:var(--ltm); }
#faq .section-label::before { background:var(--ltm); }
.faq-wrap { display:grid; grid-template-columns:300px 1fr; gap:80px; align-items:start; }
.faq-l { position:sticky; top:120px; }
.faq-sub { font-size:.88rem; color:var(--ltm); line-height:1.72; margin-top:14px; }

.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--lborder); }
.faq-item:first-child { border-top:1px solid var(--lborder); }
.faq-q {
  width:100%; background:none; border:none; text-align:left;
  min-height:44px;
  padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:18px;
  cursor:pointer; color:var(--lt); font-family:var(--fb); font-size:.9rem; font-weight:600; line-height:1.45;
  transition:color .2s;
}
.faq-q:hover { color:var(--a); }
.faq-icon {
  width:24px; height:24px; flex-shrink:0;
  border:1px solid var(--lborder); border-radius:50%;
  position:relative; transition:all .3s;
}
.faq-icon::before, .faq-icon::after {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--ltm); transition:all .32s;
}
.faq-icon::before { width:8px; height:1.5px; }
.faq-icon::after  { width:1.5px; height:8px; }
.faq-item.open .faq-icon { background:var(--a); border-color:var(--a); }
.faq-item.open .faq-icon::before,
.faq-item.open .faq-icon::after { background:#fff; }
.faq-item.open .faq-icon::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .42s cubic-bezier(.4,0,.2,1); }
.faq-a-in { padding:0 0 20px; font-size:.86rem; color:var(--ltm); line-height:1.8; }

/* ══════════════════════════════════════════════════════════════════
   10  CTA — DARK
══════════════════════════════════════════════════════════════════ */
#cta {
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(255,61,0,.12) 0%, transparent 55%),
    radial-gradient(60% 40% at 80% 100%, rgba(255,61,0,.08) 0%, transparent 60%),
    var(--d2);
  color:var(--t);
  border-top:1px solid var(--bd);
  padding:112px var(--content-pad);
  text-align:center;
}
.cta-bar {
  width:200px; height:1.5px; margin:0 auto 32px;
  background:linear-gradient(90deg, transparent, var(--a), transparent);
}
.cta-label { font-family:var(--fm); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(240,238,233,.62); margin-bottom:22px; }
.cta-title { font-family:var(--fh); font-size:clamp(1.9rem,3.8vw,3.4rem); font-weight:700; letter-spacing:-.04em; line-height:1.06; color:var(--t); max-width:600px; margin:0 auto 18px; }
.cta-text { font-size:.95rem; color:var(--tm); line-height:1.75; max-width:460px; margin:0 auto 44px; }
.cta-btns { display:flex; justify-content:center; gap:11px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════════════
   11  STUDIO RUN — DARK
══════════════════════════════════════════════════════════════════ */
#studio-run {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg, #0f0c0a 0%, #0d0a08 24%, #090806 100%);
  color:var(--t);
  padding:0 var(--content-pad) 112px;
}
#studio-run::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(58% 34% at 14% 14%, rgba(255,118,64,.13) 0%, transparent 68%),
    radial-gradient(42% 28% at 88% 82%, rgba(255,176,120,.06) 0%, transparent 72%),
    linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 42%);
  pointer-events:none;
  z-index:0;
}
#studio-run::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,139,84,.28) 50%, transparent 100%);
  pointer-events:none;
  z-index:0;
}
.studio-run-header { display:grid; gap:18px; margin-bottom:34px; }
.studio-run-header,
.studio-run-shell { position:relative; z-index:1; }
.studio-run-sub {
  max-width:760px;
  font-size:.92rem;
  color:var(--tm);
  line-height:1.72;
}
.studio-run-legend { display:flex; flex-wrap:wrap; gap:10px; }
.studio-run-chip {
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.03);
  font-family:var(--fm);
  font-size:.64rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.studio-run-chip strong { color:var(--t); font-weight:700; }
.studio-run-chip span { color:rgba(240,238,233,.68); }
.studio-run-chip.is-good { border-color:rgba(255,121,72,.28); background:rgba(255,61,0,.08); }
.studio-run-chip.is-bad { border-color:rgba(255,255,255,.11); background:rgba(255,255,255,.025); }

.studio-run-top {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  padding:4px 6px;
  pointer-events:none;
}
.studio-run-progress {
  min-width:0;
  padding:0;
  border:0;
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.studio-run-progress-meta {
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:0;
}
.studio-run-progress-meta span,
.studio-run-metric span {
  font-family:var(--fm);
  font-size:.52rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(240,238,233,.6);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.studio-run-progress-meta strong,
.studio-run-metric strong {
  font-family:var(--fm);
  font-size:.76rem;
  font-weight:700;
  color:var(--t);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.studio-run-progress-track {
  display:none;
}
.studio-run-progress-fill {
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,122,62,.82) 0%, rgba(255,61,0,1) 100%);
  box-shadow:0 0 18px rgba(255,61,0,.34);
}
.studio-run-metrics {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
}
.studio-run-metric {
  display:flex;
  align-items:baseline;
  gap:5px;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.studio-run-arena {
  position:relative;
  min-height:clamp(320px, 44vw, 470px);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,108,56,.28);
  background:
    linear-gradient(180deg, rgba(14,10,8,.99) 0%, rgba(10,8,6,.995) 100%);
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.04);
  isolation:isolate;
}
.studio-run-arena::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 18%);
  pointer-events:none;
  opacity:.85;
  z-index:0;
}
.studio-run-arena::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 20%, rgba(0,0,0,.16) 100%);
  pointer-events:none;
  z-index:0;
}
.studio-run-canvas {
  width:100%;
  height:clamp(320px, 44vw, 470px);
  display:block;
  position:relative;
  z-index:1;
  touch-action:none;
}
.studio-run-overlay {
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(180deg, rgba(7,6,5,.16) 0%, rgba(7,6,5,.56) 100%);
  transition:opacity .26s ease, visibility .26s ease;
}
.studio-run-overlay.is-hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.studio-run-card {
  width:min(560px, 100%);
  padding:22px 24px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(10,9,8,.78);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
  box-shadow:0 20px 60px rgba(0,0,0,.34);
}
.studio-run-kicker {
  font-family:var(--fm);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(240,238,233,.6);
  margin-bottom:10px;
}
.studio-run-title {
  font-family:var(--fh);
  font-size:clamp(1.4rem, 2.4vw, 2rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.08;
  color:var(--t);
  margin-bottom:12px;
}
.studio-run-text {
  font-size:.9rem;
  color:rgba(240,238,233,.82);
  line-height:1.72;
  margin-bottom:12px;
}
.studio-run-summary {
  font-family:var(--fm);
  font-size:.72rem;
  line-height:1.65;
  color:rgba(240,238,233,.68);
  margin-bottom:18px;
}
.studio-run-actions { display:flex; gap:10px; flex-wrap:wrap; }

.studio-run-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:16px;
  flex-wrap:wrap;
}
.studio-run-help {
  font-family:var(--fm);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(240,238,233,.56);
}
.studio-run-jump {
  display:none;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--t);
  font-family:var(--fm);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .24s ease, border-color .24s ease, transform .24s ease;
}
.studio-run-jump:hover {
  background:rgba(255,61,0,.18);
  border-color:rgba(255,61,0,.5);
  transform:translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */
footer { background:var(--d); border-top:1px solid var(--bd); padding:60px var(--content-pad) 38px; }
.foot-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:56px; margin-bottom:56px; }
.foot-logo { font-family:var(--fm); font-size:1rem; font-weight:700; margin-bottom:5px; }
.foot-logo span { color:var(--a); }
.foot-role { font-size:.77rem; color:var(--tm); margin-bottom:24px; }
.foot-contacts { display:flex; flex-direction:column; gap:7px; }
.foot-link { font-size:.82rem; color:var(--tm); transition:color .2s; }
.foot-link:hover { color:var(--a); }
.foot-col-t { font-family:var(--fm); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(240,238,233,.78); margin-bottom:18px; }
.foot-links { display:flex; flex-direction:column; gap:8px; }
.foot-nav { font-size:.83rem; color:var(--tm); transition:color .2s; }
.foot-nav:hover { color:var(--t); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--bd); }
.foot-copy { font-family:var(--fm); font-size:.67rem; color:var(--tdim); }
.foot-tag { font-family:var(--fm); font-size:.67rem; color:var(--tdim); font-style:italic; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  nav { padding:16px var(--content-pad); }
  .nav-links { display:none; }
  .lang-switch--nav { margin-left:auto; margin-right:10px; }
  .nav-burger { display:inline-flex; }
  .nav-cta { display:none; }
  #hero{ grid-template-columns:1fr; gap:38px; }
  .hero-film-grain{ opacity:.24; }
  .hero-glow{ opacity:.62; width:min(74vw, 640px); right:-18%; }
  .hero-left{ justify-self:stretch; max-width:none; }
  .hero-right{ width:100%; max-width:none; justify-self:stretch; }
  .hero-photo-wrap{ width:100%; max-width:none; margin:0; }
  .skills-wrap{ grid-template-columns:1fr; }
  .skills-l{ position:static; }
  .about-wrap{ grid-template-columns:1fr; gap:44px; }
  .about-right{ justify-self:start; max-width:min(520px,100%); }
  .why-metrics{ grid-template-columns:1fr 1fr; }
  .faq-wrap{ grid-template-columns:1fr; gap:36px; }
  .faq-l{ position:static; }
  .studio-run-jump{ display:inline-flex; }
  .studio-run-top{
    top:10px;
    left:10px;
    right:10px;
    gap:4px 9px;
    padding:4px 6px;
  }
}
@media(max-width:860px){
  section{ padding:68px var(--content-pad); }
  .nav-mobile-panel { top:72px; left:14px; right:14px; }
  .contact-modal { padding:14px; }
  .contact-modal-dialog { padding:18px; border-radius:18px; max-height:calc(100vh - 28px); }
  .contact-modal-sub { font-size:.8rem; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .fmt-grid{ grid-template-columns:1fr; }
  .own-grid{ grid-template-columns:1fr; }
  .cases-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  #hero{ padding:100px var(--content-pad) 60px; }
  .hero-film-grain{ opacity:.21; }
  .hero-glow{ opacity:.5; width:min(84vw, 580px); right:-24%; }
  #studio-run{ padding:0 var(--content-pad) 80px; }
  .studio-run-header{ margin-bottom:26px; }
  .studio-run-arena,
  .studio-run-canvas{ min-height:320px; height:320px; }
  .studio-run-top{
    top:8px;
    left:8px;
    right:8px;
    gap:3px 8px;
    padding:3px 5px;
  }
  .studio-run-card{ padding:18px; border-radius:18px; }
  .studio-run-controls{ flex-direction:column-reverse; align-items:stretch; }
  .studio-run-help{ width:100%; text-align:center; }
  .studio-run-jump{ width:100%; }
  .about-tools{ margin-top:40px; }
  .about-tools-runner{ top:-38px; height:42px; }
  .about-tools-track{ animation-duration:34s; }
  .tool-chip{ font-size:.64rem; padding:7px 10px; }
  .tool-chip img,
  .tool-fallback{
    width:18px;
    height:18px;
    flex-basis:18px;
  }
  .tool-chip > span:last-child{ min-height:18px; }
}
@media(max-width:560px){
  .nav-logo { font-size:.86rem; }
  .lang-switch--nav { margin-right:8px; }
  .lang-switch-btn {
    min-width:36px;
    min-height:30px;
    padding:0 8px;
    font-size:.56rem;
  }
  .nav-burger { width:44px; height:44px; border-radius:11px; }
  .nav-burger span { width:16px; }
  .contact-modal-title { font-size:1.28rem; }
  .cm-link { padding:11px 12px; }
  .cm-link-value { font-size:.83rem; }
  .hero-film-grain{ opacity:.18; }
  .hero-glow{ opacity:.42; }
  .studio-run-top{ gap:3px 6px; }
  .studio-run-progress-meta span,
  .studio-run-metric span{ font-size:.47rem; letter-spacing:.06em; }
  .studio-run-progress-meta strong,
  .studio-run-metric strong{ font-size:.7rem; }
  .studio-run-metrics{ gap:3px 8px; }
  .studio-run-title{ font-size:1.28rem; }
  .studio-run-text{ font-size:.84rem; }
  .studio-run-summary{ font-size:.68rem; }
  .about-tools{ margin-top:36px; }
  .about-tools-runner{ top:-34px; height:38px; }
  .tool-chip img,
  .tool-fallback{
    width:17px;
    height:17px;
    flex-basis:17px;
  }
  .tool-chip > span:last-child{ min-height:17px; }
  .services-grid{ grid-template-columns:1fr; }
  .cases-grid{ grid-template-columns:1fr; }
  .why-metrics{ grid-template-columns:1fr 1fr; }
  .about-stats{ grid-template-columns:1fr 1fr; }
  .about-photo .about-stats{ left:10px; right:10px; bottom:10px; gap:6px; }
  .astat{ padding:12px 10px; }
  .astat-v{ font-size:1.1rem; }
  .astat-l{ font-size:.6rem; margin-top:4px; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-bottom{ flex-direction:column; gap:6px; text-align:center; }
}