/* =========================
   ROOT VARIABLES
========================= */
:root {
    --mint-50:#ecfdf7;
    --mint-100:#d1f7e9;
    --mint-200:#a3eed4;
    --mint-300:#6fdfb9;
    --mint-400:#3fc99c;
    --mint-500:#1fae82;
    --mint-600:#14916b;
    --mint-700:#117559;
    --mint-800:#0e5a47;

    --primary-dark:#0b1f1a;
    --primary-dark-soft:#2a3f3a;

    --paper:#f8f9f5;
    --paper-warm:#f1f2e9;

    --line:#d9dbcf;
    --accent:#ff7a59;
    --red:#d63031;

    --shadow:0 10px 30px -12px rgba(11,31,26,.18);
    --radius:22px;
}

/* =========================
   GLOBAL
========================= */

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    font-family:'Manrope',-apple-system,sans-serif;
    background:var(--paper);
    color:var(--primary-dark);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

/* =========================
   NAVBAR
========================= */
.nav{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(16px);
    background:rgba(248,249,245,.78);
    border-bottom:1px solid rgba(11,31,26,.06);
}

.nav-inner{
    max-width:1280px;
    margin:0 auto;
    padding:18px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.logo{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:24px;
    letter-spacing:-.03em;
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

.logo .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--mint-500);
    box-shadow:0 0 0 4px rgba(31,174,130,.15);
}

.nav-links{
    display:flex;
    gap:32px;
    align-items:center;
}

.nav-links a{
    text-decoration:none;
    color:var(--primary-dark-soft);
    font-size:14px;
    font-weight:500;
    transition:color .2s;
    cursor:pointer;
}

.nav-links a:hover{
    color:var(--mint-600);
}

.nav-actions{
    display:flex;
    gap:12px;
    align-items:center;
}

/* =========================
   LANGUAGE SWITCH
========================= */

.lang-switch{
    display:flex;
    background:white;
    border:1px solid var(--line);
    border-radius:100px;
    padding:3px;
    font-size:12px;
    font-weight:600;
}

.lang-switch button{
    background:none;
    border:none;
    cursor:pointer;
    padding:6px 12px;
    border-radius:100px;
    font-family:inherit;
    font-weight:600;
    color:var(--primary-dark-soft);
    transition:all .2s;
}

.lang-switch button.active{
    background:var(--primary-dark);
    color:var(--paper);
}

/* =========================
   BUTTONS
========================= */

.btn-primary{
    background:var(--primary-dark);
    color:var(--paper);
    border:none;
    padding:12px 22px;
    border-radius:100px;
    font-family:inherit;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:transform .2s, background .2s;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.btn-primary:hover{
    background:var(--mint-700);
    transform:translateY(-1px);
}

.btn-ghost{
    background:transparent;
    color:var(--primary-dark);
    border:1px solid var(--primary-dark);
    padding:11px 20px;
    border-radius:100px;
    font-family:inherit;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    transition:all .2s;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.btn-ghost:hover{
    background:var(--primary-dark);
    color:var(--paper);
}

/* =========================
   BURGER MENU
========================= */

.burger{
    display:none;
    width:40px;
    height:40px;
    border:none;
    background:none;
    cursor:pointer;
    padding:8px;
    flex-shrink:0;
}

.burger span{
    display:block;
    width:100%;
    height:2px;
    background:var(--primary-dark);
    border-radius:2px;
    transition:all .3s;
    margin:5px 0;
}

.burger.open span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

.burger.open span:nth-child(2){
    opacity:0;
}

.burger.open span:nth-child(3){
    transform:rotate(-45deg) translate(5px,-5px);
}

/* =========================
   MOBILE MENU
========================= */

.mobile-menu{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--paper);
    z-index:49;
    padding:100px 32px 32px;
    flex-direction:column;
    gap:0;
}

.mobile-menu.visible{
    display:flex;
}

.mobile-menu a{
    text-decoration:none;
    color:var(--primary-dark);
    font-family:'Fraunces',serif;
    font-size:28px;
    font-weight:600;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    display:block;
    cursor:pointer;
}

.mobile-menu a:last-child{
    border-bottom:none;
}

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

.hero{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    padding:60px 32px 80px;
    overflow:hidden;
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(320px,560px) minmax(320px,640px);
    gap:48px;
    align-items:center;
    justify-content:space-between;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--mint-100);
    color:var(--mint-700);
    padding:8px 14px;
    border-radius:100px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:24px;
}

.hero-eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--mint-500);
    animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{
    0%,100%{
        opacity:1;
        transform:scale(1);
    }
    50%{
        opacity:.5;
        transform:scale(1.4);
    }
}

.hero h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(36px,6vw,84px);
    line-height:.95;
    letter-spacing:-.03em;
    margin:0 0 24px;
}

