:root{
  --bg:#0a0f1f; --card:#0f1733; --muted:#a8b1c9; --text:#eaf0ff;
  --brand:#e7352e; --brand-2:#ff6a5b; --accent:#2b6cb0; --ring:rgba(43,108,176,0.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1000px 600px at 10% 10%, #16224a 0%, #0b1020 60%, #090d1a 100%);
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(11,16,32,0.6);
  border-bottom:1px solid rgba(43,108,176,0.25);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; color:var(--text)}
.logo{height:48px; width:auto; max-width:280px}
.nav{display:flex; gap:18px}
.nav a{padding:8px 10px; border-radius:10px}
.nav a:hover{background:rgba(43,108,176,0.15)}
.menu-toggle{display:none; background:none; border:none; font-size:24px; color:var(--text)}

.hero{position:relative; padding:50px 0 30px; overflow:hidden;}
.hero-gif{background:url('assets/warehouse-bg.gif') center / cover no-repeat}
.hero-overlay{position:absolute; inset:0; background:rgba(0,0,0,0.5); z-index:0}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center}
.hero-copy h1{font-size:44px; line-height:1.1; margin:0 0 10px}
.hero-copy p{color:var(--muted); max-width:60ch}
.hero-cta{display:flex; gap:12px; margin-top:18px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:14px; border:1px solid rgba(43,108,176,0.4); font-weight:600}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff}
.btn-ghost{background:transparent; color:var(--accent)}
.btn:hover{box-shadow:0 0 0 3px var(--ring) inset}

.card{background:linear-gradient(180deg, rgba(18,25,54,0.9), rgba(12,18,40,0.9)); border:1px solid rgba(43,108,176,0.25); border-radius:18px; padding:20px}
.hero-card{box-shadow: 0 10px 50px rgba(0,0,0,0.35)}
.card-title{margin:0 0 10px}

.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
.grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:10px}

.calculator label, .contact-form label{display:flex; flex-direction:column; gap:6px; font-weight:600}
input, select, textarea{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(43,108,176,0.35);
  border-radius:12px;
  padding:12px 14px;
  color:var(--text);
  outline:none;
}
textarea#inventory_text{width:100%; background:rgba(255,255,255,0.04)}
input:focus, select:focus, textarea:focus{box-shadow:0 0 0 3px var(--ring)}
.est-line{display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.03); border-radius:12px; padding:10px 12px; border:1px dashed rgba(43,108,176,0.35)}
.muted{color:var(--muted)}

.split{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; padding:40px 0}
.split-card{border-left:3px solid rgba(43,108,176,0.25)}
.steps{margin:8px 0 0 0}
.steps li{margin:6px 0}

.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.card h2{margin:0 0 6px}
.note{margin-top:16px; background:rgba(255,255,255,0.04); border:1px solid rgba(43,108,176,0.25); padding:16px; border-radius:12px}

.pad{padding:26px 0}

.site-footer{border-top:1px solid rgba(43,108,176,0.25); margin-top:40px; padding:22px 0 30px; background:linear-gradient(0deg, rgba(9,13,26,0.9), rgba(9,13,26,0.2))}
.footer-inner{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer-links{display:flex; gap:14px}
.copyright{margin-top:10px; color:var(--muted); font-size:14px}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid, .grid-2, .split{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .menu-toggle{display:inline-block}
}
@media (max-width: 600px){
  .cards{grid-template-columns:1fr}
  .hero-copy h1{font-size:34px}
  .logo{height:36px; max-width:180px}
}

/* Survey UI */
.survey-rooms{display:grid;gap:10px}
.survey-room{border:1px solid rgba(43,108,176,0.25);border-radius:12px;padding:10px;background:rgba(255,255,255,0.02)}
.survey-room-title{font-weight:700;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.survey-grid{display:grid;gap:8px;grid-template-columns:1fr 120px 100px;align-items:center}
.survey-row{display:contents}
.survey-row .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.survey-row input.qty{width:100%;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(43,108,176,0.35);color:var(--text)}
@media (max-width:700px){.survey-grid{grid-template-columns:1fr 90px 80px}}


/* Improved select visibility */
select {
  background: rgba(255,255,255,0.9);
  color: #111;
}

select option {
  color: #111;
  background: #fff;
}


/* === Services offset layout === */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.services-grid article:nth-child(4),
.services-grid article:nth-child(5) {
  justify-self: center;
}
@media(max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .services-grid article:nth-child(4),
  .services-grid article:nth-child(5) {
    justify-self: stretch;
  }
}



/* Mobile: 1 per row by default */
@media (max-width: 600px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* Tablet: 2 per row */
@media (min-width: 601px) and (max-width: 900px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
}

/* Desktop: 6-column trick to center the bottom two between the top three */
@media (min-width: 901px){
  .services-grid{
    grid-template-columns: repeat(6, 1fr);
    align-items: stretch;
    align-items: flex-start;
}
  
  /* Top row (3 items) */
  .services-grid article:nth-child(1){ grid-column: 1 / span 2; }
  .services-grid article:nth-child(2){ grid-column: 3 / span 2; }
  .services-grid article:nth-child(3){ grid-column: 5 / span 2; }
  /* Bottom row (2 items), centered under the gaps */
  .services-grid article:nth-child(4){ grid-column: 2 / span 2; }
  .services-grid article:nth-child(5){ grid-column: 4 / span 2; }
}



/* Mobile */
@media (max-width: 600px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
}

/* Desktop - use flex to center bottom row and size it a bit larger */
@media (min-width: 901px){
  .services-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: 2.8rem 2.8rem;
  }
  .services-grid article{ flex: 0 1 30%; /* top row */
  }
  .services-grid article:nth-child(n+4){
    flex: 0 1 35%; /* bottom row a bit larger */
  }
  
}



/* Mobile */
@media (max-width: 600px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
}

/* Desktop */
@media (min-width: 901px){
  .services-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: 3rem 3rem; /* större mellanrum */
  }
  /* top row */
  .services-grid article{ flex: 0 1 30%;
  }
  /* bottom row */
  .services-grid article:nth-child(n+4){
    flex: 0 1 32%; /* smalare än innan */
    margin-top: 1rem; /* vertikal separation */
  }
  
}





/* === Services grid: original height, center bottom row === */
@media (min-width: 901px){
  .services-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start; /* do not stretch cards */
    gap: 2rem;
  }
  .services-grid article{ flex: 0 1 calc(33.333% - 2rem);
     /* natural height */
  }
  .services-grid article:nth-child(4),
  .services-grid article:nth-child(5){
    margin-left:auto;
    margin-right:auto;
  }
}


/* === Services grid: center bottom row tighter spacing === */
@media (min-width: 901px){
  .services-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: 2rem 2rem;
    align-items:flex-start;
  }
  .services-grid article{
    flex: 0 1 calc(33.333% - 2rem);
  }
  /* bottom row: narrower gap between */
  .services-grid article:nth-child(4),
  .services-grid article:nth-child(5){
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Center RUT-avdrag box while keeping full width */
.rut-section{
  display:flex;
  justify-content:center;
}
.rut-section .rut-box{
  flex:1;
  max-width: 100%;
}