/* =========================================================
   SYRPETRO 2027 — "Black Gold" design system
   Scene: decision-makers from operators, contractors and
   suppliers browsing at night or in a dim office before a
   regional trip — crude-oil black surfaces, molten-gold light.
   ========================================================= */
:root {
  /* palette (OKLCH) */
  --ink: oklch(0.115 0.006 75);
  --ink-2: oklch(0.155 0.008 75);
  --ink-3: oklch(0.2 0.01 75);
  --ink-4: oklch(0.27 0.012 75);
  --fg: oklch(0.965 0.01 85);
  --fg-2: oklch(0.84 0.018 85);
  --fg-3: oklch(0.7 0.02 80);
  --gold: oklch(0.83 0.135 82);
  --gold-2: oklch(0.9 0.09 88);
  --gold-deep: oklch(0.66 0.13 68);
  --ember: oklch(0.67 0.19 45);
  --green: oklch(0.62 0.15 150);
  --red: oklch(0.58 0.2 27);
  --rule: oklch(0.965 0.01 85 / 0.11);
  --rule-2: oklch(0.965 0.01 85 / 0.2);
  --rule-gold: oklch(0.83 0.135 82 / 0.35);

  /* type */
  --f-display: "Bahij", "Segoe UI", Tahoma, sans-serif;
  --f-body: "Bahij", "Segoe UI", Tahoma, sans-serif;
  --f-num: "Bahij", "Segoe UI", sans-serif;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* layout */
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 84px;
  --r: 4px;

  /* z-index scale */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-menu: 300;
  --z-float: 400;
  --z-toast: 500;
  --z-cursor: 600;
  --z-wipe: 700;
  --z-loader: 800;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; margin: 0; line-height: 1.25; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }

.skip-link { position: fixed; top: -80px; right: 16px; z-index: var(--z-loader); background: var(--gold); color: var(--ink); padding: 10px 18px; font-weight: 700; transition: top .2s var(--ease-out); }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.wrap-wide { width: min(100% - var(--gutter) * 2, 1680px); margin-inline: auto; }
.sec { position: relative; padding-block: clamp(96px, 13vw, 200px); }
.sec-tight { padding-block: clamp(64px, 8vw, 120px); }
.sec-ink2 { background: var(--ink-2); }
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); }
.col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; } .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; }
.col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; }
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- Type scale (1.333) ---------- */
.t-mega { font-family: var(--f-display); font-weight: 700; font-size: clamp(44px, 7vw, 96px); line-height: 1.12; letter-spacing: -0.01em; }
.t-1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(36px, 5vw, 72px); line-height: 1.18; }
.t-2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.28; }
.t-3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(21px, 1.8vw, 28px); line-height: 1.45; }
.t-lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.95; color: var(--fg-2); max-width: 62ch; }
.t-body { color: var(--fg-2); max-width: 68ch; }
.t-small { font-size: 14.5px; color: var(--fg-3); }
.au { color: var(--gold); }
.au-2 { color: var(--gold-2); }
.num { font-family: var(--f-num); font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "tnum"; }
.latin-label { font-family: var(--f-num); font-weight: 600; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-3); direction: ltr; display: inline-block; }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(48px, 6vw, 96px); }
.head-row .t-lead { margin: 0; }

/* word masks (Arabic-safe: whole words only) */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.12em; margin-block: -0.12em; }
.split-w > span { display: inline-block; will-change: transform; }
.reveal-text .rw { opacity: 0.16; }

/* ---------- Buttons ---------- */
.btn {
  --h: 60px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--h); padding: 0 32px; border-radius: 999px; isolation: isolate; overflow: hidden;
  font-family: var(--f-body); font-weight: 600; font-size: 16px; white-space: nowrap;
  transition: transform 160ms var(--ease-out), color 300ms ease, border-color 300ms ease, background-color 300ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn .arrow { transition: transform 400ms var(--ease-out); }
.btn-gold { background: var(--gold); color: oklch(0.16 0.02 70); }
.btn-gold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); clip-path: inset(0 0 0 100%); transition: clip-path 500ms var(--ease-out); }
.btn-line { border: 1px solid var(--rule-2); color: var(--fg); }
.btn-line::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); clip-path: inset(100% 0 0 0); transition: clip-path 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover::before { clip-path: inset(0 0 0 0); }
  .btn-line:hover { color: var(--ink); border-color: var(--fg); }
  .btn-line:hover::before { clip-path: inset(0 0 0 0); }
  .btn:hover .arrow { transform: translateX(-6px); }
}
.btn-sm { --h: 46px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-weight: 500; color: var(--gold); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; background-position: right bottom; transition: background-size 500ms var(--ease-out); padding-bottom: 2px; }
.link svg { width: 16px; height: 16px; transition: transform 400ms var(--ease-out); }
@media (hover: hover) { .link:hover { background-size: 100% 1px; } .link:hover svg { transform: translateX(-5px); } }

/* ---------- Grain / overlays ---------- */
.grain { pointer-events: none; position: fixed; inset: 0; z-index: var(--z-cursor); opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: var(--z-loader); background: var(--ink); display: grid; place-items: center; }
.preloader__inner { display: grid; justify-items: center; gap: 30px; }
.preloader__mark { width: 84px; height: 105px; }
.preloader__mark path.stroke { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 420; stroke-dashoffset: 420; }
.preloader__mark path.fill { fill: var(--gold); opacity: 0; }
.preloader__word { font-family: var(--f-num); font-weight: 800; font-size: 26px; letter-spacing: 0.4em; direction: ltr; padding-left: 0.4em; }
.preloader__word b { color: var(--green); font-weight: 800; } .preloader__word span { color: var(--gold); }
.preloader__count { font-family: var(--f-num); font-size: 13px; letter-spacing: 0.3em; color: var(--fg-3); direction: ltr; }
.preloader__line { width: 240px; height: 1px; background: var(--rule); overflow: hidden; }
.preloader__line i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; }

/* ---------- Page transition ---------- */
.page-wipe { position: fixed; inset: 0; z-index: var(--z-wipe); pointer-events: none; background: var(--ink); clip-path: inset(100% 0 0 0); display: grid; place-items: center; }
.page-wipe img { width: 54px; opacity: 0; }
html.is-entering .page-wipe { clip-path: inset(0 0 0 0); }
html.is-preload #main, html.is-entering #main { opacity: 0; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.cursor i { position: absolute; inset: 0; border-radius: 50%; background: var(--gold); transform: scale(0.085); transition: transform 350ms var(--ease-out), background-color 250ms; display: grid; place-items: center; }
.cursor.is-hover i { transform: scale(0.55); background: oklch(0.965 0.01 85 / 0.9); mix-blend-mode: difference; }
.cursor.is-view i { transform: scale(1); }
.cursor.is-view i::after { content: attr(data-label); font-family: var(--f-display); font-size: 13px; font-weight: 600; color: var(--ink); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.scroll-progress { position: fixed; top: 0; right: 0; left: 0; height: 2px; z-index: var(--z-header); background: var(--gold); transform-origin: right; transform: scaleX(0); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--header-h); transition: transform 600ms var(--ease-drawer), background-color 400ms ease, border-color 400ms ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: oklch(0.115 0.006 75 / 0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-color: var(--rule); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap-wide { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { width: 34px; }
.brand__word { font-family: var(--f-num); font-weight: 800; font-size: 22px; letter-spacing: 0.12em; direction: ltr; line-height: 1; }
.brand__word b { color: var(--green); font-weight: 800; } .brand__word span { color: var(--gold); }
.brand__sub { display: block; font-family: var(--f-num); font-size: 10px; letter-spacing: 0.34em; color: var(--fg-3); margin-top: 5px; direction: ltr; text-align: right; }
.nav { display: flex; gap: 2px; margin-inline-start: auto; }
.nav a { position: relative; padding: 8px 13px; font-family: var(--f-body); font-size: 15.5px; color: var(--fg-2); transition: color 250ms ease; }
.nav a::after { content: ""; position: absolute; inset: auto 13px 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--ease-out); }
@media (hover: hover) { .nav a:hover { color: var(--fg); } .nav a:hover::after { transform: scaleX(1); } }
.nav a.is-active { color: var(--gold); } .nav a.is-active::after { transform: scaleX(1); }
.header-cta { display: flex; align-items: center; gap: 14px; }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule-2); position: relative; }
.burger span { position: absolute; right: 15px; left: 15px; height: 1.5px; background: var(--fg); transition: transform 400ms var(--ease-out), opacity 200ms; }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 27px; }
.menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--ink-2); clip-path: inset(0 0 100% 0); transition: clip-path 800ms var(--ease-in-out); display: grid; grid-template-columns: 1fr 1fr; }
.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu__links { padding: calc(var(--header-h) + 40px) var(--gutter) 40px; display: flex; flex-direction: column; justify-content: center; }
.menu__links a { display: flex; align-items: baseline; gap: 18px; font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.45; color: var(--fg); opacity: 0; transform: translateY(40px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out), color 250ms; }
.menu__links a small { font-family: var(--f-num); font-size: 14px; color: var(--fg-3); font-weight: 600; letter-spacing: 0.1em; }
.menu__links a:hover, .menu__links a.is-active { color: var(--gold); }
.menu-open .menu__links a { opacity: 1; transform: none; }
.menu__media { position: relative; overflow: hidden; }
.menu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 600ms ease, transform 1.2s var(--ease-out); }
.menu__media img.is-on { opacity: 0.55; transform: scale(1); }
.menu__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink-2), transparent 40%); }
.menu__foot { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; transition: opacity 400ms 500ms; }
.menu-open .menu__foot { opacity: 1; }

