:root {
    --accent: #c4719e;
    --accent-soft: #c4719e12;
    --accent-border: #c4719e25;
    --dark: #2d2d3a;
    --text: #555566;
    --text-light: #999aab;
    --border: #eeeff2;
    --bg: #f8f9fb;
    --white: #ffffff;
    --green: #22c55e;
    --font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --radius: 20px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
body { font-family:var(--font); background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent); color:white; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

/* ─── NAV ─── */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:1.2rem 3rem;
    display:flex; align-items:center; justify-content:space-between;
    transition:all 0.5s var(--ease);
}
.nav.scrolled {
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(0,0,0,0.05);
    padding:0.8rem 3rem;
}
.nav-brand { display:flex; align-items:center; gap:0.6rem; }
.nav-brand img { height:40px; }
.brand-prefix { color:#343434; }
.nav-links { display:flex; gap:2.2rem; align-items:center; }
.nav-links a { font-size:0.88rem; font-weight:500; color:var(--text); transition:color 0.3s; }
.nav-links a:hover { color:var(--accent); }
.nav-links a.active { color:var(--accent); font-weight:600; }
.nav-cta {
    background:var(--accent); color:white !important;
    padding:0.55rem 1.4rem; border-radius:100px;
    font-size:0.82rem; font-weight:600;
    transition:all 0.3s var(--ease);
}
.nav-cta:hover { transform:translateY(-1px); }
.nav-login { color:var(--accent) !important; font-weight:600; }
.nav-home { display:inline-flex; align-items:center; }
.nav-home svg { transition:color 0.3s; }

/* Hamburger toggle - hidden on desktop */
.nav-toggle {
    display:none;
    background:none; border:none; cursor:pointer;
    flex-direction:column; gap:5px;
    padding:4px; z-index:110;
}
.nav-toggle span {
    display:block; width:24px; height:2px;
    background:var(--dark); border-radius:2px;
    transition:all 0.3s var(--ease);
}
.nav-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ─── LANGUAGE SWITCHER ─── */
.nav-lang-switcher { position:relative; }
.nav-lang-btn {
    background:transparent; border:1px solid var(--border); border-radius:6px;
    padding:0.35rem 0.7rem; font-size:0.82rem; font-weight:600;
    color:var(--text); cursor:pointer; font-family:var(--font);
    display:flex; align-items:center; gap:0.3rem;
    transition:all 0.2s;
}
.nav-lang-btn:hover { border-color:var(--accent); color:var(--accent); }
.nav-lang-btn svg { width:10px; height:10px; transition:transform 0.2s; }
.nav-lang-switcher:hover .nav-lang-btn svg { transform:rotate(180deg); }
.nav-lang-dropdown {
    position:absolute; top:100%; right:0; margin-top:0.4rem;
    background:var(--white); border:1px solid var(--border); border-radius:8px;
    padding:0.3rem; min-width:80px;
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:all 0.2s var(--ease);
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.nav-lang-switcher:hover .nav-lang-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.nav-lang-dropdown a {
    display:block; padding:0.4rem 0.7rem; border-radius:5px;
    font-size:0.82rem; font-weight:500; color:var(--text);
    transition:all 0.15s;
}
.nav-lang-dropdown a:hover { background:var(--accent-soft); color:var(--accent); }
.nav-lang-dropdown a.active { color:var(--accent); font-weight:700; }

/* ─── HERO ─── */
.hero {
    min-height:100vh;
    display:grid; grid-template-columns:1fr 1.1fr;
    align-items:center; gap:2rem;
    max-width:1300px; margin:0 auto;
    padding:5.5rem 3rem 4rem;
    position:relative;
    overflow:visible;
}
/* Decorative blobs - bigger and more visible */
.hero-blob-1 {
    position:absolute; top:-5%; right:-10%;
    width:700px; height:700px;
    background:radial-gradient(circle, rgba(196,113,158,0.08) 0%, transparent 65%);
    border-radius:50%; pointer-events:none;
    animation:blobFloat 8s ease-in-out infinite alternate;
}
.hero-blob-2 {
    position:absolute; bottom:0%; left:-10%;
    width:450px; height:450px;
    background:radial-gradient(circle, rgba(196,113,158,0.05) 0%, transparent 65%);
    border-radius:50%; pointer-events:none;
    animation:blobFloat 10s ease-in-out 1s infinite alternate-reverse;
}
@keyframes blobFloat {
    0% { transform:translate(0,0) scale(1); }
    100% { transform:translate(20px,-15px) scale(1.08); }
}

.hero-text { position:relative; z-index:2; }
.hero-pill {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.35rem 0.9rem 0.35rem 0.5rem;
    background:var(--bg); border:1px solid var(--border);
    border-radius:100px; font-size:0.75rem; font-weight:600;
    color:var(--accent); margin-bottom:1.8rem;
    animation:fadeUp 0.7s var(--ease) 0.1s both;
}
.hero-pill span { font-size:1rem; }
.hero h1 {
    font-size:clamp(2.4rem, 4.5vw, 4.2rem);
    font-weight:800; line-height:1.12;
    color:var(--dark); letter-spacing:-0.03em;
    animation:fadeUp 0.7s var(--ease) 0.2s both;
}
.hero h1 .highlight {
    background:var(--accent);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-desc {
    font-size:1.12rem; line-height:1.75; color:var(--text-light);
    max-width:480px; margin:1.5rem 0 2.2rem;
    animation:fadeUp 0.7s var(--ease) 0.3s both;
}
.hero-actions {
    display:flex; gap:0.8rem; flex-wrap:wrap;
    animation:fadeUp 0.7s var(--ease) 0.4s both;
}
.btn-rose {
    background:var(--accent);
    color:white; padding:0.85rem 2rem; border-radius:14px;
    font-size:0.9rem; font-weight:600; border:none; cursor:pointer;
    transition:all 0.3s var(--ease);
}
.btn-rose:hover { transform:translateY(-2px); }
.btn-outline {
    background:transparent; color:var(--dark);
    padding:0.85rem 2rem; border-radius:14px;
    font-size:0.9rem; font-weight:600;
    border:1.5px solid var(--border); cursor:pointer;
    transition:all 0.3s var(--ease);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.hero-trust {
    display:flex; align-items:center; gap:0.5rem;
    margin-top:1.5rem; font-size:0.78rem; color:var(--text-light);
    animation:fadeUp 0.7s var(--ease) 0.5s both;
}
.hero-trust svg { width:14px; height:14px; fill:var(--green); }

@keyframes fadeUp {
    from { opacity:0; transform:translateY(25px); }
    to { opacity:1; transform:translateY(0); }
}

/* ─── HERO MOCKUP ─── */
.hero-visual {
    position:relative; z-index:2;
    display:flex; justify-content:center;
    animation:fadeUp 0.9s var(--ease) 0.3s both;
}
.hero-mockup-wrap { position:relative; width:100%; max-width:460px; }

/* Soft background shape behind phone */
.hero-mockup-wrap::before {
    content:'';
    position:absolute;
    top:-30px; right:-40px; bottom:-20px; left:-40px;
    background:linear-gradient(145deg, rgba(196,113,158,0.07) 0%, rgba(217,163,190,0.04) 50%, transparent 100%);
    border-radius:40px;
    z-index:0;
    transform:rotate(-2deg);
}
.hero-mockup-wrap::after {
    content:'';
    position:absolute;
    top:10px; right:-20px; bottom:10px; left:-20px;
    background:linear-gradient(160deg, rgba(196,113,158,0.04) 0%, rgba(236,218,229,0.06) 100%);
    border-radius:32px;
    z-index:0;
    transform:rotate(1deg);
}

/* Phone frame */
.phone-frame {
    background:var(--white);
    border-radius:28px;
    padding:1.2rem;
    border:1px solid var(--border);
    position:relative; z-index:2;
}
.phone-notch {
    width:120px; height:6px; background:var(--bg);
    border-radius:10px; margin:0 auto 1rem;
}
.phone-content { padding:0 0.3rem; }
.phone-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.2rem;
}
.phone-logo { font-size:0.85rem; font-weight:700; color:var(--accent); }
.phone-lang {
    font-size:0.65rem; color:var(--text-light);
    background:var(--white); padding:0.2rem 0.5rem;
    border-radius:6px;
}
.booking-biz {
    display:flex; align-items:center; gap:0.65rem;
    background:var(--bg); border-radius:14px;
    padding:0.8rem 0.9rem; margin-bottom:1rem;
}
.biz-avatar {
    width:40px; height:40px; border-radius:12px;
    background:linear-gradient(135deg, var(--border), var(--accent));
    display:grid; place-items:center;
    font-size:0.9rem; color:white; font-weight:700;
}
.biz-name { font-size:0.8rem; font-weight:700; color:var(--dark); }
.biz-type { font-size:0.65rem; color:var(--text-light); }

/* Service cards */
.phone-section-label {
    font-size:0.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--text-light); margin:0.8rem 0 0.5rem;
}
.service-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.6rem 0; border-bottom:1px solid rgba(0,0,0,0.04);
}
.service-item:last-child { border-bottom:none; }
.service-info { }
.service-name { font-size:0.78rem; font-weight:600; color:var(--dark); }
.service-meta { font-size:0.65rem; color:var(--text-light); }
.service-price {
    font-size:0.75rem; font-weight:700; color:var(--accent);
    background:var(--bg); padding:0.25rem 0.6rem;
    border-radius:8px;
}

/* Time slots */
.time-slots {
    display:flex; gap:0.4rem; flex-wrap:wrap;
    margin:0.6rem 0 0.8rem;
}
.time-slot {
    padding:0.3rem 0.65rem; border-radius:8px;
    font-size:0.7rem; font-weight:600;
    border:1.5px solid var(--border);
    color:var(--accent); background:transparent;
    transition:all 0.2s;
}
.time-slot.active {
    background:var(--accent); color:white; border-color:var(--accent);
}

/* Book CTA in phone */
.phone-cta {
    display:block; width:100%;
    background:var(--accent);
    color:white; text-align:center;
    padding:0.7rem; border-radius:12px;
    font-size:0.8rem; font-weight:700;
    margin-top:0.5rem;
}

/* Floating cards */
.float-card {
    position:absolute; background:white;
    border-radius:18px; padding:0.85rem 1.1rem;
    border:1px solid var(--border);
    z-index:5;
}
.float-stat {
    bottom:-15px; right:20px;
    display:flex; align-items:center; gap:0.5rem;
    animation:floatY 3.5s ease-in-out 1s infinite alternate;
}
.float-stat-num { font-size:1.1rem; font-weight:800; color:var(--accent); }
.float-stat-text { font-size:0.65rem; color:var(--text-light); line-height:1.3; }
.float-confirm {
    top:-10px; right:-30px;
    display:flex; align-items:center; gap:0.5rem;
    animation:floatY 3s ease-in-out infinite alternate;
}
.float-confirm-icon {
    width:30px; height:30px; border-radius:10px;
    background:var(--accent-soft); color:var(--accent);
    display:grid; place-items:center;
    font-size:0.85rem;
}
.float-confirm-text { font-size:0.72rem; font-weight:700; color:var(--dark); }
.float-confirm-sub { font-size:0.6rem; color:var(--text-light); }

.float-rating {
    bottom:60px; left:-35px;
    display:flex; align-items:center; gap:0.4rem;
    animation:floatY 4s ease-in-out 0.5s infinite alternate-reverse;
}
.float-stars { font-size:0.7rem; }
.float-rating-text { font-size:0.72rem; font-weight:700; color:var(--dark); }
.float-rating-sub { font-size:0.6rem; color:var(--text-light); }

@keyframes floatY {
    0% { transform:translateY(0); }
    100% { transform:translateY(-8px); }
}

/* ─── SECTION SHARED ─── */
section { padding:6rem 2rem; }
.container { max-width:1200px; margin:0 auto; }
.section-label {
    font-size:0.7rem; text-transform:uppercase;
    letter-spacing:0.15em; font-weight:700;
    color:var(--accent); margin-bottom:1rem;
    padding:10px 0;
}
.section-title {
    font-size:clamp(1.9rem, 3.5vw, 2.8rem);
    font-weight:800; color:var(--dark);
    line-height:1.15; letter-spacing:-0.02em;
}
.section-desc {
    font-size:1rem; line-height:1.7; color:var(--text-light);
    max-width:520px; margin-top:1rem;
}

/* ─── FEATURES SECTION ─── */
.features { background:var(--white); }
.features-header { text-align:center; margin-bottom:4rem; }
.features-header .section-desc { margin:1rem auto 0; }
.features-grid {
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:1.5rem;
}
.feature-card {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius); padding:2rem;
    transition:all 0.4s var(--ease);
    position:relative; overflow:hidden;
}
.feature-card:hover {
    transform:translateY(-5px);
    border-color:var(--border);
}
.feature-icon {
    width:48px; height:48px; border-radius:14px;
    display:grid; place-items:center;
    font-size:1.3rem; margin-bottom:1.2rem;
}
.feature-card h3 { font-size:1rem; font-weight:700; color:var(--dark); margin-bottom:0.5rem; }
.feature-card p { font-size:0.88rem; line-height:1.6; color:var(--text-light); }
.reminder-channels {
    display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.8rem;
}
.channel {
    font-size:0.72rem; font-weight:600;
    padding:0.25rem 0.6rem; border-radius:100px;
    background:var(--bg); border:1px solid var(--border);
    color:var(--text);
}

