/* ============================
   TOKENS & GLOBAL
   ============================ */
:root {
  --red: #ed2e11;
  --red2: #ff6b4a;
  --green: #43a439;
  --bg: #000;
  --text: #e9eef5;
  --muted: #aeb9c7;
  --ring: #252c36;
  --n1: #0e1116;
  --n2: #222b3b;
  --grad: linear-gradient(90deg, var(--red), var(--red2));
  --container: 1200px;
  --header-h: clamp(56px, 7vw, 82px);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

:root {
  /* families */
  --ff-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* sizing + rhythm */
  --lh-tight: 1.05;
  --lh-body: 1.65;
  --track-tight: -0.015em;
  --track-body: 0.005em;

  /* scale for convenience */
  --fs-900: clamp(40px, 6.5vw, 88px);
  /* hero H1 */
  --fs-800: clamp(30px, 4.5vw, 56px);
  /* H2 */
  --fs-700: clamp(22px, 3vw, 32px);
  /* H3 */
  --fs-600: 20px;
  /* lead / large text */
  --fs-400: 16px;
  /* body base */
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body{
    width: 100%;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--ff-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-weight: 400;
  color: var(--text, #e9eef5);
  background-color: var(--bg);
}

/* ==========================
   Global Container
   ========================== */
.container {
  width: min(1340px, 92%);
  margin-left: auto;
  margin-right: auto;
}

/* Headings: always Poppins */
h1,
h2,
h3,
h4,
h5,
h6,
.nav-desktop a,
.btn,
.hero-ss__sub {
  font-family: var(--ff-heading);
  letter-spacing: var(--track-tight);
  font-weight: 700;
  /* override per element below */
  line-height: var(--lh-tight);
  margin: 0 0 0.35em;
}

/* Common heading sizes */
h1,
.h1 {
  font-size: var(--fs-800);
  font-weight: 800;
}

h2,
.h2 {
  font-size: var(--fs-700);
  font-weight: 700;
}

h3,
.h3 {
  font-size: 20px;
  font-weight: 600;
}

/* Hero title shortcut you already use */
.hero-ss__title {
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: var(--fs-900);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  margin: 0 0 0.35em;
}

/* Paragraphs, lists, inputs: Body face */
p,
li,
input,
textarea,
select,
small {
  font-family: var(--ff-body);
  font-weight: 400;
}

/* Optional: “lead” paragraph style */
.lead {
  font-size: var(--fs-600);
  line-height: 1.6;
  font-weight: 500;
}

/* Utility for gradient word inside headings */
.grad-text {
  background: linear-gradient(90deg, #ed2e11, #ff6b4a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: min(100% - 24px, var(--container));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ============================
   HEADER (with starfield)
   ============================ */

.header-row {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ss-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.star-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  height: auto;
  object-fit: contain;
}

.brand-name {
  font: 800 clamp(16px, 1.6vw, 18px) / 1 Poppins, system-ui;
}

.brand .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Desktop navbar (>1024px) */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
}

.nav-list>li>a,
.nav-desktop .sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 10px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  color: var(--text);
}

.nav-list>li>a:hover,
.nav-desktop .sub-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  outline: 1px solid var(--ring);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  cursor: pointer;
}

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 24px rgba(237, 46, 17, 0.32);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(237, 46, 17, 0.45);
}

/* Desktop submenu (hover) */
.has-sub {
  position: relative;
}

.sub-toggle {
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
}

.sub-toggle .chev {
  width: 16px;
  height: 16px;
}

@media (min-width: 1025px) {
  .has-sub .sub {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    display: none;
    min-width: 260px;
    background: var(--n1);
    border: 1px solid var(--ring);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    z-index: 3200;
  }

  .has-sub:hover .sub,
  .has-sub:focus-within .sub {
    display: block;
  }

  .sub a {
    display: block;
    padding: 10px;
    border-radius: 10px;
    color: var(--text);
  }

  .sub a:hover {
    background: var(--n2);
  }
}

/* Burger (≤1024px) */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 36px;
  border: 0;
  background: transparent;
}

.nav-toggle__bar {
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: 0.22s;
}

.nav-toggle__bar:nth-child(1) {
  top: 10px;
}

.nav-toggle__bar:nth-child(2) {
  top: 17px;
}

.nav-toggle__bar:nth-child(3) {
  top: 24px;
}

.menu-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hide/show desktop vs mobile */
@media (max-width: 1024px) {
  .nav-desktop {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

/* Mobile menu (separate panel) */
.nav-mobile {
  position: fixed;
  z-index: 3100;
  inset: var(--header-h) 0 0 0;
  transform: translateY(100%);
  transition: transform 0.28s ease;
  background: rgba(10, 12, 16, 0.98);
  border-top: 1px solid var(--ring);
  display: none;
  align-items: flex-start;
  justify-content: center;
}

.nav-mobile.open {
  transform: translateY(0);
  display: block;
}

@media (max-width: 1024px) {
  .nav-mobile {
    display: none;
  }
}

@media (min-width: 1025px) {
  .nav-mobile {
    display: none !important;
    transform: translateY(100%) !important;
  }

  .nav-scrim {
    display: none !important;
  }
}

.nav-mobile__inner {
  padding: 14px 0 18px;
  height: 92vh;
  background-color: #000;
}

.nav-mobile__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mob-link {
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
}

.mob-link:hover {
  background: rgba(255, 255, 255, 0.05);
  outline: 1px solid var(--ring);
}

.mob-cta {
  margin-top: 8px;
}

/* Mobile accordion (Services) */
.mob-acc {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0;
}

.mob-acc[open] {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--ring);
}

.mob-acc__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  cursor: pointer;
  border-radius: 10px;
  color: var(--text);
}

.mob-acc__summary::-webkit-details-marker {
  display: none;
}

.mob-acc__summary .chev {
  width: 18px;
  height: 18px;
  transition: 0.2s;
}

.mob-acc[open] .chev {
  transform: rotate(180deg);
}

.mob-acc__panel {
  display: flex;
  flex-direction: column;
  padding: 6px 4px 8px 8px;
}

.mob-sublink {
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--text);
}

.mob-sublink:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Scrim */
.nav-scrim {
  display: block;
  position: fixed;
  inset: 0;
  border: 0;
  z-index: 3050;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.menu-open .nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* Lock scroll when open */
.menu-open {
  overflow: hidden;
}

/* ============================
   HERO (image-only + animated SVG)
   ============================ */
.hero-ss {
  position: relative;
  overflow: hidden;
  padding-top: 100px !important;
  padding: clamp(52px, 6vw, 100px) 0 clamp(36px, 5vw, 72px);
  background: radial-gradient(1200px 600px at 76% -24%,
      rgba(237, 46, 17, 0.16) 0%,
      rgba(237, 46, 17, 0) 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.hero-ss__grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.8fr);
  /* image | text */
}

@media (max-width: 1024px) {
  .hero-ss__grid {
    grid-template-columns: 1fr;
  }
}

/* Media card (portrait) */
.hero-ss__media {
  position: relative;
}

.hero-ss__media picture,
.hero-ss__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 680px);
  object-fit: cover;
}

.hero-ss__media img {
  border-radius: 22px;
  background: transparent;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55));
}

/*.hero-ss__media::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  inset: -1px;*/
/*  border-radius: 24px;*/
/*  padding: 1px;*/
/*  background: var(--grad);*/
/*  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);*/
/*  -webkit-mask-composite: xor;*/
/*  mask-composite: exclude;*/
/*  pointer-events: none;*/
/*}*/

/* Copy */
.hero-ss__copy {
  max-width: 760px;
}

.hero-ss__title {
  margin: 0 0 0.35em;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.04;
  /* tight, but readable */
  letter-spacing: -0.015em;
  /* optical tracking */
  text-wrap: balance;
  /* nicer multi-line breaks */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  /* alternate set if Poppins supports */
  color: #fff;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-ss__sub {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 clamp(18px, 2.6vw, 28px) / 1.3 Poppins, system-ui;
  color: #edeff4;
  margin: 12px 0 14px;
}

.hero-ss__sub .bar {
  width: 24px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  display: inline-block;
}

.hero-ss__lead {
  color: #cfd6e2;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  margin: 0 0 22px;
}

/* CTAs */
.hero-ss__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.btn-ghost-grad {
  color: var(--text);
  background: transparent;
  position: relative;
  border-radius: 14px;
  padding: 0.82rem 1.18rem;
}

.btn-ghost-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.btn-ghost-grad:hover {
  color: var(--red);
  background: rgba(255, 255, 255, 0.03);
}

/* Stats (optional) */
.hero-ss__stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: #aeb9c7;
}

.hero-ss__stats li {
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.hero-ss__stats span {
  color: #fff;
  font-weight: 700;
}

/* Social rail */
.hero-ss__social {
  position: absolute;
  right: clamp(8px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-ss__social .soc {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffe;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ring);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.hero-ss__social .soc:hover {
  transform: translateY(-2px);
  background: rgba(255, 150, 134, 0.08);
  box-shadow: 0 10px 20px rgba(237, 46, 17, 0.22);
}

.hero-ss__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

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

/* Small screens polish */
@media (max-width: 480px) {
  .hero-ss__title {
    font-size: clamp(32px, 9vw, 42px);
  }

  .hero-ss__sub {
    font-size: 16px;
  }

  .hero-ss__lead {
    font-size: 15.5px;
  }

  .hero-ss__cta {
    gap: 8px;
  }

  .btn {
    padding: 0.7rem 1rem;
  }
}

/* === HERO BALANCE OVERRIDES (paste AFTER existing hero CSS) === */

/* 1) Give the image column more space on large screens */
@media (min-width: 1100px) {
  .hero-ss__grid {
    /* was: 0.95fr | 1.8fr */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.45fr);
    /* image | text */
  }

  /* 2) Let the photo grow taller before capping */
  .hero-ss__media picture,
  .hero-ss__media img {
    /* was: max-height: min(68vh, 680px); */
    max-height: min(82vh, 860px);
  }

  /* 3) Slight visual boost (without blurring) */
  .hero-ss__media img {
    transform: scale(1.36);         /* tasteful bump */
    transform-origin: center center;
  }

  /* 4) Keep copy from feeling too wide vs. bigger image */
  .hero-ss__copy {
    max-width: 700px;               /* was 760px; reduces line length a bit */
  }
}

/* Optional: tighten title slightly so image feels even bigger by comparison */
@media (min-width: 1100px) {
  .hero-ss__title {
    font-size: clamp(40px, 5.6vw, 84px); /* subtle -4px at the cap */
  }
}


/* Separator under header */
body::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--ring);
}

/* =================  */
/* ===== Social Proof / Credibility Split ===== */
:root {
  /* warm light panel that still fits the dark site */
  --cred-bg: #0a0d12;
  /* section backdrop (dark) */
  --cred-panel: #0f131a;
  /* card panel tone */
  --cred-text: #e9eef5;
  /* main text */
  --cred-muted: #b8c2cf;
  /* secondary */
  --cred-accent: #ed2e11;
  /* your red */
}

/* Section wrapper spans full width, adds subtle top divider */
.cred-wall {
  background: var(--cred-bg);
  position: relative;
}

.cred-wall::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  position: absolute;
  inset: 0 0 auto 0;
}

/* Two-column grid */
.cred-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  /* copy | image */
  align-items: center;
  border: none;
  border-radius: 30px;
}

/* Paint a 1.5px gradient “frame” without affecting layout */
.cred-grid::before {
  content: "";
  position: absolute;
  inset: -1px;
  /* sit just outside the box like a border */
  border-radius: inherit;
  padding: 1.5px;
  /* border thickness */
  background: linear-gradient(140deg, #ed2e11, #ff6b4a 45%, #43a439);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* punch out the middle */
  pointer-events: none;
  z-index: 0;
}

/* Keep the section content above the pseudo-element */
.cred-grid>* {
  position: relative;
  z-index: 1;
}

/* Optional subtle glow on hover (desktop only) */
@media (hover: hover) {
  .cred-grid:hover::before {
    box-shadow: 0 0 28px rgba(237, 46, 17, 0.22);
  }
}

/* Copy column */
.cred-copy {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: clamp(22px, 3.4vw, 36px);
  color: var(--cred-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.eyebrow {
  font: 700 12px/1.2 Poppins, system-ui;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cred-muted);
  margin: 0 0 12px;
}

.cred-title {
  font-family: Poppins, system-ui;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: #fff;
  text-wrap: balance;
}

.cred-lead {
  font-family: "Source Sans Pro", system-ui;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--cred-text);
  margin: 0 0 12px;
}

.cred-copy p {
  font-family: "Source Sans Pro", system-ui;
  color: var(--cred-text);
  line-height: 1.7;
  margin: 0 0 10px;
}

.cred-copy .muted {
  color: var(--cred-muted);
}

/* Accent bar on first paragraph */
.cred-lead::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  background: linear-gradient(90deg, var(--cred-accent), #ff6b4a);
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* Media column: one image with a clean frame */
.cred-media {
  margin: 0;
  border-radius: 18px;
  background: #0b0e14;
  position: relative;
  overflow: hidden;
  /* gradient border */
  padding: 1px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02));
}

/* Optional hover depth on desktop */
@media (hover: hover) {
  .cred-media:hover img {
    filter: grayscale(0%) contrast(1.02);
  }
}

/* Responsiveness */
@media (max-width: 1024px) {
  .cred-grid {
    grid-template-columns: 1fr;
  }

  .cred-media {
    order: 2;
  }

  /* keep image after text on mobile */
  .cred-copy {
    order: 1;
  }
}

/* If you ever want a light variant of this section: toggle .cred--light on the section */
.cred--light {
  --cred-bg: #0a0d12;
  /* keep page dark around */
  --cred-panel: #fbf7ed;
  --cred-text: #2c2416;
  --cred-muted: #6b5d4d;
}

