/* ── CSS Variables ──────────────────────────────────────── */
:root {
  --brand:       #d97706;
  --brand-dk:    #b45309;
  --brand-lt:    #fff7ed;
  --brand-bd:    #fdba74;

  /* Module */
  --finance:     #6366f1; --finance-lt:  #eef2ff;
  --family:      #f43f5e; --family-lt:   #fff1f2;
  --vacation:    #10b981; --vacation-lt: #ecfdf5;
  --time:        #f59e0b; --time-lt:     #fffbeb;
  --media:       #64748b; --media-lt:    #f8fafc;
  --contract:    #0d9488; --contract-lt: #f0fdfa;

  /* Neutrals */
  --dark:        #0f172a;
  --dark2:       #1e293b;
  --surface:     #ffffff;
  --bg:          #f8fafc;
  --border:      #e2e8f0;
  --text:        #0f172a;
  --text-2:      #334155;
  --text-muted:  #64748b;
  --text-faint:  #64748b;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 24px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 16px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --sh-lg: 0 12px 32px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.05);
  --sh-xl: 0 24px 48px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.06);

  /* Layout */
  --sb-w:    260px;
  --hdr-h:   60px;

  --font:    'Plus Jakarta Sans', system-ui, sans-serif;
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }

/* ── Scroll Progress ─────────────────────────────────────── */
.scroll-bar {
  position: fixed; top:0; left:0; height:3px;
  background: linear-gradient(90deg,var(--brand),#fbbf24);
  z-index:9999; width:0%; transition:width .1s linear;
  pointer-events:none;
}

/* ── Reveal Animations ───────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(22px);
  transition: opacity .6s var(--spring), transform .6s var(--spring);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.rv-d1 { transition-delay:.08s; }
.rv-d2 { transition-delay:.16s; }
.rv-d3 { transition-delay:.24s; }
.rv-d4 { transition-delay:.32s; }
.rv-d5 { transition-delay:.40s; }
.rv-d6 { transition-delay:.48s; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  position:fixed; top:0; left:0;
  width:var(--sb-w); height:100vh;
  background:linear-gradient(175deg,#0f172a 0%,#151f35 55%,#0f172a 100%);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  z-index:1100;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.07) transparent;
  transition:transform .3s var(--ease);
}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:2px;}

.sb-top {
  padding:1.2rem 1.1rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.sb-logo {
  font-size:1.2rem; font-weight:800; color:#fff;
  letter-spacing:-.03em; text-decoration:none; display:block;
}
.sb-logo span { color:var(--brand); }
.sb-tagline {
  font-size:.65rem; color:rgba(255,255,255,.7);
  margin-top:3px; letter-spacing:.02em;
}

.sb-section {
  padding:.8rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.sb-section:last-child { border-bottom:none; flex:1; }

.sb-label {
  font-size:.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(255,255,255,.7);
  padding:0 .2rem; margin-bottom:.6rem; display:block;
}

/* Login Cards */
.lc {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);
  padding:.85rem .95rem;
  position:relative; overflow:hidden;
  margin-bottom:.55rem;
  transition:background .2s, border-color .2s, transform .2s;
}
.lc:last-child { margin-bottom:0; }
.lc:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13); transform:translateY(-1px); }
.lc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.lc-oh::before { background:linear-gradient(90deg,var(--brand),#fbbf24); }
.lc-vh::before { background:linear-gradient(90deg,#0d9488,#0891b2); }

.lc-tag  { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.7); margin-bottom:.2rem; }
.lc-name { font-size:.9rem; font-weight:800; color:#fff; letter-spacing:-.02em; margin-bottom:.18rem; }
.lc-desc { font-size:.68rem; color:rgba(255,255,255,.7); line-height:1.5; margin-bottom:.7rem; }
.lc-btns { display:flex; gap:.3rem; }

.lc-btn {
  width:33px; height:33px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); text-decoration:none; border:none;
  cursor:pointer; position:relative; transition:opacity .15s, transform .15s;
}
.lc-btn:hover { opacity:.85; transform:translateY(-1px); }
.lc-btn[title]:hover::after {
  content:attr(title);
  position:absolute; bottom:calc(100% + 5px); left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.88); color:#fff;
  font-size:.6rem; font-weight:600; white-space:nowrap;
  padding:2px 6px; border-radius:4px;
  pointer-events:none; z-index:10; font-family:var(--font);
}
.btn-oh     { background:var(--brand); color:#fff; }
.btn-vh     { background:#0d9488; color:#fff; }
.btn-gg     { background:#fff; color:#1a1a1a; }
.btn-ghost  { background:transparent; color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.14) !important; }
.btn-ghost:hover { color:#fff; border-color:rgba(255,255,255,.35) !important; }

/* Sidebar Nav */
.sb-nav { display:flex; flex-direction:column; gap:1px; }
.sb-link {
  display:flex; align-items:center; gap:9px;
  color:rgba(255,255,255,.45); text-decoration:none;
  font-size:.8rem; font-weight:600;
  padding:8px 10px; border-radius:var(--r-sm);
  transition:background .15s, color .15s; position:relative;
}
.sb-link:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.78); }
.sb-link.active { background:rgba(217,119,6,.14); color:var(--brand-bd); }
.sb-link.active::before {
  content:''; position:absolute; left:0; top:24%; bottom:24%;
  width:3px; border-radius:0 2px 2px 0; background:var(--brand);
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position:fixed; top:0;
  left:var(--sb-w); right:0; height:var(--hdr-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--border);
  z-index:900;
  display:flex; align-items:center;
  padding:0 2.25rem; gap:1rem;
  justify-content:space-between;
  transition:box-shadow .2s;
}
.site-header.scrolled { box-shadow:0 1px 24px rgba(0,0,0,.07); }

/* Product Switcher */
.product-switcher {
  display:flex; align-items:center;
  background:var(--bg); border:1px solid var(--border);
  border-radius:50px; padding:3px; gap:2px;
}
.sw-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:50px;
  font-size:.77rem; font-weight:700;
  text-decoration:none; color:var(--text-muted);
  transition:background .2s, color .2s, box-shadow .2s;
  white-space:nowrap;
}
.sw-tab.active {
  background:#fff; color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.sw-tab.active.oh  { color:var(--brand-dk); }
.sw-tab.active.vh  { color:#0d9488; }
.sw-tab:not(.active):hover { color:var(--text-2); }
.sw-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.sw-tab.active.oh .sw-dot { background:var(--brand); }
.sw-tab.active.vh .sw-dot { background:#0d9488; }

.hdr-contacts { display:flex; gap:1.5rem; }
.hdr-link {
  display:flex; align-items:center; gap:5px;
  font-size:.77rem; font-weight:500; color:var(--text-muted);
  text-decoration:none; transition:color .2s;
}
.hdr-link:hover { color:var(--brand); }

.hdr-cta {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:50px;
  background:var(--dark); color:#fff;
  font-size:.8rem; font-weight:700;
  text-decoration:none; transition:background .2s, transform .2s;
}
.hdr-cta:hover { background:var(--brand); transform:translateY(-1px); color:#fff; }

/* ── Page Layout ─────────────────────────────────────────── */
.page-wrap {
  margin-left:var(--sb-w);
  padding-top:var(--hdr-h);
  min-height:100vh;
}
.page-main {
  max-width:980px; margin:0 auto;
  padding:3rem 2.5rem 7rem;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  display:grid; grid-template-columns:1fr 370px;
  gap:3.5rem; align-items:center;
  padding:2.5rem 0 4.5rem;
  position:relative;
}
.hero::after {
  content:''; position:absolute;
  right:-100px; top:-80px;
  width:550px; height:550px; border-radius:50%;
  background:radial-gradient(circle,rgba(217,119,6,.055) 0%,transparent 65%);
  pointer-events:none; z-index:0;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-lt); border:1px solid var(--brand-bd);
  color:var(--brand-dk); font-size:.71rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:5px 13px; border-radius:50px; margin-bottom:1.25rem;
}
.badge-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--brand); animation:blink 2s infinite;
  flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero h1 {
  font-size:clamp(2rem,3.8vw,3rem);
  font-weight:800; line-height:1.1;
  letter-spacing:-.04em; color:var(--text);
  margin-bottom:1.25rem;
}
.h1-accent {
  background:linear-gradient(135deg,var(--brand) 0%,#f97316 50%,var(--brand-dk) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-lead {
  font-size:1.05rem; color:var(--text-muted);
  line-height:1.75; margin-bottom:1.875rem; max-width:490px;
}
.hero-ctas { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.875rem; }

.btn-dark {
  display:inline-flex; align-items:center; gap:7px;
  padding:13px 26px; border-radius:50px;
  font-size:.88rem; font-weight:700;
  background:var(--dark); color:#fff; text-decoration:none;
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.btn-dark:hover {
  background:var(--brand); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(217,119,6,.3);
}
.btn-outline {
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 22px; border-radius:50px;
  font-size:.88rem; font-weight:700;
  background:transparent; color:var(--text); text-decoration:none;
  border:1.5px solid var(--border); transition:border-color .2s, background .2s;
}
.btn-outline:hover { border-color:var(--dark); background:var(--bg); }

.hero-trust { display:flex; flex-wrap:wrap; gap:1.25rem; }
.trust-pill {
  display:flex; align-items:center; gap:6px;
  font-size:.75rem; font-weight:600; color:var(--text-muted);
}
.trust-pill .ic { color:var(--brand); }

/* Hero right card */
.reg-card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:1.75rem;
  box-shadow:var(--sh-xl); position:relative; overflow:hidden; z-index:1;
}
.reg-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),#fbbf24,var(--brand-dk));
}
.rc-title { font-size:1.05rem; font-weight:800; color:var(--text); letter-spacing:-.02em; margin-bottom:.25rem; }
.rc-sub   { font-size:.76rem; color:var(--text-muted); margin-bottom:1.2rem; line-height:1.55; }

.rc-steps { list-style:none; margin-bottom:1.2rem; }
.rc-step  { display:flex; align-items:flex-start; gap:.825rem; padding:.7rem 0; border-bottom:1px solid #f1f5f9; }
.rc-step:last-child { border-bottom:none; }
.step-n {
  width:23px; height:23px; border-radius:50%;
  background:var(--dark); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:800; margin-top:2px;
}
.step-t { font-size:.83rem; font-weight:700; color:var(--text); }
.step-d { font-size:.7rem; color:var(--text-muted); margin-top:1px; }

.rc-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:11px; border-radius:var(--r-lg);
  font-size:.84rem; font-weight:700;
  background:var(--brand); color:#fff; text-decoration:none;
  margin-bottom:.5rem; border:none; cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s;
  font-family:var(--font);
}
.rc-btn:hover { background:var(--brand-dk); color:#fff; transform:translateY(-1px); box-shadow:0 6px 18px rgba(217,119,6,.28); }
.rc-btn-gg {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px; border-radius:var(--r-lg);
  font-size:.82rem; font-weight:600;
  background:#fff; color:var(--text); text-decoration:none;
  border:1.5px solid var(--border); transition:border-color .2s, color .2s;
}
.rc-btn-gg:hover { border-color:#4285F4; color:#4285F4; }

/* ── Stats Strip ─────────────────────────────────────────── */
.stats-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border); border-radius:var(--r-xl);
  overflow:hidden; background:var(--surface);
  box-shadow:var(--sh-sm); margin-bottom:4.5rem;
}
.stat-cell {
  padding:1.5rem 1rem; text-align:center;
  border-right:1px solid var(--border); position:relative;
}
.stat-cell:last-child { border-right:none; }
.stat-cell::after {
  content:''; position:absolute; top:0; left:30%; right:30%; height:2px;
  background:var(--brand); border-radius:0 0 3px 3px;
}
.stat-n {
  font-size:2.1rem; font-weight:800; letter-spacing:-.05em;
  color:var(--text); line-height:1; display:block;
}
.stat-n.accent { color:var(--brand); }
.stat-l { font-size:.73rem; font-weight:600; color:var(--text-muted); margin-top:5px; }

/* ── Section Headers ─────────────────────────────────────── */
.sec-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--bg); border:1px solid var(--border);
  color:var(--text-2); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  padding:4px 10px; border-radius:50px; margin-bottom:.75rem;
}
.sec-h2 {
  font-size:clamp(1.4rem,2.4vw,1.75rem);
  font-weight:800; color:var(--text); letter-spacing:-.03em;
  margin-bottom:.5rem; line-height:1.2;
}
.sec-lead {
  font-size:.93rem; color:var(--text-muted);
  line-height:1.7; margin-bottom:2rem; max-width:540px;
}

/* ── Module Grid ─────────────────────────────────────────── */
.mod-linked-row {
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  margin-bottom:.75rem;
}
.mod-connector {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 .75rem; position:relative;
}
.mod-connector::before {
  content:''; position:absolute; top:50%; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--border),var(--dark),var(--border));
  z-index:0;
}
.mod-conn-badge {
  background:var(--brand); color:#fff;
  border-radius:50px; padding:5px 10px;
  display:flex; align-items:center; gap:5px;
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  white-space:nowrap; position:relative; z-index:1; box-shadow:0 2px 8px rgba(217,119,6,.3);
}
.mod-link-note {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:.875rem 1.125rem;
  font-size:.8rem; color:var(--text-muted); line-height:1.65;
  margin-bottom:1.125rem; display:flex; align-items:flex-start; gap:.625rem;
}
.mod-link-note .ic { color:var(--brand); flex-shrink:0; margin-top:2px; }

