:root {
    --primary: #00d4ff;
    --dark: #050816;
    --card: #10172a;
    --text: #ffffff;
    --glass: rgba(255,255,255,0.05);
}

body {
    background: var(--dark);
    color: var(--text);
    font-family: Inter, sans-serif;
    overflow-x: hidden;
}

.page-container {

    width: 100%;

    max-width: 1800px;

    margin: 0 auto;

    padding-left: 60px;

    padding-right: 60px;
}

/* ==========================================
   NAVIGATION
========================================== */

/* NAVBAR */

.glass-nav {

    background: #fff;

    border-bottom: 1px solid #ececec;

    box-shadow: 0 2px 10px rgba(0,0,0,.05);

    padding: 1px 0;
}

.nav-wrapper {

    display: flex;

    align-items: center;

    width: 100%;
}

.navbar-logo {

    height: 80px;
}

.navbar-nav {

    margin: 0 auto;

    display: flex;

    flex-direction: row;

    gap: 30px;

    align-items: center;
}

.nav-link {

    color: #444 !important;

    font-size: 1rem;

    font-weight: 500;

    padding: 10px 18px !important;

    border-radius: 999px;

    transition: all .25s ease;
}

.nav-link:hover {

    background: #f5f2ff;

    color: #6c63ff !important;
}

.nav-link.active {

    background:
        linear-gradient(
            135deg,
            rgba(108,99,255,.12),
            rgba(108,99,255,.08)
        );

    color: #6c63ff !important;

    box-shadow:
        inset 0 0 0 1px rgba(108,99,255,.08);

    font-weight: 600;
}

.btn-nav {

    background: #6c63ff;

    color: white;

    border-radius: 999px;

    padding: 12px 24px;
}

.navbar-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;
}

.navbar-logo {

    height: 50px;

    width: auto;
}

.navbar-brand-text {

    color: #222;

    font-size: 1.9rem;

    font-weight: 300;

    letter-spacing: 0.02em;

    white-space: nowrap;
}

.brand-highlight {

    color: #6c63ff;

    font-weight: 700;
}

.success-message{

    display:none;

    text-align:center;

    padding:30px;

    margin-bottom:30px;

    border-radius:20px;

    background:
        rgba(0,212,255,.08);

    border:
        1px solid rgba(0,212,255,.25);

    animation:
        fadeIn .4s ease;
}

.success-icon{

    width:60px;
    height:60px;

    margin:0 auto 15px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;
    font-weight:bold;

    background:
        linear-gradient(
            135deg,
            #00d4ff,
            #00ffb3
        );

    color:#08111f;
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ==========================================
   HERO SECTION
========================================== */

.hero-section {

    min-height: 80vh;

    display: grid;

    grid-template-columns: 50% 50%;

    background: #f7f7f7;

    overflow: hidden;
}

/* LEFT SIDE */

.hero-left {

    padding: 180px 80px 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background: white;
}

.hero-badge {

    display: inline-block;

    width: fit-content;

    padding: 10px 18px;

    border-radius: 999px;

    background: rgba(80,120,255,.08);

    color: #4f46e5;

    font-weight: 600;

    margin-bottom: 30px;
}

.hero-title {

    font-size: clamp(3.8rem, 6vw, 5.8rem);

    line-height: 1.05;

    font-weight: 800;

    color: #111;

    margin-bottom: 30px;
}

.hero-title span {

    color: #5b5bf7;

    font-style: italic;

    font-weight: 500;
}

.hero-description {

    max-width: 520px;

    font-size: 1.15rem;

    line-height: 1.8;

    color: #777;

    margin-bottom: 40px;
}

.hero-search {

    max-width: 700px;

    width: 100%;

    margin-bottom: 50px;
}

.search-box {

    display: flex;

    align-items: center;

    background: white;

    border: 1px solid #e8e8e8;

    border-radius: 999px;

    padding: 8px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);
}

.search-icon {

    padding: 0 18px;

    color: #999;

    font-size: 1rem;
}

.search-input {

    flex: 1;

    border: none;

    outline: none;

    font-size: 1rem;

    padding: 14px 0;

    background: transparent;
}

.search-btn {

    border: none;

    background: #6c63ff;

    color: white;

    font-weight: 600;

    padding: 14px 28px;

    border-radius: 999px;

    transition: .25s ease;
}

.search-btn:hover {

    background: #574ef7;
}

.hero-btn {

    padding: 14px 28px;

    border-radius: 999px;

    font-weight: 600;
}

.hero-btn-secondary {

    border-radius: 999px;

    padding: 14px 28px;

    border: 1px solid #ddd;
}

.hero-stats {

    display: flex;

    align-items: flex-start;

    gap: 70px;

    margin-top: 60px;

    padding-top: 35px;

    border-top: 1px solid #e5e5e5;
}

.hero-stat {

    display: flex;

    flex-direction: column;
}

.hero-stat h3 {

    margin: 0;

    font-size: 2.4rem;

    font-weight: 800;

    line-height: 1;

    color: #111;
}

.hero-stat span {

    margin-top: 8px;

    font-size: 0.8rem;

    font-weight: 500;

    letter-spacing: 0.08em;

    color: #8a8a8a;
}

