/* ============================================================================
   ARCOVEX — Website UI kit structural styles
   Tokens come from ../../colors_and_type.css. This file is layout + chrome.
   ========================================================================== */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--void);
  color:var(--fg-1);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection { background:var(--plasma); color:var(--void); }
a { color:inherit; text-decoration:none; }

.container { max-width:1280px; margin:0 auto; padding-inline:clamp(20px,5vw,64px); }
.section { padding-block:clamp(72px,11vw,176px); position:relative; }

/* film grain over the void to keep blacks alive */
.grain::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-sans); font-weight:700; font-size:15px; letter-spacing:-.01em;
  border:none; border-radius:var(--radius-pill); padding:14px 26px; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  white-space:nowrap;
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--plasma); color:var(--void); }
.btn-primary:hover { background:var(--plasma-bright); box-shadow:0 0 0 1px var(--plasma-glow), 0 12px 36px -8px var(--plasma-glow); }
.btn-primary:active { transform:scale(.97); background:var(--plasma-deep); }
.btn-ghost { background:transparent; color:var(--fg-1); box-shadow:inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { box-shadow:inset 0 0 0 1px var(--fg-2); background:var(--slate-2); }
.btn-ghost:active { transform:scale(.97); }
.btn-sm { padding:10px 18px; font-size:13px; }

/* ---------------------------------------------------------------- EYEBROW */
.eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--plasma); display:inline-flex; align-items:center; gap:8px; }
.eyebrow.mut { color:var(--fg-3); }
.eyebrow .tick { width:18px; height:1px; background:currentColor; display:inline-block; }

/* ---------------------------------------------------------------- NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:background var(--dur) var(--ease-out), border-color var(--dur); border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(8,9,13,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav-logo { display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-.035em; }
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-links a { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2); transition:color var(--dur-fast); position:relative; }
.nav-links a:hover { color:var(--fg-1); }
.nav-right { display:flex; align-items:center; gap:18px; }
.lang { font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--fg-3); cursor:pointer; background:none; border:none; padding:6px; transition:color var(--dur-fast); }
.lang:hover { color:var(--plasma); }
.nav-burger { display:none; background:none; border:none; color:var(--fg-1); cursor:pointer; }

/* ---------------------------------------------------------------- HERO */
.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative; padding-top:74px; }
.hero-glow { position:absolute; top:8%; left:50%; transform:translateX(-50%); width:min(900px,90vw); height:520px; background:radial-gradient(50% 50% at 50% 50%, var(--plasma-glow), transparent 70%); filter:blur(30px); pointer-events:none; z-index:0; opacity:.7; }
.hero-inner { position:relative; z-index:2; }
.hero h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(3rem,10.5vw,11rem); line-height:.86; letter-spacing:-.04em; }
.hero h1 .stroke { color:transparent; -webkit-text-stroke:1.5px var(--fg-1); }
.hero-sub { max-width:560px; margin-top:30px; font-size:clamp(1.05rem,1.6vw,1.45rem); line-height:1.45; color:var(--fg-2); }
.hero-actions { display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.hero-foot { position:absolute; bottom:34px; left:0; right:0; z-index:2; }
.hero-foot-inner { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.scroll-cue { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); display:flex; align-items:center; gap:10px; }
.scroll-cue .line { width:1px; height:40px; background:linear-gradient(var(--plasma),transparent); display:block; }

/* ---------------------------------------------------------------- MARQUEE */
.marquee { border-block:1px solid var(--line); overflow:hidden; padding-block:22px; background:var(--ink); }
.marquee-track { display:flex; gap:40px; white-space:nowrap; width:max-content; animation:marq 28s linear infinite; }
.marquee-item { font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.02em; color:var(--fg-1); display:flex; align-items:center; gap:40px; }
.marquee-item .dot { color:var(--plasma); }
@keyframes marq { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* ---------------------------------------------------------------- MEDIA placeholders (CSS art) */
.media { position:relative; overflow:hidden; border-radius:var(--radius-lg); background:#0c0e13; isolation:isolate; }
.media::before { content:""; position:absolute; inset:0; z-index:0; background:
  radial-gradient(120% 90% at 25% 0%, var(--m1,rgba(194,255,61,.22)), transparent 55%),
  radial-gradient(120% 100% at 85% 110%, var(--m2,rgba(255,82,48,.20)), transparent 55%),
  linear-gradient(135deg,#11150c,#15110d 60%,#0b0d12); }
.media::after { content:""; position:absolute; inset:0; z-index:1; opacity:.5; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px); }
.media-tag { position:absolute; z-index:3; bottom:16px; left:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); background:rgba(8,9,13,.55); backdrop-filter:blur(6px); padding:7px 12px; border-radius:6px; }
/* Real-photo media: cover image + bottom scrim so the mono tags stay legible */
.media-photo::before, .media-photo::after { display:none; }
.media-img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur) var(--ease-out); }
.media-photo::after { content:""; display:block; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(8,9,13,.66) 0%, rgba(8,9,13,0) 34%), linear-gradient(180deg, rgba(8,9,13,.34) 0%, rgba(8,9,13,0) 26%); }
.work-card:hover .media-img { transform:scale(1.04); }

