* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --purple-dark: #6a11cb;
    --purple-light: #a044ff;
    --bg: #f5f7fb;
    --text-dark: #1a1a2e;
    --text-muted: #666;
    --white: #ffffff;
    --card-bg: #eef1f6;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

.skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 1000;
    padding: 10px 14px; border-radius: 8px;
    background: var(--text-dark); color: white; font-weight: 700;
    text-decoration: none; transform: translateY(-150%); transition: transform 0.2s;
}
.skip-link:focus { transform: translateY(0); }

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; opacity: 1; transform: none; }
}

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

/* ===== NAVBAR ===== */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 60px;
    background: rgba(245, 247, 251, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(106,17,203,0.08);
    transition: 0.3s;
}

.nav-brand {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
}

.nav-center {
    display: flex;
    gap: 32px;
    list-style: none;
}

.nav-center a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    transition: 0.2s;
    position: relative;
}

.nav-center a::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    border-radius: 2px;
    transition: 0.3s;
}

.nav-center a:hover { color: var(--purple-dark); }
.nav-center a:hover::after,
.nav-center a.active::after { width: 100%; }
.nav-center a.active { color: var(--purple-dark); }

/* Desktop: wrapper is transparent so brand / links / buttons stay in one row */
.nav-menu { display: contents; }

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

.nav-toggle {
    display: none; width: 42px; height: 42px; border: 1px solid rgba(106,17,203,0.16);
    border-radius: 10px; background: white; color: var(--purple-dark); cursor: pointer;
    font-size: 24px; align-items: center; justify-content: center;
}

.btn-nav-outline {
    padding: 9px 24px; border-radius: 30px;
    border: 1.5px solid var(--purple-dark);
    background: transparent; color: var(--purple-dark);
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
    cursor: pointer; text-decoration: none; transition: 0.3s;
}
.btn-nav-outline:hover { background: var(--purple-dark); color: white; }

.btn-nav-fill {
    padding: 9px 24px; border-radius: 30px; border: none;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; font-family: 'DM Sans', sans-serif;
    font-size: 14px; font-weight: 500; cursor: pointer;
    text-decoration: none; transition: 0.3s;
    box-shadow: 0 4px 15px rgba(106,17,203,0.3);
}
.btn-nav-fill:hover { box-shadow: 0 6px 20px rgba(106,17,203,0.45); transform: translateY(-1px); }

/* ===== HERO ===== */
#home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 60px 80px;
    position: relative;
    overflow: hidden;
}

/* Decorative blobs */
#home::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: linear-gradient(135deg, rgba(106,17,203,0.1), rgba(160,68,255,0.07));
    border-radius: 50%;
    top: -120px; right: -180px;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
}

#home::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: linear-gradient(135deg, rgba(160,68,255,0.07), rgba(106,17,203,0.04));
    border-radius: 50%;
    bottom: -100px; left: -100px;
    animation: float 10s ease-in-out infinite reverse;
    pointer-events: none;
}

/* Extra decorative circles */
.hero::before {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    border: 1.5px solid rgba(106,17,203,0.1);
    border-radius: 50%;
    top: 18%; left: 6%;
    animation: spin 18s linear infinite;
    pointer-events: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-25px); }
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

.hero-content {
    animation: fadeUp 0.9s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

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

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(106,17,203,0.08);
    border: 1px solid rgba(106,17,203,0.2);
    color: var(--purple-dark);
    padding: 6px 18px; border-radius: 30px;
    font-size: 13px; font-weight: 500; margin-bottom: 28px;
}

.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.4rem; line-height: 1.15;
    color: var(--text-dark); margin-bottom: 22px;
}

.hero-content h1 span {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content > p {
    font-size: 17px; color: var(--text-muted);
    line-height: 1.75; margin-bottom: 40px;
    font-weight: 300; max-width: 480px;
}

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

.btn-primary-hero {
    padding: 14px 36px; border-radius: 30px; border: none;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 500; cursor: pointer;
    text-decoration: none; transition: 0.3s;
    box-shadow: 0 6px 20px rgba(106,17,203,0.35);
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(106,17,203,0.45); color: white; }

.btn-secondary-hero {
    padding: 14px 36px; border-radius: 30px;
    border: 1.5px solid rgba(106,17,203,0.3);
    background: transparent; color: var(--purple-dark);
    font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500;
    cursor: pointer; text-decoration: none; transition: 0.3s;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary-hero:hover { background: rgba(106,17,203,0.06); color: var(--purple-dark); }

/* ===== HERO VISUAL (abstract patient portal preview) ===== */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    animation: fadeUp 0.9s ease 0.15s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.portal-card {
    width: 100%;
    max-width: 380px;
    background: white;
    border-radius: 22px;
    border: 1px solid rgba(106,17,203,0.1);
    box-shadow: 0 20px 55px rgba(106,17,203,0.16);
    padding: 22px;
}

.portal-card-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(106,17,203,0.08);
}

.portal-dots { display: flex; gap: 5px; }
.portal-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(106,17,203,0.18);
}

.portal-card-title {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--purple-dark);
}

.portal-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(106,17,203,0.06);
}
.portal-row:last-child { border-bottom: none; padding-bottom: 0; }

.portal-row-icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    background: var(--card-bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--purple-dark); font-size: 19px;
}

.portal-row-text h6 { font-size: 13.5px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; }
.portal-row-text p { font-size: 12px; color: var(--text-muted); }

.portal-status {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; font-weight: 600; padding: 5px 12px;
    border-radius: 20px; white-space: nowrap;
}
.portal-status.status-approved { background: #e7faf3; color: #10b981; }
.portal-status.status-neutral  { background: var(--card-bg); color: var(--purple-dark); }
.portal-status.status-secure   {
    width: 28px; height: 28px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; font-size: 14px;
}

.hero-visual-badge {
    position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    background: white; border: 1px solid rgba(106,17,203,0.12);
    color: var(--purple-dark); font-size: 12.5px; font-weight: 600;
    padding: 10px 20px; border-radius: 30px;
    box-shadow: 0 10px 28px rgba(106,17,203,0.14);
    white-space: nowrap;
}

/* ===== SECTION SHARED ===== */
section { padding: 90px 60px; }

.section-label {
    text-align: center; font-size: 12px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--purple-dark); margin-bottom: 12px;
}

.section-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem; color: var(--text-dark); margin-bottom: 14px;
    position: relative;
    padding-bottom: 18px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 56px; height: 3px; border-radius: 3px;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
}

.section-sub {
    text-align: center; color: var(--text-muted);
    font-size: 15px; max-width: 520px;
    margin: 0 auto 50px; line-height: 1.7;
}

/* ===== ABOUT ===== */
#about { background: var(--bg); }

.about-inner {
    display: flex; align-items: center; gap: 70px;
    max-width: 1060px; margin: 0 auto;
}

.about-left { flex: 1; }

.about-left h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem; line-height: 1.25;
    color: var(--text-dark); margin-bottom: 18px;
}