/* ===== CTA Banner (Book a 1-on-1) ===== */
:root {
  --cta-bg: #151314;
  --cta-card: rgba(255, 255, 255, 0.04);
  --cta-text: #e9eef5;
  --cta-muted: #c8d1dc;
  --cta-ring: rgba(255, 255, 255, 0.1);
  --cta-grad: linear-gradient(90deg, #ed2e11, #ff6b4a);
}

/* Section wrapper with subtle top divider + background shapes */
.cta-one {
  position: relative;
  background: var(--cta-bg);
  padding: clamp(42px, 6vw, 86px) 0;
  overflow: hidden;
}

.cta-one::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.cta-one::after {
  /* soft diagonal shape + radial glow for depth */
  content: "";
  position: absolute;
  inset: -20% -35% -30% auto;
  background: radial-gradient(600px 300px at 25% 20%,
      rgba(237, 46, 17, 0.12),
      transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  transform: rotate(-6deg);
  pointer-events: none;
}

/* Layout */
.cta-one__grid {
  display: grid;
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  grid-template-columns: 1.2fr 0.9fr;
  /* text | image */
}

/* Copy panel */
.cta-one__copy {
  position: relative;
  color: var(--cta-text);
  padding: clamp(22px, 3.2vw, 30px) clamp(18px, 2.6vw, 28px);
  border-radius: 18px;
  background: var(--cta-card);
  border: 1px solid var(--cta-ring);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.cta-one__copy::before {
  /* vertical accent bar */
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  border-radius: 999px;
  background: var(--cta-grad);
}

.cta-one__eyebrow {
  margin: 0 0 10px;
  font: 700 12px/1.2 Poppins, system-ui;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cta-muted);
  padding-left: 8px;
}

.cta-one__title {
  font-family: Poppins, system-ui;
  font-weight: 800;
  font-size: clamp(18px, 3.8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 4px 0 0.4em;
  text-wrap: balance;
}

.cta-one__title .grad {
  background: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta-one__lead {
  font-family: "Source Sans Pro", system-ui;
  color: var(--cta-text);
  line-height: 1.7;
  font-size: clamp(15.5px, 1.5vw, 18px);
  margin: 0 0 16px;
  opacity: 0.95;
}

/* Buttons (re-use your site’s tokens if you have them) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease;
  will-change: transform;
}

.btn-primary {
  color: #fff;
  background: var(--cta-grad);
  box-shadow: 0 14px 36px rgba(237, 46, 17, 0.35);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(237, 46, 17, 0.48);
}

.btn-ghost-dark {
  color: var(--cta-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cta-ring);
}

.btn-ghost-dark:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.cta-one__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Media (right) */
.cta-one__media {
    margin: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.cta-one__media img {
  width: min(100%, 666px);
  height: auto;
  border-radius: 18px;
  display: block;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55));
  transform: translateZ(0);
}

/* Responsive */
@media (max-width: 1024px) {
  .cta-one__grid {
    grid-template-columns: 1fr;
  }

  .cta-one__media {
    order: 2;
    justify-content: center;
  }

  .cta-one__media img {
    width: min(100%, 440px);
  }

  .cta-one__copy {
    order: 1;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 0.78rem 1.05rem;
  }

  .cta-one__title {
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
}

/* ============================
   FOOTER
   ============================ */
/* ==========================
   Footer (Theme) - Sujit Shukla
   ========================== */
.site-footer {
  --accent: #ff6a3d;
  /* primary orange */
  --accent-2: #ff3d3d;
  /* deeper orange/red */
  --bg: #0a0a0b;
  --text: #e9eef7;
  --muted: #a9b2c2;
  --line: #1a1a1d;
  color: var(--text);
  background:
    radial-gradient(1100px 420px at 75% -180px, rgba(255, 88, 50, .14), transparent 60%),
    linear-gradient(#0a0a0b, #0a0a0b);
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .footer-wrap {
  width: min(1340px, 92%);
  margin: 0 auto;
  padding: 64px 0 28px;
}

.site-footer .footer-top {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .site-footer .footer-top {
    grid-template-columns: 1.1fr 1fr;
  }
}

@media (min-width: 980px) {
  .site-footer .footer-top {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  }
}

.site-footer .footer-brand .footer-logo img {
  display: block;
  height: auto;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.site-footer .brand-desc {
  margin: 10px 0 16px;
  color: var(--muted);
  line-height: 1.6;
}

.site-footer .footer-social {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.site-footer .footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #101012;
  border: 1px solid #232326;
  color: #cdd3df;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.site-footer .footer-social a:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 106, 61, .22), rgba(255, 61, 61, .18));
  box-shadow: 0 6px 18px -8px rgba(255, 106, 61, .7);
  color: #fff;
}

.site-footer .footer-title {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: .4px;
  color: #fff;
  position: relative;
}

.site-footer .footer-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}

.site-footer .footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.site-footer .footer-links a {
  color: var(--text);
  opacity: .9;
}

.site-footer .footer-links a:hover {
  color: #fff;
}

.site-footer .footer-links .pill {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 106, 61, .35);
}

.site-footer .footer-cta p {
  color: var(--muted);
  margin: 8px 0 14px;
}

.site-footer .btn-gradient {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px -12px rgba(255, 106, 61, .85), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .15s ease, filter .15s ease;
}

.site-footer .btn-gradient:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.site-footer .btn-gradient:active {
  transform: translateY(0);
}

.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: #b7bfd0;
}

.site-footer .footer-bottom p {
  margin: 0;
}

.site-footer .footer-legal {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.site-footer .footer-legal a {
  color: #b7bfd0;
}

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

/* Utility */
.site-footer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Back to Top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent, #ff6a3d), var(--accent-2, #ff3d3d));
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(255, 106, 61, .85), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, filter .15s ease;
  z-index: 1000;
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.to-top:hover {
  filter: brightness(1.05);
}

.to-top:focus {
  outline: 2px solid rgba(255, 106, 61, .55);
  outline-offset: 2px;
}

.to-top svg {
  display: block;
}

/* Load Font Awesome (for icons) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/* ==========================
   Services Tabs Section
   ========================== */
.services-tabs {
  --accent: #ff6a3d;
  --accent-2: #ff3d3d;
  --bg: #0a0a0b;
  --panel: #101012;
  --line: #1a1a1d;
  --text: #e9eef7;
  --muted: #a9b2c2;
  color: var(--text);
  background:
    radial-gradient(900px 360px at 10% -160px, rgba(255, 106, 61, .1), transparent 60%),
    linear-gradient(#0a0a0b, #0a0a0b);
  padding: 64px 0 24px;
}

.services-tabs .st-wrap {
  width: min(1340px, 92%);
  margin: 0 auto;
}

.services-tabs .st-header {
  text-align: center;
  margin-bottom: 18px;
}

.services-tabs .st-header h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3vw, 32px);
}

.services-tabs .st-header p {
  margin: 0;
  color: var(--muted);
}

.services-tabs .st-tabbar {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0c0c0e;
  overflow-x: auto;
}

/* === Tablet: show 2 tabs per row (e.g., iPad widths) === */
@media (min-width: 600px) and (max-width: 1024px) {
  .services-tabs .st-tabbar {
    /* switch from horizontal scroller to a 2-column grid */
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow-x: visible; /* no horizontal scroll here */
  }
  .services-tabs .st-tabbar > * {
    width: 100%;          /* each tab fills its grid cell */
    justify-content: flex-start;
  }
}

/* === Mobile: single column stack (you already had this, refined) === */
@media (max-width: 599.98px) {
  .services-tabs .st-tabbar {
    grid-auto-flow: row;
    grid-template-columns: 1fr;  /* 1 per row */
    gap: 10px;
    overflow-x: visible;
  }
  .services-tabs .st-tabbar > * {
    width: 100%;
  }
}

.services-tabs .st-tabbar::-webkit-scrollbar {
  display: none;
}

.services-tabs .st-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  gap: 10px;
  padding: 12px 16px;
  background: #0f0f12;
  color: #cdd3df;
  border: 1px solid #222328;
  border-radius: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease, transform .12s ease, background .2s ease;
}

.services-tabs .st-tab i {
  color: #ff926f;
}

.services-tabs .st-tab:hover {
  color: #fff;
  transform: translateY(-1px);
}

.services-tabs .st-tab.is-active {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 24px -14px rgba(255, 106, 61, .8);
  background: linear-gradient(135deg, rgba(255, 106, 61, .14), rgba(255, 61, 61, .12));
}

.services-tabs .st-indicator {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  bottom: 3px;
  right: auto;
  width: 120px;
  border-radius: 3px;
  transition: transform .25s ease, width .25s ease;
}

.services-tabs .st-panels {
  margin-top: 18px;
}

.services-tabs .st-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: clamp(18px, 2.4vw, 28px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, clip-path .4s ease;
  clip-path: inset(0 0 6% 0 round 16px);
}

.services-tabs .st-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  clip-path: inset(0 0 0 0 round 16px);
}

.services-tabs .st-panel[hidden] {
  display: block;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}

.services-tabs .st-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}

@media (min-width: 900px) {
  .services-tabs .st-grid {
    grid-template-columns: 1.5fr 1fr;
  }
}

.services-tabs .st-copy h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.6vw, 38px);
}

.services-tabs .st-copy p {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--muted);
}

.services-tabs .st-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}

.services-tabs .st-bullets i {
  color: #52d98a;
  margin-right: 8px;
}

.services-tabs .st-media {
  display: grid;
  place-items: center;
}

.services-tabs .st-media img {
  max-width: 600px;
  width: 100%;
  max-height: 400px;
  height: auto;
  border-radius: 12px;
  background: #0e0f12;
  border: 1px dashed #2a2b31;
}

.services-tabs .btn-gradient {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px -12px rgba(255, 106, 61, .85), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .15s ease, filter .15s ease;
  text-decoration: none;
}

.services-tabs .btn-gradient:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.services-tabs .btn-gradient:active {
  transform: translateY(0);
}

/* === Reveal Animations (appended) === */
[data-animate] {
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .5s ease, transform .5s ease;
}

[data-animate].in {
  opacity: 1;
  transform: none;
}

[data-animate="right"] {
  transform: translateX(-18px);
}

[data-animate="right"].in {
  transform: none;
}

[data-animate="left"] {
  transform: translateX(18px);
}

[data-animate="left"].in {
  transform: none;
}

[data-animate="zoom"] {
  transform: scale(.96);
}

[data-animate="zoom"].in {
  transform: none;
}

.reveal-item {
  opacity: 0;
  font-size: 18px;
  transform: translateY(8px);
  animation: revealItem .45s ease forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes revealItem {
  to {
    opacity: 1;
    transform: none;
  }
}

/* === Services Tabs animation overrides (appended) === */
.services-tabs .st-copy {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}

.services-tabs .st-copy.enter {
  opacity: 1;
  transform: none;
}

.services-tabs .st-copy.leave {
  opacity: 0;
  transform: translateY(8px);
}

.services-tabs .st-media {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.services-tabs .st-media.enter {
    opacity: 1;
    border: 2px solid red;
    border-radius: 12px;
    transform: none;
}

.services-tabs .st-media.leave {
  opacity: 0;
  transform: translateY(8px);
}

.site-footer .footer-title::after {
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {

  0%,
  100% {
    opacity: .55
  }

  50% {
    opacity: 1
  }
}

/* === Services Tabs - premium look overrides === */
.services-tabs .st-tab i {
  color: var(--accent);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1;
}

.services-tabs .st-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 106, 61, .22), rgba(255, 61, 61, .18));
  border-color: rgba(255, 106, 61, .5);
  box-shadow: 0 12px 28px -16px rgba(255, 106, 61, .85), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.services-tabs .st-tab.is-active i {
  color: #fff;
}

.services-tabs .st-tab.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .12) 40%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-120%);
  animation: stSheen 2.8s ease-in-out infinite;
}

@keyframes stSheen {
  0% {
    transform: translateX(-120%);
  }

  60%,
  100% {
    transform: translateX(120%);
  }
}

.services-tabs .st-bullets i {
  color: var(--accent);
  margin-right: 10px;
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(255, 106, 61, .25));
  transition: transform .2s ease, filter .2s ease;
}

.services-tabs .st-bullets li:hover i {
  transform: translateX(2px) scale(1.05);
  filter: drop-shadow(0 0 10px rgba(255, 106, 61, .35));
}

/* Ensure sheen stays inside active tab */
.services-tabs .st-tab {
  overflow: hidden;
}

/* ==========================
   Testimonials Section
   ========================== */
.testimonials {
  --accent: #ff6a3d;
  --accent-2: #ff3d3d;
  --line: #1a1a1d;
  --panel: #101012;
  --text: #e9eef7;
  --muted: #a9b2c2;
  color: var(--text);
  background: linear-gradient(#0a0a0b, #0a0a0b);
  padding: 56px 0 24px;
}

.testimonials .tst-wrap {
  width: min(1340px, 92%);
  margin: 0 auto;
}

.testimonials .tst-header {
  text-align: center;
  margin-bottom: 16px;
}

.testimonials .tst-header h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3vw, 32px);
}

.testimonials .tst-header p {
  margin: 0;
  color: var(--muted);
}

.testimonials .tst-slider {
  position: relative;
  overflow: hidden;
}

/* Swipe UX helpers */
.tst-track {
  touch-action: pan-y;
  cursor: grab;
}

.tst-track.is-dragging {
  cursor: grabbing;
}


.testimonials .tst-track {
  --tst-gap: 16px;
  display: flex;
  gap: var(--tst-gap);
  padding: 8px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.testimonials .tst-track.is-dragging {
  cursor: grabbing;
  transition: none;
}

.testimonials .tst-card {
  /* Show 3 slides on desktop by default */
  flex: 0 0 calc((100% - var(--tst-gap) * 2) / 3);
  max-width: calc((100% - var(--tst-gap) * 2) / 3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 22px -18px rgba(0, 0, 0, .6);
  position: relative;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
  cursor: grab;
}

.testimonials .tst-card.is-active {
  border-color: rgba(255, 106, 61, .45);
  box-shadow: 0 20px 44px -26px rgba(255, 106, 61, .6);
}

.testimonials .tst-card.is-active {
  border-color: rgba(255, 106, 61, .45);
  box-shadow: 0 20px 44px -26px rgba(255, 106, 61, .6);
}

.testimonials .tst-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(600px 120px at -10% -60%, rgba(255, 106, 61, .22), transparent 60%);
}

.testimonials .tst-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 106, 61, .35);
  box-shadow: 0 18px 36px -20px rgba(255, 106, 61, .5);
}

.testimonials .tst-quote {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.testimonials .tst-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.testimonials .tst-user img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #24262b;
}

.testimonials .tst-user strong {
  display: block;
  color: #fff;
}

.testimonials .tst-user span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.testimonials .tst-rating {
  margin-top: 10px;
  color: var(--accent);
}

.testimonials .tst-rating .fa-star {
  filter: drop-shadow(0 0 6px rgba(255, 106, 61, .25));
}

.testimonials .tst-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  align-items: center;
}

.testimonials .tst-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: #2a2b31;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.testimonials .tst-dots button.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: scale(1.2);
}

/* Slider arrows (top-right) */
.testimonials .tst-nav {
  position: absolute;
  right: 8px;
  top: -44px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.testimonials .tst-nav button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(255, 106, 61, .85), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .15s ease, filter .15s ease, opacity .2s ease;
}

.testimonials .tst-nav button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.testimonials .tst-nav button:active {
  transform: translateY(0);
}

.testimonials .tst-nav i {
  font-size: 14px;
  line-height: 1;
}

/* floating accent bubbles for premium look */
.testimonials .tst-slider::after {
  content: "";
  position: absolute;
  inset: auto -40% -40% auto;
  width: 60%;
  height: 60%;
  pointer-events: none;
  background: radial-gradient(400px 200px at 70% 0%, rgba(255, 106, 61, .14), transparent 60%);
  filter: blur(18px);
}

/* 2-up on tablets */
@media (max-width: 1024px) {
  .testimonials .tst-card {
    flex-basis: calc((100% - var(--tst-gap)) / 2);
    max-width: calc((100% - var(--tst-gap)) / 2);
  }
}

/* 1-up on phones */
@media (max-width: 680px) {
  .testimonials .tst-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* === Cinematic slider enhancements + avatar initials === */
.testimonials .tst-track {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.testimonials .tst-card {
  transform: translateZ(0) scale(.92);
  opacity: .92;
  backdrop-filter: blur(0px);
}

.testimonials .tst-card.is-near {
  transform: translateZ(40px) scale(.94) rotateY(var(--tilt, 0deg));
  opacity: .96;
}

.testimonials .tst-card.is-center {
  transform: translateZ(80px) scale(1) rotateY(0);
  opacity: 1;
}

.testimonials .tst-user img {
  display: none;
}

.testimonials .tst-avatar {
  width: 44px;
  height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 40%), linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .4px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(255, 106, 61, .6);
  font-size: 18px !important;
  line-height: 1;
  text-align: center;
}

/* Center slide premium highlight */
.testimonials .tst-card.is-center {
  position: relative;
}

.testimonials .tst-card.is-center::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 106, 61, .55), rgba(255, 61, 61, .35));
  opacity: .25;
  z-index: -1;
  filter: blur(10px);
}

.testimonials .tst-card.is-center {
  border-color: rgba(255, 106, 61, .55) !important;
  box-shadow: 0 26px 60px -30px rgba(255, 106, 61, .7);
}

/* Edge fade masks so slides feel infinite */
.testimonials .tst-slider::before,
.testimonials .tst-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}