.hero h1 .leaf{
    display:inline-block;
    background:linear-gradient(
        135deg,
        var(--mint-500),
        var(--mint-700)
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-style:italic;
}

.hero p.lead{
    font-size:clamp(15px,2.5vw,19px);
    color:var(--primary-dark-soft);
    max-width:480px;
    margin:0 0 36px;
}

.hero-ctas{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.hero-ctas .btn-primary{
    padding:16px 28px;
    font-size:15px;
}

.hero-ctas .btn-ghost{
    padding:15px 26px;
    font-size:15px;
}

/* =========================
   HERO SLIDER
========================= */

.hero-slider{
    position:relative;
    width:100%;
    max-width:640px;
    aspect-ratio:4/3;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(11,31,26,.35);
    background:var(--primary-dark);
    justify-self:end;
}

.hero-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    transform:scale(1.06);
    opacity:0;
    transition:opacity 1.2s ease-in-out;
}

.hero-slide.active{
    opacity:1;
}

.hero-dots{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:2;
}

.hero-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.4);
    cursor:pointer;
    padding:0;
    transition:all .3s;
}

.hero-dot.active{
    background:white;
    width:24px;
    border-radius:4px;
}

/* =========================
   TRUST SECTION
========================= */

.trust{
    background:var(--primary-dark);
    color:var(--paper);
    padding:24px 0;
    overflow:hidden;
}

.trust-track{
    display:flex;
    width:max-content;
    animation:scroll-trust 40s linear infinite;
}

.trust-row{
    display:flex;
    align-items:center;
    gap:56px;
    padding-right:56px;
    font-family:'Fraunces',serif;
    font-size:18px;
    color:rgba(248,249,245,.7);
    white-space:nowrap;
    flex-shrink:0;
}

