/* dinbackup.dk — Garbæk IT Design System (Technical / Professional)
   --------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root{
  /* Brand DNA (shared) */
  --brand-blue-950:#0b1630;
  --brand-blue-900:#0f1e3d;
  --brand-blue-700:#1e3a8a;
  --brand-blue-600:#2446b5;
  --brand-blue-500:#3b82f6;
  --brand-blue-300:#93c5fd;

  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;

  --gray-900:#0f172a;
  --gray-700:#334155;
  --gray-600:#475569;
  --gray-300:#cbd5e1;
  --gray-200:#e5e7eb;
  --gray-100:#f1f5f9;
  --gray-50:#f8fafc;

  /* Site tone (dinbackup) */
  --primary:var(--brand-blue-700);
  --primary-strong:var(--brand-blue-900);
  --primary-soft:rgba(59,130,246,0.10);

  --bg: #ffffff;
  --surface:#ffffff;
  --surface-2:var(--gray-50);
  --text:var(--gray-900);
  --muted:var(--gray-600);
  --border:rgba(15,23,42,0.12);

  --radius:8px;
  --radius-sm:6px;
  --shadow:0 10px 25px rgba(15,23,42,0.08);
  --shadow-sm:0 6px 16px rgba(15,23,42,0.08);
  --max:1100px;

  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;
  --space-6:34px;
  --space-7:48px;

  --ring: 0 0 0 4px rgba(59,130,246,0.22);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.section{padding:var(--space-7) 0}
.hr{height:1px;background:var(--border);border:0;margin:var(--space-6) 0}

/* Headings */
h1,h2,h3{line-height:1.15;margin:0 0 var(--space-3)}
h1{font-size:clamp(30px,4vw,44px);letter-spacing:-0.02em}
h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.01em}
h3{font-size:18px}
p{margin:0 0 var(--space-4);color:var(--muted)}
.lead{font-size:1.05rem;color:var(--gray-700)}

/* Header / Nav */
.site-header{
  background:linear-gradient(180deg, rgba(15,30,61,0.06), rgba(15,30,61,0));
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;color:var(--text);
}
.brand-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--primary);color:#fff;font-weight:800;
}
.nav-links{display:flex;gap:18px;flex-wrap:wrap}
.nav-links a{color:var(--gray-700);font-weight:600}
.nav-links a:hover{color:var(--text)}

/* Hero */
.hero{
  padding:var(--space-7) 0;
  background:linear-gradient(135deg, rgba(30,58,138,0.10), rgba(59,130,246,0.03));
}
.hero .hero-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:var(--space-6);
  align-items:center;
}
@media (max-width: 860px){
  .hero .hero-grid{grid-template-columns:1fr}
}

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:var(--space-5);
}
.card.soft{
  background:var(--surface-2);
  box-shadow:none;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
  text-decoration:none !important;
}
.btn:focus{outline:none;box-shadow:var(--ring)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--primary);
  color:#fff;
}
.btn-primary:hover{background:var(--brand-blue-600)}
.btn-secondary{
  background:transparent;
  border-color:rgba(30,58,138,0.35);
  color:var(--primary);
}
.btn-secondary:hover{
  background:var(--primary-soft);
  border-color:rgba(30,58,138,0.55);
}
.btn-ghost{
  background:transparent;
  color:var(--gray-700);
  border-color:var(--border);
}
.btn-ghost:hover{background:var(--gray-50)}

/* Badges */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.02em;
  border:1px solid transparent;
}
.badge-success{background:rgba(16,185,129,.12);color:#065f46;border-color:rgba(16,185,129,.22)}
.badge-warning{background:rgba(245,158,11,.14);color:#7a4b00;border-color:rgba(245,158,11,.24)}
.badge-info{background:rgba(59,130,246,.12);color:#1e3a8a;border-color:rgba(59,130,246,.22)}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 980px){
  .pricing-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 520px){
  .pricing-grid{grid-template-columns:1fr}
}
.pricing-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;
}
.pricing-card.featured{
  border-color:rgba(30,58,138,0.55);
  box-shadow:0 14px 34px rgba(30,58,138,0.14);
}
.price{
  font-size:28px;font-weight:800;color:var(--text);
}
.price small{font-size:13px;font-weight:700;color:var(--muted)}
.ul{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px
}
.ul li{color:var(--gray-700)}
.ul li::before{
  content:"";
  display:inline-block;width:10px;height:10px;margin-right:10px;
  border-radius:3px;background:rgba(16,185,129,.35);
}

/* Forms */
.input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
}
.input:focus, select:focus, textarea:focus{box-shadow:var(--ring);border-color:rgba(59,130,246,0.45)}
.help{font-size:13px;color:var(--muted)}

/* Footer (shared skeleton, local voice) */
.site-footer{
  margin-top:var(--space-7);
  background:var(--brand-blue-900);
  color:rgba(255,255,255,0.86);
  padding:44px 0 22px;
}
.site-footer a{color:rgba(255,255,255,0.92)}
.footer-main{
  max-width:var(--max);margin:0 auto;padding:0 18px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:22px;
}
.footer-col h4{
  margin:0 0 10px;
  color:#fff;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.footer-col p, .footer-col a{color:rgba(255,255,255,0.80)}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-brand{
  max-width:var(--max);margin:22px auto 0;padding:14px 18px 0;
  border-top:1px solid rgba(255,255,255,0.10);
  text-align:center;
  font-size:12.5px;
  opacity:0.9;
}
.footer-brand a{font-weight:800}