.about-left h2 span {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.about-left p { font-size: 15px; color: var(--text-muted); line-height: 1.75; margin-bottom: 14px; }

.about-right { flex: 1; display: flex; justify-content: center; }

.about-img-wrap {
    width: 340px; height: 360px; border-radius: 25px;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    box-shadow: 0 20px 50px rgba(106,17,203,0.25);
}

.about-img-wrap::before {
    content: '';
    position: absolute; width: 220px; height: 220px;
    background: rgba(255,255,255,0.08); border-radius: 50%;
    top: -50px; right: -50px;
}

.about-img-wrap i {
    font-size: 110px; color: rgba(255,255,255,0.85); z-index: 1;
}

/* ===== SERVICES ===== */
#services { background: white; }

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.service-card {
    background: var(--bg);
    border: 1px solid rgba(106,17,203,0.08);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: 0.3s;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(106,17,203,0.2);
    box-shadow: 0 14px 34px rgba(106,17,203,0.1);
}

.service-icon {
    width: 56px; height: 56px; margin: 0 auto 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 24px;
    box-shadow: 0 6px 18px rgba(106,17,203,0.25);
}

.service-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 16px; color: var(--text-dark); margin-bottom: 8px;
}

.service-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

.services-grid .service-card:nth-child(1) { transition-delay: 0s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.08s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.16s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.24s; }

/* ===== PATIENT PORTAL FEATURES ===== */
#portal-features { background: var(--bg); }

.portal-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 900px;
    margin: 0 auto;
}

.portal-feature {
    background: white;
    border: 1px solid rgba(106,17,203,0.08);
    border-radius: 18px;
    padding: 26px;
    display: flex; align-items: flex-start; gap: 16px;
    box-shadow: 0 4px 16px rgba(106,17,203,0.05);
    transition: 0.3s;
}

.portal-feature:hover { box-shadow: 0 10px 26px rgba(106,17,203,0.1); }

.portal-feature-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 20px;
}

.portal-feature h4 { font-size: 15px; color: var(--text-dark); margin-bottom: 6px; }
.portal-feature p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.portal-features-grid .portal-feature:nth-child(1) { transition-delay: 0s; }
.portal-features-grid .portal-feature:nth-child(2) { transition-delay: 0.08s; }
.portal-features-grid .portal-feature:nth-child(3) { transition-delay: 0.16s; }
.portal-features-grid .portal-feature:nth-child(4) { transition-delay: 0.24s; }

/* ===== HOW IT WORKS ===== */
#how-it-works { background: white; }

.steps-row {
    display: flex;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}

.step-item {
    flex: 1;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 29px; left: 60%;
    width: 80%; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(106,17,203,0.2) 0 8px, transparent 8px 14px);
}

.step-icon-wrap {
    width: 58px; height: 58px; margin: 0 auto 18px;
    position: relative;
    transition: 0.3s;
}

.step-icon {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(106,17,203,0.3);
    position: relative; z-index: 1;
}

.step-item:hover .step-icon-wrap { transform: translateY(-3px); }

.step-num-badge {
    position: absolute; top: -6px; right: -6px; z-index: 2;
    width: 22px; height: 22px; border-radius: 50%;
    background: white; color: var(--purple-dark);
    border: 1.5px solid rgba(106,17,203,0.25);
    font-family: 'Playfair Display', serif;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(106,17,203,0.18);
}

.step-item h4 { font-size: 15px; color: var(--text-dark); margin-bottom: 8px; }
.step-item p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

.steps-row .step-item:nth-child(1) { transition-delay: 0s; }
.steps-row .step-item:nth-child(2) { transition-delay: 0.08s; }
.steps-row .step-item:nth-child(3) { transition-delay: 0.16s; }
.steps-row .step-item:nth-child(4) { transition-delay: 0.24s; }

/* ===== SYSTEM WORKFLOW ===== */
#workflow { background: var(--bg); }

.workflow-track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.workflow-track::before {
    content: '';
    position: absolute;
    top: 28px; left: 8%; right: 8%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(106,17,203,0.2) 0 8px, transparent 8px 14px);
    z-index: 0;
}

.workflow-step {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; position: relative; z-index: 1;
}

.workflow-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: white; border: 2px solid var(--purple-dark);
    color: var(--purple-dark); font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(106,17,203,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}

.workflow-step:hover .workflow-icon {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(106,17,203,0.28);
}

.workflow-step span {
    font-size: 12.5px; font-weight: 600; color: var(--text-dark);
    text-align: center; max-width: 110px;
}

.workflow-track .workflow-step:nth-child(1) { transition-delay: 0s; }
.workflow-track .workflow-step:nth-child(2) { transition-delay: 0.08s; }
.workflow-track .workflow-step:nth-child(3) { transition-delay: 0.16s; }
.workflow-track .workflow-step:nth-child(4) { transition-delay: 0.24s; }
.workflow-track .workflow-step:nth-child(5) { transition-delay: 0.32s; }

/* ===== FAQs SECTION ===== */
#faqs { background: white; }

.faqs-inner { max-width: 860px; margin: 0 auto; }

.faq-categories {
    display: flex; gap: 10px; flex-wrap: wrap;
    justify-content: center; margin-bottom: 40px;
}

.faq-cat-btn {
    padding: 8px 20px; border-radius: 30px;
    border: 1.5px solid rgba(106,17,203,0.2);
    background: transparent; color: var(--text-muted);
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: 0.25s;
}

.faq-cat-btn.active,
.faq-cat-btn:hover {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; border-color: transparent;
    box-shadow: 0 4px 14px rgba(106,17,203,0.28);
}

.faq-group { display: none; }
.faq-group.active { display: block; }

.faq-item {
    border: 1px solid rgba(106,17,203,0.1);
    border-radius: 16px; margin-bottom: 12px;
    overflow: hidden; transition: 0.3s;
    background: var(--bg);
}

.faq-item:hover { border-color: rgba(106,17,203,0.25); }

.faq-question {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; background: none; border: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500;
    color: var(--text-dark); text-align: left; transition: 0.2s;
    gap: 12px;
}

.faq-question:hover { color: var(--purple-dark); }

.faq-icon {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 16px; transition: 0.35s;
}

.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 22px;
}

.faq-item.open .faq-answer {
    max-height: 300px;
    padding: 0 22px 18px;
}

.faq-answer p {
    font-size: 14px; color: var(--text-muted); line-height: 1.7;
    border-top: 1px solid rgba(106,17,203,0.08);
    padding-top: 14px;
}

/* ===== CONTACT ===== */
#contact { background: var(--bg); }

.contact-inner {
    display: flex; gap: 60px;
    max-width: 1060px; margin: 0 auto; align-items: flex-start;
}

.contact-info { flex: 1; }

.contact-item {
    display: flex; align-items: flex-start; gap: 16px;
    margin-bottom: 28px;
}

.contact-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 20px;
}

.contact-item h5 { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.contact-item p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.contact-form { flex: 1; }

.form-row { display: flex; gap: 14px; }

.form-group { margin-bottom: 16px; flex: 1; }

.form-group label { font-size: 13px; font-weight: 500; color: var(--text-dark); display: block; margin-bottom: 6px; }

.form-group input,
.form-group textarea {
    width: 100%; padding: 11px 16px; border-radius: 12px;
    border: 1.5px solid rgba(106,17,203,0.15);
    background: white; font-family: 'DM Sans', sans-serif;
    font-size: 14px; color: var(--text-dark); outline: none; transition: 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--purple-dark);
    box-shadow: 0 0 0 3px rgba(106,17,203,0.08);
}

.form-group textarea { resize: none; height: 110px; }

