:root{--bg:#0B4C85;--deep:#073A68;--ink:#0B2A45;--white:#fff;--muted:#C9DAEA;--line:rgba(255,255,255,.24);--soft:rgba(255,255,255,.08);--orange:#FFA235;--r:6px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:400 1.0625rem/1.55 'Schibsted Grotesk',system-ui,sans-serif;color:var(--white);background:var(--bg);-webkit-text-size-adjust:100%}
h1,h2,h3{line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em;max-width:60ch}
a{color:var(--white);text-decoration-color:var(--orange);text-underline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.soon{color:var(--orange);font-weight:700}
.logo{font-weight:800;font-size:1.25rem;letter-spacing:-.03em;color:var(--white);text-decoration:none}
.logo i{display:inline-block;width:.38em;height:.38em;border-radius:50%;background:var(--orange);margin-left:3px}
.btn{display:inline-block;border:0;border-radius:var(--r);background:var(--white);color:var(--bg);padding:.85em 1.3em;font-family:inherit;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;text-decoration:none}
.btn.alt{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--white)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.link{background:none;border:0;padding:0;font:inherit;color:var(--white);cursor:pointer;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
label{display:block;font-weight:600;margin:0 0 14px}
input{display:block;width:100%;margin-top:6px;padding:.75em .9em;font:inherit;font-weight:400;color:var(--ink);background:var(--white);border:2px solid transparent;border-radius:var(--r)}
input:focus{border-color:var(--orange)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;padding-bottom:18px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row input{margin:0;flex:1;min-width:0}
.between{justify-content:space-between}
.err{color:#FFC9C2;min-height:1.5em;margin:10px 0 0}
.chip{font-size:.85rem;font-weight:700;background:var(--orange);color:var(--ink);padding:3px 10px;border-radius:99px}
.pass{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:400px;width:100%}
.pass-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.pass-h b{font-size:1.2rem;letter-spacing:-.02em}
.pass-h span{color:var(--orange);font-weight:700}
.dots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.dot{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:2px dashed rgba(255,255,255,.55);background:transparent;color:var(--white);font-size:.8rem;font-weight:700}
.dot.on{border:2px solid var(--white);background:var(--white);color:var(--bg)}
.dot.gift{border-color:var(--orange);color:var(--orange);font-size:.68rem}
.dot.gift.on{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.pop{animation:pop .28s ease-out}
@keyframes pop{50%{transform:scale(1.2)}}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:48px 0 88px}
.hero p{font-size:1.2rem;color:var(--muted)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 12px}
.demo{display:grid;gap:14px;justify-items:start}
.sec{padding:72px 0;border-top:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:32px}
.steps p{color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:32px}
.plans.two{grid-template-columns:repeat(2,1fr)}
.plan{padding:28px 24px 32px}
.plan+.plan{border-left:1px solid var(--line)}
.plan.feat{box-shadow:inset 0 3px 0 var(--orange)}
.price{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.price small{font-size:1rem;font-weight:700;color:var(--orange);letter-spacing:0}
.ticks{list-style:none;padding:0;margin:16px 0 0}
.ticks li{padding:6px 0 6px 24px;position:relative}
.ticks li::before{content:'';position:absolute;left:0;top:.8em;width:11px;height:6px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.formbox{max-width:440px}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{background:none;border:0;padding:14px 0;font-family:inherit;font-size:1rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--white);border-bottom-color:var(--orange)}
.panel{padding:28px 0 64px}
.scan{position:relative;background:var(--deep);border-radius:var(--r);overflow:hidden;aspect-ratio:1;max-width:420px;margin-bottom:16px}
.scan video{width:100%;height:100%;object-fit:cover}
.scan::after{content:'';position:absolute;inset:16%;border:2px solid var(--orange);border-radius:10px;pointer-events:none}
.msg{padding:12px 14px;border-radius:var(--r);background:var(--soft);border:1px solid var(--line);max-width:420px}
.msg.ok{border-color:var(--white)}
.msg.reward{border-color:var(--orange);background:rgba(255,162,53,.16)}
.msg.bad{border-color:#FFC9C2}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--muted);font-size:.9rem}
.cardpage{padding:24px 0 64px;display:grid;justify-items:center;gap:18px;text-align:center}
img[src^="/api/qr"]{background:var(--white);padding:10px;border-radius:10px;display:block;margin:0 auto}
.qrbox{margin-top:18px}
.qrbox img{width:170px;height:170px}
.code{font-family:ui-monospace,monospace;letter-spacing:.12em;color:var(--muted);margin-top:8px}
footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
@media(max-width:820px){.hero,.steps,.plans,.plans.two{grid-template-columns:1fr}.plan+.plan{border-left:0;border-top:1px solid var(--line)}.hero{gap:36px;padding-bottom:56px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}