/* ==========================================================================
   RED ANGEL — شركة الملاك الأصهب
   sections.css — per-section composition + ALL responsive behaviour
   Layer 3 of 3.  Depends on tokens.css and components.css.
   ========================================================================== */


/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: calc(var(--nav-h) + clamp(40px, 7vh, 90px)) clamp(30px, 6vh, 70px);
  overflow: hidden;
  isolation: isolate;
}

/* ---- background plate ---- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% center;
  filter: saturate(.85) brightness(.5);
  transform: scale(1.06);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 62% at 50% 44%, rgba(6, 12, 24, .38), rgba(4, 7, 13, .92) 76%),
    linear-gradient(to bottom, rgba(6, 12, 24, .9), rgba(6, 12, 24, .55) 38%, var(--navy-900) 97%);
}

/* ---- the great gold arc: the deck's most repeated device ---- */
.hero__ring {
  position: absolute;
  z-index: -1;
  inline-size: clamp(300px, 44vw, 640px);
  aspect-ratio: 1;
  inset-block-start: 50%;
  inset-inline-end: 50%;
  translate: 50% -54%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 9%,
    rgba(168, 128, 28, .55) 16%,
    rgba(240, 221, 160, .95) 25%,
    rgba(201, 162, 39, .5) 33%,
    transparent 44% 60%,
    rgba(107, 198, 245, .32) 70%,
    transparent 82%);
  /* a true ~1.4px annulus */
  -webkit-mask: radial-gradient(circle, transparent 0 68.6%, #000 69.4% 70.9%, transparent 71.7%);
  mask: radial-gradient(circle, transparent 0 68.6%, #000 69.4% 70.9%, transparent 71.7%);
  animation: ringSpin 52s linear infinite;
  pointer-events: none;
  opacity: .85;
}

.hero__ring-inner {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    transparent 0 14%,
    rgba(30, 144, 216, .5) 24%,
    rgba(155, 217, 250, .75) 30%,
    transparent 42% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 67.5%, #000 68.5% 70.2%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 67.5%, #000 68.5% 70.2%, transparent 71%);
  animation: ringSpin 68s linear infinite reverse;
  opacity: .55;
}

@keyframes ringSpin { to { rotate: 360deg; } }

/* ---- content stack ---- */
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.7vw, 22px);
  text-align: center;
  padding-inline: var(--gutter);
  max-inline-size: 900px;
  margin-block-end: clamp(30px, 5vh, 58px);
}

.hero__mark {
  inline-size: clamp(112px, 15vw, 188px);
  filter: drop-shadow(0 18px 44px rgba(30, 144, 216, .34)) drop-shadow(0 0 26px rgba(201, 162, 39, .2));
  animation: markFloat 7.5s var(--ease-io) infinite alternate;
}

@keyframes markFloat {
  from { transform: translateY(-8px); }
  to   { transform: translateY(8px); }
}

.hero__title { margin: 0; line-height: 1; }

.hero__latin {
  display: inline-block;
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.2rem + 6.4vw, 6.2rem);
  line-height: 1.05;
  letter-spacing: .16em;
  padding-inline-end: .16em;              /* absorb the trailing track */
  direction: ltr;
  unicode-bidi: isolate;
  perspective: 800px;
  color: var(--gold-200);
  background-image: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 22px rgba(201, 162, 39, .28));
}

/* A transformed inline-block descendant paints in its own layer, so an
   ancestor's `background-clip:text` no longer reaches it — the glyph keeps
   the transparent fill and renders as NOTHING. Every split span therefore
   carries its own gradient. */
.hero__latin .char {
  background-image: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The molten strike: one rake of light across the wordmark, once, on entrance. */
.hero__title {
  position: relative;
  isolation: isolate;
}

.hero__title::after {
  content: "";
  position: absolute;
  inset-block: -12%;
  inset-inline: -6%;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(255, 255, 255, .42) 50%,
    transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-140%);
  pointer-events: none;
}

.hero.is-ready .hero__title::after {
  animation: heroSheen 1.6s cubic-bezier(.5, 0, .2, 1) 1.15s both;
}

