/*
Theme Name: EDDi Marketing
Theme URI: https://www.edd-i.com
Author: EDDi Technologies
Description: Custom theme for EDDi Technologies marketing site
Version: 1.0.0
License: Proprietary
Text Domain: eddi-marketing
*/

/* ── SHARED DESIGN TOKENS ── */
:root {
  --navy: #1A2744;
  --navy-deep: #0F1E36;
  --gold: #C9922A;
  --gold-dark: #A87520;
  --gold-subtle: rgba(201,146,42,0.10);
  --silver: #9AA0AC;
  --border: #D1D5DB;
  --overlay: rgba(15,30,54,0.75);
  --px: 96px;
  --max: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── REVEAL ANIMATIONS ── */
.r { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.r.in { opacity: 1; transform: none; }
.d1 { transition-delay: 90ms; }
.d2 { transition-delay: 180ms; }
.d3 { transition-delay: 270ms; }
.d4 { transition-delay: 360ms; }

/* ── SHARED LAYOUT ── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--px); }
.section { padding: 112px 0 88px; }

/* ── SHARED BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border: none; cursor: pointer; white-space: nowrap; transition: all .22s ease; line-height: 1; }
.btn .arr { transition: transform .16s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--gold); color: #fff; padding: 16px 36px; border-radius: 2px; }
.btn-primary:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,146,42,.28); }
.btn-ghost { background: transparent; color: #fff; padding: 15px 35px; border-radius: 2px; border: 1px solid rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ── RESPONSIVE BASE ── */
@media (max-width: 1280px) { :root { --px: 60px; } }
@media (max-width: 1024px) { :root { --px: 40px; } }
@media (max-width: 768px) { :root { --px: 24px; } }

h1, h2, h3 { text-wrap: balance; }