/* ============================================================
   STYLE.CSS — Stacked Agencies
   Sections:
   1.  CSS Variables
   2.  Reset & Base
   3.  Reusable Buttons
   4.  Navbar
   5.  Hero Section (index.html)
   6.  Services Teaser (index.html)
   7.  CTA Section
   8.  Services Page Hero
   9.  Services Page Cards
   10. Contact Page
   11. Form
   12. Footer
   13. Animations
   14. Mobile (Responsive)
   15. Form Status Messages
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   Change your brand colour here — everything updates automatically.
   ============================================================ */
:root {
  --bg:         #080d18;
  --surface:    #111827;
  --surface2:   #1a2540;
  --accent:     #38bdf8;
  --accent-dim: rgba(56, 189, 248, 0.12);
  --text:       #f1f5f9;
  --muted:      #64748b;
  --radius:     12px;
  --font-head:  'Syne', sans-serif;
  --font-body:  'Manrope', sans-serif;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}


/* ============================================================
   3. REUSABLE BUTTONS
   .btn        — solid blue (primary)
   .btn-outline — transparent with blue border (secondary)
   .btn-large  — bigger padding/font for hero CTAs
   ============================================================ */
.btn {
  background: var(--accent);
  color: #000;
  padding: 12px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  display: inline-block;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.35);
}

/* Outline / ghost button — used alongside .btn in hero */
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}

.btn-large {
  padding: 16px 36px;
  font-size: 17px;
}

/* Small uppercase label above section headings */
.section-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}


/* ============================================================
   4. NAVBAR
   Sticky frosted-glass bar. Logo | Nav links | CTA button.
   ============================================================ */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 13, 24, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nav-logo {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Blue dot after the logo */
.dot { color: var(--accent); }

/* Nav links in the centre of the navbar */
.nav-links {
  display: flex;
  gap: 32px;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.nav-active {
  color: var(--text); /* Active/hovered link turns white */
}


/* ============================================================
   5. HERO SECTION (index.html)
   ============================================================ */
.hero {
  text-align: center;
  padding: 130px 20px 100px;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}

.hero-badge {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(56,189,248,0.2);
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}

.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.highlight {
  color: var(--accent);
  position: relative;
}

/* Underline accent on highlighted word */
.highlight::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.5;
}

.hero-sub {
  margin-top: 24px;
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
}

/* Two buttons side by side in the hero */
.hero-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;  /* Stacks on mobile */
  margin-top: 44px;
}

/* Blue ambient glow behind the hero — decorative only */
.hero-glow {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(56,189,248,0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}


/* ============================================================
   6. SERVICES TEASER (index.html)
   Replaces the old full services section — a lightweight nudge
   that sends visitors to the dedicated services page.
   ============================================================ */
.services-teaser {
  text-align: center;
  padding: 100px 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
  max-width: 700px;
  margin: 0 auto;
}

.services-teaser h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

/* Subtext under the teaser heading */
.teaser-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Row of pill tags showing each service at a glance */
.teaser-pills {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

/* Individual pill tag */
.pill {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 20px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}


/* ============================================================
   7. CTA SECTION
   Bottom of index.html and services.html.
   ============================================================ */
.cta-section {
  text-align: center;
  padding: 100px 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.cta-section h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.cta-sub {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 36px;
}


/* ============================================================
   8. SERVICES PAGE HERO
   Smaller centred hero just for services.html.
   ============================================================ */
.page-hero {
  text-align: center;
  padding: 90px 20px 70px;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}

.page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
}

.page-hero-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}


/* ============================================================
   9. SERVICES PAGE CARDS
   Each service gets its own large card with details on the left
   and a "perfect for" highlight box on the right.
   ============================================================ */
.services-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 80px;
  display: flex;
  flex-direction: column; /* Cards stack vertically */
  gap: 28px;
}

