/* ============================================================
   GEF LANDING PAGE — ORGANIZED STYLES
   Table of contents
   01. Variables & Base
   02. Typography
   03. Buttons (ONE shared system)
   04. Header & Navigation
   05. Hero
   06. Stats
   07. Enquiry Card / Widget
   08. About GEF
   09. Flagship
   10. Experience
   11. Why
   12. Ecosystem
   13. Voices
   14. Partners
   15. Gallery
   16. Final CTA
   17. Footer
   18. Utility / Contact pages
   19. Section responsive (general)
   ============================================================ */


/* ============================================================
   01. VARIABLES & BASE
   ============================================================ */
:root {
  --navy: #0A2647;
  --navy-deep: #071B33;
  --paper: #F3F5F7;
  --white: #FFFFFF;
  --ink: #101820;
  --ink-soft: #4B5A68;
  --gold: #C9973B;
  --gold-deep: #A97C28;
  --line: #DFE4E8;
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Button tokens (used by every button) */
  --btn-gold: #d7aa63;
  --btn-gold-hover: #e6bd7d;
  --btn-height: 48px;
  --btn-pad: 0 24px;
  --btn-radius: 6px;
  --btn-font-size: 0.88rem;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1180px;
  --radius: 4px;
  --header-h: 84px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
}

input, select, textarea { font-family: var(--font-body); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 10px 16px;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Page wrappers share body font */
.page-main, .about-main, .event-main, .register-main, .speaker-main { font-family: var(--font-body); }

.page-main h1, .page-main h2, .page-main h3,
.about-main h1, .about-main h2, .about-main h3, .about-main h4,
.event-main h1, .event-main h2, .event-main h3, .event-main h4,
.register-main h1, .register-main h2, .register-main h3,
.speaker-main h1, .speaker-main h2, .speaker-main h3 { font-family: var(--font-display); }


/* ============================================================
   02. TYPOGRAPHY
   ============================================================ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  color: var(--navy);
}

.kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-deep);
  margin: 0 0 10px;
}
.kicker-light { color: var(--gold); }
.light-heading { color: var(--white); }


/* ============================================================
   03. BUTTONS — one shared system
   Same size, shape, font, transition and hover motion everywhere.
   Variants: PRIMARY (gold) · GHOST (dark text) · GHOST-LIGHT (on dark bg)
   ============================================================ */

/* --- Shared base --- */
.btn,
.flagship-btn-primary,
.flagship-btn-outline,
.link-arrow,
.voices-view-more,
.contact-form .btn-primary,
.cta-final .btn-primary,
.cta-final .btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--btn-height);
  padding: var(--btn-pad);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease;
}

/* --- PRIMARY (gold) --- */
.btn-primary,
.flagship-btn-primary,
.contact-form .btn-primary,
.cta-final .btn-primary {
  background: var(--btn-gold);
  border-color: var(--btn-gold);
  color: var(--navy-deep);
  box-shadow: 0 10px 25px rgba(215, 170, 99, 0.18);
}
.btn-primary:hover,
.flagship-btn-primary:hover,
.contact-form .btn-primary:hover,
.cta-final .btn-primary:hover {
  transform: translateY(-3px);
  background: var(--btn-gold-hover);
  border-color: var(--btn-gold-hover);
  box-shadow: 0 16px 34px rgba(215, 170, 99, 0.24);
}

/* --- GHOST (on light backgrounds) --- */
.btn-ghost,
.link-arrow,
.voices-view-more {
  background: transparent;
  border-color: rgba(10, 38, 71, 0.22);
  color: var(--navy);
}
.btn-ghost:hover,
.link-arrow:hover,
.voices-view-more:hover {
  transform: translateY(-3px);
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 12px 28px rgba(10, 38, 71, 0.18);
}

/* --- GHOST-LIGHT (on dark backgrounds) --- */
.btn-ghost-light,
.flagship-btn-outline,
.cta-final .btn-ghost-light,
.experience-card-accent .link-arrow {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.btn-ghost-light:hover,
.flagship-btn-outline:hover,
.cta-final .btn-ghost-light:hover,
.experience-card-accent .link-arrow:hover {
  transform: translateY(-3px);
  background: rgba(215, 170, 99, 0.06);
  border-color: var(--btn-gold);
  color: var(--btn-gold);
  box-shadow: none;
}

/* --- Arrow icon (link-arrow + view-more) --- */
.link-arrow::after,
.voices-view-more::after,
.flagship-btn-primary span {
  transition: transform 0.25s ease, background 0.25s ease;
}
.link-arrow::after,
.voices-view-more::after {
  content: "→";
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--btn-gold);
  color: var(--navy-deep);
  font-size: 0.95rem;
  line-height: 1;
}
.link-arrow:hover::after,
.voices-view-more:hover::after { transform: translateX(3px); }
.flagship-btn-primary:hover span { transform: translateX(5px); }

.voices-view-more { min-width: 158px; }
.voices-view-more-wrap { display: flex; justify-content: center; margin-top: 34px; }
.view-all { display: inline-block; margin-top: 30px; }

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}


