/* Bokföria – webbplats. Färger och typografi följer designcentralens tokens. */
:root {
  --fjord-50:#eef7f7; --fjord-100:#d4ecec; --fjord-200:#a9d8da; --fjord-300:#74bcc1; --fjord-400:#409ca5;
  --fjord-500:#1f808b; --fjord-600:#166871; --fjord-700:#13545c; --fjord-800:#11454b; --fjord-900:#0e383d; --fjord-950:#072226;
  --granit-0:#fff; --granit-25:#fafbfb; --granit-50:#f4f6f6; --granit-100:#e9eded; --granit-200:#d7dddd; --granit-300:#b6bfbf;
  --granit-400:#8b9696; --granit-500:#677272; --granit-600:#4d5757; --granit-700:#394141; --granit-800:#252b2b; --granit-850:#1b2121;
  --granit-900:#141919; --granit-950:#0b0f0f;
  --saffran-50:#fff8e8; --saffran-100:#ffedc2; --saffran-300:#f9cf6a; --saffran-400:#f2b53a; --saffran-500:#e09a12; --saffran-700:#8c5b0b;
  --gran-50:#ecf8f1; --gran-500:#1f8a4c; --gran-600:#187040; --gran-400:#3fb06c;
  --hjortron-50:#fff4e8; --hjortron-600:#9a5714; --hjortron-400:#f0a052;
  --isvatten-50:#edf3fd; --isvatten-600:#2357b3; --isvatten-400:#5b90ec;
  --norrsken-a:#7c5cff; --norrsken-b:#2ec4b6;
  --font-sans:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --wrap:1200px;

  color-scheme: light;
  --bg:var(--granit-0); --bg-alt:var(--granit-50); --surface:var(--granit-0); --surface-2:var(--granit-25);
  --fg:var(--granit-900); --fg-muted:var(--granit-600); --fg-subtle:var(--granit-500);
  --border:var(--granit-200); --border-subtle:var(--granit-100);
  --brand:var(--fjord-600); --brand-hover:var(--fjord-700); --brand-fg:#fff; --brand-soft:var(--fjord-50); --brand-text:var(--fjord-700);
  --pos:var(--gran-600); --pos-soft:var(--gran-50); --warn:var(--hjortron-600); --warn-soft:var(--hjortron-50);
  --info:var(--isvatten-600); --info-soft:var(--isvatten-50);
  --ai:linear-gradient(135deg,var(--norrsken-a),var(--norrsken-b));
  --shadow-lg:0 24px 60px -20px rgb(14 56 61 / .28), 0 8px 20px -10px rgb(14 56 61 / .18);
  --shadow-md:0 10px 30px -12px rgb(14 56 61 / .25);
  --logo:var(--fjord-600); --logo-mtn:#fff;
  --m1:var(--fjord-100); --m2:var(--fjord-50); --m3:var(--granit-50);
  --hero-glow:radial-gradient(60% 60% at 75% 30%, rgb(64 156 165 / .18), transparent 70%), radial-gradient(40% 40% at 15% 10%, rgb(242 181 58 / .14), transparent 70%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg:var(--granit-950); --bg-alt:var(--granit-900); --surface:var(--granit-900); --surface-2:var(--granit-850);
  --fg:var(--granit-50); --fg-muted:var(--granit-300); --fg-subtle:var(--granit-400);
  --border:var(--granit-800); --border-subtle:var(--granit-850);
  --brand:var(--fjord-400); --brand-hover:var(--fjord-300); --brand-fg:var(--fjord-950); --brand-soft:rgb(64 156 165 / .14); --brand-text:var(--fjord-300);
  --pos:var(--gran-400); --pos-soft:rgb(63 176 108 / .14); --warn:var(--hjortron-400); --warn-soft:rgb(240 160 82 / .14);
  --info:var(--isvatten-400); --info-soft:rgb(91 144 236 / .14);
  --shadow-lg:0 24px 60px -20px rgb(0 0 0 / .7); --shadow-md:0 10px 30px -12px rgb(0 0 0 / .6);
  --logo:var(--fjord-400); --logo-mtn:var(--fjord-950);
  --m1:var(--fjord-900); --m2:var(--fjord-950); --m3:var(--granit-900);
  --hero-glow:radial-gradient(60% 60% at 75% 30%, rgb(64 156 165 / .22), transparent 70%), radial-gradient(40% 40% at 15% 10%, rgb(242 181 58 / .08), transparent 70%);
}}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:var(--granit-950); --bg-alt:var(--granit-900); --surface:var(--granit-900); --surface-2:var(--granit-850);
  --fg:var(--granit-50); --fg-muted:var(--granit-300); --fg-subtle:var(--granit-400);
  --border:var(--granit-800); --border-subtle:var(--granit-850);
  --brand:var(--fjord-400); --brand-hover:var(--fjord-300); --brand-fg:var(--fjord-950); --brand-soft:rgb(64 156 165 / .14); --brand-text:var(--fjord-300);
  --pos:var(--gran-400); --pos-soft:rgb(63 176 108 / .14); --warn:var(--hjortron-400); --warn-soft:rgb(240 160 82 / .14);
  --info:var(--isvatten-400); --info-soft:rgb(91 144 236 / .14);
  --shadow-lg:0 24px 60px -20px rgb(0 0 0 / .7); --shadow-md:0 10px 30px -12px rgb(0 0 0 / .6);
  --logo:var(--fjord-400); --logo-mtn:var(--fjord-950);
  --m1:var(--fjord-900); --m2:var(--fjord-950); --m3:var(--granit-900);
  --hero-glow:radial-gradient(60% 60% at 75% 30%, rgb(64 156 165 / .22), transparent 70%), radial-gradient(40% 40% at 15% 10%, rgb(242 181 58 / .08), transparent 70%);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 17px/1.6 var(--font-sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg { display:block; max-width:100%; }
a { color:var(--brand-text); }
h1,h2,h3 { margin:0; letter-spacing:-.025em; line-height:1.1; }
p { margin:0; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hp { position:absolute; left:-9999px; opacity:0; }
.skip { position:absolute; left:16px; top:-60px; background:var(--brand); color:var(--brand-fg); padding:8px 14px; border-radius:6px; z-index:100; }
.skip:focus { top:12px; }
:focus-visible { outline:3px solid color-mix(in oklab, var(--fjord-500) 55%, transparent); outline-offset:2px; border-radius:6px; }
.mono { font-family:var(--font-mono); font-size:.86em; }

/* Knappar */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 16px/1 var(--font-sans); padding:15px 22px; border-radius:10px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:background .12s, transform .12s, box-shadow .18s; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--brand); color:var(--brand-fg); box-shadow:0 6px 18px -8px color-mix(in oklab, var(--fjord-600) 70%, transparent); }
.btn--primary:hover { background:var(--brand-hover); }
.btn--saffran { background:var(--saffran-400); color:var(--granit-950); }
.btn--saffran:hover { background:var(--saffran-300); }
.btn--ghost { background:transparent; color:var(--fg); border-color:var(--border); }
.btn--sm { padding:10px 16px; font-size:14px; border-radius:8px; }
.btn--block { width:100%; }
.iconbtn { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--fg); cursor:pointer; }
.iconbtn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.i-moon { display:none !important; }
:root[data-theme="dark"] .i-sun { display:none !important; } :root[data-theme="dark"] .i-moon { display:block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .i-sun { display:none !important; } :root:not([data-theme="light"]) .i-moon { display:block !important; } }