/* ─── HOW IT WORKS ─── */
.how-it-works { background:var(--bg); }
.hiw-grid {
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:2rem; margin-top:3.5rem;
}
.hiw-step {
    text-align:center; padding:2.5rem 1.5rem;
    position:relative;
}
.hiw-num {
    width:56px; height:56px; border-radius:50%;
    background:var(--accent);
    color:white; font-size:1.3rem; font-weight:800;
    display:grid; place-items:center;
    margin:0 auto 1.5rem;
}
.hiw-step h3 { font-size:1.05rem; font-weight:700; color:var(--dark); margin-bottom:0.5rem; }
.hiw-step p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }
/* Connector line */
.hiw-step:not(:last-child)::after {
    content:''; position:absolute;
    top:28px; right:-1rem; width:calc(2rem);
    height:2px; background:var(--border);
}

/* ─── BOOKING DEMO ─── */
.demo-wrap {
    display:flex; flex-direction:column; align-items:center; gap:1.5rem;
    margin-top:3rem;
}
.step-labels {
    display:flex; gap:0.5rem; align-items:center;
}
.step-label {
    display:flex; align-items:center; gap:0.4rem;
    padding:0.4rem 0.9rem;
    border-radius:100px;
    font-size:0.75rem; font-weight:600;
    color:var(--text-light);
    background:var(--white);
    border:1px solid var(--border);
    transition:all 0.5s cubic-bezier(0.4,0,0.2,1);
    cursor:pointer;
}
.step-label.active {
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    transform:scale(1.05);
}
.step-label.done {
    background:var(--white);
    color:var(--accent);
    border-color:var(--accent);
}
.step-dot {
    width:6px; height:6px; border-radius:50%;
    background:currentColor;
}
.step-connector {
    width:20px; height:1px; background:var(--border);
}
.progress-track {
    width:280px; height:3px;
    background:var(--border);
    border-radius:2px;
    overflow:hidden;
}
.progress-fill {
    height:100%;
    background:var(--accent);
    border-radius:2px;
    transition:width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.demo-phone-container {
    position:relative;
    margin-bottom:28px;
}
.demo-phone {
    width:320px; height:640px;
    border-radius:40px;
    background:var(--white);
    border:3px solid var(--border);
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 60px rgba(196,113,158,0.08), 0 4px 20px rgba(0,0,0,0.04);
}
.demo-slides {
    display:flex;
    width:400%;
    height:100%;
    transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.demo-slide {
    width:25%;
    height:100%;
    flex-shrink:0;
}
.demo-slide svg {
    width:100%;
    height:100%;
    display:block;
}
.demo-annotation {
    position:absolute;
    bottom:-50px; left:50%;
    transform:translateX(-50%);
    background:var(--white);
    border:1px solid var(--border);
    border-radius:12px;
    padding:0.5rem 1rem;
    font-size:0.8rem;
    color:var(--text);
    font-weight:500;
    white-space:nowrap;
    opacity:0;
    transition:all 0.5s;
    pointer-events:none;
}
.demo-annotation.show { opacity:1; bottom:-44px; }
.demo-controls {
    display:flex; gap:0.6rem; align-items:center;
}
.demo-ctrl-btn {
    width:32px; height:32px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--white);
    cursor:pointer;
    display:grid; place-items:center;
    transition:all 0.2s;
    color:var(--text-light);
}
.demo-ctrl-btn:hover {
    border-color:var(--accent); color:var(--accent);
}
.demo-ctrl-btn svg { width:14px; height:14px; }
.demo-pause-btn {
    width:36px; height:36px;
    border-radius:50%;
    border:none;
    background:var(--accent);
    cursor:pointer;
    display:grid; place-items:center;
    transition:all 0.2s;
}
.demo-pause-btn:hover { transform:scale(1.1); }
.demo-pause-btn svg { width:14px; height:14px; fill:#fff; }

/* ─── INTEGRATIONS SECTION ─── */
.integrations { background:var(--white); }
.integrations-header { text-align:center; margin-bottom:4rem; }
.integrations-header .section-desc { margin:1rem auto 0; }
.integrations-grid {
    display:grid; grid-template-columns:repeat(2, 1fr);
    gap:1.3rem;
}
.integ-card {
    display:flex; gap:1.3rem; align-items:flex-start;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.8rem;
    transition:all 0.5s var(--ease);
    text-decoration:none; color:inherit;
    position:relative; overflow:hidden;
}
.integ-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0;
    height:3px;
    background:var(--card-accent, var(--accent));
    opacity:0;
    transition:opacity 0.4s;
}
.integ-card:hover::before { opacity:1; }
.integ-card:hover {
    transform:translateY(-6px);
    box-shadow:0 24px 64px rgba(0,0,0,0.07);
    border-color:transparent;
}
.integ-logo {
    width:52px; height:52px; border-radius:14px;
    flex-shrink:0;
    display:grid; place-items:center;
    font-size:1.3rem;
}
.integ-card h3 { font-size:1rem; font-weight:700; color:var(--dark); margin-bottom:0.3rem; }
.integ-industry {
    font-size:0.68rem; font-weight:600; text-transform:uppercase;
    letter-spacing:0.06em; margin-bottom:0.5rem;
}
.integ-card p { font-size:0.84rem; line-height:1.6; color:var(--text-light); }
.integ-link {
    display:inline-flex; align-items:center; gap:0.3rem;
    font-size:0.78rem; font-weight:600; margin-top:0.6rem;
    transition:gap 0.3s var(--ease);
}
.integ-card:hover .integ-link { gap:0.6rem; }

/* ─── TESTIMONIALS ─── */
.testimonials { background:var(--white); }
.testimonials-header { text-align:center; margin-bottom:3.5rem; }
.testimonials-header .section-desc { margin:1rem auto 0; }
.test-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1.3rem;
}
.test-card {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.8rem;
}
.test-stars { color:#e8b84b; font-size:0.85rem; margin-bottom:0.8rem; }
.test-quote { font-size:0.88rem; line-height:1.65; color:var(--text); }
.test-author { display:flex; align-items:center; gap:0.6rem; margin-top:1.2rem; }
.test-avatar-img {
    width:40px; height:40px; border-radius:50%;
    object-fit:cover;
}
.test-name { font-size:0.8rem; font-weight:700; color:var(--dark); }
.test-role { font-size:0.7rem; color:var(--text-light); }

/* ─── CTA SECTION ─── */
.cta-section {
    padding:6rem 2rem;
}
.cta-box {
    max-width:1000px; margin:0 auto;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:28px; padding:4.5rem 3rem;
    text-align:center; position:relative; overflow:hidden;
}
.cta-box::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 0%, rgba(196,113,158,0.06) 0%, transparent 60%);
    pointer-events:none;
}
.cta-box * { position:relative; z-index:1; }
.cta-box .section-title { color:var(--dark); max-width:500px; margin:0 auto; }
.cta-box p {
    color:var(--text-light); font-size:1rem;
    max-width:420px; margin:1rem auto 2rem; line-height:1.7;
}
.cta-buttons { display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; }
.btn-white {
    background:var(--accent); color:white;
    padding:0.85rem 2rem; border-radius:14px;
    font-size:0.9rem; font-weight:700;
    border:none; cursor:pointer;
    transition:all 0.3s var(--ease);
}
.btn-white:hover { transform:translateY(-2px); }
.btn-ghost {
    background:transparent; color:var(--text);
    padding:0.85rem 2rem; border-radius:14px;
    font-size:0.9rem; font-weight:600;
    border:1.5px solid var(--border);
    cursor:pointer; transition:all 0.3s var(--ease);
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ─── SVG SHOWCASE SECTIONS ─── */
.svg-showcase { background:var(--white); overflow:hidden; padding:5rem 2rem; }
.svg-showcase.alt-bg { background:var(--bg); }
.svg-showcase .container {
    display:grid; grid-template-columns:1fr 1fr;
    gap:4rem; align-items:center;
}
.svg-showcase.reverse .container { direction:rtl; }
.svg-showcase.reverse .container > * { direction:ltr; }
.svg-showcase-visual { display:flex; justify-content:center; align-items:center; }
.svg-showcase-visual img, .svg-showcase-visual svg { width:100%; max-width:500px; height:auto; }
.svg-showcase-features { display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.svg-feat { display:flex; align-items:flex-start; gap:0.8rem; }
.svg-feat-icon {
    width:36px; height:36px; border-radius:10px;
    background:var(--accent-soft); display:grid; place-items:center; flex-shrink:0;
}
.svg-feat h4 { font-size:0.9rem; font-weight:700; color:var(--dark); }
.svg-feat p { font-size:0.82rem; color:var(--text-light); line-height:1.5; margin-top:2px; }

/* ─── CONTACT SECTION ─── */
.contact-section { padding:7rem 2rem; background:white; }
.contact-inner {
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1.3fr;
    gap:4rem; align-items:start;
}
.contact-details { margin-top:2.5rem; display:flex; flex-direction:column; gap:1.8rem; }
.contact-detail-item h4 {
    font-size:0.78rem; font-weight:600; color:var(--dark);
    text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.4rem;
}
.contact-detail-item p { font-size:0.92rem; line-height:1.65; color:var(--text-light); }
.contact-detail-item a { color:var(--accent); text-decoration:none; transition:color 0.3s; }
.contact-detail-item a:hover { color:var(--dark); }
.contact-form-wrap {
    background:var(--bg); border:1px solid var(--border);
    border-radius:var(--radius); padding:2.5rem;
}
.contact-form .form-row {
    display:grid; grid-template-columns:1fr 1fr;
    gap:1rem; margin-bottom:1rem;
}
.contact-form .form-group { display:flex; flex-direction:column; margin-bottom:1rem; }
.contact-form .form-row .form-group { margin-bottom:0; }
.contact-form label { font-size:0.8rem; font-weight:500; color:var(--dark); margin-bottom:0.4rem; }
.contact-form input,
.contact-form textarea {
    font-family:var(--font); font-size:0.9rem;
    padding:0.8rem 1rem; border:1px solid var(--border);
    border-radius:12px; background:white; color:var(--dark);
    outline:none; transition:border-color 0.3s, box-shadow 0.3s;
    resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(196,113,158,0.08);
}
.contact-form .form-captcha { display:flex; justify-content:center; margin:1.5rem 0; }
.contact-form .form-status { text-align:center; margin-bottom:1rem; font-size:0.85rem; }
.contact-form .form-loading { color:var(--text-light); padding:0.75rem; }
.contact-form .form-error {
    color:#D32F2F; background:#FFEBEE; border:1px solid #FFCDD2;
    border-radius:10px; padding:0.75rem 1rem; font-size:0.85rem;
}
.contact-form .form-success {
    color:#2E7D32; background:#E8F5E9; border:1px solid #C8E6C9;
    border-radius:10px; padding:0.75rem 1rem; font-size:0.85rem;
}

/* ─── FOOTER ─── */
footer {
    padding:3.5rem 2rem 1.5rem;
    max-width:1200px; margin:0 auto;
}
.footer-top {
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
    gap:2.5rem; padding-bottom:2.5rem;
    border-bottom:1px solid var(--border);
}
.footer-brand-desc { font-size:0.82rem; color:var(--text-light); line-height:1.6; margin-top:0.6rem; max-width:260px; }
.footer-sms-link { display:inline-block; margin-top:1.2rem; }
.footer-sms-logo { height:60px; width:auto; object-fit:contain; opacity:0.7; transition:opacity 0.3s; }
.footer-sms-link:hover .footer-sms-logo { opacity:1; }
.footer-address { font-style:normal; }
.footer-col h4 {
    font-size:0.68rem; text-transform:uppercase;
    letter-spacing:0.12em; font-weight:700;
    color:var(--dark); margin-bottom:1rem;
}
.footer-col a { display:block; font-size:0.82rem; color:var(--text-light); margin-bottom:0.5rem; transition:color 0.3s; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding:1.5rem 0; font-size:0.75rem; color:var(--text-light);
}


/* ─── ERROR PAGE ─── */
.error-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:2rem;
}
.error-page-content { max-width:480px; }
.error-page-code {
    font-size:7rem; font-weight:800; letter-spacing:-0.04em;
    color:var(--accent); line-height:1; margin-bottom:0.5rem;
}
.error-page h1 {
    font-size:1.8rem; font-weight:700; color:var(--dark); margin-bottom:0.8rem;
}
.error-page p {
    font-size:1rem; color:var(--text); line-height:1.65; margin-bottom:2rem;
}
.error-page-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ─── COOKIE BANNER ─── */
.cookie-banner {
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    background:var(--dark); color:#ccc;
    padding:1.2rem 2rem;
    display:flex; align-items:center; justify-content:center; gap:2rem;
    font-size:0.85rem;
    box-shadow:0 -4px 20px rgba(0,0,0,0.15);
}
.cookie-text { max-width:600px; }
.cookie-text strong { color:white; font-size:0.9rem; display:block; margin-bottom:0.3rem; }
.cookie-text p { line-height:1.55; margin:0; }
.cookie-text a { color:var(--accent); text-decoration:underline; }
.cookie-text a:hover { color:white; }
.cookie-actions { display:flex; gap:0.6rem; flex-shrink:0; }
.cookie-btn-decline {
    font-family:var(--font); font-size:0.82rem; font-weight:600;
    padding:0.55rem 1.2rem; border-radius:100px;
    background:transparent; color:#ccc; border:1px solid #555;
    cursor:pointer; transition:all 0.3s var(--ease);
}
.cookie-btn-decline:hover { border-color:#999; color:white; }
.cookie-btn-accept {
    font-family:var(--font); font-size:0.82rem; font-weight:600;
    padding:0.55rem 1.2rem; border-radius:100px;
    background:var(--accent); color:white; border:none;
    cursor:pointer; transition:all 0.3s var(--ease);
}
.cookie-btn-accept:hover { transform:translateY(-1px); }
@media(max-width:900px) {
    .cookie-banner { flex-direction:column; text-align:center; gap:1rem; padding:1.2rem 1.5rem; }
}

/* ─── CONTACT HERO ─── */
.contact-hero {
    padding:8rem 2rem 2rem;
    background:var(--white);
}

/* ─── TRUST PILLS ─── */
.trust-pills {
    display:flex; justify-content:center; gap:0.8rem;
    padding:0 2rem 3rem;
    background:var(--white);
    flex-wrap:wrap;
}
.trust-pill {
    display:inline-flex; align-items:center; gap:0.45rem;
    padding:0.5rem 1rem;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:100px;
    font-size:0.78rem; font-weight:600;
    color:var(--accent);
}
.trust-pill svg { stroke:var(--accent); }

/* ─── NEXT STEPS (What happens next) ─── */
.next-steps-section { background:var(--bg); }
.next-steps {
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:1.5rem; margin-top:3rem;
}
.next-step {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:2rem;
    text-align:center;
    position:relative;
}
.next-step-num {
    width:44px; height:44px;
    border-radius:50%;
    background:var(--accent);
    color:white;
    font-size:1.1rem; font-weight:800;
    display:grid; place-items:center;
    margin:0 auto 1.2rem;
}
.next-step h3 {
    font-size:1rem; font-weight:700;
    color:var(--dark); margin-bottom:0.5rem;
}
.next-step p {
    font-size:0.88rem; color:var(--text-light);
    line-height:1.6;
}

/* ─── INDUSTRIES (Who it's for) ─── */
.industries-section { background:var(--bg); }
.industries-grid {
    display:grid; grid-template-columns:repeat(5, 1fr);
    gap:1rem; margin-top:3rem;
}
.industry-card {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.5rem 1.2rem;
    text-align:center;
    transition:all 0.4s var(--ease);
    text-decoration:none; color:inherit;
}
.industry-card:hover {
    transform:translateY(-5px);
    border-color:var(--accent-border);
}
.industry-icon {
    width:48px; height:48px;
    border-radius:14px;
    background:var(--accent-soft);
    display:grid; place-items:center;
    margin:0 auto 1rem;
}
.industry-card h3 {
    font-size:0.9rem; font-weight:700;
    color:var(--dark); margin-bottom:0.4rem;
}
.industry-card p {
    font-size:0.78rem; color:var(--text-light);
    line-height:1.5;
}

/* ─── INCLUDED SECTION ─── */
.included-section { background:var(--bg); }
.included-card {
    max-width:560px; margin:3rem auto 0;
    background:var(--white);
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    padding:2.5rem;
    text-align:center;
}
.included-header { margin-bottom:1.5rem; }
.included-free {
    font-size:2.8rem; font-weight:800;
    color:var(--accent); display:block;
    line-height:1;
}
.included-with {
    font-size:0.88rem; color:var(--text-light);
    margin-top:0.3rem; display:block;
}
.included-features {
    list-style:none; text-align:left;
    margin-bottom:2rem;
}
.included-features li {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.55rem 0;
    font-size:0.88rem; color:var(--text);
    border-bottom:1px solid var(--border);
}
.included-features li:last-child { border-bottom:none; }
.included-footer p {
    font-size:0.88rem; color:var(--text-light);
    margin-bottom:1rem;
}
.included-actions {
    display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap;
}

/* ─── BRIDGE SECTION ─── */
.bridge-section { background:var(--white); }

/* ─── SCROLL REVEALS ─── */
.reveal { opacity:0; transform:translateY(35px); transition:all 0.7s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ─── RESPONSIVE ─── */
@media(max-width:900px) {
    .nav { padding:1rem 1.5rem; }
    .nav.scrolled { padding:0.8rem 1.5rem; }
    .nav-toggle { display:flex; }
    .nav.nav-open {
        bottom:0; height:100vh;
        background:rgba(255,255,255,0.97);
        backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
        flex-direction:column; align-items:center; justify-content:flex-start;
        padding-top:2rem;
    }
    .nav.nav-open .nav-brand { display:none; }
    .nav.nav-open .nav-toggle { margin-bottom:1rem; }
    .nav-links { display:none; }
    .nav-links.open {
        display:flex;
        flex-direction:column; align-items:center;
        gap:1.5rem;
    }
    .nav-links.open a { font-size:1.25rem; }
    .nav-links.open a::after { display:none; }
    .nav-links.open .nav-lang-switcher { position:relative; }
    .nav-links.open .nav-lang-btn { display:none; }
    .nav-links.open .nav-lang-dropdown {
        position:static; opacity:1; visibility:visible; transform:none;
        display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:0.6rem;
        background:none; border:none; box-shadow:none; padding:0; min-width:auto;
    }
    .nav-links.open .nav-lang-dropdown a {
        font-size:0.9rem; padding:0.4rem 0.6rem; border-radius:6px;
        border:1px solid var(--border);
    }
    .nav-cta { font-size:1rem !important; padding:0.8rem 2rem; }
    .hero { grid-template-columns:1fr; text-align:center; padding:7rem 1.5rem 3rem; }
    .hero-desc { max-width:100%; margin-left:auto; margin-right:auto; }
    .hero-actions { justify-content:center; }
    .hero-trust { justify-content:center; }
    .hero-mockup-wrap { max-width:320px; margin:0 auto; }
    .float-confirm { right:-10px; }
    .float-rating { left:-10px; }
    .float-stat { right:0; bottom:-10px; }
    .features-grid { grid-template-columns:1fr; }
    .hiw-grid { grid-template-columns:1fr; }
    .hiw-step::after { display:none; }
    .demo-phone { width:280px; height:560px; border-radius:34px; }
    .step-labels { flex-wrap:wrap; justify-content:center; }
    .step-connector { width:12px; }
    .progress-track { width:240px; }
    .svg-showcase .container { grid-template-columns:1fr; gap:2rem; }
    .svg-showcase.reverse .container { direction:ltr; }
    .svg-showcase-visual img, .svg-showcase-visual svg { max-width:360px; }
    .industries-grid { grid-template-columns:repeat(2, 1fr); }
    .integrations-grid { grid-template-columns:1fr; }
    .next-steps { grid-template-columns:1fr; }
    .trust-pills { gap:0.5rem; }
    .test-grid { grid-template-columns:1fr; }
    .contact-section { padding:5rem 1rem; }
    .contact-inner { grid-template-columns:1fr; gap:2.5rem; }
    .contact-form .form-row { grid-template-columns:1fr; }
    .contact-form-wrap { padding:1.5rem; border-radius:16px; }
    .contact-form .form-captcha { overflow-x:auto; justify-content:flex-start; }
    .footer-top { grid-template-columns:1fr 1fr; }
}
@media(max-width:550px) {
    .industries-grid { grid-template-columns:1fr; }
    .integrations-grid { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:0.4rem; text-align:center; }
}

/* ─── DARK MODE ─── */
@media(prefers-color-scheme:dark) {
    :root {
        --accent: #d48bb1;
        --accent-soft: #d48bb118;
        --accent-border: #d48bb130;
        --dark: #eeeef0;
        --text: #b0b0be;
        --text-light: #88889a;
        --border: #2a2a35;
        --bg: #141418;
        --white: #1c1c24;
        --green: #4ade80;
    }

    body { background:#111115; }

    /* Nav */
    .nav { background:rgba(17,17,21,0.85); border-bottom:1px solid var(--border); }
    .nav.scrolled { background:rgba(17,17,21,0.92); border-bottom:1px solid var(--border); }
    .nav img { filter:brightness(1.2); }
    .nav-links a { color:var(--text); }
    .nav-links a:hover { color:var(--dark); }
    .nav-lang-btn { border-color:var(--border); color:var(--text); }
    .nav-lang-btn:hover { border-color:var(--accent); color:var(--accent); }
    .nav-lang-dropdown { background:var(--white); border-color:var(--border); box-shadow:0 4px 12px rgba(0,0,0,0.3); }
    .nav-lang-dropdown a { color:var(--text); }
    .nav-lang-dropdown a:hover { background:var(--accent-soft); color:var(--accent); }
    .nav-toggle span { background:var(--dark); }
    .nav.nav-open { background:rgba(17,17,21,0.97); }
    .brand-prefix { color:#b0b0be; }

    /* Hero */
    .hero { background:#111115; }
    .hero-pill { background:var(--white); border-color:var(--border); color:var(--text); }

    /* Floating cards */
    .float-confirm, .float-rating, .float-stat { background:var(--white); border-color:var(--border); }
    .float-confirm-text, .float-rating-text { color:var(--text); }
    .float-stat-num { color:var(--accent); }
    .float-stat-text { color:var(--text-light); }

    /* Hero background shapes */
    .hero-mockup-wrap::before { background:linear-gradient(145deg, rgba(212,139,177,0.08) 0%, transparent 100%); }
    .hero-mockup-wrap::after { background:linear-gradient(160deg, rgba(212,139,177,0.05) 0%, transparent 100%); }

    /* Section labels and titles */
    .section-title { color:var(--dark); }
    .section-label { background:var(--accent-soft); color:var(--accent); }

    /* Feature cards */
    .feature-card { background:var(--white); border-color:var(--border); }
    .feature-card:hover { border-color:var(--accent-border); }
    .feature-card h3 { color:var(--dark); }
    .feature-icon { background:var(--accent-soft) !important; }
    .channel { background:var(--bg); border-color:var(--border); color:var(--text); }

    /* How it works */
    .how-it-works { background:var(--white); }
    .hiw-step h3 { color:var(--dark); }
    .hiw-num { background:var(--accent); color:white; }

    /* Booking demo */
    .step-label { background:var(--white); border-color:var(--border); color:var(--text-light); }
    .step-label.active { background:var(--accent); color:#fff; border-color:var(--accent); }
    .step-label.done { background:var(--white); color:var(--accent); border-color:var(--accent); }
    .demo-phone { border-color:var(--border); background:var(--white); box-shadow:0 20px 60px rgba(0,0,0,0.3); }
    .progress-track { background:var(--border); }
    .demo-ctrl-btn { background:var(--white); border-color:var(--border); color:var(--text-light); }
    .demo-ctrl-btn:hover { border-color:var(--accent); color:var(--accent); }
    .demo-annotation { background:var(--white); border-color:var(--border); color:var(--text); }
    .step-connector { background:var(--border); }

    /* Integration cards */
    .integrations { background:var(--bg); }
    .integ-card { background:#242430; border-color:#3a3a48; }
    .integ-card:hover { border-color:var(--accent-border); }
    .integ-card h3 { color:var(--dark); }
    .integ-card p { color:var(--text-light); }
    .integ-logo { background:#dadada !important; }

    /* Testimonials */
    .testimonials { background:#111115; }
    .test-card { background:var(--white); border-color:var(--border); }
    .test-quote { color:var(--text); }
    .test-name { color:var(--dark); }
    .test-role { color:var(--text-light); }

    /* CTA */
    .cta-section { background:var(--bg); }
    .cta-box { background:var(--white); border-color:var(--border); }
    .cta-box .section-title { color:var(--dark); }
    .cta-box p { color:var(--text-light); }
    .btn-white { background:var(--accent); color:white; }
    .btn-ghost { color:var(--text); border-color:var(--border); }
    .btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

    /* Footer */
    footer { border-top:1px solid var(--border); }
    .footer-col h4 { color:var(--dark); }
    .footer-col a { color:var(--text-light); }
    .footer-col a:hover { color:var(--accent); }
    .footer-bottom { border-top-color:var(--border); color:var(--text-light); }

    /* Buttons */
    .btn-outline { border-color:var(--border); color:var(--dark); }
    .btn-outline:hover { border-color:var(--accent); color:var(--accent); }

    /* SVG icons in feature cards — lighten stroke for dark bg */
    .feature-icon svg { stroke:var(--accent); }

    /* SVG showcases */
    .svg-showcase { background:var(--bg); }
    .svg-showcase.alt-bg { background:var(--white); }
    .svg-feat h4 { color:var(--dark); }
    .svg-feat p { color:var(--text-light); }

    /* Integration card inline colors — brighten for dark backgrounds */
    .integ-industry { filter:brightness(1.35) !important; }
    .integ-link { filter:brightness(1.35) !important; }

    /* Two-tone product names — "alpin" prefix needs light color on dark bg */
    .integ-card h3 span:first-child { color:var(--dark) !important; }
    .integ-card h3 span:last-child { filter:brightness(1.4) !important; }



    /* Error page */
    .error-page { background:#111115; }
    .error-page h1 { color:var(--dark); }
    .error-page p { color:var(--text); }

    /* Bridge section */
    .bridge-section { background:var(--white); }

    /* Contact hero & trust pills */
    .contact-hero { background:var(--white); }
    .trust-pills { background:var(--white); }
    .trust-pill { background:var(--bg); border-color:var(--border); color:var(--accent); }

    /* Contact form */
    .contact-form-wrap { background:var(--white); border-color:var(--border); }
    .contact-form input,
    .contact-form textarea {
        background:var(--bg); color:var(--dark); border-color:var(--border);
    }
    .contact-form input:focus,
    .contact-form textarea:focus {
        border-color:var(--accent);
        box-shadow:0 0 0 3px rgba(212,139,177,0.15);
    }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder { color:var(--text-light); }
    .contact-form .form-error { color:#ef5350; background:#2a1a1a; border-color:#5a2020; }
    .contact-form .form-success { color:#66bb6a; background:#1a2a1a; border-color:#205a20; }
    .contact-form .form-captcha iframe { color-scheme:dark; }
    .contact-section { background:#111115; }

    /* Next steps */
    .next-steps-section { background:var(--bg); }
    .next-step { background:var(--white); border-color:var(--border); }
    .next-step h3 { color:var(--dark); }
    .next-step p { color:var(--text-light); }

    /* Industries */
    .industries-section { background:var(--bg); }
    .industry-card { background:var(--white); border-color:var(--border); }
    .industry-card:hover { border-color:var(--accent-border); }
    .industry-card h3 { color:var(--dark); }
    .industry-card p { color:var(--text-light); }
    .industry-icon { background:var(--accent-soft); }

    /* Included section */
    .included-section { background:var(--bg); }
    .included-card { background:var(--white); border-color:var(--border); }
    .included-free { color:var(--accent); }
    .included-with { color:var(--text-light); }
    .included-features li { color:var(--text); border-bottom-color:var(--border); }
    .included-footer p { color:var(--text-light); }

    /* Scrollbar */
    ::-webkit-scrollbar { width:8px; }
    ::-webkit-scrollbar-track { background:#111115; }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
}