/* Lofti Nails — premium dark / glass
   Static site: HTML/CSS/JS only
   Mobile-first. Breakpoints: 560 / 900 / 1120+
*/

:root{
  /* Layout */
  --max: 1120px;
  --radius: 22px;

  /* Colors */
  --bg: #07080c;
  --bg-soft: #0b0d14;
  --text: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.84);
  --muted: rgba(255,255,255,.64);
  --line: rgba(255,255,255,.12);
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.10);

  /* Accent */
  --accent: #F92DFD;

  /* Effects */
  --shadow: 0 28px 70px rgba(0,0,0,.46);
  --shadow-soft: 0 18px 42px rgba(0,0,0,.26);

  /* Focus ring */
  --ring: 0 0 0 4px rgba(249,45,253,.22);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1100px 620px at 14% 0%, rgba(249,45,253,.18), transparent 55%),
    radial-gradient(900px 520px at 92% 12%, rgba(255,255,255,.10), transparent 52%),
    radial-gradient(900px 520px at 82% 88%, rgba(249,45,253,.10), transparent 56%),
    var(--bg);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection{background: rgba(249,45,253,.28);}

a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto;}
.container{max-width:var(--max); margin:0 auto; padding:0 22px;}

.section{padding:82px 0;}
.section.soft{
  background:
    radial-gradient(900px 520px at 10% 40%, rgba(255,255,255,.08), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
}
.kicker{
  color:var(--muted);
  font-size:.86rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hr{height:1px; background:var(--line); margin:26px 0;}

h1,h2,h3{
  letter-spacing:.2px;
  margin:0 0 .6rem 0;
}
h1,h2{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}
h1{
  font-size: clamp(2.25rem, 4vw, 3.35rem);
  line-height:1.06;
}
h2{
  font-size: clamp(1.7rem, 2.5vw, 2.35rem);
  line-height:1.15;
}
h3{
  font-size: 1.12rem;
  line-height:1.25;
  font-weight:700;
}
p{margin:.65rem 0; color:var(--text-2);}
small{color:var(--muted);}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.9rem 1.15rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color:var(--text);
  font-size:.95rem;
  font-weight:650;
  letter-spacing:.01em;
  cursor:pointer;
  white-space:nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(255,255,255,.16);
}
.btn:active{transform: translateY(0px);}
.btn:focus-visible{outline:none; box-shadow: var(--shadow-soft), var(--ring);}

.btn.primary,
.btn-accent{
  border-color: transparent;
  background: radial-gradient(120% 140% at 30% 10%, rgba(255,255,255,.44), rgba(255,255,255,0) 55%),
              linear-gradient(135deg, rgba(249,45,253,1), rgba(209, 46, 255, 1));
  color:#0b0b0b;
  box-shadow: 0 18px 46px rgba(249,45,253,.22);
}
.btn.primary:hover,
.btn-accent:hover{filter:saturate(1.04) brightness(1.03); box-shadow: 0 26px 64px rgba(249,45,253,.28);}

.btn.ghost,
.btn-ghost{
  background: transparent;
}
.btn.ghost:hover,
.btn-ghost:hover{
  background: rgba(255,255,255,.06);
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(7,8,12,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:650;
  letter-spacing:.02em;
}
.brand .wordmark{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size:1.25rem;
}

.nav{display:flex; align-items:center; gap:18px;}
.nav a.navlink{
  color:var(--muted);
  font-size:.95rem;
  padding:10px 6px;
  border-radius:10px;
}
.nav a.navlink:hover{
  color:var(--text);
  background: rgba(255,255,255,.05);
}

.lang{
  display:flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background: rgba(255,255,255,.05);
}
.lang a{
  font-size:.86rem;
  color:var(--muted);
  padding:4px 8px;
  border-radius:999px;
}
.lang a.active{
  color:var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

/* Mobile menu */
.burger{
  display:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius:14px;
  padding:9px 11px;
}
.burger span{display:block; width:18px; height:2px; background:var(--text); margin:4px 0;}
.mobile{display:none; padding:12px 0 18px 0;}
.mobile .nav{flex-direction:column; align-items:flex-start; gap:10px;}
.mobile .nav a.navlink{padding:10px 12px; width:100%;}
.mobile .cta-row{flex-wrap:wrap;}
.cta-row{display:flex; gap:10px; align-items:center;}

/* ===== Hero ===== */
.hero{padding:64px 0 56px 0;}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}
.hero-card{
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding:34px;
  background:
    radial-gradient(900px 380px at 16% 0%, rgba(249,45,253,.18), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 220px at 70% 0%, rgba(255,255,255,.18), transparent 55%);
  pointer-events:none;
  opacity:.8;
}
.hero-card > *{position:relative;}
.hero-sub{
  font-size:1.05rem;
  color:var(--muted);
  max-width:60ch;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}

.quick{
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background:
    radial-gradient(700px 260px at 16% 0%, rgba(255,255,255,.12), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding:22px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.label{
  color:var(--muted);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.quick .value{font-size:1.08rem; margin-top:2px; color:var(--text);}
.quick .stack{display:grid; gap:14px;}

/* ===== Cards / grids ===== */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  padding:18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}
.card p{color:var(--muted); margin:8px 0 0 0;}
.card-dark{
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.18));
  border-color: rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}

.callout{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  padding:22px;
  box-shadow: var(--shadow-soft);
  display:grid;
  grid-template-columns: 1fr auto;
  gap:18px;
  align-items:center;
}

/* ===== Services ===== */
.services{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
.service-block{
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  padding:20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.service-block h3{margin:0 0 10px 0;}
.service-table{border-top:1px solid rgba(255,255,255,.12); margin-top:12px;}
.service-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.service-name{font-size:.98rem; line-height:1.35; color:var(--text);}
.service-meta{text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums;}
.service-time{color:var(--muted);}
.service-price{font-weight:800; letter-spacing:.01em; margin-left:10px;}
.service-subhead{
  margin:18px 0 6px 0;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.service-block .note{margin-top:12px; color:var(--muted); font-size:.95rem;}

/* ===== Gallery ===== */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap:14px;
}
.tile{
  grid-column: span 4;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  transform: translateZ(0);
}
.tile img{
  width:100%;
  height: 320px;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  transition: transform .35s ease;
}
.tile:hover img{transform: scale(1.05);}
.tile .cap{
  padding:14px 14px 16px 14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.tile .cap .title{font-weight:700; font-size:.98rem;}
.tile .cap .meta{color:var(--muted); font-size:.9rem;}

/* ===== Team ===== */
.team{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.person{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  padding:18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.person .role{color:var(--muted); font-size:.92rem;}
.person .mini{color:var(--muted); font-size:.92rem; margin-top:8px;}

.name{font-size:1.02rem; color:var(--text);}

/* ===== Reviews ===== */
.reviews-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-top:10px;
}
.reviews-actions{display:flex; gap:10px;}
.review-track{
  display:flex;
  gap:14px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding-bottom:6px;
  -webkit-overflow-scrolling: touch;
}
.review{
  min-width: 340px;
  scroll-snap-align: start;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  padding:18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.review .who{font-weight:750; margin-bottom:6px;}
.review .stars{color: rgba(249,45,253,.95); letter-spacing:.08em;}
.review p{color:var(--text-2);}

.review-nav{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.review-nav button{
  appearance:none;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius:999px;
  padding:.75rem 1rem;
  font-weight:700;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.review-nav button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--shadow-soft);
}
.review-nav button:focus-visible{outline:none; box-shadow: var(--shadow-soft), var(--ring);}

.quote{
  color:var(--text-2);
  font-size:1.02rem;
  line-height:1.6;
}
.review-note{
  margin-top:10px;
  color:var(--muted);
  font-size:.92rem;
}



/* ===== FAQ ===== */
.faq details{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  padding:14px 16px;
  margin:12px 0;
}
.faq summary{
  cursor:pointer;
  font-weight:750;
  color:var(--text);
  list-style:none;
  outline:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:after{
  content:"+";
  float:right;
  color:var(--muted);
  font-weight:800;
}
.faq details[open] summary:after{content:"–";}
.faq details p{margin:.7rem 0;}
.faq details ul{margin:.6rem 0 .2rem 0; padding-left:18px; color:var(--text-2);}


/* ===== Smart Start ===== */
.smart-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:18px;
  align-items:start;
  margin-top:12px;
}

.smart-cta{position:sticky; top:92px; align-self:start;}
@media (max-width: 980px){
  .smart-cta{position:static;}
}
.lead{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
  margin-top:10px;
}
.note{color:var(--muted); margin-top:12px;}

.smart-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.smart-item{
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.smart-item h4{
  margin:0 0 6px 0;
  font-size:1rem;
  font-weight:750;
  letter-spacing:.01em;
}
.smart-item p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.5;
}

.smart-meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.smart-meta p{margin:0; color:var(--text-2);}

.card-kicker{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.card-title{
  font-size:1.35rem;
  font-weight:800;
  margin-bottom:6px;
}
.card-text{margin:0 0 14px 0; color:var(--muted);}

.card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.card-actions.secondary{margin-top:10px;}

/* ===== Footer ===== */
.footer{
  padding:44px 0 58px 0;
  border-top:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 25% 0%, rgba(255,255,255,.08), transparent 60%),
    rgba(0,0,0,.14);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap:18px;
  align-items:start;
}
.footer .mini{color:var(--muted); margin-top:10px;}

/* ===== Motion ===== */
.fade-in{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in.visible{opacity:1; transform: translateY(0);}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns: repeat(2, minmax(0,1fr));}
  .services{grid-template-columns:1fr;}
  .team{grid-template-columns: repeat(2, minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr;}
  .nav{display:none;}
  .cta-row{display:none;}
  .burger{display:inline-block;}
  .mobile{display:block;}
  .topbar-inner{height:64px;}
}

@media (max-width: 560px){
  .section{padding:68px 0;}
  .hero-card{padding:24px;}
  .grid-3{grid-template-columns:1fr;}
  .gallery .tile{grid-column: span 12;}
  .tile img{height: 280px;}
  .team{grid-template-columns:1fr;}
  .review{min-width: 85%;}
}