:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #0B0E12;
  color: #BCC6D0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: #8FC0D8; }
.serif { font-family: "Fraunces", Georgia, "Times New Roman", serif; }

/* ---------- generic text pages (privacy / support) ---------- */
.wrap { max-width: 720px; margin: 0 auto; padding: 64px 24px 96px; }
.wrap h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 2.1rem; color: #F2F5F8; margin: 0 0 4px; }
.wrap h2 { font-weight: 600; font-size: 1.15rem; color: #EAF0F5; margin: 36px 0 8px; }
.sub { color: #7C8794; margin: 0 0 40px; }
.wrap p, .wrap li { color: #BCC6D0; }
ul { padding-left: 22px; }
.foot { margin-top: 56px; padding-top: 24px; border-top: 1px solid #1D232B; color: #6B7682; font-size: .9rem; }
.nav { margin-bottom: 40px; font-size: .95rem; }
.nav a { margin-right: 18px; text-decoration: none; }

/* ---------- landing ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 120px 24px 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(110,170,195,.18), rgba(11,14,18,0) 55%),
    linear-gradient(180deg, #11161F, #0B0E12);
}
/* ademende cirkel achter de titel */
.breath { position:absolute; top:-90px; left:50%; transform:translateX(-50%); width:520px; height:520px; pointer-events:none; }
.breath span {
  position:absolute; top:50%; left:50%; border-radius:50%;
  border:1px solid rgba(180,210,225,.18); transform:translate(-50%,-50%);
  animation: pulse 7s ease-in-out infinite;
}
.breath span:nth-child(1){ width:160px; height:160px; }
.breath span:nth-child(2){ width:300px; height:300px; animation-delay:.6s; }
.breath span:nth-child(3){ width:440px; height:440px; animation-delay:1.2s; }
@keyframes pulse { 0%,100%{ opacity:.25; transform:translate(-50%,-50%) scale(.92);} 50%{ opacity:.6; transform:translate(-50%,-50%) scale(1.06);} }
@media (prefers-reduced-motion: reduce){ .breath span{ animation:none; } }

.hero h1 { position:relative; font-weight:400; font-size:clamp(2.6rem,7vw,4rem); color:#F4F7FA; margin:0 0 14px; letter-spacing:-.5px; }
.tag { position:relative; font-size:clamp(1.05rem,3vw,1.35rem); color:#D2DBE3; max-width:560px; margin:0 auto 10px; }
.tag2 { position:relative; color:#7C8794; max-width:520px; margin:0 auto 36px; }

.btn {
  position:relative; display:inline-block; text-decoration:none;
  background:#E8F0F4; color:#10161D; font-weight:600; font-size:1rem;
  padding:14px 26px; border-radius:999px; transition:transform .15s ease, background .15s ease;
}
.btn:hover { transform:translateY(-1px); background:#fff; }
.btn.soon { background:transparent; color:#9FB0BC; border:1px solid #2A323C; cursor:default; }
.platform { position:relative; margin-top:16px; color:#6B7682; font-size:.85rem; letter-spacing:.4px; }

.rows { max-width:1040px; margin:0 auto; padding:40px 24px 0; }
.row { display:flex; align-items:center; gap:60px; padding:64px 0; border-top:1px solid #14191F; }
.row:first-child { border-top:none; }
.row.rev { flex-direction:row-reverse; }
.row img { width:300px; max-width:42vw; border-radius:32px; border:1px solid #1F2730; box-shadow:0 30px 70px rgba(0,0,0,.55); }
.row .text { flex:1; }
.row h2 { font-weight:400; font-size:clamp(1.7rem,3.6vw,2.4rem); color:#EEF3F7; margin:0 0 14px; line-height:1.18; }
.row p { font-size:1.08rem; color:#97A2AE; margin:0; max-width:44ch; }
@media (max-width:720px){
  .row, .row.rev { flex-direction:column; text-align:center; gap:26px; padding:48px 0; }
  .row p { margin:0 auto; }
}

.cta { text-align:center; padding:96px 24px 24px; }
.cta h2 { font-weight:400; font-size:clamp(1.8rem,4vw,2.6rem); color:#F2F5F8; margin:0 auto 26px; max-width:16ch; line-height:1.2; }

.pagefoot { text-align:center; padding:54px 24px 72px; border-top:1px solid #161B22; color:#6B7682; font-size:.92rem; }
.pagefoot a { margin:0 12px; text-decoration:none; }