/* ================================================================
   JAWHARA PRO PRINT — ELEGANT FINAL DESIGN
   Theme: Clean · Airy · Sophisticated · Animated
   Palette: Deep Navy · Rich Gold · Cyan · Pure White
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────── */
:root {
  /* Core palette */
  --navy:        #0b1631;
  --navy-alt:    #0f1e3d;
  --gold:        #e9a425;
  --gold-2:      #f5bf5a;
  --gold-dark:   #c4821a;
  --cyan:        #0db9d7;
  --magenta:     #c41ab3;
  --white:       #ffffff;
  --off:         #f7f8fc;
  --text:        #475569;
  --text-mid:    #1e293b;
  --text-muted:  #94a3b8;

  /* Gradients */
  --g-gold:      linear-gradient(120deg, var(--gold), var(--gold-2));
  --g-brand:     linear-gradient(135deg, var(--gold) 0%, var(--cyan) 60%, var(--magenta) 100%);
  --g-dark:      linear-gradient(160deg, var(--navy) 0%, var(--navy-alt) 100%);
  --g-light:     linear-gradient(160deg, #f7f8fc 0%, #edf0f9 100%);

  /* Shadows */
  --s-sm:   0 1px 8px rgba(0,0,0,.08);
  --s-md:   0 8px 32px rgba(0,0,0,.14);
  --s-lg:   0 20px 60px rgba(0,0,0,.20);
  --s-gold: 0 12px 40px rgba(233,164,37,.30);

  /* Spacing & shape */
  --r-sm:  8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-2xl:48px;

  /* Typography */
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans:  'DM Sans', system-ui, sans-serif;

  --section-py: 108px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-serif);
  color: var(--text-mid);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ─── KEYFRAMES ───────────────────────────────────── */
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes shimmer {
  to { background-position: 200% center; }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes ripple {
  0%   { transform: scale(.8); opacity:1; }
  100% { transform: scale(2.2); opacity:0; }
}
@keyframes barGrow {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes revealUp {
  from { opacity:0; transform: translateY(36px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes lineIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── UTILITIES ───────────────────────────────────── */
.animate-float { animation: float 6s ease-in-out infinite; }

/* ─── SECTION HELPERS ─────────────────────────────── */
.section-py { padding: var(--section-py) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 32px; height: 1.5px;
  background: var(--g-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

.heading-xl {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  color: var(--text-mid);
}

.heading-lg {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--text-mid);
}

.heading-dark { color: #fff; }

.text-grad {
  background: var(--g-brand);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 5s ease infinite;
}

.text-gold {
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rule {
  display: block;
  width: 48px; height: 2px;
  background: var(--g-gold);
  border-radius: 2px;
  margin: 20px 0 36px;
}

.rule.center { margin: 20px auto 36px; }

.body-text {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.85;
}

/* ─── BUTTONS ─────────────────────────────────────── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--g-gold);
  color: var(--navy);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 14px 32px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  box-shadow: var(--s-gold);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3) 50%, transparent);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(233,164,37,.45);
  color: var(--navy);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 12px 28px;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.18);
  cursor: pointer;
  transition: all 0.35s var(--ease);
  white-space: nowrap;
}

.btn-ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(13,185,215,.06);
  transform: translateY(-3px);
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 30px;
  border-radius: 50px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.35s var(--ease);
}

.btn-dark:hover {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
  transform: translateY(-2px);
}

/* ─── HEADER ──────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
  padding: 6px 0;
}

.site-header.scrolled {
  background: rgba(11,22,49,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 32px rgba(0,0,0,.35);
  padding: 2px 0;
}

.brand-name {
  font-family: var(--f-serif);
  font-size: 1.55rem;
  font-weight: 700;
  background: var(--g-brand);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 5s ease infinite;
  letter-spacing: 0.5px;
}

.nav-link {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,.65) !important;
  padding: 8px 16px !important;
  position: relative;
  letter-spacing: 0.3px;
  transition: color 0.3s;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 16px;
  width: calc(100% - 32px);
  height: 1.5px;
  background: var(--g-gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease);
}

.nav-link:hover { color: #fff !important; }
.nav-link.active { color: var(--gold-2) !important; }

.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(233,164,37,.12);
  border: 1px solid rgba(233,164,37,.35);
  color: var(--gold-2) !important;
  font-family: var(--f-sans);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 50px;
  transition: all 0.3s var(--ease);
}

.btn-nav:hover {
  background: var(--g-gold);
  border-color: transparent;
  color: var(--navy) !important;
  transform: translateY(-2px);
  box-shadow: var(--s-gold);
}

/* ─── HERO ────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 36px 0 60px;
  position: relative;
  overflow: hidden;
}

/* ── In-hero top bar ─────────────────────────── */
.hero-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 8px;
}

.hero-logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }

.hero-logo-img {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(233,164,37,.30));
  transition: filter 0.3s var(--ease);
}
.hero-logo-img:hover { filter: drop-shadow(0 0 28px rgba(233,164,37,.55)); }

.hero-logo-text {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Desktop nav */
.hero-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hero-nav-link {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .4px;
  padding: 6px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.hero-nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }

.hero-nav-cta {
  color: var(--navy);
  background: var(--grad-gold);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 8px 20px;
  border-radius: 10px;
  margin-left: 8px;
  transition: filter 0.25s, transform 0.2s;
  box-shadow: 0 4px 16px rgba(233,164,37,.3);
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-nav-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* Mobile hamburger */
.hero-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hero-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: width 0.2s;
}
.hero-hamburger span:nth-child(2) { width: 18px; }

/* Mobile nav dropdown */
.hero-mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  margin-bottom: 16px;
  backdrop-filter: blur(16px);
}
.hero-mobile-nav.open { display: flex; }
.hero-mobile-nav a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.hero-mobile-nav a:hover { color:#fff; background: rgba(255,255,255,.07); }

@media (max-width: 768px) {
  .hero-nav { display: none; }
  .hero-hamburger { display: flex; }
}


/* Subtle grid lines */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

/* Diagonal right panel */
.hero-panel {
  position: absolute;
  top: 0; right: 0;
  width: 46%;
  height: 100%;
  background: rgba(255,255,255,.015);
  clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-left: 1px solid rgba(255,255,255,.04);
}

/* Glowing orb */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-orb-1 {
  top: 5%; right: 8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(13,185,215,.12) 0%, transparent 65%);
  animation: float 9s ease-in-out infinite;
}

.hero-orb-2 {
  bottom: 10%; left: -5%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(233,164,37,.08) 0%, transparent 65%);
  animation: float 12s ease-in-out 2s infinite;
}

.hero-orb-3 {
  top: 40%; right: 30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(196,26,179,.08) 0%, transparent 65%);
  animation: float 7s ease-in-out 1s infinite;
}

/* Hero tag */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(233,164,37,.08);
  border: 1px solid rgba(233,164,37,.22);
  color: var(--gold-2);
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 28px;
}

.hero-tag-dot {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  position: relative;
}

.hero-tag-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(233,164,37,.4);
  animation: ripple 2s ease-out infinite;
}

/* Hero main heading */
.hero-h1 {
  font-family: var(--f-serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}

.hero-h1 em {
  font-style: italic;
  background: var(--g-brand);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 5s ease infinite;
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.5);
  line-height: 1.85;
  max-width: 480px;
  margin-bottom: 44px;
}

.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Hero trust */
.hero-trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.4);
  font-size: 0.83rem;
  font-weight: 500;
}