.btn-send {
    width: 100%; padding: 13px; border-radius: 30px; border: none;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 500; cursor: pointer; transition: 0.3s;
    box-shadow: 0 6px 20px rgba(106,17,203,0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.btn-send:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(106,17,203,0.4); }

/* ===== LOCATION ===== */
#location { background: var(--bg); }

.location-inner {
    display: flex; gap: 50px;
    max-width: 1060px; margin: 0 auto; align-items: stretch;
}

.location-details { flex: 1; display: flex; flex-direction: column; gap: 18px; }

.location-card {
    background: white; border-radius: 18px; padding: 22px 24px;
    border: 1px solid rgba(106,17,203,0.08);
    box-shadow: 0 4px 16px rgba(106,17,203,0.06);
    display: flex; align-items: flex-start; gap: 14px;
    transition: 0.3s;
}

.location-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(106,17,203,0.12);
    border-color: rgba(106,17,203,0.18);
}

.location-card-icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 18px;
}

.location-card h5 { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 3px; }
.location-card p  { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.map-wrap {
    flex: 1.4; border-radius: 20px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(106,17,203,0.12);
    border: 1px solid rgba(106,17,203,0.08);
    min-height: 360px;
}

.map-wrap iframe { width: 100%; height: 100%; min-height: 360px; border: none; display: block; }

/* ===== FOOTER ===== */
footer {
    background: var(--text-dark); color: rgba(255,255,255,0.6);
    padding: 60px 60px 0;
    font-size: 13px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 40px;
    max-width: 1080px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.footer-logo {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Playfair Display', serif;
    font-size: 19px; font-weight: 700; color: white;
    text-decoration: none; margin-bottom: 14px;
}

.footer-brand p { line-height: 1.75; max-width: 300px; }

.footer-col h5 {
    color: white; font-size: 14px; font-weight: 600;
    margin-bottom: 16px; letter-spacing: 0.3px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-col ul a {
    color: rgba(255,255,255,0.6); text-decoration: none;
    font-size: 13px; transition: 0.2s;
}
.footer-col ul a:hover { color: white; }

.footer-contact li {
    display: flex; align-items: flex-start; gap: 10px;
    line-height: 1.6; font-size: 13px;
}
.footer-contact i { color: var(--purple-light); margin-top: 2px; flex-shrink: 0; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    max-width: 1080px; margin: 0 auto;
}

.footer-legal { display: flex; align-items: center; gap: 10px; }
.footer-legal a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; }
.footer-legal a:hover { color: white; }
.footer-legal span { color: rgba(255,255,255,0.3); }

/* ===== VIORA CHATBOT ===== */
.viora-trigger {
    position: fixed; bottom: 28px; right: 28px; z-index: 999;
    width: 60px; height: 60px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; font-size: 26px; cursor: pointer;
    box-shadow: 0 8px 24px rgba(106,17,203,0.4);
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
    animation: viora-pulse 2.5s ease-in-out infinite;
}

@keyframes viora-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(106,17,203,0.4); }
    50% { box-shadow: 0 8px 32px rgba(106,17,203,0.65), 0 0 0 8px rgba(106,17,203,0.1); }
}

.viora-trigger:hover { transform: scale(1.1); animation: none; box-shadow: 0 10px 28px rgba(106,17,203,0.55); }

.viora-badge {
    position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #ff4444; border: 2px solid white;
    font-size: 10px; color: white; display: flex;
    align-items: center; justify-content: center;
    font-weight: 700; line-height: 1;
}

.viora-window {
    position: fixed; bottom: 100px; right: 28px; z-index: 998;
    width: 370px; max-height: 560px;
    background: white; border-radius: 24px;
    box-shadow: 0 24px 60px rgba(106,17,203,0.18);
    border: 1px solid rgba(106,17,203,0.1);
    display: flex; flex-direction: column;
    transform: scale(0.85) translateY(20px);
    transform-origin: bottom right;
    opacity: 0; pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.viora-window.open {
    transform: scale(1) translateY(0);
    opacity: 1; pointer-events: all;
}

.viora-header {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    border-radius: 24px 24px 0 0; padding: 18px 20px;
    display: flex; align-items: center; gap: 13px;
    position: relative; overflow: hidden;
}

.viora-header::before {
    content: ''; position: absolute;
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.07); border-radius: 50%;
    top: -40px; right: -30px;
}

.viora-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: white; flex-shrink: 0;
    position: relative;
}

.viora-avatar::after {
    content: ''; position: absolute;
    bottom: 1px; right: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #4ade80; border: 2px solid white;
}

.viora-header-info h4 { color: white; font-size: 15px; font-weight: 600; line-height: 1.2; }
.viora-header-info p  { color: rgba(255,255,255,0.75); font-size: 12px; }

.viora-close {
    margin-left: auto; background: rgba(255,255,255,0.15); border: none;
    color: white; width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 18px; display: flex;
    align-items: center; justify-content: center; transition: 0.2s;
    flex-shrink: 0; position: relative; z-index: 1;
}
.viora-close:hover { background: rgba(255,255,255,0.28); }

.viora-messages {
    flex: 1; overflow-y: auto; padding: 16px 16px 8px;
    display: flex; flex-direction: column; gap: 10px;
    max-height: 360px; scroll-behavior: smooth;
}

.viora-messages::-webkit-scrollbar { width: 4px; }
.viora-messages::-webkit-scrollbar-track { background: transparent; }
.viora-messages::-webkit-scrollbar-thumb { background: rgba(106,17,203,0.2); border-radius: 4px; }

.msg {
    display: flex; gap: 8px; align-items: flex-end;
    animation: msgIn 0.3s ease forwards;
    opacity: 0; transform: translateY(8px);
}

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

.msg.bot { justify-content: flex-start; }
.msg.user { justify-content: flex-end; }

.msg-bot-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: white;
}

.msg-bubble {
    max-width: 78%; padding: 10px 14px; border-radius: 18px;
    font-size: 13.5px; line-height: 1.55;
}

.msg.bot .msg-bubble {
    background: var(--card-bg); color: var(--text-dark);
    border-radius: 4px 18px 18px 18px;
}

.msg.user .msg-bubble {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; border-radius: 18px 18px 4px 18px;
}

.viora-quick-btns {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px;
}

.quick-btn {
    padding: 6px 12px; border-radius: 20px; font-size: 12px;
    border: 1.5px solid rgba(106,17,203,0.2);
    background: transparent; color: var(--purple-dark);
    cursor: pointer; font-family: 'DM Sans', sans-serif;
    transition: 0.2s; font-weight: 500;
}
.quick-btn:hover {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; border-color: transparent;
}

.viora-input-area {
    display: flex; gap: 8px; padding: 12px 14px 14px;
    border-top: 1px solid rgba(106,17,203,0.08);
    align-items: center;
}

.viora-input {
    flex: 1; padding: 10px 14px; border-radius: 30px;
    border: 1.5px solid rgba(106,17,203,0.15);
    background: var(--bg); font-family: 'DM Sans', sans-serif;
    font-size: 13.5px; color: var(--text-dark); outline: none; transition: 0.3s;
}

.viora-input:focus { border-color: var(--purple-dark); background: white; }

.viora-send {
    width: 38px; height: 38px; border-radius: 50%; border: none; flex-shrink: 0;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white; font-size: 16px; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.viora-send:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(106,17,203,0.35); }

