/*==================================
  Import & Variables
===================================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --bg:              #080808;
  --fg:              #EEEEEE;
  --muted:           #999999;
  --primary:         #00FF6C;
  --primary-opaque:  rgba(0,255,108,0.2);
  --radius:          0.75rem;
  --font-sans:       'Inter', sans-serif;
}

/* Reset & Base */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

/* About Page Specific */
.mission-hero { display:flex; flex-wrap:wrap; align-items:stretch; gap:2.5rem; padding:4.5rem 1rem 3.5rem; }
.mission-hero .mission-text { flex:1 1 420px; min-width:300px; }
.mission-hero .mission-list { list-style:none; margin:1.25rem 0 1.75rem; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.mission-hero .mission-list li { position:relative; padding-left:1.15rem; font-size:.95rem; line-height:1.45; }
.mission-hero .mission-list li::before { content:''; position:absolute; left:0; top:.55em; width:.5em; height:.5em; background:var(--primary); border-radius:50%; box-shadow:0 0 6px var(--primary); }
.mission-hero .mission-cta-row { display:flex; flex-wrap:wrap; align-items:center; margin-top:.25rem; }
.mission-hero .mission-cta-row .inline-link { margin-left:1rem; }
.mission-hero .mission-cube-accent { flex:1 1 320px; min-width:260px; display:flex; align-items:center; justify-content:center; }
@media(max-width:820px){ .mission-hero { padding:3.8rem 1rem 3rem; } }
@media(max-width:680px){ .mission-hero { flex-direction:column; text-align:left; } .mission-hero .mission-cube-accent { order:-1; } }

.about-summary { padding-top:0; margin-top:-1rem; }

/* Values redesign subtle differentiation */
.about-page .values { padding:3.5rem 1rem 3.25rem; position:relative; }
.about-page .values::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,255,108,0.12), rgba(0,255,108,0.02)); opacity:.5; pointer-events:none; }
.about-page .value-cards { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); position:relative; }
.about-page .value-card { background:rgba(0,0,0,0.55); border:1px solid rgba(0,255,108,0.35); border-radius:var(--radius); padding:1.35rem 1.1rem 1.4rem; box-shadow:0 0 16px rgba(0,255,108,0.2); position:relative; overflow:hidden; transition:transform .4s, box-shadow .4s, border-color .4s; }
.about-page .value-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 22% 18%, rgba(0,255,108,0.28), transparent 70%); mix-blend-mode:overlay; opacity:.55; }
.about-page .value-card:hover { transform:translateY(-5px); box-shadow:0 0 30px rgba(0,255,108,0.4); border-color:var(--primary); }
.about-page .value-icon { font-size:1.4rem; filter:drop-shadow(0 0 4px var(--primary)); margin-bottom:.4rem; }
.about-page .value-card h3 { font-size:1.05rem; margin:0 0 .4rem; letter-spacing:.5px; }
.about-page .value-card p { font-size:.85rem; line-height:1.45; margin:0; color:var(--muted); }
@media(max-width:620px){ .about-page .value-card { padding:1.15rem 1rem 1.25rem; } }

/* Accessibility utilities */
.skip-link {
  position: absolute;
  left: 0; top: 0;
  background: #00ff88;
  color: #041b11;
  padding: .6rem 1rem;
  transform: translateY(-110%);
  transition: transform .25s ease;
  z-index: 5000;
  font-weight: 600;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; }

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* FAQ Section */
.faq { margin: 5rem auto 6rem; }
.faq .section-title { font-size: clamp(1.6rem, 2.4vw, 2.3rem); margin-bottom: 1.25rem; }
.faq-items { display: grid; gap: 1rem; }
.faq details { background: linear-gradient(145deg,#0b1511,#08110d 55%); border:1px solid #0f3224; border-radius: 10px; padding: .85rem 1rem; box-shadow: 0 0 0 1px rgba(0,255,140,0.08), 0 6px 18px -8px rgba(0,0,0,0.8); }
.faq details[open] { border-color:#18d47d; box-shadow:0 0 0 1px rgba(0,255,140,0.15),0 8px 28px -10px rgba(0,0,0,0.85); }
.faq summary { cursor: pointer; font-weight:600; list-style: none; position: relative; padding-right: 1.75rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:'+'; position:absolute; right:.4rem; top:.2rem; font-weight:400; transition: transform .3s; color:#75ffd1; }
.faq details[open] summary:after { transform: rotate(45deg); }
.faq p { line-height:1.5; margin:.75rem 0 .25rem; font-size:.95rem; }

@media (max-width: 720px){
  .faq { margin: 4rem 1rem 5rem; }
  .faq p { font-size:.9rem; }
}

/* ==================================
   Subtle Benefits Bar (home)
================================== */
.benefits-bar {
  background: linear-gradient(90deg, rgba(0,255,108,0.08), rgba(0,255,108,0.02));
  border-top: 1px solid rgba(0,255,108,0.3);
  border-bottom: 1px solid rgba(0,255,108,0.3);
  position: relative;
  overflow: hidden;
}
.benefits-bar::before {
  content: '';
  position: absolute;
  top:0;left:0;right:0;bottom:0;
  background: radial-gradient(circle at 20% 50%, rgba(0,255,108,0.15), transparent 60%),
              radial-gradient(circle at 80% 50%, rgba(0,255,108,0.1), transparent 65%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.benefits-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}
.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,255,108,0.3);
  box-shadow: 0 0 10px rgba(0,255,108,0.15);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.benefit-item:hover {
  background: rgba(0,255,108,0.12);
  box-shadow: 0 0 16px rgba(0,255,108,0.4);
  transform: translateY(-2px);
}
.benefit-icon { font-size: 1.15rem; filter: drop-shadow(0 0 4px var(--primary)); }
.benefit-text { font-size: 0.95rem; letter-spacing: 0.5px; }
@media (max-width: 700px){
  .benefits-inner { justify-content: center; }
  .benefit-item { font-size: 0.85rem; }
}

/* ----------------------------------
   Utility: Centered container
---------------------------------- */
.text-center { 
  text-align: center; 
}

.mx-auto { 
  margin-left: auto; margin-right: auto; 
}

.container {
  max-width: 1200px;       /* or whatever your ideal page width is */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;      /* small gutter on mobile */
  padding-right: 1rem;
}

/* ————————————————————————————————————
   1) Global grid background on <body>
———————————————————————————————————— */
body {
  /* your existing tile/grid image or CSS var */
  background: var(--bg) center/cover no-repeat;
  position: relative;
  z-index: 0;
}

/* grid overlay + soft dark tint across the entire viewport */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    /* overall darken */
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    /* vertical grid lines – duller green */
    linear-gradient(
      90deg,
      rgba(15, 223, 0, 0.08) 1px,
      transparent 1px
    ),
    /* horizontal grid lines – duller green */
    linear-gradient(
      rgba(15, 223, 0, 0.08) 1px,
      transparent 1px
    );
  background-size: 40px 40px, 40px 40px;
  z-index: -1;
}

/*==================================
  Header
===================================*/
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Logo + Tagline */
.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
}
.site-logo .logo-main {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  text-shadow: 0 0 8px var(--primary);
}
.site-logo .logo-tagline {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--fg);
}

/* Nav */
nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li + li {
  margin-left: 1.5rem;
}

nav a {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}
nav a:hover,
nav a.active {
  color: var(--primary);
}

/* “Get Started” Button */
.btn-nav {
  margin-left: 1.5rem;
  padding: 0.5rem 1rem;
  background: var(--primary);
  border-radius: var(--radius);
  color: #000;
  font-weight: 600;
  box-shadow: 0 0 12px var(--primary);
  text-decoration: none;
  transition: transform 0.2s;
}
.btn-nav:hover {
  transform: scale(1.05);
}

/* Hamburger toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 2rem;
  height: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle .bar {
  display: block;
  height: 0.2rem;
  background: var(--fg);
  border-radius: 4px;
}

/* Mobile styles */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.9);
    flex-direction: column;
    align-items: center;
    display: none;
    padding: 1rem 0;
  }
  nav ul.open {
    display: flex;
  }
  nav li + li {
    margin-left: 0;
    margin-top: 1rem;
  }
  .btn-nav {
    display: none;
  }
}

