/* ================================================================
   PULSE — style.css
   Layers: Reset → Tokens → Hero Contract (verbatim) → Glass Card
           → Section scaffold → Nav → Rail → Features → Social Proof
           → Pricing → CTA Strip → Scroll Animation → Responsive
   ================================================================ */


/* ── LAYER 1: Reset + Root Tokens ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #0a0a0a;
  color: #e8e8e8;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  line-height: 1.55;
}

:root {
  /* Brand */
  --brand-primary:   #0a0a0a;
  --brand-secondary: #e8e8e8;
  --brand-accent:    #c8ff00;

  /* Hero contract token overrides */
  --hero-display:  "Inter Tight", "Space Grotesk", system-ui, sans-serif;
  --hero-accent-a: #c8ff00;
  --hero-accent-b: #7c6fff;
  --hero-muted:    #a0a0b8;

  /* Glassmorphism engine (verbatim from context) */
  --glass-blur:         18px;
  --glass-opacity:      0.93;
  --glass-bg-opacity:   0.0;
  --glass-radius:       20.0px;
  --glass-border-width: 0.07;
  --glass-brightness:   50.0%;
  --glass-saturation:   1.0;
  --glass-displace:     0.0;

  /* Composition engine tokens (verbatim from context) */
  --font-display:        "Inter Tight", "Space Grotesk", system-ui, sans-serif;
  --font-body:           "Inter", "Space Grotesk", system-ui, sans-serif;
  --font-mono:           "JetBrains Mono", ui-monospace, monospace;
  --font-display-weight: 900;
  --font-body-weight:    400;
  --font-mono-weight:    500;

  --fs-label: clamp(11.53px, 10.25px + 0.399vw, 16.00px);
  --fs-body:  clamp(16.00px, 14.23px + 0.554vw, 22.20px);
  --fs-h3:    clamp(30.81px, 27.40px + 1.067vw, 42.76px);
  --fs-h2:    clamp(42.76px, 38.02px + 1.480vw, 59.34px);
  --fs-h1:    clamp(59.34px, min(52.76px + 2.054vw, 18.0vw), 82.34px);

  --tracking-label: 0.166em;

  --space-3: 13.5px;
  --space-4: 20.25px;
  --space-5: 30.38px;
  --space-6: 45.56px;
  --space-7: 68.34px;
  --space-8: 102.52px;

  --section-pad: clamp(4rem, 8vw, 7rem);
}


/* ── LAYER 2: Hero Contract CSS (verbatim — do not modify) ── */

/* HERO COMPOSITION CONTRACT v1
   مُستخرَج من Pattern-A فقط: nexora-smarter-automation · auralis-vision · sublime-section-craft
   الضمان: الـ hero كامل فوق الطية. لا scroll إجباري. صفر React/Tailwind/framer/shadcn.

   Extracted from the user's own 3 above-the-fold-correct hero templates.
   This is a STRUCTURAL contract — keep .hero-shell / .hero-region intact;
   that structure is what guarantees the hero fits in the viewport. */

/* 1 — LOCKED VIEWPORT SHELL */
.hero-shell{
  height:100vh; height:100dvh; max-height:100dvh;
  display:flex; flex-direction:column; overflow:hidden;   /* العقد: الفائض يتقص */
  position:relative;
  background:var(--hero-bg,#0a0a0a); color:var(--hero-fg,#fff);
}
.hero-shell>.hero-nav,
.hero-shell>.hero-rail{ flex-shrink:0; position:relative; z-index:10; }

/* 2 — HERO REGION: يملأ الباقي، المحتوى متمركز */
.hero-region{
  flex:1 1 auto;
  min-height:0;               /* حرج — يسمح بالانكماش فلا يدفع الطول خارج الـ viewport */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(1rem,3vw,3rem);
  position:relative; z-index:10;
}

/* 3 — BACKGROUND (video/image/gradient) — مقصوص */
.hero-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; }
.hero-bg--overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,transparent 0%,
            rgba(0,0,0,.35) 55%,rgba(0,0,0,.7) 100%); }

