/* ==========================================================================
   site.css — shared editorial-luxe design system for azizsaif.com
   One source of truth for tokens, typography, components and motion utilities.
   Pairs with /assets/site.js (reveal, count-up, magnetic, scroll bar, theme)
   and /assets/nav.css (canonical navigation). Reuse these classes across
   pages so the whole site reads as one award-tier system.
   ========================================================================== */
:root{
  --bg:#F7F5F1; --bg-2:#EFEADF; --panel:#FFFFFF; --panel-2:#FBFAF6;
  --line:#E4DDD0; --line-2:#D8CFBE;
  --text:#1C1914; --text-soft:#6B6558; --muted:#978F82;
  --accent:#1A4F3A; --accent-deep:#12382A; --accent-soft:rgba(26,79,58,.08);
  --gold:#C47820; --gold-deep:#9A5E16; --gold-soft:#E8D5A0;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow:0 18px 45px -20px rgba(20,30,45,.30);
  --shadow-lg:0 40px 80px -30px rgba(20,30,45,.45);
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
html[data-theme="dark"]{
  --bg:#16140F; --bg-2:#1E1B16; --panel:#211E18; --panel-2:#1A1712;
  --line:#332E24; --line-2:#443D2F;
  --text:#EDE7DA; --text-soft:#B3AA98; --muted:#8C8474;
  --accent:#5FB088; --accent-deep:#4C9E76; --accent-soft:rgba(95,176,136,.10);
  --gold:#E0A85C; --gold-deep:#D9952A; --gold-soft:#5a4a2a;
  --shadow:0 18px 45px -20px rgba(0,0,0,.6);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,.75);
}

/* ---- base ---- */
.ds *{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body.ds{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  line-height:1.65;font-weight:300;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100vh;
  background-image:
    radial-gradient(ellipse at 88% 6%, rgba(196,120,32,.07) 0%, transparent 52%),
    radial-gradient(ellipse at 4% 92%, rgba(26,79,58,.06) 0%, transparent 50%);
}
.ds a{color:inherit;text-decoration:none}
.ds img{max-width:100%;display:block}
.ds h1,.ds h2,.ds h3,.ds h4{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.06}
.ds em{font-style:italic}
.ds .serif-em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent)}
.ds ::selection{background:var(--accent);color:#fff}
.ds :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ---- texture + scroll progress ---- */
body.ds::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:950;
  background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .12s linear}

/* ---- layout ---- */
.ds section{position:relative;z-index:2}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}

/* ---- reveal animation ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0)*90ms)}
.reveal.in{opacity:1;transform:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:12px;font-weight:600;
  letter-spacing:.06em;border-radius:999px;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;
  will-change:transform;cursor:pointer;border:1px solid transparent;font-family:var(--sans)}
.btn svg{width:15px;height:15px}
.btn.btn-primary{background:var(--accent);color:#fff!important}
.btn.btn-primary:hover{background:var(--accent-deep);color:#fff!important}
.btn.btn-ghost{border-color:var(--line-2);color:var(--text);background:transparent}
.btn.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.btn-gold{background:var(--gold);color:#1b1206}
.btn.btn-gold:hover{background:var(--gold-deep);color:#fff}

/* ---- section headers ---- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{font-size:clamp(30px,4.6vw,52px);font-weight:600;max-width:18ch;margin-top:18px}
.sec-head h2 .serif-em{color:var(--gold-deep)}
.sec-head .link{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sec-head .link:hover{color:var(--gold-deep)}
.sec-head .link svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.sec-head .link:hover svg{transform:translateX(4px)}

/* ---- stats grid ---- */
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media(max-width:860px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}
.stat{background:var(--panel);padding:32px 26px;text-align:center}
.stat .num{font-family:var(--serif);font-size:clamp(40px,5vw,58px);font-weight:500;color:var(--accent);line-height:1;letter-spacing:-.02em}
.stat .num sup{font-size:.42em;color:var(--gold-deep);margin-left:2px;top:-.7em}
.stat .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);margin-top:14px;font-weight:600}

/* ---- marquee ---- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;overflow:hidden;background:var(--panel-2);position:relative;z-index:2}
.marquee-track{display:flex;gap:48px;width:max-content;animation:scroll-x 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,26px);
  color:var(--text-soft);white-space:nowrap;display:inline-flex;align-items:center;gap:48px}
.marquee-track span::after{content:"✦";font-style:normal;color:var(--gold);font-size:.7em}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---- card ---- */
.lux-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(28px,3.4vw,42px);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.lux-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}

/* ---- theme toggle ---- */
#themeToggle{position:fixed;left:18px;bottom:18px;z-index:120;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text);cursor:pointer;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .25s var(--ease)}
#themeToggle:hover{transform:scale(1.08)}

@media(prefers-reduced-motion:reduce){
  .ds *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}