/* SCALI Salon – Premium Blonde & Extensions Specialist */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --blush-dark: #3d2030;
  --mauve: #8c5c74;
  --rose-gold: #c49a8a;
  --blush: #f0d8cc;
  --champagne: #f8f0e8;
  --nude: #f5ede4;
  --gold: #c8986a;
  --light-rose: #e8c4b0;
  --dark: #1e1018;
  --text: #2e1e26;
  --text-light: #7a5060;
  --white: #fff;
  --border: rgba(196,154,138,0.2);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Jost',sans-serif; background:var(--champagne); color:var(--text); overflow-x:hidden; }

/* GATE */
#gate {
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(150deg,#1e1018 0%,#3d2030 55%,#1e1018 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.gb { background:rgba(255,255,255,0.04); border:1px solid rgba(196,154,138,0.28); backdrop-filter:blur(20px); border-radius:22px; padding:52px 42px; max-width:420px; width:100%; text-align:center; }
.gb .gi { font-size:2.8rem; margin-bottom:18px; }
.gb h2 { font-family:'Cormorant Garamond',serif; color:var(--champagne); font-size:1.38rem; margin-bottom:10px; line-height:1.4; }
.gb p { color:rgba(248,240,232,0.6); font-size:0.87rem; margin-bottom:28px; }
.gb input { width:100%; padding:13px 18px; border-radius:9px; border:1px solid rgba(196,154,138,0.42); background:rgba(255,255,255,0.07); color:white; font-size:1rem; text-align:center; letter-spacing:4px; margin-bottom:13px; outline:none; }
.gb button { width:100%; padding:14px; border-radius:9px; background:linear-gradient(135deg,var(--mauve),var(--rose-gold)); border:none; color:white; font-size:0.95rem; font-weight:600; cursor:pointer; letter-spacing:1px; transition:opacity 0.3s; }
.gb button:hover { opacity:0.88; }
#gate-e { color:#ff9090; font-size:0.82rem; margin-top:9px; display:none; }

/* NAV */
nav { position:fixed; inset-block-start:0; inset-inline:0; z-index:100; height:70px; padding:0 5%; display:flex; align-items:center; justify-content:space-between; background:rgba(30,16,24,0.96); backdrop-filter:blur(12px); border-bottom:1px solid rgba(196,154,138,0.14); transition:height 0.3s; }
.nl { font-family:'Cormorant Garamond',serif; color:var(--champagne); font-size:1.28rem; text-decoration:none; letter-spacing:1px; }
.nl em { color:var(--rose-gold); font-style:italic; }
.nlinks { display:flex; gap:30px; list-style:none; }
.nlinks a { color:rgba(248,240,232,0.78); text-decoration:none; font-size:0.78rem; letter-spacing:1.8px; text-transform:uppercase; transition:color 0.3s; }
.nlinks a:hover,.nlinks a.active { color:var(--rose-gold); }
.ncta { background:linear-gradient(135deg,var(--blush-dark),var(--mauve)); color:white; padding:9px 22px; border-radius:22px; text-decoration:none; font-size:0.79rem; font-weight:600; letter-spacing:1px; transition:transform 0.3s,box-shadow 0.3s; }
.ncta:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(140,92,116,0.45); }
.burg { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.burg span { width:23px; height:2px; background:var(--champagne); display:block; }
.mmenu { display:none; position:fixed; top:70px; inset-inline:0; background:rgba(30,16,24,0.98); backdrop-filter:blur(12px); padding:26px 5%; z-index:99; }
.mmenu.open { display:block; }
.mmenu a { display:block; color:var(--champagne); text-decoration:none; padding:13px 0; border-bottom:1px solid rgba(196,154,138,0.1); font-size:0.93rem; letter-spacing:1px; }

/* HERO */
#hero { min-height:100vh; padding-top:70px; background:linear-gradient(155deg,#1e1018 0%,#3d2030 45%,#2a1520 100%); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hglow { position:absolute; inset:0; background:radial-gradient(ellipse 60% 55% at 22% 48%,rgba(196,154,138,0.14) 0%,transparent 70%),radial-gradient(ellipse 45% 45% at 82% 55%,rgba(140,92,116,0.1) 0%,transparent 70%); animation:hgp 9s ease-in-out infinite alternate; }
@keyframes hgp { 0%{opacity:0.65} 100%{opacity:1} }
.hsweep { position:absolute; top:0; left:-150%; width:65%; height:100%; background:linear-gradient(105deg,transparent 40%,rgba(196,154,138,0.09) 50%,rgba(255,255,255,0.05) 55%,rgba(196,154,138,0.09) 60%,transparent 70%); animation:hsw 7.5s ease-in-out infinite; }
@keyframes hsw { 0%{left:-150%} 55%,100%{left:160%} }
.spwrap { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.spp { position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.85) 0%,rgba(196,154,138,0.45) 45%,transparent 70%); animation:spf linear infinite; }
@keyframes spf { 0%{transform:translateY(100vh) scale(0);opacity:0} 10%{opacity:0.7} 90%{opacity:0.3} 100%{transform:translateY(-15vh) scale(1);opacity:0} }
.hcnt { position:relative; z-index:2; text-align:center; padding:0 20px; max-width:800px; }
.hbadge { display:inline-block; background:rgba(196,154,138,0.1); border:1px solid rgba(196,154,138,0.35); color:var(--rose-gold); padding:7px 20px; border-radius:22px; font-size:0.75rem; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:22px; }
.hcnt h1 { font-family:'Cormorant Garamond',serif; color:var(--champagne); font-size:clamp(2.8rem,7.5vw,5.2rem); line-height:1.05; margin-bottom:6px; font-weight:700; }
.hcnt h1 em { color:var(--rose-gold); font-style:italic; }
.hloc { color:rgba(248,240,232,0.55); font-size:0.78rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:22px; }
.hcnt > p { color:rgba(248,240,232,0.75); font-size:clamp(0.93rem,2vw,1.07rem); font-weight:300; line-height:1.8; max-width:540px; margin:0 auto 38px; }
.hbtns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.bp { background:linear-gradient(135deg,var(--blush-dark),var(--mauve)); color:white; padding:15px 36px; border-radius:28px; text-decoration:none; font-weight:600; font-size:0.92rem; transition:transform 0.3s,box-shadow 0.3s; box-shadow:0 8px 28px rgba(61,32,48,0.5); }
.bp:hover { transform:translateY(-3px); box-shadow:0 14px 38px rgba(61,32,48,0.65); }
.bo { border:1.5px solid rgba(196,154,138,0.52); color:var(--champagne); padding:15px 36px; border-radius:28px; text-decoration:none; font-size:0.92rem; transition:all 0.3s; }
.bo:hover { background:rgba(196,154,138,0.1); border-color:var(--rose-gold); }
.hstars { margin-top:44px; display:flex; align-items:center; justify-content:center; gap:10px; }
.hsg { color:var(--gold); font-size:1.03rem; letter-spacing:2px; }
.hstars p { color:rgba(248,240,232,0.52); font-size:0.8rem; }

