/* Home page. */

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow-x: clip;
    padding-block: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 64px);
    background:
        radial-gradient(900px 480px at 85% -10%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%),
        radial-gradient(700px 420px at 0% 10%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 70%);
}
/* the one big gesture: the logo's >< mark, drawn very large behind the product */
.hero__mark {
    position: absolute; inset-block-start: -8%; inset-inline-end: -10%;
    width: min(980px, 95vw); height: auto; opacity: .2; pointer-events: none;
}
html[data-theme="dark"] .hero__mark { opacity: .22; }
[dir="rtl"] .hero__mark { transform: scaleX(-1); }

.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy h1 { margin-block: 20px 22px; max-width: 17ch; }
body.rtl .hero__copy h1 { max-width: 16ch; }
.hero__copy .lead { margin-block-end: 32px; }

.hero__badge {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px;
    font-size: .88rem; font-weight: 550; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
    transition: border-color .18s var(--ease);
}
body.rtl .hero__badge { padding: 6px 12px 6px 14px; }
.hero__badge:hover { border-color: var(--primary); }
.hero__badge svg { width: 16px; height: 16px; color: var(--primary); }
.hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }


.hero__stack { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block-start: 36px; font-size: .88rem; color: var(--muted); }
.hero__stack ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero__stack li { padding: 3px 10px; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }

.hero__visual { position: relative; }
@media (min-width: 1100px) { .hero__visual { margin-inline-end: -5vw; } }
.device--hero { transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg); transform-origin: 20% 50%; }
[dir="rtl"] .device--hero { transform: perspective(1600px) rotateY(5deg) rotateX(1.5deg); transform-origin: 80% 50%; }

/* one orchestrated entrance, nothing else on the page moves on its own */
@media (prefers-reduced-motion: no-preference) {
    .hero__copy > * { animation: rise .7s var(--ease) backwards; }
    .hero__copy > :nth-child(2) { animation-delay: .06s; }
    .hero__copy > :nth-child(3) { animation-delay: .12s; }
    .hero__copy > :nth-child(4) { animation-delay: .18s; }
    .hero__copy > :nth-child(5) { animation-delay: .24s; }
    .hero__visual { animation: slide-in .9s var(--ease) .1s backwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(32px); } }
[dir="rtl"] .hero__visual { animation-name: slide-in-rtl; }
@keyframes slide-in-rtl { from { opacity: 0; transform: translateX(-32px); } }

@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__copy h1, body.rtl .hero__copy h1 { max-width: 18ch; }
    .device--hero, [dir="rtl"] .device--hero { transform: none; }
    .hero__mark { inset-block-start: -2%; opacity: .12; }
}

/* ---------- DrClinicPro panel ---------- */
.product-panel {
    --ink: var(--on-panel); --muted: var(--muted-on-panel); --line: rgba(255, 255, 255, .14);
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: center;
    padding: clamp(28px, 5vw, 64px); color: var(--on-panel);
    background:
        radial-gradient(640px 360px at 100% 0%, color-mix(in srgb, var(--violet) 32%, transparent), transparent 70%),
        radial-gradient(520px 320px at 0% 100%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 70%),
        var(--panel);
    border-radius: var(--radius-xl);
}
html[data-theme="dark"] .product-panel { border: 1px solid var(--line-strong); }
.product-panel h2 { color: #fff; max-width: 18ch; }
.product-panel p { color: var(--muted-on-panel); font-size: 1.08rem; }
.product-panel .tick-list li { color: var(--on-panel); }
.product-panel .tick-list svg { background: rgba(79, 209, 161, .16); color: #5be3b0; }
.product-panel__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product-panel__visual { min-width: 0; }
@media (min-width: 901px) { .product-panel__visual { margin-inline-end: calc(-1 * clamp(28px, 5vw, 64px) - 24px); } }
.product-panel .device { border-color: rgba(255, 255, 255, .18); }
.product-panel .dl-inline .button--ghost { background: transparent; }
@media (max-width: 900px) { .product-panel { grid-template-columns: 1fr; } }


/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service {
    display: flex; flex-direction: column; gap: 10px; padding: 26px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    transition: border-color .18s var(--ease);
}
.service:hover { border-color: var(--primary); }
.service__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-block-end: 10px; color: var(--primary); background: var(--primary-soft); border-radius: 12px; }
.service__icon svg { width: 22px; height: 22px; }
.service h3 { margin: 0; }
.service p { margin: 0; color: var(--muted); }
.service__tag { margin-block-start: auto; padding-block-start: 14px; font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
[dir="rtl"] .service__tag { direction: ltr; text-align: start; }

.service--domains {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center;
    padding: clamp(24px, 4vw, 40px);
    background: linear-gradient(120deg, var(--primary-soft), var(--surface) 70%);
}
.service--domains h3 { font-size: 1.5rem; }
.service--domains .service__body { display: grid; gap: 10px; justify-items: start; }
.service--domains .service__icon { margin-block-end: 0; }
.service__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 12px 4px 0; font-size: .9rem; color: var(--muted); }
.service__links a { color: var(--primary); font-weight: 600; }
.service__links a:hover { text-decoration: underline; }
.service__links span { font-family: var(--font-mono); }

@media (max-width: 1080px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .services { grid-template-columns: 1fr; } .service--domains { grid-template-columns: 1fr; } }

/* ---------- Approach ---------- */
.approach { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.approach__head { position: sticky; inset-block-start: calc(var(--header-h) + 32px); }
.approach__head p { font-size: 1.1rem; color: var(--muted); }
.approach__list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line-strong); }
.approach__list li { display: flex; gap: 20px; padding-block: 28px; border-block-end: 1px solid var(--line-strong); }
.approach__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; color: var(--primary); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.approach__icon svg { width: 22px; height: 22px; }
.approach__list h3 { margin-block-end: 4px; font-size: 1.35rem; }
.approach__list p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .approach { grid-template-columns: 1fr; } .approach__head { position: static; } }