/*
  ============================================================
  FILE: css/style.css
  PURPOSE: All page-level styles for TheSelfLicensing

  WHAT'S IN THIS FILE (in order):
    1.  Reset              — remove browser defaults
    2.  CSS Variables      — color palette for light + dark mode
    3.  Base / Body        — fonts, background, transitions
    4.  Hero section       — gradient banner, headline, stats
    5.  Section shared     — labels, titles, subtitles
    6.  Problems section   — 6 pain-point cards
    7.  Services section   — 6 service cards
    8.  Process section    — 4 numbered steps
    9.  Stats Band         — full-width dark strip
    10. Testimonials       — 6 review cards
    11. Contact section    — form + info column
    12. Footer             — 4-column grid + copyright
    13. Floating CTA       — fixed gold button bottom-right
    14. Scroll Reveal      — fade-up animation on scroll
    15. Responsive         — breakpoints for tablet + mobile

  WHAT'S NOT IN THIS FILE:
    → Navbar styles are in css/navbar.css (kept isolated)
    → Navbar JS is in js/navbar.js
    → Page JS is in js/main.js
  ============================================================
*/


/* ================================================================
   1. RESET
   ================================================================
   box-sizing: border-box
     → padding and border are INCLUDED in the element's declared width.
       Without this, adding padding would make elements grow beyond
       their intended size. This is the modern standard.
   margin/padding: 0
     → Remove browser-applied default spacing on all elements.
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ================================================================
   2. CSS CUSTOM PROPERTIES (VARIABLES)
   ================================================================
   Defined on :root — available everywhere in the stylesheet.
   Usage: color: var(--text);

   WHY VARIABLES?
     → Change a color in one place, it updates everywhere instantly.
     → Makes dark mode trivial: just redefine the same variable names.

   LIGHT MODE (default — active when no data-theme attribute is set):
================================================================ */
:root {
  /* Brand colors — never change between modes */
  --navy:      #0d1f3c;             /* deep navy: nav, step badges, footer */
  --blue:      #1a3a6e;             /* medium blue: gradients, icon boxes */
  --accent:    #c8922a;             /* warm gold: buttons, highlights */
  --accent2:   #e6b84a;             /* lighter gold: hover states, numbers */

  /* Surface colors — change between light and dark mode */
  --bg:        #ffffff;             /* main page background */
  --bg-alt:    #f5f7fa;             /* alternate section backgrounds */
  --card-bg:   #ffffff;             /* card and form backgrounds */
  --text:      #1e2a3b;             /* primary body text */
  --text-mute: #6b7280;             /* secondary/muted text */
  --border:    #e2e8f0;             /* borders on cards and inputs */
  --shadow:    rgba(13,31,60,.10);  /* box-shadow color */
}

/* ================================================================
   DARK MODE OVERRIDES
   ================================================================
   When navbar.js sets data-theme="dark" on the <html> element,
   these variable values REPLACE the :root ones above.
   Only surface colors change — brand colors stay the same.
================================================================ */
[data-theme="dark"] {
  --bg:        #0f172a;             /* very dark navy — page background */
  --bg-alt:    #1e293b;             /* slightly lighter dark — alt sections */
  --card-bg:   #1e293b;             /* cards and forms */
  --text:      #e2e8f0;             /* light text on dark surfaces */
  --text-mute: #94a3b8;             /* muted text */
  --border:    #334155;             /* visible but subtle borders */
  --shadow:    rgba(0,0,0,.35);     /* stronger shadow in dark mode */
}


/* ================================================================
   3. BASE / BODY
   ================================================================
   Sets the foundation for the whole page: font, background, text color.
   Uses CSS variables so everything reacts automatically to theme changes.

   transition: makes the background + text color animate smoothly
   when the user switches between dark and light mode (0.3s fade).
================================================================ */
html {
  /* scroll-behavior: smooth makes anchor links (e.g. href="#services")
     animate smoothly instead of jumping instantly */
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;   /* loaded via Google Fonts in index.html */
  color: var(--text);                    /* adapts to dark/light mode */
  background: var(--bg);                /* adapts to dark/light mode */
  line-height: 1.6;                     /* comfortable reading line spacing */
  transition: background .3s ease, color .3s ease;
}


