/* ==========================================================================
   Beyond Vision — fælles designsystem
   Bygger på Brand Bible: Vision Green, Sailing Cyan, Core Dark, Vision White.
   Én fil for hele sitet. Ret her — ikke i de enkelte sider.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brandfarver — låst, jf. Brand Bible */
  --vision-green:#76ba1b;
  --vision-green-dark:#5f9615;
  --sailing-cyan:#00d2ff;
  --sailing-deep:#0a6f8a;
  --core-dark:#0e0e0e;
  --terminal-black:#050505;
  --construction:#f5a524;

  /* Flader */
  --bg:#ffffff;
  --bg-soft:#f5f6f5;
  --bg-sunken:#eceeec;
  --surface:#ffffff;
  --surface-glass:rgba(255,255,255,.72);
  --border:rgba(14,14,14,.10);
  --border-strong:rgba(14,14,14,.20);

  /* Tekst */
  --text:#0e0e0e;
  --text-soft:#3d4147;
  --muted:#6b6f76;
  --on-accent:#ffffff;

  /* Dybde */
  --shadow-sm:0 2px 8px rgba(14,14,14,.05);
  --shadow:0 14px 40px rgba(14,14,14,.09);
  --shadow-lg:0 30px 70px rgba(14,14,14,.13);
  --ring:0 0 0 3px rgba(118,186,27,.22);

  /* Form */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* Rytme */
  --gutter:clamp(20px, 5vw, 80px);
  --section:clamp(72px, 9vw, 150px);
  --maxw:1240px;
  --nav-h:72px;      /* den faste menus højde — sider med egen topbjælke rykker ned herefter */

  /* Typografi */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Bricolage Grotesque','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

html[data-theme="dark"]{
  --bg:#050505;
  --bg-soft:#0e0e10;
  --bg-sunken:#161619;
  --surface:#131316;
  --surface-glass:rgba(19,19,22,.76);
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.24);
  --text:#f4f5f6;
  --text-soft:#c8cbd0;
  --muted:#9aa0a6;
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6);
}

/* Accentfarve. Standarden står FØRST — ellers overskriver den Sailing-reglen,
   fordi de to vælgere vejer lige meget og den sidste vinder. */
:root,[data-accent="vision"]{
  --accent:var(--vision-green);
  --accent-ink:#ffffff;
  --accent-soft:rgba(118,186,27,.12);
}
/* Sailing Log-sider skifter til Sailing Cyan */
[data-accent="sailing"]{
  --accent:var(--sailing-cyan);
  --accent-ink:#06232b;
  --accent-soft:rgba(0,210,255,.12);
}

/* ---------- Kompatibilitet med de ældre sider ----------
   Siderne fra før designsystemet definerede deres egne farvenavne i en
   :root-blok. Da deres CSS blev kapslet ind under .pg, forsvandt den blok —
   den hørte til rammen. Navnene lever videre her, men peger nu på
   designsystemets tokens. Dermed følger de gamle sider også med over i
   mørk tilstand, hvilket de ikke gjorde før.
   Bruges af: OSIS, modulsiderne, Sailing Log, kundeportalen, de juridiske
   sider, status, historie, kontakt og video.php.                         */
:root{
  --text-dark:var(--text);
  --text-muted:var(--muted);
  --text-light:var(--muted);

  --bg-white:var(--surface);
  --bg-light:var(--bg);
  --bg-card:var(--surface);
  --white:var(--surface);
  --vision-white:var(--surface);

  --border-light:var(--border);
  --border-color:var(--border);
  --footer-border:var(--border);

  --glass-bg:var(--surface-glass);
  --glass-border:var(--border);
  --squircle:var(--r-lg);

  --sailing-cyan-bright:#5fe3ff;
  --vision-green-dim:#5f9615;
  --danger-red:#e5484d;
  --vision-red:#e5484d;
  --vision-yellow:var(--construction);
}
html[data-theme="dark"]{
  --sailing-cyan-bright:#7fe9ff;
  --danger-red:#ff6369;
  --vision-red:#ff6369;
}

