/* ============================================================
   GIANT CLAN — CUSTOM STYLES
   File: css/styles.css

   TABLE OF CONTENTS
   1. CSS Variables (colours, fonts — edit these first)
   2. Base / Reset
   3. Utility Classes
   4. Preloader
   5. Navbar
   6. Hero Section
   7. Stats Band
   8. About Section
   9. Pillars Section
   10. Products Section
   11. Testimonials Section
   12. Social Section
   13. Contact / CTA Section
   14. Footer
   15. Reveal Animation
   16. Media Queries (Mobile / Tablet)
============================================================ */


/* ============================================================
   1. CSS VARIABLES
   Change colours and fonts here — they apply everywhere.
============================================================ */

:root {
  /* Colours */
  --color-gold:        #D4A843;
  --color-gold-light:  #F5C842;
  --color-gold-dim:    rgba(212, 168, 67, 0.12);
  --color-gold-border: rgba(212, 168, 67, 0.30);

  --color-dark:        #080808;
  --color-dark-2:      #111111;
  --color-dark-3:      #181818;
  --color-dark-4:      #222222;

  --color-white:       #F5F3EE;
  --color-muted:       #888888;

  /* Fonts */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing & Shape */
  --radius:      12px;
  --transition:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   2. BASE / RESET
============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-dark);
  color: var(--color-white);
  overflow-x: hidden;
  line-height: 1.65;
}


/* ============================================================
   3. UTILITY CLASSES
============================================================ */

/* Gold text — use class="text-gold" anywhere in HTML */
.text-gold {
  color: var(--color-gold);
}

/* Section padding — applied to every <section> */
.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Small eyebrow label above headings */
.section-label {
  display: inline-block;
  color: var(--color-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Large section heading */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Body text below headings */
.section-sub {
  color: rgba(245, 243, 238, 0.60);
  font-size: 1rem;
  font-weight: 300;
  max-width: 520px;
}

/* Short gold divider line */
.divider-line {
  width: 48px;
  height: 2px;
  background-color: var(--color-gold);
  margin-bottom: 24px;
}

/* Gold primary button */
.btn-gold-primary {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-gold);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 14px 30px;
  border-radius: 50px;
  border: 2px solid var(--color-gold);
  text-decoration: none;
  transition: var(--transition);
}

.btn-gold-primary:hover {
  background-color: var(--color-gold-light);
  color: var(--color-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(212, 168, 67, 0.35);
}

/* Gold outline button */
.btn-gold-outline {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: var(--color-white);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 14px 30px;
  border-radius: 50px;
  border: 2px solid rgba(245, 243, 238, 0.30);
  text-decoration: none;
  transition: var(--transition);
}

.btn-gold-outline:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}


/* ============================================================
   4. PRELOADER
============================================================ */

#preloader {
  position: fixed;
  inset: 0;
  background-color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Spinning ring */
.loader-ring {
  width: 56px;
  height: 56px;
  border: 3px solid rgba(212, 168, 67, 0.20);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ============================================================
   5. NAVBAR
============================================================ */

#navbar {
  padding: 20px 0;
  transition: background var(--transition), padding var(--transition), backdrop-filter var(--transition);
}

/* Navbar becomes solid after scrolling */
#navbar.scrolled {
  background-color: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 0;
  border-bottom: 1px solid rgba(212, 168, 67, 0.12);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 2px;
  color: var(--color-gold);
  text-decoration: none;
}

.nav-logo:hover {
  color: var(--color-gold-light);
}

.navbar-nav .nav-link {
  color: rgba(245, 243, 238, 0.70);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color var(--transition);
  padding: 6px 0;
}

.navbar-nav .nav-link:hover {
  color: var(--color-gold);
}

/* "Contact" button in nav */
.nav-cta-btn {
  background-color: var(--color-gold);
  color: var(--color-dark) !important;
  font-weight: 700 !important;
  padding: 8px 22px !important;
  border-radius: 40px;
}

.nav-cta-btn:hover {
  background-color: var(--color-gold-light);
  color: var(--color-dark) !important;
}

/* Mobile nav toggler icon */
.navbar-toggler {
  border: 1px solid rgba(212, 168, 67, 0.30);
  padding: 6px 10px;
}

.navbar-toggler:focus {
  box-shadow: none;
}


/* ============================================================
   6. HERO SECTION
============================================================ */

