/* ═══════════════════════════════════════════════════════
   HowToRegisterNow — Ultra Premium Redesign
   Font: DM Serif Display + Plus Jakarta Sans
   Aesthetic: Luxury dark editorial with neon accents
═══════════════════════════════════════════════════════ */
/* Fonts loaded via /assets/fonts.css (self-hosted, GDPR compliant) */

:root{
  --bg:#04080f;
  --bg2:#070d1a;
  --ink:#e8eef8;
  --ink2:#a8b8d0;
  --white:#ffffff;
  --line:rgba(148,163,184,.12);
  --line2:rgba(148,163,184,.22);
  --blue:#3b82f6;
  --violet:#8b5cf6;
  --cyan:#22d3ee;
  --green:#22c55e;
  --gold:#f59e0b;
  --pink:#f472b6;
  --red:#ef4444;
  --r:28px;
  --r-lg:40px;
  --r-xl:52px;
  --shadow:0 40px 120px rgba(0,0,0,.55);
  --shadow-sm:0 20px 60px rgba(0,0,0,.35);
  --glow-blue:0 0 80px rgba(59,130,246,.25);
  --glow-violet:0 0 80px rgba(139,92,246,.25);
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* ── Skip link ── */
.skip-link{position:absolute;left:-999px;top:10px;background:#fff;color:#000;padding:10px 18px;border-radius:12px;z-index:999;font-weight:700}
.skip-link:focus{left:10px}

/* ═══════════════════
   BACKGROUND CANVAS
═══════════════════ */
.site-shell{
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(59,130,246,.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 5%, rgba(139,92,246,.16) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(34,211,238,.10) 0%, transparent 50%),
    linear-gradient(180deg, #04080f 0%, #060c18 50%, #04080f 100%);
  position:relative;
}

/* Animated grain overlay */
.site-shell::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
  opacity:.4;
}

/* ═══════════════════
   TOPBAR / NAV
═══════════════════ */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(4,8,15,.72);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav{
  max-width:1280px;
  margin:auto;
  padding:0 28px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--white);
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.brand-mark{
  width:38px;height:38px;
  border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6 55%,#f472b6);
  font-size:1.1rem;
  font-weight:900;
  color:#fff;
  box-shadow:0 8px 28px rgba(99,102,241,.45), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .2s ease, box-shadow .2s ease;
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08);box-shadow:0 12px 36px rgba(139,92,246,.55)}
.menu{display:flex;align-items:center;gap:4px}
.menu a,.dropdown>button{
  appearance:none;border:0;background:transparent;
  color:rgba(255,255,255,.72);
  font:inherit;font-family:var(--sans);font-weight:700;font-size:.9rem;
  text-decoration:none;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:.15s ease;letter-spacing:.005em;
}
.menu a:hover,.dropdown>button:hover,.menu a:focus,.dropdown>button:focus{
  background:rgba(255,255,255,.09);color:#fff;
}
.menu .accent{
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:#fff;padding:9px 18px;
  box-shadow:0 8px 24px rgba(99,102,241,.38);
}
.menu .accent:hover{filter:brightness(1.12);background:linear-gradient(135deg,#3b82f6,#8b5cf6)}
.dropdown{position:relative;z-index:30}
.dropdown::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:100%;
  height:18px;
  display:none;
}
.dropdown:hover::after,.dropdown:focus-within::after{display:block}
.dropdown-panel{
  position:absolute;right:0;top:calc(100% + 4px);
  width:200px;
  background:rgba(8,14,28,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:8px;
  box-shadow:0 28px 70px rgba(0,0,0,.5);
  z-index:1000;
  backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;
  transform:translateY(8px) scale(.97);
  transition:.16s ease;
}
.dropdown:hover .dropdown-panel,.dropdown:focus-within .dropdown-panel{
  opacity:1;pointer-events:auto;transform:translateY(0) scale(1);
}
.dropdown-panel a{
  display:block;color:rgba(255,255,255,.82);
  border-radius:12px;padding:9px 13px;
  transition:.12s ease;font-weight:700;font-size:.9rem;
}
.dropdown-panel a:hover{background:rgba(255,255,255,.09);color:#fff}

.nav-toggle{display:none}
.nav-button{display:none}

/* ═══════════════════
   LAYOUT
═══════════════════ */
.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 28px 80px;
  position:relative;
  z-index:1;
}

/* ═══════════════════
   HERO
═══════════════════ */
.hero{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:32px;
  align-items:center;
  padding:80px 0 60px;
  color:#fff;
}
.hero-card{
  position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl);
  padding:44px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px);
  overflow:hidden;
}
.hero-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(139,92,246,.4),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.hero-card::after{
  content:'';position:absolute;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(99,102,241,.12),transparent 70%);
  top:-100px;right:-200px;
  pointer-events:none;
}
.eyebrow,.section-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  background:rgba(59,130,246,.15);
  border:1px solid rgba(59,130,246,.3);
  color:#93c5fd;
  font-weight:800;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
}
.section-kicker{
  background:rgba(99,102,241,.12);
  border-color:rgba(99,102,241,.25);
  color:#a5b4fc;
}
.section-kicker.light{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.9);
}