/* ---------- Floating ---------- */
.fab-wa { position: fixed; left: 24px; bottom: 24px; z-index: var(--z-float); width: 56px; height: 56px; border-radius: 50%; background: oklch(0.62 0.16 150); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 40px -10px oklch(0.62 0.16 150 / 0.7); opacity: 0; translate: 0 16px; pointer-events: none; transition: transform 300ms var(--ease-out), opacity 300ms, translate 400ms var(--ease-out); }
.fab-wa.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.fab-wa:active { transform: scale(0.94); }
.fab-wa svg { width: 26px; height: 26px; }
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-float); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: oklch(0.155 0.008 75 / 0.8); backdrop-filter: blur(10px); opacity: 0; transform: translateY(16px); transition: opacity 300ms, transform 400ms var(--ease-out); }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top > svg:not(.ring) { width: 18px; height: 18px; color: var(--gold); }
.to-top .ring { position: absolute; inset: 0; transform: rotate(-90deg); width: 100%; height: 100%; }
.to-top .ring .track { stroke: var(--rule-2); }
.to-top .ring .bar { stroke: var(--gold); stroke-dasharray: 160; stroke-dashoffset: 160; }

/* =========================================================
   HERO — crude-oil WebGL surface
   ========================================================= */
.hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: #050404; isolation: isolate; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__fallback { position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse at 30% 60%, oklch(0.35 0.08 60), transparent 60%), #050404; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, oklch(0.08 0.005 75 / 0.6), transparent 26%, transparent 62%, oklch(0.115 0.006 75) 100%),
              linear-gradient(270deg, oklch(0.08 0.005 75 / 0.75), transparent 60%); }
.hero__inner { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; padding-top: var(--header-h); }
.hero__main { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 40px; }
.hero__kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.hero__kicker img { width: 44px; }
.hero__kicker .latin-label { color: var(--gold); letter-spacing: 0.4em; }
.hero__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(42px, 6.2vw, 94px); line-height: 1.14; letter-spacing: -0.01em; }
.hero__title .line { display: block; overflow: hidden; padding-block: 0.06em; }
.hero__title .line > span { display: block; }
.hero__title .au { font-weight: 500; }
.hero__sub { margin-top: 30px; font-size: clamp(17px, 1.35vw, 20px); color: var(--fg-2); max-width: 54ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero__nine { position: relative; justify-self: center; height: min(62svh, 600px); aspect-ratio: 0.72; max-width: 100%; }
.hero__nine svg { width: 100%; height: 100%; overflow: visible; }
.hero__nine .n-stroke { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.hero__nine .n-fill { fill: url(#nineFill); }
.hero__nine-cap { position: absolute; bottom: -7%; inset-inline: 0; display: flex; justify-content: center; gap: 16px; align-items: center; font-family: var(--f-body); font-size: 17px; color: var(--fg-2); }
.hero__nine-cap::before, .hero__nine-cap::after { content: ""; width: 44px; height: 1px; background: var(--rule-gold); }
.hero__strip { border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr 1.3fr; }
.hero__strip > div { padding: 22px 0; display: flex; align-items: center; gap: 16px; }
.hero__strip > div + div { border-inline-start: 1px solid var(--rule); padding-inline-start: 28px; }
.hero__strip svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }
.hero__strip b { display: block; font-family: var(--f-num); font-weight: 700; font-size: 19px; letter-spacing: 0.06em; direction: ltr; text-align: right; }
.hero__strip span { font-size: 14px; color: var(--fg-3); }
.hero__scroll { font-family: var(--f-num); font-size: 12px; letter-spacing: 0.4em; color: var(--fg-3); display: flex; align-items: center; gap: 14px; direction: ltr; }
.hero__scroll i { width: 1px; height: 40px; background: var(--rule-2); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--gold); animation: drip 2.4s var(--ease-in-out) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* countdown */
.cd { display: flex; gap: 22px; direction: ltr; justify-content: flex-end; }
.cd > div { text-align: center; min-width: 46px; }
.cd b { display: block; font-family: var(--f-num); font-weight: 700; font-size: 30px; line-height: 1; color: var(--fg); font-feature-settings: "tnum"; }
.cd span { font-size: 12px; color: var(--fg-3); font-family: var(--f-body); }
.cd--xl { gap: clamp(18px, 4vw, 64px); justify-content: center; }
.cd--xl > div { min-width: 0; }
.cd--xl b { font-size: clamp(56px, 10vw, 150px); font-weight: 800; color: var(--gold); line-height: 0.9; }
.cd--xl span { font-size: 15px; margin-top: 10px; display: block; }

/* ---------- Manifesto ---------- */
.manifesto { position: relative; }
.manifesto__text { font-family: var(--f-display); font-weight: 500; font-size: clamp(30px, 4.1vw, 60px); line-height: 1.5; max-width: 22ch; }
.manifesto__text .hl { color: var(--gold); }
.manifesto__aside { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-top: clamp(48px, 6vw, 90px); padding-top: 32px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.manifesto__aside p { max-width: 58ch; color: var(--fg-2); margin: 0; }

/* ---------- Chapters (pinned storytelling) ---------- */
.chapters { position: relative; height: 100svh; overflow: hidden; background: #000; }
.chapters__media { position: absolute; inset: 0; }
.chapter-img { position: absolute; inset: 0; overflow: hidden; clip-path: inset(100% 0 0 0); }
.chapter-img:first-child { clip-path: inset(0 0 0 0); }
.chapter-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); filter: saturate(0.85) contrast(1.05); }
.chapters__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, oklch(0.08 0.005 75 / 0.92) 0%, oklch(0.08 0.005 75 / 0.55) 45%, oklch(0.08 0.005 75 / 0.15) 100%), linear-gradient(0deg, oklch(0.08 0.005 75 / 0.7), transparent 40%); }
.chapters__ui { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 620px) 1fr auto; align-items: center; gap: 40px; }
.chapters__texts { position: relative; min-height: 380px; }
.chapter-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; }
.chapter-text:first-child { opacity: 1; visibility: visible; }
.chapter-text .num { font-size: 18px; color: var(--gold); letter-spacing: 0.2em; direction: ltr; text-align: right; }
.chapter-text h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 4.6vw, 70px); line-height: 1.2; margin: 14px 0 20px; }
.chapter-text p { color: var(--fg-2); font-size: clamp(16px, 1.25vw, 19px); max-width: 48ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { font-size: 13.5px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--fg-2); font-family: var(--f-body); background: oklch(0.08 0.005 75 / 0.35); backdrop-filter: blur(6px); }
.chapters__rail { grid-column: 3; display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
.chapters__rail button { display: flex; align-items: center; gap: 14px; font-family: var(--f-body); font-size: 14px; color: var(--fg-3); transition: color 300ms; }
.chapters__rail button i { width: 64px; height: 1px; background: var(--rule-2); transform: scaleX(0.44); transform-origin: left; transition: transform 500ms var(--ease-out), background-color 300ms; }
.chapters__rail button.is-active { color: var(--fg); }
.chapters__rail button.is-active i { transform: scaleX(1); background: var(--gold); }
.chapters__count { position: absolute; bottom: 36px; inset-inline-start: 0; font-family: var(--f-num); font-size: 15px; letter-spacing: 0.2em; color: var(--fg-3); direction: ltr; }
.chapters__count b { color: var(--fg); }
.chapters__bar { position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: var(--rule); }
.chapters__bar i { display: block; height: 100%; background: var(--gold); transform-origin: right; transform: scaleX(0); }

/* ---------- Facts over photo ---------- */
.facts { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(110px, 16vw, 240px); }
.facts__bg { position: absolute; inset: -12% 0; z-index: -2; }
.facts__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) brightness(0.55); }
.facts::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0%, oklch(0.115 0.006 75 / 0.55) 30%, oklch(0.115 0.006 75 / 0.55) 70%, var(--ink) 100%); }
.facts__sentence { font-family: var(--f-display); font-weight: 500; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.75; max-width: 26ch; }
.facts__sentence .big { font-family: var(--f-num); font-weight: 800; color: var(--gold); font-size: 1.9em; line-height: 0.9; vertical-align: -0.12em; display: inline-block; padding-inline: 0.12em; direction: ltr; }
.facts__note { margin-top: 48px; display: flex; gap: 14px; align-items: center; color: var(--fg-2); }
.facts__note .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px oklch(0.62 0.15 150 / 0.2); }

/* ---------- Hover-reveal list (market demand) ---------- */
.rows { border-top: 1px solid var(--rule); }
.row { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.1fr) 48px; gap: 28px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--rule); isolation: isolate; }
.row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-3); clip-path: inset(100% 0 0 0); transition: clip-path 600ms var(--ease-out); }
.row__i { color: var(--gold); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--rule-gold); }
.row__i svg { width: 26px; height: 26px; }
.row__t { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.3; transition: color 300ms, transform 600ms var(--ease-out); }
.row__d { color: var(--fg-3); margin: 0; transition: color 300ms; }
.row__a { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; transition: background-color 300ms, border-color 300ms, transform 500ms var(--ease-out); }
.row__a svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .row:hover::before { clip-path: inset(0 0 0 0); }
  .row:hover .row__t { color: var(--gold); transform: translateX(-14px); }
  .row:hover .row__d { color: var(--fg-2); }
  .row:hover .row__a { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: rotate(-45deg); }
}
.float-img { position: fixed; top: 0; left: 0; z-index: var(--z-float); width: 340px; aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; border-radius: var(--r); clip-path: inset(50% 50% 50% 50%); transition: clip-path 600ms var(--ease-out); }
.float-img.is-on { clip-path: inset(0 0 0 0); }
.float-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.15); transition: opacity 400ms ease, transform 900ms var(--ease-out); }
.float-img img.is-on { opacity: 1; transform: scale(1); }
@media (hover: none) { .float-img { display: none; } }

/* ---------- Route map ---------- */
.mapwrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 90px); align-items: center; }
.routemap { position: relative; aspect-ratio: 1.1; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background:
  radial-gradient(circle at 52% 56%, oklch(0.83 0.135 82 / 0.12), transparent 45%),
  radial-gradient(oklch(0.965 0.01 85 / 0.09) 1px, transparent 1.4px) 0 0 / 18px 18px, var(--ink-2); }