/* ================================================================
   4. HERO SECTION
   ================================================================
   The full-width gradient banner at the top of the page.
   Always dark (navy → blue gradient) regardless of theme.

   position: relative → lets ::before be positioned inside it.
   overflow: hidden   → clips the decorative pattern at the edges.
================================================================ */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 60%, #1e4d8c 100%);
  color: #ffffff;
  padding: 110px 5% 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── Decorative pattern overlay using a pseudo-element ──
   ::before inserts a fake element BEFORE the hero's content.
   We give it a tiny SVG dot pattern that tiles across the background.
   pointer-events: none → the pattern doesn't block button clicks.
── */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;   /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Small gold pill badge above the headline */
.hero-badge {
  display: inline-block;
  background: rgba(200,146,42,.18);
  border: 1px solid var(--accent);
  color: var(--accent2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: .38rem 1.1rem;
  border-radius: 30px;
  margin-bottom: 1.4rem;
}

/* Main headline
   clamp(min, preferred, max) → fluid font that scales with viewport:
     never smaller than 2.2rem, never larger than 3.6rem */
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.18;
  font-weight: 700;
  margin-bottom: 1.2rem;
  animation: fadeUp .7s ease both;   /* slides in from below on load */
}
.hero h1 span { color: var(--accent2); }   /* gold second line */

/* Subtitle under the headline */
.hero p {
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: rgba(255,255,255,.82);
  max-width: 620px;
  margin: 0 auto 2.2rem;
  animation: fadeUp .7s .15s ease both;    /* 0.15s delay after h1 */
}

/* Two CTA buttons side by side */
.hero-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp .7s .3s ease both;
}

/* Solid gold primary button */
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  padding: .85rem 2rem;
  border-radius: 7px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--accent2); transform: translateY(-2px); }

/* Outlined transparent secondary button */
.btn-outline {
  border: 2px solid rgba(255,255,255,.5);
  color: #ffffff;
  padding: .85rem 2rem;
  border-radius: 7px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.btn-outline:hover { border-color: #ffffff; background: rgba(255,255,255,.08); }

/* Four stats row at the bottom of the hero */
.hero-stats {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.15);
  animation: fadeUp .7s .45s ease both;
}
.stat { text-align: center; }
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--accent2);
}
.stat-label {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  margin-top: .15rem;
  letter-spacing: .3px;
}

/* fadeUp animation — used for hero elements on page load
   'both' fill-mode: element stays invisible before running,
   stays visible after finishing */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   5. SHARED SECTION STYLES
   ================================================================
   Shared across all content sections for consistent spacing
   and typography (problems, services, process, testimonials, contact).
================================================================ */

/* All sections get 90px top/bottom padding, 5% left/right */
section { padding: 90px 5%; }

/* Small uppercase label above each section title */
.section-label {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

/* Large section headline */
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);        /* adapts to dark/light mode */
  margin-bottom: 1rem;
}

/* Subtitle below each section title */
.section-sub {
  color: var(--text-mute);   /* muted — adapts to theme */
  font-size: 1rem;
  max-width: 560px;
  line-height: 1.7;
}

/* Wrapper that groups label + title + subtitle */
.section-head { margin-bottom: 3rem; }


/* ================================================================
   6. PROBLEMS SECTION
   ================================================================
   Six pain-point cards in a responsive grid.
   Uses CSS Grid auto-fit so cards wrap automatically without
   media queries (minmax(290px, 1fr) = at least 290px per column).
================================================================ */
.problems {
  background: var(--bg-alt);
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
}