/* Outer card wrapper */
.service-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 48px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  border-color: rgba(56,189,248,0.2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* Inner layout — info on left, highlight box on right */
.service-card-inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

/* Left column — icon, heading, description, features, CTA */
.service-info {
  flex: 1; /* Takes up remaining space */
}

.service-icon {
  font-size: 40px;
  margin-bottom: 18px;
}

.service-info h2 {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.service-desc {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Bullet list of what's included in each service */
.service-features {
  list-style: none;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-features li {
  font-size: 15px;
  color: var(--text);
  padding-left: 20px;
  position: relative;
}

/* Blue tick before each feature */
.service-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Right column — "perfect for" box */
.service-highlight {
  width: 260px;
  flex-shrink: 0; /* Doesn't shrink when space is tight */
  background: var(--accent-dim);
  border: 1px solid rgba(56,189,248,0.15);
  border-radius: 12px;
  padding: 28px;
}

.highlight-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.highlight-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.highlight-list li {
  font-size: 14px;
  color: var(--text);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

/* Arrow bullet for the highlight list */
.highlight-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
}


/* ============================================================
   10. CONTACT PAGE
   ============================================================ */
.contact {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: 60px 20px;
}

.contact-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 50px 44px;
  border-radius: 18px;
  width: 100%;
  max-width: 520px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.4),
    0 0 60px rgba(56,189,248,0.06);
}

.contact-card h2 {
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.contact-sub {
  color: var(--muted);
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 30px;
  line-height: 1.6;
}


/* ============================================================
   11. FORM
   ============================================================ */
form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

input,
textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

input:focus,
textarea:focus {
  border-color: var(--accent);
  background: #0b1120;
}

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

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

form button {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 4px;
}

form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.4);
}


/* ============================================================
   12. FOOTER
   ============================================================ */
footer {
  text-align: center;
  padding: 30px 20px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Links inside the footer */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--text);
}


/* ============================================================
   13. ANIMATIONS
   Staggered fade-up on page load.
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge      { animation: fadeUp 0.5s ease both; }
.hero h1         { animation: fadeUp 0.5s ease 0.1s both; }
.hero-sub        { animation: fadeUp 0.5s ease 0.2s both; }
.hero-buttons    { animation: fadeUp 0.5s ease 0.3s both; }

.page-hero h1    { animation: fadeUp 0.5s ease both; }
.page-hero-sub   { animation: fadeUp 0.5s ease 0.1s both; }

.contact-card    { animation: fadeUp 0.5s ease 0.1s both; }

/* Services cards fade in one after another */
.service-card:nth-child(1) { animation: fadeUp 0.5s ease 0.1s both; }
.service-card:nth-child(2) { animation: fadeUp 0.5s ease 0.2s both; }
.service-card:nth-child(3) { animation: fadeUp 0.5s ease 0.3s both; }


/* ============================================================
   14. MOBILE (RESPONSIVE)
   Adjusts layout for screens 768px wide or smaller.
   ============================================================ */
@media (max-width: 768px) {

  nav {
    padding: 18px 20px;
  }

  /* Hide nav links on very small screens to avoid clutter */
  .nav-links {
    display: none;
  }

  .nav-logo {
    font-size: 19px;
  }

  .hero {
    padding: 80px 20px 60px;
  }

  /* Stack hero buttons vertically on mobile */
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  /* Pills wrap naturally on mobile — no extra changes needed */

  /* Service cards switch to single column on mobile */
  .service-card {
    padding: 30px 20px;
  }

  .service-card-inner {
    flex-direction: column; /* Stack info and highlight vertically */
    gap: 28px;
  }

  /* Highlight box takes full width on mobile */
  .service-highlight {
    width: 100%;
  }

  .contact-card {
    padding: 36px 24px;
  }
}


/* ============================================================
   15. FORM STATUS MESSAGES
   Green for success, red for error — shown after form submit.
   ============================================================ */
.form-status {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.form-status--success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.form-status--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}