:root { --bg:#0b0d10; --ink:#101317; --ink-soft:#5b6573; --paper:#ffffff; --brand:#1ea672; --brand-ink:#092d22; --muted:#f3f5f7; --ring:#dfe5ec; --black:#0b0d10; --shadow:0 10px 30px rgba(16,19,23,.12); --radius:16px; --radius-sm:12px; --step-1:clamp(28px,4vw,44px); --step-2:clamp(20px,2.4vw,28px); --step-3:16px; } *{box-sizing:border-box} html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper)} a{color:inherit;text-decoration:none} /* Underline links in main content areas */ main p a, main li a, .panel a, section a { text-decoration: underline; text-underline-offset: 2px; } /* Keep nav/header links without underline */ header a, .vb-header a, .nav a, footer a, .vb-footer a, a.btn { text-decoration: none; } .container{width:min(1120px,92%);margin-inline:auto} .title { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 8px; font-weight: 800; letter-spacing: -.01em } /* Add scroll offset for anchor links to account for sticky header */ section[id] { scroll-margin-top: 80px; /* Adjust this value to match your sticky header height */ } #form { scroll-margin-top: 150px; } /* Header (støtt både
og .vb-header) */ header,.vb-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);background:rgba(255,255,255,.7);border-bottom:1px solid var(--ring);z-index:50} .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0} .brand{display:flex;gap:10px;align-items:center;font-weight:800} .brand .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#23c483,#167a58)} .nav .cta{display:flex;gap:10px;align-items:center} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;font-weight:600;border:1px solid transparent;transition:transform .04s ease,background .2s ease,border-color .2s ease;font-size:inherit;font-family:inherit} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:#199567} .btn-outline{border-color:var(--ring);background:#fff;color:var(--black)} .btn-outline:hover{background:#f8fafb} /* Hero */ .hero{background:radial-gradient(1200px 500px at 50% 0%,#0e1218,#0a0c10),var(--bg);color:#e8edf3} .hero .wrap{display:grid;grid-template-columns:1fr;gap:26px;padding:48px 0 24px} .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:13px;color:#b9c5d3;width:max-content} .hero h1{font-size:var(--step-1);line-height:1.08;margin:10px 0 6px;font-weight:800;letter-spacing:-.02em} .hero p{font-size:18px;line-height:1.6;color:#bdc6d3;margin:0 0 18px} .hero .actions{display:flex;gap:12px;flex-wrap:wrap} .trust{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:18px} .trust img{height:28px;opacity:.9} .card-hero{margin-top:6px;background:#0f141a;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.35)} .card-hero p{margin:0;color:#c8d2df} /* Sections */ section{padding:48px 0} .section-title{font-size:var(--step-2);margin:0 0 10px;font-weight:800;letter-spacing:-.01em} .section-lead{margin:0 0 20px;color:var(--ink-soft)} .grid{display:grid;grid-template-columns:1fr;gap:18px} .feature{background:var(--muted);border:1px solid var(--ring);border-radius:var(--radius-sm);padding:18px} .feature h3{margin:0 0 6px;font-size:18px;display:flex;align-items:center;gap:8px} .feature p{margin:0;color:var(--ink-soft)} .icon{width:24px;height:24px;border-radius:8px;background:var(--brand);display:inline-block;margin-right:10px} .how{background:#fff} .steps{display:grid;grid-template-columns:1fr;gap:14px} .step{border:1px solid var(--ring);border-radius:var(--radius-sm);padding:16px} .step .num{font-weight:800;color:var(--brand);font-size:14px} .demo{background:var(--muted)} .demo .preview{background:#fff;border:1px solid var(--ring);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)} .preview img{display:block;width:100%;height:auto;object-fit:contain;aspect-ratio:16/9;background:#f6f8fa} /* FAQ – identisk med gammel stil */ .faq{background:#fff} details{border:1px solid var(--ring);border-radius:12px;padding:14px;background:#fff} details+details{margin-top:10px} summary{cursor:pointer;font-weight:600} summary::-webkit-details-marker{display:none} /* CTA band */ .cta-band{background:#0f1318;color:#e8edf3} .cta-band .box{display:flex;flex-direction:column;gap:12px;background:#0b0f14;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:18px} /* Footer (støtt både