.routemap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.routemap .coast { fill: none; stroke: oklch(0.7 0.06 230 / 0.35); stroke-width: 1.2; stroke-dasharray: 2 5; }
.routemap .sea { font-family: var(--f-display); font-size: 15px; fill: oklch(0.72 0.05 230 / 0.6); }
.routemap .route { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.routemap .route-glow { fill: none; stroke: var(--gold); stroke-width: 6; opacity: 0.12; }
.routemap .city circle { fill: var(--ink); stroke: var(--fg-2); stroke-width: 1.3; }
.routemap .city text { font-family: var(--f-display); font-size: 15px; fill: var(--fg-2); }
.routemap .hub circle.core { fill: var(--gold); }
.routemap .hub circle.ring { fill: none; stroke: var(--gold); transform-box: fill-box; transform-origin: center; animation: hubRing 2.6s var(--ease-out) infinite; }
.routemap .hub text { font-family: var(--f-display); font-weight: 700; font-size: 20px; fill: var(--gold); }
.routemap .pulse { fill: var(--gold-2); }
@keyframes hubRing { from { transform: scale(1); opacity: 0.9; } to { transform: scale(4); opacity: 0; } }
.routemap__legend { position: absolute; bottom: 18px; inset-inline-end: 20px; font-family: var(--f-num); font-size: 12px; letter-spacing: 0.3em; color: var(--fg-3); direction: ltr; }

.values { display: grid; }
.value { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.value:first-child { border-top: 1px solid var(--rule); }
.value svg { width: 28px; height: 28px; color: var(--gold); margin-top: 6px; }
.value h3 { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.value p { margin: 0; color: var(--fg-3); font-size: 16px; }

/* ---------- Monoliths (sponsorship tiers) ---------- */
.monoliths { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: clamp(460px, 62vh, 640px); }
.mono { --c1: oklch(0.83 0.135 82); --c2: oklch(0.45 0.09 65); position: relative; height: var(--h); border-radius: var(--r) var(--r) 0 0; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 20px; color: oklch(0.14 0.01 70); transform-origin: bottom; transition: translate 500ms var(--ease-out); }
.mono::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.mono::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; mix-blend-mode: overlay; background: repeating-linear-gradient(90deg, transparent 0 2px, oklch(1 0 0 / 0.18) 2px 3px), linear-gradient(115deg, transparent 30%, oklch(1 0 0 / 0.55) 48%, transparent 56%); background-size: auto, 300% 100%; background-position: 0 0, 100% 0; transition: background-position 1.2s var(--ease-out); }
@media (hover: hover) { .mono:hover { translate: 0 -12px; } .mono:hover::after { background-position: 0 0, 0% 0; } }
.mono__rank { font-family: var(--f-num); font-weight: 700; font-size: 12px; letter-spacing: 0.24em; direction: ltr; text-align: right; opacity: 0.75; }
.mono h3 { font-size: clamp(17px, 1.5vw, 22px); font-weight: 700; margin-top: 6px; line-height: 1.35; }
.mono__price { font-family: var(--f-num); font-weight: 800; font-size: clamp(30px, 3vw, 48px); line-height: 1; direction: ltr; text-align: right; }
.mono__price small { font-size: 0.36em; font-weight: 600; letter-spacing: 0.1em; margin-left: 4px; }
.mono__perks { font-size: 13.5px; line-height: 1.7; margin: 10px 0 0; padding: 0; list-style: none; opacity: 0.85; }
.mono--main { --c1: oklch(0.9 0.12 88); --c2: oklch(0.6 0.14 65); }
.mono--intl { --c1: oklch(0.86 0.06 230); --c2: oklch(0.42 0.06 240); }
.mono--dia { --c1: oklch(0.95 0.025 220); --c2: oklch(0.62 0.03 230); }
.mono--plat { --c1: oklch(0.9 0.008 90); --c2: oklch(0.55 0.008 90); }
.mono--gold { --c1: oklch(0.85 0.13 80); --c2: oklch(0.5 0.1 62); }
.mono--sup { --c1: oklch(0.76 0.09 50); --c2: oklch(0.4 0.07 40); }
.mono-base { height: 1px; background: var(--rule-2); margin-top: 0; }
.mono-note { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 22px; color: var(--fg-3); font-size: 15px; }

/* ---------- Ticket (exhibitor pass) ---------- */
.ticket-stage { perspective: 1400px; }
.ticket { position: relative; display: grid; grid-template-columns: 1fr 150px; border-radius: 18px; background: linear-gradient(150deg, oklch(0.9 0.11 86), oklch(0.74 0.14 72) 55%, oklch(0.58 0.13 62)); color: oklch(0.15 0.02 65); transform-style: preserve-3d; transition: transform 200ms ease-out; box-shadow: 0 50px 120px -40px oklch(0.6 0.14 65 / 0.6); overflow: hidden; }
.ticket::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--gx, 30%) var(--gy, 20%), oklch(1 0 0 / 0.35), transparent 45%); mix-blend-mode: soft-light; }
.ticket__main { padding: clamp(26px, 3vw, 44px); }
.ticket__top { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.ticket__top img { width: 40px; }
.ticket__brand { font-family: var(--f-num); font-weight: 800; font-size: 20px; letter-spacing: 0.2em; direction: ltr; }
.ticket h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; margin: 26px 0 22px; }
.ticket__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; border-top: 1px solid oklch(0.15 0.02 65 / 0.2); padding-top: 22px; }
.ticket__grid span { display: block; font-size: 13px; opacity: 0.7; font-family: var(--f-body); }
.ticket__grid b { display: block; font-family: var(--f-num); font-weight: 800; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; direction: ltr; text-align: right; }
.ticket__grid b small { font-size: 0.45em; font-weight: 600; }
.ticket__stub { position: relative; border-inline-start: 2px dashed oklch(0.15 0.02 65 / 0.35); padding: 26px 18px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; }
.ticket__stub::before, .ticket__stub::after { content: ""; position: absolute; inset-inline-start: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
.ticket__stub::before { top: -14px; } .ticket__stub::after { bottom: -14px; }
.ticket__stub .num { font-size: 64px; font-weight: 900; line-height: 1; }
.ticket__code { width: 100%; height: 70px; background: repeating-linear-gradient(90deg, oklch(0.15 0.02 65) 0 2px, transparent 2px 4px, oklch(0.15 0.02 65) 4px 7px, transparent 7px 9px, oklch(0.15 0.02 65) 9px 10px, transparent 10px 13px); opacity: 0.85; }
.ticket__stub small { font-family: var(--f-num); font-size: 11px; letter-spacing: 0.2em; direction: ltr; }

.incl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.incl li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--fg-2); font-size: 16px; }
.incl li svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }

/* ---------- Partners ---------- */
.marquee { position: relative; overflow: hidden; display: flex; direction: ltr; user-select: none; }
.marquee__track { display: flex; flex-shrink: 0; align-items: center; min-width: 100%; animation: marquee var(--dur, 50s) linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-100%); } }
.pname { font-family: var(--f-num); font-weight: 800; font-size: clamp(34px, 5vw, 76px); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.2; padding-inline: 0.45em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px oklch(0.965 0.01 85 / 0.35); transition: color 300ms, -webkit-text-stroke-color 300ms; display: inline-flex; align-items: center; gap: 0.45em; }
.pname.ar { font-family: var(--f-display); font-weight: 700; text-transform: none; direction: rtl; }
.pname::after { content: ""; width: 0.18em; height: 0.18em; border-radius: 50%; background: var(--gold); opacity: 0.6; }
@media (hover: hover) { .pname:hover { color: var(--gold); -webkit-text-stroke-color: var(--gold); } }
.fade-x { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--rule); }
.wall__item { min-height: 128px; display: grid; place-items: center; text-align: center; padding: 20px; border-bottom: 1px solid var(--rule); border-inline-end: 1px solid var(--rule); position: relative; overflow: hidden; }
.wall__item::before { content: ""; position: absolute; inset: 0; background: var(--gold); clip-path: inset(100% 0 0 0); transition: clip-path 500ms var(--ease-out); }
.wall__item span { position: relative; font-weight: 700; color: var(--fg-2); transition: color 300ms; }
.wall__item span.l { font-family: var(--f-num); font-size: 21px; letter-spacing: 0.04em; text-transform: uppercase; }
.wall__item span.a { font-family: var(--f-display); font-size: 18px; }
@media (hover: hover) { .wall__item:hover::before { clip-path: inset(0 0 0 0); } .wall__item:hover span { color: var(--ink); } }
.strategic { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-gold); }
.strategic__item { padding: 40px 28px; border-bottom: 1px solid var(--rule-gold); display: flex; flex-direction: column; gap: 6px; min-height: 260px; justify-content: space-between; }
.strategic__item + .strategic__item { border-inline-start: 1px solid var(--rule-gold); }
.strategic__item .n { font-family: var(--f-num); font-weight: 900; font-size: clamp(44px, 4.6vw, 72px); line-height: 1; color: var(--gold); direction: ltr; text-align: right; }
.strategic__item .r { font-size: 13px; color: var(--gold-2); font-family: var(--f-body); }
.strategic__item .a { color: var(--fg-2); font-family: var(--f-body); font-size: 17px; }

