:root {
  --lux-pearl: #f8f7f4;
  --lux-pearl-2: #fffdf8;
  --lux-emerald: #123d32;
  --lux-emerald-2: #1b4d3e;
  --lux-burgundy: #6b3a3a;
  --lux-lavender: #d8c9e0;
  --lux-gold: #d4a844;
  --lux-gold-2: #f0d488;
  --lux-sage: #c0d9ce;
  --lux-charcoal: #151817;
  --lux-ink: #242827;
  --lux-muted: #68736f;
  --lux-line: rgba(27, 77, 62, 0.15);
  --lux-line-gold: rgba(212, 168, 68, 0.34);
  --lux-shadow: 0 28px 70px rgba(18, 61, 50, 0.18);
  --lux-shadow-deep: 0 30px 90px rgba(18, 24, 23, 0.24);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  letter-spacing: 0;
}

html {
  background: var(--lux-charcoal);
}

body {
  font-family: var(--font-body) !important;
  color: var(--lux-ink) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(216, 201, 224, 0.28), transparent 28rem),
    radial-gradient(circle at 86% 10%, rgba(212, 168, 68, 0.14), transparent 24rem),
    linear-gradient(180deg, #fbfaf6 0%, var(--lux-pearl) 54%, #f3efe7 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(27, 77, 62, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 77, 62, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 72%);
}

.bg-cosmic,
.mandala-bg,
.bg-cinema,
.grid-lines {
  opacity: 0.55 !important;
}

header {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  padding: 0.72rem clamp(1.25rem, 4vw, 4rem) !important;
  background: rgba(248, 247, 244, 0.78) !important;
  border-bottom: 1px solid rgba(212, 168, 68, 0.18) !important;
  box-shadow: 0 18px 60px rgba(18, 61, 50, 0.08) !important;
}

header.scrolled {
  padding-top: 0.54rem !important;
  padding-bottom: 0.54rem !important;
  background: rgba(248, 247, 244, 0.94) !important;
}

.brand {
  gap: 0.72rem !important;
}

.brand img,
.footer-brand img {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 8px 18px rgba(212, 168, 68, 0.22)) !important;
}

.brand-name,
.footer-brand-name,
.footer-brand .brand-name {
  color: var(--lux-emerald) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

nav {
  gap: clamp(1rem, 2.2vw, 2rem) !important;
}

nav a {
  color: rgba(36, 40, 39, 0.78) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em !important;
}

nav a:hover,
nav a:focus {
  color: var(--lux-burgundy) !important;
}

.nav-cta,
.btn-primary {
  color: #fffdf8 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 36%),
    linear-gradient(135deg, var(--lux-gold), #a67618 48%, var(--lux-emerald-2)) !important;
  border: 1px solid rgba(212, 168, 68, 0.42) !important;
  box-shadow: 0 16px 38px rgba(146, 100, 22, 0.22) !important;
}

.nav-cta:hover,
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 52px rgba(146, 100, 22, 0.28) !important;
}

.kids-btn {
  color: var(--lux-emerald) !important;
  background: rgba(255, 253, 248, 0.78) !important;
  border: 1px solid rgba(27, 77, 62, 0.16) !important;
  box-shadow: none !important;
}

.kids-btn .kb-emoji {
  width: 8px !important;
  height: 8px !important;
  background: var(--lux-gold) !important;
  font-size: 0 !important;
}

.kids-btn .kb-text {
  color: var(--lux-emerald) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.11em !important;
}

.hero {
  width: min(100%, 1320px) !important;
  min-height: 78svh !important;
  margin: 0 auto !important;
  padding: 6.8rem clamp(1.3rem, 4vw, 4rem) 3.2rem !important;
  display: block !important;
  text-align: left !important;
}

.hero::before {
  content: "Arka Aegis";
  position: absolute;
  top: 6rem;
  left: clamp(1.3rem, 4vw, 4rem);
  color: rgba(27, 77, 62, 0.52);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}

.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(212, 168, 68, 0.35);
  width: 7.5rem;
  height: 7.5rem;
  right: clamp(1.3rem, 5vw, 5rem);
  bottom: 3.4rem;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  opacity: 0.36;
}