.trust-row span{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.trust-row strong{
    color:var(--mint-300);
    font-weight:600;
}
.trust-icon{
    width:20px;
    height:20px;
    object-fit:contain;
    flex-shrink:0;
}

@keyframes scroll-trust{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

.trust-cities{
    max-width:1280px;
    margin:16px auto 0;
    padding:18px 32px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
    border-top:1px solid rgba(248,249,245,.08);
}

.trust-cities-list{
    font-family:'Fraunces',serif;
    font-size:22px;
    color:var(--mint-300);
    font-weight:600;
    letter-spacing:.01em;
}

.trust-cities-note{
    font-size:13px;
    color:rgba(248,249,245,.5);
    font-style:italic;
}

/* =========================
   SERVICES SECTION
========================= */

.services{
    max-width:1280px;
    margin:0 auto;
    padding:100px 32px;
}

.section-head{
    margin-bottom:50px;
    max-width:700px;
}

.section-eyebrow{
    display:inline-block;
    color:var(--mint-600);
    font-size:12px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.section-head h2{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:clamp(28px,4.5vw,56px);
    line-height:1.05;
    letter-spacing:-.025em;
    margin:0 0 16px;
}

.section-head p{
    font-size:clamp(14px,2vw,17px);
    color:var(--primary-dark-soft);
    margin:0;
    max-width:540px;
}

/* =========================
   PRICING TABS
========================= */
.pricing-tabs{
    display:flex;
    gap:8px;
    margin-bottom:32px;
    flex-wrap:wrap;
}

.pricing-tab{
    padding:12px 22px;
    border:1.5px solid var(--line);
    border-radius:100px;
    background:white;
    cursor:pointer;
    font-family:inherit;
    font-weight:600;
    font-size:14px;
    transition:all .2s;
    display:flex;
    align-items:center;
    gap:8px;
}

.pricing-tab:hover{
    border-color:var(--mint-400);
}

.pricing-tab.active{
    background:var(--primary-dark);
    color:var(--paper);
    border-color:var(--primary-dark);
}

.pricing-tab .emoji{
    font-size:18px;
}

/* =========================
   PRICING TABLE
========================= */
.pricing-table{
    background:white;
    border-radius:var(--radius);
    border:1px solid var(--line);
    overflow:hidden;
    margin-bottom:24px;
}

.pricing-row{
    display:grid;
    grid-template-columns:1fr auto auto;
    padding:14px 24px;
    border-bottom:1px solid var(--line);
    align-items:center;
    font-size:15px;
    gap:16px;
    transition:background .15s;
}

.pricing-row:last-child{
    border-bottom:none;
}

.pricing-row:hover{
    background:var(--mint-50);
}

.pricing-row .desc{
    font-weight:500;
}

.pricing-row .price-val{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:20px;
    text-align:right;
    white-space:nowrap;
}

.pricing-row.header{
    background:var(--paper-warm);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--primary-dark-soft);
    grid-template-columns:1fr auto;
}

.pricing-row.header .price-val{
    font-family:'Manrope',sans-serif;
    font-size:12px;
    font-weight:700;
}

.book-row-btn{
    background:var(--mint-600);
    color:white;
    border:none;
    padding:8px 16px;
    border-radius:100px;
    font-family:inherit;
    font-weight:600;
    font-size:12px;
    cursor:pointer;
    transition:all .2s;
    white-space:nowrap;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.book-row-btn:hover{
    background:var(--mint-700);
    transform:translateY(-1px);
}

/* =========================
   EXTRAS
========================= */
.pricing-extras{
    margin-top:16px;
}

.pricing-extras-title{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:18px;
    margin-bottom:12px;
}

.extras-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:10px;
}

.extra-chip{
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
}

.extra-chip .ep{
    font-family:'Fraunces',serif;
    font-weight:700;
    color:var(--mint-700);
}

/* =========================
   CTA
========================= */
.book-all-cta{
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.book-all-cta .btn-primary{
    padding:18px 36px;
    font-size:16px;
}

/* =========================
   HOW SECTION
========================= */
.how{
    background:var(--paper-warm);
    padding:100px 32px;
}

.how-inner{
    max-width:1280px;
    margin:0 auto;
}

.steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.step{
    background:white;
    padding:28px;
    border-radius:var(--radius);
}

.step-num{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:56px;
    font-weight:600;
    color:var(--mint-400);
    line-height:1;
    margin-bottom:12px;
}

.step h4{
    font-family:'Fraunces',serif;
    font-size:20px;
    font-weight:600;
    margin:0 0 8px;
}

.step p{
    font-size:14px;
    color:var(--primary-dark-soft);
    margin:0;
}

/* =========================
   FOOTER
========================= */
footer{
    background:var(--primary-dark);
    color:var(--paper);
    padding:60px 32px 30px;
}

.foot-inner{
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
}

footer h5{
    font-family:'Fraunces',serif;
    font-size:18px;
    font-weight:500;
    margin:0 0 16px;
}

footer a{
    color:rgba(248,249,245,.6);
    text-decoration:none;
    font-size:14px;
    display:block;
    margin-bottom:8px;
    cursor:pointer;
}

footer a:hover{
    color:var(--mint-300);
}

.foot-bottom{
    max-width:1280px;
    margin:40px auto 0;
    padding-top:24px;
    border-top:1px solid rgba(248,249,245,.1);
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:rgba(248,249,245,.4);
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1200px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero-slider{
        max-width:100%;
        width:100%;
        min-height:auto;
        margin:0 auto;
    }

    .steps{
        grid-template-columns:1fr 1fr;
    }

    .foot-inner{
        grid-template-columns:1fr 1fr;
    }

    .nav-links{
        display:none;
    }

    .burger{
        display:block;
    }

    .trust-row{
        gap:40px;
        padding-right:40px;
        font-size:15px;
    }

    .nav-inner .btn-primary{
        display:none;
    }
}

@media(max-width:560px){

    .nav-inner{
        padding:14px 16px;
    }

    .logo{
        font-size:20px;
    }

    .hero{
        padding:24px 16px 40px;
    }

    .hero h1{
        font-size:32px;
        margin-bottom:16px;
    }

    .hero p.lead{
        font-size:14px;
        margin-bottom:24px;
    }

    .hero-ctas{
        flex-direction:column;
        gap:10px;
    }

    .hero-ctas .btn-primary,
    .hero-ctas .btn-ghost{
        width:100%;
        text-align:center;
        justify-content:center;
    }

    .hero-slider{
        aspect-ratio:3/2;
        max-width:100%;
        border-radius:18px;
    }

    .trust{
        padding:18px 0;
    }

    .trust-row{
        font-size:14px;
        gap:36px;
        padding-right:36px;
    }
    
    .trust-icon{
        width:16px;
        height:16px;
    }

    .services,
    .how{
        padding:50px 16px;
    }

    .section-head{
        margin-bottom:30px;
    }

    .section-head h2{
        font-size:26px;
    }

    .pricing-tabs{
        gap:6px;
    }

    .pricing-tab{
        padding:10px 16px;
        font-size:12px;
    }

    .pricing-row{
        padding:12px 16px;
        font-size:13px;
        gap:8px;
    }

    .pricing-row .price-val{
        font-size:17px;
    }

    .book-row-btn{
        padding:6px 12px;
        font-size:11px;
    }

    .steps{
        grid-template-columns:1fr;
        gap:14px;
    }

    .step{
        padding:20px;
    }

    .step-num{
        font-size:40px;
    }

    .foot-inner{
        grid-template-columns:1fr;
        gap:24px;
    }

    .foot-bottom{
        flex-direction:column;
        gap:6px;
        text-align:center;
    }

    .extras-grid{
        grid-template-columns:1fr;
    }
}