/* ---------- Media blocks ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--r); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 10; }
.media__cap { position: absolute; inset: auto 0 0; padding: 22px 24px; background: linear-gradient(0deg, oklch(0.08 0.005 75 / 0.9), transparent); font-size: 14px; color: var(--fg-2); }
[data-clip] { clip-path: inset(0 0 0 0); }
html.js-anim [data-clip] { clip-path: inset(100% 0 0 0); }

.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.facts-row > div { padding: 28px 0 0; }
.facts-row > div + div { border-inline-start: 1px solid var(--rule); padding-inline-start: 24px; }
.facts-row b { display: block; font-family: var(--f-num); font-weight: 800; font-size: clamp(38px, 4vw, 64px); line-height: 1; color: var(--fg); direction: ltr; text-align: right; }
.facts-row > div > span { color: var(--fg-3); font-size: 15px; font-family: var(--f-body); }

/* ---------- Final CTA ---------- */
.finale { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: clamp(120px, 16vw, 240px); }
.finale__bg { position: absolute; inset: -10% 0; z-index: -3; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) saturate(0.9); }
.finale canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.finale::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 70% 60% at 50% 100%, oklch(0.6 0.16 50 / 0.45), transparent 70%), linear-gradient(180deg, var(--ink), oklch(0.115 0.006 75 / 0.35) 30%, oklch(0.115 0.006 75 / 0.6) 100%); }
.finale .t-mega { max-width: 16ch; margin-inline: auto; }
.finale .t-lead { margin: 26px auto 60px; }
.finale .hero__ctas { justify-content: center; margin-top: 64px; }

/* ---------- Page hero (inner) ---------- */
.phero { position: relative; min-height: 86svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 80px) 0 clamp(56px, 7vw, 100px); }
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: kenburns 24s var(--ease-out) forwards; filter: saturate(0.85); }
@keyframes kenburns { to { transform: scale(1); } }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(0.08 0.005 75 / 0.75), oklch(0.08 0.005 75 / 0.3) 35%, oklch(0.115 0.006 75 / 0.85) 82%, var(--ink)), linear-gradient(270deg, oklch(0.08 0.005 75 / 0.6), transparent 70%); }
.crumbs { display: flex; gap: 12px; align-items: center; font-family: var(--f-body); font-size: 14.5px; color: var(--fg-3); margin-bottom: 28px; }
.crumbs a:hover { color: var(--gold); }
.crumbs svg { width: 14px; height: 14px; }
.phero__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(44px, 7vw, 96px); line-height: 1.14; max-width: 14ch; }
.phero__foot { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-top: 34px; }
.phero__foot .t-lead { margin: 0; }
.phero__meta { display: flex; gap: 28px; flex-wrap: wrap; }
.phero__meta div { border-inline-start: 1px solid var(--rule-gold); padding-inline-start: 16px; }
.phero__meta b { display: block; font-family: var(--f-num); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--gold); direction: ltr; text-align: right; }
.phero__meta span { font-size: 14px; color: var(--fg-3); }

/* ---------- Letter ---------- */
.letter { font-size: clamp(17px, 1.3vw, 20px); line-height: 2.1; color: var(--fg-2); max-width: 70ch; }
.letter strong { color: var(--fg); font-weight: 600; }
.letter .dropline { font-family: var(--f-display); font-size: 1.35em; color: var(--gold); }
.sign { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--rule); }
.sign b { display: block; font-family: var(--f-display); font-size: 20px; color: var(--fg); }
.sign img { height: 54px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }

/* ---------- Timeline ---------- */
.tl { position: relative; }
.tl__line { position: absolute; top: 0; bottom: 0; inset-inline-start: 7px; width: 1px; background: var(--rule); }
.tl__line i { position: absolute; inset: 0; background: var(--gold); transform: scaleY(0); transform-origin: top; }
.tl__item { position: relative; padding-inline-start: 56px; padding-bottom: 56px; }
.tl__item::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); border: 1px solid var(--gold); }
.tl__item.is-now::before { background: var(--gold); box-shadow: 0 0 0 8px oklch(0.83 0.135 82 / 0.15), 0 0 30px oklch(0.83 0.135 82 / 0.6); }
.tl__y { font-family: var(--f-num); font-weight: 800; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; color: var(--fg); direction: ltr; text-align: right; }
.tl__item.is-now .tl__y { color: var(--gold); }
.tl__item h3 { font-size: 22px; margin: 12px 0 8px; }
.tl__item p { color: var(--fg-3); margin: 0; max-width: 52ch; }

/* ---------- Feature list (generic, replaces card grids) ---------- */
.flist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-top: 1px solid var(--rule); }
.flist > div { padding: 34px 30px 34px 0; border-bottom: 1px solid var(--rule); }
.flist > div { padding-inline: 0 30px; }
.flist svg { width: 30px; height: 30px; color: var(--gold); margin-bottom: 20px; }
.flist h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.flist p { color: var(--fg-3); margin: 0; font-size: 16px; }

/* ---------- Sector detail ---------- */
.sector { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 90px); align-items: center; padding-block: clamp(56px, 7vw, 110px); border-bottom: 1px solid var(--rule); }
.sector:nth-child(even) .sector__media { order: 2; }
.sector__media { aspect-ratio: 5 / 4; }
.sector__n { font-family: var(--f-num); font-weight: 700; font-size: 16px; letter-spacing: 0.2em; color: var(--gold); direction: ltr; display: block; text-align: right; }
.sector h2 { font-size: clamp(30px, 3.4vw, 50px); margin: 12px 0 8px; }
.sector .latin-label { margin-bottom: 22px; }
.sector p { color: var(--fg-2); }

.chain { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.chain::before { content: ""; position: absolute; top: 40px; inset-inline: 10%; height: 1px; background: repeating-linear-gradient(-90deg, var(--gold) 0 8px, transparent 8px 18px); background-size: 36px 1px; animation: flow 1.2s linear infinite; opacity: 0.7; }
@keyframes flow { to { background-position: -36px 0; } }
.chain a { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.chain__ic { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--rule-gold); color: var(--gold); transition: background-color 300ms, color 300ms, transform 400ms var(--ease-out); }
.chain__ic svg { width: 32px; height: 32px; }
.chain b { font-family: var(--f-body); font-weight: 600; font-size: 16px; }
.chain small { font-family: var(--f-num); font-size: 11px; letter-spacing: 0.28em; color: var(--fg-3); }
@media (hover: hover) { .chain a:hover .chain__ic { background: var(--gold); color: var(--ink); transform: translateY(-6px); } }

/* ---------- Price + calculator ---------- */
.calc { border: 1px solid var(--rule-gold); border-radius: var(--r); padding: clamp(26px, 3vw, 48px); background: radial-gradient(ellipse at 100% 0%, oklch(0.83 0.135 82 / 0.1), transparent 55%), var(--ink-2); }
.calc__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--fg-3); font-family: var(--f-body); }
.calc__area { font-family: var(--f-num); font-weight: 800; font-size: clamp(80px, 10vw, 150px); line-height: 0.9; direction: ltr; text-align: right; }
.calc__area small { font-size: 0.24em; color: var(--fg-3); font-weight: 600; letter-spacing: 0.1em; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; direction: rtl; background: linear-gradient(to left, var(--gold) var(--p, 0%), var(--ink-4) var(--p, 0%)); outline: none; margin: 30px 0 12px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fg); border: 7px solid var(--gold); cursor: grab; transition: transform 160ms var(--ease-out); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--fg); border: 6px solid var(--gold); }
.calc__scale { display: flex; justify-content: space-between; font-family: var(--f-num); font-size: 13px; color: var(--fg-3); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.preset { direction: ltr; unicode-bidi: isolate; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--rule-2); font-family: var(--f-num); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; color: var(--fg-2); transition: background-color 200ms, color 200ms, border-color 200ms, transform 160ms var(--ease-out); }
.preset:active { transform: scale(0.95); }
.preset.is-active, .preset:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.check { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); cursor: pointer; }
.check input { appearance: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--rule-2); display: grid; place-items: center; margin: 0; flex-shrink: 0; transition: background-color 200ms, border-color 200ms; }
.check input:checked { background: var(--gold); border-color: var(--gold); }
.check input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check span { flex: 1; font-family: var(--f-body); font-size: 15.5px; color: var(--fg-2); }
.check em { font-style: normal; font-family: var(--f-num); font-weight: 700; color: var(--gold); }
.calc__total { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--rule-gold); padding-top: 26px; margin-top: 4px; }
.calc__total .t-small { display: block; font-family: var(--f-body); }
.calc__total b { font-family: var(--f-num); font-weight: 800; font-size: clamp(48px, 5.5vw, 84px); line-height: 1; color: var(--gold); direction: ltr; display: inline-block; }

.pricelist { border-top: 1px solid var(--rule); }
.pricelist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.pricelist > div > span { font-family: var(--f-body); color: var(--fg-2); font-size: 18px; }
.pricelist b { font-family: var(--f-num); font-weight: 800; font-size: clamp(32px, 3.2vw, 50px); line-height: 1; direction: ltr; color: var(--fg); }
.pricelist b small { font-size: 0.4em; color: var(--fg-3); font-weight: 600; margin-left: 6px; }
.pricelist .is-key b { color: var(--gold); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: s; border-top: 1px solid var(--rule); }
.step { padding: 32px 24px 0 0; position: relative; }
.step + .step { border-inline-start: 1px solid var(--rule); padding-inline-start: 24px; }
.step { padding-inline-end: 24px; }
.step__n { font-family: var(--f-num); font-weight: 900; font-size: 72px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); direction: ltr; text-align: right; transition: color 400ms; }
@media (hover: hover) { .step:hover .step__n { color: var(--gold); } }
.step h3 { font-size: 19px; margin: 18px 0 8px; }
.step p { color: var(--fg-3); font-size: 15px; margin: 0; }

/* ---------- Floor plan ---------- */
.fp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.fp__stage { border: 1px solid var(--rule); border-radius: var(--r); padding: 16px; background:
  linear-gradient(oklch(0.965 0.01 85 / 0.03) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, oklch(0.965 0.01 85 / 0.03) 1px, transparent 1px) 0 0 / 24px 24px, var(--ink-2); }