.trust-item i { color: var(--gold); font-size: 0.95rem; }

/* Hero image */
.hero-visual { position: relative; }

/* ── Animated logo visual (hero right column) ───── */
.hero-logo-visual {
  position: relative;
  width: 380px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pulsing glow rings */
.hlv-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(233,164,37,.22);
  animation: hlvRingSpin 10s linear infinite;
}
.hlv-ring-1 {
  animation-duration: 12s;
  border-color: rgba(233,164,37,.20);
  box-shadow: 0 0 40px rgba(233,164,37,.10) inset, 0 0 40px rgba(233,164,37,.08);
}
.hlv-ring-2 {
  inset: -28px;
  border-color: rgba(0,184,217,.12);
  animation-duration: 18s;
  animation-direction: reverse;
  box-shadow: 0 0 60px rgba(0,184,217,.06) inset;
}

@keyframes hlvRingSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Center logo disc */
.hlv-logo {
  position: relative;
  z-index: 2;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(233,164,37,.18);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 60px rgba(233,164,37,.14),
    0 0 120px rgba(233,164,37,.06),
    inset 0 0 40px rgba(255,255,255,.03);
  animation: hlvFloat 5s ease-in-out infinite;
}

@keyframes hlvFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

.hlv-logo-img {
  width: 72%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(233,164,37,.55))
          drop-shadow(0 0 8px rgba(233,164,37,.30));
  animation: hlvLogoPulse 5s ease-in-out infinite;
}

