:root{
    --plum-900:#241220;
    --plum-800:#34162e;
    --plum-700:#43213c;
    --lacquer:#8a94f2;
    --lacquer-light:#8a94f2;
    --beige:#fee9d2;
    --blush:#f3d9de;
    --cream:#fbf6f2;
    --ink:#2a1a24;
    --muted:#8a6d7c;
    --radius:18px;
    --tilte-service: #cde1f2;
}

  *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
    margin:0;
    font-family:'Manrope',sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    }
    h1,h2,h3,.display{font-family:'Fraunces',serif;}
    a{color:inherit;}
    img{max-width:100%;}

  /* ---------- NAV ---------- */
    .nav{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 28px;
    background: #020c45d7;
    backdrop-filter:blur(12px);
    color:var(--blush);
    }
    .nav .brand{font-family:'Fraunces',serif;font-size:20px;letter-spacing:.02em;display:flex;align-items:center;gap:10px;}
    .nav .brand .drop{width:35px;height:35px;border-radius:50% 50% 50% 50%;background: white;}
    .nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;font-size:14px;font-weight:600;}
    .nav ul a{text-decoration:none;opacity:.85;transition:opacity .2s;}
    .nav ul a:hover{opacity:1;}
    .nav-toggle{display:none;background:none;border:none;color:var(--blush);font-size:22px;cursor:pointer;}

  /* ---------- HERO ---------- */
    .hero{
    position:relative;
    background:radial-gradient(120% 140% at 20% -10%, #4c74b1 0%, #192649 85%);
    color:var(--blush);
    padding:100px 28px 140px;
    overflow:hidden;
    }
    .hero-inner{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:2;}
    .hero .eyebrow{
    font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--beige);
    font-weight:700;margin-bottom:18px;
    }
    .hero h1{font-size:clamp(38px,6vw,64px);line-height:1.05;margin:0 0 22px;font-weight:600;}
    .hero h1 em{font-style:italic;color:var(--lacquer-light); text-shadow: 0 0 .3rem #8e68a9;}
    .hero p{font-size:17px;color:var(--blush);opacity:.85;max-width:520px;margin:0 auto 34px;line-height:1.6;}
    .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
    .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 28px;border-radius:100px;border:none;
    font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
    cursor:pointer;text-decoration:none;transition:transform .18s ease, box-shadow .18s ease;
    }
    .btn-primary{background:var(--lacquer);color:#fff;box-shadow:0 10px 30px -8px var(--lacquer);}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px var(--lacquer);}
    .btn-ghost{background:transparent;color:var(--blush);border:1.5px solid rgba(243,217,222,.4);}
    .btn-ghost:hover{border-color:var(--blush);}

  /* dripping polish drops */
    .drip{position:absolute;top:0;border-radius:0 0 50% 50%;opacity:.85;animation:drip 6s ease-in-out infinite;}
    @keyframes drip{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(14px);}
    }
    .drip1{left:8%;width:6px;height:70px;background:linear-gradient(var(--lacquer),transparent);animation-delay:.2s;}
    .drip2{left:14%;width:4px;height:46px;background:linear-gradient(var(--beige),transparent);animation-delay:1.4s;}
    .drip3{right:10%;width:5px;height:90px;background:linear-gradient(var(--lacquer),transparent);animation-delay:.8s;}
    .drip4{right:18%;width:4px;height:38px;background:linear-gradient(var(--beige),transparent);animation-delay:2.1s;}

  /* swatch strip - signature element */
    .swatches{
    display:flex;justify-content:center;gap:14px;margin-top:46px;flex-wrap:wrap;
    }
    .swatch{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    background:none;border:none;cursor:pointer;color:var(--blush);
    font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;
    opacity:.7;transition:opacity .2s, transform .2s;
    }
    .swatch:hover{opacity:1;transform:translateY(-3px);}
    .swatch.active{opacity:1;}
    .swatch .cap{
    width:38px;height:38px;border-radius:50%;
    border:2px solid rgba(255,255,255,.25);
    position:relative;
    }
    .swatch.active .cap{border-color:var(--gold);box-shadow:0 0 0 4px rgba(203,161,53,.18);}
    .swatch .cap:after{
    content:'';position:absolute;inset:6px;border-radius:50%;
    background:var(--c,#fff);box-shadow:inset 0 -6px 10px rgba(0,0,0,.25), inset 0 4px 6px rgba(255,255,255,.5);
    }

  /* ---------- SECTIONS ---------- */
    section{padding:78px 28px;}
    .section-head{max-width:640px;margin:0 auto 46px;text-align:center;}
    .section-head {font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lacquer);font-weight:800;margin-bottom:10px;}
    .section-head h2{font-size:clamp(28px,4vw,40px);margin:0 0 12px;font-weight:600;}
    .section-head p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;}
    .tilte-services{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tilte-service);font-weight:800;margin-bottom:10px; text-shadow: 0 0 .5rem #a8c5e0;}

  /* catalog */
    .catalog-wrap{max-width:1040px;margin:0 auto;}
    .catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;}
    .service-card{
    background:#fff;border-radius:var(--radius);padding:24px;
    border:1px solid #f0e2e5;
    transition:transform .2s ease, box-shadow .2s ease;
    display:flex;flex-direction:column;gap:14px;position:relative;
    }
    .service-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(42,26,36,.25);}
    .service-card .tag{
    align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    padding:5px 10px;border-radius:100px;color:#fff;
    }
    .service-card h3{margin:0;font-size:19px;font-weight:600;}
    .service-card .desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0;flex:1;}
    .service-card .meta{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed #eddde1;padding-top:14px;}
    .service-card .price{font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--ink);}
    .service-card .duration{font-size:12.5px;color:var(--muted);font-weight:600;}
    .service-card button{
    margin-top:4px;width:100%;padding:11px;border-radius:100px;border:1.5px solid var(--ink);
    background:transparent;font-weight:700;font-size:13px;cursor:pointer;transition:.2s;
    }
    .service-card button:hover{background:var(--ink);color:#fff;}

  /* booking section */
    .booking{background:radial-gradient(120% 140% at 20% -10%, #4c74b1 0%, #192649 85%);}
    .booking .section-head p{color:rgb(255, 255, 255);}
    .booking .section-head .eyebrow{color:#fff;}
    .booking-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start;}
    .frase {
        color: #6877ff;
    }
    .Elegi {
        color: var(--beige);
    }
    @media(max-width:860px){.booking-grid{grid-template-columns:1fr;}}

    .panel{background:#0f153a;border-radius:var(--radius);padding:26px;border:1px solid #0f153a;}
    .panel h3{margin:0 0 18px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px; color: var(--beige);}
    .panel h3 .num{width:22px;height:22px;border-radius:50%;background:#e1dafb;color:#000;font-size:12px;display:flex;align-items:center;justify-content:center;font-family:'Manrope';}

    .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
    .cal-head button{background:none;border:1px solid rgba(243,217,222,.25);color:var(--blush);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;}
    .cal-head button:hover{border-color:var(--gold);color:var(--gold);}
    .cal-month{font-family:'Fraunces',serif;font-size:16px;text-transform:capitalize; color: var(--beige);}
    .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;}
    .cal-grid .dow{font-size:11px;color:#e1dafb;font-weight:700;padding-bottom:4px;text-transform:uppercase;}
    .cal-grid .day{
    aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    border-radius:10px;font-size:13px;cursor:pointer;background:rgba(255,255,255,.03);
    color:var(--blush); position:relative;
    }
    .cal-grid .day.empty{visibility:hidden;cursor:default;}
    .cal-grid .day.closed{color:rgba(243,217,222,.25);cursor:not-allowed;}
    .cal-grid .day.past{color:rgba(243,217,222,.15);cursor:not-allowed;}
    .cal-grid .day.open:hover{background:rgba(203,161,53,.18);}
    .cal-grid .day.selected{background:var(--lacquer);color:#fff;font-weight:700;}
    .cal-grid .day.full{color:rgba(243,217,222,.3);cursor:not-allowed;text-decoration:line-through;}

    .slots{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;}
    .slot{
    padding:8px 12px;border-radius:100px;border:1px solid rgba(243,217,222,.2);
    background:transparent;color:var(--blush);font-size:12.5px;cursor:pointer;font-weight:600;
    }
    .slot:hover{border-color:var(--gold);}
    .slots-empty{font-size:13px;color:rgba(243,217,222,.5);}

    .field{margin-bottom:14px;}
    .field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:rgba(243,217,222,.75);text-transform:uppercase;letter-spacing:.05em;}
    .field input, .field select{
    width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(243,217,222,.2);
    background:rgba(255,255,255,.05);color:var(--blush);font-family:'Manrope';font-size:14px;
    }
    .field input::placeholder{color:rgba(243,217,222,.4);}
    .field input:focus, .field select:focus{outline:2px solid var(--gold);outline-offset:1px;}
    .field select option{color:#000;}

    .summary{background:rgba(255,255,255,.04);border-radius:12px;padding:14px 16px;font-size:13px;margin-bottom:16px;line-height:1.8; color: var(--beige);}
    .summary b{color:var(--beige);}
    .summary .empty{color:rgba(243,217,222,.45);}

    .submit-btn{width:100%;padding:15px;border-radius:100px;border:none;background:var(--lacquer);color:#fff;font-weight:800;font-size:14.5px;cursor:pointer;}
    .submit-btn:disabled{background:rgba(255,255,255,.08);color:rgba(243,217,222,.35);cursor:not-allowed;}
    .submit-btn:not(:disabled):hover{background:var(--lacquer-light);}

    .confirm-box{display:none;text-align:center;padding:20px 10px;}
    .confirm-box .check{width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--plum-900);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:22px;font-weight:800;}
    .confirm-box h4{margin:0 0 8px;font-family:'Fraunces',serif;font-size:19px;}
    .confirm-box p{font-size:13px;color:rgba(243,217,222,.7);line-height:1.6;margin:0 0 4px;}

  /* reminders note */
    .reminders{max-width:760px;margin:0 auto;text-align:center;}
    .reminders .icon-row{display:flex;justify-content:center;gap:22px;margin-bottom:22px;}
    .reminders .icon-row div{
    width:52px;height:52px;border-radius:50%;background:var(--blush);color:var(--lacquer);
    display:flex;align-items:center;justify-content:center;font-size:20px;
    }
    .note{
    background:#fff;border:1px dashed #e3c3cb;border-radius:14px;padding:18px 22px;font-size:13.5px;
    color:var(--muted);text-align:left;line-height:1.7;margin-top:24px;
    }
    .note b{color:var(--beige);}

    footer{padding:36px 28px;text-align:center;color:var(--muted);font-size:12.5px;background:var(--cream);border-top:1px solid #f0e2e5;}

    @media(max-width:720px){
    .nav ul{display:none;}
    }
    @media (prefers-reduced-motion: reduce){
    .drip{animation:none;}
    html{scroll-behavior:auto;}
    }