h1,h2,h3{line-height:1.05;letter-spacing:-.04em}
h1{font-family:var(--serif);font-size:clamp(2.8rem,6.5vw,5.2rem);margin:18px 0;color:#fff;font-weight:400}
h2{font-family:var(--serif);font-size:clamp(1.9rem,4vw,3.2rem);margin:10px 0 14px;color:#fff;font-weight:400}
h3{font-family:var(--sans);font-size:1.28rem;font-weight:800;margin:10px 0;color:#fff}
.lead,.hero-card p{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,.72);max-width:700px;line-height:1.75}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;border:0;border-radius:16px;
  padding:14px 22px;font-family:var(--sans);font-weight:800;font-size:.95rem;
  line-height:1.2;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  position:relative;overflow:hidden;
  letter-spacing:.01em;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);border-radius:inherit;pointer-events:none}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--a,#3b82f6),var(--b,#8b5cf6));
  color:#fff;
  box-shadow:0 16px 44px rgba(99,102,241,.35);
}
.btn-primary:hover{box-shadow:0 20px 55px rgba(99,102,241,.5);filter:brightness(1.08)}
.btn-ghost{
  background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.btn-light{background:#fff;color:#0f172a;font-weight:900}

.hero-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-strip span{
  padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.65);
  font-size:.84rem;font-weight:700;
}

/* ═══════════════════
   ORB / TRUST PANEL
═══════════════════ */
.orb-panel{position:relative}
.orb-panel::before{
  content:'';position:absolute;inset:-28px;
  border-radius:52px;
  background:conic-gradient(from 0deg,rgba(59,130,246,.35),rgba(139,92,246,.45),rgba(244,114,182,.3),rgba(34,211,238,.3),rgba(59,130,246,.35));
  filter:blur(42px);opacity:.55;
  animation:spin-glow 14s linear infinite;
}
@keyframes spin-glow{to{transform:rotate(360deg)}}
.trust-grid{
  position:relative;display:grid;
  grid-template-columns:1fr 1fr;gap:14px;
}
.trust-card{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.7);
  border-radius:28px;padding:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  transition:.2s ease;
}
.trust-card:hover{transform:translateY(-3px);box-shadow:0 28px 65px rgba(0,0,0,.3)}
.trust-card strong{
  display:block;font-size:2rem;line-height:1;color:#0f172a;
  font-family:var(--sans);font-weight:900;letter-spacing:-.04em;
}
.trust-card span{display:block;color:#64748b;font-weight:700;font-size:.88rem;margin-top:7px}
.floating-note{
  position:relative;margin-top:14px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.7);
  border-radius:24px;padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}