.plus {

    color: #6c63ff;
}

.star {

    color: #6c63ff;

    font-size: 0.9em;
}

/* RIGHT SIDE */

.hero-qr-container {

    display: flex;

    justify-content: center;

    gap: 18px;

    margin-top: 5px;
}

.qr-card {

    width: 130px;

    padding: 14px;

    background: white;

    border-radius: 18px;

    text-align: center;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.qr-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.25);
}

.qr-image {

    width: 90px;

    height: 90px;

    object-fit: contain;

    display: block;

    margin: 0 auto 12px;
}

.qr-title {

    font-size: .95rem;

    font-weight: 700;

    color: #111;

    margin-bottom: 4px;
}

.qr-subtitle {

    font-size: .8rem;

    color: #8a8a8a;

    line-height: 1.4;
}

.hero-right {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 40px 60px;

    background:
        radial-gradient(
            circle at center,
            #101a3a,
            #050816
        );

    gap: 30px;
}

.app-showcase {

    width: 100%;

    max-width: 500px;

    display: flex;

    justify-content: center;
}

.app-showcase-product {

    width: 200%;

    max-width: 1000px;

    display: flex;

    justify-content: center;
}

.phone-mockup {

    width: 420px;

    max-width: 95%;

    background: transparent;

    border: none;

    box-shadow: none;

    padding: 0;
}

.phone-screen {

    background: transparent;

    border-radius: 0;

    overflow: visible;
}

.floating-card {

    position: absolute;

    padding: 18px 25px;

    background: white;

    border-radius: 20px;

    font-weight: 600;

    box-shadow:
        0 15px 40px rgba(0,0,0,.15);
}

.card-one {

    bottom: 180px;
    left: 100px;
}

.card-two {

    top: 180px;
    right: 100px;
}

.app-placeholder {

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:transparent;

    overflow:hidden;
}

.dashboard-image {

    width: 60%;

    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 20px 50px rgba(0,0,0,.35)
        );
}

.gradient-text {

    display: block;

    margin-top: 8px;

    color: #6c63ff;

    font-style: italic;

    font-weight: 400;
}

.whatsapp-cta {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    background: white;

    border-radius: 24px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);

    max-width: 420px;
}

.whatsapp-qr {

    width: 110px;

    height: 110px;

    object-fit: contain;

    flex-shrink: 0;
}

.whatsapp-content h4 {

    margin: 0 0 8px;

    color: #111;

    font-size: 1.2rem;

    font-weight: 700;
}

.whatsapp-content p {

    margin: 0;

    color: #666;

    line-height: 1.6;

    font-size: 0.95rem;
}

.video-container {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.about-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.video-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,.1),
            rgba(0,0,0,.25)
        );

    pointer-events: none;
}

.video-container:hover {

    transform: translateY(-5px);

    box-shadow:
        0 0 40px rgba(0,212,255,.2);
}

/* ==========================================
   WHY MST SECTION
========================================== */

.who-we-are-section {

    padding: 120px 0;

    background: #f8f8f8;
}

.who-grid {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    gap: 80px;

    align-items: center;
}

.who-title {

    font-size: clamp(3rem, 5vw, 5rem);

    line-height: 1.05;

    font-weight: 800;

    color: #111;

    margin: 15px 0 30px;
}

.who-title span {

    color: #6c63ff;

    font-style: italic;

    font-weight: 400;
}

.who-description {

    font-size: 1.25rem;

    line-height: 1.8;

    color: #707070;

    max-width: 700px;

    margin-bottom: 25px;
}

.trust-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 40px;
}

.trust-tags span {

    background: #efebe7;

    padding: 12px 20px;

    border-radius: 999px;

    font-weight: 600;

    color: #222;
}

/* ==========================================
   STATS
========================================== */

.stats-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;
}

.stat-card {

    padding: 50px 45px;

    border-radius: 32px;

    min-height: 220px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.stat-card h3 {

    font-size: 4rem;

    font-weight: 800;

    margin-bottom: 20px;
}

.stat-card p {

    font-size: 1.35rem;

    margin: 0;
}

.stat-card.primary {

    background:
        linear-gradient(
            135deg,
            #6f5cff,
            #4d39c8
        );

    color: white;
}

.stat-card.light {

    background: #f1eeeb;

    color: #111;
}

.stat-card.dark {

    background:
        linear-gradient(
            135deg,
            #111322,
            #090b17
        );

    color: white;
}

.stats-section {
    padding: 100px 0;
    background: #0c1120;
}

/* ==========================================
   CONTENT SECTIONS
========================================== */

.section-dark {
    padding: 120px 0;
}

.section-light {
    padding: 120px 0;
    background: #0d1325;
}

.section-tag {

    display: inline-block;

    font-size: 0.85rem;

    letter-spacing: 2px;

    font-weight: 600;

    color: var(--primary);

    margin-bottom: 20px;

    text-transform: uppercase;
}

.section-title {

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 30px;
}

.section-description {

    font-size: 1.5rem;

    line-height: 1.9;

    color:
        rgba(255,255,255,.8);

    max-width: 650px;
}

.platform-showcase{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
}

.platform-visual{

    width:100%;

    margin-bottom:50px;
}

.platform-visual img{

    width:100%;

    max-width:1400px;

    height:auto;

    filter:
        drop-shadow(
            0 0 50px rgba(0,212,255,.2)
        );
}

.platform-card{

    max-width:1000px;

    margin:auto;

    padding:50px;

    border-radius:24px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);
}

