/* ===========================
   Qlaimly — Modern Nordic Theme (v1.1 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}
  }
  
  /* Section padding */
  .section { padding-top: 6rem; padding-bottom: 6rem; scroll-snap-align: start; }
  @media (max-width:768px){ .section{padding-top:4.5rem;padding-bottom:4.5rem;} }
  
  /* ===========================
     NAVBAR
     =========================== */
  .navbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: .75rem; padding-bottom: .75rem;
  }
  .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:50px; height:auto;
  }
  @media (max-width:576px){ .navbar-brand small{display:none;} }
  
  /* ===========================
     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;}
  }
  
  /* ===========================
     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:5rem;
      background-attachment:scroll;
    }
  }
  
  /* ===========================
     SECURITY GRID
     =========================== */
  .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
     =========================== */
  .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));
  }
  .float-group label { font-size:.9rem; }
  
  /* ===========================
     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;} }
  
/* ==== FIX PACK: restore glass navbar + chips + floating labels ==== */

/* 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);
  }
  
  /* Chips (rounded “pill” tags) */
  .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);
  }
  
  /* Floating labels (full block, robust på mörk bakgrund) */
  .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;
  }
  
  /* (valfritt) Lite mindre chips i mobil för bättre radbrytning */
  @media (max-width:576px){
    .chip{ padding:.5rem .65rem; font-size:.9rem; }
  }