/*==================================
  Hero (index.html)
===================================*/
.hero.container {
  position: relative;
  padding: 8rem 1rem 6rem;
  background: rgba(0, 0, 0, 0);
  text-align: center;
  overflow: hidden;
}
.hero.container #hero-particles {
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; opacity:0.35; mix-blend-mode:screen;
}

/* lift every direct child above the overlay */
.hero.container > * {
  position: relative;
  z-index: 1;
}

/* the little badge */
.tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  background-color: rgba(16, 223, 0, 0.15);
  border: 1px solid var(--primary);
  border-radius: 9999px;
  color: var(--primary);
  font-weight: 500;
  box-shadow: 0 0 12px var(--primary);
}

/* main headline */
.hero-title {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #fff;
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 4rem;
  }
}

/* highlighted phrase */
.highlight {
  color: var(--primary);
  text-shadow: 0 0 8px var(--primary);
}

/* sub-headline text */
.hero-subtitle {
  max-width: 700px;
  margin: 0 auto 2rem;
  color: var(--muted);
  line-height: 1.5;
}

/* primary button */
.btn-primary {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--primary);
  color: #000;
  border-radius: var(--radius);
  font-weight: 600;
  box-shadow: 0 0 20px var(--primary);
  text-decoration: none;
  transition: transform 0.2s;
  z-index: 1;  /* just in case */
}
.btn-primary:visited { color:#000; }
.btn-primary:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.btn-primary:hover {
  transform: scale(1.05);
}

/* Micro interaction ring */
.btn-primary {
  position:relative;
  overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at center, rgba(255,255,255,0.6), transparent 60%);
  opacity:0; transform:scale(0.2); transition:opacity .4s, transform .6s;
  mix-blend-mode:overlay; pointer-events:none;
}
.btn-primary:focus-visible::after,
.btn-primary:hover::after { opacity:.35; transform:scale(1); }

.hero .tagline,
.hero .hero-title,
.hero .hero-subtitle,
.hero .btn-primary {
  position: relative;
  z-index: 1;
}

/* Hero CTA alignment */
.hero-ctas { margin-top:1rem; display:inline-flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:center; }
.hero-ctas .btn-secondary { padding:0.75rem 1.75rem; }
@media (max-width:600px){ .hero-ctas { flex-direction:column; } }

/*==========================================================
  Services Preview (index.html)
  Targets: <section class="services container"> … <div class="cards">
===========================================================*/

/* 1) Section spacing + headings */
.services {
  padding: 4rem 1rem;
}
.services .section-title {
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  font-weight: 700;
}
.services .section-subtitle {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2rem;
  color: var(--muted);
}

/* 2) Grid layout for the three cards */
.services .cards {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 3) Card base styling */
.card {
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: 0 0 12px rgba(16, 223, 0, 0.25);
  overflow: hidden;
}

/* 3a) subtle green sheen overlay */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(16, 223, 0, 0.04),
    transparent 60%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* 4) “Popular” / “New” tag */
.card-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--primary);
  color: #000;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(16, 223, 0, 0.6);
}

/* 5) Titles, text, lists */
.card-title {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.card-text {
  margin: 0.75rem 0 1rem;
  color: var(--fg);
  line-height: 1.5;
}

.card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.card-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--fg);
  font-size: 0.9rem;
}

/* green bullet */
.card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5em;
  height: 0.5em;
  background: var(--primary);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* 6) Learn More button */
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* Fix: ensure inline links with only an icon still show (defensive if any were added) */
a.inline-link svg { vertical-align:middle; }

.btn-secondary:hover {
  background: var(--primary);
  color: #000;
}

/* 7) Utility: hide tag on cards without it */
.card:not(.card-popular):not(.card-new) .card-tag {
  display: none;
}

/*==================================
  Why Choose AMP Titans (index.html)
===================================*/
/* Scroll Progress Bar */
#scroll-progress { position:fixed; top:0; left:0; height:3px; width:100%; z-index:200; background:linear-gradient(90deg,var(--primary) var(--p),transparent var(--p)); box-shadow:0 0 8px var(--primary); }
#scroll-progress { opacity:0; transition:opacity .35s; }
#scroll-progress.active { opacity:1; }

/* Offerings (Automation + Websites) */
.offerings { padding:4rem 1rem 3.5rem; }
.offerings-grid { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:2rem; }
.offering-card { position:relative; background:rgba(0,0,0,0.55); border:1px solid var(--primary); border-radius:var(--radius); padding:2rem 1.75rem 2.25rem; overflow:hidden; box-shadow:0 0 18px rgba(0,255,108,0.2); display:flex; flex-direction:column; }
.offering-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 25% 20%, rgba(0,255,108,0.18), transparent 70%); opacity:.55; mix-blend-mode:overlay; }
.offering-card.alt::before { background:radial-gradient(circle at 70% 70%, rgba(0,255,108,0.18), transparent 70%); }
.offering-card.alt2::before { background:radial-gradient(circle at 50% 90%, rgba(0,255,108,0.2), transparent 70%); }
.offering-head { display:flex; align-items:center; gap:.75rem; margin-bottom:0.75rem; }
.offering-icon { font-size:1.6rem; filter:drop-shadow(0 0 6px var(--primary)); }
.offering-title { font-size:1.5rem; margin:0; }
.offering-text { color:var(--muted); margin:0 0 1rem; line-height:1.5; }
.offering-list { list-style:none; padding:0; margin:0 0 1.5rem; font-size:.95rem; }
.offering-list li { position:relative; padding-left:1.1rem; margin-bottom:.55rem; }
.offering-list li::before { content:''; position:absolute; left:0; top:.55em; width:.5em; height:.5em; background:var(--primary); border-radius:50%; }
.offering-cta { margin-top:auto; align-self:flex-start; }
.offering-card:hover { box-shadow:0 0 28px rgba(0,255,108,0.35); transform:translateY(-3px); transition:transform .35s, box-shadow .35s; }
.offering-card { transition:transform .35s, box-shadow .35s; }
@media (max-width:660px){ .offering-title { font-size:1.35rem; } }
.offerings-note { grid-column:1/-1; margin-top:.5rem; font-size:.8rem; color:var(--muted); opacity:.75; text-align:center; letter-spacing:.5px; }

