:root{
    --dark:#14294a;
    --grad-a:#1d4d7a;
    --grad-b:#0c2038;
    --cyan:#33d0ff;
    --sand:#F7F5F1;
    --coral:#f2b37a;
  }
  
  /* Bas */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background: linear-gradient(to top left,var(--grad-a),var(--grad-b));
    color:var(--sand);
    font-family:'Space Grotesk', Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:inherit}
  
  /* Helpers */
  .container{max-width:1120px;margin:0 auto;padding:0 24px}
  .py-6{padding-top:5rem;padding-bottom:5rem}
  .serif{font-family:"Libre Baskerville",serif}
  .text-sand{color:var(--sand)}
  .link-sand{color:var(--sand);text-decoration:none}
  
  /* NAV (transparent, sticky) */
  .navbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.05);backdrop-filter:blur(12px) saturate(1.4);padding:.8rem 0;transition:background .3s ease, backdrop-filter .3s ease;border-bottom:1px solid rgba(255,255,255,0.08)}
  .navbar:hover{background:rgba(255,255,255,0.08);backdrop-filter:blur(14px) saturate(1.6)}
  .nav-link{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;transition:transform .2s ease, box-shadow .2s ease, background .2s ease;color:rgba(255,255,255,0.9)}
  .nav-link svg{width:26px;height:26px;opacity:.9}
  .nav-link:hover{background:rgba(0,194,255,.12);box-shadow:0 8px 22px rgba(0,194,255,.18);transform:translateY(-1px)}
  .navbar-brand span{font-weight:700;letter-spacing:.4px;color:#fff}
  .navbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent)}
  
  h1{font-weight:700;font-size:clamp(3rem,7vw,6rem)}
  
  /* Fixed logo + höger-dock (ersätter navbar) */
  .navbar{display:none !important}
  .logo-fixed{position:fixed;top:16px;left:16px;z-index:1100;display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
  .logo-fixed img{height:70px}
  
  .dock{position:fixed;top:50%;right:16px;transform:translateY(-50%);z-index:1100;display:flex;flex-direction:column;gap:10px}
  .dock-btn{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;background:transparent;transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
  .dock-btn svg{width:26px;height:26px}
  .dock-btn:hover{background:rgba(0,194,255,.12);box-shadow:0 8px 22px rgba(0,194,255,.18);transform:translateY(-1px)}
  @media (max-width: 768px){
    .dock{top:auto;bottom:16px;right:16px;transform:none;flex-direction:row;background:transparent}
  }
  
  /* HERO */
  .hero{
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    color: #F2EFEA;
    isolation: isolate;
  }
  .hero > .container{position: relative;z-index: 1;}
  .hero::before{
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(rgba(10, 40, 80, 0.88), rgba(10, 40, 80, 0.88)),
      url("happy-excited-min.jpg") center / cover no-repeat;
    opacity: 0.95;
  }
  .hero::after{
    content: "";
    position: absolute; inset: -20%; z-index: -1;
    background:
      radial-gradient(60% 60% at 75% 25%, rgba(0,194,255,.15), transparent 55%),
      radial-gradient(50% 50% at 15% 85%, rgba(10, 40, 80, 0.88), transparent 55%);
    filter: blur(30px); pointer-events: none;
  }
  .eyebrow{display:inline-block;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);font-size:.82rem;border-left:3px solid var(--cyan);padding-left:10px;margin-bottom:18px}
  h1{position:relative;line-height:1.05;margin:0 0 16px;letter-spacing:.5px}
  .hero-kicker{font-size: clamp(1rem, 1.4vw, 1.2rem);max-width:720px;color:rgba(242,239,234,.9);margin:0 0 28px}
  .cta{display:inline-block;background:var(--coral);color:#fff;padding:14px 26px;border-radius:12px;font-weight:700;text-decoration:none;transform: translateZ(0);transition: transform .2s ease, box-shadow .2s ease, background .2s ease;box-shadow:0 8px 24px rgba(255,107,74,.25)}
  .cta:hover{ transform: translateY(-2px); background:#ff8464; box-shadow:0 12px 30px rgba(255,107,74,.35) }
  .btn-gradient{background:linear-gradient(135deg,#ff9f6a,#ff7a5a);color:#fff;border:none}
  .btn-gradient:hover{filter:saturate(1.05) brightness(1.05)}
  .divider{width:110px;height:4px;background:linear-gradient(90deg,var(--cyan),transparent);border-radius:4px;margin:34px 0 0}
  
  /* Bild-kort */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:60px 0 20px}
  @media (max-width:960px){ .cards{ grid-template-columns:1fr; } }
  .image-card{position:relative;border-radius:18px;min-height:280px;overflow:hidden;isolation:isolate;background:#0a1523;transform: translateZ(0);transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;box-shadow:0 14px 34px rgba(0,0,0,.35)}
  .image-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,22,38,.1) 0%, rgba(7,22,38,.55) 55%, rgba(7,22,38,.85) 100%),var(--card-image, url('bild1.jpg')) center/cover no-repeat;z-index:-2;transition: transform .6s ease}
  .image-card::after{content:"";position:absolute;inset:0;background: linear-gradient( to top right, rgba(0,194,255,.35), transparent 60% );mix-blend-mode: screen;opacity:.6;transition: opacity .35s ease;z-index:-1}
  .image-card:hover{ transform: translateY(-8px) scale(1.02); box-shadow:0 22px 48px rgba(0,0,0,.45) }
  .image-card:hover::before{ transform: scale(1.05) }
  .image-card:hover::after{ opacity:.85 }
  .card-content{position:absolute;left:18px;right:18px;bottom:18px;color:#fff}
  .card-tag{display:inline-block;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;padding:6px 10px;border-radius:999px;background:rgba(0,194,255,.18);border:1px solid rgba(0,194,255,.45);backdrop-filter: blur(4px);margin-bottom:10px}
  .card-title{font-size:1.6rem;line-height:1.15;margin:0 0 6px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .card-sub{margin:0;color:rgba(255,255,255,.9);font-size:.98rem}
  
  /* Tjänster – vit bakgrund */
  .section-services{background:var(--sand);color:#0b1220}
  .section-services .lead{color:#2b3446}
  .service-card{height:100%;border:1px solid #e9edf3;border-radius:16px;padding:24px;transition:transform .25s ease, box-shadow .25s ease;box-shadow:0 1px 0 rgba(16,24,40,.04)}
  .service-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(16,24,40,.08)}
  .icon-pill{width:50px;height:50px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(0,194,255,.12), rgba(0,194,255,.02));border:1px solid rgba(0,194,255,.35);margin-bottom:12px}
  .icon-pill svg{width:30px;height:30px}
  
  /* Kontakt / formulär på mörk bakgrund */
  .section-muted{color:rgba(255,255,255,.8)}
  .card-glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);backdrop-filter: blur(8px);border-radius:16px}
  .form-label{color:#fff}
  .form-control,.form-select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff}
  .form-control::placeholder{color:rgba(255,255,255,.6)}
  .form-control:focus,.form-select:focus{border-color:var(--cyan);box-shadow:0 0 0 .2rem rgba(0,194,255,.15)}
  
  /* Footer */
  footer{text-align:center;padding:60px 0 40px;color:rgba(255,255,255,.6);font-size:.92rem}
  
  /* Kaxigare overrides (lätt justerade) */
  .navbar{backdrop-filter:saturate(1.2) blur(8px);padding-top:.6rem;padding-bottom:.6rem}
  .navbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(0,194,255,.6),transparent)}
  .nav-link svg{opacity:1}
  .icon-pill{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg, rgba(0,194,255,.16), rgba(0,194,255,.04));border:1px solid rgba(0,194,255,.4);margin-bottom:14px;box-shadow:0 6px 14px rgba(16,24,40,.06)}
  .icon-pill svg{width:26px;height:26px}
  
  /* Fullskärmsfotsektion (split grid) */
  .fullscreen-footer{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
  .footer-left{position:relative;background:linear-gradient(to top left,var(--grad-a),var(--grad-b));color:var(--sand);overflow:hidden}
  .footer-right{background:var(--sand);color:#0c2038}
  @media(max-width:992px){
    .fullscreen-footer{grid-template-columns:1fr;min-height:auto}
  }
  
  /* Footer formulär ljusvariant */
  .footer-grid .form-label{color:#0c2038}
  .footer-grid .form-control,.footer-grid .form-select{border:1px solid #dcdcdc;color:#0c2038;background:#fff}
  .footer-grid .form-control::placeholder{color:#6b7280}
  
  /* Footer symbol */
  .footer-symbol{position:absolute;bottom:24px;left:24px;width:72px;height:72px;opacity:.35;transition:opacity .3s ease}
  .footer-symbol:hover{opacity:.55}