@keyframes hlvLogoPulse {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(233,164,37,.55)) drop-shadow(0 0 8px rgba(233,164,37,.30)); }
  50%       { filter: drop-shadow(0 0 40px rgba(233,164,37,.80)) drop-shadow(0 0 16px rgba(233,164,37,.50)); }
}


.hero-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--s-lg);
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
}

.hero-img img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 6s linear;
}

.hero-img:hover img { transform: scale(1.03); }

/* Gold tint overlay */
.hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(11,22,49,.7) 100%);
  pointer-events: none;
}

/* Floating cards */
.float-card {
  position: absolute;
  background: rgba(11,22,49,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-md);
  padding: 18px 22px;
  box-shadow: var(--s-lg);
  min-width: 148px;
}

.float-card:nth-child(2) {
  top: 32px; left: -52px;
  animation: float 5.5s ease-in-out infinite;
}

.float-card:nth-child(3) {
  bottom: 40px; right: -44px;
  animation: float 7s ease-in-out 1.5s infinite;
}

.float-card .fc-num {
  font-family: var(--f-serif);
  font-size: 2.1rem;
  font-weight: 700;
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  display: block;
}

.float-card .fc-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 5px;
}

/* ─── STATS BAND ──────────────────────────────────── */
.stats-band {
  background: var(--navy-alt);
  border-top: 1px solid rgba(233,164,37,.08);
  border-bottom: 1px solid rgba(233,164,37,.08);
}

.stat-cell {
  padding: 44px 24px;
  text-align: center;
  position: relative;
  transition: background 0.3s;
}

.stat-cell:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 28%; bottom: 28%;
  width: 1px;
  background: rgba(255,255,255,.05);
}

.stat-cell:hover { background: rgba(255,255,255,.02); }

.stat-val {
  font-family: var(--f-serif);
  font-size: 3rem;
  font-weight: 700;
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  display: inline-block;
  transition: transform 0.3s;
}

.stat-cell:hover .stat-val { transform: scale(1.06); }

.stat-lbl {
  font-size: 0.73rem;
  font-weight: 600;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-top: 10px;
}

/* ─── ABOUT ───────────────────────────────────────── */
.about-section { background: var(--white); }

.img-stack { position: relative; padding-bottom: 80px; padding-right: 70px; }

.img-main {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--s-lg);
  position: relative;
  z-index: 1;
}

.img-accent {
  position: absolute;
  bottom: 0; right: 0;
  width: 60%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 4px solid #fff;
  box-shadow: var(--s-md);
  z-index: 2;
  transition: transform 0.5s var(--ease);
}

.img-accent:hover { transform: scale(1.04); }

.years-badge {
  position: absolute;
  top: 36px; left: -16px;
  z-index: 3;
  background: var(--navy);
  border-radius: var(--r-md);
  padding: 22px 26px;
  text-align: center;
  box-shadow: var(--s-md);
  border: 1px solid rgba(233,164,37,.18);
  animation: float 5s ease-in-out infinite;
}

.years-badge .y-n {
  font-family: var(--f-serif);
  font-size: 2.6rem;
  font-weight: 700;
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  display: block;
}

.years-badge .y-l {
  font-size: 0.67rem;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 4px;
}

/* Feature list */
.feat-list { list-style: none; padding: 0; margin-bottom: 36px; }

.feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f4fb;
}

.feat-list li:last-child { border: none; padding-bottom: 0; }

.feat-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, rgba(233,164,37,.1), rgba(233,164,37,.05));
  border: 1px solid rgba(233,164,37,.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
  font-size: 0.8rem;
  margin-top: 2px;
}

.feat-list li strong {
  color: var(--text-mid);
  font-weight: 600;
  display: block;
  margin-bottom: 3px;
  font-size: 0.95rem;
}

.feat-list li span { font-size: 0.88rem; color: var(--text); }

/* ─── SERVICES ────────────────────────────────────── */
.services-section {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

/* Subtle dots background */
.services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.svc-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-lg);
  padding: 46px 36px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease),
              border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
  cursor: default;
}

.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 80%, rgba(233,164,37,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}

.svc-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g-brand);
  background-size: 200% auto;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.svc-card:hover { transform: translateY(-8px); border-color: rgba(233,164,37,.18); box-shadow: 0 24px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(233,164,37,.08); }