@keyframes heroSheen {
  0%   { opacity: 0; transform: translateX(-140%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(140%); }
}

.hero__name {
  font-size: clamp(1.35rem, .95rem + 2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ivory);
}

.hero__tag {
  font-size: clamp(.98rem, .9rem + .6vw, 1.32rem);
  font-weight: 400;
  line-height: 1.9;
  color: var(--muted);
  max-inline-size: 34ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: clamp(8px, 1.4vw, 18px);
}

/* ---- pillars ---- */
.hero__pillars {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* ---- scroll cue ---- */
.hero__scroll {
  position: absolute;
  inset-block-end: clamp(14px, 2.4vh, 26px);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 2;
  inline-size: 34px;
  block-size: 54px;
  display: grid;
  place-items: start center;
  padding-block-start: 6px;
}

.hero__scroll-line {
  inline-size: 1px;
  block-size: 42px;
  background: linear-gradient(to bottom, transparent, var(--gold-400), transparent);
  transform-origin: 50% 0;
  animation: scrollCue 2.4s var(--ease-io) infinite;
}

@keyframes scrollCue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  70%  { transform: scaleY(1) translateY(12px); opacity: .2; }
  100% { transform: scaleY(0) translateY(20px); opacity: 0; }
}

/* ---- entrance sequence (JS adds .is-ready once the preloader lifts) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__mark,
  .js .hero .ornament,
  .js .hero__cta,
  .js .hero__pillars .pillar,
  .js .hero__scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  }

  .js .hero__mark    { transform: translateY(0) scale(.82); transition-delay: .05s; }
  .js .hero .ornament { transition-delay: .55s; }
  .js .hero__cta     { transition-delay: .78s; }
  .js .hero__scroll  { transition-delay: 1.1s; }
  .js .hero__pillars .pillar { transition-delay: calc(.85s + var(--i, 0) * .1s); }

  .js .hero.is-ready .hero__mark {
    opacity: 1;
    transform: none;
    /* hand off to the idle float once the entrance lands */
    animation: markFloat 7.5s var(--ease-io) 1.1s infinite alternate;
  }
  .js .hero.is-ready .ornament,
  .js .hero.is-ready .hero__cta,
  .js .hero.is-ready .hero__pillars .pillar,
  .js .hero.is-ready .hero__scroll { opacity: 1; transform: none; }
}


/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.about__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: visible;
  transform-style: preserve-3d;
}

.about__media picture {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.92) brightness(.86);
  transform: scale(1.02);
  transition: transform 1.3s var(--ease-out), filter 1.3s var(--ease-out);
}

.about__media:hover img { transform: scale(1.07); filter: saturate(1.02) brightness(.95); }

/* the offset gold frame — drawn behind, toward the RTL start edge */
.about__frame {
  position: absolute;
  inset-block: -18px;
  inset-inline-start: -18px;
  inset-inline-end: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  pointer-events: none;
  transform: translateZ(-30px);
}

.about__glow {
  position: absolute;
  inset-block-start: -12%;
  inset-inline-end: -16%;
  inline-size: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .3), transparent 68%);
  filter: blur(52px);
  pointer-events: none;
  z-index: -1;
}

.about__body { display: flex; flex-direction: column; gap: 8px; }

.about__lead {
  font-size: clamp(1.06rem, .98rem + .6vw, 1.42rem);
  font-weight: 500;
  line-height: 1.95;
  color: var(--ivory);
}

.about__body > p:not(.about__lead) { color: var(--muted); }

.about__points {
  margin-block-start: clamp(16px, 2.4vw, 28px);
  padding-block-start: clamp(16px, 2.4vw, 26px);
  border-block-start: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px clamp(16px, 2.4vw, 30px);
}


/* ==========================================================================
   PARTNERSHIP — a full-bleed statement band
   ========================================================================== */
.partnership {
  position: relative;
  padding-block: clamp(84px, 12vw, 172px);
  overflow: hidden;
  isolation: isolate;
}

.partnership__bg { position: absolute; inset: 0; z-index: -1; }

