:root{
    /* Brand palette */
    --bg:           #171717;  /* Svart */
    --bg-2:         #1c1c1c;
    --bg-3:         #232323;
    --border:       #2a2a2a;
    --border-2:     #383838;
    --text:         #fafafa;  /* Vit */
    --text-2:       #c4c4c4;
    --muted:        #828282;
    --accent:       #e17b30;  /* Kopparorange */
    --accent-2:     #f1a06d;
    --accent-glow:  rgba(225,123,48,.18);
    --green:        #4ca27d;  /* Turkosgrön */
    --forest:       #327160;  /* Mörkgrön */
    --petrol:       #183e3f;  /* Petrol */
    --rust:         #681f0c;  /* Mörkröd / brunröd */

    --serif:        "Fraunces", "Times New Roman", serif;
    --sans:         "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
    --heading:      "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:         "JetBrains Mono", ui-monospace, monospace;
    --maxw:         1280px;
    --pad:          clamp(20px, 4vw, 56px);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; touch-action:pan-x pan-y; } /* pan-x pan-y: ingen nyp-/dubbeltrycks-zoom på mobil */
  body{
    margin:0;
    font-family:var(--sans);
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  /* Subtle grid background */
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity:.18;
    pointer-events:none;
    z-index:0;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  }
  body > *{ position:relative; z-index:1; }

  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }

  ::selection{ background:var(--accent); color:#0b0d10; }

  /* ---------- TOP STATUS BAR ---------- */
  .statusbar{
    border-bottom:1px solid var(--border);
    background:rgba(11,13,16,.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-2);
  }
  .statusbar-inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:8px var(--pad);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  .status-left{ display:flex; align-items:center; gap:10px; }
  .status-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 0 var(--green);
    animation:pulse 2s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(76,162,125,.6); }
    70%{ box-shadow:0 0 0 8px rgba(76,162,125,0); }
    100%{ box-shadow:0 0 0 0 rgba(76,162,125,0); }
  }
  .status-right{ display:flex; gap:18px; }
  .status-right span:last-child{ color:var(--text); }
  @media (max-width:680px){
    .status-right span:not(:last-child){ display:none; }
  }

  /* ---------- NAVIGATION ---------- */
  .nav{
    position:sticky; top:0;
    z-index:50;
    background:rgba(11,13,16,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  .nav-inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:18px var(--pad);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
  }
  .logo img{ height:28px; width:auto; }
  .nav-links{
    display:flex; gap:32px;
    font-size:14px;
    font-family:var(--mono);
    letter-spacing:.02em;
  }
  .nav-links a{
    color:var(--text-2);
    transition:color .2s;
    position:relative;
  }
  .nav-links a:hover{ color:var(--text); }
  .nav-links a.active{ color:var(--text); }
  .nav-links a.active::before{
    content:""; position:absolute;
    left:-14px; top:50%;
    width:4px; height:4px;
    transform:translateY(-50%);
    background:var(--accent);
    opacity:1;
  }
  .nav-links a::before{
    content:""; position:absolute;
    left:-14px; top:50%;
    width:4px; height:4px;
    transform:translateY(-50%);
    background:var(--accent);
    opacity:0;
    transition:opacity .2s;
  }
  .nav-links a:hover::before{ opacity:1; }
  .nav-item-has-sub{ position:relative; padding-bottom:14px; margin-bottom:-14px; }
  .nav-submenu{
    display:none;
    position:absolute;
    top:100%; left:0;
    margin-top:0;
    padding-top:14px;
    background:transparent;
    z-index:60;
  }
  .nav-submenu a{
    display:block;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    padding:10px 16px;
    white-space:nowrap;
  }
  .nav-item-has-sub:hover .nav-submenu,
  .nav-item-has-sub:focus-within .nav-submenu{ display:block; }
  .nav-cta{
    font-family:var(--mono);
    font-size:13px;
    padding:10px 18px;
    border:1px solid var(--border-2);
    border-radius:2px;
    color:var(--text) !important;
    transition: all .2s;
  }
  .nav-cta:hover{
    background:var(--accent);
    color:var(--bg) !important;
    border-color:var(--accent);
  }
  .nav-menu{
    display:flex;
    align-items:center;
    gap:32px;
  }
  .lang-switch{
    display:flex;
    align-items:center;
    gap:7px;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.04em;
  }
  .lang-switch a{
    color:var(--muted);
    transition:color .2s;
  }
  .lang-switch a:hover{ color:var(--text); }
  .lang-switch a.active{ color:var(--accent); }
  .lang-switch span{ color:var(--border-2); }
  .nav-toggle{
    display:none;
    width:42px; height:42px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    background:none;
    border:1px solid var(--border-2);
    border-radius:2px;
    cursor:pointer;
    padding:0;
    transition:border-color .2s;
  }
  .nav-toggle:hover{ border-color:var(--accent); }
  .nav-toggle span{
    display:block;
    width:18px; height:2px;
    background:var(--text);
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  @media (max-width:760px){
    .nav-toggle{ display:flex; }
    .nav-menu{
      position:absolute;
      top:100%; left:0; right:0;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:rgba(11,13,16,.98);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      border-bottom:1px solid var(--border);
      padding:4px var(--pad) 22px;
      display:none;
    }
    .nav.open .nav-menu{ display:flex; }
    .nav-links{
      flex-direction:column;
      gap:0;
      font-size:16px;
    }
    .nav-links a{
      padding:15px 0;
      border-bottom:1px solid var(--border);
    }
    .nav-links a:last-child{ border-bottom:none; }
    .nav-links a::before,
    .nav-links a.active::before{ display:none; }
    .nav-links a.active{ color:var(--accent); }
    .nav-item-has-sub{ display:contents; }
    .nav-submenu{
      display:block;
      position:static;
      margin-top:0;
      background:none;
      border:none;
      box-shadow:none;
      padding:0 0 0 20px;
    }
    .nav-submenu a{
      background:none;
      border:none;
      border-radius:0;
      box-shadow:none;
      padding:12px 0;
      border-bottom:1px solid var(--border);
      font-size:14px;
      color:var(--text-2);
    }
    .nav-cta{
      margin-top:18px;
      text-align:center;
      font-size:15px;
      padding:14px 18px;
    }
    .lang-switch{
      margin-top:16px;
      padding-top:16px;
      border-top:1px solid var(--border);
      justify-content:center;
      font-size:15px;
      gap:12px;
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    max-width:var(--maxw);
    margin:0 auto;
    padding: clamp(60px,9vw,140px) var(--pad) clamp(40px,5vw,80px);
    position:relative;
  }
  .hero-meta{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-2);
    margin-bottom:42px;
  }
  .hero-meta .line{
    flex:0 0 64px;
    height:1px;
    background:var(--border-2);
  }
  .hero h1{
    font-family:var(--heading);
    font-weight:700;
    text-transform:uppercase;
    font-size: clamp(48px, 9vw, 132px);
    line-height:.96;
    letter-spacing:-0.01em;
    margin:0 0 36px;
    color:var(--text);
  }
  .hero h1 em{
    font-style: normal;
    font-weight:700;
    color:var(--accent);
  }
  .hero-sub{
    max-width:560px;
    font-size:clamp(16px, 1.4vw, 19px);
    line-height:1.55;
    color:var(--text-2);
    margin-bottom:48px;
  }
  .hero-cta-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:80px;
  }
  .btn{
    font-family:var(--mono);
    font-size:14px;
    letter-spacing:.02em;
    padding:16px 28px;
    border:1px solid var(--border-2);
    border-radius:2px;
    cursor:pointer;
    transition: all .2s ease;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .btn-primary{
    background:var(--accent);
    color:var(--bg);
    border-color:var(--accent);
  }
  .btn-primary:hover{
    background:var(--accent-2);
    border-color:var(--accent-2);
    transform: translateY(-1px);
  }
  .btn-ghost:hover{
    border-color:var(--text);
    color:var(--text);
  }
  .btn .arrow{
    transition: transform .2s;
  }
  .btn:hover .arrow{ transform: translateX(4px); }

  /* Hero feature grid */
  .hero-features{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
  }
  .hero-feature{
    background:var(--bg);
    padding: 28px 24px;
  }
  .hero-feature-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:14px;
  }
  .hero-feature-value{
    font-family:var(--serif);
    font-size:28px;
    font-weight:400;
    line-height:1.1;
    color:var(--text);
  }
  .hero-feature-value small{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent);
    display:block;
    margin-top:6px;
    letter-spacing:.05em;
  }
  @media (max-width:880px){
    .hero-features{ grid-template-columns: repeat(2, 1fr); }
  }

  /* ---------- WORDPRESS BUILD SERVICE ---------- */
  .wp-build{
    border: 1px solid var(--border);
    background: var(--bg-2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  .wp-build::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    pointer-events:none;
  }
  .wp-build-head{
    padding: clamp(36px, 5vw, 56px);
    border-bottom: 1px solid var(--border);
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .wp-build-meta{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--accent);
    margin-bottom: 22px;
    text-transform:uppercase;
  }
  .wp-build-price{
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
  }
  .wp-amount{
    font-family: var(--mono);
    font-size: clamp(56px, 8vw, 88px);
    font-weight: 500;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .wp-unit{
    font-family: var(--mono);
    font-size: 16px;
    color: var(--text-2);
  }
  .wp-build-tagline{
    font-family: var(--serif);
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--text);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing:-0.01em;
  }
  .wp-build-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    position: relative;
    z-index: 1;
  }
  .wp-item{
    background: var(--bg);
    padding: 26px 22px;
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: start;
  }
  .wp-item-num{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
    padding-top: 4px;
  }
  .wp-item-body strong{
    display: block;
    font-family: var(--serif);
    font-size: 18px;
    color: var(--text);
    margin-bottom: 6px;
    font-weight: 400;
    line-height:1.2;
  }
  .wp-item-body span{
    display:block;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .wp-build-footer{
    padding: 24px clamp(28px, 5vw, 56px);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--bg-2);
    position:relative;
    z-index:1;
  }
  .wp-build-note{
    font-size: 13px;
    color: var(--muted);
    font-family: var(--mono);
  }
  @media (max-width: 920px){
    .wp-build-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .wp-build-grid{ grid-template-columns: 1fr; }
    .wp-build-footer{ flex-direction:column; align-items:stretch; }
  }

  /* ---------- INCLUDED BOX (WEBBHOTELL HIGHLIGHT) ---------- */
  .included-box{
    margin-bottom:56px;
    border:1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    border-radius:2px;
    padding: clamp(28px, 4vw, 48px);
    position:relative;
    overflow:hidden;
  }
  .included-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse 600px 200px at 30% 0%, var(--accent-glow), transparent 70%);
    pointer-events:none;
  }
  .included-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap:48px;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .included-label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.12em;
    color:var(--accent);
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .included-title{
    font-family:var(--serif);
    font-size:clamp(28px, 3.8vw, 44px);
    font-weight:400;
    line-height:1.1;
    letter-spacing:-0.02em;
    margin:0 0 18px;
  }
  .included-title em{
    font-style:italic;
    font-weight:400;
    color:var(--accent);
  }
  .included-desc{
    color:var(--text-2);
    font-size:15.5px;
    line-height:1.6;
    margin:0 0 28px;
    max-width:520px;
  }
  .included-options{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .opt{
    display:grid;
    grid-template-columns: 40px 1fr;
    gap:16px;
    padding:16px 18px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:2px;
    align-items:start;
  }
  .opt-num{
    font-family:var(--mono);
    font-size:13px;
    color:var(--accent);
    padding-top:2px;
  }
  .opt-body strong{
    font-family:var(--sans);
    font-weight:600;
    font-size:14px;
    color:var(--text);
    display:block;
    margin-bottom:3px;
    letter-spacing:.01em;
  }
  .opt-body span{
    font-size:13px;
    color:var(--text-2);
    line-height:1.5;
  }

  .example-stack{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .example-stack .example-tag{
    padding:8px 14px;
    font-size:9px;
  }
  .example-stack .example-frame{
    padding:8px;
  }
  .example-stack .example-browser{
    padding:5px 8px;
  }
  .example-stack .example-browser .dot{
    width:6px;
    height:6px;
  }
  .example-stack .example-url{
    font-size:10px;
  }
  .example-stack .example-screen{
    aspect-ratio: 16/6;
    padding:14px 14px;
  }
  .example-stack .example-headline{
    font-size:16px;
    margin-bottom:3px;
  }
  .example-stack .example-sub{
    margin-bottom:8px;
  }
  .example-stack .example-bars{
    gap:4px;
    margin-top:8px;
  }
  .example-stack .example-bars span{
    height:3px;
  }
  .example-stack .example-cta{
    padding:8px 14px;
    font-size:11px;
  }

  /* Example card (debruinbygg.se) */
  .example-card{
    display:block;
    border:1px solid var(--border);
    background:var(--bg);
    border-radius:2px;
    overflow:hidden;
    transition: all .25s ease;
    text-decoration:none;
  }
  .example-card:hover{
    border-color:var(--accent);
    transform: translateY(-3px);
  }
  .example-tag{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.12em;
    color:var(--muted);
    padding:14px 18px;
    border-bottom:1px solid var(--border);
  }
  .example-frame{
    background: linear-gradient(135deg, #1a1f26, #0f1318);
    padding:14px;
  }
  .example-browser{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    background:#0a0d11;
    border:1px solid var(--border);
    border-radius:4px 4px 0 0;
    border-bottom:none;
  }
  .example-browser .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--border-2);
  }
  .example-browser .dot:first-child{ background:#ff5f56; }
  .example-browser .dot:nth-child(2){ background:#ffbd2e; }
  .example-browser .dot:nth-child(3){ background:#27c93f; }
  .example-url{
    font-family:var(--mono);
    font-size:11px;
    color:var(--text-2);
    margin-left:10px;
  }
  .example-screen{
    background:#fafaf7;
    border:1px solid var(--border);
    border-radius:0 0 4px 4px;
    aspect-ratio: 16/10;
    padding:24px 20px;
    position:relative;
    overflow:hidden;
  }
  .example-screen::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, transparent 60%, rgba(11,13,16,.04));
  }
  .example-screen-inner{
    position:relative;
    z-index:1;
  }
  .example-headline{
    font-family:var(--serif);
    font-size:24px;
    color:#1a1a1a;
    line-height:1;
    margin-bottom:6px;
    font-weight:500;
  }
  .example-sub{
    font-family:var(--sans);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:#777;
    margin-bottom:18px;
  }
  .example-bars{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:16px;
  }
  .example-bars span{
    display:block;
    height:5px;
    background:#e6e3dc;
    border-radius:2px;
  }
  .example-bars span:nth-child(1){ width:85%; }
  .example-bars span:nth-child(2){ width:72%; }
  .example-bars span:nth-child(3){ width:90%; }
  .example-bars span:nth-child(4){ width:60%; background:var(--accent); }
  .example-cta{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.05em;
    padding:14px 18px;
    border-top:1px solid var(--border);
    color:var(--text);
    transition: color .2s;
  }
  .example-card:hover .example-cta{ color:var(--accent); }

  @media (max-width: 920px){
    .included-grid{ grid-template-columns:1fr; gap:32px; }
  }

  /* ---------- SECTION DIVIDER ---------- */
  .divider{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 24px var(--pad);
    display:flex;
    align-items:center;
    gap: 22px;
    position:relative;
  }
  .divider::before,
  .divider::after{
    content:"";
    flex:1;
    height:1px;
    background: var(--border-2);
  }
  .divider span{
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 400;
    color: var(--accent);
    line-height:0.4;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  @media (max-width: 680px){
    .divider{ padding: 16px var(--pad); gap: 16px; }
    .divider span{ font-size: 18px; }
  }

  /* ---------- SECTION HEADERS ---------- */
  section{
    max-width:var(--maxw);
    margin:0 auto;
    padding: clamp(60px, 7vw, 100px) var(--pad);
  }
  .section-head{
    display:grid;
    grid-template-columns: 120px 1fr;
    gap:32px;
    margin-bottom:64px;
    align-items:start;
  }
  .section-num{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.12em;
    color:var(--accent);
    padding-top:12px;
    border-top:1px solid var(--accent);
  }
  .section-head h2{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(32px, 4.5vw, 56px);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin:0 0 16px;
  }
  .section-head p{
    color:var(--text-2);
    max-width:620px;
    font-size:17px;
    margin:0;
  }
  @media (max-width:680px){
    .section-head{ grid-template-columns: 1fr; gap:18px; }
    .section-num{ padding-top:0; padding-bottom:14px; border-top:none; border-bottom:1px solid var(--accent); display:inline-block; width:fit-content; }
  }

  /* ---------- WEBBHOTELL CARDS ---------- */
  .cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
  }
  .card{
    background:var(--bg);
    padding:36px 32px 40px;
    display:flex;
    flex-direction:column;
    position:relative;
    transition: background .25s ease;
  }
  .card:hover{ background:var(--bg-2); }
  .card-featured{
    background:var(--bg-2);
  }
  .card-featured::before{
    content:"POPULÄR";
    position:absolute;
    top:0; right:24px;
    transform:translateY(-50%);
    background:var(--accent);
    color:var(--bg);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.15em;
    padding:5px 10px;
    border-radius:2px;
  }
  .card-name{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-2);
    margin-bottom:8px;
  }
  .card-title{
    font-family:var(--serif);
    font-size:38px;
    font-weight:400;
    margin:0 0 8px;
    letter-spacing:-0.02em;
  }
  .card-sites{
    font-size:13px;
    color:var(--muted);
    margin-bottom:36px;
  }
  .card-price{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:6px;
  }
  .card-price .amount{
    font-family:var(--mono);
    font-size:42px;
    font-weight:500;
    color:var(--text);
    line-height:1;
  }
  .card-price .unit{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
  }
  .card-price-note{
    font-size:12px;
    color:var(--accent);
    font-family:var(--mono);
    margin-bottom:28px;
    min-height:18px;
  }
  .card-divider{
    height:1px;
    background:var(--border);
    margin-bottom:24px;
  }
  .card-features{
    list-style:none;
    padding:0;
    margin:0 0 36px;
    flex:1;
  }
  .card-features li{
    display:flex;
    gap:12px;
    padding:8px 0;
    font-size:14px;
    color:var(--text-2);
  }
  .card-features li::before{
    content:"+";
    color:var(--accent);
    font-family:var(--mono);
    font-weight:500;
  }
  .card-features li strong{
    font-family:var(--mono);
    color:var(--text);
    font-weight:500;
  }
  .card-features li em{
    font-style:italic;
    color:var(--accent);
    font-family:var(--serif);
    font-weight:400;
    padding:0 2px;
  }
  .card-cta{
    font-family:var(--mono);
    font-size:13px;
    padding:14px;
    text-align:center;
    border:1px solid var(--border-2);
    border-radius:2px;
    transition:all .2s;
    margin-top:auto;
  }
  .card-cta:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--bg);
  }
  .card-featured .card-cta{
    background:var(--text);
    color:var(--bg);
    border-color:var(--text);
  }
  .card-featured .card-cta:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--bg);
  }
  @media (max-width:920px){
    .cards{ grid-template-columns:1fr; }
  }

  /* ---------- CALLOUT BOXES ---------- */
  .callout{
    margin-top:32px;
    border:1px solid var(--border);
    border-left:2px solid var(--accent);
    padding:24px 28px;
    background:var(--bg-2);
    display:grid;
    grid-template-columns: auto 1fr;
    gap:20px;
    align-items:start;
    border-radius:2px;
  }
  .callout-icon{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    color:var(--accent);
    padding-top:3px;
    white-space:nowrap;
  }
  .callout-body{
    font-size:14.5px;
    color:var(--text-2);
    line-height:1.6;
  }
  .callout-body strong{ color:var(--text); }
  .callout-body a{
    color:var(--accent);
    border-bottom:1px solid currentColor;
  }
  @media (max-width:600px){
    .callout{ grid-template-columns:1fr; gap:10px; }
  }

  /* ---------- VPS INCLUDES BANNER ---------- */
  .vps-includes{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
    margin-bottom:28px;
  }
  .vps-includes-item{
    background:var(--bg-2);
    padding:22px 24px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .vps-includes-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .vps-includes-value{
    font-family:var(--serif);
    font-size:26px;
    color:var(--text);
    line-height:1;
    margin-top:4px;
    letter-spacing:-0.01em;
  }
  .vps-includes-meta{
    font-family:var(--mono);
    font-size:12px;
    color:var(--text-2);
  }
  @media (max-width:680px){
    .vps-includes{ grid-template-columns:1fr; }
  }

  /* ---------- PERF TOGGLE (Collapsible) ---------- */
  .perf-toggle{
    margin-top: 56px;
  }
  .perf-toggle > summary{
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px clamp(20px, 3vw, 28px);
    border: 1px solid var(--border);
    background: var(--bg-2);
    border-radius: 2px;
    transition: all .2s ease;
    user-select: none;
  }
  .perf-toggle > summary::-webkit-details-marker,
  .perf-toggle > summary::marker{
    display:none;
    content:"";
  }
  .perf-toggle > summary:hover{
    border-color: var(--accent);
    background: var(--bg-3);
  }
  .perf-toggle > summary:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .perf-toggle-icon{
    display:inline-flex;
    width: 36px; height: 36px;
    align-items:center;
    justify-content:center;
    border: 1px solid var(--border-2);
    border-radius: 50%;
    color: var(--accent);
    transition: transform .25s ease, border-color .25s ease;
    flex-shrink:0;
  }
  .perf-toggle[open] .perf-toggle-icon{
    transform: rotate(180deg);
    border-color: var(--accent);
  }
  .perf-toggle-text{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .perf-toggle-text strong{
    font-family: var(--serif);
    font-size: 22px;
    color: var(--text);
    font-weight: 400;
    letter-spacing:-0.01em;
    line-height:1;
  }
  .perf-toggle-text small{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing:.02em;
  }
  .perf-toggle-action{
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 8px 14px;
    border: 1px solid var(--border-2);
    border-radius: 2px;
    transition: all .2s;
    flex-shrink:0;
  }
  .perf-toggle > summary:hover .perf-toggle-action{
    border-color: var(--accent);
    background: var(--bg);
  }
  .perf-toggle .when-open{ display: none; }
  .perf-toggle[open] .when-closed{ display: none; }
  .perf-toggle[open] .when-open{ display: inline; }

  /* When open, attach the perf card to the toggle visually */
  .perf-toggle .perf{
    margin-top: 1px;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    animation: perfOpen .35s ease both;
  }
  .perf-toggle[open] > summary{
    border-bottom: 1px dashed var(--border-2);
    border-radius: 2px 2px 0 0;
  }
  @keyframes perfOpen{
    from{ opacity:0; transform: translateY(-6px); }
    to{ opacity:1; transform: none; }
  }
  @media (max-width: 560px){
    .perf-toggle > summary{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
    }
    .perf-toggle-action{ grid-column: 1 / -1; text-align:center; }
  }

  /* ---------- PERFORMANCE PROOF ---------- */
  .perf{
    border:1px solid var(--border);
    background:var(--bg-2);
    border-radius:2px;
    overflow:hidden;
    position:relative;
  }
  .perf::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background: linear-gradient(90deg, var(--green), var(--accent), var(--forest));
    opacity:.6;
  }
  .perf-head{
    padding: 28px clamp(24px, 4vw, 40px);
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .perf-head-left{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .perf-head-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 8px var(--green);
    animation: pulse 2s infinite;
  }
  .perf-head h3{
    font-family:var(--serif);
    font-size:24px;
    font-weight:400;
    margin:0;
    letter-spacing:-0.01em;
  }
  .perf-head-meta{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .perf-head-meta strong{ color:var(--text-2); font-weight:500; }

  .perf-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1px;
    background:var(--border);
  }
  .perf-stat{
    background:var(--bg);
    padding:24px;
  }
  .perf-stat-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:14px;
  }
  .perf-stat-value{
    font-family:var(--serif);
    font-size:30px;
    line-height:1;
    color:var(--text);
    letter-spacing:-0.02em;
    margin-bottom:6px;
  }
  .perf-stat-value small{
    font-family:var(--mono);
    font-size:13px;
    color:var(--text-2);
    margin-left:4px;
    letter-spacing:0;
  }
  .perf-stat-meta{
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
  }
  @media (max-width: 920px){
    .perf-grid{ grid-template-columns:repeat(2,1fr); }
  }

  /* Network test table */
  .perf-net{
    border-top:1px solid var(--border);
    padding: 24px clamp(20px, 3vw, 32px);
    background:var(--bg);
  }
  .perf-net-title{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
  }
  .perf-net-title strong{
    color:var(--accent);
    font-weight:500;
  }
  .perf-net-rows{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .perf-net-row{
    display:grid;
    grid-template-columns: 1.5fr 1fr 1fr 80px;
    gap:14px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid var(--border);
    font-family:var(--mono);
    font-size:13px;
  }
  .perf-net-row:last-child{ border-bottom:none; }
  .perf-net-loc{
    color:var(--text);
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .perf-net-loc small{
    color:var(--muted);
    font-size:11px;
  }
  .perf-net-bar{
    position:relative;
    height:6px;
    background:var(--bg-3);
    border-radius:1px;
    overflow:hidden;
  }
  .perf-net-bar::after{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width: var(--w, 0%);
    background: linear-gradient(90deg, var(--forest), var(--green));
  }
  .perf-net-bar.recv::after{
    background: linear-gradient(90deg, var(--rust), var(--accent));
  }
  .perf-net-bar.bw::after{
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
  }
  .perf-net-val{
    color:var(--text-2);
    text-align:right;
    font-size:12px;
  }
  .perf-net-ping{
    color:var(--text-2);
    text-align:right;
    font-size:12px;
  }
  .ping-tag{
    display:inline-block;
    padding:3px 8px;
    border-radius:2px;
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
    border:1px solid;
  }
  .ping-tag.good{
    color:var(--green);
    border-color:rgba(76,162,125,.4);
    background:rgba(76,162,125,.08);
  }
  .ping-tag.ok{
    color:var(--accent-2);
    border-color:rgba(225,123,48,.4);
    background:rgba(225,123,48,.08);
  }
  .ping-tag.far{
    color:var(--muted);
    border-color:var(--border-2);
    background:var(--bg-3);
  }
  @media (max-width: 760px){
    .perf-net-row{ grid-template-columns: 1fr 1fr; gap:8px; }
    .perf-net-row .perf-net-loc{ grid-column: 1 / -1; }
    .perf-net-ping{ display:none; }
  }

  .perf-foot{
    padding: 18px clamp(24px, 4vw, 40px);
    border-top:1px solid var(--border);
    background:var(--bg-2);
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted);
    display:flex;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
  }
  .perf-foot a{
    color:var(--accent);
  }
  .perf-foot a:hover{ text-decoration:underline; }

  /* ---------- UPTIME STATUS ---------- */
  .uptime{
    margin-top: 56px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    border-radius: 2px;
    overflow: hidden;
    position:relative;
  }
  .uptime::before{
    content:"";
    position:absolute;
    top:0; right:-100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(76,162,125,.10), transparent 65%);
    pointer-events:none;
  }
  .uptime-head{
    padding: 24px clamp(24px, 4vw, 40px);
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
  }
  .uptime-head-left{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .uptime-head h3{
    font-family:var(--serif);
    font-size:22px;
    font-weight:400;
    margin:0;
    letter-spacing:-0.01em;
  }
  .uptime-head-meta{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .uptime-stats{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1px;
    background:var(--border);
    position:relative;
    z-index:1;
  }
  .uptime-stat{
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
    display:flex;
    flex-direction:column;
    gap:14px;
    position:relative;
  }
  .uptime-stat:first-child::after{
    content:"";
    position:absolute;
    top:50%; right:0;
    transform: translate(50%, -50%);
    width:8px; height:8px;
    border-radius:50%;
    background:var(--bg);
    border:1px solid var(--border-2);
  }
  .uptime-stat-num{
    font-family:var(--serif);
    font-size: clamp(64px, 10vw, 132px);
    font-weight:400;
    line-height:.9;
    letter-spacing:-0.04em;
    color:var(--text);
    background: linear-gradient(180deg, var(--text), var(--green));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
  }
  .uptime-stat-num small{
    font-family:var(--mono);
    font-size: clamp(24px, 3.5vw, 44px);
    color:var(--green);
    -webkit-text-fill-color: var(--green);
    margin-left: 4px;
    font-weight:400;
    vertical-align: middle;
  }
  .uptime-stat-title{
    font-family:var(--serif);
    font-size: clamp(20px, 2.4vw, 28px);
    color:var(--text);
    line-height:1.1;
    letter-spacing:-0.01em;
    font-weight:400;
  }
  .uptime-stat-desc{
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.55;
    max-width: 360px;
  }
  .uptime-statement{
    padding: clamp(24px, 3vw, 32px) clamp(28px, 4vw, 48px);
    border-top: 1px solid var(--border);
    background: var(--bg-2);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-2);
    position:relative;
    z-index:1;
  }
  @media (max-width: 760px){
    .uptime-stats{ grid-template-columns:1fr; }
    .uptime-stat:first-child::after{
      top:auto; bottom:0; left:50%;
      transform: translate(-50%, 50%);
    }
  }

  /* ---------- VPS TABLE ---------- */
  .vps-wrap{
    border:1px solid var(--border);
    border-radius:2px;
    overflow-x:auto;
  }
  .vps-table{
    width:100%;
    border-collapse:collapse;
    font-family:var(--mono);
    font-size:14px;
    min-width: 720px;
  }
  .vps-table thead{
    background:var(--bg-2);
  }
  .vps-table th{
    text-align:left;
    padding:18px 20px;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:500;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
  }
  .vps-table td{
    padding:18px 20px;
    border-bottom:1px solid var(--border);
    color:var(--text-2);
    white-space:nowrap;
  }
  .vps-table tbody tr:last-child td{ border-bottom:none; }
  .vps-table tbody tr{
    transition:background .15s;
  }
  .vps-table tbody tr:hover{
    background:var(--bg-2);
  }
  .vps-table .pkg{
    color:var(--text);
    font-weight:500;
  }
  .vps-table .price{
    color:var(--accent);
    font-weight:500;
  }
  .vps-table .ip-tag{
    display:inline-block;
    padding:3px 8px;
    border-radius:2px;
    font-size:11px;
    background:var(--bg-3);
    border:1px solid var(--border);
    color:var(--text-2);
  }
  .vps-table .ip-tag.dual{
    border-color:var(--accent);
    color:var(--accent);
  }
  .vps-note{
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted);
    margin-top:16px;
    font-style:italic;
  }

  /* ---------- TILLVAL ---------- */
  .tillval{
    margin-top:64px;
  }
  .tillval h3{
    font-family:var(--serif);
    font-size:32px;
    font-weight:400;
    margin:0 0 24px;
    letter-spacing:-0.01em;
  }
  .tillval-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
  }
  .tillval-item{
    background:var(--bg);
    padding:22px 20px;
  }
  .tillval-item-label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:12px;
  }
  .tillval-item-size{
    font-family:var(--serif);
    font-size:22px;
    color:var(--text);
    margin-bottom:6px;
  }
  .tillval-item-price{
    font-family:var(--mono);
    font-size:14px;
    color:var(--accent);
  }
  @media (max-width: 920px){
    .tillval-grid{ grid-template-columns:repeat(2,1fr); }
  }

  /* ---------- BILDVALV ---------- */
  .bildvalv-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
    margin-bottom: 56px;
  }
  .bildvalv-card{
    background:var(--bg);
    padding: clamp(28px, 4vw, 44px);
    display:flex;
    flex-direction:column;
    position:relative;
    transition: background .2s;
  }
  .bildvalv-card:hover{ background:var(--bg-2); }
  .bildvalv-card.featured{
    background: var(--bg-2);
  }
  .bildvalv-card.featured::before{
    content:"POPULÄR";
    position:absolute;
    top:0; right:24px;
    transform:translateY(-50%);
    background:var(--accent);
    color:var(--bg);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.15em;
    padding:5px 10px;
    border-radius:2px;
  }
  .bildvalv-tag{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--text-2);
    margin-bottom:14px;
  }
  .bildvalv-size{
    font-family:var(--serif);
    font-size: clamp(48px, 8vw, 96px);
    font-weight:400;
    line-height:.9;
    letter-spacing:-0.03em;
    color:var(--text);
    margin-bottom: 24px;
  }
  .bildvalv-size small{
    font-family:var(--mono);
    font-size: clamp(20px, 3vw, 32px);
    color:var(--accent);
    margin-left:4px;
    font-weight:400;
    vertical-align: middle;
  }
  .bildvalv-price{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:6px;
  }
  .bildvalv-price .amount{
    font-family:var(--mono);
    font-size: 38px;
    font-weight:500;
    color:var(--text);
    line-height:1;
  }
  .bildvalv-price .unit{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
  }
  .bildvalv-billing{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent);
    margin-bottom: 28px;
    letter-spacing:.02em;
  }
  .bildvalv-card .card-cta{
    font-family:var(--mono);
    font-size:13px;
    padding:14px;
    text-align:center;
    border:1px solid var(--border-2);
    border-radius:2px;
    transition:all .2s;
    margin-top:auto;
  }
  .bildvalv-card .card-cta:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--bg);
  }
  .bildvalv-card.featured .card-cta{
    background:var(--text);
    color:var(--bg);
    border-color:var(--text);
  }
  .bildvalv-card.featured .card-cta:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--bg);
  }

  /* Features list */
  .bildvalv-features{
    margin-bottom: 32px;
  }
  .bildvalv-features-title{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:24px;
  }
  .bildvalv-features-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
  }
  .bildvalv-features-list li{
    background:var(--bg);
    padding: 20px 22px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .bildvalv-features-list strong{
    font-family:var(--serif);
    font-size: 17px;
    font-weight: 400;
    color:var(--text);
    letter-spacing:-0.01em;
  }
  .bildvalv-features-list span{
    font-size:13px;
    color:var(--text-2);
    line-height:1.5;
  }

  @media (max-width: 920px){
    .bildvalv-features-list{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px){
    .bildvalv-grid{ grid-template-columns:1fr; }
    .bildvalv-features-list{ grid-template-columns: 1fr; }
  }

  /* ---------- DEDIKERADE: ACCESS HIGHLIGHT ---------- */
  .access-box{
    background: linear-gradient(160deg, var(--petrol), #0f2829);
    border: 1px solid var(--forest);
    border-radius: 2px;
    padding: clamp(28px, 5vw, 64px);
    position: relative;
    overflow: hidden;
  }
  .access-box::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(225,123,48,.18), transparent 70%);
    pointer-events:none;
  }
  .access-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
    position:relative;
    z-index:1;
  }
  .access-label{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--accent);
    margin-bottom: 18px;
    text-transform:uppercase;
  }
  .access-title{
    font-family: var(--serif);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    color: var(--text);
  }
  .access-title em{
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
  }
  .access-desc{
    color: var(--text-2);
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0;
    max-width: 520px;
  }
  .access-icons{
    display:flex;
    flex-direction:column;
    gap: 14px;
  }
  .access-icon-card{
    background: rgba(11,13,16,.5);
    border: 1px solid rgba(76,162,125,.3);
    backdrop-filter: blur(4px);
    border-radius: 2px;
    padding: 22px 26px;
  }
  .access-icon-label{
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .15em;
    color: var(--muted);
    text-transform:uppercase;
    margin-bottom: 10px;
  }
  .access-icon-value{
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 38px);
    color: var(--text);
    line-height: 1;
    letter-spacing:-0.02em;
    margin-bottom: 6px;
  }
  .access-icon-meta{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: .02em;
  }
  @media (max-width: 760px){
    .access-grid{ grid-template-columns:1fr; }
  }

  /* ---------- DEDIKERADE: FEATURES GRID ---------- */
  .dd-features{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 2px;
  }
  .dd-feature{
    background: var(--bg);
    padding: clamp(24px, 3vw, 36px);
    display:flex;
    flex-direction:column;
    transition: background .2s;
  }
  .dd-feature:hover{ background: var(--bg-2); }
  .dd-feature-num{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--accent);
    margin-bottom: 18px;
  }
  .dd-feature h3{
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .dd-feature p{
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
  }
  @media (max-width: 920px){
    .dd-features{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px){
    .dd-features{ grid-template-columns: 1fr; }
  }

  /* ---------- DEDIKERADE: PROCESS LIST ---------- */
  .process-list{
    list-style:none;
    padding:0;
    margin:0;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--bg-2);
  }
  .process-list li{
    display:grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    padding: 24px clamp(24px, 4vw, 36px);
    border-bottom: 1px solid var(--border);
    align-items: start;
  }
  .process-list li:last-child{ border-bottom: none; }
  .process-num{
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .15em;
    color: var(--accent);
    padding-top: 3px;
  }
  .process-body{
    display:flex;
    flex-direction:column;
    gap: 6px;
  }
  .process-body strong{
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
    letter-spacing:-0.01em;
    line-height:1;
  }
  .process-body span{
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.55;
  }
  @media (max-width: 560px){
    .process-list li{
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }

  /* ---------- DEDIKERADE: USE CASES ---------- */
  .usecase-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 2px;
  }
  .usecase{
    background: var(--bg);
    padding: clamp(28px, 4vw, 40px);
  }
  .usecase h3{
    font-family: var(--serif);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 400;
    margin: 0 0 14px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .usecase p{
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
  }
  @media (max-width: 760px){
    .usecase-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- DEDIKERADE (legacy compat, behåll om något använder) ---------- */
  .dedicated{
    background: linear-gradient(160deg, var(--petrol), #0f2829);
    border:1px solid var(--forest);
    border-radius:2px;
    padding: clamp(24px, 5vw, 72px);
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 5vw, 60px);
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  .dedicated::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width:400px; height:400px;
    background: radial-gradient(circle, rgba(225,123,48,.22), transparent 70%);
    pointer-events:none;
  }
  .dedicated-body h3{
    font-family:var(--serif);
    font-size:clamp(26px, 4vw, 48px);
    font-weight:400;
    margin:0 0 22px;
    line-height:1.1;
    letter-spacing:-0.02em;
  }
  .dedicated-body p{
    color:var(--text-2);
    font-size: clamp(15px, 1.6vw, 16.5px);
    line-height:1.6;
    margin:0 0 32px;
  }
  .dedicated-stats{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.5vw, 24px);
    position:relative;
    z-index:1;
  }
  .dstat{
    border:1px solid rgba(76,162,125,.3);
    padding: clamp(16px, 2.5vw, 24px);
    background: rgba(11,13,16,.4);
    backdrop-filter: blur(4px);
    border-radius:2px;
    min-width:0;
  }
  .dstat-label{
    font-family:var(--mono);
    font-size: 11px;
    color:var(--muted);
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:10px;
  }
  .dstat-value{
    font-family:var(--serif);
    font-size: clamp(22px, 3vw, 32px);
    color:var(--text);
    line-height:1.1;
    word-break: break-word;
  }
  .dstat-value small{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent);
    display:block;
    margin-top:6px;
    letter-spacing:.04em;
  }
  @media (max-width: 880px){
    .dedicated{
      grid-template-columns:1fr;
      gap:32px;
    }
  }
  @media (max-width: 480px){
    .dedicated{
      padding: 24px 20px;
    }
    .dedicated-stats{
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .dstat{
      padding: 14px 14px;
    }
    .dstat-label{
      font-size: 10px;
      margin-bottom: 6px;
    }
    .dstat-value{
      font-size: 20px;
    }
  }

  /* ---------- KONTAKT ---------- */
  .kontakt{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap:60px;
    align-items:start;
  }
  .kontakt-body h3{
    font-family:var(--serif);
    font-size:clamp(32px, 4.5vw, 56px);
    font-weight:400;
    line-height:1.05;
    letter-spacing:-0.02em;
    margin:0 0 32px;
  }
  .kontakt-body h3 em{
    font-style:italic;
    font-weight:400;
    color:var(--accent);
  }
  .contact-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
  }
  .contact-item{
    background:var(--bg);
    padding:24px 28px;
    display:flex;
    align-items:center;
    gap:24px;
    transition: background .2s;
  }
  .contact-item:hover{
    background:var(--bg-2);
  }
  .contact-item img{
    width:20px; height:20px;
    opacity:.7;
    flex-shrink:0;
  }
  .contact-item:hover img{ opacity:1; }
  .contact-item .label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    width:80px;
    flex-shrink:0;
  }
  .contact-item .value{
    font-family:var(--serif);
    font-size:22px;
    color:var(--text);
    letter-spacing:-0.01em;
  }
  .contact-item:hover .value{ color:var(--accent); }
  .anders-card{
    background:var(--bg-2);
    border:1px solid var(--border);
    padding:32px;
    border-radius:2px;
    text-align:center;
  }
  .anders-card img{
    width:80%;
    max-width:280px;
    aspect-ratio:1/1;
    object-fit:cover;
    margin: 0 auto 24px;
    display:block;
    border-radius:50%;
    border: 1px solid var(--border);
    filter: grayscale(8%);
  }
  .anders-card .role{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:8px;
  }
  .anders-card .name{
    font-family:var(--serif);
    font-size:32px;
    margin-bottom:14px;
    letter-spacing:-0.01em;
    font-weight:400;
  }
  .anders-card .bio{
    font-size:14px;
    color:var(--text-2);
    line-height:1.6;
    margin:0 auto;
    max-width: 320px;
  }
  @media (max-width: 880px){
    .kontakt{ grid-template-columns:1fr; gap:40px; }
    .contact-item{ flex-wrap:wrap; gap:8px; }
    .contact-item .label{ width:100%; }
  }

  /* ---------- SERVICES OVERVIEW (Startsida) ---------- */
  .services-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
  }
  .service-card{
    background:var(--bg);
    padding: clamp(28px, 4vw, 44px);
    display:flex;
    flex-direction:column;
    gap: 14px;
    transition: background .25s ease;
    position:relative;
  }
  .service-card:hover{ background:var(--bg-2); }
  .service-num{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.15em;
    color:var(--accent);
    margin-bottom:6px;
  }
  .service-title{
    font-family:var(--serif);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight:400;
    margin:0;
    line-height:1.05;
    letter-spacing:-0.02em;
    color:var(--text);
  }
  .service-desc{
    color:var(--text-2);
    font-size:15px;
    line-height:1.6;
    margin:6px 0 18px;
  }
  .service-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid var(--border);
    font-family:var(--mono);
    font-size:13px;
    color:var(--text-2);
  }
  .service-meta strong{
    color:var(--text);
    font-weight:500;
  }
  .service-cta{
    color:var(--accent);
    letter-spacing:.02em;
    transition: transform .2s;
  }
  .service-card:hover .service-cta{
    transform: translateX(4px);
  }
  @media (max-width: 720px){
    .services-grid{ grid-template-columns:1fr; }
  }

  /* ---------- KONTAKT CTA BOX (Startsida) ---------- */
  .kontakt-cta-box{
    background: linear-gradient(160deg, var(--petrol), #0f2829);
    border: 1px solid var(--forest);
    border-radius: 2px;
    padding: clamp(40px, 7vw, 88px) clamp(28px, 5vw, 64px);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .kontakt-cta-box::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(225,123,48,.22), transparent 70%);
    pointer-events:none;
  }
  .kontakt-cta-meta{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--accent);
    margin-bottom: 22px;
    position:relative;
    z-index:1;
  }
  .kontakt-cta-title{
    font-family: var(--serif);
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 36px;
    color: var(--text);
    position:relative;
    z-index:1;
  }
  .kontakt-cta-title em{
    font-style:italic;
    color:var(--accent);
    font-weight:400;
  }
  .kontakt-cta-row{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
  }

  /* ---------- PAGE INTRO (för undersidor) ---------- */
  .page-intro{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(60px, 9vw, 120px) var(--pad) clamp(40px, 5vw, 64px);
  }
  .page-intro-meta{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-2);
    margin-bottom:36px;
  }
  .page-intro-meta .line{
    flex:0 0 64px;
    height:1px;
    background:var(--border-2);
  }
  .page-intro h1{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(40px, 7vw, 96px);
    line-height:.98;
    letter-spacing:-0.03em;
    margin:0 0 28px;
    color:var(--text);
  }
  .page-intro h1 em{
    font-style: italic;
    font-weight:400;
    color:var(--accent);
  }
  .page-intro-sub{
    max-width:620px;
    font-size:clamp(16px, 1.4vw, 19px);
    line-height:1.55;
    color:var(--text-2);
    margin:0;
  }

  /* ---------- ORDER CTA (Beställ-knapp på vps-sidan) ---------- */
  .cta-divider{
    display:flex;
    align-items:center;
    gap:18px;
    padding: 28px 0;
  }
  .cta-divider::before,
  .cta-divider::after{
    content:"";
    flex:1;
    height:1px;
    background: var(--border);
  }
  .cta-divider span{
    font-family: var(--serif);
    font-size: 30px;
    color: var(--muted);
    line-height: 0.4;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }

  .order-cta{
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items:center;
    padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 40px);
    margin-top: 32px;
    border: 1px solid var(--accent);
    background: linear-gradient(135deg, rgba(225,123,48,.08), rgba(225,123,48,.02));
    border-radius: 2px;
    position:relative;
    overflow:hidden;
  }
  .order-cta::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    pointer-events:none;
  }
  .order-cta-body{
    min-width: 0;
    position:relative;
    z-index:1;
  }
  .order-cta-meta{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .order-cta-title{
    font-family: var(--serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    color: var(--text);
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .order-cta-desc{
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    max-width: 520px;
  }
  .order-cta-btn{
    flex-shrink: 0;
    position:relative;
    z-index:1;
    white-space: nowrap;
  }
  @media (max-width: 720px){
    .order-cta{ grid-template-columns: 1fr; gap: 20px; }
    .order-cta-btn{ width:100%; justify-content:center; }
  }

  /* ---------- BENCHMARK CTA (på vps-sidan) ---------- */
  .benchmark-cta{
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items:center;
    padding: 22px clamp(20px, 3vw, 28px);
    margin-top: clamp(56px, 8vw, 88px);
    border: 1px solid var(--border-2);
    background: var(--bg-2);
    border-radius: 2px;
    transition: all .2s ease;
    text-decoration:none;
  }
  .benchmark-cta:hover{
    border-color: var(--accent);
    background: var(--bg-3);
  }
  .benchmark-cta-left{
    display:flex;
    align-items:center;
    gap: 18px;
    min-width:0;
  }
  .benchmark-cta-icon{
    width: 40px; height: 40px;
    border-radius:50%;
    border:1px solid var(--border-2);
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition: all .2s;
  }
  .benchmark-cta:hover .benchmark-cta-icon{
    border-color: var(--accent);
    background: rgba(225,123,48,.08);
  }
  .benchmark-cta-text{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .benchmark-cta-text strong{
    font-family:var(--serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
    line-height:1;
    letter-spacing:-0.01em;
  }
  .benchmark-cta-text small{
    font-family:var(--mono);
    font-size: 12px;
    color:var(--muted);
    letter-spacing:.02em;
  }
  .benchmark-cta-action{
    font-family:var(--mono);
    font-size: 12px;
    letter-spacing:.1em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 10px 16px;
    border: 1px solid var(--border-2);
    border-radius: 2px;
    white-space:nowrap;
    transition: all .2s;
  }
  .benchmark-cta:hover .benchmark-cta-action{
    border-color: var(--accent);
    background: var(--bg);
  }
  @media (max-width: 560px){
    .benchmark-cta{ grid-template-columns: 1fr; }
    .benchmark-cta-action{ text-align:center; }
  }

  /* ---------- TEKNISK ÖVERSIKT ---------- */
  .tech-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:2px;
  }
  .tech-item{
    background:var(--bg);
    padding: clamp(20px, 2.5vw, 28px);
    display:flex;
    flex-direction:column;
    gap:6px;
    transition: background .2s;
  }
  .tech-item:hover{ background:var(--bg-2); }
  .tech-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .tech-value{
    font-family:var(--serif);
    font-size:24px;
    color:var(--text);
    line-height:1;
    letter-spacing:-0.01em;
    margin-top:4px;
  }
  .tech-meta{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent);
    letter-spacing:.02em;
  }
  @media (max-width: 880px){
    .tech-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width: 480px){
    .tech-grid{ grid-template-columns:1fr; }
  }

  /* ---------- FAQ ---------- */
  .faq-list{
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--bg-2);
  }
  .faq-item{
    border-bottom: 1px solid var(--border);
  }
  .faq-item:last-child{ border-bottom: none; }
  .faq-item > summary{
    list-style: none;
    cursor: pointer;
    padding: 22px clamp(20px, 3vw, 32px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-family: var(--serif);
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.01em;
    transition: background .15s;
    user-select: none;
  }
  .faq-item > summary::-webkit-details-marker,
  .faq-item > summary::marker{ display:none; content:""; }
  .faq-item > summary:hover{ background: var(--bg-3); }
  .faq-item[open] > summary{ color: var(--accent); }
  .faq-icon{
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-2);
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 16px;
    color: var(--accent);
    flex-shrink: 0;
    transition: transform .25s, border-color .2s;
    line-height: 1;
  }
  .faq-item[open] .faq-icon{
    transform: rotate(45deg);
    border-color: var(--accent);
  }
  .faq-body{
    padding: 0 clamp(20px, 3vw, 32px) 24px;
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 720px;
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--border);
    margin-top:80px;
  }
  .footer-top{
    max-width:var(--maxw);
    margin:0 auto;
    padding: 60px var(--pad) 40px;
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:48px;
  }
  .footer-brand img{
    height:32px;
    width:auto;
    margin-bottom:20px;
  }
  .footer-badge{
    display:flex;
    align-items:center;
    align-self:center;
  }
  .footer-badge .based-in-sweden-link{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .footer-badge .based-in-sweden-img{
    height:96px;
    width:auto;
    flex-shrink:0;
  }
  .footer-badge .based-in-sweden-caption{
    font-size:13px;
    line-height:1.4;
    color:var(--text-2);
  }
  .footer-brand p{
    color:var(--text-2);
    font-size:14px;
    max-width:320px;
    line-height:1.55;
    margin:0 0 20px;
  }
  .abon-link{
    display:inline-flex;
    flex-direction:column;
    gap:4px;
    padding:14px 22px;
    border:1px solid var(--border);
    border-radius:2px;
    transition: all .2s;
    background:var(--bg);
  }
  .abon-link:hover{
    border-color:var(--accent);
    background:var(--bg-2);
  }
  .abon-link-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .abon-link-url{
    font-family:var(--serif);
    font-size:20px;
    color:var(--text);
    letter-spacing:-0.01em;
  }
  .abon-link:hover .abon-link-url{ color:var(--accent); }
  .footer-col h4{
    font-family:var(--serif);
    font-size:22px;
    font-weight:400;
    letter-spacing:-0.01em;
    color:var(--text);
    margin:0 0 18px;
  }
  .footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .footer-col a{
    color:var(--text-2);
    font-size:14px;
    transition:color .15s;
  }
  .footer-col a:hover{ color:var(--text); }
  .footer-bottom{
    border-top:1px solid var(--border);
    background:var(--bg-2);
  }
  .footer-bottom-inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding: 22px var(--pad);
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted);
  }
  @media (max-width:760px){
    .footer-top{ grid-template-columns:1fr; gap:32px; }
  }

  /* Scroll reveal */
  .reveal{
    opacity:0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .reveal.in{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .status-dot{ animation:none; }
  }
  @media (max-width: 920px){
    .reveal{ opacity:1; transform:none; }
  }
/* FAST KUNDKORG & KNAPP PÅ MOBILEN */
  .mobile-sticky-bar {
    display: none;
  }
  @media(max-width:900px) {
    /* Dölj den vanliga knappen i kundkorgen på mobilen, vi har en bättre nu */
    .summary .btn-submit { 
      display: none; 
    }
    
    /* Skapa den fasta listen längst ner i fönstret */
    .mobile-sticky-bar {
      display: block;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(23, 23, 23, 0.95);
      backdrop-filter: blur(10px);
      border-top: 1px solid var(--border);
      padding: 12px 24px;
      z-index: 999;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    }
    .msb-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      max-width: 600px;
      margin: 0 auto;
    }
    .msb-text {
      display: flex;
      flex-direction: column;
    }
    .msb-label {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-2);
      letter-spacing: 0.05em;
    }
    .msb-total {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--text);
    }
    .mobile-sticky-bar .btn-submit {
      margin: 0;
      padding: 12px 22px;
      width: auto;
      flex: none;
    }
    /* Ge formuläret extra utrymme i botten så listen inte döljer något */
    .order-layout {
      padding-bottom: 120px !important;
    }
  }
  /* ---------- DESIGN v2 (tech) — startsida ---------- */
  .hero-terminal{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.02em;
    color:var(--accent);
    margin-bottom:22px;
    min-height:20px;
  }
  .hero-terminal .prompt{ color:var(--muted); }
  .hero-terminal .cursor{
    display:inline-block;
    width:8px; height:15px;
    background:var(--accent);
    margin-left:3px;
    vertical-align:-2px;
    animation:blink-cursor .9s step-end infinite;
  }
  @keyframes blink-cursor{
    0%,45%{ opacity:1; }
    50%,95%{ opacity:0; }
    100%{ opacity:1; }
  }
  .dv2 .services-grid{
    gap:24px;
    background:transparent;
    border:none;
  }
  .service-card--tech{
    padding-top:0;
    background:#0d0d0d;
    border:1px solid var(--border);
    border-radius:4px;
    overflow:hidden;
  }
  .service-card--tech:hover{ background:#0d0d0d; }

  /* Tydligare rutmönster i bakgrunden på startsidan */
  .dv2::before{
    background-image:
      linear-gradient(var(--border-2) 1px, transparent 1px),
      linear-gradient(90deg, var(--border-2) 1px, transparent 1px);
    opacity:.4;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 40%, transparent 92%);
  }
  .service-card--tech:hover{ border-color:var(--border-2); }
  .service-card--tech .service-topbar{ display:none; }
  .service-head-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .service-tag{
    background:var(--accent-glow);
    color:var(--accent);
    font-family:var(--mono);
    font-size:11px;
    font-weight:400;
    padding:4px 10px;
    border-radius:3px;
    white-space:nowrap;
  }
  .service-card--tech .service-img{
    display:block;
    width:calc(100% + 2 * clamp(28px, 4vw, 44px));
    max-width:none;
    margin:0 calc(-1 * clamp(28px, 4vw, 44px)) clamp(6px, 1vw, 12px);
    height:150px;
    object-fit:cover;
    border-bottom:6px solid var(--accent);
  }
  .service-card--tech .service-title{
    font-family:var(--heading);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-0.01em;
    font-size:clamp(20px, 2.2vw, 26px);
  }
  .service-card--tech .service-desc{
    font-family:var(--mono);
    font-size:13px;
    line-height:1.6;
  }
  .service-card--tech .service-meta strong{
    font-family:var(--heading);
    font-weight:800;
    font-size:clamp(24px, 2.6vw, 30px);
  }

  /* Startsidans rubriker: Bricolage 800 versaler istället för serif (per designmall) */
  .dv2 .section-head h2,
  .dv2 .kontakt-cta-title{
    font-family:var(--heading);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-0.01em;
  }
  .dv2 .kontakt-cta-title em{ font-style:normal; }
  .dv2 .uptime-stat-num{
    font-family:var(--heading);
    font-weight:500;
    letter-spacing:-0.02em;
  }
  .dv2 .uptime-stat-title{
    font-family:var(--heading);
    font-weight:700;
  }
  .dv2 .uptime-head h3{
    font-family:var(--heading);
    font-weight:700;
  }
  .dv2 .hero-feature-value{
    font-family:var(--heading);
    font-weight:700;
  }
  .dv2 .faq-item > summary{
    font-family:var(--sans);
    font-weight:600;
  }
  /* Footer — samma på alla sidor, oavsett dv2 */
  .footer-col h4{
    font-family:var(--sans);
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .abon-link-url{
    font-family:var(--mono);
    font-size:15px;
  }
  .dv2 .divider::before,
  .dv2 .divider::after{
    height:2px;
    background:rgba(250,250,250,0.28);
  }
  .dv2 .divider span{ color:var(--accent); }

  /* Undersidor i design v2 */
  .dv2 .page-intro h1{
    font-family:var(--heading);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-0.01em;
  }
  .dv2 .page-intro h1 em{
    font-style:normal;
    color:var(--accent);
  }
  .dv2 .included-title{
    font-family:var(--heading);
    font-weight:700;
  }
  .dv2 .included-title em{ font-style:normal; color:var(--accent); }
  .dv2 .card-title{
    font-family:var(--heading);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-0.01em;
    font-size:clamp(26px, 3vw, 34px);
  }
  .dv2 .example-headline{
    font-family:var(--heading);
    font-weight:700;
  }
  .dv2 .wp-build-tagline{
    font-family:var(--heading);
    font-weight:600;
  }
  .dv2 .wp-item-body strong{
    font-family:var(--heading);
    font-weight:700;
    font-size:16px;
  }
  .contact-item svg{
    width:20px; height:20px;
    opacity:.7;
    flex-shrink:0;
  }
  .dv2 .contact-item .value{
    font-family:var(--mono);
    font-size:18px;
  }
  .dv2 .anders-card .name{
    font-family:var(--heading);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-0.01em;
  }
  .dv2 .vps-includes-value{
    font-family:var(--heading);
    font-weight:800;
  }
  .dv2 .order-cta-title{
    font-family:var(--heading);
    font-weight:700;
  }
  .dv2 .tillval h3{
    font-family:var(--heading);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-0.01em;
    font-size:26px;
  }
  .dv2 .benchmark-cta-text strong{
    font-family:var(--heading);
    font-weight:700;
    font-size:19px;
  }
  .dv2 .tillval-item-size{
    font-family:var(--heading);
    font-weight:700;
    font-size:20px;
  }
  .dv2 .vps-wrap{ background:#0d0d0d; }
  .dv2 .perf-head h3{
    font-family:var(--heading);
    font-weight:700;
  }
  .dv2 .perf-stat-value{
    font-family:var(--heading);
    font-weight:700;
  }
  .dv2 .bildvalv-size{
    font-family:var(--heading);
    font-weight:800;
  }
  .dv2 .bildvalv-features-list strong{
    font-family:var(--heading);
    font-weight:700;
  }
  .vps-table tr.featured-row{
    background:rgba(225,123,48,0.07);
    box-shadow:inset 3px 0 0 var(--accent);
  }
  .vps-table tr.featured-row:hover{ background:rgba(225,123,48,0.11); }
  .vps-table .row-tag{
    display:inline-block;
    background:var(--accent);
    color:#171717;
    font-family:var(--mono);
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:3px 8px;
    border-radius:3px;
    margin-left:8px;
    vertical-align:1px;
    white-space:nowrap;
  }
  .page-terminal{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.02em;
    color:var(--accent);
    margin-bottom:22px;
  }
  .page-terminal .prompt{ color:var(--muted); }
  .page-terminal .cursor{
    display:inline-block;
    width:8px; height:15px;
    background:var(--accent);
    margin-left:3px;
    vertical-align:-2px;
    animation:blink-cursor .9s step-end infinite;
  }
  .card-billing{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:6px;
  }
  .page-hero-img{
    margin:48px 0 0;
  }
  .page-hero-img img{
    width:100%;
    height:clamp(200px, 30vw, 420px);
    object-fit:cover;
    display:block;
    border-radius:4px;
    border:1px solid var(--border);
    border-bottom:6px solid var(--accent);
  }
  .hero-logo{
    height:clamp(44px, 8vw, 118px);
    width:auto;
    display:block;
    margin-bottom:10px;
  }
  @media (max-width:480px){
    .status-right{ display:none; }
  }
  .social-row{
    display:flex;
    gap:10px;
    margin-top:16px;
  }
  .social-row a{
    width:32px; height:32px;
    border-radius:50%;
    background:rgba(250,250,250,0.08);
    border:1px solid rgba(250,250,250,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-2);
    transition:all .2s;
  }
  .social-row a svg{
    width:14px; height:14px;
    display:block;
  }
  .social-row a:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-glow);
  }

  /* Kompakt colocation-pristabell (upcoming) */
  .coloc-table th,
  .coloc-table td{
    padding:12px 12px;
    font-size:12.5px;
    white-space:nowrap;
  }