.testimonials .tst-slider::before {
  left: 0;
  background: linear-gradient(90deg, #0a0a0b 30%, rgba(10, 10, 11, 0));
}

.testimonials .tst-slider::after {
  right: 0;
  background: linear-gradient(270deg, #0a0a0b 30%, rgba(10, 10, 11, 0));
}

/* Typography polish */
.testimonials .tst-quote {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
}

.testimonials .tst-user strong {
  font-size: 15px;
}

.testimonials .tst-user span {
  font-size: 12px;
  opacity: .9;
}

/* Ensure core wrappers match new container width */
.site-footer .footer-wrap,
.services-tabs .st-wrap,
.testimonials .tst-wrap {
  width: min(1340px, 92%);
  margin-left: auto;
  margin-right: auto;
}

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

/* Base: keep your previous space background + icons + animations */
.cta-space {
  position: relative;
  margin: 4rem auto;
  padding: 4.6rem 1.5rem 4.8rem;
  border-radius: 18px;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(115, 140, 255, .20), transparent 60%),
    radial-gradient(900px 500px at -10% 120%, rgba(88, 225, 200, .18), transparent 60%),
    linear-gradient(160deg, #0b0f17 0%, #0c0c0c 100%);
  /* a bit more like your site */
  color: #eef2ff;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  isolation: isolate;
}

/* Content block */
.cta-space__content {
  text-align: center;
  max-width: 1050px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Kicker (top line) */
.cta-kicker {
  margin: 0 0 .9rem;
  color: #c9c9c9;
  letter-spacing: .18em;
  font-size: clamp(.75rem, .9vw, .92rem);
  text-transform: uppercase;
  opacity: .9;
}

/* Title styled like your 2nd image */
.cta-title {
  margin: 0 0 .8rem;
  font-weight: 800;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* keep site typography */
  font-size: clamp(1.9rem, 4.8vw, 3.15rem);
  letter-spacing: .01em;
  color: #f7f7f7;
}

/* Gold word */
.gold-text {
  background: linear-gradient(90deg, #ed2e11, #ff6b4a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Subtext (one line) */
.cta-sub {
  margin: 0 0 1.6rem;
  color: #d9d9d9;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  opacity: .95;
}

/* Gold pill button like screenshot */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 10px;
  padding: .95rem 1.35rem;
  font-weight: 700;
  text-decoration: none;
  color: #1b1400;
  background: linear-gradient(90deg, #ed2e11, #ff6b4a);
  box-shadow:
    0 10px 26px rgba(255, 204, 77, .25),
    inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(255, 204, 77, .35),
    inset 0 0 0 1px rgba(0, 0, 0, .1);
  filter: brightness(1.03);
}

.btn-gold:active {
  transform: translateY(0);
}

.btn-arrow {
  font-size: 1.25em;
  line-height: 1;
}

/* ---------- icons & positions (unchanged) ---------- */
.cta-space__icons {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cta-space__icon {
  position: absolute;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
}

.cta-space__moon {
  top: 12%;
  left: 6%;
  animation: float 6s ease-in-out infinite;
  opacity: .95;
}

.cta-space__saturn {
  bottom: -10px;
  right: -20px;
  transform-origin: 80px 80px;
  animation: drift 18s ease-in-out infinite;
}

.cta-space__rocket {
  right: 2%;
  top: 10%;
  animation: rocketPath 9s ease-in-out infinite;
}

.cta-space__planet {
  bottom: 18%;
  left: 14%;
  animation: float 7.5s ease-in-out infinite reverse;
}

/* animations (same as before) */
@keyframes float {
  0% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }

  100% {
    transform: translateY(0)
  }
}

@keyframes drift {
  0% {
    transform: rotate(0) translateY(0);
    opacity: .85
  }

  50% {
    transform: rotate(2.5deg) translateY(6px);
    opacity: 1
  }

  100% {
    transform: rotate(0) translateY(0);
    opacity: .85
  }
}

@keyframes rocketPath {
  0% {
    transform: translate(0, 0) rotate(-5deg)
  }

  25% {
    transform: translate(-10px, 14px) rotate(-8deg)
  }

  50% {
    transform: translate(6px, 28px) rotate(-2deg)
  }

  75% {
    transform: translate(-6px, 10px) rotate(-6deg)
  }

  100% {
    transform: translate(0, 0) rotate(-5deg)
  }
}

.cta-space__rocket .flame {
  transform-origin: 60px 132px;
  animation: flame .6s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 144, 77, .65));
}

@keyframes flame {

  0%,
  100% {
    transform: scaleY(.9);
    opacity: .9
  }

  50% {
    transform: scaleY(1.1);
    opacity: 1
  }
}

/* subtle stars retained */
.cta-space::before,
.cta-space::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: repeat;
  pointer-events: none;
  opacity: .28;
}

.cta-space::before {
  background-image:
    radial-gradient(1px 1px at 20% 30%, #ffffff 60%, transparent 61%),
    radial-gradient(1px 1px at 80% 20%, #b6d8ff 60%, transparent 61%),
    radial-gradient(1px 1px at 60% 70%, #ffffff 60%, transparent 61%),
    radial-gradient(1px 1px at 30% 80%, #cfe4ff 60%, transparent 61%);
  animation: twinkle 5s linear infinite;
}

.cta-space::after {
  background-image:
    radial-gradient(1px 1px at 35% 25%, #e9f2ff 60%, transparent 61%),
    radial-gradient(1px 1px at 75% 75%, #ffffff 60%, transparent 61%);
  animation: twinkle 7s linear infinite reverse;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: .28
  }

  50% {
    opacity: .5
  }
}

/* Responsive tweaks to match your layout spacing */
@media (max-width: 992px) {
  .cta-space {
    padding: 3.6rem 1.25rem 3.8rem;
  }

  .cta-space__rocket {
    right: 9%;
    top: 8%;
    width: 70px;
    height: 120px;
  }

  .cta-space__saturn {
    width: 120px;
    height: 120px;
    right: -30px;
    bottom: -20px;
  }

  .cta-space__moon {
    width: 84px;
    height: 84px;
    left: 2%;
    top: 6%;
  }

  .cta-space__planet {
    width: 72px;
    height: 72px;
    left: 8%;
    bottom: 8%;
  }
}





/* ======================================================
                Testimonials Section  (Leather BG)
   Structure kept the same - only colors/background changed
====================================================== */

:root {
  --tst-bg: #ffffff;
  --tst-text: #111827;
  /* gray-900 */
  --tst-muted: #6b7280;
  /* gray-500/600 blend */
  --tst-border: #e5e7eb;
  /* gray-200/300 */
  --tst-border-active: #4F46E5;
  /* indigo-600 */
  --tst-amber: #f59e0b;
  /* amber-500 */
  --tst-gap: 32px;
  --slides: 1;
  /* JS updates based on breakpoints */
  --radius: 12px;
  --shadow-hover: 0 6px 24px rgba(17, 24, 39, 0.08);
  --container: 1340px;
  /* ~max-w-7xl */
  --bullet-w: 16px;
  --bullet-h: 4px;
}

/* Section wrapper */
.tst-section {
  padding: 96px 0;
  /* py-24 */
  position: relative;
  background: #151314;
  /* solid fallback for very old browsers */
}

/* ===== Leather-finish background (warm umber tint to match theme) ===== */
.tst-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* Layers:
     1) warm highlight top-left
     2) warm highlight bottom-right
     3) deep umber -> charcoal base
     4) subtle leather grain (SVG fractal noise)
  */
  background-image:
    radial-gradient(120% 80% at 20% -10%, rgba(255, 102, 51, .14) 0%, rgba(255, 102, 51, 0) 60%),
    radial-gradient(120% 80% at 80% 110%, rgba(255, 102, 51, .10) 0%, rgba(255, 102, 51, 0) 65%),
    linear-gradient(180deg, #1c1715 0%, #111216 100%),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27256%27%20height%3D%27256%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%200.018%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: cover, cover, cover, 256px 256px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-blend-mode: soft-light, soft-light, normal, overlay;
  opacity: .95;
}

/* Keep content above the texture layer */
.tst-section>* {
  position: relative;
  z-index: 1;
}

.tst-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  /* px-4 */
}

@media (min-width: 640px) {
  .tst-container {
    padding: 0 24px;
  }
}

/* sm:px-6 */
@media (min-width: 1024px) {
  .tst-container {
    padding: 0 32px;
  }
}

/* lg:px-8 */

.tst-head {
  margin-bottom: 64px;
  text-align: center;
}

.tst-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #aeb3bd;
  /* brighter on dark leather */
  letter-spacing: .02em;
}

.tst-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #F3F4F6;
  /* near-white for contrast */
}

/* Carousel layout */
.tst-carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: 64px;
  /* keep space for bullets */
}

.tst-track {
  display: flex;
  gap: var(--tst-gap);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  width: max-content;
  /* smooth centering */
}

.tst-card {
  width: calc((100vw - 32px - (var(--tst-gap) * (var(--slides) - 1))) / var(--slides));
  max-width: calc((var(--container) - 64px - (var(--tst-gap) * (var(--slides) - 1))) / var(--slides));
  background: #ffffff;
  /* keep cards white like original design */
  border: 1px solid var(--tst-border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.tst-card:hover {
  border-color: var(--tst-border-active);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  /* slightly stronger on dark bg */
}

.tst-card.is-active {
  border-color: var(--tst-border-active);
}

/* Content */
.tst-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tst-amber);
  margin-bottom: 24px;
}

.tst-star {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.tst-rating-num {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tst-border-active);
}

.tst-quote {
  color: #4b5563;
  /* gray-600 */
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.tst-author {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 16px;
}

.tst-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.tst-name {
  margin: 0 0 2px 0;
  font-weight: 600;
  color: #111827;
}

.tst-role {
  font-size: .875rem;
  color: #6b7280;
}

/* Pagination bullets */
.tst-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.tst-bullet {
  width: var(--bullet-w);
  height: var(--bullet-h);
  border-radius: 5px;
  background: #c7c9d1;
  opacity: .9;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.tst-bullet.is-active {
  background: var(--tst-border-active);
  opacity: 1;
  transform: translateY(-1px);
}

/* Breakpoints (for --slides) */
@media (min-width: 640px) {
  :root {
    --slides: 1;
  }
}

@media (min-width: 768px) {
  :root {
    --slides: 2;
  }
}

@media (min-width: 1024px) {
  :root {
    --slides: 3;
  }
}

/* ==========================
   Testimonials Section (Dark Mode)
   ========================== */

:root {
  --bg: #0b0b0b;
  --card: #111111;
  --text: #f4f4f4;
  --muted: #c8c8c8;
  /* golden accent like the reference */
  --ring: rgba(255, 204, 77, .3);
  --border: rgba(255, 255, 255, .08);
}

.wrap {
  padding: 56px 20px 72px;
}

.head {
  text-align: center;
  margin-bottom: 28px;
}

.head h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.head h2 .primary {
  background: linear-gradient(90deg, #ed2e11, #ff6b4a);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.head p {
  color: var(--muted);
  margin: 0;
  font-size: clamp(14px, 2vw, 18px);
}

.testimonials {
  --gap: 15px;
  padding: 8px 48px;
  /* space for arrows */
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 22px 20px;
  min-height: 100%;
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "avatar quote"
    "avatar quote"
    ". meta";
  gap: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.avatar {
  grid-area: avatar;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 30px;
  margin: 10px 0;
  color: #1b1200;
  background:
    linear-gradient(90deg, #ed2e11, #ff6b4a);
  border: 2px solid var(--ring);
  box-shadow: 0 6px 16px rgba(255, 204, 77, .25), inset 0 0 0 2px rgba(0, 0, 0, .15);
}

.quote {
  grid-area: quote;
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
}

.meta {
  grid-area: meta;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.name {
  font-weight: 800;
  font-size: 18px;
}

.role {
  color: var(--muted);
  font-size: 14px;
}

/* Swiper arrows */
.swiper-button-prev,
.swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #161616;
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 18px !important;
  color: var(--text);
}

/* Focus states (accessibility) */
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Responsive avatar layout on small screens */
@media (max-width: 640px) {
  .card {
    grid-template-columns: 64px 1fr;
  }

  .avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
  }
}

/* =================================================================
                        Contact Page Styles
================================================================= */

/* ---------- RCX (Rocket Contact) - Scoped Variables ---------- */
.rcx-contact {
  --rcx-bg: #0b0f17;
  --rcx-card: #111319;
  --rcx-text: #eef2ff;
  --rcx-muted: #b9c1d1;
  --rcx-border: rgba(255, 255, 255, .08);
  --rcx-accent: #ff6a3d;
  --rcx-blue: #95a5ff
}

/* ---------- Layout & Card ---------- */
.rcx-contact {
  position: relative;
  height: auto;
  padding: 0 16px;
  color: var(--rcx-text);
  background: radial-gradient(1200px 800px at 90% -10%, rgba(115, 140, 255, .18), transparent 60%),
    radial-gradient(1000px 700px at -10% 120%, rgba(88, 225, 200, .14), transparent 60%),
    linear-gradient(180deg, #0b0f17 0%, #0a0e16 100%);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35)
}

.rcx-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  border: 1px solid var(--rcx-border);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #0b0f17 0%, #0a0f2a 100%)
}

/* ---------- Left (Form) ---------- */
.rcx-left {
  padding: 28px;
  position: relative;
  z-index: 2
}

.rcx-h1 {
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(26px, 3.2vw, 34px)
}

.rcx-lead {
  margin: 0 0 18px;
  color: var(--rcx-muted)
}

.rcx-form {
  display: block
}

.rcx-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr
}

.rcx-field {
  display: grid;
  gap: 6px;
  margin: 0 0 14px
}

.rcx-label {
  font-size: 13px;
  color: #cdd5e4
}

.rcx-input,
.rcx-select,
.rcx-textarea {
  width: 100%;
  color: var(--rcx-text);
  background: #0e1320;
  border: 1px solid var(--rcx-border);
  border-radius: 10px;
  padding: 12px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease
}

.rcx-textarea {
  min-height: 120px;
  resize: vertical
}

.rcx-input:focus,
.rcx-select:focus,
.rcx-textarea:focus {
  border-color: rgba(149, 165, 255, .6);
  box-shadow: 0 0 0 3px rgba(149, 165, 255, .25)
}

.rcx-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.rcx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 800;
  color: #1b1208;
  background: linear-gradient(180deg, #ffb78b 0%, var(--rcx-accent) 60%, #d84e28 100%);
  box-shadow: 0 10px 24px rgba(255, 106, 61, .35), inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease
}

.rcx-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 106, 61, .45)
}

.rcx-btn:disabled {
  filter: grayscale(.4);
  cursor: not-allowed
}

.rcx-small {
  font-size: 16px;
  color: #96a2b8
}

/* Inline success label (near button) */
.rcx-ok {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0d2316;
  background: linear-gradient(180deg, #dffbe9, #bdf6d6);
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15)
}

.rcx-ok.rcx-show {
  display: inline-flex
}

.rcx-ok svg {
  width: 14px;
  height: 14px
}

/* ---------- Right (Scene) ---------- */
.rcx-right {
  min-height: 520px;
  height: 675px;
  position: relative;
  border-left: 1px solid var(--rcx-border);
  background: radial-gradient(600px 400px at 60% 0%, rgba(149, 165, 255, .15), transparent 60%)
}

.rcx-scene {
  position: absolute;
  inset: 0;
  overflow: hidden
}

.rcx-stars,
.rcx-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #ffffff 60%, transparent 61%),
    radial-gradient(1px 1px at 80% 20%, #b6d8ff 60%, transparent 61%),
    radial-gradient(1px 1px at 60% 70%, #ffffff 60%, transparent 61%),
    radial-gradient(1px 1px at 30% 80%, #cfe4ff 60%, transparent 61%);
  animation: rcx-twinkle 7s linear infinite
}

.rcx-scene::after {
  background-image:
    radial-gradient(1px 1px at 35% 25%, #e9f2ff 60%, transparent 61%),
    radial-gradient(1px 1px at 75% 75%, #ffffff 60%, transparent 61%);
  animation: rcx-twinkle 10s linear infinite reverse;
  opacity: .28
}

@keyframes rcx-twinkle {

  0%,
  100% {
    opacity: .25
  }

  50% {
    opacity: .55
  }
}

.rcx-rocket-wrap {
  position: absolute;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%)
}

.rcx-rocket {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .55))
}

.rcx-rocket .rcx-flame {
  transform-origin: 60px 132px;
  animation: rcx-idleFlame .8s ease-in-out infinite;
  opacity: .9
}

@keyframes rcx-idleFlame {

  0%,
  100% {
    transform: scaleY(.8)
  }

  50% {
    transform: scaleY(1.05)
  }
}

.rcx-pad {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 90px;
  width: 220px;
  height: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1c1f2a, #0e1320);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  border: 1px solid var(--rcx-border)
}

.rcx-smoke {
  position: absolute;
  left: 50%;
  bottom: 100px;
  width: 240px;
  height: 120px;
  transform: translateX(-50%)
}

.rcx-smoke span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #e8edf9, #b7c2db 60%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transform: translateX(-50%) scale(.2);
  filter: blur(1px)
}

.rcx-smoke span:nth-child(1) {
  animation: rcx-puff 2.2s ease-out infinite .1s
}

.rcx-smoke span:nth-child(2) {
  animation: rcx-puff 2.2s ease-out infinite .4s
}

.rcx-smoke span:nth-child(3) {
  animation: rcx-puff 2.2s ease-out infinite .7s
}

.rcx-smoke span:nth-child(4) {
  animation: rcx-puff 2.2s ease-out infinite 1s
}

.rcx-smoke span:nth-child(5) {
  animation: rcx-puff 2.2s ease-out infinite 1.3s
}

@keyframes rcx-puff {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.2)
  }

  10% {
    opacity: .45
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -80px) scale(1.6)
  }
}