.partnership__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 30% center;
  filter: saturate(.8) brightness(.42);
}

.partnership__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(6, 12, 24, .96) 8%, rgba(6, 12, 24, .58) 55%, rgba(6, 12, 24, .9)),
    linear-gradient(to bottom, var(--navy-900), transparent 22%, transparent 76%, var(--navy-900));
}

/* The block hugs the RTL start edge of the container. The width limit belongs
   on the children — putting it on the container itself would let its
   `margin-inline:auto` centre the whole block instead. */
.partnership__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 22px);
  text-align: start;
}

.partnership__inner > * { max-inline-size: min(100%, 780px); }
.partnership__inner .section-title { max-inline-size: min(100%, 16ch); }

.partnership__body {
  font-size: clamp(1.05rem, .95rem + .8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.9;
  color: var(--text);
  max-inline-size: 30ch;
}

.partnership__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(6, 12, 24, .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-weight: 700;
  font-size: clamp(.92rem, .88rem + .3vw, 1.06rem);
  color: var(--gold-200);
  box-shadow: var(--glow-gold);
}

.partnership__badge-icon svg {
  inline-size: 22px;
  block-size: 22px;
  fill: none;
  stroke: var(--gold-300);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { background: linear-gradient(to bottom, var(--navy-900), var(--ink) 50%, var(--navy-900)); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  perspective: 1200px;
}


/* ==========================================================================
   VISION
   ========================================================================== */
.vision__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px);
  perspective: 1300px;
}


/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background: linear-gradient(to bottom, var(--navy-900), var(--navy-800)); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact__media {
  position: relative;
  margin-block-start: clamp(10px, 2vw, 20px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.contact__media img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.9) brightness(.72);
}

.contact__media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 24, .8), transparent 60%);
}

.contact__form {
  padding: clamp(24px, 3.2vw, 42px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass-2);
  box-shadow: var(--shadow-lg), inset 0 0 80px rgba(11, 92, 158, .07);
}

.contact__form-title {
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
  color: var(--gold-200);
}

.contact__form-sub {
  margin-block: 6px 22px;
  font-size: .9rem;
  color: var(--muted);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  padding-block: clamp(50px, 7vw, 84px) clamp(28px, 4vw, 44px);
  background: var(--ink);
  border-block-start: 1px solid var(--line);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}

.footer__meta { grid-column: 1 / -1; padding-block-start: clamp(20px, 3vw, 34px); }


/* ==========================================================================
   ==========================================================================
   RESPONSIVE
   ==========================================================================
   ========================================================================== */

/* ------------------------------------------------------------- <= 1180px */
@media (max-width: 1180px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about__grid { gap: clamp(28px, 4vw, 48px); }
}