/* ============================================================
   04. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}


#site-header-placeholder {
  display: block;
  min-height: var(--header-h, 84px);
  position: sticky;
  top: 0;
  z-index: 1000;
}
#site-header-placeholder:has(.site-header) { min-height: 0; }

.header-inner {
  position: relative;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: auto;
}
.logo img { display: block; height: 62px; width: auto; max-width: 220px; }

.main-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  flex: none;
}
.main-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a,
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-toggle { border: 0; background: transparent; cursor: pointer; }
.main-nav a:hover,
.dropdown-toggle:hover { color: var(--gold-deep); }

.has-dropdown { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(10, 38, 71, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 30;
}

/* Keep dropdown menu items stacked vertically on desktop. */
.main-nav .dropdown {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

.has-dropdown:hover .dropdown,
.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown li { width: 100%; }
.dropdown li a { display: block; width: 100%; padding: 10px 12px; border-radius: 4px; }
.dropdown li a:hover { background: var(--paper); }

.header-cta {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 10px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .header-inner { gap: 18px; }
  .logo img { height: 54px; max-width: 185px; }
  .main-nav ul { gap: 16px; }
  .main-nav a, .dropdown-toggle { font-size: 0.88rem; }
  .header-cta { padding-left: 14px; padding-right: 14px; font-size: 0.86rem; }
}

@media (max-width: 900px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  #site-header-placeholder { min-height: 74px; }

  .site-header { width: 100%; max-width: 100%; }

  .header-inner {
    width: 100%;
    max-width: 100%;
    min-height: 74px;
    gap: 8px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .logo { flex: 1 1 auto; min-width: 0; }
  .logo img { height: 46px; max-width: 150px; }

  /* compact header button so it fits next to the logo + menu icon */
  .header-cta { margin-left: auto; min-height: 38px; padding: 0 12px; font-size: 12px; }

  .nav-toggle { display: flex; position: relative; flex: 0 0 40px; width: 40px; height: 40px; margin-left: 2px; z-index: 1002; }

  .main-nav {
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(10, 38, 71, 0.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 1000;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

  .main-nav > ul { width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 18px 18px; }
  .main-nav > ul > li { width: 100%; }

  .main-nav > ul > li > a,
  .dropdown-toggle {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 4px;
    font-size: 15px;
    border-bottom: 1px solid rgba(10, 38, 71, 0.08);
  }
  .dropdown-toggle { border-left: 0; border-right: 0; border-top: 0; text-align: left; }
  .main-nav > ul > li:last-child > a { border-bottom: 0; }

  .dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0 0 0 14px;
    background: #faf8f3;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
  }
  .has-dropdown.is-open .dropdown { display: block; }
  .dropdown li a { padding: 11px 10px; font-size: 14px; border-bottom: 1px solid rgba(10, 38, 71, 0.06); border-radius: 0; }
  .dropdown li:last-child a { border-bottom: 0; }
}

@media (max-width: 480px) {
  #site-header-placeholder { min-height: 68px; }
  .header-inner { min-height: 68px; gap: 6px; padding-left: 10px; padding-right: 10px; }
  .logo img { height: 40px; max-width: 125px; }
  .header-cta { min-height: 36px; padding: 0 9px; font-size: 11px; }
  .nav-toggle { width: 36px; height: 36px; flex-basis: 36px; margin-left: 0; }
  .nav-toggle span { width: 21px; }
  .main-nav > ul { padding: 10px 15px 16px; }
  .main-nav > ul > li > a, .dropdown-toggle { min-height: 46px; padding: 11px 3px; font-size: 14px; }
}

@media (max-width: 360px) {
  .header-inner { padding-left: 8px; padding-right: 8px; gap: 4px; }
  .logo img { height: 36px; max-width: 108px; }
  .header-cta { min-height: 34px; padding: 0 8px; font-size: 10px; }
  .nav-toggle { width: 34px; height: 34px; flex-basis: 34px; }
  .nav-toggle span { width: 20px; }
}


/* ============================================================
   05. HERO
   ============================================================ */

/* --- Base --- */
.hero {
  position: relative;
  width: 100%;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 70px 0;
  color: #fff;
  background:
    radial-gradient(circle at 80% 45%, rgba(18, 90, 145, 0.22), transparent 26%),
    radial-gradient(circle at 15% 10%, rgba(215, 170, 99, 0.10), transparent 25%),
    linear-gradient(135deg, #020a14 0%, #06182a 40%, #071f38 70%, #020a13 100%);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(1,8,18,0.95) 0%, rgba(1,8,18,0.72) 38%,
    rgba(1,8,18,0.15) 67%, rgba(1,8,18,0.45) 100%);
  pointer-events: none;
  z-index: 3;
}

/* --- Layout & text --- */
.hero-layout {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  align-items: center;
  gap: clamp(45px, 6vw, 90px);
  width: 100%;
}

.hero-content {
  position: relative;
  max-width: 800px;
  z-index: 10;
  transition: transform 0.15s ease-out;
}

.hero-eyebrow {
  margin: 0 0 16px;
  color: rgba(255,255,255,0.72);
  font-size: clamp(0.78rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero h1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 10px;
  line-height: 0.95;
}

.hero-gef {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 500;
  text-shadow: 0 0 35px rgba(67, 145, 210, 0.18);
}

.hero-pune {
  color: #d3a052;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.5vw, 5.9rem);
  font-weight: 600;
  text-shadow: 0 0 30px rgba(211,160,82,0.16);
}

.hero h2 {
  margin: 14px 0 5px;
  color: rgba(255,255,255,0.94);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  letter-spacing: 0.025em;
}

.hero-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #d3a052;
  font-size: clamp(0.88rem, 1.35vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.15em;
}
.hero-subtitle::before,
.hero-subtitle::after { content: ""; width: 65px; height: 1px; }
.hero-subtitle::before { background: linear-gradient(90deg, transparent, #d3a052); }
.hero-subtitle::after  { background: linear-gradient(90deg, #d3a052, transparent); }

.hero-event-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,0.86);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hero-meta-icon {
  color: #d3a052;
  font-size: 1.15rem;
  filter: drop-shadow(0 0 8px rgba(211,160,82,0.6));
}

/* --- Offer box --- */
.hero-offer {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding: 15px 23px;
  border: 1px solid rgba(211,160,82,0.42);
  border-radius: 10px;
  background: rgba(5, 19, 33, 0.68);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.24);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.hero-offer:hover { transform: translateY(-4px); border-color: rgba(211,160,82,0.75); }
.hero-offer-item { display: flex; flex-direction: column; align-items: center; }
.hero-offer-item strong { color: #fff; }
.hero-offer-item span { color: #d3a052; font-weight: 700; letter-spacing: 0.12em; }
.hero-offer-divider { width: 1px; height: 46px; background: rgba(211,160,82,0.35); }
.hero-coupon { display: flex; flex-direction: column; gap: 5px; }
.hero-coupon small { color: rgba(255,255,255,0.6); font-weight: 700; letter-spacing: 0.15em; }
.hero-coupon strong {
  padding: 5px 12px;
  border-radius: 5px;
  background: #d3a052;
  color: #071727;
  font-size: 1.05rem;
}
.hero-register-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 800;
  line-height: 1.05;
  transition: transform 0.3s ease;
}
.hero-register-link span { color: #d3a052; }
.hero-register-link:hover { transform: translateY(-4px); }

/* --- Stars / glow --- */
.hero-stars { position: absolute; inset: -20%; pointer-events: none; z-index: 0; }
.hero-stars-1 {
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.34;
  animation: starsMove 30s linear infinite;
}
.hero-stars-2 {
  background-image: radial-gradient(rgba(215,170,99,0.9) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: 0.3;
  animation: starsMoveReverse 45s linear infinite;
}
.hero-stars-3 {
  background-image: radial-gradient(rgba(211,160,82,.85) 1.4px, transparent 1.4px);
  background-size: 120px 120px;
  opacity: .20;
  animation: starsPulse 5s ease-in-out infinite alternate;
}
@keyframes starsMove        { to { transform: translate3d(-100px, 70px, 0); } }
@keyframes starsMoveReverse { to { transform: translate3d(100px, -80px, 0); } }
@keyframes starsPulse       { to { opacity: .45; } }

.hero-mouse-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,152,219,0.15) 0%, rgba(53,152,219,0.07) 35%, transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(15px);
  pointer-events: none;
  z-index: 1;
  transition: left 0.12s ease-out, top 0.12s ease-out;
}

/* --- Global network (rings, nodes, labels, planes) --- */
.global-network {
  position: absolute;
  width: 760px;
  height: 760px;
  right: -180px;
  top: -110px;
  pointer-events: none;
  z-index: 1;
}
.network-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(82,168,228,.13);
}
.network-ring-1 { width: 400px; height: 400px; margin: -200px; animation: networkSpin 24s linear infinite; }
.network-ring-2 { width: 560px; height: 560px; margin: -280px; border-style: dashed; animation: networkSpinReverse 35s linear infinite; }
.network-ring-3 { width: 720px; height: 720px; margin: -360px; opacity: .55; animation: networkSpin 50s linear infinite; }
@keyframes networkSpin        { to { transform: rotate(360deg); } }
@keyframes networkSpinReverse { to { transform: rotate(-360deg); } }

.network-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d3a052;
  box-shadow: 0 0 12px #d3a052, 0 0 30px rgba(211,160,82,.55);
  animation: nodePulse 2.5s ease-in-out infinite;
}
.node-1 { top: 17%; left: 35%; }
.node-2 { top: 42%; right: 10%; }
.node-3 { bottom: 15%; left: 30%; }
.node-4 { top: 68%; right: 28%; }
.node-5 { top: 30%; right: 40%; }
@keyframes nodePulse { 50% { transform: scale(1.8); opacity: .55; } }

.global-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(4,18,31,.65);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.72);
  font-size: .62rem;
  letter-spacing: .16em;
  z-index: 7;
}
.global-label span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d3a052;
  box-shadow: 0 0 8px #d3a052;
  animation: labelBlink 1.8s infinite;
}
@keyframes labelBlink { 50% { opacity: .35; } }
.label-india  { right: 37%; top: 30%; }
.label-dubai  { right: 7%;  top: 26%; }
.label-europe { right: 22%; top: 12%; }

.flight-trail {
  position: absolute;
  width: 250px;
  height: 100px;
  border-top: 1px solid rgba(211,160,82,.45);
  border-radius: 50%;
  opacity: .7;
  z-index: 1;
}
.trail-1 { right: 30%; top: 20%; transform: rotate(15deg); }
.trail-2 { right: 7%;  top: 40%; width: 360px; transform: rotate(-12deg); }
.trail-3 { right: 19%; bottom: 13%; width: 310px; transform: rotate(5deg); }

.moving-plane {
  position: absolute;
  color: #f2bd66;
  text-shadow: 0 0 10px #f2bd66;
  font-size: 13px;
  z-index: 8;
}
.plane-1 { top: 17%; left: -30px; animation: flyAcross 11s linear infinite; }
.plane-2 { top: 52%; left: -50px; animation: flyAcross2 15s linear infinite 3s; }
@keyframes flyAcross {
  from { transform: translateX(0) translateY(0) rotate(-8deg); }
  to   { transform: translateX(1600px) translateY(100px) rotate(-8deg); }
}
@keyframes flyAcross2 {
  from { transform: translateX(0) translateY(0) rotate(10deg); }
  to   { transform: translateX(1600px) translateY(-130px) rotate(10deg); }
}

/* --- Earth scene (v1) --- */
.earth-scene {
  position: absolute;
  width: 520px;
  height: 520px;
  right: 13%;
  top: 48%;
  transform: translateY(-50%);
  z-index: 2;
}
.earth-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 390px;
  height: 390px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1px solid rgba(89,185,239,.22);
  box-shadow: 0 0 60px rgba(50,153,217,.25);
  animation: auraPulse 4s ease-in-out infinite;
}
@keyframes auraPulse { 50% { transform: translate(-50%,-50%) scale(1.08); opacity: .6; } }

.orbit-a { width: 440px; height: 250px; margin-left: -220px; margin-top: -125px; transform: rotate(-18deg); animation: orbitA 11s linear infinite; }
.orbit-b { width: 500px; height: 310px; margin-left: -250px; margin-top: -155px; animation: orbitB 15s linear infinite reverse; }
.orbit-c { width: 545px; height: 220px; margin-left: -272px; margin-top: -110px; transform: rotate(24deg); animation: orbitC 19s linear infinite; }
@keyframes orbitA { to { transform: rotate(342deg); } }
@keyframes orbitB { to { transform: rotate(360deg); } }
@keyframes orbitC { to { transform: rotate(384deg); } }

.sat-panel.left  { left: 0; }
.sat-panel.right { right: 0; }

/* --- Dubai skyline --- */
.dubai-scene {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 410px;
  height: 430px;
  z-index: 4;
  opacity: .9;
  pointer-events: none;
}
.dubai-glow {
  position: absolute;
  width: 350px;
  height: 120px;
  bottom: 0;
  right: 0;
  background: radial-gradient(ellipse, rgba(212,160,82,.26), transparent 70%);
  filter: blur(25px);
  animation: cityGlow 4s ease-in-out infinite alternate;
}
@keyframes cityGlow { to { opacity: .45; } }

.burj {
  position: absolute;
  bottom: 0;
  right: 155px;
  width: 60px;
  height: 410px;
  filter: drop-shadow(0 0 22px rgba(65,156,211,.26));
}
.burj-base { position: absolute; bottom: 0; left: 12px; width: 36px; height: 150px;
  background: linear-gradient(90deg, #071521, #16364c, #071521);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.burj-mid { position: absolute; bottom: 140px; left: 18px; width: 25px; height: 140px;
  background: linear-gradient(90deg, #071521, #1b445e, #071521);
  clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.burj-top { position: absolute; bottom: 270px; left: 23px; width: 15px; height: 95px;
  background: linear-gradient(90deg, #081926, #25536d, #071521);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.burj-tip { position: absolute; bottom: 360px; left: 29px; width: 3px; height: 52px;
  background: linear-gradient(#d7b06b, #8da5b3);
  box-shadow: 0 0 8px rgba(211,160,82,.7); }
.burj-light {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e3b56d;
  box-shadow: 0 0 8px #e3b56d;
  animation: buildingBlink 2s infinite alternate;
}
.light-1 { bottom: 55px;  left: 25px; }
.light-2 { bottom: 130px; left: 32px; animation-delay: .4s; }
.light-3 { bottom: 215px; left: 27px; animation-delay: .8s; }
.light-4 { bottom: 305px; left: 29px; animation-delay: 1.2s; }
@keyframes buildingBlink { to { opacity: .25; } }

.building {
  position: absolute;
  bottom: 0;
  background: linear-gradient(90deg, #06121c, #153248, #071521);
  border-top: 1px solid rgba(211,160,82,.25);
}
.building::after {
  content: "";
  position: absolute;
  inset: 10px 6px;
  background-image: repeating-linear-gradient(to bottom, rgba(211,160,82,.28) 0 2px, transparent 2px 13px);
  opacity: .45;
  animation: windowsMove 4s ease-in-out infinite alternate;
}
@keyframes windowsMove { to { opacity: .8; } }
.building-1 { right: 340px; width: 40px; height: 125px; }
.building-2 { right: 295px; width: 48px; height: 175px; }
.building-3 { right: 235px; width: 52px; height: 115px; }
.building-4 { right: 90px;  width: 52px; height: 145px; }
.building-5 { right: 42px;  width: 40px; height: 105px; }
.building-6 { right: 5px;   width: 30px; height: 78px; }

/* --- Space scene / Earth (v2) --- */
.space-scene { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.earth-wrap {
  position: absolute;
  width: 510px;
  height: 510px;
  right: 14%;
  top: 51%;
  transform: translateY(-50%);
  transition: transform 0.15s ease-out;
}

.earth {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 330px;
  height: 330px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 38% 35%,
    rgba(68,169,222,0.9), rgba(14,76,125,0.9) 38%, #072b4b 63%, #02121f 100%);
  box-shadow:
    inset -55px -30px 75px rgba(0,0,0,0.65),
    inset 20px 8px 40px rgba(255,255,255,0.12),
    0 0 35px rgba(45,143,208,0.32),
    0 0 100px rgba(45,143,208,0.18);
  animation: earthFloat 7s ease-in-out infinite;
}
.earth::before {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse at 32% 38%, rgba(211,160,82,0.58) 0 7%, transparent 8%),
    radial-gradient(ellipse at 48% 30%, rgba(211,160,82,0.48) 0 9%, transparent 10%),
    radial-gradient(ellipse at 59% 50%, rgba(211,160,82,0.52) 0 11%, transparent 12%),
    radial-gradient(ellipse at 41% 67%, rgba(211,160,82,0.4) 0 7%, transparent 8%),
    radial-gradient(ellipse at 70% 65%, rgba(211,160,82,0.44) 0 8%, transparent 9%);
  animation: earthRotate 18s linear infinite;
}
.earth::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.28), transparent 22%);
  box-shadow: inset -60px -30px 70px rgba(0,0,0,0.55);
}
@keyframes earthRotate { to { transform: rotate(360deg); } }
@keyframes continentRotate { to { transform: rotate(360deg); } }
@keyframes earthFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-10px); }
}

.earth-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(79,175,229,0.2);
  box-shadow: 0 0 80px rgba(48,150,215,0.25);
  animation: earthPulse 4s ease-in-out infinite;
}
@keyframes earthPulse { 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.65; } }

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
}
.orbit-1 { width: 430px; height: 250px; margin-left: -215px; margin-top: -125px; transform: rotate(-18deg); animation: orbitSpin1 12s linear infinite; }
.orbit-2 { width: 475px; height: 310px; margin-left: -237px; margin-top: -155px; transform: rotate(28deg);  animation: orbitSpin2 17s linear infinite reverse; }
.orbit-3 { width: 520px; height: 210px; margin-left: -260px; margin-top: -105px; transform: rotate(8deg);   animation: orbitSpin3 21s linear infinite; }
@keyframes orbitSpin1 { to { transform: rotate(342deg); } }
@keyframes orbitSpin2 { to { transform: rotate(388deg); } }
@keyframes orbitSpin3 { to { transform: rotate(368deg); } }