:focus-visible {
    outline: 3px solid rgba(160,68,255,0.55);
    outline-offset: 3px;
}

.typing-indicator {
    display: flex; gap: 4px; align-items: center; padding: 4px 0;
}
.typing-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--purple-light); opacity: 0.5;
    animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-5px); opacity: 1; }
}

/* ===== VISUAL POLISH ===== */
::selection { background: rgba(160,68,255,0.22); color: var(--text-dark); }

section { position: relative; }

.section-label { display: flex; align-items: center; justify-content: center; gap: 10px; }
.section-label::before,
.section-label::after {
    content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.45;
}

#services::before,
#portal-features::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(106,17,203,0.08) 1px, transparent 1px);
    background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent 65%);
}
#services > *, #portal-features > * { position: relative; }

.service-card {
    position: relative; overflow: hidden;
    background: linear-gradient(145deg, #fff, var(--bg));
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 3px;
    border-radius: 0 0 8px 8px; background: linear-gradient(90deg, var(--purple-dark), var(--purple-light));
    transform: scaleX(0); transition: transform 0.3s ease;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover .service-icon { transform: rotate(-5deg) scale(1.06); }
.service-icon { transition: transform 0.3s ease; }

.portal-feature {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #fff, #fbf9ff);
}
.portal-feature::after {
    content: ''; position: absolute; width: 90px; height: 90px; right: -38px; bottom: -40px;
    border-radius: 50%; background: rgba(160,68,255,0.07);
}
.portal-feature:hover { transform: translateY(-4px); border-color: rgba(106,17,203,0.18); }

.portal-card { background: linear-gradient(150deg, #ffffff, #fbf9ff); }
.portal-row { transition: background 0.2s ease, padding 0.2s ease; border-radius: 12px; }
.portal-row:hover { background: rgba(106,17,203,0.045); padding-left: 8px; padding-right: 8px; }

.contact-form {
    padding: 28px; border-radius: 22px; background: rgba(255,255,255,0.68);
    border: 1px solid rgba(106,17,203,0.1); box-shadow: 0 14px 35px rgba(106,17,203,0.07);
}
.contact-item { transition: transform 0.25s ease; }
.contact-item:hover { transform: translateX(4px); }

footer { position: relative; overflow: hidden; }
footer::before {
    content: ''; position: absolute; width: 420px; height: 420px; top: -280px; right: -130px;
    border-radius: 50%; background: radial-gradient(circle, rgba(160,68,255,0.3), transparent 68%);
}
.footer-inner, .footer-bottom { position: relative; }

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
    nav { padding: 14px 24px; gap: 10px; justify-content: space-between; }
    .nav-toggle { display: inline-flex; margin-left: auto; flex-shrink: 0; }
    .nav-menu {
        display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
        padding: 10px; flex-direction: column; gap: 2px; background: rgba(255,255,255,0.98);
        border: 1px solid rgba(106,17,203,0.12); border-radius: 16px;
        box-shadow: 0 16px 36px rgba(26,26,46,0.14);
    }
    .nav-menu.is-open { display: flex; }
    .nav-center { flex-direction: column; gap: 2px; width: 100%; }
    .nav-center a { display: block; padding: 12px 14px; border-radius: 10px; }
    .nav-center a::after { display: none; }
    .nav-links {
        width: 100%; gap: 10px; margin-top: 8px; padding: 12px 4px 4px;
        border-top: 1px solid rgba(106,17,203,0.1);
    }
    .nav-links .btn-nav-outline, .nav-links .btn-nav-fill {
        flex: 1 1 0; text-align: center; padding: 11px 14px; font-size: 14px;
    }
    .nav-center a:hover,
    .nav-center a.active { background: var(--bg); }

    #home { padding: 100px 24px 60px; text-align: center; }
    .hero-grid { grid-template-columns: 1fr; gap: 56px; }
    .hero-content h1 { font-size: 2.4rem; }
    .hero-content > p { max-width: 480px; margin: 0 auto 40px; }
    .hero-buttons { justify-content: center; }
    .hero-visual { order: initial; margin-top: 4px; }
    .hero-visual-badge { bottom: -18px; }

    section { padding: 60px 24px; }

    .services-grid { grid-template-columns: 1fr; }
    .portal-features-grid { grid-template-columns: 1fr; }

    .steps-row { flex-direction: column; gap: 34px; }
    .step-item:not(:last-child)::after { display: none; }

    .workflow-track { flex-direction: column; gap: 26px; align-items: flex-start; }
    .workflow-track::before { display: none; }
    .workflow-step { flex-direction: row; text-align: left; gap: 16px; }
    .workflow-step span { text-align: left; max-width: none; }

    .about-inner { flex-direction: column; gap: 40px; }
    .about-img-wrap { width: 100%; max-width: 340px; height: 260px; }

    .contact-inner { flex-direction: column; gap: 40px; }

    .location-inner { flex-direction: column; gap: 30px; }
    .map-wrap { min-height: 280px; }

    .footer-inner { grid-template-columns: 1fr; gap: 32px; text-align: left; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .viora-window { width: calc(100vw - 32px); right: 16px; bottom: 90px; }
    .viora-trigger { right: 20px; bottom: 20px; }
}

@media (max-width: 560px) {
    nav { padding: 12px 16px; gap: 8px; }
    .nav-brand { font-size: 18px; white-space: nowrap; }
    #home { padding: 92px 18px 48px; }
    section { padding: 52px 18px; }
    .hero-content h1 { font-size: 2.05rem; }
    .hero-buttons { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
    .hero-buttons a { flex: 1 1 0; justify-content: center; padding: 12px 8px; font-size: 13px; white-space: nowrap; }

    /* Keep the portal preview readable instead of squeezing its rows. */
    .hero-visual { width: 100%; padding-bottom: 26px; }
    .portal-card { max-width: 380px; padding: 16px; border-radius: 18px; }
    .portal-card-header { margin-bottom: 12px; padding-bottom: 12px; }
    .portal-row {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 12px 0;
    }
    .portal-row-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 17px; }
    .portal-row-text { min-width: 0; }
    .portal-row-text h6 { font-size: 13px; }
    .portal-row-text p { font-size: 11px; line-height: 1.35; }
    .portal-status { padding: 4px 8px; font-size: 10px; }
    .portal-status.status-secure { width: 26px; height: 26px; padding: 0; }
    .hero-visual-badge { font-size: 11.5px; padding: 8px 14px; bottom: 0; }

    /* Mobile contact layout: compact information cards followed by a clear form panel. */
    .contact-inner { width: 100%; gap: 26px; }
    .contact-info {
        width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .contact-item {
        min-width: 0; align-items: center; gap: 10px; margin: 0; padding: 14px 12px;
        background: white; border: 1px solid rgba(106,17,203,0.09);
        border-radius: 14px; box-shadow: 0 5px 16px rgba(106,17,203,0.05);
    }
    .contact-item:last-child { grid-column: 1 / -1; }
    .contact-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
    .contact-item h5 { font-size: 13px; }
    .contact-item p { font-size: 12px; overflow-wrap: anywhere; }
    .contact-form {
        width: 100%; padding: 18px; background: white; border: 1px solid rgba(106,17,203,0.09);
        border-radius: 18px; box-shadow: 0 8px 22px rgba(106,17,203,0.06);
    }
    .form-row { flex-direction: column; gap: 0; }
    .form-group { margin-bottom: 13px; }
    .form-group input, .form-group textarea { padding: 11px 13px; }
    .form-group textarea { height: 100px; }
    .faq-categories { justify-content: flex-start; }
    .faq-cat-btn { padding: 8px 13px; font-size: 12px; }
    .faq-question { padding: 16px; font-size: 14px; }
    .faq-answer, .faq-item.open .faq-answer { padding-left: 16px; padding-right: 16px; }
}

/* ===== ADMIN-UPLOADED IMAGES (Website Management) =====
   Pictures are shown on their own: no frame, card, shadow or background.
   A transparent PNG gives the cleanest result. */
.hero-banner-img {
    display: block;
    width: 100%; max-width: 720px; height: auto; max-height: 620px;
    object-fit: contain;
}

.about-right:has(.about-img-photo) { flex: 1.2; }
.about-img-photo {
    display: block;
    width: 100%; max-width: 560px; height: auto; max-height: 540px;
    object-fit: contain;
}

/* Hero with a picture: give the picture the larger share. */
.hero-grid:not(.is-text-only) { grid-template-columns: 0.9fr 1.1fr; }
@media (max-width: 900px) { .hero-grid:not(.is-text-only) { grid-template-columns: 1fr; } }
.hero-banner-img { margin-left: auto; margin-right: auto; }

/* Hero without a picture: one centred column instead of an empty right half. */
.hero-grid.is-text-only {
    grid-template-columns: 1fr;
    max-width: 860px;
    text-align: center;
}
.hero-grid.is-text-only .hero-content > p { max-width: 640px; margin-left: auto; margin-right: auto; font-size: 18px; }
.hero-grid.is-text-only .hero-content h1 { font-size: 3.9rem; }
.hero-grid.is-text-only .hero-buttons { justify-content: center; }

.service-icon { overflow: hidden; }
.service-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
    .hero-grid.is-text-only .hero-content h1 { font-size: 2.4rem; }
    .hero-grid.is-text-only .hero-content > p { font-size: 16px; }
    .about-img-photo { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 480px) {
    .hero-grid.is-text-only .hero-content h1 { font-size: 2.05rem; }
}

/* =====================================================================
   PROFESSIONAL POLISH
   Consistent widths and spacing, calmer hero, cleaner cards, better
   focus states. Pure presentation: no content or behaviour changes.
   ===================================================================== */
:root {
    --pro-container: 1160px;
    --pro-border: #e8e3f3;
    --pro-shadow: 0 1px 2px rgba(26,26,46,.04), 0 8px 24px rgba(106,17,203,.06);
    --pro-shadow-hover: 0 2px 4px rgba(26,26,46,.05), 0 16px 36px rgba(106,17,203,.14);
    --text-muted: #5b5b6b;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* One container width for every section */
.about-inner, .contact-inner, .location-inner { max-width: var(--pro-container); }
section { padding: 96px 60px; }

/* ---- Navbar ---- */
nav {
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--pro-border);
    box-shadow: 0 1px 12px rgba(26,26,46,.04);
}

/* ---- Hero: compact, calm, no spinning ornaments ---- */
#home {
    min-height: auto;
    padding: 148px 60px 112px;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(160,68,255,.14), transparent 60%),
        radial-gradient(700px 380px at 5% 110%, rgba(106,17,203,.09), transparent 60%),
        linear-gradient(180deg, #faf8ff 0%, #f5f7fb 100%);
}
#home::before, #home::after, .hero::before { display: none; }
#home::after {
    display: block; width: auto; height: 1px; inset: auto 0 0 0; border-radius: 0; animation: none;
    background: linear-gradient(90deg, transparent, var(--pro-border), transparent);
}
.hero-badge { letter-spacing: .02em; border: 1px solid rgba(106,17,203,.18); }
.hero-content h1 { letter-spacing: -.02em; line-height: 1.12; }
.hero-content > p { color: var(--text-muted); }
.hero-grid.is-text-only { max-width: 880px; }

/* ---- Section headings ---- */
.section-title { letter-spacing: -.01em; }
.section-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.section-label { font-size: 12px; letter-spacing: .16em; }

/* ---- Cards: one consistent surface ---- */
.service-card, .portal-feature, .location-card, .contact-form, .faq-item {
    background: #fff;
    border: 1px solid var(--pro-border);
    box-shadow: var(--pro-shadow);
    border-radius: 16px;
}
.service-card, .portal-feature, .location-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover, .portal-feature:hover, .location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pro-shadow-hover);
    border-color: rgba(106,17,203,.28);
}
.contact-form { padding: 32px; border-radius: 20px; }

/* Contact details sit on cards too, so the left column is not bare */
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-item {
    background: #fff; border: 1px solid var(--pro-border); box-shadow: var(--pro-shadow);
    border-radius: 16px; padding: 18px 20px; margin: 0;
}
.contact-item:hover { transform: translateY(-2px); }

/* ---- FAQ ---- */
.faq-item { transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item:hover, .faq-item.open, .faq-item.active { border-color: rgba(106,17,203,.35); }

/* ---- Map ---- */
.map-wrap { border-radius: 16px; border: 1px solid var(--pro-border); box-shadow: var(--pro-shadow); overflow: hidden; }

/* ---- Footer ---- */
footer { border-top: 3px solid var(--purple-dark); }

/* ---- Accessibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid rgba(160,68,255,.55); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    .hero-content { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    section { padding: 68px 22px; }
    #home { padding: 112px 22px 72px; }
    .contact-form { padding: 22px; }
}

/* About: label belongs to the left-aligned text block */
.about-left .section-label { justify-content: flex-start; }
.services-grid, .portal-features-grid { max-width: var(--pro-container); }
.about-left .section-label::before { display: none; }

/* =====================================================================
   DESIGN PASS 2
   One memorable element (the quick-info bar that overlaps the hero),
   quieter section headings, left-aligned service cards.
   ===================================================================== */
:root { --ink: #1b1530; --wash: #f6f3fb; }

/* ---- Hero: more confident headline, calmer badge ---- */
#home { padding-bottom: 150px; }
.hero-grid.is-text-only .hero-content h1 { font-size: 4.25rem; line-height: 1.06; letter-spacing: -.025em; }
.hero-badge { background: #fff; border: 1px solid var(--pro-border); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(26,26,46,.05); }
.hero-badge i { color: var(--purple-dark); }

/* ---- Quick info bar ---- */
section.quick-info { padding: 0 60px; margin-top: -64px; position: relative; z-index: 3; background: transparent; }
.quick-info-inner {
    max-width: var(--pro-container); margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    background: #fff; border: 1px solid var(--pro-border); border-radius: 18px;
    box-shadow: 0 2px 4px rgba(26,26,46,.04), 0 24px 48px rgba(27,21,48,.12);
    overflow: hidden;
}
.quick-item {
    display: flex; align-items: center; gap: 16px; padding: 24px 28px;
    color: inherit; text-decoration: none; min-width: 0;
    transition: background .2s ease;
}
.quick-item + .quick-item { border-left: 1px solid var(--pro-border); }
a.quick-item:hover { background: var(--wash); }
.quick-icon {
    flex: none; width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; font-size: 22px;
    color: var(--purple-dark); background: var(--wash);
}
.quick-item small { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 2px; }
.quick-item strong { display: block; font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }

/* ---- Section headings: no ornaments, sentence-case label ---- */
.section-label {
    text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500;
    color: var(--purple-dark);
}
.section-label::before, .section-label::after { display: none; }
.section-title::after { display: none; }
.section-title { font-size: 2.35rem; margin-bottom: 14px; }
.about-left .section-label { justify-content: flex-start; }

/* ---- Services: left-aligned, icon on top, accent on hover ---- */
.service-card { text-align: left; position: relative; overflow: hidden; }
.service-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--purple-dark), var(--purple-light));
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card .service-icon { margin-left: 0; margin-right: 0; }

/* ---- Alternating rhythm: white / wash ---- */
#services, #how-it-works, #faqs, #location { background: #fff; }
#about, #portal-features, #workflow, #contact { background: var(--wash); }

/* ---- Footer: deeper ink ---- */
footer { background: var(--ink); }

@media (max-width: 900px) {
    section.quick-info { padding: 0 22px; margin-top: -44px; }
    .quick-item + .quick-item { border-left: 0; border-top: 1px solid var(--pro-border); }
    .quick-item { padding: 18px 20px; }
    #home { padding-bottom: 100px; }
    .hero-grid.is-text-only .hero-content h1 { font-size: 2.5rem; }
    .section-title { font-size: 1.9rem; }
}

/* Hero background must fade out cleanly into the page behind the info bar */
#home {
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(160,68,255,.12), transparent 60%),
        linear-gradient(180deg, #faf8ff 0%, #f5f7fb 100%);
}
#home::after { display: none; }
.about-left .section-label, #about .section-label { color: var(--purple-dark); }

/* About picture placeholder: on mobile the column shrank to its content,
   leaving the icon card thin. Give the column the full width instead. */
@media (max-width: 900px) {
    .about-inner { align-items: stretch; }
    .about-right { width: 100%; flex: none; }
    .about-img-wrap { width: 100%; max-width: 100%; height: 240px; border-radius: 20px; }
    .about-img-wrap i { font-size: 88px; }
}

/* Workflow on phones: a centred vertical timeline instead of icons hugging
   the left edge. The dashed line connects the steps in order. */
@media (max-width: 960px) {
    .workflow-track {
        flex-direction: column; align-items: stretch; gap: 0;
        max-width: 320px; margin: 0 auto; padding: 0;
    }
    .workflow-track::before {
        display: block; top: 28px; bottom: 28px; left: 27px; right: auto;
        width: 2px; height: auto;
        background: repeating-linear-gradient(180deg, rgba(106,17,203,.28) 0 6px, transparent 6px 12px);
    }
    .workflow-step {
        flex: none; flex-direction: row; align-items: center; gap: 18px;
        padding: 12px 0; text-align: left;
    }
    .workflow-icon { flex: none; width: 56px; height: 56px; }
    .workflow-step span {
        max-width: none; flex: 1; text-align: left;
        font-size: 15px; font-weight: 500; color: var(--ink);
        background: #fff; border: 1px solid var(--pro-border); border-radius: 12px;
        padding: 14px 16px; box-shadow: var(--pro-shadow);
    }
}
/* =====================================================================
   DESIGN PASS 3: clinical-themed ornaments
   Quiet, on-theme details (medical cross, ECG line, fine grid, numbered
   cards). All decorative: pointer-events none, no extra markup needed.
   ===================================================================== */
:root {
    --ornament-grid: rgba(106,17,203,.07);
    --ecg-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90' viewBox='0 0 600 90'%3E%3Cpath d='M0 45H190l12-8 12 8h30l10 8 14-38 16 62 12-24h24l10-8H600' fill='none' stroke='%236a11cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ecg-line-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90' viewBox='0 0 600 90'%3E%3Cpath d='M0 45H190l12-8 12 8h30l10 8 14-38 16 62 12-24h24l10-8H600' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --cross-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 2v18M2 11h18' stroke='%236a11cb' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --title-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='16' viewBox='0 0 128 16'%3E%3Cpath d='M0 8H50M78 8H128' stroke='%23a044ff' stroke-opacity='.5' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M64 2v12M58 8h12' stroke='%236a11cb' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- Hero: fine grid + scattered crosses + ECG baseline ---- */
#home::before {
    display: block; content: ''; position: absolute; inset: 0; width: auto; height: auto;
    border-radius: 0; animation: none; pointer-events: none; z-index: 0;
    background:
        var(--cross-mark) 7% 30% / 20px 20px no-repeat,
        var(--cross-mark) 93% 24% / 28px 28px no-repeat,
        var(--cross-mark) 14% 74% / 14px 14px no-repeat,
        var(--cross-mark) 88% 66% / 16px 16px no-repeat,
        linear-gradient(var(--ornament-grid) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, var(--ornament-grid) 1px, transparent 1px) 0 0 / 44px 44px;
    opacity: .9;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
}
#home::after {
    display: block; content: ''; position: absolute; left: 0; right: 0; bottom: 78px;
    width: auto; height: 90px; inset-inline: 0; border-radius: 0; animation: none;
    pointer-events: none; z-index: 0; opacity: .2;
    background: var(--ecg-line) 0 50% / 600px 90px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
#home .hero-grid { z-index: 1; }

/* ---- Quick-info bar: brand accent edge ---- */
.quick-info-inner { position: relative; }
.quick-info-inner::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1;
    background: linear-gradient(90deg, var(--purple-dark), var(--purple-light));
}
.quick-icon { background: linear-gradient(135deg, #f1e8ff, #f8f4ff); box-shadow: inset 0 0 0 1px rgba(106,17,203,.1); }

/* ---- Section headings: medical-cross divider ---- */
.section-title { padding-bottom: 30px; }
.section-title::after {
    display: block; content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 128px; height: 16px; border-radius: 0; box-shadow: none;
    background: var(--title-mark) center / 128px 16px no-repeat;
}
.section-sub { margin-bottom: 56px; }

/* ---- Fine dot texture on the remaining sections, fading downward ---- */
#how-it-works::before, #faqs::before, #contact::before, #location::before, #workflow::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(106,17,203,.09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%);
            mask-image: linear-gradient(to bottom, #000, transparent 55%);
}
#how-it-works > *, #faqs > *, #contact > *, #location > *, #workflow > * { position: relative; }

/* About: soft brand glow behind the section */
#about { background:
    radial-gradient(520px 360px at 92% 50%, rgba(160,68,255,.10), transparent 70%),
    var(--wash); }
.about-img-wrap { box-shadow: 0 24px 54px rgba(106,17,203,.28); }
.about-img-wrap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22;
    background: var(--ecg-line-light) 0 78% / 420px 64px repeat-x;
}

