/* Site-level styles for idlis.com — built on top of tokens.css */

/* ─── Reset / base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: var(--text-body-lg);
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-primary);
  background: var(--site-bg, #FAFAF7);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

::selection { background: var(--color-brand-lime); color: var(--color-brand-deep-purple); }

/* ─── Site tokens (extends design system) ───────────────────────── */
:root {
  --site-bg: #FAFAF7;       /* Warm off-white, more editorial than app gray */
  --site-bg-tinted: #F2F0EA; /* Subtle tinted block bg */
  --site-ink: #0D0D0D;
  --site-ink-soft: #595959;
  --site-ink-muted: #999999;
  --site-line: rgba(0,0,0,0.08);
  --site-line-strong: rgba(0,0,0,0.14);

  --site-purple: #3C0179;
  --site-purple-2: #6957DA;
  --site-purple-3: #735EF3;
  --site-lime: #CCFF00;
  --site-pink: #FF4EC3;

  --max-w: 1280px;
  --gutter: 32px;

  /* Display type — tighter, more editorial */
  --type-display-xxl: 300 96px/0.95 "Inter", system-ui, sans-serif;
  --type-display-xl:  300 76px/0.96 "Inter", system-ui, sans-serif;
  --type-display-lg:  300 56px/1.02 "Inter", system-ui, sans-serif;
  --type-display-md:  400 40px/1.05 "Inter", system-ui, sans-serif;
  --type-display-sm:  500 28px/1.15 "Inter", system-ui, sans-serif;

  --type-eyebrow: 500 12px/1 "Inter", system-ui, sans-serif;
  --type-lead: 400 21px/1.45 "Inter", system-ui, sans-serif;
  --type-body: 400 17px/1.55 "Inter", system-ui, sans-serif;
  --type-small: 400 14px/1.4 "Inter", system-ui, sans-serif;
}

