/* ============================================================
   Rentari IQ — marketing design system v2 (PUBLIC_REDESIGN Phase 1)
   ------------------------------------------------------------
   One stylesheet for every public page, in the Rentari.ai
   register (see Rentari.AI/DESIGN.md, ported 2026-07-03):
   - Inter everywhere (iq-typography.css loads after this).
   - Gradient-not-flat: fills carry the brand gradient or a
     subtle same-hue light->dark step, never a bare swatch.
   - Marketing register: white/cream surfaces, dark-hero support
     (body.hero-dark) on #020617 with ambient color blurs.
   Both Jinja shells (base.html; public_base.html extends it)
   link this file; page-specific CSS stays in {% block styles %}.
   ============================================================ */

:root {
  --bp: #8C6CFF; --bl: #6A9EFF; --bt: #48E2D9;
  --brand-deep: #0f766e;
  --grad: linear-gradient(135deg, var(--bp) 0%, var(--bl) 50%, var(--bt) 100%);
  --sl-grad: var(--grad);
  --ink: #0f172a; --slate: #475569; --slate-soft: #64748b;
  --line: #e2e8f0; --bg: #ffffff; --bg-soft: #f8fafc;
  --dark: #020617; --dark-line: #1e293b;
  --good: #12805c; --warn: #b45309; --bad: #b42318;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 30px -12px rgba(15,23,42,.12);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* legacy aliases kept so existing page styles keep resolving */
  --iq-bg: var(--bg); --iq-surface: var(--bg-soft); --iq-border: var(--line);
  --iq-text: var(--ink); --iq-muted: var(--slate); --iq-brand: var(--bp);
  --iq-accent: var(--bp); --iq-brand-2: var(--bt); --iq-good: var(--good);
  --iq-warn: var(--warn); --iq-radius: var(--radius); --iq-shadow: var(--shadow);
  --iq-font: var(--font);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.55; letter-spacing: -.005em; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font); letter-spacing: -.02em; }
.display { font-family: var(--display); letter-spacing: -.022em; font-weight: 800; }
a { color: var(--bp); text-decoration: none; }
a:hover { text-decoration: underline; }
.iq-container, .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* gradient text (animated shimmer; iOS Safari guard keeps it static) */
.grad-text {
  background: var(--grad); background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: gradShimmer 7s ease-in-out infinite;
}
@keyframes gradShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@supports (-webkit-touch-callout: none) { .grad-text { animation: none !important; } }

/* ===================== MOTION (scroll reveal) ===================== */
.js .rv { opacity: 0; transform: translateY(26px); will-change: transform, opacity;
  transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1); transition-delay: var(--d, 0ms); }
.js .rv.rv-l { transform: translateX(-30px); }
.js .rv.rv-r { transform: translateX(30px); }
.js .rv.rv-s { transform: translateY(26px) scale(.96); }
.js .rv.in { opacity: 1; transform: none; }
.rv-failsafe .rv { opacity: 1 !important; transform: none !important; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(72,226,217,.45); } 70% { box-shadow: 0 0 0 7px rgba(72,226,217,0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .grad-text { animation: none !important; }
}

/* ===================== HEADER (solid bar, Rentari.ai register) ============ */
.iq-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.iq-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1120px; margin: 0 auto; padding: 12px 24px;
}
.iq-header.scrolled { box-shadow: 0 10px 26px -20px rgba(15,23,42,.45); }
.iq-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.iq-brand__mark { width: 26px; height: 26px; border-radius: 8px; background: var(--grad); box-shadow: 0 6px 16px -6px rgba(106,158,255,.8); }
.iq-brand__name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.iq-brand__name .iq { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.iq-links { display: flex; align-items: center; gap: 24px; }
.iq-links a { color: var(--slate); font-weight: 600; font-size: 14px; }
.iq-links a:hover { color: var(--ink); text-decoration: none; }
.iq-actions { display: inline-flex; align-items: center; gap: 8px; }
.iq-login { color: var(--ink); font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 999px; }
.iq-login:hover { text-decoration: none; background: var(--bg-soft); }
.iq-signup { display: inline-flex; align-items: center; gap: 7px; background: var(--grad); color: #fff !important;
  font-size: 14px; font-weight: 700; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 24px -12px rgba(106,158,255,.7); transition: transform .15s ease; }
.iq-signup:hover { text-decoration: none; transform: translateY(-1px); }
.iq-signup:active { transform: scale(.96); }

/* Mobile disclosure menu */
.iq-menu-btn {
  display: none; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 8px 10px; cursor: pointer; color: var(--ink);
}
.iq-menu-btn svg { width: 18px; height: 18px; display: block; }
.iq-mobilenav {
  display: none; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  padding: 8px 24px 14px;
}
.iq-mobilenav.open { display: block; }
.iq-mobilenav a { display: block; padding: 11px 2px; font-weight: 600; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--bg-soft); }
.iq-mobilenav a:hover { text-decoration: none; color: var(--bp); }
@media (max-width: 820px) {
  .iq-links { display: none; }
  .iq-menu-btn { display: inline-flex; }
}
@media (max-width: 520px) { .iq-login { display: none; } }

