/* ==========================================================================
   Forsa — reset, typography, layout shell, header/footer, hero.
   ========================================================================== */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  button { background: none; border: 0; cursor: pointer; }

  a { color: inherit; text-decoration: none; }

  ul, ol { padding-inline-start: 1.15em; }

  :target { scroll-margin-block-start: calc(var(--header-h) + 1rem); }

  ::selection { background: var(--brand-soft); color: var(--text); }

  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }
}

@layer base {
  /* @font-face declarations live in fonts.css (self-hosted, unicode-range
     subsetted) and are loaded before this file. */

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: 400;
    letter-spacing: 0; /* never letter-space connected Arabic script */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }

  /* Signature device 1: paper grain. One fixed layer, zero per-card cost. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: var(--grain-blend, multiply);
  }

  :root[data-theme="dark"] body::before,
  html:not([data-theme="light"]) body::before { --grain-blend: screen; }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body::before { --grain-blend: multiply; }
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-wrap: balance;
    letter-spacing: 0;
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }
  h4 { font-size: var(--text-md); }

  p { text-wrap: pretty; }

  strong, b { font-weight: 600; }

  time, .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

  hr {
    border: 0;
    border-block-start: 1px solid var(--border);
    margin-block: var(--space-5);
  }
}

@layer layout {
  .shell {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    width: 100%;
  }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .container--narrow { max-width: var(--container-narrow); }

  .section { padding-block: var(--space-section); }
  .section--tight { padding-block: clamp(1.15rem, 0.9rem + 1.4vw, 2rem); }

  .section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
    flex-wrap: wrap;
  }

  .section__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--text-lg);
    margin: 0;
  }

  .section__title .ico { color: var(--brand); flex: none; }

  .section__sub {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-block-start: 0.15rem;
  }

  .section__link {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.1rem;
    transition: gap var(--dur-fast) var(--ease-out);
  }

  .section__link:hover { gap: 0.55rem; }

  /* Compact auto-fit grid: 1 column on phones, never a giant card. */
  .grid-cards {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  }

  .grid-2 {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .stack > * + * { margin-block-start: var(--space-3); }
  .stack-lg > * + * { margin-block-start: var(--space-5); }

  .row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .spacer { flex: 1 1 auto; }
}