.problem-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.8rem;
  transition: box-shadow .25s, transform .25s;
}
.problem-card:hover {
  box-shadow: 0 8px 28px var(--shadow);
  transform: translateY(-3px);   /* card lifts 3px on hover */
}

/* Orange-tinted icon box */
.problem-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.problem-card h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.problem-card p  { font-size: .9rem; color: var(--text-mute); line-height: 1.65; }


/* ================================================================
   7. SERVICES SECTION
   ================================================================
   Six service cards. Each has:
     - A gold left-border accent (::before pseudo-element)
     - A dark icon box
     - Title, description, and bullet list
================================================================ */
#services { background: var(--bg); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
}

.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  transition: box-shadow .25s, border-color .25s, transform .25s;
  position: relative;   /* for ::before gold strip */
  overflow: hidden;     /* clips strip at card corners */
}

/* Gold vertical strip along the left edge */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}

.service-card:hover {
  box-shadow: 0 10px 32px var(--shadow);
  border-color: #cbd5e1;
  transform: translateY(-3px);
}

/* Dark navy icon box */
.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}

.service-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: .6rem; }
.service-card p  { font-size: .9rem; color: var(--text-mute); margin-bottom: 1rem; line-height: 1.65; }

/* Bullet list with gold checkmarks */
.service-list { list-style: none; }
.service-list li {
  font-size: .85rem;
  color: var(--text-mute);
  padding: .22rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.service-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
}


/* ================================================================
   8. PROCESS SECTION (HOW IT WORKS)
   ================================================================
   Four numbered steps in a responsive grid.
   Each step has a circular number badge, title, and description.
================================================================ */
#process { background: var(--bg-alt); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.step {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 2rem 1.8rem;
  text-align: center;
  border: 1px solid var(--border);
  transition: box-shadow .25s;
}
.step:hover { box-shadow: 0 8px 28px var(--shadow); }

/* Circular number badge */
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #ffffff;
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;   /* centered, with space below */
}

.step h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.step p  { font-size: .88rem; color: var(--text-mute); line-height: 1.65; }


/* ================================================================
   9. STATS BAND
   ================================================================
   Full-width dark navy strip with four large numbers.
   Uses <div class="stats-band"> (not <section>) for tighter
   padding and edge-to-edge appearance.
================================================================ */
.stats-band {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  padding: 60px 5%;
  color: #ffffff;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;   /* centered on wide screens */
}

.stat-item .num {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--accent2);
}
.stat-item .lbl {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  margin-top: .3rem;
}


/* ================================================================
   10. TESTIMONIALS SECTION
   ================================================================
   Six review cards in a responsive grid.
   Each card has: star rating, quote, avatar initials, name, role.
================================================================ */
#testimonials { background: var(--bg); }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.testi-card {
  background: var(--bg-alt);
  border-radius: 14px;
  padding: 1.8rem;
  border: 1px solid var(--border);
  transition: box-shadow .25s;
}
.testi-card:hover { box-shadow: 0 8px 24px var(--shadow); }

.testi-stars { color: var(--accent); font-size: 1rem; margin-bottom: .9rem; letter-spacing: 2px; }

.testi-text {
  font-size: .93rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 1.2rem;
  font-style: italic;
}

.testi-author { display: flex; align-items: center; gap: .9rem; }

/* Circle with initials */
.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #ffffff;
  font-weight: 700;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;   /* never shrink the avatar */
}

.testi-name { font-weight: 600; font-size: .9rem; color: var(--text); }
.testi-role { font-size: .8rem; color: var(--text-mute); }


/* ================================================================
   11. CONTACT SECTION
   ================================================================
   Two-column layout:
     Left  (1fr):   contact details + trust badges
     Right (1.3fr): consultation form

   Stacks to single column on tablets (handled in responsive block).
================================================================ */
#contact { background: var(--bg-alt); }

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: start;   /* top-align both columns */
}