.shield-container {
  position: absolute !important;
  top: 52% !important;
  right: clamp(1.5rem, 4vw, 5rem) !important;
  transform: translateY(-45%) !important;
  width: clamp(220px, 28vw, 360px) !important;
  max-width: 360px !important;
  margin: 0 !important;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.shield-container::before {
  content: "";
  position: absolute;
  inset: -1.35rem;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 24%, rgba(212, 168, 68, 0.24), transparent 38%),
    linear-gradient(145deg, rgba(255, 253, 248, 0.68), rgba(192, 217, 206, 0.18));
  border: 1px solid rgba(212, 168, 68, 0.38);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  box-shadow: var(--lux-shadow);
}

.shield-img {
  width: 100% !important;
  max-width: 320px !important;
  max-height: 320px !important;
  object-fit: contain !important;
  animation: floatShield 7s ease-in-out infinite !important;
  filter: drop-shadow(0 28px 52px rgba(27, 77, 62, 0.24)) !important;
}

.shield-ring,
.hero-rays,
.shield-glow {
  max-width: 130% !important;
  max-height: 130% !important;
}

.ring-2 {
  border-color: rgba(107, 58, 58, 0.22) !important;
}

.hero h1 {
  margin: 0.5rem 0 1rem !important;
  max-width: 680px !important;
  color: var(--lux-emerald) !important;
  font-size: 5.25rem !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  background: linear-gradient(115deg, var(--lux-burgundy), var(--lux-emerald) 46%, #9d741b 88%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.hero h1,
.hero .tagline,
.hero .subtitle,
.hero-buttons,
.cred-strip {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

.hero .tagline {
  color: var(--lux-burgundy) !important;
  font-style: normal !important;
  font-size: 1.14rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  margin-bottom: 1.05rem !important;
}

.hero .subtitle {
  max-width: 640px !important;
  margin-bottom: 1.5rem !important;
  color: rgba(36, 40, 39, 0.82) !important;
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
}

.hero-buttons,
.cred-strip {
  justify-content: flex-start !important;
}

.btn {
  border-radius: 999px !important;
  min-height: 3.1rem;
}

.btn-ghost {
  color: var(--lux-emerald) !important;
  background: rgba(255, 253, 248, 0.74) !important;
  border: 1px solid rgba(27, 77, 62, 0.22) !important;
  box-shadow: 0 14px 36px rgba(18, 61, 50, 0.09) !important;
}

.btn-ghost:hover {
  border-color: rgba(212, 168, 68, 0.7) !important;
  box-shadow: 0 18px 42px rgba(18, 61, 50, 0.14) !important;
}

.cred-strip {
  margin-top: 1.65rem !important;
  gap: 0.7rem !important;
}

.cred {
  padding: 0.55rem 0.8rem;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(27, 77, 62, 0.14);
  border-left: 2px solid var(--lux-gold);
  color: rgba(36, 40, 39, 0.72) !important;
}

.cred b {
  color: var(--lux-emerald) !important;
}

.scroll-cue {
  display: none !important;
}

.light-zone {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.64), rgba(248, 247, 244, 0.92)) !important;
  box-shadow: none !important;
}

section {
  padding-top: 4.8rem !important;
  padding-bottom: 4.8rem !important;
}

.section-tag {
  color: var(--lux-burgundy) !important;
  letter-spacing: 0.18em !important;
}

.section-tag::before {
  background:
    linear-gradient(var(--lux-gold) 0 0) 0 0/32px 1.5px no-repeat,
    linear-gradient(var(--lux-burgundy) 0 0) 6px 4.5px/20px 1.5px no-repeat,
    linear-gradient(var(--lux-emerald) 0 0) 12px 9px/8px 1.5px no-repeat !important;
}

.section-title,
.expertise h2,
.page-hero h1,
.cta-band h2 {
  color: var(--lux-emerald) !important;
  font-size: 3rem !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.section-intro,
.lead,
.expertise p,
.page-hero p,
.cta-band p {
  color: rgba(36, 40, 39, 0.74) !important;
  line-height: 1.75 !important;
}

.services-grid,
.offer-grid,
.other-svc {
  gap: 1rem !important;
}

.service-card,
.offer,
.osvc {
  position: relative;
  overflow: hidden;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(248, 247, 244, 0.72)) !important;
  border: 1px solid rgba(27, 77, 62, 0.16) !important;
  border-top: 2px solid rgba(212, 168, 68, 0.45) !important;
  box-shadow: 0 18px 48px rgba(18, 61, 50, 0.09) !important;
}

.service-card::before,
.offer::before,
.osvc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(212, 168, 68, 0.16), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(216, 201, 224, 0.24), transparent 34%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.service-card:hover,
.offer:hover,
.osvc:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(27, 77, 62, 0.32) !important;
  box-shadow: 0 26px 70px rgba(18, 61, 50, 0.16) !important;
}