/* ─── Color emphasis modes (tweakable) ──────────────────────────── */
body[data-color="mono"]   { --accent-bg: var(--site-ink); --accent-fg: #fff; --hero-bg: var(--site-ink); --hero-fg: #fff; --feature-bg: var(--site-bg-tinted); --feature-fg: var(--site-ink); }
body[data-color="accent"] { --accent-bg: var(--site-purple); --accent-fg: #fff; --hero-bg: var(--site-purple); --hero-fg: #fff; --feature-bg: var(--site-bg-tinted); --feature-fg: var(--site-ink); }
body[data-color="bold"]   { --accent-bg: var(--site-purple); --accent-fg: var(--site-lime); --hero-bg: var(--site-purple); --hero-fg: #fff; --feature-bg: var(--site-lime); --feature-fg: var(--site-purple); }

/* default = accent */
body { --accent-bg: var(--site-purple); --accent-fg: #fff; --hero-bg: var(--site-purple); --hero-fg: #fff; --feature-bg: var(--site-bg-tinted); --feature-fg: var(--site-ink); }

/* ─── Layout ────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-wide {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: 120px 0; position: relative; }
section.tight { padding: 80px 0; }
section.snug  { padding: 56px 0; }

/* ─── Header ────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(250, 250, 247, 0.78);
  border-bottom: 1px solid var(--site-line);
}
.site-header.on-dark {
  background: rgba(20, 0, 40, 0.55);
  border-bottom-color: rgba(255,255,255,0.08);
}
.site-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 18px/1 "Inter";
  letter-spacing: -0.02em;
  color: var(--site-ink);
}
.site-header.on-dark .site-header__logo { color: #fff; }
.site-header__logo img { height: 22px; width: auto; }
.site-nav { display: flex; gap: 4px; flex: 1; justify-content: center; }
.site-nav a {
  font: 500 14px/1 "Inter";
  color: var(--site-ink-soft);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 150ms, background 150ms;
}
.site-nav a:hover { color: var(--site-ink); background: rgba(0,0,0,0.04); }
.site-nav a.is-active { color: var(--site-ink); }
.site-header.on-dark .site-nav a { color: rgba(255,255,255,0.7); }
.site-header.on-dark .site-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.site-header__actions { display: flex; gap: 8px; align-items: center; }

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font: 500 14px/1 "Inter";
  letter-spacing: -0.005em;
  transition: transform 150ms, background 150ms, color 150ms, border-color 150ms;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--site-ink); color: #fff; }
.btn--primary:hover { background: #2a2a2a; }
.btn--lime { background: var(--site-lime); color: var(--site-purple); font-weight: 600; }
.btn--lime:hover { background: #d8ff33; }
.btn--ghost { background: transparent; color: var(--site-ink); border: 1px solid var(--site-line-strong); }
.btn--ghost:hover { background: rgba(0,0,0,0.04); }
.btn--ghost-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }
.btn--lg { height: 52px; padding: 0 22px; font-size: 15px; }
.btn--xl { height: 60px; padding: 0 28px; font-size: 16px; border-radius: 999px; }
.btn--icon-only { width: 44px; padding: 0; }

/* Arrow that nudges on hover */
.btn .arrow { display: inline-block; transition: transform 200ms; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─── Type helpers ──────────────────────────────────────────────── */
.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow.on-dark { color: rgba(255,255,255,0.65); }

.h-display-xxl { font: var(--type-display-xxl); letter-spacing: -0.035em; margin: 0; }
.h-display-xl  { font: var(--type-display-xl);  letter-spacing: -0.03em;  margin: 0; }
.h-display-lg  { font: var(--type-display-lg);  letter-spacing: -0.025em; margin: 0; }
.h-display-md  { font: var(--type-display-md);  letter-spacing: -0.02em;  margin: 0; }
.h-display-sm  { font: var(--type-display-sm);  letter-spacing: -0.015em; margin: 0; }

.lead { font: var(--type-lead); color: var(--site-ink-soft); max-width: 56ch; }
.lead.on-dark { color: rgba(255,255,255,0.78); }

.text-purple { color: var(--site-purple); }
.text-lime { color: var(--site-lime); }
.text-pink { color: var(--site-pink); }
.text-soft { color: var(--site-ink-soft); }

/* ─── Marquee / divider ─────────────────────────────────────────── */
.divider-rule {
  border: 0;
  border-top: 1px solid var(--site-line);
  margin: 0;
}

/* ─── Footer ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--site-ink);
  color: rgba(255,255,255,0.7);
  padding: 96px 0 40px;
  position: relative;
  overflow: hidden;
}
.site-footer__cta {
  background: var(--site-purple);
  color: #fff;
  border-radius: 32px;
  padding: 80px 64px;
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  position: relative;
  overflow: hidden;
}
.site-footer__cta-shape {
  position: absolute;
  right: -80px; bottom: -80px;
  width: 360px; height: 360px;
  background: var(--site-lime);
  border-radius: 50%;
  opacity: 0.18;
  filter: blur(20px);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.site-footer__col h5 {
  font: 500 13px/1 "Inter";
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 18px;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer__col a { color: rgba(255,255,255,0.85); font: 500 14px/1.4 "Inter"; }
.site-footer__col a:hover { color: var(--site-lime); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 13px/1 "Inter";
  color: rgba(255,255,255,0.45);
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
}
.site-footer__brand img { height: 24px; }
.site-footer__brand p { color: rgba(255,255,255,0.55); font: 400 14px/1.5 "Inter"; margin: 0; }

/* ─── Pill / chip ───────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font: 500 12px/1 "Inter";
  background: rgba(0,0,0,0.05);
  color: var(--site-ink-soft);
}
.chip.on-dark { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.chip--lime { background: var(--site-lime); color: var(--site-purple); }
.chip--purple { background: var(--site-purple); color: #fff; }

/* ─── Cards ─────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--site-line);
  border-radius: 20px;
  padding: 32px;
  transition: border-color 200ms, transform 200ms;
}
.card:hover { border-color: var(--site-line-strong); }
.card--feature { padding: 40px; border-radius: 24px; }
.card--dark { background: var(--site-ink); color: #fff; border-color: rgba(255,255,255,0.08); }
.card--purple { background: var(--site-purple); color: #fff; border-color: transparent; }
.card--lime { background: var(--site-lime); color: var(--site-purple); border-color: transparent; }

/* ─── Hide things ───────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Illustration density */
body[data-illos="minimal"] .illo-optional { display: none; }
body[data-illos="hero"] .illo-secondary { display: none; }

/* Anti-FOUC */
.no-fouc { opacity: 0; }
.is-loaded .no-fouc { opacity: 1; transition: opacity 300ms; }