/* Launch state */
.rcx-scene.rcx-launch .rcx-rocket-wrap {
  animation: rcx-lift 2.2s cubic-bezier(.22, .61, .36, 1) forwards
}

.rcx-scene.rcx-launch .rcx-rocket .rcx-flame {
  animation: rcx-boost .3s ease-in-out infinite
}

.rcx-scene.rcx-launch .rcx-smoke span {
  animation: rcx-boostPuff 1.4s ease-out infinite
}

.rcx-scene.rcx-launch .rcx-pad {
  filter: blur(.3px) brightness(.9)
}

@keyframes rcx-lift {
  0% {
    transform: translate(-50%, 0)
  }

  8% {
    transform: translate(-50%, 6px)
  }

  18% {
    transform: translate(-50%, -8px)
  }

  100% {
    transform: translate(-50%, -120vh)
  }
}

@keyframes rcx-boost {

  0%,
  100% {
    transform: scaleY(1.3)
  }

  50% {
    transform: scaleY(1.8)
  }
}

@keyframes rcx-boostPuff {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.4)
  }

  8% {
    opacity: .55
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -180px) scale(2.4)
  }
}

/* Thank-you panel in the RIGHT side */
.rcx-thanks-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: .35s ease;
  padding: 20px
}

.rcx-thanks-card {
  background: rgba(17, 19, 25, .65);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rcx-border);
  border-radius: 16px;
  padding: 20px 22px;
  display: grid;
  gap: 10px;
  place-items: center;
  max-width: 360px
}

.rcx-thanks-panel.rcx-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto
}

.rcx-astronaut-media img {
  width: 150px;
  height: auto
}

/* Form states */
.rcx-form.rcx-sending {
  opacity: .9;
  pointer-events: none
}

/* Responsive */
@media (max-width:980px) {
  .rcx-card {
    grid-template-columns: 1fr
  }

  .rcx-right {
    min-height: 440px;
    border-left: 0;
    border-top: 1px solid var(--rcx-border)
  }

  .rcx-grid {
    grid-template-columns: 1fr
  }
}



/* ==============================================================
                        About Page Styles
============================================================== */

:root {
  --gold: #f5d67b;
  --text: #e9edf5;
  --muted: rgba(255, 255, 255, .78);
  --muted2: rgba(255, 255, 255, .62);
  --accent: #ff6a3d;
  /* primary-light */
  --accent2: #ff2d55;
  --bg1: #06080d;
  --bg2: #0b0f17;
}

.about-hero {
  position: relative;
  padding-top: 100px !important;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255, 45, 85, .12), transparent 60%),
    radial-gradient(900px 420px at 90% -20%, rgba(255, 106, 61, .10), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  padding: 10px 0 80px;
  /* top/bottom spacing to match screenshot */
}

/* tiny starfield pattern */
.about-hero__bg {
  position: absolute;
  inset: 0;
  opacity: .55;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='1.2' opacity='0.8'/%3E%3Ccircle cx='80' cy='20' r='0.9' opacity='0.6'/%3E%3Ccircle cx='140' cy='40' r='1.1' opacity='0.7'/%3E%3Ccircle cx='200' cy='24' r='0.8' opacity='0.55'/%3E%3Ccircle cx='40' cy='100' r='1.0' opacity='0.65'/%3E%3Ccircle cx='120' cy='120' r='1.4' opacity='0.9'/%3E%3Ccircle cx='210' cy='110' r='1.0' opacity='0.6'/%3E%3Ccircle cx='60' cy='180' r='0.9' opacity='0.6'/%3E%3Ccircle cx='160' cy='200' r='1.2' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
}

.about-hero__container {
  padding: 0 20px;
  display: grid;
  gap: 24px;
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width:1100px) {
  .about-hero__container {
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
  }
}

.about-hero__title {
  background: linear-gradient(90deg, #ed2e11, #ff6b4a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  margin: 0 0 12px 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: 44px;
  font-family: Georgia, 'Times New Roman', serif;
  /* gold serif look */
}

@media (min-width:768px) {
  .about-hero__title {
    font-size: 64px;
  }
}

.about-hero__subtitle {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 40px);
  line-height: 1.35;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
}

.about-hero__subtitle .accent {
  color: var(--accent);
  font-style: italic;
}

.about-hero__text {
  margin-top: 28px;
  max-width: 740px;
}

.about-hero__text p {
  margin: 0 0 10px 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.about-hero__text p+p {
  color: #fff;
  opacity: .9;
}

/* bold line already bolded in HTML */

/* Rocket block */
.about-hero__rocket {
  position: relative;
  min-height: 320px;
}

@media (min-width:1100px) {
  .about-hero__rocket {
    min-height: 420px;
  }
}

.rocket-svg {
  position: absolute;
  right: 0;
  top: -10px;
  height: 420px;
  width: auto;
  transform: translateX(10px);
  /* tuck into the edge like the screenshot */
}

@media (max-width:1099px) {
  .rocket-svg {
    position: static;
    display: block;
    margin: 10px 0 0 auto;
    height: 360px;
  }
}

/* Subtle motion like in the screenshot */
@keyframes float {

  0%,
  100% {
    transform: translateX(10px) translateY(0)
  }

  50% {
    transform: translateX(10px) translateY(-6px)
  }
}

@keyframes plumePulse {

  0%,
  100% {
    opacity: .8
  }

  50% {
    opacity: .55
  }
}

.rocket-svg .rocket {
  animation: float 6s ease-in-out infinite;
  transform-origin: 85px 260px;
}

.rocket-svg .plume {
  animation: plumePulse 2.4s ease-in-out infinite;
}

/* ===============================================================
                        FAQ Section Styles
=============================================================== */

/* Scoped theme tokens */
.xfaq-section {
  --xfaq-bg1: #06080d;
  --xfaq-bg2: #0b0f17;
  --xfaq-text: #e8ecf3;
  --xfaq-muted: rgba(255, 255, 255, .75);
  --xfaq-accent: #ff6a3d;
  --xfaq-border: rgba(255, 255, 255, .10);
  position: relative;
  padding: 56px 0;
  color: var(--xfaq-text);
  background:
    radial-gradient(800px 400px at 15% -5%, rgba(255, 45, 85, .10), transparent 60%),
    radial-gradient(900px 480px at 85% -10%, rgba(255, 106, 61, .08), transparent 55%),
    linear-gradient(180deg, var(--xfaq-bg1), var(--xfaq-bg2));
}

.xfaq-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='1.2' opacity='0.8'/%3E%3Ccircle cx='80' cy='20' r='0.9' opacity='0.6'/%3E%3Ccircle cx='140' cy='40' r='1.1' opacity='0.7'/%3E%3Ccircle cx='200' cy='24' r='0.8' opacity='0.55'/%3E%3Ccircle cx='40' cy='100' r='1.0' opacity='0.65'/%3E%3Ccircle cx='120' cy='120' r='1.4' opacity='0.9'/%3E%3Ccircle cx='210' cy='110' r='1.0' opacity='0.6'/%3E%3Ccircle cx='60' cy='180' r='0.9' opacity='0.6'/%3E%3Ccircle cx='160' cy='200' r='1.2' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
}

.xfaq-wrap {
  padding: 0 18px;
  margin: 0 auto;
}

.xfaq-title {
  margin: 0 0 18px;
  font: 800 32px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.xfaq-list {
  display: grid;
  gap: 10px;
}

.xfaq-item {
  border: 1px solid var(--xfaq-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}

.xfaq-item.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.xfaq-q {
  margin: 0;
}

.xfaq-btn {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: transparent;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
}

.xfaq-btn:focus {
  outline: 2px solid var(--xfaq-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.xfaq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.xfaq-chev {
  margin-left: auto;
  transition: transform .35s cubic-bezier(.22, .9, .28, 1);
}

.xfaq-btn[aria-expanded="true"] .xfaq-chev {
  transform: rotate(180deg);
}

/* Smooth height animation */
.xfaq-a {
  height: 0;
  overflow: hidden;
  transition: height .42s cubic-bezier(.22, .9, .28, 1);
}

.xfaq-a__inner {
  padding: 10px 18px 16px 44px;
  color: var(--xfaq-muted);
}




/* ==============================================================================
                          What Makes Us Different Section
============================================================================== */

/* ---------- Theme tokens (scoped to xsteps) ---------- */
.xsteps-section {
  --x-bg1: #06080d;
  --x-bg2: #0b0f17;
  --x-gold: #f5d67b;
  --x-text: #e8ecf3;
  --x-muted: rgba(255, 255, 255, .78);
  --x-border: rgba(245, 214, 123, .35);
  --x-ac1: #ff6a3d;
  --x-ac2: #ff2d55;
  position: relative;
  color: var(--x-text);
  padding: 56px 0 64px;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(255, 106, 61, .09), transparent 55%),
    radial-gradient(800px 440px at 15% -6%, rgba(255, 45, 85, .10), transparent 60%),
    linear-gradient(180deg, var(--x-bg1), var(--x-bg2));
}

.xsteps-bg {
  position: absolute;
  inset: 0;
  opacity: .45;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='1.2' opacity='0.8'/%3E%3Ccircle cx='80' cy='20' r='0.9' opacity='0.6'/%3E%3Ccircle cx='140' cy='40' r='1.1' opacity='0.7'/%3E%3Ccircle cx='200' cy='24' r='0.8' opacity='0.55'/%3E%3Ccircle cx='40' cy='100' r='1.0' opacity='0.65'/%3E%3Ccircle cx='120' cy='120' r='1.4' opacity='0.9'/%3E%3Ccircle cx='210' cy='110' r='1.0' opacity='0.6'/%3E%3Ccircle cx='60' cy='180' r='0.9' opacity='0.6'/%3E%3Ccircle cx='160' cy='200' r='1.2' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
}

/* ---------- Head ---------- */

.xsteps-title {
  margin: 0 0 8px;
  font: 800 44px/1.1 Georgia, 'Times New Roman', serif;
  background: linear-gradient(90deg, #ff9383, #ff3103);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xsteps-title em {
  font-style: italic;
  text-shadow: 0 0 0 transparent
}

.xsteps-sub {
  margin: .2rem 0 0;
  font: 800 28px/1.3 Georgia, 'Times New Roman', serif;
  color: #fff
}

.xsteps-lead {
  margin: 16px 0 0;
  max-width: 880px;
  color: var(--x-muted);
  line-height: 1.7
}

@media (min-width:768px) {
  .xsteps-title {
    font-size: 64px
  }

  .xsteps-sub {
    font-size: 32px
  }
}

/* ---------- Row ---------- */
.xsteps-row {
  margin-top: 24px;
  display: grid;
  gap: 3px;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

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

  .xsteps-arrow {
    transform: rotate(90deg);
    justify-self: center
  }
}

/* ---------- Cards ---------- */
.xsteps-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 10px, rgba(255, 255, 255, .02) 10px 20px),
    rgba(0, 0, 0, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.22, .9, .28, 1), opacity .6s ease, box-shadow .4s ease;
}

.xsteps-card.in {
  transform: none;
  opacity: 1;
}

.xsteps-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5)
}

.xsteps-card__chrome {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(245, 214, 123, .9), rgba(245, 214, 123, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.xsteps-card__inner {
  padding: 22px 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px
}

.xsteps-icon {
  width: 52px;
  height: 52px;
  background: rgba(245, 214, 123, .08);
  border: 1px solid var(--x-border);
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.xsteps-icon svg {
  width: 30px;
  height: 30px
}

.xsteps-card__title {
  grid-column: span 1 / -1;
  margin: 0;
  font: 800 24px/1.2 Georgia, 'Times New Roman', serif;
  color: #fff
}

.xsteps-card__title span {
  color: var(--x-gold);
  margin-right: .25ch
}

.xsteps-card__text {
  grid-column: span 2;
  margin: .25rem 0 0;
  color: var(--x-muted)
}

/* ---------- Animated Arrow ---------- */
.xsteps-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease
}

.xsteps-arrow.in {
  opacity: 1;
  transform: none
}

.xsteps-arrow__svg {
  width: 110px;
  height: auto
}

.xsteps-arrow__stroke {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: xsteps-draw 2.6s ease-in-out infinite, xsteps-float 4.8s ease-in-out infinite;
}

@keyframes xsteps-draw {
  0% {
    stroke-dashoffset: 220;
    opacity: .6
  }

  40% {
    stroke-dashoffset: 0;
    opacity: 1
  }

  60% {
    stroke-dashoffset: 0;
    opacity: 1
  }

  100% {
    stroke-dashoffset: -220;
    opacity: .7
  }
}

@keyframes xsteps-float {

  0%,
  100% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(4px)
  }
}

/* ======================================================================
                        Spaceman Section
====================================================================== */

/* ====== scoped tokens ====== */
.xculture-section {
  --xc-bg1: #06080d;
  --xc-bg2: #0b0f17;
  --xc-gold: #f34224;
  --xc-text: #e8ecf3;
  --xc-muted: rgba(255, 255, 255, .8);
  --xc-ac1: #ff6a3d;
  --xc-ac2: #ff2d55;
  --xc-border: rgba(255, 255, 255, .08);
  color: var(--xc-text);
  position: relative;
  padding: 42px 0;
  background:
    radial-gradient(900px 480px at 84% -10%, rgba(255, 106, 61, .08), transparent 60%),
    radial-gradient(820px 420px at 16% -6%, rgba(255, 45, 85, .10), transparent 60%),
    linear-gradient(180deg, var(--xc-bg1), var(--xc-bg2));
}

/* keep your size */
.spaceman-img {
  height: 400px;
  width: 400px;
  display: block;
  will-change: transform;
  transition: transform var(--drift-dur, 8s) cubic-bezier(.22, .9, .28, 1);
  /* optional subtle glow */
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, .35));
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spaceman-img {
    transition: none;
    transform: none !important
  }
}


