/* ===== PRAVARA - Global Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --primary:    #c8860a;
  --primary-dk: #9c6607;
  --gold:       #f0b429;
  --blue:       #0ea5e9;
  --blue-dk:    #0284c7;
  --blue-glow:  rgba(14,165,233,0.25);
  --green:      #22c55e;
  --green-dk:   #16a34a;
  --green-glow: rgba(34,197,94,0.2);
  --white:      #ffffff;
  --text-light: #e5e5e5;
  --text-muted: #888;
  --card-bg:    #0f0f0f;
  --border:     #1f1f1f;
  --gradient:   linear-gradient(135deg, #c8860a 0%, #f0b429 50%, #c8860a 100%);
  --grad-blue:  linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  --grad-green: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
  --grad-mix:   linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: #000;
  color: var(--text-light);
  line-height: 1.75;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
a { color: var(--blue); text-decoration: none; transition: color .3s; }
a:hover { color: var(--blue-dk); }
img { max-width: 100%; }

/* ========================================
   NAVBAR + MEGA MENU
   ======================================== */
.pravara-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(62, 61, 61, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: all 0.4s ease;
}

.pravara-nav.scrolled {
  background: rgba(62, 61, 61,0.98);
  border-bottom-color: rgba(14,165,233,0.3);
  box-shadow: 0 8px 40px rgba(62, 61, 61,0.7);
}

/* Brand */
.pravara-nav .navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pravara-nav .navbar-brand img {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(14,165,233,0.4));
  transition: transform .3s, filter .3s;
}
.pravara-nav .navbar-brand img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 16px rgba(34,197,94,0.5));
}
.pravara-nav .navbar-brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.pravara-nav .navbar-brand .brand-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  background: linear-gradient(90deg, #fff 0%, #0ea5e9 50%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
}
.pravara-nav .navbar-brand .brand-tagline {
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  color: #666;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Nav links */
.pravara-nav .nav-link {
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 1.1rem 0.8rem !important;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  transition: color .3s;
  white-space: nowrap;
}
.pravara-nav .nav-link i {
  font-size: 0.85rem;
  transition: transform .3s;
}
.pravara-nav .nav-link .nav-icon-home { color: var(--blue); }
.pravara-nav .nav-link .nav-icon-about { color: var(--blue); }
.pravara-nav .nav-link .nav-icon-products { color: var(--gold); }
.pravara-nav .nav-link .nav-icon-apps { color: var(--green); }
.pravara-nav .nav-link .nav-icon-sustain { color: var(--green); }
.pravara-nav .nav-link .nav-icon-quality { color: var(--blue); }
.pravara-nav .nav-link .nav-icon-news { color: var(--gold); }
.pravara-nav .nav-link .nav-icon-faq { color: var(--blue); }

.pravara-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 70%;
  height: 2px;
  background: var(--grad-blue);
  border-radius: 2px;
  transition: transform .3s ease;
}
.pravara-nav .nav-link:hover,
.pravara-nav .nav-link.active { color: #fff !important; }
.pravara-nav .nav-link:hover::after,
.pravara-nav .nav-link.active::after { transform: translateX(-50%) scaleX(1); }
.pravara-nav .nav-link:hover i { transform: translateY(-2px); }

/* Contact CTA button in nav */
.nav-cta {
  background: linear-gradient(135deg, #0ea5e9, #22c55e) !important;
  color: #000 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 1px !important;
  padding: 9px 22px !important;
  border-radius: 50px !important;
  margin-left: 8px;
  transition: all .3s !important;
  box-shadow: 0 4px 16px rgba(14,165,233,0.3) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(14,165,233,0.5) !important;
  color: #000 !important;
}

/* ---- MEGA MENU ---- */
.has-mega { position: static !important; }
.has-mega > .nav-link { cursor: pointer; }

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 860px;
  max-width: 98vw;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 40px 100px rgba(62, 61, 61,0.8), 0 0 0 1px rgba(14,165,233,0.1);
  z-index: 10000;
}

.has-mega:hover .mega-menu,
.mega-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.mega-menu::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: #0a0a0a;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid rgba(255,255,255,0.08);
  rotate: 45deg;
}

.mega-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Image card in mega menu */
.mega-card {
  display: flex;
  flex-direction: column;
  background: #111;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: all .3s;
  text-decoration: none;
  color: inherit;
}
.mega-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(14,165,233,0.2);
  color: inherit;
}
.mega-card .mc-img {
  height: 100px;
  background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mega-card .mc-img i {
  font-size: 2.8rem;
  opacity: .6;
  transition: all .3s;
}
.mega-card:hover .mc-img i {
  opacity: 1;
  transform: scale(1.1);
}
.mega-card .mc-img .mc-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s;
}
.mega-card:hover .mc-img .mc-glow { opacity: 1; }
.mega-card .mc-body {
  padding: 0.8rem 1rem;
}
.mega-card .mc-body h6 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.mega-card .mc-body p {
  font-size: 0.72rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}
