:root{
    --bg: #1b1d21;
    --bg-soft: #232529;
    --card: #2a2d32;
    --card-hover: #313438;
    --line: #393c41;
    --text: #eceef0;
    --text-dim: #9aa0a8;
    --accent: #d6452f;
    --accent-dim: #b53a27;
    --accent-soft: rgba(214,69,47,0.12);
    --gold: #c9a24a;
    --radius: 14px;
    --maxw: 1180px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      linear-gradient(rgba(22,23,26,0.60), rgba(22,23,26,0.60)),
      url('../images/section-bg-gray.jpg') center 30% / cover fixed no-repeat;
    background-color: var(--bg);
    color: var(--text);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  h1,h2,h3{font-weight:700; letter-spacing:-0.02em;}
  ::selection{background:var(--accent); color:#fff;}

  /* ===== Side vertical work-hours bar ===== */
  .side-hours{
    position:fixed;
    left:14px;
    top:50%;
    transform:translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size:12px;
    letter-spacing:0.12em;
    color:var(--text-dim);
    z-index:40;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .side-hours span.dot{
    width:6px;height:6px;border-radius:50%;background:var(--accent);
    writing-mode:initial;
  }
  @media (max-width:900px){ .side-hours{display:none;} }

  /* ===== Header ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(27,29,33,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0;
    gap:24px;
  }
  .logo{
    font-size:21px; font-weight:800; letter-spacing:-0.03em;
    display:flex; align-items:baseline; gap:2px;
  }
  .logo span{color:var(--accent);}
  nav.main-nav{
    display:flex; gap:8px; align-items:center;
    flex:1;
    justify-content:center;
  }
  nav.main-nav button{
    background:none; border:1px solid transparent; color:var(--text-dim);
    font-size:14.5px; font-weight:600; padding:9px 16px; border-radius:30px;
    cursor:pointer; transition:.2s; font-family:inherit;
  }
  nav.main-nav button:hover{ color:var(--text); border-color:var(--line); }
  nav.main-nav button.active{ color:#fff; background:var(--accent); }
  .header-phone{
    display:flex; align-items:center; gap:8px;
    font-weight:700; font-size:15px; white-space:nowrap;
  }
  .header-phone svg{width:17px;height:17px; stroke:var(--accent);}
  .menu-toggle{
    display:none; background:none; border:1px solid var(--line); border-radius:8px;
    width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .menu-toggle svg{width:20px; height:20px; stroke:var(--text);}
  .mobile-nav{
    display:none; flex-direction:column; gap:4px; padding:14px 0 18px;
    border-top:1px solid var(--line);
  }
  .mobile-nav.open{ display:flex; }
  .mobile-nav button{
    background:none; border:none; color:var(--text); text-align:left;
    font-size:15px; font-weight:600; padding:12px 4px; cursor:pointer; font-family:inherit;
    border-bottom:1px solid var(--line);
  }
  .mobile-nav a.header-phone{ padding:12px 4px; }
  @media (max-width:880px){
    nav.main-nav{display:none;}
    .header-inner{justify-content:space-between;}
    .menu-toggle{display:flex;}
    .header-phone{display:none;}
  }

  /* ===== Hero ===== */
  .hero-bg{
    position:relative;
    border-bottom:3px solid var(--accent);
    overflow:hidden;
  }
  .hero-bg::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(900px 420px at 85% -10%, var(--accent-soft), transparent 60%);
    pointer-events:none;
  }
  .hero{
    position:relative;
    z-index:2;
    padding:88px 0 80px;
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--accent); font-weight:700; font-size:13px;
    letter-spacing:0.1em; text-transform:uppercase; margin-bottom:18px;
  }
  .hero h1{
    font-family: Impact, 'Arial Narrow Bold', 'Haettenschweiler', sans-serif;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:-0.01em;
    font-size:clamp(36px, 5.6vw, 64px);
    max-width:780px;
    line-height:1.02;
    margin-bottom:18px;
    text-shadow:0 2px 18px rgba(0,0,0,0.45);
  }
  .hero p.lead{
    color:var(--text-dim); font-size:17px; max-width:560px; margin-bottom:40px;
  }

  .choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  @media (max-width:760px){ .choice-grid{grid-template-columns:1fr;} }

  .field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
  @media (max-width:560px){ .field-grid{ grid-template-columns:1fr; } }

  .consent-row{
    display:flex; align-items:flex-start; gap:10px; margin:6px 0 22px;
    font-size:13px; color:var(--text-dim); line-height:1.5;
  }
  .consent-row input[type=checkbox]{
    width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--accent); cursor:pointer;
  }
  .consent-row a{ color:var(--accent); font-weight:600; cursor:pointer; }
  .consent-row a:hover{ text-decoration:underline; }

  .legal-section{ max-width:760px; }
  .legal-section h3{ font-size:18px; margin:28px 0 10px; color:var(--gold); }
  .legal-section h3:first-of-type{ margin-top:0; }
  .legal-section p, .legal-section li{ color:var(--text-dim); font-size:14.5px; margin-bottom:10px; }
  .legal-section ul{ padding-left:20px; }

  .cookie-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:var(--card); border-top:1px solid var(--line);
    padding:18px 22px; display:none; align-items:center; gap:20px; flex-wrap:wrap;
    box-shadow:0 -8px 24px rgba(0,0,0,0.35);
  }
  .cookie-banner.show{ display:flex; }
  .cookie-banner p{ flex:1; min-width:240px; font-size:13.5px; color:var(--text-dim); margin:0; }
  .cookie-banner a{ color:var(--accent); cursor:pointer; font-weight:600; }
  .cookie-actions{ display:flex; gap:10px; }
  .cookie-actions button{
    font-family:inherit; font-weight:700; font-size:13px; border-radius:8px; padding:10px 18px; cursor:pointer; border:1px solid var(--line);
  }
  .cookie-accept{ background:var(--accent); color:#fff; border:none; }
  .cookie-decline{ background:transparent; color:var(--text-dim); }

  .hero-swirl{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
  .cta-pill{
    display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff;
    font-weight:800; text-transform:uppercase; letter-spacing:0.04em; font-size:13px;
    padding:15px 26px; border-radius:6px; margin-top:8px; cursor:pointer; border:none; transition:.2s;
  }
  .cta-pill:hover{ background:var(--accent-dim); }

  .choice-card{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px 28px;
    cursor:pointer;
    transition:.25s;
    overflow:hidden;
  }
  .choice-card:hover{
    background:var(--card-hover);
    border-color:var(--accent-dim);
    transform:translateY(-3px);
  }
  .choice-card .tag{
    font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold);
    margin-bottom:10px; display:block;
  }
  .choice-card h3{font-size:23px; margin-bottom:10px;}
  .choice-card p{color:var(--text-dim); font-size:14.5px; margin-bottom:18px;}
  .choice-card .cta-row{
    display:flex; align-items:center; gap:8px; font-weight:700; color:var(--accent); font-size:14.5px;
  }
  .choice-card .icon-badge{
    width:46px;height:46px;border-radius:12px;
    background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
  }
  .choice-card .icon-badge svg{width:24px;height:24px; stroke:var(--accent);}

  /* ===== Generic content section ===== */
  .section{
    padding:64px 0;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .section.visible{display:block; animation:fadeIn .35s ease;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  .section .back-link{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--text-dim); font-size:14px; font-weight:600; margin-bottom:28px; cursor:pointer;
  }
  .section .back-link:hover{color:var(--text);}
  .section h2{font-size:clamp(26px,3.2vw,36px); margin-bottom:16px;}
  .section .intro-text{color:var(--text-dim); font-size:15.5px; max-width:680px; margin-bottom:36px;}

  /* life insurance intro copy block */
  .life-copy{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 30px; margin-bottom:36px;
  }
  .life-copy p{color:var(--text-dim); font-size:15px; margin-bottom:10px;}
  .life-copy p:last-child{margin-bottom:0;}
  .life-copy strong{color:var(--gold);}

  /* ===== Three-option grid (ostala osiguranja) ===== */
  .other-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:10px;
  }
  @media (max-width:820px){ .other-grid{grid-template-columns:1fr;} }
  .other-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:24px; cursor:pointer; transition:.2s;
  }
  .other-card:hover{border-color:var(--accent-dim); background:var(--card-hover);}
  .other-card h4{font-size:18px; margin-bottom:8px;}
  .other-card p{color:var(--text-dim); font-size:14px; margin-bottom:14px;}
  .other-card .cta-row{color:var(--accent); font-weight:700; font-size:13.5px;}

  /* ===== Forms ===== */
  .form-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:32px; max-width:680px;
  }
  .form-card h3{font-size:19px; margin-bottom:6px;}
  .form-card .form-sub{color:var(--text-dim); font-size:14px; margin-bottom:26px;}
  .field-group{margin-bottom:22px;}
  .field-group label{
    display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--text);
  }
  .field-group .opt{font-weight:400; color:var(--text-dim); font-size:12.5px;}
  input[type=text], input[type=email], input[type=tel]{
    width:100%; background:var(--bg-soft); border:1px solid var(--line); color:var(--text);
    padding:13px 14px; border-radius:9px; font-size:14.5px; font-family:inherit;
  }
  input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;}

  .upload-choice{
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;
  }
  .radio-pill{
    border:1px solid var(--line); background:var(--bg-soft); border-radius:30px;
    padding:8px 16px; font-size:13.5px; cursor:pointer; color:var(--text-dim); font-weight:600;
  }
  .radio-pill.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

  .doc-slot{
    border:1.5px dashed var(--line); border-radius:11px; padding:18px;
    display:flex; align-items:center; gap:14px; margin-bottom:12px;
    background:var(--bg-soft);
  }
  .doc-slot .doc-icon{
    width:38px;height:38px; border-radius:9px; background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .doc-slot .doc-icon svg{width:19px;height:19px;stroke:var(--accent);}
  .doc-slot .doc-text{flex:1;}
  .doc-slot .doc-text .name{font-weight:700; font-size:14px;}
  .doc-slot .doc-text .status{font-size:12.5px; color:var(--text-dim);}
  .doc-slot .doc-text .status.ok{color:#5fbf7d;}
  .doc-slot-buttons{display:flex; gap:8px;}
  .mini-btn{
    border:1px solid var(--line); background:transparent; color:var(--text);
    padding:8px 13px; border-radius:8px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
    white-space:nowrap;
  }
  .mini-btn:hover{border-color:var(--accent); color:var(--accent);}
  input[type=file]{display:none;}

  .submit-btn{
    width:100%; background:var(--accent); border:none; color:#fff; font-weight:700;
    font-size:15px; padding:15px; border-radius:10px; cursor:pointer; margin-top:8px;
    transition:.2s; font-family:inherit;
  }
  .submit-btn:hover{background:var(--accent-dim);}
  .form-note{font-size:12px; color:var(--text-dim); margin-top:14px; text-align:center;}
  .success-msg{
    display:none; background:rgba(95,191,125,0.12); border:1px solid #5fbf7d;
    border-radius:10px; padding:16px 18px; font-size:14px; margin-top:18px; color:#8fdca8;
    font-weight:600;
  }
  .success-msg.show{display:block;}

  /* camera modal */
  .camera-modal{
    position:fixed; inset:0; background:rgba(10,11,12,0.92); z-index:100;
    display:none; align-items:center; justify-content:center; padding:20px;
  }
  .camera-modal.open{display:flex;}
  .camera-box{
    background:var(--card); border-radius:16px; padding:18px; max-width:520px; width:100%;
    border:1px solid var(--line);
  }
  .camera-box h4{font-size:15px; margin-bottom:4px;}
  .camera-box .cam-hint{font-size:12.5px; color:var(--text-dim); margin-bottom:14px;}
  .video-frame{
    position:relative; border-radius:12px; overflow:hidden; background:#000; aspect-ratio:4/3;
  }
  .video-frame video, .video-frame canvas{width:100%; height:100%; object-fit:cover;}
  .scan-guide{
    position:absolute; inset:10%; border:2px solid var(--accent); border-radius:10px;
    box-shadow:0 0 0 999px rgba(0,0,0,0.35);
    pointer-events:none;
  }
  .scan-guide.detected{ border-color:#5fbf7d; }
  .scan-status{
    position:absolute; bottom:10px; left:0; right:0; text-align:center;
    font-size:12.5px; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.6);
  }
  .camera-actions{display:flex; gap:10px; margin-top:16px;}
  .camera-actions .mini-btn{flex:1; text-align:center; padding:11px;}

  /* ===== Office / footer ===== */
  .office{
    padding:0; border-bottom:1px solid var(--line);
  }
  .office-img-wrap{ position:relative; }
  .office-img-wrap img{ width:100%; height:420px; object-fit:cover; filter:saturate(0.92) brightness(0.85); }
  .office-img-wrap::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(27,29,33,0.92) 0%, rgba(27,29,33,0.15) 45%, rgba(27,29,33,0.05) 100%);
  }
  .office-caption{
    position:absolute; left:0; right:0; bottom:0; padding:34px 28px;
    max-width:var(--maxw); margin:0 auto;
  }
  .office-caption .wrap{padding:0;}
  .office-caption h3{font-size:22px; margin-bottom:6px;}
  .office-caption p{color:var(--text-dim); font-size:14.5px; display:flex; align-items:center; gap:8px;}
  .office-caption svg{width:15px;height:15px; stroke:var(--accent); flex-shrink:0;}

  footer{padding:46px 0 36px;}
  .footer-grid{
    display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; margin-bottom:36px;
  }
  @media (max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:28px;} }
  .footer-grid h5{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:14px;}
  .footer-grid .f-logo{font-size:19px; font-weight:800; margin-bottom:12px;}
  .footer-grid .f-logo span{color:var(--accent);}
  .footer-grid p.small{color:var(--text-dim); font-size:13.5px; line-height:1.7;}
  .footer-grid ul{list-style:none;}
  .footer-grid li{margin-bottom:9px; font-size:13.5px; color:var(--text-dim);}
  .footer-grid li a:hover{color:var(--text);}
  .footer-bottom{
    border-top:1px solid var(--line); padding-top:20px; font-size:12.5px; color:var(--text-dim);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }

  /* ===== Floating buttons ===== */
  .floating-buttons{
    position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:14px; z-index:60;
  }
  .fab{
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,0.35); cursor:pointer; transition:.2s;
  }
  .fab:hover{transform:translateY(-3px) scale(1.04);}
  .fab svg{width:25px;height:25px;}
  .fab.call{background:var(--accent); }
  .fab.call svg{stroke:#fff; fill:none;}
  .fab.whatsapp{background:#25D366;}
  .fab.whatsapp svg{fill:#fff;}

  @media (max-width:600px){
    .wrap{padding:0 18px;}
    .hero{padding:48px 0 40px;}
  }

/* ===== Trust section ===== */
.trust-section{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:36px 0;
}
.trust-label{
  text-align:center; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-dim); margin-bottom:22px;
}
.trust-badges{
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px 24px; margin-bottom:22px;
}
.trust-badge{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--text-dim);
}
.trust-badge svg{ width:16px; height:16px; stroke:var(--accent); }
.trust-pills{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
}
.trust-pill{
  display:flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--line); border-radius:30px;
  padding:8px 14px; font-size:13px; color:var(--text-dim); font-weight:600;
}
.trust-pill svg{ width:15px; height:15px; stroke:var(--accent); flex-shrink:0; }