/* ---------------------------------------------------------------- SECTION HEAD */
.sec-head { display:flex; flex-direction:column; gap:18px; max-width:820px; }
.sec-head h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4.6vw,3.6rem); line-height:1; letter-spacing:-.025em; text-wrap:balance; }
.sec-head p { font-size:clamp(1.05rem,1.4vw,1.3rem); color:var(--fg-2); line-height:1.5; max-width:620px; }

/* ---------------------------------------------------------------- MANIFESTO (paper) */
.manifesto { background:var(--paper); color:var(--ink-1); border-radius:var(--radius-xl); padding:clamp(40px,7vw,96px); position:relative; overflow:hidden; }
.manifesto .eyebrow { color:var(--ink-2); }
.manifesto h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,5.5vw,5rem); line-height:.98; letter-spacing:-.03em; color:var(--ink-1); text-wrap:balance; margin-top:22px; }
.manifesto h2 em { font-style:normal; color:var(--ember-deep); }
.manifesto-foot { display:flex; gap:40px; flex-wrap:wrap; margin-top:40px; }
.manifesto-foot p { color:var(--ink-2); max-width:380px; font-size:16px; line-height:1.55; }

/* ---------------------------------------------------------------- WORK GRID */
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,32px); margin-top:56px; }
.work-card { cursor:pointer; }
.work-card .media { aspect-ratio:16/10; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.work-card:hover .media { transform:translateY(-6px) scale(1.012); box-shadow:0 0 0 1px var(--plasma-glow), 0 30px 60px -24px rgba(0,0,0,.8); }
.work-meta { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:18px; }
.work-meta h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.02em; }
.work-meta .cat { font-family:var(--font-mono); font-size:12px; color:var(--fg-3); letter-spacing:.04em; }
.work-stats { display:flex; gap:22px; margin-top:10px; font-family:var(--font-mono); font-size:13px; color:var(--fg-2); }
.work-stats b { color:var(--plasma); font-weight:400; }
.work-desc { margin-top:12px; color:var(--fg-2); font-size:clamp(.95rem,1.1vw,1.0625rem); line-height:1.6; max-width:60ch; text-wrap:pretty; }
.work-link { display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:13px; letter-spacing:.03em; color:var(--signal); }
a.work-card { display:block; text-decoration:none; color:inherit; }
a.work-card:hover .work-link { color:var(--plasma); }
.work-card.big { grid-column:span 2; }
.work-card.big .media { aspect-ratio:21/8; }

/* ---------------------------------------------------------------- CAPABILITIES */
.caps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.cap { background:var(--void); padding:clamp(24px,3vw,40px); min-height:230px; display:flex; flex-direction:column; gap:14px; transition:background var(--dur) var(--ease-out); }
.cap:hover { background:var(--slate); }
.cap-ico { width:44px; height:44px; border-radius:12px; background:var(--slate-2); display:flex; align-items:center; justify-content:center; color:var(--plasma); }
.cap-ico svg { width:22px; height:22px; }
.cap h4 { font-family:var(--font-display); font-weight:500; font-size:1.35rem; letter-spacing:-.01em; }
.cap p { font-size:14.5px; color:var(--fg-3); line-height:1.55; }
.cap .num { margin-top:auto; font-family:var(--font-mono); font-size:11px; color:var(--fg-4); letter-spacing:.1em; }

/* ---------------------------------------------------------------- PROCESS */
.steps { display:flex; flex-direction:column; margin-top:48px; }
.step { display:grid; grid-template-columns:120px 1fr auto; gap:30px; align-items:start; padding-block:30px; border-top:1px solid var(--line); transition:padding-left var(--dur) var(--ease-out); }
.step:last-child { border-bottom:1px solid var(--line); }
.step:hover { padding-left:14px; }
.step .idx { font-family:var(--font-mono); font-size:13px; color:var(--plasma); letter-spacing:.1em; padding-top:6px; }
.step h4 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.02em; }
.step p { font-size:15.5px; color:var(--fg-3); margin-top:10px; max-width:520px; line-height:1.55; }
.step .dur { font-family:var(--font-mono); font-size:12px; color:var(--fg-3); padding-top:8px; white-space:nowrap; }

/* ---------------------------------------------------------------- STATS */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:8px; }
.stat .n { font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,5vw,4.4rem); line-height:1; letter-spacing:-.03em; color:var(--fg-1); }
.stat .n em { font-style:normal; color:var(--plasma); }
.stat .l { font-family:var(--font-mono); font-size:12px; color:var(--fg-3); letter-spacing:.06em; margin-top:12px; text-transform:uppercase; }