/* Nav */
.nav { position:sticky; top:0; z-index:60; background:color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .18s; }
.nav.scrolled { border-bottom-color:var(--border); }
.nav__inner { display:flex; align-items:center; gap:32px; height:68px; }
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); font-weight:800; font-size:20px; letter-spacing:-.03em; }
.logo svg { width:32px; height:32px; color:var(--logo); }
.nav nav { flex:1; }
.nav__links { display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav__links a { color:var(--fg-muted); text-decoration:none; font-size:15px; font-weight:500; transition:color .12s; }
.nav__links a:hover { color:var(--fg); }
.nav__actions { display:flex; align-items:center; gap:10px; }
.nav__burger { display:none; }

/* Hero */
.hero { position:relative; padding:72px 0 120px; overflow:hidden; background:var(--hero-glow); }
.hero__bg { position:absolute; inset:auto 0 0 0; height:340px; pointer-events:none; }
.hero__bg svg { width:100%; height:100%; }
.hero__bg .m1 { fill:var(--m1); opacity:.6; } .hero__bg .m2 { fill:var(--m2); } .hero__bg .m3 { fill:var(--m3); }
.hero__grid { position:relative; display:grid; grid-template-columns:1.02fr 1fr; gap:56px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--brand-text); background:var(--brand-soft); border:1px solid color-mix(in oklab, var(--fjord-400) 30%, transparent); padding:6px 14px 6px 10px; border-radius:999px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--saffran-400); box-shadow:0 0 0 4px rgb(242 181 58 / .22); animation:pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgb(242 181 58 / 0); } }
.hero h1 { font-size:clamp(40px, 5.6vw, 68px); font-weight:800; margin:22px 0 22px; letter-spacing:-.035em; line-height:1.02; }
.hl { background:linear-gradient(100deg, var(--brand) 10%, var(--fjord-400) 60%, var(--saffran-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size:19px; color:var(--fg-muted); max-width:560px; }
.signup { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; max-width:520px; }
.signup input[type=email] { flex:1 1 240px; min-width:0; font:400 16px var(--font-sans); padding:14px 16px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--fg); transition:border-color .12s, box-shadow .12s; }
.signup input[type=email]:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in oklab, var(--fjord-500) 22%, transparent); }
.signup__msg { flex-basis:100%; font-size:15px; min-height:0; }
.signup__msg.ok { color:var(--pos); font-weight:600; } .signup__msg.err { color:var(--warn); }
.checks { display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; padding:0; margin:20px 0 0; font-size:15px; color:var(--fg-muted); }
.checks li { display:flex; align-items:center; gap:8px; }
.checks li::before { content:""; width:18px; height:18px; border-radius:50%; background:var(--pos-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Produktvy */
.mock { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); transform:perspective(1600px) rotateY(-6deg) rotateX(3deg); transition:transform .6s var(--ease-out); }
.mock:hover { transform:perspective(1600px) rotateY(-2deg) rotateX(1deg); }
.mock__bar { display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid var(--border-subtle); }
.mock__bar i { width:10px; height:10px; border-radius:50%; background:var(--border); }
.mock__bar span { margin-left:12px; font:500 12px var(--font-mono); color:var(--fg-subtle); background:var(--bg-alt); padding:4px 10px; border-radius:6px; }
.mock__body { display:flex; }
.mock__side { width:56px; padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:14px; border-right:1px solid var(--border-subtle); }
.mock__side b { width:22px; height:22px; border-radius:6px; background:var(--bg-alt); }
.mock__side b.on { background:var(--brand); }
.mock__main { flex:1; padding:20px 22px 22px; min-width:0; }
.mock__head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.mock__head small { display:block; font-size:13px; color:var(--fg-subtle); }
.mock__head strong { display:block; font-size:34px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:2px 0; }
.up { font-style:normal; font-size:13px; font-weight:600; color:var(--pos); }
.badge { display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.badge--pos { background:var(--pos-soft); color:var(--pos); } .badge--warn { background:var(--warn-soft); color:var(--warn); }
.badge--info { background:var(--info-soft); color:var(--info); } .badge--brand { background:var(--brand-soft); color:var(--brand-text); }
.chart { display:flex; align-items:flex-end; gap:8px; height:120px; margin:18px 0 16px; padding-bottom:1px; border-bottom:1px solid var(--border-subtle); }
.chart span { flex:1; height:var(--h); border-radius:6px 6px 2px 2px; background:linear-gradient(to top, var(--fjord-600), var(--fjord-400)); opacity:.9; transform-origin:bottom; animation:grow .9s var(--ease-out) both; }
.chart span:nth-child(odd) { background:linear-gradient(to top, var(--fjord-200), var(--fjord-100)); }
.chart span:last-child { background:linear-gradient(to top, var(--saffran-500), var(--saffran-300)); }
.chart span:nth-child(n) { animation-delay:calc(var(--i, 0) * 60ms); }
@keyframes grow { from { transform:scaleY(0); } }
.mock__rows { display:grid; gap:2px; }
.row { display:grid; grid-template-columns:62px 1fr auto 82px; align-items:center; gap:10px; font-size:13px; padding:9px 4px; border-radius:6px; }
.row:hover { background:var(--bg-alt); }
.row .mono { color:var(--fg-subtle); }
.row .amt { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.float { position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-md); padding:12px 14px; animation:bob 6s ease-in-out infinite; }
.float b { display:block; font-size:14px; } .float small { display:block; font-size:12px; color:var(--fg-subtle); }
.float--ai { left:-36px; bottom:56px; display:flex; gap:10px; align-items:center; }
.float--vat { right:-28px; top:-58px; animation-delay:-3s; }
.float--vat b { font-size:20px; letter-spacing:-.02em; margin:2px 0 6px; font-variant-numeric:tabular-nums; }
.tag { font-size:11px; font-weight:600; color:var(--pos); background:var(--pos-soft); padding:2px 8px; border-radius:999px; }
@keyframes bob { 50% { transform:translateY(-8px); } }
.ai-mark { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--ai); color:#fff; font:700 12px var(--font-sans); flex:none; }

/* Strip */
.strip { border-block:1px solid var(--border); background:var(--bg-alt); }
.strip__inner { display:flex; align-items:center; gap:28px; padding-block:20px; }
.strip__inner > span { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-subtle); white-space:nowrap; }
.strip ul { display:flex; flex-wrap:wrap; gap:10px 28px; list-style:none; padding:0; margin:0; }
.strip li { font-weight:600; color:var(--fg-muted); font-size:15px; }

/* Stats */
.stats { padding:72px 0 8px; }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat { padding:8px 0 8px 20px; border-left:3px solid var(--brand); }
.stat:nth-child(2) { border-color:var(--saffran-400); } .stat:nth-child(3) { border-color:var(--fjord-300); } .stat:nth-child(4) { border-color:var(--gran-500); }
.stat b { display:block; font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1.05; }
.stat span { color:var(--fg-muted); font-size:15px; }

/* Sektioner */
.section { padding:104px 0; }
.section--alt { background:var(--bg-alt); }
.sechead { text-align:center; max-width:720px; margin:0 auto 56px; }
.sechead--left { text-align:left; margin:0; }
.sechead h2 { font-size:clamp(32px, 4vw, 48px); font-weight:800; margin:10px 0 16px; }
.sechead p:last-child { color:var(--fg-muted); font-size:18px; }
.overline { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-text); }
.overline--ai { background:var(--ai); -webkit-background-clip:text; background-clip:text; color:transparent; }

