:root{
    --bg:#070712;
    --bg2:#0b0b18;
    --card:#0f1022cc;
    --text:#eaeaf3;
    --muted:#b8b8cf;
    --line:#2a2c52;
    --accent:#a855f7;   /* neon purple */
    --accent2:#22d3ee;  /* cyan */
    --shadow: 0 24px 80px rgba(0,0,0,.55);
    --radius: 18px;
  }
  
  *{box-sizing:border-box}
  html,body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image: url("assets/bg-feet.jpg");
  background-size: 520px auto;
  background-repeat: repeat;
  filter: blur(16px) brightness(.55);
  opacity: .35;
  transform: scale(1.06);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(124,92,255,.08), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(0,229,255,.05), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,1));
}
  a{color:inherit}
  .container{max-width:1100px;margin:0 auto;padding:0 18px}
  
  /* NAV */
  .nav{position:sticky;top:0;z-index:50;background:rgba(7,7,18,.6);backdrop-filter: blur(10px);border-bottom:1px solid rgba(42,44,82,.6)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:800;letter-spacing:.08em}
  .brand-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 18px rgba(168,85,247,.7)}
  .nav-links{display:flex;gap:18px;align-items:center}
  .nav-links a{text-decoration:none;opacity:.9}
  .nav-links a:hover{opacity:1}
  .nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:22px}
  .mobile-menu{display:none;flex-direction:column;gap:12px;padding:14px 18px 18px}
  /* JS toggles .open; without this the menu never appears on mobile */
  .mobile-menu.open{display:flex}
  .mobile-menu a{text-decoration:none;padding:10px 12px;border:1px solid rgba(42,44,82,.6);border-radius:12px;background:rgba(15,16,34,.55)}
  
  /* HERO */
  .hero{position:relative;min-height:78vh;display:flex;align-items:center;border-bottom:1px solid rgba(42,44,82,.5)}
  .hero-bg{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(7,7,18,.25), rgba(7,7,18,.92)),
      url("assets/bg-feet.jpg");
    background-size:cover;background-position:center;
    /* Keep text readable on top of a bright background */
    filter:saturate(1.05) contrast(1.08) blur(1.5px);
  }
  /* Tighter top spacing so the hero copy sits higher (avoid negative-margin hack) */
  .hero-inner{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:26px;padding:2px 18px 70px}
  .kicker{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:12px;margin:0 0 10px}
  h1{font-size:54px;line-height:1.02;margin:0 0 14px}
  .accent{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
  /* Customer feedback: make this paragraph more readable / bold */
  .sub{
    color:rgba(255,255,255,.88);
    font-size:16px;
    font-weight:600;
    line-height:1.75;
    margin:0 0 18px;
    text-shadow: 0 2px 14px rgba(0,0,0,.55);
  }
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 10px}
  .meta{display:flex;flex-direction:column;gap:8px;color:#d7d7ee;opacity:.92;font-size:13px}
  
  .hero-card{position:relative}
  .card-glow{position:absolute;inset:-10px;border-radius:var(--radius);
    background:radial-gradient(500px 200px at 30% 30%, rgba(168,85,247,.35), transparent 60%),
               radial-gradient(500px 200px at 80% 80%, rgba(34,211,238,.22), transparent 60%);
    filter: blur(14px);
  }
  .card{position:relative;border-radius:var(--radius);background:rgba(15,16,34,.65);border:1px solid rgba(42,44,82,.7);box-shadow:var(--shadow);padding:18px}
  .card h3{margin:0 0 12px}
  .bullets{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}
  
  /* SECTION */
  .section{padding:4px 0}
  .section.alt{background:linear-gradient(180deg, rgba(11,11,24,.35), rgba(11,11,24,.05));border-top:1px solid rgba(42,44,82,.35);border-bottom:1px solid rgba(42,44,82,.25)}
  h2{font-size:32px;margin:0 0 14px}
  .lead{color:rgba(255,255,255,.84);line-height:1.85;margin:0 0 14px;font-weight:500;text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .muted{color:var(--muted)}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
  .media img{width:100%;border-radius:var(--radius);border:1px solid rgba(42,44,82,.6);box-shadow:var(--shadow)}
  .media iframe{width:100%;min-height:320px;border:0;border-radius:var(--radius);border:1px solid rgba(42,44,82,.6);background:#000;box-shadow:var(--shadow)}
  
  .chips{display:flex;gap:10px;flex-wrap:wrap}
  .chip{padding:8px 10px;border-radius:999px;border:1px solid rgba(42,44,82,.65);background:rgba(15,16,34,.45);color:#dadaf2;font-size:12px}
  
  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#0a0b12;border:0;box-shadow:0 10px 30px rgba(168,85,247,.22);
  }
  .btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(42,44,82,.8);box-shadow:none}
  .btn:hover{transform: translateY(-1px)}
  
  /* Plans */
  .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
  .p-card{padding:16px;border-radius:var(--radius);background:rgba(15,16,34,.55);border:1px solid rgba(42,44,82,.7)}
  .p-card h3{margin:0 0 8px}
  .note{color:var(--muted);margin:0 0 12px;line-height:1.6}
  .price{display:flex;flex-direction:column;gap:10px}
  .price div{display:flex;align-items:baseline;gap:10px}
  .price span{width:44px;color:#d6d6ee}
  .price strong{font-size:22px}
  .price small{color:var(--muted)}
  
  /* Menu */
  .menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
  .menu-block{padding:16px;border-radius:var(--radius);background:rgba(15,16,34,.45);border:1px solid rgba(42,44,82,.65)}
  .menu-block h3{margin:0 0 10px}
  .menu-block ul{margin:0;padding:0;list-style:none}
  .menu-block li{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(42,44,82,.6)}
  .menu-block li:last-child{border-bottom:0}
  .menu-block small{color:var(--muted)}
  .menu-block .plain li{grid-template-columns:1fr}
  
  /* Gallery */
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
  
  /* Access info */
  .info{display:flex;flex-direction:column;gap:8px;margin:14px 0 18px}
  .info > div{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
  .info p{margin:0;color:var(--muted);line-height:1.6}
  
  /* Footer */
  .footer{padding:26px 0;border-top:1px solid rgba(42,44,82,.6);background:rgba(7,7,18,.6)}
  .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .footer strong{letter-spacing:.06em}
  
  /* Responsive */
  @media (max-width: 920px){
    h1{font-size:44px}
    .hero-inner{grid-template-columns:1fr; padding:2px 18px 56px}
    .grid-2{grid-template-columns:1fr}
    .cards-3{grid-template-columns:1fr}
    .menu-grid{grid-template-columns:1fr}
    .gallery{grid-template-columns:repeat(2,1fr)}
    .nav-links{display:none}
    .nav-toggle{display:block}
  }
  @media (max-width: 520px){
    h1{font-size:38px}
    .gallery{grid-template-columns:1fr}
  }
  

/* Gallery items generated from assets/images.csv */
.gallery figure{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,18,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.gallery img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 4 / 3;
  transform:scale(1.02);
  transition:transform .35s ease;
}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 12px;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.92);
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}
@media (max-width: 840px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .gallery{grid-template-columns:1fr}
}