/* ---------- 2. Nulstilling ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .3s ease,color .3s ease;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- 3. Typografi ---------- */
h1,h2,h3,h4{margin:0 0 .5em;font-weight:800;letter-spacing:-.03em;line-height:1.08;font-family:var(--font-display)}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:800}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.02em}
h4{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--text-soft);line-height:1.62;max-width:62ch}
.kicker{
  font-family:var(--font-mono);font-size:.7rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  margin:0 0 18px;display:flex;align-items:center;gap:10px
}
.kicker::before{content:'';width:22px;height:1px;background:currentColor;opacity:.7}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono)}
.big-number{font-family:var(--font-mono);font-weight:700;letter-spacing:-.03em;font-size:clamp(2rem,4vw,3.2rem)}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1560px}
section{position:relative}
.section{padding-block:var(--section)}
.section-soft{background:var(--bg-soft)}
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.split{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split.reverse>*:first-child{order:2}}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center{text-align:center}
.center .kicker{justify-content:center}
.center .lead{margin-inline:auto}

/* ---------- 5. Knapper ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:.94rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s,color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 32%,transparent)}
.btn-primary:hover{box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 42%,transparent)}
.btn-ghost{border-color:var(--border-strong);background:transparent;color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:var(--bg-soft)}
.btn-dark{background:var(--core-dark);color:#fff}
html[data-theme="dark"] .btn-dark{background:#fff;color:#0e0e0e}
.btn-sm{padding:9px 18px;font-size:.84rem}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

.textlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding-bottom:2px;
  transition:gap .25s var(--ease),border-color .25s
}
.textlink:hover{gap:14px;border-color:var(--accent)}

/* ---------- 6. Kort ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);margin-bottom:0;font-size:.95rem}
.card-icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--accent-soft);color:var(--accent)
}
.card-icon svg{width:22px;height:22px}

.tag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:600;font-family:var(--font-mono);letter-spacing:.04em;
  border:1px solid var(--border);color:var(--muted);background:var(--bg-soft)
}
.tag i{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.tag-live{color:var(--vision-green);border-color:color-mix(in srgb,var(--vision-green) 40%,transparent);background:rgba(118,186,27,.10)}
.tag-dev{color:var(--construction);border-color:color-mix(in srgb,var(--construction) 45%,transparent);background:rgba(245,165,36,.12)}

/* ---------- 7. Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:14px;
  padding:16px var(--gutter);
  transition:padding .35s var(--ease),background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  padding-block:10px;background:var(--surface-glass);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--border);
}
.nav-logo{font-family:var(--font-display);font-weight:800;font-size:1.08rem;letter-spacing:-.04em;flex-shrink:0}
.nav-logo span{color:var(--vision-green)}
.nav-menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-menu>a,.nav-drop>button{
  padding:9px 14px;border-radius:var(--r-pill);font-size:.9rem;font-weight:500;
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background .2s,color .2s;white-space:nowrap
}
.nav-menu>a:hover,.nav-drop>button:hover,.nav-menu>a[aria-current="page"]{background:var(--bg-soft);color:var(--accent)}
.nav-drop{position:relative}
.nav-drop>button svg{width:11px;height:11px;transition:transform .25s}
.nav-drop[data-open="true"]>button svg{transform:rotate(180deg)}
.nav-panel{
  position:absolute;top:calc(100% + 10px);left:0;min-width:290px;padding:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s,transform .25s var(--ease),visibility .25s
}
.nav-drop[data-open="true"] .nav-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav-panel a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);font-size:.88rem;transition:background .18s}
.nav-panel a:hover{background:var(--bg-soft)}
.nav-panel a small{display:block;color:var(--muted);font-size:.74rem;font-weight:400}
.nav-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--surface);cursor:pointer;
  transition:border-color .2s,color .2s,background .2s
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:17px;height:17px}
.lang-switch{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;padding-inline:12px;width:auto}
.nav-burger{display:none}

@media(max-width:1080px){
  .nav-menu,.nav-tools .desktop-only{display:none}
  .nav-burger{display:grid}
}
.mobile-menu{
  position:fixed;inset:0;z-index:199;background:var(--bg);
  padding:88px var(--gutter) 40px;overflow:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s,transform .35s var(--ease),visibility .3s
}
.mobile-menu[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
.mobile-menu a{display:block;padding:15px 0;font-size:1.32rem;font-weight:700;
  font-family:var(--font-display);letter-spacing:-.02em;border-bottom:1px solid var(--border)}
.mobile-menu .sub a{font-size:.98rem;font-weight:500;font-family:var(--font);padding:11px 0 11px 18px;color:var(--muted);border:0}
.mobile-menu h5{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 4px;font-weight:400}


/* ---------- Menu på sider der altid er mørke ---------- */
/* Kundeportal, login og supportportalen har deres egen mørke flade uanset
   hvilket tema brugeren har valgt. Menuen skal kunne læses oven på den. */