.satellite {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 38px;
  height: 18px;
  transform: translateX(-50%);
}
.sat-body {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: #d3a052;
  box-shadow: 0 0 15px rgba(211,160,82,0.75);
}
.sat-panel {
  position: absolute;
  top: 5px;
  width: 12px;
  height: 8px;
  background: linear-gradient(90deg, #15416c, #3a75a7);
  border: 1px solid rgba(255,255,255,0.3);
}
.sat-panel-left  { left: 0; }
.sat-panel-right { right: 0; }

.space-line {
  position: absolute;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211,160,82,0.9), transparent);
  filter: drop-shadow(0 0 6px rgba(211,160,82,0.7));
}
.line-1 { left: -200px; top: 20%; animation: lineMove1 8s linear infinite; }
.line-2 { left: -300px; top: 52%; animation: lineMove1 12s linear infinite 2s; }
.line-3 { left: -260px; top: 75%; animation: lineMove1 10s linear infinite 5s; }
@keyframes lineMove1 {
  from { transform: translateX(0) rotate(-12deg); }
  to   { transform: translateX(1800px) rotate(-12deg); }
}

/* --- Intro (load-in) animation --- */
.hero-intro .hero-content   { opacity: 0; transform: translateY(18px) scale(0.985); }
.hero-intro .enquiryCard    { opacity: 0; transform: translateY(18px) !important; }
.hero-intro .earth-scene    { opacity: 0; transform: translateY(-50%) scale(0.92); }
.hero-intro .dubai-scene    { opacity: 0; transform: translateY(16px); }
.hero-intro .global-network { opacity: 0; transform: scale(0.96); }
.hero-intro::before         { opacity: 0; }
.hero-intro .orbit,
.hero-intro .hero-stars,
.hero-intro .flight-trail,
.hero-intro .moving-plane   { animation-play-state: paused; }

.hero.hero-ready .hero-content { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.9s ease, transform 0.9s ease; }
.hero.hero-ready .enquiryCard  { opacity: 1; transform: translateY(0) !important; transition: opacity 0.85s ease 0.15s, transform 0.85s ease 0.15s; }
.hero.hero-ready .earth-scene  { opacity: 1; transform: translateY(-50%) scale(1); transition: opacity 1.1s ease 0.15s, transform 1.1s cubic-bezier(.22,.61,.36,1) 0.15s; }
.hero.hero-ready .dubai-scene  { opacity: 0.9; transform: translateY(0); transition: opacity 1s ease 0.3s, transform 1s ease 0.3s; }
.hero.hero-ready .global-network { opacity: 1; transform: scale(1); transition: opacity 1s ease 0.25s, transform 1s ease 0.25s; }
.hero.hero-ready::before       { opacity: 1; transition: opacity 1.1s ease; }
.hero.hero-ready .orbit,
.hero.hero-ready .hero-stars,
.hero.hero-ready .flight-trail,
.hero.hero-ready .moving-plane { animation-play-state: running; }

/* --- Hero responsive --- */
@media (max-width: 1000px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 35px; }
  .earth-wrap { right: 2%; opacity: 0.6; transform: translateY(-50%) scale(0.8); }
}

@media (max-width: 900px) {
  .dubai-scene { opacity: .35; right: -130px; }
  .earth-scene { opacity: .5; right: -140px; }
  .global-label { display: none; }
}

@media (max-width: 768px) {
  .hero { min-height: auto; padding: 50px 0 35px; }
  .hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-content { text-align: center; }
  .hero h1, .hero-subtitle, .hero-event-meta { justify-content: center; }
  .hero-offer { margin-left: auto; margin-right: auto; }

  .dubai-scene { width: 300px; height: 320px; right: -120px; opacity: .28; }
  .burj { transform: scale(.72); transform-origin: bottom center; right: 110px; }
  .earth-scene { transform: translateY(-50%) scale(.72); right: -220px; opacity: .30; }
  .earth-wrap { width: 430px; height: 430px; right: -220px; top: 25%; opacity: 0.35; transform: scale(0.75); }
  .network-ring { opacity: .35; }

  .hero .enquiryCard { width: min(100%, 420px) !important; max-width: 420px !important; height: 420px !important; margin: 0 auto !important; }
  .hero .enquiryCard .npf_wgts,
  .hero .enquiryCard .npf_wgts iframe { height: 420px !important; }
}

