/* ============================================================
   TISA Design System — "Illuminated Emerald"
   Portable theme: design tokens + core primitives.
   Mirrors the tokens embedded in index.html. See DESIGN.md.
   Usage:  <link rel="stylesheet" href="theme.css">
   ============================================================ */

:root{
  /* --- Surfaces (warm, green-tinted dark) --- */
  --canvas:#0A0F0C;      /* page background */
  --canvas-2:#0C1310;    /* recessed / CTA base */
  --panel:#101613;       /* cards, panels */
  --panel-2:#15211C;     /* deeper panel */
  --title:#F3EFE6;       /* ivory text */
  --muted:#9AA39B;       /* sage-gray secondary text */
  --muted-2:#6A736C;     /* captions / tertiary */
  --line:rgba(243,239,230,.10);   /* hairline border */
  --line-2:rgba(243,239,230,.17); /* stronger border */

  /* --- Accents: TWO only (metallic gold + deep emerald) --- */
  --gold:#C9A24B;        /* primary accent: CTAs, keywords */
  --gold-soft:#E0C079;   /* labels, eyebrows, hover, emphasis */
  --gold-deep:#A9832F;   /* gradient shadow stop */
  --emerald:#0F6B57;     /* secondary accent: identity, badges */
  --emerald-soft:#1C8C74;/* accent labels, glow */
  --emerald-deep:#0A4A3D;/* CTA radial base, mark gradient */

  /* --- Shape --- */
  --r-pill:999px;
  --r-lg:28px;
  --r-md:20px;

  /* --- Motion & layout --- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1200px;

  /* --- Type --- */
  --disp:"Hanken Grotesk",system-ui,sans-serif;  /* display / headings */
  --body:"Inter",system-ui,sans-serif;           /* body / UI */
}

/* ---- Base + the signature gold geometric lattice (Islamic arabesque grid) ---- */
body{
  margin:0;color:var(--title);font-family:var(--body);line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-color:var(--canvas);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-width='1' stroke-opacity='0.055'%3E%3Ccircle cx='0' cy='0' r='28'/%3E%3Ccircle cx='56' cy='0' r='28'/%3E%3Ccircle cx='0' cy='56' r='28'/%3E%3Ccircle cx='56' cy='56' r='28'/%3E%3Ccircle cx='28' cy='28' r='28'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px;background-attachment:fixed;
}
::selection{background:var(--gold);color:#0A0F0C}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.disp{font-family:var(--disp)}

/* Focal lattice — apply to a positioned ::before or a layer inside hero/CTA.
   Radially masked so the pattern glows at the center and fades out. */
.lattice-focal{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-width='1' stroke-opacity='0.14'%3E%3Ccircle cx='0' cy='0' r='28'/%3E%3Ccircle cx='56' cy='0' r='28'/%3E%3Ccircle cx='0' cy='56' r='28'/%3E%3Ccircle cx='56' cy='56' r='28'/%3E%3Ccircle cx='28' cy='28' r='28'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
}

/* ---- Buttons / pills ---- */
.pill{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-pill);
  font-family:var(--body);font-weight:600;font-size:15px;padding:12px 22px;cursor:pointer;
  border:1px solid transparent;transition:.28s var(--ease);white-space:nowrap;text-decoration:none}
.pill-gold{background:var(--gold);color:#0A0F0C}
.pill-gold:hover{background:var(--gold-soft);transform:translateY(-1px)}
.pill-ghost{background:rgba(243,239,230,.03);border-color:var(--line-2);color:var(--title)}
.pill-ghost:hover{background:rgba(243,239,230,.08);border-color:var(--gold)}
.pill-sm{padding:9px 16px;font-size:14px}

/* ---- Chip + eyebrow label ---- */
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);
  background:rgba(243,239,230,.03);border-radius:var(--r-pill);padding:7px 14px;font-size:13px;
  color:var(--muted);font-weight:500}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-soft)}
.ey{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);font-weight:600}

/* ---- Atmospheric glow (single-tone, low opacity — NOT neon) ---- */
.glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.2;pointer-events:none;z-index:0;
  animation:pulse 9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.24;transform:scale(1.08)}}

/* ---- Scroll-reveal ---- */
[data-rise]{opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-rise].in{opacity:1;transform:none}

/* ---- Unified image treatment: muted+warm at rest, full color on hover ---- */
.img-unify{filter:grayscale(.3) brightness(.88) sepia(.08);transition:filter .5s}
.img-unify:hover{filter:grayscale(0) brightness(1) sepia(0)}