.mod-row-3 {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.875rem;
}

.mod-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:1.375rem 1.25rem;
  display:flex; flex-direction:column; position:relative;
  overflow:hidden;
  transition:transform .3s var(--spring), box-shadow .3s var(--spring), border-color .25s;
}
.mod-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),#fbbf24,var(--brand-dk));
}
.mod-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(217,119,6,.12),0 4px 8px rgba(0,0,0,.05);
  border-color:var(--brand-bd);
}

.mod-icon {
  width:42px; height:42px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.875rem; flex-shrink:0;
  background:var(--brand-lt); color:var(--brand);
}

.mod-name { font-size:.93rem; font-weight:800; color:var(--text); letter-spacing:-.02em; margin-bottom:.7rem; }

.mod-feats { list-style:none; flex:1; margin-bottom:1rem; }
.mod-feats li {
  display:flex; align-items:flex-start; gap:7px;
  font-size:.77rem; color:var(--text-muted);
  padding:4px 0; border-bottom:1px solid #f1f5f9; line-height:1.5;
}
.mod-feats li:last-child { border-bottom:none; }
.mf-ck { flex-shrink:0; margin-top:2px; color:var(--text-faint); }

.mod-cta {
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:9px; border-radius:var(--r-md);
  font-size:.76rem; font-weight:700; color:var(--brand-dk);
  text-decoration:none; background:var(--brand-lt); border:1.5px solid var(--brand-bd);
  transition:background .15s, border-color .15s, color .15s;
}
.mod-cta:hover { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ── USP Dark Banner ─────────────────────────────────────── */
.usp-banner {
  background:var(--dark); border-radius:var(--r-2xl);
  padding:2.25rem 2.5rem;
  display:grid; grid-template-columns:repeat(4,1fr);
  position:relative; overflow:hidden;
  margin-bottom:4.5rem;
}
.usp-banner::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--brand),#fbbf24,var(--brand-dk));
}
.usp-banner::after {
  content:''; position:absolute;
  right:-80px; bottom:-80px; width:300px; height:300px;
  border-radius:50%; background:rgba(255,255,255,.025); pointer-events:none;
}
.usp-item {
  padding:0 1.75rem;
  border-right:1px solid rgba(255,255,255,.07);
}
.usp-item:first-child { padding-left:0; }
.usp-item:last-child  { border-right:none; }

