﻿/* ============================================================
   DIDORA ELEMENTS — Design System v2  (Light / Medical Clean)
   Colors : Aqua #00B8CC · Gold #F0C93A · White #FFFFFF
   Font   : Space Grotesk (Google Fonts)
   Prefix : dde-  (BEM)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── Tokens ── */
:root {
  --dde-aqua      : #00B8CC;
  --dde-aqua-dark : #0099AD;
  --dde-aqua-tint : #E8F9FB;
  --dde-gold      : #F0C93A;
  --dde-gold-dark : #D4A800;
  --dde-gold-tint : #FEF8DC;
  --dde-navy      : #0D1B2A;
  --dde-text      : #1F2D3D;
  --dde-muted     : #5A6A7A;
  --dde-border    : #DDE5EE;
  --dde-bg        : #FFFFFF;
  --dde-bg-alt    : #F4F7FA;
  --dde-shadow    : 0 2px 16px rgba(0,0,0,.07);
  --dde-shadow-md : 0 6px 32px rgba(0,0,0,.10);
  --dde-radius    : 14px;
  --dde-radius-sm : 8px;
  --dde-font      : 'Space Grotesk', system-ui, sans-serif;
  --dde-ease      : cubic-bezier(.4,0,.2,1);
  --dde-max-w     : 1200px;
  --dde-px        : clamp(24px, 6vw, 80px);
}

/* ── Keyframes ── */
@keyframes dde-fade-up    { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:none; } }
@keyframes dde-float      { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes dde-pulse-ring { 0% { transform:scale(1); opacity:.6; } 100% { transform:scale(1.9); opacity:0; } }
@keyframes dde-count-glow { 0%,100% { text-shadow:0 0 0 transparent; } 50% { text-shadow:0 0 24px rgba(0,184,204,.3); } }
@keyframes dde-scroll-line { 0% { top:-50%; } 100% { top:100%; } }

/* ── Scroll reveal ── */
.dde-reveal { opacity:0; transform:translateY(28px); transition:opacity .65s var(--dde-ease),transform .65s var(--dde-ease); }
.dde-reveal.--in-view  { opacity:1; transform:none; }
.dde-reveal.--delay-1  { transition-delay:.10s; }
.dde-reveal.--delay-2  { transition-delay:.20s; }
.dde-reveal.--delay-3  { transition-delay:.30s; }
.dde-reveal.--delay-4  { transition-delay:.40s; }

/* ── Shared typography ── */
.dde-section-label {
  display:inline-flex; align-items:center; gap:8px;
  font:600 12px/1 var(--dde-font); letter-spacing:.12em; text-transform:uppercase;
  color:var(--dde-aqua); margin-bottom:16px;
}
.dde-section-label::before { content:''; display:block; width:24px; height:2px; background:var(--dde-aqua); border-radius:2px; }
.dde-section-title { font:700 clamp(28px,4vw,44px)/1.15 var(--dde-font); color:var(--dde-navy); margin:0 0 20px; letter-spacing:-.02em; }
.dde-section-title .--gradient,.dde-section-title .--accent { color:var(--dde-aqua); }
.dde-section-subtitle { font:400 16px/1.7 var(--dde-font); color:var(--dde-muted); margin:0; }
.dde-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:50px; font:500 12px/1 var(--dde-font); letter-spacing:.05em; background:var(--dde-aqua-tint); color:var(--dde-aqua-dark); border:1px solid rgba(0,184,204,.2); }