.platform-features{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;

    margin-top:40px;
}

.platform-features div{

    padding:16px;

    border-radius:14px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.products-section .row {
    min-height: 500px;
}

/* ==========================================
   SAVING SECTION
========================================== */

.savings-section {

    background: #17171f;

    padding: 120px 0;
}

.savings-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.gold {

    color: #d4b254;
}

.savings-title {

    margin-top: 15px;

    font-size: clamp(3rem,5vw,5rem);

    line-height: 1.05;

    font-weight: 800;

    color: white;

    margin-bottom: 30px;
}

.savings-title span {

    color: #d4b254;

    font-style: italic;

    font-weight: 400;
}

.savings-description {

    color: rgba(255,255,255,.65);

    font-size: 1.25rem;

    line-height: 1.7;

    max-width: 600px;

    margin-bottom: 50px;
}

.discount-btn {

    display: inline-block;

    background: #d4b254;

    color: #111;

    text-decoration: none;

    font-weight: 700;

    padding: 18px 38px;

    border-radius: 999px;

    transition: .3s;
}

.discount-btn:hover {

    transform: translateY(-2px);

    color: #111;
}

.pricing-comparison {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;
}

.price-card {

    width: 100%;

    max-width: 760px;

    border-radius: 24px;

    padding: 28px 35px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.walkin {

    background: #23232b;

    border: 1px solid rgba(255,255,255,.08);
}

.walkin .price-label {

    color: white;

    font-size: 1.7rem;

    font-weight: 600;
}

.walkin .price-value {

    color: rgba(255,255,255,.45);

    font-size: 2.2rem;

    font-weight: 800;

    text-decoration: line-through;
}

.mst {

    background:
        linear-gradient(
            135deg,
            #30255c,
            #241f4b
        );

    border: 2px solid #5c4adf;
}

.mst .price-label {

    color: white;

    font-size: 1.7rem;

    font-weight: 700;
}

.mst .price-value {

    color: #f0d57c;

    font-size: 2.3rem;

    font-weight: 800;
}

.exclusive-badge {

    margin-left: 20px;

    background: #6c63ff;

    color: white;

    font-size: .8rem;

    padding: 8px 14px;

    border-radius: 999px;

    font-weight: 700;
}

.arrow {

    color: rgba(255,255,255,.45);

    font-size: 2rem;

    line-height: 1;
}

.saving-pill {

    background: #143125;

    color: #35d36b;

    font-size: 1.3rem;

    font-weight: 700;

    padding: 16px 40px;

    border-radius: 999px;
}

/* ==========================================
   OFFER SECTION
========================================== */

.offers-section {

    background: #0f0f12;

    padding: 100px 0;
}

.offers-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;
}

.offers-title {

    font-size: clamp(3rem,5vw,4.5rem);

    font-weight: 800;

    color: white;

    margin: 0;
}

.offers-title span {

    color: #d4b254;

    font-style: italic;

    font-weight: 400;
}

.view-all-link {

    color: #d4b254;

    text-decoration: none;

    font-size: 1.1rem;

    font-weight: 600;
}

.offers-grid {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 30px;
}

.featured-offer {

    background:
        linear-gradient(
            135deg,
            #22103c,
            #3a1c68
        );

    border-radius: 32px;

    padding: 40px;

    min-height: 380px;

    display: flex;

    flex-direction: column;
}

.offer-tag {

    align-self: flex-start;

    background: #d4b254;

    color: #111;

    padding: 10px 20px;

    border-radius: 999px;

    font-size: .95rem;

    font-weight: 700;

    margin-bottom: 40px;
}

.featured-offer h3 {

    color: white;

    font-size: 3rem;

    line-height: 1.15;

    font-weight: 800;

    margin-bottom: 20px;
}

.featured-offer p {

    color: rgba(255,255,255,.65);

    font-size: 1.3rem;

    margin-bottom: auto;
}

.offer-btn {

    display: inline-block;

    align-self: flex-start;

    background: white;

    color: #111;

    text-decoration: none;

    font-weight: 700;

    padding: 16px 36px;

    border-radius: 999px;

    margin-top: 50px;
}

.side-offers {

    display: flex;

    flex-direction: column;

    gap: 30px;
}

.offer-card {

    flex: 1;

    border-radius: 30px;

    padding: 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 175px;
}

.offer-card.blue {

    background:
        linear-gradient(
            135deg,
            #13304f,
            #19456d
        );
}

.offer-card.gold {

    background:
        linear-gradient(
            135deg,
            #23220c,
            #3a3510
        );
}

.offer-card h4 {

    color: white;

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 10px;
}

.offer-card p {

    color: rgba(255,255,255,.55);

    font-size: 1.2rem;

    margin: 0;
}

.offer-value {

    font-size: 5rem;

    font-weight: 800;

    color: rgba(255,255,255,.12);

    line-height: 1;
}

/* ==========================================
   SALON SECTION
========================================== */
.salons-section {

    padding: 120px 0;

    background: #f8f7f5;
}

.section-header {

    text-align: center;

    margin-bottom: 60px;
}

.section-tag {

    color: #6c63ff;

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: .08em;

    margin-bottom: 12px;
}

.salons-title {

    font-size: clamp(3rem,5vw,5rem);

    font-weight: 800;

    color: #111;
}

.salons-title span {

    color: #6c63ff;

    font-style: italic;

    font-weight: 400;
}

.salons-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}

