/* ==========================================================================
   GIFTED HANDS CLEANING — DESIGN SYSTEM
   Royal Blue + Gold Brand Palette
   CSS Custom Properties, Base Resets, Typography, Utilities
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,600&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

:root {
  /* ── Brand Colors ── */
  --color-primary: #1B2A5E;
  --color-primary-light: #3355CC;
  --color-secondary: #3A5FE5;
  --color-accent: #D4A843;
  --color-accent-light: #F0D078;
  --color-accent-dark: #B8922F;
  --color-navy: #0F1B3D;

  /* ── Text ── */
  --color-text-main: #1A1F36;
  --color-text-muted: #5A6178;
  --color-text-light: #F8F9FC;

  /* ── Backgrounds ── */
  --color-bg-body: #FFFFFF;
  --color-bg-alt: #F7F8FC;
  --color-bg-dark: #0D1529;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #1B2A5E 0%, #3355CC 100%);
  --gradient-accent: linear-gradient(135deg, #D4A843 0%, #F0D078 100%);
  --gradient-dark: linear-gradient(135deg, #0D1529 0%, #1B2A5E 100%);
  --gradient-royal: linear-gradient(135deg, #3A5FE5 0%, #5B7FF7 100%);
  --gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%);

  /* ── Typography ── */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Fraunces', serif;
  --font-script: 'Playfair Display', serif;

  /* ── Spacing (Reduced by ~70%) ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  /* ── Shadows ── */
  --shadow-sm: 0 4px 6px rgba(27,42,94,0.04);
  --shadow-md: 0 10px 25px rgba(27,42,94,0.08);
  --shadow-lg: 0 20px 50px rgba(27,42,94,0.12);
  --shadow-glass: 0 8px 32px 0 rgba(27,42,94,0.1);
  --shadow-glow: 0 0 20px rgba(212,168,67,0.4);
  --shadow-gold: 0 8px 30px rgba(212,168,67,0.2);

  /* ── Radius ── */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.5rem;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:var(--font-body); color:var(--color-text-main); background:var(--color-bg-body); line-height:1.6; overflow-x:hidden; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; line-height:1.2; color:var(--color-primary); margin-bottom:var(--space-sm); }
a { text-decoration:none; color:inherit; transition:color var(--transition-fast); }
img { max-width:100%; height:auto; display:block; }

.container,.gifted-container { width:100%; max-width:1280px; margin:0 auto; padding:0 var(--space-md); }
.section,.gifted-section { padding:var(--space-xxl) 0; position:relative; }
.section-bg-alt { background:var(--gradient-soft); }
.section-bg-dark { background-color:var(--color-bg-dark); color:var(--color-text-light); }
.section-bg-dark h2,.section-bg-dark h3 { color:var(--color-text-light); }
.text-center { text-align:center; }
.text-accent { color:var(--color-accent); }

.section-header { max-width:700px; margin:0 auto var(--space-lg); text-align:center; position:relative; z-index:2; }
.section-subtitle { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--color-secondary); margin-bottom:0.75rem; font-size:0.875rem; background:rgba(58,95,229,0.08); padding:0.25rem 1rem; border-radius:var(--radius-full); }
.section-subtitle i, .section-subtitle svg { font-size:0.75rem; width:1em; height:1em; fill:currentColor; }

.shape-blob { position:absolute; filter:blur(80px); z-index:0; opacity:0.4; border-radius:50%; pointer-events:none; }
.shape-1 { top:-10%; right:-5%; width:400px; height:400px; background:var(--color-secondary); }
.shape-2 { bottom:-10%; left:-5%; width:300px; height:300px; background:var(--color-accent); }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:1rem 2.5rem; font-family:var(--font-heading); font-weight:600; border-radius:var(--radius-full); cursor:pointer; transition:all var(--transition-normal); border:none; font-size:1.05rem; gap:0.5rem; position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; top:50%; left:50%; width:300%; height:300%; background:rgba(255,255,255,0.1); transform:translate(-50%,-50%) rotate(45deg) translateY(100%); transition:transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.btn:hover::after { transform:translate(-50%,-50%) rotate(45deg) translateY(-100%); }
.btn-primary { background:var(--gradient-accent); color:var(--color-navy); box-shadow:var(--shadow-gold); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(212,168,67,0.35); }
.btn-outline { background:transparent; color:var(--color-primary); border:2px solid var(--color-primary); }
.btn-outline:hover { background:var(--color-primary); color:white; }
.btn-outline-light { background:transparent; color:white; border:2px solid rgba(255,255,255,0.5); backdrop-filter:blur(5px); }
.btn-outline-light:hover { background:white; color:var(--color-primary); border-color:white; }

/* ── Gold Text Utility ── */
.gold-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.reveal { opacity:0; transform:translateY(40px); transition:all 0.8s cubic-bezier(0.165,0.84,0.44,1); }
.reveal.active { opacity:1; transform:translateY(0); }
@keyframes gifted-float { 0%{transform:translateY(0)} 50%{transform:translateY(-15px)} 100%{transform:translateY(0)} }