.features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; transition:transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.feat:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:color-mix(in oklab, var(--fjord-400) 40%, var(--border)); }
.feat__ic { width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:var(--brand-soft); color:var(--brand-text); margin-bottom:18px; }
.feat__ic svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feat h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
.feat p { color:var(--fg-muted); font-size:16px; }

/* Split / AI */
.split { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center; }
.split h2 { font-size:clamp(32px, 4vw, 48px); font-weight:800; margin:10px 0 18px; }
.split__copy > p { color:var(--fg-muted); font-size:18px; }
.bullets { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; }
.bullets li { position:relative; padding-left:30px; color:var(--fg-muted); }
.bullets li b { color:var(--fg); }
.bullets li::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:5px; background:var(--ai); }
.aicard { display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; align-items:center; }
.receipt { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:20px 16px; font:500 12px/1.6 var(--font-mono); color:var(--fg-muted); box-shadow:var(--shadow-md); transform:rotate(-3deg); position:relative; }
.receipt::after { content:""; position:absolute; inset:0; border-radius:6px; background:linear-gradient(transparent 40%, rgb(124 92 255 / .12) 50%, transparent 60%); background-size:100% 300%; animation:scan 3.2s ease-in-out infinite; }
@keyframes scan { from { background-position:0 100%; } to { background-position:0 0; } }
.receipt b { display:block; color:var(--fg); font-size:14px; text-align:center; } .receipt small { display:block; text-align:center; font-size:10px; }
.receipt hr { border:0; border-top:1px dashed var(--border); margin:10px 0; }
.receipt p { display:flex; justify-content:space-between; gap:8px; } .receipt .tot { color:var(--fg); font-weight:700; }
.aicard__out { background:var(--surface); border-radius:16px; padding:20px; box-shadow:var(--shadow-lg); border:1px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--ai) border-box; }
.aicard__title { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; margin-bottom:14px; flex-wrap:wrap; }
.conf { margin-left:auto; font-size:12px; font-weight:600; color:var(--pos); background:var(--pos-soft); padding:3px 9px; border-radius:999px; }
.aicard table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.aicard th { text-align:left; font-weight:600; color:var(--fg-subtle); font-size:12px; padding:6px 4px; border-bottom:1px solid var(--border); }
.aicard th:not(:first-child), .aicard td:not(:first-child) { text-align:right; }
.aicard td { padding:9px 4px; border-bottom:1px solid var(--border-subtle); }
.aicard td:nth-child(2) { color:var(--fjord-600); } .aicard td:nth-child(3) { color:var(--saffran-700); }
:root[data-theme="dark"] .aicard td:nth-child(2) { color:var(--fjord-300); } :root[data-theme="dark"] .aicard td:nth-child(3) { color:var(--saffran-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aicard td:nth-child(2) { color:var(--fjord-300); } :root:not([data-theme="light"]) .aicard td:nth-child(3) { color:var(--saffran-300); } }
.aicard__actions { display:flex; gap:8px; margin-top:16px; }

/* Pris */
.pricing { display:grid; grid-template-columns:1.7fr 1fr; gap:24px; max-width:1120px; margin:0 auto; }
.price { position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; background:var(--surface); border-radius:20px; padding:36px; box-shadow:var(--shadow-lg); border:2px solid var(--brand); }
.price__amt { display:flex; align-items:baseline; gap:8px; margin:16px 0 8px; }
.price__amt b { font-size:88px; font-weight:800; letter-spacing:-.05em; line-height:1; }
.price__amt span { color:var(--fg-muted); font-weight:500; }
.price__top p { color:var(--fg-muted); font-size:15px; margin-bottom:24px; }
.price__list { list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:15px; }
.price__list li { display:flex; gap:10px; align-items:flex-start; }
.price__list li::before, .compare li::before { content:""; flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%; background:var(--pos-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.compare { background:var(--bg-alt); border:1px dashed var(--border); border-radius:20px; padding:32px; }
.compare h3 { font-size:20px; margin-bottom:16px; }
.compare ul { list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px; color:var(--fg-subtle); }
.compare li { display:flex; gap:10px; }
.compare li::before { background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8323c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/11px no-repeat; }
.note { font-size:14px; color:var(--fg-muted); border-top:1px solid var(--border); padding-top:16px; }

/* För vem */
.who { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.who__card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px 24px 24px 64px; position:relative; }
.who__card::before { content:""; position:absolute; left:24px; top:26px; width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg, var(--fjord-500), var(--fjord-300)); }
.who__card:nth-child(3n+2)::before { background:linear-gradient(135deg, var(--saffran-500), var(--saffran-300)); }
.who__card:nth-child(3n)::before { background:linear-gradient(135deg, var(--fjord-700), var(--fjord-500)); }
.who__card h3 { font-size:18px; margin-bottom:6px; } .who__card p { color:var(--fg-muted); font-size:15px; }

/* Trygghet */
.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust__item { padding:28px; border-radius:16px; border:1px solid var(--border); background:var(--surface); }
.trust__item h3 { font-size:18px; margin-bottom:8px; } .trust__item p { color:var(--fg-muted); font-size:15px; }

/* FAQ */
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.faq__list { display:grid; gap:10px; }
details { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:0 22px; transition:border-color .18s; }
details[open] { border-color:color-mix(in oklab, var(--fjord-400) 45%, var(--border)); }
summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-weight:600; font-size:17px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; flex:none; width:24px; height:24px; border-radius:50%; background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23409ca5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat; transition:transform .18s; }
details[open] summary::after { transform:rotate(45deg); }
details p { padding:0 0 20px; color:var(--fg-muted); }

/* CTA */
.cta { padding:96px 0; background:radial-gradient(70% 90% at 80% 0%, var(--fjord-500), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgb(242 181 58 / .25), transparent 70%), var(--fjord-900); color:#fff; position:relative; overflow:hidden; }
.cta__inner { text-align:center; max-width:760px; }
.cta h2 { font-size:clamp(32px, 4.4vw, 52px); font-weight:800; }
.cta p { color:var(--fjord-100); font-size:18px; margin:16px auto 0; max-width:600px; }
.cta .signup { margin:32px auto 0; justify-content:center; }
.signup--light input[type=email] { background:rgb(255 255 255 / .1); border-color:rgb(255 255 255 / .25); color:#fff; }
.signup--light input[type=email]::placeholder { color:rgb(255 255 255 / .6); }
.signup--light input[type=email]:focus { border-color:var(--saffran-400); box-shadow:0 0 0 4px rgb(242 181 58 / .3); }
.signup--light .signup__msg.ok { color:var(--saffran-300); } .signup--light .signup__msg.err { color:var(--saffran-100); }
.cta .fine { font-size:14px; color:var(--fjord-200); margin-top:18px; } .cta .fine a { color:#fff; }

/* Sidfot */
.foot { padding:48px 0; border-top:1px solid var(--border); }
.foot__inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; }
.foot p { color:var(--fg-subtle); font-size:14px; margin-top:6px; }
.foot nav { display:flex; flex-wrap:wrap; gap:22px; }
.foot nav a { color:var(--fg-muted); text-decoration:none; font-size:15px; } .foot nav a:hover { color:var(--fg); }
.foot__copy { margin:0 !important; }

/* Juridisk sida */
.legal { max-width:760px; padding:72px 24px 96px; margin:0 auto; }
.legal h1 { font-size:44px; font-weight:800; margin-bottom:12px; }
.legal h2 { font-size:22px; margin:36px 0 10px; }
.legal p, .legal li { color:var(--fg-muted); } .legal p + p { margin-top:12px; }

/* Rörelse */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 40%; }
    @keyframes rise { from { opacity:0; transform:translateY(24px); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none !important; transition:opacity .2s !important; }
  .reveal { transform:none; } .mock, .mock:hover { transform:none; }
  html { scroll-behavior:auto; }
}

/* Responsivt */
@media (max-width: 1080px) {
  .features, .who { grid-template-columns:repeat(2,1fr); }
  .trust { grid-template-columns:repeat(2,1fr); }
  .pricing { grid-template-columns:1fr; }
}
@media (max-width: 920px) {
  .hero { padding:48px 0 96px; }
  .hero__grid, .split, .faq { grid-template-columns:1fr; gap:48px; }
  .mock { transform:none; max-width:620px; margin:0 auto; width:100%; }
  .float--ai { left:-8px; } .float--vat { right:-8px; }
  .stats__grid { grid-template-columns:repeat(2,1fr); gap:32px 24px; }
  .nav__links { position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0; padding:8px 16px 16px; background:var(--bg); border-bottom:1px solid var(--border); display:none; }
  .nav__links.open { display:flex; }
  .nav__links a { display:block; padding:14px 8px; font-size:17px; border-bottom:1px solid var(--border-subtle); }
  .nav__burger { display:grid; }
  .nav__inner { gap:16px; }
}
@media (max-width: 640px) {
  .wrap { padding:0 16px; }
  body { font-size:16px; }
  .nav .btn--sm { display:none; }
  .features, .who, .trust { grid-template-columns:1fr; }
  .section { padding:72px 0; }
  .price { grid-template-columns:1fr; padding:26px; }
  .compare { padding:26px; }
  .strip__inner { flex-direction:column; align-items:flex-start; gap:12px; }
  .row { grid-template-columns:52px 1fr 76px; } .row .badge { display:none; }
  .mock__side { display:none; }
  .float--vat { top:-36px; right:4px; padding:10px 12px; } .float--vat b { font-size:17px; }
  .float--ai { bottom:-64px; left:8px; }
  .hero { padding-bottom:128px; }
  .aicard { grid-template-columns:1fr; } .receipt { max-width:260px; margin:0 auto; }
  .signup .btn { flex:1 1 100%; }
  .stat b { font-size:36px; }
}