.xculture-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='1.2' opacity='0.8'/%3E%3Ccircle cx='80' cy='20' r='0.9' opacity='0.6'/%3E%3Ccircle cx='140' cy='40' r='1.1' opacity='0.7'/%3E%3Ccircle cx='200' cy='24' r='0.8' opacity='0.55'/%3E%3Ccircle cx='40' cy='100' r='1.0' opacity='0.65'/%3E%3Ccircle cx='120' cy='120' r='1.4' opacity='0.9'/%3E%3Ccircle cx='210' cy='110' r='1.0' opacity='0.6'/%3E%3Ccircle cx='60' cy='180' r='0.9' opacity='0.6'/%3E%3Ccircle cx='160' cy='200' r='1.2' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
}

/* ====== layout ====== */
.xculture-grid {
  display: grid;
  gap: 36px;
  align-items: center;
  grid-template-columns: minmax(260px, 560px) 1fr;
}

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

  .xculture-illus {
    order: -1;
    justify-self: center;
  }
}

/* ====== illustration ====== */
.xculture-illus {
  max-width: 560px;
  width: 100%;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .45));
}

.xculture-float {
  animation: xc-float 6s ease-in-out infinite
}

@keyframes xc-float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-6px)
  }
}

@media (prefers-reduced-motion:reduce) {
  .xculture-float {
    animation: none
  }
}

/* ====== headings & copy ====== */
.xculture-title {
  margin: 0 0 8px;
  font: 800 56px/1.1 Georgia, 'Times New Roman', serif;
  color: var(--xc-gold);
}

.xculture-sub {
  margin: 0 0 16px;
  font: 800 28px/1.35 Georgia, 'Times New Roman', serif;
  color: #fff;
}

.xculture-rule {
  width: 2px;
  height: 1.2em;
  background: linear-gradient(180deg, var(--xc-gold), rgba(245, 214, 123, .2));
  margin-top: .2em;
  border-radius: 2px
}

.xculture-own {
  color: var(--xc-ac1);
}

.xculture-text p {
  margin: .6rem 0;
  color: var(--xc-muted);
  line-height: 1.7;
  max-width: 980px
}

/* ====== CTA ====== */
.xculture-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--xc-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.xculture-cta svg {
  width: 18px;
  height: 18px
}

.xculture-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(245, 214, 123, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

/* place with your other xculture styles */
.xculture-grid--reverse {
  grid-template-columns: 1fr minmax(260px, 560px);
}

@media (min-width:1025px) {
  .xculture-grid--reverse .xculture-illus {
    order: 2;
    justify-self: end;
  }

  .xculture-grid--reverse .xculture-copy {
    order: 1;
  }
}

@media (max-width:1024px) {

  /* keep image on top for mobile */
  .xculture-grid--reverse .xculture-illus {
    order: -1;
  }
}

/* =============== GLOBAL SAFE IMG =============== */
.about-hero img,
.xculture-illus img {
  max-width: 100%;
  height: auto;
  display: block
}

/* =============== ABOUT HERO =============== */
.about-hero {
  padding: clamp(32px, 2vw, 56px) 0 clamp(32px, 2vw, 56px);
}

.about-hero__container {
  gap: clamp(18px, 4vw, 40px);
}

.about-hero__title {
  font-size: clamp(28px, 5.2vw, 64px);
  line-height: 1.06;
}

.rocket-svg {
  height: clamp(220px, 45vw, 460px);
  right: clamp(0px, 2vw, 10px);
}

/* =============== FAQ =============== */
.xfaq-title {
  font-size: clamp(22px, 3.4vw, 32px);
}

.xfaq-btn {
  font-size: clamp(15px, 2.8vw, 16px);
  padding: clamp(12px, 2.8vw, 16px) clamp(14px, 3vw, 18px);
}

.xfaq-a__inner {
  padding: clamp(8px, 2.4vw, 10px) clamp(14px, 3vw, 18px) clamp(14px, 3.4vw, 16px) clamp(38px, 5vw, 44px);
}

/* =============== STEPS =============== */
.xsteps-title {
  font-size: clamp(30px, 6vw, 64px);
}

.xsteps-sub {
  font-size: clamp(20px, 3.6vw, 32px);
}

/* grid scales across three tiers: wide / mid / stacked */
@media (min-width:1281px) {
  .xsteps-row {
    grid-template-columns: 1fr minmax(70px, 110px) 1fr minmax(70px, 110px) 1fr;
    gap: clamp(12px, 1.6vw, 20px);
  }
}

@media (min-width:981px) and (max-width:1280px) {
  .xsteps-row {
    grid-template-columns: 1fr minmax(52px, 80px) 1fr;
    row-gap: 16px;
  }

  .xsteps-row .xsteps-arrow:nth-of-type(2) {
    display: none;
  }

  /* keep one arrow between cards on mid screens */
}

@media (max-width:980px) {
  .xsteps-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .xsteps-arrow {
    transform: rotate(90deg);
  }
}

.xsteps-arrow__svg {
  width: clamp(70px, 10vw, 110px);
}

.xsteps-card__inner {
  padding: clamp(16px, 3.2vw, 24px);
  gap: clamp(10px, 2.6vw, 14px);
}

.xsteps-icon {
  width: clamp(44px, 6vw, 52px);
  height: clamp(44px, 6vw, 52px);
}

.xsteps-icon svg {
  width: clamp(22px, 3.4vw, 30px);
  height: clamp(22px, 3.4vw, 30px);
}

.xsteps-card__title {
  font-size: clamp(18px, 3.8vw, 24px);
}

/* =============== CULTURE (SPACEMAN) =============== */
.xculture-title {
  font-size: clamp(32px, 6vw, 56px);
}

.xculture-sub {
  font-size: clamp(18px, 3.6vw, 28px);
}

.xculture-grid {
  gap: clamp(18px, 4vw, 36px);
}

.xculture-illus {
  max-width: min(100%, 560px);
}

/* Image size becomes fluid instead of fixed 400x400 */
.spaceman-img {
  width: clamp(220px, 48vw, 520px);
  height: auto;
  /* keep natural aspect ratio */
  aspect-ratio: 1/1;
  /* keeps it square when source is square */
  object-fit: contain;
  /* same drift transitions you already had */
}

/* reversed layout keeps image right on desktop, stacks on mobile (already in your CSS) */
.xculture-grid--reverse {
  grid-template-columns: 1fr minmax(260px, 560px);
}

@media (min-width:1025px) {
  .xculture-grid--reverse .xculture-illus {
    order: 2;
    justify-self: end;
  }

  .xculture-grid--reverse .xculture-copy {
    order: 1;
  }
}

@media (max-width:1024px) {
  .xculture-grid--reverse .xculture-illus {
    order: -1;
  }

  .xculture-grid {
    grid-template-columns: 1fr;
  }
}



























/* ============================
   TOKENS & GLOBAL
   ============================ */
:root {
  --red: #ed2e11;
  --red2: #ff6b4a;
  --green: #d3a978;
  --bg: #000;
  --text: #e9eef5;
  --muted: #aeb9c7;
  --ring: #252c36;
  --n1: #0e1116;
  --n2: #222b3b;
  --grad: linear-gradient(90deg, var(--red), var(--red2));
  --container: 1340px;
  --header-h: clamp(56px, 7vw, 82px);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

:root {
  /* families */
  --ff-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* sizing + rhythm */
  --lh-tight: 1.05;
  --lh-body: 1.65;
  --track-tight: -0.015em;
  --track-body: 0.005em;

  /* scale for convenience */
  --fs-900: clamp(40px, 6.5vw, 88px);
  /* hero H1 */
  --fs-800: clamp(30px, 4.5vw, 56px);
  /* H2 */
  --fs-700: clamp(22px, 3vw, 32px);
  /* H3 */
  --fs-600: 20px;
  /* lead / large text */
  --fs-400: 16px;
  /* body base */
}

html,
body {
  overflow-x: hidden;
  width: 100%;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-weight: 400;
  color: var(--text, #e9eef5);
  background-color: var(--bg);
}

/* Headings: always Poppins */
h1,
h2,
h3,
h4,
h5,
h6,
.nav-desktop a,
.btn,
.hero-ss__sub {
  font-family: var(--ff-heading);
  letter-spacing: var(--track-tight);
  font-weight: 700;
  /* override per element below */
  line-height: var(--lh-tight);
  margin: 0 0 0.35em;
}

/* Common heading sizes */
h1,
.h1 {
  font-size: var(--fs-800);
  font-weight: 800;
}

h2,
.h2 {
  font-size: var(--fs-700);
  font-weight: 700;
}

h3,
.h3 {
  font-size: 20px;
  font-weight: 600;
}

/* Hero title shortcut you already use */
.hero-ss__title {
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: var(--fs-900);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  margin: 0 0 0.35em;
}

/* Paragraphs, lists, inputs: Body face */
p,
li,
input,
textarea,
select,
small {
  font-family: var(--ff-body);
  font-weight: 400;
}

/* Optional: “lead” paragraph style */
.lead {
  font-size: var(--fs-600);
  line-height: 1.6;
  font-weight: 500;
}

/* Utility for gradient word inside headings */
.grad-text {
  background: linear-gradient(90deg, #ed2e11, #ff6b4a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-span {
  background: linear-gradient(90deg, #ed2e11, #ff6b4a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: min(100% - 24px, var(--container));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.gif-icon {
  display: inline-block;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 6px;
  image-rendering: -webkit-optimize-contrast;
}

/* ============================
   HEADER (with starfield)
   ============================ */
.ss-header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 3000;
  overflow: visible;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.6));
  border-bottom: 1px solid var(--ring);
  backdrop-filter: saturate(160%) blur(10px);
}

.header-row {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ss-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.star-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  height: auto;
  object-fit: contain;
}

.brand-name {
  font: 800 clamp(16px, 1.6vw, 18px) / 1 Poppins, system-ui;
}

.brand .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Desktop navbar (>1024px) */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
}

.nav-list>li>a,
.nav-desktop .sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 10px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  color: var(--text);
}

.nav-list>li>a:hover,
.nav-desktop .sub-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  outline: 1px solid var(--ring);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  cursor: pointer;
}

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 24px rgba(237, 46, 17, 0.32);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(237, 46, 17, 0.45);
}

/* Desktop submenu (hover) */
.has-sub {
  position: relative;
}

.sub-toggle {
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
}

.sub-toggle .chev {
  width: 16px;
  height: 16px;
}

@media (min-width: 1025px) {
  .has-sub .sub {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    display: none;
    min-width: 260px;
    background: var(--n1);
    border: 1px solid var(--ring);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    z-index: 3200;
  }

  .has-sub:hover .sub,
  .has-sub:focus-within .sub {
    display: block;
  }

  .sub a {
    display: block;
    padding: 10px;
    border-radius: 10px;
    color: var(--text);
  }

  .sub a:hover {
    background: var(--n2);
  }
}

/* Burger (≤1024px) */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 36px;
  border: 0;
  background: transparent;
}

.nav-toggle__bar {
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: 0.22s;
}

.nav-toggle__bar:nth-child(1) {
  top: 10px;
}

.nav-toggle__bar:nth-child(2) {
  top: 17px;
}

.nav-toggle__bar:nth-child(3) {
  top: 24px;
}

.menu-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hide/show desktop vs mobile */
@media (max-width: 1024px) {
  .nav-desktop {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

/* Mobile menu (separate panel) */
.nav-mobile {
  position: fixed;
  z-index: 3100;
  inset: var(--header-h) 0 0 0;
  transform: translateY(100%);
  transition: transform 0.28s ease;
  background: rgba(10, 12, 16, 0.98);
  border-top: 1px solid var(--ring);
  display: none;
  align-items: flex-start;
  justify-content: center;
}

.nav-mobile.open {
  transform: translateY(0);
  display: block;
}

@media (max-width: 1024px) {
  .nav-mobile {
    display: none;
  }
}

@media (min-width: 1025px) {
  .nav-mobile {
    display: none !important;
    transform: translateY(100%) !important;
  }

  .nav-scrim {
    display: none !important;
  }
}

.nav-mobile__inner {
  padding: 14px 0 18px;
  height: 92vh;
  background-color: #000;
}

.nav-mobile__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mob-link {
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
}

.mob-link:hover {
  background: rgba(255, 255, 255, 0.05);
  outline: 1px solid var(--ring);
}

.mob-cta {
  margin-top: 8px;
}

/* Mobile accordion (Services) */
.mob-acc {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0;
}

.mob-acc[open] {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--ring);
}

.mob-acc__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  cursor: pointer;
  border-radius: 10px;
  color: var(--text);
}

.mob-acc__summary::-webkit-details-marker {
  display: none;
}

.mob-acc__summary .chev {
  width: 18px;
  height: 18px;
  transition: 0.2s;
}

.mob-acc[open] .chev {
  transform: rotate(180deg);
}

.mob-acc__panel {
  display: flex;
  flex-direction: column;
  padding: 6px 4px 8px 8px;
}

.mob-sublink {
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--text);
}

.mob-sublink:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Scrim */
.nav-scrim {
  display: block;
  position: fixed;
  inset: 0;
  border: 0;
  z-index: 3050;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.menu-open .nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* Lock scroll when open */
.menu-open {
  overflow: hidden;
}

/* ============================
   HERO (image-only + animated SVG)
   ============================ */
.hero-ss {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 100px) 0 clamp(36px, 5vw, 72px);
  background: radial-gradient(1200px 600px at 76% -24%,
      rgba(237, 46, 17, 0.16) 0%,
      rgba(237, 46, 17, 0) 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.hero-ss__grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.8fr);
  /* image | text */
}

@media (max-width: 1024px) {
  .hero-ss__grid {
    grid-template-columns: 1fr;
  }
}

/* Media card (portrait) */
.hero-ss__media {
  position: relative;
}

.hero-ss__media picture,
.hero-ss__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 680px);
  object-fit: cover;
}

.hero-ss__media img {
  border-radius: 22px;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55));
}


/* Copy */
.hero-ss__copy {
  max-width: 760px;
}

.hero-ss__title {
  margin: 0 0 0.35em;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.04;
  /* tight, but readable */
  letter-spacing: -0.015em;
  /* optical tracking */
  text-wrap: balance;
  /* nicer multi-line breaks */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  /* alternate set if Poppins supports */
  color: #fff;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-ss__sub {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 clamp(18px, 2.6vw, 28px) / 1.3 Poppins, system-ui;
  color: #edeff4;
  margin: 12px 0 14px;
}

.hero-ss__sub .bar {
  width: 24px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  display: inline-block;
}

.hero-ss__lead {
  color: #cfd6e2;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  margin: 0 0 22px;
}

/* CTAs */
.hero-ss__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.btn-ghost-grad {
  color: var(--text);
  background: transparent;
  position: relative;
  border-radius: 14px;
  padding: 0.82rem 1.18rem;
}

.btn-ghost-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.btn-ghost-grad:hover {
  color: var(--red);
  background: rgba(255, 255, 255, 0.03);
}

/* Stats (optional) */
.hero-ss__stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: #aeb9c7;
}