/* 4 — CONTENT STACK */
.hero-badge{ display:inline-flex; align-items:center; gap:.5rem;
  margin-bottom:1.5rem; padding:.4rem 1rem; border-radius:9999px;
  border:.8px solid rgba(255,255,255,.18);
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.28em;
  color:var(--hero-muted,#c9c9e8); backdrop-filter:blur(4px); }

.hero-headline{ margin:0;
  font-family:var(--hero-display,inherit);   /* العقد ما يفرضش خط — ييجي من الـ brief */
  font-weight:600;
  font-size:clamp(2.65rem,8.5vw,6rem);   /* ثابت الـ 3 تمبليتات */
  line-height:1.0;                        /* 0.95–1.05 */
  letter-spacing:-0.025em;                /* tight — الـ 3 كلهم */
  max-width:14ch; text-wrap:balance; }
.hero-headline em,.hero-headline .accent{ font-style:italic;
  background:linear-gradient(to right,var(--hero-accent-a,#8C7BFF),var(--hero-accent-b,#B6F09C));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; }

.hero-sub{ margin:1.5rem 0 0;
  font-family:var(--hero-body,Inter,system-ui,sans-serif);
  font-size:1rem; line-height:1.6; max-width:40rem;
  color:var(--hero-muted,#c9c9e8); text-wrap:pretty; }

.hero-cta{ margin-top:2rem; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:.75rem; }
.hero-btn{ display:inline-flex; align-items:center; gap:.5rem;
  border-radius:9999px; padding:.875rem 1.75rem;
  font-size:.875rem; font-weight:600; cursor:pointer; border:0;
  transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease; }
.hero-btn--primary{ background:var(--hero-fg,#fff); color:var(--hero-bg,#0a0a0a); }
.hero-btn--primary:hover{ transform:scale(1.03); }
.hero-btn--ghost{ background:transparent; color:var(--hero-fg,#fff);
  border:.8px solid rgba(255,255,255,.22); }
.hero-btn--ghost:hover{ opacity:.8; }

/* 5 — ENTRANCE (framer-motion fadeUp → CSS, نفس الـ delays الأصلية) */
@keyframes hero-fade-up{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.hero-region>*{ animation:hero-fade-up .6s ease-out both; }
.hero-region>*:nth-child(1){ animation-delay:0s }
.hero-region>*:nth-child(2){ animation-delay:.1s }
.hero-region>*:nth-child(3){ animation-delay:.2s }
.hero-region>*:nth-child(4){ animation-delay:.3s }
.hero-region>*:nth-child(5){ animation-delay:.5s }
@media (prefers-reduced-motion:reduce){ .hero-region>*{ animation:none } }

/* Brand override — gradient replaces flat #0a0a0a */
.hero-shell {
  background: linear-gradient(160deg, #0d0d1f 0%, #0a0a0a 45%, #0d1a0a 100%);
}


/* ── LAYER 3: Glass Card (shared component) ── */

.glass-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--glass-radius);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-6);
  transition: border-color .2s ease, transform .2s ease;
}
.glass-card:hover {
  border-color: rgba(200,255,0,0.25);
  transform: translateY(-3px);
}


/* ── LAYER 4: Section scaffold (shared) ── */

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad) var(--space-5);
}

.section-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: var(--space-4);
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-h1);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: var(--space-7);
  color: #fff;
}


/* ── LAYER 5: Nav ── */

.hero-nav .nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  color: #fff;
}

.nav-links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
}

.nav-links a {
  color: var(--hero-muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: color .15s;
}

.nav-links a:hover { color: #fff; }

.nav-links li:last-child a {
  color: var(--brand-accent);
  font-weight: 600;
}


/* ── LAYER 6: Rail ── */

.hero-rail .rail-inner {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex-wrap: wrap;
}

.rail-stat {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--hero-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}


/* ── LAYER 7: Features ── */

.features-section { background: #0a0a0a; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feature-num {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-weight);
  font-size: var(--fs-h3);
  color: var(--brand-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

.feature-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1rem, 18px);
  line-height: 1.65;
  color: var(--hero-muted);
  margin: 0;
}


/* ── LAYER 8: Social Proof ── */

.social-section { background: #080808; }

.stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-accent);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--hero-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}

.testimonial-quote {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--brand-secondary);
  font-style: italic;
  margin-bottom: var(--space-4);
}

.testimonial-author {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--hero-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}


/* ── LAYER 9: Pricing ── */

.pricing-section { background: #0a0a0a; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pricing-card--featured {
  border-color: rgba(200,255,0,0.5);
  box-shadow: 0 0 40px rgba(200,255,0,0.07);
}

.pricing-badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .875rem;
  border-radius: 9999px;
  background: rgba(200,255,0,0.12);
  border: 1px solid rgba(200,255,0,0.35);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  align-self: flex-start;
}

.pricing-tier {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--hero-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.pricing-price {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
}

.pricing-price span {
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--hero-muted);
  letter-spacing: 0;
  margin-left: .25rem;
}

.pricing-desc {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--hero-muted);
  line-height: 1.5;
}

.pricing-divider {
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.pricing-features li {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--brand-secondary);
  display: flex;
  align-items: center;
  gap: .625rem;
}

.pricing-features li::before {
  content: "✓";
  color: var(--brand-accent);
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}

.pricing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: .875rem 1.75rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #fff;
  transition: border-color .18s ease, background .18s ease;
  text-decoration: none;
  margin-top: auto;
}

.pricing-btn:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
}

.pricing-btn--featured {
  background: var(--brand-accent);
  color: #0a0a0a;
  border-color: var(--brand-accent);
  font-weight: 700;
}

.pricing-btn--featured:hover {
  background: #d9ff1a;
  border-color: #d9ff1a;
}


/* ── LAYER 10: CTA Strip ── */

.cta-strip {
  background: #080808;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

.cta-strip .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.cta-strip-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--brand-accent);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.cta-strip-headline {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--fs-h1);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
}

.cta-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  padding: 1rem 2.25rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  background: var(--brand-accent);
  color: #0a0a0a;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  letter-spacing: -0.01em;
}

.cta-strip-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 36px rgba(200,255,0,0.28);
}


/* ── LAYER 11: Scroll Reveal ── */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-reveal].visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ── LAYER 12: Responsive ── */

@media (max-width: 768px) {
  .nav-links { display: none; }
  .stats-row { gap: var(--space-6); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .section-title { font-size: var(--fs-h2); }
  .cta-strip-headline { font-size: var(--fs-h2); }
}

@media (max-width: 480px) {
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-btn { width: 100%; justify-content: center; }
  .stats-row { flex-direction: column; align-items: center; gap: var(--space-5); }
}