.salon-card {

    background: white;

    border-radius: 32px;

    overflow: hidden;

    border: 1px solid #ececec;

    transition: .3s ease;
}

.salon-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.08);
}

.salon-image-wrapper {

    position: relative;

    height: 260px;

    overflow: hidden;
}

.salon-image {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.offer-badge {

    position: absolute;

    top: 16px;

    right: 16px;

    background: #6c63ff;

    color: white;

    padding: 10px 16px;

    border-radius: 999px;

    font-size: .85rem;

    font-weight: 700;
}

.trusted-badge {

    position: absolute;

    bottom: 16px;

    right: 16px;

    background: white;

    color: #6c63ff;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: .85rem;

    font-weight: 700;
}

.salon-content {

    padding: 28px;
}

.salon-name {

    font-size: 2rem;

    font-weight: 700;

    color: #111;

    margin-bottom: 8px;
}

.salon-description {

    color: #777;

    font-size: 1.1rem;

    margin-bottom: 20px;
}

.salon-meta {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 20px;
}

.meta-rating {

    color: #111;

    font-weight: 700;
}

.meta-distance {

    color: #777;
}

.meta-status.open {

    color: #20bf55;

    font-weight: 700;
}

.meta-status.closed {

    color: #ef4444;

    font-weight: 700;
}

.service-tags {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}

.service-tag {

    background: #f4f4f4;

    border-radius: 999px;

    padding: 8px 14px;

    font-size: .9rem;

    color: #666;
}
/* ==========================================
   MARKETTING PAGE
========================================== */

.marketing-section {

    background:
        radial-gradient(
            circle at center,
            rgba(85,67,185,.18),
            #161821 45%,
            #0d0e16 100%
        );

    padding: 140px 0;
}

.marketing-layout {

    display: grid;

    grid-template-columns: 1fr 650px;

    gap: 100px;

    align-items: center;
}

.marketing-title {

    color: white;

    font-size: clamp(4rem, 6vw, 6.5rem);

    line-height: 1.05;

    font-weight: 800;

    margin-bottom: 30px;
}

.marketing-title span {

    display: block;

    color: #d4b254;

    font-style: italic;

    font-weight: 400;
}

.marketing-description {

    color: rgba(255,255,255,.60);

    font-size: 1.4rem;

    line-height: 1.7;

    max-width: 850px;

    margin-bottom: 45px;
}

.marketing-services {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-bottom: 45px;
}

.marketing-item {

    display: flex;

    align-items: center;

    gap: 18px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 999px;

    padding: 18px 24px;
}

.marketing-icon {

    font-size: 1.8rem;
}

.marketing-item h4 {

    color: white;

    margin: 0;

    font-size: 1.4rem;

    font-weight: 700;
}

.marketing-item p {

    color: rgba(255,255,255,.45);

    margin: 4px 0 0;

    font-size: 1rem;
}

.marketing-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 34px;

    border-radius: 999px;

    background: #6c63ff;

    color: white;

    text-decoration: none;

    font-weight: 700;

    font-size: 1.2rem;
}

.dashboard-card {

    background: rgba(255,255,255,.05);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 40px;

    padding: 45px;
}

.dashboard-label {

    color: #d4b254;

    font-size: .95rem;

    font-weight: 700;

    margin-bottom: 25px;
}

.dashboard-number {

    color: white;

    font-size: 5rem;

    font-weight: 800;

    line-height: 1;
}

.dashboard-number span {

    color: #d4b254;
}

.dashboard-text {

    color: rgba(255,255,255,.55);

    font-size: 1.25rem;

    margin: 20px 0 35px;
}

.channel {

    margin-bottom: 28px;
}

.channel-row {

    display: flex;

    justify-content: space-between;

    color: white;

    margin-bottom: 10px;

    font-weight: 600;
}

.progress {

    height: 8px;

    border-radius: 999px;

    background: rgba(255,255,255,.08);

    overflow: hidden;
}

.bar {

    height: 100%;

    border-radius: 999px;
}

.instagram {

    width: 38%;

    background: linear-gradient(
        90deg,
        #ff0066,
        #9333ea
    );
}

.facebook {

    width: 28%;

    background: #3b82f6;
}

.google {

    width: 20%;

    background: #d4b254;
}

.youtube {

    width: 14%;

    background: #ff0033;
}

/* ==========================================
   ABOUT US PAGE
========================================== */

