/* Surveillance Denmark – fælles stylesheet */
:root{
  --night:#12171C;
  --night-2:#1B232A;
  --night-3:#25303A;
  --paper:#EEF1F3;
  --ink:#151A1F;
  --steel:#56626C;
  --rule:#CDD4DA;
  --go:#1F9D55;
  --go-hi:#3FD07F;
  --out:#E58A00;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --osd:'Share Tech Mono',ui-monospace,monospace;
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:18px;line-height:1.55;color:var(--ink);background:var(--paper)}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--go-hi);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.wrap>*,.grid2>*,.grid3>*{min-width:0}
h1,h2,h3{font-family:var(--cond);font-weight:800;line-height:.95;letter-spacing:-.005em;overflow-wrap:break-word}
h2{font-size:clamp(2.6rem,6.4vw,5.6rem)}
h3{font-size:1.65rem;font-weight:700;line-height:1.05}
.lede{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5;color:var(--steel);margin-top:22px}
section{padding:120px 0;position:relative}
.dark{background:var(--night);color:#E9EEF2}
.dark .lede{color:#A3B0BB}
.osd{font-family:var(--osd);letter-spacing:.06em}

/* knapper */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:1.3rem;padding:15px 28px;border-radius:4px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s}
.btn-go{background:var(--go);color:#fff}.btn-go:hover{background:#178547}
.btn-line{border-color:currentColor;background:transparent}.btn-line:hover{background:rgba(255,255,255,.1)}
.btn-white{background:#fff;color:var(--ink)}.btn-white:hover{background:#E4F6EC}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(18,23,28,.92);backdrop-filter:blur(10px);color:#E9EEF2;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--cond);font-weight:800;font-size:1.6rem}
.logo svg{width:36px;height:36px}
.menu{display:flex;align-items:center;gap:32px;list-style:none;font-family:var(--cond);font-weight:600;font-size:1.2rem}
.menu a{text-decoration:none;color:#B9C4CD}.menu a:hover,.menu a[aria-current]{color:#fff}
.menu .cta a{color:#fff;background:var(--go);padding:9px 18px;border-radius:4px}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.9rem;cursor:pointer}

/* ---------- HERO med nattekamera ---------- */
.hero{background:var(--night) url(images/nat-kamera.jpg) center/cover no-repeat;color:#fff;padding:52px 0 120px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,16,20,.94) 0%,rgba(12,16,20,.72) 45%,rgba(12,16,20,.25) 100%),
             repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:inherit;filter:brightness(1.6) contrast(1.15)}
.osd-row{display:flex;justify-content:space-between;gap:20px;margin-bottom:64px;font-size:1.05rem;color:#DCE3E8}
.rec{display:inline-flex;align-items:center;gap:10px;white-space:pre}
.rec::before{content:"";width:11px;height:11px;border-radius:50%;background:#E5484D;box-shadow:0 0 12px #E5484D;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.hero h1{font-size:clamp(3.4rem,7.2vw,7rem);line-height:.88}
.hero h1 em{font-style:normal;display:block;color:var(--go-hi)}
.hero .lede{color:#C9D2D9;max-width:40ch}

.detect{position:relative;padding:24px;margin:0}
.detect img{border-radius:6px;box-shadow:0 50px 100px rgba(0,0,0,.7)}
.detect .c{position:absolute;width:48px;height:48px;border:4px solid var(--go-hi);filter:drop-shadow(0 0 8px rgba(63,208,127,.6))}
.detect .tl{top:0;left:0;border-right:0;border-bottom:0}
.detect .tr{top:0;right:0;border-left:0;border-bottom:0}
.detect .bl{bottom:0;left:0;border-right:0;border-top:0}
.detect .br{bottom:0;right:0;border-left:0;border-top:0}
.detect .tag{position:absolute;top:-32px;left:0;font-family:var(--osd);font-size:1rem;color:var(--go-hi);letter-spacing:.06em}
.detect .scan{position:absolute;left:24px;right:24px;top:24px;height:3px;background:linear-gradient(90deg,transparent,var(--go-hi),transparent);box-shadow:0 0 22px var(--go-hi);opacity:0}
.js .detect .c{animation:lock .7s cubic-bezier(.2,.8,.2,1) .2s both}
.js .detect .tl{--dx:-30px;--dy:-30px}.js .detect .tr{--dx:30px;--dy:-30px}
.js .detect .bl{--dx:-30px;--dy:30px}.js .detect .br{--dx:30px;--dy:30px}
@keyframes lock{from{transform:translate(var(--dx),var(--dy));opacity:0}to{transform:none;opacity:1}}
.js .detect .scan{animation:scan 1.5s ease-in-out .9s 1 both}
@keyframes scan{0%{opacity:1;top:24px}90%{opacity:1}100%{opacity:0;top:calc(100% - 27px)}}
.js .detect .tag{animation:fade .3s 2.3s both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* registreringsbånd */
.feed{background:var(--night-2);color:#E9EEF2;border-top:3px solid var(--go)}
.feed .wrap{display:flex;overflow-x:auto;scrollbar-width:none}
.feed .wrap::-webkit-scrollbar{display:none}
.ev{display:flex;align-items:center;gap:14px;padding:20px 24px 20px 0;margin-right:24px;border-right:1px solid #2E3943;white-space:nowrap;flex-shrink:0}
.ev:last-child{border-right:0}
.dir{font-family:var(--cond);font-weight:700;font-size:1rem;color:#fff;padding:4px 11px;border-radius:3px}
.in{background:var(--go)}.ud{background:var(--out)}
.ev .t{font-family:var(--osd);color:#94A2AE}
.plate{display:inline-flex;align-items:stretch;background:#fff;color:#111;border:2px solid #111;border-radius:5px;font-family:var(--cond);font-weight:700;font-size:1.3rem;line-height:1;letter-spacing:.06em;overflow:hidden}
.plate::before{content:"DK";display:flex;align-items:flex-end;padding:3px 5px;background:#1F3E9A;color:#FFD34D;font-size:.62rem;letter-spacing:0}
.plate span{padding:5px 10px 4px}

/* ---------- Sådan virker det ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:72px;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:58px;left:12%;right:12%;border-top:3px dashed var(--go)}
.step{text-align:center;position:relative}
.step .ic{width:116px;height:116px;margin:0 auto 26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 8px var(--paper),0 0 0 11px var(--go)}
.step .ic svg{width:60px;height:60px}
.step h3{font-size:1.9rem}
.step h3::before{counter-increment:s;content:counter(s) ". ";color:var(--go)}
.step p{color:var(--steel);margin:10px auto 0;max-width:30ch}

/* ---------- Spotlights ---------- */
.spot{display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:center;margin-top:120px}
.spot.flip{grid-template-columns:1fr 1.25fr}
.spot.flip .shot{order:2}
.shot{position:relative;background:var(--night);border-radius:10px;padding:34px;box-shadow:0 40px 80px -30px rgba(18,23,28,.55)}
.shot::before{content:"";position:absolute;inset:0;border-radius:10px;background:radial-gradient(70% 80% at 50% 50%,rgba(63,208,127,.16),transparent 70%)}
.shot img{position:relative;border-radius:4px}
.shot i{position:absolute;width:30px;height:30px;border:3px solid var(--go-hi)}
.shot i:nth-of-type(1){top:12px;left:12px;border-right:0;border-bottom:0}
.shot i:nth-of-type(2){top:12px;right:12px;border-left:0;border-bottom:0}
.shot i:nth-of-type(3){bottom:12px;left:12px;border-right:0;border-top:0}
.shot i:nth-of-type(4){bottom:12px;right:12px;border-left:0;border-top:0}
.shot .label{position:absolute;bottom:-14px;right:28px;font-family:var(--osd);font-size:.9rem;background:var(--go);color:#fff;padding:4px 10px;border-radius:3px}
.spot h3{font-size:clamp(2rem,3.4vw,3rem)}
.spot p{color:var(--steel);margin-top:16px;font-size:1.12rem}
.ticks{list-style:none;margin-top:22px;display:grid;gap:10px}
.ticks li{padding-left:32px;position:relative;font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:4px;background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat}

/* ikon-grid */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 48px;margin-top:110px;padding-top:56px;border-top:3px solid var(--ink)}
.more div{display:grid;grid-template-columns:56px 1fr;gap:6px 18px}
.more svg{grid-row:span 2;width:56px;height:56px;padding:12px;border-radius:10px;background:var(--ink);color:var(--go-hi)}
.more b{font-family:var(--cond);font-size:1.4rem;line-height:1.1;align-self:end}
.more span{color:var(--steel);font-size:1rem}

/* galleri */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;margin-top:90px}
.gallery a{display:block;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--rule),0 20px 40px -24px rgba(18,23,28,.5);cursor:zoom-in;position:relative}
.gallery a span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;background:linear-gradient(transparent,rgba(12,16,20,.85));color:#fff;font-family:var(--cond);font-weight:700;font-size:1.15rem}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top left}

/* ---------- Download/licens med bom-striber ---------- */
.getit{background:var(--go);color:#fff;padding:96px 0 90px;position:relative;overflow:hidden}
.getit::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:repeating-linear-gradient(-45deg,#fff 0 22px,#C8312F 22px 44px)}
.getit::after{content:"AE 92 838";position:absolute;right:-30px;bottom:-60px;font-family:var(--cond);font-weight:800;font-size:15rem;line-height:1;color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none}
.getit .wrap{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;position:relative;z-index:1}
.getit h2{font-size:clamp(2.4rem,5vw,4.4rem)}
.getit p{color:#E0F6E9;margin-top:14px;font-size:1.2rem;max-width:60ch}
.getit .actions{margin-top:0;flex-direction:column;align-items:stretch}

/* ---------- Udstyr-tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:64px;background:#2A343E;border:2px solid #2A343E;border-radius:10px;overflow:hidden}
.tile{background:var(--night-2);padding:34px 30px 30px;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:background .15s}
.tile:hover{background:var(--night-3)}
.tile svg{width:130px;height:96px;color:#DCE3E8;margin-bottom:12px}
.tile b{font-family:var(--cond);font-size:1.75rem;line-height:1}
.tile span{color:#A3B0BB;font-size:1rem}
.tile em{font-style:normal;margin-top:auto;padding-top:12px;color:var(--go-hi);font-family:var(--cond);font-weight:700;font-size:1.1rem}

/* ---------- Mærker ---------- */
.brands{display:flex;flex-wrap:wrap;align-items:baseline;gap:20px 64px;margin-top:52px;font-family:var(--cond);font-weight:800;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1;color:var(--ink)}
.brands span:nth-child(even){color:var(--go)}
.brands small{font-size:.42em;font-weight:600;color:var(--steel)}

/* ---------- Referencer ---------- */
.refs-sec{background:var(--night) url(images/nat-kamera.jpg) center/cover no-repeat;isolation:isolate;overflow:hidden}
.refs-sec::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,16,20,.8)}
.refs{margin-top:48px;font-family:var(--cond);font-weight:800;font-size:clamp(2.4rem,6vw,5.4rem);line-height:1.04;letter-spacing:-.01em;color:#fff}
.refs i{font-style:normal;color:var(--go-hi);font-weight:500}
.refs small{font-size:.4em;color:#A3B0BB;font-weight:600;white-space:nowrap}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;margin-top:64px;align-items:start}
.addr{font-size:1.2rem;line-height:1.7}
.addr strong{font-family:var(--cond);font-size:2rem;display:block;margin-bottom:8px}
.addr a{color:var(--go);font-weight:600;text-decoration:none}
.formcard{background:#fff;border-radius:10px;padding:36px;box-shadow:0 30px 60px -30px rgba(18,23,28,.35);border-top:6px solid var(--go)}
form{display:grid;gap:16px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:7px;font-weight:600;font-size:.95rem}
input,textarea,select{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:13px 14px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--go);box-shadow:0 0 0 3px rgba(31,157,85,.2);background:#fff}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
.msg{display:none;padding:12px 14px;border-radius:4px;font-weight:500}
.msg.s{display:block;background:#E1F5E9;color:#136B3A}
.msg.e{display:block;background:#FDEFD9;color:#8A4D00}
form .btn{justify-self:start}

footer{background:#0C1014;color:#7D8A95;font-size:.95rem;padding:30px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{color:#B9C4CD;text-decoration:none}

/* ---------- Udstyr-siden ---------- */
.page-hero{background:var(--night) url(images/nat-kamera.jpg) center 40%/cover no-repeat;color:#fff;padding:110px 0 100px;isolation:isolate;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,16,20,.94),rgba(12,16,20,.45))}
.page-hero h1{font-size:clamp(3.4rem,8vw,7.4rem);line-height:.9}
.page-hero .lede{color:#C9D2D9;max-width:52ch}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.jump a{font-family:var(--cond);font-weight:600;font-size:1.1rem;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.3);padding:7px 14px;border-radius:40px}
.jump a:hover{border-color:var(--go-hi);color:var(--go-hi)}
.cat{display:grid;grid-template-columns:340px 1fr;gap:64px;padding:90px 0;border-bottom:1px solid var(--rule);scroll-margin-top:80px}
.cat:last-of-type{border-bottom:0}
.cat-art{background:var(--night);border-radius:10px;aspect-ratio:4/3;display:grid;place-items:center;color:#DCE3E8;position:sticky;top:100px;align-self:start;background-image:radial-gradient(65% 70% at 50% 55%,rgba(63,208,127,.18),transparent 70%)}
.cat-art svg{width:68%}
.cat h2{font-size:clamp(2.4rem,4.6vw,4rem)}
.cat .lede{margin-top:14px}
.prods{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.prod{background:#fff;border-radius:8px;padding:24px 24px 22px;border-left:5px solid var(--go)}
.prod b{font-family:var(--cond);font-size:1.5rem;display:block;line-height:1.05;hyphens:manual;overflow-wrap:break-word}
.prod p{color:var(--steel);font-size:1rem;margin-top:8px}
.prod small{display:block;margin-top:12px;font-weight:600;font-size:.9rem;color:var(--ink)}
.cat .ask{display:inline-block;margin-top:26px;font-weight:600;color:var(--go);text-underline-offset:4px}

/* ---------- responsivt ---------- */
@media (max-width:1000px){
  section{padding:84px 0}
  .hero{padding:36px 0 80px}
  .hero::before{background:linear-gradient(180deg,rgba(12,16,20,.92),rgba(12,16,20,.8))}
  .hero-grid,.spot,.spot.flip,.contact,.getit .wrap{grid-template-columns:1fr;gap:48px}
  .spot.flip .shot{order:0}
  .spot{margin-top:84px}
  .steps{grid-template-columns:1fr;gap:48px}
  .steps::before{top:0;bottom:0;left:50%;right:auto;border-top:0;border-left:3px dashed var(--go)}
  .step{background:var(--paper);padding:10px 0}
  .more,.tiles{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}.gallery a:first-child{grid-column:1/-1}
  .getit .actions{flex-direction:row;align-items:center}
  .cat{grid-template-columns:1fr;gap:36px}
  .cat-art{position:static;max-width:420px}
  .menu{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:20px;padding:26px 28px;background:var(--night);border-bottom:1px solid #2E3943}
  .menu.open{display:flex}
  .burger{display:block}
  .osd-row{margin-bottom:40px}
}
@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .more,.tiles,.f2,.prods,.gallery{grid-template-columns:1fr}
  .osd-row span:last-child{display:none}
  .detect{padding:16px}.detect .c{width:32px;height:32px;border-width:3px}
  .detect .scan{left:16px;right:16px}
  .shot{padding:22px}
  .formcard{padding:24px}
  .getit::after{font-size:8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .detect .scan{display:none}
}