/*
Minimal modern portfolio for makeup artist
- Theme: warm neutrals on near-black
- Typography: Inter + Playfair Display
- Layout: responsive grid, generous whitespace
*/

:root{
  --bg:#0f0f10;
  --bg-alt:#151618;
  --text:#e9e6e3;
  --muted:#b8b0aa;
  --accent:#c7a995; /* soft taupe */
  --accent-2:#8d7261;
  --line:#26282b;
  --card:#131416;
  --ok:#2ecc71;
  --danger:#ff6b6b;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 70% -10%, #1b1c1f 0%, #0f0f10 60%), var(--bg);
  color:var(--text);
  font: 400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
img{max-width:100%;display:block}

.container{width:min(1120px, 92vw); margin:0 auto}
.row{display:flex;gap:18px}
.between{justify-content:space-between}
.center{align-items:center}
.grid{display:grid; gap:36px}
.grid.two{grid-template-columns: 1.1fr .9fr; align-items:center}
.grid.three{grid-template-columns: repeat(3,1fr)}
@media (max-width: 900px){.grid.two,.grid.three{grid-template-columns:1fr}}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in srgb, var(--bg), transparent 40%);
  border-bottom:1px solid var(--line);
}
.site-header .container{min-height:64px}
.site-header .container{display:flex; align-items:center; justify-content:space-between}
.brand{
  font-family: "Playfair Display", Georgia, serif;
  font-weight:700; letter-spacing:.3px;
  font-size: clamp(18px, 2.6vw, 24px);
  color:var(--text); text-decoration:none
}
.nav__toggle{display:none}
.nav__list{display:flex; gap:6px; list-style:none; padding:0; margin:0}
.nav__list a{color:var(--muted); text-decoration:none; padding:12px 12px; border-radius:10px}
.nav__list a:hover{color:var(--text); background:var(--card)}
@media (min-width: 761px){
  .nav__list a.is-active{color:var(--text); background:var(--card)}
}
@media (max-width: 760px){
  .nav__toggle{display:inline-flex; background:var(--card); border:1px solid var(--line); color:var(--text); padding:12px 14px; border-radius:12px}
  .nav__list{position:absolute; right:12px; top:64px; background:var(--bg-alt); border:1px solid var(--line); border-radius:14px; padding:8px; display:none; flex-direction:column; box-shadow:var(--shadow); width: calc(100vw - 24px)}
  .nav__list a{padding:14px 12px}
  .nav__list.is-open{display:flex}
}

/* Utils */
.skip{position:absolute; left:-999px}
.skip:focus{left:12px; top:12px; background:var(--accent); color:#111; padding:8px 12px; border-radius:10px}
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg, var(--bg-alt), transparent)}
.section__head{display:grid; gap:8px; margin-bottom:28px}
.section__head h2{font:600 24px/1.2 Inter; letter-spacing:.2px}
section[id]{scroll-margin-top: 84px}
@media (max-width:560px){
  .section{padding:56px 0}
  .section__head h2{font-size:22px}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 20px; border-radius:14px; text-decoration:none; cursor:pointer; transition: .2s ease}