/* ---- Services: numbered cards + permanent short accent ---- */
.services-grid { counter-reset: svc; }
.service-card { counter-increment: svc; padding-top: 34px; }
.service-card::after {
    content: counter(svc, decimal-leading-zero);
    position: absolute; top: 14px; right: 20px; line-height: 1;
    font-family: 'Playfair Display', serif; font-size: 2.7rem; font-weight: 700;
    color: rgba(106,17,203,.08); pointer-events: none; transition: color .3s ease;
}
.service-card:hover::after { color: rgba(106,17,203,.16); }
.service-card::before { transform: scaleX(.18); }
.service-card:hover::before { transform: scaleX(1); }

/* ---- Portal features: accent rail on the left ---- */
.portal-feature { border-left: 3px solid var(--purple-dark); }
.portal-feature-icon { box-shadow: 0 6px 16px rgba(106,17,203,.25); }

/* ---- Steps / workflow: soft halo behind the icons ---- */
.step-icon-wrap::before, .workflow-icon::before { pointer-events: none; }
.step-icon-wrap::before {
    content: ''; position: absolute; inset: -9px; border-radius: 50%;
    background: radial-gradient(circle, rgba(160,68,255,.16), transparent 70%);
}
.workflow-icon { background: linear-gradient(145deg, #fff, #f6f0ff); }

/* ---- Contact / location icons share the same soft ring ---- */
.contact-icon, .location-card-icon { box-shadow: 0 0 0 4px rgba(160,68,255,.12), 0 6px 14px rgba(106,17,203,.22); }
.contact-form { position: relative; overflow: hidden; }
.contact-form::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--purple-dark), var(--purple-light));
}

