:root { --ink:#14201C; --paper:#FAF8F4; --sage:#5F9285; --deep:#33574E; --olive:#A3A868; --peach:#F5D0A9; --line:#E3DED4; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { background: var(--paper); color: var(--ink); font-family: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif; overflow-x: hidden; }
  html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif; }
  .font-display { font-family: 'Outfit', 'IBM Plex Sans Arabic', system-ui, sans-serif; }
  .display-xl { font-weight: 200; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(2.6rem, 8.2vw, 7.4rem); }
  .display-l  { font-weight: 200; letter-spacing: -0.025em; line-height: 1.02; font-size: clamp(2rem, 5vw, 4.2rem); }
  .display-m  { font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(1.5rem, 3vw, 2.4rem); }
  .eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
  html[lang="ar"] .eyebrow { letter-spacing: 0; }
  html[lang="ar"] .display-xl, html[lang="ar"] .display-l, html[lang="ar"] .display-m { letter-spacing: 0; line-height: 1.25; }
  .rule { height: 1px; background: var(--line); }

  /* scroll reveal */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .drift, .pulse, .flow { animation: none !important; }
  }

  /* hero motion */
  @keyframes drift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-16px,0); } }
  @keyframes pulse { 0%,100% { opacity: .25; } 50% { opacity: .6; } }
  @keyframes flow  { to { stroke-dashoffset: -1000; } }
  .drift { animation: drift 9s ease-in-out infinite; }
  .drift-2 { animation: drift 12s ease-in-out infinite .8s; }
  .pulse { animation: pulse 6s ease-in-out infinite; }
  .flow  { stroke-dasharray: 6 10; animation: flow 26s linear infinite; }

  .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .45s cubic-bezier(.16,1,.3,1); }
  .link-underline:hover { background-size: 100% 1px; }
  html[dir="rtl"] .link-underline { background-position: 100% 100%; }

  .card { transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s, background-color .4s; }
  .card:hover { transform: translateY(-6px); border-color: var(--sage); background: #fff; }

  .lang-btn.active { background: var(--deep); color: #fff; }
  .nav-scrolled { background: rgba(250,248,244,.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }

  .marquee { display: flex; gap: 3rem; width: max-content; animation: marq 38s linear infinite; }
  @keyframes marq { to { transform: translateX(-50%); } }
  html[dir="rtl"] .marquee { animation-direction: reverse; }

  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }

  .nav-link { white-space: nowrap; }
  html[dir="rtl"] .arr { rotate: 180deg; }
  .ph { border: 1px dashed var(--olive); color: var(--olive); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; display: inline-block; }

  /* короткая колонка не оставляет дыру: едет вместе со скроллом */
  @media (min-width: 1024px) {
    .sticky-col { position: sticky; top: 7rem; align-self: flex-start; }
  }