.mega-card .mc-arrow {
  color: var(--blue);
  font-size: .7rem;
  margin-top: 6px;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mega-card:hover .mc-arrow { opacity: 1; transform: translateX(4px); }

/* Mega quick link */
.mega-quick a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  color: #aaa;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all .25s;
  border: 1px solid transparent;
  margin-bottom: 6px;
  text-decoration: none;
}
.mega-quick a i {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
  transition: all .25s;
}
.mega-quick a:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #fff;
}

/* Toggler */
.navbar-toggler {
  border: 1px solid rgba(14,165,233,0.4) !important;
  padding: 5px 10px;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230ea5e9' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ========================================
   APPLE-STYLE SCROLL VIDEO HERO
   ======================================== */

/* Sticky video wrapper - video stays fixed while scroll sections pass */
.hero-video-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.hero-video-wrap video,
.hero-video-wrap .hero-vid-iframe-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-vid-iframe-wrap iframe,
.hero-vid-iframe-wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 16:9 */
  height: 100vh;
  min-width: 100%;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
  object-fit: cover;
}

.hero-vid-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(62, 61, 61,0.3) 0%,
    rgba(62, 61, 61,0.15) 40%,
    rgba(62, 61, 61,0.6) 80%,
    rgba(62, 61, 61,1) 100%
  );
  z-index: 2;
}

/* The scroll container holds sticky video + scroll scenes */
.hero-scroll-container {
  position: relative;
}

/* Each scroll scene sits on top of the sticky video */
.scroll-scene {
  position: relative;
  z-index: 3;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Scene 1: main title (sits on top of sticky video) */
.scroll-scene-1 {
  margin-top: -100vh; /* pull up to overlap sticky video */
}

/* Scene content animates on scroll */
.scene-content {
  max-width: 900px;
  padding: 2rem;
  transition: opacity .6s, transform .6s;
}

.scene-content.hidden {
  opacity: 0;
  transform: translateY(40px);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,165,233,0.1);
  border: 1px solid rgba(14,165,233,0.3);
  color: var(--blue);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 1.75rem;
  backdrop-filter: blur(10px);
}

.hero-h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 1.0;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

.hero-h1 .word-blue {
  background: var(--grad-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-h1 .word-green {
  background: var(--grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-h1 .word-gold {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.65);
  max-width: 650px;
  margin: 0 auto 2.5rem;
  font-weight: 300;
  line-height: 1.8;
}

/* Scroll indicator */
.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: fadeFloat 2s ease-in-out infinite;
}

@keyframes fadeFloat {
  0%,100% { opacity:.5; transform: translateX(-50%) translateY(0); }
  50% { opacity:1; transform: translateX(-50%) translateY(-6px); }
}

.scroll-hint .mouse {
  width: 26px; height: 42px;
  border: 2px solid rgba(14,165,233,0.5);
  border-radius: 13px;
  position: relative;
}
.scroll-hint .mouse::after {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 8px;
  background: var(--blue);
  border-radius: 2px;
  animation: scrollDot 1.8s infinite;
}
@keyframes scrollDot {
  0%   { top: 7px; opacity: 1; }
  100% { top: 24px; opacity: 0; }
}
.scroll-hint span {
  font-size: 0.62rem;
  letter-spacing: 3px;
  color: #fefefe;
  text-transform: uppercase;
}

/* ========================================
   SCROLL STORIES (Apple-style sticky panels)
   ======================================== */
.story-panel {
  position: relative;
  background: #000;
  padding: 120px 0;
  overflow: hidden;
}

.story-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Glowing radial accents */
.glow-blue-tl::before {
  background: radial-gradient(ellipse at 10% 20%, rgba(14,165,233,0.12) 0%, transparent 55%);
}
.glow-green-br::before {
  background: radial-gradient(ellipse at 90% 80%, rgba(34,197,94,0.1) 0%, transparent 55%);
}
.glow-gold-tr::before {
  background: radial-gradient(ellipse at 90% 10%, rgba(200,134,10,0.1) 0%, transparent 55%);
}

/* Full-width scroll pinned section */
.pin-section {
  height: 300vh;
  position: relative;
}
.pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pin-text-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s, transform .6s;
  padding: 2rem;
}
.pin-text-stage.active { opacity: 1; transform: translateY(0); }

/* ========================================
   STORY IMAGE CARDS (scroll pin sections)
   ======================================== */
.story-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: #080808;
  box-shadow: 0 30px 80px rgba(62, 61, 61,.6);
  transition: transform .4s ease, box-shadow .4s ease;
}
.story-card:hover { transform: translateY(-6px); box-shadow: 0 40px 100px rgba(62, 61, 61,.7); }

