/* Layout: a dark edit bay. Grid floor, magenta light leaks, a 3D timeline
   behind the title, projects laid out as "modules" like a timeline export. */
:root {
  --bg: #070708;
  --panel: #111115;
  --panel-2: #18181e;
  --line: rgba(255, 255, 255, .08);
  --grid: rgba(255, 255, 255, .045);
  --text: #f4f2f7;
  --dim: #a29fab;
  --pink: #ff2e6a;
  --pink-2: #ff6b93;
  --violet: #7a5cff;
  --blue: #3c6cff;
  --green: #2ecf8f;

  --display: "Anton", "Bebas Neue", Impact, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --arabic: "Cairo", "Manrope", sans-serif;

  --gutter: max(16px, 4vw);
  --top-h: 64px;
  color-scheme: dark;

  /* brief form + WhatsApp button */
  --b-bg: #121217; --b-fg: #f4f2f7; --b-mute: #a29fab; --b-accent: #ff2e6a; --b-accent-fg: #fff;
  --b-field: #0b0b0f; --b-line: rgba(255,255,255,.14); --b-ring: rgba(255,46,106,.22);
  --b-radius: 26px; --b-radius-sm: 12px; --b-chip-radius: 999px; --b-btn-radius: 999px;
  --b-btn-shadow: 0 8px 30px -8px rgba(255,46,106,.7); --b-border: 1px solid rgba(255,255,255,.12);
  --b-shadow: 0 40px 120px -30px rgba(255,46,106,.45);
  --b-display: "Anton", Impact, sans-serif; --b-body: "Manrope", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--top-h); }
