/*
  styles.css — AccuBux Website Styles
  =====================================================================
  This file controls how the website LOOKS: colors, fonts, spacing,
  layout, and how the design changes on phones vs. desktop screens.

  The colors are defined as "variables" near the top of this file
  (look for the :root section). If you ever want to tweak the teal
  accent color or the background, those are the two values to change.

  You should rarely need to edit this file for everyday content
  updates — those happen in index.html instead.
  =====================================================================
*/


/* ============================================================
   COLOR & FONT VARIABLES
   Change values here to update the look across the whole site.
   ============================================================ */
:root {
  /* Core colors */
  --bg:          #0A1628;
  --teal-500:    #14b8a6;
  --teal-400:    #2dd4bf;
  --blue-600:    #2563eb;

  /* Text */
  --white:       #ffffff;
  --white-60:    rgba(255, 255, 255, 0.60);
  --white-30:    rgba(255, 255, 255, 0.30);
  --white-10:    rgba(255, 255, 255, 0.10);

  /* Cards & surfaces */
  --card-bg:     rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.08);

  /* Font & layout */
  --font:        'Inter', sans-serif;
  --max-width:   1200px;
  --section-pad: 6rem 1.5rem;
}


/* ============================================================
   RESET & BASE
   Removes browser default spacing and sets global defaults.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;   /* Makes nav links glide to their section */
}

/* Background-color on html ensures it shows behind the body watermark layer */
html {
  background-color: var(--bg);
}

body {
  font-family: var(--font);
  background-color: transparent;  /* transparent so watermark pseudo-element shows */
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  isolation: isolate;  /* creates a stacking context so z-index: -1 works correctly below */
}

/* Faint puzzle-piece watermark fixed behind all page content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('logo-icon.png') center 38% / 65vh no-repeat;
  opacity: 0.09;
  pointer-events: none;
  z-index: -1;
}

/* Prevents the fixed nav bar from hiding section headings when scrolled to */
section[id] {
  scroll-margin-top: 80px;
}


/* ============================================================
   LAYOUT HELPER
   A centered wrapper used inside every section.
   ============================================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* ============================================================
   BUTTONS
   .btn-primary = solid teal (main calls to action)
   .btn-outline = transparent with white border (secondary)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  border-radius: 0.5rem;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-400));
  color: var(--white);
  font-weight: 700;
}

.btn-primary:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
  border-color: var(--teal-400);
  color: var(--teal-400);
}

/* Smaller button used in the nav bar */
.btn-sm {
  padding: 0.5rem 1.2rem;
  font-size: 0.875rem;
}

/* Full-width button used in the contact form */
.btn-full {
  width: 100%;
  justify-content: center;
  padding: 1rem;
  font-size: 1rem;
}


/* ============================================================
   SHARED SECTION HEADER (heading + subtitle centered above content)
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  color: var(--white);
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--white-60);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}


/* ============================================================
   NAVIGATION
   Fixed bar at top; blurs the background behind it.
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 22, 40, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--white-10);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo image in the nav bar */
.logo {
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;   /* removes the extra space below inline images */
}

.logo-img {
  height: 46px;
  width: auto;
  display: block;
}

/* Desktop nav links centered by pushing to the middle with auto margins */
.nav-links {
  display: flex;
  list-style: none;
  gap: 2.25rem;
  margin: 0 auto;   /* centers the links between the logo and button */
}

.nav-links a {
  color: var(--white-60);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--white);
}

/* Hamburger: three-line icon shown only on mobile */
.hamburger {
  display: none;     /* hidden on desktop; shown in the mobile media query below */
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.25s ease;
}

/* Mobile dropdown menu */
.mobile-menu {
  display: none;     /* hidden until .is-open is added by script.js */
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  border-top: 1px solid var(--white-10);
  background: rgba(10, 22, 40, 0.97);
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-link {
  color: var(--white-60);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s;
}

.mobile-link:hover {
  color: var(--white);
}


/* ============================================================
   HERO SECTION
   Full-screen opening with headline and background glows.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 1.5rem 5rem;
  overflow: hidden;
  text-align: center;
}

/* Background glow blobs — purely decorative */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.glow-teal {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.18) 0%, transparent 70%);
  top: -80px;
  left: 50%;
  transform: translateX(-55%);
  filter: blur(40px);
}

.glow-blue {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
  bottom: 0;
  right: -100px;
  filter: blur(50px);
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Pill-shaped badge above the headline */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--white-10);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--white-60);
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 2rem;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
  flex-shrink: 0;
}

/* The main headline — scales fluidly from ~3rem (mobile) up to 5.5rem (desktop) */
.hero-headline {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}

/* "Missing Piece." in a teal-to-cyan gradient */
.gradient-text {
  background: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-400) 55%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 1.15rem;
  color: var(--white-60);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}


/* ============================================================
   SERVICES — "What We Do" with 4 cards
   ============================================================ */
.services {
  padding: var(--section-pad);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: rgba(20, 184, 166, 0.30);
  transform: translateY(-3px);
}

