*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.65;color:var(--text);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
ul{list-style:none}

/* Typography */
h1,h2,h3,h4,h5{line-height:1.2;letter-spacing:-0.025em;font-weight:800}
h1{font-size:clamp(2rem,4.5vw,3.5rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.4rem)}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-0.015em}
h4{font-size:.95rem;font-weight:700}
p{color:var(--text-muted);line-height:1.7}

/* Layout */
.container{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}
.container--sm{max-width:var(--max-w-sm)}
.container--xs{max-width:var(--max-w-xs)}
.section{padding:var(--s20) var(--s6)}
.section--sm{padding:var(--s12) var(--s8)}
.section--lg{padding:var(--s24) var(--s8)}
.section-alt{background:var(--surface-alt)}
.section-dark{background:var(--gray-900);color:var(--white)}
.section-dark p{color:rgba(255,255,255,.55)}
.section-dark h2{color:var(--white)}

/* Section header */
.section-header{text-align:center;margin-bottom:var(--s12)}
.section-header h2{margin-bottom:var(--s4)}
.section-header>p{max-width:540px;margin:0 auto;font-size:1.05rem}
.section-tag{display:inline-flex;align-items:center;gap:var(--s2);background:var(--brand-light);color:var(--brand);padding:.3rem .85rem;border-radius:var(--r-full);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s4)}
.section-dark .section-tag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:.65rem 1.35rem;border-radius:var(--r-lg);font-weight:600;font-size:.9rem;cursor:pointer;border:none;transition:background var(--t-base),transform var(--t-fast),box-shadow var(--t-base),color var(--t-base),border-color var(--t-base);white-space:nowrap;position:relative;overflow:hidden;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brand);color:var(--white);box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--brand-dark);box-shadow:var(--shadow-brand-lg);transform:translateY(-1px);color:var(--white)}
.btn-secondary{background:var(--white);color:var(--brand);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--brand);background:var(--brand-light);color:var(--brand)}
.btn-ghost{background:transparent;color:var(--gray-700);border:none}
.btn-ghost:hover{background:var(--gray-100);color:var(--brand)}
.btn-white{background:var(--white);color:var(--brand);box-shadow:var(--shadow-sm)}
.btn-white:hover{background:var(--brand-light);transform:translateY(-1px);color:var(--brand)}
.btn-outline-white{background:transparent;color:white;border:1.5px solid rgba(255,255,255,.4)}
.btn-outline-white:hover{border-color:white;background:rgba(255,255,255,.1);color:white}
.btn--lg{padding:.85rem 1.85rem;font-size:1rem;border-radius:var(--r-xl)}
.btn--sm{padding:.4rem .85rem;font-size:.8rem;border-radius:var(--r-md)}
.btn--full{width:100%}
.btn.loading{pointer-events:none;opacity:.8}
.btn.loading .btn-text{opacity:0}
.btn.loading::before{content:'';position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}

/* Forms */
.form-group{margin-bottom:var(--s5)}
.form-label{display:block;font-size:.83rem;font-weight:600;color:var(--gray-700);margin-bottom:var(--s2)}
.form-input{width:100%;padding:.7rem 1rem;border:1.5px solid var(--border);border-radius:var(--r-lg);font-size:.925rem;color:var(--text);background:var(--white);transition:border-color var(--t-base),box-shadow var(--t-base);outline:none}
.form-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(103,61,230,.1)}
.form-input.error{border-color:var(--error);box-shadow:0 0 0 3px rgba(220,38,38,.08)}
.form-hint{font-size:.75rem;color:var(--text-muted);margin-top:var(--s1)}
.form-error{font-size:.75rem;color:var(--error);margin-top:var(--s1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);transition:transform var(--t-slow),box-shadow var(--t-slow),border-color var(--t-slow)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card.featured{border-color:var(--brand)}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:var(--r-full);font-size:.72rem;font-weight:700;line-height:1.4}
.badge-brand{background:var(--brand-mid);color:var(--brand)}
.badge-success{background:var(--success-light);color:var(--success);border:1px solid var(--success-border)}
.badge-error{background:var(--error-light);color:var(--error);border:1px solid var(--error-border)}
.badge-new{background:var(--brand);color:white}

