:root{--bg:#f7fafb;--fg:#1d2a30;--muted:#5d6e76;--ice:#d9edf4;--deep:#2f6f8a;--cream:#f1eee8;--line:#dbe6ea;--card:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--fg);font:18px/1.65 "Avenir Next",Avenir,"Century Gothic","Segoe UI",system-ui,sans-serif;font-weight:300}
h1,h2,h3{font-weight:300;line-height:1.15;letter-spacing:.01em;margin:0 0 .6em}
h1{font-size:clamp(2.8rem,9vw,5rem)}
h2{font-size:clamp(1.9rem,5vw,2.6rem)}
h3{font-size:1.25rem;font-weight:500}
a{color:var(--deep)}
strong{font-weight:600}
.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem 1.2rem;padding:.6rem 1.25rem;position:sticky;top:0;background:rgba(247,250,251,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:5}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--fg);text-decoration:none;font-weight:500;letter-spacing:.04em}
.brand img{border-radius:50%}
nav a{margin-right:1.1rem;color:var(--muted);text-decoration:none;font-size:.95rem}
nav a:last-child{margin-right:0}
nav a:hover{color:var(--deep)}
main{max-width:1060px;margin:0 auto;padding:0 1.25rem}
section{padding:3.5rem 0}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center;padding-top:3rem}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;color:var(--deep);margin:0 0 1rem;font-weight:500}
.tag{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--muted);font-weight:400;margin:.2rem 0 1rem}
.lead{max-width:30rem}
.hero-img,.split img,.about img{width:100%;border-radius:20px;object-fit:cover;box-shadow:0 18px 40px -22px rgba(30,70,90,.5)}
.hero-img{aspect-ratio:4/5}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0 .5rem}
.btn{display:inline-block;background:var(--deep);color:#fff;padding:.75rem 1.5rem;border-radius:999px;text-decoration:none;font-weight:500;border:1.5px solid var(--deep)}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;color:var(--deep)}
.band{background:var(--ice);width:100vw;margin-left:calc(50% - 50vw);padding:3.5rem max(1.25rem,calc((100vw - 1060px)/2));border-radius:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.5rem}
.cards article{background:var(--card);border-radius:16px;padding:1.5rem;box-shadow:0 8px 24px -18px rgba(30,70,90,.6)}
.cards p{margin:0;color:var(--muted);font-size:1rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.split img{aspect-ratio:4/5}
.prices{display:flex;gap:1rem;margin:1.2rem 0 .6rem;flex-wrap:wrap}
.price{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:1rem 1.6rem;text-align:center}
.price .n{display:block;color:var(--muted);font-size:.95rem}
.price .p{font-size:2rem;font-weight:400}
.small{font-size:.95rem;color:var(--muted)}
.about{display:grid;grid-template-columns:1fr 1.3fr;gap:2.5rem;align-items:center}
.about img{aspect-ratio:1}
.about p{margin:0 0 1rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:1.5rem 0}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.contact{text-align:center}
.contact .cta{justify-content:center}
.contact p{max-width:34rem;margin-left:auto;margin-right:auto}
footer{text-align:center;color:var(--muted);padding:2rem 1.25rem;font-size:.9rem;border-top:1px solid var(--line)}
@media (max-width:760px){
  .hero,.split,.about{grid-template-columns:1fr}
  .hero-img{aspect-ratio:1;order:-1}
  .split img{aspect-ratio:1}
  .grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  section{padding:2.5rem 0}
  nav a{margin-right:.8rem;font-size:.9rem}
}

/* ===== WOW: is-effekter ===== */
.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:5rem max(1.25rem,calc((100vw - 1060px)/2)) 5rem;overflow:hidden;color:#eaf6fb;
  background:radial-gradient(900px 500px at 80% 10%,#3d8fb0 0%,transparent 60%),radial-gradient(700px 500px at 0% 100%,#1c4a63 0%,transparent 60%),linear-gradient(160deg,#0c2533,#14425a 60%,#1d6483)}
.hero h1,.hero .lead{color:#fff}
.hero .eyebrow{color:#a7dcef}
.hero .tag{color:#bfe3f1}
.hero-text,.frame{position:relative;z-index:1}
.hero .btn{background:#fff;color:#0f3347;border-color:#fff}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.shimmer{background:linear-gradient(100deg,#fff 20%,#a9e3f7 40%,#fff 50%,#cfeefa 60%,#fff 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 7s linear infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:-150% 0}}

.cubes{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.cubes i{position:absolute;bottom:-90px;left:var(--x);width:var(--s);height:var(--s);border-radius:16%;opacity:var(--o);
  background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(190,230,246,.12) 45%,rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 0 14px rgba(255,255,255,.55),0 6px 22px rgba(0,20,40,.25);backdrop-filter:blur(2px);
  animation:rise var(--d) linear var(--delay) infinite}
@keyframes rise{from{transform:translateY(0) rotate(var(--r))}to{transform:translateY(-120vh) rotate(calc(var(--r) + 140deg))}}

.frame{transition:transform .25s ease-out;transform-style:preserve-3d;border-radius:22px;padding:10px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(6px);box-shadow:0 30px 70px -25px rgba(0,15,30,.8),inset 0 0 30px rgba(255,255,255,.2);overflow:hidden;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{translate:0 -10px}}
.frame .hero-img{border-radius:14px;display:block;box-shadow:none}
.glint{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-120%);animation:glint 5s ease-in-out infinite;pointer-events:none}
@keyframes glint{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

.wave{display:block;width:100vw;margin:0 0 0 calc(50% - 50vw);height:46px;fill:var(--ice);margin-top:-1px;transform:scaleY(-1)}
.wave+.band{margin-top:0}

/* skyd ind */
.reveal{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* glaskort */
.cards article{position:relative;overflow:hidden;background:rgba(255,255,255,.65);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);transition:transform .3s,box-shadow .3s}
.cards article::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);transform:translateX(-120%);transition:transform .8s}
.cards article:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(20,70,95,.7)}
.cards article:hover::after{transform:translateX(120%)}

/* priser som isterninger */
.cube-card{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(190,230,246,.45) 55%,rgba(255,255,255,.8));border:1px solid #fff;box-shadow:inset 0 0 18px rgba(255,255,255,.9),0 14px 28px -16px rgba(30,100,130,.7);border-radius:20px;transition:transform .35s}
.cube-card::before{content:"";position:absolute;top:8px;left:10px;width:26px;height:8px;border-radius:8px;background:rgba(255,255,255,.95);transform:rotate(-20deg)}
.cube-card:hover{transform:rotate(-4deg) translateY(-6px) scale(1.04)}

/* sammenligning */
#forskel{text-align:center}
.cmp{position:relative;height:300px;border-radius:22px;overflow:hidden;margin:1.2rem auto;max-width:760px;user-select:none;box-shadow:0 24px 50px -28px rgba(10,50,70,.8);background:linear-gradient(180deg,#f6c978,#e69a3c)}
.cmp .layer{position:absolute;inset:0}
.cmp .layer i{position:absolute;width:var(--s);height:var(--s);border-radius:16%;transform:rotate(var(--r))}
.cmp .cloudy{background:linear-gradient(180deg,#e9b866,#cf8528)}
.cmp .cloudy i{background:radial-gradient(circle at 30% 25%,#fff,#e7edf0 55%,#cfd8dc);box-shadow:inset 0 0 14px rgba(120,130,135,.6),0 4px 10px rgba(80,40,0,.3)}
.cmp .cloudy i::after{content:"";position:absolute;inset:18% 20%;background:radial-gradient(circle,rgba(140,150,155,.5) 0 2px,transparent 3px) 0 0/12px 12px;opacity:.7}
.cmp .clear{background:linear-gradient(180deg,#f6c978,#e69a3c);clip-path:inset(0 0 0 var(--pos))}
.cmp .clear i{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 45%,rgba(255,255,255,.35));border:1.5px solid rgba(255,255,255,.9);box-shadow:inset 0 0 16px rgba(255,255,255,.7),0 6px 14px rgba(120,60,0,.25);backdrop-filter:blur(1px)}
.lbl{position:absolute;top:14px;padding:.3rem .9rem;border-radius:999px;background:rgba(15,51,71,.75);color:#fff;font-size:.85rem;letter-spacing:.06em;z-index:2}
.lbl.l{left:14px}.lbl.r{right:14px}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4);z-index:3;pointer-events:none}
.cmp .handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.cmp .handle i::before{content:"◀ ▶";position:absolute;inset:0;display:grid;place-items:center;font-size:.6rem;color:var(--deep);letter-spacing:2px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}

/* galleri */
.grid img{transition:transform .5s,box-shadow .5s;cursor:zoom-in}
.grid img:hover{transform:scale(1.04) rotate(-.6deg);box-shadow:0 20px 40px -20px rgba(20,70,95,.7);position:relative;z-index:1}
#lb{border:0;background:transparent;padding:0;max-width:92vw;max-height:92vh;overflow:visible}
#lb::backdrop{background:rgba(8,28,40,.85);backdrop-filter:blur(6px)}
#lb img{display:block;max-width:92vw;max-height:88vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#lb button{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#0f3347;font-size:1.4rem;cursor:pointer}

@media (max-width:760px){
  .hero{padding-top:2.5rem;padding-bottom:3.5rem}
  .cmp{height:240px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}