/* Small utilities */
.grid-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px}
@media (max-width: 860px){.grid-2{grid-template-columns:1fr}}
.kpi{display:flex;gap:12px;align-items:flex-start}
.kpi b{font-size:18px}
.kpi span{color:var(--muted)}

/* --- Additions for dinbackup.dk index.html --- */

/* Sticky header (optional, feels more SaaS/pro) */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}

/* Mobile nav */
.nav-toggle{ display:none; }
.nav-mobile{
  padding: 10px 0 16px;
  display:none;
  border-top: 1px solid var(--border);
}
.nav-mobile a{
  display:block;
  padding: 10px 0;
  color: var(--gray-700);
  font-weight: 700;
}
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-mobile{ display:block; }
}

/* Hero badges + actions + list */
.hero-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 18px 0 16px;
}
.hero-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.hero-list li{
  color: var(--gray-700);
  padding-left: 26px;
  position: relative;
}
.hero-list li::before{
  content:"";
  width: 10px; height: 10px;
  border-radius: 3px;
  background: rgba(59,130,246,.30);
  position:absolute;
  left: 0; top: 7px;
}

/* KPI dots in the side card */
.kpi-dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  margin-top: 4px;
  background: rgba(59,130,246,.35);
}
.kpi-dot.ok{ background: rgba(16,185,129,.45); }
.kpi-dot.info{ background: rgba(59,130,246,.45); }
.kpi-dot.warn{ background: rgba(245,158,11,.45); }

/* FAQ */
.faq{ display:grid; gap: 12px; }
details > summary{
  cursor: pointer;
  list-style: none;
}
details > summary::-webkit-details-marker{ display:none; }
details[open]{
  border-color: rgba(59,130,246,.35);
}
details p{ margin-top: 10px; }


/* ---------------------------------------------------------------
   Additions: icons.svg integration + small layout glue
   (icons.svg sits in same folder as index.html)
---------------------------------------------------------------- */

/* Icons */
.icon{
  width:24px;
  height:24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--primary);
  flex: 0 0 auto;
}
.icon.sm{ width:20px; height:20px; }
.icon.muted{ color: var(--muted); }
.icon.ok{ color: var(--success); }
.icon.warn{ color: var(--warning); }
.icon.danger{ color: var(--danger); }

/* Sticky header + mobile menu */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}
.nav-toggle{ display:none; }
.nav-mobile{
  padding: 10px 0 16px;
  display:none;
  border-top: 1px solid var(--border);
}
.nav-mobile a{
  display:block;
  padding: 10px 0;
  color: var(--gray-700);
  font-weight: 700;
}
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-mobile{ display:block; }
}

/* Hero badges + actions + list */
.hero-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 18px 0 16px;
}
.hero-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.hero-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--gray-700);
}

/* Optional: a small note under hero list */
.hero-note{ margin-top: 14px; }

/* Feature cards: keep icon + spacing */
.feature-card .icon{ margin-bottom: 10px; }

/* Inline actions row */
.inline-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* Mini spec in hero side card */
.mini-spec-title{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  color: var(--gray-700);
  margin-bottom: 10px;
}
.spec-ul li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.spec-ul li::before{ display:none; } /* disable default green squares in .ul */

/* Input row with icon */
.input-row{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  padding: 0 10px;
  background:#fff;
}
.input-row:focus-within{
  box-shadow: var(--ring);
  border-color: rgba(59,130,246,0.45);
}
.input-row .input{
  border:0;
  box-shadow:none !important;
  padding:12px 0;
}

/* Steps */
.step-card p{ margin-bottom: 0; }
.step-head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 10px;
}
.step-head h3{ margin: 0; }

/* FAQ accordion look */
.faq{ display:grid; gap: 12px; }
details > summary{
  cursor: pointer;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
details > summary::-webkit-details-marker{ display:none; }

.faq-q{
  display:flex;
  align-items:center;
  gap:10px;
}

/* rotate chevron when open */
.faq-chevron{
  transform: rotate(90deg);
  transition: transform .15s ease;
  opacity: .7;
}
details[open] .faq-chevron{ transform: rotate(270deg); }

details p{ margin-top: 10px; }

/* --- Pricing uniformity patch --- */

/* Make all pricing cards behave like a structured block */
.pricing-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Lock the top area so it doesn’t jump */
.plan-top{
  min-height: 120px; /* justér 110-140 afhængigt af din font */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Stronger price alignment */
.price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.price .amount{
  font-size: 42px; /* match din stil */
  font-weight: 900;
  letter-spacing: -0.02em;
}
.price .currency{
  font-weight: 800;
}
.price small{
  color: var(--muted);
  font-weight: 700;
}

/* Ensure same “subline” height and wrapping */
.plan-sub{
  margin: 0;
  color: var(--gray-700);
  min-height: 22px; /* ens linjehøjde */
}

/* Make feature list take remaining space so CTA aligns */
.plan-ul{
  margin-top: 16px;
  flex: 1 1 auto;
  display: grid;
  gap: 10px;
}

/* Remove any pseudo bullets from .ul in this context */
.plan-ul li::before{ display: none; }

/* Use consistent icon/bullet for all plan items (optional) */
.plan-ul li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.plan-ul li::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(16,185,129,.35);
  margin-top: 6px;
  flex: 0 0 auto;
}

/* CTA always sits at bottom */
.plan-cta{
  margin-top: 18px;
}

/* Featured card shouldn’t change spacing/layout */
.pricing-card.featured{
  transform: none; /* hvis du har en scale/transform et sted */
}