body {
  background-color: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
::selection { background: var(--pink); color: #fff; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); position: relative; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.pink { color: var(--pink); }

/* Light leaks */
.glow { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .55; }
.glow-a { width: 46vw; height: 70vh; left: -22vw; top: 10vh; background: radial-gradient(closest-side, var(--pink), transparent); }
.glow-b { width: 40vw; height: 60vh; right: -20vw; bottom: -10vh; background: radial-gradient(closest-side, #c2186b, transparent); opacity: .4; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 999px; transition: transform .15s, background .15s, box-shadow .15s; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 8px 30px -8px rgba(255,46,106,.7); }
.btn-pink:hover { transform: translateY(-2px); background: #ff477c; }
.btn-line { border: 1.5px solid rgba(255,255,255,.3); }
.btn-line:hover { border-color: var(--text); background: rgba(255,255,255,.06); }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 50; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); background: rgba(7,7,8,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.nav { display: flex; gap: 30px; font-size: 14px; font-weight: 600; color: var(--dim); }
.nav a:hover { color: var(--text); }

/* ───────── Hero ───────── */
.hero { position: relative; min-height: min(820px, 92vh); display: flex; align-items: flex-end; padding: 120px 0 72px; overflow: hidden; }
.timeline3d { position: absolute; inset: -10% -18% -10% 22%; perspective: 1400px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, transparent 100%), linear-gradient(transparent, #000 15%, #000 80%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, transparent 100%); }
.tl-board { position: absolute; inset: 0; transform: rotateX(38deg) rotateY(-26deg) rotateZ(9deg) translateZ(-60px); transform-origin: 40% 50%;
  background: #0d0d12; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 46px 0 20px 120px; opacity: .9;
  box-shadow: 0 0 80px rgba(255,46,106,.25) inset; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.tl-board::before { /* ruler */ content: ""; position: absolute; left: 120px; right: 0; top: 14px; height: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 16px); opacity: .5; }
.tl-row { position: relative; height: 34px; display: flex; gap: 4px; }
.tl-row::before { content: attr(data-name); position: absolute; left: -104px; top: 8px; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.45); }
.tl-clip { flex: none; height: 100%; border-radius: 4px; opacity: .92; }
.tl-clip.v1 { background: linear-gradient(#5b84ff, #3c5fd9); }
.tl-clip.v2 { background: linear-gradient(#9a7dff, #6a4de0); }
.tl-clip.v3 { background: linear-gradient(#ff5f8d, #e0245a); }
.tl-clip.a { background: #16523b repeating-linear-gradient(90deg, #2ecf8f 0 2px, transparent 2px 5px) center / 100% 60% no-repeat; border: 1px solid #2ecf8f55; }
.tl-playhead { position: absolute; top: 0; bottom: 0; left: 46%; width: 2px; background: var(--pink); box-shadow: 0 0 14px var(--pink); animation: playhead 9s linear infinite; }
@keyframes playhead { from { left: 22%; } to { left: 92%; } }

.hero-sticker { position: absolute; right: max(2vw, 16px); bottom: 0; height: min(88%, 680px); width: auto; z-index: 1; rotate: 3deg; transform-origin: bottom center;
  filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.hero-inner { z-index: 2; }
.hero-kicker { display: flex; align-items: center; gap: 10px; color: var(--dim); }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.mega { font-family: var(--display); font-weight: 400; font-size: clamp(96px, 17vw, 260px); line-height: .86; letter-spacing: -.015em; margin-top: 14px; text-shadow: 0 10px 50px rgba(0,0,0,.6); }
.mega-sm { font-size: clamp(72px, 11vw, 170px); margin-top: 0; }
.hero-roles { font-size: clamp(18px, 2vw, 26px); font-weight: 600; margin-top: 18px; }
.hero-roles b { color: var(--pink); font-weight: 600; margin: 0 .3em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ───────── Sections ───────── */
.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }
.title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.h-big { font-family: var(--display); font-weight: 400; font-size: clamp(60px, 8.5vw, 124px); line-height: .9; letter-spacing: -.01em; }
.h-slash { font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); color: var(--text); font-family: var(--arabic), var(--body); }
.h-mid { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; margin-bottom: 18px; }
.center-head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.sub { color: var(--dim); font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; margin-top: 10px; }
.sub.left { text-align: left; }

/* About */
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: 36px; }
.about-col p:not(.lang) { color: #d9d6de; font-size: 17px; line-height: 1.65; }
.about-col p + p { margin-top: 14px; }
.about-col strong { color: var(--text); font-weight: 800; }
.about-col.ar p:not(.lang) { font-family: var(--arabic); font-size: 18px; line-height: 1.8; }
.lang { color: var(--pink); margin-bottom: 10px; }
.about-bottom { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: clamp(48px, 6vw, 80px); }
.software { display: flex; flex-wrap: wrap; gap: 12px; }
.software li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; }
.software b { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--panel-2); border: 1.5px solid rgba(255,255,255,.14); font-family: var(--body); font-weight: 800; font-size: 20px; }
.software li:nth-child(3n+1) b { color: #a9b8ff; border-color: #5b84ff66; }
.software li:nth-child(3n+2) b { color: #c8b6ff; border-color: #9a7dff66; }
.software li:nth-child(3n) b { color: var(--pink-2); border-color: #ff2e6a66; }
.software span { font-size: 11px; color: var(--dim); text-align: center; line-height: 1.2; }
.clients { display: flex; flex-wrap: wrap; gap: 10px; }
.clients li { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: rgba(255,255,255,.03); font-weight: 700; }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc { position: relative; padding: 28px 26px 30px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); overflow: hidden; transition: border-color .2s, transform .2s; }
.svc:hover { border-color: rgba(255,46,106,.55); transform: translateY(-4px); }
.svc::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,46,106,.35), transparent); }
.svc-icon { height: 56px; display: flex; align-items: center; gap: 6px; }
.svc h3 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 3.6vw, 52px); line-height: 1; margin-top: 18px; }
.svc .mono { color: var(--pink); display: block; margin-top: 8px; }
.svc ul { margin-top: 22px; display: grid; gap: 10px; }
.svc li { display: flex; gap: 10px; font-weight: 600; color: #dcd9e1; }
.svc li::before { content: "▸"; color: var(--pink); }
.ic-ai { font-size: 40px; color: var(--pink); line-height: 1; }
.ic-tl { display: grid; gap: 5px; width: 120px; }
.ic-tl i { display: block; height: 10px; border-radius: 3px; }
.ic-tl i:nth-child(1) { width: 80%; background: #5b84ff; } .ic-tl i:nth-child(2) { width: 100%; background: #9a7dff; margin-left: 12%; width: 70%; } .ic-tl i:nth-child(3) { width: 95%; background: repeating-linear-gradient(90deg, var(--green) 0 2px, transparent 2px 5px); }
.ic-web { width: 92px; height: 56px; border: 2px solid rgba(255,255,255,.6); border-radius: 8px; position: relative; }
.ic-web::before { content: ""; position: absolute; left: 6px; top: 6px; width: 24px; height: 6px; border-radius: 3px; background: radial-gradient(circle at 3px 3px, var(--pink) 2.5px, transparent 3px) 0 0 / 9px 6px repeat-x; }
.ic-web::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 22px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,46,106,.6), rgba(122,92,255,.6)); }

/* Filters */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.chip { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: var(--dim); }
.chip:hover { color: var(--text); border-color: var(--text); }
.chip[aria-selected="true"] { background: var(--pink); border-color: var(--pink); color: #fff; }

/* Video modules */
.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.module { position: relative; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 22px; padding: 18px; border-radius: 26px; background: rgba(17,17,21,.85); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.module.hide { display: none; }
.module:hover { border-color: rgba(255,46,106,.45); box-shadow: 0 20px 60px -30px rgba(255,46,106,.6); }
.m-video { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; cursor: pointer; }
.m-video img, .m-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-video video { opacity: 0; transition: opacity .25s; }
.m-video video.playing { opacity: 1; }
.m-badges { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; gap: 6px; z-index: 2; }
.badge { font-family: var(--mono); font-size: 11px; background: rgba(0,0,0,.65); padding: 4px 8px; border-radius: 6px; }
.badge-pink { background: var(--pink); }
.m-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.5); backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.m-video:hover .m-play, .m-video:focus-visible .m-play { background: var(--pink); border-color: var(--pink); transform: scale(1.08); }
.m-info { display: flex; flex-direction: column; min-width: 0; padding: 6px 4px 4px 0; }
.m-tag { align-self: flex-start; font-family: var(--mono); font-size: 11.5px; padding: 6px 10px; border-radius: 8px; background: #000; border: 1px solid var(--line); }
.m-tag b { color: var(--pink); font-weight: 500; }
.m-client { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.avatar { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: conic-gradient(from 200deg, var(--pink), var(--violet), var(--pink)); padding: 3px; }
.avatar span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #121217; }
.m-client strong { display: block; font-weight: 800; font-size: 16px; }
.m-client small { color: var(--dim); font-size: 13px; font-weight: 600; }
.m-title { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; margin-top: 22px; }
.m-desc { color: var(--dim); font-size: 14.5px; margin-top: 10px; }
.mini-tl { margin-top: auto; padding: 12px; border-radius: 12px; background: #0b0b0f; border: 1px solid var(--line); display: grid; gap: 4px; position: relative; overflow: hidden; }
.mini-tl i { display: block; height: 8px; border-radius: 2px; }
.mini-tl::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--ph, 40%); width: 1.5px; background: var(--pink); }

/* Raw → Final */
.rf .h-big { white-space: nowrap; font-size: clamp(52px, 7vw, 104px); }
.contact .h-slash { display: block; margin-top: 16px; }
.rf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.steps { margin-top: 30px; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; padding: 16px 18px; border-radius: 16px; background: rgba(17,17,21,.8); border: 1px solid var(--line); }
.steps .mono { grid-row: 1 / span 2; color: var(--pink); font-size: 14px; padding-top: 3px; }
.steps b { font-weight: 800; }
.steps em { font-style: normal; color: var(--dim); font-size: 14.5px; }
.rf-player { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ba { position: relative; width: min(100%, 370px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 8px #141419, 0 30px 80px -20px rgba(255,46,106,.5); user-select: none; touch-action: pan-y; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer video { width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: #fff; z-index: 2; pointer-events: none; }
.ba-handle span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); border: 2px solid #fff; }
.ba-tag { position: absolute; top: 12px; z-index: 2; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.7); }
.ba-l { left: 12px; } .ba-r { right: 12px; background: var(--pink); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 3; margin: 0; }

/* Web design */
.web-module { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(18px, 2.5vw, 30px); border-radius: 28px; background: rgba(17,17,21,.85); border: 1px solid var(--line); }
.devices { position: relative; padding-bottom: 40px; padding-right: 60px; }
.browser { display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1d1d23; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; } .dots i:nth-child(3) { background: #28c840; }
.url { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11.5px; color: var(--dim); background: #121217; border-radius: 6px; padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-screen { height: clamp(240px, 30vw, 400px); overflow: hidden; }
.browser-screen img, .phone-screen img { width: 100%; height: auto; transition: transform 7s ease-in-out; }
.browser:hover .browser-screen img { transform: translateY(calc(-100% + clamp(240px, 30vw, 400px))); }
.phone { position: absolute; right: 0; bottom: 0; width: clamp(110px, 13vw, 170px); aspect-ratio: 9 / 19; border-radius: 24px; background: #0b0b0f; padding: 6px; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px #000; }
.phone-screen { height: 100%; border-radius: 18px; overflow: hidden; background: #fff; }
.phone-screen img { animation: phoneScroll 14s ease-in-out infinite alternate; transition: none; }
@keyframes phoneScroll { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(calc(-100% + clamp(110px, 13vw, 170px) * 19 / 9 - 12px)); } }
.web-info .m-client { margin-top: 0; }
.web-info h3 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4vw, 58px); line-height: 1; margin-top: 18px; }
.web-info .m-desc { font-size: 15.5px; }
.feedback { margin-top: 22px; padding: 16px; border-radius: 18px; background: #000; border: 1px solid var(--line); }
.feedback .mono { color: var(--pink); display: block; margin-bottom: 10px; }
.bubbles { display: grid; gap: 8px; justify-items: start; }
.bubble { font-family: var(--arabic); font-weight: 700; font-size: 18px; background: #2a2a30; color: #fff; padding: 8px 16px; border-radius: 20px; direction: rtl; }
.bubble.emoji { background: none; padding: 0 4px; font-size: 34px; line-height: 1.1; direction: ltr; }
.translation { color: var(--dim); font-size: 14px; margin-top: 10px; font-style: italic; }
.feedback cite { display: block; font-style: normal; font-weight: 700; font-size: 13px; margin-top: 8px; }
.web-info .btn { margin-top: 22px; }

/* Brief call to action */
.brief-cta { border-radius: 28px; border: 1px solid rgba(255,46,106,.35); background: linear-gradient(120deg, rgba(255,46,106,.16), rgba(122,92,255,.08)); }
.brief-cta .h-mid { margin: 6px 0 4px; }
.brief-cta .sub { max-width: 56ch; margin-top: 0; }
.contact-brief { margin-top: 22px; }

/* Contact */
.contact { padding-top: clamp(80px, 10vw, 130px); background: linear-gradient(180deg, transparent, rgba(255,46,106,.12) 60%, rgba(255,46,106,.2)); border-top: 1px solid var(--line); }
.contact-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.contact-list { display: grid; gap: 14px; font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; }
.contact-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contact-list a { display: inline-flex; align-items: center; gap: 12px; }
.contact-list a:hover { color: var(--pink-2); }
.ci { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; font-family: var(--mono); color: var(--text); flex: none; }
.ci-wa { color: #25d366; font-size: 18px; }
.mail { user-select: all; overflow-wrap: anywhere; }
.copy { padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); font-size: 11px; }
.copy:hover { border-color: var(--pink); color: var(--pink-2); }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 80px; padding: 20px var(--gutter); border-top: 1px solid var(--line); color: var(--dim); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 200; background: rgba(5,5,7,.96); display: grid; place-items: center; padding: 64px var(--gutter) 24px; }
.modal[hidden] { display: none; }
.modal-inner { display: grid; grid-template-columns: auto minmax(0, 380px); gap: 40px; align-items: center; max-height: 100%; }
.modal-player { height: min(80vh, 820px); aspect-ratio: 9 / 16; max-width: 100%; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid #333; }
.modal-player video { width: 100%; height: 100%; object-fit: contain; }
.modal-meta h3 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4vw, 60px); line-height: .95; margin: 8px 0 14px; }
.modal-meta #modal-desc { color: #cfccd5; }
.modal-note { margin-top: 16px; color: var(--dim); }
.modal-note a { color: var(--pink-2); text-decoration: underline; }
.modal-close { position: absolute; top: 18px; right: var(--gutter); padding: 6px 10px; }
.modal-close:hover { color: var(--pink); }

/* Responsive */
@media (max-width: 1024px) {
  .modules { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .services { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .web-module { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --top-h: 58px; }
  .nav { display: none; }
  .hero { min-height: 0; padding: 40px 0 48px; flex-direction: column; align-items: stretch; }
  .hero-sticker { position: relative; right: auto; bottom: auto; height: 340px; align-self: center; margin-bottom: -10px; order: -1; }
  .timeline3d { inset: 0 -40% 30% -10%; opacity: .7; }
  .mega { font-size: 26vw; }
  .about-cols, .about-bottom { grid-template-columns: 1fr; }
  .module { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 20px; }
  .m-client { margin-top: 14px; gap: 8px; }
  .avatar { width: 42px; height: 42px; font-size: 14px; }
  .m-title { font-size: 26px; margin-top: 14px; }
  .m-desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .mini-tl { display: none; }
  .rf { grid-template-columns: 1fr; }
  .rf-player { order: -1; }
  .devices { padding-right: 40px; }
  .modal { padding: 56px 16px 16px; overflow-y: auto; place-items: start center; }
  .modal-inner { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .modal-player { height: auto; width: min(100%, calc(62vh * .5625)); }
  .modal-meta { width: 100%; }
  .footer { padding-bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}