@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');

:root {
  --gold: #c99a45;
  --gold-dark: #93651f;
  --cream: #fbf5ea;
  --cream-2: #fffaf2;
  --text: #4d3518;
  --muted: #73582d;
  --soft-brown: #6f4b1d;
  --line: rgba(201, 154, 69, 0.24);
  --shadow: 0 24px 65px rgba(119, 78, 24, 0.16);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; width: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 200;
  color: var(--text);
  background-color: var(--cream);
  background-image: url('../images/site-background-4.png');
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100%;
  background-attachment: scroll;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  height: 100vh;
}
body::before { content:""; position: fixed; inset:0; pointer-events:none; z-index:-1; background:rgba(255,250,242,.28); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
main, header, footer, section { max-width: 100%; overflow-x: clip; }
h1, h2, h3, h4, p, a, span, strong, li, button { font-weight: 200; }
p, h4, .hero-copy p, .info-item p, .about-copy > p, .feature p, .price-row, .soon-card p, .contact-card p, .footer-logo p, .footer-links, .copyright { color: var(--muted); }
strong, h1, h2, h3, h4 { color: var(--text); }

.page { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  border: 1px solid rgba(201,154,69,.32); border-radius: 999px;
  padding: 13px 28px; font-weight: 200; font-size: 14px; line-height: 1;
  letter-spacing: .2px; transition: .25s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.18)), rgba(255,255,255,.24);
  color: var(--soft-brown); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 42px rgba(119,78,24,.11), inset 0 1px 0 rgba(255,255,255,.48);
}
.pill.gold { background: linear-gradient(135deg, #d9af60, #b98532); color: var(--cream); border-color: rgba(255,255,255,.18); box-shadow: 0 16px 38px rgba(184, 127, 45, .26), inset 0 1px 0 rgba(255,255,255,.24); }
.pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.soft-button { min-width: 260px; padding-inline: 34px; }
.sparkle { color: var(--gold); }

header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: rgba(255, 249, 239, .82); border-bottom: 1px solid rgba(201,154,69,.12); }
.nav { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; justify-content: center; width: 122px; line-height: 1; }
.logo img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
nav ul { display: flex; list-style: none; padding: 0; margin: 0; gap: 28px; font-size: 14px; }
nav a { position: relative; }
nav a::after { content:""; position:absolute; left:0; bottom:-9px; width:0; height:1px; background:var(--gold); transition:.25s ease; }
nav a:hover::after, nav a.active::after { width:100%; }
nav a.active { color: var(--gold-dark); }
.menu-toggle { display:none; }

.language-switcher { position: relative; width: 62px; min-width: 62px; height: 38px; font-family: var(--sans); }
.language-current { width:100%; height:100%; border:1px solid rgba(201,154,69,.32); border-radius:999px; padding:0 21px 0 13px; background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18)), rgba(255,255,255,.24); color:var(--soft-brown); font-family:var(--sans); font-size:13px; line-height:1; letter-spacing:.2px; cursor:pointer; box-shadow:0 16px 42px rgba(119,78,24,.11), inset 0 1px 0 rgba(255,255,255,.48); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); display:flex; align-items:center; justify-content:flex-start; position:relative; }
.language-current::after { content:"⌄"; position:absolute; right:9px; top:50%; transform:translateY(-58%); color:var(--gold-dark); font-family:var(--sans); font-size:12px; pointer-events:none; }
.language-current:focus { outline:none; border-color:rgba(201,154,69,.62); }
.language-menu { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px); width:66px; padding:7px; margin:0; list-style:none; border-radius:18px; border:1px solid rgba(201,154,69,.26); background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.38)), rgba(251,245,234,.78); box-shadow:0 24px 58px rgba(119,78,24,.16), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); opacity:0; visibility:hidden; pointer-events:none; transition:.18s ease; z-index:50; }
.language-switcher.open .language-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.language-option { display:block; width:100%; border-radius:999px; padding:8px 6px; color:var(--soft-brown); font-family:var(--sans); font-size:13px; line-height:1; text-align:center; transition:.18s ease; }
.language-option:hover, .language-option.active { background:linear-gradient(135deg, rgba(217,175,96,.92), rgba(185,133,50,.92)); color:var(--cream); }

.hero-wrap { position: relative; min-height: 690px; background: linear-gradient(90deg, rgba(255,250,243,.94) 0%, rgba(255,250,243,.78) 36%, rgba(255,250,243,.1) 68%), url('../images/hero-k-akademija.webp') center right / cover no-repeat; overflow: hidden; }
.hero-wrap::after { content:""; position:absolute; inset:auto 0 0 0; height:160px; background:linear-gradient(180deg, transparent, rgba(255,248,237,.85) 82%); pointer-events:none; }
.hero { min-height:690px; display:grid; grid-template-columns:minmax(0,560px) 1fr; gap:36px; align-items:center; padding:54px 0 92px; position:relative; z-index:2; }
h1,h2,h3 { font-family:var(--serif); margin:0; }
h1 { font-size:clamp(44px,6vw,76px); line-height:.98; letter-spacing:-2px; margin-bottom:28px; }
h1 span { color:var(--gold); }
.hero-copy p { max-width:500px; font-size:19px; line-height:1.65; margin:0 0 30px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.hero-art { min-height:560px; position:relative; }
.float-card { position:absolute; width:148px; min-height:128px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.16)); box-shadow:0 24px 62px rgba(119, 78, 24, 0.14), inset 0 1px 0 rgba(255,255,255,.48); border:1px solid rgba(255,255,255,.58); display:grid; place-content:center; gap:9px; text-align:center; font-size:13px; color:var(--soft-brown); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.float-card.one { top:88px; left:18px; } .float-card.two { top:248px; left:-18px; } .float-card.three { top:408px; left:18px; }

.info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:-58px; position:relative; z-index:4; }
.info-item, .service-card, .price-card, .soon-card, .contact-card { border:1px solid rgba(255,255,255,.58); background:linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.16)); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:0 26px 68px rgba(119,78,24,.14), inset 0 1px 0 rgba(255,255,255,.48); }
.info-item { padding:32px; min-height:150px; position:relative; border-radius:18px; overflow:hidden; }
.info-item::after { content:"✦"; position:absolute; right:-12px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:18px; opacity:.8; }
.info-item:last-child::after { display:none; }
.icon { color:var(--gold); font-size:32px; margin-bottom:14px; }
.info-item h4 { margin:0 0 10px; font-size:16px; }
.info-item p { margin:0; line-height:1.45; font-size:14px; }

section { padding:68px 0; position:relative; }
.section-title { text-align:center; margin-bottom:38px; }
.section-title h2, .about-copy h2 { font-size:clamp(36px,4.2vw,54px); letter-spacing:-1px; }
.section-title p { margin:12px 0 0; }
.ornament { width:260px; height:18px; margin:14px auto 0; position:relative; }
.ornament::before,.ornament::after { content:""; position:absolute; top:9px; width:110px; height:1px; background:linear-gradient(90deg, transparent, var(--gold)); }
.ornament::before { left:0; } .ornament::after { right:0; transform:scaleX(-1); }
.ornament span { position:absolute; inset:0; display:grid; place-items:center; color:var(--gold); }
.about { display:grid; grid-template-columns:430px 1fr; gap:64px; align-items:center; }
.salon-photo { min-height:470px; border-radius:0 58px 0 58px; background:linear-gradient(rgba(255,255,255,.08), rgba(160,111,42,.12)), url('/assets/images/gallery/k.akademija-salon.png') center/cover; box-shadow:var(--shadow); position:relative; overflow:visible; }
.salon-photo::after { content:"K."; position:absolute; right:-28px; bottom:-28px; width:122px; height:122px; border-radius:50%; display:grid; place-items:center; z-index:3; background:linear-gradient(145deg,#dfbc70 0%,#c89540 52%,#a97028 100%); color:var(--cream); font-family:var(--serif); font-size:56px; line-height:1; letter-spacing:-3px; box-shadow:0 18px 34px rgba(129,88,31,.22), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -10px 18px rgba(104,68,20,.10); }
.salon-photo::before { content:""; position:absolute; right:-18px; bottom:-18px; width:102px; height:102px; border-radius:50%; border:1px solid rgba(251,245,234,.82); z-index:4; pointer-events:none; }
.about-copy h2 { margin-bottom:8px; }
.about-copy .ornament { margin:0 0 28px; width:245px; }
.about-copy > p { line-height:1.75; max-width:720px; margin-bottom:38px; }
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feature { text-align:center; border-right:1px solid var(--line); padding:0 15px; }
.feature:last-child { border-right:0; }
.feature-icon { color:var(--gold); font-size:38px; margin-bottom:12px; }
.feature h4 { margin:0 0 8px; font-size:15px; }
.feature p { margin:0; font-size:12px; line-height:1.45; }

.service-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.service-card { min-height:180px; border-radius:18px; display:grid; place-items:center; text-align:center; padding:24px 14px; transition:.25s ease; }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.service-icon { color:var(--gold); font-size:54px; margin-bottom:14px; }
.service-card h3 { font-family:var(--sans); font-size:16px; line-height:1.25; }

.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start; perspective:1200px; }
.price-card { position:relative; border-radius:22px; overflow:hidden; transform:translateY(var(--float-y,0px)); transition:transform .18s linear, box-shadow .25s ease; }
.price-card:hover { box-shadow:0 30px 70px rgba(151,112,52,.18), inset 0 1px 0 rgba(255,255,255,.52); }
.price-card h3 { font-family:var(--serif); color:var(--gold-dark); font-size:27px; text-align:center; padding:28px 20px 20px; }
.price-card h3::after { content:""; display:block; width:min(76%,230px); height:1px; margin:15px auto 0; background:linear-gradient(90deg, transparent 0%, rgba(201,154,69,.20) 16%, rgba(201,154,69,.74) 50%, rgba(201,154,69,.20) 84%, transparent 100%); }
.price-row { position:relative; display:flex; justify-content:space-between; gap:18px; padding:17px 26px; font-size:14px; }
.price-row + .price-row::before { content:""; position:absolute; top:0; left:26px; right:26px; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(201,154,69,.16) 15%, rgba(201,154,69,.52) 50%, rgba(201,154,69,.16) 85%, transparent 100%); }
.price-row strong { white-space:nowrap; color:var(--text); }
.education-note { display:flex; justify-content:center; margin-top:28px; }

.gallery-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.gallery-grid img { width:100%; height:205px; object-fit:cover; border-radius:14px; box-shadow:0 24px 62px rgba(119,78,24,.14); cursor:zoom-in; transition:.25s ease; }
.gallery-grid img:hover { transform:translateY(-4px); }
.lightbox { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:26px; background:rgba(45,30,10,.58); overflow:hidden; }
.lightbox::before { content:""; position:absolute; inset:-32px; background-image:var(--lightbox-bg); background-size:cover; background-position:center; filter:blur(34px) saturate(1.08); transform:scale(1.08); opacity:.62; }
.lightbox::after { content:""; position:absolute; inset:0; background:rgba(45,30,10,.36); }
.lightbox.open { display:flex; }
.lightbox img { position:relative; z-index:2; width:auto; max-width:96vw; height:auto; max-height:92vh; object-fit:contain; border-radius:18px; box-shadow:0 35px 100px rgba(0,0,0,.35); background:transparent; }
.lightbox-close { position:fixed; top:20px; right:20px; z-index:3; width:46px; height:46px; border:1px solid rgba(251,245,234,.36); border-radius:50%; background:rgba(251,245,234,.20); color:var(--cream); font-family:var(--sans); font-size:28px; cursor:pointer; backdrop-filter:blur(12px); }

.soon-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:42px; }
.soon-card { min-height:245px; border-radius:18px; padding:42px; display:grid; align-content:center; position:relative; overflow:hidden; }
.soon-card h3 { font-size:34px; margin-bottom:16px; }
.soon-card p { line-height:1.65; max-width:430px; }
.badges { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.badge { padding:10px 14px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:var(--muted); }
.calendar-icon { position:absolute; left:44px; top:50%; transform:translateY(-50%); width:112px; height:112px; border-radius:50%; background:rgba(255,255,255,.72); display:grid; place-items:center; color:var(--gold); box-shadow:var(--shadow); }
.soon-card.event { padding-left:210px; }

.contact-layout { display:grid; grid-template-columns:310px 1fr 300px; gap:22px; align-items:stretch; }
.cta-box { background:linear-gradient(135deg,#d7aa58,#a97429); color:white; border-radius:16px; padding:36px; display:flex; flex-direction:column; justify-content:space-between; min-height:285px; box-shadow:var(--shadow); }
.cta-box h3 { font-family:var(--sans); font-size:18px; margin:0 0 16px; color:white; }
.cta-box p { line-height:1.55; margin:0; color:rgba(255,255,255,.88); }
.cta-box .pill { background:rgba(255,255,255,.82); color:#6c4b1e; align-self:flex-start; }
.contact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.contact-card { border-radius:14px; padding:26px; }
.contact-card h4 { margin:0 0 8px; font-size:14px; }
.contact-card p { margin:0; font-size:12px; line-height:1.45; }
.map { border-radius:14px; padding:0; overflow:hidden; position:relative; background:#e7eee8; min-height:285px; box-shadow:0 24px 62px rgba(119,78,24,.13); }
.map iframe { width:100%; height:100%; min-height:285px; border:0; display:block; filter:saturate(.78) sepia(.08) brightness(1.03); }
.pin { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#6b4b1f; font-size:13px; }
.pin span { width:76px; height:76px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.72); color:var(--gold); margin:0 auto 12px; box-shadow:var(--shadow); }

footer { padding:42px 0 28px; border-top:1px solid rgba(201,154,69,.15); }
.footer-grid { display:grid; grid-template-columns:240px 1fr 220px; gap:40px; align-items:end; }
.footer-logo .logo { width:160px; }
.footer-logo p { letter-spacing:3px; font-size:12px; }
.socials { display:flex; gap:16px; margin-top:18px; color:var(--gold); }
.footer-links { display:grid; grid-template-columns:repeat(2,150px); justify-content:center; gap:14px 48px; font-size:13px; }
.copyright { text-align:center; margin-top:22px; font-size:12px; }
.back-to-top { position:fixed; right:22px; bottom:22px; z-index:60; width:48px; height:48px; border-radius:50%; border:1px solid rgba(201,154,69,.32); background:linear-gradient(135deg,#d9af60,#b98532); color:var(--cream); box-shadow:0 18px 42px rgba(119,78,24,.20), inset 0 1px 0 rgba(255,255,255,.24); display:grid; place-items:center; font-family:var(--sans); font-size:20px; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px); transition:.25s ease; }
.back-to-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }


@media (max-width: 900px) {
  .hero-art,
  .info-grid {
    display: none;
  }
}

@media (max-width:1060px) {
  nav ul { gap:18px; }
  .hero-wrap { background:linear-gradient(180deg, rgba(255,250,243,.96) 0%, rgba(255,250,243,.86) 52%, rgba(255,250,243,.22) 100%), url('../images/hero-k-akademija.webp') center right 18%/cover no-repeat; }
  .hero { grid-template-columns:1fr; padding-top:30px; }
  .hero-art { min-height:260px; }
  .info-grid,.features { grid-template-columns:repeat(2,1fr); }
  .info-item::after { display:none; }
  .about { grid-template-columns:1fr; }
  .service-grid { grid-template-columns:repeat(3,1fr); }
  .price-grid,.contact-layout { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr; text-align:center; }
  .footer-logo .logo { margin:0 auto; }
  .footer-links { justify-content:center; }
  .socials { justify-content:center; }
}
@media (max-width:760px) {
  .page { width:min(100% - 24px,1180px); }
  body { overflow-x:clip; background-size: 1200px auto; background-position: top center;}
  .nav { min-height:78px; flex-wrap:wrap; gap:12px; }
  .logo { width:95px; }
  nav { position:fixed; top:78px; left:12px; right:12px; background:rgba(255,250,242,.96); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s ease; }
  nav.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  nav ul { flex-direction:column; padding:24px; gap:18px; }
  .menu-toggle { display:inline-flex; border:1px solid var(--line); background:rgba(255,255,255,.72); border-radius:999px; padding:11px 14px; font-family:var(--sans); color:var(--gold-dark); }
  .nav>.pill { display:none; }
  .language-switcher { order:4; width:60px; min-width:60px; height:36px; }
  .hero-wrap { min-height:auto; background:linear-gradient(180deg, rgba(255,250,243,.98) 0%, rgba(255,250,243,.9) 56%, rgba(255,250,243,.24) 100%), url('../images/hero-mobile.webp') center top/cover no-repeat; }
  .hero { min-height:auto; padding-bottom:54px; }
  .hero-copy { padding-left:0; }
  .hero-art { display:none; }
  .info-grid { display:none; }
  .features,.service-grid,.soon-grid,.contact-cards,.gallery-grid { grid-template-columns:1fr; }
  .about { justify-items:center; text-align:center; }
  .about-copy { text-align:center; }
  .salon-photo { width:100%; max-width:430px; }
  .about-copy .ornament { margin:0 auto 28px; }
  .about-copy > p { margin-left:auto; margin-right:auto; }
  .features { justify-items:center; }
  .feature { border-right:0; max-width:260px; }
  section { padding:48px 0; }
  .salon-photo { min-height:360px; }
  .soon-card,.soon-card.event { padding:30px; }
  .calendar-icon { position:static; transform:none; margin-bottom:20px; }
  .footer-links { grid-template-columns:1fr; }
  .contact-layout { gap:14px; }
  .lightbox { padding:12px; }
  .lightbox img { max-width:96vw; max-height:88vh; border-radius:12px; }
  .back-to-top { right:14px; bottom:14px; width:44px; height:44px; }
}

/* Font Awesome + custom Canva icon support */
.float-card i,
.icon,
.feature-icon,
.service-icon,
.contact-card > i,
.calendar-icon i,
.cta-icon,
.socials i,
.pin i {
  color: var(--gold);
  line-height: 1;
  font-style: normal;
}

.float-card i {
  display: block;
  margin: 0 auto 9px;
  font-size: 25px;
}

.icon {
  display: block;
  font-size: 31px;
  margin-bottom: 16px;
}

.feature-icon {
  display: block;
  margin: 0 auto 14px;
  font-size: 38px;
}

.service-icon {
  display: block;
  margin: 0 auto 14px;
  font-size: 52px;
}

.contact-card > i {
  display: block;
  margin-bottom: 14px;
  font-size: 25px;
}

.calendar-icon i {
  font-size: 52px;
}

.cta-icon {
  display: block;
  margin-bottom: 16px;
  font-size: 30px;
  color: rgba(255,255,255,.92);
}

.socials a {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(201,154,69,.28);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: .2s ease;
}

.socials a:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.38);
  box-shadow: 0 12px 28px rgba(119,78,24,.12);
}

.socials i {
  font-size: 15px;
}

.pin i {
  font-size: 30px;
}

.custom-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
}

.info-item .custom-icon,
.contact-card .custom-icon {
  width: 32px;
  height: 32px;
  margin: 0 0 14px;
}

.float-card .custom-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 9px;
}

.service-custom-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
}

.feature-custom-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
}