/* Veripolis delt chrome — ÉN kilde for identitet + topbar + hero + footer + felles primitiver (#19).
   Alle sider lenker denne; ingen side kopierer chromen inn i sin egen <style>. Side-spesifikk CSS
   bor i sidens egen <style>. Endre utseendet på tvers HER — aldri per fil. */
:root { --gold:#daa520; --gold-2:#f0cf7a; --ink:#f4f1ea; --muted:rgba(244,241,234,0.62); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Cormorant Garamond',Georgia,serif; background:#07070d; color:var(--ink); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; z-index:-2; background:
    radial-gradient(1100px 760px at 50% -12%, rgba(218,165,32,0.13), transparent 62%),
    radial-gradient(900px 720px at 82% 116%, rgba(218,165,32,0.07), transparent 60%),
    linear-gradient(to bottom, #0a0a15 0%, #10101f 45%, #0a0f1e 100%); }
body::after { content:''; position:fixed; inset:0; z-index:-1; opacity:.5; pointer-events:none; background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(240,207,122,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(240,207,122,.35), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(240,207,122,.4), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(240,207,122,.3), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(240,207,122,.35), transparent);
    animation:drift 26s linear infinite; }
@keyframes drift { from{transform:translateY(0)} to{transform:translateY(-40px)} }

header { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 1.6rem; background:linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,.32)); backdrop-filter:blur(8px); transition:background .3s ease; }
header.scrolled { background:linear-gradient(to bottom, rgba(7,7,13,.92), rgba(7,7,13,.65)); }
.brandbar { display:flex; align-items:center; gap:.55rem; }
.homelink { display:inline-flex; color:#a67c0a; text-decoration:none; transition:color .3s ease; }
.homelink svg { width:22px; height:22px; display:block; }
.pagename { font-size:1.05rem; letter-spacing:3px; color:#a67c0a; font-weight:700; text-transform:uppercase; transition:color .3s ease; }
header.scrolled .homelink { color:var(--gold); }
header.scrolled .pagename { color:var(--gold); font-weight:700; }
.lang { display:flex; gap:.35rem; }
.lang button { background:transparent; border:1px solid rgba(176,138,20,.5); color:#8a6510; font-weight:700; border-radius:999px;
    padding:.32rem .85rem; cursor:pointer; font-family:inherit; font-size:.92rem; letter-spacing:1px; transition:all .25s ease; }
.lang button.active { background:#b8860b; border-color:#b8860b; color:#14141f; }
.lang button:hover { background:rgba(176,138,20,.12); }
header.scrolled .lang button { border-color:rgba(218,165,32,.4); color:var(--gold); }
header.scrolled .lang button.active { background:rgba(218,165,32,.2); border-color:var(--gold); color:#fff; }
header.scrolled .lang button:hover { background:rgba(218,165,32,.2); }
.hbar { display:flex; align-items:center; gap:.6rem; }
.who { font-size:1rem; color:rgba(20,20,31,.6); letter-spacing:.3px; font-weight:700; transition:color .3s ease; }
.authbtn { display:inline-flex; align-items:center; gap:.42rem; white-space:nowrap; background:transparent; border:1px solid rgba(176,138,20,.5); color:#8a6510; font-weight:700; border-radius:999px; padding:.32rem .85rem; cursor:pointer; font-family:inherit; font-size:.92rem; letter-spacing:1px; transition:all .25s ease; }
.authbtn:hover { background:rgba(176,138,20,.12); }
.authbtn .fbico { width:14px; height:14px; }
header.scrolled .authbtn { border-color:rgba(218,165,32,.4); color:var(--gold); }
header.scrolled .authbtn:hover { background:rgba(218,165,32,.2); }
header.scrolled .who { color:var(--muted); }
.who a, .who .wholink { color:inherit; text-decoration:underline; text-decoration-color:rgba(218,165,32,.85); text-underline-offset:3px; text-decoration-thickness:1.5px; cursor:pointer; transition:text-decoration-color .25s ease, color .25s ease; }
.who a:hover, .who .wholink:hover { text-decoration-color:var(--gold); color:var(--gold); }
/* Forsiden har egen header der hilsenen er selve .who-elementet (skrivemaskin-tekst, ikke barn-<a>) → gjør .who klikkbar med samme understrek */
.who.aslink { cursor:pointer; text-decoration:underline; text-decoration-color:rgba(218,165,32,.85); text-underline-offset:3px; text-decoration-thickness:1.5px; transition:text-decoration-color .25s ease, color .25s ease; }
.who.aslink:hover { text-decoration-color:var(--gold); color:var(--gold); }
/* Gate-skjemaer (followup, tilbakemelding): eksplisitt «Ikke nå»-avvis — dempet lenke-knapp under primærknappen. Overlayen dekker header-en igjen (ingen stille forbigåelse); «Ikke nå» er den ærlige veien ut. */
.fu-skip { display:block; margin:.9rem auto 0; background:none; border:none; color:var(--muted); font-family:'Helvetica Neue',Arial,sans-serif; font-size:.95rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.fu-skip:hover { color:var(--gold); }

/* Forside-variant (#7): VELKOMMEN/VERIPOLIS-ordmerke i stedet for hjem-ikon+sidenavn (forsiden ER hjem).
   Undersider bruker .brandbar/.homelink/.pagename over; forsiden bruker .hleft/.brandword/.adminlink her. */
.hleft { display:flex; align-items:center; gap:.75rem; }
.brandword { font-size:1.15rem; letter-spacing:4px; color:#a67c0a; font-weight:700; text-transform:uppercase; transition:color .3s ease; }
header.scrolled .brandword { color:var(--gold); font-weight:700; }
.brandword .bw-scrolled { display:none; }
header.scrolled .brandword .bw-top { display:none; }
header.scrolled .brandword .bw-scrolled { display:inline; }
body.authed .brandword .bw-top { display:none; }
body.authed .brandword .bw-scrolled { display:inline; }
.adminlink { display:none; font-family:'Helvetica Neue',Arial,sans-serif; font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:#8a6510; text-decoration:none; border:1px solid rgba(176,138,20,.5); border-radius:999px; padding:.22rem .6rem; transition:all .2s; }
header.scrolled .adminlink { color:var(--gold); border-color:rgba(218,165,32,.4); }
.adminlink:hover { background:rgba(176,138,20,.12); }

.hero { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:4.8rem 1.5rem 1.4rem; }
.whiteband { position:absolute; top:0; left:0; right:0; height:172px; background:linear-gradient(to bottom, #fff calc(100% - 2px), #2c2f37); z-index:0; }
.subline { position:absolute; left:0; right:0; z-index:0; pointer-events:none; background:linear-gradient(to bottom, #2c2f37 0%, rgba(44,47,55,0) 100%); }
.logoglow { position:absolute; z-index:0; pointer-events:none; border-radius:50%;
    background:radial-gradient(ellipse at center, #2b2e38 0%, #2b2e38 42%, rgba(43,46,56,0) 74%); filter:blur(9px); }
.hero img, .hero .tag, .hero .scrollcue { position:relative; z-index:1; }
.hero img { width:min(72vw,520px); margin-top:-1px;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); mask-composite:intersect;
    animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both; }
.hero .tag { margin-top:1.6rem; font-size:clamp(1.25rem,2.6vw,1.9rem); font-weight:300; letter-spacing:1px; color:var(--ink); max-width:720px; line-height:1.5; animation:rise 1.8s .2s cubic-bezier(.2,.7,.2,1) both; }
.hero .tag em { font-style:italic; color:var(--gold-2); }
.scrollcue { margin-top:2.4rem; color:var(--muted); font-size:.95rem; letter-spacing:3px; text-transform:uppercase; animation:pulse 2.6s ease-in-out infinite; }
@keyframes rise { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }

.content, .offerings { max-width:1120px; margin:0 auto; padding:0.6rem 1.4rem 5rem; }
.sectitle { text-align:center; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:400; color:var(--gold); letter-spacing:1px; margin-bottom:.4rem; text-wrap:balance; }
.secsub { text-align:center; color:var(--muted); font-size:1.15rem; margin-bottom:2.6rem; text-wrap:balance; }
.backlink { display:inline-block; margin-top:1.3rem; padding:.85rem 2rem; border-radius:999px; border:none; background:linear-gradient(135deg,var(--gold),#b8860b); color:#12121e; font-family:'Helvetica Neue',Arial,sans-serif; font-weight:700; text-decoration:none; }
.dchoose { display:inline-block; margin-top:1.1rem; font-family:'Helvetica Neue',Arial,sans-serif; font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(240,207,122,.85); background:none; border:none; padding:0; cursor:pointer; text-decoration:none; transition:color .25s ease; }
.dchoose:hover { color:var(--gold-2); }
.livearrow { display:inline-block; animation:arrownudge 1.6s ease-in-out infinite; }
@keyframes arrownudge { 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }

/* Ikon-kort (#5) — felles kort-primitiv brukt på tvers (login-gate, paneler, feilside). Side-
   spesifikke kort-varianter (.desire/.setcard/.card) + modifikatorer (.pane.checkout) bor per side. */
.pane { border:1px solid rgba(218,165,32,.3); border-radius:18px; background:rgba(20,20,34,.5); backdrop-filter:blur(6px); padding:2.3rem 1.9rem; text-align:center; }
.pane .smark { color:var(--gold-2); line-height:0; display:block; margin-bottom:.7rem; filter:drop-shadow(0 4px 18px rgba(218,165,32,.3)); }
.pane .smark svg { width:46px; height:46px; }
.pane h3 { font-size:1.5rem; line-height:1.3; color:var(--gold); font-weight:500; letter-spacing:.3px; margin-bottom:.5rem; text-wrap:balance; }

.testimonials { max-width:700px; margin:2.6rem auto 0; text-align:center; min-height:170px; }
.tm-quote { font-size:1.4rem; line-height:1.55; color:var(--ink); font-style:italic; transition:opacity .6s ease; }
.tm-author { margin-top:1rem; color:var(--gold); font-size:.92rem; letter-spacing:1.5px; text-transform:uppercase; font-family:'Helvetica Neue',Arial,sans-serif; opacity:0; transition:opacity .6s ease; }
.tm-author.show { opacity:1; }
footer { text-align:center; padding:2.6rem 1.5rem 3rem; border-top:1px solid rgba(218,165,32,.14); background:rgba(0,0,0,.25); }
footer .flinks { display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap; margin-bottom:1rem; }
footer a { color:rgba(218,165,32,.85); text-decoration:none; font-family:'Helvetica Neue',Arial,sans-serif; font-size:.9rem; letter-spacing:.4px; }
footer a:hover { color:#fff; }
footer .copy { color:var(--muted); font-size:.95rem; }
@media (max-width:560px){ header{padding:.9rem 1rem} .pagename{font-size:.9rem;letter-spacing:2px} .brandword{font-size:.95rem;letter-spacing:2px} .homelink svg{width:20px;height:20px} .lang button, .authbtn{font-size:.82rem;padding:.3rem .7rem} .who,.fbfull{display:none} .hero{min-height:auto;padding-bottom:2.4rem} .scrollcue{margin-top:2.6rem} .hero img{translate:0 .9px} }
@media (prefers-reduced-motion: reduce){ .livearrow{ animation:none; } }

/* ── Kvittering på handling (PRINCIPLES #30) ────────────────────────────────────
   Alt som Veripolis.busy() setter i arbeid får samme, gjenkjennelige tilstand — én
   kilde for hele nettstedet, uansett hvilken knappeklasse elementet ellers har.   */
[aria-busy="true"] { opacity:.72 !important; cursor:progress !important; pointer-events:none; transform:none !important; box-shadow:none !important; transition:opacity .18s ease; }

/* Miljømerke (dev/test/staging). Umulig å overse, men uten å ta plass fra innholdet — et
   miljø som ser ut som prod er en feilkilde: dev-tall lest som prod-tall er en feil beslutning. */
.envtag { margin-left:.6rem; padding:.18rem .6rem; border-radius:999px; font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:1.4px; color:#12121e; background:#ff8c42;
  box-shadow:0 2px 10px rgba(255,140,66,.45); vertical-align:middle; }