.usp-ico {
  width:36px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.75rem;
}
.usp-tag   { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.28); margin-bottom:.25rem; }
.usp-val   { font-size:1rem; font-weight:800; color:#fff; letter-spacing:-.02em; margin-bottom:.3rem; }
.usp-desc  { font-size:.75rem; color:rgba(255,255,255,.42); line-height:1.65; }


/* ── VereinsHeld Banner ──────────────────────────────────── */
.vh-banner {
  background:linear-gradient(135deg,#0f766e 0%,#0d9488 45%,#0891b2 100%);
  border-radius:var(--r-2xl); padding:2rem 2.25rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden;
}
.vh-banner::after {
  content:''; position:absolute; right:-70px; top:-70px;
  width:280px; height:280px; border-radius:50%;
  background:rgba(255,255,255,.05); pointer-events:none;
}
.vh-badge { background:rgba(255,255,255,.15); color:#fff; font-size:.67rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 10px; border-radius:50px; display:inline-block; margin-bottom:.5rem; }
.vh-title { font-size:1.3rem; font-weight:800; color:#fff; letter-spacing:-.03em; margin-bottom:.375rem; }
.vh-desc  { font-size:.87rem; color:rgba(255,255,255,.78); max-width:420px; line-height:1.6; margin-bottom:.875rem; }
.vh-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.vh-chip  {
  background:rgba(255,255,255,.12); color:#fff;
  font-size:.7rem; font-weight:700; padding:3px 9px;
  border-radius:50px; display:inline-flex; align-items:center; gap:4px;
}
.vh-btns { display:flex; flex-direction:column; gap:.5rem; min-width:168px; }
.vh-btn-main {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:#fff; color:#0d9488; font-weight:700; font-size:.84rem;
  padding:10px 20px; border-radius:50px; text-decoration:none;
  white-space:nowrap; transition:background .2s, color .2s;
}
.vh-btn-main:hover { background:#f0fdfa; color:#0f766e; }
.vh-btn-link {
  display:flex; align-items:center; justify-content:center; gap:4px;
  color:rgba(255,255,255,.65); font-size:.79rem; font-weight:600;
  text-decoration:none; transition:color .2s;
}
.vh-btn-link:hover { color:#fff; }

/* ── Quick Tools ─────────────────────────────────────────── */
.tools-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:.875rem;
}
.tool-card {
  display:flex; align-items:center; gap:1rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1rem 1.1rem;
  text-decoration:none; transition:border-color .2s, transform .25s var(--spring), box-shadow .2s;
}
.tool-card:hover {
  border-color:var(--dark); transform:translateY(-2px);
  box-shadow:var(--sh-md);
}
.tool-ico {
  width:40px; height:40px; flex-shrink:0;
  background:var(--bg); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
}
.tool-name { font-size:.84rem; font-weight:700; color:var(--text); margin-bottom:2px; }
.tool-desc { font-size:.72rem; color:var(--text-muted); line-height:1.45; }
.tool-arr  { margin-left:auto; color:var(--text-faint); transition:transform .2s, color .2s; }
.tool-card:hover .tool-arr { transform:translateX(4px); color:var(--text-2); }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { display:flex; flex-direction:column; gap:.45rem; }
.faq-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; transition:border-color .2s;
}
.faq-item.open { border-color:rgba(217,119,6,.3); }
.faq-btn {
  width:100%; display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; text-align:left;
  background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:.87rem;
  font-weight:700; color:var(--text); transition:background .15s;
}
.faq-btn:hover { background:var(--bg); }
.faq-ico-wrap {
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, transform .25s;
  color:var(--text-muted);
}
.faq-item.open .faq-ico-wrap {
  background:var(--brand); border-color:var(--brand); color:#fff; transform:rotate(45deg);
}
.faq-body {
  max-height:0; overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  font-size:.83rem; color:var(--text-muted);
  line-height:1.75; padding:0 1.2rem;
}
.faq-item.open .faq-body { max-height:260px; padding:0 1.2rem 1rem; }

/* ── About ───────────────────────────────────────────────── */
.about-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:2.25rem;
  text-align:center;
}
.about-card h2 { font-size:1.25rem; font-weight:800; color:var(--text); letter-spacing:-.03em; margin-bottom:.75rem; }
.about-card p  { font-size:.9rem; color:var(--text-muted); line-height:1.75; max-width:560px; margin:0 auto 1.1rem; }
.about-card a  { color:var(--brand); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.about-card a:hover { text-decoration:underline; }

/* ── Newsletter ──────────────────────────────────────────── */
.nl-section {
  background:linear-gradient(135deg,var(--brand-lt) 0%,#ffedd5 100%);
  border:1px solid var(--brand-bd); border-radius:var(--r-2xl);
  padding:2.5rem; display:grid;
  grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center;
}
.nl-title { font-size:1.3rem; font-weight:800; color:var(--text); letter-spacing:-.03em; margin-bottom:.5rem; }
.nl-desc  { font-size:.88rem; color:var(--text-muted); line-height:1.65; }
.nl-form  { background:#fff; border:1px solid var(--brand-bd); border-radius:var(--r-xl); padding:1.5rem; }
.nl-row   { display:flex; gap:.625rem; margin-bottom:.625rem; }
.nl-field {
  flex:1; padding:10px 13px;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  font-family:var(--font); font-size:.86rem; color:var(--text);
  outline:none; transition:border-color .2s;
}
.nl-field:focus { border-color:var(--brand); }
.nl-submit {
  width:100%; padding:11px;
  background:var(--brand); color:#fff;
  border:none; border-radius:var(--r-md);
  font-family:var(--font); font-size:.87rem; font-weight:700;
  cursor:pointer; transition:background .2s, transform .2s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.nl-submit:hover { background:var(--brand-dk); transform:translateY(-1px); }
.nl-fine { font-size:.66rem; color:var(--text-faint); text-align:center; margin-top:.625rem; }

/* ── Divider ─────────────────────────────────────────────── */
.divider { border:none; border-top:1px solid var(--border); margin:3.5rem 0; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background:var(--dark); margin-left:var(--sb-w); }
.footer-in {
  max-width:980px; margin:0 auto;
  padding:1.25rem 2.5rem;
  display:flex; align-items:center;
  justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer-brand-name { font-size:1rem; font-weight:800; color:#fff; letter-spacing:-.02em; }
.footer-brand-name span { color:var(--brand); }
.footer-copy { font-size:.68rem; color:rgba(255,255,255,.7); margin-top:2px; }
.footer-links { display:flex; flex-wrap:wrap; gap:.375rem 1rem; }
.footer-lnk {
  font-size:.74rem; font-weight:500; color:rgba(255,255,255,.7);
  text-decoration:none; background:none; border:none; cursor:pointer;
  font-family:var(--font); transition:color .2s;
}
.footer-lnk:hover { color:var(--brand); }
.footer-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.footer-cnt {
  display:flex; align-items:center; gap:5px;
  font-size:.74rem; color:rgba(255,255,255,.7);
  text-decoration:none; transition:color .2s;
}
.footer-cnt:hover { color:var(--brand); }

/* ── Mobile Bottom Nav ───────────────────────────────────── */
.mobile-nav {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  z-index:2000;
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
  box-shadow:0 -4px 24px rgba(0,0,0,.06);
}
.mobile-nav-inner { display:flex; justify-content:space-around; }
.mnav-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:6px 4px;
  text-decoration:none; color:var(--text-muted);
  font-size:.61rem; font-weight:600;
  background:none; border:none; cursor:pointer; transition:color .2s;
}
.mnav-item.active, .mnav-item:hover { color:var(--brand); }

/* ── Sidebar Toggle (Mobile) ─────────────────────────────── */
.sb-toggle {
  display:none; position:fixed; bottom:76px; right:1rem;
  width:46px; height:46px; border-radius:50%;
  background:var(--dark); color:#fff; border:none;
  cursor:pointer; z-index:1500; box-shadow:var(--sh-lg);
  align-items:center; justify-content:center; transition:background .2s;
}
.sb-toggle:hover { background:var(--brand); }
.sb-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.52); z-index:1099;
  backdrop-filter:blur(3px);
}
.sb-overlay.open { display:block; }

/* ── Cookie Banner ───────────────────────────────────────── */
#cookieBanner {
  position:fixed; bottom:1rem; left:50%; transform:translateX(-50%);
  width:calc(100% - 2rem); max-width:440px;
  background:var(--dark); color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl); padding:1.25rem 1.375rem;
  z-index:3000; box-shadow:var(--sh-xl); display:none;
}
#cookieBanner.show { display:block; animation:slide-up .3s var(--spring); }
@keyframes slide-up {
  from { transform:translateX(-50%) translateY(20px); opacity:0; }
  to   { transform:translateX(-50%) translateY(0);    opacity:1; }
}
#cookieBanner h3 { font-size:.95rem; font-weight:800; margin-bottom:.375rem; color:#fff; }
#cookieBanner p  { font-size:.78rem; line-height:1.6; margin-bottom:.875rem; }
#cookieBanner a  { color:var(--brand); }
.ck-btns { display:flex; gap:.5rem; }
.ck-accept {
  flex:1; padding:9px; border-radius:var(--r-md);
  background:var(--brand); color:#fff; border:none;
  font-family:var(--font); font-size:.81rem; font-weight:700;
  cursor:pointer; transition:background .2s;
}
.ck-accept:hover { background:var(--brand-dk); }
.ck-decline {
  padding:9px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.1);
  font-family:var(--font); font-size:.81rem; font-weight:600;
  cursor:pointer; transition:color .2s;
}
.ck-decline:hover { color:#fff; }

/* ── Alert ───────────────────────────────────────────────── */
.nl-alert {
  display:flex; align-items:center; gap:.75rem;
  padding:.875rem 1.1rem; border-radius:var(--r-lg);
  font-size:.87rem; font-weight:600; margin-bottom:2rem;
}
.nl-alert.success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.nl-alert.warning { background:#fffbeb; color:#78350f; border:1px solid #fde68a; }
.nl-alert.danger  { background:#fff1f2; color:#881337; border:1px solid #fecdd3; }
.nl-alert.info    { background:#eff6ff; color:#1e3a5f; border:1px solid #bfdbfe; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1023.98px) {
  .site-header { left:0; }
  .site-footer { margin-left:0; }
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sb-toggle { display:flex; }
  .page-wrap { margin-left:0; }
  .page-main { padding:2rem 1.5rem 5rem; }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .usp-banner { grid-template-columns:repeat(2,1fr); gap:1.5rem; padding:1.75rem; }
  .usp-item { padding:0; border-right:none; border-bottom:1px solid rgba(255,255,255,.07); padding-bottom:1.25rem; }
  .usp-item:nth-child(2n) { border-bottom:1px solid rgba(255,255,255,.07); }
  .usp-item:last-child, .usp-item:nth-last-child(2):nth-child(odd) { border-bottom:none; padding-bottom:0; }
  .mod-row-3 { grid-template-columns:repeat(2,1fr); }
  .nl-section { grid-template-columns:1fr; gap:1.5rem; }
  .footer-in { flex-direction:column; align-items:flex-start; }
  .footer-right { align-items:flex-start; }
}
@media (max-width:767.98px) {
  .mobile-nav { display:block; }
  .hero { grid-template-columns:1fr; gap:2rem; }
  .hdr-contacts { display:none; }
  .mod-linked-row { grid-template-columns:1fr; }
  .mod-connector { flex-direction:row; padding:.5rem 0; }
  .mod-connector::before { top:50%; left:0; right:0; height:2px; width:auto; }
  .mod-row-3 { grid-template-columns:1fr; }
  .usp-banner { grid-template-columns:1fr !important; }
  .tools-grid { grid-template-columns:1fr; }
  .footer-in { padding-bottom:76px; }
  #cookieBanner { bottom:72px; }
  .vh-banner { flex-direction:column; }
}
@media (max-width:479.98px) {
  .mod-grid { grid-template-columns:1fr; }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .page-main { padding:1.5rem 1rem 5rem; }
  .nl-row { flex-direction:column; }
}
@media (min-width:1024px) { .mobile-nav { display:none !important; } }