/* ============================================
   XYLOSNAP — SHARED SITE STYLES
   Used on every page.  Page-specific styles live
   in the page's own <style> block or a sibling
   stylesheet.
   ============================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  --ink:       #0E1626;
  --ink-2:     #1F2A40;
  --body:      #3A4358;
  --muted:     #6B7689;
  --line:      #E4E8EF;
  --soft:      #F4F7FB;
  --soft-2:    #EEF2F8;
  --paper:     #FFFFFF;

  --brand:     #3B66DE;
  --brand-2:   #2A4FBE;
  --brand-ink: #0B1E4A;
  --gold:      #C99A3A;
  --green:     #1F9D63;

  --nav-bg:    #0E1626;
  --nav-ink:   #FFFFFF;
  --nav-dim:   rgba(255,255,255,.72);

  --display:   "Space Grotesk", system-ui, sans-serif;
  --sans:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(14,22,38,.06), 0 1px 1px rgba(14,22,38,.04);
  --shadow-md: 0 10px 24px -8px rgba(14,22,38,.14), 0 2px 6px rgba(14,22,38,.06);
  --shadow-lg: 0 30px 60px -20px rgba(14,22,38,.22), 0 10px 20px -10px rgba(14,22,38,.10);

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-2); }
button{ font:inherit; cursor:pointer; }

h1,h2,h3,h4,h5{
  font-family:var(--display);
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:600;
}
h1{ font-size:clamp(36px, 5.4vw, 64px); letter-spacing:-.025em; font-weight:700; }
h2{ font-size:clamp(28px, 3.6vw, 44px); letter-spacing:-.02em; }
h3{ font-size:clamp(20px, 2.2vw, 24px); }
h4{ font-size:18px; }
p{ margin:0 0 1em; }
.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:14px;
}
.lead{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); line-height:1.55; }

/* ---------- LAYOUT ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding:clamp(64px, 9vw, 112px) 0; }
.section--tight{ padding:clamp(48px,6vw,72px) 0; }
.section--soft{ background:var(--soft); }
.section--ink{ background:var(--ink); color:#D7DDE9; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding:14px 22px;
  border-radius:var(--r-md);
  font-weight:600; font-size:15px;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  white-space:nowrap;
  border:1px solid transparent;
}
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 6px 16px -6px rgba(59,102,222,.55); }
.btn--primary:hover{ background:var(--brand-2); color:#fff; transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(59,102,222,.6); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--soft); }
.btn--on-dark{ background:#fff; color:var(--ink); }
.btn--on-dark:hover{ background:#EAF0FF; color:var(--ink); }
.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.08); color:#fff; }
.btn--lg{ padding:18px 28px; font-size:16px; }
.btn--xl{ padding:20px 32px; font-size:17px; }
.btn-sub{ display:block; font-size:12px; font-weight:400; opacity:.85; margin-top:2px; }

/* ---------- TOP NAV ---------- */
.topbar{
  background:var(--nav-bg);
  color:var(--nav-ink);
  position:sticky; top:0; z-index:200;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center;
  height:68px; gap:32px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--nav-ink);
  font-family:var(--display); font-weight:600; font-size:17px;
  text-decoration:none;
}
.brand-mark{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:7px;
  background:linear-gradient(135deg, var(--brand) 0%, #6A8EFF 100%);
  color:#fff;
}
.brand-mark svg{ width:18px; height:18px; }

.nav-links{
  display:flex; align-items:center; gap:4px;
  list-style:none; padding:0; margin:0;
  flex:1;
}
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px;
  border-radius:var(--r-sm);
  color:var(--nav-ink);
  font-size:14.5px; font-weight:500;
  background:transparent; border:0;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-caret{ width:10px; height:10px; opacity:.7; transition:transform .2s ease; }
.nav-item[data-open="true"] .nav-caret{ transform:rotate(180deg); }
.nav-item[data-open="true"] > .nav-link{ background:rgba(255,255,255,.09); }

.nav-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }

/* Language toggle button — pill in nav-right, sits left of Login */
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  appearance:none; cursor:pointer;
  padding:8px 12px;
  border-radius:99px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:13px; font-weight:600;
  letter-spacing:.04em;
  font-family:var(--sans);
  transition:background .15s ease, border-color .15s ease;
}
.lang-toggle:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
}
.lang-toggle svg{ width:14px; height:14px; opacity:.8; flex:none; }
@media (max-width: 960px){ .nav-right .lang-toggle{ display:none; } }

.dropdown{
  position:absolute; top:calc(100% + 12px); left:0;
  min-width:240px;
  background:#fff; color:var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s linear .15s;
}
.nav-item[data-open="true"] .dropdown{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}
.dropdown a{
  display:block; padding:10px 12px; border-radius:6px;
  color:var(--ink); font-size:14.5px; font-weight:500;
}
.dropdown a:hover{ background:var(--soft); color:var(--ink); }

.mega{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(960px, calc(100vw - 40px));
  background:#fff; color:var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:28px;
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s linear .18s;
}
.nav-item[data-open="true"] .mega{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
.mega-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr) 200px;
  gap:28px;
}
.mega-col-title{
  font-family:var(--sans);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}
.mega-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.mega-item{
  display:flex; gap:12px; padding:10px; border-radius:8px;
  color:var(--ink); text-decoration:none;
  transition:background .15s ease;
}
.mega-item:hover{ background:var(--soft); color:var(--ink); }
.mega-icon{
  width:34px; height:34px; flex:none;
  border-radius:8px; background:var(--soft);
  display:grid; place-items:center;
  color:var(--brand);
}
.mega-icon svg{ width:18px; height:18px; }
.mega-item-title{ font-weight:600; font-size:14.5px; line-height:1.2; margin-bottom:3px; color:var(--ink); display:block; }
.mega-item-desc{ font-size:13px; color:var(--muted); line-height:1.4; display:block; }

