/* gadz.tech — site scaffold design system (DRAFT)
   Palette and type pulled from the brand explorations in /brand. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --graphite:#23221E;      /* page background */
  --graphite-2:#2b2a25;    /* cards / panels */
  --graphite-3:#302f29;    /* hover */
  --bone:#F4F0E7;          /* primary text */
  --bone-dim:#c3bfb4;      /* secondary text */
  --muted:#8a887f;         /* captions */
  --amber:#E6A23C;         /* accent */
  --line:#3a3833;          /* hairlines */
  --maxw:1080px;
  --pad:24px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; }
body{
  background:var(--graphite); color:var(--bone);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
a{ color:var(--bone); text-decoration:none; }
a:hover{ color:var(--amber); }
h1,h2,h3{ font-family:'Outfit',sans-serif; font-weight:600; line-height:1.15; margin:0 0 .4em; letter-spacing:.005em; }
h1{ font-size:clamp(34px,5vw,56px); }
h2{ font-size:clamp(26px,3.4vw,38px); }
h3{ font-size:20px; }
p{ margin:0 0 1em; color:var(--bone-dim); }
.lead{ font-size:clamp(17px,2vw,21px); color:var(--bone); max-width:60ch; }
.eyebrow{ font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.16em;
  font-size:12px; color:var(--amber); margin:0 0 14px; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
section{ padding:72px 0; border-top:1px solid var(--line); }
section.hero{ border-top:none; }

/* ---- preview banner ---- */
.banner{ background:rgba(230,162,60,.10); border-bottom:1px solid var(--line);
  color:var(--amber); font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:.05em; text-align:center; padding:7px 12px; }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:20; background:rgba(35,34,30,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav .container{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px; }
.nav .brand{ display:flex; align-items:center; gap:10px; }
.nav .brand img{ height:18px; width:auto; display:block; }
.nav .links{ display:flex; gap:22px; flex-wrap:wrap; }
.nav .links a{ font-size:14px; color:var(--bone-dim); }
.nav .links a:hover, .nav .links a.active{ color:var(--bone); }
.nav .links a.cta{ color:var(--amber); }

/* ---- buttons ---- */
.btn{ display:inline-block; font-family:'Outfit',sans-serif; font-weight:500; font-size:15px;
  padding:12px 22px; border-radius:10px; border:1px solid var(--amber); color:var(--amber);
  cursor:pointer; transition:background .18s,color .18s; background:transparent; }
.btn:hover{ background:var(--amber); color:var(--graphite); }
.btn.solid{ background:var(--amber); color:var(--graphite); }
.btn.solid:hover{ background:#f0b056; }
.btn.ghost{ border-color:var(--line); color:var(--bone-dim); }
.btn.ghost:hover{ border-color:var(--bone); color:var(--bone); background:transparent; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }

/* ---- self-documenting placeholder image boxes ---- */
.ph{ position:relative; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#262520,#262520 12px,#2a2924 12px,#2a2924 24px);
  border:1.5px dashed #5a5648; border-radius:12px; color:var(--muted);
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-align:center; padding:16px;
  overflow:hidden; }
.ph span{ max-width:90%; }
.ph::before{ content:"▣ placeholder"; position:absolute; top:8px; left:12px; font-size:10px;
  letter-spacing:.12em; color:#6f6a5b; text-transform:uppercase; }
.ar-1x1{ aspect-ratio:1/1; }
.ar-3x2{ aspect-ratio:3/2; }
.ar-4x3{ aspect-ratio:4/3; }
.ar-16x9{ aspect-ratio:16/9; }
.ar-2x3{ aspect-ratio:2/3; }
.ar-21x9{ aspect-ratio:21/9; }

/* ---- layout helpers ---- */
.grid{ display:grid; gap:22px; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media(max-width:820px){
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; gap:28px; }
  .nav .links{ gap:14px; }
  section{ padding:52px 0; }
}

/* ---- cards ---- */
.card{ background:var(--graphite-2); border:1px solid var(--line); border-radius:14px;
  padding:24px; transition:border-color .18s,transform .18s; }
.card:hover{ border-color:var(--amber); transform:translateY(-2px); }
.card .ph{ margin-bottom:18px; }
.card h3{ margin-bottom:6px; }
.card p{ font-size:14.5px; margin-bottom:0; }
a.card{ display:block; color:inherit; }

.pill{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amber);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px; }

/* ---- specs table ---- */
.specs{ width:100%; border-collapse:collapse; }
.specs td{ padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top; }
.specs td:first-child{ color:var(--muted); width:42%; font-family:'IBM Plex Mono',monospace; font-size:13px; }

/* ---- draft markers ---- */
.draft{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.14em; color:var(--graphite); background:var(--amber);
  padding:2px 7px; border-radius:4px; text-transform:uppercase; vertical-align:middle; }

/* ---- waitlist ---- */
.waitlist{ display:flex; gap:10px; max-width:440px; flex-wrap:wrap; }
.waitlist input{ flex:1; min-width:200px; background:var(--graphite-2); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; color:var(--bone); font-size:15px; font-family:inherit; }
.waitlist input:focus{ outline:none; border-color:var(--amber); }
.waitlist-msg{ max-width:440px; margin:14px auto 0; color:var(--bone); font-size:15px; line-height:1.5; }
.waitlist-msg strong{ color:var(--amber); }

/* ---- footer ---- */
footer.site{ border-top:1px solid var(--line); padding:48px 0 60px; color:var(--muted); font-size:13px; }
footer.site .frow{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer.site a{ color:var(--bone-dim); }
footer.site .flinks{ display:flex; gap:20px; flex-wrap:wrap; }
footer.site .fnote{ margin-top:24px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#615e55; }

/* ---- real images dropped in to replace .ph placeholders ---- */
img.shot{ display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }

/* ===================== motion / aliveness ===================== */
/* hero text streams in on load (CSS-only → no flash, no JS dependency) */
.hero .eyebrow{ animation:streamIn .55s both; }
.hero h1{ animation:streamIn .6s .12s both; }
.hero .lead{ animation:streamIn .6s .24s both; }
.hero .btn-row{ animation:streamIn .6s .36s both; }
.hero .ph, .hero img.shot{ animation:streamIn .7s .44s both; }
@keyframes streamIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

/* scroll reveal (JS adds .reveal, then .in when in view) */
.reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* placeholder boxes: a slow living sheen so the image-less state feels alive */
.ph::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 32%, rgba(244,240,231,.05) 48%, transparent 64%);
  background-size:220% 100%; animation:phSheen 4.6s ease-in-out infinite; }
@keyframes phSheen{ 0%{background-position:150% 0} 62%,100%{background-position:-50% 0} }

/* page-transition overlay — the "AI reply" typewriter */
#xfade{ position:fixed; inset:0; z-index:1200; background:var(--graphite);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .18s ease; }
#xfade.on{ opacity:1; pointer-events:auto; }
#xfade .xline{ font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--bone-dim); letter-spacing:.02em; }
#xfade .xprompt{ color:var(--amber); }
#xfade .xcaret{ display:inline-block; width:8px; height:1.05em; vertical-align:-2px;
  background:var(--amber); margin-left:4px; animation:xblink 1s steps(1) infinite; }
@keyframes xblink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

@media (prefers-reduced-motion: reduce){
  .hero .eyebrow,.hero h1,.hero .lead,.hero .btn-row,.hero .ph,.hero img.shot{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .ph::after{ animation:none; }
  #xfade{ display:none !important; }
}