@import url('/style.css');

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
}

:root {
  --blue: #3485ff;
  --blue-dk: #0865e7;
  --blue-lt: rgba(64, 146, 255, .14);
  --dark: #eef6ff;
  --gray: #a9b9d2;
  --light: #07142f;
  --white: #0d1d40;
  --radius: 8px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .26);
}

html { background: #06122c; }
body {
  color: var(--dark);
  background:
    radial-gradient(circle at 82% 6%, rgba(21, 104, 255, .28), transparent 25rem),
    linear-gradient(145deg, #06122c 0%, #081a3d 48%, #07142e 100%);
  /*font-family: 'Manrope', sans-serif;*/
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image: linear-gradient(rgba(139, 187, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 187, 255, .12) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

.container { max-width: 1160px; }
section { padding: 104px 0; }
.section-title, .hero-title, .pmu-hero h1, .voucher-hero h2, .how-steps h2 {
  font-family: 'Montserrat', sans-serif; letter-spacing: 0; text-transform: uppercase;
}
.section-title { font-size: clamp(2rem, 4vw, 3.3rem); color: var(--dark); }
.section-sub, .hero-desc { color: var(--gray); }

header {
  background: rgba(5, 17, 42, .82); border-bottom: 1px solid rgba(104, 166, 255, .2);
  box-shadow: none; backdrop-filter: blur(16px);
}
.logo { color: #fff; letter-spacing: 1px; font-family: 'Montserrat', sans-serif; }
.logo::first-letter { color: #58a2ff; }
nav a, .mobile-nav a { color: #bfd1ed; border-radius: 6px; }
nav a:hover, .mobile-nav a:hover { color: #fff; background: rgba(53, 132, 255, .18); }
.nav-master, .mobile-nav .nav-master { color: #6babff; }
.mobile-nav { background: #081938; border-color: rgba(104, 166, 255, .2); }
.hamburger iconify-icon { color: #fff; }

.btn, .btn-submit { border-radius: 6px; font-family: 'Manrope', sans-serif; letter-spacing: .02em; }
.btn-primary, .btn-submit { background: #2c7cf4; box-shadow: 0 8px 22px rgba(26, 115, 255, .28); }
.btn-primary:hover, .btn-submit:hover { background: #58a2ff; }
.btn-dark { background: transparent; color: #dcecff; border: 1px solid rgba(112, 173, 255, .52); }
.btn-dark:hover { background: rgba(57, 132, 255, .16); }
.btn-outline { color: #dcecff; border-color: rgba(112, 173, 255, .52); }

#domov, #storitve, #rezervacija, #pmu-masterclass { background: transparent; }
#domov { padding-top: 154px; }
.hero-badge, .hero-badge-item {
  color: #bcd8ff; background: rgba(19, 56, 112, .62); border-color: rgba(96, 161, 255, .36); border-radius: 6px;
}
.hero-title { font-size: clamp(2.7rem, 5vw, 4.5rem); color: #f3f8ff; line-height: 1.07; }
.hero-title span, .hero-stat strong { color: #56a1ff; }
.hero-stat small { color: var(--gray); }
.hero-img { border-radius: 8px; border: 1px solid rgba(121, 177, 255, .38); box-shadow: 20px 20px 0 rgba(24, 94, 203, .19), var(--shadow); }
.hero-card { color: var(--dark); border: 1px solid rgba(118, 177, 255, .44); border-radius: 6px; background: #0d2757; }
.hero-card-icon { background: rgba(51, 136, 255, .18); }

.service-card, .stat-card, .booking-form-wrap, .booking-steps, .pmu-focus, .pmu-option,
.pmu-details > div, .pricing-table, .pricing-cta, .voucher-form, .benefit-card, .how-steps {
  color: var(--dark); background: rgba(11, 33, 76, .86); border: 1px solid rgba(101, 162, 255, .22); border-radius: 8px; box-shadow: var(--shadow);
}
.service-card { overflow: hidden; }
.service-card:hover { box-shadow: 0 20px 46px rgba(0, 0, 0, .34); }
.service-img { filter: saturate(.88) contrast(1.06); }
.service-price { color: #e8f3ff; background: rgba(5, 19, 49, .84); border-radius: 5px; }
.service-body h3, .contact-info h3, .booking-form-wrap h3 { color: #f1f7ff; }
.service-body p, .contact-item span, .step span { color: var(--gray); }
.btn-service { color: #77b5ff; background: rgba(49, 133, 255, .14); border-radius: 5px; }
.btn-service:hover { background: #2c7cf4; }
.stat-card { background: rgba(16, 45, 97, .74); }
.stat-card strong { color: #f3f8ff; }

#cenik, #darilni-boni, #o-nas { background: rgba(2, 13, 34, .28); }
.pricing-table { overflow: hidden; }
.pricing-head { background: linear-gradient(115deg, #0a51bb, #267cf5 56%, #59a8ff); }
.pricing-table details { border-color: rgba(125, 179, 255, .16); }
.pricing-table summary:hover, .pricing-table details[open] summary { background: rgba(48, 127, 242, .15); }
.summary-icon { border-radius: 6px; background: linear-gradient(135deg, #1768d8, #55a3ff); }
.summary-count, .summary-from small, .pricing-item-time { color: var(--gray); }
.summary-name, .pricing-item-name { color: #eaf4ff; }
.summary-from strong, .pricing-item-price { color: #63a9ff; }
.pricing-item { border-color: rgba(125, 179, 255, .13); }
.pricing-check { color: #8fc4ff; background: rgba(49, 133, 255, .16); }
.pricing-cta { background: linear-gradient(125deg, rgba(12, 42, 92, .95), rgba(18, 81, 164, .72)); }
.pricing-cta p { color: #b4cae7; }

.gallery-item { border-radius: 6px; border: 1px solid rgba(125, 179, 255, .25); }
.gallery-overlay { background: rgba(5, 24, 62, .68); }
.about-list li, .about-list iconify-icon { color: #b9d0ed; }
.about-img { border-radius: 8px; border: 1px solid rgba(125, 179, 255, .28); }

.form-group label { color: #dbeaff; }
.form-group input, .form-group select, .form-group textarea {
  color: #eaf4ff; background: rgba(3, 16, 43, .72); border-color: rgba(120, 181, 255, .3); border-radius: 5px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #58a2ff; box-shadow: 0 0 0 3px rgba(66, 151, 255, .15); }
.contact-icon { color: #78b6ff; background: rgba(46, 130, 246, .16); border-radius: 6px; }
.step-num, .how-step .step-circle { background: #287bf4; }

.voucher-hero, .voucher-form-wrap { background: linear-gradient(135deg, rgba(15, 62, 130, .76), rgba(8, 30, 73, .9)); border-radius: 8px; }
.voucher-hero h2, .voucher-form-wrap h3, .voucher-amount-group label { color: #f2f8ff; }
.voucher-hero p, .voucher-form-wrap .voucher-form-heading p, .voucher-note p { color: #b8cce9; }
.voucher-form { background: rgba(5, 24, 57, .76); }
.amount-input-wrap input { color: #70b0ff; background: #071a3c; border-color: rgba(120, 181, 255, .3); border-radius: 6px; }
.amount-btn { color: #bddaff; background: rgba(71, 145, 246, .14); border-radius: 5px; }
.amount-btn.is-active { background: #287bf4; }
.voucher-note { background: rgba(49, 128, 244, .12); border-radius: 6px; }

footer { background: #030d22; border-top: 1px solid rgba(120, 181, 255, .2); }
footer h4, .footer-contact-item strong { color: #ecf5ff; }
.footer-award, .social-link { background: rgba(72, 144, 245, .16); border-radius: 5px; }
.social-link:hover { background: #287bf4; }

@media (max-width: 768px) {
  section { padding: 72px 0; }
  #domov { padding-top: 112px; }
  .hero-title { font-size: 2.5rem; }
  .hero-img { box-shadow: 12px 12px 0 rgba(24, 94, 203, .19), var(--shadow); }
}