/* Social Proof */
.social-proof { padding:2.5rem 0 2rem; }
.social-inner { text-align:center; }
.social-tag { font-size:.85rem; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:1rem; }
.logo-row { list-style:none; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; padding:0; margin:0; }
.logo-row .lp { font-size:.75rem; padding:.55rem 1rem; letter-spacing:1px; border:1px solid rgba(0,255,108,0.35); background:rgba(0,0,0,0.4); border-radius:999px; position:relative; overflow:hidden; }
.logo-row .lp::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,255,108,0.3), transparent 70%); opacity:0; transition:opacity .5s; }
.logo-row .lp:hover::after { opacity:1; }

/* SEO Anchor Paragraph */
.seo-anchor { padding:1rem 1rem 2.5rem; font-size:.95rem; line-height:1.65; color:var(--muted); }
.seo-anchor p { max-width:900px; margin:0 auto; }
.seo-anchor strong { color:var(--primary); font-weight:600; }

/* Final CTA Band */
.final-cta { padding:4rem 1rem 4.5rem; background:linear-gradient(135deg, rgba(0,255,108,0.12), rgba(0,255,108,0.02)); position:relative; overflow:hidden; }
.final-cta::before { content:''; position:absolute; top:-20%; left:-10%; width:50%; height:160%; background:radial-gradient(circle at 30% 50%, rgba(0,255,108,0.25), transparent 70%); filter:blur(50px); opacity:.55; }
.final-cta-inner { max-width:900px; margin:0 auto; text-align:center; position:relative; }
.final-cta h2 { font-size:2.2rem; margin:0 0 .75rem; }
.final-text { color:var(--muted); margin:0 0 1.5rem; }
.final-actions { display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center; justify-content:center; }
.inline-link { color:var(--primary); text-decoration:none; font-weight:600; position:relative; }
.inline-link::after { content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.inline-link:hover::after { transform:scaleX(1); }
@media (max-width:680px){ .final-cta h2 { font-size:1.8rem; } }

/* Trust Badges */
.trust-badges { padding:2.5rem 0 2rem; }
.trust-inner { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.trust-item { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1rem; background:rgba(0,0,0,0.55); border:1px solid rgba(0,255,108,0.35); border-radius:999px; font-size:.85rem; letter-spacing:.5px; position:relative; overflow:hidden; }
.trust-item::before { content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,255,108,0.15), transparent 70%); opacity:0; transition:opacity .4s; }
.trust-item:hover::before { opacity:1; }
.ti-icon { filter:drop-shadow(0 0 4px var(--primary)); }

/* Callout Chip */
.callout-chip { position:fixed; bottom:1.75rem; right:1.5rem; background:rgba(0,0,0,0.75); color:var(--fg); border:1px solid var(--primary); box-shadow:0 0 14px rgba(0,255,108,0.4); padding:.85rem 1.1rem; font-family:inherit; font-size:.9rem; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:.6rem; transition:transform .4s, opacity .4s; opacity:0; transform:translateY(20px); z-index:150; }
.callout-chip.visible { opacity:1; transform:translateY(0); }
.callout-chip .chip-close { margin-left:.4rem; font-weight:600; }
.callout-chip:hover { background:rgba(0,255,108,0.18); }
.chip-arrow { font-weight:600; }
@media (max-width:600px){ .callout-chip { right:.75rem; left:.75rem; justify-content:center; } }
.why-choose {
  padding: 4rem 1rem;
}
.why-choose .section-title,
.why-choose .section-subtitle {
  text-align: center;
  margin-bottom: 1.5rem;
}


/*────────────────────────────────────────────
  Full Services Page Panels
────────────────────────────────────────────*/

/* 1) Diagonal green gradient overlay + glow */
.section.service-detail {
  background:
    /* soft diagonal gradient */
    linear-gradient(
      135deg,
      rgba(0,255,108,0.05) 0%,
      rgba(0,255,108,0.15) 100%
    ),
    rgba(16,16,16,0.6);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 0 20px rgba(0,255,108,0.4);
  padding: 2rem;
  margin: 2.5rem 0;
  position: relative;
}

/* Optional alternate background tint */
.section.service-detail.alt-background {
  background:
    linear-gradient(
      135deg,
      rgba(0,255,108,0.03) 0%,
      rgba(0,255,108,0.10) 100%
    ),
    rgba(16,16,16,0.6);
}

/* Services Intro (services.html) */
.section.intro {
  text-align: center;
  padding: 4rem 1rem;
  margin-bottom: 2rem;
}

.section.intro .section-title {
  font-size: 3rem;          /* was 2.5rem */
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;    /* tighten up the gap a bit */
  line-height: 1.2;
}

/* bump it further on larger screens */
@media(min-width: 768px) {
  .section.intro .section-title {
    font-size: 4rem;        /* was 2.5rem → 4rem */
  }
}

.section.intro .section-subtitle {
  font-size: 1.125rem;      /* optional: make subtitle a little bigger */
  color: var(--muted);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 2) Overlapping badge */
.section.service-detail .badge {
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  background: var(--primary);
  color: #000;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-shadow: 0 0 4px var(--primary);
}

/* 3) Two-column layout */
.detail-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.detail-left,
.detail-right {
  flex: 1 1 300px;
  min-width: 200px;
}

/* 4) Service icon */
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  background: rgba(0,255,108,0.1);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 12px rgba(0,255,108,0.4);
  color: var(--primary);
}

/* 5) Titles & text */
.service-title {
  color: #fff;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.service-text {
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* service subhead inside right column */
.service-subhead {
  font-size: 1rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary);
  margin: .25rem 0 1rem;
}