/* ── Buttons ── */
.dde-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:50px; font:600 15px/1 var(--dde-font); text-decoration:none; cursor:pointer; border:2px solid transparent; transition:background .2s,color .2s,box-shadow .2s,transform .15s; white-space:nowrap; }
.dde-btn.--primary { background:var(--dde-aqua); color:#fff; }
.dde-btn.--primary:hover { background:var(--dde-aqua-dark); box-shadow:0 6px 24px rgba(0,184,204,.35); transform:translateY(-2px); }
.dde-btn.--ghost { background:transparent; color:var(--dde-aqua); border-color:var(--dde-aqua); }
.dde-btn.--ghost:hover { background:var(--dde-aqua-tint); }
.dde-btn.--ghost-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.dde-btn.--ghost-light:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.dde-btn.--whatsapp { background:#25D366; color:#fff; }
.dde-btn.--whatsapp:hover { background:#1ebe5d; box-shadow:0 6px 24px rgba(37,211,102,.35); transform:translateY(-2px); }
.dde-btn.--whatsapp-pulse { background:#25D366; color:#fff; position:relative; overflow:visible; }
.dde-btn.--whatsapp-pulse::before { content:''; position:absolute; inset:-4px; border-radius:50px; border:2px solid #25D366; animation:dde-pulse-ring 1.8s ease-out infinite; }
.dde-btn.--whatsapp-pulse:hover { background:#1ebe5d; }

/* ══════════════════════════════════════════════════════════
   WIDGET 1 — HERO
   ══════════════════════════════════════════════════════════ */
.dde-hero { font-family:var(--dde-font); background:var(--dde-bg); min-height:90vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:clamp(60px,8vh,120px) var(--dde-px); }
.dde-hero::before { content:''; position:absolute; top:-160px; right:-160px; width:560px; height:560px; border-radius:50%; background:rgba(0,184,204,.07); pointer-events:none; }
.dde-hero::after  { content:''; position:absolute; bottom:-100px; left:-100px; width:360px; height:360px; border-radius:50%; background:rgba(240,201,58,.07); pointer-events:none; }
.dde-hero__grid,.dde-hero__orb,.dde-hero__orb-gold { display:none; }
.dde-hero__inner { position:relative; z-index:2; max-width:var(--dde-max-w); margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.dde-hero__content { display:flex; flex-direction:column; gap:28px; }
/* eyebrow tags */
.dde-hero__eyebrow { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.dde-hero__eyebrow-dot { width:4px; height:4px; border-radius:50%; background:var(--dde-border); flex-shrink:0; }
/* H1 */
.dde-hero__h1 { font:700 clamp(36px,5vw,60px)/1.1 var(--dde-font); color:var(--dde-navy); letter-spacing:-.03em; margin:0; }
.dde-hero__h1 .--line   { display:block; }
.dde-hero__h1 .--accent { display:block; color:var(--dde-aqua); }
/* sub + actions */
.dde-hero__sub { font:400 17px/1.7 var(--dde-font); color:var(--dde-muted); max-width:520px; margin:0; }
.dde-hero__actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
/* stats row */
.dde-hero__stats { display:flex; gap:24px; padding-top:24px; border-top:1px solid var(--dde-border); margin-top:4px; align-items:center; }
.dde-hero__stat { display:flex; flex-direction:column; gap:4px; }
.dde-hero__stat .--num { font:700 26px/1 var(--dde-font); color:var(--dde-aqua); letter-spacing:-.02em; }
.dde-hero__stat .--lbl { font:400 12px/1.4 var(--dde-font); color:var(--dde-muted); }
.dde-hero__stat-div { width:1px; height:32px; background:var(--dde-border); flex-shrink:0; }
/* right visual */
.dde-hero__visual { position:relative; display:flex; justify-content:center; align-items:center; }
.dde-hero__photo-wrap { position:relative; border-radius:24px; overflow:hidden; width:100%; max-width:480px; aspect-ratio:3/4; background:linear-gradient(145deg,#0077b6 0%,#00b8cc 45%,#e8f9fb 100%); box-shadow:0 28px 80px rgba(0,0,0,.15); }
/* CSS medical cross shown when no photo uploaded */
.dde-hero__photo-wrap::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.12) 0%,transparent 60%); z-index:1; pointer-events:none; }
.dde-hero__photo-wrap::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; background:rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 30px rgba(255,255,255,.04),0 0 0 60px rgba(255,255,255,.02); z-index:1; pointer-events:none; }
.dde-hero__photo-glow { display:none; }
.dde-hero__photo { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2; }
/* floating cards */
.dde-hero__card { position:absolute; background:#fff; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.14); padding:14px 18px; display:flex; align-items:center; gap:12px; min-width:160px; animation:dde-float 4s ease-in-out infinite; z-index:10; }
.dde-hero__card.--top { top:8%;  left:-52px;  animation-delay:0s;  }
.dde-hero__card.--bot { bottom:10%; right:-44px; animation-delay:.9s; }
.dde-hero__card-icon { width:38px; height:38px; border-radius:10px; background:var(--dde-aqua-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dde-hero__card-icon svg { width:22px; height:22px; fill:var(--dde-aqua); }
.dde-hero__card-num { font:700 20px/1 var(--dde-font); color:var(--dde-navy); }
.dde-hero__card-lbl { font:400 11px/1.4 var(--dde-font); color:var(--dde-muted); margin-top:3px; }
.dde-hero__card .--stars { color:var(--dde-gold); font-size:14px; letter-spacing:1px; }
/* scroll indicator */
.dde-hero__scroll { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font:500 11px/1 var(--dde-font); letter-spacing:.1em; text-transform:uppercase; color:var(--dde-muted); text-decoration:none; z-index:5; }
.dde-hero__scroll-bar { width:2px; height:36px; background:var(--dde-border); border-radius:2px; overflow:hidden; position:relative; }
.dde-hero__scroll-bar::after { content:''; position:absolute; top:0; width:100%; height:50%; background:var(--dde-aqua); border-radius:2px; animation:dde-scroll-line 1.6s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════
   WIDGET 2 — STATS BAR
   ══════════════════════════════════════════════════════════ */
.dde-stats { font-family:var(--dde-font); background:var(--dde-aqua); padding:52px var(--dde-px); }
.dde-stats__inner { max-width:var(--dde-max-w); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.dde-stats__item { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; position:relative; }
.dde-stats__item+.dde-stats__item::before { content:''; position:absolute; left:0; top:10%; height:80%; width:1px; background:rgba(255,255,255,.25); }
.dde-stats__num { font:700 clamp(32px,4vw,48px)/1 var(--dde-font); color:#fff; letter-spacing:-.03em; }
.dde-stats__label { font:600 14px/1 var(--dde-font); color:rgba(255,255,255,.9); margin-top:10px; }
.dde-stats__sublabel { font:400 12px/1 var(--dde-font); color:rgba(255,255,255,.65); margin-top:6px; }

/* ══════════════════════════════════════════════════════════
   WIDGET 3 — TREATMENTS GRID
   ══════════════════════════════════════════════════════════ */
.dde-treatments { font-family:var(--dde-font); background:var(--dde-bg); padding:80px var(--dde-px); }
.dde-treatments__head { max-width:var(--dde-max-w); margin:0 auto 52px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.dde-treatments__head-link { font:600 14px/1 var(--dde-font); color:var(--dde-aqua); text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding-bottom:2px; border-bottom:2px solid var(--dde-aqua); transition:opacity .2s; }
.dde-treatments__head-link:hover { opacity:.7; }
.dde-treatments__grid { max-width:var(--dde-max-w); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* ── Treatment card — photo-overlay style ── */
.dde-treatment-card { position:relative; border-radius:var(--dde-radius); overflow:hidden; aspect-ratio:4/5; display:block; text-decoration:none; cursor:pointer; transition:transform .3s ease,box-shadow .3s ease; }
.dde-treatment-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.2); }
/* gradient overlay on top of photo */
.dde-treatment-card::after { content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 30%, rgba(5,20,35,.85) 100%); transition:all .35s ease; pointer-events:none; }
.dde-treatment-card:hover::after { background:linear-gradient(to bottom, rgba(0,184,204,.2) 0%, rgba(5,20,35,.9) 100%); }
/* photo */
.dde-treatment-card__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .55s ease; display:block; }
.dde-treatment-card:hover .dde-treatment-card__img { transform:scale(1.07); }
/* unique gradient per card when no photo loads */
.dde-treatments__grid .dde-treatment-card:nth-child(1) { background:linear-gradient(145deg,#005f73 0%,#0a9396 60%,#94d2bd 100%); }
.dde-treatments__grid .dde-treatment-card:nth-child(2) { background:linear-gradient(145deg,#023e8a 0%,#0077b6 55%,#00b4d8 100%); }
.dde-treatments__grid .dde-treatment-card:nth-child(3) { background:linear-gradient(145deg,#1b4332 0%,#2d6a4f 55%,#52b788 100%); }
.dde-treatments__grid .dde-treatment-card:nth-child(4) { background:linear-gradient(145deg,#370617 0%,#6a040f 55%,#d62828 100%); }
.dde-treatments__grid .dde-treatment-card:nth-child(5) { background:linear-gradient(145deg,#0d1b2a 0%,#1b4965 55%,#00b8cc 100%); }
.dde-treatments__grid .dde-treatment-card:nth-child(6) { background:linear-gradient(145deg,#3d0066 0%,#6b2fa0 55%,#a855f7 100%); }
.dde-treatments__grid .dde-treatment-card:nth-child(7) { background:linear-gradient(145deg,#7c2d12 0%,#c2410c 55%,#fb923c 100%); }
.dde-treatments__grid .dde-treatment-card:nth-child(8) { background:linear-gradient(145deg,#14532d 0%,#166534 55%,#4ade80 100%); }
.dde-treatments__grid .dde-treatment-card:nth-child(9) { background:linear-gradient(145deg,#1e3a5f 0%,#00b8cc 60%,#f0c93a 100%); }
/* card body */
.dde-treatment-card__body { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; padding:16px 18px 22px; }
.dde-treatment-card__cat { align-self:flex-start; font:600 10px/1 var(--dde-font); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); padding:5px 12px; border-radius:50px; margin-bottom:auto; transition:background .2s; }
.dde-treatment-card:hover .dde-treatment-card__cat { background:var(--dde-aqua); border-color:var(--dde-aqua); }
.dde-treatment-card__title { font:600 18px/1.25 var(--dde-font); color:#fff; margin:0; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.dde-treatment-card__desc { font:400 13px/1.55 var(--dde-font); color:rgba(255,255,255,.8); margin:8px 0 0; max-height:0; overflow:hidden; transition:max-height .35s ease,opacity .35s ease; opacity:0; }
.dde-treatment-card:hover .dde-treatment-card__desc { max-height:60px; opacity:1; }
/* arrow */
.dde-treatment-card__arrow { position:absolute; top:14px; right:14px; z-index:4; width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; line-height:1; transition:all .2s; padding:0; margin:0; }
.dde-treatment-card:hover .dde-treatment-card__arrow { background:var(--dde-aqua); border-color:var(--dde-aqua); }

/* ══════════════════════════════════════════════════════════
   WIDGET 4 — TRUST PILLARS
   ══════════════════════════════════════════════════════════ */
.dde-trust { font-family:var(--dde-font); background:var(--dde-navy); padding:90px var(--dde-px); position:relative; overflow:hidden; }
.dde-trust::before { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; border-radius:50%; background:rgba(0,184,204,.06); pointer-events:none; }
.dde-trust::after  { content:''; position:absolute; bottom:-120px; left:-120px; width:400px; height:400px; border-radius:50%; background:rgba(240,201,58,.04); pointer-events:none; }
.dde-trust__inner { position:relative; z-index:2; max-width:var(--dde-max-w); margin:0 auto; }
.dde-trust__head { text-align:center; max-width:680px; margin:0 auto 60px; }
.dde-trust__head .dde-section-label { justify-content:center; color:var(--dde-aqua); }
.dde-trust__head .dde-section-label::before { background:var(--dde-aqua); }
.dde-trust__head .dde-section-title { color:#fff; }
.dde-trust__head .dde-section-title .--gradient { color:var(--dde-aqua); }
.dde-trust__head .dde-section-subtitle { color:rgba(255,255,255,.55); }
.dde-trust__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border-radius:var(--dde-radius); overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.dde-pillar { background:rgba(255,255,255,.04); padding:40px 32px; display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden; transition:background .3s; border-right:1px solid rgba(255,255,255,.06); }
.dde-pillar:last-child { border-right:none; }
.dde-pillar:hover { background:rgba(0,184,204,.1); }
.dde-pillar__num { position:absolute; bottom:-10px; right:16px; font:700 80px/1 var(--dde-font); color:rgba(255,255,255,.03); letter-spacing:-.04em; pointer-events:none; }
.dde-pillar__icon { width:56px; height:56px; border-radius:16px; background:rgba(0,184,204,.15); border:1px solid rgba(0,184,204,.3); display:flex; align-items:center; justify-content:center; transition:background .3s; }
.dde-pillar:hover .dde-pillar__icon { background:var(--dde-aqua); }
.dde-pillar__icon svg { width:28px; height:28px; fill:var(--dde-aqua); transition:fill .3s; }
.dde-pillar:hover .dde-pillar__icon svg { fill:#fff; }
.dde-pillar__title { font:600 16px/1.3 var(--dde-font); color:#fff; margin:0; }
.dde-pillar__text { font:400 14px/1.65 var(--dde-font); color:rgba(255,255,255,.5); margin:0; }

/* ══════════════════════════════════════════════════════════
   WIDGET 5 — PATIENT JOURNEY
   ══════════════════════════════════════════════════════════ */
.dde-journey { font-family:var(--dde-font); background:var(--dde-bg); padding:100px var(--dde-px) 80px; }
.dde-journey__head { text-align:center; max-width:620px; margin:0 auto 64px; }
.dde-journey__head .dde-section-label { justify-content:center; }
.dde-journey__track { max-width:var(--dde-max-w); margin:0 auto; position:relative; }
.dde-journey__line { position:absolute; top:26px; left:calc(100% / 14); right:calc(100% / 14); height:2px; background:var(--dde-border); z-index:0; }
.dde-journey__line-fill { position:absolute; inset:0; width:0; background:var(--dde-aqua); border-radius:2px; transition:width 1.2s var(--dde-ease); }
.dde-journey__line-fill.--active { width:100%; }
.dde-journey__steps { position:relative; z-index:1; display:grid; gap:0; }
.dde-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:0 8px; }
.dde-step__circle { width:52px; height:52px; border-radius:50%; border:2px solid var(--dde-border); background:var(--dde-bg); display:flex; align-items:center; justify-content:center; font:600 14px/1 var(--dde-font); color:var(--dde-muted); transition:all .4s var(--dde-ease); position:relative; }
.dde-step__circle.--done,.dde-step__circle.dde-step__circle--done { background:var(--dde-aqua); border-color:var(--dde-aqua); color:#fff; box-shadow:0 0 0 6px rgba(0,184,204,.15); }
.dde-step__icon { display:none; font-size:22px; line-height:1; }
.dde-step__circle.--done .dde-step__circle-num { display:none; }
.dde-step__circle.--done .dde-step__icon { display:block; }
.dde-step__title { font:600 14px/1.3 var(--dde-font); color:var(--dde-navy); margin:0; }
.dde-step__text { font:400 12px/1.55 var(--dde-font); color:var(--dde-muted); margin:0; }

/* ══════════════════════════════════════════════════════════
   WIDGET 6 — TESTIMONIALS SLIDER
   ══════════════════════════════════════════════════════════ */
.dde-testimonials { font-family:var(--dde-font); background:var(--dde-bg-alt); padding:80px var(--dde-px); }
.dde-testimonials__head { max-width:var(--dde-max-w); margin:0 auto 48px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.dde-testimonials__nav { display:flex; gap:10px; flex-shrink:0; }
.dde-testimonials__nav button { width:44px; height:44px; border-radius:50%; border:2px solid var(--dde-border); background:var(--dde-bg); color:var(--dde-navy); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.dde-testimonials__nav button:hover { border-color:var(--dde-aqua); color:var(--dde-aqua); background:var(--dde-aqua-tint); }
.dde-testimonials__slider { max-width:var(--dde-max-w); margin:0 auto; overflow:hidden; }
.dde-testimonials__track { display:flex; gap:24px; transition:transform .5s var(--dde-ease); }
.dde-testimonial { flex:0 0 calc(33.333% - 16px); min-width:0; }
.dde-testimonial__card { background:var(--dde-bg); border-radius:var(--dde-radius); padding:36px 32px; box-shadow:var(--dde-shadow); height:100%; display:flex; flex-direction:column; gap:18px; border:1px solid transparent; transition:border-color .3s,box-shadow .3s; }
.dde-testimonial__card:hover { border-color:var(--dde-aqua); box-shadow:var(--dde-shadow-md); }
.dde-testimonial__quote { font:700 48px/1 var(--dde-font); color:var(--dde-aqua-tint); line-height:.8; margin-bottom:-8px; }
.dde-testimonial__stars { color:var(--dde-gold); font-size:16px; letter-spacing:2px; }
.dde-testimonial__text { font:400 15px/1.7 var(--dde-font); color:var(--dde-text); flex:1; margin:0; }
.dde-testimonial__footer { display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--dde-border); }
.dde-testimonial__avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.dde-testimonial__avatar-placeholder { width:44px; height:44px; border-radius:50%; background:var(--dde-aqua); color:#fff; display:flex; align-items:center; justify-content:center; font:700 18px/1 var(--dde-font); flex-shrink:0; }
.dde-testimonial__name { font:600 14px/1 var(--dde-font); color:var(--dde-navy); }
.dde-testimonial__meta { font:400 12px/1 var(--dde-font); color:var(--dde-muted); margin-top:4px; }
.dde-testimonial__treatment { margin-left:auto; font:600 11px/1 var(--dde-font); letter-spacing:.08em; text-transform:uppercase; color:var(--dde-aqua); white-space:nowrap; }
.dde-testimonials__dots { max-width:var(--dde-max-w); margin:28px auto 0; display:flex; justify-content:center; gap:8px; }
.dde-testimonials__dot { width:8px; height:8px; border-radius:50%; background:var(--dde-border); border:none; cursor:pointer; transition:all .2s; padding:0; }
.dde-testimonials__dot.--active { background:var(--dde-aqua); width:24px; border-radius:4px; }

/* ══════════════════════════════════════════════════════════
   WIDGET 7 — COMPARISON TABLE
   ══════════════════════════════════════════════════════════ */
.dde-compare { font-family:var(--dde-font); background:var(--dde-bg); padding:80px var(--dde-px); }
.dde-compare__head-section { text-align:center; max-width:640px; margin:0 auto 52px; }
.dde-compare__head-section .dde-section-label { justify-content:center; }
.dde-compare__table { max-width:860px; margin:0 auto; border-radius:var(--dde-radius); overflow:hidden; box-shadow:var(--dde-shadow-md); border:1px solid var(--dde-border); }
.dde-compare__header,.dde-compare__row { display:grid; grid-template-columns:2fr 1.5fr 1.5fr 1.5fr; }
.dde-compare__header { background:var(--dde-navy); }
.dde-compare__header-cell { padding:16px 20px; font:600 11px/1.3 var(--dde-font); color:rgba(255,255,255,.6); letter-spacing:.04em; text-transform:uppercase; }
.dde-compare__header-cell.--didora { background:var(--dde-aqua); color:#fff; font-size:13px; letter-spacing:0; text-transform:none; }
.dde-compare__row { background:var(--dde-bg); border-top:1px solid var(--dde-border); transition:background .15s; }
.dde-compare__row:hover { background:#fafbfc; }
.dde-compare__row.--highlight { background:var(--dde-aqua-tint); }
.dde-compare__row.--highlight:hover { background:#daf5f8; }
.dde-compare__cell { padding:14px 20px; font:400 14px/1.4 var(--dde-font); color:var(--dde-muted); display:flex; align-items:center; }
.dde-compare__cell.--feature { font-weight:500; color:var(--dde-text); }
.dde-compare__cell.--didora { font-weight:600; color:var(--dde-navy); background:rgba(0,184,204,.04); }
.dde-check      { color:#22C55E; font-size:16px; font-weight:700; }
.dde-cross      { color:#EF4444; font-size:16px; font-weight:700; }
.dde-check-gold { color:var(--dde-aqua); font-weight:700; }

/* ══════════════════════════════════════════════════════════
   WIDGET 8 — FAQ ACCORDION
   ══════════════════════════════════════════════════════════ */
.dde-faq { font-family:var(--dde-font); background:var(--dde-bg-alt); padding:80px var(--dde-px); }
.dde-faq__head { max-width:620px; margin-bottom:52px; }
.dde-faq__list { max-width:760px; margin:0 auto; }
.dde-faq__item { background:var(--dde-bg); border-radius:var(--dde-radius-sm); border:1px solid var(--dde-border); overflow:hidden; transition:box-shadow .2s; margin-bottom:12px; }
.dde-faq__item.--open { box-shadow:0 4px 20px rgba(0,184,204,.12); border-color:var(--dde-aqua); }
.dde-faq__question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; background:none; border:none; cursor:pointer; text-align:left; }
.dde-faq__q-text { font:600 15px/1.4 var(--dde-font); color:var(--dde-navy); }
.dde-faq__icon { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--dde-border); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .3s; position:relative; }
.dde-faq__icon::before,.dde-faq__icon::after { content:''; position:absolute; background:var(--dde-navy); border-radius:2px; transition:transform .3s; }
.dde-faq__icon::before { width:10px; height:1.5px; }
.dde-faq__icon::after  { width:1.5px; height:10px; }
.dde-faq__item.--open .dde-faq__icon { background:var(--dde-aqua); border-color:var(--dde-aqua); }
.dde-faq__item.--open .dde-faq__icon::before { background:#fff; }
.dde-faq__item.--open .dde-faq__icon::after  { background:#fff; transform:scaleY(0); }
.dde-faq__answer { max-height:0; overflow:hidden; transition:max-height .4s var(--dde-ease); }
.dde-faq__item.--open .dde-faq__answer { max-height:600px; }
.dde-faq__a-text { font:400 14px/1.75 var(--dde-font); color:var(--dde-muted); padding:0 24px 22px; border-top:1px solid var(--dde-border); padding-top:18px; margin:0; }
.dde-faq__separator { display:none; }

/* ══════════════════════════════════════════════════════════
   WIDGET 9 — CTA BAND
   ══════════════════════════════════════════════════════════ */
.dde-cta { font-family:var(--dde-font); background:var(--dde-aqua); padding:80px var(--dde-px); text-align:center; position:relative; overflow:hidden; }
.dde-cta__orb-1 { position:absolute; width:400px; height:400px; border-radius:50%; background:#fff; opacity:.1; top:-160px; left:-100px; pointer-events:none; }
.dde-cta__orb-2 { position:absolute; width:300px; height:300px; border-radius:50%; background:var(--dde-gold); opacity:.12; bottom:-120px; right:-80px; pointer-events:none; }
.dde-cta__inner { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.dde-cta__inner .dde-section-label { color:rgba(255,255,255,.8); justify-content:center; }
.dde-cta__inner .dde-section-label::before { background:rgba(255,255,255,.6); }
.dde-cta__h2 { font:700 clamp(28px,4vw,44px)/1.15 var(--dde-font); color:#fff; letter-spacing:-.02em; margin:0 0 20px; }
.dde-cta__h2 .--gradient { color:var(--dde-gold); }
.dde-cta__sub { font:400 17px/1.6 var(--dde-font); color:rgba(255,255,255,.85); margin:0 0 36px; }
.dde-cta__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.dde-cta__actions .dde-btn.--primary { background:#fff; color:var(--dde-aqua-dark); }
.dde-cta__actions .dde-btn.--primary:hover { background:var(--dde-gold); color:var(--dde-navy); box-shadow:0 6px 24px rgba(0,0,0,.15); }

/* ══════════════════════════════════════════════════════════
   WIDGET 10 — WHATSAPP FLOAT
   ══════════════════════════════════════════════════════════ */
.dde-wa-float { font-family:var(--dde-font); position:fixed; bottom:32px; right:32px; z-index:9999; display:flex; align-items:center; gap:12px; pointer-events:none; }
.dde-wa-float__label { background:var(--dde-bg); color:var(--dde-navy); font:600 13px/1 var(--dde-font); padding:10px 16px; border-radius:50px; box-shadow:var(--dde-shadow-md); white-space:nowrap; opacity:0; transform:translateX(12px); transition:opacity .25s,transform .25s; pointer-events:none; }
.dde-wa-float:hover .dde-wa-float__label { opacity:1; transform:none; }
.dde-wa-float__btn { width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.4); pointer-events:all; text-decoration:none; transition:transform .2s,box-shadow .2s; position:relative; }
.dde-wa-float__btn::before { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid #25D366; animation:dde-pulse-ring 2s ease-out infinite; }
.dde-wa-float__btn:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(37,211,102,.5); }

/* ── Editor ── */
.elementor-editor-active .dde-wa-float { position:relative; bottom:auto; right:auto; display:inline-flex; }

/* ── Responsive ── */
@media (max-width:1024px) {
  .dde-trust__grid          { grid-template-columns:repeat(2,1fr); }
  .dde-pillar               { border-right:none; border-bottom:1px solid rgba(255,255,255,.06); }
  .dde-treatments__grid     { grid-template-columns:repeat(2,1fr); }
  .dde-treatment-card       { aspect-ratio:4/5; }
  .dde-testimonial          { flex:0 0 calc(50% - 12px); }
  .dde-hero__inner          { grid-template-columns:1fr; gap:40px; }
  .dde-hero__visual         { display:none; }
  .dde-hero__stats          { gap:20px; }
  .dde-journey__steps       { grid-template-columns:repeat(4,1fr) !important; row-gap:32px; }
  .dde-journey__line        { display:none; }
}
@media (max-width:768px) {
  :root { --dde-px:20px; }
  .dde-stats__inner         { grid-template-columns:repeat(2,1fr); gap:24px; }
  .dde-stats__item+.dde-stats__item::before { display:none; }
  .dde-trust__grid          { grid-template-columns:1fr; }
  .dde-treatments__grid     { grid-template-columns:repeat(2,1fr); }
  .dde-treatment-card       { aspect-ratio:1/1; }
  .dde-testimonial          { flex:0 0 100%; }
  .dde-testimonials__head   { flex-direction:column; align-items:flex-start; }
  .dde-compare__header,.dde-compare__row { grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .dde-compare__header-cell,.dde-compare__cell { padding:12px 14px; font-size:12px; }
  .dde-journey__steps       { grid-template-columns:repeat(2,1fr) !important; }
  .dde-hero__stats          { flex-direction:column; gap:16px; }
  .dde-cta__actions         { flex-direction:column; align-items:center; }
  .dde-treatments__head     { flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px) {
  .dde-treatments__grid     { grid-template-columns:1fr; }
  .dde-treatment-card       { aspect-ratio:4/3; }
}
