.hw-page{position:relative;width:100%;}
:root:not([data-theme="day"]) .hw-page{
  background-image:url('/images/bg-corner-dark.png');
  background-position:bottom left;
  background-repeat:no-repeat;
  background-size:auto;
}
.hw-hero{padding:112px 0 56px;}
@media(max-width:700px){.hw-hero{padding:72px 0 36px;}}
.hw-hero h1{font-size:48px;line-height:1.1;margin-bottom:14px;}
@media(max-width:700px){.hw-hero h1{font-size:34px;}}

/* ── Steps stage: layered background (dotted grid + orbs + flow line) ── */
.steps-stage{
  position:relative; margin:48px -24px 88px;
  padding:56px 24px 64px; isolation:isolate;
}
.steps-bg{
  position:absolute; inset:0; overflow:hidden;
  border-radius:28px; pointer-events:none; z-index:-1;
}
.sb-grid{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-soft) 26%, transparent) 1px, transparent 1.5px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 75%);
  opacity:.55;
}
.sb-orb{
  position:absolute; width:340px; height:340px; border-radius:50%;
  filter:blur(60px); opacity:.32; pointer-events:none;
}
.sb-orb-1{top:-60px; left:-40px; background:radial-gradient(circle, #E85124, transparent 70%);}
.sb-orb-2{top:30%; left:50%; transform:translateX(-50%); background:radial-gradient(circle, #a855f7, transparent 70%);}
.sb-orb-3{bottom:-60px; right:-40px; background:radial-gradient(circle, #22c55e, transparent 70%);}
.sb-flow{
  position:absolute; top:118px; left:6%; width:88%; height:80px;
  opacity:.65;
}
@media(max-width:900px){
  .steps-stage{margin:32px 0 64px; padding:32px 16px;}
  .sb-flow{display:none;}
}

/* ── Steps (numbered 1-2-3 cards with icon + connector dots) ── */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  position:relative;
}
@media(max-width:900px){.steps{grid-template-columns:1fr;}}
.step-watermark{
  position:absolute; bottom:-30px; right:-10px; font-family:'Inter',sans-serif;
  font-weight:900; font-size:180px; line-height:1; letter-spacing:-.08em;
  color:transparent;
  background:linear-gradient(180deg, color-mix(in srgb, var(--st-color) 14%, transparent), color-mix(in srgb, var(--st-color) 4%, transparent));
  -webkit-background-clip:text; background-clip:text;
  pointer-events:none; user-select:none; z-index:0;
}
.step > :not(.step-watermark){position:relative; z-index:1;}
.step{
  --st-color: var(--accent);
  position:relative;border-radius:18px;
  padding:34px 26px 28px;display:flex;flex-direction:column;gap:14px;
  overflow:hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--st-color) 8%, transparent) 0%, transparent 60%),
    var(--bg-card);
  border:1px solid var(--border);
  transition:transform .18s ease, border-color .18s ease, box-shadow .25s ease;
}
.step:nth-child(1){--st-color:#E85124;}
.step:nth-child(2){--st-color:#a855f7;}
.step:nth-child(3){--st-color:#22c55e;}
.step::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--st-color), color-mix(in srgb, var(--st-color) 40%, #fff));
  opacity:.85;
}
.step::after{
  content:'';position:absolute;inset:auto -1px -1px -1px;height:120px;
  background:radial-gradient(ellipse 60% 80% at 50% 100%, color-mix(in srgb, var(--st-color) 12%, transparent), transparent 70%);
  pointer-events:none;
}
.step:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--st-color) 50%, transparent);
  box-shadow:0 16px 40px color-mix(in srgb, var(--st-color) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--st-color) 15%, transparent) inset;
}
.step-head{display:flex;align-items:center;gap:14px;}
.step-num{
  width:54px;height:54px;border-radius:16px;flex-shrink:0;
  background:linear-gradient(135deg, var(--st-color), color-mix(in srgb, var(--st-color) 55%, #fff));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-weight:900;font-size:24px;letter-spacing:-.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 8px 22px color-mix(in srgb, var(--st-color) 45%, transparent);
  position:relative;
}
.step-num::before{
  content:'';position:absolute;inset:-5px;border-radius:20px;
  border:1px dashed color-mix(in srgb, var(--st-color) 45%, transparent);
  pointer-events:none;
}
.step-icon{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--st-color) 12%, transparent);
  color:var(--st-color);margin-left:auto;
  border:1px solid color-mix(in srgb, var(--st-color) 25%, transparent);
}
.step h3{font-size:20px;margin:0;letter-spacing:-.01em;}
.step p{font-size:14px;color:var(--text-soft);line-height:1.6;margin:0;position:relative;z-index:1;}
.step .meta{font-family:ui-monospace,monospace;font-size:10px;color:var(--st-color);text-transform:uppercase;letter-spacing:.16em;font-weight:800;}
/* Connector dots between steps (desktop only) */
@media(min-width:901px){
  .step:not(:last-child)::after{
    height:auto;background:none;
  }
}

