/* ============================================================
   PTD DTC Landing Page — base.css
   Reset, CSS Variables, Typography, Utilities
   Pasukan Tempur Digital © 2026
   ============================================================ */

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS VARIABLES ── */
:root {
  /* Brand colours */
  --orange:        #f97316;
  --orange2:       #ea6a0a;
  --orange-light:  #fff7ed;
  --orange-mid:    #fed7aa;

  --blue:          #2596be;
  --blue2:         #1a7a9e;
  --blue-light:    #e8f6fb;

  --teal:          #0ea5e9;
  --teal-light:    #f0f9ff;
  --teal2:         #0284c7;

  --green:         #22c55e;
  --green-light:   #f0fdf4;

  --red:           #ef4444;
  --red2:          #dc2626;

  /* Neutral */
  --ink:           #111827;
  --ink2:          #374151;
  --ink3:          #6b7280;
  --ink4:          #9ca3af;

  --surface:       #f9fafb;
  --surface2:      #f3f4f6;

  --white:         #ffffff;
  --border:        #e5e7eb;
  --border2:       #d1d5db;

  /* Typography */
  --font:  'Outfit', sans-serif;

  /* Shadows */
  --shadow2: 0 4px 24px rgba(0, 0, 0, 0.10);
  --shadow3: 0 20px 60px rgba(0, 0, 0, 0.14);

  /* Responsive spacing */
  --px:  clamp(16px, 4vw, 40px);
  --spy: clamp(48px, 8vw, 80px);
}

/* ── BASE ── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ── LAYOUT CONTAINERS ── */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--px);
}

.container-sm {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--px);
}

.container-md {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--px);
}

/* ── SECTION COMMON ── */
.section {
  padding: var(--spy) var(--px);
}

.section-alt {
  background: var(--surface);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal2);
  background: var(--teal-light);
  border: 1px solid #bae6fd;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
}

.section-title .accent {
  color: var(--orange);
}

.section-desc {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--ink2);
  line-height: 1.65;
}

/* ── SCROLL REVEAL ANIMATION ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

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

.reveal-d1 { transition-delay: 0.07s; }
.reveal-d2 { transition-delay: 0.14s; }
.reveal-d3 { transition-delay: 0.21s; }

/* ── HERO ENTRY ANIMATIONS ── */
@keyframes floatUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-title     { animation: floatUp 0.5s 0.07s ease both; }
.hero-sub       { animation: floatUp 0.5s 0.14s ease both; }
.hero-actions   { animation: floatUp 0.5s 0.20s ease both; }
.hero-right     { animation: floatUp 0.6s 0.16s ease both; }