/* ===== PROTOCOLLO MONTENEGRO – Static Site CSS ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@300;400;500;600;700&display=swap');

/* ---------- Reset & Variables ---------- */
:root {
  --navy: #0B1120;
  --card-bg: #151E32;
  --gold: #C6A87C;
  --gold-dark: #9E8357;
  --gold-gradient: linear-gradient(135deg, #C6A87C 0%, #9E8357 100%);
  --text-light: #F3F4F6;
  --text-grey: #9CA3AF;
  --text-dark: #4B5563;
  --bg-light: #F9FAFB;
  --bg-section: #F3F4F6;
  --border: #E5E7EB;
  --success: #059669;
  --danger: #DC2626;
  --info: #3B82F6;
  --radius: 16px;
  --shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--navy);
  background:#fff;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; height:auto; display:block; }
a { color:var(--gold); text-decoration:none; transition:color .2s; }
a:hover { color:var(--gold-dark); }

h1,h2,h3,h4 {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:700;
  line-height:1.2;
}

.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.container--narrow { max-width:900px; margin:0 auto; padding:0 24px; }

/* ---------- Utility ---------- */
.text-gold  { color:var(--gold); }
.text-white { color:#fff; }
.text-grey  { color:var(--text-grey); }
.text-center{ text-align:center; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mt-4 { margin-top:2rem; }
.mb-4 { margin-bottom:2rem; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block;
  padding:16px 40px;
  border-radius:50px;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.5px;
  cursor:pointer;
  transition:all .3s;
  border:none;
  text-align:center;
}

.btn--gold {
  background:var(--gold-gradient);
  color:var(--navy);
  box-shadow:0 4px 15px rgba(198,168,124,.3);
}
.btn--gold:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 25px rgba(198,168,124,.45);
  color:var(--navy);
}

.btn--outline {
  background:transparent;
  border:2px solid var(--gold);
  color:var(--gold);
}
.btn--outline:hover {
  background:var(--gold);
  color:var(--navy);
}

/* ---------- Navigation ---------- */
.site-nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(11,17,32,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(198,168,124,.12);
  transition:background .3s;
}

.site-nav__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  height:72px;
}

.site-nav__logo img { height:36px; width:auto; }

.site-nav__links { display:flex; gap:28px; align-items:center; list-style:none; }
.site-nav__links a {
  color:var(--text-light);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.3px;
  transition:color .2s;
}
.site-nav__links a:hover { color:var(--gold); }

.site-nav__cta {
  padding:10px 24px !important;
  font-size:.82rem !important;
}

.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text-light); margin:5px 0; transition:all .3s; border-radius:2px; }

/* ---------- Hero ---------- */
.hero {
  position:relative;
  background:var(--navy);
  padding:160px 0 100px;
  overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 30% 20%, rgba(198,168,124,.06) 0%, transparent 70%);
}

.hero__sub {
  font-family:'Manrope',sans-serif;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}

.hero h1 {
  font-size:clamp(2.2rem,5vw,3.8rem);
  color:#fff;
  max-width:800px;
  margin-bottom:24px;
}

.hero__desc {
  font-size:1.1rem;
  color:var(--text-grey);
  max-width:640px;
  line-height:1.8;
  margin-bottom:36px;
}

/* ---------- Sections ---------- */
.section { padding:100px 0; }
.section--dark { background:var(--navy); color:var(--text-light); }
.section--light { background:var(--bg-light); }
.section--white { background:#fff; }

.section__sub {
  font-family:'Manrope',sans-serif;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}

.section h2 {
  font-size:clamp(1.8rem,4vw,2.8rem);
  margin-bottom:20px;
}

.section__desc {
  font-size:1.05rem;
  color:var(--text-dark);
  max-width:680px;
  margin-bottom:48px;
  line-height:1.8;
}
.section--dark .section__desc { color:var(--text-grey); }

/* ---------- Cards ---------- */
.grid { display:grid; gap:28px; }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.card {
  background:#fff;
  border-radius:var(--radius);
  padding:36px;
  box-shadow:var(--shadow);
  transition:all .3s;
  border:1px solid var(--border);
}
.card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:var(--gold);
}

.card--dark {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.card--dark:hover { border-color:var(--gold); background:rgba(255,255,255,.06); }

.card__icon {
  width:50px; height:50px;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy);
  color:var(--gold);
  border-radius:12px;
  font-size:1.2rem;
  margin-bottom:20px;
}

.card h3 {
  font-size:1.3rem;
  margin-bottom:12px;
}

.card p {
  font-size:.95rem;
  color:var(--text-dark);
  line-height:1.7;
}
.card--dark p { color:var(--text-grey); }

/* ---------- Checklist ---------- */
.checklist { list-style:none; }
.checklist li {
  padding:8px 0;
  padding-left:28px;
  position:relative;
  font-size:.95rem;
}
.checklist li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--success);
  font-weight:700;
}

.checklist--red li::before { content:'✕'; color:var(--danger); }

/* ---------- Info Box ---------- */
.info-box {
  background:var(--bg-light);
  border-left:4px solid var(--gold);
  padding:20px 24px;
  border-radius:0 var(--radius) var(--radius) 0;
  margin:16px 0;
}

/* ---------- FAQ Accordion ---------- */
.faq-category { margin-bottom:40px; }
.faq-category h3 {
  font-size:1.1rem;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  color:var(--text-dark);
  margin-bottom:16px;
  padding-bottom:8px;
  border-bottom:2px solid var(--border);
}