/* -------------------------------------------------------------- <= 900px */
@media (max-width: 900px) {
  :root { --nav-h: 68px; }

  /* nav collapses to the drawer */
  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__burger { display: grid; }

  .about__grid,
  .vision__grid,
  .contact__grid { grid-template-columns: minmax(0, 1fr); }

  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about__media { max-inline-size: 520px; margin-inline: auto; }
  .about__frame { inset-inline-end: 22px; }

  .hero__pillars { grid-template-columns: repeat(2, 1fr); gap: 4px; }

  /* the vertical separators only make sense in a single row */
  .pillar + .pillar::before { display: none; }
  .hero__pillars .pillar { border-block-start: 1px solid var(--line-soft); }

  .footer__inner { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .footer__brand img { margin-inline: auto; }
  .footer__nav { justify-content: center; }

  /* Pointer-driven affordances are meaningless here — fx.js also disables
     them at this width, this is the visual fallback. */
  .svc::before { display: none; }
  .svc, .vpanel, .about__media { transform: none !important; }
}

/* -------------------------------------------------------------- <= 760px */
@media (max-width: 760px) {
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .svc { max-inline-size: 560px; margin-inline: auto; inline-size: 100%; }
}

/* -------------------------------------------------------------- <= 640px */
@media (max-width: 640px) {
  :root { --section-y: clamp(56px, 12vw, 92px); }

  .hero { min-block-size: 100svh; padding-block-start: calc(var(--nav-h) + 34px); }
  .hero__inner { gap: 12px; }
  .hero__ring { inline-size: 108vw; opacity: .6; }

  .hero__pillars { grid-template-columns: minmax(0, 1fr); }
  .hero__pillars .pillar { flex-direction: row; text-align: start; gap: 14px; padding-block: 13px; }
  .pillar__icon { inline-size: 44px; block-size: 44px; flex-shrink: 0; }
  .pillar__icon svg { inline-size: 20px; block-size: 20px; }
  .pillar__text { max-inline-size: none; }

  /* keep only the first two pillars in view; the rest still read on scroll */
  .hero__scroll { display: none; }

  .about__points { grid-template-columns: minmax(0, 1fr); }

  .invdemo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cline { gap: 13px; }
  .cline__icon { inline-size: 42px; block-size: 42px; }

  .nav__brandtext { display: none; }
  .nav__logo { inline-size: 40px; }
}

/* -------------------------------------------------------------- <= 420px */
@media (max-width: 420px) {
  .hero__latin { letter-spacing: .1em; padding-inline-end: .1em; }
  .hero__cta { inline-size: 100%; flex-direction: column; }
  .hero__cta .btn { inline-size: 100%; }

  .invdemo__grid { grid-template-columns: minmax(0, 1fr); }

  .svc__num { font-size: 2.4rem; }
  .menu__panel { inline-size: 100vw; }
}

/* ----------------------------------- shorter desktop / laptop viewports ---
   On a ~900px-tall laptop the full hero stack would push the CTAs and the
   pillars below the fold. Tighten the rhythm so the whole statement lands
   in one screen. */
@media (min-width: 901px) and (max-height: 920px) {
  .hero { padding-block: calc(var(--nav-h) + 34px) 28px; }
  .hero__mark { inline-size: clamp(88px, 10vw, 128px); }
  .hero__inner { gap: clamp(8px, 1.1vw, 15px); margin-block-end: clamp(16px, 2.6vh, 32px); }
  .hero__latin { font-size: clamp(2.3rem, 1rem + 5.2vw, 4.6rem); }
  .hero__name { font-size: clamp(1.25rem, .9rem + 1.5vw, 1.9rem); }
  .hero__pillars .pillar { padding-block: 12px; gap: 9px; }
  .pillar__icon { inline-size: 44px; block-size: 44px; }
  .pillar__icon svg { inline-size: 21px; block-size: 21px; }
}

/* ------------------------------------------------- short landscape phones */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-block-size: auto; padding-block: calc(var(--nav-h) + 30px) 44px; }
  .hero__mark { inline-size: 84px; }
  .hero__latin { font-size: clamp(1.9rem, 5vw, 3rem); }
  .hero__pillars { grid-template-columns: repeat(4, 1fr); }
  .hero__scroll { display: none; }
  .hero__ring { inline-size: 70vh; }
}

/* --------------------------------------------------------- OVERFLOW AUDIT */
img, svg, video, canvas, picture { max-inline-size: 100%; }

/* Arabic wraps freely; long Latin tokens (the email) must break rather than
   push the layout wider than the viewport. */
.cline__value,
.menu__contact a,
.footer__meta p { overflow-wrap: anywhere; }

/* Nothing inside the flow may establish a width larger than its column. */
.services__grid > *,
.vision__grid > *,
.about__grid > *,
.contact__grid > * { min-inline-size: 0; }


/* --------------------------------------------------- SECTION REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  .hero__ring,
  .hero__ring-inner,
  .hero__mark,
  .hero__scroll-line { animation: none !important; }

  .hero__mark,
  .hero .ornament,
  .hero__cta,
  .hero__pillars .pillar,
  .hero__scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  .invdemo__tile { opacity: 1 !important; transform: none !important; }
  .chip { opacity: 1 !important; transform: none !important; }

  .svc__media img,
  .vpanel__media img,
  .about__media img { transform: none !important; }
}