.fp__tools { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--rule); flex-wrap: wrap; }
.tabs button { padding: 8px 16px; border-radius: 999px; font-family: var(--f-body); font-size: 14.5px; color: var(--fg-3); transition: background-color 200ms, color 200ms; }
.tabs button.is-active { background: var(--gold); color: var(--ink); }
.fp__search { position: relative; }
.fp__search input { width: 220px; height: 44px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; padding: 0 18px; outline: none; font-size: 15px; }
.fp__search input::placeholder { color: var(--fg-3); }
.fp__search input:focus { border-color: var(--gold); }
.fp__svg { width: 100%; height: auto; }
.fp__svg .hall-outline { fill: oklch(0.965 0.01 85 / 0.025); stroke: var(--rule-gold); stroke-width: 1.5; }
.fp__svg .hall-label { font-family: var(--f-num); font-size: 16px; font-weight: 700; fill: var(--gold); letter-spacing: 0.14em; }
.fp__svg .booth { cursor: pointer; transition: opacity 300ms; outline: none; }
.fp__svg .booth rect { stroke: oklch(0.1 0 0 / 0.55); stroke-width: 1; transition: filter 200ms; }
.fp__svg .booth text { font-family: var(--f-num); font-weight: 700; fill: oklch(0.15 0.01 70 / 0.85); pointer-events: none; }
.fp__svg .booth:hover rect, .fp__svg .booth:focus-visible rect, .fp__svg .booth.is-selected rect { stroke: #fff; stroke-width: 2.2; filter: brightness(1.2); }
.fp__svg .booth.is-dim { opacity: 0.15; }
.fp__svg .booth.is-reserved rect { fill: var(--ink-4) !important; }
.fp__svg .entrance { fill: var(--red); }
.fp__svg .entrance-t { font-family: var(--f-num); font-size: 11px; font-weight: 700; fill: var(--fg-2); letter-spacing: 0.12em; }
.fp__side { display: grid; gap: 16px; position: sticky; top: 100px; }
.fp__info { border: 1px solid var(--rule-gold); border-radius: var(--r); padding: 26px; min-height: 280px; background: var(--ink-2); }
.fp__info .empty { color: var(--fg-3); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 30px 0; font-family: var(--f-body); }
.fp__info .empty svg { width: 42px; height: 42px; color: var(--gold); }
.fp__code { font-family: var(--f-num); font-size: 64px; font-weight: 900; line-height: 1; direction: ltr; text-align: right; }
.fp__kv { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 18px 0 22px; font-size: 15px; }
.fp__kv dt { color: var(--fg-3); }
.fp__kv dd { margin: 0; font-family: var(--f-num); font-weight: 600; font-size: 17px; text-align: left; }
.legend { display: grid; gap: 8px; border: 1px solid var(--rule); border-radius: var(--r); padding: 20px; }
.legend button { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--fg-2); text-align: right; padding: 3px 0; transition: opacity 200ms; }
.legend button.is-off { opacity: 0.35; }
.legend i { width: 16px; height: 16px; border-radius: 3px; }
.fp-tip { position: fixed; z-index: var(--z-toast); pointer-events: none; padding: 9px 14px; border-radius: 8px; background: oklch(0.155 0.008 75 / 0.95); border: 1px solid var(--rule-gold); font-size: 13px; opacity: 0; transform: translate(-50%, -130%); transition: opacity 150ms; white-space: nowrap; }
.fp-tip b { font-family: var(--f-num); color: var(--gold); }

/* ---------- Tables ---------- */
.table-wrap { border: 1px solid var(--rule); border-radius: var(--r); overflow: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 900px; }
.table th, .table td { padding: 18px 14px; text-align: center; border-bottom: 1px solid var(--rule); font-size: 15px; transition: background-color 250ms; }
.table th:first-child, .table td:first-child { text-align: right; padding-inline-start: 24px; }
.table thead th { background: var(--ink-3); font-family: var(--f-body); font-weight: 600; color: var(--fg); line-height: 1.4; vertical-align: bottom; }
.table thead th small { display: block; font-family: var(--f-num); font-weight: 700; font-size: 18px; color: var(--gold); margin-top: 4px; letter-spacing: 0.04em; }
.table tbody tr:hover td { background: oklch(0.965 0.01 85 / 0.025); }
.table td.feat { font-family: var(--f-body); color: var(--fg-2); }
.table .yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.table .yes svg { width: 14px; height: 14px; }
.table .no { color: var(--ink-4); }
.table .val { font-family: var(--f-body); font-size: 14px; color: var(--gold-2); }
.table .is-hl { background: oklch(0.83 0.135 82 / 0.08) !important; }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0; text-align: right; font-family: var(--f-display); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); transition: color 200ms; }
.acc__btn:hover { color: var(--gold); }
.acc__btn i { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); flex-shrink: 0; position: relative; transition: transform 400ms var(--ease-out), background-color 200ms, border-color 200ms; }
.acc__btn i::before, .acc__btn i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.acc__btn i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 400ms var(--ease-out); }
.acc__item.is-open .acc__btn i { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: rotate(180deg); }
.acc__item.is-open .acc__btn i::after { transform: translate(-50%, -50%) rotate(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 28px; margin: 0; color: var(--fg-2); max-width: 72ch; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { position: relative; }
.field input, .field select, .field textarea { width: 100%; padding: 26px 0 10px; border: 0; border-bottom: 1px solid var(--rule-2); background: transparent; font-size: 17px; outline: none; appearance: none; color: var(--fg); border-radius: 0; transition: border-color 200ms; }
.field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e8c063' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat left 4px center; }
.field select option { background: var(--ink-2); }
.field textarea { min-height: 120px; resize: vertical; }
.field label { position: absolute; right: 0; top: 24px; font-family: var(--f-body); font-size: 16px; color: var(--fg-3); pointer-events: none; transition: transform 300ms var(--ease-out), color 200ms; transform-origin: right top; }
.field::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--ease-out); }
.field:focus-within::after { transform: scaleX(1); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select + label { transform: translateY(-20px) scale(0.78); color: var(--gold); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--red); }
.field.is-invalid label { color: var(--red); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 11px 20px; border-radius: 999px; border: 1px solid var(--rule-2); cursor: pointer; font-family: var(--f-body); font-size: 15px; color: var(--fg-2); transition: background-color 200ms, color 200ms, border-color 200ms; }
.seg input:checked + label { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.seg input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }
.form-note { font-size: 14px; color: var(--fg-3); margin: 0; }
.form-panel { border: 1px solid var(--rule); border-radius: var(--r); padding: clamp(26px, 3.4vw, 50px); background: var(--ink-2); }

.offices { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.office { padding: 36px 28px 36px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.office + .office { border-inline-start: 1px solid var(--rule); padding-inline-start: 28px; }
.office__head { display: flex; justify-content: space-between; align-items: center; }
.office__head h3 { font-size: 22px; }
.flag { width: 40px; height: 27px; border-radius: 3px; overflow: hidden; }
.office__phone { font-family: var(--f-num); font-weight: 700; font-size: clamp(26px, 2.4vw, 36px); direction: ltr; text-align: right; letter-spacing: 0.03em; }
.office__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.map-frame { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); aspect-ratio: 4 / 3; filter: grayscale(1) invert(0.9) contrast(0.9) sepia(0.25); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.audience { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.audience li { display: flex; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); font-family: var(--f-display); font-size: clamp(18px, 1.5vw, 22px); }
.audience li svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }

.note { border-inline-start: 0; padding: 22px 26px; border: 1px solid var(--rule-gold); border-radius: var(--r); color: var(--fg-2); background: oklch(0.83 0.135 82 / 0.05); }
.note b { color: var(--gold); font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule-gold); font-family: var(--f-body); font-size: 14.5px; color: var(--gold-2); }
.pill svg { width: 16px; height: 16px; }
.terms { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 60px; }
.terms li { break-inside: avoid; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--fg-2); font-size: 15.5px; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 28px; left: 50%; z-index: var(--z-toast); transform: translate(-50%, 160%); padding: 16px 22px; border-radius: 12px; background: var(--ink-3); border: 1px solid var(--rule-gold); display: flex; gap: 12px; align-items: center; transition: transform 500ms var(--ease-drawer); max-width: calc(100% - 40px); }
.toast.is-show { transform: translate(-50%, 0); }
.toast svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: #070605; border-top: 1px solid var(--rule); padding-top: clamp(80px, 10vw, 140px); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; }
.footer-col h4 { font-family: var(--f-body); font-size: 15px; color: var(--fg-3); font-weight: 500; margin-bottom: 20px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { color: var(--fg-2); transition: color 200ms; display: inline-flex; gap: 10px; align-items: center; }
.footer-col a:hover { color: var(--gold); }
.footer-col a svg { width: 16px; height: 16px; color: var(--gold); }
.footer-col .ltr { direction: ltr; font-family: var(--f-num); font-weight: 600; font-size: 17px; letter-spacing: 0.04em; }
.footer-about p { color: var(--fg-3); max-width: 40ch; margin-top: 22px; }
.footer-org { display: flex; gap: 16px; align-items: center; margin-top: 26px; }
.footer-org img { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: 0.8; }
.newsletter { display: flex; gap: 8px; margin-top: 20px; border-bottom: 1px solid var(--rule-2); padding-bottom: 8px; }
.newsletter input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 15px; }
.newsletter input::placeholder { color: var(--fg-3); }
.footer-word { font-family: var(--f-num); font-weight: 900; font-size: clamp(56px, 13vw, 230px); line-height: 0.8; letter-spacing: -0.01em; text-align: center; direction: ltr; margin-top: clamp(60px, 8vw, 120px); color: transparent; -webkit-text-stroke: 1px oklch(0.83 0.135 82 / 0.28); user-select: none; transition: color 600ms ease; }
@media (hover: hover) { .footer-word:hover { color: oklch(0.83 0.135 82 / 0.12); } }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--rule); color: var(--fg-3); font-size: 13.5px; }