/* Services Grid (Mid-size readable) */
.services-overview { padding:1rem 0 3rem; }
.services-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); max-width:1150px; margin:0 auto; }
.svc-card { position:relative; background:rgba(0,0,0,0.6); border:1px solid rgba(0,255,108,0.35); border-radius:calc(var(--radius) + 2px); padding:1.55rem 1.35rem 1.75rem; display:flex; flex-direction:column; gap:.85rem; box-shadow:0 0 14px rgba(0,255,108,0.22); transition:transform .35s, box-shadow .35s, border-color .35s; }
.svc-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 18%, rgba(0,255,108,0.22), transparent 70%); mix-blend-mode:overlay; opacity:.55; pointer-events:none; }
.svc-card:hover { transform:translateY(-6px); box-shadow:0 0 28px rgba(0,255,108,0.4); border-color:var(--primary); }
.svc-head { display:flex; align-items:center; gap:.65rem; }
.svc-icon { font-size:1.35rem; filter:drop-shadow(0 0 5px var(--primary)); }
.svc-title { font-size:1.32rem; margin:0; letter-spacing:.45px; line-height:1.25; }
.svc-text { font-size:.96rem; line-height:1.55; color:var(--muted); margin:0; }
.svc-list, .svc-extra { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; }
.svc-list li, .svc-extra li { position:relative; padding-left:1rem; font-size:.86rem; line-height:1.45; }
.svc-list li::before, .svc-extra li::before { content:''; position:absolute; left:0; top:.55em; width:.45em; height:.45em; background:var(--primary); border-radius:50%; }
.svc-more { margin-top:-.25rem; }
.svc-more summary { cursor:pointer; list-style:none; font-size:.7rem; text-transform:uppercase; letter-spacing:1.1px; color:var(--primary); font-weight:600; position:relative; padding-left:1rem; }
.svc-more summary::-webkit-details-marker { display:none; }
.svc-more summary::before { content:'+'; position:absolute; left:0; top:0; }
.svc-more[open] summary::before { content:'−'; }
.svc-extra { margin-top:.45rem; padding-top:.5rem; border-top:1px solid rgba(0,255,108,0.25); }
.mini-cta { margin-top:auto; align-self:flex-start; font-size:.78rem; text-transform:uppercase; letter-spacing:1.25px; font-weight:600; padding:.65rem 1rem; background:var(--primary); color:#000; border-radius:var(--radius); text-decoration:none; box-shadow:0 0 14px var(--primary); transition:transform .3s, box-shadow .3s; }
.mini-cta:hover { transform:translateY(-3px); box-shadow:0 0 22px var(--primary); }
@media (max-width:680px){ .services-grid { gap:1.25rem; } .svc-card { padding:1.35rem 1.1rem 1.55rem; } .svc-title { font-size:1.15rem; } }

/* Emphasized primary CRM block */
.primary-crm { max-width:1150px; margin:0 auto 2.25rem; }
.svc-card.primary { overflow:hidden; padding:2.1rem 1.9rem 2.25rem; box-shadow:0 0 42px rgba(0,255,108,0.35), 0 0 0 1px rgba(0,255,108,0.4); border:1.5px solid var(--primary); background:linear-gradient(135deg, rgba(0,255,108,0.18), rgba(0,255,108,0.05) 55%, rgba(0,255,108,0.12)); position:relative; }
.svc-card.primary::before { background:radial-gradient(circle at 28% 24%, rgba(0,255,108,0.35), transparent 70%); opacity:.75; }
.svc-card.primary .svc-title { font-size:1.65rem; }
.svc-card.primary .svc-text.big { font-size:1.08rem; max-width:880px; line-height:1.55; }
.svc-card.primary .svc-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem 2rem; margin-top:.65rem; }
.svc-card.primary .svc-list li { font-size:.9rem; }
.svc-badge { position:absolute; top:10px; right:12px; background:var(--primary); color:#000; font-size:.65rem; font-weight:700; letter-spacing:1px; padding:.35rem .6rem; border-radius:999px; box-shadow:0 0 10px var(--primary); text-transform:uppercase; }
.svc-card.primary .mini-cta.prominent { margin-top:1.1rem; font-size:.8rem; padding:.75rem 1.1rem; box-shadow:0 0 30px var(--primary); }
@media (max-width:840px){ .svc-card.primary { padding:1.75rem 1.4rem 2rem; } .svc-card.primary .svc-title { font-size:1.5rem; } }
@media (max-width:600px){ .svc-card.primary { padding:1.55rem 1.2rem 1.85rem; } .svc-card.primary .svc-text.big { font-size:.98rem; } }

/* Compact Templates Section */
.templates-lite { padding:3.5rem 0 2.5rem; }
.templates-lite .section-title.small { font-size:2.1rem; text-align:center; margin:0 0 .75rem; }
@media(min-width:780px){ .templates-lite .section-title.small { font-size:2.6rem; } }
.templates-note { text-align:center; max-width:760px; margin:0 auto 1.75rem; color:var(--muted); font-size:.95rem; line-height:1.5; }
.mini-templates { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.mini-template-card { position:relative; background:rgba(0,0,0,0.55); border:1px solid rgba(0,255,108,0.35); border-radius:var(--radius); padding:1.05rem .95rem 1.2rem; box-shadow:0 0 12px rgba(0,255,108,0.18); overflow:hidden; transition:transform .35s, box-shadow .35s, border-color .35s; }
.mini-template-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 25% 20%, rgba(0,255,108,0.22), transparent 70%); opacity:.5; mix-blend-mode:overlay; pointer-events:none; }
.mini-template-card h3 { font-size:1.05rem; margin:0 0 .55rem; letter-spacing:.5px; }
.mini-list { list-style:none; margin:0 0 .85rem; padding:0; font-size:.8rem; line-height:1.4; }
.mini-list li { position:relative; padding-left:1rem; margin-bottom:.4rem; }
.mini-list li::before { content:''; position:absolute; left:0; top:.55em; width:.45em; height:.45em; background:var(--primary); border-radius:50%; }
.mini-link { display:inline-block; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; color:var(--primary); text-decoration:none; position:relative; }
.mini-link::after { content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.mini-link:hover::after { transform:scaleX(1); }
.mini-template-card:hover { transform:translateY(-4px); box-shadow:0 0 22px rgba(0,255,108,0.35); border-color:var(--primary); }
@media(max-width:600px){ .mini-template-card { padding:1rem .9rem 1.1rem; } }

/* 6) Feature list (green dots) */
.feature-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.feature-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  color: #fff;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.35rem;
  width: 0.5rem; height: 0.5rem;
  background: var(--primary);
  border-radius: 50%;
}

/* 7) Deliver list (check-in-circle) */
.deliver-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.deliver-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: #fff;
}
.deliver-list li::before {
  content: '✔';
  position: absolute;
  left: 0; top: 0;
  width: 1rem; height: 1rem;
  line-height: 1rem;
  text-align: center;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 50%;
  font-size: 0.75rem;
}