/* TRUST BAR */
.tbar { background:var(--dark); padding:15px 5%; display:flex; align-items:center; justify-content:center; gap:35px; flex-wrap:wrap; }
.tbi { display:flex; align-items:center; gap:8px; color:var(--champagne); font-size:0.77rem; letter-spacing:1.8px; text-transform:uppercase; }
.tbd { width:4px; height:4px; background:var(--rose-gold); border-radius:50%; flex-shrink:0; }

/* SECTIONS */
section { padding:85px 5%; }
.slbl { display:block; color:var(--rose-gold); font-size:0.72rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:10px; }
.sttl { font-family:'Cormorant Garamond',serif; font-size:clamp(1.8rem,4vw,2.7rem); color:var(--text); margin-bottom:15px; line-height:1.2; }
.sline { width:50px; height:2px; background:linear-gradient(90deg,var(--rose-gold),var(--gold)); margin:0 0 17px; }
.ssub { color:var(--text-light); font-size:0.93rem; line-height:1.75; max-width:520px; }

/* SERVICE CARDS */
.sg { display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:22px; max-width:1200px; margin:0 auto; }
.shd { text-align:center; margin-bottom:52px; }
.shd .sline { margin:17px auto; }
.shd .ssub { margin:0 auto; }
.sc { background:white; border-radius:15px; padding:30px 26px; border:1px solid var(--border); transition:transform 0.3s,box-shadow 0.3s; position:relative; overflow:hidden; }
.sc::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--mauve),var(--rose-gold)); transform:scaleX(0); transition:transform 0.3s; transform-origin:left; }
.sc:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(30,16,24,0.1); }
.sc:hover::before { transform:scaleX(1); }
.sico { font-size:1.8rem; margin-bottom:15px; }
.sc h3 { font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--dark); margin-bottom:10px; }
.sc p { color:var(--text-light); font-size:0.87rem; line-height:1.72; margin-bottom:13px; }
.sp2 { color:var(--mauve); font-weight:600; font-size:0.87rem; }

