/*
Theme Name: MICO360
Theme URI: https://mico360.com/
Author: Prolens Projects LLC
Author URI: https://mico360.com/
Description: MICO360 — Unified HR, Payroll & Operations corporate theme. Pixel-perfect conversion of the MICO360 marketing site. Fully responsive, schema-ready, Customizer-driven, ACF-compatible, and built with WordPress coding standards.
Version: 2.3.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mico360
Tags: corporate, business, saas, hrms, payroll, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, rtl-language-support, threaded-comments, translation-ready, block-styles, wide-blocks, blog, portfolio

MICO360 WordPress Theme, (C) 2026 Prolens Projects LLC.
MICO360 is distributed under the terms of the GNU GPL.
*/

/* ═══════════════════════════════════════════════
   MICO360 — Marketing Website
   Modern, premium, conversion-focused stylesheet
   ═══════════════════════════════════════════════ */

:root{
  --brand-1: #B01A2E;
  --brand-2: #6E0A1A;
  --gold: #FFB946;
  --gold-2: #FFD36A;
  --ink-1: #0B0F1A;
  --ink-2: #1F2937;
  --ink-3: #4B5563;
  --ink-4: #6B7280;
  --line: #E6E8EE;
  --bg: #ffffff;
  --bg-soft: #F7F7FB;
  --bg-dark: #0B0F1A;
  --bg-dark-2: #141A29;
  --surface: #ffffff;              /* main card/panel bg          */
  --surface-2: #FAFBFD;            /* secondary surface            */
  --surface-elevated: #ffffff;     /* modals, popovers             */
  --nav-glass: rgba(255,255,255,.78);
  --nav-glass-scroll: rgba(255,255,255,.92);
  --input-bg: #ffffff;
  --chip-bg: #FFECEF;
  --shadow-color: 16,24,40;
  --success: #1EA97C;
  --warn: #F59E0B;
  --danger: #EF4444;
  --blue: #3B82F6;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color),.06), 0 1px 3px rgba(var(--shadow-color),.04);
  --shadow-md: 0 8px 24px rgba(var(--shadow-color),.08), 0 2px 6px rgba(var(--shadow-color),.04);
  --shadow-lg: 0 24px 60px rgba(var(--shadow-color),.12), 0 8px 24px rgba(var(--shadow-color),.06);
  --gradient-brand: linear-gradient(135deg, #B01A2E 0%, #E7457A 60%, #FFB946 100%);
  --gradient-soft: linear-gradient(135deg, #FFE6EA 0%, #FFF4DC 100%);
  --container: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}

/* ─────────────────────────────────────────────
   DARK THEME — token overrides
   ───────────────────────────────────────────── */
[data-theme="dark"]{
  --ink-1: #F1F5F9;
  --ink-2: #E2E8F0;
  --ink-3: #B4BECD;
  --ink-4: #8892A8;
  --line: rgba(255,255,255,.08);
  --bg: #0A0D16;
  --bg-soft: #111524;
  --surface: #141A2B;
  --surface-2: #181E30;
  --surface-elevated: #1A2135;
  --nav-glass: rgba(14,19,32,.75);
  --nav-glass-scroll: rgba(14,19,32,.92);
  --input-bg: rgba(255,255,255,.04);
  --chip-bg: rgba(176,26,46,.18);
  --shadow-color: 0,0,0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.3);
  --gradient-soft: linear-gradient(135deg, rgba(176,26,46,.15) 0%, rgba(255,185,70,.12) 100%);
  color-scheme: dark;
}
html{ background:var(--bg); transition:background-color .3s var(--ease); }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink-1);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; letter-spacing:-0.02em; color:var(--ink-1); line-height:1.12; margin:0; }
h1{ font-size:clamp(2.25rem, 5vw, 4rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); }
h3{ font-size:1.2rem; }
p{ margin:0; color:var(--ink-3); }
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid rgba(176,26,46,.35); outline-offset:2px; border-radius:6px;
}
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- utility ---------- */
.gradient-text{
  background:var(--gradient-brand); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.gradient-text--light{
  background:linear-gradient(135deg,#FFD36A 0%,#FFE8B5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:#FFECEF; color:var(--brand-1);
  padding:6px 14px; border-radius:999px;
  font-size:.8rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  border:1px solid rgba(176,26,46,.15);
}
.eyebrow--center{ margin-inline:auto; }
.eyebrow--light{ background:rgba(255,179,70,.12); color:var(--gold-2); border-color:rgba(255,179,70,.25); }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-1); box-shadow:0 0 0 4px rgba(176,26,46,.18); }
.eyebrow--light .dot{ background:var(--gold-2); box-shadow:0 0 0 4px rgba(255,211,106,.18); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; font-weight:600; font-size:.95rem;
  border-radius:12px; transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space:nowrap; cursor:pointer;
}
.btn--lg{ padding:15px 26px; font-size:1rem; border-radius:14px; }
.btn--block{ width:100%; }
.btn--primary{
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 10px 24px rgba(176,26,46,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(176,26,46,.38); }
.btn--ghost{
  background:#fff; color:var(--ink-1);
  border:1px solid var(--line);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:var(--ink-1); box-shadow:var(--shadow-sm); }

/* ---------- announcement ---------- */
.announce{
  background:linear-gradient(90deg,#0B0F1A 0%,#1F2437 100%);
  color:#fff; font-size:.88rem;
}
.announce__row{ display:flex; align-items:center; gap:12px; padding:10px 24px; justify-content:center; flex-wrap:wrap; }
.announce__pill{
  background:var(--gradient-brand); color:#fff; padding:2px 10px;
  font-weight:700; font-size:.72rem; letter-spacing:.08em; border-radius:999px;
}
.announce__text{ opacity:.9; }
.announce__link{ color:var(--gold-2); font-weight:600; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-scrolled{ border-color:var(--line); background:rgba(255,255,255,.92); }
.nav__row{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-0.01em; font-size:1.2rem; color:var(--ink-1); }
.brand__name span{ color:var(--brand-1); }
.brand--light{ color:#fff; }
.brand--light .brand__name span{ color:var(--gold-2); }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{ color:var(--ink-3); font-weight:500; font-size:.95rem; position:relative; transition:color .2s var(--ease); }
.nav__links a::after{
  content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%) scaleX(0);
  width:22px; height:2px; background:var(--gradient-brand); border-radius:2px;
  transition:transform .25s var(--ease);
}
.nav__links a:hover{ color:var(--ink-1); }
.nav__links a:hover::after{ transform:translateX(-50%) scaleX(1); }
.nav__cta{ display:flex; gap:10px; }
.nav__burger{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:#fff; flex-direction:column; justify-content:center; align-items:center; gap:4px;
}
.nav__burger span{ width:18px; height:2px; background:var(--ink-1); border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.nav__mobile{ display:none; flex-direction:column; gap:14px; padding:18px 24px 24px; border-top:1px solid var(--line); background:#fff; }
.nav__mobile.is-open{ display:flex; }
.nav__mobile a{ color:var(--ink-2); font-weight:500; padding:4px 0; }
.nav__mobile .btn{ margin-top:4px; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:72px 0 100px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; }
.blob--a{ width:520px; height:520px; background:radial-gradient(circle at 30% 30%,#FFB9C5,#FFE6EA 60%,transparent 70%); top:-140px; left:-140px; }
.blob--b{ width:440px; height:440px; background:radial-gradient(circle at 60% 60%,#FFE2B5,#FFF5E1 60%,transparent 70%); top:120px; right:-160px; }
.grid{
  position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(11,15,26,.045) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(11,15,26,.045) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 40%, #000 40%, transparent 80%);
}
.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center;
}
.hero__title{ margin-top:20px; }
.hero__sub{ margin:22px 0 28px; font-size:1.1rem; color:var(--ink-3); max-width:560px; }
.hero__form{
  display:flex; gap:8px; padding:8px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-sm); max-width:520px;
}
.hero__form input{
  flex:1; border:0; padding:12px 14px; font-size:1rem; outline:none; background:transparent; color:var(--ink-1);
}
.hero__form input::placeholder{ color:var(--ink-4); }
.hero__micro{ margin-top:14px; font-size:.88rem; color:var(--ink-4); display:flex; align-items:center; gap:8px; }

.hero__logos{ margin-top:42px; }
.hero__logos > span{ display:block; font-size:.82rem; font-weight:600; color:var(--ink-4); letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.hero__logos-row{ display:flex; flex-wrap:wrap; gap:20px 28px; align-items:center; }
.logo-chip{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:.06em;
  color:#8a93a6; padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.4);
  border:1px dashed var(--line);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.logo-chip:hover{ color:var(--ink-1); transform:translateY(-2px); }

/* Hero visual / mock */
.hero__visual{ position:relative; }
.mock{
  position:relative; background:#fff; border-radius:var(--radius-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition:transform .6s var(--ease);
}
.hero__visual:hover .mock{ transform:perspective(1400px) rotateY(0deg) rotateX(0deg); }
.mock__bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:#fafbfd; }
.mock__bar span{ width:10px; height:10px; border-radius:50%; background:#E5E7EB; }
.mock__bar span:nth-child(1){ background:#FF6B6B; }
.mock__bar span:nth-child(2){ background:#FFC542; }
.mock__bar span:nth-child(3){ background:#2ECC71; }
.mock__bar em{ margin-left:auto; font-style:normal; color:var(--ink-4); font-size:.8rem; }
.mock__body{ display:grid; grid-template-columns:180px 1fr; min-height:420px; }
.mock__side{ background:linear-gradient(180deg,#FBFCFE,#F2F4F9); padding:16px 12px; border-right:1px solid var(--line); }
.mock__logo{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1rem; color:var(--brand-1); padding:4px 10px; margin-bottom:12px; }
.mock__logo span{
  display:inline-flex; width:22px; height:22px; background:var(--gradient-brand); color:#fff;
  border-radius:6px; align-items:center; justify-content:center; font-size:.8rem; margin-right:4px;
}
.mock__side ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.mock__side li{ padding:8px 10px; border-radius:8px; font-size:.82rem; color:var(--ink-3); cursor:default; }
.mock__side li.active{ background:#fff; color:var(--brand-1); box-shadow:var(--shadow-sm); font-weight:600; }
.mock__main{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.mock__heading{ display:flex; justify-content:space-between; align-items:flex-start; }
.mock__heading small{ display:block; font-size:.75rem; color:var(--ink-4); }
.mock__heading strong{ font-size:1rem; }
.mock__pill{ background:#E8FAF1; color:#0f9960; font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.mock__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; position:relative; }
.kpi b{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.1rem; color:var(--ink-1); }
.kpi span{ display:block; font-size:.72rem; color:var(--ink-4); margin-top:2px; }
.kpi i{ position:absolute; top:10px; right:10px; font-style:normal; font-size:.7rem; font-weight:700; }
.kpi .up{ color:var(--success); }
.kpi .down{ color:var(--danger); }

.mock__charts{ display:grid; grid-template-columns:1.5fr 1fr; gap:10px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.card__hd{ display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--ink-2); font-weight:600; margin-bottom:6px; }
.card__hd em{ font-style:normal; color:var(--ink-4); font-weight:500; }
.chart{ width:100%; height:80px; }
.bars{ display:flex; align-items:flex-end; gap:6px; height:80px; }
.bars span{ flex:1; height:var(--h); background:linear-gradient(180deg, #B01A2E, #E7457A); border-radius:4px 4px 0 0; opacity:.9; }
.bars span:nth-child(even){ background:linear-gradient(180deg,#FFB946,#FFD36A); }

.mock__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.row-card{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px;
  display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-2);
}
.row-card span{ margin-left:auto; color:var(--ink-4); font-size:.72rem; }
.row-card i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-g{ background:var(--success); } .dot-y{ background:var(--warn); } .dot-b{ background:var(--blue); }

.float{
  position:absolute; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:10px; font-size:.82rem;
  animation:float 4s ease-in-out infinite;
}
.float b{ display:block; font-weight:700; color:var(--ink-1); }
.float span{ display:block; color:var(--ink-4); font-size:.72rem; }
.float__dot{ width:10px; height:10px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px rgba(30,169,124,.18); }
.float__avatar{
  width:34px; height:34px; border-radius:10px; background:var(--gradient-brand);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:.78rem;
}
.float--a{ top:-20px; left:-30px; }
.float--b{ bottom:10px; right:-20px; animation-delay:-2s; }

@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---------- stats ---------- */
.stats{ padding:40px 0 70px; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat{ padding:20px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .3s var(--ease); }
.stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat b{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ color:var(--ink-4); font-size:.92rem; font-weight:500; }

/* ---------- sections ---------- */
.section{ padding:96px 0; position:relative; }
.section--soft{ background:var(--bg-soft); }
.section--dark{
  background:linear-gradient(180deg,#0B0F1A 0%,#141A29 100%);
  color:#fff;
}
.section--dark h2,.section--dark h3{ color:#fff; }
.section--dark p{ color:#A3ADC2; }

.sec-head{ text-align:center; max-width:760px; margin:0 auto 56px; }
.sec-head--light *{ color:#fff; }
.sec-head--light p{ color:#A3ADC2; }
.sec-head--left{ text-align:left; margin:0; }
.sec-head h2{ margin:16px 0 12px; }
.sec-head p{ font-size:1.05rem; }

/* ---------- features grid ---------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position:relative; overflow:hidden;
}
.feature::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, transparent, rgba(176,26,46,.2), transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s var(--ease);
}
.feature:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.feature:hover::before{ opacity:1; }
.feature__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:18px; transition:transform .3s var(--ease);
}
.feature:hover .feature__icon{ transform:rotate(-6deg) scale(1.05); }
.feature__icon svg{ width:26px; height:26px; stroke:currentColor; }
.feature__icon--red{ background:#FFE6EA; color:var(--brand-1); }
.feature__icon--amber{ background:#FFF3DC; color:#C47300; }
.feature__icon--blue{ background:#E3EEFF; color:#1E5FD6; }
.feature__icon--green{ background:#E1F7EC; color:#0F9960; }
.feature__icon--purple{ background:#EDE4FF; color:#6A3DD8; }
.feature__icon--pink{ background:#FFE3F0; color:#C21E5B; }
.feature h3{ font-size:1.25rem; margin-bottom:8px; }
.feature p{ font-size:.95rem; margin-bottom:14px; }
.feature ul{ list-style:none; padding:0; margin:0; }
.feature ul li{
  font-size:.88rem; color:var(--ink-3); padding:6px 0; display:flex; align-items:center; gap:8px;
}
.feature ul li::before{
  content:""; width:16px; height:16px; border-radius:50%;
  background:var(--gradient-brand); flex-shrink:0;
  background-image:
    linear-gradient(135deg,#B01A2E,#FFB946),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size:cover;
}

/* ---------- modules grid ---------- */
.modules{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px;
}
.mod{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:4px;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.mod i{ font-size:1.6rem; font-style:normal; margin-bottom:8px; }
.mod b{ font-size:.98rem; font-weight:700; color:#fff; font-family:'Plus Jakarta Sans',sans-serif; }
.mod span{ font-size:.82rem; color:#96A0B7; }
.mod:hover{ transform:translateY(-4px); background:rgba(255,255,255,.08); border-color:rgba(255,179,70,.4); }
.mod--cta{ background:var(--gradient-brand); border-color:transparent; }
.mod--cta span,.mod--cta b{ color:#fff; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.steps::before{
  content:""; position:absolute; top:60px; left:12%; right:12%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(176,26,46,.35), transparent);
}
.step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; text-align:left; box-shadow:var(--shadow-sm); position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.step__num{
  width:56px; height:56px; border-radius:16px; background:var(--gradient-brand);
  color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.2rem;
  display:grid; place-items:center; margin-bottom:16px;
  box-shadow:0 10px 24px rgba(176,26,46,.28);
}
.step h3{ font-size:1.3rem; margin-bottom:8px; }
.step p{ font-size:.95rem; }

/* ---------- solutions ---------- */
.solutions{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sol{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sol:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.sol__ico{ font-size:2rem; margin-bottom:12px; }
.sol h3{ font-size:1.15rem; margin-bottom:8px; }
.sol p{ font-size:.92rem; margin-bottom:14px; }
.sol a{ font-weight:600; color:var(--brand-1); font-size:.92rem; transition:gap .2s var(--ease); }
.sol a:hover{ letter-spacing:.02em; }

/* ---------- benefits ---------- */
.benefits{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
.benefits__copy h2{ margin:16px 0 18px; }
.benefits__copy .lead{ font-size:1.1rem; margin-bottom:24px; }
.check-list{ list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:12px; }
.check-list li{ display:flex; align-items:center; gap:12px; font-size:1rem; color:var(--ink-2); font-weight:500; }
.check-list svg{ width:22px; height:22px; padding:4px; background:#E1F7EC; border-radius:50%; color:var(--success); flex-shrink:0; }

.benefits__visual{ position:relative; min-height:440px; }
.metric-card{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:18px; box-shadow:var(--shadow-md); transition:transform .3s var(--ease);
}
.metric-card:hover{ transform:translateY(-4px); }
.metric-card small{ display:block; font-size:.78rem; color:var(--ink-4); text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin-bottom:8px; }
.metric-card__v{ display:flex; align-items:baseline; gap:10px; }
.metric-card__v b{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:2rem; background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.metric-card__v em{ font-style:normal; font-weight:700; font-size:.85rem; }
.metric-card__v .down-good{ color:var(--success); }
.metric-card__v .up{ color:var(--success); }
.spark{ display:flex; gap:4px; align-items:flex-end; height:40px; margin-top:10px; }
.spark span{ flex:1; background:var(--gradient-brand); border-radius:2px; height:var(--h); opacity:.8; }
.bar{ margin-top:10px; height:8px; background:#F1F2F7; border-radius:4px; overflow:hidden; }
.bar span{ display:block; height:100%; width:var(--w); background:var(--gradient-brand); border-radius:4px; }
.metric-card--1{ top:0; left:0; width:280px; animation:float 5s ease-in-out infinite; }
.metric-card--2{ top:110px; right:0; width:260px; animation:float 5s ease-in-out -1.5s infinite; }
.metric-card--3{ bottom:0; left:60px; width:300px; animation:float 5s ease-in-out -3s infinite; }
.metric-card p{ font-size:.85rem; margin-top:8px; color:var(--ink-4); }

/* ---------- testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; margin:0; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column; gap:14px;
}
.quote:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stars{ color:var(--gold); font-size:1rem; letter-spacing:.1em; }
.quote blockquote{ margin:0; font-size:1rem; color:var(--ink-2); font-weight:500; line-height:1.55; }
.quote figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.avatar{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:.85rem; }
.avatar--1{ background:linear-gradient(135deg,#B01A2E,#E7457A); }
.avatar--2{ background:linear-gradient(135deg,#1E5FD6,#5FA8FF); }
.avatar--3{ background:linear-gradient(135deg,#0F9960,#4FC997); }
.quote figcaption b{ display:block; font-size:.92rem; color:var(--ink-1); }
.quote figcaption em{ display:block; font-size:.8rem; color:var(--ink-4); font-style:normal; }

/* ---------- pricing ---------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; display:flex; flex-direction:column; gap:12px; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.plan h3{ font-size:1.3rem; }
.plan p{ font-size:.92rem; }
.plan .price{ display:flex; align-items:flex-end; gap:4px; margin:10px 0 4px; font-family:'Plus Jakarta Sans',sans-serif; }
.plan .price span{ font-size:1.1rem; font-weight:700; color:var(--ink-3); }
.plan .price b{ font-size:3rem; font-weight:800; background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.plan .price em{ font-style:normal; color:var(--ink-4); font-size:.9rem; font-weight:500; padding-bottom:6px; }
.plan ul{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:10px; }
.plan ul li{ display:flex; align-items:center; gap:8px; font-size:.92rem; color:var(--ink-2); }
.plan ul li::before{
  content:""; width:16px; height:16px; border-radius:50%; flex-shrink:0;
  background:#E1F7EC
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F9960' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
    center / 60% no-repeat;
}
.plan--best{
  background:linear-gradient(180deg,#1A0008 0%, #0B0F1A 100%); color:#fff;
  border-color:transparent; transform:scale(1.03);
  box-shadow:0 40px 80px rgba(176,26,46,.22);
}
.plan--best:hover{ transform:scale(1.03) translateY(-4px); }
.plan--best h3,.plan--best .price b{ color:#fff; background:none; -webkit-text-fill-color:initial; }
.plan--best .price b{ background:linear-gradient(135deg,#FFD36A,#FFB946); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.plan--best .price span,.plan--best .price em,.plan--best p{ color:#C5CAD7; }
.plan--best ul li{ color:#E6E8EE; }
.plan--best ul li::before{
  background:#4FC997
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
    center / 60% no-repeat;
}
.plan__tag{
  position:absolute; top:-12px; right:24px; background:var(--gradient-brand);
  color:#fff; padding:6px 12px; border-radius:999px; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- FAQ ---------- */
.faq-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:flex-start; }
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.faq details[open]{ box-shadow:var(--shadow-sm); border-color:#d3d5de; }
.faq summary{
  list-style:none; cursor:pointer; font-weight:700; font-size:1rem; color:var(--ink-1);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:
    linear-gradient(90deg, currentColor 45%, transparent 45%) center/12px 2px no-repeat,
    linear-gradient(0deg, currentColor 45%, transparent 45%) center/2px 12px no-repeat,
    #F1F2F7;
  color:var(--ink-1);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin-top:10px; font-size:.95rem; }

/* ---------- final CTA ---------- */
.cta{ padding:60px 0 120px; }
.cta__box{
  position:relative; border-radius:28px; padding:56px 48px; overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,179,70,.22), transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(231,69,122,.25), transparent 50%),
    linear-gradient(135deg, #1a0008 0%, #0B0F1A 100%);
  box-shadow:var(--shadow-lg);
}
.cta__box h2{ color:#fff; max-width:700px; }
.cta__box p{ color:#C5CAD7; max-width:640px; margin:18px 0 28px; font-size:1.08rem; }
.cta__form{
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; margin-bottom:16px;
}
.cta__form input{
  padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:#fff; font-size:.95rem;
}
.cta__form input::placeholder{ color:#8892A8; }
.cta__form input:focus{ outline:none; border-color:var(--gold-2); background:rgba(255,255,255,.1); }
.cta__trust{ display:flex; gap:20px; flex-wrap:wrap; color:#9FA8BE; font-size:.88rem; font-weight:500; }

/* ---------- footer ---------- */
.footer{ background:#0B0F1A; color:#9FA8BE; padding:64px 0 28px; }
.footer__grid{
  display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:32px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width: 1100px){
  .footer__grid{ grid-template-columns:1.4fr repeat(3,1fr); }
}
@media (max-width: 780px){
  .footer__grid{ grid-template-columns:repeat(2,1fr) !important; }
}
.footer h4{ color:#fff; font-size:.9rem; margin:0 0 16px; letter-spacing:.05em; text-transform:uppercase; }
.footer a{ display:block; font-size:.92rem; color:#9FA8BE; margin-bottom:10px; transition:color .2s var(--ease); }
.footer a:hover{ color:#fff; }
.footer__brand p{ color:#8892A8; font-size:.92rem; margin:14px 0 18px; }
.socials{ display:flex; gap:10px; }
.socials a{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  margin:0; font-weight:700; font-size:.92rem;
}
.socials a:hover{ background:var(--gradient-brand); border-color:transparent; color:#fff; }

.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:20px; font-size:.85rem; flex-wrap:wrap; gap:12px; }
.footer__legal{ display:flex; gap:20px; }
.footer__legal a{ margin:0; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal--right{ transform:translateX(40px); }
.reveal--right.is-visible{ transform:translateX(0); }

/* stagger children in grid sections */
.features .reveal:nth-child(1){ transition-delay:.05s }
.features .reveal:nth-child(2){ transition-delay:.1s }
.features .reveal:nth-child(3){ transition-delay:.15s }
.features .reveal:nth-child(4){ transition-delay:.2s }
.features .reveal:nth-child(5){ transition-delay:.25s }
.features .reveal:nth-child(6){ transition-delay:.3s }
.modules .reveal:nth-child(n){ transition-delay:calc(var(--i,0) * .03s); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 1024px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ max-width:620px; margin:30px auto 0; }
  .features{ grid-template-columns:repeat(2,1fr); }
  .solutions{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
  .pricing{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .plan--best{ transform:none; }
  .plan--best:hover{ transform:translateY(-4px); }
  .benefits{ grid-template-columns:1fr; gap:40px; }
  .faq-wrap{ grid-template-columns:1fr; gap:30px; }
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .steps::before{ display:none; }
}

@media (max-width: 780px){
  .announce__row{ text-align:center; }
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero{ padding:40px 0 70px; }
  .hero__form{ flex-direction:column; padding:10px; }
  .hero__form .btn{ width:100%; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:64px 0; }
  .features{ grid-template-columns:1fr; }
  .solutions{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .cta__box{ padding:40px 24px; border-radius:24px; }
  .cta__form{ grid-template-columns:1fr; }
  .mock__kpis{ grid-template-columns:repeat(2,1fr); }
  .mock__charts{ grid-template-columns:1fr; }
  .mock__row{ grid-template-columns:1fr; }
  .mock__body{ grid-template-columns:1fr; }
  .mock__side{ display:none; }
  .metric-card--1,.metric-card--2,.metric-card--3{ position:relative; top:auto; left:auto; right:auto; bottom:auto; width:100%; margin-bottom:14px; }
  .benefits__visual{ min-height:auto; }
  .float{ display:none; }
}

@media (max-width:420px){
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .cta__trust{ flex-direction:column; gap:6px; }
}

/* ---------- motion-safe ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ═══════════════════════════════════════════════
   V2.1  —  AMAZING DESIGN UPGRADES
   ═══════════════════════════════════════════════ */

/* Scroll-progress bar at very top */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; z-index:200;
  background:linear-gradient(90deg, var(--brand-1), #E7457A, var(--gold));
  width:var(--sp, 0%);
  transition:width .12s linear; pointer-events:none;
}
[data-theme="dark"] .scroll-progress{ filter:saturate(1.2) brightness(1.1); }

/* Aurora animated mesh */
.aurora{
  position:absolute; inset:-20% -10%; pointer-events:none; z-index:0;
  filter:blur(60px) saturate(140%); opacity:.85;
}
.aurora::before, .aurora::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(176,26,46,.55) 0%, transparent 60%),
    radial-gradient(35% 45% at 80% 20%, rgba(255,179,70,.45) 0%, transparent 60%),
    radial-gradient(45% 55% at 60% 80%, rgba(231,69,122,.45) 0%, transparent 60%),
    radial-gradient(35% 45% at 10% 80%, rgba(255,211,106,.35) 0%, transparent 60%);
  animation:auroraFlow 20s ease-in-out infinite alternate;
}
.aurora::after{
  animation-duration:28s; animation-direction:alternate-reverse; mix-blend-mode:screen;
  background:
    radial-gradient(30% 40% at 70% 40%, rgba(255,255,255,.4) 0%, transparent 60%),
    radial-gradient(40% 50% at 30% 70%, rgba(231,69,122,.35) 0%, transparent 60%);
}
@keyframes auroraFlow{
  0%   { transform:translate(0,0) scale(1); }
  33%  { transform:translate(40px,-30px) scale(1.05); }
  66%  { transform:translate(-30px,40px) scale(.98); }
  100% { transform:translate(20px,20px) scale(1.04); }
}
[data-theme="dark"] .aurora{ opacity:.55; filter:blur(80px) saturate(180%); }
[data-theme="dark"] .aurora::after{ mix-blend-mode:overlay; }

/* Animated rainbow gradient text */
.gradient-text-anim{
  background:linear-gradient(90deg,#B01A2E,#E7457A,#FFB946,#E7457A,#B01A2E);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 8s linear infinite;
}
@keyframes gradShift{ to{ background-position:300% 0; } }

/* Word-reveal */
.word-reveal{ display:inline-block; overflow:hidden; vertical-align:top; }
.word-reveal > span{
  display:inline-block; animation:wordRise .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes wordRise{
  from{ transform:translateY(110%); opacity:0; }
  to  { transform:translateY(0); opacity:1; }
}

/* ═══════════════════════════════════════════════
   TRUST CLOUD  —  redesigned "trusted by" slider
   ═══════════════════════════════════════════════ */
.trust-cloud{
  position:relative; padding:80px 0; overflow:hidden;
  background:var(--bg);
}
.trust-cloud__bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(700px 280px at 20% 50%, rgba(176,26,46,.08), transparent 60%),
    radial-gradient(800px 300px at 90% 50%, rgba(255,179,70,.07), transparent 60%);
}
.trust-cloud__wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.6fr; gap:48px; align-items:center;
}
.trust-cloud__intro{ padding-right:12px; }
.trust-cloud__label{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:var(--chip-bg); color:var(--brand-1);
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(176,26,46,.18);
}
.trust-cloud__label .live-dot{
  width:6px; height:6px; border-radius:50%; background:#1EA97C;
  box-shadow:0 0 0 0 rgba(30,169,124,.6);
  animation:pulseDot 1.8s ease-out infinite;
}
.trust-cloud__count{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:clamp(3.5rem, 7vw, 5.5rem); line-height:1;
  background:linear-gradient(135deg, #B01A2E, #E7457A, #FFB946);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:14px 0 8px;
}
.trust-cloud__count sup{ font-size:.4em; vertical-align:top; line-height:1; }
.trust-cloud__sub{
  color:var(--ink-3); font-size:1rem; line-height:1.55; max-width:380px;
  margin-bottom:18px;
}
.trust-cloud__link{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color:var(--brand-1); font-size:.92rem;
  transition:gap .25s var(--ease);
}
.trust-cloud__link:hover{ gap:10px; }

.trust-cloud__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}

.trust-tile{
  position:relative;
  height:118px; padding:14px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  text-decoration:none; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease), background .3s var(--ease);
  animation:trustFloat 6s ease-in-out infinite;
  overflow:hidden;
}
.trust-tile::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(176,26,46,.4), rgba(255,179,70,.4));
  opacity:0; transition:opacity .35s var(--ease); z-index:-1;
}
.trust-tile::after{
  content:""; position:absolute; inset:1px; border-radius:17px;
  background:var(--surface); z-index:-1;
}
.trust-tile svg{
  height:30px; width:auto; color:var(--ink-3);
  transition:color .3s var(--ease), transform .35s var(--ease);
}
.trust-tile__tag{
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-4); transition:color .3s var(--ease);
}
.trust-tile:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-lg);
  border-color:transparent;
  animation-play-state:paused;
}
.trust-tile:hover::before{ opacity:1; }
.trust-tile:hover svg{ color:var(--brand-1); transform:scale(1.06); }
.trust-tile:hover .trust-tile__tag{ color:var(--brand-1); }

/* Staggered float so the grid breathes */
.trust-tile:nth-child(1){ animation-delay: 0s;    }
.trust-tile:nth-child(2){ animation-delay: -.75s; }
.trust-tile:nth-child(3){ animation-delay: -1.5s; }
.trust-tile:nth-child(4){ animation-delay: -2.25s;}
.trust-tile:nth-child(5){ animation-delay: -3s;   }
.trust-tile:nth-child(6){ animation-delay: -3.75s;}
.trust-tile:nth-child(7){ animation-delay: -4.5s; }
.trust-tile:nth-child(8){ animation-delay: -5.25s;}

@keyframes trustFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-8px); }
}

/* Dark theme */
[data-theme="dark"] .trust-cloud__bg{
  background:
    radial-gradient(700px 280px at 20% 50%, rgba(176,26,46,.18), transparent 60%),
    radial-gradient(800px 300px at 90% 50%, rgba(255,179,70,.12), transparent 60%);
}
[data-theme="dark"] .trust-tile{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .trust-tile::after{ background:var(--surface); }
[data-theme="dark"] .trust-tile svg{ color:var(--ink-3); }

/* Responsive */
@media (max-width:980px){
  .trust-cloud__wrap{ grid-template-columns:1fr; gap:32px; }
  .trust-cloud__grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:640px){
  .trust-cloud{ padding:60px 0; }
  .trust-cloud__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .trust-tile{ height:96px; }
  .trust-tile svg{ height:24px; }
}

/* Marquee logos — V2.2.1 (slower, softer mask, taller logos, seamless) */
.marquee{
  position:relative; overflow:hidden; padding:18px 0;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.marquee__track{
  display:flex; align-items:center; width:max-content;
  animation:marqueeRoll 60s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track > *{
  flex-shrink:0; margin-right:72px;
  display:inline-flex; align-items:center;
}
.marquee__track svg{ height:34px; width:auto; color:var(--ink-3); }
@keyframes marqueeRoll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
[data-theme="dark"] .marquee__track svg{ color:var(--ink-4); opacity:.9; }

/* Magnetic & ripple */
.magnetic{ transition:transform .25s var(--ease); will-change:transform; }
.btn--primary{ overflow:hidden; }
.btn--primary::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
    rgba(255,255,255,.45) 0%, transparent 30%);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.btn--primary:hover::after{ opacity:1; }

/* Spotlight cursor on cards */
.spotlight{ position:relative; isolation:isolate; }
.spotlight::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
    rgba(255,179,70,.18), transparent 45%);
  opacity:0; transition:opacity .25s var(--ease); pointer-events:none; z-index:1;
}
.spotlight:hover::before{ opacity:1; }
.spotlight > *{ position:relative; z-index:2; }
[data-theme="dark"] .spotlight::before{
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
    rgba(255,179,70,.22), transparent 45%);
}

/* Bento grid */
.bento{
  display:grid; gap:18px;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(170px,auto);
}
.bento__tile{
  background:var(--surface); border:1px solid var(--line); border-radius:24px;
  padding:28px; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .3s var(--ease);
}
.bento__tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.bento__tile h3{ font-size:1.2rem; margin:14px 0 8px; }
.bento__tile p{ font-size:.92rem; color:var(--ink-3); line-height:1.5; }
.bento__tile--lg{ grid-column:span 4; grid-row:span 2; }
.bento__tile--md{ grid-column:span 3; }
.bento__tile--sm{ grid-column:span 2; }
.bento__tile--tall{ grid-column:span 2; grid-row:span 2; }
.bento__tile--wide{ grid-column:span 4; }
.bento__tile--accent{
  background:linear-gradient(135deg,#1a0008 0%, #0B0F1A 100%);
  color:#fff; border-color:transparent;
}
.bento__tile--accent::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,179,70,.25), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(231,69,122,.28), transparent 50%);
  pointer-events:none;
}
.bento__tile--accent > *{ position:relative; z-index:1; }
.bento__tile--accent h3, .bento__tile--accent p{ color:#fff; }
.bento__tile--accent p{ color:#C5CAD7; }
.bento__big-number{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:clamp(3rem, 6vw, 5.5rem); line-height:1;
  background:linear-gradient(135deg,#FFD36A,#FFB946,#E7457A);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:8px;
}
@media (max-width:980px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento__tile--lg,.bento__tile--md,.bento__tile--sm,
  .bento__tile--tall,.bento__tile--wide{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; }
  .bento__tile{ grid-column:span 1 !important; }
}

/* Wavy section dividers */
.divider-wave{ display:block; width:100%; height:70px; margin-top:-1px; position:relative; }
.divider-wave svg{ width:100%; height:100%; display:block; }
.divider-wave path{ fill:var(--bg-soft); }
.section--soft + .divider-wave path,
.divider-wave--up path{ fill:var(--bg); }

/* Shimmer pill */
.pill-shimmer{
  position:relative; display:inline-flex; gap:8px; align-items:center;
  padding:6px 14px; border-radius:999px;
  background:linear-gradient(135deg, rgba(176,26,46,.15), rgba(255,179,70,.18));
  border:1px solid rgba(176,26,46,.3);
  font-size:.78rem; font-weight:700; color:var(--brand-1);
  letter-spacing:.06em; text-transform:uppercase; overflow:hidden;
}
.pill-shimmer::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
  transform:translateX(-100%); animation:shimmerSweep 3.5s ease-in-out infinite;
}
@keyframes shimmerSweep{ to{ transform:translateX(100%); } }
[data-theme="dark"] .pill-shimmer{ color:var(--gold-2); }
[data-theme="dark"] .pill-shimmer::before{
  background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.15) 50%, transparent 75%);
}

/* Hero KPI row */
.hero__kpi-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px;
}
.hero__kpi{
  padding:14px 16px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.hero__kpi b{
  display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.4rem;
  background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__kpi span{ display:block; font-size:.78rem; color:var(--ink-4); margin-top:2px; }
@media (max-width:560px){
  .hero__kpi{ padding:10px; }
  .hero__kpi b{ font-size:1.1rem; }
  .hero__kpi span{ font-size:.7rem; }
}

/* Quote v2 with giant " */
.quote--v2{
  position:relative;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--line);
}
.quote--v2::before{
  content:"\201C"; position:absolute; top:14px; right:22px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:5rem; line-height:1; color:var(--brand-1); opacity:.12;
}

/* Improved reveals (slide + blur) */
.reveal-v2{ opacity:0; transform:translateY(40px); filter:blur(6px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.reveal-v2.is-visible{ opacity:1; transform:none; filter:blur(0); }

/* Mock — v2.1 shadow */
.mock--v2{ box-shadow:
  0 50px 100px rgba(176,26,46,.18),
  0 20px 40px rgba(11,15,26,.12),
  inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="dark"] .mock--v2{ box-shadow:
  0 50px 100px rgba(0,0,0,.55),
  0 20px 40px rgba(0,0,0,.4),
  inset 0 1px 0 rgba(255,255,255,.04);
}

/* Accent strip */
.accent-strip{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:14px 24px; border-radius:999px;
  background:linear-gradient(135deg, rgba(176,26,46,.08), rgba(255,179,70,.1));
  border:1px solid rgba(176,26,46,.18);
  font-size:.88rem; color:var(--ink-2); font-weight:500;
  flex-wrap:wrap; margin:0 auto 30px; max-width:fit-content;
}
.accent-strip b{ color:var(--ink-1); font-weight:700; }
.accent-strip svg{ width:16px; height:16px; color:var(--brand-1); }

/* ═══════════════════════════════════════════════
   ROI CALCULATOR  — interactive widget
   ═══════════════════════════════════════════════ */
.roi{
  background:
    radial-gradient(900px 400px at 90% 0%, rgba(231,69,122,.12), transparent 55%),
    radial-gradient(600px 400px at 10% 100%, rgba(255,179,70,.1), transparent 55%),
    var(--bg);
}
.roi__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.roi__copy h2{ margin-bottom:12px; }
.roi__copy p.lead{ font-size:1.1rem; color:var(--ink-3); margin-bottom:20px; }
.roi__copy ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.roi__copy ul li{ display:flex; gap:10px; align-items:center; color:var(--ink-2); font-size:.95rem; }
.roi__copy ul li::before{
  content:""; flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,#1EA97C,#4FC997)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
    center / 60% no-repeat;
}

.roi__widget{
  background:var(--surface); border:1px solid var(--line); border-radius:24px;
  padding:32px; box-shadow:var(--shadow-md);
}
.roi__widget h3{ font-size:1.2rem; margin-bottom:20px; }
.roi__row{ margin-bottom:18px; }
.roi__row label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.9rem; font-weight:600; color:var(--ink-2); margin-bottom:8px;
}
.roi__row label b{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; color:var(--brand-1); }
.roi__row input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--brand-1) var(--p,50%), var(--line) var(--p,50%));
  outline:none; cursor:pointer;
}
.roi__row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--gradient-brand);
  border:3px solid var(--surface);
  box-shadow:0 4px 12px rgba(176,26,46,.4);
  cursor:grab;
}
.roi__row input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--gradient-brand); border:3px solid var(--surface);
  box-shadow:0 4px 12px rgba(176,26,46,.4); cursor:grab;
}
.roi__row select{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--input-bg); color:var(--ink-1);
  font-family:inherit; font-size:.95rem;
}

.roi__results{
  margin-top:24px; padding-top:24px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.roi__result{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:14px; padding:16px;
}
.roi__result small{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; color:var(--ink-4); margin-bottom:6px;
}
.roi__result b{
  display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:1.6rem; line-height:1.1;
  background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.roi__result span{ font-size:.78rem; color:var(--ink-4); }
.roi__result--highlight b{
  background:linear-gradient(135deg,#1EA97C,#4FC997);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (max-width: 980px){
  .roi__grid{ grid-template-columns:1fr; gap:30px; }
}

/* ═══════════════════════════════════════════════
   STICKY BOTTOM CTA  — appears after hero
   ═══════════════════════════════════════════════ */
.sticky-cta{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(140%);
  z-index:55; max-width:560px; width:calc(100% - 32px);
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:14px 20px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:14px;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
  opacity:0; pointer-events:none;
}
.sticky-cta.is-visible{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.sticky-cta__avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--gradient-brand); color:#fff; display:grid; place-items:center;
  font-weight:700; flex-shrink:0; font-size:.85rem;
}
.sticky-cta__msg{ flex:1; font-size:.9rem; color:var(--ink-2); }
.sticky-cta__msg b{ display:block; color:var(--ink-1); font-weight:700; font-size:.95rem; }
.sticky-cta__close{
  position:absolute; top:8px; right:10px; width:24px; height:24px;
  display:grid; place-items:center; border-radius:50%;
  color:var(--ink-4); font-size:1.1rem; line-height:1;
}
.sticky-cta__close:hover{ background:var(--surface-2); color:var(--ink-1); }
@media (max-width:560px){
  .sticky-cta{ bottom:84px; padding:12px 16px; }
  .sticky-cta__msg{ font-size:.82rem; }
}

/* ═══════════════════════════════════════════════
   EXIT-INTENT MODAL
   ═══════════════════════════════════════════════ */
.exit-modal{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; padding:24px;
  background:rgba(11,15,26,.65); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.exit-modal.is-open{ opacity:1; pointer-events:auto; }
.exit-modal__card{
  background:var(--surface); border:1px solid var(--line); border-radius:24px;
  padding:40px 32px; max-width:480px; width:100%;
  box-shadow:0 40px 80px rgba(0,0,0,.4);
  position:relative; transform:scale(.94);
  transition:transform .35s var(--ease);
}
.exit-modal.is-open .exit-modal__card{ transform:scale(1); }
.exit-modal__close{
  position:absolute; top:14px; right:14px; width:32px; height:32px;
  display:grid; place-items:center; border-radius:10px;
  color:var(--ink-4); font-size:1.2rem; line-height:1;
}
.exit-modal__close:hover{ background:var(--surface-2); color:var(--ink-1); }
.exit-modal__icon{
  width:64px; height:64px; border-radius:18px;
  margin:0 auto 18px;
  background:var(--gradient-brand); color:#fff;
  display:grid; place-items:center; font-size:1.8rem;
  box-shadow:0 14px 28px rgba(176,26,46,.4);
}
.exit-modal h2{ font-size:1.5rem; text-align:center; margin-bottom:8px; }
.exit-modal p{ text-align:center; color:var(--ink-3); margin-bottom:20px; }
.exit-modal form{ display:flex; gap:8px; }
.exit-modal form input{
  flex:1; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--input-bg); color:var(--ink-1);
  font-family:inherit; font-size:.95rem;
}

/* ═══════════════════════════════════════════════
   CONFETTI  (used on demo success)
   ═══════════════════════════════════════════════ */
.confetti{
  position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden;
}
.confetti span{
  position:absolute; top:-20px; width:10px; height:14px;
  border-radius:2px; opacity:.95;
  animation:confettiFall var(--d,3s) ease-in var(--delay,0s) forwards,
            confettiSpin 1.2s linear infinite;
}
@keyframes confettiFall{
  to{ transform:translateY(110vh) rotate(720deg); opacity:0; }
}
@keyframes confettiSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* ═══════════════════════════════════════════════
   PRICING TOGGLES  (billing & currency)
   ═══════════════════════════════════════════════ */
.pricing-toggles{
  display:flex; justify-content:center; gap:14px; margin-bottom:36px; flex-wrap:wrap;
}
.toggle-pill{
  display:inline-flex; padding:5px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
}
.toggle-pill button{
  padding:8px 16px; border-radius:999px; font-weight:600; font-size:.88rem;
  color:var(--ink-3); transition:all .2s var(--ease);
}
.toggle-pill button.is-active{
  background:var(--gradient-brand); color:#fff; box-shadow:0 6px 14px rgba(176,26,46,.3);
}
.toggle-pill button .save-badge{
  background:rgba(30,169,124,.18); color:#0f9960;
  padding:2px 8px; border-radius:999px; font-size:.7rem; margin-left:6px; font-weight:700;
}
.toggle-pill button.is-active .save-badge{ background:rgba(255,255,255,.25); color:#fff; }

/* ═══════════════════════════════════════════════
   SKELETON LOADERS
   ═══════════════════════════════════════════════ */
.skel{
  background:linear-gradient(90deg, var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100%);
  background-size:200% 100%;
  animation:skelShimmer 1.4s ease-in-out infinite;
  border-radius:8px;
}
@keyframes skelShimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}

/* ═══════════════════════════════════════════════
   HIGH-CONTRAST THEME OPTION
   ═══════════════════════════════════════════════ */
[data-theme="hc"]{
  --ink-1: #000000;
  --ink-2: #000000;
  --ink-3: #1A1A1A;
  --ink-4: #333333;
  --line: #000000;
  --bg: #ffffff;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --brand-1: #960018;
  color-scheme:light;
}
[data-theme="hc"] .nav,
[data-theme="hc"] .feature,
[data-theme="hc"] .stat,
[data-theme="hc"] .sol,
[data-theme="hc"] .quote,
[data-theme="hc"] .plan,
[data-theme="hc"] .iso-card,
[data-theme="hc"] .auth__card,
[data-theme="hc"] .demo-v2__panel,
[data-theme="hc"] .demo-v2__expert,
[data-theme="hc"] .legal__toc{
  border:2px solid #000;
}
[data-theme="hc"] .gradient-text,
[data-theme="hc"] .stat b,
[data-theme="hc"] .roi__result b,
[data-theme="hc"] .plan .price b{
  background:none; -webkit-background-clip:initial; background-clip:initial;
  color:#960018; -webkit-text-fill-color:#960018;
}
[data-theme="hc"] .btn--primary{ background:#960018; color:#fff; box-shadow:none; }
[data-theme="hc"] .btn--ghost{ background:#fff; color:#000; border-color:#000; }

/* ═══════════════════════════════════════════════
   GENERIC PAGE  — used by /security, /compare,
   /resources, /integrations, /industry pages, etc.
   ═══════════════════════════════════════════════ */
.page-hero{
  padding:90px 0 50px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(900px 400px at 30% 20%, rgba(255,179,70,.14), transparent 55%),
    radial-gradient(700px 400px at 80% 60%, rgba(231,69,122,.14), transparent 55%),
    var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.page-hero h1{ max-width:780px; margin:18px auto 12px; font-size:clamp(2rem,4vw,3rem); }
.page-hero p{ max-width:640px; margin:0 auto 22px; font-size:1.08rem; }
.page-hero__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.page-section{ padding:80px 0; }
.page-section--soft{ background:var(--bg-soft); }

/* Comparison table */
.compare-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; font-size:.92rem;
}
.compare-table th, .compare-table td{
  padding:14px 16px; text-align:left; border-bottom:1px solid var(--line);
}
.compare-table thead th{
  background:var(--surface-2); font-weight:700; color:var(--ink-1); font-size:.95rem;
}
.compare-table tbody tr:last-child td{ border-bottom:0; }
.compare-table tbody tr:hover{ background:var(--surface-2); }
.compare-table .col-mico{ background:linear-gradient(180deg,rgba(176,26,46,.06), rgba(255,179,70,.06)); }
.compare-cell-yes{ color:#1EA97C; font-weight:700; }
.compare-cell-no{ color:var(--ink-4); }
.compare-cell-partial{ color:#F59E0B; font-weight:600; }

/* Resources grid */
.resource-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.resource-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:0; overflow:hidden; transition:transform .25s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column;
}
.resource-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.resource-card__img{
  height:160px;
  background:linear-gradient(135deg, rgba(176,26,46,.18), rgba(255,179,70,.22));
  display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.4rem;
  color:var(--brand-1); position:relative;
}
.resource-card__body{ padding:20px; flex:1; display:flex; flex-direction:column; }
.resource-card__tag{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--chip-bg); color:var(--brand-1);
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  align-self:flex-start; margin-bottom:10px;
}
.resource-card h3{ font-size:1.05rem; margin-bottom:6px; line-height:1.35; }
.resource-card p{ font-size:.88rem; color:var(--ink-3); margin-bottom:14px; flex:1; }
.resource-card a.read{ font-weight:600; color:var(--brand-1); font-size:.88rem; }

@media (max-width: 980px){ .resource-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .resource-grid{ grid-template-columns:1fr; } }

/* Integrations grid */
.int-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.int-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px; text-align:center; transition:all .25s var(--ease);
}
.int-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--brand-1); }
.int-card__logo{
  width:48px; height:48px; border-radius:12px;
  margin:0 auto 10px;
  display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:#fff; font-size:1.05rem;
}
.int-card b{ display:block; font-size:.92rem; color:var(--ink-1); }
.int-card span{ font-size:.78rem; color:var(--ink-4); }
@media (max-width: 980px){ .int-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 640px){ .int-grid{ grid-template-columns:repeat(2,1fr); } }

/* Industry / case-study layout */
.split-2col{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
@media (max-width: 980px){ .split-2col{ grid-template-columns:1fr; gap:30px; } }
.metric-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0; }
.metric-row .stat{ text-align:left; padding:24px; }
.metric-row .stat b{ font-size:2rem; }
@media (max-width: 700px){ .metric-row{ grid-template-columns:1fr; } }

/* Hero ticker (live activity) */
.hero__ticker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:.85rem; color:var(--ink-2); margin-top:18px;
}
.hero__ticker .pulse{
  width:8px; height:8px; border-radius:50%; background:#1EA97C;
  box-shadow:0 0 0 0 rgba(30,169,124,.6); animation:pulseDot 1.8s ease-out infinite;
}
.hero__ticker b{ color:var(--ink-1); font-weight:700; }

/* Better customer logos (real-feel SVG marks) */
.brand-strip{
  display:flex; gap:22px; flex-wrap:wrap; align-items:center;
  filter:grayscale(1); opacity:.7; transition:filter .3s var(--ease), opacity .3s var(--ease);
}
.brand-strip:hover{ filter:grayscale(0); opacity:1; }
.brand-strip svg{ height:28px; width:auto; }
[data-theme="dark"] .brand-strip{ filter:grayscale(1) invert(.85); }

/* ═══════════════════════════════════════════════
   THEME TOGGLE  (in the shared header)
   ═══════════════════════════════════════════════ */
.theme-toggle{
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface);
  display:inline-grid; place-items:center;
  color:var(--ink-2); cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.theme-toggle:hover{ transform:translateY(-1px); border-color:var(--ink-3); color:var(--ink-1); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ico-sun{ display:none; }
.theme-toggle .ico-moon{ display:block; }
[data-theme="dark"] .theme-toggle .ico-sun{ display:block; }
[data-theme="dark"] .theme-toggle .ico-moon{ display:none; }
[data-theme="dark"] .theme-toggle{ color:var(--gold-2); }

/* ═══════════════════════════════════════════════
   DARK MODE — component overrides
   (applies only when [data-theme="dark"] is set)
   ═══════════════════════════════════════════════ */
[data-theme="dark"] body{ background:var(--bg); color:var(--ink-1); }

/* Announcement bar stays dark — no change needed */

/* Nav glass */
[data-theme="dark"] .nav{ background:var(--nav-glass); border-bottom-color:transparent; }
[data-theme="dark"] .nav.is-scrolled{ background:var(--nav-glass-scroll); border-bottom-color:var(--line); }
[data-theme="dark"] .nav__burger{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .nav__burger span{ background:var(--ink-1); }
[data-theme="dark"] .nav__mobile{ background:var(--surface); border-top-color:var(--line); }
[data-theme="dark"] .nav__links a{ color:var(--ink-3); }
[data-theme="dark"] .nav__links a:hover{ color:var(--ink-1); }

/* Brand text */
[data-theme="dark"] .brand{ color:var(--ink-1); }
[data-theme="dark"] .brand__name span{ color:var(--gold-2); }

/* Buttons */
[data-theme="dark"] .btn--ghost{ background:var(--surface); color:var(--ink-1); border-color:var(--line); }
[data-theme="dark"] .btn--ghost:hover{ border-color:var(--ink-3); }

/* Hero */
[data-theme="dark"] .blob--a{ background:radial-gradient(circle at 30% 30%, rgba(176,26,46,.4), transparent 65%); opacity:.6; }
[data-theme="dark"] .blob--b{ background:radial-gradient(circle at 60% 60%, rgba(255,179,70,.28), transparent 65%); opacity:.55; }
[data-theme="dark"] .grid{
  background-image:linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
}
[data-theme="dark"] .hero__form{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .hero__form input{ color:var(--ink-1); }
[data-theme="dark"] .hero__form input::placeholder{ color:var(--ink-4); }
[data-theme="dark"] .hero__micro{ color:var(--ink-4); }
[data-theme="dark"] .hero__logos > span{ color:var(--ink-4); }
[data-theme="dark"] .logo-chip{ background:rgba(255,255,255,.03); color:var(--ink-4); border-color:var(--line); }
[data-theme="dark"] .logo-chip:hover{ color:var(--ink-1); }

[data-theme="dark"] .eyebrow{ background:rgba(176,26,46,.18); border-color:rgba(176,26,46,.3); color:var(--gold-2); }
[data-theme="dark"] .eyebrow .dot{ background:var(--gold-2); box-shadow:0 0 0 4px rgba(255,211,106,.18); }
[data-theme="dark"] .hero__trust .iso-mark{ background:rgba(14,19,32,.7); border-color:var(--line); color:var(--ink-2); }
[data-theme="dark"] .hero__trust .iso-mark svg{ color:var(--gold-2); }

/* Mock dashboard */
[data-theme="dark"] .mock{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .mock__bar{ background:var(--surface-2); border-bottom-color:var(--line); }
[data-theme="dark"] .mock__bar em{ color:var(--ink-4); }
[data-theme="dark"] .mock__side{
  background:linear-gradient(180deg,var(--surface-2),var(--bg-soft));
  border-right-color:var(--line);
}
[data-theme="dark"] .mock__side li{ color:var(--ink-3); }
[data-theme="dark"] .mock__side li.active{ background:var(--surface-elevated); color:var(--gold-2); }
[data-theme="dark"] .mock__heading small, .mock__heading strong{ color:var(--ink-1); }
[data-theme="dark"] .mock__heading small{ color:var(--ink-4); }
[data-theme="dark"] .mock__pill{ background:rgba(30,169,124,.18); color:#4FC997; }
[data-theme="dark"] .kpi, [data-theme="dark"] .card, [data-theme="dark"] .row-card{
  background:var(--surface-2); border-color:var(--line);
}
[data-theme="dark"] .kpi b{ color:var(--ink-1); }
[data-theme="dark"] .kpi span{ color:var(--ink-4); }
[data-theme="dark"] .row-card span{ color:var(--ink-4); }

/* Floating notifications */
[data-theme="dark"] .float{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .float b{ color:var(--ink-1); }
[data-theme="dark"] .float span{ color:var(--ink-4); }

/* Stats bar */
[data-theme="dark"] .stat{ background:var(--surface); border-color:var(--line); }

/* Section headers */
[data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4{ color:var(--ink-1); }
[data-theme="dark"] p{ color:var(--ink-3); }
[data-theme="dark"] .section--soft{ background:var(--bg-soft); }

/* Features */
[data-theme="dark"] .feature{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .feature p{ color:var(--ink-3); }
[data-theme="dark"] .feature ul li{ color:var(--ink-3); }

/* How it works */
[data-theme="dark"] .step{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .step p{ color:var(--ink-3); }

/* Solutions */
[data-theme="dark"] .sol{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .sol h3{ color:var(--ink-1); }
[data-theme="dark"] .sol p{ color:var(--ink-3); }

/* Benefits / metric cards */
[data-theme="dark"] .metric-card{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .metric-card small{ color:var(--ink-4); }
[data-theme="dark"] .metric-card p{ color:var(--ink-4); }
[data-theme="dark"] .check-list li{ color:var(--ink-2); }
[data-theme="dark"] .check-list svg{ background:rgba(30,169,124,.18); color:#4FC997; }
[data-theme="dark"] .bar{ background:var(--surface-2); }

/* Testimonials */
[data-theme="dark"] .quote{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .quote blockquote{ color:var(--ink-2); }
[data-theme="dark"] .quote figcaption{ border-top-color:var(--line); }
[data-theme="dark"] .quote figcaption b{ color:var(--ink-1); }
[data-theme="dark"] .quote figcaption em{ color:var(--ink-4); }

/* Pricing plans (non-best) */
[data-theme="dark"] .plan{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .plan ul li{ color:var(--ink-2); }
[data-theme="dark"] .plan ul li::before{
  background:rgba(30,169,124,.2)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FC997' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
    center / 60% no-repeat;
}

/* FAQ */
[data-theme="dark"] .faq details{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .faq summary{ color:var(--ink-1); }
[data-theme="dark"] .faq summary::after{
  background:
    linear-gradient(90deg, currentColor 45%, transparent 45%) center/12px 2px no-repeat,
    linear-gradient(0deg,  currentColor 45%, transparent 45%) center/2px 12px no-repeat,
    rgba(255,255,255,.08);
  color:var(--ink-1);
}
[data-theme="dark"] .faq p{ color:var(--ink-3); }

/* ISO compliance strip */
[data-theme="dark"] .iso-strip{
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg-soft) 100%);
  border-top-color:var(--line); border-bottom-color:var(--line);
}
[data-theme="dark"] .iso-card{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .iso-card__body small{ color:var(--ink-4); }
[data-theme="dark"] .iso-card__body b{ color:var(--ink-1); }
[data-theme="dark"] .iso-card__body span{ color:var(--ink-3); }
[data-theme="dark"] .iso-mark--light{ background:var(--surface); border-color:var(--line); color:var(--ink-2); }

/* Auth (signup page split) */
[data-theme="dark"] .auth{ background:var(--bg); }
[data-theme="dark"] .auth__form-wrap{ background:var(--bg-soft); }
[data-theme="dark"] .auth__card{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .auth__card h2{ color:var(--ink-1); }
[data-theme="dark"] .auth__card > p{ color:var(--ink-3); }
[data-theme="dark"] .field label{ color:var(--ink-2); }
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea{
  background:var(--input-bg); color:var(--ink-1); border-color:var(--line);
}
[data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder{ color:var(--ink-4); }
[data-theme="dark"] .field select{ color:var(--ink-1); }
[data-theme="dark"] .field select option{ background:var(--surface); color:var(--ink-1); }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus{
  border-color:var(--gold-2); box-shadow:0 0 0 4px rgba(255,211,106,.14);
}
[data-theme="dark"] .field--pwd button{ color:var(--ink-4); }
[data-theme="dark"] .field--pwd button:hover{ background:rgba(255,211,106,.12); color:var(--gold-2); }
[data-theme="dark"] .oauth button{ background:var(--surface-2); border-color:var(--line); color:var(--ink-1); }
[data-theme="dark"] .oauth button:hover{ background:var(--surface-elevated); border-color:var(--ink-3); }
[data-theme="dark"] .auth__divider{ color:var(--ink-4); }
[data-theme="dark"] .auth__divider::before,
[data-theme="dark"] .auth__divider::after{ background:var(--line); }
[data-theme="dark"] .auth__options a{ color:var(--gold-2); }
[data-theme="dark"] .auth__foot{ color:var(--ink-3); }
[data-theme="dark"] .auth__foot a{ color:var(--gold-2); }
[data-theme="dark"] .pwstrength span{ background:rgba(255,255,255,.08); }
[data-theme="dark"] .demo-slots label{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }
[data-theme="dark"] .demo-slots input:checked + label{
  background:rgba(176,26,46,.25); border-color:var(--brand-1); color:var(--gold-2);
}

/* Demo v2 wizard */
[data-theme="dark"] .demo-v2{
  background:
    radial-gradient(1200px 500px at 85% 0%, rgba(231,69,122,.1), transparent 55%),
    radial-gradient(900px 500px at 10% 80%, rgba(255,179,70,.08), transparent 55%),
    var(--bg);
}
[data-theme="dark"] .demo-v2__progress,
[data-theme="dark"] .demo-v2__expert,
[data-theme="dark"] .demo-v2__testimonial,
[data-theme="dark"] .demo-v2__panel{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .demo-v2__step{ color:var(--ink-4); }
[data-theme="dark"] .demo-v2__step.is-active{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__step b{ background:var(--surface-2); color:var(--ink-3); }
[data-theme="dark"] .demo-v2__step-line{ background:var(--line); }
[data-theme="dark"] .demo-v2__expert-head b{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__expert-bio{ color:var(--ink-3); }
[data-theme="dark"] .demo-v2__expert-stats{ border-top-color:var(--line); }
[data-theme="dark"] .demo-v2__expert-stats div b{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__expert-stats div span{ color:var(--ink-4); }
[data-theme="dark"] .demo-v2__testimonial p{ color:var(--ink-2); }
[data-theme="dark"] .demo-v2__testimonial footer b{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__testimonial footer span{ color:var(--ink-4); }
[data-theme="dark"] .demo-v2__panel h2{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__panel > p.sub{ color:var(--ink-4); }
[data-theme="dark"] .demo-v2__actions{ border-top-color:var(--line); }
[data-theme="dark"] .demo-v2__back{ color:var(--ink-3); }
[data-theme="dark"] .demo-v2__back:hover{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__date-head b{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__date-nav button{ background:var(--surface-2); border-color:var(--line); color:var(--ink-3); }
[data-theme="dark"] .demo-v2__date-nav button:hover{ color:var(--ink-1); border-color:var(--ink-3); }
[data-theme="dark"] .demo-v2__dow{ color:var(--ink-4); }
[data-theme="dark"] .demo-v2__day{ color:var(--ink-2); }
[data-theme="dark"] .demo-v2__day:hover{ background:rgba(176,26,46,.2); color:var(--gold-2); }
[data-theme="dark"] .demo-v2__day.is-muted,
[data-theme="dark"] .demo-v2__day.is-disabled{ color:var(--ink-4); opacity:.4; }
[data-theme="dark"] .demo-v2__day.is-today{ border-color:var(--line); }
[data-theme="dark"] .demo-v2__times label{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }
[data-theme="dark"] .demo-v2__times input:checked + label{
  background:rgba(176,26,46,.25); border-color:var(--brand-1); color:var(--gold-2);
}
[data-theme="dark"] .demo-v2__tz{ color:var(--ink-4); }
[data-theme="dark"] .demo-v2__success h2{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__success p{ color:var(--ink-3); }
[data-theme="dark"] .demo-v2__success-card{ background:var(--surface-2); border-color:var(--line); }
[data-theme="dark"] .demo-v2__success-card b{ color:var(--ink-1); }
[data-theme="dark"] .demo-v2__success-card span{ color:var(--ink-4); }

/* Legal pages */
[data-theme="dark"] .legal-hero{ background:linear-gradient(180deg,var(--bg-soft) 0%, var(--bg) 100%); border-bottom-color:var(--line); }
[data-theme="dark"] .legal-hero p{ color:var(--ink-3); }
[data-theme="dark"] .legal-hero time{ color:var(--ink-4); }
[data-theme="dark"] .legal__toc{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .legal__toc h4{ color:var(--ink-4); }
[data-theme="dark"] .legal__toc a{ color:var(--ink-3); }
[data-theme="dark"] .legal__toc a::before{ color:var(--ink-4); }
[data-theme="dark"] .legal__toc a:hover, [data-theme="dark"] .legal__toc a.is-active{
  background:rgba(176,26,46,.18); color:var(--gold-2);
}
[data-theme="dark"] .legal__body p{ color:var(--ink-3); }
[data-theme="dark"] .legal__body ul li, [data-theme="dark"] .legal__body ol li{ color:var(--ink-3); }
[data-theme="dark"] .legal__body strong{ color:var(--ink-1); }
[data-theme="dark"] .legal__body a{ color:var(--gold-2); }
[data-theme="dark"] .legal__body table{ border-color:var(--line); }
[data-theme="dark"] .legal__body table th{ background:var(--surface-2); color:var(--ink-1); }
[data-theme="dark"] .legal__body table th, [data-theme="dark"] .legal__body table td{ border-bottom-color:var(--line); }
[data-theme="dark"] .legal__callout{ border-color:rgba(176,26,46,.2); }

/* 404 page */
[data-theme="dark"] .err{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,179,70,.1), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(231,69,122,.1), transparent 55%),
    var(--bg);
}
[data-theme="dark"] .err__helpful a{ background:var(--surface); border-color:var(--line); color:var(--ink-2); }
[data-theme="dark"] .err__helpful a:hover{ color:var(--gold-2); border-color:var(--brand-1); }

/* Cookie banner */
[data-theme="dark"] .cookie{ background:var(--surface); border-color:var(--line); box-shadow:0 24px 60px rgba(0,0,0,.5); }
[data-theme="dark"] .cookie h3{ color:var(--ink-1); }
[data-theme="dark"] .cookie p{ color:var(--ink-3); }

/* Announcement link color */
[data-theme="dark"] .announce{ background:linear-gradient(90deg,#000 0%, #141A29 100%); }

/* Sign-in v2 — when user forces light mode, brighten its card. Always-dark default preserved. */
[data-theme="light"] .signin-v2{
  background:
    radial-gradient(1100px 600px at 20% 15%, rgba(255,182,193,.45), transparent 55%),
    radial-gradient(900px 600px at 80% 85%, rgba(255,218,147,.5), transparent 55%),
    radial-gradient(700px 500px at 50% 50%, rgba(255,230,234,.8), transparent 60%),
    linear-gradient(180deg,#FFFDFB 0%, #F7F3EE 100%);
  color:var(--ink-1);
}
[data-theme="light"] .signin-v2::before{
  background-image:
    linear-gradient(to right, rgba(11,15,26,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,15,26,.05) 1px, transparent 1px);
}
[data-theme="light"] .signin-v2__logo{ color:var(--ink-1); }
[data-theme="light"] .signin-v2__logo span{ color:var(--brand-1); }
[data-theme="light"] .signin-v2__card{
  background:rgba(255,255,255,.92);
  border-color:var(--line);
  box-shadow:0 40px 90px rgba(176,26,46,.12), 0 12px 30px rgba(11,15,26,.06);
}
[data-theme="light"] .signin-v2__card h1{ color:var(--ink-1); }
[data-theme="light"] .signin-v2__card > p{ color:var(--ink-4); }
[data-theme="light"] .signin-v2 .field label{ color:var(--ink-2); }
[data-theme="light"] .signin-v2 .field input{ background:#fff; border:1px solid var(--line); color:var(--ink-1); }
[data-theme="light"] .signin-v2 .field input::placeholder{ color:var(--ink-4); }
[data-theme="light"] .signin-v2 .field input:focus{ border-color:var(--brand-1); box-shadow:0 0 0 4px rgba(176,26,46,.12); }
[data-theme="light"] .signin-v2 .field--pwd button{ color:var(--ink-4); }
[data-theme="light"] .signin-v2 .field--pwd button:hover{ background:#FFECEF; color:var(--brand-1); }
[data-theme="light"] .signin-v2 .auth__options{ color:var(--ink-3); }
[data-theme="light"] .signin-v2 .auth__options a{ color:var(--brand-1); }
[data-theme="light"] .signin-v2 .field--check label,
[data-theme="light"] .signin-v2 .field--check span{ color:var(--ink-3); }
[data-theme="light"] .signin-v2__passkey{
  background:linear-gradient(135deg, rgba(176,26,46,.05), rgba(255,179,70,.1));
  border:1px solid rgba(176,26,46,.2); color:var(--brand-1);
}
[data-theme="light"] .signin-v2__divider{ color:var(--ink-4); }
[data-theme="light"] .signin-v2__divider::before,
[data-theme="light"] .signin-v2__divider::after{ background:var(--line); }
[data-theme="light"] .signin-v2 .oauth button{ background:#fff; border:1px solid var(--line); color:var(--ink-1); }
[data-theme="light"] .signin-v2 .oauth button:hover{ background:#FAFBFD; border-color:var(--ink-2); }
[data-theme="light"] .signin-v2__foot{ color:var(--ink-3); }
[data-theme="light"] .signin-v2__foot a{ color:var(--brand-1); }
[data-theme="light"] .signin-v2__badges .iso-mark{ background:#fff; border-color:var(--line); color:var(--ink-2); }
[data-theme="light"] .signin-v2__ticker{ background:rgba(255,255,255,.92); border-color:var(--line); color:var(--ink-2); }
[data-theme="light"] .signin-v2__ticker-name{ color:var(--ink-1); }

/* ═══════════════════════════════════════════════
   SIGN-IN v2 — premium minimal centered
   ═══════════════════════════════════════════════ */

.signin-v2{
  position:relative; min-height:100vh; overflow:hidden;
  display:grid; place-items:center; padding:56px 20px;
  color:#EAEDF5;
  background:
    radial-gradient(1100px 600px at 20% 15%, rgba(176,26,46,.35), transparent 55%),
    radial-gradient(900px 600px at 80% 85%, rgba(255,179,70,.22), transparent 55%),
    radial-gradient(700px 500px at 50% 50%, rgba(231,69,122,.18), transparent 60%),
    linear-gradient(180deg,#0A0D16 0%,#070912 100%);
}
.signin-v2::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
}
.signin-v2__orb{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.5;
  animation:orbFloat 14s ease-in-out infinite;
}
.signin-v2__orb--a{ width:420px; height:420px; top:-80px; left:-80px;
  background:radial-gradient(circle,#B01A2E,transparent 60%); }
.signin-v2__orb--b{ width:380px; height:380px; bottom:-80px; right:-80px; animation-delay:-7s;
  background:radial-gradient(circle,#FFB946,transparent 60%); }
@keyframes orbFloat{
  0%,100%{ transform:translate(0,0); } 50%{ transform:translate(40px,30px); }
}

.signin-v2__logo-wrap{
  position:relative; z-index:2; text-align:center; margin-bottom:24px;
}
.signin-v2__logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.25rem;
  color:#fff;
}
.signin-v2__logo-mark{
  position:relative; display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg,#B01A2E,#6E0A1A);
  box-shadow:0 20px 40px rgba(176,26,46,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.signin-v2__logo-mark::before{
  content:""; position:absolute; inset:-4px; border-radius:20px;
  background:conic-gradient(from 0deg, rgba(255,211,106,.6), transparent 40%, rgba(231,69,122,.6), transparent 80%);
  filter:blur(8px); opacity:.8; z-index:-1;
  animation:logoGlow 6s linear infinite;
}
@keyframes logoGlow{ to{ transform:rotate(360deg); } }
.signin-v2__logo span{ color:var(--gold-2); }

.signin-v2__card{
  position:relative; z-index:2;
  width:100%; max-width:440px;
  background:rgba(22,26,42,.72);
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:40px 34px;
  box-shadow:0 40px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.signin-v2__card h1{
  color:#fff; font-size:1.75rem; text-align:center; margin-bottom:6px;
}
.signin-v2__card > p{
  text-align:center; color:#9FA8BE; font-size:.95rem; margin-bottom:26px;
}

.signin-v2 .field label{ color:#C5CAD7; }
.signin-v2 .field input{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
}
.signin-v2 .field input::placeholder{ color:#6B7488; }
.signin-v2 .field input:focus{
  background:rgba(255,255,255,.06);
  border-color:var(--gold-2);
  box-shadow:0 0 0 4px rgba(255,211,106,.12);
}
.signin-v2 .field--pwd button{ color:#9FA8BE; }
.signin-v2 .field--pwd button:hover{ background:rgba(255,211,106,.12); color:var(--gold-2); }

.signin-v2 .auth__options{ color:#9FA8BE; }
.signin-v2 .auth__options a{ color:var(--gold-2); }
.signin-v2 .field--check label,
.signin-v2 .field--check span{ color:#C5CAD7; }

.signin-v2__passkey{
  width:100%; padding:13px 16px; border-radius:12px;
  background:rgba(255,211,106,.1); border:1px solid rgba(255,211,106,.25);
  color:var(--gold-2); font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:background .2s var(--ease), transform .2s var(--ease);
  margin-bottom:14px;
}
.signin-v2__passkey:hover{ background:rgba(255,211,106,.18); transform:translateY(-2px); }
.signin-v2__passkey svg{ width:18px; height:18px; }

.signin-v2__divider{
  display:flex; align-items:center; gap:12px;
  color:#6B7488; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  margin:4px 0 14px;
}
.signin-v2__divider::before,.signin-v2__divider::after{
  content:""; flex:1; height:1px; background:rgba(255,255,255,.08);
}

.signin-v2 .oauth button{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#EAEDF5;
}
.signin-v2 .oauth button:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }

.signin-v2__submit{
  width:100%; padding:14px; border-radius:12px; font-weight:700; font-size:1rem;
  background:linear-gradient(135deg,#B01A2E,#E7457A 70%,#FFB946);
  color:#fff; box-shadow:0 14px 34px rgba(176,26,46,.5), inset 0 1px 0 rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease);
  cursor:pointer;
}
.signin-v2__submit:hover{ transform:translateY(-2px); box-shadow:0 22px 44px rgba(176,26,46,.55); }

.signin-v2__foot{
  position:relative; z-index:2;
  margin-top:26px; text-align:center; color:#9FA8BE; font-size:.92rem;
}
.signin-v2__foot a{ color:var(--gold-2); font-weight:600; }
.signin-v2__foot a:hover{ text-decoration:underline; }

.signin-v2__badges{
  position:relative; z-index:2;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-top:22px;
}
.signin-v2__badges .iso-mark{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:#9FA8BE;
}

/* Activity ticker */
.signin-v2__ticker{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px;
  background:rgba(22,26,42,.6); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  color:#C5CAD7; font-size:.82rem;
}
.signin-v2__ticker .pulse{
  width:8px; height:8px; border-radius:50%; background:#1EA97C;
  box-shadow:0 0 0 0 rgba(30,169,124,.6);
  animation:pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot{ to{ box-shadow:0 0 0 12px rgba(30,169,124,0); } }
.signin-v2__ticker-name{ font-weight:700; color:#fff; }

@media (max-width: 560px){
  .signin-v2__card{ padding:32px 24px; border-radius:20px; }
  .signin-v2__card h1{ font-size:1.45rem; }
  .signin-v2__ticker{ bottom:12px; font-size:.75rem; padding:8px 12px; }
}

/* ─────────────────────────────────────────────
   SIGN-IN v2 LIGHT — white / cream premium variant
   ───────────────────────────────────────────── */

.signin-v2--light{
  background:
    radial-gradient(1100px 600px at 20% 15%, rgba(255,182,193,.45), transparent 55%),
    radial-gradient(900px 600px at 80% 85%, rgba(255,218,147,.5), transparent 55%),
    radial-gradient(700px 500px at 50% 50%, rgba(255,230,234,.8), transparent 60%),
    linear-gradient(180deg,#FFFDFB 0%, #F7F3EE 100%);
  color:var(--ink-1);
}
.signin-v2--light::before{
  background-image:
    linear-gradient(to right, rgba(11,15,26,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,15,26,.05) 1px, transparent 1px);
}
.signin-v2--light .signin-v2__orb--a{
  background:radial-gradient(circle,#FFB9C5,transparent 60%); opacity:.55;
}
.signin-v2--light .signin-v2__orb--b{
  background:radial-gradient(circle,#FFE2B5,transparent 60%); opacity:.55;
}

.signin-v2--light .signin-v2__logo{ color:var(--ink-1); }
.signin-v2--light .signin-v2__logo span{ color:var(--brand-1); }
.signin-v2--light .signin-v2__logo-mark::before{ opacity:.5; }

.signin-v2--light .signin-v2__card{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border:1px solid var(--line);
  box-shadow:
    0 40px 90px rgba(176,26,46,.12),
    0 12px 30px rgba(11,15,26,.06),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.signin-v2--light .signin-v2__card h1{ color:var(--ink-1); }
.signin-v2--light .signin-v2__card > p{ color:var(--ink-4); }

.signin-v2--light .field label{ color:var(--ink-2); }
.signin-v2--light .field input{
  background:#fff; border:1px solid var(--line); color:var(--ink-1);
}
.signin-v2--light .field input::placeholder{ color:var(--ink-4); }
.signin-v2--light .field input:focus{
  background:#fff; border-color:var(--brand-1);
  box-shadow:0 0 0 4px rgba(176,26,46,.12);
}
.signin-v2--light .field--pwd button{ color:var(--ink-4); }
.signin-v2--light .field--pwd button:hover{ background:#FFECEF; color:var(--brand-1); }

.signin-v2--light .auth__options{ color:var(--ink-3); }
.signin-v2--light .auth__options a{ color:var(--brand-1); }
.signin-v2--light .field--check label,
.signin-v2--light .field--check span{ color:var(--ink-3); }

.signin-v2--light .signin-v2__passkey{
  background:linear-gradient(135deg, rgba(176,26,46,.05), rgba(255,179,70,.1));
  border:1px solid rgba(176,26,46,.2);
  color:var(--brand-1);
}
.signin-v2--light .signin-v2__passkey:hover{
  background:linear-gradient(135deg, rgba(176,26,46,.1), rgba(255,179,70,.18));
}

.signin-v2--light .signin-v2__divider{ color:var(--ink-4); }
.signin-v2--light .signin-v2__divider::before,
.signin-v2--light .signin-v2__divider::after{ background:var(--line); }

.signin-v2--light .oauth button{
  background:#fff; border:1px solid var(--line); color:var(--ink-1);
}
.signin-v2--light .oauth button:hover{ background:#FAFBFD; border-color:var(--ink-2); }

.signin-v2--light .signin-v2__foot{ color:var(--ink-3); }
.signin-v2--light .signin-v2__foot a{ color:var(--brand-1); }

.signin-v2--light .signin-v2__badges .iso-mark{
  background:#fff; border-color:var(--line); color:var(--ink-2);
}

.signin-v2--light .signin-v2__ticker{
  background:rgba(255,255,255,.92); border-color:var(--line);
  color:var(--ink-2); backdrop-filter:blur(16px);
  box-shadow:0 12px 30px rgba(11,15,26,.08);
}
.signin-v2--light .signin-v2__ticker-name{ color:var(--ink-1); }

/* Theme toggle pill shared between the two versions */
.theme-switch{
  position:absolute; top:92px; right:24px; z-index:3;
  display:inline-flex; align-items:center; gap:4px;
  padding:5px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
}
.signin-v2--light .theme-switch{
  background:#fff; border-color:var(--line);
  box-shadow:0 6px 16px rgba(11,15,26,.06);
}
.theme-switch a{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  font-size:.82rem; font-weight:600; color:#9FA8BE;
  transition:all .2s var(--ease);
}
.signin-v2--light .theme-switch a{ color:var(--ink-4); }
.theme-switch a svg{ width:14px; height:14px; }
.theme-switch a.is-active{
  background:var(--gradient-brand); color:#fff;
  box-shadow:0 6px 14px rgba(176,26,46,.35);
}
.signin-v2--light .theme-switch a.is-active{ color:#fff; }

@media (max-width:560px){
  .theme-switch{ top:78px; right:16px; }
  .theme-switch a{ padding:7px 10px; font-size:.75rem; }
}

/* ═══════════════════════════════════════════════
   DEMO v2 — 3-step booking wizard
   ═══════════════════════════════════════════════ */

.demo-v2{
  background:
    radial-gradient(1200px 500px at 85% 0%, rgba(231,69,122,.08), transparent 55%),
    radial-gradient(900px 500px at 10% 80%, rgba(255,179,70,.08), transparent 55%),
    #FAFBFD;
  min-height:calc(100vh - 64px);
  padding:48px 24px 96px;
}
.demo-v2__wrap{ max-width:1160px; margin:0 auto; }

.demo-v2__progress{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:18px 22px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-sm); margin-bottom:28px;
  overflow-x:auto;
}
.demo-v2__step{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-4); font-size:.88rem; font-weight:600;
  white-space:nowrap;
}
.demo-v2__step b{
  width:28px; height:28px; border-radius:50%;
  background:#F1F2F7; color:var(--ink-3);
  display:grid; place-items:center; font-weight:700; font-size:.82rem;
  transition:all .25s var(--ease);
  flex-shrink:0;
}
.demo-v2__step.is-active{ color:var(--ink-1); }
.demo-v2__step.is-active b{ background:var(--gradient-brand); color:#fff; box-shadow:0 8px 18px rgba(176,26,46,.3); }
.demo-v2__step.is-done b{
  background:#E1F7EC; color:#0F9960;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F9960' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size:60%; background-position:center; background-repeat:no-repeat; color:transparent;
}
.demo-v2__step-line{
  flex:1; height:2px; min-width:20px;
  background:linear-gradient(90deg,#E6E8EE 0%,#E6E8EE 100%);
  border-radius:2px;
}
.demo-v2__step-line.is-done{
  background:linear-gradient(90deg,#B01A2E,#E7457A,#FFB946);
}

.demo-v2__grid{
  display:grid; grid-template-columns:360px 1fr; gap:28px;
}

.demo-v2__side{
  display:flex; flex-direction:column; gap:18px;
}
.demo-v2__expert{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px;
  box-shadow:var(--shadow-sm);
}
.demo-v2__expert-head{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.demo-v2__expert-avatar{
  position:relative; width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg,#B01A2E,#E7457A);
  color:#fff; display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.3rem;
  flex-shrink:0;
}
.demo-v2__expert-avatar::after{
  content:""; position:absolute; bottom:-2px; right:-2px;
  width:16px; height:16px; border-radius:50%;
  background:#1EA97C; border:3px solid #fff;
}
.demo-v2__expert-head b{
  display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  color:var(--ink-1); font-size:1.05rem; margin-bottom:2px;
}
.demo-v2__expert-head span{ color:var(--ink-4); font-size:.85rem; }
.demo-v2__expert-bio{ font-size:.92rem; color:var(--ink-3); margin-bottom:14px; line-height:1.55; }
.demo-v2__expert-stats{
  display:flex; gap:18px; padding-top:14px; border-top:1px solid var(--line);
}
.demo-v2__expert-stats div b{
  display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--ink-1);
  font-size:1.15rem; margin-bottom:2px;
}
.demo-v2__expert-stats div span{ font-size:.78rem; color:var(--ink-4); }

.demo-v2__value{
  background:linear-gradient(160deg,#1a0008 0%,#0B0F1A 100%);
  color:#fff; border-radius:20px; padding:24px;
  position:relative; overflow:hidden;
}
.demo-v2__value::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,179,70,.22), transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(231,69,122,.22), transparent 50%);
  pointer-events:none;
}
.demo-v2__value-head{ position:relative; display:flex; gap:10px; align-items:center; margin-bottom:14px; font-weight:700; }
.demo-v2__value-head::before{
  content:"▸"; color:var(--gold-2);
}
.demo-v2__value ul{
  position:relative; list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.demo-v2__value li{
  display:flex; gap:10px; align-items:flex-start;
  color:#C5CAD7; font-size:.92rem;
}
.demo-v2__value li::before{
  content:""; flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:rgba(255,211,106,.18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD36A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/60% no-repeat;
  margin-top:3px;
}

.demo-v2__testimonial{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px;
  box-shadow:var(--shadow-sm);
}
.demo-v2__testimonial p{
  font-size:.95rem; font-style:italic; color:var(--ink-2); line-height:1.5; margin-bottom:12px;
}
.demo-v2__testimonial footer{ display:flex; gap:10px; align-items:center; }
.demo-v2__testimonial .avatar{ width:36px; height:36px; border-radius:10px; }
.demo-v2__testimonial footer b{ display:block; color:var(--ink-1); font-size:.88rem; }
.demo-v2__testimonial footer span{ color:var(--ink-4); font-size:.78rem; }

.demo-v2__panel{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:32px; box-shadow:var(--shadow-sm); position:relative;
}
.demo-v2__panel h2{
  font-size:1.5rem; margin-bottom:4px;
}
.demo-v2__panel > p.sub{ color:var(--ink-4); margin-bottom:24px; font-size:.95rem; }

.demo-v2__pane{ display:none; animation:fadeSlide .4s var(--ease); }
.demo-v2__pane.is-active{ display:block; }
@keyframes fadeSlide{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

.demo-v2__actions{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:24px; padding-top:24px; border-top:1px solid var(--line);
}
.demo-v2__back{
  background:transparent; color:var(--ink-3); font-weight:600; padding:10px 14px;
}
.demo-v2__back:hover{ color:var(--ink-1); }
.demo-v2__back[disabled]{ opacity:.35; cursor:not-allowed; }

/* Date picker grid (Step 3) */
.demo-v2__date-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.demo-v2__date-head b{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.05rem; color:var(--ink-1); }
.demo-v2__date-nav{ display:flex; gap:6px; }
.demo-v2__date-nav button{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; color:var(--ink-2); transition:all .2s var(--ease);
}
.demo-v2__date-nav button:hover{ border-color:var(--ink-2); color:var(--ink-1); }

.demo-v2__calendar{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:20px;
}
.demo-v2__dow{
  text-align:center; font-size:.72rem; font-weight:700; color:var(--ink-4);
  text-transform:uppercase; letter-spacing:.06em; padding:8px 0;
}
.demo-v2__day{
  aspect-ratio:1; border:1px solid transparent; border-radius:10px;
  display:grid; place-items:center; font-weight:600; font-size:.92rem;
  color:var(--ink-2); cursor:pointer; transition:all .15s var(--ease); background:transparent;
}
.demo-v2__day:hover{ background:#FFECEF; color:var(--brand-1); }
.demo-v2__day.is-muted{ color:#C5CAD7; pointer-events:none; }
.demo-v2__day.is-today{ border-color:var(--line); }
.demo-v2__day.is-selected{
  background:var(--gradient-brand); color:#fff;
  box-shadow:0 8px 20px rgba(176,26,46,.3);
}
.demo-v2__day.is-disabled{ color:#D5D7DF; pointer-events:none; text-decoration:line-through; }

.demo-v2__times{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px;
}
.demo-v2__times label{
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  font-weight:600; font-size:.92rem; color:var(--ink-2); text-align:center;
  cursor:pointer; background:#fff; transition:all .2s var(--ease);
}
.demo-v2__times input{ position:absolute; opacity:0; pointer-events:none; }
.demo-v2__times input:checked + label{
  border-color:var(--brand-1); background:#FFECEF; color:var(--brand-1);
  box-shadow:0 4px 12px rgba(176,26,46,.16);
}

.demo-v2__tz{
  display:flex; align-items:center; gap:10px; margin-top:14px;
  font-size:.85rem; color:var(--ink-4);
}
.demo-v2__tz svg{ width:16px; height:16px; }

/* Success confirmation */
.demo-v2__success{
  text-align:center; padding:40px 20px;
}
.demo-v2__success-icon{
  width:72px; height:72px; border-radius:50%;
  margin:0 auto 20px;
  background:
    radial-gradient(circle, rgba(30,169,124,.25) 0%, transparent 70%),
    linear-gradient(135deg,#1EA97C,#4FC997);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 20px 40px rgba(30,169,124,.35);
  animation:successPop .6s var(--ease);
}
@keyframes successPop{
  0%{ transform:scale(.4); opacity:0; }
  60%{ transform:scale(1.1); opacity:1; }
  100%{ transform:scale(1); }
}
.demo-v2__success h2{ font-size:1.8rem; margin:0 0 8px; }
.demo-v2__success p{ color:var(--ink-3); font-size:1rem; max-width:480px; margin:0 auto 20px; }
.demo-v2__success-card{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:16px;
  padding:20px; max-width:420px; margin:0 auto 24px;
  display:flex; gap:14px; align-items:center; text-align:left;
}
.demo-v2__success-card-icon{
  width:48px; height:48px; border-radius:14px;
  background:var(--gradient-brand); color:#fff;
  display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; flex-shrink:0;
  flex-direction:column; padding-top:6px;
}
.demo-v2__success-card-icon b{ display:block; font-size:.7rem; line-height:1; text-transform:uppercase; }
.demo-v2__success-card-icon span{ display:block; font-size:1.2rem; line-height:1; margin-top:2px; }
.demo-v2__success-card b{ display:block; color:var(--ink-1); font-size:.95rem; margin-bottom:2px; }
.demo-v2__success-card span{ color:var(--ink-4); font-size:.82rem; }
.demo-v2__success-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}

@media (max-width:980px){
  .demo-v2__grid{ grid-template-columns:1fr; }
  .demo-v2__side{ order:2; }
  .demo-v2__panel{ order:1; }
}
@media (max-width:640px){
  .demo-v2{ padding:24px 16px 60px; }
  .demo-v2__panel{ padding:24px 18px; border-radius:18px; }
  .demo-v2__progress{ padding:14px; gap:6px; }
  .demo-v2__step span{ display:none; }
  .demo-v2__step b{ width:26px; height:26px; }
  .demo-v2__day{ font-size:.82rem; }
  .demo-v2__actions{ flex-direction:column-reverse; gap:8px; }
  .demo-v2__actions .btn{ width:100%; }
}

/* ═══════════════════════════════════════════════
   ISO CERTIFICATIONS — badges & compliance strip
   ═══════════════════════════════════════════════ */

.iso-strip{
  padding:56px 0;
  background:linear-gradient(180deg,#fff 0%, var(--bg-soft) 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.iso-strip__head{
  text-align:center; max-width:720px; margin:0 auto 30px;
}
.iso-strip__head .eyebrow{ margin-inline:auto; }
.iso-strip__head h2{
  font-size:clamp(1.5rem, 2.4vw, 2rem); margin:14px 0 8px;
}
.iso-strip__head p{ color:var(--ink-3); font-size:1rem; }

.iso-strip__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.iso-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:24px 20px; display:flex; gap:16px; align-items:flex-start;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease);
}
.iso-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(176,26,46,.2); }
.iso-card__seal{
  flex-shrink:0; width:68px; height:68px; position:relative;
  display:grid; place-items:center;
  border-radius:50%;
  background:conic-gradient(from 0deg, #B01A2E, #E7457A, #FFB946, #B01A2E);
  padding:3px;
}
.iso-card__seal::before{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:#fff;
}
.iso-card__seal svg{ position:relative; width:36px; height:36px; }
.iso-card__body b{
  display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  color:var(--ink-1); font-size:1.02rem; margin-bottom:2px;
}
.iso-card__body small{ display:block; font-size:.78rem; color:var(--ink-4); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:6px; }
.iso-card__body span{ font-size:.88rem; color:var(--ink-3); line-height:1.5; }

/* Compact inline ISO marks (used in footer / auth panels) */
.iso-marks{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;
}
.iso-mark{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:#E6E8EE;
}
.iso-mark svg{ width:16px; height:16px; color:var(--gold-2); }
.iso-mark--light{
  background:#fff; border-color:var(--line); color:var(--ink-2);
}
.iso-mark--light svg{ color:var(--brand-1); }

/* Hero trust row addition */
.hero__trust{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;
}
.hero__trust .iso-mark{ background:rgba(255,255,255,.7); border-color:var(--line); color:var(--ink-2); backdrop-filter:blur(4px); }
.hero__trust .iso-mark svg{ color:var(--brand-1); }

/* Responsive */
@media (max-width: 980px){
  .iso-strip__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .iso-strip__grid{ grid-template-columns:1fr; }
  .iso-card{ padding:20px; }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY — skip link
   ═══════════════════════════════════════════════ */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink-1); color:#fff; padding:10px 16px;
  border-radius:0 0 10px 0; z-index:100;
  font-weight:600; font-size:.92rem;
}
.skip-link:focus{ left:0; outline:3px solid var(--gold-2); }

/* ═══════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ═══════════════════════════════════════════════ */
.wa-fab{
  position:fixed; bottom:22px; right:22px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px 12px 14px; border-radius:999px;
  background:#25D366; color:#fff; font-weight:700; font-size:.95rem;
  box-shadow:0 12px 28px rgba(37,211,102,.38), 0 4px 8px rgba(0,0,0,.12);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration:none;
}
.wa-fab:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 18px 36px rgba(37,211,102,.45); }
.wa-fab:focus-visible{ outline:3px solid #128C7E; outline-offset:3px; }
.wa-fab svg{ width:24px; height:24px; fill:#fff; }
.wa-fab__pulse{
  position:absolute; inset:-4px; border-radius:inherit;
  background:#25D366; opacity:.35; animation:wa-pulse 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.35; }
  100%{ transform:scale(1.5); opacity:0; }
}
@media (max-width: 560px){
  .wa-fab{ bottom:16px; right:16px; padding:11px 14px; font-size:.85rem; }
  .wa-fab__label{ display:none; }
}

/* ═══════════════════════════════════════════════
   COOKIE CONSENT BANNER  (dead styles — kept for backward compat)
   ═══════════════════════════════════════════════ */
.cookie{
  position:fixed; bottom:20px; left:20px; right:20px; z-index:70;
  max-width:560px; margin:0 auto;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px rgba(16,24,40,.18);
  padding:20px 22px;
  transform:translateY(140%); opacity:0;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.cookie.is-open{ transform:translateY(0); opacity:1; }
.cookie h3{ font-size:1.05rem; margin-bottom:6px; }
.cookie p{ font-size:.9rem; margin-bottom:14px; color:var(--ink-3); }
.cookie p a{ color:var(--brand-1); font-weight:600; text-decoration:underline; }
.cookie__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cookie__actions .btn{ padding:10px 14px; font-size:.88rem; border-radius:10px; }
.cookie__actions .btn--link{
  background:transparent; color:var(--ink-3); border:0; text-decoration:underline;
}
@media (max-width: 560px){
  .cookie{ left:12px; right:12px; bottom:84px; padding:16px; }
}

/* ═══════════════════════════════════════════════
   AUTH PAGES  (Sign in / Sign up / Demo)
   ═══════════════════════════════════════════════ */

.auth{
  min-height:calc(100vh - 64px);
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--bg);
}
.auth__panel{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,179,70,.22), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(231,69,122,.28), transparent 50%),
    linear-gradient(140deg, #1a0008 0%, #0B0F1A 100%);
  padding:56px 52px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth__panel::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 80%);
  pointer-events:none;
}
.auth__panel > *{ position:relative; z-index:1; }
.auth__panel .brand{ color:#fff; }
.auth__panel .brand__name span{ color:var(--gold-2); }
.auth__panel h1{ font-size:clamp(2rem, 3vw, 2.6rem); color:#fff; margin-top:40px; max-width:440px; }
.auth__panel p.lead{ color:#C5CAD7; max-width:440px; margin-top:16px; font-size:1.05rem; }
.auth__badges{ display:flex; flex-direction:column; gap:14px; margin-top:32px; max-width:440px; }
.auth__badges div{
  display:flex; align-items:center; gap:12px; font-size:.95rem; color:#E6E8EE;
}
.auth__badges div svg{ width:22px; height:22px; padding:4px; border-radius:50%; background:rgba(255,211,106,.18); color:var(--gold-2); flex-shrink:0; }
.auth__testimonial{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:20px; max-width:440px; margin-top:auto;
}
.auth__testimonial p{ color:#E6E8EE; font-size:.95rem; font-style:italic; }
.auth__testimonial footer{ display:flex; align-items:center; gap:12px; margin-top:12px; color:#9FA8BE; font-size:.82rem; }
.auth__testimonial footer .avatar{ width:36px; height:36px; border-radius:10px; }

.auth__form-wrap{
  display:flex; align-items:center; justify-content:center;
  padding:56px 48px; background:var(--bg-soft);
}
.auth__card{
  width:100%; max-width:460px; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding:40px; box-shadow:var(--shadow-md);
}
.auth__card h2{ font-size:1.8rem; margin-bottom:6px; }
.auth__card > p{ color:var(--ink-4); font-size:.95rem; margin-bottom:26px; }
.auth__form{ display:flex; flex-direction:column; gap:14px; }
.auth__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.82rem; font-weight:600; color:var(--ink-2); }
.field input, .field select, .field textarea{
  border:1px solid var(--line); background:#fff; padding:12px 14px;
  font-size:.95rem; border-radius:12px; color:var(--ink-1); font-family:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand-1);
  box-shadow:0 0 0 4px rgba(176,26,46,.12);
}
.field textarea{ resize:vertical; min-height:110px; }
.field--check{ flex-direction:row; align-items:center; gap:10px; }
.field--check input{ width:18px; height:18px; accent-color:var(--brand-1); }
.field--check label{ font-size:.88rem; color:var(--ink-3); font-weight:500; }
.field--pwd{ position:relative; }
.field--pwd button{
  position:absolute; right:10px; top:30px; padding:6px 10px;
  border-radius:8px; color:var(--ink-4); font-size:.78rem; font-weight:600;
}
.field--pwd button:hover{ color:var(--brand-1); background:#FFECEF; }
.auth__options{ display:flex; justify-content:space-between; align-items:center; font-size:.88rem; }
.auth__options a{ color:var(--brand-1); font-weight:600; }
.auth__divider{ display:flex; align-items:center; gap:12px; color:var(--ink-4); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; margin:6px 0; }
.auth__divider::before,.auth__divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.oauth{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.oauth button{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font-weight:600; font-size:.9rem; color:var(--ink-1);
  transition:border-color .2s var(--ease), transform .15s var(--ease);
}
.oauth button:hover{ border-color:var(--ink-2); transform:translateY(-1px); }
.auth__foot{ text-align:center; margin-top:18px; font-size:.92rem; color:var(--ink-3); }
.auth__foot a{ color:var(--brand-1); font-weight:600; }
.pwstrength{ display:flex; gap:4px; margin-top:4px; }
.pwstrength span{ flex:1; height:4px; border-radius:2px; background:#EEF0F6; transition:background .25s var(--ease); }
.pwstrength[data-level="1"] span:nth-child(-n+1){ background:#EF4444; }
.pwstrength[data-level="2"] span:nth-child(-n+2){ background:#F59E0B; }
.pwstrength[data-level="3"] span:nth-child(-n+3){ background:#FFB946; }
.pwstrength[data-level="4"] span{ background:#1EA97C; }

/* Demo page calendar style */
.demo-slots{ display:flex; gap:8px; flex-wrap:wrap; }
.demo-slots label{
  border:1px solid var(--line); border-radius:10px; padding:8px 12px;
  font-size:.88rem; font-weight:600; cursor:pointer; background:#fff;
  transition:all .2s var(--ease);
}
.demo-slots input{ position:absolute; opacity:0; pointer-events:none; }
.demo-slots input:checked + label{ border-color:var(--brand-1); background:#FFECEF; color:var(--brand-1); }

/* ═══════════════════════════════════════════════
   LEGAL PAGES  (Terms / Privacy)
   ═══════════════════════════════════════════════ */

.legal-hero{
  padding:80px 0 40px; text-align:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,179,70,.12), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(231,69,122,.12), transparent 45%),
    var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.legal-hero h1{ max-width:800px; margin:18px auto 10px; font-size:clamp(2rem,4vw,3rem); }
.legal-hero p{ max-width:600px; margin:0 auto; font-size:1.05rem; }
.legal-hero time{ color:var(--ink-4); font-size:.88rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }

.legal{
  display:grid; grid-template-columns:260px 1fr; gap:48px;
  padding:64px 24px 96px; max-width:var(--container); margin:0 auto;
}
.legal__toc{
  position:sticky; top:96px; align-self:flex-start;
  max-height:calc(100vh - 120px); overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:20px; font-size:.9rem;
}
.legal__toc h4{ font-size:.78rem; font-weight:700; color:var(--ink-4); letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.legal__toc ol{ list-style:none; padding:0; margin:0; counter-reset:legal; display:flex; flex-direction:column; gap:6px; }
.legal__toc li{ counter-increment:legal; }
.legal__toc a{
  display:flex; gap:8px; padding:6px 10px; border-radius:8px;
  color:var(--ink-3); font-weight:500;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.legal__toc a::before{
  content:counter(legal,decimal-leading-zero); color:var(--ink-4); font-weight:700;
  flex-shrink:0;
}
.legal__toc a:hover,.legal__toc a.is-active{ background:#FFECEF; color:var(--brand-1); }
.legal__toc a:hover::before,.legal__toc a.is-active::before{ color:var(--brand-1); }

.legal__body{ max-width:780px; }
.legal__body h2{
  font-size:1.5rem; margin:48px 0 14px; padding-top:12px;
  scroll-margin-top:96px;
}
.legal__body h2:first-child{ margin-top:0; }
.legal__body h3{ font-size:1.1rem; margin:24px 0 10px; }
.legal__body p{ color:var(--ink-2); font-size:1rem; margin-bottom:14px; line-height:1.7; }
.legal__body ul, .legal__body ol{ margin:0 0 16px 0; padding-left:22px; color:var(--ink-2); }
.legal__body ul li, .legal__body ol li{ margin-bottom:8px; line-height:1.6; }
.legal__body strong{ color:var(--ink-1); }
.legal__body a{ color:var(--brand-1); font-weight:600; border-bottom:1px dashed rgba(176,26,46,.3); }
.legal__body a:hover{ border-bottom-style:solid; }
.legal__callout{
  background:var(--gradient-soft); border-radius:14px; padding:18px 22px;
  border:1px solid rgba(176,26,46,.14); margin:20px 0;
}
.legal__callout p{ margin:0; }
.legal__body table{
  width:100%; border-collapse:collapse; font-size:.92rem;
  margin:14px 0 20px; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.legal__body table th, .legal__body table td{
  padding:12px 14px; text-align:left; border-bottom:1px solid var(--line);
}
.legal__body table th{ background:var(--bg-soft); font-weight:700; color:var(--ink-1); font-size:.88rem; }
.legal__body table tr:last-child td{ border-bottom:0; }

/* Auth/Legal responsive */
@media (max-width: 980px){
  .auth{ grid-template-columns:1fr; }
  .auth__panel{ padding:40px 28px; }
  .auth__panel h1{ font-size:1.7rem; margin-top:24px; }
  .auth__testimonial{ display:none; }
  .auth__form-wrap{ padding:40px 20px; }
  .legal{ grid-template-columns:1fr; gap:24px; padding:40px 24px 80px; }
  .legal__toc{ position:static; max-height:none; }
}
@media (max-width: 560px){
  .auth__card{ padding:28px 22px; border-radius:18px; }
  .auth__row{ grid-template-columns:1fr; }
  .oauth{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════
   V2.2  —  SIGN-IN  &  DEMO  improvements
   ═══════════════════════════════════════════════ */

/* ── Sign-in interactive aurora (mouse-aware) ─── */
.signin-v2 .aurora-fx{
  position:absolute; inset:-15% -10%; pointer-events:none; z-index:0;
  filter:blur(80px) saturate(160%); opacity:.85;
}
.signin-v2 .aurora-fx::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(38% 50% at var(--mx,30%) var(--my,30%), rgba(176,26,46,.55) 0%, transparent 60%),
    radial-gradient(40% 50% at calc(100% - var(--mx,30%)) calc(100% - var(--my,30%)), rgba(255,179,70,.45) 0%, transparent 60%),
    radial-gradient(45% 55% at 60% 80%, rgba(231,69,122,.45) 0%, transparent 60%);
  transition:background-position .6s var(--ease);
}
[data-theme="dark"] .signin-v2 .aurora-fx{ opacity:.55; filter:blur(100px) saturate(180%); }
[data-theme="light"] .signin-v2 .aurora-fx::before{
  background:
    radial-gradient(38% 50% at var(--mx,30%) var(--my,30%), rgba(255,182,193,.6) 0%, transparent 60%),
    radial-gradient(40% 50% at calc(100% - var(--mx,30%)) calc(100% - var(--my,30%)), rgba(255,218,147,.55) 0%, transparent 60%),
    radial-gradient(45% 55% at 60% 80%, rgba(255,210,220,.5) 0%, transparent 60%);
}

/* ── Floating HRM icon orbs in sign-in bg ───── */
.signin-orb{
  position:absolute; pointer-events:none; z-index:1;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  animation:orbDrift 14s ease-in-out infinite;
}
[data-theme="light"] .signin-orb{
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.4));
  border-color:rgba(176,26,46,.14);
  box-shadow:0 14px 34px rgba(176,26,46,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Icon inside each orb — independent motion */
.signin-orb svg{
  width:48%; height:48%;
  color:var(--gold-2);
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
  filter:drop-shadow(0 6px 14px rgba(255,179,70,.35));
  animation:var(--icon-anim, iconBob) var(--icon-dur, 4s) ease-in-out infinite;
}
[data-theme="light"] .signin-orb svg{
  color:var(--brand-1);
  filter:drop-shadow(0 6px 14px rgba(176,26,46,.22));
}

/* Per-orb position, size, drift offset */
.signin-orb--1{ width:120px; height:120px; top:10%;  left:6%;   animation-delay:0s; }
.signin-orb--2{ width:80px;  height:80px;  top:16%;  right:10%; animation-delay:-3s; }
.signin-orb--3{ width:140px; height:140px; bottom:12%; right:6%; animation-delay:-6s; }
.signin-orb--4{ width:70px;  height:70px;  bottom:18%; left:10%; animation-delay:-9s; }
.signin-orb--5{ width:90px;  height:90px;  top:42%;  left:4%;   animation-delay:-4s; }
.signin-orb--6{ width:75px;  height:75px;  top:50%;  right:5%;  animation-delay:-7s; }
.signin-orb--7{ width:60px;  height:60px;  top:6%;   left:38%;  animation-delay:-2s; }
.signin-orb--8{ width:55px;  height:55px;  bottom:8%; left:42%; animation-delay:-5s; }

/* Drift = subtle gentle hover */
@keyframes orbDrift{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%    { transform:translate(18px,-22px) rotate(6deg); }
}

/* Icon-level animations (apply via --icon-anim) */
.icon-bob   { --icon-anim:iconBob;   --icon-dur:3.6s; }
.icon-spin  { --icon-anim:iconSpin;  --icon-dur:9s;   }
.icon-pulse { --icon-anim:iconPulse; --icon-dur:2.6s; }
.icon-swing { --icon-anim:iconSwing; --icon-dur:4s;   }
.icon-tick  { --icon-anim:iconTick;  --icon-dur:6s;   }
.icon-pop   { --icon-anim:iconPop;   --icon-dur:3.2s; }
.icon-wave  { --icon-anim:iconWave;  --icon-dur:5s;   }

@keyframes iconBob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}
@keyframes iconSpin{
  to{ transform:rotate(360deg); }
}
@keyframes iconPulse{
  0%,100%{ transform:scale(1);   filter:drop-shadow(0 6px 14px rgba(255,179,70,.35)); }
  50%    { transform:scale(1.12); filter:drop-shadow(0 10px 22px rgba(255,179,70,.55)); }
}
@keyframes iconSwing{
  0%,100%{ transform:rotate(-12deg); }
  50%    { transform:rotate(12deg); }
}
@keyframes iconTick{   /* clock-hand tick */
  0%, 24%{ transform:rotate(0deg); }
  25%, 49%{ transform:rotate(90deg); }
  50%, 74%{ transform:rotate(180deg); }
  75%, 99%{ transform:rotate(270deg); }
  100%   { transform:rotate(360deg); }
}
@keyframes iconPop{
  0%,100%{ transform:scale(1); }
  60%    { transform:scale(.88); }
}
@keyframes iconWave{
  0%,100%{ transform:translateX(0); }
  50%    { transform:translateX(6px); }
}

/* Tier of color accents — every other orb tints toward different brand stop */
.signin-orb--2 svg{ color:#E7457A; filter:drop-shadow(0 6px 14px rgba(231,69,122,.4)); }
.signin-orb--3 svg{ color:#FFD36A; filter:drop-shadow(0 6px 14px rgba(255,179,70,.45)); }
.signin-orb--5 svg{ color:#4FC997; filter:drop-shadow(0 6px 14px rgba(79,201,151,.4)); }
.signin-orb--7 svg{ color:#5FA8FF; filter:drop-shadow(0 6px 14px rgba(95,168,255,.4)); }
[data-theme="light"] .signin-orb--2 svg{ color:#C21E5B; filter:drop-shadow(0 6px 14px rgba(194,30,91,.25)); }
[data-theme="light"] .signin-orb--3 svg{ color:#C47300; filter:drop-shadow(0 6px 14px rgba(196,115,0,.25)); }
[data-theme="light"] .signin-orb--5 svg{ color:#0F9960; filter:drop-shadow(0 6px 14px rgba(15,153,96,.25)); }
[data-theme="light"] .signin-orb--7 svg{ color:#1E5FD6; filter:drop-shadow(0 6px 14px rgba(30,95,214,.25)); }

@media (max-width:1024px){
  .signin-orb--7, .signin-orb--8{ display:none; }
}
@media (max-width:760px){
  .signin-orb{ display:none; }
}

/* ── Breathing logo ────────────────────────────── */
.signin-v2__logo-mark{ animation:logoBreathe 4s ease-in-out infinite; }
@keyframes logoBreathe{
  0%,100%{ transform:scale(1); box-shadow:0 20px 40px rgba(176,26,46,.45), inset 0 1px 0 rgba(255,255,255,.2); }
  50%    { transform:scale(1.04); box-shadow:0 28px 56px rgba(176,26,46,.6), 0 0 0 8px rgba(176,26,46,.08), inset 0 1px 0 rgba(255,255,255,.25); }
}

/* ── Trust mini-stats above sign-in card ─────── */
.signin-trust{
  position:relative; z-index:2;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin:0 auto 20px; max-width:460px;
}
.signin-trust__chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(22,26,42,.72); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  font-size:.78rem; color:#C5CAD7;
}
.signin-trust__chip b{ color:#fff; font-weight:700; }
.signin-trust__chip svg{ width:14px; height:14px; color:var(--gold-2); }
.signin-trust__chip .live-dot{
  width:8px; height:8px; border-radius:50%; background:#1EA97C;
  box-shadow:0 0 0 0 rgba(30,169,124,.6); animation:pulseDot 1.8s ease-out infinite;
}
[data-theme="light"] .signin-trust__chip{
  background:rgba(255,255,255,.85); border-color:var(--line); color:var(--ink-3);
  box-shadow:0 6px 16px rgba(11,15,26,.06);
}
[data-theme="light"] .signin-trust__chip b{ color:var(--ink-1); }
[data-theme="light"] .signin-trust__chip svg{ color:var(--brand-1); }

/* ── Improved passkey button — biometric icon ─── */
.signin-v2__passkey{ position:relative; overflow:hidden; }
.signin-v2__passkey::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,211,106,.25) 50%, transparent 70%);
  transform:translateX(-100%);
  animation:passkeyShimmer 4s ease-in-out infinite;
}
@keyframes passkeyShimmer{ to{ transform:translateX(100%); } }
.signin-v2__passkey svg{ animation:fingerprintPulse 2.4s ease-in-out infinite; }
@keyframes fingerprintPulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.1); }
}

/* ── Sign-in input — animated focus ring ────── */
.signin-v2 .field input{ position:relative; transition:all .25s var(--ease); }
.signin-v2 .field--valid input{ border-color:#1EA97C; padding-right:38px; }
.signin-v2 .field--valid::after{
  content:""; position:absolute; right:14px; bottom:14px; width:18px; height:18px;
  border-radius:50%; background:#1EA97C
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
    center / 60% no-repeat;
  animation:checkPop .35s var(--ease) both;
}
@keyframes checkPop{
  from{ transform:scale(.4); opacity:0; }
  to  { transform:scale(1); opacity:1; }
}

/* ── Sign-in: floating help/support pill ─────── */
.signin-help{
  position:absolute; top:24px; left:24px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(22,26,42,.6); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  font-size:.82rem; color:#C5CAD7;
}
.signin-help a{ color:var(--gold-2); font-weight:600; text-decoration:none; }
[data-theme="light"] .signin-help{
  background:rgba(255,255,255,.85); border-color:var(--line); color:var(--ink-3);
}
[data-theme="light"] .signin-help a{ color:var(--brand-1); }
@media (max-width:560px){ .signin-help{ display:none; } }

/* ═══════════════════════════════════════════════
   DEMO v2.2 — Booking wizard improvements
   ═══════════════════════════════════════════════ */

/* ── Live "bookings today" floating badge ─── */
.demo-live{
  position:fixed; top:90px; right:22px; z-index:50;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  font-size:.85rem; color:var(--ink-2);
  animation:slideInRight .6s var(--ease) .8s both;
}
.demo-live b{ color:var(--ink-1); font-weight:700; }
.demo-live .live-dot{
  width:8px; height:8px; border-radius:50%; background:#1EA97C;
  box-shadow:0 0 0 0 rgba(30,169,124,.6);
  animation:pulseDot 1.8s ease-out infinite;
}
@keyframes slideInRight{
  from{ transform:translateX(100%) translateY(-50%); opacity:0; }
  to  { transform:translateX(0) translateY(0); opacity:1; }
}
@media (max-width:760px){ .demo-live{ top:80px; right:14px; padding:8px 12px; font-size:.78rem; } }

/* ── Animated progress bar with icons ────────── */
.demo-v2__progress{ position:relative; }
.demo-v2__step b{ position:relative; }
.demo-v2__step.is-active b{
  background:var(--gradient-brand); color:#fff;
  box-shadow:0 8px 18px rgba(176,26,46,.4), 0 0 0 6px rgba(176,26,46,.12);
  animation:stepActive .5s var(--ease) both;
}
@keyframes stepActive{
  from{ transform:scale(.7); opacity:.4; }
  to  { transform:scale(1); opacity:1; }
}
.demo-v2__step-icon{ position:absolute; inset:0; display:none; place-items:center; color:#fff; }
.demo-v2__step.is-active .demo-v2__step-icon,
.demo-v2__step.is-done   .demo-v2__step-icon{ display:grid; }
.demo-v2__step.is-active .demo-v2__step-icon svg{ width:14px; height:14px; }
.demo-v2__step.is-done b{ background-image:none; }
.demo-v2__step.is-active b > i{ display:none; }
.demo-v2__step b > i{ font-style:normal; }

/* Animated fill in step-line */
.demo-v2__step-line{ position:relative; overflow:hidden; }
.demo-v2__step-line::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#B01A2E,#E7457A,#FFB946);
  transform:translateX(-101%); transition:transform .55s var(--ease);
}
.demo-v2__step-line.is-done::after{ transform:translateX(0); }

/* ── Pane slide transitions ───────────────────── */
.demo-v2__pane{ transform:translateX(0); opacity:1; transition:none; }
.demo-v2__pane[data-slide="in-right"]{ animation:slideInR .45s var(--ease) both; }
.demo-v2__pane[data-slide="in-left"]{  animation:slideInL .45s var(--ease) both; }
@keyframes slideInR{ from{ transform:translateX(40px); opacity:0; filter:blur(4px); } to{ transform:none; opacity:1; filter:blur(0); } }
@keyframes slideInL{ from{ transform:translateX(-40px); opacity:0; filter:blur(4px); } to{ transform:none; opacity:1; filter:blur(0); } }

/* ── Inline field-validation checkmarks ─────── */
.demo-v2__panel .field{ position:relative; }
.demo-v2__panel .field--valid input,
.demo-v2__panel .field--valid select,
.demo-v2__panel .field--valid textarea{
  border-color:#1EA97C !important; padding-right:38px;
}
.demo-v2__panel .field--valid::after{
  content:""; position:absolute; right:14px; bottom:14px; width:18px; height:18px;
  border-radius:50%; background:#1EA97C
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
    center / 60% no-repeat;
  animation:checkPop .35s var(--ease) both;
}

/* ── Popular time badge on slots ───────────── */
.demo-v2__times{ position:relative; }
.demo-v2__times label{ position:relative; }
.demo-v2__times .pop-tag{
  position:absolute; top:-7px; right:8px;
  font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px;
  background:linear-gradient(135deg,#FFB946,#E7457A); color:#fff;
  box-shadow:0 4px 10px rgba(231,69,122,.35);
}

/* ── Calendar — popular day badges ────────── */
.demo-v2__day .pop{
  position:absolute; top:2px; right:3px; width:5px; height:5px; border-radius:50%;
  background:#FFB946; box-shadow:0 0 4px rgba(255,185,70,.6);
}
.demo-v2__day{ position:relative; }

/* ── Expert card v2.2 — online pulse + response */
.demo-v2__expert{ position:relative; overflow:hidden; }
.demo-v2__expert::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:conic-gradient(from var(--ang2,0deg), transparent 0%, rgba(176,26,46,.4) 14%, transparent 30%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; opacity:.5; pointer-events:none;
  animation:rotateAng2 8s linear infinite;
}
@keyframes rotateAng2{ to{ --ang2:360deg; } }
.demo-v2__expert-resp{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  padding:6px 12px; border-radius:999px;
  background:rgba(30,169,124,.12); color:#0f9960;
  font-size:.78rem; font-weight:600;
}
.demo-v2__expert-resp .live-dot{ width:6px; height:6px; }
[data-theme="dark"] .demo-v2__expert-resp{ background:rgba(30,169,124,.18); color:#4FC997; }

/* ═══════════════════════════════════════════════
   VENDOR REGISTRATION  —  form layout
   ═══════════════════════════════════════════════ */

.vendor-page{
  position:relative; min-height:calc(100vh - 64px);
  padding:48px 24px 96px;
  background:
    radial-gradient(900px 400px at 90% 0%, rgba(231,69,122,.10), transparent 55%),
    radial-gradient(700px 400px at 10% 100%, rgba(255,179,70,.08), transparent 55%),
    var(--bg);
  overflow:hidden;
}
.vendor-wrap{
  max-width:920px; margin:0 auto; position:relative; z-index:2;
}
.vendor-hero{ text-align:left; margin-bottom:32px; }
.vendor-hero h1{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  margin:14px 0 8px;
}
.vendor-hero p{ color:var(--ink-3); font-size:1rem; }

/* Section card */
.vendor-section{
  background:var(--surface); border:1px solid var(--line); border-radius:22px;
  padding:32px; margin-bottom:24px; box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
}
.vendor-section__head{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.vendor-section__num{
  width:44px; height:44px; border-radius:14px;
  background:var(--gradient-brand); color:#fff;
  display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.05rem;
  box-shadow:0 10px 20px rgba(176,26,46,.3);
  flex-shrink:0;
}
.vendor-section__head h2{
  font-size:1.3rem; margin:0;
}
.vendor-section__head small{
  display:block; font-size:.82rem; color:var(--ink-4); margin-top:2px;
}

/* Form grid */
.vendor-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(2, 1fr);
}
.vendor-grid .field--full{ grid-column:1 / -1; }
@media (max-width:640px){
  .vendor-grid{ grid-template-columns:1fr; }
}

/* Required-mark refinement */
.req-mark{ color:var(--brand-1); font-weight:700; margin-left:2px; }

/* File-upload cards (replaces ugly native button) */
.file-card{
  display:flex; flex-direction:column; gap:6px;
}
.file-card label.btn-file{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-radius:14px; cursor:pointer;
  background:var(--surface-2); border:2px dashed var(--line);
  transition:all .25s var(--ease);
}
.file-card label.btn-file:hover{
  border-color:var(--brand-1); background:var(--chip-bg);
}
.file-card label.btn-file.is-dragover{
  border-color:var(--brand-1); background:var(--chip-bg);
  transform:scale(1.01);
}
.file-card__icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, rgba(176,26,46,.12), rgba(255,179,70,.15));
  display:grid; place-items:center; color:var(--brand-1);
}
.file-card__icon svg{ width:22px; height:22px; }
.file-card__body{ flex:1; min-width:0; }
.file-card__body b{ display:block; color:var(--ink-1); font-weight:700; font-size:.95rem; }
.file-card__body span{ display:block; color:var(--ink-4); font-size:.82rem; margin-top:2px; }
.file-card input[type="file"]{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }
.file-card.is-filled label.btn-file{
  border-style:solid; border-color:#1EA97C;
  background:rgba(30,169,124,.06);
}
.file-card.is-filled .file-card__icon{
  background:linear-gradient(135deg,#1EA97C,#4FC997); color:#fff;
}

/* Phone with country code */
.phone-input{
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:12px;
  background:var(--input-bg); overflow:hidden;
  transition:all .25s var(--ease);
}
.phone-input:focus-within{
  border-color:var(--brand-1); box-shadow:0 0 0 4px rgba(176,26,46,.12);
}
.phone-input select{
  border:0 !important; background:var(--surface-2) !important;
  padding:0 14px !important; min-width:110px; max-width:130px;
  font-family:inherit; font-size:.95rem; color:var(--ink-1);
  border-right:1px solid var(--line) !important; border-radius:0 !important;
  box-shadow:none !important;
}
.phone-input input{
  flex:1; border:0 !important; background:transparent !important;
  padding:12px 14px !important; font-size:.95rem; color:var(--ink-1);
  border-radius:0 !important; box-shadow:none !important;
}
.phone-input input:focus, .phone-input select:focus{ outline:none; }

/* Vendor sticky save bar */
.vendor-actions{
  position:sticky; bottom:20px; z-index:30;
  background:var(--surface);
  border:1px solid var(--line); border-radius:18px;
  padding:14px 22px; margin-top:24px;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.vendor-actions__msg{ flex:1; font-size:.88rem; color:var(--ink-3); }
.vendor-actions__msg b{ color:var(--ink-1); font-weight:700; }
.vendor-progress{
  flex:1; min-width:140px; height:6px; border-radius:3px; background:var(--line);
  overflow:hidden; position:relative;
}
.vendor-progress span{
  display:block; height:100%; width:var(--p,0%);
  background:var(--gradient-brand);
  transition:width .35s var(--ease);
}
.vendor-progress + .vendor-actions__msg{ flex:0 0 auto; }

@media (max-width:640px){
  .vendor-section{ padding:24px 20px; border-radius:18px; }
  .vendor-section__head{ gap:10px; }
  .vendor-section__num{ width:38px; height:38px; }
  .vendor-actions{ padding:12px 16px; }
}

/* ── ICS download + share buttons in success card ─ */
.demo-v2__success-extras{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:18px;
  padding-top:18px; border-top:1px dashed var(--line);
}
.demo-v2__success-extras a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-2); font-size:.85rem; font-weight:600;
  transition:all .2s var(--ease);
}
.demo-v2__success-extras a:hover{ color:var(--brand-1); border-color:var(--brand-1); transform:translateY(-2px); }
.demo-v2__success-extras a svg{ width:16px; height:16px; }