.hero-section {
  min-height: 100vh;
  background-image:
    linear-gradient(
      150deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.65) 50%,
      rgba(0, 0, 0, 0.80) 100%
    ),
    url('../images/header.png');
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  padding-top: 130px;
  padding-bottom: 100px;
  padding-left: 40px;
  padding-right: 40px;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow on hero */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 60% at 70% 50%,
    rgba(212, 168, 67, 0.07),
    transparent
  );
  pointer-events: none;
}

/* Eyebrow tag */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-gold-dim);
  border: 1px solid var(--color-gold-border);
  color: var(--color-gold);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 40px;
  margin-bottom: 28px;
}

/* Animated dot inside eyebrow */
.eyebrow-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: var(--color-gold);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.30; }
}

/* Main headline */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* Subtitle */
.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(245, 243, 238, 0.75);
  max-width: 460px;
  margin-bottom: 44px;
  font-weight: 300;
}

/* Scroll hint at bottom of hero */
.hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-muted);
  font-size: 0.70rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Animated scroll line */
.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--color-gold), transparent);
  animation: slideDown 1.5s ease infinite;
}

@keyframes slideDown {
  0%   { opacity: 0; transform: scaleY(0); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(20px); }
}


/* ============================================================
   7. STATS BAND
============================================================ */

.stats-band {
  background-color: var(--color-dark-2);
  border-top: 1px solid rgba(212, 168, 67, 0.12);
  border-bottom: 1px solid rgba(212, 168, 67, 0.12);
  padding: 60px 0;
}

.stat-item {
  padding: 28px 16px;
  border-right: 1px solid rgba(212, 168, 67, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Remove border on the last stat item */
.col-md-3:last-child .stat-item {
  border-right: none;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  color: var(--color-gold);
  letter-spacing: 1px;
  display: block;
  line-height: 1;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--color-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 8px;
}


/* ============================================================
   8. ABOUT SECTION
============================================================ */

.about-section {
  background-color: var(--color-dark-2);
}

/* Image wrapper */
.about-image-wrap {
  position: relative;
}

.about-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius);
  display: block;
}

/* Decorative border offset behind the image */
.about-img-border {
  position: absolute;
  bottom: -18px;
  right: -18px;
  width: 58%;
  height: 58%;
  border: 2px solid var(--color-gold);
  border-radius: var(--radius);
  opacity: 0.35;
  pointer-events: none;
}

/* Gold badge on the image */
.about-badge {
  position: absolute;
  top: 28px;
  right: -28px;
  background-color: var(--color-gold);
  color: var(--color-dark);
  padding: 16px 18px;
  border-radius: var(--radius);
  text-align: center;
  font-weight: 700;
}

.badge-number {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  display: block;
}

.badge-text {
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

/* Bullet point list */
.about-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: rgba(245, 243, 238, 0.80);
  margin-bottom: 14px;
}

.about-points li i {
  margin-top: 3px;
  flex-shrink: 0;
}


/* ============================================================
   9. PILLARS SECTION
============================================================ */

.pillars-section {
  background-color: var(--color-dark);
}

/* The row of pillar cards is treated as a unified grid */
.pillars-grid {
  border: 1px solid rgba(212, 168, 67, 0.10);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0;
}

.pillar-card {
  background-color: var(--color-dark-2);
  padding: 48px 32px;
  border-right: 1px solid rgba(212, 168, 67, 0.08);
  border-bottom: 1px solid rgba(212, 168, 67, 0.08);
  transition: background var(--transition);
}

.pillar-card:hover {
  background-color: var(--color-dark-3);
}

/* Icon box */
.pillar-icon {
  width: 52px;
  height: 52px;
  background-color: var(--color-gold-dim);
  border: 1px solid var(--color-gold-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-gold);
  margin-bottom: 22px;
}

.pillar-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.pillar-text {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.75;
  margin: 0;
}


/* ============================================================
   10. PRODUCTS SECTION
============================================================ */

.products-section {
  background-color: var(--color-dark-2);
}