/* Muted / coming-soon state */
.mega-item--muted,
.mega-item--soon{ cursor:default; }
.mega-item--muted:hover,
.mega-item--soon:hover{ background:#F1F2F4; }
.mega-item--muted .mega-icon,
.mega-item--soon .mega-icon{ background:#ECEDEF; color:#9097A1; }
.mega-item--muted .mega-item-title,
.mega-item--soon .mega-item-title{ color:#9097A1; display:inline-flex; align-items:center; gap:8px; }
.mega-item--muted .mega-item-desc,
.mega-item--soon .mega-item-desc{ color:#A8ADB5; }
.mega-soon-badge{
  display:inline-block;
  font-size:10px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:#6B7280; background:#E4E6EA;
  padding:2px 7px; border-radius:99px;
  line-height:1.2;
  vertical-align:middle;
}
.mega-card{
  background:linear-gradient(160deg, #EEF2FE 0%, #DDE6FE 100%);
  border-radius:var(--r-md);
  padding:18px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:100%;
}
.mega-card-title{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--brand-ink); margin-bottom:6px; }
.mega-card-desc{ font-size:12.5px; color:var(--ink-2); line-height:1.4; margin-bottom:14px; }
.mega-card-tag{
  display:inline-block; padding:3px 8px; border-radius:99px;
  background:#fff; color:var(--brand); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  align-self:flex-start;
}

.nav-toggle{
  display:none;
  width:42px; height:42px; align-items:center; justify-content:center;
  background:transparent; border:0; color:#fff; border-radius:8px;
}
.nav-toggle:hover{ background:rgba(255,255,255,.08); }

.nav-mobile{ display:none; }

@media (max-width: 960px){
  .nav-links, .nav-right .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-right{ margin-left:auto; }
  .nav-mobile{
    display:none;
    position:absolute; top:68px; left:0; right:0;
    background:var(--nav-bg);
    border-top:1px solid rgba(255,255,255,.06);
    padding:14px var(--gutter) 24px;
  }
  .nav-mobile[data-open="true"]{ display:block; }
  .nav-mobile a{ display:block; padding:12px 4px; color:#fff; border-bottom:1px solid rgba(255,255,255,.07); font-size:15px; }
  .nav-mobile a:last-child{ border-bottom:0; }
  .nav-mobile-group{ margin-bottom:8px; }
  .nav-mobile-group-title{ color:var(--nav-dim); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:14px 4px 4px; }
}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--ink);
  color:#9DA9C2;
  /* Extra bottom padding so the sticky "Start nu gratis" CTA bar (≈74px tall)
     never overlaps the legal links when scrolled to the very bottom. */
  padding:72px 0 96px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3, 1fr);
  gap:40px;
  margin-bottom:48px;
}
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer .brand{ color:#fff; margin-bottom:18px; }
.footer p{ font-size:14px; line-height:1.6; max-width:32ch; color:#9DA9C2; }
.footer h5{
  color:#fff; font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 16px;
}
.footer-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-list a{ color:#9DA9C2; font-size:14.5px; text-decoration:none; }
.footer-list a:hover{ color:#fff; }
.footer-list a.is-muted,
.footer-legal a.is-muted{
  color:#5A6478;
  cursor:not-allowed;
  pointer-events:none;
}
.nav-mobile a.is-muted{ color:#7A8194; cursor:not-allowed; pointer-events:none; }
.mega-card a.is-muted{ color:#9097A1 !important; cursor:not-allowed; pointer-events:none; }
.nav-link.is-muted{ color:#7A8194; cursor:not-allowed; pointer-events:none; }
.dropdown a.is-muted{ color:#9097A1; cursor:not-allowed; pointer-events:none; }
/* Generic muted-link fallback (page-level usage) */
a.is-muted{ color:#9097A1; cursor:not-allowed; pointer-events:none; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-size:13px; color:#6B7689;
}
.footer-legal{ display:flex; gap:20px; }
.footer-legal a{ color:#6B7689; }
.footer-legal a:hover{ color:#fff; }

/* ---------- STICKY CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -8px rgba(14,22,38,.12);
  padding:14px var(--gutter);
  z-index:150;
  transform:translateY(110%);
  transition:transform .35s ease;
}
.sticky-cta[data-visible="true"]{ transform:translateY(0); }
.sticky-cta-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.sticky-cta-text{ font-weight:600; color:var(--ink); font-size:15px; margin:0; }
@media (max-width:680px){
  .sticky-cta-text{ display:none; }
  .sticky-cta-inner{ justify-content:center; }
  .sticky-cta .btn{ width:100%; }
}

/* ---------- MODAL ---------- */
.modal-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(14,22,38,.78);
  backdrop-filter:blur(6px);
  z-index:9999;
  align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay[data-open="true"]{ display:flex; }
.modal{
  background:#fff;
  border-radius:var(--r-lg);
  width:100%; max-width:440px;
  padding:40px 36px 32px;
  position:relative;
  box-shadow:var(--shadow-lg);
}
.modal-close{
  position:absolute; top:14px; right:18px;
  width:36px; height:36px;
  border:0; background:transparent;
  font-size:24px; color:var(--muted);
  border-radius:6px;
}
.modal-close:hover{ color:var(--ink); background:var(--soft); }
.modal h3{ margin-bottom:8px; font-size:24px; }
.modal p{ color:var(--muted); margin-bottom:22px; }
.modal input:not([type="checkbox"]):not([type="hidden"]){
  width:100%; padding:14px 16px;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  font-family:var(--sans); font-size:15px;
  margin-bottom:14px; outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.modal input:not([type="checkbox"]):not([type="hidden"]):focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(59,102,222,.12);
}
.modal button[type="submit"]{
  width:100%; padding:16px;
  background:var(--ink); color:#fff;
  border:0; border-radius:var(--r-md);
  font-weight:600; font-size:15px;
  transition:background .15s ease;
}
.modal button[type="submit"]:hover{ background:var(--ink-2); }
.modal-footnote{ text-align:center; font-size:12px; color:var(--muted); margin:14px 0 0; }

/* ---------- SECTION HEAD (used by every page) ---------- */
.section-head{ max-width:780px; margin-bottom:48px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-bottom:14px; }
.section-head p{ color:var(--muted); font-size:17px; }