/* 8) CTA button */
.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: #000;
  font-weight: 600;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 0 20px var(--primary);
  transition: transform 0.2s;
}
.btn-primary:hover {
  transform: scale(1.05);
}

/* 9) Responsive stack */
@media (max-width: 850px) {
  .detail-content {
    flex-direction: column;
  }
}

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

/* 1) Page Intro */
.about-page .intro {
  text-align: center;
  padding: 4rem 1rem;
}
.about-page .intro .section-title {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .about-page .intro .section-title {
    font-size: 4rem;
  }
}
.about-page .intro .section-subtitle {
  color: var(--muted);
  font-size: 1.25rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 2) Mission List */
.about-page .mission .section-title {
  font-size: 2.5rem;    /* or whatever size you prefer */
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* Mission + Cube accent layout */
.mission-with-cube {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: flex-start;
}
.mission-with-cube .mission-text { flex: 1 1 420px; min-width: 300px; }
.mission-cube-accent { flex: 0 0 300px; display: flex; justify-content: center; }

/* Accent cube: keep original styling, just slightly smaller (≈12% reduction) */
.cube-container.cube-accent { width: 280px; height: 280px; margin: 0; }
.cube-container.cube-accent .cube-hover { width: 260px; height: 260px; }
.cube-container.cube-accent .cube-hover img { width: 16rem; }
@media (max-width: 900px){ .cube-container.cube-accent { width:240px; height:240px; } .cube-container.cube-accent .cube-hover { width:220px; height:220px; } }
/* Reduce internal face depth for accent cube (less 3D spacing than main version) */
.cube-container.cube-accent .face-front  { transform: translateZ(175px) !important; }
.cube-container.cube-accent .face-back   { transform: rotateY(180deg) translateZ(175px) !important; }
.cube-container.cube-accent .face-right  { transform: rotateY( 90deg) translateZ(175px) !important; }
.cube-container.cube-accent .face-left   { transform: rotateY(-90deg) translateZ(175px) !important; }
.cube-container.cube-accent .face-top    { transform: rotateX( 90deg) translateZ(175px) !important; }
.cube-container.cube-accent .face-bottom { transform: rotateX(-90deg) translateZ(175px) !important; }

@media (max-width: 900px) {
  .mission-with-cube { flex-direction: column; }
  .mission-cube-accent { order: 2; }
}

/* (Removed earlier hard overrides to restore original spacing) */


.mission-list {
  list-style: none;
  max-width: 600px;
  padding: 0;
  text-align: left;
  margin-bottom: 4rem;
}
.mission-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.4;
}
.mission-list li::before {
  content: '✔';
  position: absolute;
  left: 0; top: 0;
  width: 1.2rem; height: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 50%;
  font-size: 0.75rem;
}

/* 3) Value Cards */
.about-page .values .section-title {
  font-size: 2.5rem;    /* same scale as mission */
  line-height: 1.2;
  margin-bottom: 1rem;
  margin-top: 6rem; /* space above the grid */
  text-align: center;   /* if you want it centered above the grid */
}

.values .value-cards {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 2rem 0;
}
.value-card {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(0,255,108,0.05) 0%,
      rgba(0,255,108,0.15) 100%),
    rgba(16,16,16,0.6);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 0 12px rgba(0,255,108,0.4);
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.value-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(0,255,108,0.6);
}
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  font-size: 1.5rem;
  background: rgba(0,255,108,0.1);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 12px rgba(0,255,108,0.4);
  color: var(--primary);
}
.value-card h3 {
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: 2rem;
}
.value-card p {
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1.5;
}

/* 4) Metrics Row */
.metrics {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 3rem auto;
  max-width: 800px;
  text-align: center;
}
.metric {
  background:
    linear-gradient(135deg,
      rgba(0,255,108,0.05) 0%,
      rgba(0,255,108,0.15) 100%),
    rgba(16,16,16,0.6);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 0 12px rgba(0,255,108,0.4);
  padding: 1.5rem;
}
.metric-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.metric-label {
  color: var(--muted);
  font-size: 1.25rem;
}

/* 5) Highlight color */
.highlight {
  color: var(--primary);
  text-shadow: 0 0 8px var(--primary);
}

/*==================================
  Our Process Timeline
===================================*/
.process {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.process .section-title {
  text-align: center;
  margin-bottom: 2.5rem;
}

.process-flow {
  position: relative;
  margin-left: 2rem;
  padding-left: 2rem;
}

.process-flow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  width: 2px;
  height: 100%;
  background: var(--primary);
}

.step {
  position: relative;
  margin-bottom: 2.5rem;
}

.step:last-child {
  margin-bottom: 0;
}

.step-number {
  position: absolute;
  top: 0;
  left: -2.5rem;
  width: 2rem;
  height: 2rem;
  background: var(--primary);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 0 12px var(--primary);
}

.step-content h3 {
  color: #fff;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.step-content p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Highlighted inline links in subtitles */
.section-subtitle a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding: 0 0.2em;
  transition: color 0.3s;
}

/* subtle underglow bar */
.section-subtitle a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--primary);
  opacity: 0.4;
  transition: opacity 0.3s;
}

/* on hover, brighten the bar */
.section-subtitle a:hover {
  color: #fff;
}
.section-subtitle a:hover::after {
  opacity: 1;
}

/*────────────────────────────────────────────
  Contact Page: two-column form + cards
────────────────────────────────────────────*/
.contact-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 3rem 0 4rem;
}

/* left pane (iframe) */
.contact-embed {
  flex: 2;               /* twice as wide as the cards */
}
.contact-embed .section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.contact-embed .iframe-wrapper {
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  overflow: hidden;
  height: 850px;
}
.contact-embed .iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
}

/* right pane (cards) */
.contact-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-cards .info-list {
  list-style: none;
  margin: 5rem 0 0;
  padding: 0;
}
.contact-cards .info-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;    /* adjust to taste */
}
.contact-cards .info-list li {
  background:
    linear-gradient(
      135deg,
      rgba(0,255,108,0.05) 0%,
      rgba(0,255,108,0.15) 100%
    ),
    rgba(16,16,16,0.6);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 0 20px rgba(0,255,108,0.4);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.2s ease;
}
.contact-cards .info-list li:hover {
  transform: translateY(-3px);
}