.story-card-blue  { border-color: rgba(14,165,233,.2);  box-shadow: 0 30px 80px rgba(14,165,233,.08); }
.story-card-gold  { border-color: rgba(200,134,10,.2);  box-shadow: 0 30px 80px rgba(200,134,10,.08); }
.story-card-green { border-color: rgba(34,197,94,.2);   box-shadow: 0 30px 80px rgba(34,197,94,.08); }

.story-card-blue:hover  { box-shadow: 0 40px 100px rgba(14,165,233,.15); }
.story-card-gold:hover  { box-shadow: 0 40px 100px rgba(200,134,10,.15); }
.story-card-green:hover { box-shadow: 0 40px 100px rgba(34,197,94,.15); }

/* Image area */
.story-card-img {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.story-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.story-card:hover .story-card-img img { transform: scale(1.04); }

.story-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(62, 61, 61,.1) 0%, rgba(62, 61, 61,.55) 100%);
}
.story-card-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(62, 61, 61,.7);
  backdrop-filter: blur(10px);
  border: 1px solid;
  border-radius: 50px;
  padding: 6px 16px;
  font-size: .72rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Stats bar at bottom of card */
.story-card-stats {
  display: flex;
  align-items: stretch;
  padding: 1.4rem 1.8rem;
  gap: 0;
}
.sc-stat {
  flex: 1;
  text-align: center;
  padding: .4rem .6rem;
}
.sc-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.1;
}
.sc-stat-lbl {
  font-size: .7rem;
  color: #fefefe;
  line-height: 1.5;
  margin-top: .3rem;
}
.sc-stat-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  flex-shrink: 0;
  margin: .4rem 0;
}

/* ========================================
   FAB SAND MULTI-IMAGE GRID (stageC)
   ======================================== */
.fab-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(34,197,94,.15);
  box-shadow: 0 30px 80px rgba(34,197,94,.08), 0 0 0 1px rgba(255,255,255,.03);
}

/* Large main image spans full left column */
.fab-img-main {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  height: 300px;
}
.fab-img-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.fab-img-main:hover img { transform: scale(1.06); }

/* Right column stack of 3 small images */
.fab-img-stack {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fab-img-small {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  flex: 1;
  min-height: 88px;
}
.fab-img-small img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.fab-img-small:hover img { transform: scale(1.08); }

/* Shared overlay on all images */
.fab-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(62, 61, 61,.05) 0%, rgba(62, 61, 61,.55) 100%);
  pointer-events: none;
}

/* Label badges on each image */
.fab-img-label {
  position: absolute;
  bottom: 8px; left: 10px;
  font-size: .65rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 30px;
  backdrop-filter: blur(8px);
  background: rgba(62, 61, 61,.55);
  border: 1px solid;
  white-space: nowrap;
}
.fab-label-green { color: var(--green);   border-color: rgba(34,197,94,.4); }
.fab-label-gold  { color: var(--primary); border-color: rgba(200,134,10,.4); }
.fab-label-blue  { color: var(--blue);    border-color: rgba(14,165,233,.4); }
.fab-label-mix   { color: #ccc;           border-color: rgba(255,255,255,.2); }

/* Bottom stat bar spans full width */
.fab-img-statbar {
  grid-column: 1 / -1;
  grid-row: 2;
  background: #080808;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  gap: 0;
  border-radius: 0 0 10px 10px;
}
.fab-stat {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fab-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1;
}
.fab-stat-lbl {
  font-size: .68rem;
  color: #3a3a3a;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fab-stat-sep {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.07), transparent);
  flex-shrink: 0;
}

/* ========================================
   FAB SAND STORY CARD (Fly Ash → FAB Sand → replaces River Sand)
   ======================================== */
.fab-story-card {
  background: #070707;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(62, 61, 61,.6);
}

/* ── Top: two photo columns with arrow between ── */
.fab-story-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  height: 210px;
}

.fab-story-col { position: relative; overflow: hidden; }
.fab-story-ash  { border-right: none; }
.fab-story-river { border-left: none; }

.fab-story-img-wrap {
  position: relative;
  width: 100%; height: 100%;
}
.fab-story-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
  filter: brightness(.85);
}
.fab-story-col:hover .fab-story-img-wrap img { transform: scale(1.06); filter: brightness(1); }