/* Alert */
.alert{padding:var(--s4) var(--s5);border-radius:var(--r-lg);font-size:.875rem;display:flex;gap:var(--s3);align-items:flex-start;border:1px solid;line-height:1.55}
.alert-success{background:var(--success-light);color:var(--success);border-color:var(--success-border)}
.alert-error{background:var(--error-light);color:var(--error);border-color:var(--error-border)}
.alert-info{background:var(--brand-light);color:var(--brand);border-color:var(--brand-mid)}
.alert-warning{background:var(--warning-light);color:var(--warning);border-color:#fde68a}

/* Toast */
#toast-container{position:fixed;bottom:var(--s6);right:var(--s6);z-index:99999;display:flex;flex-direction:column;gap:var(--s3)}
.toast{display:flex;align-items:center;gap:var(--s3);background:#1f2937;color:#fff;padding:var(--s4) var(--s5);border-radius:var(--r-lg);font-size:.87rem;font-weight:500;box-shadow:var(--shadow-xl);min-width:260px;max-width:380px;animation:toastIn .3s var(--ease) both}
.toast.success{background:#15803d;color:#fff}
.toast.error{background:#dc2626;color:#fff}
.toast.info{background:#1d4ed8;color:#fff}
.toast.warning{background:#b45309;color:#fff}
.toast.out{animation:toastOut .3s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}}

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

/* Empty state */
.empty-state{text-align:center;padding:var(--s20) var(--s8)}
.empty-icon{width:64px;height:64px;background:var(--icon-bg);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s6);color:var(--icon-color)}
.empty-icon svg{width:28px;height:28px;stroke-width:1.6}

/* Spinner */
.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.25);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.spinner--brand{border-color:var(--brand-mid);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Focus ring */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}

/* Responsive helpers */
@media(max-width:768px){
  .container{padding:0 var(--s5)}
  .section{padding:var(--s12) var(--s5)}
}

/* ── Cookie Banner ── */
#cookie-banner {
  /* Wrapper — no background/position itself, just groups children */
  position:fixed; bottom:0; left:0; right:0;
  z-index:99990;
  animation:cbIn .4s ease both;
  pointer-events:none; /* let overlay handle its own clicks */
}
@keyframes cbIn  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes cbOut { from{opacity:1;transform:none} to{opacity:0;transform:translateY(20px)} }
/* Overlay covers the whole page BEHIND the box.
   It's position:fixed and sits at z-index 99985 — below the banner's 99990. */
.cb-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:99985;
  pointer-events:none; /* purely visual — must not intercept clicks on the banner box */
}
/* Box floats above everything inside the banner context */
.cb-box {
  position:fixed; bottom:0; left:0; right:0;
  max-width:680px; margin:0 auto;
  background:var(--surface);
  border-radius:20px 20px 0 0;
  padding:1.5rem;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  border:1.5px solid var(--border);
  border-bottom:none;
  z-index:99991; /* above #cookie-banner container AND overlay */
  pointer-events:auto;
  max-height:90vh;
  overflow-y:auto;
}
.cb-header { display:flex; align-items:flex-start; gap:.875rem; margin-bottom:1.1rem; }
.cb-logo { font-size:1.75rem; flex-shrink:0; }
.cb-title { font-weight:800; font-size:.95rem; margin-bottom:.2rem; }
.cb-sub   { font-size:.8rem; color:var(--text-muted); line-height:1.5; }
.cb-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.cb-btn { padding:.55rem 1rem; border-radius:10px; font-size:.82rem; font-weight:700; cursor:pointer; border:1.5px solid; transition:all .15s; white-space:nowrap; }
.cb-btn-accept-all { background:linear-gradient(90deg,#b146f8,#5ccbf9); color:white; border-color:transparent; }
.cb-btn-accept-all:hover { opacity:.9; }
.cb-btn-custom { background:var(--surface); color:var(--gray-700); border-color:var(--border); }
.cb-btn-custom:hover { border-color:#b146f8; color:#b146f8; }
.cb-btn-necessary { background:var(--gray-100); color:var(--text-muted); border-color:var(--border); font-weight:500; }
.cb-btn-necessary:hover { border-color:var(--text-muted); }
.cb-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.625rem 0; border-bottom:1px solid var(--border-soft); }
.cb-row:last-of-type { border-bottom:none; }
.cb-row-label { font-size:.84rem; font-weight:700; }
.cb-row-desc  { font-size:.74rem; color:var(--text-muted); line-height:1.4; margin-top:1px; }
.cb-toggle-label { position:relative; flex-shrink:0; cursor:pointer; }
.cb-toggle-input { position:absolute; opacity:0; width:0; height:0; }
.cb-toggle-track { display:block; width:40px; height:22px; border-radius:9999px; background:#cbcbd8; transition:background .2s; }
.cb-toggle-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--surface); transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.cb-toggle-input:checked + .cb-toggle-track { background:#b146f8; }
.cb-toggle-input:checked + .cb-toggle-track .cb-toggle-thumb { transform:translateX(18px); }
.cb-toggle-input:disabled + .cb-toggle-track { opacity:.5; cursor:not-allowed; }

/* ── Language Switcher ── */
.lang-switcher { display:flex; gap:.3rem; align-items:center; }
.lang-btn { display:flex; align-items:center; gap:.3rem; padding:.3rem .65rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); border-radius:8px; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .15s; }
.lang-btn:hover { background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); }
.lang-btn.active { background:linear-gradient(90deg,rgba(177,70,248,.3),rgba(92,203,249,.3)); color:white; border-color:rgba(177,70,248,.4); }

/* ══════════════════════════════════════════════════════════
   WTS Language Switcher — minimal text-only, no flags
   ══════════════════════════════════════════════════════════ */

/* ── Footer pill variant ──────────────────────────────── */
.lang-sw--footer {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-sw--footer .lang-sw-btn {
  display: flex;
  align-items: center;
  padding: 5px 11px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.38);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
  line-height: 1;
}
.lang-sw--footer .lang-sw-btn:hover:not(.active) {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
}
.lang-sw--footer .lang-sw-btn.active {
  background: rgba(177,70,248,.25);
  color: white;
}
.lang-sw--footer .lang-sw-sep {
  color: rgba(255,255,255,.12);
  font-size: .65rem;
  user-select: none;
  pointer-events: none;
}

/* ── Dropdown variant (for future nav use) ─────────────── */
.lang-sw--dropdown { position: relative; }
.lang-sw-current {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 7px;
  color: rgba(255,255,255,.7);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.lang-sw-current:hover { background: rgba(255,255,255,.13); color: white; }
.lang-sw-code { font-variant: small-caps; }
.lang-sw-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 130px;
  overflow: hidden;
  z-index: 9999;
}
.lang-sw-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  font-size: .83rem;
  font-weight: 500;
  color:var(--gray-700);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
  text-align: left;
}
.lang-sw-option:hover { background: #f4f0ff; color: #b146f8; }
.lang-sw-option.active { color: #b146f8; font-weight: 700; background: #f9f6ff; }

/* ── Footer bottom layout ──────────────────────────────── */
.footer-bottom { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-bottom .lang-sw--footer { flex-shrink: 0; }