/* ---- Footer: faint ECG line + gradient edge ---- */
footer { border-top: 0; }
footer::after {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--purple-dark), var(--purple-light), var(--purple-dark));
}
.footer-inner::before {
    content: ''; position: absolute; left: -60px; right: -60px; bottom: 6px; height: 90px;
    background: var(--ecg-line-light) 0 50% / 600px 90px repeat-x; opacity: .05; pointer-events: none;
}

@media (max-width: 900px) {
    #home::before {
        background:
            linear-gradient(var(--ornament-grid) 1px, transparent 1px) 0 0 / 36px 36px,
            linear-gradient(90deg, var(--ornament-grid) 1px, transparent 1px) 0 0 / 36px 36px;
        opacity: .7;
    }
    #home::after { bottom: 52px; height: 70px; background-size: 460px 70px; }
    .service-card::after { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) { .service-card::after { transition: none !important; } }
/* =====================================================================
   NAVBAR REFINEMENT
   Aligned to the page container, truly centered links, brand mark tile,
   pill-style active link, scroll shadow, visible keyboard focus.
   ===================================================================== */

/* Brand: gradient lives on the name only, so the icon tile keeps its colour */
.nav-brand {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; -webkit-text-fill-color: initial;
}
.nav-brand-mark {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    box-shadow: 0 4px 12px rgba(106,17,203,.28);
}
.nav-brand-mark i { color: #fff; font-size: 18px; line-height: 1; }
.nav-brand-mark.has-logo { background: none; box-shadow: none; width: auto; max-width: 60px; }
.nav-brand-mark.has-logo img { height: 30px; width: auto; max-width: 60px; object-fit: contain; border-radius: 4px; }
.nav-brand-name {
    font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700; letter-spacing: -.01em;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Links: pill hover/active instead of underline */
.nav-center { gap: 4px; }
.nav-center a {
    display: inline-block; padding: 8px 14px; border-radius: 999px;
    color: #4a4a5a; font-size: 14px; font-weight: 500;
    transition: background .2s, color .2s;
}
.nav-center a::after { display: none; }
.nav-center a:hover { background: var(--wash); color: var(--purple-dark); }
.nav-center a.active { background: rgba(106,17,203,.09); color: var(--purple-dark); font-weight: 600; }

/* Buttons */
.btn-nav-outline, .btn-nav-fill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 22px; font-weight: 600; line-height: 1.2;
}
.btn-nav-fill i { font-size: 18px; transition: transform .2s; }
.btn-nav-fill:hover i { transform: translateX(3px); }

/* Keyboard focus */
.nav-brand:focus-visible, .nav-center a:focus-visible,
.btn-nav-outline:focus-visible, .btn-nav-fill:focus-visible, .nav-toggle:focus-visible {
    outline: 3px solid rgba(160,68,255,.55); outline-offset: 2px;
}

/* Scroll state */
nav.is-scrolled { box-shadow: 0 8px 28px rgba(26,26,46,.08); }

/* Desktop only: align with the 1160px container and centre the links exactly */
@media (min-width: 961px) {
    nav {
        display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
        padding: 14px max(60px, calc((100vw - var(--pro-container)) / 2));
        transition: padding .25s, box-shadow .25s, background .25s;
    }
    nav.is-scrolled { padding-top: 10px; padding-bottom: 10px; }
    .nav-brand { justify-self: start; }
    .nav-links { justify-self: end; }
}

@media (max-width: 960px) {
    .nav-center a { border-radius: 10px; }
    .nav-center a.active { background: var(--wash); }
}
@media (max-width: 560px) {
    .nav-brand-name { font-size: 18px; }
    .nav-brand-mark { width: 30px; height: 30px; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    nav, .btn-nav-fill i { transition: none; }
}
/* ===== CONTACT FORM: validation, alerts, honeypot ===== */
.contact-form .req { color: #dc2626; font-weight: 600; margin-left: 2px; }
.contact-form .form-group input.is-invalid,
.contact-form .form-group textarea.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.08);
}
.contact-form .field-error { margin: 6px 0 0; font-size: 12.5px; color: #dc2626; line-height: 1.4; }
.contact-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 12px; margin-bottom: 18px;
    font-size: 13.5px; line-height: 1.5; border: 1px solid;
}
.contact-alert i { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.contact-alert-success { background: #ecfdf5; color: #047857; border-color: #bbf0d9; }
.contact-alert-error   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.btn-send:disabled { opacity: .7; cursor: not-allowed; transform: none; }
/* Honeypot: off-screen (not display:none, which some bots detect). */
.cf-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   RESPONSIVE FIX PASS
   Makes every section behave on phones, tablets, landscape phones and
   laptops. Kept at the end of the file on purpose so it wins over the
   earlier passes. Pure layout: no content or behaviour changes.
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1, h2, h3, h4, h5, p, li, .quick-item strong { overflow-wrap: break-word; }
.quick-item strong { text-wrap: balance; }

/* ---- Navbar: long clinic names never push the hamburger away ---- */
@media (min-width: 961px) and (max-width: 1100px) {
    .nav-center a { padding: 8px 10px; }
    .btn-nav-outline, .btn-nav-fill { padding: 9px 16px; }
}
/* A long clinic name is cut with "..." instead of wrapping onto two lines */
.nav-brand { min-width: 0; max-width: 100%; }
.nav-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 960px) {
    .nav-brand { flex: 0 1 auto; }
    /* Short (landscape) screens: the dropdown scrolls instead of running off-screen */
    .nav-menu {
        max-height: calc(100vh - 92px);
        max-height: calc(100dvh - 92px);
        overflow-y: auto; overscroll-behavior: contain;
    }
}

/* ---- Hero: the ECG line sits between the buttons and the info bar,
        it no longer runs through the buttons ---- */
@media (min-width: 901px) {
    #home::after { bottom: 50px; height: 90px; }
}
@media (max-width: 900px) {
    /* tile keeps the SVG's 600:90 ratio, otherwise the line breaks at every tile edge */
    #home::after { bottom: 30px; height: 60px; background-size: 400px 60px; }
}
@media (max-width: 350px) {
    .hero-buttons { flex-direction: column; }
    .hero-buttons a { flex: none; width: 100%; }
}

/* ---- Quick info bar ---- */
@media (min-width: 641px) and (max-width: 900px) {
    .quick-info-inner { display: flex; }
    .quick-item { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
    .quick-item + .quick-item { border-left: 1px solid var(--pro-border); border-top: 0; }
}
@media (max-width: 640px) {
    .quick-info-inner { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* ---- Tablet: use the width instead of one giant column ---- */
@media (min-width: 601px) and (max-width: 960px) {
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (min-width: 700px) and (max-width: 960px) {
    .portal-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 960px) {
    .workflow-track { max-width: 400px; }
}

/* ---- Contact: both blocks fill the width (they were shrinking to
        their content on tablets) ---- */
@media (max-width: 960px) {
    .contact-inner { align-items: stretch; }
    .contact-info, .contact-form { width: 100%; flex: none; }
}

/* ---- Location / map ---- */
@media (max-width: 960px) {
    .map-wrap { flex: none; min-height: 0; height: 360px; }
    .map-wrap iframe { min-height: 0; }
}
@media (max-width: 560px) {
    .map-wrap { height: 300px; }
}

/* ---- FAQ: answers are never clipped, whatever length the Admin writes ---- */
.faq-answer {
    display: grid; grid-template-rows: 0fr; max-height: none;
    transition: grid-template-rows .35s ease, padding .3s ease;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; max-height: none; }
.faq-answer-inner { min-height: 0; overflow: hidden; }

/* ---- Footer: same side padding as the sections, tidy columns ---- */
@media (max-width: 960px) {
    footer { padding: 52px 24px 0; }
    .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: 420px; }
    .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (max-width: 560px) {
    footer { padding: 44px 18px 0; }
    .footer-inner { grid-template-columns: minmax(0, 1fr); }
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
    .footer-legal { flex-wrap: wrap; justify-content: center; }
}
/* Landing page only: leave room so the chat button never covers the last links */
@media (max-width: 960px) {
    body:has(.viora-trigger) .footer-bottom { padding-bottom: 88px; }
}

/* ---- Forms: 16px inputs stop iPhone Safari from zooming in on focus ---- */
@media (max-width: 900px) {
    .form-group input, .form-group textarea, .viora-input { font-size: 16px; }
}

/* ---- Viora chat button + window ---- */
.viora-trigger.is-tucked { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; }
@media (max-width: 960px) {
    .viora-window {
        width: min(400px, calc(100vw - 32px));
        max-height: min(560px, calc(100vh - 110px));
        max-height: min(560px, calc(100dvh - 110px));
        bottom: 88px;
    }
    .viora-messages { flex: 1 1 auto; min-height: 0; max-height: none; }
    .viora-header, .viora-quick-btns, .viora-input-area { flex: none; }
    /* Quick replies become one scrollable row so the conversation keeps the room */
    .viora-quick-btns {
        flex-wrap: nowrap; overflow-x: auto; padding: 8px 14px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .viora-quick-btns::-webkit-scrollbar { display: none; }
    .quick-btn { flex: none; white-space: nowrap; }
}
@media (max-width: 560px) {
    .viora-trigger {
        width: 54px; height: 54px; font-size: 24px;
        right: 16px; bottom: 16px;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
    }
    .viora-window { right: 16px; bottom: 80px; }
    .faq-answer, .faq-item.open .faq-answer { padding-left: 16px; padding-right: 16px; }
}
@media (max-height: 480px) and (orientation: landscape) {
    .viora-header { padding: 10px 16px; }
    .viora-avatar { width: 36px; height: 36px; }
    .viora-window { bottom: 80px; }
}
/* =====================================================================
   PHONE LAYOUT TUNE-UP  (layout only: no content or behaviour changes)
   Shorter sections, compact rows instead of tall cards, tighter spacing,
   comfortable tap targets. Keep this block LAST so it wins.
   ===================================================================== */
@media (max-width: 560px) {

    /* ---- Rhythm: less empty space between sections ---- */
    section { padding: 42px 18px; }
    .section-label { font-size: 13px; margin-bottom: 8px; }
    .section-title { font-size: 1.7rem; line-height: 1.2; padding-bottom: 22px; margin-bottom: 10px; }
    .section-sub { font-size: 14px; line-height: 1.6; margin-bottom: 28px; }

    /* ---- Hero ---- */
    #home { padding: 84px 18px 64px; }
    .hero-grid { gap: 28px; }
    .hero-content > p { font-size: 15px; line-height: 1.65; margin-bottom: 26px; }
    .hero-banner-img { max-height: 340px; }
    .hero-buttons a { min-height: 46px; }

    /* ---- Quick info bar: compact rows, tappable ---- */
    section.quick-info { padding: 0 18px; margin-top: -28px; }
    .quick-item { padding: 14px 16px; gap: 12px; }
    .quick-icon { width: 40px; height: 40px; font-size: 19px; border-radius: 11px; }
    .quick-item small { font-size: 12px; }
    .quick-item strong { font-size: 14px; }

    /* ---- About ---- */
    .about-inner { gap: 26px; }
    .about-img-photo { max-width: 100%; max-height: 300px; }

    /* ---- Services: 2 x 2 tiles (icon on top, short text under it) ---- */
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .service-card { padding: 16px 14px 16px; border-radius: 16px; }
    .service-card::after { display: none; }                 /* big faded 01-04 number */
    .service-card .service-icon { width: 46px; height: 46px; margin: 0 0 12px; border-radius: 13px; font-size: 22px; }
    .service-card h4 { margin: 0 0 6px; font-size: 14.5px; line-height: 1.3; }
    .service-card p { font-size: 12.5px; line-height: 1.55; margin: 0; }

    /* ---- Portal features: slightly tighter ---- */
    .portal-features-grid { gap: 12px; }
    .portal-feature { padding: 16px; gap: 14px; }

    /* ---- How it works: icon on the left, text on the right ---- */
    .steps-row { gap: 0; }
    .step-item {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        text-align: left;
        padding: 0 0 22px;
    }
    .step-item:not(:last-child)::after {                    /* vertical dotted connector */
        display: block;
        top: 62px; left: 28px;
        width: 2px; height: calc(100% - 62px);
        background: repeating-linear-gradient(180deg, rgba(106,17,203,0.22) 0 6px, transparent 6px 11px);
    }
    .step-item:last-child { padding-bottom: 0; }
    .step-icon-wrap { grid-row: 1 / span 2; margin: 0; width: 58px; height: 58px; }
    .step-item h4 { margin: 4px 0 4px; font-size: 15.5px; }
    .step-item p { margin: 0; }

    /* ---- Appointment workflow: tighter list ---- */
    .workflow-track { gap: 18px; }

    /* ---- FAQ ---- */
    .faq-categories { gap: 8px; }
    .faq-cat-btn { min-height: 40px; }
    .faq-question { min-height: 52px; }

    /* ---- Contact: two small info cards per row, form full width ---- */
    .contact-form .form-group input,
    .contact-form .form-group textarea { min-height: 48px; }
    .contact-form .form-group textarea { min-height: 110px; }
    .btn-send { min-height: 50px; }

    /* ---- Location cards: compact + map ---- */
    .location-details { gap: 10px; }
    .map-wrap { min-height: 300px; border-radius: 16px; overflow: hidden; }
    .map-wrap iframe { min-height: 300px; }

    /* ---- Footer ---- */
    .footer-inner { gap: 26px; }
}