.svc-card:hover::before { opacity: 1; }
.svc-card:hover::after  { transform: scaleX(1); }
.svc-card:hover .svc-icon { transform: scale(1.12) rotate(-6deg); }

.svc-num {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--f-serif);
  font-size: 5rem;
  font-weight: 700;
  color: rgba(255,255,255,.03);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.svc-icon {
  width: 62px; height: 62px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 28px;
  transition: transform 0.4s var(--ease);
  position: relative;
  z-index: 1;
}

.svc-card h4 {
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.svc-card p {
  color: rgba(255,255,255,.42);
  font-size: 0.88rem;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

/* ─── PROJECTS ────────────────────────────────────── */
.projects-section { background: var(--off); }

.filter-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 48px;
}

.ftab {
  padding: 8px 20px;
  border-radius: 50px;
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  border: 1.5px solid #dde3f5;
  background: var(--white);
  color: #6b7fa8;
  letter-spacing: 0.3px;
}

.ftab:hover,
.ftab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-2);
  box-shadow: 0 4px 16px rgba(11,22,49,.18);
  transform: translateY(-2px);
}

.project-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
  box-shadow: var(--s-sm);
  background: var(--navy);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.project-card:hover { transform: translateY(-6px); box-shadow: var(--s-lg); }

.project-card img {
  width: 100%;
  height: 256px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease), filter 0.5s;
  filter: brightness(.95);
}

.project-card:hover img { transform: scale(1.07); filter: brightness(.75); }

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,22,49,.95) 0%, rgba(11,22,49,.3) 55%, transparent 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.project-card:hover .project-overlay { opacity: 1; transform: translateY(0); }

.project-cat {
  display: inline-block;
  padding: 4px 12px;
  background: var(--g-gold);
  color: var(--navy);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 50px;
  margin-bottom: 8px;
  align-self: flex-start;
}

.project-overlay h5 { color: #fff; font-size: 1.08rem; margin-bottom: 4px; }
.project-overlay p  { color: rgba(255,255,255,.5); font-size: 0.8rem; margin: 0; }

/* Top label (always visible) */
.project-marker {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(11,22,49,.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(233,164,37,.2);
  color: var(--gold-2);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: 50px;
}

/* ─── CLIENTS ─────────────────────────────────────── */
.clients-section { background: var(--navy); }

.clt-box {
  aspect-ratio: 1.8;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.15);
  font-size: 2rem;
  transition: all 0.35s var(--ease);
  cursor: default;
}

.clt-box:hover {
  background: rgba(233,164,37,.06);
  border-color: rgba(233,164,37,.22);
  color: var(--gold);
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 12px 36px rgba(233,164,37,.12);
}

/* ─── CONTACT ─────────────────────────────────────── */
.contact-section { background: var(--off); }

.contact-wrap {
  background: var(--navy);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--s-lg);
  border: 1px solid rgba(233,164,37,.08);
}

.contact-l {
  padding: 72px 60px;
  position: relative;
}

.contact-l::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(13,185,215,.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.contact-l::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(233,164,37,.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.contact-r {
  padding: 72px 60px;
  position: relative;
  z-index: 1;
  border-left: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-l h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.contact-l p {
  color: rgba(255,255,255,.42);
  line-height: 1.85;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}

.ci-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
}

.ci-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.ci-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.28);
  margin-bottom: 4px;
}

.ci-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}

.ci-val a { color: rgba(255,255,255,.85); transition: color 0.25s; }
.ci-val a:hover { color: var(--gold-2); }

/* Right side action buttons */
.contact-action {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ca-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: all 0.35s var(--ease);
  text-decoration: none;
}

.ca-btn:hover { border-color: rgba(233,164,37,.3); background: rgba(233,164,37,.06); transform: translateX(6px); }

.ca-btn .ca-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.ca-btn .ca-title {
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  display: block;
  margin-bottom: 2px;
}

.ca-btn .ca-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,.35);
}

.ca-btn .ca-arrow {
  margin-left: auto;
  color: rgba(255,255,255,.2);
  font-size: 0.85rem;
  transition: transform 0.3s, color 0.3s;
}

.ca-btn:hover .ca-arrow { transform: translateX(4px); color: var(--gold); }