@layer layout {
  /* ---------------------------------------------------------------- header */
  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    border-block-end: 1px solid var(--border);
    transition: box-shadow var(--dur-mid) var(--ease-out);
  }

  /* The blur lives on a pseudo-element, NOT on .header itself. `backdrop-filter`
     on an ancestor makes it the containing block for `position: fixed`
     descendants — which anchored the mobile nav sheet to this 3.5rem bar
     instead of the viewport and threw it off-screen. */
  .header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
  }

  .header.is-stuck { box-shadow: var(--shadow-sm); }

  /* .header is a stacking context (sticky + z-index), so the drawer nested
     inside it cannot paint above anything in the root context no matter how
     high its own z-index goes — its 60 is resolved *within* the header's 40.
     The backdrop sits at 59 in the root, so it covered the drawer and swallowed
     every tap. While the drawer is open the whole header is lifted above the
     backdrop, taking the drawer with it. */
  .nav-open .header { z-index: calc(var(--z-sheet) + 1); }

  .header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--header-h);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-md);
    flex: none;
  }

  .brand__mark {
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--brand), color-mix(in oklab, var(--brand) 55%, var(--gold)));
    color: var(--on-brand);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    box-shadow: var(--shadow-xs);
  }

  .brand__mark img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }

  .brand__name { line-height: 1.1; }
  .brand__tag {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: 400;
    color: var(--text-muted);
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-inline-start: auto;
  }

  .nav__link {
    padding: 0.42rem 0.7rem;
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-soft);
    position: relative;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }

  .nav__link:hover { color: var(--text); background: var(--surface-2); }

  .nav__link[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }

  .header__actions { display: flex; align-items: center; gap: 0.3rem; margin-inline-start: auto; }
  .nav + .header__actions { margin-inline-start: 0; }

  .icon-btn {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    color: var(--text-soft);
    border: 1px solid transparent;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast),
                transform var(--dur-fast) var(--ease-spring);
  }

  .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
  .icon-btn:active { transform: scale(0.93); }

  /* A finger is not a mouse pointer. On touch, every small control grows to a
     44px target — the icon keeps its size, only the hit area expands. */
  @media (pointer: coarse) {
    .icon-btn,
    .pager__link,
    .social-btn {
      min-inline-size: var(--tap);
      min-block-size: var(--tap);
    }

    .ad-slot__close { inline-size: 1.9rem; block-size: 1.9rem; }

    .table__actions { gap: 0.4rem; }
  }

  /* Mobile nav sheet */
  .nav-toggle { display: none; }

  /* Drawer chrome: invisible until the nav becomes a sheet on small screens. */
  .nav__head { display: none; }
  .nav__icon { display: none; }

  @media (max-width: 47.99rem) {
    /* .nav is out of flow once it becomes a drawer, so it can no longer push the
       actions to the far edge. Without this they bunch up next to the brand and
       the menu button ends up stranded in the middle of the bar. */
    .nav + .header__actions { margin-inline-start: auto; }

    .js .nav-toggle { display: grid; }

    /* No JS: the links stay in the bar as a plain wrapping row, still usable. */
    .nav { flex-wrap: wrap; justify-content: flex-end; }

    /* A side drawer, anchored to the inline-start edge — the right in Arabic,
       where the thumb already rests. It reads as a place you went to, rather
       than a tray that slid out from nowhere. */
    .js .nav {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      inline-size: min(20rem, 86vw);
      z-index: var(--z-sheet);
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0.15rem;
      padding: 0 0.6rem calc(var(--space-4) + env(safe-area-inset-bottom));
      background: var(--surface);
      border-inline-end: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      translate: calc(-100% * var(--flip)) 0;
      transform: none;
      visibility: hidden;
      transition: translate var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .js .nav.is-open { translate: 0 0; visibility: visible; }

    .js .nav__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      /* Sticks while the list scrolls, so the close button never scrolls away. */
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
      margin-inline: -0.6rem;
      padding: 0.55rem 0.85rem 0.55rem 0.5rem;
      margin-block-end: 0.5rem;
      background: var(--surface);
      border-block-end: 1px solid var(--border);
      min-block-size: var(--header-h);
    }

    .nav__head-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--text-md);
    }

    .nav__link {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.6rem 0.7rem;
      font-size: var(--text-base);
      min-block-size: var(--tap);
      border-radius: var(--r-sm);
      position: relative;
    }

    .js .nav__icon {
      display: grid;
      place-items: center;
      inline-size: 2.1rem;
      block-size: 2.1rem;
      flex: none;
      border-radius: var(--r-sm);
      background: var(--surface-2);
      color: var(--text-muted);
      transition: background var(--dur-fast), color var(--dur-fast);
    }

    .nav__link[aria-current="page"] .nav__icon {
      background: var(--brand);
      color: var(--on-brand);
    }

    /* Accent rule on the leading edge, matching the dashboard's active state. */
    .nav__link[aria-current="page"]::before {
      content: "";
      position: absolute;
      inset-inline-start: -0.6rem;
      inset-block: 25%;
      inline-size: 3px;
      border-radius: var(--r-pill);
      background: var(--brand);
    }

    .nav-backdrop {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-sheet) - 1);
      background: oklch(15% 0.02 var(--hue-brand) / 0.5);
      backdrop-filter: blur(3px);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--dur-mid), visibility var(--dur-mid);
    }

    .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  }

  /* ------------------------------------------------------------------ hero */
  .hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(1.5rem, 1rem + 3vw, 3.25rem) clamp(1.25rem, 0.9rem + 2vw, 2.5rem);
    border-block-end: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-2), var(--bg) 78%);
  }

  /* Signature device 2: gradient mesh, capped low so text always wins. */
  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(56px);
    opacity: var(--mesh-opacity);
  }

  .hero::before {
    inline-size: 34rem;
    block-size: 22rem;
    inset-block-start: -9rem;
    inset-inline-end: -7rem;
    background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
  }

  .hero::after {
    inline-size: 26rem;
    block-size: 18rem;
    inset-block-end: -10rem;
    inset-inline-start: -6rem;
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  }

  .hero__inner { position: relative; z-index: 1; }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--text-soft);
    box-shadow: var(--shadow-xs);
  }

  .hero__eyebrow .dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--open);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--open) 25%, transparent);
    animation: pulse-dot 2.4s var(--ease-in-out) infinite;
  }

  .hero__title {
    font-size: var(--text-3xl);
    margin-block: var(--space-3) var(--space-2);
    max-width: 22ch;
  }

  .hero__title em {
    font-style: normal;
    color: var(--brand);
    position: relative;
    white-space: nowrap;
  }

  /* Hand-drawn underline: the "opportunity" word is the page's focal point. */
  .hero__title em::after {
    content: "";
    position: absolute;
    inset-inline: -0.1em;
    inset-block-end: -0.06em;
    block-size: 0.42em;
    background: color-mix(in oklab, var(--gold) 42%, transparent);
    border-radius: var(--r-pill);
    z-index: -1;
    transform-origin: right center;
    animation: swipe-in var(--dur-slow) var(--ease-out) 250ms both;
  }

  .hero__lede {
    color: var(--text-soft);
    font-size: var(--text-md);
    max-width: 46ch;
    margin-block-end: var(--space-4);
  }

  .hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-block-start: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .hero__stat b {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
  }

  /* ---------------------------------------------------------------- footer */
  .footer {
    position: relative;
    z-index: 1;
    margin-block-start: var(--space-6);
    padding-block: var(--space-6) calc(var(--space-5) + env(safe-area-inset-bottom));
    background: var(--bg-sunk);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-sm);
  }

  .footer__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }

  .footer__title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-block-end: var(--space-2);
    color: var(--text);
  }

  .footer__list { list-style: none; padding: 0; display: grid; gap: 0.4rem; }

  .footer__list a {
    color: var(--text-muted);
    transition: color var(--dur-fast);
    display: inline-block;
    padding-block: 0.1rem;
  }

  .footer__list a:hover { color: var(--brand); }

  .footer__bottom {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: var(--text-xs);
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    inset-block-start: -3rem;
    inset-inline-start: 1rem;
    z-index: 100;
    padding: 0.5rem 0.9rem;
    background: var(--brand);
    color: var(--on-brand);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    transition: inset-block-start var(--dur-fast);
  }

  .skip-link:focus { inset-block-start: 0; }

  /* Freezes the page behind an open sheet or drawer instead of letting it
     scroll away underneath. Shared by the public site and the dashboard. */
  body.is-locked { overflow: hidden; }

  .muted { color: var(--text-muted); }
  .soft { color: var(--text-soft); }
  .center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .hide { display: none !important; }

  .clamp-1, .clamp-2, .clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
  .clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
  .clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

  @media (min-width: 48rem) { .mobile-only { display: none !important; } }
  @media (max-width: 47.99rem) { .desktop-only { display: none !important; } }
}

@layer base {
  @keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--open) 45%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--open) 0%, transparent); }
  }

  @keyframes swipe-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(0.6rem); }
    to { opacity: 1; transform: none; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Page-load orchestration: one calm sequence, not scattered effects. */
  .reveal { animation: rise-in var(--dur-slow) var(--ease-out) both; }
  .reveal-1 { animation-delay: 60ms; }
  .reveal-2 { animation-delay: 130ms; }
  .reveal-3 { animation-delay: 200ms; }
  .reveal-4 { animation-delay: 270ms; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
    .hero__title em::after { animation: none; transform: none; }
    .hero__eyebrow .dot { animation: none; }
  }
}