.floating-note strong{font-size:1rem;color:#0f172a;font-weight:900}
.floating-note span{display:block;color:#64748b;font-weight:600;font-size:.9rem;margin-top:6px}

/* ═══════════════════
   SECTIONS
═══════════════════ */
.white-section{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-lg);
  padding:40px;
  margin:28px 0 36px;
  box-shadow:var(--shadow-sm);
  color:var(--text,#0d1728);
}
.white-section h2,.white-section h3,.white-section strong{color:#0f172a}
.white-section p,.white-section li{color:#475569}
.section-head{
  display:flex;justify-content:space-between;
  gap:20px;align-items:flex-end;margin-bottom:28px;
}
.section-head p{max-width:560px;margin:0;color:#64748b;font-size:.95rem}

/* ═══════════════════
   BRAND CARDS
═══════════════════ */
.brand-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.brand-card{
  position:relative;overflow:hidden;
  border-radius:var(--r);
  background:#fff;
  border:1px solid #e2e8f0;
  padding:26px;
  min-height:440px;
  box-shadow:0 18px 50px rgba(2,6,23,.07);
  display:flex;flex-direction:column;
  transition:.22s ease;
}
.brand-card:hover{
  transform:translateY(-5px);
  box-shadow:0 32px 80px rgba(2,6,23,.14);
  border-color:color-mix(in srgb,var(--a) 35%,transparent);
}
.brand-card::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--a) 22%,transparent),transparent 10rem),
    linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(248,250,252,.9));
  pointer-events:none;transition:.22s ease;
}
.brand-card:hover::before{
  background:
    radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--a) 30%,transparent),transparent 14rem),
    linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(248,250,252,.9));
}
.brand-card>*{position:relative}
.card-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.card-top span{color:#64748b;font-size:.84rem;font-weight:700;line-height:1.4}
.logo-badge{
  width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:1rem;
  background:linear-gradient(135deg,var(--a,#3b82f6),var(--b,#8b5cf6));
  box-shadow:0 16px 40px color-mix(in srgb,var(--a) 30%,transparent);
  flex-shrink:0;letter-spacing:-.02em;
  transition:.22s ease;
}
.brand-card:hover .logo-badge{transform:scale(1.08) rotate(-4deg)}
.hero-badge{width:76px;height:76px;font-size:1.2rem;border-radius:22px}
.brand-card h3{font-size:1.22rem;margin:6px 0 8px;color:#0f172a;font-family:var(--sans);font-weight:900;letter-spacing:-.025em}
.brand-card p{color:#64748b;font-size:.9rem;line-height:1.65;flex:1}
.brand-card ul{padding-left:0;margin:12px 0;list-style:none}
.brand-card li{
  margin:6px 0;color:#475569;font-size:.88rem;font-weight:600;
  padding-left:18px;position:relative;
}
.brand-card li::before{content:'→';position:absolute;left:0;color:var(--a,#3b82f6);font-weight:900}
.card-link{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;
  text-decoration:none;font-weight:900;font-size:.9rem;
  color:#0f172a;
  border-top:1px solid #e2e8f0;padding-top:16px;
  transition:.15s ease;
}
.card-link:hover{color:var(--a,#3b82f6)}
.card-link span{color:var(--a,#3b82f6);font-size:1.1rem;transition:.15s ease}
.card-link:hover span{transform:translateX(3px);display:inline-block}
.mini-link{font-weight:900;text-decoration:none;color:#4338ca;font-size:.9rem}
.mini-link:hover{text-decoration:underline}

/* ═══════════════════
   SPLIT SECTION
═══════════════════ */
.split-section{
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:22px;margin:28px 0 36px;
}
.dark-panel{
  border-radius:var(--r-lg);padding:38px;
  color:#fff;
  background:linear-gradient(145deg,#0a1628,#0d1e38);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.10);
  position:relative;overflow:hidden;
}
.dark-panel::before{
  content:'';position:absolute;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(59,130,246,.15),transparent 70%);
  top:-80px;right:-80px;pointer-events:none;
}
.dark-panel>*{position:relative}
.dark-panel p{color:rgba(255,255,255,.72);font-size:.95rem}
.dark-panel h2{color:#fff}
.metric-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin-top:26px;
}
.metric-row div{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;padding:16px;
  transition:.2s ease;
}
.metric-row div:hover{background:rgba(255,255,255,.12)}
.metric-row strong{
  display:block;font-size:1.5rem;font-weight:900;
  background:linear-gradient(135deg,#60a5fa,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.metric-row span{font-size:.83rem;color:rgba(255,255,255,.6);margin-top:4px;display:block}

.white-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.white-mini-grid article,.content-card{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:var(--r);padding:26px;
  box-shadow:0 12px 36px rgba(2,6,23,.06);
  transition:.18s ease;
}
.white-mini-grid article:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(2,6,23,.10)}
.white-mini-grid article h3{color:#0f172a;font-family:var(--sans);font-weight:900;font-size:1.1rem;margin:0 0 8px}
.white-mini-grid article p{color:#64748b;font-size:.9rem;margin:0}

/* ═══════════════════
   FAQ
═══════════════════ */
.faq-preview{padding:36px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.faq details,.faq-preview details{
  border:1px solid #e2e8f0;border-radius:20px;
  padding:18px 20px;background:#fff;
  transition:.15s ease;cursor:pointer;
}
.faq details:hover,.faq-preview details:hover{border-color:#c7d2fe}
.faq details[open],.faq-preview details[open]{
  border-color:#818cf8;
  background:linear-gradient(135deg,#f8f8ff,#fff);
}
.faq summary,.faq-preview summary{
  font-weight:800;font-size:.95rem;color:#0f172a;
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq summary::-webkit-details-marker,.faq-preview summary::-webkit-details-marker{display:none}
.faq summary::after,.faq-preview summary::after{
  content:'+';font-size:1.3rem;font-weight:400;
  color:#818cf8;flex-shrink:0;transition:.2s ease;
  width:28px;height:28px;border-radius:8px;
  background:#eef2ff;display:grid;place-items:center;font-weight:900;
}
.faq details[open] summary::after,.faq-preview details[open] summary::after{content:'−'}
.faq p,.faq-preview p{margin:12px 0 0;color:#64748b;font-size:.9rem;line-height:1.7}

/* ═══════════════════
   BRAND / PAGE HERO
═══════════════════ */
.brand-hero,.page-hero{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:26px;align-items:stretch;
  padding:60px 0 30px;color:#fff;
}
.page-hero{grid-template-columns:1fr;padding:60px 0 24px}
.page-hero>div,.brand-copy{
  position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl);padding:40px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.page-hero>div::before,.brand-copy::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(135deg,rgba(255,255,255,.45),rgba(139,92,246,.35),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.brand-copy{
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--a,#3b82f6) 18%,#060c18),
    rgba(255,255,255,.05));
}
.brand-eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.9)}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.7);font-weight:800;font-size:.9rem;
  margin-bottom:20px;transition:.15s ease;
}
.back-link:hover{color:#fff}
.brand-side-card{
  background:rgba(255,255,255,.97);
  border-radius:var(--r-lg);padding:32px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.6);
}
.brand-side-card h2{font-size:1.8rem;color:#0f172a;font-family:var(--serif);font-weight:400}
.brand-side-card p,.brand-side-card li{color:#475569;font-size:.92rem}
.brand-side-card ul{padding-left:0;list-style:none}
.brand-side-card li{padding-left:18px;position:relative;margin:7px 0}
.brand-side-card li::before{content:'✓';position:absolute;left:0;color:#16a34a;font-weight:900}
.side-note{
  margin-top:18px;padding:16px;
  border-radius:18px;background:#f8fafc;
  color:#475569;border:1px solid #e2e8f0;font-size:.9rem;
}
.fineprint{font-size:.87rem!important;color:rgba(255,255,255,.65)!important}

/* ═══════════════════
   GRIDS / CARDS
═══════════════════ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gradient-card{
  color:#fff;
  background:linear-gradient(135deg,var(--a,#3b82f6),var(--b,#8b5cf6));
  border-color:transparent;
  box-shadow:0 20px 50px color-mix(in srgb,var(--a,#3b82f6) 28%,transparent);
}
.gradient-card p{color:rgba(255,255,255,.82)!important}
.gradient-card h3{color:#fff!important}

/* ═══════════════════
   STEP CARDS
═══════════════════ */
.step-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step-card{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:var(--r);padding:20px;min-height:200px;
  box-shadow:0 12px 32px rgba(2,6,23,.06);
  transition:.2s ease;
}
.step-card:hover{transform:translateY(-4px);box-shadow:0 24px 55px rgba(2,6,23,.12)}
.step-card span{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:14px;
  color:#fff;font-weight:900;font-size:.9rem;
  background:linear-gradient(135deg,var(--a,#3b82f6),var(--b,#8b5cf6));
  margin-bottom:14px;
  box-shadow:0 8px 20px color-mix(in srgb,var(--a,#3b82f6) 30%,transparent);
}
.step-card h3{font-size:1rem;color:#0f172a;margin:0 0 8px;font-weight:900}
.step-card p{margin:0;color:#64748b;font-size:.88rem;line-height:1.6}

/* ═══════════════════
   CTA BOX
═══════════════════ */
.cta-box{
  margin-top:24px;
  background:linear-gradient(135deg,#0a1628,#111f38);
  color:#fff;border-radius:var(--r);
  padding:26px 28px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.10);
  position:relative;overflow:hidden;
}
.cta-box::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(59,130,246,.08),rgba(139,92,246,.08));
  pointer-events:none;
}
.cta-box>*{position:relative}
.cta-box p{margin:4px 0 0;color:rgba(255,255,255,.68);font-size:.9rem}
.cta-box strong{font-size:1.1rem}

/* ═══════════════════
   NOTICES
═══════════════════ */
.notice{
  border-left:4px solid var(--a,#3b82f6);
  background:#f8fafc;border-radius:20px;
  padding:18px 20px;color:#475569;font-size:.92rem;
}
.notice.warning{border-color:#f59e0b;background:#fffbeb;color:#78350f}
.notice.danger{border-color:#ef4444;background:#fef2f2;color:#7f1d1d}

/* ═══════════════════
   RELATED PANEL
═══════════════════ */
.related-panel{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;padding:16px 20px;
  margin:0 0 24px;color:#fff;
}
.related-panel span{font-weight:900;margin-right:auto;font-size:.9rem}
.related-panel a{
  color:#fff;text-decoration:none;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:8px 14px;
  font-weight:800;font-size:.88rem;
  transition:.14s ease;
}
.related-panel a:hover{background:rgba(255,255,255,.18)}

/* ═══════════════════
   TABLE
═══════════════════ */
.table-wrap{
  overflow:auto;border:1px solid #e2e8f0;
  border-radius:var(--r);
}
.table{width:100%;border-collapse:collapse;background:#fff;min-width:840px}
.table th,.table td{padding:16px 18px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}
.table th{background:#f8fafc;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:#64748b;font-weight:800}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:#fafbff}
.table td{color:#334155;font-size:.92rem}
.table td span{display:block;color:#94a3b8;font-size:.84rem;margin-top:3px}

/* ═══════════════════
   REFERENCE PAGE SPECIAL
═══════════════════ */
.reference-page .glow-text{
  display:inline-block;
  background:linear-gradient(135deg,#4ade80,#22d3ee);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none;filter:drop-shadow(0 0 20px rgba(34,197,94,.4));
}
.reference-hero .brand-copy{
  background:radial-gradient(ellipse at 80% 10%,rgba(34,197,94,.2),transparent 18rem),
    linear-gradient(145deg,#051a17,rgba(255,255,255,.06));
}
.reference-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff,#f0fdf4);
}
.reference-card::before{
  content:'';position:absolute;inset:-40% -20% auto auto;
  width:280px;height:280px;border-radius:999px;
  background:radial-gradient(circle,rgba(34,197,94,.2),transparent 70%);
}
.reference-card>*{position:relative}
.reference-card h2{
  font-size:clamp(3.2rem,9vw,6rem);letter-spacing:-.08em;
  margin:14px 0 8px;color:#064e3b;font-family:var(--serif);font-weight:400;
}
.reference-card p{color:#475569;margin:0 0 14px;font-size:.92rem}
.tag-cloud{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 18px}
.tag-cloud span{
  display:inline-flex;border-radius:999px;
  background:#dcfce7;border:1px solid #bbf7d0;
  color:#065f46;font-weight:800;
  padding:7px 12px;font-size:.84rem;
}
.copy-btn{
  width:100%;border:0;border-radius:16px;
  background:linear-gradient(135deg,#16a34a,#0f766e);
  color:#fff;font-weight:900;font-size:1rem;
  padding:15px 18px;
  box-shadow:0 18px 42px rgba(22,163,74,.28);
  cursor:pointer;font-family:var(--sans);
  transition:.18s ease;
}
.copy-btn:hover{transform:translateY(-2px);box-shadow:0 24px 55px rgba(22,163,74,.4)}
.answer-section .section-head{align-items:flex-start}
.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.answer-card{background:linear-gradient(180deg,#fff,#f8fafc)}
.answer-card strong{display:block;color:#064e3b;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;font-weight:900}
.answer-card span{display:block;font-size:clamp(1.5rem,3vw,2.4rem);font-weight:900;letter-spacing:-.05em;color:#0f172a;line-height:1.05;margin:10px 0}
.reference-steps .step-card{min-height:220px}
.checklist-section h3{color:#064e3b}

/* ═══════════════════
   FOOTER
═══════════════════ */
.footer{
  color:rgba(255,255,255,.65);
  padding:0 28px 60px;
  position:relative;z-index:1;
}
.footer-inner{
  max-width:1280px;margin:auto;
  display:grid;grid-template-columns:1.4fr .6fr;gap:28px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:30px;
}
.footer strong{color:rgba(255,255,255,.9);font-size:1rem}
.footer p{font-size:.9rem;line-height:1.7;max-width:680px;margin:8px 0 0}
.footer-note{font-size:.84rem;margin-top:8px;color:rgba(255,255,255,.45)}
.footer-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;padding-top:4px}
.footer a{
  color:rgba(255,255,255,.8);text-decoration:none;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;padding:8px 13px;font-size:.88rem;font-weight:700;
  transition:.14s ease;
}
.footer a:hover{background:rgba(255,255,255,.13);color:#fff}

/* ═══════════════════
   ANIMATIONS
═══════════════════ */
@keyframes fade-up{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.hero-card{animation:fade-up .7s ease both}
.orb-panel{animation:fade-in .9s .2s ease both}
.brand-card:nth-child(1){animation:fade-up .5s .1s ease both}
.brand-card:nth-child(2){animation:fade-up .5s .2s ease both}
.brand-card:nth-child(3){animation:fade-up .5s .3s ease both}
.brand-card:nth-child(4){animation:fade-up .5s .4s ease both}

/* ═══════════════════
   RESPONSIVE
═══════════════════ */
@media(max-width:1100px){
  .hero,.brand-hero,.split-section,.grid-2,.footer-inner{grid-template-columns:1fr}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .section-head{display:block}
  .white-mini-grid,.faq-grid,.answer-grid{grid-template-columns:1fr}
  .hero{padding:56px 0 40px}
  .footer-links{justify-content:flex-start}
}
@media(max-width:760px){
  .nav{padding:0 16px;height:62px}
  .nav-button{
    display:flex;flex-direction:column;gap:5px;
    cursor:pointer;background:none;border:none;padding:6px;
  }
  .nav-button span{width:26px;height:2.5px;border-radius:999px;background:rgba(255,255,255,.85);transition:.2s ease;display:block}
  .menu{
    position:absolute;left:12px;right:12px;top:70px;
    display:grid;gap:6px;
    background:rgba(4,8,15,.97);
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;padding:12px;
    opacity:0;pointer-events:none;transform:translateY(-10px);transition:.18s ease;
  }
  .nav-toggle:checked~.menu{opacity:1;pointer-events:auto;transform:translateY(0)}
  .dropdown-panel{position:static;width:auto;opacity:1;pointer-events:auto;transform:none;background:rgba(255,255,255,.06);box-shadow:none;border-color:rgba(255,255,255,.08);margin-top:6px}
  .dropdown-panel a{color:rgba(255,255,255,.82)}
  .container{padding:0 16px 60px}
  .hero{padding:32px 0 20px}
  .hero-card,.brand-copy,.page-hero>div,.white-section,.dark-panel,.brand-side-card{border-radius:28px;padding:26px}
  h1{font-size:clamp(2.5rem,13vw,3.2rem)}
  .trust-grid,.brand-grid,.grid-3,.step-grid,.metric-row{grid-template-columns:1fr}
  .brand-card{min-height:auto}
  .hero-actions .btn,.cta-box .btn{width:100%;justify-content:center}
  .related-panel{display:grid}
  .related-panel span{margin:0}
  .footer{padding:0 16px 48px}
  .reference-card h2{font-size:3rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* Multilingual language selector */
.language-switcher{position:relative;display:inline-flex;align-items:center;z-index:120}
.language-current{appearance:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:8px 12px;font:inherit;font-weight:800;font-size:.9rem;display:inline-flex;align-items:center;gap:7px;cursor:pointer;line-height:1.1}
.language-current:hover,.language-switcher:focus-within .language-current{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.language-panel{position:absolute;right:0;top:calc(100% + 10px);width:245px;max-height:70vh;overflow:auto;background:rgba(8,14,28,.98);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:8px;box-shadow:0 28px 70px rgba(0,0,0,.55);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transform:translateY(8px) scale(.97);transition:.16s ease}
.language-switcher:hover .language-panel,.language-switcher:focus-within .language-panel{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.language-panel a{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.86);border-radius:12px;padding:9px 12px;font-weight:800;font-size:.88rem;white-space:nowrap}
.language-panel a:hover,.language-panel a[aria-current="true"]{background:rgba(255,255,255,.10);color:#fff}
.flag{font-size:1rem;line-height:1}.chev{opacity:.75}.table-wrap{overflow:auto;border-radius:22px;border:1px solid rgba(15,23,42,.08)}
table{width:100%;border-collapse:collapse;background:#fff;color:#0f172a}th,td{padding:16px 18px;border-bottom:1px solid #e5e7eb;text-align:left}th{font-weight:900;background:#f8fafc}.step-list{display:grid;gap:14px;counter-reset:steps;list-style:none}.step-list li{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;background:#fff;color:#0f172a;border:1px solid rgba(15,23,42,.08);border-radius:20px;padding:18px}.step-list li strong{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:#0f172a;color:#fff}.prose-card{background:#fff;color:#0f172a;border-radius:28px;padding:28px;border:1px solid rgba(15,23,42,.08)}.prose-card h2{color:#0f172a}.prose-card p,.prose-card li{color:#334155}.prose-card a{color:#2563eb;font-weight:800}
html[dir="rtl"] body{text-align:right}html[dir="rtl"] .nav,html[dir="rtl"] .brand,html[dir="rtl"] .menu,html[dir="rtl"] .hero-actions,html[dir="rtl"] .language-current,html[dir="rtl"] .language-panel a{direction:rtl}html[dir="rtl"] .dropdown-panel,html[dir="rtl"] .language-panel{right:auto;left:0}html[dir="rtl"] th,html[dir="rtl"] td{text-align:right}html[dir="rtl"] .step-list li{grid-template-columns:1fr 48px}html[dir="rtl"] .step-list li strong{grid-column:2}html[dir="rtl"] .step-list li span{grid-column:1;grid-row:1}
@media(max-width:860px){
  .menu{overflow-y:auto;max-height:calc(100vh - 92px)}
  .menu>.language-switcher{order:-30;grid-column:1 / -1;width:100%;position:sticky;top:0;z-index:8;padding-bottom:8px;margin-bottom:4px;background:linear-gradient(180deg,rgba(4,8,15,.98) 0%,rgba(4,8,15,.96) 82%,rgba(4,8,15,0) 100%)}
  .language-current{width:100%;justify-content:space-between;padding:12px 14px;font-size:.95rem;border-radius:18px;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);box-shadow:0 10px 28px rgba(0,0,0,.18)}
  .language-panel{position:static;width:100%;max-height:320px;margin-top:8px;display:none;opacity:1;pointer-events:auto;transform:none;padding:10px;border-radius:18px;background:rgba(255,255,255,.05)}
  .language-switcher:hover .language-panel,.language-switcher:focus-within .language-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .language-panel a{justify-content:flex-start;min-height:46px;padding:10px 12px;white-space:normal;line-height:1.25;background:rgba(255,255,255,.04)}
  .language-panel a:hover,.language-panel a[aria-current="true"]{background:rgba(255,255,255,.12)}
}
@media(max-width:520px){
  .language-switcher:hover .language-panel,.language-switcher:focus-within .language-panel{grid-template-columns:1fr}
}
@media(max-width:860px){html[dir="rtl"] .language-current{flex-direction:row-reverse}html[dir="rtl"] .language-panel a{text-align:right;justify-content:flex-end}}