:root {
    --dopa-navy: #1d3d58;
    --dopa-navy-deep: #123f56;
    --dopa-blue: #2d9dc0;
    --dopa-cyan: #61cbea;
    --dopa-sky: #e8f6fb;
    --dopa-bg: #f1f5fb;
    --dopa-line: #dce6ef;
    --dopa-muted: #758698;
    --dopa-white: #ffffff;
    --dopa-red: #df5353;
    --dopa-green: #57b957;
    --shadow-soft: 0 18px 45px rgba(29, 61, 88, .09);
    --shadow-panel: 0 10px 30px rgba(29, 61, 88, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--dopa-navy);
    background: var(--dopa-white);
    font-family: "Cairo", Arial, sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; display: block; }
.dopa-container { width: min(1320px, calc(100% - 40px)); margin-inline: auto; }
.dopa-section { padding: 108px 0; position: relative; }
.skip-link { position: fixed; top: -80px; right: 20px; z-index: 1000; background: #fff; padding: 10px 16px; }
.skip-link:focus { top: 10px; }

/* Navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(29,61,88,.98);
    border-bottom: 1px solid rgba(97,203,234,.18);
    transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled { background: rgba(18,63,86,.99); box-shadow: 0 10px 30px rgba(18,63,86,.22); }
.main-nav { height: 76px; display: flex; align-items: center; gap: 34px; }
.brand { width: 112px; flex: 0 0 auto; }
.brand img { max-height: 48px; width: auto; object-fit: contain; }
.brand--legacy { display:flex; align-items:center; min-height:42px; padding:3px 6px; border-radius:4px; background:#f7fbfd; box-shadow:0 0 0 1px rgba(144,221,240,.32); }
.brand--legacy img { width:100%; max-height:37px; object-fit:contain; }
.nav-links { display: flex; align-items: center; gap: 17px; margin: 0 auto; }
.nav-links > a, .nav-dropdown-toggle { font-size: 13px; font-weight: 600; color: #d8e5ee; position: relative; }
.nav-links > a::after, .nav-links > .nav-dropdown > .nav-dropdown-toggle::after { content: ""; position: absolute; inset-inline: 0; bottom: -9px; height: 2px; background: var(--dopa-blue); transform: scaleX(0); transition: transform .25s ease; }
.nav-links > a:hover::after, .nav-links > a:focus-visible::after, .nav-links > .nav-dropdown:hover > .nav-dropdown-toggle::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login { padding: 10px 15px; color: #fff; font-size: 14px; font-weight: 700; }
.language-switch { border: 1px solid #617c91; background: rgba(255,255,255,.06); color: #fff; min-width: 54px; height: 40px; border-radius: 6px; cursor: pointer; }
.nav-toggle { display: none; border: 0; background: none; color: #fff; width: 42px; height: 42px; font-size: 22px; cursor: pointer; }
.nav-links > a.nav-home { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; color: var(--dopa-navy); background: var(--dopa-cyan); border-radius: 6px; font-weight: 800; }
.nav-links > a.nav-home::after { display: none; }
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 0; background: transparent; cursor: pointer; white-space: nowrap; }
.nav-dropdown-toggle > i, .nav-dropdown-toggle > .dpx-icon { width: 12px; height: 12px; font-size: 12px; transition: transform .25s ease; }
.nav-dropdown.open > .nav-dropdown-toggle > i, .nav-dropdown:hover > .nav-dropdown-toggle > i, .nav-dropdown.open > .nav-dropdown-toggle > .dpx-icon, .nav-dropdown:hover > .nav-dropdown-toggle > .dpx-icon { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: calc(100% + 20px); right: -18px; z-index: 120; min-width: 230px; padding: 9px; background: #fff; border: 1px solid var(--dopa-line); border-radius: 7px; box-shadow: 0 22px 50px rgba(29,61,88,.16); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s ease, visibility .22s ease, transform .22s ease; }
.nav-dropdown-menu::before { content: ""; position: absolute; top: -21px; right: 0; width: 100%; height: 22px; }
.nav-dropdown:hover > .nav-dropdown-menu, .nav-dropdown.open > .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 5px; color: #496277; font-size: 12px; transition: color .2s ease, background .2s ease; }
.nav-dropdown-menu a:hover { color: var(--dopa-navy); background: var(--dopa-bg); }
.nav-dropdown-menu a > i, .nav-dropdown-menu a > .dpx-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: var(--dopa-blue); background: var(--dopa-sky); font-size: 15px; }
.nav-dropdown-menu strong, .nav-dropdown-menu small { display: block; }
.nav-dropdown-menu strong { color: var(--dopa-navy); font-size: 12px; }
.nav-dropdown-menu small { color: var(--dopa-muted); font-size: 9px; margin-top: 1px; }
.services-menu { width: 340px; }
.specialties-menu { width: 390px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.specialties-menu a::before { content: "\f0f1"; font-family: FontAwesome; color: var(--dopa-blue); font-size: 12px; }
.language-dropdown .nav-dropdown-menu { right: auto; left: 0; }
.language-menu { min-width: 180px; }
.language-menu a { justify-content: space-between; }
.language-menu a span { color: #8da0af; font-size: 10px; }

.dopa-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 22px; border: 1px solid transparent; border-radius: 6px; font-weight: 700; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.dopa-btn:hover { transform: translateY(-2px); }
.dopa-btn-primary { color: #fff; background: var(--dopa-blue); box-shadow: 0 9px 24px rgba(45,157,192,.22); }
.dopa-btn-primary:hover { background: #2088aa; box-shadow: 0 13px 28px rgba(45,157,192,.28); }
.dopa-btn-outline { color: var(--dopa-navy); background: #fff; border-color: #aabfce; }
.dopa-btn-light { color: var(--dopa-navy); background: #fff; }

/* Hero */
.dopa-hero { min-height: calc(100vh - 76px); background: var(--dopa-bg); padding: 82px 0 58px; overflow: hidden; position: relative; }
.hero-lines { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(45,157,192,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(45,157,192,.06) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 82%); pointer-events: none; }
.hero-layout { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 54px; position: relative; z-index: 1; }
.hero-copy { padding-inline-start: 4px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--dopa-blue); font-size: 14px; font-weight: 800; margin-bottom: 20px; }
.hero-kicker::before { content: ""; width: 30px; height: 2px; background: var(--dopa-cyan); }
.hero-copy h1 { margin: 0; font-size: clamp(42px, 4.3vw, 67px); line-height: 1.28; letter-spacing: 0; font-weight: 800; color: var(--dopa-navy); }
.hero-copy h1 span { color: var(--dopa-blue); }
.hero-copy > p { max-width: 570px; margin: 24px 0 30px; color: #63778a; font-size: 18px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-notes { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; color: #6f8293; font-size: 13px; }
.hero-notes i { color: var(--dopa-blue); margin-left: 5px; }
.hero-screen-wrap { position: relative; perspective: 1200px; }
.hero-screen {
    padding: 10px;
    background: #fff;
    border: 1px solid #d7e3ec;
    border-radius: 8px;
    box-shadow: 0 32px 70px rgba(29,61,88,.16);
    transform: rotateY(1.5deg) rotateX(.6deg);
    animation: screenFloat 6s ease-in-out infinite;
}
.hero-screen img { display: block; width: 100%; height: auto; aspect-ratio: 1019 / 791; object-fit: cover; object-position: top; border-radius: 5px; }
.screen-chip { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--dopa-line); border-radius: 7px; box-shadow: var(--shadow-panel); padding: 11px 14px; }
.screen-chip i { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; background: var(--dopa-sky); color: var(--dopa-blue); }
.screen-chip strong, .screen-chip small { display: block; }
.screen-chip strong { font-size: 13px; }
.screen-chip small { font-size: 11px; color: var(--dopa-muted); }
.chip-message { right: -26px; bottom: 55px; animation: chipFloat 5s ease-in-out infinite .5s; }
.chip-appointment { left: -20px; top: 36px; animation: chipFloat 5.5s ease-in-out infinite; }
.chip-appointment b { color: var(--dopa-green); font-size: 18px; }

.hero-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; background: #fff; border: 1px solid var(--dopa-line); border-radius: 8px; box-shadow: var(--shadow-panel); position: relative; z-index: 2; }
.hero-metric { padding: 22px 25px; border-inline-start: 1px solid var(--dopa-line); display: flex; align-items: center; gap: 13px; }
.hero-metric:first-child { border-inline-start: 0; }
.hero-metric i { color: var(--dopa-blue); font-size: 24px; }
.hero-metric strong, .hero-metric span { display: block; }
.hero-metric strong { font-size: 22px; line-height: 1.2; }
.hero-metric span { color: var(--dopa-muted); font-size: 12px; }

/* Shared headings */
.section-kicker { color: var(--dopa-blue); font-size: 13px; font-weight: 800; display: block; margin-bottom: 12px; }
.section-title { margin: 0; color: var(--dopa-navy); font-size: clamp(32px, 3.2vw, 50px); line-height: 1.35; font-weight: 800; }
.section-lead { color: var(--dopa-muted); font-size: 17px; max-width: 600px; margin: 18px 0 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 46px; }
.section-head .section-lead { max-width: 440px; }