@media (max-width: 520px) {
  .hero-gef { font-size: 3.3rem; }
  .hero-pune { font-size: 2.6rem; }
  .hero h2 { font-size: 0.95rem; }
  .hero-subtitle { font-size: 0.76rem; }
  .hero-subtitle::before, .hero-subtitle::after { width: 26px; }
  .hero-event-meta { flex-direction: column; gap: 8px; }
  .hero-offer { display: grid; width: 100%; grid-template-columns: 1fr; gap: 11px; padding: 17px; }
  .hero-offer-divider { width: 100%; height: 1px; }
  .hero-coupon { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero *, .hero::before, .hero::after { animation: none !important; transition: none !important; }
}


/* ============================================================
   06. STATS
   ============================================================ */
.stats { background: var(--navy); padding: 46px 0 30px; }
.stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; text-align: center; }
.stat { color: var(--white); }
.stat-number,
.stat-suffix {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 600;
}
.stat-suffix { color: var(--gold); }
.stat p { font-size: 0.86rem; color: rgba(255,255,255,0.72); margin-top: 6px; }
.stats-note {
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  margin: 18px auto 0;
  max-width: var(--container);
  padding: 0 28px;
}


/* ============================================================
   07. ENQUIRY CARD / WIDGET
   ============================================================ */
