/* Bayan — Signature (Light Premium) UI
   - Cairo for Arabic, Inter for English
   - Subtle luxury: navy + ivory + gold accents
   - Consistent AR/EN layouts (RTL/LTR handled via html[dir])
*/

:root{
  --navy-950:#050B18;
  --navy-900:#061226;
  --navy-850:#081935;
  --navy-800:#0b2d5b;    /* brand */
  --navy-700:#143f7c;

  --ivory:#F6F8FF;
  --ice:#EEF3FF;
  --surface:#FFFFFF;
  --surface-2:rgba(255,255,255,.74);

  --text:#0A1220;
  --muted:#445063;
  --muted-2:#6A768A;

  --gold-1:#fff6cc;
  --gold-2:#f6d36a;
  --gold-3:#d7b65a;

  --shadow: 0 18px 45px rgba(6, 18, 38, .12);
  --shadow-2: 0 28px 80px rgba(6, 18, 38, .18);

  --ring: 0 0 0 .35rem rgba(20, 63, 124, .16);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(20,63,124,.18), rgba(0,0,0,0) 60%),
    radial-gradient(1100px 700px at 92% 0%, rgba(215,182,90,.16), rgba(0,0,0,0) 56%),
    linear-gradient(180deg, var(--ivory), var(--ice) 35%, var(--ivory));
  color: var(--text);
  overflow-x:hidden;
}

html[lang="en"] body{
  font-family:"Inter","Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Global helpers */
a{ color: inherit; }
::selection{ background: rgba(215,182,90,.38); }

.container-narrow{ max-width: 1180px; }

.section{
  padding: clamp(38px, 3.8vw, 74px) 0;
}

.section--tight{ padding: clamp(26px, 2.6vw, 52px) 0; }

.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-title h2{
  margin:0;
  font-weight: 900;
  letter-spacing:.2px;
  font-size: clamp(20px, 1.6vw + 14px, 30px);
}

.section-title p{
  margin:0;
  color: var(--muted-2);
  font-weight: 700;
  font-size: 13px;
}

/* ---------------------------------
   Header / Navbar (equal-size tabs)
---------------------------------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(6,18,38,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.site-header .navbar{
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
}

.brand-logo{
  width: clamp(44px, 2.6vw + 32px, 68px);
  height: clamp(44px, 2.6vw + 32px, 68px);
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-name{
  color: #fff;
  font-weight: 950;
  font-size: clamp(16px, 1.1vw + 14px, 24px);
  letter-spacing:.2px;
}

.brand-tagline{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  margin-top: 2px;
}

/* A glass capsule that holds equal-width tabs */
.nav-capsule{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
}

/* Equal widths: grid columns */
.nav-eq{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}

.nav-eq .nav-link{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  transition: transform .16s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nav-eq .nav-link::after{
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  inset-inline-start: -120%;
  width: 65%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(215,182,90,0), rgba(255,223,138,.60), rgba(215,182,90,0));
  opacity:0;
  pointer-events:none;
}

.nav-eq .nav-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 0 0 6px rgba(215,182,90,.10);
}

.nav-eq .nav-link:hover::after{
  opacity:1;
  animation: goldSweep 950ms ease-out both;
}

.nav-eq .nav-link.active{
  background: linear-gradient(135deg, rgba(11,45,91,.95), rgba(20,63,124,.95));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 6px rgba(20,63,124,.16);
}

.lang-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
  color: rgba(255,255,255,.95);

  background: linear-gradient(135deg, rgba(255,246,204,.18), rgba(246,211,106,.10));
  border: 1px solid rgba(255,223,138,.30);
  box-shadow: 0 0 0 6px rgba(215,182,90,.10);
  transition: transform .16s ease, filter .18s ease, box-shadow .18s ease;
}

.lang-toggle:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 0 0 6px rgba(215,182,90,.16), 0 18px 55px rgba(0,0,0,.22);
}

