/* ITBOIS Next — unified style: Apple-ish / Swiss design
   Goal: calm, bright, lots of whitespace, strong typography, minimal borders.
*/

:root{
  --bg: #ffffff;
  --fg: #0b1022;
  --muted: rgba(11,16,34,.70);
  --muted2: rgba(11,16,34,.55);
  --card: #ffffff;
  --border: rgba(11,16,34,.10);
  --border2: rgba(11,16,34,.14);
  --shadow: 0 12px 30px rgba(11,16,34,.08);
  --radius: 16px;
  --radius-sm: 12px;
  --accent: #2f5cff; /* calm blue */
  --accent-fg: #ffffff;
}

html, body{ background: var(--bg) !important; color: var(--fg) !important; }

.page{
  color: var(--fg) !important;
  background: var(--bg) !important;
  min-height: 100vh;
}

/* Layout & type */
.hero{ padding: 5rem 1.5rem 2.25rem !important; }
.section{ padding: 2.75rem 1.5rem !important; }

h1{ letter-spacing: -0.02em; }
h2{ letter-spacing: -0.01em; }
.lead{ opacity: 1 !important; color: var(--muted) !important; max-width: 65ch; }
.eyebrow{ color: var(--muted2) !important; }

.meta, .bullets, .steps{ color: var(--muted) !important; }

/* Cards */
.card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.card p{ color: var(--muted) !important; }

/* Links */
.meta a, .more a{ color: var(--accent) !important; text-decoration: none; }
.meta a:hover, .more a:hover{ text-decoration: underline; }

/* Buttons */
.btn{
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 1px solid rgba(47,92,255,.25) !important;
  border-radius: 14px !important;
  padding: .85rem 1.15rem !important;
}
.btn--ghost{
  background: transparent !important;
  color: var(--fg) !important;
  border: 1px solid var(--border2) !important;
}

.note{ color: var(--muted) !important; }

/* Intake widget — rely on classes */
.rt-box{
  background: var(--card) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.rt-log{
  background: #fafbff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--fg) !important;
}
.rt-form input{
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-sm) !important;
}
.rt-form button{
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 1px solid rgba(47,92,255,.25) !important;
  border-radius: var(--radius-sm) !important;
}

/* Interactions: hover/focus/active consistency */
.btn, .btn--ghost, .rt-form button{
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.btn:hover, .rt-form button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(47,92,255,.18);
}
.btn:active, .rt-form button:active{
  transform: translateY(0);
  box-shadow: none;
}
.btn--ghost:hover{
  background: rgba(47,92,255,.06) !important;
  border-color: rgba(47,92,255,.22) !important;
}
.btn--ghost:active{
  background: rgba(47,92,255,.10) !important;
}

/* Focus ring */
.btn:focus-visible, .btn--ghost:focus-visible, .rt-form button:focus-visible, a:focus-visible, input:focus-visible{
  outline: 3px solid rgba(47,92,255,.25);
  outline-offset: 2px;
}

/* Legal pages: bring them into the same layout */
.legal{
  max-width: 980px;
  margin: 0 auto;
  padding: 3.25rem 1.5rem 5rem;
  color: var(--fg) !important;
  background: var(--bg) !important;
  min-height: 100vh;
}
.legal a{ color: var(--accent) !important; text-decoration: none; }
.legal a:hover{ text-decoration: underline; }

/* Ambient glow + scroll reveal */
body::before{
  content:;
  position: fixed;
  inset: -20vh -20vw;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(47,92,255,.12), transparent 60%),
    radial-gradient(700px 420px at 85% 18%, rgba(111,66,193,.10), transparent 60%),
    radial-gradient(900px 600px at 60% 95%, rgba(47,92,255,.08), transparent 62%);
  filter: blur(8px);
}
.page, main, header, section, footer{ position: relative; z-index: 1; }

.reveal{
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
  transition: opacity 600ms ease, transform 600ms ease, filter 600ms ease;
  will-change: opacity, transform, filter;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform:none; filter:none; transition:none; }
}


/* glossy-buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.1rem; border-radius:14px;
  background: linear-gradient(180deg,#3f6bff 0%, #2f5cff 100%);
  color: #fff; font-weight:700; text-decoration:none;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 20px rgba(47,92,255,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ filter: brightness(1.03); box-shadow: 0 10px 24px rgba(47,92,255,.35), inset 0 1px 0 rgba(255,255,255,.4); }
.btn:active{ transform: translateY(1px); }

.btn--ghost{
  background: rgba(255,255,255,.6);
  color: var(--fg); border: 1px solid var(--border2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(11,16,34,.08);
}