/* ============================================================
   All Things Votel: shared design tokens + component classes
   Source of truth for hex values: /assets/tw-config.js
   KEEP IN SYNC with /assets/tw-config.js.
   Page-specific classes (.pick-card, .prose-legal, modal extras)
   stay inline on their pages.
   ============================================================ */

:root {
  --frost: #F6F9FC;
  --paper: #FFFFFF;
  --mist: #E6EEF6;
  --mist-line: #C9D8E8;
  --line: #E3E9F0;
  --ink: #071727;
  --ink-soft: #1B2A3D;
  --ink-mute: #526070;
  --ink-faint: #6B7684;
  --brand: #0796FF;
  --brand-bright: #3DAEFF;
  --brand-soft: #E0F1FF;
  --brand-deep: #0466B3;
  --cyan: #00BDD4;
  --cyan-soft: #D9F6FA;
  --cyan-deep: #00778A;
  --mint: #0BDEB1;
  --mint-soft: #D6FAF2;
  --mint-deep: #067A62;
  --rose: #DC2626;
}

/* ---------- base ---------- */
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--frost); color:var(--ink); font-feature-settings:'ss01','ss02','cv01'; }
::selection { background:var(--mint-soft); color:var(--ink); }
hr.rule { border:none; border-top:1px solid rgba(7,23,39,0.08); margin:0; }
.mono { font-family:'JetBrains Mono',monospace; }