.btn--primary{background:var(--text); color:#111}
.btn--primary:hover{transform: translateY(-1px); box-shadow:var(--shadow)}
.btn--ghost{border:1px solid var(--line); color:var(--text)}
.btn--ghost:hover{background:var(--card)}

/* Hero */
.hero{padding:88px 0 52px; border-bottom:1px solid var(--line)}
.hero h1{font: 700 clamp(28px, 4.6vw, 46px)/1.1 "Playfair Display", Georgia, serif; margin:0 0 10px}
.accent{color:var(--accent)}
.hero p{color:var(--muted)}
.actions{display:flex; gap:12px; margin:18px 0 12px; flex-wrap:wrap}
.trust{display:flex; gap:18px; padding:0; margin:12px 0 0; list-style: none; color:var(--muted)}
.hero__visual{position:relative; min-height:320px}
.hero__visual .card{position:absolute; inset:auto 0 0 auto; width:min(380px, 85%); height:68%; border-radius: var(--radius); box-shadow:var(--shadow); background:linear-gradient(135deg, #7d5a50, #cbb7ad)}
.hero__visual .before{right:22%; bottom:16%; filter:grayscale(.8) contrast(1.1); opacity:.6}
.hero__visual .after{right:0}
@media (max-width: 760px){
  .hero{padding-top:72px}
  .hero__visual{order:-1; min-height:220px}
  .hero__visual .card{width: 84%; height: 62%}
  .trust{flex-wrap:wrap}
}

/* Portfolio */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.chip{background:var(--card); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:10px 14px; cursor:pointer}
.chip.is-active,.chip:hover{color:var(--text); border-color:color-mix(in srgb, var(--accent), var(--line) 30%)}
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 900px){.gallery{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 520px){.gallery{grid-template-columns: 1fr}}
.item{margin:0}
.thumb{width:100%; height:auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; background: #222; border:1px solid var(--line); cursor:zoom-in}
.item figcaption{color:var(--muted); font-size:14px; margin-top:8px}

.lightbox{border:none; border-radius:16px; padding:0; background:transparent}
.lightbox::backdrop{background: rgba(0,0,0,.6); backdrop-filter: blur(2px)}
.lightbox__stage{width:min(960px, 88vw); height:min(80vh, 800px); background:#000; border-radius:16px; overflow:hidden}
.lightbox__close{position:fixed; right:8vw; top:8vh; background:#000; color:#fff; border:1px solid #333; border-radius:10px; padding:8px 12px; cursor:pointer}
@media (max-width:560px){
  .lightbox__stage{height: 64vh}
}

/* Services */
.cards{display:grid; gap:16px}
.cards.three{grid-template-columns: repeat(3,1fr)}
@media (max-width: 900px){.cards.three{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.cards.three{grid-template-columns:1fr}}
.card--service{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px}
.card--service h3{margin:0 0 6px}
.price{color:var(--accent)}
.list{padding-left:18px; color:var(--muted)}
.list.cols{columns:2; gap:24px}
@media (max-width:560px){
  .list.cols{columns:1}
}

/* Testimonials */
.carousel{display:grid; gap:14px; grid-template-columns: repeat(3, 1fr)}
.carousel .quote{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px}
.carousel .who{color:var(--muted); font-size:14px}
@media (max-width: 900px){.carousel{grid-template-columns: 1fr 1fr}}
@media (max-width: 560px){.carousel{grid-template-columns: 1fr}}

/* About */
.about__visual{min-height:320px; border-radius:16px; background: radial-gradient(460px 280px at 70% 20%, #3a2d2b, #0f0f10); border:1px solid var(--line)}
@media (max-width:560px){
  .about__visual{min-height:220px}
}

/* Contact */
.form{display:grid; gap:12px}
.field{display:grid; gap:6px}
input, select{background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:14px}
input:focus, select:focus{outline:2px solid color-mix(in srgb, var(--accent), transparent 40%)}
.legal{color:var(--muted); font-size:13px}
.map iframe{width:100%; height:320px; border:1px solid var(--line); border-radius:16px}
@media (max-width:560px){
  .map iframe{height:240px}
}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:36px 0; color:var(--muted)}
.footnav{list-style:none; padding:0; margin:0; display:grid; gap:8px}

/* Floating WhatsApp Button */
.fab{position:fixed; right: clamp(12px, 4vw, 22px); bottom: calc(clamp(12px, 4vw, 22px) + env(safe-area-inset-bottom, 0)); z-index:60; height:56px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:var(--shadow); border:1px solid var(--line); padding:0 16px; gap:10px}
.fab--wa{background: var(--text); color:#111; font-size:22px}
.fab__label{font-weight:600}
@media (max-width: 760px){ .fab{height:52px; padding:0 14px; font-size:16px} }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}