/* Dark-hero variant (landing): nav sits on #020617 until scroll */
body.hero-dark .iq-header {
  background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.86));
  border-bottom-color: var(--dark-line);
}
body.hero-dark .iq-brand__name { color: #f1f5f9; }
body.hero-dark .iq-links a { color: #94a3b8; }
body.hero-dark .iq-links a:hover { color: #f1f5f9; }
body.hero-dark .iq-login { color: #f1f5f9; }
body.hero-dark .iq-login:hover { background: rgba(148,163,184,.14); }
body.hero-dark .iq-menu-btn { background: linear-gradient(180deg, #0b1226, #020617); border-color: var(--dark-line); color: #e2e8f0; }
body.hero-dark .iq-mobilenav { background: linear-gradient(180deg, #0b1226, #020617); border-top-color: var(--dark-line); }
body.hero-dark .iq-mobilenav a { color: #e2e8f0; border-bottom-color: rgba(30,41,59,.6); }

/* ===================== BUTTONS / CARDS / PILLS ===================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 13px; font-weight: 800; font-size: 15px;
  cursor: pointer; border: 1px solid transparent; font-family: inherit;
  transition: transform .15s ease, box-shadow .25s ease, background .15s ease; }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 16px 34px -14px rgba(106,158,255,.6); }
.btn--primary:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 24px 46px -16px rgba(106,158,255,.7); }
.btn--primary:active { transform: scale(.97); }
.btn--ghost { background: linear-gradient(180deg, #ffffff, #f8fafc); border-color: var(--line); color: var(--ink); box-shadow: 0 2px 8px -4px rgba(15,23,42,.1); }
.btn--ghost:hover { text-decoration: none; background: linear-gradient(180deg, #fbfcfe, #f1f5f9); border-color: #cbd5e1; transform: translateY(-1px); }
.btn--dark { background: linear-gradient(180deg, #0b1226, #020617); color: #f1f5f9; border-color: var(--dark-line); }
.btn--dark:hover { text-decoration: none; transform: translateY(-1px); }
.card { background: linear-gradient(180deg, #ffffff, #fcfdfe); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.ring { position: relative; }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(140,108,255,.9), rgba(106,158,255,.5) 45%, rgba(72,226,217,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.muted { color: var(--slate); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate); border: 1px solid var(--line); background: linear-gradient(180deg, #ffffff, #f8fafc); padding: 7px 14px; border-radius: 999px; box-shadow: 0 2px 8px -4px rgba(15,23,42,.12); }
.eyebrow .eb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(72,226,217,.18); animation: livePulse 2.6s ease-out infinite; }

/* Dark-section helpers (Rentari.ai marketing register) */
.dk { background: var(--dark); color: #e2e8f0; position: relative; overflow: hidden; }
.dk h1, .dk h2, .dk h3 { color: #f8fafc; }
.dk .muted { color: #94a3b8; }
.dk-blur { position: absolute; z-index: 0; pointer-events: none; filter: blur(70px); opacity: .5; border-radius: 50%; }
.dk-blur--emerald { background: radial-gradient(closest-side, rgba(16,185,129,.5), transparent 70%); }
.dk-blur--blue { background: radial-gradient(closest-side, rgba(59,130,246,.5), transparent 70%); }
.dk-blur--purple { background: radial-gradient(closest-side, rgba(140,108,255,.45), transparent 70%); }
.dk > .wrap, .dk > .iq-container { position: relative; z-index: 1; }
.dk .eyebrow { background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(2,6,23,.9)); border-color: var(--dark-line); color: #94a3b8; }

/* ===================== MAIN / FOOTER ===================== */
.iq-main { padding: 40px 0 64px; }
.iq-footer { border-top: 1px solid var(--line); color: var(--slate); font-size: 13px; padding: 30px 0 52px; background: linear-gradient(180deg, #ffffff, #f8fafc); }
.iq-footer__inner { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.iq-footer a { color: var(--slate); font-weight: 600; }
.iq-disclaimer { margin-top: 14px; font-size: 12px; color: var(--slate-soft); max-width: 780px; line-height: 1.5; }

/* ===================== SHARED AUTH PAGE STYLES ===================== */
.auth {
  position: relative; min-height: calc(100vh - 260px);
  display: grid; place-items: center; padding: 8px 0 48px;
}
.auth::before {
  content: ""; position: absolute; inset: -10% -20% auto -20%; height: 560px; z-index: -1;
  background:
    radial-gradient(42% 60% at 24% 22%, rgba(140,108,255,.30), transparent 70%),
    radial-gradient(40% 58% at 78% 18%, rgba(72,226,217,.26), transparent 70%),
    radial-gradient(52% 70% at 52% 4%,  rgba(106,158,255,.24), transparent 72%);
  filter: blur(6px); pointer-events: none;
}
.auth-card {
  width: 100%; max-width: 420px; padding: 30px 30px 26px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
@media (max-width: 480px) { .auth-card { padding: 24px 20px 22px; } }

.auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.auth-brand__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad);
  box-shadow: 0 8px 18px -8px rgba(106,158,255,.85); }
.auth-brand__name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

.auth-card h1 { font-size: 26px; line-height: 1.15; margin: 14px 0 6px; }
.auth-lede { color: var(--slate); font-size: 14.5px; margin: 0 0 20px; }

.fld { display: block; margin-top: 14px; }
.fld > label { display: block; font-size: 12px; font-weight: 700; color: var(--slate); margin-bottom: 6px; }
.fld input {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px;
  font-size: 15px; font-family: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fld input:focus { outline: none; border-color: var(--bl); box-shadow: 0 0 0 4px rgba(106,158,255,.16); }
.fld input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(180,35,24,.12); }

.auth-submit { width: 100%; margin-top: 20px; }

.auth-note {
  margin-top: 16px; padding: 12px 14px; border-radius: 11px; font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--slate); display: none;
}
.auth-note.show { display: block; }
.auth-note.is-info { border-color: rgba(106,158,255,.5); background: rgba(106,158,255,.08); color: #24408a; }
.auth-note.is-error { border-color: rgba(180,35,24,.5); background: rgba(180,35,24,.07); color: var(--bad); }
.auth-note a { font-weight: 700; }

.auth-alt { margin-top: 20px; text-align: center; font-size: 14px; color: var(--slate); }
.auth-alt a { font-weight: 700; }

.auth-nojs { margin-top: 16px; padding: 12px 14px; border-radius: 11px; font-size: 13px;
  border: 1px solid rgba(106,158,255,.5); background: rgba(106,158,255,.08); color: #24408a; }
.js .auth-nojs { display: none; }