.contact-cards .info-list li strong {
  color: #fff;
  font-weight: 600;
}
.contact-cards .info-list li a {
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.contact-cards .info-list li a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.contact-cards .info-list li .info-note {
  position: relative;
  padding-left: 1.5rem;
  color: var(--fg);
  font-weight: 500;
}
.contact-cards .info-list li .info-note::before {
  content: '';
  position: absolute;
  left: 0; top: 0.35rem;
  width: 0.5rem; height: 0.5rem;
  background: var(--primary);
  border-radius: 50%;
}

/* responsive: stack below 800px */
@media (max-width: 800px) {
  .contact-container {
    flex-direction: column;
  }
}

/* Highlighted inline links in subtitles */
.hero-subtitle a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding: 0 0.2em;
  transition: color 0.3s;
}

/* subtle underglow bar */
.hero-subtitle a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--primary);
  opacity: 0.4;
  transition: opacity 0.3s;
}

/* on hover, brighten the bar */
.hero-subtitle a:hover {
  color: #fff;
}
.hero-subtitle a:hover::after {
  opacity: 1;
}

/*==================================
  Footer (footer.html)
===================================*/
footer {
  background: rgba(0, 0, 0, 0.85);      /* deepen the base */
  padding: 3rem 1rem;
  border-top: 1px solid rgba(0,255,108,0.2);
  box-shadow: inset 0 10px 30px rgba(0,0,0,0.5);
}

footer .grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}

footer h4 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

footer p,
footer li {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

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

footer li + li {
  margin-top: 0.5rem;
}

footer a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.3s, text-shadow 0.3s;
}
footer a:hover {
  color: var(--primary);
  text-shadow: 0 0 6px var(--primary);
}

/* Social buttons */
footer .social a {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0,255,108,0.05);
  border: 1px solid rgba(0,255,108,0.3);
  border-radius: 0.3rem;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 0 8px rgba(0,255,108,0.4);
  transition: background 0.3s, box-shadow 0.3s;
}
footer .social a:hover {
  background: rgba(0,255,108,0.2);
  box-shadow: 0 0 16px rgba(0,255,108,0.6);
}

/* Legal line */
footer .legal {
  text-align: center;
  color: var(--muted);
  margin-top: 2rem;
  font-size: 0.85rem;
  border-top: 1px solid rgba(0,255,108,0.1);
  padding-top: 1.5rem;
}

/* make the form pane sit correctly */
.contact-form { flex: 2; }

/* wrap the form in a light card */
.form-wrapper {
  background: rgba(16,16,16,0.6);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 2rem;
}

/* spacing & inputs */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--fg);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--primary-opaque);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
}

/* status message */
.form-status {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--primary);
}

.integrations {
  text-align: center;
  padding: 4rem 0;
}

.integrations .integration-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.integration-logos img {
  max-height: 48px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.2s, opacity 0.2s;
}

.integration-logos img:hover {
  filter: none;
  opacity: 1;
}

/* Cloud‑style cards */
.integrations {
  text-align: center;
  padding: 4rem 0;
  background-color: #e6f7ff; /* soft sky‑blue */
}

.integration-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.integration-logos .cloud {
  background: #fff;
  border-radius: 50px;
  padding: 1rem 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.integration-logos .cloud:hover {
  transform: translateY(-5px);
}

.integration-logos img {
  display: block;
  max-height: 48px;
  width: auto;
}

/* container background & text */
.integrations-cloud {
  text-align: center;
  padding: 4rem 0;
  background-color: #e6f7ff; /* sky‑blue */
}

/* draw the big cloud */
.integrations-cloud .cloud-shape {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 220px;
  margin: 2rem auto;
  background: #fff;
  border-radius: 120px;
}

/* two bumps on top */
.integrations-cloud .cloud-shape::before,
.integrations-cloud .cloud-shape::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

.integrations-cloud .cloud-shape::before {
  width: 160px; height: 160px;
  top: -60px; left: 20%;
}

.integrations-cloud .cloud-shape::after {
  width: 120px; height: 120px;
  top: -40px; right: 20%;
}

/* logo positioning */
.cloud-logo {
  position: absolute;
  width: 48px;
  height: 48px;
  transition: transform 0.3s ease;
}
.cloud-logo:hover {
  transform: scale(1.2);
}

/* tweak these to move the logos inside the cloud */
.logo1 { top: 50%; left: 25%; transform: translate(-50%, -50%); }
.logo2 { top: 30%; left: 50%; transform: translate(-50%, -50%); }
.logo3 { top: 50%; left: 75%; transform: translate(-50%, -50%); }
.logo4 { top: 75%; left: 50%; transform: translate(-50%, -50%); }

/* === Integrations Cloud Section === */
.integrations-cloud {
  background-color: #e6f7ff; /* soft sky‑blue */
  text-align: center;
  padding: 4rem 0;
}

/* override dark text */
.integrations-cloud .section-title {
  color: #333;
}
.integrations-cloud .section-subtitle {
  color: #555;
}

/* draw the big white cloud */
.integrations-cloud .cloud-shape {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 200px;
  margin: 2rem auto;
  background: #fff;
  border-radius: 100px;
}

/* two bumps on top */
.integrations-cloud .cloud-shape::before,
.integrations-cloud .cloud-shape::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.integrations-cloud .cloud-shape::before {
  width: 200px; height: 200px;
  top: -100px; left: 15%;
}
.integrations-cloud .cloud-shape::after {
  width: 140px; height: 140px;
  top: -70px; right: 15%;
}

/* logo containers */
.cloud-logo {
  position: absolute;
  width: 64px;
  height: 64px;
  transition: transform 0.3s ease;
}
.cloud-logo:hover {
  transform: scale(1.2);
}

/* tweak these to reposition the logos in the cloud */
.logo1 { top: 50%; left: 25%; transform: translate(-50%, -50%); }
.logo2 { top: 30%; left: 50%; transform: translate(-50%, -50%); }
.logo3 { top: 50%; left: 75%; transform: translate(-50%, -50%); }
.logo4 { top: 70%; left: 50%; transform: translate(-50%, -50%); }

/* render icons in their brand colors */
.cloud-logo img {
  width: 100%;
  height: auto;
  /* no filter—invert removed */
}

/* === Integrations Cloud with Real Image === */
.integrations-cloud {
  background: transparent;
  text-align: center;
  padding: 4rem 0;
}
.integrations-cloud .section-title { color: #fff; }
.integrations-cloud .section-subtitle { color: #ccc; }

/* wrapper around the PNG + logos */
.cloud-wrapper {
  position: relative;
  max-width: 800px;
  margin: 2rem auto;
}

/* the cloud PNG */
.cloud-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* container for all logos */
.cloud-logos {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* each logo box */
.cloud-logo {
  position: absolute;
  width: 56px;
  height: 56px;
  transition: transform 0.3s ease;
}
.cloud-logo:hover {
  transform: scale(1.2);
}

/* tweak these values until the logos sit nicely in your actual cloud image */
.logo1 { top: 52%; left: 22%; transform: translate(-50%, -50%); }
.logo2 { top: 30%; left: 48%; transform: translate(-50%, -50%); }
.logo3 { top: 52%; left: 75%; transform: translate(-50%, -50%); }
.logo4 { top: 75%; left: 48%; transform: translate(-50%, -50%); }

/* leave the icons in their brand colors */
.cloud-logo img {
  width: 100%;
  height: auto;
  filter: none;
}

/* kill the black in the cloud PNG */
.cloud-bg {
  mix-blend-mode: screen;
}

/* force all logos to show up in white */
.cloud-logo img {
  filter: brightness(0) invert(1);
}

/* ─── Make the cloud bigger ───────────────────────────────────────── */
.cloud-wrapper {
  max-width: 1000px; /* bump this up from 800px */
  margin: 3rem auto;
}

/* ─── Enlarge the logos ───────────────────────────────────────────── */
.cloud-logo {
  width: 80px;   /* up from 56px or 64px */
  height: 80px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* ─── Glow on hover ───────────────────────────────────────────────── */
.cloud-logo:hover {
  transform: scale(1.3);
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.8));
}

/* ─── Ensure PNG still covers full width ───────────────────────────── */
.cloud-bg {
  width: 100%;
  height: auto;
}

/* === Integrations Cloud Section === */
.integrations-cloud {
  background: transparent;     /* let your page’s black show through */
  padding: 4rem 0;
  padding-bottom: 0;
  text-align: center;
}

/* wrapper around PNG + content */
.cloud-wrapper {
  position: relative;
  max-width: 1000px;          /* bigger cloud */
  margin: 0 auto 3rem;
}

/* the cloud image itself */
.cloud-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* overlayed title & subtitle in cloud center */
.cloud-text {
  position: absolute;
  top: 50%;                    /* adjust to vertically center */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.cloud-text .section-title {
  margin: 0;
  color: #fff;
  font-size: 2rem;
}
.cloud-text .section-subtitle {
  margin: 0.5rem 0 0;
  color: #00FF6C;
  font-size: 1.2rem;
  font-weight: 600;
}

/* ——————————————————————————————————————
   Why Choose AMP Titans (revamp)
———————————————————————————————————————— */

.why-choose {
  padding: 3rem 1rem;
  margin: 4rem auto;
  max-width: 1200px;
}

.why-choose .section-title {
  font-size: 2.5rem;
  margin-bottom: 10rem;
}

.why-choose .section-subtitle {
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.5;
}

/* grid of feature cards */
.why-choose .feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* each feature as a neon‑glow card */
.why-choose .feature-list li {
  position: relative;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  box-shadow: 0 0 12px rgba(0,255,108,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  color: #fff;
  font-weight: 600;
}

/* little check mark */
.why-choose .feature-list li::before {
  content: '✔';
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--primary);
  text-shadow: 0 0 4px var(--primary);
}

/* hover‑lift effect */
.why-choose .feature-list li:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0,255,108,0.4);
}

/* 1. Fade‑in + slide‑up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Neon pulse */
@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 8px var(--primary), 0 0 20px rgba(0,255,108,0.2);
  }
  50% {
    box-shadow: 0 0 16px var(--primary), 0 0 40px rgba(0,255,108,0.4);
  }
}