.hero-ss__stats li {
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.hero-ss__stats span {
  color: #fff;
  font-weight: 700;
}

/* Social rail */
.hero-ss__social {
  position: absolute;
  right: clamp(8px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-ss__social .soc {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffe;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ring);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.hero-ss__social .soc:hover {
  transform: translateY(-2px);
  background: rgba(255, 150, 134, 0.08);
  box-shadow: 0 10px 20px rgba(237, 46, 17, 0.22);
}

.hero-ss__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

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

/* Small screens polish */
@media (max-width: 480px) {
  .hero-ss__title {
    font-size: clamp(32px, 9vw, 42px);
  }

  .hero-ss__sub {
    font-size: 16px;
  }

  .hero-ss__lead {
    font-size: 15.5px;
  }

  .hero-ss__cta {
    gap: 8px;
  }

  .btn {
    padding: 0.7rem 1rem;
  }
}

/* Separator under header */
body::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--ring);
}

/* =================  */
/* ===== Social Proof / Credibility Split ===== */
:root {
  /* warm light panel that still fits the dark site */
  --cred-bg: #0a0d12;
  /* section backdrop (dark) */
  --cred-panel: #0f131a;
  /* card panel tone */
  --cred-text: #e9eef5;
  /* main text */
  --cred-muted: #b8c2cf;
  /* secondary */
  --cred-accent: #ed2e11;
  /* your red */
}

/* Section wrapper spans full width, adds subtle top divider */
.cred-wall {
  background: var(--cred-bg);
  position: relative;
}

.cred-wall::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  position: absolute;
  inset: 0 0 auto 0;
}

/* Two-column grid */
.cred-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  /* copy | image */
  align-items: center;
  gap: 20px;
  border: none;
  border-radius: 30px;
}

/* Paint a 1.5px gradient “frame” without affecting layout */
.cred-grid::before {
  content: "";
  position: absolute;
  inset: -1px;
  /* sit just outside the box like a border */
  border-radius: inherit;
  padding: 1.5px;
  /* border thickness */
  background: linear-gradient(140deg, #ed2e11, #ff6b4a 45%, #43a439);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* punch out the middle */
  pointer-events: none;
  z-index: 0;
}

/* Keep the section content above the pseudo-element */
.cred-grid>* {
  position: relative;
  z-index: 1;
}

/* Optional subtle glow on hover (desktop only) */
@media (hover: hover) {
  .cred-grid:hover::before {
    box-shadow: 0 0 28px rgba(237, 46, 17, 0.22);
  }
}

/* Copy column */
.cred-copy {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: clamp(22px, 3.4vw, 36px);
  color: var(--cred-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.eyebrow {
  font: 700 12px/1.2 Poppins, system-ui;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cred-muted);
  margin: 0 0 12px;
}

.cred-title {
  font-family: Poppins, system-ui;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: #fff;
  text-wrap: balance;
}

.cred-lead {
  font-family: "Source Sans Pro", system-ui;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--cred-text);
  margin: 0 0 12px;
}

.cred-copy p {
  font-family: "Source Sans Pro", system-ui;
  color: var(--cred-text);
  line-height: 1.7;
  margin: 0 0 10px;
}

.cred-copy .muted {
  color: var(--cred-muted);
}

/* Accent bar on first paragraph */
.cred-lead::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  background: linear-gradient(90deg, var(--cred-accent), #ff6b4a);
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* Media column: one image with a clean frame */
.cred-media {
  margin: 0;
  border-radius: 18px;
  background: #0b0e14;
  position: relative;
  overflow: hidden;
  /* gradient border */
  padding: 1px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02));
}

.cred-media img {
  display: block;
  width: 100%;
  max-height: 505px;
  height: auto;
  border-radius: 18px;
  background: #0b0e14;
  transform: translateZ(0);
}

/* Optional hover depth on desktop */
@media (hover: hover) {
  .cred-media:hover img {
    filter: grayscale(0%) contrast(1.02);
  }
}

/* Responsiveness */
@media (max-width: 1024px) {
  .cred-grid {
    grid-template-columns: 1fr;
  }

  .cred-media {
    order: 2;
  }

  /* keep image after text on mobile */
  .cred-copy {
    order: 1;
  }
}

/* If you ever want a light variant of this section: toggle .cred--light on the section */
.cred--light {
  --cred-bg: #0a0d12;
  /* keep page dark around */
  --cred-panel: #fbf7ed;
  --cred-text: #2c2416;
  --cred-muted: #6b5d4d;
}

/* ===== CTA Banner (Book a 1-on-1) ===== */
:root {
  --cta-bg: #04070c;
  --cta-card: rgba(255, 255, 255, 0.04);
  --cta-text: #e9eef5;
  --cta-muted: #c8d1dc;
  --cta-ring: rgba(255, 255, 255, 0.1);
  --cta-grad: linear-gradient(90deg, #ed2e11, #ff6b4a);
}

/* Section wrapper with subtle top divider + background shapes */
.cta-one {
  position: relative;
  background: var(--cta-bg);
  padding: clamp(42px, 6vw, 86px) 0;
  overflow: hidden;
}

.cta-one::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.cta-one::after {
  /* soft diagonal shape + radial glow for depth */
  content: "";
  position: absolute;
  inset: -20% -35% -30% auto;
  background: radial-gradient(600px 300px at 25% 20%,
      rgba(237, 46, 17, 0.12),
      transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  transform: rotate(-6deg);
  pointer-events: none;
}

/* Layout */
.cta-one__grid {
  display: grid;
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  grid-template-columns: 1.2fr 0.9fr;
  /* text | image */
}

/* Copy panel */
.cta-one__copy {
  position: relative;
  color: var(--cta-text);
  padding: clamp(22px, 3.2vw, 30px) clamp(18px, 2.6vw, 28px);
  border-radius: 18px;
  background: var(--cta-card);
  border: 1px solid var(--cta-ring);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.cta-one__copy::before {
  /* vertical accent bar */
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  border-radius: 999px;
  background: var(--cta-grad);
}

.cta-one__eyebrow {
  margin: 0 0 10px;
  font: 700 12px/1.2 Poppins, system-ui;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cta-muted);
  padding-left: 8px;
}

.cta-one__title {
  font-family: Poppins, system-ui;
  font-weight: 800;
  font-size: clamp(18px, 3.8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 4px 0 0.4em;
  text-wrap: balance;
}

.cta-one__title .grad {
  background: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta-one__lead {
  font-family: "Source Sans Pro", system-ui;
  color: var(--cta-text);
  line-height: 1.7;
  font-size: clamp(15.5px, 1.5vw, 18px);
  margin: 0 0 16px;
  opacity: 0.95;
}

/* Buttons (re-use your site’s tokens if you have them) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease;
  will-change: transform;
}

.btn-primary {
  color: #fff;
  background: var(--cta-grad);
  box-shadow: 0 14px 36px rgba(237, 46, 17, 0.35);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(237, 46, 17, 0.48);
}

.btn-ghost-dark {
  color: var(--cta-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cta-ring);
}

.btn-ghost-dark:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.cta-one__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .cta-one__grid {
    grid-template-columns: 1fr;
  }

  .cta-one__media {
    order: 2;
    justify-content: center;
  }

  .cta-one__media img {
    width: min(100%, 440px);
  }

  .cta-one__copy {
    order: 1;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 0.78rem 1.05rem;
  }

  .cta-one__title {
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
}

/* ============================
   FOOTER
   ============================ */
.ss-footer {
  position: relative;
  background: var(--n1);
  border-top: 1px solid var(--ring);
}

/* ============================
   ANIMATION HELPERS
   ============================ */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left {
  transform: translate3d(-18px, 0, 0);
}

.reveal-right {
  transform: translate3d(18px, 0, 0);
}

.reveal-up.in,
.reveal-left.in,
.reveal-right.in {
  opacity: 1;
  transform: none;
}

@keyframes floaty {
  from {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes thrust {

  0%,
  100% {
    transform: scaleY(1);
    opacity: 0.9;
  }

  50% {
    transform: scaleY(1.3);
    opacity: 1;
  }
}

/* ============================
   ASTRO FEATURES
   ============================ */
.features-astro {
  position: relative;
  padding: clamp(40px, 6vw, 90px) 0;
  background: radial-gradient(900px 400px at 15% -10%,
      rgba(237, 46, 17, 0.1),
      transparent 60%),
    radial-gradient(900px 400px at 95% 110%,
      rgba(67, 164, 57, 0.08),
      transparent 60%),
    #000;
  border-top: 1px solid var(--ring);
}

.fa-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 20px;
}

.fa-lead {
  color: var(--muted);
  margin: 6px 0 0;
}

.fa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.6vw, 24px);
  margin-top: clamp(16px, 3vw, 28px);
}

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

.fa-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.fa-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 18px 40px rgba(237, 46, 17, 0.18);
}

.fa-card h3 {
  margin: 10px 0 6px;
  font-weight: 700;
}

.fa-card p {
  color: var(--muted);
  margin: 0 0 10px;
}

.fa-card .link-more {
  color: #fff;
  font-weight: 600;
}

.fa-art {
  display: grid;
  place-items: center;
  height: 96px;
}

.ico-rocket {
  animation: floaty 4s ease-in-out infinite;
}

.ico-rocket .flame {
  transform-origin: 16px 52px;
  animation: thrust 0.6s ease-in-out infinite;
}

.ico-sat,
.ico-comet {
  animation: floaty 6s ease-in-out infinite;
}

/* ============================
   ORBIT SCENE
   ============================ */
.orbit-hero {
  position: relative;
  padding: clamp(40px, 6vw, 90px) 0;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0));
  border-top: 1px solid var(--ring);
}

.orbit-wrap header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 22px;
}

.orb-scene {
  position: relative;
  width: min(100%, 820px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.orb-earth {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58%;
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.55));
}

.orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  animation: spin-slow 28s linear infinite;
}

.orb>span {
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translate(-50%, -50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ring);
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.orb--1 {
  width: 96%;
  height: 96%;
  margin: 2%;
  animation-duration: 36s;
}

.orb--2 {
  width: 76%;
  height: 76%;
  margin: 12%;
  animation-duration: 28s;
}

.orb--3 {
  width: 56%;
  height: 56%;
  margin: 22%;
  animation-duration: 22s;
}

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

  .orb,
  .ico-rocket,
  .ico-sat,
  .ico-comet {
    animation: none !important;
  }
}

/* ============================
   STEPS TIMELINE
   ============================ */
.steps-launch {
  position: relative;
  padding: clamp(36px, 5.5vw, 80px) 0 clamp(40px, 6vw, 90px);
  border-top: 1px solid var(--ring);
  background: radial-gradient(900px 350px at 80% -10%,
      rgba(237, 46, 17, 0.12),
      transparent 60%);
}

.steps-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
  margin-top: clamp(12px, 3vw, 24px);
}

@media (max-width: 1024px) {
  .steps-timeline {
    grid-template-columns: 1fr;
  }
}

.steps-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--red2));
  opacity: 0.35;
}

@media (max-width: 1024px) {
  .steps-timeline::before {
    left: 16px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
  }
}

.step {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 16px 14px 14px;
}

.step h3 {
  margin: 0 0 6px;
}

.step p {
  margin: 0;
  color: var(--muted);
}

.step .dot {
  position: absolute;
  top: 24px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(237, 46, 17, 0.25),
    0 0 22px rgba(237, 46, 17, 0.45);
}

@media (max-width: 1024px) {
  .step .dot {
    top: 0;
    left: 16px;
    transform: translate(-50%, -50%);
  }
}

.foot-grid {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: 1.3fr 0.9fr 0.9fr 1.3fr;
  /* brand | company | services | newsletter */
  padding: clamp(28px, 5vw, 56px) 0;
}

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

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

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.foot-tag {
  color: var(--muted);
  max-width: 38ch;
}

.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.foot-social .soc {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ring);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.foot-social .soc:hover {
  transform: translateY(-2px);
  background: rgba(255, 150, 134, 0.08);
  box-shadow: 0 10px 20px rgba(237, 46, 17, 0.22);
}

.foot-title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 10px;
}

.foot-links li+li {
  margin-top: 6px;
}

.foot-links a {
  display: inline-block;
  color: var(--text);
  padding: 6px 0;
  border-radius: 8px;
}

.foot-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  padding-left: 8px;
}

.foot-links .cta-link {
  position: relative;
}

.foot-links .cta-link::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 3px;
  background: var(--grad);
  border-radius: 2px;
}

.foot-news {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.foot-news input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--ring);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.foot-news input[type="email"]::placeholder {
  color: var(--muted);
}

.foot-note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
}

.foot-meta {
  border-top: 1px solid var(--ring);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0));
}

.foot-meta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 20px;
}

.foot-meta__row p {
  margin: 0;
  color: var(--muted);
}

.foot-legal {
  display: flex;
  gap: 12px;
}

.foot-legal a {
  color: var(--muted);
}

.foot-legal a:hover {
  color: #fff;
}

@media (max-width: 640px) {
  .foot-meta__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Email / Service Hero with GIF ===== */
:root {
  /* assumes your global tokens already exist; included for safety */
  --red: #ed2e11;
  --green: #43a439;
  --white: #fff;
  --text: #e9eef5;
  --muted: #aeb9c7;
  --ring: rgba(255, 255, 255, 0.08);
  --grad: linear-gradient(90deg, #ed2e11, #ff6b4a);
  --n1: #0e1116;
  --n2: #151a22;
}

.svc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 4vw, 80px) 0;
  background: radial-gradient(900px 420px at 85% -10%,
      rgba(237, 46, 17, 0.15),
      transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.svc-hero__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr;
  /* copy | gif */
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 1024px) {
  .svc-hero__grid {
    grid-template-columns: 1fr;
  }
}

/* copy */
.svc-hero__copy {
  max-width: 820px;
}

.svc-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font: 600 12px/1 Poppins, system-ui;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.svc-eyebrow .badge {
  display: inline-block;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ring);
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
}

.svc-eyebrow .dot {
  opacity: 0.6;
}

.svc-title {
  margin: 0 0 0.35em;
  color: #fff;
  font: 800 clamp(38px, 5.8vw, 58px) / 1.05 Poppins, system-ui;
  letter-spacing: -0.01em;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svc-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #edf1f7;
  margin: 0.2rem 0 1rem;
  font: 700 clamp(18px, 2.4vw, 24px) / 1.3 Poppins, system-ui;
}

.svc-sub .bar {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--grad);
}

.svc-lead {
  color: #cfd6e2;
  font: 400 clamp(16px, 1.5vw, 18px) / 1.7 "Source Sans Pro", system-ui;
  margin: 0 0 12px;
}

.svc-note {
  color: var(--muted);
  font: 400 16px/1.7 "Source Sans Pro", system-ui;
  margin: 0 0 18px;
}

.link-underline {
  position: relative;
  color: #fff;
  text-decoration: none;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: 0.25s ease;
}

.link-underline:hover::after {
  transform: scaleX(1);
}

/* CTA row */
.svc-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease;
  text-decoration: none;
}

.btn svg {
  flex: 0 0 auto;
}

.btn-primary {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 16px 38px rgba(237, 46, 17, 0.35);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 52px rgba(237, 46, 17, 0.48);
}

.btn-ghost-grad {
  color: var(--text);
  background: transparent;
  position: relative;
}

.btn-ghost-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.2s ease;
}

.btn-ghost-grad:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

/* trust pills */
.svc-trust {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: #bfd0e3;
}

.svc-trust .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  background: #8ba4c2;
}

.dot--ok {
  background: var(--green);
}

/* media (GIF) */
.svc-hero__media {
  position: relative;
  border-radius: 22px;
  padding: 1px;
  isolation: isolate;
  /* gradient frame */
  background: var(--grad);
  mask-composite: exclude;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.svc-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 21px;
  background: #0a0d12;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55));
}

/* hover depth */
@media (hover: hover) {
  .svc-hero__media:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 80px rgba(237, 46, 17, 0.2),
      0 10px 26px rgba(0, 0, 0, 0.45);
  }
}

/* small screens */
@media (max-width: 480px) {
  .svc-title {
    font-size: clamp(32px, 9vw, 42px);
  }

  .btn {
    padding: 0.78rem 1rem;
  }
}

.service-color {
  color: #d3a978;
}