.salon-hero {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at center,
            rgba(67,53,155,.35),
            #0f111d 45%,
            #08090f 100%
        );

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 120px 40px 80px;
}

.salon-hero-content {

    max-width: 1200px;

    width: 100%;
}

.salon-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 30px;

    border-radius: 999px;

    background:
        rgba(108,99,255,.12);

    border:
        1px solid rgba(108,99,255,.25);

    color: #b3a7ff;

    font-weight: 600;

    margin-bottom: 40px;
}

.salon-hero-title {

    color: white;

    font-size: clamp(4rem, 8vw, 8rem);

    line-height: 1.05;

    font-weight: 800;

    margin-bottom: 35px;
}

.salon-hero-title span {

    color: #d4b254;

    font-style: italic;

    font-weight: 400;
}

.salon-hero-description {

    color: rgba(255,255,255,.70);

    font-size: 1.6rem;

    line-height: 1.8;

    max-width: 900px;

    margin: 0 auto 60px;
}

.salon-hero-actions {

    display: flex;

    justify-content: center;

    gap: 24px;

    margin-bottom: 90px;
}

.btn-salon-primary {

    background: #d4b254;

    color: #111;

    text-decoration: none;

    font-weight: 700;

    padding: 20px 42px;

    border-radius: 999px;

    font-size: 1.15rem;
}

.btn-salon-secondary {

    background: transparent;

    color: white;

    text-decoration: none;

    font-weight: 600;

    padding: 20px 42px;

    border-radius: 999px;

    border: 2px solid rgba(255,255,255,.18);

    font-size: 1.15rem;
}

.salon-divider {

    height: 1px;

    background:
        rgba(255,255,255,.08);

    margin-bottom: 50px;
}

.salon-stats {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 40px;
}

.salon-stat h3 {

    color: white;

    font-size: 4.5rem;

    font-weight: 800;

    margin-bottom: 10px;
}

.salon-stat h3 span {

    color: #d4b254;
}

.salon-stat p {

    color: rgba(255,255,255,.45);

    font-weight: 700;

    letter-spacing: .05em;

    margin: 0;
}

.features-section {

    background: #f8f8f8;

    padding: 120px 0;
}

.features-header {

    text-align: center;

    margin-bottom: 70px;
}

.features-title {

    font-size: clamp(3rem, 5vw, 5rem);

    font-weight: 800;

    color: #111;

    margin-top: 10px;
}

.features-title span {

    color: #6c63ff;

    font-style: italic;

    font-weight: 400;
}

.features-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;
}

.feature-card {

    background: white;

    border: 1px solid #e7e7e7;

    border-radius: 32px;

    padding: 34px;

    min-height: 250px;

    transition: all .3s ease;
}

.feature-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.06);
}

.feature-icon {

    width: 72px;

    height: 72px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    margin-bottom: 24px;
}

.purple {
    background: #f0ebff;
}

.beige {
    background: #f7f4eb;
}

.green {
    background: #edf8f0;
}

.pink {
    background: #fdeff1;
}

.blue {
    background: #edf3ff;
}

.gold {
    background: #fbf5e7;
}

.feature-card h3 {

    font-size: 2rem;

    font-weight: 700;

    color: #111;

    margin-bottom: 14px;
}

.feature-card p {

    font-size: 1.15rem;

    line-height: 1.7;

    color: #757575;

    margin: 0;
}

.onboarding-section {

    padding: 140px 0;

    background: #f8f8f8;
}

.onboarding-header {

    text-align: center;

    margin-bottom: 100px;
}

.onboarding-title {

    font-size: clamp(3rem, 5vw, 5.5rem);

    font-weight: 800;

    color: #111;

    margin-top: 10px;
}

.onboarding-title span {

    color: #6c63ff;

    font-style: italic;

    font-weight: 400;
}

.timeline-container {

    position: relative;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;
}

.timeline-line {

    position: absolute;

    top: 44px;

    left: 12%;

    right: 12%;

    height: 3px;

    background: #6c63ff;

    z-index: 1;
}

.timeline-step {

    position: relative;

    text-align: center;

    z-index: 2;
}

.step-circle {

    width: 92px;

    height: 92px;

    border-radius: 50%;

    background: #f8f8f8;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.2rem;

    font-weight: 700;

    margin: 0 auto 25px;
}

.purple {

    border: 4px solid #6c63ff;

    color: #6c63ff;
}

.gold {

    border: 4px solid #c9a74d;

    color: #c9a74d;
}

.green {

    border: 4px solid #2ebf63;

    color: #2ebf63;
}

.blue {

    border: 4px solid #4f7fff;

    color: #4f7fff;
}

.timeline-step h3 {

    font-size: 2rem;

    font-weight: 700;

    color: #111;

    margin-bottom: 10px;
}

.timeline-step p {

    color: #7a7a7a;

    font-size: 1.15rem;

    line-height: 1.6;

    max-width: 280px;

    margin: 0 auto;
}

.cta-section {

    padding: 140px 20px;

    background:
        radial-gradient(
            circle at center,
            rgba(84,67,185,.40),
            #141622 45%,
            #0b0c13 100%
        );

    text-align: center;

    overflow: hidden;
}