/* Base state for all cards */
.why-choose .feature-list li {
  opacity: 0;
  /* we’ll trigger fadeInUp on page‑load */
  animation: fadeInUp 0.6s ease forwards,
             neonPulse 2s ease-in-out infinite alternate;
}

/* Stagger the fade‑in */
.why-choose .feature-list li:nth-child(1) { animation-delay: 0.1s; }
.why-choose .feature-list li:nth-child(2) { animation-delay: 0.2s; }
.why-choose .feature-list li:nth-child(3) { animation-delay: 0.3s; }
.why-choose .feature-list li:nth-child(4) { animation-delay: 0.4s; }
.why-choose .feature-list li:nth-child(5) { animation-delay: 0.5s; }
.why-choose .feature-list li:nth-child(6) { animation-delay: 0.6s; }
.why-choose .feature-list li:nth-child(7) { animation-delay: 0.7s; }
.why-choose .feature-list li:nth-child(8) { animation-delay: 0.8s; }

.why-choose .feature-list.carousel {
  display: flex;
  overflow-x: auto;
  gap: 1.5rem;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
}

.why-choose .feature-list.carousel li {
  flex: 0 0 250px;       /* card width */
  scroll-snap-align: center;
  list-style: none;

  background: rgba(0,0,0,0.6);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-align: center;
  box-shadow: 0 0 12px rgba(0,255,108,0.2);
  color: #fff;
}

/* hide scrollbar (optional) */
.why-choose .feature-list.carousel {
  scrollbar-width: none;            /* Firefox */
}
.why-choose .feature-list.carousel::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
}

/* ─── Cube Container ───────────────────────────────────────────────────── */
.cube-container {
  perspective: 1200px;
  width: 320px;
  height: 320px;
  margin: 0 auto 4rem;
  cursor: grab;
}

/* ─── Cube ─────────────────────────────────────────────────────────────── */
.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* start tilted so you can see top/bottom when you first load */
  transform: rotateX(-25deg) rotateY(20deg);
  transition: transform 0.1s ease-out;
}

/* ─── Cube Faces ───────────────────────────────────────────────────────── */
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.85);       /* less transparent */
  border: 2px solid var(--primary);       /* stronger border */
  border-radius: var(--radius);
  box-shadow:
    0 0 16px var(--primary),
    0 0 32px rgba(0, 255, 108, 0.4);       /* more intense glow */
  color: #fff;
  font-weight: 600;
}

.face-front  { transform: translateZ(160px); }
.face-back   { transform: rotateY(180deg) translateZ(160px); }
.face-right  { transform: rotateY( 90deg) translateZ(160px); }
.face-left   { transform: rotateY(-90deg) translateZ(160px); }
.face-top    { transform: rotateX( 90deg) translateZ(160px); }
.face-bottom { transform: rotateX(-90deg) translateZ(160px); }