.service-card:hover::before,
.offer:hover::before,
.osvc:hover::before {
  opacity: 1;
}

.service-icon,
.offer .oi,
.osvc .oi,
.page-hero .ic {
  width: 3.1rem !important;
  height: 3.1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1rem !important;
  color: var(--lux-emerald) !important;
  background: linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(212, 168, 68, 0.18)) !important;
  border: 1px solid rgba(212, 168, 68, 0.42) !important;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%) !important;
  filter: none !important;
  font-size: 0 !important;
}

.service-icon::after,
.offer .oi::after,
.osvc .oi::after,
.page-hero .ic::after {
  content: "";
  width: 1.02rem;
  height: 1.02rem;
  display: block;
  border: 1.5px solid var(--lux-emerald);
  border-top-color: var(--lux-gold);
  transform: rotate(45deg);
}

.service-card h3,
.offer h3,
.osvc span:last-child,
.step h4 {
  color: var(--lux-emerald) !important;
}

.service-card p,
.offer p,
.step p {
  color: rgba(36, 40, 39, 0.68) !important;
}

.expertise {
  gap: 3rem !important;
}

.expertise-visual {
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(212, 168, 68, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(18, 61, 50, 0.96), rgba(27, 77, 62, 0.86)) !important;
  border: 1px solid rgba(212, 168, 68, 0.32) !important;
  box-shadow: var(--lux-shadow-deep) !important;
}

.expertise-visual img {
  width: min(68%, 360px) !important;
  max-height: 360px !important;
  object-fit: contain !important;
}

.cert-hex {
  color: var(--lux-emerald) !important;
  background: linear-gradient(145deg, rgba(216, 201, 224, 0.38), rgba(192, 217, 206, 0.38)) !important;
  box-shadow: none !important;
}

.stats {
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(216, 201, 224, 0.16), transparent 28%),
    linear-gradient(135deg, #102f28, var(--lux-emerald), #24322f) !important;
  border: 1px solid rgba(212, 168, 68, 0.32) !important;
  box-shadow: var(--lux-shadow-deep) !important;
}

.stat-num {
  background: linear-gradient(135deg, var(--lux-gold-2), #fff3bc 52%, var(--lux-lavender)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.contact,
.cta-band {
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(216, 201, 224, 0.32), transparent 32%),
    linear-gradient(145deg, rgba(255, 253, 248, 0.9), rgba(192, 217, 206, 0.18)) !important;
  border: 1px solid rgba(27, 77, 62, 0.16) !important;
  box-shadow: var(--lux-shadow) !important;
}

.contact-form input,
.contact-form textarea {
  border-radius: 8px !important;
  background: rgba(255, 253, 248, 0.82) !important;
  border: 1px solid rgba(27, 77, 62, 0.18) !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--lux-gold) !important;
  box-shadow: 0 0 0 4px rgba(212, 168, 68, 0.16) !important;
}

footer {
  margin-top: 0 !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(212, 168, 68, 0.16), transparent 34%),
    linear-gradient(150deg, #111615, #143b31 62%, #251d1d) !important;
  border-top: 1px solid rgba(212, 168, 68, 0.26) !important;
}

footer .brand-name,
.footer-brand-name,
footer .footer-brand .brand-name,
footer .footer-brand-name {
  color: var(--lux-pearl) !important;
  text-shadow: 0 0 18px rgba(248, 247, 244, 0.22);
}

.footer-tag {
  color: rgba(216, 201, 224, 0.86) !important;
}

.footer-links a {
  color: rgba(248, 247, 244, 0.78) !important;
}

.footer-links a:hover {
  color: var(--lux-gold-2) !important;
}