.cta-container {

    max-width: 1200px;

    margin: 0 auto;
}

.cta-title {

    font-size: clamp(4rem, 8vw, 7rem);

    line-height: 1.05;

    font-weight: 800;

    color: white;

    margin-bottom: 40px;
}

.cta-title span {

    color: #d4b254;

    font-style: italic;

    font-weight: 400;
}

.cta-description {

    max-width: 1100px;

    margin: 0 auto 70px;

    color: rgba(255,255,255,.60);

    font-size: 2rem;

    line-height: 1.6;
}

.cta-actions {

    display: flex;

    justify-content: center;

    gap: 20px;
}

.cta-primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 22px 46px;

    border-radius: 999px;

    background: #d4b254;

    color: #111;

    text-decoration: none;

    font-weight: 700;

    font-size: 1.35rem;

    transition: .3s ease;
}

.cta-primary-btn:hover {

    transform: translateY(-2px);

    color: #111;
}

.cta-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 22px 46px;

    border-radius: 999px;

    border: 2px solid rgba(255,255,255,.18);

    color: white;

    text-decoration: none;

    font-weight: 600;

    font-size: 1.35rem;

    transition: .3s ease;
}

.cta-secondary-btn:hover {

    background: rgba(255,255,255,.05);

    color: white;
}

@media (max-width: 1200px) {

    .features-grid {

        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .features-grid {

        grid-template-columns: 1fr;
    }

    .feature-card {

        min-height: auto;
    }

    .features-section {

        padding: 80px 0;
    }
}


/* ==========================================
   PRODUCTS
========================================== */

.app-section {

    background: #17171f;

    padding: 120px 0;
}

.app-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;
}

.app-title {

    color: white;

    font-size: clamp(4rem,6vw,6rem);

    line-height: 1.05;

    font-weight: 800;

    margin-bottom: 30px;
}

.app-title span {

    color: #d4b254;

    font-style: italic;

    font-weight: 400;
}

.app-description {

    color: rgba(255,255,255,.60);

    font-size: 1.4rem;

    line-height: 1.7;

    max-width: 700px;

    margin-bottom: 40px;
}

.store-buttons {

    display: flex;

    gap: 20px;

    margin-bottom: 40px;
}

.store-btn {

    display: flex;

    align-items: center;

    gap: 15px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 18px;

    padding: 18px 22px;

    color: white;

    text-decoration: none;
}

.store-btn i {

    font-size: 2rem;
}

.store-btn small {

    display: block;

    color: rgba(255,255,255,.55);
}

.store-btn strong {

    display: block;

    font-size: 1.25rem;
}

.qr-row {

    display: flex;

    gap: 24px;
}

.qr-card {

    width: 180px;

    background: white;

    border-radius: 30px;

    padding: 20px;

    text-align: center;
}

.qr-card img {

    width: 100%;

    max-width: 120px;

    margin-bottom: 15px;
}

.qr-card h5 {

    color: #6c63ff;

    font-weight: 700;

    margin-bottom: 5px;
}

.qr-card p {

    color: #777;

    margin: 0;
}

.app-showcase-image {

    width: 100%;

    max-width: 1100px;

    height: auto;
}

.app-showcase-product-image {

    width: 100%;

    max-width: 1100px;

    height: auto;
}

.app-highlights-section {

    padding: 120px 0;

    background: #f8f8f8;
}

.app-highlights-header {

    text-align: center;

    margin-bottom: 70px;
}

.app-highlights-title {

    font-size: clamp(3rem, 5vw, 5.5rem);

    font-weight: 800;

    color: #111;

    margin-top: 10px;
}

.app-highlights-title span {

    color: #6c63ff;

    font-style: italic;

    font-weight: 400;
}

.app-highlights-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;
}

.highlight-card {

    background: white;

    border: 1px solid #e7e7e7;

    border-radius: 30px;

    padding: 40px 30px;

    text-align: center;

    transition: all .3s ease;

    min-height: 250px;
}

.highlight-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.06);
}

.highlight-icon {

    font-size: 3rem;

    margin-bottom: 25px;
}

.highlight-card h3 {

    font-size: 2rem;

    font-weight: 700;

    color: #111;

    margin-bottom: 14px;
}

.highlight-card p {

    color: #777;

    font-size: 1.15rem;

    line-height: 1.6;

    margin: 0;
}

.download-app-section {

    padding: 140px 0;

    background: #faf9f7;
}

.download-layout {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 80px;

    align-items: center;
}

.download-title {

    font-size: clamp(3.5rem, 5vw, 5.5rem);

    line-height: 1.1;

    font-weight: 800;

    color: #111;

    margin-bottom: 35px;
}

.download-title span {

    color: #6c63ff;

    font-style: italic;

    font-weight: 400;
}

.download-description {

    max-width: 700px;

    color: #777;

    font-size: 1.4rem;

    line-height: 1.8;

    margin-bottom: 50px;
}

.store-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}