.page-dark .nav{
  background:rgba(10,10,10,.74);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(255,255,255,.12);
}
.page-dark .nav-logo{color:#fff}
.page-dark .nav-menu>a,.page-dark .nav-drop>button{color:#e8eaec}
.page-dark .nav-menu>a:hover,.page-dark .nav-drop>button:hover{background:rgba(255,255,255,.08);color:var(--vision-green)}
.page-dark .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.page-dark .icon-btn:hover{border-color:var(--vision-green);color:var(--vision-green)}
.page-dark .btn-ghost{border-color:rgba(255,255,255,.22);color:#fff}
.page-dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- 8. Sidefod ---------- */
.footer{background:var(--bg-soft);border-top:1px solid var(--border);padding:clamp(48px,6vw,80px) 0 34px}
.footer-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));margin-bottom:48px}
.footer h5{font-size:.78rem;font-weight:700;margin:0 0 14px;letter-spacing:.02em;font-family:var(--font)}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer li a{font-size:.83rem;color:var(--muted);transition:color .2s}
.footer li a:hover{color:var(--accent)}
.footer-note{font-size:.74rem;color:var(--muted);line-height:1.7;padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:22px}
.footer-meta{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;font-size:.74rem;color:var(--muted)}
.footer-meta a{transition:color .2s}
.footer-meta a:hover{color:var(--accent)}
.footer-meta .spacer{flex:1}
.status-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem}
.status-pill i{width:8px;height:8px;border-radius:50%;background:var(--vision-green);box-shadow:0 0 0 0 rgba(118,186,27,.6);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(118,186,27,.55)}70%{box-shadow:0 0 0 9px rgba(118,186,27,0)}100%{box-shadow:0 0 0 0 rgba(118,186,27,0)}}

/* ---------- 9. Bevægelse ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal-stagger].in>*{opacity:1;transform:none}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:var(--accent-ink);padding:12px 20px;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

/* ---------- 10. Print ----------
   Rammen hører til skærmen. Når en side sendes til printeren eller gemmes
   som PDF, skal menuen, sidefoden og alt det bevægelige ud, og farverne
   tilbage til sort på hvidt. Gælder alle sider — også designmanualen.   */
@media print{
  :root{
    --nav-h:0px;
    --bg:#fff; --bg-soft:#fff; --bg-sunken:#fff; --surface:#fff; --surface-glass:#fff;
    --text:#000; --text-soft:#222; --muted:#555;
    --border:#ddd; --border-strong:#bbb;
    --shadow:none; --shadow-sm:none; --shadow-lg:none;
  }
  html,body{background:#fff!important;color:#000!important}

  /* Rammen og alt interaktivt ud */
  .nav,.mobile-menu,.skip-link,.footer,
  .hero-video,.hero-scroll,.marquee,
  .demo,.bd-wrap,.zenbi-stage,.zen-stage,
  [data-theme-toggle],.lang-switch,.nav-burger{
    display:none!important;
  }

  /* Intet fastlåst — ellers stemples det på hver side */
  *{position:static!important;box-shadow:none!important;
    animation:none!important;transition:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

  /* Afsløringsanimationer må ikke efterlade tomme sider */
  [data-reveal],[data-reveal-stagger],[data-reveal-stagger]>*{
    opacity:1!important;transform:none!important;visibility:visible!important
  }

  main,.pg,.wrap,.section{padding-top:0!important;margin-top:0!important;max-width:100%!important}
  .section{padding-block:0 18pt!important}

  /* Ordentlige sideskift */
  h1,h2,h3,h4{page-break-after:avoid;break-after:avoid}
  .card,.chapter,.pricebox,figure,table,img,.swatch{page-break-inside:avoid;break-inside:avoid}
  p,li{orphans:3;widows:3}

  /* Farveprøver og logoer skal trykkes med deres rigtige farve */
  .swatch .chip,.card-icon,.tag,[class*="color-"]{
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }

  a{color:#000!important;text-decoration:none}
  @page{margin:15mm}
}