.page-hero {
  position: relative;
  min-height: 58svh !important;
  padding: 9rem clamp(1.3rem, 5vw, 4rem) 5rem !important;
  text-align: center;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(212, 168, 68, 0.19), transparent 24rem),
    radial-gradient(circle at 16% 24%, rgba(216, 201, 224, 0.26), transparent 22rem),
    linear-gradient(160deg, rgba(255, 253, 248, 0.88), rgba(192, 217, 206, 0.2)) !important;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: auto auto 2rem 50%;
  width: min(42vw, 360px);
  height: min(42vw, 360px);
  transform: translateX(-50%);
  opacity: 0.07;
  pointer-events: none;
  background: url("../../arka-shield.png") center / contain no-repeat;
}

.breadcrumb {
  color: rgba(36, 40, 39, 0.62) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem !important;
  font-weight: 800;
}

.breadcrumb a {
  color: var(--lux-emerald) !important;
}

.page-hero h1 {
  max-width: 820px;
  margin-inline: auto;
  background: linear-gradient(115deg, var(--lux-burgundy), var(--lux-emerald) 54%, #9d741b) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.page-hero p {
  max-width: 760px !important;
}

.wrap {
  max-width: 1160px !important;
}

.process {
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 201, 224, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(255, 253, 248, 0.92), rgba(192, 217, 206, 0.24)) !important;
  border: 1px solid rgba(27, 77, 62, 0.14) !important;
}

.step .n {
  color: #fffdf8 !important;
  background: linear-gradient(135deg, var(--lux-gold), var(--lux-emerald)) !important;
}

.fw-pill {
  color: var(--lux-emerald) !important;
  background: rgba(255, 253, 248, 0.8) !important;
  border: 1px solid rgba(27, 77, 62, 0.17) !important;
  box-shadow: none !important;
}

.osvc.active {
  background:
    linear-gradient(135deg, rgba(212, 168, 68, 0.24), rgba(27, 77, 62, 0.12)),
    rgba(255, 253, 248, 0.86) !important;
  border-color: rgba(212, 168, 68, 0.58) !important;
}

@media (max-width: 1020px) {
  .hero {
    gap: 2.5rem !important;
  }

  .hero h1 {
    font-size: 4.2rem !important;
  }

  .section-title,
  .expertise h2,
  .page-hero h1,
  .cta-band h2 {
    font-size: 2.45rem !important;
  }
}

@media (max-width: 920px) {
  header {
    grid-template-columns: auto auto !important;
  }

  nav {
    background:
      radial-gradient(circle at 20% 20%, rgba(216, 201, 224, 0.28), transparent 16rem),
      var(--lux-pearl) !important;
  }
}

@media (max-width: 860px) {
  .hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
    padding-top: 7.6rem !important;
    padding-bottom: 4rem !important;
    text-align: center !important;
  }

  .hero::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .shield-container {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 132px !important;
    max-width: 132px !important;
    margin: 0 auto !important;
    padding: 0.6rem !important;
    justify-self: center !important;
  }

  .shield-container::before {
    inset: -0.55rem;
  }

  .shield-img {
    max-width: 118px !important;
    max-height: 118px !important;
  }

  .shield-ring,
  .hero-rays {
    display: none !important;
  }

  .hero h1,
  .hero .tagline,
  .hero .subtitle,
  .hero-buttons,
  .cred-strip {
    grid-column: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .hero .subtitle {
    margin-inline: auto !important;
  }

  .scroll-cue {
    display: none !important;
  }
}

@media (max-width: 600px) {
  header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .brand-name {
    font-size: 0.94rem !important;
  }

  .hero h1 {
    font-size: 3.05rem !important;
  }

  .hero .tagline {
    font-size: 0.86rem !important;
  }

  .hero .subtitle,
  .section-intro,
  .lead {
    font-size: 0.98rem !important;
  }

  .section-title,
  .expertise h2,
  .page-hero h1,
  .cta-band h2 {
    font-size: 2rem !important;
  }

  section {
    padding-top: 4.2rem !important;
    padding-bottom: 4.2rem !important;
  }

  .cred {
    width: 100%;
    justify-content: center;
  }

  .stats {
    grid-template-columns: 1fr !important;
  }
}