/* ---------- accessibility baseline ---------- */
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
.btn-brand:focus-visible, .btn-ink:focus-visible { outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

/* ---------- heading scale ---------- */
.h-display-1 { font-size:clamp(2.6rem,6vw,5.2rem); }   /* big heroes: home, tools */
.h-display-2 { font-size:clamp(2.4rem,5vw,4.2rem); }   /* secondary h1, dark closers */
.h-display-3 { font-size:clamp(2.2rem,5vw,3.6rem); }   /* utility h1 */
.h-section   { font-size:clamp(2rem,4.5vw,3.4rem); }   /* default section h2 */
.h-section-sm{ font-size:clamp(1.8rem,4vw,3rem); }     /* secondary section h2 */
.h-card      { font-size:clamp(1.6rem,3.5vw,2.4rem); } /* compact panel/card h2 */

/* ---------- texture & backgrounds ---------- */
.grain::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:0.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.band { background:var(--mist); border-top:1px solid var(--mist-line); border-bottom:1px solid var(--mist-line); box-shadow: inset 0 16px 32px -24px rgba(7,23,39,0.22), inset 0 -16px 32px -24px rgba(7,23,39,0.22); }
.dotgrid { background-image: radial-gradient(rgba(7,23,39,0.08) 1px, transparent 1px); background-size: 24px 24px; }
.blob-blue { position:absolute; width:460px; height:460px; background: radial-gradient(circle, rgba(7,150,255,0.22) 0%, rgba(7,150,255,0) 70%); border-radius:999px; filter: blur(40px); pointer-events:none; }
.blob-cyan { position:absolute; width:360px; height:360px; background: radial-gradient(circle, rgba(0,189,212,0.22) 0%, rgba(0,189,212,0) 70%); border-radius:999px; filter: blur(40px); pointer-events:none; }
.blob-mint { position:absolute; width:320px; height:320px; background: radial-gradient(circle, rgba(11,222,177,0.24) 0%, rgba(11,222,177,0) 70%); border-radius:999px; filter: blur(40px); pointer-events:none; }

/* ---------- typography components ---------- */
.display { font-family:'Bricolage Grotesque',system-ui,sans-serif; font-optical-sizing:auto; font-variation-settings:'wdth' 95; letter-spacing:-0.035em; line-height:0.98; }
.scribble { background-image: url("data:image/svg+xml,%3Csvg width='320' height='14' viewBox='0 0 320 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8 C 60 2, 120 12, 180 6 S 280 10, 318 4' stroke='%230BDEB1' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 95%; background-size:100% 14px; padding-bottom:0.15em; }
.highlight-blue { color:var(--brand); }
.ink-link { background-image: linear-gradient(180deg, transparent 60%, rgba(11,222,177,0.35) 60%); background-size:100% 100%; transition: color 300ms ease; }
.ink-link:hover { color:var(--brand-deep); }
.grad-text { background: linear-gradient(90deg, var(--brand) 0%, var(--cyan) 50%, var(--mint) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- cards & chrome ---------- */
.bezel { background: rgba(7,23,39,0.04); padding: 6px; border-radius: 28px; border: 1px solid rgba(7,23,39,0.06); }
.bezel-inner { background:var(--paper); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(7,23,39,0.04); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid rgba(7,23,39,0.08); background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }
.eyebrow .dot { width:6px; height:6px; border-radius:999px; background:var(--mint); box-shadow:0 0 0 3px rgba(11,222,177,0.2); animation: pulseSoft 2.4s ease-in-out infinite; }
.glass-nav { background: rgba(246,249,252,0.72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(7,23,39,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 20px 40px -20px rgba(7,23,39,0.15); }
.votel-pill { display:inline-flex; align-items:center; gap:6px; }
.votel-pill i { width:6px; height:6px; border-radius:999px; display:inline-block; }
.votel-pill i:nth-child(1) { background:var(--brand); }
.votel-pill i:nth-child(2) { background:var(--cyan); }
.votel-pill i:nth-child(3) { background:var(--mint); }

/* ---------- buttons ---------- */
.btn-brand { background: linear-gradient(180deg,var(--brand-bright) 0%,var(--brand) 100%); color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 -1px 0 rgba(0,0,0,0.12) inset, 0 1px 2px rgba(7,23,39,0.08), 0 8px 16px -6px rgba(7,150,255,0.5); transition: transform 600ms cubic-bezier(0.32,0.72,0,1), box-shadow 600ms cubic-bezier(0.32,0.72,0,1); }
.btn-brand:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 -1px 0 rgba(0,0,0,0.12) inset, 0 4px 6px rgba(7,23,39,0.08), 0 14px 22px -6px rgba(7,150,255,0.55); }
.btn-brand:active { transform: translateY(0) scale(0.98); }
.btn-ink { background:var(--ink); color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 8px 16px -6px rgba(7,23,39,0.3); transition: transform 600ms cubic-bezier(0.32,0.72,0,1); }
.btn-ink:hover { transform: translateY(-1px); }
.btn-ink:active { transform: translateY(0) scale(0.98); }
.btn-light { background:var(--paper); color:var(--ink); box-shadow: 0 1px 2px rgba(7,23,39,0.08), 0 8px 16px -6px rgba(7,23,39,0.15); transition: transform 600ms cubic-bezier(0.32,0.72,0,1); }
.btn-light:hover { transform: translateY(-1px); }
.btn-group:hover .btn-icon { transform: translate(2px,-2px) scale(1.05); }
.btn-icon { transition: transform 500ms cubic-bezier(0.32,0.72,0,1); }

/* ---------- FAQ accordion ---------- */
/* <details> is the card so <summary> can be its first child (required for the
   native toggle). Wrap it in .bezel. */
.faq { background:var(--paper); border-radius:22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(7,23,39,0.04); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::marker { content:''; }

/* ---------- forms ---------- */
.field { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:15px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.field::placeholder { color:var(--ink-faint); }
.field:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(7,150,255,0.15); }
.form-msg { font-size:13px; margin-top:8px; min-height:1.2em; }
.form-msg.ok { color:var(--mint-deep); }
.form-msg.err { color:var(--rose); }

/* Keyframe used by .eyebrow .dot; defined here so it doesn't depend on the
   Tailwind CDN emitting it. */
@keyframes pulseSoft { 0%,100% { opacity:0.6; } 50% { opacity:1; } }

/* ---------- reveal animation ---------- */
.reveal { opacity:0; transform: translateY(28px); filter: blur(6px); transition: opacity 900ms cubic-bezier(0.32,0.72,0,1), transform 900ms cubic-bezier(0.32,0.72,0,1), filter 900ms cubic-bezier(0.32,0.72,0,1); }
.reveal.in { opacity:1; transform: translateY(0); filter: blur(0); }