.enquiryCard { width: 100%; margin: 0; padding: 25px 20px; background: #fff; box-sizing: border-box; }

.enquiryTitle {
  margin: 0 0 15px;
  padding: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

.npf_wgts {
  display: block;
  width: 100% !important;
  min-height: 400px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 12px;
}
.npf_wgts iframe {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Hero version of the card */
.hero .enquiryCard {
  position: relative !important;
  width: 100% !important;
  max-width: 340px !important;
  height: 400px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  background: rgba(255,255,255,0.97) !important;
  overflow: hidden !important;
  box-shadow: 0 25px 70px rgba(0,0,0,0.42), 0 0 45px rgba(35,111,168,0.14);
  z-index: 20;
  transition: transform 0.15s ease-out;
}
.hero .enquiryCard .npf_wgts,
.hero .enquiryCard .npf_wgts iframe {
  width: 100% !important;
  height: 400px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   ABOUT GEF
============================================================ */

.about {
  position: relative;
  padding: 70px 0;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 92% 20%,
      rgba(164, 120, 59, 0.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfaf7 100%
    );
}


/* BACKGROUND GEF TEXT */

.about::before {
  content: "GEF";

  position: absolute;
  right: -25px;
  top: 10px;

  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(7rem, 16vw, 15rem);
  font-weight: 700;
  line-height: 1;

  color: rgba(18, 38, 63, 0.05);

  pointer-events: none;
  user-select: none;
}


/* ============================================================
   GRID
============================================================ */

.about-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(430px, 1fr);

  align-items: center;

  gap: clamp(40px, 5vw, 70px);
}


/* ============================================================
   LEFT CONTENT
============================================================ */

.about-content {
  min-width: 0;
}


.about-heading-wrap {
  max-width: 680px;
}


/* ============================================================
   KICKER
============================================================ */

/* .about .kicker {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  margin: 0 0 12px;

  font-size: 0.76rem;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #a4773b;
}


.about .kicker::before {
  content: "";

  width: 36px;
  height: 2px;

  background: #a4773b;
} */

/* ============================================================
   GLOBAL SECTION KICKER
============================================================ */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin: 0 0 12px;

  font-size: 0.76rem;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #a4773b;
}


/* DASH */

.kicker::before {
  content: "";

  display: block;

  width: 36px;
  height: 2px;

  flex: 0 0 36px;

  background: #a4773b;
}


/* ============================================================
   HEADING
============================================================ */

.about h2 {
  max-width: 650px;

  margin: 0 0 18px;

  font-family: var(--font-heading, Georgia, serif);

  font-size: clamp(2.2rem, 3.4vw, 3.7rem);
  font-weight: 500;

  line-height: 1.02;

  letter-spacing: -0.035em;

  color: var(--navy, #14263d);
}


.about h2 span {
  color: #a4773b;
}


/* ============================================================
   INTRO TEXT
============================================================ */

.about-intro {
  max-width: 650px;

  margin: 0 0 10px;

  font-size: clamp(0.98rem, 1.2vw, 1.05rem);

  line-height: 1.65;

  color: var(--ink, #2c3440);
}


.about-description {
  max-width: 650px;

  margin: 0 0 24px;

  font-size: 0.93rem;

  line-height: 1.65;

  color: var(--ink-soft, #68717d);
}


/* ============================================================
   FEATURE CARDS
============================================================ */

.about-points {
  display: grid;

  gap: 8px;

  margin: 0 0 24px;
}


.about-point {
  position: relative;

  display: block;

  padding: 13px 16px;

  border: 1px solid rgba(20, 38, 61, 0.08);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.78);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


.about-point:hover {
  transform: translateX(5px);

  border-color: rgba(164, 119, 59, 0.28);

  background: #ffffff;

  box-shadow:
    0 10px 25px
    rgba(20, 38, 61, 0.07);
}


.about-point-content {
  min-width: 0;
}


.about-point h3 {
  margin: 0 0 3px;

  font-family: var(--font-body, Arial, sans-serif);

  font-size: 0.98rem;
  font-weight: 650;

  line-height: 1.35;

  color: var(--navy, #14263d);
}


.about-point p {
  margin: 0;

  font-size: 0.85rem;

  line-height: 1.5;

  color: var(--ink-soft, #68717d);
}


/* ============================================================
   CTA
============================================================ */

.about-link {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  color: var(--navy, #14263d);

  font-size: 0.9rem;
  font-weight: 700;

  text-decoration: none;

  transition: color 0.3s ease;
}


.about-link-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: var(--navy, #14263d);

  color: #ffffff;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}


.about-link:hover {
  color: #a4773b;
}


.about-link:hover .about-link-icon {
  transform: translateX(4px);

  background: #a4773b;
}


/* ============================================================
   RIGHT VIDEO
============================================================ */

.about-media {
  position: relative;

  width: 100%;
  max-width: 630px;

  justify-self: end;
}


/* ============================================================
   VIDEO FRAME
============================================================ */

.about-video {
  position: relative;

  width: 100%;

  /* taller frame */
  aspect-ratio: 4 / 4.4;

  overflow: hidden;

  border-radius:
    6px 46px 6px 6px;

  background: transparent;

  box-shadow:
    0 24px 55px
    rgba(18, 38, 63, 0.15);

  isolation: isolate;
}


/* ============================================================
   FULL COVER POSTER IMAGE
============================================================ */

.about-video-poster {
  position: absolute;

  inset: 0;

  z-index: 3;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  background: transparent;

  transition:
    opacity 0.3s ease,
    transform 0.6s ease;
}


.about-video:hover .about-video-poster {
  transform: scale(1.02);
}


/* ============================================================
   CENTER PLAY BUTTON
============================================================ */

.about-video-play {
  position: absolute;

  z-index: 5;

  top: 50%;
  left: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 76px;
  height: 76px;

  padding: 0;
  margin: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.96);

  color:
    var(--navy, #14263d);

  transform:
    translate(-50%, -50%);

  cursor: pointer;

  box-shadow:
    0 0 0 12px
      rgba(255, 255, 255, 0.18),
    0 12px 35px
      rgba(0, 0, 0, 0.22);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    opacity 0.3s ease;
}


.about-video-play svg {
  display: block;

  width: 28px;
  height: 28px;

  margin-left: 4px;

  fill: currentColor;
}


.about-video-play:hover {
  transform:
    translate(-50%, -50%)
    scale(1.08);

  background: #a4773b;

  color: #ffffff;
}


.about-video-play:focus-visible {
  outline: 3px solid #ffffff;

  outline-offset: 6px;
}


/* ============================================================
   LOCAL VIDEO
============================================================ */

.about-local-video {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  /* fill frame */
  object-fit: cover;
  object-position: center;

  background: transparent;
}


/* ============================================================
   PLAYING STATE
============================================================ */

.about-video.is-playing .about-video-poster,
.about-video.is-playing .about-video-play {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


.about-video.is-playing .about-local-video {
  z-index: 6;
}


/* ============================================================
   DECORATIVE FRAME
============================================================ */

.about-decoration {
  position: absolute;

  width: 150px;
  height: 150px;

  right: -20px;
  bottom: -20px;

  border-right:
    2px solid
    rgba(164, 119, 59, 0.4);

  border-bottom:
    2px solid
    rgba(164, 119, 59, 0.4);

  z-index: -1;
}


/* ============================================================
   LARGE TABLET
============================================================ */

@media (max-width: 1100px) {

  .about {
    padding: 65px 0;
  }


  .about-grid {
    grid-template-columns:
      1fr 1fr;

    gap: 40px;
  }


  .about-media {
    max-width: 590px;
  }


  .about-video {
    aspect-ratio: 4 / 4;
  }

}



/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

  .about {
    padding: 60px 0;
  }


  .about-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .about-content {
    max-width: 750px;
  }


  .about-media {
    width: 100%;

    max-width: 680px;

    justify-self: center;
  }


  .about-video {
    aspect-ratio: 4 / 3.8;

    border-radius:
      6px 42px 6px 6px;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .about {
    padding: 48px 0;
  }


  .about::before {
    display: none;
  }


  .about-grid {
    gap: 30px;
  }


  .about .kicker {
    margin-bottom: 10px;

    font-size: 0.68rem;
  }


  .about .kicker::before {
    width: 28px;
  }


  .about h2 {
    margin-bottom: 15px;

    font-size:
      clamp(2rem, 10vw, 2.65rem);
  }


  .about-intro {
    font-size: 0.95rem;

    line-height: 1.6;
  }


  .about-description {
    margin-bottom: 20px;

    font-size: 0.88rem;

    line-height: 1.6;
  }


  .about-points {
    gap: 7px;

    margin-bottom: 22px;
  }


  .about-point {
    padding: 12px 14px;
  }


  .about-point:hover {
    transform: none;
  }


  .about-point h3 {
    font-size: 0.94rem;
  }


  .about-point p {
    font-size: 0.82rem;

    line-height: 1.5;
  }


  .about-link {
    font-size: 0.85rem;
  }


  .about-link-icon {
    width: 35px;
    height: 35px;
  }


  .about-media {
    max-width: 100%;
  }


  .about-video {
    aspect-ratio: 4 / 3.55;

    border-radius:
      4px 30px 4px 4px;
  }


  .about-video-play {
    width: 64px;
    height: 64px;

    box-shadow:
      0 0 0 9px
      rgba(255, 255, 255, 0.18),
      0 10px 28px
      rgba(0, 0, 0, 0.20);
  }


  .about-video-play svg {
    width: 23px;
    height: 23px;
  }


  .about-decoration {
    display: none;
  }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

  .about {
    padding: 42px 0;
  }


  .about-grid {
    gap: 26px;
  }


  .about-point {
    padding: 11px 13px;
  }


  .about-video {
    aspect-ratio: 4 / 3.4;
  }


  .about-video-play {
    width: 58px;
    height: 58px;
  }


  .about-video-play svg {
    width: 21px;
    height: 21px;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .about-point,
  .about-link-icon,
  .about-video-poster,
  .about-video-play {
    transition: none;
  }


  .about-point:hover,
  .about-link:hover .about-link-icon,
  .about-video:hover .about-video-poster,
  .about-video-play:hover {
    transform: none;
  }

}

/* ============================================================
   09. FLAGSHIP
   ============================================================ */
.flagship {
  position: relative;
  padding: 85px 0;
  background:
    radial-gradient(circle at 10% 30%, rgba(190,145,76,0.13), transparent 28%),
    radial-gradient(circle at 90% 80%, rgba(91,120,153,0.12), transparent 30%),
    var(--navy, #10253d);
  color: #fff;
  overflow: hidden;
}
.flagship::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 70px 70px;
  pointer-events: none;
}
.flagship-bg-text {
  position: absolute;
  right: -20px;
  bottom: -25px;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(7rem, 17vw, 17rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
}

.flagship-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(55px, 7vw, 100px);
  align-items: center;
}

/* --- Visual --- */
.flagship-visual { position: relative; width: 100%; max-width: 560px; }
.flagship-image-wrap {
  position: relative;
  height: 510px;
  border-radius: 40px 8px 40px 8px;
  overflow: hidden;
  box-shadow: 0 35px 80px rgba(0,0,0,0.32);
  isolation: isolate;
}
.flagship-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.65,.3,1), filter 0.6s ease;
}
.flagship-image-wrap:hover img { transform: scale(1.06); filter: saturate(1.08); }
.flagship-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,24,42,0.05) 10%, rgba(8,24,42,0.25) 48%, rgba(8,24,42,0.92) 100%);
  z-index: 1;
  pointer-events: none;
}
.flagship-image-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  left: -70px;
  top: -60px;
  border-radius: 50%;
  background: rgba(190,145,76,0.24);
  filter: blur(65px);
  z-index: 1;
  animation: flagshipGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes flagshipGlow {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.6; }
  100% { transform: translate3d(80px,70px,0) scale(1.25); opacity: 1; }
}

.flagship-date-badge {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 4;
  width: 110px;
  min-height: 128px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  background: rgba(10,29,49,0.9);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px 22px 4px 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
  animation: dateFloat 4s ease-in-out infinite;
}
@keyframes dateFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.flagship-month { color: #d7aa63; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; }
.flagship-day {
  margin: 3px 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 2.05rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: left;
}
.flagship-year { color: rgba(255,255,255,0.62); font-size: 0.78rem; letter-spacing: 0.1em; }

.flagship-image-info { position: absolute; left: 34px; right: 34px; bottom: 32px; z-index: 3; }
.flagship-image-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(205,158,87,0.95);
  border-radius: 4px;
  color: #10253d;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.flagship-image-info h3 {
  margin: 0 0 5px;
  color: #fff;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 500;
}
.flagship-image-info p { margin: 0; color: rgba(255,255,255,0.75); font-size: 0.88rem; }

.flagship-frame {
  position: absolute;
  width: 78%;
  height: 84%;
  left: -24px;
  bottom: -24px;
  border-left: 1px solid rgba(215,170,99,0.55);
  border-bottom: 1px solid rgba(215,170,99,0.55);
  border-radius: 0 0 0 26px;
  pointer-events: none;
  z-index: -1;
}
.flagship-dots {
  position: absolute;
  width: 95px;
  height: 95px;
  right: -35px;
  bottom: -26px;
  opacity: 0.3;
  background-image: radial-gradient(#d7aa63 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  z-index: -1;
}

/* --- Content --- */
.flagship-content { max-width: 650px; }
.flagship .kicker-light {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: #d7aa63;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.flagship .kicker-light::before { content: ""; width: 38px; height: 1px; background: #d7aa63; }

.flagship h2 {
  margin: 0 0 22px;
  color: #fff;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.5rem, 4.8vw, 4.3rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.flagship h2 span { display: block; color: #d7aa63; }

.flagship-lead {
  max-width: 590px;
  margin-bottom: 30px;
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.8;
}

.flagship-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 30px; }
.flagship-meta-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.flagship-meta-item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.07); border-color: rgba(215,170,99,0.32); }
.flagship-meta-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(215,170,99,0.12);
  color: #d7aa63;
  font-size: 0.7rem;
  font-weight: 700;
}
.flagship-meta-item span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.45);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.flagship-meta-item strong { display: block; color: #fff; font-size: 0.88rem; line-height: 1.45; }
.flagship-meta-item small { display: block; margin-top: 2px; color: rgba(255,255,255,0.5); font-size: 0.72rem; }

.flagship-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.flagship-highlights { display: flex; flex-wrap: wrap; gap: 8px; }
.flagship-highlights span {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 30px;
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

@media (max-width: 1000px) {
  .flagship { padding: 70px 0; }
  .flagship-grid { gap: 45px; }
  .flagship-image-wrap { height: 460px; }
  .flagship-meta { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .flagship { padding: 65px 0; }
  .flagship-grid { grid-template-columns: 1fr; gap: 50px; }
  .flagship-visual { max-width: 100%; }
  .flagship-image-wrap { height: 500px; }
  .flagship-content { max-width: 700px; }
  .flagship-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .flagship { padding: 52px 0; }
  .flagship-bg-text, .flagship-frame, .flagship-dots { display: none; }
  .flagship-grid { gap: 38px; }
  .flagship-image-wrap { height: 390px; border-radius: 28px 6px 28px 6px; }
  .flagship-date-badge { top: 16px; right: 16px; width: 92px; min-height: 108px; padding: 12px 10px; }
  .flagship-day { font-size: 1.7rem; }
  .flagship-image-info { left: 22px; right: 22px; bottom: 22px; }
  .flagship h2 { font-size: clamp(2.2rem, 11vw, 3.3rem); }
  .flagship-lead { font-size: 0.92rem; line-height: 1.7; }
  .flagship-meta { grid-template-columns: 1fr; }
  .flagship-actions { flex-direction: column; align-items: stretch; }
  .flagship-btn-primary, .flagship-btn-outline { width: 100%; }
}

@media (max-width: 380px) {
  .flagship-image-wrap { height: 350px; }
  .flagship-meta-item { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .flagship-image-wrap img, .flagship-date-badge, .flagship-image-glow,
  .flagship-meta-item, .flagship-btn-primary, .flagship-btn-outline { animation: none; transition: none; }
}



/* ============================================================
   EXPERIENCE SECTION
============================================================ */

.experience {
  padding: 80px 0;
}

.experience h2 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--navy);
}

.section-lead {
  max-width: 50ch;
  margin: 0 0 36px;
  color: var(--ink-soft);
}

/* ============================================================
   GRID - BOTH CARDS SAME HEIGHT
============================================================ */

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* ============================================================
   LEFT CONTENT CARD
============================================================ */

.experience-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}

.experience-card:not(.experience-card-image):not(.experience-card-platinum) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}

.exp-tag {
  margin: 0 0 10px !important;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-deep) !important;
}

.experience-card h3 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  color: var(--navy);
}

.experience-card p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.experience-card .link-arrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 2px;
  font-weight: 600;
  text-decoration: none;
}

/* ============================================================
   RIGHT PLATINUM IMAGE CARD
============================================================ */

.experience-card-link {
  display: block;
  text-decoration: none;
  width: 100%;
}