.store-btn {

    display: flex;

    align-items: center;

    gap: 16px;

    background: #2b2b31;

    color: white;

    text-decoration: none;

    border-radius: 18px;

    padding: 18px 24px;

    min-width: 230px;

    transition: .3s ease;
}

.store-btn:hover {

    transform: translateY(-2px);

    color: white;
}

.store-btn i {

    font-size: 2.5rem;
}

.store-btn small {

    display: block;

    color: rgba(255,255,255,.6);

    font-size: .9rem;
}

.store-btn strong {

    display: block;

    font-size: 1.6rem;

    font-weight: 700;
}

.download-qr-section {

    display: flex;

    gap: 40px;
}

.download-qr-card {

    width: 320px;

    background: white;

    border: 1px solid #e9e9e9;

    border-radius: 40px;

    padding: 30px;

    text-align: center;
}

.download-qr-card img {

    width: 100%;

    max-width: 220px;

    margin-bottom: 25px;
}

.download-qr-card h4 {

    color: #6c63ff;

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 8px;
}

.whatsapp-title {

    color: #2ebf63 !important;
}

.download-qr-card p {

    color: #888;

    font-size: 1.3rem;

    margin: 0;
}

/* ==========================================
   FOOTER
========================================== */

.footer-section {

    background: #171515;

    padding-top: 80px;

    padding-bottom: 40px;
}

.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        1fr;

    gap: 80px;

    padding-bottom: 50px;
}

.footer-brand {

    max-width: 320px;
}

.footer-logo {

    height: 55px;

    margin-bottom: 25px;
}

.footer-brand p {

    color: rgba(255,255,255,.45);

    font-size: 1.2rem;

    line-height: 1.6;

    margin: 0;
}

.footer-column h5 {

    color: rgba(255,255,255,.55);

    font-size: .95rem;

    font-weight: 700;

    margin-bottom: 20px;

    letter-spacing: .04em;
}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.footer-column a {

    color: rgba(255,255,255,.45);

    text-decoration: none;

    font-size: 1.25rem;

    transition: .25s ease;
}

.footer-column a:hover {

    color: white;
}

.footer-bottom {

    border-top: 1px solid rgba(255,255,255,.08);

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: rgba(255,255,255,.35);

    font-size: 1rem;
}

.footer-brand-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 25px;
}

.footer-logo {

    height: 50px;

    width: auto;
}

.footer-brand-text {

    color: white;

    font-size: 2rem;

    font-weight: 300;

    letter-spacing: 0.02em;
}

.footer-brand-text span {

    color: #6c63ff;

    font-weight: 700;
}


.clickable-card {

    cursor: pointer;
}

.clickable-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1200px) {

    .app-highlights-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .download-layout {

        grid-template-columns: 1fr;
    }

    .download-content {

        text-align: center;
    }

    .download-description {

        margin-left: auto;
        margin-right: auto;
    }

    .store-buttons {

        justify-content: center;
    }

    .download-qr-section {

        justify-content: center;
    }
}