/* Icon square with teal tint */
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.6rem;
  background: rgba(20, 184, 166, 0.10);
  border: 1px solid rgba(20, 184, 166, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-400);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.6rem;
}

.card-desc {
  font-size: 0.9rem;
  color: var(--white-60);
  line-height: 1.65;
}


/* ============================================================
   ABOUT — "Why AccuBux?" two-column layout
   ============================================================ */
.about {
  padding: var(--section-pad);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-text .section-title {
  text-align: left;
  margin-bottom: 1.25rem;
}

.about-desc {
  color: var(--white-60);
  line-height: 1.75;
  margin-bottom: 1rem;
  font-size: 0.975rem;
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.75rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--white-60);
  font-size: 0.95rem;
}

.check-icon {
  color: var(--teal-400);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.6;
}

/* ---- Illustration placeholder ---- */
/* Replace this entire block later by swapping <div class="cube-placeholder">
   for <img src="your-illustration.png" alt="..." class="about-img"> */
.about-illustration {
  display: flex;
  justify-content: center;
}

.cube-placeholder {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  background: rgba(20, 184, 166, 0.05);
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.cube-inner {
  position: relative;
  width: 65%;
  height: 65%;
}

/* Glowing dot nodes */
.cube-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--teal-400);
}

.cube-dot-1 {
  width: 14px; height: 14px;
  top: 5%; left: 46%;
  box-shadow: 0 0 16px 5px rgba(45, 212, 191, 0.55);
}
.cube-dot-2 {
  width: 9px; height: 9px;
  top: 58%; left: 8%;
  opacity: 0.70;
  box-shadow: 0 0 10px 3px rgba(45, 212, 191, 0.40);
}
.cube-dot-3 {
  width: 9px; height: 9px;
  top: 62%; left: 78%;
  opacity: 0.70;
  box-shadow: 0 0 10px 3px rgba(45, 212, 191, 0.40);
}
.cube-dot-4 {
  width: 7px; height: 7px;
  top: 28%; left: 82%;
  opacity: 0.50;
  box-shadow: 0 0 8px 2px rgba(45, 212, 191, 0.35);
}

/* Connecting lines between dots */
.cube-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.45), transparent);
  transform-origin: left center;
}

.cube-line-1 { width: 58%; top: 12%; left: 20%; transform: rotate(48deg); }
.cube-line-2 { width: 72%; top: 60%; left: 12%; transform: rotate(0deg); }
.cube-line-3 { width: 52%; top: 24%; left: 52%; transform: rotate(62deg); }
.cube-line-4 { width: 50%; top: 16%; left: 15%; transform: rotate(72deg); }

/* "100% Client Focused" badge overlapping the bottom-right corner of the frame */
.cube-badge {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  background: rgba(8, 18, 36, 0.92);
  border: 1px solid rgba(20, 184, 166, 0.38);
  border-radius: 0.85rem;
  padding: 0.8rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cube-badge-number {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--teal-400);  /* teal accent for the "100%" */
}

.cube-badge-label {
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--white-60);
}


/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact {
  padding: var(--section-pad);
}

.contact-form {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  width: 100%;
}

.form-input {
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--white-10);
  border-radius: 0.6rem;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.form-input::placeholder {
  color: var(--white-30);
}

.form-input:focus {
  border-color: rgba(20, 184, 166, 0.50);
  background: rgba(255, 255, 255, 0.07);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

/* Success message shown after the form submits */
.form-success {
  display: none;   /* hidden by default; script.js sets display:block on success */
  max-width: 540px;
  margin: 1rem auto 0;
  text-align: center;
  padding: 1.25rem;
  color: var(--teal-400);
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 0.6rem;
  background: rgba(20, 184, 166, 0.06);
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--white-10);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.footer-contacts {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--white-60);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--teal-400);
}

.footer-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--white-60);
  font-size: 0.9rem;
}

.footer-separator {
  color: var(--white-30);
}

.footer-copy {
  color: var(--white-30);
  font-size: 0.85rem;
}


/* ============================================================
   RESPONSIVE STYLES
   Controls how the layout changes on smaller screens.
   ============================================================ */

/* Tablet and below (screens 900px wide or narrower) */
@media (max-width: 900px) {
  .cards-grid {
    grid-template-columns: 1fr 1fr;   /* 2 cards per row on tablet */
  }
}

/* Mobile (screens 768px wide or narrower) */
@media (max-width: 768px) {
  :root {
    --section-pad: 4rem 1.25rem;
  }

  /* Hide desktop nav links and Get Started button; show hamburger */
  .nav-links,
  .nav-inner > .btn-sm {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Stack Why AccuBux columns vertically */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Illustration goes above the text on mobile */
  .about-illustration {
    order: -1;
  }

  .cube-placeholder {
    max-width: 280px;
  }

  .section-title {
    font-size: 1.875rem;
  }
}

/* Small phones (screens 480px wide or narrower) */
@media (max-width: 480px) {
  .cards-grid {
    grid-template-columns: 1fr;   /* 1 card per row on phones */
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .section-title {
    font-size: 1.75rem;
  }
}