/* ============== FAQs ============= */
/* ===========================
   FAQ - Sujit Shukla theme
   =========================== */
.faq-ss {
  padding: clamp(40px, 6vw, 96px) 0;
  background: radial-gradient(1000px 480px at 12% -12%,
      rgba(211, 169, 120, 0.14),
      transparent 60%),
    radial-gradient(900px 420px at 88% -18%,
      rgba(211, 169, 120, 0.1),
      transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

/* make section a positioning context */
.faq-ss {
  position: relative;
}

/* top-right decorative image */
.faq-ss__orn {
  position: absolute;
  top: 15px;
  /* nudge as you like */
  right: 11px;
  width: clamp(120px, 18vw, 220px);
  height: auto;
  opacity: 0.34;
  /* soft, premium */
  pointer-events: none;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.45));
  animation: faqOrnFloat 9s ease-in-out infinite alternate;
}

/* gentle float + tiny rotate so it feels alive */
@keyframes faqOrnFloat {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-10px) rotate(-2deg);
  }
}

/* smaller on mobile or hide if needed */
@media (max-width: 560px) {
  .faq-ss__orn {
    width: 140px;
    right: -10px;
    top: -10px;
    opacity: 0.12;
  }

  /* or: display:none; */
}

.faq-ss .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.faq-ss__head {
  margin-bottom: clamp(18px, 3.5vw, 36px);
  display: flex;
  align-items: end;
  gap: 16px;
  flex-wrap: wrap;
}

.faq-ss__title {
  margin: 0;
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-ss__title .dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--grad);
  box-shadow: 0 0 0 6px rgba(237, 46, 17, 0.15);
}

.faq-ss__hint {
  color: var(--muted);
  font-size: 14.5px;
}

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

@media (max-width: 900px) {
  .faq-ss__grid {
    grid-template-columns: 1fr;
  }
}

/* Card item */
.faq-ss__item {
  background: #0a0d12;
  border: 1px solid var(--ring);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transform: translateY(14px);
  opacity: 0;
  /* for reveal */
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s;
}

.faq-ss__item.revealed {
  transform: none;
  opacity: 1;
}

.faq-ss__q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  color: var(--text);
  text-align: left;
  padding: clamp(14px, 2vw, 18px);
  cursor: pointer;
}

.faq-ss__q:hover {
  background: rgba(255, 255, 255, 0.03);
}

.faq-ss__q[aria-expanded="true"] {
  background: rgba(237, 46, 17, 0.05);
}

.faq-ss__ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #141922, #0d1118);
  border: 1px solid var(--ring);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 8px 20px rgba(237, 46, 17, 0.12);
}

.faq-ss__ico svg {
  width: 18px;
  height: 18px;
  fill: url(#grad-fallback);
  color: transparent;
}

.faq-ss__ico svg path {
  fill: #ffc7b9;
}

/* warm hint that fits theme */

.faq-ss__qtext {
  font-weight: 700;
  letter-spacing: 0.1px;
}

.faq-ss__chev {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #cfd6e2;
  transition: transform 0.26s ease;
}

.faq-ss__q[aria-expanded="true"] .faq-ss__chev {
  transform: rotate(180deg);
  color: #fff;
}

/* Answer panel */
.faq-ss__a {
  border-top: 1px solid var(--ring);
}

.faq-ss__acontent {
  padding: 14px 18px 18px;
  background: linear-gradient(0deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0)),
    radial-gradient(600px 220px at 25% -40%,
      rgba(237, 46, 17, 0.16),
      transparent 70%);
  color: #f5e9e6;
  line-height: 1.65;
}

/* Subtle highlight stripe on the left when open */
.faq-ss__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--grad);
  opacity: 0.85;
  transition: width 0.28s ease;
}

.faq-ss__item.open::before {
  width: 3px;
}

/* Reduce padding on dense screens */
@media (max-width: 520px) {
  .faq-ss__q {
    gap: 10px;
    padding: 12px;
  }

  .faq-ss__acontent {
    padding: 12px;
  }
}

/* gradient def for icon fallback (Safari older) */
.faq-ss {
  position: relative;
}

.faq-ss::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  /* just to keep gradient in DOM */
}

/* ========== */
/* ===========================
   Different - theme + animations
   =========================== */
.different-ss {
  position: relative;
  padding: clamp(52px, 7vw, 110px) 0;
  /* Warm gold + soft red glow (uses your palette) */
  background: radial-gradient(1000px 420px at 12% -12%,
      rgba(211, 169, 120, 0.14),
      transparent 60%),
    radial-gradient(900px 380px at 90% -18%,
      rgba(237, 46, 17, 0.1),
      transparent 55%);
}

.different-ss .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Head */
.diff-head {
  text-align: center;
  max-width: 980px;
  margin: 0 auto clamp(26px, 4.5vw, 44px);
}

.diff-title {
  margin: 0 0 8px;
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 4.8vw, 48px);
  line-height: 1.1;
}

.diff-title em {
  color: #f4e4c9;
  font-style: italic;
  font-weight: 900;
}

.diff-title .flare {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  margin-right: 10px;
  background: var(--grad);
  box-shadow: 0 0 0 6px rgba(237, 46, 17, 0.15),
    0 0 30px rgba(237, 46, 17, 0.35);
  vertical-align: middle;
}

.diff-sub {
  margin: 0 0 12px;
  font-weight: 800;
  color: #fff;
  font-size: clamp(18px, 2.6vw, 26px);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.diff-copy {
  color: #d8dfea;
  font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.7;
}

.diff-copy p {
  margin: 0.4em 0;
}

/* Grid: 3 cards + arrows between on large screens */
.diff-grid {
  margin-top: clamp(26px, 4vw, 42px);
  display: grid;
  gap: clamp(18px, 2.2vw, 24px);
  grid-template-columns: 1fr auto 1fr auto 1fr;
  /* card, arrow, card, arrow, card */
  align-items: center;
}

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

  .diff-arrow {
    display: none;
  }
}

/* Arrow (fixed alignment) */
.diff-arrow {
  display: grid;
  place-items: center;
  min-width: 72px;
  height: 100%;
}

.diff-arrow img {
  display: block;
  border-radius: 999px;
  filter: drop-shadow(0 2px 10px rgba(211, 169, 120, 0.45));
}

/* Card */
.diff-card {
  position: relative;
  border-radius: 16px;
  padding: 28px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.03) 0 2px,
      rgba(255, 255, 255, 0) 2px 6px),
    #0a0d12;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s;
}

.diff-card.revealed {
  transform: none;
  opacity: 1;
}

/* Animated border highlight (shimmering) */
/* --- Smooth pulsing border (fade in/out) --- */
.diff-card__border {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 16px;
  pointer-events: none;

  /* gradient stroke that matches your theme */
  background: linear-gradient(90deg,
      rgba(211, 169, 120, 0.9),
      rgba(237, 46, 17, 0.9));

  /* carve out the middle so only the border shows */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* start soft, then pulse */
  opacity: 0.7;
  filter: drop-shadow(0 8px 24px rgba(237, 46, 17, 0));
  animation: borderPulse 6.2s ease-in-out infinite;
}

/* nicer when hovering */
@media (hover: hover) {
  .diff-card:hover .diff-card__border {
    animation-duration: 2.2s;
  }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .diff-card__border {
    animation: none;
    opacity: 0.28;
  }
}

/* keyframes: gentle glow in & out */
@keyframes borderPulse {
  0% {
    opacity: 0.18;
    filter: drop-shadow(0 8px 24px rgba(237, 46, 17, 0));
  }

  50% {
    opacity: 0.65;
    filter: drop-shadow(0 12px 36px rgba(237, 46, 17, 0.25)) drop-shadow(0 0 26px rgba(211, 169, 120, 0.22));
  }

  100% {
    opacity: 0.18;
    filter: drop-shadow(0 8px 24px rgba(237, 46, 17, 0));
  }
}

.diff-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: radial-gradient(100% 100% at 30% 20%,
      rgba(211, 169, 120, 0.32),
      rgba(237, 46, 17, 0.22));
  border: 1px solid rgba(211, 169, 120, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(237, 46, 17, 0.28);
}

.diff-card__icon svg {
  width: 34px;
  height: 34px;
  fill: #ffe3c9;
}

/* Icon up-down animation */
.floaty {
  animation: floatY 3.6s ease-in-out infinite;
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.diff-card__title {
  grid-column: 2 / -1;
  margin: 2px 0 4px;
  color: #fff;
  font-weight: 900;
  font-size: clamp(19px, 2.8vw, 26px);
  letter-spacing: 0.1px;
}

.diff-card__title .num {
  color: #d3a978;
  margin-right: 6px;
}

.diff-card__text {
  grid-column: 2 / -1;
  color: #cfd6e2;
  line-height: 1.7;
  margin: 0;
}

/* Hover */
@media (hover: hover) {
  .diff-card:hover .diff-card__icon {
    transform: translateY(-2px);
  }

  .diff-card:hover .diff-card__border {
    animation-duration: 1.8s;
    filter: drop-shadow(0 10px 24px rgba(237, 46, 17, 0.25));
  }
}

/* Mobile spacing */
@media (max-width: 520px) {
  .diff-card__icon {
    width: 56px;
    height: 56px;
  }

  .diff-card__icon svg {
    width: 30px;
    height: 30px;
  }
}

/* ================= */
/* Section shell */
.svc-rocket {
  position: relative;
  overflow: clip;
  padding: clamp(56px, 7vw, 120px) 0;
  background: none;
  /* remove direct image */
}

/* background image with opacity */
.svc-rocket::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/back-sec.png") no-repeat center/cover;
  opacity: 0.2;
  /* background opacity */
  z-index: -1;
  /* behind content */
  pointer-events: none;
}

/* Container + grid */
.svc-rocket .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.svc-rocket__grid {
  display: grid;
  gap: clamp(20px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 980px) {
  .svc-rocket__grid {
    grid-template-columns: 1fr;
  }
}

/* Headline + copy */
.svc-rocket__title {
  margin: 0 0 0.35em;
  color: #fff;
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 48px);
  letter-spacing: -0.01em;
}

.svc-rocket__title em {
  color: #f4e4c9;
  font-style: italic;
  font-weight: 900;
}

.svc-rocket__lead {
  color: #d8dfea;
  line-height: 1.7;
  font-size: clamp(16px, 1.6vw, 18px);
  margin: 0.5em 0;
}

.svc-rocket__hint {
  color: #c9d2e3;
  margin-top: 0.6em;
}

.svc-rocket__link {
  color: #f7e2b6;
  text-decoration: none;
  border-bottom: 2px solid rgba(211, 169, 120, 0.6);
  box-shadow: inset 0 -4px 0 rgba(211, 169, 120, 0.2);
}

.svc-rocket__link:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 -10px 0 rgba(211, 169, 120, 0.35);
}

/* Checklist */
.svc-rocket__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.5vw, 14px);
}

.svc-rocket__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  color: #fff;
  line-height: 1.55;
  font-weight: 700;
}

.svc-rocket__list .ico {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: conic-gradient(from 180deg, var(--green), var(--red));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9.5 16.2 4.8 11.5l1.8-1.8 2.9 2.9L17.4 4.7l1.9 1.8z"/></svg>') center/70% 70% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9.5 16.2 4.8 11.5l1.8-1.8 2.9 2.9L17.4 4.7l1.9 1.8z"/></svg>') center/70% 70% no-repeat;
  box-shadow: 0 6px 14px rgba(237, 46, 17, 0.28);
  animation: icoPulse 2.8s ease-in-out infinite;
}

@keyframes icoPulse {

  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }

  50% {
    transform: translateY(-2px);
    filter: brightness(1.15);
  }
}

/* Background layer */
.svc-rocket__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* twinkling stars */
.svc-rocket__bg::before,
.svc-rocket__bg::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(2px 2px at 20% 30%,
      rgba(255, 255, 255, 0.8) 50%,
      transparent 52%),
    radial-gradient(1.5px 1.5px at 70% 10%,
      rgba(255, 255, 255, 0.7) 50%,
      transparent 52%),
    radial-gradient(1.8px 1.8px at 40% 70%,
      rgba(255, 255, 255, 0.65) 50%,
      transparent 52%),
    radial-gradient(1.3px 1.3px at 85% 55%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 52%),
    radial-gradient(1.2px 1.2px at 10% 80%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 52%);
  animation: twinkle 6s linear infinite;
  opacity: 0.35;
}

.svc-rocket__bg::after {
  animation-duration: 9s;
  opacity: 0.22;
  filter: blur(0.3px);
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  50% {
    opacity: 0.45;
    transform: translateY(-6px);
  }
}

/* Rocket image (parallax) */
.svc-rocket__img {
  position: absolute;
  right: clamp(-40px, 6vw, 16px);
  bottom: -16vh;
  /* base anchor */
  width: clamp(120px, 16vw, 260px);
  height: auto;
  transform: translateY(var(--rocket-y)) rotate(var(--rocket-rot));
  transform-origin: 50% 80%;
  filter: drop-shadow(0 18px 40px rgba(237, 46, 17, 0.25)) drop-shadow(0 6px 20px rgba(255, 255, 255, 0.12));
  transition: transform 0.12s linear;
  /* quick micro-smoothing */
}

/* Flame flicker using pseudo tail */
.svc-rocket__img::after {
  content: "";
}

.svc-rocket__img+.flame {
  display: none;
}

/* (placeholder if you add separate flame img) */

/* Vignette */
.svc-rocket::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 500px at 85% 100%,
      rgba(237, 46, 17, 0.08),
      transparent 65%);
  pointer-events: none;
}

/* ============ >>>>>>>>>>>>> Slider */
/* ====== Slider shell ====== */
.svc-slider {
  padding: clamp(48px, 6vw, 90px) 0;
  position: relative;
}

.svc-slider .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.svc-slider__title {
  text-align: center;
  color: #d3a978;
  letter-spacing: 0.22em;
  font-weight: 900;
  font-size: clamp(16px, 1.6vw, 20px);
  text-transform: uppercase;
  margin: 0 0 clamp(18px, 3vw, 26px);
}

.svc-slider__title .rule {
  display: inline-block;
  width: clamp(40px, 8vw, 120px);
  height: 1px;
  background: rgba(211, 169, 120, 0.55);
  vertical-align: middle;
  margin: 0 0.6rem;
}

/* Swiper sizing */
.svc-slider__wrap {
  position: relative;
}