/* ── Delivery cards (3 integrations, per-card accent) ── */
.delivery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px;}
@media(max-width:900px){.delivery-grid{grid-template-columns:1fr;}}
.delivery-card{
  --dc-color: var(--accent);
  position:relative;overflow:hidden;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--dc-color) 6%, transparent) 0%, transparent 55%),
    var(--bg-card);
  border:1px solid var(--border);border-radius:16px;padding:24px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .25s ease;
}
.delivery-card:nth-child(1){--dc-color:#60a5fa;}
.delivery-card:nth-child(2){--dc-color:#E85124;}
.delivery-card:nth-child(3){--dc-color:#a855f7;}
.delivery-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--dc-color), color-mix(in srgb, var(--dc-color) 35%, #fff));
  opacity:.8;
}
.delivery-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--dc-color) 45%, transparent);
  box-shadow:0 12px 30px color-mix(in srgb, var(--dc-color) 18%, transparent);
}
.dc-icon{
  width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px;
  background:color-mix(in srgb, var(--dc-color) 14%, transparent);
  color:var(--dc-color);
  border:1px solid color-mix(in srgb, var(--dc-color) 28%, transparent);
}
.delivery-card h4{font-size:17px;margin:0;letter-spacing:-.01em;color:var(--text);}
.delivery-card p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0;}

/* ── Backend-panel showcase (between delivery-grid and parallax) ── */
.hw-backend{margin-top:88px;}
.hw-backend-head{text-align:center;margin-bottom:36px;}
.hw-backend-head .eyebrow{
  display:inline-block;padding:5px 14px;border-radius:99px;
  background:rgba(232,81,36,.10);border:1px solid rgba(232,81,36,.35);
  color:#ff8a5c;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  margin-bottom:14px;
}
.hw-backend-head h2{
  font-family:'Inter',sans-serif;font-weight:900;font-size:38px;line-height:1.1;
  margin:0 0 12px;letter-spacing:-.7px;
  background:linear-gradient(135deg,#fff 40%,#ff8a5c 75%,#c4b5fd 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
:root[data-theme="day"] .hw-backend-head h2{
  background:linear-gradient(135deg,#0f172a 40%,#E85124 70%,#7c3aed 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hw-backend-head p{font-size:15px;color:var(--text-soft);max-width:620px;margin:0 auto;line-height:1.6;}

.hw-backend-tour{
  display:grid;grid-template-columns:1.6fr 1fr;gap:20px;
}
@media(max-width:980px){.hw-backend-tour{grid-template-columns:1fr;}}

/* Big hero shot — dashboard */
.hw-shot-hero{
  position:relative;cursor:zoom-in;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 28px 70px rgba(0,0,0,.45);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
:root[data-theme="day"] .hw-shot-hero{box-shadow:0 28px 70px rgba(15,23,42,.12);}
.hw-shot-hero:hover{
  transform:translateY(-4px);border-color:rgba(232,81,36,.5);
  box-shadow:0 36px 90px rgba(0,0,0,.55);
}
.hw-shot-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#E85124,#ff8a5c);
}
.hw-shot-hero img{display:block;width:100%;height:auto;}
.hw-shot-hero .hw-shot-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:5px 12px;border-radius:99px;
  background:rgba(232,81,36,.95);color:#fff;
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(232,81,36,.35);
}

/* Side: 3 stacked thumbnail shots */
.hw-shot-side{display:flex;flex-direction:column;gap:14px;}
.hw-shot-thumb{
  position:relative;cursor:zoom-in;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,.30);
  transition:transform .2s,box-shadow .25s,border-color .2s;
  flex:1;
}
:root[data-theme="day"] .hw-shot-thumb{box-shadow:0 12px 30px rgba(15,23,42,.08);}
.hw-shot-thumb:hover{transform:translateY(-3px);border-color:rgba(var(--ts-rgb,168,85,247),.6);}
.hw-shot-thumb::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,rgb(var(--ts-rgb,168,85,247)),rgba(255,255,255,.5));
}
.hw-shot-thumb img{display:block;width:100%;height:auto;}
.hw-shot-thumb .hw-shot-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  padding:4px 10px;border-radius:99px;
  background:rgba(13,17,23,.85);color:#fff;
  font-family:'Inter',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;backdrop-filter:blur(8px);
}
.hw-shot-thumb.t-purple{--ts-rgb:168,85,247;}
.hw-shot-thumb.t-blue{--ts-rgb:96,165,250;}
.hw-shot-thumb.t-green{--ts-rgb:34,197,94;}