/* ===== Form progress steps ===== */
.form-steps{
  display:flex; align-items:center; gap:0;
  margin:0 0 28px; padding:18px 20px;
  background:var(--bg-soft); border-radius:12px;
  border:1px solid var(--line);
}
.form-step{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--text-dim); flex:1;
  justify-content:center;
}
.form-step span{
  width:26px; height:26px; border-radius:50%;
  background:var(--line); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; flex-shrink:0;
}
.form-step.active{ color:var(--text); }
.form-step.active span{ background:var(--accent); color:#fff; }
.form-step.done span{ background:#5fbf7d; color:#fff; }
.form-step.done{ color:var(--text-dim); }
.form-step-line{
  height:2px; background:var(--line); flex:0 0 24px;
}
@media (max-width:480px){
  .form-step{ font-size:11px; gap:5px; }
  .form-step-line{ flex:0 0 10px; }
}





/* ===== Trust tagline (replaces badge list) ===== */
.trust-tagline{
  display:flex; align-items:center; gap:14px;
  max-width:680px; margin:0 auto 22px;
  font-size:15px; font-weight:600; color:var(--text);
  line-height:1.55; text-align:center; justify-content:center;
}



/* ensure all content sits above background layers */
header{ position: relative; z-index: 50; }
.section{ position: relative; z-index: 1; }
.side-hours{ z-index: 40; }
.floating-buttons{ z-index: 60; }
.camera-modal{ z-index: 100; }
.cookie-banner{ z-index: 200; }

/* ===== Required field emphasis ===== */
.req{
  font-weight:700;
  color:var(--accent);
  font-size:12.5px;
}

/* ===== Form validation error box ===== */
.form-error-msg{
  display:none;
  background:rgba(214,69,47,0.13);
  border:1.5px solid var(--accent);
  border-radius:10px;
  padding:16px 18px;
  font-size:14px;
  margin:18px 0 6px;
  color:#f0a294;
  font-weight:600;
}
.form-error-msg.show{ display:block; }

/* highlight missing/invalid fields */
.field-missing{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 1px var(--accent);
}
.doc-slot.field-missing{
  border-color:var(--accent) !important;
  border-style:solid !important;
}

/* ===== Auto policy toggle buttons ===== */
.toggle-choice{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;
}
.toggle-btn{
  flex:1; min-width:140px;
  background:var(--bg-soft); border:1.5px solid var(--line); color:var(--text-dim);
  padding:13px 18px; border-radius:10px; font-size:14.5px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:.2s;
}
.toggle-btn:hover{ border-color:var(--accent-dim); color:var(--text); }
.toggle-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }