@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bg0:#04050b;
  --bg1:#070a14;

  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.74);

  --accent1:#ff2bd6;
  --accent2:#7a5cff;
  --accent3:#00f5d4;

  /* glass tuned for "real" frosted look */
  --glass-fill1: rgba(255,255,255,.12);
  --glass-fill2: rgba(255,255,255,.05);
  --glass-border: rgba(255,255,255,.20);
  --glass-inset: rgba(255,255,255,.08);

  --shadow: 0 26px 90px rgba(0,0,0,.60);
  --shadow-soft: 0 14px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
a.link{text-decoration:underline;}
a.link.danger{color:#ffd1d1;}

.page{min-height:100%; position:relative;}

/* Fullscreen background stage (media + animated aurora fallback) */
.bg-stage{
  position:fixed; inset:0;
  z-index:-4;
  overflow:hidden;
  background:#02030a;
}
.bg-stage::before,
.bg-stage::after{
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(700px 520px at 25% 25%, rgba(255,43,214,.26), transparent 60%),
    radial-gradient(900px 600px at 75% 35%, rgba(122,92,255,.24), transparent 62%),
    radial-gradient(820px 560px at 55% 80%, rgba(0,245,212,.16), transparent 62%);
  filter: blur(22px) saturate(140%);
  opacity:.95;
  transform: translate3d(0,0,0);
  animation: aurora 14s ease-in-out infinite alternate;
}
.bg-stage::after{
  opacity:.55;
  filter: blur(40px) saturate(150%);
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}
@keyframes aurora{
  0%{ transform: translate(-4%, -3%) scale(1.02); }
  50%{ transform: translate(3%, 2%) scale(1.05); }
  100%{ transform: translate(6%, -2%) scale(1.08); }
}

.bg-layer{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 1.35s ease;
}
.bg-layer.active{opacity:1;}
.bg-layer .img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.06);
  filter: saturate(1.12) contrast(1.08) brightness(.92);
}
.bg-layer video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.04);
  filter: saturate(1.12) contrast(1.08) brightness(.90);
}

/* cinematic overlay */
.bg-vignette{
  position:fixed; inset:0;
  z-index:-3;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10), transparent 45%),
    radial-gradient(ellipse at 70% 55%, rgba(255,43,214,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.78));
  pointer-events:none;
}

/* subtle film grain */
.bg-grain{
  position:fixed; inset:-25%;
  z-index:-2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.22;
  pointer-events:none;
  transform: rotate(7deg);
}

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 16px 74px;
}

/* PREMIUM GLASS (less grey, more frosted) */
.glass{
  position:relative;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--glass-fill1), var(--glass-fill2));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(255,255,255,.18), transparent 62%),
    radial-gradient(700px 220px at 100% 0%, rgba(255,255,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
  pointer-events:none;
  opacity:.95;
}
.glass::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
  pointer-events:none;
}

/* tighter shadows for small elements */
.glass.soft{ box-shadow: var(--shadow-soft); }

.card{
  padding: 18px;
}

.topbar{
  position:sticky;
  top:0;
  margin: 16px auto 0;
  max-width: 1180px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  z-index:5;
}

.brand{
  display:flex; gap:10px; align-items:center;
}
.logo-dot{
  width:12px;height:12px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2)),
              linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 0 26px rgba(255,43,214,.32);
}
.brand strong{
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing:.2px;
  font-size: 18px;
  line-height: 1.1;
}
.brand .muted{ font-size:12px; }

.topbar-nav{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.topbar-nav a{
  padding: 8px 10px;
  border-radius: 14px;
  opacity:.94;
  border: 1px solid transparent;
}
.topbar-nav a:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
.topbar-nav a.active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

.muted{color:var(--muted);}

/* HERO */
.hero{
  margin-top: 28px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:stretch;
}
.kicker{
  display:inline-flex;
  gap:10px; align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-size: 13px;
  width: fit-content;
}
.kicker b{color:#fff;}
.hero h1{
  margin: 12px 0 8px;
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(30px, 3.9vw, 54px);
  line-height:1.04;
  text-shadow: 0 14px 44px rgba(0,0,0,.40);
}
.hero p{
  margin:0;
  color:var(--muted);
  font-size: 16px;
  line-height:1.68;
}

.actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 18px;
}
.btn{
  border:0;
  border-radius: 16px;
  padding: 11px 14px;
  cursor:pointer;
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}
.btn:hover{background: rgba(255,255,255,.13);}
.btn.primary{
  background: linear-gradient(135deg, rgba(255,43,214,.88), rgba(122,92,255,.88));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 50px rgba(255,43,214,.16);
}
.btn.primary:hover{filter: brightness(1.06);}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 16px;
}
.chip{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

.section{ margin-top: 22px; }

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tile h3{
  margin:0 0 8px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
}
.tile p{margin:0; color:var(--muted); line-height:1.65;}

.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 13px;
  color: rgba(255,255,255,.86);
}

/* MENU */
.menu{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.menu ul{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px;}
.menu li{
  display:flex; justify-content:space-between; gap:12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.menu li span{color: rgba(255,255,255,.88);}
.menu li small{color: rgba(255,255,255,.64);}

/* GALLERY */
.gallery{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.gimg{
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(160px 140px at 25% 35%, rgba(255,43,214,.35), transparent 60%),
    radial-gradient(210px 170px at 75% 65%, rgba(122,92,255,.35), transparent 60%),
    radial-gradient(220px 180px at 55% 85%, rgba(0,245,212,.22), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.gimg::after{
  content:"";
  display:block;
  width:100%;height:100%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.40));
}

/* CONTACT */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.map{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  min-height: 340px;
}
.map iframe{
  width:100%;
  height:100%;
  border:0;
  filter: saturate(1.1) contrast(1.05);
}

.footer{
  margin-top: 30px;
  text-align:center;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

/* Forms (admin) */
.form{display:grid; gap: 12px;}
label{display:grid; gap:6px; font-size: 14px; color: rgba(255,255,255,.86);}
input, textarea, select{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(4,6,12,.30);
  color: rgba(255,255,255,.92);
  outline: none;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(255,255,255,.34);
}

.notice{
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(0,255,200,.10);
  border:1px solid rgba(0,255,200,.18);
  margin: 10px 0 14px;
}
.alert{
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(255,80,80,.12);
  border:1px solid rgba(255,80,80,.22);
  margin: 10px 0 14px;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.table{
  display:grid;
  gap: 8px;
}
.table .row{
  display:grid;
  grid-template-columns: 60px 80px 1fr 110px 90px 70px;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.table .row.head{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  font-weight: 700;
}

@media (max-width: 1020px){
  .hero{grid-template-columns: 1fr;}
  .grid3{grid-template-columns: 1fr;}
  .menu{grid-template-columns: 1fr;}
  .contact{grid-template-columns: 1fr;}
  .gallery{grid-template-columns: repeat(3, 1fr);}
  .table .row{grid-template-columns: 44px 70px 1fr 100px 72px 60px;}
}

@media (max-width: 520px){
  .topbar{margin: 10px 10px 0;}
  .container{padding: 16px 12px 52px;}
  .card{padding: 14px;}
  .grid2{grid-template-columns: 1fr;}
  .gallery{grid-template-columns: repeat(2, 1fr);}
  .table .row{grid-template-columns: 44px 64px 1fr; grid-auto-rows:auto;}
  .table .row > div:nth-child(n+4){display:none;}
}