/* ABOUT */
.abg { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; max-width:1150px; margin:0 auto; }
.abv { border-radius:20px; height:490px; position:relative; background:linear-gradient(145deg,var(--blush) 0%,var(--light-rose) 50%,rgba(196,154,138,0.4) 100%); display:flex; align-items:center; justify-content:center; }
.avi { font-family:'Cormorant Garamond',serif; font-size:9rem; color:rgba(140,92,116,0.25); font-style:italic; line-height:1; }
.abb { position:absolute; bottom:26px; right:26px; background:var(--dark); color:var(--champagne); padding:15px 19px; border-radius:11px; text-align:center; }
.abbn { font-family:'Cormorant Garamond',serif; font-size:2.2rem; color:var(--rose-gold); display:block; line-height:1; }
.abb span { font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; }
.abt p { color:var(--text-light); font-size:0.95rem; line-height:1.82; margin-bottom:20px; }
.aff { list-style:none; margin:24px 0; }
.aff li { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(196,154,138,0.12); }
.afck { color:var(--rose-gold); font-size:0.93rem; flex-shrink:0; margin-top:2px; }
.aff li p { margin:0; font-size:0.92rem; color:var(--text); }

/* REVIEWS */
.rvsec { background:var(--dark); }
.rvsec .sttl { color:var(--champagne); }
.rvhd { text-align:center; margin-bottom:52px; }
.rvscore { display:flex; align-items:center; justify-content:center; gap:14px; margin:13px 0 5px; }
.rvn { font-family:'Cormorant Garamond',serif; font-size:4rem; color:var(--gold); line-height:1; }
.rvd .rs { color:var(--gold); font-size:1.35rem; letter-spacing:2px; }
.rvd p { color:rgba(248,240,232,0.52); font-size:0.8rem; margin-top:4px; }
.rvgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:22px; max-width:1200px; margin:0 auto; }
.rvc { background:rgba(255,255,255,0.04); border:1px solid rgba(196,154,138,0.11); border-radius:15px; padding:27px; transition:transform 0.3s,border-color 0.3s; }
.rvc:hover { transform:translateY(-3px); border-color:rgba(196,154,138,0.24); }
.rvs { color:var(--gold); font-size:0.85rem; margin-bottom:13px; }
.rvq { color:rgba(248,240,232,0.76); font-size:0.9rem; line-height:1.75; font-style:italic; margin-bottom:18px; }
.rvp { display:flex; align-items:center; gap:11px; }
.rvav { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--blush-dark),var(--rose-gold)); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:0.85rem; flex-shrink:0; }
.rvnm { color:var(--champagne); font-weight:600; font-size:0.85rem; }
.rvmt { color:rgba(248,240,232,0.42); font-size:0.75rem; }

