/* ===========================
   Qlaimly — Modern Nordic Theme (v1.2 mobile-optimized)
   =========================== */

/* ===========================
   COLOR TOKENS
   =========================== */
   :root {
    --teal: #14B8A6;
    --teal-2: #0EA5A6;
    --blue: #60A5FA;
    --ink: #0F172A;
    --ink-2: #111827;
    --mist: #F3F4F6;
    --glass: rgba(255,255,255,0.55);
    --border: rgba(15,23,42,0.08);
  }
  
  /* ===========================
     BASE / TYPOGRAPHY
     =========================== */
  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
  
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Arial, sans-serif;
    color: #e6ecff;
    background: #0b1020;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Headings */
  .display-4, h1,h2,h3,h4,h5,h6,.fw-bold { color:#fff; font-weight:700; letter-spacing:-0.01em; }
  .text-secondary { color:#cbd5e1 !important; }
  .text-muted { color:#a8b2cc !important; }
  .gradient-text {
    background: linear-gradient(90deg,var(--teal),var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  /* Animated background */
  .bg-animated {
    position: fixed; inset: 0; z-index: -2;
    background:
      radial-gradient(60vmax 60vmax at 10% 20%, rgba(20,184,166,.25), transparent 60%),
      radial-gradient(60vmax 60vmax at 90% 10%, rgba(14,165,166,.20), transparent 60%),
      radial-gradient(70vmax 70vmax at 80% 90%, rgba(59,130,246,.20), transparent 60%),
      linear-gradient(180deg,#0b1020,#0e1225 60%, #0b1020);
    filter: saturate(110%);
    animation: bgShift 18s ease-in-out infinite alternate;
  }
  @keyframes bgShift {
    0%{background-position:0% 0%,100% 0%,100% 100%,0 0}
    100%{background-position:10% 5%,90% 0%,80% 90%,0 0}
  }
  
  /* Sections */
  .section { padding-top: 6rem; padding-bottom: 6rem; scroll-snap-align: start; }
  @media (max-width:768px){ .section{padding-top:4.75rem;padding-bottom:4.75rem;} }
  
  /* ===========================
     NAVBAR (transparent + glass)
     =========================== */
  .navbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: .75rem; padding-bottom: .75rem;
    z-index: 1100; /* över innehållet */
  }
  .navbar .nav-link {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    transition: color .3s ease, opacity .3s ease;
  }
  .navbar .nav-link:hover { color:#fff; opacity:1; }
  .navbar .navbar-brand { display:flex; align-items:center; gap:.5rem; }
  .navbar .navbar-brand span { color:#fff; font-weight:700; letter-spacing:-0.01em; }
  .navbar .navbar-brand small {
    display:block; font-weight:400; color:#a8b2cc; font-size:.75rem; line-height:1.1;
  }
  .logo {
    filter:saturate(110%) contrast(105%) drop-shadow(0 0 8px rgba(255,255,255,0.15));
    width:60px; height:auto; /* <- 60px enligt önskemål */
  }
  @media (max-width:576px){ .navbar-brand small{display:none;} }
  
  /* Glass / blur utilities (navbar background tint) */
  .bg-glass{
    background: rgba(13,20,40,.35);
    backdrop-filter: saturate(140%) blur(10px);
  }
  .blur{ backdrop-filter: saturate(130%) blur(10px); }
  .navbar.bg-glass{
    background: linear-gradient(180deg, rgba(13,20,40,.55), rgba(13,20,40,.28)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  
  /* Hamburger: vit ikon + ljus kant */
  .navbar-toggler { border-color: rgba(255,255,255,0.6); }
  .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
  .navbar-light .navbar-toggler-icon,
  .navbar .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,0.92)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  
  /* Öppnad mobilmeny: glasbakgrund + padding */
  @media (max-width: 991.98px){
    .navbar .navbar-collapse.collapse.show{
      position:absolute; top:100%; left:0; right:0;
      background: rgba(13,20,40,.9);
      backdrop-filter: blur(10px) saturate(140%);
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding: .75rem 1rem 1rem;
      z-index: 1000;
    }
    .navbar .nav-link { padding:.5rem .25rem; }
  }
  
  /* När nav är öppen: skjut ned första sektionen lite (JS sätter .nav-open på body) */
  @media (max-width: 991.98px){
    body.nav-open main > .section:first-child{ margin-top: 3.25rem; }
  }
  
  /* ===========================
     BUTTONS
     =========================== */
  .btn-teal {
    position:relative;
    background: linear-gradient(90deg, var(--teal) 0%, var(--blue) 100%);
    border:none;
    color:#fff;
    font-weight:600;
    letter-spacing:0.3px;
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
    box-shadow:0 0 18px rgba(20,184,166,0.45);
    border-radius:12px;
    padding:.65rem 1.25rem;
    font-size:1rem;
  }
  .btn-teal:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 25px rgba(96,165,250,0.6), 0 10px 30px rgba(0,0,0,.25);
    filter: brightness(1.05);
  }
  .btn-outline-light.bg-glass {
    border:1px solid rgba(255,255,255,0.4);
    background:rgba(255,255,255,0.05);
    color:#e0faff;
    transition:all .3s ease;
    border-radius:12px;
  }
  .btn-outline-light.bg-glass:hover {
    background: linear-gradient(90deg, rgba(20,184,166,0.18), rgba(96,165,250,0.18));
    border-color: rgba(255,255,255,0.6);
    color:#fff;
  }
  @media (max-width:576px){
    .btn-teal, .btn-outline-light.bg-glass{
      font-size:.9rem; padding:.55rem 1rem;
    }
  }
  
  /* ===========================
     CARDS / GLASS ELEMENTS
     =========================== */
  .card-neo {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border:1px solid var(--border);
    border-radius:20px;
    color:#e6ecff;
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .card-neo:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25); }
  .glass {
    background: linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.20));
    backdrop-filter: blur(10px);
  }
  .glass-tile {
    border-radius:24px; overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    padding:1rem;
  }
  .shadow-xl { box-shadow:0 30px 100px rgba(0,0,0,.45); }
  
  /* ===========================
     HERO / DEVICE MOCKUP
     =========================== */
  .device-frame {
    border-radius:34px;
    padding:16px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--border);
    overflow:hidden;
    transform:translateZ(0);
  }
  .device-frame img {
    width:100%;
    height:auto;
    border-radius:24px;
    display:block;
  }
  @media (max-width:768px){
    .device-frame{ margin-top:2rem; }
  }
  
  /* På mobil: låt sektioner med vh-100 bli auto-höga (förhindrar överlapp) */
  @media (max-width: 576px){
    .section.vh-100{
      min-height: 100vh;
      height: auto !important;
      overflow: visible;
    }
    /* Hjälp hero-bildens position */
    .device-frame{ margin-top: 1rem; }
  }
  
  /* ===========================
     ICONS / BADGES
     =========================== */
  .icon-badge{font-size:1.4rem}
  .check{display:inline-block; width:1.25rem; margin-right:.5rem; color:#8ff2e5}
  
  /* Lucide gradient fallback */
  .gradient-icon i{
    width:42px; height:42px; stroke-width:1.8; stroke:url(#icon-gradient);
    filter: drop-shadow(0 0 6px rgba(20,184,166,0.4));
  }
  .icon-badge.gradient-icon i{ stroke:#60A5FA; } /* fallback */
  svg defs{ pointer-events:none; }
  
  /* ===========================
     STEPPER & STATUS BAR
     =========================== */
  .stepper {
    display:grid; gap:22px; list-style:none; padding:0; margin:0 auto; max-width:980px;
  }
  @media (min-width:992px){ .stepper{ grid-template-columns:repeat(3,1fr); } }
  .stepper-num {
    font-weight:800;
    font-size:3rem;
    background:linear-gradient(90deg,var(--teal),var(--blue));
    -webkit-background-clip:text;
    color:transparent;
    line-height:1;
    margin-bottom:.25rem;
  }
  @media (max-width:576px){ .stepper-num{font-size:2.5rem;} }
  .status-bar {
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  }
  .status-pill {
    padding:.5rem .8rem; border-radius:999px; font-weight:600; font-size:.9rem;
    background:rgba(255,255,255,.06); color:#e7f9ff;
    border:1px solid rgba(255,255,255,.18);
  }
  .status-pill.active {
    background:linear-gradient(90deg, rgba(20,184,166,.25), rgba(96,165,250,.25));
    color:#001015;
  }
  
  /* ===========================
     SOLUTION & CAREERS BACKGROUNDS
     =========================== */
  .solution-bg, .careers-bg {
    position:relative;
    color:#fff;
    overflow:hidden;
    padding-top:8rem;
    padding-bottom:8rem;
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
  }
  .solution-bg { background-image:url("assets/hero.jpg"); }
  .careers-bg { background-image:url("assets/careers-min.jpg"); }
  .solution-bg::before, .careers-bg::before {
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,20,40,.80) 0%, rgba(8,18,38,.88) 70%, rgba(6,14,30,.92) 100%);
    mix-blend-mode:multiply;
    z-index:0;
  }
  .solution-bg .container, .careers-bg .container { position:relative; z-index:1; }
  
  @media (max-width:768px){
    .solution-bg, .careers-bg{
      padding-top:5rem; padding-bottom:6rem;
      background-attachment:scroll;
    }
  }
  /* Parallax-säkring i mobil */
  @media (max-width:768px){
    .parallax{ transform:none !important; }
  }
  
  /* Extra säkerhetsmarginaler mellan sektioner i mobil */
  @media (max-width:576px){
    #problem.section{ padding-bottom: 5.5rem; }
    #how.section{ padding-bottom: 6rem; }
    #security.section{ padding-top: 6rem; }
  }
  
  /* ===========================
     SECURITY GRID (bubblor)
     =========================== */
  .security-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:28px;
    justify-items:center;
    align-items:start;
  }
  .security-item { text-align:center; transition:transform .3s ease, filter .3s ease; }
  .security-item h6 {
    margin-top:.8rem; font-weight:600; color:#e8f7ff;
    font-size:.9rem; letter-spacing:.2px;
  }
  .bubble {
    display:flex; align-items:center; justify-content:center;
    width:120px; height:120px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 0 10px rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.25);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .security-item:hover .bubble {
    transform:translateY(-4px);
    box-shadow:0 8px 30px rgba(96,165,250,.35);
    border-color:rgba(96,165,250,.25);
  }
  .secure-icon-img {
    display:block; width:70px; height:auto; opacity:.95;
    filter:drop-shadow(0 0 8px rgba(20,184,166,.25));
    transition:transform .35s ease, filter .35s ease, opacity .25s ease;
  }
  .security-item:hover .secure-icon-img {
    transform:scale(1.08);
    filter:drop-shadow(0 0 14px rgba(96,165,250,.5));
    opacity:1;
  }
  @media (max-width:768px){
    .bubble{width:100px;height:100px;border-radius:20px;}
    .secure-icon-img{width:60px;}
  }
  @media (max-width:480px){
    .security-grid{grid-template-columns:repeat(2,1fr);}
    .bubble{width:90px;height:90px;}
    .secure-icon-img{width:50px;}
  }
  
  /* ===========================
     CONTACT & FORMS (floating labels, chips)
     =========================== */
  .contact-card {
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  }
  
  /* Chips */
  .chips-group{ display:flex; flex-wrap:wrap; gap:.5rem; }
  .chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.55rem .75rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.25);
    color:#e6f7ff;
    background:rgba(255,255,255,.06);
    cursor:pointer; user-select:none;
    transition:all .2s ease;
  }
  .btn-check:checked + .chip{
    background:linear-gradient(90deg, var(--teal) 0%, var(--blue) 100%);
    color:#001015; border-color:transparent;
    box-shadow:0 0 16px rgba(96,165,250,.4);
  }
  @media (max-width:576px){ .chip{ padding:.5rem .65rem; font-size:.9rem; } }
  
  /* Floating labels */
  .float-group{ position:relative; }
  .float-group .form-control, .float-group textarea.form-control{
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.22);
    border-radius:14px; padding:1.1rem .95rem .9rem .95rem; color:#e8eeff;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .float-group .form-control::placeholder{ color:transparent; }
  .float-group label{
    position:absolute; left:.9rem; top:.95rem; color:#9fb0d1; pointer-events:none;
    transition: all .15s ease; background:transparent; padding:0 .25rem; font-size:.9rem;
  }
  .float-group .form-control:focus{
    outline:none; border-color:rgba(96,165,250,.8);
    box-shadow:0 0 0 3px rgba(96,165,250,.25), 0 0 18px rgba(20,184,166,.15);
  }
  .float-group .form-control:not(:placeholder-shown),
  .float-group .form-control:focus{ padding-top:1.6rem; }
  .float-group .form-control:not(:placeholder-shown) + label,
  .float-group .form-control:focus + label{ top:.35rem; font-size:.75rem; color:#a7f3d0; }
  
  /* ===========================
     UTILITIES
     =========================== */
  .badge-soft {
    display:inline-block;
    padding:.35rem .65rem;
    font-size:.75rem;
    letter-spacing:.4px;
    border-radius:999px;
    color:#d9fff7;
    background:rgba(20,184,166,.14);
    border:1px solid rgba(20,184,166,.25);
  }
  @media (max-width:576px){ .badge-soft{font-size:.7rem;padding:.3rem .55rem;} }