.hw-backend-cta{
  margin-top:30px;text-align:center;
}
.hw-backend-cta a{
  display:inline-flex;align-items:center;gap:9px;padding:13px 26px;
  background:linear-gradient(135deg,#E85124,#ff6b3d);color:#fff !important;
  font-family:'Inter',sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;
  border-radius:11px;text-decoration:none !important;
  box-shadow:0 8px 24px rgba(232,81,36,.30);
  transition:transform .15s,box-shadow .15s;
}
.hw-backend-cta a:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,81,36,.42);}
.hw-backend-cta a svg{width:14px;height:14px;}

/* Lightbox shared with kontrollpanel-style — declare here so both pages work */
.hw-lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.92);display:none;
  align-items:center;justify-content:center;padding:40px;cursor:zoom-out;
}
.hw-lightbox.open{display:flex;animation:hwLbFade .2s ease-out;}
@keyframes hwLbFade{from{opacity:0;}to{opacity:1;}}
.hw-lightbox img{
  max-width:100%;max-height:100%;border-radius:8px;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  animation:hwLbZoom .25s cubic-bezier(.16,1,.3,1);
}
@keyframes hwLbZoom{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
.hw-lightbox-close{
  position:fixed;top:24px;right:24px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s;
}
.hw-lightbox-close:hover{background:rgba(232,81,36,.3);transform:rotate(90deg);}

/* parallax repeat */
.parallax-frame{position:relative;height:480px;border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:0 40px 100px rgba(0,0,0,.5);margin-top:64px;}
.parallax-bg{position:absolute;top:-30%;bottom:-30%;left:0;right:0;background-image:var(--img-main-hero);background-size:cover;background-position:center;will-change:transform;}
.parallax-overlay{position:absolute;inset:0;background:linear-gradient(225deg,rgba(13,17,23,.55) 0%,rgba(13,17,23,.15) 60%,rgba(13,17,23,.7) 100%);}
:root[data-theme="day"] .parallax-overlay{background:linear-gradient(225deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 60%,rgba(243,238,229,.7) 100%);}
.parallax-content{position:relative;z-index:2;padding:64px 56px;max-width:680px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;margin-left:auto;}
.parallax-content h2{font-size:38px;line-height:1.1;color:#fff;margin-bottom:18px;}
:root[data-theme="day"] .parallax-content h2{color:#0f172a;}
.parallax-content p{font-size:16px;color:rgba(255,255,255,.92);line-height:1.55;}
:root[data-theme="day"] .parallax-content p{color:#1a1f2e;}

/* Language banner: bruker felles /static/css/lang-banner.css (margin:0
   møter forrige seksjon direkte). Tidligere lokal duplikat med
   margin:64px 0 0 overstyrte den globale og laget ~90px gap — fjernet. */