/* disable selection/drag */
.cube-container,
.cube-container * {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

/* ensure 3D children are rendered correctly */
.face {
  transform-style: preserve-3d;
}

/* full‑face overlay to invert back to upright */
.face .face-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;      /* allows multi‑line content */
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* inverse rotations so text always faces you */
.face-front  .face-content { transform: none; }
.face-back   .face-content { transform: rotateY(180deg); }
.face-right  .face-content { transform: rotateY(-90deg); }
.face-left   .face-content { transform: rotateY(90deg); }
.face-top    .face-content { transform: rotateX(-90deg); }
.face-bottom .face-content { transform: rotateX(90deg); }

.face .face-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.face .face-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

/* ─── Neon Text Styling on Cube Faces ─────────────────────────── */

.face .face-content {
  font-family: 'Orbitron', sans-serif;    /* techno font */
  font-size: 2rem;                     /* tweak to taste */
  /* gradient fill clipped to text */
  background: linear-gradient(90deg, 
    rgba(255,255,255,1) 0%, 
    var(--primary) 50%, 
    rgba(255,255,255,1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* base glow */
  text-shadow:
    0 0 4px rgba(255,255,255,0.8),
    0 0 8px var(--primary),
    0 0 12px var(--primary),
    0 0 20px rgba(0,255,108,0.6);
  /* flicker animation */
  animation: neonFlicker 2.5s infinite alternate;
}

/* ─── Neon Flicker Keyframes ──────────────────────────────────── */
@keyframes neonFlicker {
  0% {
    opacity: 0.9;
    text-shadow:
      0 0 2px rgba(255,255,255,0.6),
      0 0 6px var(--primary),
      0 0 10px var(--primary);
  }
  25% {
    opacity: 1;
    text-shadow:
      0 0 5px rgba(255,255,255,0.9),
      0 0 12px var(--primary),
      0 0 24px var(--primary);
  }
  50% {
    opacity: 0.85;
    text-shadow:
      0 0 3px rgba(255,255,255,0.7),
      0 0 8px var(--primary),
      0 0 16px var(--primary);
  }
  75% {
    opacity: 0.95;
    text-shadow:
      0 0 4px rgba(255,255,255,0.8),
      0 0 10px var(--primary),
      0 0 20px var(--primary);
  }
  100% {
    opacity: 0.9;
    text-shadow:
      0 0 2px rgba(255,255,255,0.6),
      0 0 6px var(--primary),
      0 0 12px var(--primary);
  }
}

/* ==========================================================================
   Mobile‑Friendly tweaks for .why-choose & the cube
   ========================================================================== */

/* Base — center & ensure no overflow on smaller desktops */
.why-choose {
  padding: 3rem 1rem;
  padding-top: 0;
}
.cube-container {
  margin: 2rem auto 0;
}

/* — Tablet (~1024px) —————————————————————————————————————————— */
@media (max-width: 1024px) {
  .why-choose .section-title {
    font-size: 2rem;
  }
  .cube-container {
    width: 260px;
    height: 260px;
    perspective: 900px;
  }
  .face {
    padding: 0.8rem;
  }
  .face .face-content {
    font-size: 1rem;
  }
}

/* — Mobile (~768px) —————————————————————————————————————————— */
@media (max-width: 768px) {
  .why-choose {
    padding: 2.5rem 0.5rem;
  }
  .why-choose .section-title {
    font-size: 1.75rem;
  }
  .cube-container {
    width: 220px;
    height: 220px;
    perspective: 800px;
  }
  .face {
    padding: 0.6rem;
  }
  .face .face-content {
    font-size: 0.9rem;
  }
}

/* — Small Mobile (~480px) —————————————————————————————————————— */
@media (max-width: 480px) {
  .why-choose {
    padding: 2rem 0.5rem;
  }
  .why-choose .section-title {
    font-size: 1.5rem;
  }
  /* scale the entire cube to fit narrow screens */
  .cube-container {
    transform: scale(0.7);
    transform-origin: center top;
    margin-top: 1.5rem;
    width: 220px;   /* keep original width for perspective */
    height: 220px;
  }
  .face {
    padding: 0.4rem;
  }
  .face .face-content {
    font-size: 0.8rem;
  }
  .cloud-text .section-title {
    font-size: 1rem;
  }
  .cloud-text .section-subtitle {
    font-size: 0.5rem;
  }
}

/* ─── Make integration cloud icons smaller ───────────────────────── */
.integrations-cloud .cloud-logo {
  width: 48px !important;
  height: 48px !important;
}

.integrations-cloud .cloud-logo img {
  width: 100%;
  height: auto;
}

/* ─── Slightly explode cube faces on desktop ───────────────────── */
@media (min-width: 769px) {
  /* Pull each face 10px further out */
  .cube-container .face-front  { transform: translateZ(170px)  !important; }
  .cube-container .face-back   { transform: rotateY(180deg) translateZ(230px) !important; }
  .cube-container .face-right  { transform: rotateY( 90deg) translateZ(230px) !important; }
  .cube-container .face-left   { transform: rotateY(-90deg) translateZ(230px) !important; }
  .cube-container .face-top    { transform: rotateX( 90deg) translateZ(230px) !important; }
  .cube-container .face-bottom { transform: rotateX(-90deg) translateZ(230px) !important; }
}

/* ─── “Hovering” logo in the center of the cube ───────────────────── */

.cube-container {
  position: relative;  /* make sure the overlay is positioned correctly */
}

.cube-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;         /* tweak size as needed */
  height: 300px;
  transform: translate(-50%, -50%);
  pointer-events: none; /* so it never blocks your cube dragging */
  animation: floatInCube 3.5s ease-in-out infinite;
  z-index: 2;          /* above the cube’s faces */
}

.cube-hover img {
  width: 20rem;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 8px var(--primary))
          drop-shadow(0 0 8px var(--primary));
}

/* gentle up‑and‑down float */
@keyframes floatInCube {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-12px);
  }
}

/* 1) Two-column layout on desktop */
.sales-card {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* text side (left) */
.sales-card .card-content {
  flex: 1 1 300px;  /* grow to fill left side */
}

/* smaller iframe */
.sales-card .template-preview .airtable-embed {
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease;
}

/* blur iframe on hover */
.sales-card .template-preview:hover .airtable-embed {
  filter: blur(4px);
}

/* overlay button */
.sales-card .template-preview .overlay-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* show button on hover */
.sales-card .template-preview:hover .overlay-btn {
  opacity: 1;
}

/* ensure your default card button is hidden on desktop */
.sales-card > .btn-secondary {
  display: none;
}

/* stacked/mobile fallback */
@media (max-width: 768px) {
  .sales-card {
    flex-direction: column;
  }
  .sales-card .template-preview {
    flex: 1 1 auto;
    height: 300px;
  }
}

/* ——————————————————————————————————————————————
   Sales CRM: make the iframe a wide rectangle
————————————————————————————————————————————————— */

/* Give the preview a flexible width & auto height */
.sales-card .template-preview {
  flex: 0 0 500px;      /* or any max-width you like */
  max-width: 60%;       /* responsive cap */
  height: auto;         /* let aspect-ratio drive height */
  position: relative;
  overflow: hidden;
}

/* Force a 16:9 aspect ratio & full width */
.sales-card .template-preview .airtable-embed {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  transition: filter 0.3s ease;
}

/* Adjust mobile stacking if needed */
@media (max-width: 768px) {
  .sales-card .template-preview {
    max-width: 100%;
    /* smaller ratio on mobile? just let it flow */
  }
}