/* Left column */
.contact-info h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--text);
  margin-bottom: 1rem;
}
.contact-info p { color: var(--text-mute); font-size: .95rem; line-height: 1.7; margin-bottom: 2rem; }

/* Each contact detail row: icon box + text */
.contact-detail { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.contact-detail .icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-detail .info { font-size: .9rem; }
.contact-detail .info strong { display: block; color: var(--text); font-weight: 600; margin-bottom: .1rem; }
.contact-detail .info span  { color: var(--text-mute); }

/* Trust badge pills */
.trust-badges { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.badge {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem .9rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text);
}

/* Right column: the form */
.contact-form {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 24px var(--shadow);
  border: 1px solid var(--border);
}
.contact-form h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 1.6rem;
}

/* Two inputs side by side (Name + Phone) */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Each label + input pair */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: .4rem; }

/* All form controls share these styles */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .72rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem;
  color: var(--text);
  background: var(--bg);   /* adapts to dark/light mode */
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
/* Blue focus ring when user clicks into a field */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,58,110,.15);
}

/* Textarea: can only be resized vertically */
.form-group textarea { resize: vertical; min-height: 110px; }

/* Form submit button */
.btn-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #ffffff;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .3px;
}
.btn-submit:hover { opacity: .9; transform: translateY(-1px); }

/* Small security note below button */
.form-note { text-align: center; font-size: .78rem; color: var(--text-mute); margin-top: .8rem; }


/* ================================================================
   12. FOOTER
   ================================================================
   Dark navy footer — always dark regardless of theme.
   Four-column grid: brand | services | license types | contact.
   Followed by a copyright bar.
================================================================ */
footer {
  background: var(--navy);
  color: rgba(255,255,255,.75);
  padding: 60px 5% 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;   /* brand column is wider */
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer-brand p { font-size: .88rem; line-height: 1.7; max-width: 280px; margin-top: .8rem; }

.footer-col h4 { color: #ffffff; font-size: .9rem; font-weight: 600; margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .88rem;
  transition: color .2s;
}
.footer-col a:hover { color: var(--accent2); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  text-align: center;
  font-size: .82rem;
}
.footer-bottom a { color: rgba(255,255,255,.5); text-decoration: none; margin: 0 .5rem; }


/* ================================================================
   13. FLOATING CTA BUTTON
   ================================================================
   Always-visible gold pill button in the bottom-right corner.

   position: fixed → stays in place relative to the viewport.
   z-index: 99     → above page content, below the nav (z: 1000).
   animation: pulse → subtle glow draws the eye without being annoying.
================================================================ */
.float-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99;
  background: var(--accent);
  color: #ffffff;
  padding: .8rem 1.5rem;
  border-radius: 50px;   /* pill shape */
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  animation: pulse 2.5s infinite;
}

/* Pulsing gold glow — alternates between two shadow intensities */
@keyframes pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(200,146,42,.5); }
  50%       { box-shadow: 0 4px 32px rgba(200,146,42,.85); }
}


/* ================================================================
   14. SCROLL REVEAL ANIMATION
   ================================================================
   Elements with class="reveal" start invisible and slightly below.
   When main.js detects them entering the viewport, it adds "visible".
   CSS transitions then animate them into place.

   This creates the "fade up into view" effect as you scroll.
================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   15. RESPONSIVE BREAKPOINTS
   ================================================================
   @media queries apply rules only at certain screen widths.

   900px → tablets and small laptops
   640px → mobile phones
================================================================ */

/* Tablet: stack contact columns, shrink footer to 2 columns */
@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; }        /* stack vertically */
  .footer-grid  { grid-template-columns: 1fr 1fr; }   /* 2-column footer */
}

/* Mobile: single column footer, stacked form row, smaller float CTA */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }         /* single column */
  .form-row    { grid-template-columns: 1fr; }         /* stack Name + Phone */
  .float-cta   { bottom: 16px; right: 16px; font-size: .82rem; padding: .7rem 1.2rem; }
}