/* ---------------------------------------------------------------- CTA + FOOTER */
.cta { text-align:center; position:relative; }
.cta-glow { position:absolute; inset:0; background:radial-gradient(40% 60% at 50% 60%, var(--plasma-glow), transparent 70%); filter:blur(20px); pointer-events:none; opacity:.6; }
.cta h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,8vw,7rem); line-height:.9; letter-spacing:-.035em; position:relative; }
.footer { border-top:1px solid var(--line); padding-block:64px 40px; }
.footer-top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-col h5 { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-4); margin-bottom:18px; }
.footer-col a { display:block; color:var(--fg-2); font-size:15px; margin-bottom:11px; transition:color var(--dur-fast); white-space:nowrap; }
.footer-col a:hover { color:var(--plasma); }
.footer-brand { max-width:300px; }
.footer-brand .nav-logo { margin-bottom:18px; }
.footer-brand p { color:var(--fg-3); font-size:14px; line-height:1.55; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.footer-bottom span { font-family:var(--font-mono); font-size:12px; color:var(--fg-4); letter-spacing:.04em; }

/* ---------------------------------------------------------------- SHOWREEL MODAL */
.modal { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(5,6,9,.86); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease-out); }
.modal.open { opacity:1; pointer-events:auto; }
.modal-inner { width:min(1000px,92vw); aspect-ratio:16/9; border-radius:var(--radius-lg); position:relative; }
.modal-close { position:absolute; top:-46px; right:0; background:none; border:none; color:var(--fg-2); cursor:pointer; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.modal-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; }
.play-btn { width:84px; height:84px; border-radius:50%; background:var(--plasma); color:var(--void); display:flex; align-items:center; justify-content:center; }
.play-btn svg { width:30px; height:30px; }

/* ---------------------------------------------------------------- START-A-BUILD MODAL */
.build-panel { width:min(640px,94vw); max-height:90vh; overflow-y:auto; background:var(--ink); border:1px solid var(--line); border-radius:var(--radius-xl); padding:clamp(28px,4vw,46px); position:relative; box-shadow:var(--shadow-lg); }
.build-x { position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:var(--slate-2); border:1px solid var(--line); color:var(--fg-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color var(--dur-fast), background var(--dur-fast); }
.build-x:hover { color:var(--fg-1); background:var(--steel); }
.build-head h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem,3.4vw,2.4rem); letter-spacing:-.02em; margin-top:16px; }
.build-head p { color:var(--fg-3); font-size:15px; line-height:1.5; margin-top:10px; max-width:46ch; }
.build-form { margin-top:28px; display:flex; flex-direction:column; gap:18px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:9px; }
.field > span, .field-label { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.field input, .field textarea { width:100%; background:var(--slate-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:13px 15px; color:var(--fg-1); font-family:var(--font-sans); font-size:15px; transition:border-color var(--dur-fast), box-shadow var(--dur-fast); resize:vertical; }
.field input::placeholder, .field textarea::placeholder { color:var(--fg-4); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--signal); box-shadow:0 0 0 2px rgba(54,224,255,.25); }
.chip-row { display:flex; flex-wrap:wrap; gap:10px; }
.chip { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--fg-2); background:var(--slate-2); border:1px solid var(--line); border-radius:var(--radius-pill); padding:9px 16px; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast); }
.chip:hover { border-color:var(--line-strong); color:var(--fg-1); }
.chip.on { background:var(--plasma); border-color:var(--plasma); color:var(--void); font-weight:700; }
.build-submit { margin-top:8px; align-self:flex-start; }
.build-success { text-align:center; padding:clamp(18px,4vw,38px) 8px; display:flex; flex-direction:column; align-items:center; gap:13px; }
.success-mark { width:72px; height:72px; border-radius:50%; background:var(--plasma); color:var(--void); display:flex; align-items:center; justify-content:center; margin-bottom:6px; box-shadow:0 0 0 8px var(--plasma-glow); }
.build-success h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.02em; }
.build-success p { color:var(--fg-3); font-size:15px; line-height:1.55; max-width:42ch; }
.build-success .btn { margin-top:10px; }
[dir="rtl"] .build-x { right:auto; left:18px; }
[dir="rtl"] .build-head h3, [dir="rtl"] .build-success h3 { font-family:var(--font-arabic); letter-spacing:0; }

/* ---------------------------------------------------------------- RTL */
[dir="rtl"] body, [dir="rtl"] .nav-logo, [dir="rtl"] .hero h1,
[dir="rtl"] .sec-head h2, [dir="rtl"] .manifesto h2, [dir="rtl"] .step h4,
[dir="rtl"] .cta h2, [dir="rtl"] .marquee-item { font-family:var(--font-arabic); letter-spacing:0; }
[dir="rtl"] .hero h1 { line-height:1.05; }

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width:860px){
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .work-grid { grid-template-columns:1fr; }
  .work-card.big { grid-column:span 1; }
  .caps { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .step { grid-template-columns:50px 1fr; }
  .step .dur { display:none; }
  .field-row { grid-template-columns:1fr; }
}