.experience-card-platinum {
  width: 100%;
  min-height: 240px;
  border: 1px solid rgba(209, 160, 83, 0.5);
  border-radius: 10px;

  background-image: url("images/Platinum Pass.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  cursor: pointer;
}
/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {
  .experience {
    padding: 65px 0;
  }

  .experience-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .experience-card:not(.experience-card-image):not(.experience-card-platinum) {
    padding: 28px;
  }

  .experience-card-platinum {
    min-height: 0;
    height: auto;
    aspect-ratio: 20 / 9;
  }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {
  .experience {
    padding: 50px 0;
  }

  .section-lead {
    margin-bottom: 28px;
  }

  .experience-grid {
    gap: 16px;
  }

  .experience-card:not(.experience-card-image):not(.experience-card-platinum) {
    padding: 24px 20px;
  }

  .experience-card h3 {
    font-size: 1.25rem;
  }

  .experience-card p {
    margin-bottom: 16px;
  }

  .experience-card-platinum {
    aspect-ratio: 22 / 10;
  }
}

/* ============================================================
   11. WHY
   ============================================================ */
.why { padding: 100px 0; background: var(--white); }
.why h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 44px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; background: transparent; border: 0; }
.why-card {
  background: var(--white);
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(10,38,71,.05);
}
.why-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.why-card p { color: var(--ink-soft); font-size: 0.95rem; }


/* ============================================================
   12. ECOSYSTEM
   ============================================================ */

.ecosystem {
  padding: 90px 20px 100px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 43% 48%,
      rgba(226, 188, 110, 0.11),
      transparent 28%
    ),
    #fffdf9;
}


.ecosystem .container {
  width: min(1180px, 100%);

  margin: 0 auto;
}


/* ============================================================
   SECTION KICKER
   ============================================================ */

.eco-kicker {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  margin: 0 0 14px;

  color: #c98b22;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;
}


.eco-kicker span {
  width: 28px;
  height: 1px;

  background: #d59b33;
}


/* ============================================================
   SECTION HEADING
   ============================================================ */

.eco-heading {
  margin: 0 0 55px;

  text-align: center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(36px, 4vw, 52px);

  font-weight: 400;

  color: #06366d;
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.ecosystem-layout {
  display: grid;

  grid-template-columns:
    minmax(600px, 1.5fr)
    minmax(320px, 0.75fr);

  gap: 70px;

  align-items: center;

  padding: 13px;

  border:
    1px solid
    rgba(6, 54, 109, 0.12);

  border-radius: 20px;

  background:
    rgba(255, 255, 255, 0.55);
}


/* ============================================================
   HEX NETWORK
   ============================================================ */

.hex-network {
  position: relative;

  width: 690px;
  height: 440px;

  margin: 0 auto;
}


.hex-item,
.hex-center {
  position: absolute;

  width: 156px;
  height: 136px;

  padding: 0;

  border: 0;

  background: transparent;

  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}


.hex-item {
  cursor: pointer;
}


.hex-center {
  cursor: default;
}


/* HEX OUTER SHAPE */

.hex-item::before,
.hex-center::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    var(--hex-color);

  clip-path:
    polygon(
      25% 0%,
      75% 0%,
      100% 50%,
      75% 100%,
      25% 100%,
      0% 50%
    );

  transition:
    background 0.35s ease,
    filter 0.35s ease;
}


/* INNER SHAPE */

.hex-inner,
.hex-center-inner {
  position: absolute;

  inset: 2px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 9px;

  clip-path:
    polygon(
      25% 0%,
      75% 0%,
      100% 50%,
      75% 100%,
      25% 100%,
      0% 50%
    );

  background: #fffefa;

  transition:
    background 0.35s ease,
    color 0.35s ease;
}


.hex-center-inner {
  background: #fffdf7;
}


/* LABEL */

.hex-item span {
  color: #073769;

  font-size: 16px;
  font-weight: 700;

  transition:
    color 0.35s ease;
}


/* ICON */

.hex-icon {
  font-size: 21px;

  line-height: 1;

  color:
    var(--hex-color);

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}


/* ============================================================
   HEX HOVER / ACTIVE
   ============================================================ */

.hex-item:hover {
  transform:
    translateY(-3px);

  filter:
    drop-shadow(
      0 12px 16px
      rgba(5, 45, 88, 0.08)
    );
}


.hex-item.active {
  transform:
    translateY(-3px);

  filter:
    drop-shadow(
      0 13px 18px
      color-mix(
        in srgb,
        var(--active-color, var(--hex-color)) 30%,
        transparent
      )
    );
}


/* HOVER */

.hex-item:hover .hex-inner,
.hex-item:focus-visible .hex-inner {
  background:
    var(--hex-color);
}


.hex-item:hover span,
.hex-item:hover .hex-icon,
.hex-item:focus-visible span,
.hex-item:focus-visible .hex-icon {
  color: #ffffff;
}


/* ACTIVE HEX USES JS COLOR */

.hex-item.active::before {
  background:
    var(--active-color, var(--hex-color));
}


.hex-item.active .hex-inner {
  background:
    var(--active-color, var(--hex-color));
}


.hex-item.active span,
.hex-item.active .hex-icon {
  color: #ffffff;
}


.hex-item.active .hex-icon {
  transform:
    scale(1.12);
}


/* KEYBOARD ACCESSIBILITY */

.hex-item:focus-visible {
  outline: none;
}


.hex-item:focus-visible::before {
  filter:
    drop-shadow(
      0 0 8px
      rgba(6, 54, 109, 0.25)
    );
}


/* ============================================================
   HEX COLORS / POSITIONS
   ============================================================ */

.partner {
  --hex-color: #d9aa59;

  left: 0;
  top: 151px;
}


.investors {
  --hex-color: #9066b7;

  left: 130px;
  top: 80px;
}


.government {
  --hex-color: #9fbbe0;

  left: 253px;
  top: 13px;
}


.academia {
  --hex-color: #95c5ca;

  left: 373px;
  top: 82px;
}


.startups {
  --hex-color: #9bc9aa;

  left: 510px;
  top: 151px;
}


.corporates {
  --hex-color: #b4c3e6;

  left: 130px;
  top: 220px;
}


.innovation {
  --hex-color: #dbbd77;

  left: 253px;
  top: 290px;
}


.entrepreneurs {
  --hex-color: #e1b193;

  left: 373px;
  top: 220px;
}


/* ============================================================
   CENTER HEX
   ============================================================ */

.hex-center {
  --hex-color: #dfb86b;

  left: 253px;
  top: 151px;
}


.hex-center img {
  width: 108px;
  height: auto;
}


/* ============================================================
   INFO CARD
   ============================================================ */

.eco-info-card {
  --active-color: #d2a058;

  position: relative;

  min-height: 245px;

  padding:
    28px 25px 25px;

  overflow: hidden;

  border-radius: 28px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--active-color) 88%,
        white
      ),
      var(--active-color)
    );

  box-shadow:
    0 28px 50px
    color-mix(
      in srgb,
      var(--active-color) 18%,
      transparent
    );

  transition:
    opacity 0.16s ease,
    transform 0.2s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}


/* DECORATIVE CIRCLE */

.eco-info-card::before {
  content: "";

  position: absolute;

  width: 160px;
  height: 160px;

  top: -90px;
  right: -50px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.10);

  pointer-events: none;
}


/* SECOND LIGHT GLOW */

.eco-info-card::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  left: -95px;
  bottom: -110px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.05);

  pointer-events: none;
}


/* ============================================================
   CARD TOP
   ============================================================ */

.eco-card-top {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 14px;
}


/* ICON */

.eco-card-icon {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  flex:
    0 0 44px;

  border:
    1px solid
    rgba(255, 255, 255, 0.26);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.16);

  color: #ffffff;

  font-size: 20px;

  transition:
    opacity 0.16s ease,
    transform 0.2s ease,
    background 0.35s ease;
}


/* LABEL */

.eco-card-label {
  margin: 0 0 7px;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 2px;

  color:
    rgba(255, 255, 255, 0.72);
}


/* TITLE */