.fab-story-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(62, 61, 61,.05) 0%, rgba(62, 61, 61,.6) 100%);
  pointer-events: none;
}
.fab-story-tag {
  position: absolute;
  top: 12px; left: 12px;
  font-size: .68rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  border: 1px solid;
  backdrop-filter: blur(8px);
  background: rgba(62, 61, 61,.5);
}
.fab-story-sub {
  position: absolute;
  bottom: 12px; left: 12px;
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ── Center arrow column ── */
.fab-story-arrow-col {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070707;
  padding: 0 6px;
  z-index: 2;
}
.fab-arrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fab-arrow-line {
  width: 2px;
  flex: 1;
  min-height: 30px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.1), transparent);
}
.fab-arrow-badge {
  width: 58px; height: 58px;
  background: linear-gradient(135deg, #0a1a0a, #0a0a1a);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 0 20px rgba(34,197,94,.15);
}
.fab-arrow-icon { font-size: .75rem; color: var(--green); }
.fab-arrow-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: .55rem;
  color: var(--green);
  text-align: center;
  line-height: 1.2;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ── Flow chips row ── */
.fab-story-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: #050505;
  border-top: 1px solid rgba(255,255,255,.04);
  flex-wrap: wrap;
}
.fab-flow-chip {
  font-size: .65rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  border: 1px solid;
  background: rgba(62, 61, 61,.4);
  white-space: nowrap;
}
.fab-flow-arrow {
  color: #2a2a2a;
  font-size: .7rem;
  flex-shrink: 0;
}

/* ── Bottom comparison bar ── */
.fab-story-compare {
  display: flex;
  align-items: center;
  padding: 1rem 1.4rem;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.05);
  background: #080808;
}
.fab-compare-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 0 .5rem;
}
.fab-cmp-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: .85rem;
}
.fab-cmp-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  color: #ccc;
  line-height: 1.2;
}
.fab-cmp-desc {
  font-size: .68rem;
  color: #fefefe;
  margin-top: 2px;
}
.fab-compare-sep {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.07), transparent);
  flex-shrink: 0;
}

/* ========================================
   STAT STRIP
   ======================================== */