/* Mobile nav */
@media (max-width: 991.98px){
  .nav-capsule{ border-radius: 22px; }
  .nav-eq{
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
  }
  .nav-eq .nav-link{ justify-content: flex-start; padding-inline-start: 16px; }
}

/* ---------------------------------
   Hero
---------------------------------- */

.hero{
  position: relative;
  padding: clamp(54px, 4.2vw, 92px) 0 clamp(34px, 3.3vw, 66px);
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(1100px 600px at 20% 0%, rgba(20,63,124,.36), rgba(0,0,0,0) 60%),
    radial-gradient(1000px 600px at 85% 10%, rgba(215,182,90,.24), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-850));
  z-index: -2;
}

.hero::after{
  /* subtle noise overlay */
  content:"";
  position:absolute;
  inset:-20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  opacity: .35;
  mix-blend-mode: overlay;
  z-index: -1;
}

.hero h1{
  color: #fff;
  margin: 14px 0 10px;
  font-weight: 950;
  letter-spacing:.2px;
  font-size: clamp(30px, 2.8vw + 16px, 58px);
}

.hero p{
  color: rgba(255,255,255,.78);
  font-weight: 700;
  line-height: 1.95;
  font-size: 16px;
  margin: 0;
  max-width: 62ch;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}

.kicker .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3));
  box-shadow: 0 0 18px rgba(215,182,90,.55);
}

.gold-text{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 14px rgba(215,182,90,.28);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}

.btn-hero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .16s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

.btn-hero.primary{
  background: linear-gradient(135deg, rgba(255,246,204,.18), rgba(246,211,106,.10));
  border-color: rgba(255,223,138,.30);
  color: rgba(255,255,255,.98);
  box-shadow: 0 0 0 6px rgba(215,182,90,.10);
}

.btn-hero.primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 0 0 6px rgba(215,182,90,.16), 0 22px 70px rgba(0,0,0,.28);
}

.btn-hero.secondary{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}

.btn-hero.secondary:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.26);
}

/* Hero “spotlight” stats */
.stats-row{
  margin-top: clamp(18px, 2.2vw, 30px);
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 991.98px){
  .stats-row{ grid-template-columns: 1fr; }
}

.stat{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 14px 16px;
}

.stat .n{
  font-weight: 950;
  color: #fff;
  font-size: 22px;
}

.stat .t{
  color: rgba(255,255,255,.76);
  font-weight: 800;
  margin-top: 2px;
}

/* ---------------------------------
   Cards / Surfaces
---------------------------------- */

.surface{
  background: var(--surface);
  border: 1px solid rgba(11,45,91,.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.surface.soft{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.surface .pad{
  padding: 18px 18px 16px;
}

/* ---------------------------------
   Service cards (each shines differently)
---------------------------------- */

.service-card{
  --accent: var(--navy-800);
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,45,91,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: var(--shadow);
  overflow:hidden;
  height: 100%;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}

.service-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 240px at 20% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%),
    radial-gradient(520px 220px at 100% 0%, rgba(215,182,90,.18), transparent 58%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.service-card::after{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: translateX(-120%) skewX(-18deg);
  opacity: 0;
  pointer-events:none;
}

.service-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 32%, rgba(11,45,91,.10));
  box-shadow: var(--shadow-2);
}

.service-card:hover::before{ opacity:1; }
.service-card:hover::after{ opacity:.55; animation: sheen 980ms ease-out both; }

@keyframes sheen{
  0%{ transform: translateX(-120%) skewX(-18deg); }
  100%{ transform: translateX(140%) skewX(-18deg); }
}

.service-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.service-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(11,45,91,.10));
  box-shadow: 0 12px 26px rgba(6, 18, 38, .10);
}

.service-icon svg{ width: 22px; height: 22px; }

.service-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: color-mix(in srgb, var(--accent) 72%, #0A1220);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, rgba(11,45,91,.10));
  white-space: nowrap;
}

.service-body{
  padding: 14px 18px 16px;
}

.service-title{
  margin: 10px 0 8px;
  font-weight: 950;
  font-size: 20px;
  letter-spacing:.2px;
}