.eco-info-card h3 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 25px;

  font-weight: 700;

  color: #ffffff !important;

  transition:
    opacity 0.16s ease,
    transform 0.2s ease;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.eco-card-description {
  position: relative;

  z-index: 2;

  max-width: 310px;

  margin:
    26px 0 21px;

  font-size: 14px;

  line-height: 1.65;

  color:
    rgba(255, 255, 255, 0.94);

  transition:
    opacity 0.16s ease,
    transform 0.2s ease;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.eco-card-line {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 1px;

  background:
    rgba(255, 255, 255, 0.22);
}


/* ============================================================
   FOOTER
   ============================================================ */

.eco-card-footer {
  position: relative;

  z-index: 2;

  margin:
    17px 0 0;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 2px;

  color:
    rgba(255, 255, 255, 0.68);
}


/* ============================================================
   CONTENT CHANGE ANIMATION
   ============================================================ */

.eco-info-card.changing {
  transform:
    translateY(3px);
}


.eco-info-card.changing h3,
.eco-info-card.changing .eco-card-description,
.eco-info-card.changing .eco-card-icon {
  opacity: 0;

  transform:
    translateY(4px);
}


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

@media (max-width: 1100px) {

  .ecosystem-layout {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .eco-info-card {
    width: min(520px, 100%);

    margin: 0 auto;
  }

}


@media (max-width: 760px) {

  .ecosystem {
    padding:
      65px 16px 75px;
  }


  .eco-heading {
    margin-bottom: 38px;

    font-size:
      clamp(31px, 8vw, 42px);
  }


  .ecosystem-layout {
    padding: 10px;

    gap: 35px;
  }


  .hex-network {
    transform:
      scale(0.82);

    transform-origin:
      top center;

    margin-bottom: -75px;
  }

}


@media (max-width: 600px) {

  .ecosystem {
    padding:
      55px 14px 65px;
  }


  .eco-kicker {
    font-size: 10px;

    letter-spacing: 2.2px;
  }


  .eco-heading {
    margin-bottom: 30px;
  }


  .ecosystem-layout {
    border-radius: 16px;

    padding:
      8px;
  }


  .hex-network {
    transform:
      scale(0.68);

    margin:
      0 auto -135px;

    transform-origin:
      top center;
  }


  .eco-info-card {
    min-height: auto;

    padding:
      24px 20px 22px;

    border-radius: 22px;
  }


  .eco-card-description {
    max-width: none;

    margin:
      21px 0 18px;
  }

}


@media (max-width: 430px) {

  .hex-network {
    transform:
      scale(0.55);

    margin-bottom: -195px;
  }


  .eco-info-card h3 {
    font-size: 22px;
  }


  .eco-card-icon {
    width: 40px;
    height: 40px;

    flex:
      0 0 40px;

    font-size: 18px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .hex-item,
  .hex-item::before,
  .hex-inner,
  .hex-icon,
  .eco-info-card,
  .eco-card-icon,
  .eco-card-description,
  .eco-info-card h3 {
    transition: none;
  }

}

/* --- Ecosystem responsive --- */
@media (max-width: 1050px) {
  .ecosystem { padding: 75px 20px 85px; }
  .ecosystem-layout { grid-template-columns: 1fr; gap: 40px; }
  .hex-network { margin-left: auto; margin-right: auto; }
  .eco-info-card { width: min(420px, calc(100% - 40px)); margin: 0 auto; }
}

@media (max-width: 760px) {
  .ecosystem { padding: 60px 16px 75px; }
  .eco-kicker { font-size: 10px; letter-spacing: 2px; }
  .eco-heading { font-size: clamp(30px, 7vw, 42px); line-height: 1.08; margin-bottom: 25px; }
  .ecosystem-layout { display: flex; flex-direction: column; align-items: center; gap: 25px; }
  .hex-network { transform: scale(0.78); transform-origin: top center; margin: 0 auto -95px; }
  .eco-info-card { width: min(420px, calc(100% - 24px)); margin: 0 auto; }
}

@media (max-width: 560px) {
  .ecosystem { padding: 50px 12px 65px; }
  .ecosystem .container { width: 100%; max-width: 100%; }
  .eco-kicker { font-size: 9px; letter-spacing: 1.8px; margin-bottom: 12px; }
  .eco-kicker span { width: 20px; }
  .eco-heading { font-size: 32px; line-height: 1.08; max-width: 320px; margin: 0 auto 28px; }
  .ecosystem-layout { width: 100%; gap: 18px; }
  .hex-network { flex: 0 0 auto; left: 50%; margin: 0 0 -175px -345px; transform: scale(0.58); transform-origin: top center; }
  .eco-info-card { width: calc(100% - 16px); max-width: 390px; min-height: auto; padding: 24px 20px 22px; margin: 0 auto; border-radius: 22px; }
  .eco-card-top { gap: 11px; }
  .eco-card-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 18px; }
  .eco-card-label { font-size: 9px; letter-spacing: 1.5px; }
  .eco-info-card h3 { font-size: 24px; }
  .eco-card-description { max-width: none; margin: 20px 0 18px; font-size: 13px; line-height: 1.6; }
  .eco-card-footer { font-size: 9px; letter-spacing: 1.4px; line-height: 1.5; }
}

@media (max-width: 430px) {
  .ecosystem { padding: 45px 10px 55px; }
  .eco-heading { font-size: 29px; max-width: 290px; margin-bottom: 20px; }
  .hex-network { left: 52%; margin-left: -345px; margin-bottom: -205px; transform: scale(0.50); }
  .eco-info-card { width: calc(100% - 10px); padding: 22px 18px 20px; }
}

@media (max-width: 360px) {
  .eco-heading { font-size: 27px; }
  .hex-network { transform: scale(0.45); margin-bottom: -225px; }
  .eco-info-card { padding: 20px 16px; }
  .eco-info-card h3 { font-size: 22px; }
}


/* ============================================================
   13. VOICES
   ============================================================ */
.voices { padding: 100px 0; }
.voices-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; }
.voices-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); max-width: 20ch; }

.voices-controls { display: none !important; }   /* arrows hidden: grid layout */
.voices-controls button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.voices-controls button:hover { border-color: var(--navy); }

.voices-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 20px;
  overflow: visible;
  scroll-snap-type: none;
  scrollbar-width: none;
  padding-bottom: 0;
}
.voices-track::-webkit-scrollbar { display: none; }