/* ---------- Reveal defaults (enhance an already-visible default) ---------- */
html.js-anim [data-reveal] { opacity: 0; transform: translateY(32px); }
html.js-anim [data-reveal="fade"] { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .nav a { padding: 8px 9px; font-size: 14.5px; }
  .header-cta .btn { display: none; }
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .header-cta { margin-inline-start: auto; }
  .header-cta .btn { display: inline-flex; }
  .hero__main { grid-template-columns: 1fr; }
  .hero__nine { position: absolute; inset-inline-end: -6%; top: 14%; width: 62vw; opacity: 0.35; z-index: -1; }
  .hero__nine-cap { display: none; }
  .hero__strip { grid-template-columns: 1fr 1fr; }
  .hero__strip > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule); }
  .hero__strip > div:nth-child(4) { border-top: 1px solid var(--rule); }
  .chapters__ui { grid-template-columns: 1fr; }
  .chapters__rail { display: none; }
  .mapwrap { grid-template-columns: 1fr; }
  .monoliths { grid-template-columns: repeat(3, 1fr); height: auto; align-items: stretch; }
  .mono { height: auto; min-height: 260px; }
  .fp { grid-template-columns: 1fr; }
  .fp__side { position: static; grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .strategic { grid-template-columns: 1fr 1fr; }
  .strategic__item:nth-child(3) { border-inline-start: 0; }
  .split > [class*="col-"] { grid-column: 1 / -1; }
  .sector { grid-template-columns: 1fr; }
  .sector:nth-child(even) .sector__media { order: 0; }
  .menu { grid-template-columns: 1fr; }
  .menu__media { display: none; }
  .facts-row { grid-template-columns: 1fr 1fr; }
  .facts-row > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .offices { grid-template-columns: 1fr; }
  .office + .office { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .header-cta .btn { display: none; }
  .brand__sub { display: none; }
  .row { grid-template-columns: 56px 1fr; gap: 6px 14px; padding: 26px 0; }
  .row__d { grid-column: 2; }
  .row__a { display: none; }
  .hero { min-height: 640px; }
  .hero__strip { grid-template-columns: 1fr; }
  .hero__strip > div + div { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule); }
  .hero__strip > div { padding: 14px 0; }
  .hero__strip > div:nth-child(2), .hero__strip > div:nth-child(4) { display: none; }
  .cd { gap: 14px; justify-content: flex-start; }
  .monoliths { grid-template-columns: 1fr 1fr; }
  .ticket { grid-template-columns: 1fr; }
  .ticket__stub { border-inline-start: 0; border-top: 2px dashed oklch(0.15 0.02 65 / 0.35); flex-direction: row; }
  .ticket__stub::before, .ticket__stub::after { display: none; }
  .ticket__grid { grid-template-columns: 1fr 1fr; }
  .incl { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule); }
  .fp__side { grid-template-columns: 1fr; }
  .chain { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .chain::before { display: none; }
  .terms { columns: 1; }
  .strategic { grid-template-columns: 1fr; }
  .strategic__item + .strategic__item { border-inline-start: 0; }
  .fab-wa { left: 14px; bottom: 14px; width: 50px; height: 50px; }
  .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .fp__search input { width: 100%; }
  .chapters__texts { min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  html.js-anim [data-reveal] { opacity: 1; transform: none; }
  html.js-anim [data-clip] { clip-path: none; }
  .phero__bg img { transform: none; }
}

/* =========================================================
   HERO v3 — the brochure cover, brought to life
   ========================================================= */
.hx { position: relative; height: 100svh; min-height: 720px; overflow: hidden; isolation: isolate; background: #05070c; }
.hx__sky { position: absolute; inset: 0; z-index: -6; background: radial-gradient(ellipse 80% 55% at 50% 78%, oklch(0.42 0.11 60 / 0.55), transparent 70%), linear-gradient(180deg, #03050a 0%, #0a1222 38%, #121a2a 58%, #1d1a1a 72%, #05070c 100%); }
.hx__scene { position: absolute; inset: auto 0 0 0; height: clamp(300px, 46svh, 560px); z-index: -5; will-change: transform; }
.hx__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 30%, #000 55%, #000 82%, transparent 100%); filter: saturate(1.05); }
.hx__sun { position: absolute; z-index: -4; left: 50%; bottom: 13%; width: 70vmax; height: 70vmax; translate: -50% 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, oklch(0.95 0.08 85 / 0.55) 0%, oklch(0.78 0.16 60 / 0.28) 10%, oklch(0.6 0.16 45 / 0.12) 26%, transparent 52%); animation: sunPulse 6s ease-in-out infinite; }
@keyframes sunPulse { 50% { opacity: 0.78; scale: 1.06; } }
.hx__rays { position: absolute; z-index: -4; left: 50%; bottom: 13%; width: 180vmax; height: 180vmax; translate: -50% 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0.55;
  background: repeating-conic-gradient(from 0deg, oklch(0.9 0.1 80 / 0.10) 0deg 2.5deg, transparent 2.5deg 11deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 46%); mask-image: radial-gradient(circle, #000 0%, transparent 46%); animation: raySpin 120s linear infinite; }
@keyframes raySpin { to { rotate: 360deg; } }
.hx__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; }
.hx__spot { position: absolute; inset: 0; z-index: -2; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(600px circle at var(--sx, 50%) var(--sy, 40%), oklch(0.95 0.1 85 / 0.55), transparent 60%); }
.hx__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 22% at 50% 70%, oklch(0.05 0.01 250 / 0.72), transparent 80%), radial-gradient(ellipse 55% 50% at 50% 38%, oklch(0.06 0.01 250 / 0.55), transparent 72%), linear-gradient(180deg, oklch(0.06 0.01 250 / 0.55), transparent 22%, transparent 70%, var(--ink) 100%); }
.hx__inner { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: calc(var(--header-h) - 10px); padding-bottom: 96px; }
.hx__logo { position: relative; width: clamp(190px, 18vw, 290px); margin-bottom: clamp(14px, 2vh, 26px); }
.hx__logo { filter: drop-shadow(0 0 40px oklch(0.75 0.15 70 / 0.45)) drop-shadow(0 18px 30px rgb(0 0 0 / 0.6)); animation: logoGlow 5s ease-in-out infinite; }
.hx__logo img { width: 100%; display: block; }
@keyframes logoGlow { 50% { filter: drop-shadow(0 0 70px oklch(0.8 0.16 72 / 0.7)) drop-shadow(0 18px 30px rgb(0 0 0 / 0.6)); } }
.hx__flash { position: absolute; left: 50%; top: 42%; width: 240%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(circle, oklch(0.95 0.09 85 / 0.8), oklch(0.75 0.16 60 / 0.25) 22%, transparent 55%); mix-blend-mode: screen; }
.hx__logo .hx__shine { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: brightness(2.1) saturate(1.25); mix-blend-mode: screen; opacity: 0.85;
  clip-path: polygon(-30% 0%, -18% 0%, -38% 100%, -50% 100%); animation: logoShine 6.5s 3.2s var(--ease-in-out) infinite; }
@keyframes logoShine { 0% { clip-path: polygon(-30% 0%, -18% 0%, -38% 100%, -50% 100%); } 34%, 100% { clip-path: polygon(130% 0%, 142% 0%, 122% 100%, 110% 100%); } }
.hx__title { font-family: var(--f-display); font-weight: 900; line-height: 1.22; text-shadow: 0 2px 2px rgb(0 0 0 / 0.55), 0 10px 40px rgb(0 0 0 / 0.85); }
.hx__title .line { display: block; overflow: hidden; padding-block: 0.08em; }
.hx__title .line > span { display: inline-block; }
.hx__title .l1 { font-size: clamp(34px, 4.4vw, 68px); color: var(--fg); }
.hx__title .l2 { font-size: clamp(24px, 3vw, 48px); color: oklch(0.88 0.13 85); }
.hx__info { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.6vw, 40px); margin-top: clamp(18px, 3vh, 34px); flex-wrap: wrap; padding: 14px clamp(20px, 2.6vw, 40px); border-radius: 22px; background: oklch(0.07 0.01 250 / 0.62); border: 1px solid oklch(0.83 0.135 82 / 0.28); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8); }
.hx__ed { display: flex; align-items: center; gap: 14px; }
.hx__nine { font-family: var(--f-num); font-weight: 900; font-size: clamp(56px, 5.6vw, 88px); line-height: 0.8; color: var(--gold); text-shadow: 0 0 34px oklch(0.8 0.15 70 / 0.55), 0 2px 0 oklch(0.55 0.12 60); }
.hx__ed span { font-weight: 600; font-size: clamp(16px, 1.4vw, 21px); color: var(--gold-2); line-height: 1.35; text-align: right; }
.hx__sep { width: 1px; height: 56px; background: linear-gradient(transparent, var(--gold), transparent); }
.hx__meta { display: flex; align-items: center; gap: 14px; text-align: right; }
.hx__meta svg { width: 30px; height: 30px; color: var(--gold); flex-shrink: 0; }
.hx__meta b { display: block; font-family: var(--f-num); font-weight: 900; font-size: clamp(20px, 2vw, 30px); letter-spacing: 0.02em; direction: ltr; text-align: right; line-height: 1.15; }
.hx__meta span { font-size: 15px; color: var(--fg-2); text-shadow: 0 2px 12px rgb(0 0 0 / 0.9); }
.hx__info { text-shadow: 0 3px 18px rgb(0 0 0 / 0.85); }
.hx .hero__ctas { justify-content: center; margin-top: clamp(22px, 3.6vh, 40px); }
.hx__strip { position: absolute; inset: auto 0 0; z-index: 2; border-top: 1px solid var(--rule); background: linear-gradient(0deg, oklch(0.06 0.005 75 / 0.85), transparent); }
.hx__strip .wrap-wide { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }
.hx__strip .cd b { font-size: 26px; }
.hx__strip .label { font-size: 15px; color: var(--fg-2); }
.hx__scroll { font-family: var(--f-num); font-size: 12px; letter-spacing: 0.4em; color: var(--fg-3); display: flex; align-items: center; gap: 12px; direction: ltr; }
.hx__scroll i { width: 1px; height: 34px; background: var(--rule-2); position: relative; overflow: hidden; }
.hx__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--gold); animation: drip 2.4s var(--ease-in-out) infinite; }

