@import url('./index.css');

:root {
  --ink: #171b22;
  --paper: #f7fafc;
  --sage: #3a7468;
  --sage-100: #c4d6cf;
  --sage-200: #8eafa5;
  --sage-300: #54776e;
  --sage-light: #5aa190;
  --sage-dim: rgba(58,116,104,0.14);
  --sage-overlay-light: rgba(58,116,104,0.10);
  --sage-overlay-mid: rgba(58,116,104,0.14);
  --sage-overlay-heavy: rgba(58,116,104,0.22);
  --ghost: rgba(248,250,252,0.08);
  --ghost-mid: rgba(203,213,225,0.18);
  --ghost-strong: rgba(247,250,252,0.84);
  --accent: #c4d6cf;
  --ember: #D4722A;
  --ember-light: #E8904E;
  --ember-dim: rgba(212,114,42,0.12);
}

body {
  background: #171b22;
  color: #dde5ee;
}

.hero-services-shell {
  background-image: url('../images/3.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

nav {
  background: rgba(23,27,34,0.58);
  border-bottom-color: rgba(203,213,225,0.16);
}

.nav-links a {
  color: #b7cec4;
}

.hero::before {
  background: linear-gradient(
    to bottom,
    rgba(23,27,34,0.30) 0%,
    rgba(23,27,34,0.46) 44%,
    rgba(23,27,34,0.66) 100%
  );
}

.hero-fade {
  background: linear-gradient(
    to bottom,
    transparent 42%,
    rgba(23,27,34,0.54) 68%,
    rgba(23,27,34,0.82) 100%
  );
}

.hero-sub,
.what-body,
.service-desc,
.serve-body,
.intel-stat-label,
.cta-body,
.bundle-blurb {
  color: #d8e1ea;
}

.hero-bar-text {
  color: rgba(247,250,252,0.92);
}

section {
  padding: 128px 48px;
}

.section-title,
.serve .section-title,
.bundle-name,
.service-title,
.serve-name,
.cta-title {
  color: #fbfdff;
}

.section-label,
.service-num,
.serve-icon {
  color: #b7cec4;
}

#services::before {
  background: linear-gradient(
    to bottom,
    rgba(23,27,34,0.82) 0%,
    rgba(24,30,38,0.72) 28%,
    rgba(23,27,34,0.62) 100%
  );
}

#services {
  padding-top: 96px;
  padding-bottom: 96px;
}

.service-item {
  background: linear-gradient(
    90deg,
    rgba(196,214,207,0.10) 0%,
    rgba(58,116,104,0.04) 44%,
    rgba(23,27,34,0) 100%
  );
  border-bottom-color: rgba(203,213,225,0.10);
}

.bundles {
  background:
    linear-gradient(180deg, rgba(31,35,42,1) 0%, rgba(23,27,34,1) 100%);
  background-image: url('../images/24.png');
  background-size: cover;
  background-position: center;
  background-color: #181c23;
  background-blend-mode: multiply;
}

.bundles::before {
  background: linear-gradient(
    145deg,
    rgba(12,15,20,0.64) 0%,
    rgba(23,27,34,0.54) 42%,
    rgba(10,12,16,0.74) 100%
  );
}

.bundles-inner {
  position: relative;
}

.bundles .section-label,
.bundles .section-title,
.bundles .bundle-grid {
  position: relative;
  z-index: 1;
}

.bundle-grid {
  grid-template-columns: repeat(2, 1fr);
  background: linear-gradient(
    135deg,
    rgba(247,250,252,0.08) 0%,
    rgba(39,46,56,0.34) 100%
  );
  border-color: rgba(203,213,225,0.18);
}

.bundle-list {
  list-style: none;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(203,213,225,0.10);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bundle-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.87rem;
  color: rgba(216,225,234,0.55);
  line-height: 1.45;
  transition: color 0.2s;
}

.bundle-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #ff9b57;
  font-size: 0.78rem;
}

.bundle-col:hover .bundle-list li {
  color: rgba(216,225,234,0.78);
}

.bundle-col {
  background: linear-gradient(
    180deg,
    rgba(247,250,252,0.06) 0%,
    rgba(39,46,56,0.18) 100%
  );
}

.bundle-col:hover {
  background: rgba(247,250,252,0.10);
}

.bundles .section-label,
.bundles .bundle-icon,
.bundles .bundle-icon--ai span {
  color: #ffd3b1;
}

.bundles .bundle-col::before {
  background: #ff9b57;
}

.bundles .bundle-col:hover {
  background: rgba(255,155,87,0.10);
}

.bundles .bundle-grid {
  background: linear-gradient(
    135deg,
    rgba(255,233,218,0.08) 0%,
    rgba(70,33,18,0.18) 100%
  );
}

.bundles .bundle-col {
  background: linear-gradient(
    180deg,
    rgba(255,243,236,0.05) 0%,
    rgba(78,35,18,0.10) 100%
  );
}

.dashboard-preview {
  background: rgba(28,32,39,0.82);
  border-color: rgba(203,213,225,0.16);
  box-shadow: 0 30px 70px rgba(10,15,26,0.24);
}

.dash-header,
.dash-footer {
  background: rgba(247,250,252,0.05);
}

.dash-row {
  border-top-color: rgba(203,213,225,0.12);
}

.dash-badge {
  background: rgba(212,114,42,0.10);
  color: #ffd7b6;
  border-color: rgba(232,144,78,0.24);
}