.voice-card {
  width: 100%;
  min-width: 0;
  flex: none;
  scroll-snap-align: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.voice-card img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.voice-card h3 { font-size: 0.98rem; font-family: var(--font-body); font-weight: 600; padding: 14px 16px 2px; }
.voice-card p { font-size: 0.82rem; color: var(--ink-soft); padding: 0 16px 16px; }

@media (max-width: 1100px) { .voices-track { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px)  { .voices-track { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } }
@media (max-width: 420px)  { .voices-track { grid-template-columns: 1fr; } }


/* ============================================================
   14. PARTNERS
   ============================================================ */
.partners { padding: 100px 0; background: var(--white); text-align: center; }
.partners h2 { max-width: 26ch; margin: 0 auto 48px; font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}
.partners-grid img {
  height: 80px;
  width: auto;
  margin: 0 auto;
  filter: none !important;
  opacity: 1 !important;
  transition: transform .25s ease !important;
}
.partners-grid img:hover { transform: translateY(-2px); }


/* ============================================================
   15. GALLERY
   ============================================================ */
.gallery { padding: 100px 0; }
.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 20px; }
.gallery-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 14px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.gallery-grid img:nth-child(4) { grid-column: span 2; }


/* ============================================================
   16. FINAL CTA
   ============================================================ */
.cta-final {
  position: relative;
  padding: 90px 0;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(215,170,99,0.14), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.05), transparent 28%),
    linear-gradient(135deg, #0d2035 0%, #132d49 55%, #0b1d30 100%);
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  left: -120px;
  top: -120px;
  border-radius: 50%;
  background: rgba(215,170,99,0.12);
  filter: blur(70px);
  pointer-events: none;
}
.cta-final::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -60px;
  bottom: -60px;
  border: 1px solid rgba(215,170,99,0.18);
  border-radius: 50%;
  pointer-events: none;
}
.cta-final-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 42px 30px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.cta-final .kicker-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #d7aa63;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cta-final .kicker-light::before,
.cta-final .kicker-light::after { content: ""; width: 26px; height: 1px; background: #d7aa63; }

.cta-final h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.cta-final p {
  max-width: 620px;
  margin: 0 auto 8px;
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.75;
}
.cta-final .hero-actions { justify-content: center; gap: 12px; margin-top: 30px; }

@media (max-width: 768px) {
  .cta-final { padding: 70px 0; }
  .cta-final-inner { max-width: 680px; padding: 36px 24px; }
  .cta-final h2 { font-size: clamp(2rem, 7vw, 3rem); }
  .cta-final p { font-size: 0.95rem; }
}

@media (max-width: 600px) {
  .cta-final { padding: 50px 0; }
  .cta-final-inner { padding: 30px 18px; border-radius: 16px; }
  .cta-final .kicker-light { font-size: 0.68rem; letter-spacing: 0.12em; }
  .cta-final .kicker-light::before,
  .cta-final .kicker-light::after { width: 18px; }
  .cta-final h2 { font-size: clamp(1.9rem, 9vw, 2.6rem); margin-bottom: 14px; }
  .cta-final p { font-size: 0.9rem; line-height: 1.65; }
  .cta-final .hero-actions { flex-direction: column; margin-top: 24px; }
  .cta-final .btn-primary,
  .cta-final .btn-ghost-light { width: 100%; }
}


/* ============================================================
   FOOTER
============================================================ */

.site-footer {
  padding: 28px 20px 24px;

  background:linear-gradient(180deg, #bdbdbd1a 0%, #faf8f2 100%)
}


.site-footer .container {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* MAIN CARD */

.footer-card {
  overflow: hidden;

  border: 1px solid #dfe3e8;

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 10px 30px
    rgba(20, 38, 61, 0.05);
}


/* ============================================================
   MAIN GRID
============================================================ */

.footer-main {
  display: grid;

  grid-template-columns:
    1.35fr
    1fr
    0.8fr
    1.15fr;

  align-items: center;

  gap: 34px;

  padding: 30px 28px 22px;
}


/* ============================================================
   BRAND
============================================================ */

.footer-brand {
  min-width: 0;
}


/* DARK PANEL FOR WHITE LOGOS */

.footer-logo-panel {
  display: inline-flex;

  padding: 16px 18px;

  margin-bottom: 14px;

  border-radius: 14px;

  background:#fff;
}


.footer-logo-group {
  display: flex;

  align-items: center;

  gap: 18px;
}


.footer-logo-link {
  display: inline-flex;

  align-items: center;

  text-decoration: none;
}


.footer-gef-logo {
  display: block;

  width: 165px;
  height: auto;

  object-fit: contain;
}


.footer-pcu-logo {
  display: block;

  width: 140px;
  height: auto;

  object-fit: contain;
}


.footer-divider-vertical {
  width: 1px;
  height: 56px;

  flex: 0 0 1px;

  background:
    rgba(255, 255, 255, 0.3);
}


.footer-logo-link img {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


.footer-logo-link:hover img {
  transform: translateY(-2px);

  opacity: 0.9;
}


/* BRAND NOTE */

.footer-brand-note {
  max-width: 340px;

  margin: 0;

  font-size: 14px;

  line-height: 1.65;

  color: #68717d;
}


/* ============================================================
   TITLES
============================================================ */

.footer-small-title {
  margin: 0 0 14px;

  color: #183858;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


/* ============================================================
   QUICK LINKS
============================================================ */

.footer-links-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px 18px;
}


.footer-links-grid a {
  color: #5f6874;

  font-size: 13px;

  font-weight: 500;

  line-height: 1.4;

  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


.footer-links-grid a:hover {
  color: #b07d32;

  transform: translateX(3px);
}


/* ============================================================
   SOCIAL
============================================================ */

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;

  color: #fff;
  text-decoration: none;

  font-size: 17px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.social-link:hover {
  transform: translateY(-3px);

  box-shadow:
    0 8px 18px
    rgba(20, 38, 61, 0.18);
}

.social-link.facebook {
  background: #1877f2;
}

.social-link.linkedin {
  background: #0a66c2;
}

.social-link.instagram {
  background:
    linear-gradient(
      135deg,
      #833ab4,
      #fd1d1d,
      #fcb045
    );
}

.social-link.youtube {
  background: #ff0000;
}

.social-link i {
  line-height: 1;
}

/* ============================================================
   CONTACT
============================================================ */

.footer-contact-box {
  padding: 17px 18px;

  border: 1px solid #e1e2df;

  border-radius: 16px;

  background: #f8f7f2;
}


.footer-contact-item {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 10px;

  color: #65707b;

  font-size: 13px;

  line-height: 1.5;

  text-decoration: none;
}


.footer-contact-item:last-child {
  margin-bottom: 0;
}


.footer-contact-item:hover {
  color: #183858;
}


.footer-contact-icon {
  flex: 0 0 auto;

  color: #c29642;

  font-size: 15px;

  line-height: 1.2;
}


.footer-address address {
  margin: 0;

  color: inherit;

  font-size: 13px;

  font-style: normal;

  line-height: 1.55;
}


/* ============================================================
   BOTTOM
============================================================ */

.footer-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  margin: 0 20px;

  padding: 16px 0;

  border-top: 1px solid #e5e7ea;
}


.footer-bottom p {
  margin: 0;

  color: #858e98;

  font-size: 12px;

  line-height: 1.5;
}


/* LEGAL LINKS */

.footer-legal {
  display: flex;

  align-items: center;

  gap: 24px;
}


.footer-legal a {
  color: #737d88;

  font-size: 12px;

  text-decoration: none;

  transition: color 0.25s ease;
}


.footer-legal a:hover {
  color: #b07d32;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .footer-main {
    grid-template-columns:
      1fr 1fr;

    gap: 30px;
  }


  .footer-connect {
    text-align: left;
  }


  .footer-social {
    justify-content: flex-start;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

  .site-footer {
    padding: 18px 12px;
  }


  .footer-main {
    grid-template-columns: 1fr;

    gap: 26px;

    padding: 24px 20px 18px;
  }


  .footer-logo-panel {
    width: 100%;

    justify-content: center;
  }


  .footer-logo-group {
    justify-content: center;

    gap: 14px;
  }


  .footer-gef-logo {
    width: 145px;
  }


  .footer-pcu-logo {
    width: 120px;
  }


  .footer-links-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .footer-connect {
    text-align: left;
  }


  .footer-social {
    justify-content: flex-start;
  }


  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    margin: 0 16px;
  }


  .footer-legal {
    flex-wrap: wrap;

    gap: 10px 18px;
  }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

  .footer-logo-group {
    flex-direction: column;
  }


  .footer-divider-vertical {
    width: 90px;
    height: 1px;
  }


  .footer-links-grid {
    grid-template-columns: 1fr;
  }


  .footer-brand-note {
    font-size: 13px;
  }


  .footer-contact-item,
  .footer-address address {
    font-size: 12.5px;
  }

}


/* ============================================================
   18. UTILITY / CONTACT / PLATINUM PAGES
   ============================================================ */
.utility-main { background: #fff; color: var(--ink); }
.utility-hero { padding: 78px 0 58px; background: linear-gradient(135deg, #052B57, #0a3a72); color: #fff; }
.utility-hero .kicker { color: var(--gold); }
.utility-hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 4rem); max-width: 900px; }
.utility-hero p { margin-top: 16px; max-width: 760px; color: rgba(255,255,255,.82); font-size: 1.05rem; }
.utility-section { padding: 70px 0 90px; }
.utility-content { max-width: 860px; }
.utility-content h2 { margin: 34px 0 12px; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.utility-content h3 { margin: 26px 0 10px; font-size: 1.15rem; }
.utility-content p, .utility-content li { color: var(--ink-soft); line-height: 1.75; }
.utility-content p + p { margin-top: 14px; }
.utility-content ul { list-style: disc; padding-left: 22px; margin: 12px 0 0; }
.utility-note { margin-top: 28px; padding: 18px 20px; border-left: 4px solid var(--gold); background: var(--paper); color: var(--ink-soft); }

/* --- Contact --- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 40px; align-items: stretch; }
.contact-card {
  padding: 38px;
  border: 1px solid rgba(5,43,87,0.10);
  border-radius: 20px;
  background: #dadbe2;
  box-shadow: 0 14px 45px rgba(5,43,87,0.29);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 20px 55px rgba(5,43,87,0.12); }
.contact-card h2 { margin-top: 0; margin-bottom: 28px; color: var(--navy); font-family: "Fraunces", serif; font-size: 2rem; line-height: 1.2; }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-field { display: flex; flex-direction: column; gap: 8px; }
.contact-field.full { grid-column: 1 / -1; }
.contact-field label { font-weight: 600; color: var(--navy); font-size: 0.9rem; letter-spacing: 0.01em; }

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #d9e1ea;
  border-radius: 10px;
  font: inherit;
  background: #fafcfe;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.contact-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover { border-color: #b9c8d8; background: #fff; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { border-color: #0b5fa5; background: #fff; box-shadow: 0 0 0 4px rgba(11,95,165,0.10); }

/* Info card (right side) */
.contact-grid > .contact-card:last-child {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(5,43,87,0.98), rgba(8,67,119,0.96));
  color: #fff;
  border: none;
}
.contact-grid > .contact-card:last-child::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.contact-grid > .contact-card:last-child::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  left: -100px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.contact-grid > .contact-card:last-child h2 { position: relative; z-index: 1; color: #fff; font-size: 2.1rem; margin-bottom: 34px; }
.contact-grid > .contact-card:last-child p { position: relative; z-index: 1; color: rgba(255,255,255,0.82); line-height: 1.7; }
.contact-grid > .contact-card:last-child strong { display: inline-block; margin-bottom: 4px; color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; }
.contact-grid > .contact-card:last-child a { color: #fff; font-weight: 600; text-decoration: none; transition: color 0.2s ease; }
.contact-grid > .contact-card:last-child a:hover { color: #d9a441; }

/* --- Platinum --- */
.platinum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.platinum-card { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.platinum-card strong { display: block; color: var(--gold-deep); margin-bottom: 8px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-card { padding: 30px; }
}

@media (max-width: 760px) {
  .utility-hero { padding: 58px 0 45px; }
  .utility-section { padding: 50px 0 70px; }
  .platinum-grid { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-field.full { grid-column: auto; }
}

@media (max-width: 600px) {
  .contact-grid { gap: 18px; }
  .contact-card { padding: 24px 20px; border-radius: 16px; }
  .contact-form { gap: 16px; }
  .contact-card h2,
  .contact-grid > .contact-card:last-child h2 { font-size: 1.65rem; }
  .contact-field input,
  .contact-field select,
  .contact-field textarea { padding: 13px 14px; }
}


/* ============================================================
   19. GENERAL SECTION RESPONSIVE
   (kept last so it overrides section paddings, as in original)
   ============================================================ */
@media (max-width: 1000px) {
  /* legacy hero classes (kept in case other pages use them) */
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-widget { position: static; width: 100%; max-width: 340px; margin: 22px auto 0; }
  .hero-slideshow { max-width: 560px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .experience-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .gallery-grid img:nth-child(4) { grid-column: span 1; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .hero-quickfacts { gap: 16px; }
  .qf-divider { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .experience, .why, .voices, .partners, .gallery { padding: 64px 0; }
  .why-grid { grid-template-columns: 1fr; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .voice-card { flex-basis: 180px; }
  .eco-tags li { font-size: 0.72rem; padding: 8px 12px; }
  .hero-widget { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-slideshow .slide,
  .btn, .link-arrow::after { transition: none; }
}

/* Production accessibility/shared-component helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.footer-social .social-link svg {
  width: 1em;
  height: 1em;
  display: block;
}
.footer-social span.social-link {
  cursor: default;
}