/* Category row label */
.category-label {
  display: inline-flex;
  align-items: center;
  color: var(--color-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Individual product card */
.product-card {
  background-color: var(--color-dark-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.product-card:hover {
  border-color: var(--color-gold-border);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
}

/* Premium card gets a gold tint */
.product-card--premium {
  border-color: rgba(212, 168, 67, 0.20);
}

.product-card-top {
  padding: 24px 24px 0;
}

.product-card-bottom {
  padding: 16px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tag badge on card */
.product-tag {
  display: inline-block;
  background-color: rgba(212, 168, 67, 0.10);
  color: var(--color-gold);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
}

/* Premium tag variant */
.product-tag--premium {
  background-color: rgba(212, 168, 67, 0.20);
  color: var(--color-gold-light);
}

.product-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.product-desc {
  font-size: 0.85rem;
  color: var(--color-muted);
  flex: 1;
  line-height: 1.75;
  margin: 0;
}

/* Button inside product card */
.btn-card-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  background-color: var(--color-gold);
  color: var(--color-dark);
  width: 100%;
  transition: var(--transition);
  border: none;
}

.btn-card-gold:hover {
  background-color: var(--color-gold-light);
  color: var(--color-dark);
}


/* ============================================================
   11. TESTIMONIALS SECTION
============================================================ */

.testimonials-section {
  background-color: var(--color-dark);
}

.testimonial-card {
  background-color: var(--color-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: 36px;
  position: relative;
  height: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.testimonial-card:hover {
  border-color: var(--color-gold-border);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.30);
}

/* Large decorative quotation mark */
.testimonial-quote {
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: Georgia, serif;
  font-size: 4rem;
  color: rgba(212, 168, 67, 0.15);
  line-height: 1;
  pointer-events: none;
}

/* Author row */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--color-gold-border);
  flex-shrink: 0;
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.testimonial-stars {
  color: var(--color-gold);
  font-size: 0.75rem;
  margin-top: 3px;
}

/* Quote body */
.testimonial-text {
  font-size: 0.88rem;
  color: rgba(245, 243, 238, 0.70);
  line-height: 1.80;
  font-style: italic;
  border-left: none;
  margin: 0;
  padding: 0;
}

/* "Read More" link */
.testimonial-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gold);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 16px;
  letter-spacing: 0.5px;
  transition: gap var(--transition);
}

.testimonial-link:hover {
  gap: 12px;
  color: var(--color-gold-light);
}


/* ============================================================
   12. SOCIAL SECTION
============================================================ */

.social-section {
  background-color: var(--color-dark-2);
  border-top: 1px solid rgba(212, 168, 67, 0.10);
  border-bottom: 1px solid rgba(212, 168, 67, 0.10);
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  background-color: var(--color-dark-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-white);
  transition: border-color var(--transition), transform var(--transition);
}

.social-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  color: var(--color-white);
}

.social-card i {
  font-size: 1.8rem;
  color: var(--color-gold);
}

.social-card span {
  font-size: 0.85rem;
  font-weight: 500;
}


/* ============================================================
   13. CONTACT / CTA SECTION
============================================================ */

.contact-section {
  background-color: var(--color-dark);
  position: relative;
  overflow: hidden;
}

/* Soft radial glow behind the CTA */
.contact-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(212, 168, 67, 0.07),
    transparent 70%
  );
  pointer-events: none;
}

/* WhatsApp button */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  background-color: #25D366;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 16px 34px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid #25D366;
  transition: var(--transition);
}

.btn-whatsapp:hover {
  background-color: #20BD5A;
  border-color: #20BD5A;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(37, 211, 102, 0.25);
}

/* Small caption below CTA buttons */
.cta-caption {
  font-size: 0.80rem;
  color: var(--color-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ============================================================
   14. FOOTER
============================================================ */

.site-footer {
  background-color: var(--color-dark-2);
  border-top: 1px solid rgba(212, 168, 67, 0.10);
  padding: 40px 0;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-gold);
  letter-spacing: 2px;
}

.footer-copy {
  font-size: 0.80rem;
  color: var(--color-muted);
}


/* ============================================================
   15. REVEAL ANIMATION
   Elements with class "reveal" fade in when scrolled into view.
   JavaScript adds the "visible" class via IntersectionObserver.
============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   16. MEDIA QUERIES
============================================================ */

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {
  .about-badge {
    right: 12px;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(212, 168, 67, 0.10);
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  .section-padding {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .hero-section {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 110px;
  }

  .hero-scroll-hint {
    display: none;
  }

  .about-badge {
    display: none;
  }

  .about-img {
    height: 320px;
  }

  .about-img-border {
    display: none;
  }

  .pillar-card {
    border-right: none;
  }

  .stats-band {
    padding: 40px 0;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(212, 168, 67, 0.10);
    padding: 20px 10px;
  }

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

  .contact-section .section-title {
    font-size: 2rem;
  }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  .hero-title {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .btn-gold-primary,
  .btn-gold-outline,
  .btn-whatsapp {
    width: 100%;
    justify-content: center;
  }
}