/* ─── FOOTER ──────────────────────────────────────── */
.site-footer {
  background: #040c1e;
  color: rgba(255,255,255,.3);
  padding: 72px 0 36px;
  border-top: 1px solid rgba(255,255,255,.04);
}

.footer-brand {
  font-family: var(--f-serif);
  font-size: 1.65rem;
  font-weight: 700;
  background: var(--g-brand);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 5s ease infinite;
  display: inline-block;
  margin-bottom: 12px;
}

.footer-bio { font-size: 0.86rem; line-height: 1.85; max-width: 290px; margin-bottom: 26px; }

.f-social { display: flex; gap: 10px; }

.f-social a {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.3);
  font-size: 0.85rem;
  transition: all 0.3s var(--ease);
}

.f-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: translateY(-3px);
}

.f-head {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 20px;
}

.f-link {
  display: block;
  font-size: 0.86rem;
  padding: 5px 0;
  color: rgba(255,255,255,.3);
  transition: all 0.25s;
}

.f-link:hover { color: var(--gold-2); transform: translateX(6px); }

.f-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  padding: 6px 0;
  color: rgba(255,255,255,.3);
}

.f-contact-row i { color: var(--gold); width: 14px; flex-shrink: 0; }
.f-contact-row a { color: rgba(255,255,255,.3); transition: color 0.25s; }
.f-contact-row a:hover { color: var(--gold-2); }

.footer-hr { border-color: rgba(255,255,255,.04); margin: 48px 0 28px; }
.footer-copy { font-size: 0.79rem; }
.footer-copy span { background: var(--g-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }

/* ─── SCROLL TOP ──────────────────────────────────── */
.back-top {
  position: fixed;
  bottom: 26px; right: 26px;
  width: 44px; height: 44px;
  background: var(--g-gold);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: var(--s-gold);
  cursor: pointer;
  border: none;
  opacity: 0; visibility: hidden;
  transform: translateY(16px);
  transition: all 0.35s var(--ease);
  z-index: 999;
}

.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(233,164,37,.5); }

/* ─── SCROLL ANIMATIONS ───────────────────────────── */

/* Gold progress bar fixed at the very top */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-2), var(--cyan));
  background-size: 200% 100%;
  animation: gradShift 3s ease infinite;
  z-index: 2000;
  border-radius: 0 3px 3px 0;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(233,164,37,.55);
}

/* ── Scroll-reveal base ─────────────── */
.sr {
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.sr-up    { transform: translateY(44px); }
.sr-down  { transform: translateY(-44px); }
.sr-left  { transform: translateX(-44px); }
.sr-right { transform: translateX(44px); }
.sr-scale { transform: scale(0.88); }
.sr-zoom  { transform: scale(1.1); }

.sr.in {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
.sr-d1 { transition-delay: 0.10s; }
.sr-d2 { transition-delay: 0.20s; }
.sr-d3 { transition-delay: 0.30s; }
.sr-d4 { transition-delay: 0.45s; }
.sr-d5 { transition-delay: 0.60s; }

/* ── Animated underline on eyebrow ─── */
.eyebrow::before {
  animation: lineIn 0.6s var(--ease) both;
  animation-play-state: paused;
}

.eyebrow.in-view::before {
  animation-play-state: running;
}

/* ── Section entrance: clean line sweep */
@keyframes sweepIn {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

.section-divider {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--g-gold);
  border-radius: 2px;
  transform-origin: left;
  animation: lineIn 0.8s var(--ease) both;
  animation-play-state: paused;
}

.section-divider.in-view { animation-play-state: running; }

/* ── Parallax host ────────────────── */
[data-parallax] { will-change: transform; }

/* ── Scroll-triggered number highlight */
@keyframes numPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.stat-val.counted { animation: numPop 0.5s var(--ease); }

/* ─── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 991px) {
  :root { --section-py: 72px; }
  .hero { min-height: auto; padding: 120px 0 72px; }
  .hero-panel, .hero-orb { display: none; }
  .float-card { display: none; }
  .contact-r { border-left: none; border-top: 1px solid rgba(255,255,255,.05); }
  .contact-l, .contact-r { padding: 48px 36px; }
  .img-stack { padding: 0; }
  .img-accent { display: none; }
  .years-badge { display: none; }
}

@media (max-width: 767px) {
  :root { --section-py: 56px; }
  .hero-h1 { font-size: 2.8rem; }
  .svc-card { padding: 34px 26px; }
  .contact-wrap { border-radius: var(--r-xl); }
}