/* EXTENSIONS PREVIEW */
.ext-hero { background:linear-gradient(135deg,var(--blush-dark),var(--mauve)); border-radius:20px; padding:55px; color:white; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.ext-left h2 { font-family:'Cormorant Garamond',serif; font-size:2.3rem; margin-bottom:15px; }
.ext-left h2 em { color:var(--blush); font-style:italic; }
.ext-left p { color:rgba(255,255,255,0.75); line-height:1.8; margin-bottom:22px; font-size:0.95rem; }
.ext-types { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.et { background:rgba(255,255,255,0.1); border-radius:10px; padding:14px 16px; border:1px solid rgba(255,255,255,0.15); }
.et h4 { color:white; font-size:0.85rem; font-weight:600; margin-bottom:3px; }
.et p { color:rgba(255,255,255,0.6); font-size:0.8rem; margin:0; }

/* CTA SECTION */
.ctasec { background:linear-gradient(135deg,#3d2030,#1e1018); text-align:center; padding:78px 5%; }
.ctasec .sttl { color:var(--champagne); }
.ctasec > p { color:rgba(248,240,232,0.68); max-width:470px; margin:0 auto 30px; line-height:1.7; }
.ctaboxes { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.ctab { background:rgba(255,255,255,0.06); border:1px solid rgba(196,154,138,0.18); border-radius:12px; padding:18px 22px; min-width:162px; text-align:center; }
.ctab .ci { font-size:1.4rem; margin-bottom:8px; }
.ctab h4 { color:var(--champagne); font-size:0.8rem; font-weight:600; margin-bottom:4px; }
.ctab p { color:rgba(248,240,232,0.52); font-size:0.78rem; }

/* CONTACT */
.ctgrid { display:grid; grid-template-columns:1fr 1fr; gap:58px; max-width:1100px; margin:0 auto; }
.ctinfo h3 { font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--dark); margin-bottom:22px; }
.ctrow { display:flex; gap:14px; margin-bottom:21px; align-items:flex-start; }
.ctic { width:42px; height:42px; border-radius:10px; background:var(--blush); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ctrow h4 { color:var(--dark); font-size:0.78rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:3px; }
.ctrow p,.ctrow a { color:var(--text-light); font-size:0.9rem; text-decoration:none; line-height:1.55; }
.ctfrm { background:var(--blush); border-radius:18px; padding:37px; }
.ctfrm h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--dark); margin-bottom:23px; }
.fg { margin-bottom:16px; }
.fg label { display:block; font-size:0.76rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-light); margin-bottom:6px; }
.fg input,.fg textarea,.fg select { width:100%; padding:11px 14px; border:1.5px solid rgba(140,92,116,0.22); border-radius:8px; background:white; font-family:'Jost',sans-serif; font-size:0.9rem; color:var(--text); outline:none; transition:border-color 0.3s; }
.fg input:focus,.fg textarea:focus { border-color:var(--mauve); }
.fg textarea { height:100px; resize:vertical; }
.fgr { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.ctsub { width:100%; padding:13px; border:none; border-radius:9px; background:linear-gradient(135deg,var(--blush-dark),var(--mauve)); color:white; font-family:'Jost',sans-serif; font-size:0.93rem; font-weight:600; cursor:pointer; transition:transform 0.3s,box-shadow 0.3s; }
.ctsub:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(61,32,48,0.45); }

/* FOOTER */
footer { background:var(--dark); padding:52px 5% 26px; }
.ftg { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; margin-bottom:36px; }
.ftb .ffl { font-family:'Cormorant Garamond',serif; color:var(--champagne); font-size:1.3rem; margin-bottom:13px; }
.ftb .ffl em { color:var(--rose-gold); }
.ftb p { color:rgba(248,240,232,0.52); font-size:0.85rem; line-height:1.7; margin-bottom:17px; }
.fso { display:flex; gap:10px; }
.fsoc { width:35px; height:35px; border-radius:7px; background:rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; color:var(--rose-gold); text-decoration:none; font-size:0.85rem; transition:background 0.3s; }
.fsoc:hover { background:rgba(196,154,138,0.18); }
.ftcol h4 { color:var(--champagne); font-size:0.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:17px; }
.ftcol ul { list-style:none; }
.ftcol li { margin-bottom:9px; }
.ftcol a { color:rgba(248,240,232,0.52); text-decoration:none; font-size:0.85rem; transition:color 0.3s; }
.ftcol a:hover { color:var(--rose-gold); }
.ftbot { border-top:1px solid rgba(196,154,138,0.1); padding-top:21px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:7px; }
.ftbot p { color:rgba(248,240,232,0.33); font-size:0.77rem; }

/* RESPONSIVE */
@media (max-width:900px) {
  .nlinks,.ncta { display:none; }
  .burg { display:flex; }
  .abg,.ctgrid { grid-template-columns:1fr; gap:38px; }
  .ext-hero { grid-template-columns:1fr; }
  .ftg { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  section { padding:70px 5%; }
  .ftg { grid-template-columns:1fr; gap:26px; }
  .fgr { grid-template-columns:1fr; }
  .hbtns { flex-direction:column; align-items:center; }
  .ext-types { grid-template-columns:1fr; }
}