@media (max-width: 1100px) {

    .marketing-layout {

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .marketing-dashboard {

        width: 100%;
    }
}

@media (max-width: 992px) {

    .hero-section {

        grid-template-columns: 1fr;

        min-height: auto;
    }

    .hero-left {

        order: 2;

        padding: 60px 30px;
    }

    .hero-right {

        order: 1;

        padding: 120px 30px 60px;
    }

    .hero-content {

        text-align: center;

        max-width: 100%;
    }

    .hero-description {

        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {

        justify-content: center;
    }

    .hero-stats {

        justify-content: center;

        flex-wrap: wrap;

        gap: 40px;
    }

    .app-showcase {

        max-width: 420px;
    }

    .app-showcase-product {

        max-width: 420px;
        justify-content: center;
        align-items: center;
    }


    .whatsapp-cta {

        display: flex;

        align-items: center;

        gap: 10px;

        padding: 10px 24px;

        background: white;

        border-radius: 24px;

        box-shadow:
            0 15px 40px rgba(0,0,0,.25);

        max-width: 420px;
    }

    .navbar-toggler {

        display: block;
    }

    .navbar-collapse {

        background: white;

        padding: 15px;

        border-radius: 16px;

        margin-top: 10px;
    }

    .navbar-nav {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }
    

    .dashboard-image {

        width: 50%;

        height: auto;

        display: block;

        object-fit: contain;

        filter:
            drop-shadow(
                0 20px 50px rgba(0,0,0,.35)
            );
    }

    .savings-grid {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .pricing-comparison {

        width: 100%;
    }

    .price-card {

        padding: 22px;
    }

    .price-label {

        font-size: 1.1rem !important;
    }

    .price-value {

        font-size: 1.5rem !important;
    }

    .saving-pill {

        text-align: center;
    }

    .offers-grid {

        grid-template-columns: 1fr;
    }

    .offers-header {

        flex-direction: column;

        gap: 20px;

        align-items: flex-start;
    }

    .featured-offer h3 {

        font-size: 2.2rem;
    }

    .offer-card {

        min-height: 140px;
    }

    .offer-value {

        font-size: 3rem;
    }

    .salons-grid {

        grid-template-columns: 1fr;
    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

        gap: 40px;
    }

    .footer-brand {

        grid-column: 1 / -1;
    }

    .footer-bottom {

        flex-direction: column;

        gap: 15px;

        text-align: center;
    }

    .timeline-container {

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .timeline-line {

        display: none;
    }

    .timeline-step {

        padding-bottom: 30px;
    }

    .step-circle {

        width: 80px;

        height: 80px;

        font-size: 2rem;
    }

    .timeline-step h3 {

        font-size: 1.7rem;
    }

    .app-layout {

        grid-template-columns: 1fr;

        text-align: center;
    }

    .store-buttons {

        justify-content: center;

        flex-wrap: wrap;
    }

    .qr-row {

        justify-content: center;
    }

    .app-showcase {

        margin-top: 50px;
    }

}

@media (max-width: 768px) {

    .hero-left {

        padding: 50px 20px;
    }

    .hero-right {

        padding: 100px 20px 40px;
    }

    .hero-title {

        font-size: 3rem;

        line-height: 1.1;
    }

    .hero-description {

        font-size: 1rem;
    }

    .hero-actions {

        flex-direction: column;

        gap: 12px;
    }

    .hero-btn,
    .hero-btn-secondary {

        width: 100%;
    }

    .hero-stats {

        gap: 25px;

        justify-content: space-between;
    }

    .hero-stat h3 {

        font-size: 1.8rem;
    }

    .app-showcase {

        max-width: 320px;
    }

    .whatsapp-cta {

        flex-direction: column;

        text-align: center;

        gap: 15px;

        padding: 20px;
    }

    .whatsapp-qr {

        width: 90px;

        height: 90px;
    }

    .platform-features{

        grid-template-columns:1fr;
    }

    .platform-card{

        padding:30px;
    }

    .hero-stats {

        gap: 30px;

        flex-wrap: wrap;
    }

    .hero-stat {

        min-width: 120px;
    }

    .hero-stat h3 {

        font-size: 2rem;
    }

    .whatsapp-cta {

        flex-direction: column;

        text-align: center;
    }

    .whatsapp-qr {

        width: 100px;
        height: 100px;
    }

    .hero-qr-container {

        justify-content: center;

        flex-wrap: wrap;

        gap: 16px;
    }

    .qr-card {

        width: 135px;
    }

    .qr-image {

        width: 80px;
        height: 80px;
    }

    .who-grid{

        grid-template-columns:1fr;

        gap:50px;
    }

    .stats-grid{

        grid-template-columns:1fr;
    }

    .salon-hero {

        padding: 140px 20px 60px;
    }

    .salon-hero-title {

        font-size: 3.2rem;
    }

    .salon-hero-description {

        font-size: 1.05rem;
    }

    .salon-hero-actions {

        flex-direction: column;
    }

    .salon-stats {

        grid-template-columns: repeat(2,1fr);

        gap: 30px;
    }

    .salon-stat h3 {

        font-size: 2.5rem;
    }

    .cta-section {

        padding: 100px 20px;
    }

    .cta-title {

        font-size: 3.5rem;
    }

    .cta-description {

        font-size: 1.15rem;

        margin-bottom: 40px;
    }

    .cta-actions {

        flex-direction: column;

        align-items: center;
    }

    .cta-primary-btn,
    .cta-secondary-btn {

        width: 100%;

        max-width: 320px;
    }

    .qr-row {

        flex-direction: column;

        align-items: center;
    }

    .app-title {

        font-size: 3.5rem;
    }

    .app-highlights-grid {

        grid-template-columns: 1fr;
    }

    .app-highlights-section {

        padding: 80px 0;
    }

    .highlight-card {

        min-height: auto;
    }

    .download-qr-section {

        flex-direction: column;

        align-items: center;
    }

    .download-qr-card {

        width: 100%;

        max-width: 320px;
    }

    .marketing-title {

        font-size: 3.5rem;
    }

    .dashboard-number {

        font-size: 3.5rem;
    }

    .marketing-item {

        border-radius: 24px;
    }

    .search-box {

        flex-direction: column;

        gap: 10px;

        border-radius: 24px;

        padding: 15px;
    }

    .search-input {

        width: 100%;

        text-align: center;
    }

    .search-btn {

        width: 100%;
    }
}

@media (max-width: 576px) {

    .navbar-logo {

        height: 60px;
    }

    .hero-title {

        font-size: 2.5rem;
    }

    .hero-badge {

        font-size: 0.8rem;

        padding: 8px 14px;
    }

    .hero-stats {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 15px;

        text-align: center;
    }

    .hero-stat h3 {

        font-size: 1.5rem;
    }

    .hero-stat span {

        font-size: 0.7rem;
    }

    .app-showcase {

        max-width: 280px;
    }

    .dashboard-image {

        width: 50%;

        height: auto;

        display: block;

        object-fit: contain;

        filter:
            drop-shadow(
                0 20px 50px rgba(0,0,0,.35)
            );
    }

    .footer-grid {

        grid-template-columns: 1fr;
    }

    .footer-column a {

        font-size: 1.05rem;
    }

    .footer-logo {

        height: 45px;
    }
}