.stat-strip {
  background: linear-gradient(135deg, #050a12 0%, #050d08 50%, #050a12 100%);
  padding: 40px 0;
  border-top: 1px solid rgba(14,165,233,0.15);
  border-bottom: 1px solid rgba(34,197,94,0.15);
  position: relative;
  overflow: hidden;
}
.stat-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.03), rgba(34,197,94,0.03), transparent);
}
.stat-item {
  text-align: center;
  padding: 12px 20px;
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.1), transparent);
}
.stat-item .num {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-item .num.gold-num {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-item .lbl {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #b7b7b7;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ========================================
   SECTION STYLES
   ======================================== */
.section-black  { background: #2e2e2e;    padding: 100px 0; }
/* .section-black  { background: #000;    padding: 100px 0; } */
/* .section-dark   { background: #050505; padding: 100px 0; } */
.section-dark   { background: #312d2d9e; padding: 100px 0; }
.section-darker { background: #080808; padding: 100px 0; }
.section-card-bg{ background: #030303; padding: 100px 0; }

.section-header { text-align: center; margin-bottom: 70px; }
.section-header .label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.label-blue  { color: var(--blue); }
.label-green { color: var(--green); }
.label-gold  { color: var(--primary); }

.section-header h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  color: #fff;
  margin-bottom: 14px;
  font-weight: 800;
}
.section-header p {
  color: #f8f8f8;
  font-size: 1rem;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.8;
}

.accent-line {
  width: 60px; height: 3px;
  border-radius: 2px;
  margin: 18px auto 0;
}
.accent-blue  { background: var(--grad-blue); }
.accent-green { background: var(--grad-green); }
.accent-gold  { background: var(--gradient); }
.accent-mix   { background: var(--grad-mix); }

/* ========================================
   BUTTONS
   ======================================== */
.btn-blue {
  background: var(--grad-blue);
  color: #000 !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 6px 24px rgba(14,165,233,0.35);
  transition: all .3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-blue:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(14,165,233,0.5);
  color: #000 !important;
}

.btn-green {
  background: var(--grad-green);
  color: #000 !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 6px 24px rgba(34,197,94,0.3);
  transition: all .3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(34,197,94,0.45);
  color: #000 !important;
}

.btn-gold {
  background: var(--gradient);
  color: #000 !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 6px 24px rgba(200,134,10,0.3);
  transition: all .3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(200,134,10,0.45);
  color: #000 !important;
}

.btn-outline-blue {
  background: transparent;
  color: var(--blue) !important;
  border: 2px solid var(--blue);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: 50px;
  transition: all .3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline-blue:hover {
  background: var(--blue);
  color: #000 !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(14,165,233,0.4);
}

.btn-outline-green {
  background: transparent;
  color: var(--green) !important;
  border: 2px solid var(--green);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: 50px;
  transition: all .3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline-green:hover {
  background: var(--green);
  color: #000 !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(34,197,94,0.35);
}

/* Keep old names as aliases for inner pages */
.btn-pravara       { background: var(--gradient); color: #000 !important; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase; padding:14px 34px; border-radius:50px; border:none; box-shadow:0 6px 24px rgba(200,134,10,.3); transition:all .3s; display:inline-flex; align-items:center; gap:8px; }
.btn-pravara:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(200,134,10,.45); color:#000 !important; }
.btn-pravara-outline { background:transparent; color:var(--primary) !important; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase; padding:13px 34px; border-radius:50px; border:2px solid rgba(200,134,10,.5); transition:all .3s; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.btn-pravara-outline:hover { background:var(--gradient); color:#000 !important; border-color:transparent; transform:translateY(-3px); }
.btn-outline-pravara { background:transparent; color:var(--primary) !important; border:2px solid var(--primary); font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase; padding:12px 32px; border-radius:50px; transition:all .3s; display:inline-flex; align-items:center; gap:8px; }
.btn-outline-pravara:hover { background:var(--primary); color:#000 !important; transform:translateY(-3px); box-shadow:0 8px 24px rgba(200,134,10,.4); }

/* ========================================
   PRODUCT IMAGE CARDS (homepage)
   ======================================== */
.product-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--border);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-10px);
  border-color: var(--blue);
  box-shadow: 0 30px 70px rgba(14,165,233,0.18);
}
.product-card .pc-visual {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-card .pc-visual .pc-bg-icon {
  font-size: 6rem;
  position: absolute;
  opacity: .06;
  color: #fff;
  transition: opacity .4s, transform .4s;
}
.product-card:hover .pc-visual .pc-bg-icon {
  opacity: .12;
  transform: scale(1.15) rotate(5deg);
}
.product-card .pc-visual .pc-icon {
  font-size: 3.5rem;
  position: relative;
  z-index: 1;
  transition: transform .4s;
}
.product-card:hover .pc-visual .pc-icon { transform: scale(1.12) translateY(-4px); }

.pc-blue  { background: linear-gradient(135deg, #020f1a, #041825); }
.pc-green { background: linear-gradient(135deg, #020d06, #041508); }
.pc-gold  { background: linear-gradient(135deg, #120900, #1e1000); }
.pc-teal  { background: linear-gradient(135deg, #020e10, #041518); }

.product-card .pc-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card .pc-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 10px;
  width: fit-content;
}
.tag-blue  { background: rgba(14,165,233,.12); color: var(--blue);  border:1px solid rgba(14,165,233,.25); }
.tag-green { background: rgba(34,197,94,.12);  color: var(--green); border:1px solid rgba(34,197,94,.25);  }
.tag-gold  { background: rgba(200,134,10,.12); color: var(--primary); border:1px solid rgba(200,134,10,.25); }
.tag-teal  { background: rgba(20,184,166,.12); color: #14b8a6; border:1px solid rgba(20,184,166,.25); }

.product-card h5 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .6rem;
}
.product-card p {
  color: #666;
  font-size: .85rem;
  line-height: 1.7;
  flex: 1;
}
.product-card .pc-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-card .pc-footer .pc-link {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap .3s;
}
.product-card:hover .pc-footer .pc-link { gap: 10px; }
.product-card .pc-footer .pc-link.blue-link  { color: var(--blue); }
.product-card .pc-footer .pc-link.green-link { color: var(--green); }
.product-card .pc-footer .pc-link.gold-link  { color: var(--primary); }

/* ========================================
   APPLICATION IMAGE GRID
   ======================================== */
.app-grid-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #080808;
  border: 1px solid var(--border);
  padding: 1.75rem;
  text-align: center;
  transition: all .35s;
  height: 100%;
}
.app-grid-card:hover {
  transform: translateY(-6px);
  border-color: var(--green);
  box-shadow: 0 20px 50px rgba(34,197,94,0.12);
  background: #030d05;
}
.app-grid-card .ag-icon-wrap {
  width: 68px; height: 68px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  font-size: 1.7rem;
  transition: all .35s;
}
.app-grid-card:hover .ag-icon-wrap {
  transform: translateY(-3px) scale(1.05);
}
.ag-blue  { background: rgba(14,165,233,.1);  color: var(--blue);  border:1px solid rgba(14,165,233,.2); }
.ag-green { background: rgba(34,197,94,.1);   color: var(--green); border:1px solid rgba(34,197,94,.2);  }
.ag-gold  { background: rgba(200,134,10,.1);  color: var(--primary); border:1px solid rgba(200,134,10,.2); }
.ag-teal  { background: rgba(20,184,166,.1);  color: #14b8a6; border:1px solid rgba(20,184,166,.2); }
.app-grid-card h6 {
  font-family: 'Montserrat', sans-serif;
  color: #ddd;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.app-grid-card p { color: #fefefe; font-size: .78rem; margin: 0; }

/* ========================================
   FEATURE BOXES
   ======================================== */
.feature-box {
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all .35s;
  height: 100%;
}
.feature-box:hover {
  border-color: rgba(14,165,233,.3);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(14,165,233,.1);
  background: #040c12;
}
.feature-box .icon-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.6rem;
  transition: all .35s;
}
.ic-blue  { background:rgba(14,165,233,.1);  border:1px solid rgba(14,165,233,.25); color:var(--blue); }
.ic-green { background:rgba(34,197,94,.1);   border:1px solid rgba(34,197,94,.25);  color:var(--green); }
.ic-gold  { background:rgba(200,134,10,.1);  border:1px solid rgba(200,134,10,.25); color:var(--primary); }
.feature-box:hover .ic-blue  { background:var(--grad-blue);  border-color:transparent; color:#000; }
.feature-box:hover .ic-green { background:var(--grad-green); border-color:transparent; color:#000; }
.feature-box:hover .ic-gold  { background:var(--gradient);   border-color:transparent; color:#000; }
.feature-box h5 { font-family:'Montserrat',sans-serif; font-size:1rem; font-weight:700; color:#fff; margin-bottom:.6rem; }
/* .feature-box p  { color:#555; font-size:.86rem; margin:0; line-height:1.75; } */
.feature-box p  { color:#aca6a6; font-size:.86rem; margin:0; line-height:1.75; }

/* ========================================
   ECO PROGRESS BARS
   ======================================== */
.eco-progress { margin-bottom: 1.5rem; }
.eco-progress .label-row { display:flex; justify-content:space-between; margin-bottom:6px; }
.eco-progress .label-row span:first-child { color:#aaa; font-size:.86rem; font-weight:600; }
.eco-progress .label-row span:last-child  { font-size:.86rem; font-weight:700; }
.eco-progress .label-row .val-blue  { color:var(--blue); }
.eco-progress .label-row .val-green { color:var(--green); }
.eco-progress .label-row .val-gold  { color:var(--primary); }
.eco-progress .progress { height:6px; background:#111; border-radius:3px; overflow:hidden; }
.eco-progress .pb-blue  { background:var(--grad-blue);  transition:width 1.5s ease; }
.eco-progress .pb-green { background:var(--grad-green); transition:width 1.5s ease; }
.eco-progress .pb-gold  { background:var(--gradient);   transition:width 1.5s ease; }

/* ========================================
   PAGE HERO (inner pages)
   ======================================== */
.page-hero {
  padding: 160px 0 90px;
  background: #000;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(14,165,233,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,.3), rgba(34,197,94,.3), transparent);
}
.page-hero .label { display:inline-block; font-family:'Montserrat',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:4px; text-transform:uppercase; margin-bottom:14px; }
.page-hero h1 { font-size:clamp(2rem,4vw,3.8rem); color:#fff; margin-bottom:1rem; font-weight:900; }
.page-hero p  { color:#555; max-width:600px; margin:0 auto; font-size:1.05rem; }

.breadcrumb-bar { background:#050505; padding:12px 0; border-bottom:1px solid #0f0f0f; }
.breadcrumb-bar .breadcrumb { margin:0; background:transparent; justify-content:center; }
.breadcrumb-bar .breadcrumb-item, .breadcrumb-bar .breadcrumb-item a { color:#444; font-size:.8rem; }
.breadcrumb-bar .breadcrumb-item.active { color:var(--blue); }
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color:#333; }

/* ========================================
   CARDS — general dark cards
   ======================================== */
.pravara-card {
  background: #0a0a0a;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all .4s ease;
  height: 100%;
}
.pravara-card:hover {
  transform: translateY(-8px);
  border-color: var(--blue);
  box-shadow: 0 20px 50px rgba(14,165,233,.15);
}
.pravara-card .card-icon-wrap {
  height: 200px;
  display: flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #050505, #0a0e15);
}
.pravara-card .card-icon-wrap i { font-size:5rem; color:var(--blue); opacity:.6; }
.pravara-card .card-body { padding:1.5rem; }
.pravara-card .card-title { font-family:'Montserrat',sans-serif; font-weight:700; color:#fff; font-size:1.05rem; margin-bottom:.75rem; }
.pravara-card .card-text  { color:#555; font-size:.88rem; line-height:1.75; }
.pravara-card .card-badge { display:inline-block; background:rgba(14,165,233,.1); color:var(--blue); font-size:.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:50px; border:1px solid rgba(14,165,233,.25); margin-bottom:10px; }

/* SPEC TABLE */
.spec-table { width:100%; border-collapse:separate; border-spacing:0 6px; }
.spec-table td { padding:10px 16px; }
.spec-table tr td:first-child { background:#060d14; color:var(--blue); font-family:'Montserrat',sans-serif; font-weight:600; font-size:.85rem; border-radius:8px 0 0 8px; width:40%; }
.spec-table tr td:last-child   { background:#0a0a0a; color:#aaa; font-size:.86rem; border-radius:0 8px 8px 0; }

/* NEWS CARD */
.news-card { background:#0a0a0a; border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:all .4s; height:100%; }
.news-card:hover { border-color:var(--blue); transform:translateY(-6px); box-shadow:0 20px 50px rgba(14,165,233,.12); }
.news-card .img-wrap { height:200px; background:linear-gradient(135deg,#050a10,#08121e); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.news-card .img-wrap .cat-tag { position:absolute; top:14px; left:14px; background:var(--blue); color:#000; font-size:.65rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:50px; }
.news-card .news-body   { padding:1.4rem; }
.news-card .news-meta   { color:#444; font-size:.76rem; margin-bottom:.75rem; display:flex; gap:14px; }
.news-card .news-meta i { color:var(--blue); margin-right:4px; }
.news-card h5 { font-family:'Montserrat',sans-serif; color:#ddd; font-size:.96rem; margin-bottom:.75rem; line-height:1.5; }
.news-card p  { color:#555; font-size:.85rem; }
.news-card .read-more { color:var(--blue); font-size:.8rem; font-weight:700; display:inline-flex; align-items:center; gap:6px; transition:gap .3s; }
.news-card:hover .read-more { gap:10px; }

/* CERT BADGE */
.cert-badge { background:#080808; border:1px solid var(--border); border-radius:16px; padding:2rem; text-align:center; transition:all .3s; height:100%; }
.cert-badge:hover { border-color:var(--blue); transform:translateY(-5px); box-shadow:0 15px 40px rgba(14,165,233,.12); }
.cert-badge .cert-icon { font-size:3.5rem; margin-bottom:1rem; }
.cert-badge h5 { font-family:'Montserrat',sans-serif; color:#fff; font-size:1rem; margin-bottom:.5rem; }
.cert-badge p  { color:#555; font-size:.84rem; margin:0; }

/* HIGHLIGHT BOX */
.highlight-box { background:rgba(14,165,233,.06); border-left:4px solid var(--blue); border-radius:0 12px 12px 0; padding:1.5rem 2rem; margin:1.5rem 0; }
.highlight-box p { color:#aaa; margin:0; font-style:italic; }

/* GOLD DIVIDER */
.gold-divider { height:3px; width:50px; background:var(--grad-mix); border-radius:2px; margin-bottom:1.5rem; }
.gold-line { width:60px; height:3px; background:var(--grad-mix); border-radius:2px; margin:16px auto 0; }

/* ========================================
   CONTACT FORM
   ======================================== */
.contact-card { background:#080808; border:1px solid var(--border); border-radius:20px; padding:2.5rem; }
.form-control-dark { background:#050505 !important; border:1px solid #1a1a1a !important; color:#ddd !important; border-radius:10px !important; padding:12px 16px !important; font-size:.88rem !important; transition:border-color .3s !important; }
.form-control-dark:focus { border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(14,165,233,.12) !important; outline:none !important; }
.form-control-dark::placeholder { color:#333 !important; }
.form-label-dark { color:#666; font-size:.8rem; font-weight:600; letter-spacing:.5px; font-family:'Montserrat',sans-serif; margin-bottom:6px; display:block; }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:1.75rem; }
.contact-info-item .icon-box { width:50px; height:50px; min-width:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.ib-blue  { background:rgba(14,165,233,.1);  border:1px solid rgba(14,165,233,.2);  color:var(--blue);  }
.ib-green { background:rgba(34,197,94,.1);   border:1px solid rgba(34,197,94,.2);   color:var(--green); }
.ib-gold  { background:rgba(200,134,10,.1);  border:1px solid rgba(200,134,10,.2);  color:var(--primary); }
.contact-info-item h6 { font-family:'Montserrat',sans-serif; color:#fff; font-size:.86rem; margin-bottom:3px; }
.contact-info-item p  { color:#fefefe; font-size:.84rem; margin:0; }

/* FAQ ACCORDION */
.faq-accordion .accordion-item { background:#080808; border:1px solid var(--border); border-radius:12px !important; margin-bottom:10px; overflow:hidden; }
.faq-accordion .accordion-button { background:#080808; color:#ddd; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.92rem; box-shadow:none; padding:1.2rem 1.5rem; }
.faq-accordion .accordion-button:not(.collapsed) { background:#040c12; color:var(--blue); box-shadow:none; }
.faq-accordion .accordion-button::after { filter:invert(50%) sepia(80%) saturate(600%) hue-rotate(170deg); }
.faq-accordion .accordion-body { background:#030303; color:#666; padding:1rem 1.5rem 1.5rem; font-size:.88rem; line-height:1.85; }

/* TIMELINE */
.timeline { position:relative; padding:20px 0; }
.timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--blue),var(--green),transparent); transform:translateX(-50%); }
.timeline-item { display:flex; justify-content:flex-end; padding-right:calc(50% + 40px); margin-bottom:40px; position:relative; }
.timeline-item:nth-child(even) { justify-content:flex-start; padding-right:0; padding-left:calc(50% + 40px); }
.timeline-item::after { content:''; position:absolute; left:50%; top:20px; width:14px; height:14px; background:var(--blue); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 0 4px rgba(14,165,233,.2); }
.timeline-content { background:#0a0a0a; border:1px solid var(--border); border-radius:12px; padding:1.25rem 1.5rem; max-width:420px; }
.timeline-content .year { color:var(--blue); font-family:'Montserrat',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:2px; margin-bottom:6px; }
.timeline-content h6 { color:#fff; font-family:'Montserrat',sans-serif; margin-bottom:6px; }
.timeline-content p  { color:#fefefe; font-size:.86rem; margin:0; }

/* ========================================
   CTA SECTION
   ======================================== */
.cta-section {
  background: linear-gradient(135deg, #040c14 0%, #030d06 50%, #040c14 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(14,165,233,.1);
  border-bottom: 1px solid rgba(34,197,94,.1);
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(14,165,233,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(34,197,94,.07) 0%, transparent 50%);
}

/* ========================================
   FOOTER
   ======================================== */
.pravara-footer { background:#000; border-top:1px solid #0f0f0f; padding:80px 0 30px; }
.footer-brand img { height:50px; filter:drop-shadow(0 0 12px rgba(14,165,233,.25)); margin-bottom:1rem; }
.footer-brand p { color:#fefefe; font-size:.88rem; line-height:1.85; }
.footer-title { font-family:'Montserrat',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; margin-bottom:1.5rem; }
.ft-blue  { color:var(--blue); }
.ft-green { color:var(--green); }
.ft-gold  { color:var(--primary); }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:10px; }
.footer-links a { color:#fefefe; font-size:.86rem; transition:color .3s; display:flex; align-items:center; gap:8px; }
.footer-links a i { font-size:.65rem; }
.footer-links a:hover { color:var(--blue); }
.footer-social { display:flex; gap:10px; margin-top:1.25rem; }
.footer-social a { width:38px; height:38px; border-radius:10px; border:1px solid #151515; display:flex; align-items:center; justify-content:center; color:#fefefe; font-size:.9rem; transition:all .3s; }
.footer-social a:hover { background:var(--grad-mix); border-color:transparent; color:#000; transform:translateY(-3px); }
.footer-bottom { border-top:1px solid #0f0f0f; padding-top:24px; margin-top:50px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { color:#fefefe; font-size:.8rem; margin:0; }
.footer-bottom span { background:var(--grad-mix); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:600; }

/* ========================================
   SCROLL TO TOP
   ======================================== */
#scrollTop { position:fixed; bottom:30px; right:30px; width:46px; height:46px; background:var(--grad-mix); color:#000; border:none; border-radius:12px; font-size:1.1rem; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:9998; box-shadow:0 8px 24px rgba(14,165,233,.4); transition:transform .3s; }
#scrollTop:hover { transform:translateY(-4px); }

/* ========================================
   ANIMATIONS & FADE-UP
   ======================================== */
.fade-up { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up-delay-1 { transition-delay: .15s; }
.fade-up-delay-2 { transition-delay: .3s; }
.fade-up-delay-3 { transition-delay: .45s; }

/* Split word animation */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease, transform .6s ease;
}
.split-word.visible { opacity: 1; transform: translateY(0); }

/* Glow pulse on key numbers */
@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 10px rgba(14,165,233,.3); }
  50%      { text-shadow: 0 0 30px rgba(14,165,233,.7), 0 0 60px rgba(34,197,94,.3); }
}
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
  .mega-menu { width: 720px; }
}

@media (max-width: 991px) {
  .pravara-nav .nav-link { padding: .65rem 1rem !important; }
  .mega-menu { position: relative; transform: none; left: auto; width: 100%; border-radius: 12px; margin-top: 8px; }
  .has-mega:hover .mega-menu { transform: none; }
  .timeline::before { left: 20px; }
  .timeline-item, .timeline-item:nth-child(even) { justify-content:flex-start; padding-left:56px; padding-right:0; }
  .timeline-item::after { left: 20px; }
  .timeline-content { max-width: 100%; }
  .hero-h1 { font-size: 2.8rem; }
}

@media (max-width: 768px) {
  .mega-menu { display: none; }
  .hero-h1 { font-size: 2.2rem; letter-spacing: -.5px; }
  .stat-strip .col-6:nth-child(2) .stat-item::before { display:none; }
}

@media (max-width: 576px) {
  .hero-h1 { font-size: 1.8rem; }
  .footer-bottom { text-align:center; justify-content:center; }
  .pin-text-stage { padding: 1rem; }
}