:root{
    --overlay-r:0; --overlay-g:43; --overlay-b:43; /* #002B2B */
    --brand:#00E5BF; --brand-2:#00c9a3;
    --deep:#002B2B; --text:#EAF6F6; --muted:#B7C7C7; --line:#0E4A4A; --card:#073636;
    --light-bg:#F3FBFA; --light-text:#0d2e2d; --light-muted:#3a5a59;
  }
  
  /* Base */
  body{
    margin:0; background-color:var(--deep); color:var(--text);
    font-family:Sora, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size:14px;
  }
  
  /* ===== NAVBAR ===== */
  .navbar{
    position:sticky; top:0; z-index:1000;
    background:rgba(0,43,43,.85); backdrop-filter:saturate(120%) blur(8px);
    border-bottom:1px solid var(--line);
  }
  .navbar .navbar-brand img{ height:52px }
  .navbar .nav-link{ color:#EAF6F6; font-weight:600; margin-right:.6rem; }
  .navbar .nav-link:hover{ color:var(--brand); }
  .btn-contact{
    background:var(--brand); color:#03211f; font-weight:800;
    border-radius:999px; padding:.55rem 1rem; font-size:13px;
  }
  .btn-contact:hover{ background:var(--brand-2); }
  
  /* Hamburger ikon (egen så den syns även utan navbar-dark/light) */
  .navbar-toggler{ border-color:rgba(255,255,255,.3); }
  .navbar-toggler:focus{ box-shadow:none; }
  .navbar-toggler-icon{
    background-image:
      linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
    background-size: 24px 2px, 24px 2px, 24px 2px;
    background-position: center calc(50% - 6px), center, center calc(50% + 6px);
    background-repeat:no-repeat;
    width:1.5rem; height:1.2rem;
  }
  
  /* ===== Sektioner ===== */
  section.section{ padding:72px 0; }
  .section-title{
    font-family:"Space Grotesk", Inter, sans-serif; text-transform:uppercase; letter-spacing:.6px;
    font-size:clamp(22px, 2.4vw, 30px); margin-bottom:18px;
  }
  .section-lead{ margin-bottom:26px; }
  
  /* Ljus/mörk + nodes-mönster */
  .section.dark{ color:var(--text); background:var(--deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .section.dark.with-nodes{
    background:
      radial-gradient(600px 200px at 12% 0%, rgba(14,180,147,.08), transparent 60%),
      linear-gradient(180deg, rgba(0,255,209,.04), transparent 40%),
      /* SVG-noder som pattern */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='20' cy='20' r='2' fill='%2300ffd1' fill-opacity='.22'/%3E%3Ccircle cx='100' cy='80' r='2' fill='%2300ffd1' fill-opacity='.22'/%3E%3Ccircle cx='140' cy='30' r='2' fill='%2300ffd1' fill-opacity='.22'/%3E%3Ccircle cx='60' cy='130' r='2' fill='%2300ffd1' fill-opacity='.22'/%3E%3Cpath d='M20 20 L100 80 L140 30 L60 130' stroke='%2300ffd1' stroke-opacity='.14' fill='none'/%3E%3C/svg%3E"),
      var(--deep);
    background-blend-mode:normal;
  }
  .section.light{ color:var(--light-text); background:var(--light-bg); }
  .section.light .section-title{ color:#0b2b2a; }
  .section.light .section-lead{ color:var(--light-muted); }
  .section.dark .section-title{ color:#EAF6F6; }
  .section.dark .section-lead{ color:#cfe; }
  
  /* ===== HERO ===== */
  .hero{
    position:relative; min-height:88svh; display:grid; place-items:center;
    overflow:hidden; isolation:isolate;
  }
  .hero__photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:saturate(.95) contrast(.95) brightness(.95); transform:scale(1.02); z-index:0;
  }
  .hero::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(80% 60% at 50% 25%, rgba(var(--overlay-r),var(--overlay-g),var(--overlay-b),0.75) 0%, rgba(var(--overlay-r),var(--overlay-g),var(--overlay-b),0.55) 60%, rgba(var(--overlay-r),var(--overlay-g),var(--overlay-b),0.45) 100%),
      linear-gradient(180deg, rgba(var(--overlay-r),var(--overlay-g),var(--overlay-b),0.55) 0%, rgba(var(--overlay-r),var(--overlay-g),var(--overlay-b),0.48) 35%, rgba(var(--overlay-r),var(--overlay-g),var(--overlay-b),0.22) 100%),
      linear-gradient(0deg, rgba(var(--overlay-r),var(--overlay-g),var(--overlay-b),0.45), rgba(var(--overlay-r),var(--overlay-g),var(--overlay-b),0.45));
  }
  .hero__inner{
    position:relative; z-index:2; width:min(1120px, 92vw);
    display:grid; gap:36px; grid-template-columns:1.1fr .9fr; align-items:center;
  }
  @media (max-width:980px){ .hero__inner{ grid-template-columns:1fr; gap:26px } }
  .copy h1{
    font-family:"Space Grotesk", Inter, sans-serif; font-size:clamp(28px,5vw,54px);
    line-height:1.05; margin:0;
  }
  .copy p{ color:var(--muted); margin:.6rem 0 1.2rem; max-width:60ch; }
  .cta{ display:flex; gap:12px; flex-wrap:wrap; }
  .btn-primary-hero{
    background:var(--brand); color:#03211f; font-weight:800; border-radius:999px;
    padding:.9rem 1.3rem; text-decoration:none;
  }
  .btn-primary-hero:hover{ background:var(--brand-2); }
  .btn-ghost{
    background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18);
    border-radius:999px; padding:.9rem 1.3rem; text-decoration:none;
  }
  .btn-ghost:hover{ background:rgba(255,255,255,.12); }
  
  /* ===== Tjänster ===== */
  .service-card{
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; height:100%;
  }
  .light .service-card{ background:#fff; border:1px solid #e2f1ef; }
  .service-card i{ font-size:22px; color:var(--brand); }
  .service-card h3{ margin:10px 0 6px; font-size:18px; color:inherit; }
  .service-card p{ margin:0; color:inherit; opacity:.9; }
  
  /* ===== Sprint Loop ===== */
  .loop-step{
    background:#031a1a; border:1px solid var(--line); border-radius:14px; padding:18px; height:100%;
  }
  .loop-step .step-num{
    width:34px; height:34px; border-radius:50%;
    background:rgba(0,229,191,.15); color:#9ff;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:800; margin-bottom:8px;
  }
  .loop-step h4{
    display:flex; align-items:center; justify-content:center; gap:.4rem;
    font-size:18px; color:#fff; margin:.4rem 0 .6rem;
  }
  .loop-step p{ color:#bfe; margin:0; }
  .loop-link{ color:#9ff; font-weight:700; text-decoration:underline; }
  .text-brand{ color:var(--brand); }
  
  /* ===== Community/Team ===== */
  .person{
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; height:100%; text-align:center;
  }
  .light .person{ background:#fff; border:1px solid #e2f1ef; }
  .silhouette{
    width:100%; aspect-ratio:1/1; border-radius:10px; display:grid; place-items:center;
    background:linear-gradient(180deg,#eef7f6,#dff2ef); color:#0f3b38;
  }
  .silhouette i{ font-size:64px; opacity:.6; }
  .person h5{ margin:.6rem 0 .2rem; font-size:16px; }
  .person p{ margin:0; opacity:.9; }
  
  /* ===== Kontakt ===== */
  .contact .tab-buttons{
    display:flex; gap:12px; justify-content:center; margin:18px 0 16px;
  }
  .contact .tab-btn{
    border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff;
    padding:.6rem 1rem; border-radius:999px; font-weight:700;
  }
  .contact .tab-btn.active, .contact .tab-btn:hover{
    background:var(--brand); color:#03211f; border-color:transparent;
  }
  .form-tab{
    display:none; max-width:720px; margin-inline:auto; background:var(--card);
    border:1px solid var(--line); border-radius:14px; padding:18px;
  }
  .form-tab.active{ display:block; }
  .form-tab input, .form-tab textarea{
    width:100%; background:#043030; color:#E7FAF7; border:1px solid #0B3C3C;
    border-radius:10px; padding:10px 12px; margin-bottom:12px;
  }
  .cta-button{
    background:var(--brand); color:#03211f; border:0; font-weight:800; border-radius:12px; padding:.7rem 1rem;
  }
  .cta-button:hover{ background:var(--brand-2); }
  
  /* ===== Footer ===== */
  .footer{
    background:linear-gradient(180deg, #002b2b 0%, #001F1F 100%);
    color:#fff; padding-top:48px;
  }
  /* (OBS: border-top 5px SOLID borttagen enligt önskemål) */
  .footer-link{
    display:inline-flex; align-items:center; gap:12px; color:#fff; font-weight:600; font-size:15px; text-decoration:none;
  }
  .footer-link:hover{ color:var(--brand); text-decoration:underline; }
  .footer-email{ color:#fff; font-weight:600; font-size:15px; text-decoration:none; }
  .footer-email:hover{ color:var(--brand); text-decoration:underline; }
  .service-icon{
    display:flex; align-items:center; justify-content:center; background-color:rgba(0,255,209,.1); border-radius:8px;
    width:42px; height:42px; color:var(--brand);
  }
  .copyright{
    color:#fff; margin-top:40px; border-top:1px solid var(--line); padding-top:14px;
  }
  
  /* ===== Back to top ===== */
  #backTop{
    position:fixed; right:18px; bottom:18px; z-index:1100;
    width:46px; height:46px; border-radius:999px; display:flex; align-items:center; justify-content:center;
    background:var(--brand); color:#03211f; border:0; box-shadow:0 10px 30px rgba(0,0,0,.35);
    cursor:pointer; opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
  }
  #backTop.show{ opacity:1; transform:translateY(0); }
  #backTop:hover{ background:var(--brand-2); }