/* brand images */
.brand__mark { width: auto !important; height: 46px; }
.brand__wm { width: auto !important; height: 22px; display: block; }
.brand .brand__sub { text-align: right; }
.footer-brand img { height: 130px; width: auto; }
.footer-org img.mesh { height: 52px; width: auto; filter: none; opacity: 0.95; }
.footer-org img.mig { height: 40px; width: auto; filter: none; opacity: 0.95; }
.preloader__logo { width: 120px; position: relative; }
.preloader__logo img { width: 100%; display: block; }
.preloader__logo .ghost { opacity: 0.12; filter: grayscale(1); }
.preloader__logo .fill { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); filter: drop-shadow(0 0 24px oklch(0.8 0.15 70 / 0.6)); }
.preloader__wm { width: 240px; opacity: 0; }
.page-wipe img { width: 70px; }

@media (max-width: 1080px) { .hx__sep { display: none; } .hx__info { gap: 18px 30px; } }
@media (max-width: 720px) {
  .hx { min-height: 680px; }
  .hx__scene { height: 44svh; }
  .hx__scene img { object-position: 58% 60%; }
  .hx__logo { width: 210px; }
  .hx__info { flex-direction: column; gap: 14px; }
  .hx__meta:last-child { display: none; }
  .hx__strip .label, .hx__scroll { display: none; }
  .hx__strip .cd { justify-content: center; width: 100%; }
  .brand__wm { height: 18px; }
  .brand__mark { height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .hx__rays, .hx__sun, .hx__shine, .hx__logo { animation: none; } }
.mono__tag { font-weight: 900; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.3; padding-top: 14px; border-top: 1px solid oklch(0.15 0.02 65 / 0.25); }
.calc__viz { height: 170px; margin: 18px 0 6px; display: grid; place-items: center; border: 1px dashed var(--rule-2); border-radius: var(--r);
  background: linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / 14px 14px; overflow: hidden; }
.calc__viz i { display: block; height: 150px; max-width: 96%; background: oklch(0.83 0.135 82 / 0.22); border: 1.5px solid var(--gold); border-radius: 3px; box-shadow: 0 0 30px oklch(0.83 0.135 82 / 0.25) inset; transition: transform 400ms var(--ease-out), aspect-ratio 400ms var(--ease-out); }
/* official floor plan */
.plan { margin: 0 auto; width: min(100%, 1500px); }
.plan__frame { position: relative; display: block; width: 100%; padding: clamp(10px, 1.4vw, 22px); border-radius: 18px; background: #fff; overflow: hidden; cursor: zoom-in;
  box-shadow: 0 0 0 1px var(--rule-gold), 0 60px 120px -50px oklch(0.83 0.135 82 / 0.45); transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.plan__frame img { width: 100%; height: auto; display: block; border-radius: 8px; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .plan__frame:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--gold), 0 70px 130px -50px oklch(0.83 0.135 82 / 0.6); } .plan__frame:hover img { transform: scale(1.015); } }
.plan__zoom { position: absolute; inset-inline-start: 26px; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--gold); font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); }
.plan__zoom svg { width: 16px; height: 16px; }
.plan__legend { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.plan__legend span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--fg-2); font-size: 15px; }
.plan__legend b { font-family: var(--f-num); font-weight: 900; color: var(--fg); letter-spacing: 0.04em; direction: ltr; }
.plan__legend .is-key { border-color: var(--gold); } .plan__legend .is-key b { color: var(--gold); }
.plan-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: oklch(0.06 0.005 75 / 0.97); color: var(--fg); }
.plan-dialog::backdrop { background: rgb(0 0 0 / 0.7); }
.plan-dialog[open] { display: grid; grid-template-rows: 1fr auto; animation: dlgIn 400ms var(--ease-out); }
@keyframes dlgIn { from { opacity: 0; transform: scale(0.98); } }
.plan-dialog__scroll { overflow: auto; cursor: grab; padding: 60px 24px 10px; direction: ltr; }
.plan-dialog__scroll.is-drag { cursor: grabbing; }
.plan-dialog__scroll img { width: 3126px; max-width: none; height: auto; background: #fff; border-radius: 10px; user-select: none; -webkit-user-drag: none; }
.plan-dialog__close { position: fixed; top: 18px; inset-inline-end: 18px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; }
.plan-dialog__close svg { width: 20px; height: 20px; }
.plan-dialog__hint { text-align: center; color: var(--fg-3); font-size: 14px; padding: 12px; margin: 0; }
@media (max-width: 720px) { .plan__zoom { inset-inline-start: 14px; bottom: 14px; font-size: 13px; padding: 7px 12px; } .plan-dialog__scroll img { width: 2000px; } .hx__info { border-radius: 18px; } }
/* =========================================================
   LOADER — "Molten Drop"
   ========================================================= */
.preloader { --r: 0px; --cx: 50%; --cy: 45%; position: fixed; inset: 0; z-index: var(--z-loader); overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse 60% 50% at 50% 46%, #15100a 0%, #070605 60%, #020202 100%);
  -webkit-mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--r), #000 calc(var(--r) + 1.5px));
  mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--r), #000 calc(var(--r) + 1.5px)); }
