/* DocEngine landing — enhancement layer on top of styles.css.
   Same palette and fonts; adds gradient-bordered cards, hover states, SVG icons and decorative shapes. */
:root {
  --ink: #082557; --night: #071b3a; --aqua: #1fd2c3; --teal: #0d9f99; --sky: #72d8ff; --lavender: #a893ff; --sun: #f8c879; --coral: #ff9c83;
  --edge: linear-gradient(140deg, rgba(31, 210, 195, .55), rgba(114, 216, 255, .32) 38%, rgba(168, 147, 255, .3) 70%, rgba(248, 200, 121, .5));
  --edge-strong: linear-gradient(140deg, #1fd2c3, #72d8ff 40%, #a893ff 72%, #f8c879);
  --lift: 0 22px 44px -18px rgba(8, 37, 87, .28);
  --glow: 0 0 0 4px rgba(31, 210, 195, .12);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- icons (SVG sprite) ---------- */
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.card-icon .ico { width: 34px; height: 34px; }
.card-icon.large-icon .ico { width: 42px; height: 42px; }
.feature-symbol .ico { width: 24px; height: 24px; }
.metric-icon { color: var(--teal); }
.metric-icon .ico { width: 18px; height: 18px; }
.kpi-symbol .ico { width: 16px; height: 16px; }
.signal-icon .ico, .floating-icon .ico { width: 15px; height: 15px; }
.bell .ico { width: 13px; height: 13px; }
.sparkle .ico { width: 26px; height: 26px; }
.app-notification .ico { width: 16px; height: 16px; }
.testimonial-early-badge > span .ico { width: 16px; height: 16px; }
.mini-check .ico { width: 11px; height: 11px; stroke-width: 3; }
.form-success > span .ico { width: 12px; height: 12px; stroke-width: 3; }
.popular-badge .ico, .verified-badge .ico { width: 11px; height: 11px; margin-left: 5px; stroke-width: 2.4; }
.strip-ico { width: 17px !important; height: 17px !important; color: var(--teal); }
.foot-ico { width: 13px !important; height: 13px !important; margin-left: 7px; color: var(--aqua); }
.demo-contact-row a .ico { width: 14px; height: 14px; color: var(--aqua); }
.app-nav span, .app-settings { display: flex; align-items: center; gap: 9px; color: #88a5b2; padding: 10px 9px; font-size: 10px; border-radius: 6px; transition: background .2s, color .2s; }
.app-nav span .ico, .app-settings .ico { width: 14px; height: 14px; color: #73b3ba; }
.app-nav span.active, .app-nav span:hover, .app-settings:hover { background: rgba(31, 210, 195, .12); color: #fff; }
.app-nav span.active .ico { color: var(--aqua); }
.link-like { font-size: 8px; color: #1bbdb4; cursor: default; }

/* Feature symbols keep the four accent tones of the original, cycling through the list. */
.feature-row:nth-child(4n+2) .feature-symbol { color: #71d7ff; border-color: rgba(113, 215, 255, .35); }
.feature-row:nth-child(4n+3) .feature-symbol { color: #c8ef93; border-color: rgba(200, 239, 147, .35); }
.feature-row:nth-child(4n+4) .feature-symbol { color: #f7c88c; border-color: rgba(247, 200, 140, .35); }
.why-card:nth-child(3n+2) .card-icon { background: #eaf2ff; color: #4777cf; }
.why-card:nth-child(3n+3) .card-icon { background: #fff3df; color: #d79842; }
.testimonial-signals > div:nth-child(3n+2) .signal-icon { background: #e3edff; color: #4777cf; }
.testimonial-signals > div:nth-child(3n+3) .signal-icon { background: #ffeedd; color: #d07a52; }

/* ---------- gradient-bordered cards ---------- */
.why-card, .price-card, .app-panel, .app-kpi, .step-visual, .demo-form, .preview-benefits > span, .testimonial-signals > div,
.appointments-panel, .chart-panel, .clinic-tab.active, .tiny-window, .report-window {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
}
.step-visual-one { background: linear-gradient(#eaf4f1, #eaf4f1) padding-box, var(--edge) border-box; }
.step-visual-two { background: linear-gradient(#071b3a, #071b3a) padding-box, var(--edge) border-box; }
.step-visual-three { background: linear-gradient(#e8f3fb, #e8f3fb) padding-box, var(--edge) border-box; }
.preview-benefits > span { background: linear-gradient(#edf7f4, #edf7f4) padding-box, var(--edge) border-box; }
.feature-highlight, .featured-price { border: 1px solid transparent; background: linear-gradient(#0b2c59, #082557) padding-box, var(--edge-strong) border-box; }
.testimonial-signals > div { border-radius: 12px; padding: 14px 16px; background: linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)) padding-box, var(--edge) border-box; }

.why-card, .price-card, .app-panel, .app-kpi, .step, .testimonial-signals > div, .preview-benefits > span, .demo-form {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.why-card:hover, .price-card:hover, .app-kpi:hover, .demo-form:focus-within {
  background: linear-gradient(#fff, #fff) padding-box, var(--edge-strong) border-box;
  box-shadow: var(--lift), var(--glow);
}
.feature-highlight:hover, .featured-price:hover { background: linear-gradient(#0e3466, #0a2b60) padding-box, var(--edge-strong) border-box; box-shadow: 0 26px 50px -18px rgba(8, 37, 87, .55), var(--glow); }
.testimonial-signals > div:hover, .preview-benefits > span:hover { transform: translateY(-3px); box-shadow: var(--lift); background: linear-gradient(#fff, #fff) padding-box, var(--edge-strong) border-box; }
.step:hover .step-visual { transform: translateY(-5px); box-shadow: var(--lift); }
.step-visual { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.step:hover h3 { color: var(--teal); }
.step h3 { transition: color .25s; }

/* corner accent on light cards */
.price-card::after, .app-kpi::after {
  content: ''; position: absolute; width: 54px; height: 54px; left: 10px; bottom: 10px; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(13, 159, 153, .35) 1.2px, transparent 1.6px); background-size: 9px 9px;
  -webkit-mask: linear-gradient(45deg, #000, transparent 70%); mask: linear-gradient(45deg, #000, transparent 70%);
  transition: opacity .3s;
}
.app-kpi { position: relative; overflow: hidden; }
.featured-price::after { background-image: radial-gradient(rgba(31, 210, 195, .45) 1.2px, transparent 1.6px); }
.price-card:hover::after, .app-kpi:hover::after { opacity: 1; }

/* ---------- dark rows & FAQ ---------- */
.feature-row { position: relative; border-radius: 14px; }
.feature-row::before {
  content: ''; position: absolute; right: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--aqua), var(--sky)); transform: scaleY(0); transition: transform .35s var(--ease);
}
.feature-row:hover::before { transform: scaleY(1); }
.feature-row:hover { box-shadow: inset 0 0 0 1px rgba(31, 210, 195, .18); }
.faq-list details { border-radius: 12px; margin-bottom: 6px; border: 1px solid transparent; transition: background .25s, border-color .25s; }
.faq-list details:hover { border-color: rgba(31, 210, 195, .25); background: rgba(255, 255, 255, .03); }
.faq-list details[open] { border-color: rgba(31, 210, 195, .35); }
.faq-list summary span { flex: none; }

/* ---------- buttons ---------- */
.button { position: relative; overflow: hidden; }
.button::after {
  content: ''; position: absolute; inset: 0; transform: translateX(110%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%); transition: transform .6s var(--ease);
}
.button:hover::after { transform: translateX(-110%); }
.button:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.button-outline { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box; }
.button-outline:hover { background: linear-gradient(#effaf7, #effaf7) padding-box, var(--edge-strong) border-box; }

/* ---------- top strip & chips ---------- */
.mini-brands span { padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; background: linear-gradient(#f7fbfa, #f7fbfa) padding-box, var(--edge) border-box; opacity: 1; transition: transform .25s, box-shadow .25s; }
.mini-brands span:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(8, 37, 87, .35); }
.desktop-nav a { position: relative; padding: 6px 0; }
.desktop-nav a::after { content: ''; position: absolute; right: 0; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--aqua); transform: scaleX(0); transition: transform .3s var(--ease); }
.desktop-nav a:hover::after { transform: scaleX(1); }
.popular-badge { display: inline-flex; align-items: center; box-shadow: 0 8px 18px -8px rgba(31, 210, 195, .8); }
.verified-badge { display: inline-flex; align-items: center; }
.mini-check { margin-left: 2px; }
.demo-mini-proof { flex-wrap: wrap; }

/* ---------- decorative shapes ---------- */
.shape { position: absolute; pointer-events: none; z-index: 0; }
.shape-plus { width: 26px; height: 26px; top: 120px; right: 46%; opacity: .55;
  background: linear-gradient(var(--aqua), var(--aqua)) center / 100% 3px no-repeat, linear-gradient(var(--aqua), var(--aqua)) center / 3px 100% no-repeat;
  animation: shape-float 7s ease-in-out infinite; }
.shape-ring { width: 120px; height: 120px; bottom: 90px; right: 4%; border-radius: 50%; border: 2px dashed rgba(114, 216, 255, .28); animation: shape-spin 26s linear infinite; }
.shape-dots { width: 130px; height: 90px; top: 70px; left: 3%; opacity: .55;
  background-image: radial-gradient(rgba(31, 210, 195, .55) 1.5px, transparent 2px); background-size: 14px 14px; }
.shape-ring.alt { top: 80px; bottom: auto; right: auto; left: 6%; width: 90px; height: 90px; border-color: rgba(168, 147, 255, .3); }
.shape-dots.alt { top: auto; bottom: 60px; left: auto; right: 4%; }
.shape-plus.alt { top: 90px; right: 8%; width: 22px; height: 22px;
  background: linear-gradient(var(--lavender), var(--lavender)) center / 100% 3px no-repeat, linear-gradient(var(--lavender), var(--lavender)) center / 3px 100% no-repeat; }
.features-section > .container, .faq-section > .container, .pricing-section > .container { position: relative; z-index: 1; }
.faq-section, .pricing-section { position: relative; overflow: hidden; }
.why { position: relative; overflow: hidden; }
.why::before { content: ''; position: absolute; width: 260px; height: 260px; left: -120px; top: 40px; border-radius: 46% 54% 38% 62% / 52% 40% 60% 48%; background: rgba(168, 147, 255, .08); }
.how-section::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 5px; border: 2px solid rgba(248, 200, 121, .55); left: 9%; top: 120px; transform: rotate(20deg); animation: shape-float 6s ease-in-out infinite; }
.demo-card { border: 1px solid transparent; background: linear-gradient(#082557, #082557) padding-box, var(--edge-strong) border-box; }

@keyframes shape-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(12deg); } }
@keyframes shape-spin { to { transform: rotate(360deg); } }

/* ---------- testimonials (several quotes) ---------- */
.testimonial-stack { display: grid; gap: 16px; }
.testimonial-featured { border: 1px solid transparent; background: linear-gradient(#082557, #082557) padding-box, var(--edge-strong) border-box; transition: transform .35s var(--ease), box-shadow .35s; }
.testimonial-featured:hover { transform: translateY(-4px); box-shadow: 0 30px 55px -20px rgba(8, 37, 87, .55); }

/* ---------- form ---------- */
.demo-form .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-error { margin: 10px 0 0; padding: 9px 11px; border-radius: 7px; background: #fff0ee; color: #c0392f; font-size: 10px; }
.form-error[hidden] { display: none; }
.demo-form input:hover, .demo-form select:hover { border-color: #b7d8d4; }

/* ---------- footer ---------- */
.footer-links a { display: inline-flex; align-items: center; }
.footer-bottom div a { color: #698096; transition: color .2s; }

@media (prefers-reduced-motion: reduce) {
  .shape, .how-section::before { animation: none; }
  .button::after { display: none; }
}
@media (max-width: 760px) {
  .shape-ring, .shape-dots { display: none; }
  .shape-plus { right: 8%; top: 40px; }
  .mini-brands span { padding: 6px 10px; }
  .testimonial-signals > div { padding: 12px; }
}

/* Hero: floating notes in front of the dashboard card, caption above it instead of over the greeting. */
.floating-note { z-index: 2; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box; }
.visual-caption { top: -18px; right: 50%; transform: translateX(50%); }
@media (max-width: 760px) { .visual-caption { top: -26px; } }

/* After sending, the form shrinks to just the success message, centred in the card. */
.demo-form:has(.form-success.show) { display: grid; place-items: center; align-self: center; }
.demo-form .form-success.show { width: 100%; padding: 18px; }

/* Pricing: monthly/annual switch and plan limits */
.billing-toggle { display: inline-flex; gap: 4px; padding: 5px; margin: -28px 0 26px; border-radius: 999px; border: 1px solid transparent; background: linear-gradient(#eaf1ef, #eaf1ef) padding-box, var(--edge) border-box; }
.billing-toggle button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; background: transparent; color: #5f7376; font: 700 12px 'IBM Plex Sans Arabic', Tahoma, sans-serif; transition: background .25s, color .25s, box-shadow .25s; }
.billing-toggle button small { font-size: 9px; padding: 2px 7px; border-radius: 999px; background: #ddf6ef; color: #0d817b; }
.billing-toggle button.active { background: #fff; color: var(--ink); box-shadow: 0 6px 14px -8px rgba(8, 37, 87, .35); }
.pricing-grid[data-cycle="monthly"] .price-annual-value, .pricing-grid[data-cycle="annual"] .price-monthly { display: none; }
.plan-limit { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10px; font-weight: 700; color: #0d817b; }
.plan-limit .ico { width: 14px; height: 14px; }
.featured-price .plan-limit { color: #63ddd1; }
@media (max-width: 760px) { .billing-toggle { margin: -10px 0 22px; } }

/* Logo: the same image files as the app (header on light, footer on dark). */
.brand-logo { flex: none; }
.brand-logo img { display: block; height: 54px; width: auto; }
.footer-brand .brand-logo img { height: 50px; }
.desktop-nav a, .nav-actions .text-link { white-space: nowrap; }
@media (max-width: 1200px) {
  .brand-logo img { height: 46px; }
  .nav-wrap { gap: 18px; }
  .desktop-nav { gap: 18px; }
}
@media (max-width: 1080px) and (min-width: 761px) {
  .desktop-nav { gap: 13px; font-size: 12px; }
  .nav-actions .button-small { padding: 10px 12px; }
}
@media (max-width: 760px) { .brand-logo img { height: 40px; } .footer-brand .brand-logo img { height: 44px; } }