.demo-section {
  background:
    linear-gradient(180deg, rgba(31,35,42,1) 0%, rgba(23,27,34,1) 100%);
  background-image: url('../images/24.png');
  background-size: cover;
  background-position: center;
  background-color: #181c23;
  background-blend-mode: multiply;
}

.demo-section::before {
  background: linear-gradient(
    145deg,
    rgba(12,15,20,0.64) 0%,
    rgba(23,27,34,0.54) 42%,
    rgba(10,12,16,0.74) 100%
  );
}

.cta-section {
  background: linear-gradient(
    90deg,
    rgba(33,38,46,1) 0%,
    rgba(24,28,35,1) 100%
  );
  background-image: url('../images/7.png');
  background-size: cover;
  background-position: center;
  background-color: #181c23;
  background-blend-mode: multiply;
  border-top: 1px solid rgba(203,213,225,0.10);
}

.cta-section::before {
  background: linear-gradient(
    90deg,
    rgba(212,114,42,0.06) 0%,
    rgba(23,27,34,0.04) 100%
  );
}

.cta-email {
  color: var(--ember-light);
}

.serve::before {
  background: linear-gradient(
    to bottom,
    rgba(23,27,34,0.56) 0%,
    rgba(37,49,52,0.50) 24%,
    rgba(58,116,104,0.12) 52%,
    rgba(23,27,34,0.64) 100%
  );
}

.serve .section-title {
  text-shadow: 0 10px 24px rgba(23,27,34,0.22);
}

.serve-card {
  background: linear-gradient(
    180deg,
    rgba(247,250,252,0.08) 0%,
    rgba(39,46,56,0.28) 100%
  );
  border-color: rgba(203,213,225,0.20);
}

#intelligence::before {
  background: linear-gradient(
    to right,
    rgba(23,27,34,0.58) 0%,
    rgba(58,116,104,0.12) 32%,
    rgba(39,46,56,0.48) 58%,
    rgba(23,27,34,0.66) 100%
  );
}

.intel-stat-grid {
  background: rgba(203,213,225,0.18);
}

.intel-stat-grid.reveal.visible .intel-stat,
.intel-stat {
  background: linear-gradient(
    180deg,
    rgba(50,58,70,0.82) 0%,
    rgba(35,41,51,0.86) 100%
  );
}


.cta-btn,
.cta-btn-demo,
.cta-btn-light {
  box-shadow: 0 10px 24px rgba(23,27,34,0.12);
}

.footer-meta,
.footer-meta a {
  color: #b7cec4;
}

@media (max-width: 900px) {
  section {
    padding: 88px 24px;
  }
}

/* Mobile overrides */

.nav-hamburger {
  display: none;
}

@media (max-width: 900px) {
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 101;
  }

  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #d8e1ea;
    transition: transform 0.28s ease, opacity 0.2s ease;
    transform-origin: center;
  }

  .nav-hamburger.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .nav-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-hamburger.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    background: rgba(23,27,34,0.98);
    backdrop-filter: blur(16px);
    padding: 28px 24px 36px;
    gap: 24px;
    border-bottom: 1px solid rgba(203,213,225,0.12);
    animation: drawerDown 0.22s ease forwards;
  }

  @keyframes drawerDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .nav-links.mobile-open a {
    font-size: 0.82rem;
    color: #d8e1ea;
    letter-spacing: 0.14em;
  }

  .hero-title {
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
    font-size: clamp(2.8rem, 9vw, 5rem) !important;
  }

  .hero-eyebrow,
  .section-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.18em;
  }

  .hero-sub {
    font-size: 1.25rem !important;
  }

  .hero-support {
    font-size: 0.95rem !important;
  }

  .section-title {
    font-size: clamp(1.8rem, 6vw, 2.8rem) !important;
  }

  footer {
    padding: 32px 24px;
  }

  .cta-title {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }

  .dashboard-preview {
    width: 100%;
    overflow-x: hidden;
  }

  .dash-label {
    font-size: 0.8rem;
  }

  .serve-card {
    transform: none !important;
  }

  .service-title {
    font-size: 1.15rem;
  }

  .service-desc {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(2.4rem, 10vw, 3.5rem) !important;
  }

  .hero-sub {
    font-size: 1.1rem !important;
  }

  .bundle-col {
    padding: 36px 24px !important;
  }

  .serve-card {
    padding: 32px 24px;
  }

  section {
    padding: 64px 20px !important;
  }

  .footer-meta {
    font-size: 0.6rem;
  }
}

/* ── PRICING SECTION (dark overrides) ── */
.pricing-section {
  background:
    linear-gradient(180deg, rgba(23,27,34,1) 0%, rgba(18,22,30,1) 100%);
  border-top-color: rgba(203,213,225,0.12);
}

.pricing-card {
  background: linear-gradient(
    180deg,
    rgba(58,116,104,0.10) 0%,
    rgba(23,27,34,0.40) 100%
  );
  border-color: rgba(203,213,225,0.16);
}

.pricing-card::before {
  background: #5aa190;
}

.pricing-service-name {
  color: #fbfdff;
}

.pricing-price-num {
  color: #fbfdff;
}

.pricing-includes li {
  color: rgba(247,250,252,0.78);
}

.pricing-includes li::before {
  background: #5aa190;
}

.pricing-rule {
  background: rgba(203,213,225,0.14);
}

.pricing-disclaimer {
  color: rgba(247,250,252,0.26);
  border-top-color: rgba(203,213,225,0.10);
}