/* Connected journey */
.journey { background: #fff; }
.journey-shell { display: grid; grid-template-columns: 320px 1fr; min-height: 510px; border: 1px solid var(--dopa-line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-soft); }
.journey-nav { padding: 26px; background: var(--dopa-bg); border-inline-end: 1px solid var(--dopa-line); }
.journey-nav > span { color: var(--dopa-muted); font-size: 12px; }
.journey-tab { width: 100%; border: 0; background: transparent; color: #526b7f; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; text-align: right; padding: 17px 14px; border-radius: 6px; margin-top: 8px; cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease; }
.journey-tab i { width: 42px; height: 42px; background: #fff; border: 1px solid var(--dopa-line); border-radius: 6px; display: grid; place-items: center; color: var(--dopa-blue); font-size: 18px; }
.journey-tab strong, .journey-tab small { display: block; }
.journey-tab small { color: var(--dopa-muted); margin-top: 2px; }
.journey-tab.active { color: var(--dopa-navy); background: #fff; box-shadow: 0 8px 20px rgba(29,61,88,.07); transform: translateX(-4px); }
.journey-tab.active i { color: var(--dopa-navy); background: var(--dopa-cyan); border-color: var(--dopa-cyan); }
.journey-stage { position: relative; overflow: hidden; background: #fff; }
.journey-panel { display: none; height: 100%; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 34px; padding: 50px; }
.journey-panel.active { display: grid; animation: panelIn .55s cubic-bezier(.2,.7,.2,1) both; }
.journey-copy h3 { margin: 10px 0 14px; font-size: 29px; line-height: 1.45; }
.journey-copy p { color: var(--dopa-muted); }
.journey-copy ul { list-style: none; padding: 0; margin: 22px 0; }
.journey-copy li { margin: 9px 0; font-size: 14px; }
.journey-copy li::before { content: "\f00c"; font-family: FontAwesome; color: var(--dopa-blue); margin-left: 9px; }
.text-link { color: var(--dopa-blue); font-weight: 800; font-size: 14px; }
.text-link i { margin-right: 7px; transition: transform .2s ease; }
.text-link:hover i { transform: translateX(-4px); }
.mini-app { background: var(--dopa-bg); border: 1px solid var(--dopa-line); border-radius: 8px; padding: 18px; min-height: 330px; }
.mini-toolbar { height: 44px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--dopa-line); margin-bottom: 16px; }
.mini-toolbar span { display: flex; gap: 7px; }
.mini-toolbar i { width: 28px; height: 28px; display: grid; place-items: center; background: #fff; border: 1px solid var(--dopa-line); border-radius: 5px; color: var(--dopa-blue); }
.schedule-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 11px; background: #fff; border: 1px solid #e4ebf2; border-radius: 6px; margin-bottom: 9px; }
.schedule-row.active { border-right: 3px solid var(--dopa-cyan); background: #f8fdff; }
.schedule-row time { font-weight: 800; font-size: 12px; }
.schedule-row strong, .schedule-row small { display: block; }
.schedule-row small { color: var(--dopa-muted); font-size: 11px; }
.schedule-row b { font-size: 10px; color: var(--dopa-green); }
.record-head { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--dopa-line); border-radius: 6px; }
.record-avatar { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--dopa-blue); border-radius: 50%; }
.record-head div { flex: 1; }
.record-head strong, .record-head small { display: block; }
.record-head small { color: var(--dopa-muted); font-size: 11px; }
.record-badge { color: var(--dopa-green); font-size: 11px; }
.record-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 12px 0; }
.record-stats div { padding: 13px; background: #fff; border: 1px solid var(--dopa-line); border-radius: 6px; }
.record-stats span, .record-stats strong { display: block; }
.record-stats span { color: var(--dopa-muted); font-size: 10px; }
.record-timeline { background: #fff; border: 1px solid var(--dopa-line); border-radius: 6px; padding: 13px; }
.timeline-line { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf1f5; }
.timeline-line:last-child { border-bottom: 0; }
.timeline-line i { color: var(--dopa-blue); }
.timeline-line strong, .timeline-line small { display: block; }
.timeline-line small { color: var(--dopa-muted); font-size: 10px; }
.finance-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.finance-top div { background: #fff; border: 1px solid var(--dopa-line); border-radius: 6px; padding: 14px; }
.finance-top span, .finance-top strong { display: block; }
.finance-top span { color: var(--dopa-muted); font-size: 10px; }
.finance-top strong { font-size: 20px; }
.chart-bars { height: 170px; display: flex; align-items: end; gap: 12px; padding: 22px 14px 0; border-bottom: 1px solid #bacbd8; }
.chart-bars i { flex: 1; height: var(--bar); background: var(--dopa-blue); border-radius: 4px 4px 0 0; transform-origin: bottom; animation: growBar .7s ease both; }
.chart-bars i:nth-child(even) { background: var(--dopa-cyan); }

/* Product tour */
.product-tour { background: var(--dopa-bg); overflow: hidden; scroll-margin-top: 86px; }
.tour-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--dopa-line); border-bottom: 0; border-radius: 8px 8px 0 0; overflow: hidden; background: #fff; }
.tour-tab { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-left: 1px solid var(--dopa-line); color: #63798b; background: #fff; font-weight: 700; cursor: pointer; transition: color .25s ease, background .25s ease, box-shadow .25s ease; }
.tour-tab:last-child { border-left: 0; }
.tour-tab i { color: var(--dopa-blue); font-size: 18px; }
.tour-tab:hover { color: var(--dopa-navy); background: #f8fbfd; }
.tour-tab.active { color: var(--dopa-navy); background: var(--dopa-sky); box-shadow: inset 0 -3px 0 var(--dopa-blue); }
.tour-stage { min-height: 570px; border: 1px solid var(--dopa-line); border-radius: 0 0 8px 8px; background: #fff; box-shadow: var(--shadow-soft); overflow: hidden; }
.tour-panel { display: none; grid-template-columns: minmax(0, 1.62fr) minmax(290px, .68fr); min-height: 570px; }
.tour-panel.active { display: grid; animation: tourPanelIn .58s cubic-bezier(.2,.7,.2,1) both; }
.tour-visual { min-width: 0; padding: 26px; display: flex; align-items: center; background: #eaf0f8; border-left: 1px solid var(--dopa-line); overflow: hidden; }
.tour-visual img { width: 100%; height: auto; max-height: 510px; object-fit: contain; border: 1px solid #cfdce7; border-radius: 6px; box-shadow: 0 18px 40px rgba(29,61,88,.13); transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease; }
.tour-panel.active .tour-visual > img { animation: tourImageIn .72s cubic-bezier(.2,.7,.2,1) .08s both, tourImageFloat 6s ease-in-out .9s infinite; }
.tour-visual:hover > img { transform: translateY(-5px) scale(1.012); box-shadow: 0 26px 55px rgba(29,61,88,.2); }
.tour-copy { padding: 52px 36px; align-self: center; }
.tour-number { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 28px; color: var(--dopa-blue); background: var(--dopa-sky); border-radius: 6px; font-weight: 800; }
.tour-copy h3 { margin: 0 0 15px; font-size: 28px; line-height: 1.45; }
.tour-copy p { margin: 0; color: var(--dopa-muted); font-size: 14px; }
.tour-copy ul { list-style: none; padding: 0; margin: 24px 0 0; }
.tour-copy li { margin: 10px 0; font-size: 13px; }
.tour-copy li::before { content: "\f00c"; margin-left: 9px; color: var(--dopa-blue); font-family: FontAwesome; }

/* Interactive clinic analytics */
@property --ring-fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.analytics-visual { padding: 26px; }
.analytics-console { width: 100%; min-height: 500px; overflow: hidden; border: 1px solid #cfdce7; border-radius: 7px; background: #f4f7fc; box-shadow: 0 20px 45px rgba(29,61,88,.15); }
.analytics-appbar { min-height: 54px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--dopa-navy); }
.analytics-appbar strong { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.analytics-appbar > span { padding: 7px 9px; border: 1px solid #55738a; border-radius: 4px; color: #c8d8e3; font-size: 8px; }
.analytics-summary { padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.analytics-summary > div { min-width: 0; padding: 11px; border: 1px solid var(--dopa-line); border-radius: 5px; background: #fff; }
.analytics-summary small, .analytics-summary strong { display: block; }
.analytics-summary small { color: var(--dopa-muted); font-size: 7px; }
.analytics-summary strong { margin: 3px 0; color: var(--dopa-navy); font-size: 19px; }
.analytics-summary b { color: var(--dopa-green); font-size: 7px; }
.analytics-rings { padding: 2px 14px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.analytics-ring-card { min-width: 0; padding: 14px 8px 10px; text-align: center; border: 1px solid var(--dopa-line); border-radius: 6px; background: #fff; }
.analytics-ring { --ring-fill: 0%; width: 108px; height: 108px; margin: 0 auto 8px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--ring-fill), #e7edf3 0); }
.tour-panel.active .analytics-ring { animation: analyticsRingFill 1s cubic-bezier(.2,.75,.2,1) forwards; }
.tour-panel.active .analytics-ring-card:nth-child(2) .analytics-ring { animation-delay: .14s; }
.tour-panel.active .analytics-ring-card:nth-child(3) .analytics-ring { animation-delay: .28s; }
.analytics-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #edf2f6; }
.analytics-ring span { position: relative; z-index: 1; }
.analytics-ring strong, .analytics-ring small { display: block; }
.analytics-ring strong { font-size: 19px; }
.analytics-ring small { color: var(--dopa-muted); font-size: 7px; }
.analytics-ring-card p { margin: 0; color: var(--dopa-muted); font-size: 8px; }
.analytics-trend { margin: 0 14px 14px; padding: 12px; border: 1px solid var(--dopa-line); border-radius: 6px; background: #fff; }
.analytics-trend > div:first-child { display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.analytics-trend small { color: var(--dopa-muted); font-size: 7px; }
.analytics-trend small i { width: 6px; height: 6px; margin: 0 4px; display: inline-block; border-radius: 50%; background: var(--dopa-blue); }
.analytics-trend small i:last-of-type { background: var(--dopa-cyan); }
.analytics-bars { height: 74px; padding: 12px 8px 0; display: flex; align-items: end; gap: 11px; border-bottom: 1px solid var(--dopa-line); }
.analytics-bars span { flex: 1; height: var(--bar); border-radius: 3px 3px 0 0; background: var(--dopa-blue); transform: scaleY(0); transform-origin: bottom; }
.analytics-bars span:nth-child(even) { background: var(--dopa-cyan); }
.tour-panel.active .analytics-bars span { animation: analyticsBarGrow .62s cubic-bezier(.2,.8,.2,1) .35s forwards; }
.analytics-ring-card { transition: transform .3s ease, border-color .3s ease; }
.analytics-ring-card:hover { transform: translateY(-4px); border-color: #9ccbdc; }

/* Animated marketing product scene */
.marketing-section { overflow: hidden; scroll-margin-top: 68px; color: #fff; background: var(--dopa-navy); }
.marketing-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--dopa-cyan); opacity: .8; }
.marketing-section-head { margin-bottom: 48px; display: grid; grid-template-columns: 1fr minmax(300px, .72fr); gap: 70px; align-items: end; }
.marketing-section-head .section-kicker { color: var(--dopa-cyan); }
.marketing-section-head .section-title { margin-bottom: 0; color: #fff; }
.marketing-section-head .section-title span { color: var(--dopa-cyan); }
.marketing-section-head > p { max-width: 520px; margin: 0; color: #bfd0dc; font-size: 16px; line-height: 2; }
.marketing-showcase { display: grid; grid-template-columns: minmax(320px, .68fr) minmax(0, 1.32fr); gap: 42px; align-items: center; }
.marketing-tools-copy { padding-block: 8px; }
.marketing-overline { color: var(--dopa-cyan); font-size: 11px; font-weight: 800; }
.marketing-tools-copy h3 { max-width: 390px; margin: 10px 0 24px; color: #fff; font-size: 30px; line-height: 1.45; }
.marketing-tool-list { margin-bottom: 26px; display: grid; gap: 5px; }
.marketing-tool-list > div { min-height: 48px; padding: 7px 0; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(217,231,240,.14); }
.marketing-tool-list > div > i { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid #4c6d84; border-radius: 6px; color: var(--dopa-cyan); }
.marketing-tool-list strong, .marketing-tool-list small { display: block; }
.marketing-tool-list strong { color: #fff; font-size: 12px; }
.marketing-tool-list small { margin-top: 2px; color: #aebfcb; font-size: 9px; }
.marketing-console { width: 100%; min-height: 470px; overflow: hidden; border: 1px solid #cfdce7; border-radius: 7px; background: #f4f7fc; box-shadow: 0 20px 45px rgba(29,61,88,.15); }
.marketing-system-bar { min-height: 54px; padding: 0 18px; display: flex; align-items: center; gap: 28px; background: var(--dopa-navy); color: #d5e3ed; }
.marketing-system-bar > strong { display: flex; align-items: center; gap: 7px; color: #fff; direction: ltr; }
.mini-dopa-mark { width: 29px; height: 29px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: var(--dopa-cyan); font-size: 15px; }
.marketing-system-nav { flex: 1; display: flex; align-items: stretch; gap: 5px; height: 54px; }
.marketing-system-nav span { padding: 0 12px; display: flex; align-items: center; gap: 6px; font-size: 10px; white-space: nowrap; }
.marketing-system-nav span.active { color: var(--dopa-navy); background: var(--dopa-cyan); }
.marketing-workspace { min-height: 416px; display: grid; grid-template-columns: 185px 1fr; direction: rtl; }
.marketing-menu { margin: 14px; padding: 10px; align-self: start; display: grid; gap: 3px; border: 1px solid var(--dopa-line); border-radius: 7px; background: #fff; box-shadow: 0 15px 30px rgba(29,61,88,.12); }
.marketing-showcase.is-visible .marketing-menu { animation: marketingMenuIn .55s cubic-bezier(.2,.8,.2,1) both; }
.marketing-menu .menu-label { padding: 3px 9px 9px; color: var(--dopa-blue); font-size: 9px; border-bottom: 1px solid var(--dopa-line); }
.marketing-menu > span:not(.menu-label) { padding: 8px 9px; display: flex; align-items: center; gap: 8px; color: var(--dopa-navy); border-radius: 4px; font-size: 9px; }
.marketing-menu > span:not(.menu-label) i { width: 15px; color: #7f96a8; text-align: center; }
.marketing-menu > span.active { color: var(--dopa-navy); background: var(--dopa-sky); font-weight: 700; }
.marketing-menu > span.active i { color: var(--dopa-blue); }
.marketing-dashboard { min-width: 0; padding: 22px 18px 18px; }
.marketing-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.marketing-title-row small, .marketing-title-row strong { display: block; }
.marketing-title-row small { color: var(--dopa-blue); font-size: 9px; }
.marketing-title-row strong { margin-top: 3px; font-size: 17px; }
.marketing-title-row > span { padding: 7px 10px; border: 1px solid var(--dopa-line); border-radius: 4px; background: #fff; color: var(--dopa-muted); font-size: 8px; }
.marketing-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.marketing-metric { min-width: 0; padding: 13px 10px; display: grid; grid-template-columns: 31px 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--dopa-line); border-radius: 6px; background: #fff; opacity: 0; }
.marketing-showcase.is-visible .marketing-metric { animation: marketingMetricIn .46s ease forwards; }
.marketing-showcase.is-visible .marketing-metric:nth-child(2) { animation-delay: .12s; }
.marketing-showcase.is-visible .marketing-metric:nth-child(3) { animation-delay: .24s; }
.marketing-metric > i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 5px; color: var(--dopa-blue); background: var(--dopa-sky); }
.marketing-metric small, .marketing-metric strong { display: block; white-space: nowrap; }
.marketing-metric small { color: var(--dopa-muted); font-size: 7px; }
.marketing-metric strong { margin-top: 2px; font-size: 14px; }
.marketing-metric b { color: var(--dopa-green); font-size: 7px; }
.marketing-chart-card { margin-top: 11px; padding: 13px; border: 1px solid var(--dopa-line); border-radius: 6px; background: #fff; }
.chart-heading { display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.chart-heading span { color: var(--dopa-muted); font-size: 7px; }
.chart-heading span i { width: 6px; height: 6px; margin: 0 4px; display: inline-block; border-radius: 50%; background: var(--dopa-blue); }
.chart-heading span i:last-of-type { background: var(--dopa-cyan); }
.marketing-chart { height: 150px; padding: 20px 8px 0; display: flex; align-items: end; gap: 9px; border-bottom: 1px solid var(--dopa-line); }
.marketing-chart span { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--dopa-blue); transform: scaleY(0); transform-origin: bottom; }
.marketing-chart span:nth-child(even) { background: var(--dopa-cyan); }
.marketing-showcase.is-visible .marketing-chart span { animation: marketingBarIn .65s cubic-bezier(.2,.8,.2,1) forwards; }
.marketing-showcase.is-visible .marketing-chart span:nth-child(2) { animation-delay: .08s; }
.marketing-showcase.is-visible .marketing-chart span:nth-child(3) { animation-delay: .16s; }
.marketing-showcase.is-visible .marketing-chart span:nth-child(4) { animation-delay: .24s; }
.marketing-showcase.is-visible .marketing-chart span:nth-child(5) { animation-delay: .32s; }
.marketing-showcase.is-visible .marketing-chart span:nth-child(6) { animation-delay: .4s; }
.marketing-showcase.is-visible .marketing-chart span:nth-child(7) { animation-delay: .48s; }
.marketing-showcase.is-visible .marketing-chart span:nth-child(8) { animation-delay: .56s; }
.chart-days { padding-top: 7px; display: flex; justify-content: space-between; color: var(--dopa-muted); font-size: 6px; }

/* Interactive marketing orbit */
.marketing-orbit-showcase { grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); gap: 68px; }
.marketing-orbit { min-width: 0; min-height: 590px; position: relative; isolation: isolate; }
.orbit-line { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(95,199,228,.34); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.orbit-line-one { width: 355px; height: 355px; animation: orbitSpin 28s linear infinite; }
.orbit-line-two { width: 515px; height: 515px; border-color: rgba(197,221,235,.18); animation: orbitSpinReverse 42s linear infinite; }
.marketing-orbit-core { width: 164px; height: 164px; padding: 20px; position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid #65c9e5; border-radius: 50%; color: #fff; background: #173950; box-shadow: 0 0 0 13px rgba(95,199,228,.08), 0 20px 50px rgba(2,18,30,.32); transform: translate(-50%,-50%); }
.marketing-orbit-core > i { margin-bottom: 9px; color: var(--dopa-cyan); font-size: 25px; }
.marketing-orbit-core strong, .marketing-orbit-core small { display: block; }
.marketing-orbit-core strong { direction: ltr; font-size: 15px; }
.marketing-orbit-core small { margin-top: 4px; color: #a9c0cf; font-size: 8px; }
.orbit-core-pulse { position: absolute; inset: -14px; z-index: -1; border: 1px solid rgba(95,199,228,.35); border-radius: 50%; animation: orbitPulse 2.8s ease-out infinite; }
.marketing-orbit-node { width: 94px; height: 94px; padding: 8px; position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid #55758c; border-radius: 50%; color: #dce9f1; background: #234a65; box-shadow: 0 12px 28px rgba(2,18,30,.22); cursor: pointer; transition: transform .28s ease, color .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.marketing-orbit-node i { color: var(--dopa-cyan); font-size: 19px; }
.marketing-orbit-node span { font-size: 9px; font-weight: 700; line-height: 1.35; }
.marketing-orbit-node:hover, .marketing-orbit-node:focus-visible { border-color: var(--dopa-cyan); transform: translateY(-5px); outline: none; }
.marketing-orbit-node.active { color: var(--dopa-navy); border-color: #fff; background: var(--dopa-cyan); box-shadow: 0 0 0 7px rgba(95,199,228,.13), 0 18px 35px rgba(2,18,30,.3); }
.marketing-orbit-node.active i { color: var(--dopa-navy); }
.marketing-orbit-node.node-one { top: 1%; left: 50%; margin-left: -47px; }
.marketing-orbit-node.node-two { top: 14%; right: 7%; }
.marketing-orbit-node.node-three { top: 42%; right: -1%; }
.marketing-orbit-node.node-four { right: 11%; bottom: 5%; }
.marketing-orbit-node.node-five { left: 11%; bottom: 5%; }
.marketing-orbit-node.node-six { top: 42%; left: -1%; }
.marketing-orbit-node.node-seven { top: 14%; left: 7%; }
.marketing-orbit-detail { min-height: 500px; padding: 44px 0 44px 38px; border-left: 1px solid rgba(213,229,239,.18); align-self: center; }
.marketing-focus-icon { width: 48px; height: 48px; margin: 20px 0 17px; display: grid; place-items: center; border: 1px solid #5a7a91; border-radius: 50%; color: var(--dopa-cyan); font-size: 20px; }
.marketing-orbit-detail h3 { margin: 0 0 12px; color: #fff; font-size: 29px; }
.marketing-orbit-detail > p { min-height: 84px; margin: 0; color: #b8cad6; font-size: 13px; line-height: 1.9; }
.marketing-focus-result { margin: 24px 0 28px; display: grid; grid-template-columns: 145px 1fr; gap: 18px; align-items: center; }
.marketing-focus-ring { width: 138px; height: 138px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--dopa-cyan) var(--focus-progress), #31546c 0); transition: background .45s ease; }
.marketing-focus-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--dopa-navy); }
.marketing-focus-ring span { max-width: 90px; position: relative; z-index: 1; text-align: center; }
.marketing-focus-ring strong, .marketing-focus-ring small { display: block; }
.marketing-focus-ring strong { color: #fff; font-size: 22px; }
.marketing-focus-ring small { color: #9fb6c5; font-size: 7px; line-height: 1.4; }
.marketing-orbit-detail.is-changing .marketing-focus-ring { animation: focusRingPop .42s ease; }
.marketing-focus-flow { display: flex; align-items: center; justify-content: center; gap: 6px; }
.marketing-focus-flow > span { width: 55px; text-align: center; }
.marketing-focus-flow > span i { width: 38px; height: 38px; margin: 0 auto 5px; display: grid; place-items: center; border: 1px solid #517187; border-radius: 50%; color: var(--dopa-cyan); }
.marketing-focus-flow b { display: block; color: #dce7ee; font-size: 7px; }
.marketing-focus-flow > i { color: #668398; font-size: 10px; }
.marketing-orbit-detail.is-changing .marketing-focus-icon, .marketing-orbit-detail.is-changing h3, .marketing-orbit-detail.is-changing > p { animation: focusContentIn .38s ease both; }

/* Social Inbox */
.social-inbox { background: var(--dopa-navy); color: #fff; overflow: hidden; }
.social-inbox::after { content: ""; position: absolute; width: 38%; height: 1px; background: var(--dopa-cyan); top: 0; right: 0; }
.inbox-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; align-items: center; }
.inbox-copy .section-kicker { color: var(--dopa-cyan); }
.inbox-copy h2 { color: #fff; }
.inbox-copy h2 span { color: var(--dopa-cyan); }
.inbox-copy > p { color: #c2d1dc; font-size: 16px; }
.inbox-features { margin: 26px 0 32px; display: grid; gap: 14px; }
.inbox-feature { display: flex; gap: 12px; align-items: center; }
.inbox-feature i { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #56738a; border-radius: 6px; color: var(--dopa-cyan); }
.inbox-feature strong, .inbox-feature small { display: block; }
.inbox-feature small { color: #a9bdcb; }
.inbox-app { background: var(--dopa-bg); color: var(--dopa-navy); border: 1px solid #6b8598; border-radius: 8px; box-shadow: 0 30px 80px rgba(3,20,32,.35); overflow: hidden; transform: translateZ(0); }
.inbox-appbar { height: 50px; padding: 0 16px; background: var(--dopa-navy-deep); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.inbox-appbar strong { font-size: 14px; }
.inbox-appbar span { display: flex; gap: 16px; font-size: 11px; color: #c9d7e0; }
.inbox-columns { display: grid; grid-template-columns: 118px 190px 1fr; height: 430px; }
.channels, .threads { border-left: 1px solid var(--dopa-line); background: #fff; padding: 12px; }
.channels h4, .threads h4 { margin: 0 0 13px; font-size: 11px; }
.channel-item { display: flex; align-items: center; gap: 8px; padding: 10px 7px; border-radius: 5px; font-size: 10px; margin-bottom: 4px; }
.channel-item.active { background: var(--dopa-sky); }
.channel-item i { width: 20px; color: var(--dopa-blue); font-size: 15px; }
.channel-item b { margin-right: auto; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--dopa-blue); font-size: 8px; }
.thread-search { height: 32px; padding: 6px 9px; background: var(--dopa-bg); color: #9aa9b7; border-radius: 5px; font-size: 9px; margin-bottom: 8px; }
.thread-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 7px; padding: 10px 6px; border-radius: 5px; align-items: center; }
.thread-item.active { background: var(--dopa-sky); }
.thread-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--dopa-blue); font-size: 9px; font-weight: 800; }
.thread-item strong, .thread-item small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-item strong { font-size: 9px; }
.thread-item small, .thread-item time { color: var(--dopa-muted); font-size: 7px; }
.thread-item b { width: 16px; height: 16px; border-radius: 50%; background: var(--dopa-red); color: #fff; display: grid; place-items: center; font-size: 7px; }
.conversation { display: flex; flex-direction: column; min-width: 0; }
.conversation-head { height: 54px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--dopa-line); display: flex; align-items: center; justify-content: space-between; }
.conversation-head div { display: flex; align-items: center; gap: 9px; }
.conversation-head strong, .conversation-head small { display: block; }
.conversation-head small { color: var(--dopa-green); font-size: 8px; }
.patient-context { display: flex; gap: 8px; padding: 8px 12px; background: #f8fbfd; border-bottom: 1px solid var(--dopa-line); }
.patient-context span { font-size: 8px; padding: 5px 7px; background: #fff; border: 1px solid var(--dopa-line); border-radius: 4px; }
.message-area { flex: 1; padding: 16px; overflow: hidden; }
.chat-message { max-width: 74%; padding: 9px 11px; border-radius: 6px; font-size: 9px; margin-bottom: 10px; opacity: 0; transform: translateY(8px); }
.chat-message.visible { animation: messageIn .45s ease forwards; }
.chat-message.in { background: #fff; border: 1px solid var(--dopa-line); }
.chat-message.out { margin-right: auto; background: #dff3fb; border: 1px solid #b6dfed; }
.chat-message time { display: block; color: var(--dopa-muted); font-size: 7px; margin-top: 4px; }
.booking-confirm { width: 76%; margin-right: auto; padding: 9px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #b8d9e5; border-right: 3px solid var(--dopa-blue); border-radius: 5px; opacity: 0; }
.booking-confirm.visible { animation: messageIn .45s ease forwards; }
.booking-confirm i { color: var(--dopa-green); }
.booking-confirm strong, .booking-confirm small { display: block; font-size: 8px; }
.booking-confirm small { color: var(--dopa-muted); }
.composer { height: 44px; margin: 0 12px 12px; padding: 0 9px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--dopa-line); border-radius: 6px; color: #9aa8b5; font-size: 9px; }
.composer span { flex: 1; }
.composer i:last-child { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; background: var(--dopa-blue); border-radius: 5px; }

/* Services */
.dpx-icon { width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; vertical-align: -.12em; color: currentColor; }
.dpx-icon > svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-metric > .dpx-icon, .journey-tab > .dpx-icon, .tour-tab > .dpx-icon, .inbox-feature > .dpx-icon, .service-icon > .dpx-icon { width: 1.25em; height: 1.25em; }
.service-watermark.dpx-icon { width: 84px; height: 84px; }
.marketing-orbit-node > .dpx-icon, .marketing-focus-icon > .dpx-icon, .marketing-focus-flow > span > .dpx-icon { width: 1.3em; height: 1.3em; }
.channel-item > .dpx-icon { width: 20px; height: 20px; color: var(--dopa-blue); }
.composer > .dpx-icon:last-child { width: 26px; height: 26px; padding: 6px; display: grid; place-items: center; color: #fff; background: var(--dopa-blue); border-radius: 5px; }
.dpx-web-mini > .dpx-icon, .dpx-web-illustration > .dpx-icon { width: 1.35em; height: 1.35em; }
.services { background: #fff; }
.services-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.service-card { grid-column: span 4; min-height: 250px; padding: 26px; border: 1px solid var(--dopa-line); border-radius: 8px; background: #fff; position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: #b8d5e1; }
.service-card.large { grid-column: span 6; min-height: 290px; }
.service-card.tinted { background: var(--dopa-bg); }
.service-card.dark { background: var(--dopa-navy); color: #fff; border-color: var(--dopa-navy); }
.service-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 7px; color: var(--dopa-blue); background: var(--dopa-sky); font-size: 20px; margin-bottom: 32px; }
.service-card.dark .service-icon { color: var(--dopa-cyan); background: #294d68; }
.service-card h3 { margin: 0 0 9px; font-size: 22px; }
.service-card p { margin: 0 0 25px; color: var(--dopa-muted); font-size: 14px; max-width: 420px; }
.service-card.dark p { color: #b9cad6; }
.service-card .text-link { position: absolute; bottom: 24px; right: 26px; }
.service-card.dark .text-link { color: var(--dopa-cyan); }
.service-watermark { position: absolute; left: 22px; bottom: 16px; font-size: 84px; color: rgba(45,157,192,.08); }
.service-card.dark .service-watermark { color: rgba(97,203,234,.1); }
.service-card.ask-dopa-card, .service-card.invoice-card { min-height: 455px; scroll-margin-top: 90px; }
.service-badge { position: absolute; top: 27px; left: 26px; color: var(--dopa-blue); font-size: 10px; font-weight: 800; letter-spacing: 0; }

/* Product pair: the two larger modules remain related, while colour and icon treatment make them scannable. */
.dpx-product-card { isolation: isolate; border-width: 1px; }
.dpx-product-card::before { content: ""; position: absolute; z-index: -1; width: 205px; height: 205px; top: -104px; left: -76px; border: 1px solid currentColor; border-radius: 50%; opacity: .12; transition: transform .45s ease, opacity .35s ease; }
.dpx-product-card::after { content: ""; position: absolute; z-index: -1; width: 10px; height: 10px; top: 69px; left: 106px; border-radius: 50%; background: currentColor; opacity: .55; box-shadow: 20px 21px 0 -2px currentColor, 58px 3px 0 -4px currentColor; animation: dpxProductOrbit 5s ease-in-out infinite; }
.dpx-product-card:hover::before { opacity: .2; transform: scale(1.1); }
.dpx-product-icon { position: relative; margin-bottom: 29px; border: 1px solid transparent; box-shadow: 0 9px 22px rgba(29,61,88,.1); }
.dpx-product-icon > i { display: none; }
.dpx-product-icon > svg { width: 25px; height: 25px; display: block; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.dpx-ask-product .dpx-product-icon > svg path:nth-child(n+2) { fill: currentColor; stroke: none; }
.dpx-product-icon::after { content: ""; position: absolute; inset: -5px; border: 1px solid currentColor; border-radius: 10px; opacity: .24; animation: dpxProductPulse 2.8s ease-out infinite; }
.dpx-product-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 5px 10px; border: 1px solid currentColor; border-radius: 5px; background: rgba(255,255,255,.7); box-shadow: 0 6px 16px rgba(29,61,88,.07); font-size: 10px; line-height: 1; }
.dpx-product-badge > svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dpx-ask-product { color: #dffaff; border: 0; background: radial-gradient(circle at 13% 18%, rgba(100,239,238,.46) 0 3px, transparent 4px), radial-gradient(circle at 84% 78%, rgba(164,104,255,.55) 0 4px, transparent 5px), linear-gradient(125deg, #052f53 0%, #0c6c97 50%, #362b75 100%); box-shadow: 0 24px 48px rgba(12,67,111,.24); }
.dpx-ask-product::before, .dpx-ask-product::after { color: var(--dopa-cyan); }
.dpx-ask-product .dpx-product-icon { color: #fff; background: linear-gradient(135deg, #5ee4df, #3d9ff6 55%, #9c5ff4); border-color: rgba(255,255,255,.65); box-shadow: 0 13px 30px rgba(49,221,243,.38); }
.dpx-ask-product .dpx-product-badge { color: #dff8ff; border-color: #67c9e4; background: rgba(13,60,96,.55); }
.dpx-invoice-product { color: #0a6f98; border: 0; background: radial-gradient(circle at 92% 10%, rgba(255,191,76,.35) 0 22px, transparent 23px), linear-gradient(135deg, #e7f8ff 0%, #f8fbff 48%, #e9fff2 100%); box-shadow: 0 24px 48px rgba(29,83,112,.12); }
.dpx-invoice-product::before, .dpx-invoice-product::after { color: var(--dopa-blue); }
.dpx-invoice-product .dpx-product-icon { color: #fff; background: linear-gradient(135deg, #17b8e7, #176fc2); border-color: #fff; box-shadow: 0 13px 30px rgba(23,136,196,.24); }
.dpx-invoice-product .dpx-product-badge { color: #0d6f91; border-color: #8acde0; background: #fff; }
.dpx-invoice-product h3, .dpx-invoice-product .text-link { color: var(--dopa-navy); }
@keyframes dpxProductPulse { 0%, 65% { transform: scale(.9); opacity: .3; } 100% { transform: scale(1.23); opacity: 0; } }
@keyframes dpxProductOrbit { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .42; } 50% { transform: translate3d(-8px, 7px, 0); opacity: .75; } }
.ask-dopa-card { color: #fff; border-color: var(--dopa-navy); background: var(--dopa-navy); }
.ask-dopa-card .service-icon { color: var(--dopa-cyan); background: #294d68; }
.ask-dopa-card .service-badge { color: var(--dopa-cyan); }
.ask-dopa-card > p { color: #b9cad6; }
.ask-dopa-card .text-link { color: var(--dopa-cyan); }
.ask-dopa-demo { margin-top: 27px; padding: 14px; border: 1px solid rgba(177,245,255,.45); border-radius: 14px; background: rgba(2,28,62,.34); backdrop-filter: blur(9px); }
.ask-prompt { min-height: 45px; padding: 6px 7px 6px 11px; display: grid; grid-template-columns: 22px 1fr 34px; gap: 7px; align-items: center; border: 1px solid rgba(190,246,255,.5); border-radius: 9px; color: #fff; background: rgba(255,255,255,.13); font-size: 10px; }
.ask-prompt > .dpx-demo-icon { width: 16px; height: 16px; color: var(--dopa-cyan); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-prompt button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #64e7df, #6d68ff); cursor: pointer; }.ask-prompt button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }.ask-prompt button.is-loading svg { animation: dpxAskSpin .45s linear infinite; }
.ask-answer { min-height: 82px; padding-top: 13px; display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; }
.ask-dopa-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: linear-gradient(135deg, #5ee4df, #9966f0); animation: dpxAiGlow 2.5s ease-in-out infinite; }.ask-dopa-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-answer p { margin: 0; color: #dce7ee; }
.ask-answer strong, .ask-answer small { display: block; }
.ask-answer strong { font-size: 10px; }
.ask-answer small { margin-top: 4px; color: #9fb5c4; font-size: 8px; }
.ask-answer > b { color: var(--dopa-cyan); font-size: 16px; }
.dpx-ai-orbit { position: absolute; z-index: 0; width: 142px; height: 142px; left: 26px; bottom: 46px; border: 1px solid rgba(145,244,255,.38); border-radius: 50%; pointer-events: none; animation: dpxAiOrbit 9s linear infinite; }.dpx-ai-orbit::before, .dpx-ai-orbit::after { content: ''; position: absolute; inset: 23px; border: 1px dashed rgba(183,234,255,.34); border-radius: 50%; }.dpx-ai-orbit::after { inset: 52px; border: 0; background: radial-gradient(circle, #72f5e9 0 4px, rgba(114,245,233,.16) 5px 11px, transparent 12px); }.dpx-ai-orbit i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #75eee3; box-shadow: 0 0 17px #75eee3; }.dpx-ai-orbit i:nth-child(1) { top: -5px; right: 30px; }.dpx-ai-orbit i:nth-child(2) { bottom: 19px; left: -4px; background: #af80ff; box-shadow: 0 0 17px #af80ff; }.dpx-ai-orbit i:nth-child(3) { right: -5px; bottom: 24px; background: #ffd16d; box-shadow: 0 0 17px #ffd16d; }.dpx-ai-orbit b { position: absolute; inset: 54px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px rgba(94,228,223,.12), 0 0 32px rgba(94,228,223,.7); }
@keyframes dpxAiOrbit { to { transform: rotate(360deg); } } @keyframes dpxAiGlow { 50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(94,228,223,.18); } }
.ask-dopa-card.is-visible .ask-answer { animation: focusContentIn .5s ease .35s both; }
.ask-answer.replay { animation: focusContentIn .5s ease both; }
.invoice-card { background: var(--dopa-bg); }
.invoice-country-tabs { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #b7ddeb; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 9px 21px rgba(20,113,148,.12); }
.invoice-country-tabs button { min-height: 54px; padding: 7px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-left: 1px solid #d8eaf1; color: #55748a; background: #fff; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease; }
.invoice-country-tabs button:last-child { border-left: 0; }
.dpx-flag { width: 28px; height: 20px; flex: 0 0 auto; display: inline-grid; place-items: center; overflow: hidden; border: 1px solid rgba(7,53,78,.12); border-radius: 4px; box-shadow: 0 2px 6px rgba(5,49,78,.18); }.dpx-flag--eg { background: linear-gradient(#e6343c 0 33.3%, #fff 33.3% 66.6%, #111 66.6%); }.dpx-flag--eg i { width: 5px; height: 5px; border: 1px solid #c7972e; border-radius: 50%; background: #f3c64d; }.dpx-flag--sa { color: #fff; background: #06744d; }.dpx-flag--sa i { font-size: 9px; font-style: normal; font-weight: 900; line-height: 1; }.dpx-flag--ae { background: linear-gradient(90deg, #ec3b39 0 27%, transparent 27%), linear-gradient(#159a58 0 33.3%, #fff 33.3% 66.6%, #222 66.6%); }.invoice-country-tabs button.active { color: #fff; transform: translateY(-1px); box-shadow: inset 0 -4px 0 rgba(255,255,255,.65), 0 8px 16px rgba(21,109,145,.16); }.invoice-country-tabs .invoice-country--eg.active { background: linear-gradient(135deg, #e3333b, #b71731); }.invoice-country-tabs .invoice-country--sa.active { background: linear-gradient(135deg, #06955f, #006b47); }.invoice-country-tabs .invoice-country--ae.active { background: linear-gradient(135deg, #db3e45, #0d8d5d 58%, #28313d); }
.invoice-country-panel { min-height: 88px; padding: 14px; display: grid; grid-template-columns: 42px 1fr 20px; gap: 11px; align-items: center; border-bottom: 1px solid var(--dopa-line); background: #fff; animation: focusContentIn .38s ease both; }
.invoice-country-panel[hidden] { display: none; }
.country-code { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #a9cbd8; border-radius: 50%; color: var(--dopa-blue); background: #fff; font-size: 10px; font-weight: 800; }
.invoice-country-panel strong, .invoice-country-panel small { display: block; }
.invoice-country-panel strong { font-size: 10px; }
.invoice-country-panel small { margin-top: 4px; color: var(--dopa-muted); font-size: 8px; line-height: 1.6; }
.dpx-invoice-check { width: 20px; height: 20px; color: var(--dopa-green); fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes dpxAskSpin { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
    .dpx-product-card::after, .dpx-product-icon::after, .dpx-ai-orbit, .ask-dopa-mark { animation: none; }
    .ask-prompt button.is-loading svg { animation: none; }
    .dpx-product-card, .dpx-product-card::before { transition: none; }
}

/* Final call to action */
.final-cta { background: #fff; }
.cta-panel { padding: 54px 58px; background: var(--dopa-navy); color: #fff; border-radius: 8px; display: grid; grid-template-columns: 1fr auto; gap: 38px; align-items: center; position: relative; overflow: hidden; }
.cta-panel::before { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(97,203,234,.16); left: -70px; top: -92px; transform: rotate(18deg); }
.cta-panel h2 { color: #fff; margin: 0 0 10px; font-size: 37px; }
.cta-panel p { color: #bdd0dd; margin: 0; }
.cta-side { text-align: center; position: relative; z-index: 1; }
.cta-side small { display: block; margin-top: 10px; color: #adc1cf; }

/* Footer */
.site-footer { direction: rtl; text-align: right; background: var(--dopa-bg); border-top: 1px solid var(--dopa-line); padding: 62px 0 24px; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 36px; }
.site-footer .footer-brand img { width: 122px; margin-bottom: 18px; }
.site-footer .footer-brand p { color: var(--dopa-muted); font-size: 13px; max-width: 310px; }
.site-footer .footer-col h4 { margin: 0 0 16px; font-size: 14px; }
.site-footer .footer-col a { display: block; color: #687d8e; font-size: 13px; margin: 9px 0; }
.site-footer .footer-col a:hover { color: var(--dopa-blue); }
.site-footer .footer-access { padding-inline-start: 22px; border-inline-start: 1px solid var(--dopa-line); }
.site-footer .footer-access h4 { color: var(--dopa-navy); line-height: 1.55; }
.site-footer .footer-access a { width: fit-content; }
.site-footer .footer-bottom { margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--dopa-line); display: flex; justify-content: space-between; align-items: center; color: var(--dopa-muted); font-size: 12px; }
.site-footer .social-links { display: flex; justify-content: flex-start; gap: 8px; }
.site-footer .social-links a { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; border: 1px solid var(--dopa-line); border-radius: 5px; color: var(--dopa-blue); }

/* Motion */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delay, 0ms); }
.reveal.from-right { transform: translateX(34px); }
.reveal.from-left { transform: translateX(-34px); }
.reveal.is-visible { opacity: 1; transform: translate(0); }
@keyframes screenFloat { 0%,100% { transform: rotateY(1.5deg) rotateX(.6deg) translateY(0); } 50% { transform: rotateY(1deg) rotateX(.4deg) translateY(-8px); } }
@keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes panelIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tourPanelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tourImageIn { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tourImageFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes analyticsRingFill { to { --ring-fill: var(--progress); } }
@keyframes analyticsBarGrow { to { transform: scaleY(1); } }
@keyframes marketingMenuIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes marketingMetricIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marketingBarIn { to { transform: scaleY(1); } }
@keyframes orbitSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes orbitSpinReverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes orbitPulse { 0% { opacity: .65; transform: scale(.92); } 75%,100% { opacity: 0; transform: scale(1.18); } }
@keyframes focusRingPop { 0% { transform: scale(.88); opacity: .45; } 100% { transform: scale(1); opacity: 1; } }
@keyframes focusContentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes messageIn { to { opacity: 1; transform: translateY(0); } }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 1060px) {
    .nav-links { gap: 16px; }
    .nav-links > a, .nav-dropdown-toggle { font-size: 12px; }
    .hero-layout { grid-template-columns: 1fr 1.15fr; gap: 30px; }
    .hero-copy h1 { font-size: 45px; }
    .inbox-layout { grid-template-columns: 1fr; }
    .inbox-copy { max-width: 680px; }
}

@media (max-width: 820px) {
    .dopa-container { width: min(100% - 28px, 680px); }
    .dopa-section { padding: 76px 0; }
    .main-nav { height: 68px; }
    .nav-toggle { display: grid; place-items: center; margin-right: auto; }
    .nav-links { position: fixed; inset: 68px 0 0; background: var(--dopa-navy); padding: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; }
    .nav-links.open { transform: translateX(0); }
    .nav-links > a { padding: 15px 6px; color: #e4edf3; border-bottom: 1px solid rgba(220,230,239,.16); font-size: 15px; }
    .nav-links > a.nav-home { margin-bottom: 6px; padding: 12px 13px; border-bottom: 0; }
    .nav-links > a::after, .nav-links > .nav-dropdown > .nav-dropdown-toggle::after { display: none; }
    .nav-links .nav-dropdown { border-bottom: 1px solid rgba(220,230,239,.16); }
    .nav-links .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 15px 6px; color: #e4edf3; font-size: 15px; }
    .nav-links .nav-dropdown-menu { position: static; display: none; width: 100%; min-width: 0; padding: 6px; margin: 0 0 10px; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
    .nav-links .nav-dropdown.open > .nav-dropdown-menu { display: grid; }
    .specialties-menu { grid-template-columns: 1fr 1fr; }
    .nav-actions .nav-login, .nav-actions .language-switch { display: none; }
    .nav-actions .dopa-btn { min-height: 42px; padding: 8px 13px; font-size: 12px; }
    .dopa-hero { padding-top: 58px; min-height: auto; }
    .hero-layout { grid-template-columns: 1fr; }
    .hero-copy { text-align: center; }
    .hero-copy > p { margin-inline: auto; }
    .hero-actions, .hero-notes { justify-content: center; }
    .hero-screen-wrap { margin-top: 30px; }
    .chip-message { right: -5px; bottom: 24px; }
    .chip-appointment { left: -5px; top: 18px; }
    .hero-metrics { grid-template-columns: 1fr 1fr; }
    .hero-metric:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--dopa-line); }
    .hero-metric:nth-child(4) { border-top: 1px solid var(--dopa-line); }
    .section-head { display: block; }
    .journey-shell { grid-template-columns: 1fr; }
    .journey-nav { border-inline-end: 0; border-bottom: 1px solid var(--dopa-line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .journey-nav > span { grid-column: 1 / -1; }
    .journey-tab { display: block; text-align: center; padding: 10px 4px; }
    .journey-tab i { margin: auto; }
    .journey-tab small { display: none; }
    .journey-tab.active { transform: translateY(-3px); }
    .journey-panel { grid-template-columns: 1fr; padding: 32px; }
    .mini-app { order: -1; }
    .tour-tabs { display: flex; overflow-x: auto; scrollbar-width: thin; }
    .tour-tab { flex: 0 0 145px; }
    .tour-panel { grid-template-columns: 1fr; min-height: auto; }
    .tour-visual { border-left: 0; border-bottom: 1px solid var(--dopa-line); }
    .tour-copy { padding: 34px; }
    .analytics-console { min-height: 490px; }
    .marketing-section-head { grid-template-columns: 1fr; gap: 18px; }
    .marketing-showcase, .marketing-orbit-showcase { grid-template-columns: 1fr; }
    .marketing-orbit-showcase { gap: 20px; }
    .marketing-orbit { max-width: 590px; width: 100%; margin-inline: auto; }
    .marketing-orbit-detail { min-height: 0; padding: 38px 0 0; border-left: 0; border-top: 1px solid rgba(213,229,239,.18); }
    .marketing-tools-copy h3 { max-width: none; }
    .marketing-tool-list { grid-template-columns: 1fr 1fr; gap: 4px 18px; }
    .marketing-system-nav span { padding-inline: 9px; }
    .marketing-system-nav span:nth-child(2), .marketing-system-nav span:nth-child(5) { display: none; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .service-card, .service-card.large { grid-column: auto; }
    .service-card.ask-dopa-card, .service-card.invoice-card { grid-column: 1 / -1; }
    .service-card.large { min-height: 260px; }
    .cta-panel { grid-template-columns: 1fr; text-align: center; padding: 42px 28px; }
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .brand { width: 84px; }
    .dopa-btn { width: 100%; }
    .nav-actions .dopa-btn { width: auto; }
    .hero-copy h1 { font-size: 37px; }
    .hero-copy > p { font-size: 15px; }
    .hero-actions { flex-direction: column; }
    .hero-notes { gap: 8px 16px; }
    .hero-screen { padding: 5px; }
    .screen-chip { display: none; }
    .hero-metrics { margin-top: 35px; }
    .hero-metric { padding: 16px 12px; }
    .hero-metric i { font-size: 18px; }
    .hero-metric strong { font-size: 17px; }
    .section-title { font-size: 31px; }
    .journey-nav { overflow-x: auto; grid-template-columns: repeat(3, minmax(125px, 1fr)); }
    .journey-panel { padding: 22px 16px 28px; }
    .journey-copy h3 { font-size: 23px; }
    .mini-app { min-height: 290px; padding: 10px; }
    .tour-tab { min-height: 58px; padding: 8px; font-size: 11px; }
    .tour-visual { padding: 10px; }
    .tour-copy { padding: 28px 20px; }
    .tour-copy h3 { font-size: 23px; }
    .analytics-visual { padding: 10px; }
    .analytics-console { min-height: 430px; }
    .analytics-summary { grid-template-columns: 1fr 1fr; padding: 8px; gap: 5px; }
    .analytics-summary > div { padding: 8px; }
    .analytics-summary strong { font-size: 15px; }
    .analytics-rings { padding: 0 8px 8px; gap: 4px; }
    .analytics-ring-card { padding: 9px 3px 7px; }
    .analytics-ring { width: 82px; height: 82px; }
    .analytics-ring::before { inset: 9px; }
    .analytics-ring strong { font-size: 14px; }
    .analytics-ring-card p { font-size: 6px; }
    .analytics-trend { margin: 0 8px 8px; padding: 8px; }
    .analytics-bars { height: 58px; gap: 6px; }
    .marketing-orbit { min-height: 470px; }
    .orbit-line-one { width: 235px; height: 235px; }
    .orbit-line-two { width: 340px; height: 340px; }
    .marketing-orbit-core { width: 118px; height: 118px; padding: 12px; }
    .marketing-orbit-core strong { font-size: 11px; }
    .marketing-orbit-node { width: 72px; height: 72px; gap: 4px; }
    .marketing-orbit-node i { font-size: 15px; }
    .marketing-orbit-node span { font-size: 7px; }
    .marketing-orbit-node.node-one { top: 2%; margin-left: -36px; }
    .marketing-orbit-node.node-two { top: 14%; right: 1%; }
    .marketing-orbit-node.node-three { top: 43%; right: -1%; }
    .marketing-orbit-node.node-four { right: 8%; bottom: 5%; }
    .marketing-orbit-node.node-five { left: 8%; bottom: 5%; }
    .marketing-orbit-node.node-six { top: 43%; left: -1%; }
    .marketing-orbit-node.node-seven { top: 14%; left: 1%; }
    .marketing-orbit-detail h3 { font-size: 24px; }
    .marketing-focus-result { grid-template-columns: 112px 1fr; gap: 9px; }
    .marketing-focus-ring { width: 106px; height: 106px; }
    .marketing-focus-flow > span { width: 42px; }
    .marketing-focus-flow > span i { width: 32px; height: 32px; }
    .marketing-console { min-height: 390px; }
    .marketing-system-bar { padding-inline: 10px; gap: 10px; }
    .marketing-system-nav span { padding-inline: 7px; }
    .marketing-system-nav span:not(.active) { display: none; }
    .marketing-workspace { min-height: 336px; grid-template-columns: 112px 1fr; }
    .marketing-menu { margin: 7px; padding: 6px; }
    .marketing-menu > span:not(.menu-label) { padding: 7px 5px; gap: 4px; font-size: 7px; }
    .marketing-menu > span:not(.menu-label) i { width: 11px; }
    .marketing-dashboard { padding: 13px 8px; }
    .marketing-title-row { margin-bottom: 9px; }
    .marketing-title-row > span { display: none; }
    .marketing-metrics { gap: 4px; }
    .marketing-metric { padding: 8px 5px; display: block; }
    .marketing-metric > i, .marketing-metric b { display: none; }
    .marketing-metric small { font-size: 6px; }
    .marketing-metric strong { font-size: 11px; }
    .marketing-chart-card { padding: 8px; }
    .marketing-chart { height: 105px; gap: 4px; }
    .marketing-tool-list { grid-template-columns: 1fr; }
    .inbox-columns { grid-template-columns: 94px 1fr; height: 390px; }
    .threads { display: none; }
    .channel-item { padding-inline: 4px; }
    .inbox-appbar span { display: none; }
    .services-grid { grid-template-columns: 1fr; }
    .service-card, .service-card.large { min-height: 245px; }
    .service-card.ask-dopa-card, .service-card.invoice-card { min-height: 455px; }
    .service-badge { top: 28px; left: 20px; }
    .ask-dopa-demo { padding: 10px; }
    .ask-answer { grid-template-columns: 30px 1fr; }
    .ask-answer > b { display: none; }
    .invoice-country-tabs button { gap: 4px; padding-inline: 3px; font-size: 8px; }
    .invoice-country-tabs button span { width: 20px; height: 20px; }
    .specialties-title { display: block; }
    .cta-panel h2 { font-size: 29px; }
    .site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .site-footer .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
    .site-footer .social-links { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
    .chat-message, .booking-confirm { opacity: 1; transform: none; }
}

/* Arabic homepage: website showcase and specialty solutions */
.dpx-web-showcase { background: linear-gradient(135deg, #f7fbfd 0%, #eef6fa 100%); border-block: 1px solid var(--dopa-line); }
.dpx-web-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 54px; align-items: center; }
.dpx-web-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dpx-web-heading-row h2, .dpx-specialties-head h2 { margin: 8px 0 14px; color: var(--dopa-navy); font-size: clamp(31px, 3.3vw, 47px); line-height: 1.35; letter-spacing: -.8px; }
.dpx-web-count { flex: none; padding: 8px 11px; margin-top: 9px; border-radius: 999px; background: #dff5fb; color: #0d789a; font-size: 12px; font-weight: 800; }
.dpx-web-copy > p { max-width: 610px; margin: 0; color: var(--dopa-muted); font-size: 15px; line-height: 2; }
.dpx-web-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 15px; }
.dpx-web-filters button { border: 1px solid #cfe1eb; border-radius: 999px; background: #fff; padding: 8px 13px; color: var(--dopa-navy); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.dpx-web-filters button:hover, .dpx-web-filters button:focus-visible, .dpx-web-filters button.is-active { background: var(--dopa-navy); color: #fff; border-color: var(--dopa-navy); outline: none; }
.dpx-web-filters button:focus-visible, .dpx-web-template:focus-visible { box-shadow: 0 0 0 3px rgba(39,180,218,.27); }
.dpx-web-catalog-note { display: flex; align-items: center; gap: 8px; font-size: 12px !important; }
.dpx-web-catalog-note i { color: var(--dopa-blue); }
.dpx-web-templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.dpx-web-template { min-width: 0; padding: 8px; text-align: right; font: inherit; border: 1px solid #dbe8ef; border-radius: 10px; background: rgba(255,255,255,.75); color: var(--dopa-navy); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.dpx-web-template:hover, .dpx-web-template.is-selected { transform: translateY(-2px); border-color: var(--dopa-blue); box-shadow: 0 9px 22px rgba(29,61,88,.1); }
.dpx-web-template[hidden] { display: none; }
.dpx-web-template strong, .dpx-web-template small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpx-web-template strong { padding: 8px 2px 1px; font-size: 12px; }
.dpx-web-template small { color: var(--dopa-muted); font-size: 9px; }
.dpx-web-showcase .dpx-web-mini { display: block; height: 62px; position: relative; overflow: hidden; border-radius: 6px; background: #e7f6fb; }
.dpx-web-showcase .dpx-web-mini::before { content: ''; position: absolute; inset: 0 0 auto; height: 11px; background: rgba(255,255,255,.92); }
.dpx-web-showcase .dpx-web-mini i { position: absolute; z-index: 2; display: grid; place-items: center; color: #fff; font-size: 10px; }
.dpx-web-showcase .dpx-web-mini b, .dpx-web-showcase .dpx-web-mini em { position: absolute; display: block; border-radius: 2px; background: rgba(29,61,88,.5); }
.dpx-web-showcase .dpx-web-mini--editorial { background: linear-gradient(115deg,#f9feff 47%,#cbeefa); }.dpx-web-showcase .dpx-web-mini--editorial i { width: 24px; height: 24px; top: 20px; right: 12px; border-radius: 50%; background:#27b4da; }.dpx-web-showcase .dpx-web-mini--editorial b { top: 23px; right: 44px; width: 42px; height: 6px; }.dpx-web-showcase .dpx-web-mini--editorial em { top: 35px; right: 44px; width: 31px; height: 3px; }
.dpx-web-showcase .dpx-web-mini--split { background:#fff0f5; }.dpx-web-showcase .dpx-web-mini--split::after { content:''; position:absolute; inset: 11px auto 0 0; width:43%; background:linear-gradient(140deg,#ecc1d2,#c8678e); border-radius:0 0 20px 0; }.dpx-web-showcase .dpx-web-mini--split i { width:23px; height:23px; top:24px; left:11px; border-radius:5px; background:#fff; color:#c8678e; }.dpx-web-showcase .dpx-web-mini--split b { top:23px; right:12px; width:36px; height:6px; }.dpx-web-showcase .dpx-web-mini--split em { top:35px; right:12px; width:27px; height:3px; }
.dpx-web-showcase .dpx-web-mini--steps { background:#fff6ed; }.dpx-web-showcase .dpx-web-mini--steps i { width:26px; height:26px; top:18px; right:12px; border-radius:50% 50% 6px 6px; background:#e28b46; }.dpx-web-showcase .dpx-web-mini--steps b { width:7px; height:15px; bottom:8px; left:11px; background:#edb47c; box-shadow:12px -8px 0 #e28b46,24px -15px 0 #cb7435,36px -24px 0 #9b5124; }.dpx-web-showcase .dpx-web-mini--steps em { top:24px; right:45px; width:32px; height:3px; }
.dpx-web-showcase .dpx-web-mini--grid { background:#eff7ed; }.dpx-web-showcase .dpx-web-mini--grid i { width:25px; height:25px; top:18px; right:12px; border-radius:50%; background:#70a46d; }.dpx-web-showcase .dpx-web-mini--grid b { top:18px; left:11px; width:19px; height:13px; background:#c5ddc1; box-shadow:0 17px 0 #99c293,23px 0 0 #99c293,23px 17px 0 #c5ddc1; }.dpx-web-showcase .dpx-web-mini--grid em { top:24px; right:44px; width:28px; height:3px; }
.dpx-web-showcase .dpx-web-mini--focus { background:#f0f1ff; }.dpx-web-showcase .dpx-web-mini--focus i { width:32px; height:19px; top:25px; right:calc(50% - 16px); border-radius:50%; background:#6874c9; }.dpx-web-showcase .dpx-web-mini--focus i::after { content:''; width:7px; height:7px; border-radius:50%; background:#fff; }.dpx-web-showcase .dpx-web-mini--focus b { top:20px; right:12px; width:19px; height:4px; }.dpx-web-showcase .dpx-web-mini--focus em { bottom:10px; right:13px; width:52px; height:3px; }
.dpx-web-showcase .dpx-web-mini--care { background:#edf3f6; }.dpx-web-showcase .dpx-web-mini--care::after { content:''; position:absolute; width:44px; height:34px; left:10px; bottom:8px; border-radius:16px 16px 4px 4px; background:#b4c6d1; }.dpx-web-showcase .dpx-web-mini--care i { width:25px; height:25px; top:18px; right:12px; border-radius:7px; background:#7892a7; }.dpx-web-showcase .dpx-web-mini--care b { top:23px; right:46px; width:35px; height:6px; }.dpx-web-showcase .dpx-web-mini--care em { top:35px; right:46px; width:22px; height:3px; }
/* The template cards use local SVG miniatures and cannot inherit shared icons. */
.dpx-web-showcase .dpx-web-mini > .dpx-icon { position:absolute; z-index:2; display:grid; place-items:center; color:#fff; font-size:10px; }
.dpx-web-showcase .dpx-web-mini--editorial > .dpx-icon { width:24px; height:24px; top:20px; right:12px; border-radius:50%; background:#27b4da; }
.dpx-web-showcase .dpx-web-mini--split > .dpx-icon { width:23px; height:23px; top:24px; left:11px; border-radius:5px; background:#fff; color:#c8678e; }
.dpx-web-showcase .dpx-web-mini--steps > .dpx-icon { width:26px; height:26px; top:18px; right:12px; border-radius:50% 50% 6px 6px; background:#e28b46; }
.dpx-web-showcase .dpx-web-mini--grid > .dpx-icon { width:25px; height:25px; top:18px; right:12px; border-radius:50%; background:#70a46d; }
.dpx-web-showcase .dpx-web-mini--focus > .dpx-icon { width:32px; height:19px; top:25px; right:calc(50% - 16px); border-radius:50%; background:#6874c9; }
.dpx-web-showcase .dpx-web-mini--care > .dpx-icon { width:25px; height:25px; top:18px; right:12px; border-radius:7px; background:#7892a7; }
.dpx-web-browser-bar > .dpx-icon { color:var(--dpx-accent); font-size:10px; }
.dpx-web-illustration > .dpx-icon { z-index:1; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--dpx-accent); color:#fff; font-size:19px; }
.dpx-web-site-cards .dpx-icon { color:var(--dpx-accent); }
.dpx-web-preview { min-width: 0; }
.dpx-web-browser { overflow: hidden; border: 1px solid #cedfe8; border-radius: 14px; background: #fff; box-shadow: 0 22px 54px rgba(26,59,84,.16); transition: box-shadow .25s ease; }
.dpx-web-browser-bar { direction: ltr; height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 13px; background: #f1f6f9; border-bottom: 1px solid #e0eaf0; }
.dpx-web-browser-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #c0d0d9; }.dpx-web-browser-bar > b { margin: 0 auto; max-width: 190px; overflow: hidden; padding: 3px 11px; border-radius: 5px; background: #fff; color: #7590a0; font: 600 9px Cairo, sans-serif; }.dpx-web-browser-bar > i { color: var(--dpx-accent); font-size: 10px; }
.dpx-web-site { direction: rtl; padding: 0 22px 22px; background: linear-gradient(140deg, #fff 52%, color-mix(in srgb, var(--dpx-accent) 11%, #fff)); }
.dpx-web-site header { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.dpx-web-site header strong { color: var(--dopa-navy); font-size: 15px; }.dpx-web-site header nav { display: flex; gap: 13px; color: #7890a0; font-size: 9px; }.dpx-web-site header button, .dpx-web-preview-caption button { border: 0; border-radius: 6px; background: var(--dpx-accent); color: #fff; font: 700 10px Cairo, sans-serif; cursor: pointer; }
.dpx-web-site header button { padding: 7px 10px; }.dpx-web-site-hero { min-height: 224px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 16px; padding: 27px; border-radius: 9px; background: linear-gradient(135deg, color-mix(in srgb, var(--dpx-accent) 18%, #fff) 0%, #fff 65%); }.dpx-web-site-hero small { color: var(--dpx-accent); font-size: 10px; font-weight: 800; }.dpx-web-site-hero h3 { margin: 6px 0; color: var(--dopa-navy); font-size: clamp(21px,2.3vw,31px); line-height: 1.45; }.dpx-web-site-hero p { margin: 0 0 15px; color: #638092; font-size: 10px; }.dpx-web-site-hero b { display: inline-flex; gap: 8px; padding: 8px 12px; border-radius: 6px; background: var(--dpx-accent); color: #fff; font-size: 10px; }
.dpx-web-illustration { min-height: 145px; display: grid; place-items: center; position: relative; border-radius: 50% 50% 38% 38%; background: color-mix(in srgb, var(--dpx-accent) 28%, #fff); }.dpx-web-illustration::before, .dpx-web-illustration::after { content: ''; position: absolute; border-radius: 50%; background: #fff; opacity: .72; }.dpx-web-illustration::before { width: 48px; height: 48px; top: 20px; }.dpx-web-illustration::after { width: 87px; height: 52px; bottom: 15px; border-radius: 50px 50px 22px 22px; }.dpx-web-illustration i { z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--dpx-accent); color: #fff; font-size: 19px; }
.dpx-web-browser--split .dpx-web-site-hero { grid-template-columns: .78fr 1.22fr; background: linear-gradient(125deg, #fff 38%, color-mix(in srgb, var(--dpx-accent) 20%, #fff)); }.dpx-web-browser--split .dpx-web-illustration { order: -1; border-radius: 18px 55px 18px 55px; }.dpx-web-browser--steps .dpx-web-site-hero { grid-template-columns: 1fr .8fr; border-inline-start: 5px solid var(--dpx-accent); }.dpx-web-browser--steps .dpx-web-illustration { border-radius: 12px; }.dpx-web-browser--steps .dpx-web-illustration::after { width: 96px; height: 2px; border-radius: 0; background: var(--dpx-accent); box-shadow: -12px -13px 0 -1px var(--dpx-accent), 16px 12px 0 -1px var(--dpx-accent); }.dpx-web-browser--grid .dpx-web-site-hero { grid-template-columns: 1fr; text-align: center; }.dpx-web-browser--grid .dpx-web-illustration { display: none; }.dpx-web-browser--grid .dpx-web-site-cards { grid-template-columns: repeat(3, 1fr); }.dpx-web-browser--focus .dpx-web-site-hero { grid-template-columns: .85fr 1.15fr; }.dpx-web-browser--focus .dpx-web-illustration { border-radius: 50%; background: radial-gradient(circle, #fff 11%, color-mix(in srgb, var(--dpx-accent) 26%, #fff) 12% 32%, transparent 33%); }.dpx-web-browser--focus .dpx-web-illustration::after { width: 116px; height: 54px; bottom: 43px; background: transparent; border: 2px solid var(--dpx-accent); }.dpx-web-browser--care .dpx-web-site-hero { grid-template-columns: 1.15fr .85fr; background: #f6f9fa; }.dpx-web-browser--care .dpx-web-illustration { border-radius: 20px 20px 6px 6px; }.dpx-web-browser--care .dpx-web-illustration::before { border-radius: 12px 12px 50% 50%; }
.dpx-web-site-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }.dpx-web-site-cards span { padding: 9px 7px; border: 1px solid #e4edf1; border-radius: 6px; color: #587084; text-align: center; font-size: 9px; }.dpx-web-site-cards i { color: var(--dpx-accent); }
.dpx-web-preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px 0; }.dpx-web-preview-caption span, .dpx-web-preview-caption small { display: block; }.dpx-web-preview-caption span { color: var(--dopa-muted); font-size: 11px; }.dpx-web-preview-caption strong { display: inline-block; margin: 1px 0; color: var(--dopa-navy); font-size: 19px; }.dpx-web-preview-caption small { color: var(--dopa-blue); font-size: 11px; }.dpx-web-preview-caption button { padding: 10px 14px; font-size: 11px; }.dpx-web-live-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dpx-specialties { overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f4fbff 100%); }
.dpx-specialties-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.dpx-specialties-head p { margin: 0; color: var(--dopa-muted); font-size: 15px; line-height: 2; }
.dpx-specialties-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; min-width:0; padding:0; }
.dpx-specialties-grid > a { display:flex; min-height:244px; flex-direction:column; align-items:flex-start; padding:24px; color:var(--dopa-navy); border:1px solid #dce7ee; border-radius:17px; background:#fff; box-shadow:0 8px 15px rgba(28,83,109,.05); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.dpx-specialties-grid > a:hover, .dpx-specialties-grid > a:focus-visible { transform:translateY(-7px); border-color:#28afd2; box-shadow:0 18px 30px rgba(19,128,168,.18); outline:none; }
.dpx-specialties-grid > a:nth-child(3n+2) .dpx-specialty-icon { background:#ece6ff; color:#8156d1; }
.dpx-specialties-grid > a:nth-child(3n) .dpx-specialty-icon { background:#e2f8eb; color:#168b5b; }
.dpx-specialty-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#dff6fc; color:#159ec3; }
.dpx-specialty-icon:empty::after { content:'+'; font-size:22px; font-weight:700; }
.dpx-specialty-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dpx-specialties-grid h3 { margin:20px 0 8px; font-size:19px; }
.dpx-specialties-grid p { margin:0; color:var(--dopa-muted); font-size:12px; line-height:1.85; }
.dpx-specialties-grid span:not(.dpx-specialty-icon) { margin-top:auto; padding-top:17px; color:var(--dopa-blue); font-size:11px; font-weight:800; }
.dpx-specialties-grid span:not(.dpx-specialty-icon) > i { display:inline-block; width:7px; height:7px; margin-inline-start:4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(135deg); vertical-align:1px; }
.dpx-specialties-grid span:not(.dpx-specialty-icon) > i::before { content:none; }
@media (max-width: 980px) { .dpx-web-layout { grid-template-columns: 1fr; gap: 34px; }.dpx-web-preview { max-width: 720px; width: 100%; margin-inline: auto; } }
@media (max-width: 560px) { .dpx-web-showcase, .dpx-specialties { padding-block: 58px; }.dpx-web-heading-row { display: block; }.dpx-web-count { display: inline-block; margin: 0 0 14px; }.dpx-web-templates { grid-template-columns: 1fr; }.dpx-web-template { display: grid; grid-template-columns: 112px 1fr; column-gap: 10px; align-items: center; }.dpx-web-template .dpx-web-mini { grid-row: 1 / 3; height: 64px; }.dpx-web-template strong, .dpx-web-template small { padding: 0; }.dpx-web-site { padding: 0 12px 12px; }.dpx-web-site header nav { display: none; }.dpx-web-site header strong { font-size: 13px; }.dpx-web-site-hero, .dpx-web-browser--split .dpx-web-site-hero, .dpx-web-browser--steps .dpx-web-site-hero, .dpx-web-browser--focus .dpx-web-site-hero, .dpx-web-browser--care .dpx-web-site-hero { grid-template-columns: 1fr; min-height: 0; padding: 19px; text-align: right; }.dpx-web-site-hero h3 { font-size: 23px; }.dpx-web-site-hero p { font-size: 11px; line-height: 1.8; }.dpx-web-site-hero small, .dpx-web-site-hero b { font-size: 11px; }.dpx-web-illustration { min-height: 105px; margin-top: 15px; }.dpx-web-browser--grid .dpx-web-site-hero { text-align: center; }.dpx-web-site-cards { grid-template-columns: 1fr; }.dpx-web-browser--grid .dpx-web-site-cards { grid-template-columns: 1fr; }.dpx-web-site-cards span { display: flex; gap: 7px; align-items: center; padding: 10px; font-size: 11px; text-align: right; }.dpx-web-preview-caption { align-items: flex-start; flex-direction: column; gap: 8px; }.dpx-ai-orbit { transform: scale(.74); transform-origin: bottom left; }.dpx-web-heading-row h2, .dpx-specialties-head h2 { font-size: 30px; } }

/* Static specialty cards: each direct route stays visible without carousel controls. */
.dpx-specialties .dpx-specialties-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:auto; gap:18px; min-width:0; padding:0; }
.dpx-specialties .dpx-specialties-grid > a { min-height:244px; scroll-snap-align:none; }
/* Template thumbnail illustrations are fully scoped; no shared icon/font rule can recolour them. */
.dpx-web-showcase .dpx-web-mini > i,
.dpx-web-showcase .dpx-web-mini > b,
.dpx-web-showcase .dpx-web-mini > em { display:none !important; }
.dpx-web-showcase .dpx-web-mini::after { display:none !important; }
.dpx-web-showcase .dpx-web-mini-art { position:absolute; z-index:3; inset:0; width:100%; height:100%; display:block; }
.dpx-web-showcase .dpx-web-mini::after { content:''; position:absolute; z-index:2; inset:12px 10px 8px; display:block; border-radius:7px; background:linear-gradient(135deg,#27b4da 0 38%,transparent 39%) 100% 100%/40% 85% no-repeat, linear-gradient(#88d4e7 0 0) 5% 68%/46% 7% no-repeat, linear-gradient(#badfee 0 0) 5% 88%/34% 5% no-repeat; }
.dpx-web-showcase .dpx-web-mini--split::after { inset:12px 10px 8px; border-radius:7px; background:radial-gradient(circle at 76% 38%,#fff 0 9%,transparent 10%), linear-gradient(135deg,transparent 0 42%,#c8678e 43% 100%) 100% 100%/52% 100% no-repeat, linear-gradient(#eab2c7 0 0) 4% 65%/31% 8% no-repeat, linear-gradient(#f3cddd 0 0) 4% 85%/45% 6% no-repeat; }
.dpx-web-showcase .dpx-web-mini--steps::after { inset:12px 10px 8px; border-radius:0; background:linear-gradient(135deg,transparent 49%,#e28b46 50% 57%,transparent 58%) 10% 25%/78% 65% no-repeat, radial-gradient(circle at 18% 77%,#f2bf89 0 8%,transparent 9%), radial-gradient(circle at 50% 53%,#e28b46 0 8%,transparent 9%), radial-gradient(circle at 81% 28%,#cb7435 0 8%,transparent 9%); }
.dpx-web-showcase .dpx-web-mini--grid::after { inset:11px 12px 9px; border-radius:5px; background:linear-gradient(#c5ddc1 0 0) 0 0/44% 41% no-repeat,linear-gradient(#99c293 0 0) 100% 0/44% 41% no-repeat,linear-gradient(#99c293 0 0) 0 100%/44% 41% no-repeat,linear-gradient(#c5ddc1 0 0) 100% 100%/44% 41% no-repeat; }
.dpx-web-showcase .dpx-web-mini--focus::after { inset:13px 10px 8px; border-radius:0; background:radial-gradient(ellipse at 51% 48%,#fff 0 11%,#6874c9 12% 31%,transparent 32%), linear-gradient(#afb6ea 0 0) 5% 88%/70% 6% no-repeat; }
.dpx-web-showcase .dpx-web-mini--care::after { inset:12px 10px 8px; border-radius:0; background:linear-gradient(135deg,transparent 36%,#7892a7 37% 100%) 8% 100%/42% 72% no-repeat,linear-gradient(45deg,transparent 48%,#7892a7 49% 100%) 8% 100%/42% 72% no-repeat,linear-gradient(#b4c6d1 0 0) 62% 31%/35% 8% no-repeat,linear-gradient(#d2dfe5 0 0) 62% 55%/26% 6% no-repeat; }
.dpx-web-showcase .dpx-web-mini::after { display:none !important; }
@media (max-width:980px) { .dpx-specialties .dpx-specialties-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .dpx-specialties .dpx-specialties-grid { grid-template-columns:1fr; } }

/* Miniature clinic sites: pure CSS interface layouts, isolated from the shared SVG/icon system. */
.dpx-web-showcase .dpx-web-mini > svg { display:none !important; }
.dpx-web-showcase .dpx-web-mini { isolation:isolate; border:1px solid rgba(28,80,108,.08); background:#fff !important; }
.dpx-web-showcase .dpx-web-mini::before { content:'' !important; z-index:3; inset:0 0 auto !important; height:14px !important; background:linear-gradient(90deg,#f6fafc 0 17%,transparent 17% 20%,#f6fafc 20% 33%,transparent 33% 36%,#f6fafc 36% 50%,transparent 50% 100%) !important; border-bottom:1px solid #e4edf2; }
.dpx-web-showcase .dpx-web-mini::after { content:'' !important; display:block !important; z-index:1; inset:19px 8px 7px !important; border-radius:4px !important; background:linear-gradient(135deg,#e8f8fc 0 47%,#d1f0f8 48% 100%) !important; }
.dpx-web-showcase .dpx-web-mini--editorial::after { background:radial-gradient(circle at 75% 42%,#25b4da 0 12%,#d9f4fa 13% 30%,transparent 31%),linear-gradient(#1e5874 0 0) 11% 30%/39% 8% no-repeat,linear-gradient(#87a7b7 0 0) 11% 47%/32% 5% no-repeat,linear-gradient(#87a7b7 0 0) 11% 59%/26% 5% no-repeat,linear-gradient(135deg,#eefafe,#c9edf7) !important; }
.dpx-web-showcase .dpx-web-mini--split::after { background:radial-gradient(circle at 78% 42%,#fff 0 9%,#d984a5 10% 25%,transparent 26%),linear-gradient(#8b385c 0 0) 10% 32%/37% 8% no-repeat,linear-gradient(#d78ba7 0 0) 10% 49%/28% 5% no-repeat,linear-gradient(130deg,#fff4f7 0 54%,#ebbed0 55% 100%) !important; }
.dpx-web-showcase .dpx-web-mini--steps::after { background:linear-gradient(#8e4f1f 0 0) 11% 31%/35% 8% no-repeat,linear-gradient(#d99150 0 0) 11% 48%/26% 5% no-repeat,linear-gradient(135deg,transparent 45%,#df8943 46% 51%,transparent 52%) 62% 34%/30% 43% no-repeat,radial-gradient(circle at 62% 66%,#f1bd8c 0 7%,transparent 8%),radial-gradient(circle at 77% 47%,#e28b46 0 7%,transparent 8%),radial-gradient(circle at 91% 28%,#bd6727 0 7%,transparent 8%),#fff7ef !important; }
.dpx-web-showcase .dpx-web-mini--grid::after { background:linear-gradient(#4d7f4b 0 0) 11% 30%/38% 8% no-repeat,linear-gradient(#94bb8e 0 0) 11% 48%/28% 5% no-repeat,linear-gradient(#d1e7cd 0 0) 62% 29%/24% 23% no-repeat,linear-gradient(#aed1a8 0 0) 62% 57%/24% 23% no-repeat,linear-gradient(#aed1a8 0 0) 89% 29%/24% 23% no-repeat,linear-gradient(#d1e7cd 0 0) 89% 57%/24% 23% no-repeat,#f3fbf1 !important; }
.dpx-web-showcase .dpx-web-mini--focus::after { background:radial-gradient(circle at 74% 50%,#fff 0 7%,#6d78c8 8% 18%,#cdd1f2 19% 30%,transparent 31%),linear-gradient(#41498d 0 0) 11% 31%/35% 8% no-repeat,linear-gradient(#98a0d7 0 0) 11% 48%/28% 5% no-repeat,linear-gradient(#eef0ff,#dfe3fb) !important; }
.dpx-web-showcase .dpx-web-mini--care::after { background:linear-gradient(#4f6e83 0 0) 54% 31%/34% 8% no-repeat,linear-gradient(#9ab1c0 0 0) 54% 49%/28% 5% no-repeat,linear-gradient(135deg,transparent 50%,#6f8da2 51% 100%) 11% 42%/26% 36% no-repeat,linear-gradient(45deg,transparent 50%,#6f8da2 51% 100%) 27% 42%/26% 36% no-repeat,#f1f6f8 !important; }

/* Final isolation for the website-template thumbnails.  These are CSS mini
   site layouts, never shared SVG/font icons; global icon rules must not leak
   into this small preview surface. */
#clinic-websites .dpx-web-template .dpx-web-mini > svg,
#clinic-websites .dpx-web-template .dpx-web-mini .dpx-web-mini-art,
#clinic-websites .dpx-web-template .dpx-web-mini .dpx-icon,
#clinic-websites .dpx-web-template .dpx-web-mini [data-dpx-icon],
#clinic-websites .dpx-web-template .dpx-web-mini i {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Last-resort guard: legacy thumbnails may still contain injected SVG/icon markup. */
#clinic-websites .dpx-web-template .dpx-web-mini svg,
#clinic-websites .dpx-web-template .dpx-web-mini .dpx-web-mini-art,
#clinic-websites .dpx-web-template .dpx-web-mini .dpx-icon,
#clinic-websites .dpx-web-template .dpx-web-mini [data-dpx-icon],
#clinic-websites .dpx-web-template .dpx-web-mini i { display:none !important; visibility:hidden !important; opacity:0 !important; width:0 !important; height:0 !important; }
#clinic-websites .dpx-web-template .dpx-web-mini::before,
#clinic-websites .dpx-web-template .dpx-web-mini::after { pointer-events:none; }

/* Homepage refresh: one clear launch journey, sized for touch as well as desktop. */
.dpx-web-showcase { display:none; }
.dpx-launch-journey { position:relative; overflow:hidden; background:#f4fafc; border-block:1px solid #dbe9ef; }
.dpx-launch-journey::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(28,88,116,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(28,88,116,.07) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,transparent,black 25%,black 75%,transparent); }
.dpx-launch-journey .dopa-container { position:relative; }
.dpx-launch-heading { max-width:730px; margin:0 auto 34px; text-align:center; }
.dpx-launch-heading h2, .dpx-pricing-head h2 { margin:9px 0 12px; color:var(--dopa-navy); font-size:clamp(31px,3.5vw,48px); line-height:1.3; }
.dpx-launch-heading p, .dpx-pricing-head p { margin:0; color:var(--dopa-muted); font-size:15px; line-height:2; }
.dpx-launch-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; align-items:stretch; }
.dpx-launch-step { position:relative; min-width:0; padding:28px; border:1px solid #cbdde6; border-radius:15px; background:#fff; box-shadow:0 16px 42px rgba(29,61,88,.08); }
.dpx-launch-step::after { content:""; position:absolute; top:52px; inset-inline-start:-20px; width:24px; height:1px; background:#67c8df; }
.dpx-launch-step:first-child::after { display:none; }
.dpx-step-number { position:absolute; top:16px; inset-inline-end:18px; color:#8aa6b5; font-size:11px; font-weight:800; letter-spacing:.08em; }
.dpx-step-copy { padding-inline-end:42px; }
.dpx-step-copy > span { color:var(--dopa-blue); font-size:12px; font-weight:800; }
.dpx-step-copy h3 { margin:5px 0 7px; color:var(--dopa-navy); font-size:21px; }
.dpx-step-copy p { min-height:48px; margin:0; color:var(--dopa-muted); font-size:12px; line-height:1.85; }
.dpx-domain-input { direction:ltr; display:flex; align-items:center; gap:4px; margin-top:25px; padding:4px 12px; border:1px solid #b9dbe6; border-radius:8px; background:#f9fdff; color:#7293a3; font:700 13px Cairo,sans-serif; }
.dpx-domain-input:focus-within { border-color:var(--dopa-blue); box-shadow:0 0 0 3px rgba(45,157,192,.16); }
.dpx-domain-input input { direction:rtl; min-width:0; width:100%; padding:10px 0; border:0; outline:0; background:transparent; color:var(--dopa-navy); font:700 15px Cairo,sans-serif; }
.dpx-domain-step > small { display:block; margin-top:9px; color:#7893a1; font-size:10px; }
.dpx-theme-stack { height:132px; margin-top:19px; position:relative; perspective:700px; }
.dpx-theme-card { position:absolute; width:68%; height:117px; object-fit:cover; object-position:top; border:1px solid #d3e2ea; border-radius:7px; background:#edf5f8; box-shadow:0 9px 20px rgba(32,73,94,.14); transition:transform .45s ease,opacity .45s ease; }
.dpx-theme-card-one { inset-inline-start:2%; top:11px; transform:rotate(-7deg); }.dpx-theme-card-two { inset-inline-start:17%; top:5px; z-index:2; }.dpx-theme-card-three { inset-inline-end:1%; top:14px; transform:rotate(7deg); }
.dpx-theme-stack.is-shuffling .dpx-theme-card-one { transform:translateX(38px) rotate(7deg); }.dpx-theme-stack.is-shuffling .dpx-theme-card-two { transform:translateY(-8px) scale(1.04); }.dpx-theme-stack.is-shuffling .dpx-theme-card-three { transform:translateX(-35px) rotate(-7deg); }
.dpx-theme-next { display:inline-flex; align-items:center; gap:7px; margin-top:4px; padding:0; border:0; background:transparent; color:var(--dopa-blue); font:800 12px Cairo,sans-serif; cursor:pointer; }.dpx-theme-next:focus-visible { outline:2px solid var(--dopa-blue); outline-offset:4px; }
.dpx-colour-preview { display:flex; align-items:center; gap:10px; margin-top:23px; min-height:65px; padding:10px; border:1px solid #dce9ee; border-radius:8px; background:#fbfdfe; }.dpx-colour-mark { width:39px; height:39px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; background:var(--clinic-colour,#23a8c9); color:#fff; font-weight:800; }.dpx-colour-preview div { min-width:0; flex:1; }.dpx-colour-preview strong,.dpx-colour-preview small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dpx-colour-preview strong { color:var(--dopa-navy); font-size:13px; }.dpx-colour-preview small { color:#7591a0; font-size:9px; }.dpx-colour-preview button { padding:7px 9px; border:0; border-radius:5px; background:var(--clinic-colour,#23a8c9); color:#fff; font:700 9px Cairo,sans-serif; }
.dpx-swatches { display:flex; gap:10px; margin-top:15px; }.dpx-swatches button { width:25px; height:25px; padding:0; border:3px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px #c6dce5; cursor:pointer; }.dpx-swatches button.is-selected { box-shadow:0 0 0 3px var(--swatch); }.dpx-swatches button:focus-visible { outline:2px solid var(--dopa-navy); outline-offset:3px; }
.dpx-launch-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:23px; padding:18px 2px 0; color:#526f80; font-size:13px; font-weight:700; }.dpx-launch-footer > span { display:inline-flex; align-items:center; gap:8px; }.dpx-launch-footer > span > .dpx-icon { color:var(--dopa-blue); }
.dpx-pricing { background:#fff; }.dpx-pricing-head { max-width:720px; margin:0 auto 30px; text-align:center; }.dpx-price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }.dpx-price-card { display:flex; min-height:385px; flex-direction:column; padding:28px; border:1px solid #d8e5eb; border-radius:14px; background:#f9fcfd; color:var(--dopa-navy); }.dpx-price-card-featured { border-color:#2d9dc0; background:#1d3d58; color:#fff; box-shadow:0 20px 36px rgba(22,64,87,.2); transform:translateY(-8px); }.dpx-price-label { color:#2086a7; font-size:11px; font-weight:800; }.dpx-price-card-featured .dpx-price-label { color:#91e1f1; }.dpx-price-card h3 { margin:10px 0 8px; font-size:23px; }.dpx-price-card p { min-height:48px; margin:0; color:#668192; font-size:12px; line-height:1.9; }.dpx-price-card-featured p { color:#d1e2eb; }.dpx-price-card > strong { margin:22px 0 11px; font-size:14px; }.dpx-price-card ul { margin:0 0 24px; padding:0; list-style:none; }.dpx-price-card li { position:relative; padding:7px 20px 7px 0; color:#536f80; font-size:12px; }.dpx-price-card-featured li { color:#e0edf3; }.dpx-price-card li::before { content:"✓"; position:absolute; right:0; color:var(--dopa-blue); font-weight:800; }.dpx-price-card a { display:inline-flex; align-items:center; gap:8px; margin-top:auto; color:var(--dopa-blue); font-size:13px; font-weight:800; }.dpx-price-card-featured .dopa-btn { color:#fff; }
.marketing-orbit-node { width:112px; height:112px; gap:8px; }.marketing-orbit-node span { font-size:10px; }.marketing-orbit-node.node-one { margin-left:-56px; }.marketing-orbit-node.node-two { right:4%; }.marketing-orbit-node.node-three { right:-4%; }.marketing-orbit-node.node-six { left:-4%; }.marketing-orbit-node.node-seven { left:4%; }
.dpx-specialties .dpx-specialty-icon { width:64px; height:64px; flex:0 0 auto; overflow:visible; border-radius:17px; background:#dff6fc !important; }.dpx-specialties .dpx-specialty-icon svg { display:block; width:48px; height:48px; }.dpx-specialties-grid h3 { margin-top:20px; }
@media (max-width:1100px) { .dpx-launch-steps { gap:10px; }.dpx-launch-step { padding:23px 19px; }.dpx-price-card { padding:24px 20px; }.site-footer .footer-grid { grid-template-columns:1.5fr repeat(2,minmax(0,1fr)); }.site-footer .footer-access { padding-inline-start:0; border-inline-start:0; } }
@media (max-width:820px) { .dpx-launch-steps { grid-template-columns:1fr; max-width:610px; margin:auto; }.dpx-launch-step::after { top:-7px; inset-inline-start:50%; width:1px; height:12px; }.dpx-step-copy p { min-height:0; }.dpx-theme-step { min-height:278px; }.dpx-price-grid { grid-template-columns:1fr; max-width:570px; margin:auto; }.dpx-price-card,.dpx-price-card-featured { min-height:0; transform:none; }.dpx-price-card p { min-height:0; }.marketing-orbit-node { width:86px; height:86px; }.marketing-orbit-node span { font-size:8px; }.marketing-orbit-node.node-one { margin-left:-43px; }.marketing-orbit-node.node-two { right:1%; }.marketing-orbit-node.node-three { right:-2%; }.marketing-orbit-node.node-six { left:-2%; }.marketing-orbit-node.node-seven { left:1%; } }
@media (max-width:560px) { .dpx-launch-journey,.dpx-pricing { padding-block:58px; }.dpx-launch-heading { text-align:right; }.dpx-launch-heading h2,.dpx-pricing-head h2 { font-size:30px; }.dpx-launch-heading p,.dpx-pricing-head p { font-size:14px; }.dpx-launch-step { padding:23px 18px; }.dpx-theme-stack { height:120px; }.dpx-theme-card { height:106px; }.dpx-launch-footer { align-items:stretch; flex-direction:column; }.dpx-launch-footer .dopa-btn { width:100%; }.dpx-colour-preview { gap:7px; }.dpx-colour-preview button { padding:7px; }.dpx-specialties-grid > a { padding:18px; }.dpx-specialties .dpx-specialty-icon { width:64px; height:64px; }.marketing-orbit { transform:scale(.88); transform-origin:top center; margin-bottom:-38px; }.marketing-orbit-detail { padding-top:24px; } }
@media (prefers-reduced-motion:reduce) { .dpx-theme-card,.dpx-theme-stack.is-shuffling .dpx-theme-card { transition:none; transform:none; } }

/* Every specialty remains visible; unsupported specialties use the existing general landing page. */
.marketing-section-head.reveal { opacity:1; transform:none; transition:none; }
@media (max-width:820px) {
    .site-header + main { padding-top:64px; }
    .dopa-hero { padding-top:30px; }
}

/* The orbit needs larger glyphs, not larger circles, so labels stay easy to scan. */
.marketing-orbit-node > .dpx-icon { width: 36px; height: 36px; flex: 0 0 36px; color: var(--dopa-cyan); }
.marketing-orbit-node.active > .dpx-icon { color: var(--dopa-navy); }
@media (max-width:820px) {
    .marketing-orbit-node > .dpx-icon { width: 28px; height: 28px; flex-basis: 28px; }
}
@media (max-width:560px) {
    .marketing-orbit-node > .dpx-icon { width: 25px; height: 25px; flex-basis: 25px; }
}

/* One country-aware monthly plan, kept deliberately focused instead of plan cards. */
.dpx-single-plan { overflow:hidden; max-width:1020px; margin:0 auto; border:1px solid #d4e4eb; border-radius:18px; background:#f9fcfd; box-shadow:0 22px 48px rgba(29,61,88,.11); }
.dpx-single-plan-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px; padding:33px 40px 32px; color:#fff; background:#1d3d58; }
.dpx-single-plan-top::after { content:""; position:absolute; inset-inline:40px; bottom:0; height:4px; background:#48c6e3; }
.dpx-single-plan-intro { min-width:0; }
.dpx-single-plan .dpx-price-label { display:block; color:#67d8ef; font-size:12px; font-weight:800; }
.dpx-single-plan h3 { margin:8px 0 7px; font-size:29px; line-height:1.35; }
.dpx-single-plan p { margin:0; color:#d2e2ea; font-size:14px; line-height:1.9; }
.dpx-price-box { flex:0 0 auto; min-width:215px; padding:15px 20px; border:1px solid rgba(137,223,242,.42); border-radius:11px; background:rgba(10,37,56,.28); text-align:center; }
.dpx-price-box > span,.dpx-price-box em { display:block; font-size:11px; font-style:normal; }
.dpx-price-box > span { color:#a9e8f5; }
.dpx-price-box strong { display:block; direction:ltr; margin:2px 0; color:#fff; font-size:34px; line-height:1.25; letter-spacing:-.03em; }
.dpx-price-box strong small { color:#90e2f2; font-size:15px; font-weight:700; letter-spacing:0; }
.dpx-price-box em { color:#c8dde7; }
.dpx-single-plan-body { padding:8px 40px 30px; }
.dpx-feature-table { width:100%; border-collapse:collapse; color:var(--dopa-navy); }
.dpx-feature-table caption { padding:21px 0 11px; color:#617c8c; text-align:right; font-size:12px; font-weight:800; }
.dpx-feature-table tr { border-bottom:1px solid #dbe8ed; }
.dpx-feature-table th,.dpx-feature-table td { padding:17px 0; text-align:right; vertical-align:middle; }
.dpx-feature-table th { width:31%; color:#1d4864; font-size:15px; }
.dpx-feature-table th::before { content:"✓"; display:inline-grid; width:20px; height:20px; margin-inline-end:10px; place-items:center; border-radius:50%; background:#d8f4fa; color:#1489ac; font-size:12px; }
.dpx-feature-table td { color:#698292; font-size:13px; }
.dpx-single-plan-actions { display:flex; align-items:center; justify-content:space-between; gap:22px; padding-top:25px; }
.dpx-single-plan-actions .dopa-btn { min-width:174px; justify-content:center; }
.dpx-plan-contact { display:inline-flex; align-items:center; gap:8px; color:#1688aa; font-size:13px; font-weight:800; }
.dpx-plan-contact:hover { color:#1d3d58; }
.dpx-plan-contact:focus-visible { outline:2px solid var(--dopa-blue); outline-offset:4px; border-radius:3px; }
@media (max-width:1100px) { .dpx-single-plan-top,.dpx-single-plan-body { padding-inline:28px; } }
@media (max-width:820px) { .dpx-single-plan { max-width:570px; }.dpx-single-plan-top { align-items:flex-start; flex-direction:column; gap:20px; }.dpx-price-box { width:100%; max-width:280px; } }
@media (max-width:560px) { .dpx-single-plan { border-radius:14px; }.dpx-single-plan-top { padding:27px 20px 25px; }.dpx-single-plan-top::after { inset-inline:20px; }.dpx-single-plan h3 { font-size:25px; }.dpx-single-plan p { font-size:13px; }.dpx-price-box { max-width:none; }.dpx-single-plan-body { padding:7px 20px 24px; }.dpx-feature-table,.dpx-feature-table tbody,.dpx-feature-table tr,.dpx-feature-table th,.dpx-feature-table td { display:block; width:100%; }.dpx-feature-table caption { padding-top:19px; }.dpx-feature-table tr { padding:14px 0; }.dpx-feature-table th,.dpx-feature-table td { padding:0; }.dpx-feature-table th { margin-bottom:6px; font-size:14px; }.dpx-feature-table td { padding-inline-start:30px; font-size:12px; line-height:1.8; }.dpx-single-plan-actions { align-items:stretch; flex-direction:column; gap:17px; }.dpx-single-plan-actions .dopa-btn { width:100%; }.dpx-plan-contact { justify-content:center; } }