/* ליאת בניית ציפורניים · design system "Lacquer" · 2026-09-14 */
:root{
  --paper:#FFF4EE; --paper2:#FFE9E0; --ink:#2A1626; --ink2:#4A2A44;
  --lac:#E23A5A; --lac2:#C72946; --wine:#7A1E3A; --gold:#D3A55A;
  --lilac:#EBDDF3; --mint:#DDF0E6; --cream:#FFF9F5; --line:rgba(42,22,38,.14);
  --d:'Karantina',sans-serif; --b:'Heebo',system-ui,sans-serif;
  --r:28px; --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--b);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.08 0 0 0 0 0.15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.disp{font-family:var(--d);font-weight:700;line-height:.92;letter-spacing:.005em}
h2{font-size:clamp(3rem,7vw,5.6rem);text-wrap:balance}
h3{font-size:clamp(1.9rem,3vw,2.6rem)}
p{max-width:62ch}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto;position:relative;z-index:1}
.kicker{font-family:var(--b);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lac);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:34px;height:3px;background:var(--lac);border-radius:2px}
.lead{font-size:1.2rem;line-height:1.65;color:var(--ink2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;border-radius:999px;padding:14px 26px;font-size:1rem;border:2px solid transparent;transition:transform .18s,background .18s,color .18s,box-shadow .18s;white-space:nowrap;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-lac{background:var(--lac);color:#fff;box-shadow:0 12px 30px -12px var(--lac)}
.btn-lac:hover{background:var(--lac2)}
.btn-ink{background:var(--ink);color:#fff}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-wa{background:#25D366;color:#0b2b16}
.btn-wa svg{width:20px;height:20px}
.btn-lg{padding:18px 34px;font-size:1.1rem}

/* strip */
.strip{background:var(--ink);color:var(--paper);overflow:hidden;direction:ltr;position:relative;z-index:2}
.strip .run{display:flex;width:max-content;animation:tk 60s linear infinite}
.strip span{direction:rtl;display:inline-flex;align-items:center;gap:0;font-family:var(--d);font-size:1.35rem;letter-spacing:.02em;padding:9px 0;white-space:nowrap}
.strip i{font-style:normal;color:var(--lac);margin:0 18px;font-size:1rem}
@keyframes tk{to{transform:translateX(-50%)}}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,244,238,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .bn{font-family:var(--d);font-size:2.2rem;line-height:1;color:var(--ink)}
.brand .bs{font-size:.8rem;font-weight:600;color:var(--wine);letter-spacing:.06em}
.nav-links{display:flex;gap:26px;font-weight:600;font-size:.98rem}
.nav-links a{position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--lac);transform:scaleX(0);transition:transform .2s;transform-origin:right}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;gap:10px}
.nav-cta .btn{padding:11px 18px;font-size:.95rem}

/* hero */
.hero{padding:64px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(4.2rem,10.5vw,9.4rem);line-height:.86;margin:18px 0 22px;text-wrap:balance}
.hero h1 .lq{color:var(--lac);position:relative;display:inline-block}
.hero h1 .lq::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-2px;height:.16em;background:var(--lilac);z-index:-1;border-radius:6px;transform:skewY(-1.5deg)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;font-weight:600;font-size:.95rem;color:var(--ink2)}
.hero-meta div{display:flex;align-items:center;gap:8px}
.hero-meta svg{width:20px;height:20px;stroke:var(--lac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-art{position:relative;justify-self:center;width:min(100%,460px);aspect-ratio:2/3}
.nail{position:absolute;inset:0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;overflow:hidden;box-shadow:0 40px 80px -40px rgba(122,30,58,.55);background:var(--paper2)}
.nail img{width:100%;height:100%;object-fit:cover}
.blob{position:absolute;inset:-6% -14% -4% -10%;background:var(--lilac);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;transform:rotate(-9deg);z-index:-1}
.blob.b2{background:var(--mint);transform:rotate(11deg) translate(6%,4%);inset:-2% -8% -8% -16%}
.chip{position:absolute;background:#fff;border:1.5px solid var(--ink);border-radius:18px;padding:12px 16px;box-shadow:6px 6px 0 var(--ink);font-weight:700;line-height:1.15;font-size:.95rem;max-width:200px}
.chip small{display:block;font-weight:500;color:var(--ink2);font-size:.78rem;margin-top:3px}
.chip.c1{top:9%;left:-8%}
.chip.c2{bottom:12%;right:-10%}
.chip b{font-family:var(--d);font-size:2rem;font-weight:700;display:block;line-height:.9;color:var(--lac)}
.badge-rot{position:absolute;bottom:-4%;left:2%;width:118px;height:118px;display:grid;place-items:center}
.badge-rot svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite;direction:ltr}
.badge-rot text{font:700 11.5px var(--b);letter-spacing:.14em;fill:var(--ink)}
.badge-rot em{font-style:normal;font-family:var(--d);font-size:2.2rem;color:var(--wine);line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* colors band */
.colors{padding:20px 0 0}
.palette{display:flex;justify-content:space-between;gap:10px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:26px 0;overflow-x:auto;scrollbar-width:none}
.palette::-webkit-scrollbar{display:none}
.sw{flex:0 0 auto;text-align:center;width:88px}
.sw i{display:block;width:58px;height:58px;border-radius:50%;margin:0 auto 8px;box-shadow:inset -6px -8px 14px rgba(0,0,0,.18),inset 6px 8px 14px rgba(255,255,255,.35),0 8px 16px -8px rgba(42,22,38,.5);transition:transform .2s}
.sw:hover i{transform:scale(1.14) rotate(-6deg)}
.sw span{font-size:.78rem;font-weight:600;color:var(--ink2)}

/* section */
section{padding:88px 0}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:44px}
.sec-head p{color:var(--ink2);max-width:40ch}

/* services index */
.svc{list-style:none;counter-reset:s;border-top:1.5px solid var(--ink)}
.svc li{counter-increment:s;display:grid;grid-template-columns:90px 1fr 1.2fr auto;gap:24px;align-items:center;padding:26px 0;border-bottom:1.5px solid var(--ink);transition:background .2s,padding .2s}
.svc li:hover{background:var(--paper2);padding-inline:14px}
.svc li::before{content:"0" counter(s);font-family:var(--d);font-size:3.4rem;line-height:1;color:var(--lac)}
.svc h3{font-size:2.3rem}
.svc p{font-size:.98rem;color:var(--ink2);max-width:none}
.svc .tag{font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--lilac);color:var(--wine);white-space:nowrap}
.svc .tag.g{background:var(--mint);color:#1e5a3d}
.svc .tag.o{background:var(--paper2);color:var(--lac2)}

/* why */
.why{background:var(--ink);color:var(--paper);border-radius:var(--r);margin:0 auto;width:min(var(--wrap),calc(100% - 40px));padding:72px 56px;position:relative;overflow:hidden}
.why::after{content:"ליאת";position:absolute;bottom:-8%;left:-2%;font-family:var(--d);font-size:26rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,244,238,.14);pointer-events:none}
.why h2{color:#fff}
.why h2 .lq{color:var(--lac)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;position:relative;z-index:1}
.why-card{border:1px solid rgba(255,244,238,.22);border-radius:22px;padding:28px 24px;background:rgba(255,255,255,.03)}
.why-card .n{font-family:var(--d);font-size:3.2rem;color:var(--gold);line-height:1}
.why-card h3{font-size:2rem;margin:10px 0 8px;color:#fff}
.why-card p{color:rgba(255,244,238,.8);font-size:.98rem}

/* moment / quote */
.moment{position:relative}
.moment-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:stretch}
.moment-img{border-radius:var(--r);overflow:hidden;min-height:420px;position:relative}
.moment-img img{width:100%;height:100%;object-fit:cover}
.moment-img .stamp{position:absolute;top:18px;right:18px;background:var(--lac);color:#fff;font-family:var(--d);font-size:1.6rem;padding:8px 16px;border-radius:999px;transform:rotate(3deg)}
.quote{background:var(--paper2);border-radius:var(--r);padding:44px 40px;display:flex;flex-direction:column;justify-content:center;position:relative}
.quote::before{content:"”";font-family:var(--d);font-size:9rem;line-height:.6;color:var(--lac);position:absolute;top:34px;right:30px;opacity:.55}
.quote blockquote{font-family:var(--d);font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;margin-top:40px;text-wrap:balance}
.quote cite{display:block;font-style:normal;margin-top:22px;font-weight:600;color:var(--wine)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border:1.5px solid var(--ink);border-radius:22px;padding:30px 26px;box-shadow:8px 8px 0 var(--lilac);transition:transform .2s,box-shadow .2s}
.step:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--lac)}
.step .n{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--d);font-size:2rem;display:grid;place-items:center;margin-bottom:16px}
.step h3{margin-bottom:8px;font-size:2rem}
.step p{color:var(--ink2);font-size:.98rem}

/* visit */
.visit{background:var(--cream);border-block:1.5px solid var(--ink)}
.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px}
.hours{background:#fff;border:1.5px solid var(--ink);border-radius:18px;padding:30px 28px;box-shadow:8px 8px 0 var(--mint)}
.hours h3{font-size:2.2rem;margin-bottom:14px}
.hours dl{margin:0}
.hours .row{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:1rem}
.hours .row:last-child{border:0}
.hours dt{font-weight:700}
.hours .dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-5px)}
.hours dd{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink2)}
.hours dd.closed{color:var(--lac)}
.hours .note{font-size:.85rem;color:var(--ink2);margin-top:14px}
.addr{display:flex;flex-direction:column;gap:18px}
.addr .card{background:#fff;border:1.5px solid var(--ink);border-radius:18px;padding:22px 24px}
.addr .card h3{font-size:1.9rem;margin-bottom:6px}
.addr .card p{color:var(--ink2);font-size:.98rem}
.addr .acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.addr .acc span{font-size:.8rem;font-weight:600;background:var(--lilac);color:var(--wine);padding:5px 11px;border-radius:999px}
.map{border-radius:18px;overflow:hidden;border:1.5px solid var(--ink);aspect-ratio:16/8;background:var(--paper2)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* faq */
.faq{max-width:820px}
.faq details{border-bottom:1.5px solid var(--ink)}
.faq details:first-of-type{border-top:1.5px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;font-family:var(--d);font-size:2rem;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--b);font-weight:300;font-size:2.1rem;color:var(--lac);transition:transform .2s;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;color:var(--ink2)}

/* blog cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:#fff;border:1.5px solid var(--ink);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(42,22,38,.6)}
.post .th{aspect-ratio:16/10;background:var(--paper2);overflow:hidden;position:relative}
.post .th img{width:100%;height:100%;object-fit:cover}
.post .th .cat{position:absolute;top:12px;right:12px;background:var(--ink);color:#fff;font-size:.75rem;font-weight:700;padding:5px 11px;border-radius:999px}
.post .bd{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.post h3{font-size:2rem;line-height:.95}
.post p{color:var(--ink2);font-size:.95rem;flex:1}
.post .more{font-weight:700;color:var(--lac)}
.post .th.g1{background:linear-gradient(135deg,#F7C9CF,#E23A5A)}
.post .th.g2{background:linear-gradient(135deg,#EBDDF3,#7A1E3A)}
.post .th.g3{background:linear-gradient(135deg,#DDF0E6,#D3A55A)}
.post .th .big{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--d);font-size:6rem;color:#fff;line-height:1;text-shadow:0 6px 30px rgba(0,0,0,.25)}

/* cta */
.cta{background:var(--lac);color:#fff;text-align:center;padding:96px 0;position:relative;overflow:hidden}
.cta::before,.cta::after{content:"";position:absolute;width:520px;height:520px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:rgba(255,255,255,.08);top:-40%;left:-8%;transform:rotate(-20deg)}
.cta::after{top:auto;bottom:-50%;left:auto;right:-10%;transform:rotate(30deg)}
.cta h2{color:#fff;font-size:clamp(3.6rem,9vw,7.4rem)}
.cta p{margin:16px auto 30px;color:rgba(255,255,255,.9);font-size:1.15rem}
.cta .btn-ink{background:var(--ink)}
.cta .btn-outline{border-color:#fff;color:#fff}
.cta .btn-outline:hover{background:#fff;color:var(--lac)}

/* footer */
footer{background:var(--ink);color:var(--paper);padding:60px 0 120px;position:relative;overflow:hidden}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px;position:relative;z-index:1}
.foot h4{font-family:var(--d);font-size:1.8rem;margin-bottom:10px;color:#fff}
.foot a:hover{color:var(--lac)}
.foot ul{list-style:none;display:grid;gap:6px;font-size:.95rem;color:rgba(255,244,238,.82)}
.bigmark{font-family:var(--d);font-size:clamp(6rem,22vw,17rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,244,238,.28);white-space:nowrap;margin-top:40px;text-align:center;user-select:none}
.legal{font-size:.8rem;color:rgba(255,244,238,.55);margin-top:20px;text-align:center}

/* mobile bar */
.mbar{display:none}

/* article */
.art-hero{padding:56px 0 30px}
.art-hero h1{font-size:clamp(3.2rem,8vw,6.4rem);margin:14px 0 16px;text-wrap:balance}
.art-hero .meta{color:var(--ink2);font-size:.92rem;display:flex;gap:14px;flex-wrap:wrap}
.art-cover{border-radius:var(--r);overflow:hidden;border:1.5px solid var(--ink);margin:20px 0 40px;aspect-ratio:16/8}
.art-cover img{width:100%;height:100%;object-fit:cover}
.art-body{display:grid;grid-template-columns:minmax(0,720px) 300px;gap:56px;align-items:start;padding-bottom:80px}
.prose h2{font-size:clamp(2.4rem,4vw,3.4rem);margin:40px 0 14px}
.prose h3{font-size:1.9rem;margin:26px 0 8px}
.prose p{margin-bottom:16px;max-width:none;color:var(--ink2);font-size:1.08rem}
.prose ul,.prose ol{margin:0 24px 18px 0;color:var(--ink2);font-size:1.05rem}
.prose li{margin-bottom:8px}
.prose .callout{background:var(--paper2);border-right:5px solid var(--lac);border-radius:0 16px 16px 0;padding:18px 22px;margin:22px 0}
.prose .callout p{margin:0;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:14px 0 24px;font-size:.98rem}
.prose th,.prose td{border:1.5px solid var(--ink);padding:10px 12px;text-align:right}
.prose th{background:var(--lilac);font-family:var(--d);font-size:1.5rem;font-weight:700}
.aside{position:sticky;top:98px;display:grid;gap:18px}
.aside .box{background:#fff;border:1.5px solid var(--ink);border-radius:18px;padding:22px;box-shadow:8px 8px 0 var(--lilac)}
.aside h3{font-size:1.9rem;margin-bottom:8px}
.aside p{font-size:.95rem;color:var(--ink2);margin-bottom:14px}
.aside ul{list-style:none;display:grid;gap:8px;font-size:.95rem}
.aside li a{font-weight:600;color:var(--wine)}
.crumbs{font-size:.88rem;color:var(--ink2);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--lac)}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-art{width:min(100%,380px)}
  .why-grid,.steps,.posts{grid-template-columns:1fr 1fr}
  .moment-grid,.visit-grid{grid-template-columns:1fr}
  .art-body{grid-template-columns:1fr}
  .aside{position:static}
  .why::after{font-size:18rem}
}
@media (max-width:720px){
  body{font-size:16px}
  section{padding:60px 0}
  .nav{height:66px}
  .nav-links,.btn-phone{display:none}
  .brand .bs{display:none}
  .hero{padding:36px 0 24px}
  .hero h1{font-size:clamp(3.6rem,17vw,5.6rem)}
  .hero-art{width:min(100%,300px);margin-top:18px}
  .chip{font-size:.85rem;padding:10px 12px;max-width:160px}
  .chip.c1{left:-4%;top:6%}
  .chip.c2{right:-4%}
  .chip b{font-size:1.6rem}
  .badge-rot{width:96px;height:96px;left:0}
  .sec-head{grid-template-columns:1fr}
  .svc li{grid-template-columns:56px 1fr;gap:10px 14px;padding:20px 0}
  .svc li::before{font-size:2.4rem;grid-row:span 2}
  .svc li p{grid-column:2}
  .svc li .tag{grid-column:2;justify-self:start}
  .svc h3{font-size:1.9rem}
  .why{padding:48px 24px;width:calc(100% - 24px)}
  .why-grid,.steps,.posts{grid-template-columns:1fr}
  .why::after{font-size:11rem;bottom:-4%}
  .quote{padding:34px 26px}
  .moment-img{min-height:280px}
  .foot{grid-template-columns:1fr}
  .cta{padding:64px 0}
  .mbar{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:60;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(42,22,38,.92);backdrop-filter:blur(10px)}
  .mbar .btn{flex:1;padding:13px 10px;font-size:.95rem}
  footer{padding-bottom:110px}
}