.pl__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pl__line { position: absolute; left: 0; right: 0; top: 60%; height: 1px; pointer-events: none; }
.pl__line i { display: block; height: 100%; transform: scaleX(0); background: linear-gradient(90deg, transparent, oklch(0.83 0.135 82 / 0.15) 15%, var(--gold-2) 50%, oklch(0.83 0.135 82 / 0.15) 85%, transparent); box-shadow: 0 0 18px oklch(0.83 0.135 82 / 0.7); }
.pl__drop { position: absolute; left: 0; top: 0; width: 22px; height: 28px; transform-origin: 50% 100%; filter: drop-shadow(0 0 14px oklch(0.85 0.14 80 / 0.9)); pointer-events: none; }
.pl__stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transform-origin: var(--cx) var(--cy); pointer-events: none; }
.pl__logo { position: relative; width: clamp(110px, 11vw, 150px); aspect-ratio: 327 / 443; filter: brightness(1) drop-shadow(0 0 22px rgba(242,179,61,.45)); }
.pl__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pl__logo .ghost { opacity: 0; filter: grayscale(1) brightness(1.6); }
.pl__logo .fill { clip-path: inset(100% 0 0 0); }
.pl__logo .pl__glint { filter: brightness(2.3) saturate(1.2); mix-blend-mode: screen; clip-path: polygon(-30% 0%, -14% 0%, -34% 100%, -50% 100%); }
.pl__wm { width: clamp(200px, 20vw, 280px); opacity: 0; clip-path: inset(0 100% 0 0); }
.pl__tag { opacity: 0; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--fg-2); letter-spacing: 0.02em; }
.pl__tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.pl__count { position: absolute; left: 50%; bottom: clamp(26px, 6vh, 56px); transform: translateX(-50%); opacity: 0; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.pl__count b { font-family: var(--f-num); font-weight: 900; font-size: 34px; line-height: 1; color: var(--gold); letter-spacing: 0.08em; font-feature-settings: "tnum"; direction: ltr; }
.pl__count span { font-size: 11px; letter-spacing: 0.4em; color: var(--fg-3); direction: ltr; }
/* sections hidden from the dashboard */
[data-hidden] { display: none !important; }
html.syr-edit [data-hidden] { display: block !important; opacity: 0.35; outline: 2px dashed #e2554a; outline-offset: -2px; }

/* =========================================================
   MOBILE POLISH (≤ 720px) — touch-first layer
   ========================================================= */
@media (max-width: 720px) {
  :root { --gutter: 18px; --header-h: 68px; }
  body { line-height: 1.85; }
  .sec { padding-block: 72px; }
  .sec-tight { padding-block: 52px; }
  .head-row { margin-bottom: 36px; gap: 18px; }
  .t-lead { font-size: 16.5px; line-height: 1.95; }
  .t-1 { font-size: clamp(30px, 8.6vw, 38px); }
  .t-2 { font-size: clamp(25px, 7vw, 32px); }
  .t-mega { font-size: clamp(36px, 10.5vw, 46px); }

  /* header: compact glass bar, 44px targets */
  .site-header { background: oklch(0.115 0.006 75 / 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
  .burger { width: 46px; height: 46px; }
  .menu__links { padding: calc(var(--header-h) + 24px) 24px 32px; justify-content: flex-start; }
  .menu__links a { font-size: 30px; line-height: 1.25; padding-block: 10px; border-bottom: 1px solid var(--rule); }
  .menu__foot { margin-top: 26px; }
  .menu__foot .btn { flex: 1; }

  /* touch targets */
  .link { min-height: 44px; padding-block: 8px; }
  .crumbs { font-size: 14px; } .crumbs a { padding-block: 10px; }
  .btn { --h: 52px; }
  .btn-sm { --h: 46px; }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { flex: 1 1 auto; }

  /* readable small labels */
  .cd span, .latin-label, .chain small, .mono__rank, .ticket__stub small, .calc__total .t-small, .routemap__legend { font-size: 12.5px; letter-spacing: 0.12em; }
  .footer-bottom .latin-label { font-size: 11.5px; letter-spacing: 0.08em; }

  /* hero strip countdown breathing room */
  .hx__strip .cd { gap: 22px; }

  /* chapters: text over a calm gradient, not over busy pixels */
  .chapters__shade { background: linear-gradient(0deg, oklch(0.08 0.005 75 / 0.97) 0%, oklch(0.08 0.005 75 / 0.88) 48%, oklch(0.08 0.005 75 / 0.25) 78%, transparent 100%) !important; }
  .chapters__ui { align-items: end; padding-bottom: 70px; }
  .chapters__texts { min-height: 420px; }
  .chapter-text { justify-content: flex-end; }
  .chapter-text h3 { font-size: clamp(30px, 8.6vw, 38px); margin: 10px 0 12px; }
  .chapter-text p { font-size: 15.5px; }

  /* facts sentence */
  .facts__sentence { font-size: 25px; line-height: 1.85; }
  .facts__sentence .big { font-size: 1.7em; }

  /* route map: larger labels, no overlapping legend */
  .routemap { aspect-ratio: 1; }
  .routemap .city text { font-size: 22px; }
  .routemap .hub text { font-size: 28px; }
  .routemap .sea { font-size: 20px; }
  .routemap__legend { display: none; }

  /* exhibitor ticket */
  .ticket__brand { font-size: 13px; letter-spacing: 0.14em; }
  .ticket h3 { font-size: 22px; margin: 16px 0 16px; }
  .ticket__grid { gap: 14px 16px; }
  .ticket__grid b { font-size: 24px; }

  /* sponsor columns: natural height so every perk is readable */
  .monoliths { grid-template-columns: 1fr 1fr; gap: 8px; height: auto !important; }
  .mono { height: auto !important; min-height: 0; padding: 16px 14px; gap: 18px; }
  .mono h3 { font-size: 17px; }
  .mono__perks { font-size: 13px; }
  .mono__tag { font-size: 14px; }
  .mono--main { grid-column: 1 / -1; }

  /* comparison tables: one tier at a time (switch with the tier pills) */
  .table { min-width: 0; table-layout: fixed; }
  .table-wrap { overflow: visible; }
  .table-sp th:not(:first-child):not(.is-hl), .table-sp td:not(:first-child):not(.is-hl) { display: none; }
  .table-sp th:first-child, .table-sp td:first-child { width: 62%; padding-inline-start: 14px; }
  .table th, .table td { padding: 14px 10px; font-size: 14px; }
  .table .is-hl { background: oklch(0.83 0.135 82 / 0.06) !important; }
  [data-hl-group] { width: 100%; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  [data-hl-group]::-webkit-scrollbar { display: none; }
  [data-hl-group] button { flex-shrink: 0; min-height: 40px; }
  [data-hl-group] button[data-col="0"] { display: none; }

  /* countdown XL */
  .cd--xl { gap: 14px; }
  .cd--xl > div { flex: 1; }
  .cd--xl b { font-size: clamp(40px, 12.5vw, 54px); }

  /* lists & rows */
  .row { padding: 22px 0; }
  .row__t { font-size: 22px; }
  .row__i { width: 46px; height: 46px; }
  .row__i svg { width: 22px; height: 22px; }
  .value { padding: 20px 0; }
  .audience li { font-size: 17px; padding: 18px 0; }
  .acc__btn { padding: 22px 0; font-size: 17px; min-height: 64px; }
  .phero { min-height: 74svh; padding-bottom: 46px; }
  .phero__title { font-size: clamp(36px, 10.5vw, 46px); }
  .phero__meta { gap: 18px 22px; }
  .phero__meta b { font-size: 22px; }
  .sector { padding-block: 44px; gap: 22px; }
  .plan__frame { padding: 8px; border-radius: 12px; }

  /* footer: two columns of links, 44px rows */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .footer-about, .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
  .footer-brand img { height: 96px; }
  .footer-col ul { gap: 0; }
  .footer-col li a { min-height: 44px; display: flex; align-items: center; }
  .footer-col .ltr { font-size: 15.5px; }
  .newsletter input { min-height: 44px; }
  .footer-word { font-size: 18vw; margin-top: 40px; }
  .footer-bottom { flex-direction: column; gap: 6px; align-items: flex-start; padding-bottom: 90px; }

  /* forms */
  .field input, .field select, .field textarea { font-size: 16px; }
  .seg label { min-height: 44px; display: inline-flex; align-items: center; }
  .office { padding-block: 26px; }
}
@media (max-width: 380px) {
  .monoliths { grid-template-columns: 1fr; }
  .hx__strip .cd { gap: 14px; }
  .cd b { font-size: 24px; }
}@media (max-width: 720px) { .routemap .sea { display: none; } .footer-bottom .latin-label { font-size: 12px !important; } .ticket__grid b small { font-size: 13px; } }
@media (max-width: 720px) { .routemap .city text { font-size: 19px; } }

/* country calling code beside phone fields */
.field.has-code input { padding-left: 108px; }
.tel-code { position: absolute; left: 0; bottom: 1px; height: 46px; width: 96px; display: flex; align-items: center; justify-content: center; gap: 8px; border-right: 1px solid var(--rule-2); color: var(--fg); transition: opacity 200ms; }
.tel-code b { font-family: var(--f-num); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.tel-code svg { width: 10px; height: 8px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.tel-code select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; border: 0; }
.tel-code select option { background: var(--ink-2); color: var(--fg); }
.tel-code:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.tel-code.is-off { opacity: 0.3; pointer-events: none; }
/* ============ RECAP VIDEO ============ */
.recap__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--rule); box-shadow: 0 40px 120px -40px oklch(0.78 0.14 80 / 0.28); cursor: pointer; isolation: isolate; }
.recap__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72) saturate(1.05); transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 600ms; }
.recap__player::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 30%, oklch(0.08 0.005 75 / 0.65) 100%), linear-gradient(0deg, oklch(0.08 0.005 75 / 0.55), transparent 40%); transition: opacity 400ms; }
.recap__player:hover .recap__poster { transform: scale(1.07); filter: brightness(0.82) saturate(1.1); }
.recap__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(72px, 8vw, 112px); aspect-ratio: 1; translate: -50% -50%; border: 0; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 0 oklch(0.82 0.14 80 / 0.55), 0 20px 60px -10px oklch(0.78 0.14 80 / 0.6); transition: scale 300ms cubic-bezier(.2,.7,.2,1); animation: recap-pulse 2.4s infinite; }
.recap__play svg { width: 38%; height: 38%; fill: currentColor; margin-inline-start: 8%; }
.recap__player:hover .recap__play { scale: 1.08; }
.recap__play:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; }
@keyframes recap-pulse { 0% { box-shadow: 0 0 0 0 oklch(0.82 0.14 80 / 0.5), 0 20px 60px -10px oklch(0.78 0.14 80 / 0.6); } 70% { box-shadow: 0 0 0 28px oklch(0.82 0.14 80 / 0), 0 20px 60px -10px oklch(0.78 0.14 80 / 0.6); } 100% { box-shadow: 0 0 0 0 oklch(0.82 0.14 80 / 0), 0 20px 60px -10px oklch(0.78 0.14 80 / 0.6); } }
.recap__player video, .recap__player iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.recap__player.is-playing { cursor: default; }
.recap__player.is-playing .recap__play, .recap__player.is-playing::after { opacity: 0; pointer-events: none; animation: none; }
.recap__empty { display: none; }
html.syr-edit .recap__player.is-empty .recap__empty { display: flex; position: absolute; inset: 14px; z-index: 2; align-items: flex-start; justify-content: center; padding-top: 7%; border: 2px dashed oklch(0.82 0.14 80 / 0.7); border-radius: 8px; color: var(--gold); font-weight: 700; font-size: 18px; pointer-events: none; }
.recap__meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; color: var(--fg-3); font-size: 14px; letter-spacing: 0.02em; }
.recap__meta span:first-child { color: var(--gold); font-weight: 600; }
@media (max-width: 720px) { .recap__player { border-radius: 8px; } .recap__meta { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .recap__play { animation: none; } .recap__poster { transition: none; } }

/* ============ CUSTOM CARD COLOR (dashboard) ============ */
.mono.has-color { --c1: color-mix(in oklch, var(--mc) 72%, white); --c2: color-mix(in oklch, var(--mc) 70%, black); color: var(--mtext, oklch(0.14 0.01 70)); }
.mono.has-color .mono__tag { border-top-color: color-mix(in srgb, var(--mtext, #000) 25%, transparent); }
.recap__soon { display: none; }
.recap__player.is-empty { cursor: default; }
.recap__player.is-empty .recap__play { display: none; }
.recap__player.is-empty .recap__soon { display: grid; place-items: center; position: absolute; inset: 0; z-index: 2; }
.recap__soon span { padding: 14px 28px; border-radius: 999px; background: oklch(0.12 0.006 75 / 0.62); border: 1px solid oklch(0.82 0.14 80 / 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--gold); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); box-shadow: 0 20px 60px -20px oklch(0.78 0.14 80 / 0.5); }
@media (max-width: 720px) { .recap__soon span { padding: 10px 20px; } }

/* ============ ARABIC-ONLY LABELS: no tracking / LTR on Arabic text ============ */
.latin-label, .brand__sub, .hero__kicker .latin-label, .hero__strip b, .hero__scroll, .hx__scroll, .hx__meta b, .chapter-text .num, .chapters__count,
.routemap__legend, .mono__rank, .ticket__brand, .ticket__stub small, .sector__n, .chain small, .table thead th small, .plan__legend b, .pl__count span,
.cd span, .footer-word, .strategic__item .n {
  letter-spacing: 0 !important; text-transform: none !important; direction: rtl; unicode-bidi: plaintext;
}
.mono__rank { text-align: right; font-size: 13px; opacity: 0.8; }
.brand__sub { font-size: 11px; }
.footer-word { font-family: var(--f-body); font-weight: 900; line-height: 1.15; color: oklch(0.82 0.14 80 / 0.07) !important; -webkit-text-stroke: 0 !important; margin-bottom: 10px; }
.strategic__item .n { font-family: var(--f-body); }
.phero__meta b, .facts-row b, .ticket__grid b, .menu__links a small { letter-spacing: 0 !important; }