:root{
    --paper:#FAFAF7; --panel:#F1F1EB; --ink:#16181D; --muted:#5B5F66;
    --line:#E4E3DC; --accent:#2C4BD6; --accent-2:#4C74F0; --accent-soft:rgba(44,75,214,.09);
    --live:#1E8E5A; --maxw:1120px;
    --sans:"IBM Plex Sans",system-ui,sans-serif;
    --display:"Space Grotesk",system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
    font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:0}
  h1 em,.triad em{font-style:italic;font-weight:600}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

  /* reveal */
  .rev{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .rev.in{opacity:1;transform:none}

  header{position:sticky;top:0;z-index:30;background:rgba(250,250,247,.82);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;gap:28px;height:66px}
  .brand{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.03em;text-decoration:none;display:flex;align-items:center;gap:9px}
  .brand .mark{width:24px;height:24px;border-radius:6px;background:var(--ink);
    display:grid;place-items:center;color:var(--paper);font-family:var(--mono);font-size:12px;overflow:hidden;position:relative}
  .brand .mark::after{content:"</>";position:relative;z-index:1}
  nav.main{display:flex;gap:26px;margin-left:8px}
  nav.main a{text-decoration:none;color:var(--muted);font-size:.95rem;font-weight:500;position:relative}
  nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--accent);transition:right .3s}
  nav.main a:hover{color:var(--ink)}nav.main a:hover::after{right:0}
  .bar .right{margin-left:auto;display:flex;align-items:center;gap:16px}
  .lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
  .lang button{border:0;background:transparent;font:inherit;font-size:.82rem;font-weight:600;padding:6px 12px;cursor:pointer;color:var(--muted)}
  .lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
  .btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.95rem;
    padding:11px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-family:var(--sans);transition:transform .2s,background .2s,box-shadow .2s}
  .btn.primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px -10px rgba(44,75,214,.7)}
  .btn.primary:hover{background:#2340bd;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(44,75,214,.8)}
  .btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
  .btn.ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
  @media(max-width:900px){nav.main{display:none}}

  /* hero */
  .hero{position:relative;padding:64px 0 20px}
  .hero .cols{display:grid;grid-template-columns:1fr 1.02fr;gap:48px;align-items:center}
  @media(max-width:940px){.hero .cols{grid-template-columns:1fr;gap:36px}}
  .blob{position:absolute;inset:auto;z-index:0;filter:blur(46px);opacity:.5;border-radius:50%;pointer-events:none}
  .blob.a{width:420px;height:420px;background:radial-gradient(circle,rgba(76,116,240,.5),transparent 70%);top:-90px;right:-60px;animation:float 14s ease-in-out infinite}
  .blob.b{width:320px;height:320px;background:radial-gradient(circle,rgba(30,142,90,.28),transparent 70%);top:180px;left:-80px;animation:float 18s ease-in-out infinite reverse}
  @keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-30px)}}
  .hero .txt{position:relative;z-index:2}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--muted);font-weight:500;margin:0 0 22px;
    background:#fff;border:1px solid var(--line);padding:6px 13px;border-radius:999px}
  .eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--live);position:relative}
  .eyebrow .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);animation:pulse 2s ease-out infinite}
  @keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
  .hero h1{font-size:clamp(2.7rem,6vw,4.4rem)}
  .hero .lede{font-size:clamp(1.1rem,1.6vw,1.28rem);color:var(--muted);max-width:44ch;margin:22px 0 30px}
  .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
  .microtrust{display:flex;align-items:center;gap:16px;margin-top:26px;color:var(--muted);font-size:.86rem}
  .microtrust b{color:var(--ink)}

  /* self-building preview */
  .stage{position:relative;z-index:2}
  .device{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;
    box-shadow:0 34px 80px -40px rgba(20,24,31,.4);position:relative}
  .chrome{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);background:var(--panel)}
  .dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;background:#cfcec6}
  .addr{margin-left:6px;font-family:var(--mono);font-size:.82rem;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 12px;flex:1;display:flex;align-items:center;gap:7px}
  .addr .lk{width:11px;height:11px;color:var(--live)}
  .addr b{color:var(--ink);font-weight:500}
  .canvas{position:relative;height:340px;padding:20px;overflow:hidden}
  .bnav{height:34px;border-radius:8px;background:var(--panel);display:flex;align-items:center;gap:8px;padding:0 12px;opacity:0}
  .bnav .lg{width:20px;height:20px;border-radius:5px;background:var(--accent)}
  .bnav .ln{height:8px;border-radius:4px;background:#d9d8d0}
  .bhero{margin-top:16px;display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
  .bhero h5{font-family:var(--display);font-size:1.35rem;margin:0 0 10px;opacity:0}
  .bhero .bar-l{height:11px;border-radius:5px;background:var(--panel);opacity:0}
  .bimg{border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));position:relative;overflow:hidden;opacity:0;min-height:96px}
  .bimg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shine 2.6s ease-in-out infinite}
  @keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
  .bcards{display:flex;gap:12px;margin-top:16px}
  .bcards .bc{flex:1;height:56px;border-radius:10px;border:1px solid var(--line);opacity:0}
  .bpub{position:absolute;right:16px;bottom:16px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;
    padding:8px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;opacity:0;transform:translateY(8px) scale(.9)}
  .bpub i{width:7px;height:7px;border-radius:50%;background:var(--live)}
  /* build loop */
  @media (prefers-reduced-motion: no-preference){
    .playing .bnav{animation:pop .5s .2s forwards}
    .playing .bhero h5{animation:pop .5s .8s forwards}
    .playing .bhero .b1{animation:pop .5s 1s forwards}
    .playing .bhero .b2{animation:pop .5s 1.15s forwards}
    .playing .bimg{animation:pop .6s 1.3s forwards}
    .playing .bcards .c1{animation:pop .5s 1.7s forwards}
    .playing .bcards .c2{animation:pop .5s 1.85s forwards}
    .playing .bcards .c3{animation:pop .5s 2s forwards}
    .playing .bpub{animation:popb .6s 2.5s forwards}
  }
  @keyframes pop{to{opacity:1;transform:none}}
  @keyframes popb{to{opacity:1;transform:translateY(0) scale(1)}}
  @media (prefers-reduced-motion: reduce){
    .bnav,.bhero h5,.bhero .bar-l,.bimg,.bcards .bc,.bpub{opacity:1!important;transform:none!important}
    .bimg::after,.blob{animation:none!important}.rev{opacity:1;transform:none;transition:none}
  }
  /* phone overlay */
  .phone{position:absolute;right:-14px;bottom:-26px;width:118px;height:236px;border-radius:24px;background:#fff;
    border:1px solid var(--line);box-shadow:0 30px 50px -24px rgba(20,24,31,.5);padding:11px 9px;z-index:3;
    animation:floatP 6s ease-in-out infinite}
  @keyframes floatP{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .phone .pn{height:20px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
  .phone .pl{height:8px;border-radius:4px;background:var(--panel);margin-top:9px}
  .phone .pl.s{width:70%}
  @media(max-width:520px){.phone{display:none}}
  @media (prefers-reduced-motion: reduce){.phone{animation:none}}

  /* tech marquee */
  .marquee{margin-top:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .mtrack{display:flex;gap:52px;width:max-content;animation:scroll 26s linear infinite;font-family:var(--display);font-weight:600;font-size:1.15rem;color:#a9a89f}
  .marquee:hover .mtrack{animation-play-state:paused}
  .mtrack span{display:inline-flex;align-items:center;gap:52px}
  .mtrack span::after{content:"•";color:var(--accent);font-size:.7em}
  @keyframes scroll{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion: reduce){.mtrack{animation:none}}

  /* stats */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:56px 0}
  @media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
  .stat .n{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.03em;line-height:1}
  .stat .n em{font-style:normal;color:var(--accent)}
  .stat .c{color:var(--muted);font-size:.95rem;margin-top:8px}

  /* sections */
  section.band{padding:74px 0;border-top:1px solid var(--line)}
  .lbl{font-family:var(--mono);font-size:.8rem;color:var(--accent);font-weight:500;margin:0 0 16px}
  .band h2{font-size:clamp(1.7rem,3.2vw,2.4rem);max-width:22ch}
  .summary{font-size:1.18rem;line-height:1.6;max-width:64ch;margin:20px 0 0;color:#2b2e35}
  .lead-in{color:var(--muted);max-width:60ch;margin:16px 0 0}
  .grid{display:grid;gap:18px;margin-top:38px}
  .g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
  @media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.g4,.g2{grid-template-columns:1fr}}
  .card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
  .card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(20,24,31,.4);border-color:#d3d2c9}
  .card h3{font-size:1.18rem;margin:0 0 8px;display:flex;align-items:center;gap:10px}
  .card p{margin:0;color:var(--muted);font-size:.98rem}
  .card .tag{font-family:var(--mono);font-size:.78rem;color:var(--muted);display:block;margin-bottom:14px}
  .ic{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
  .ic svg{width:19px;height:19px}

  .svc{display:flex;flex-direction:column;justify-content:space-between;min-height:210px;position:relative;overflow:hidden}
  .svc::before{content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;background:var(--accent-soft);transition:transform .4s}
  .svc:hover::before{transform:scale(1.5)}
  .svc .top{position:relative}
  .svc .top .k{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
  .svc .top p{margin-top:10px}
  .svc a.arrow{margin-top:20px;text-decoration:none;color:var(--accent);font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:7px;position:relative}
  .svc a.arrow:hover{gap:12px}

  /* showcase wall */
  .wall{margin-top:36px;display:flex;flex-direction:column;gap:18px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .row{display:flex;gap:18px;width:max-content}
  .row.r1{animation:scroll 40s linear infinite}
  .row.r2{animation:scroll 52s linear infinite reverse}
  .wall:hover .row{animation-play-state:paused}
  @media (prefers-reduced-motion: reduce){.row{animation:none;flex-wrap:wrap;width:auto}}
  .site{width:280px;flex:none;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .25s}
  .site:hover{transform:scale(1.03)}
  .site .thumb{height:150px;position:relative;overflow:hidden}
  .site .thumb .tb{position:absolute;left:14px;right:14px;top:14px;height:9px;border-radius:5px;background:rgba(255,255,255,.6)}
  .site .thumb .tb2{top:34px;width:60%}
  .site .thumb .tc{position:absolute;left:14px;bottom:14px;height:38px;width:78px;border-radius:8px;background:rgba(255,255,255,.85)}
  .site .cap{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;font-family:var(--mono);font-size:.82rem;color:var(--muted)}
  .site .cap i{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;margin-right:6px}
  .g-bake{background:linear-gradient(135deg,#E8743B,#F2B65A)}
  .g-transp{background:linear-gradient(135deg,#1E6F8E,#43B0C9)}
  .g-studio{background:linear-gradient(135deg,#5B3FA0,#9B7BE0)}
  .g-climb{background:linear-gradient(135deg,#1E8E5A,#67C79A)}
  .g-cafe{background:linear-gradient(135deg,#B23A5B,#E58098)}
  .g-law{background:linear-gradient(135deg,#243B6B,#4C74F0)}
  .domainnote{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
  .domainnote .ic{margin-top:2px}
  .domainnote p{margin:0;color:var(--muted);max-width:66ch}
  .domainnote b{color:var(--ink)}

  /* about */
  .about{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
  @media(max-width:760px){.about{grid-template-columns:1fr}}
  .parent{border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--panel);position:relative;overflow:hidden}
  .parent .k{font-family:var(--display);font-weight:700;font-size:1.2rem}
  .parent a{color:var(--accent);font-weight:600;text-decoration:none}
  .parent a:hover{text-decoration:underline}

  details{border-top:1px solid var(--line);padding:20px 0}
  details summary{font-family:var(--display);font-weight:600;font-size:1.12rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+";color:var(--muted);transition:transform .2s}
  details[open] summary::after{content:"–"}
  details p{color:var(--muted);max-width:70ch;margin:14px 0 0}

  .final{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:20px;padding:clamp(38px,6vw,64px);margin:12px 0}
  .final .fblob{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(50px);opacity:.5;background:radial-gradient(circle,rgba(76,116,240,.8),transparent 70%);top:-120px;right:-60px;animation:float 16s ease-in-out infinite}
  .final h2{position:relative;color:var(--paper);font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:18ch}
  .final p{position:relative;color:#b9bcc4;max-width:52ch;margin:18px 0 28px}
  .final .cta{position:relative}
  .final .btn.primary{background:#fff;color:var(--ink);box-shadow:none}
  .final .btn.primary:hover{background:#ecebe4}
  .final .btn.ghost{border-color:#3a3d45;color:var(--paper)}

  footer{border-top:1px solid var(--line);padding:52px 0 40px;margin-top:20px}
  .fcols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
  .fcol h4{font-size:.82rem;color:var(--muted);font-weight:600;margin:0 0 14px}
  .fcol a{display:block;text-decoration:none;color:var(--ink);font-size:.95rem;margin-bottom:9px}
  .fcol a:hover{color:var(--accent)}
  .madein{font-family:var(--mono);font-size:.82rem;color:var(--muted)}
  .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:38px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
  .legal a{color:var(--muted)}

  /* ─────────── enhanced fx ─────────── */
  .aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .au{position:absolute;border-radius:50%;filter:blur(80px);opacity:.32;mix-blend-mode:multiply}
  .au1{width:46vw;height:46vw;background:radial-gradient(circle,#4C74F0,transparent 70%);top:-14vw;left:6vw;animation:drift1 22s ease-in-out infinite}
  .au2{width:38vw;height:38vw;background:radial-gradient(circle,#1E8E5A,transparent 70%);top:4vw;right:-6vw;animation:drift2 28s ease-in-out infinite}
  .au3{width:34vw;height:34vw;background:radial-gradient(circle,#7A6BF0,transparent 70%);bottom:-18vw;left:28vw;animation:drift1 32s ease-in-out infinite reverse}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-3vw) scale(1.14)}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3vw,4vw) scale(1.1)}}
  .spot{position:absolute;top:0;left:0;width:540px;height:540px;border-radius:50%;pointer-events:none;z-index:1;
    background:radial-gradient(circle,rgba(76,116,240,.16),transparent 62%);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
  .hero:hover .spot{opacity:1}
  .hero h1 em{background:linear-gradient(90deg,var(--accent),#4C74F0 38%,#1E8E5A 68%,var(--accent));background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shimmer 6s linear infinite;font-style:italic}
  @keyframes shimmer{to{background-position:220% 0}}
  .btn.primary{will-change:transform}
  @media (prefers-reduced-motion: reduce){.au{animation:none}.spot{display:none}.hero h1 em{animation:none;color:var(--accent);-webkit-text-fill-color:var(--accent)}}

  /* layered stack (hva) */
  .stack{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:40px}
  @media(max-width:820px){.stack{grid-template-columns:1fr;gap:28px}}
  .layers{position:relative;height:300px}
  .layer{position:absolute;left:0;right:0;height:96px;border-radius:14px;border:1px solid var(--line);background:#fff;
    box-shadow:0 16px 30px -22px rgba(20,24,31,.4);padding:16px 20px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .layer .lt{font-family:var(--display);font-weight:600}
  .layer .ld{font-size:.86rem;color:var(--muted)}
  .layer .dot{position:absolute;right:18px;top:18px;width:10px;height:10px;border-radius:50%}
  .layer.l1{top:0;transform:translateY(0) rotate(-1deg);z-index:3}
  .layer.l2{top:96px;transform:rotate(.6deg);z-index:2}
  .layer.l3{top:192px;transform:rotate(-.4deg);z-index:1}
  .stack:hover .layer.l1{transform:translateY(-12px) rotate(-2.6deg)}
  .stack:hover .layer.l2{transform:rotate(0deg) scale(1.02)}
  .stack:hover .layer.l3{transform:translateY(12px) rotate(1.4deg)}
  @media (prefers-reduced-motion: reduce){.layer{transition:none}}

  /* why us */
  #hvorfor{background:linear-gradient(180deg,#fff,var(--paper))}
  .why-intro{font-size:1.18rem;color:#2b2e35;max-width:62ch;margin:20px 0 0}
  .reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
  @media(max-width:900px){.reasons{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.reasons{grid-template-columns:1fr}}
  .reason{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
  .reason:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(20,24,31,.4);border-color:#d3d2c9}
  .reason .chk{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:14px}
  .reason .chk svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .reason .chk svg path{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .65s ease .15s}
  .reason.in .chk svg path{stroke-dashoffset:0}
  .reason h3{font-size:1.12rem;margin:0 0 8px}
  .reason p{margin:0;color:var(--muted);font-size:.97rem}
  @media (prefers-reduced-motion: reduce){.reason .chk svg path{transition:none;stroke-dashoffset:0}}

  /* showcase depth */
  .wall{perspective:1500px}
  .wall .row{transform:rotateX(4deg)}
  @media(max-width:640px){.wall .row{transform:none}}

  /* hero constellation canvas */
  #net{position:absolute;inset:0;z-index:1;pointer-events:none}
  .marquee{position:relative;z-index:2}
  @media (prefers-reduced-motion: reduce){#net{display:none}}

  /* family orbit (why us) */
  .why-orbit{display:flex;justify-content:center;margin:30px 0 6px}
  .orbit{position:relative;width:340px;height:340px}
  @media(max-width:400px){.orbit{transform:scale(.84);transform-origin:top center;margin-bottom:-40px}}
  .ringo{position:absolute;border:1px dashed var(--line);border-radius:50%}
  .ringo.o1{inset:2px}.ringo.o2{inset:80px}
  .core{position:absolute;inset:0;margin:auto;width:112px;height:112px;border-radius:24px;background:var(--ink);color:#fff;
    display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:700;font-size:1.05rem;z-index:5;
    box-shadow:0 24px 44px -18px rgba(20,24,31,.6)}
  .core small{display:block;font-family:var(--mono);font-weight:400;font-size:.58rem;color:#aeb2ba;margin-top:5px;letter-spacing:.06em}
  .spin{position:absolute;inset:0;animation:spinrot 34s linear infinite;z-index:3}
  @keyframes spinrot{to{transform:rotate(360deg)}}
  .sat{position:absolute;inset:0}
  .sat .pip{position:absolute;top:48px;left:50%;width:22px;height:22px;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 6px rgba(250,250,247,.9)}
  .sat.e{transform:rotate(90deg)}.sat.s{transform:rotate(180deg)}.sat.w{transform:rotate(270deg)}
  .plabels span{position:absolute;font-family:var(--display);font-weight:600;font-size:.9rem;background:#fff;border:1px solid var(--line);
    border-radius:999px;padding:7px 14px;z-index:4;box-shadow:0 10px 20px -14px rgba(20,24,31,.5)}
  .plabels .pn{top:-8px;left:50%;transform:translateX(-50%)}
  .plabels .pe{top:50%;right:-12px;transform:translateY(-50%)}
  .plabels .ps{bottom:-8px;left:50%;transform:translateX(-50%)}
  .plabels .pw{top:50%;left:-12px;transform:translateY(-50%)}
  .plabels .d{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
  @media (prefers-reduced-motion: reduce){.spin{animation:none}}

  /* ─────────── extra wow: 3D + backgrounds ─────────── */
  /* hero 3D parallax stage */
  .hero{perspective:1300px}
  .stage{transform-style:preserve-3d;transition:transform .3s ease-out;will-change:transform}

  /* 3D showcase cards */
  .wall{perspective:1700px}
  .wall .row{transform-style:preserve-3d}
  .site{position:relative;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .site:hover{transform:translateZ(58px) rotateY(-7deg) scale(1.05);box-shadow:0 44px 66px -30px rgba(20,24,31,.55);z-index:6}
  .site .thumb .tc{transition:transform .35s}
  .site:hover .thumb .tc{transform:translateZ(30px) translateY(-2px)}
  .site .thumb .tb{transition:transform .35s}
  .site:hover .thumb .tb{transform:translateZ(18px)}

  /* animated backdrop for Hvorfor */
  #hvorfor{position:relative;overflow:hidden}
  #hvorfor > .wrap{position:relative;z-index:2}
  .hvorfor-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .hvorfor-bg::before{content:"";position:absolute;width:70vw;height:70vw;border-radius:50%;filter:blur(100px);opacity:.14;
    background:conic-gradient(from 0deg,#4C74F0,#1E8E5A,#7A6BF0,#E0653A,#4C74F0);top:-24vw;left:50%;transform:translateX(-50%);animation:spinrot 44s linear infinite}
  .hvorfor-bg .gridfloor{position:absolute;inset:0;background-image:radial-gradient(rgba(44,75,214,.10) 1px,transparent 1px);
    background-size:26px 26px;-webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 68%);mask-image:radial-gradient(circle at 50% 42%,#000,transparent 68%);animation:gridmove 20s linear infinite}
  @keyframes gridmove{to{background-position:26px 26px}}
  @media (prefers-reduced-motion: reduce){.hvorfor-bg::before,.hvorfor-bg .gridfloor{animation:none}}

  /* CTA 3D perspective grid floor */
  .final{perspective:800px}
  .final .grid3d{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:0;overflow:hidden;pointer-events:none;
    -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
  .final .grid3d::before{content:"";position:absolute;left:-60%;right:-60%;top:0;bottom:-70%;
    background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
    background-size:44px 44px;transform:rotateX(72deg);transform-origin:top center;animation:floor 6s linear infinite}
  @keyframes floor{to{background-position:0 44px}}
  .final h2,.final p,.final .cta{position:relative;z-index:2}
  @media (prefers-reduced-motion: reduce){.final .grid3d::before{animation:none}}


/* link-based language switcher (production) */
.lang a,.lang .cur{border:0;background:transparent;font:inherit;font-size:.82rem;font-weight:600;padding:6px 12px;cursor:pointer;color:var(--muted);text-decoration:none;display:inline-block;line-height:1.2}
.lang .cur{background:var(--ink);color:var(--paper)}
.lang a:hover{color:var(--ink)}

/* hva illustration */
.hva-illu{margin:0 0 22px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px;overflow:hidden}
.hva-illu img{display:block;width:100%;height:auto}