.faq-item {
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color .3s;
}
.faq-item:hover { border-color:var(--gold); }

.faq-question {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 24px;
  cursor:pointer;
  font-weight:600;
  font-size:.95rem;
  background:#fff;
  transition:all .2s;
}
.faq-question:hover { color:var(--gold); }

.faq-icon {
  font-size:1.1rem;
  transition:transform .3s;
  color:var(--gold);
  flex-shrink:0;
  margin-left:16px;
}

.faq-item.active .faq-icon { transform:rotate(45deg); }

.faq-answer {
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  background:var(--bg-light);
}
.faq-item.active .faq-answer { max-height:600px; }

.faq-answer__inner {
  padding:20px 24px;
  font-size:.92rem;
  color:var(--text-dark);
  line-height:1.8;
}

/* ---------- Calculator ---------- */
.calc-card {
  background:#fff;
  border-radius:var(--radius);
  padding:48px;
  box-shadow:var(--shadow-lg);
  margin-top:-80px;
  position:relative;
  z-index:2;
}

.calc-value {
  font-family:'Cormorant Garamond',serif;
  font-size:3rem;
  font-weight:700;
  color:var(--navy);
  text-align:center;
  margin:16px 0 8px;
}

.calc-slider {
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:8px;
  border-radius:4px;
  background:var(--border);
  outline:none;
  margin:24px 0;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--gold);
  cursor:pointer;
  box-shadow:0 0 10px rgba(198,168,124,.5);
}
.calc-slider::-moz-range-thumb {
  width:30px; height:30px;
  border-radius:50%;
  background:var(--gold);
  cursor:pointer;
  border:none;
  box-shadow:0 0 10px rgba(198,168,124,.5);
}

.calc-result {
  border-radius:var(--radius);
  padding:28px;
  text-align:center;
}
.calc-result--it { background:#FEF2F2; border:1px solid #FECACA; }
.calc-result--me { background:#F0FDF4; border:1px solid #BBF7D0; }
.calc-result--hybrid { background:#EFF6FF; border:2px solid var(--info); transform:scale(1.03); }

.calc-result h4 { font-size:1rem; margin-bottom:8px; }
.calc-result .amount {
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;
  font-weight:700;
}

/* ---------- Comparison Table ---------- */
.compare-card {
  border-radius:var(--radius);
  padding:36px;
  text-align:center;
  border:1px solid var(--border);
  transition:all .3s;
  background:#fff;
}
.compare-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.compare-card--winner {
  border:2px solid var(--gold);
  box-shadow:0 20px 50px rgba(198,168,124,.15);
  transform:scale(1.03);
}
.compare-card--winner:hover { transform:scale(1.05); }

.compare-badge {
  display:inline-block;
  background:var(--gold-gradient);
  color:var(--navy);
  padding:6px 16px;
  border-radius:50px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:16px;
}

/* ---------- Timeline ---------- */
.timeline { position:relative; padding:40px 0; }
.timeline::before {
  content:'';
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:2px;
  background:var(--border);
  transform:translateX(-50%);
}

.timeline-step {
  position:relative;
  padding:32px 0;
}

.timeline-number {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:48px; height:48px;
  background:var(--gold-gradient);
  color:var(--navy);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;
  font-weight:700;
  z-index:2;
  box-shadow:0 4px 12px rgba(198,168,124,.3);
}

.timeline-content {
  width:calc(50% - 60px);
  background:#fff;
  border-radius:var(--radius);
  padding:32px;
  border-left:4px solid var(--gold);
  box-shadow:var(--shadow);
}

.timeline-step:nth-child(odd) .timeline-content { margin-left:auto; margin-right:calc(50% + 40px); }
.timeline-step:nth-child(even) .timeline-content { margin-left:calc(50% + 40px); }

/* ---------- CTA Banner ---------- */
.cta-banner {
  background:var(--navy);
  padding:80px 0;
  text-align:center;
}
.cta-banner h2 { color:#fff; font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:12px; }
.cta-banner p { color:var(--text-grey); margin-bottom:32px; font-size:1rem; }

/* ---------- Footer ---------- */
.site-footer {
  background:var(--navy);
  border-top:1px solid rgba(198,168,124,.12);
  padding:48px 0 32px;
  text-align:center;
}
.site-footer__logo img { height:28px; margin:0 auto 20px; }
.site-footer p { color:var(--text-grey); font-size:.85rem; }
.site-footer a { color:var(--gold); }

/* ---------- Responsive ---------- */
@media(max-width:900px) {
  .site-nav__links { display:none; }
  .site-nav__links.open {
    display:flex;
    flex-direction:column;
    position:absolute;
    top:72px; left:0; right:0;
    background:var(--navy);
    padding:24px;
    gap:16px;
    border-bottom:1px solid rgba(198,168,124,.15);
  }
  .nav-toggle { display:block; }
  .nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .nav-toggle.open span:nth-child(2) { opacity:0; }
  .nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  .hero { padding:120px 0 60px; }
  .hero h1 { font-size:2rem; }
  .section { padding:60px 0; }
  .grid--3 { grid-template-columns:1fr; }
  .grid--2 { grid-template-columns:1fr; }

  .timeline::before { left:24px; }
  .timeline-number { left:24px; }
  .timeline-content { width:calc(100% - 72px); margin-left:60px !important; margin-right:0 !important; }

  .calc-card { padding:24px; margin-top:-40px; }
  .calc-value { font-size:2.2rem; }

  .compare-card--winner { transform:none; }
  .compare-card--winner:hover { transform:translateY(-5px); }
}