.service-text{
  margin:0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.9;
}

.service-list{
  margin: 12px 0 0;
  padding: 0;
}

.service-list li{
  list-style:none;
  padding: 10px 0;
  border-top: 1px solid rgba(11,45,91,.08);
  color: rgba(10,18,32,.82);
  font-weight: 800;
}

.service-list li:first-child{ border-top: 0; }

.service-list li::before{
  content:"•";
  display:inline-block;
  margin-inline-end: 10px;
  color: color-mix(in srgb, var(--accent) 70%, var(--gold-3));
  font-weight: 950;
}

/* Service footer CTA */
.service-footer{
  padding: 0 18px 18px;
}

.btn-service{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  height: 46px;
  border-radius: 16px;
  font-weight: 950;
  text-decoration:none;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #000), color-mix(in srgb, var(--accent) 76%, #000));
  border: 1px solid rgba(11,45,91,.10);
  transition: transform .16s ease, filter .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}

.btn-service::after{
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  inset-inline-start:-120%;
  width: 65%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(215,182,90,0), rgba(255,223,138,.55), rgba(215,182,90,0));
  opacity:0;
  pointer-events:none;
}

.btn-service:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 0 0 6px rgba(215,182,90,.14);
}

.btn-service:hover::after{ opacity:1; animation: goldSweep 950ms ease-out both; }

/* ---------------------------------
   Timeline (hover to reveal details)
---------------------------------- */

.timeline-shell{
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border: 1px solid rgba(11,45,91,.10);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
}

.timeline-track{
  position: relative;
  margin-top: 18px;
  padding: 18px 6px 6px;
}

.timeline-track::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, rgba(11,45,91,.18), rgba(11,45,91,.06));
}

.t-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 992px){
  .t-grid{ grid-template-columns: 1fr; }
  .timeline-track::before{ left: 26px; right:auto; width: 2px; top: 10px; bottom: 10px; height:auto; }
}

.t-point{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
  min-height: 130px;
}

@media (max-width: 992px){
  .t-point{
    flex-direction: row;
    align-items:flex-start;
    min-height: auto;
    padding-inline-start: 4px;
  }
}

.t-dot{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: var(--navy-900);
  background: linear-gradient(135deg, rgba(255,246,204,.70), rgba(246,211,106,.55));
  border: 1px solid rgba(215,182,90,.55);
  box-shadow: 0 0 0 6px rgba(215,182,90,.14);
  cursor: pointer;
  user-select:none;
  transition: transform .16s ease, box-shadow .18s ease, filter .18s ease;
}

.t-dot:hover{
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.05);
  box-shadow: 0 0 0 6px rgba(215,182,90,.18), 0 20px 60px rgba(6,18,38,.16);
}

@media (max-width: 992px){
  .t-dot{ margin-top: 2px; }
}

.t-label{
  font-weight: 900;
  color: rgba(10,18,32,.82);
  font-size: 13px;
  text-align:center;
}

@media (max-width: 992px){
  .t-label{ text-align:start; margin-top: 8px; }
}

.t-pop{
  position:absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -100%);
  width: min(280px, 76vw);
  border-radius: 18px;
  background: rgba(6,18,38,.94);
  color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  padding: 12px 12px 10px;
  opacity:0;
  visibility:hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events:none;
  z-index: 2;
}

.t-pop .title{
  font-weight: 950;
  color: #fff;
  margin: 0 0 4px;
}

.t-pop .desc{
  margin:0;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  line-height:1.7;
  font-size: 13px;
}

.t-point:hover .t-pop,
.t-point.is-active .t-pop{
  opacity:1;
  visibility: visible;
  transform: translate(-50%, calc(-100% - 6px));
  pointer-events:auto;
}

@media (max-width: 992px){
  .t-pop{
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: 10px;
    opacity: 1;
    visibility: visible;
    background: rgba(6,18,38,.88);
    display:none;
  }
  .t-point.is-active .t-pop{ display:block; }
  .t-point:hover .t-pop{ display:none; } /* hover not useful on touch */
}

/* ---------------------------------
   Media frames (partners/coverage images)
---------------------------------- */

.media-frame{
  border-radius: var(--radius-xl);
  overflow:hidden;
  border: 1px solid rgba(11,45,91,.10);
  box-shadow: var(--shadow);
  background: #fff;
}

.media-frame img{
  width:100%;
  height:auto;
  display:block;
}

/* ---------------------------------
   Footer
---------------------------------- */

.site-footer{
  padding: 28px 0 34px;
  background: rgba(6,18,38,.92);
  color: rgba(255,255,255,.70);
  border-top: 1px solid rgba(255,255,255,.14);
}

.site-footer a{ color: rgba(255,255,255,.86); text-decoration:none; }
.site-footer a:hover{ text-decoration: underline; }

/* ---------------------------------
   Reveal on scroll
---------------------------------- */

.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal.is-in{
  opacity:1;
  transform:none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ transition:none; }
  .service-card, .btn-service, .nav-eq .nav-link, .lang-toggle, .t-dot{ transition:none; }
  .nav-eq .nav-link::after, .btn-service::after{ display:none; }
}
@keyframes goldSweep{
  0%{ inset-inline-start:-120%; opacity:0; }
  10%{ opacity:1; }
  100%{ inset-inline-start:140%; opacity:0; }
}


/* ---------------------------------
   Feature grid (Why Bayan)
---------------------------------- */

.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 992px){
  .feature-grid{ grid-template-columns: 1fr; }
}

.feature-card{
  --accent: var(--navy-800);
  position: relative;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,45,91,.10);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}

.feature-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 200px at 0% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    radial-gradient(520px 220px at 100% 0%, rgba(215,182,90,.14), transparent 58%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.feature-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(11,45,91,.10));
  box-shadow: var(--shadow-2);
}
.feature-card:hover::before{ opacity:1; }

.feature-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  margin: 0 0 6px;
}

.feature-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3));
  box-shadow: 0 0 18px rgba(215,182,90,.45);
  flex: 0 0 auto;
}

.feature-text{
  margin:0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.85;
}

/* ---------------------------------
   Contact cards
---------------------------------- */

.contact-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 992px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-card{
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,45,91,.10);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
}

.contact-card .label{
  color: var(--muted-2);
  font-weight: 800;
  font-size: 12px;
}
.contact-card a{
  display:inline-block;
  margin-top: 6px;
  font-weight: 950;
  text-decoration:none;
}
.contact-card a:hover{ text-decoration: underline; }

/* ---------------------------------
   Sub-hero (internal pages)
---------------------------------- */

.subhero{
  padding: 52px 0 26px;
  background:
    radial-gradient(1000px 500px at 12% 0%, rgba(20,63,124,.16), rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 92% 0%, rgba(215,182,90,.14), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0));
}
.subhero h1{
  margin: 0 0 10px;
  font-weight: 950;
  font-size: clamp(26px, 2.2vw + 14px, 46px);
}
.subhero p{
  margin:0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.95;
  max-width: 70ch;
}



/* ---------------------------------
   Extra polish: scroll progress + spotlight + tilt
---------------------------------- */

.scroll-progress{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,246,204,.0), rgba(246,211,106,.75), rgba(20,63,124,.65));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  opacity: .85;
  pointer-events:none;
}

/* Hero spotlight follows cursor */
.hero-spotlight{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(600px 360px at var(--sx,50%) var(--sy,25%),
    rgba(255,223,138,.22), rgba(20,63,124,.18), rgba(0,0,0,0) 62%);
  mix-blend-mode: screen;
  opacity: .95;
}

/* Card tilt (subtle) */
.service-card, .feature-card{
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card:hover{
  transform: translateY(-6px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
}
.feature-card:hover{
  transform: translateY(-4px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
}

@media (prefers-reduced-motion: reduce){
  .hero-spotlight{ display:none; }
  .scroll-progress{ display:none; }
}