/* Cards */
.svc-card {
  position: relative;
  height: 100%;
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 26px);
  background: repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.03) 0 2px,
      rgba(255, 255, 255, 0) 2px 6px),
    #0a0d12;
  border: 1px solid rgba(211, 169, 120, 0.28);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  transform: translateY(10px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.svc-card:hover {
  transform: translateY(0);
}

/* Animated border pulse */
.svc-card__stroke {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(211, 169, 120, 0.85),
      rgba(237, 46, 17, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.2;
  animation: svcPulse 3.2s ease-in-out infinite;
}

@keyframes svcPulse {

  0%,
  100% {
    opacity: 0.18;
    filter: drop-shadow(0 8px 20px rgba(237, 46, 17, 0));
  }

  50% {
    opacity: 0.6;
    filter: drop-shadow(0 12px 34px rgba(237, 46, 17, 0.26)) drop-shadow(0 0 22px rgba(211, 169, 120, 0.22));
  }
}

/* Icon */
.svc-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: radial-gradient(100% 100% at 30% 20%,
      rgba(211, 169, 120, 0.3),
      rgba(237, 46, 17, 0.2));
  border: 1px solid rgba(211, 169, 120, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(237, 46, 17, 0.22);
  animation: floatY 3.8s ease-in-out infinite;
}

.svc-card__icon svg {
  width: 34px;
  height: 34px;
  fill: #ffe3c9;
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* Text */
.svc-card__title {
  color: #fff;
  margin: 6px 0 2px;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: clamp(18px, 2.2vw, 22px);
}

.svc-card__desc {
  color: #cfd6e2;
  line-height: 1.7;
  margin: 0 0 10px;
}

/* Button */
.btn.svc-card__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #171a21;
  color: #e8edf5;
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  text-decoration: none;
}

.btn.svc-card__btn:hover {
  border-color: #ed2e11;
  box-shadow: 0 10px 24px rgba(237, 46, 17, 0.22);
}

/* Nav arrows */
.svc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 42px;
  border: 0;
  border-radius: 6px;
  background: #f6e7c5;
  color: #14171e;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.svc-nav svg {
  width: 22px;
  height: 22px;
}

.svc-nav--prev {
  left: -6px;
}

.svc-nav--next {
  right: -6px;
}

@media (max-width: 768px) {
  .svc-nav {
    width: 34px;
    height: 38px;
  }

  .svc-nav--prev {
    left: 2px;
  }

  .svc-nav--next {
    right: 2px;
  }
}

/* ===== About / Founder ===== */
.about-ss {
  position: relative;
  padding: clamp(48px, 7vw, 110px) 0;
  background: url(../image/back-ground.jpeg);
  border-block: 1px solid rgba(211, 169, 120, 0.22);
}

.about-ss .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Grid */
.about-ss__grid {
  display: grid;
  gap: clamp(18px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
  align-items: center;
}

@media (max-width: 980px) {
  .about-ss__grid {
    grid-template-columns: 1fr;
  }
}

/* Image */
.about-ss__media {
  position: relative;
  margin: 0;
}

.about-ss__media picture,
.about-ss__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: min(70vh, 680px);
  border: 2px solid red;
  border-radius: 18px;
  background: transparent;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));
}

.about-ss__media::after {
  /* subtle gradient stroke */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(90deg,
      rgba(211, 169, 120, 0.6),
      rgba(237, 46, 17, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.25;
}

/* Copy */
.about-ss__copy {
  max-width: 820px;
}

.about-ss__title {
  margin: 0 0 0.25em;
  color: #ed2e11;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.about-ss__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2c2416;
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 26px);
  margin: 0.2em 0 0.8em;
}

.about-ss__kicker .bar {
  width: 24px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  display: inline-block;
}

.about-ss__text {
  color: #d8dfea;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.75;
}

.about-ss__text p {
  margin: 0.6em 0;
  color: #000;
}

/* Button */
.about-ss__btn {
  margin-top: clamp(14px, 2vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f9fbff;
  background: #171a21;
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 0.95rem 1.2rem;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36);
}

.about-ss__btn:hover {
  border-color: #ed2e11;
  box-shadow: 0 18px 42px rgba(237, 46, 17, 0.25);
  transform: translateY(-1px);
}

/* Small screen polish */
@media (max-width: 520px) {
  .about-ss__title {
    font-size: clamp(24px, 8vw, 34px);
  }

  .about-ss__kicker {
    font-size: 18px;
  }
}

/* ===== Pricing ===== */
.pricing-ss {
  position: relative;
  padding: clamp(48px, 7vw, 120px) 0;
  overflow: hidden;
  /* subtle vignette + theme glow */
  background: radial-gradient(1000px 420px at 12% -12%,
      rgba(211, 169, 120, 0.1),
      transparent 60%),
    radial-gradient(900px 380px at 88% -18%,
      rgba(237, 46, 17, 0.08),
      transparent 55%),
    #050608;
}

.pricing-ss .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* background image with controlled opacity */
.pricing-ss__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.22;
  /* <= background image opacity */
  filter: contrast(1.05) brightness(0.9);
  z-index: -1;
  pointer-events: none;
}

/* Head */
.pricing-ss__title {
  text-align: center;
  color: #d3a978;
  letter-spacing: 0.02em;
  font-weight: 900;
  font-size: clamp(26px, 4.6vw, 48px);
  margin: 0 0 clamp(20px, 3.5vw, 34px);
}

.pricing-ss__title .rule {
  display: inline-block;
  width: clamp(40px, 8vw, 120px);
  height: 1px;
  background: rgba(211, 169, 120, 0.55);
  vertical-align: middle;
  margin: 0 0.6rem;
}

/* Grid */
.pricing-ss__grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 980px) {
  .pricing-ss__grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.price-card {
  position: relative;
  border-radius: 18px;
  padding: clamp(18px, 2.6vw, 28px);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0)),
    #0a0d12;
  border: 1px solid #6b5d4d;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.price-card--hi {
  transform: translateY(-4px);
}

/* tiny lift to suggest premium */

/* animated glowing border */
.price-card__stroke {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(211, 169, 120, 0.85),
      rgba(237, 46, 17, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.18;
  animation: pricePulse 3.2s ease-in-out infinite;
}

@keyframes pricePulse {

  0%,
  100% {
    opacity: 0.18;
    filter: drop-shadow(0 8px 22px rgba(237, 46, 17, 0));
  }

  50% {
    opacity: 0.52;
    filter: drop-shadow(0 12px 36px rgba(237, 46, 17, 0.22)) drop-shadow(0 0 22px rgba(211, 169, 120, 0.18));
  }
}

/* Text */
.price-card__kicker {
  margin: 0 0 0.25rem;
  color: #f4e4c9;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 900;
  font-size: clamp(14px, 1.4vw, 16px);
}

.price-card__sub {
  color: #cfd6e2;
  margin: 0.2rem 0 1.1rem;
}

.price-card__price {
  color: #fff;
  font-weight: 900;
  font-size: clamp(44px, 6.6vw, 72px);
  line-height: 1;
  margin: 0.2rem 0 1rem;
}

.price-card__price .cur {
  font-size: 0.5em;
  vertical-align: top;
  margin-right: 2px;
  color: #f4e4c9;
}

.price-card__price small {
  display: block;
  color: #d8dfea;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}

/* List */
.price-card__list {
  list-style: none;
  margin: 1rem 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  color: #e9eef5;
}

.price-card__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}

.price-card__list .ck {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex: 0 0 auto;
  background: conic-gradient(from 200deg, var(--green), var(--red));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9.5 16.2 4.8 11.5l1.8-1.8 2.9 2.9L17.4 4.7l1.9 1.8z"/></svg>') center/70% 70% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9.5 16.2 4.8 11.5l1.8-1.8 2.9 2.9L17.4 4.7l1.9 1.8z"/></svg>') center/70% 70% no-repeat;
  box-shadow: 0 8px 20px rgba(237, 46, 17, 0.22);
}

/* CTA */
.btn.price-card__btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  background: #111419;
  color: #f0f4fb;
  border: 1px solid var(--ring);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn.price-card__btn:hover {
  border-color: rgba(255, 136, 0, 0.55);
  box-shadow: 0 12px 28px rgba(237, 46, 17, 0.22);
}

/* XL, airy, high-contrast. Local container so it won’t affect global site. */
:root {
  --bcx-bg: #080c14;
  --bcx-surface: #101522;
  --bcx-surface-2: #0c111b;
  --bcx-border: rgba(255, 255, 255, .10);
  --bcx-text: #eef2ff;
  --bcx-muted: #aab3c8;
  --bcx-accent: #ff6a3d;
  /* orange */
  --bcx-accent-2: #ff2d55;
  /* red    */
  --bcx-cyan: #6bd6ff;
}

/* local XL container */
.bcx-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px
}

/* ---------- HERO ---------- */
.bcx-hero {
  position: relative;
  color: var(--bcx-text);
  overflow: hidden;
  background: radial-gradient(1200px 600px at 90% -15%, rgba(255, 106, 61, .12), transparent 60%),
    radial-gradient(1200px 600px at 10% 115%, rgba(95, 160, 255, .10), transparent 60%),
    linear-gradient(180deg, #0b0f17, var(--bcx-surface-2));
  padding: 56px 0 32px;
}

.bcx-hero__grid {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 36px;
  align-items: center
}

.bcx-hero__media {
  height: 360px;
  border: 1px solid var(--bcx-border);
  border-radius: 22px;
  overflow: hidden;
  background: #0b0f17;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45)
}

.bcx-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bcx-hero__content {
  padding-right: 16px
}

.bcx-pill {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bcx-cyan);
  margin: 0 0 8px
}

.bcx-title {
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 10px
}

.bcx-sub {
  margin: 0 0 12px;
  color: var(--bcx-muted);
  font-size: 28px
}

.bcx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--bcx-muted);
  font-size: 24px
}

.bcx-list i {
  color: var(--bcx-accent)
}

.bcx-stars {
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 25% 30%, #fff 60%, transparent 61%),
    radial-gradient(2px 2px at 70% 45%, #e6f0ff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 40% 80%, #cfe2ff 60%, transparent 61%),
    radial-gradient(2px 2px at 85% 75%, #fff 60%, transparent 61%);
  animation: twinkle 12s linear infinite alternate
}

@keyframes twinkle {
  0% {
    opacity: .25
  }

  50% {
    opacity: .55
  }

  100% {
    opacity: .25
  }
}

/* ---------- BODY GRID ---------- */
.bcx-body {
  background: linear-gradient(180deg, var(--bcx-surface-2), var(--bcx-bg));
  color: var(--bcx-text);
  padding: 28px 0 90px
}

.bcx-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 28px;
  align-items: start
}

/* ---------- FORM CARD ---------- */
.bcx-card {
  background: linear-gradient(160deg, var(--bcx-surface), #0e1320);
  border: 1px solid var(--bcx-border);
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow: 0 50px 140px rgba(0, 0, 0, .5);
}

.bcx-progress {
  display: grid;
  gap: 12px;
  margin: 0 0 16px
}

.bcx-progress__bar {
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden
}

.bcx-progress__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--bcx-accent), var(--bcx-accent-2));
  box-shadow: 0 0 30px rgba(255, 106, 61, .35) inset;
  transition: width .3s ease
}

.bcx-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--bcx-muted)
}

.bcx-progress__label {
  font-weight: 900;
  color: #f0f4ff;
  font-size: 28px
}

.bcx-progress__step {
  font-weight: 800;
  opacity: .9
}

/* panes */
.bcx-form {
  position: relative;
  min-height: 280px
}

.bcx-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0
}

.bcx-pane {
  display: none;
  opacity: 0;
  transform: translateY(8px)
}

.bcx-pane.is-active {
  display: block;
  animation: fadeIn .28s ease forwards
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* fields */
.bcx-field {
  display: grid;
  gap: 12px;
  margin: 12px 0
}

.bcx-label {
  color: #d8e1f6;
  font-size: 26px;
  display: flex;
  gap: .7rem;
  align-items: center
}

.bcx-label i {
  color: var(--bcx-cyan)
}

.bcx-input,
.bcx-textarea {
  width: 100%;
  color: var(--bcx-text);
  background: #0c1323;
  border: 1px solid var(--bcx-border);
  border-radius: 16px;
  padding: 18px;
  font-size: 17px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, transform .1s
}

.bcx-textarea {
  min-height: 190px;
  resize: vertical
}

.bcx-input:focus,
.bcx-textarea:focus {
  border-color: rgba(107, 214, 255, .65);
  box-shadow: 0 0 0 4px rgba(107, 214, 255, .22), 0 10px 28px rgba(0, 0, 0, .4);
  transform: translateY(-1px)
}

/* radios */
.bcx-fieldset {
  border: 0;
  padding: 0;
  margin: 10px 0;
  display: grid;
  gap: 12px
}

.bcx-radio {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, #0d1426, #0b1322);
  border: 1px solid var(--bcx-border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s
}

.bcx-radio:hover {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3)
}

.bcx-radio input {
  width: 20px;
  height: 20px;
  accent-color: var(--bcx-accent)
}

/* actions */
.bcx-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap
}

.bcx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  border: 0;
  border-radius: 16px;
  padding: 16px 22px;
  font-weight: 900;
  cursor: pointer;
  color: #1b1208;
  font-size: 16px;
  background: linear-gradient(180deg, #ffd1b9 0%, var(--bcx-accent) 60%, #d84e28 100%);
  box-shadow: 0 16px 32px rgba(255, 106, 61, .38), inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .2s, box-shadow .2s, filter .2s;
}

.bcx-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 36px rgba(255, 106, 61, .48)
}

.bcx-btn--ghost {
  background: transparent;
  color: var(--bcx-text);
  border: 1px solid var(--bcx-border);
  box-shadow: none
}

.bcx-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important
}

.bcx-btn--submit {
  display: inline-flex
}

.bcx-note {
  font-size: 14px;
  color: var(--bcx-muted)
}

/* ---------- STICKY SIDEBAR ---------- */
.bcx-side {
  position: relative
}

.bcx-side>* {
  position: sticky;
  top: 96px
}

.bcx-side__card {
  background: linear-gradient(180deg, #10141e, #0c111b);
  border: 1px solid var(--bcx-border);
  border-radius: 20px;
  padding: 18px 16px;
  color: var(--bcx-text);
  font-size: 20px;
  margin-bottom: 18px
}

/* -------- How it works (bulleted, larger, crisp) -------- */
.bcx-side__process h3 {
  margin: 2px 0 12px;
  font-size: 24px;
  /* balanced with sidebar card */
  line-height: 1.2;
}

.hw-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  /* breathing room between items */
}

.hw-points li {
  position: relative;
  padding-left: 28px;
  /* space for custom bullet */
  font-size: 18px;
  /* larger, but not overpowering */
  line-height: 1.6;
  color: var(--bcx-text);
}

.hw-points li b {
  color: #ffffff;
  /* stronger contrast for the key phrase */
  font-weight: 800;
}

/* gradient “orb” bullet that matches your orange theme */
.hw-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  /* aligns with first line of text */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 36%, transparent 37%),
    linear-gradient(180deg, #ffd6be 0%, var(--bcx-accent) 65%, #d84e28 100%);
  box-shadow:
    0 0 0 3px rgba(255, 106, 61, .18),
    0 6px 14px rgba(0, 0, 0, .45);
}

/* tighter on small screens */
@media (max-width: 480px) {
  .bcx-side__process h3 {
    font-size: 20px;
  }

  .hw-points li {
    font-size: 16px;
    padding-left: 24px;
  }

  .hw-points li::before {
    width: 10px;
    height: 10px;
    top: 0.6em;
  }
}


.bcx-badge {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--bcx-border);
  background: linear-gradient(180deg, #10141e, #0c111b);
  padding: 12px 14px;
  border-radius: 14px
}

.bcx-badge__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe1c3, #ffc79c);
  color: #35200e;
  font-weight: 900
}

.bcx-side__badges {
  display: grid;
  gap: 12px
}

.bcx-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px
}

.bcx-profile__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--bcx-border)
}

.bcx-profile__name {
  font-weight: 900
}

.bcx-profile__role {
  color: var(--bcx-muted);
  font-size: 14px
}

.bcx-profile__copy {
  color: var(--bcx-muted);
  margin: 6px 0 10px
}

.bcx-mini-cta {
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  color: var(--bcx-text);
  border-bottom: 1px dashed rgba(255, 255, 255, .35)
}

.bcx-mini-cta:hover {
  color: #fff
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px) {
  .bcx-hero__grid {
    grid-template-columns: 460px 1fr
  }

  .bcx-grid {
    grid-template-columns: 1.7fr 1fr
  }
}

@media (max-width:1024px) {
  .bcx-hero__grid {
    grid-template-columns: 1fr
  }

  .bcx-hero__media {
        height: 300px;
        margin: auto;
        width: 100%;
        max-width: 400px;
  }

  .bcx-grid {
    grid-template-columns: 1fr
  }

  .bcx-side>* {
    position: static
  }
}

.bcx-span {
  background: linear-gradient(90deg, #ed2e11, #ff6b4a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
}