/* ==== الخط الأساسي ==== */
body {
  font-family: 'Cairo', sans-serif;
  color: #222;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  background: #fff;
}

/* ==== Container ==== */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ==== تأثيرات عامة ==== */
.fade-in {opacity:0;transform:translateY(40px);transition:all 0.8s ease-out;}
.fade-in.visible {opacity:1;transform:translateY(0);}
.scale-in {opacity:0;transform:scale(0.7);transition:all 0.6s ease-out;}
.scale-in.visible {opacity:1;transform:scale(1);}
.section-hidden {opacity:0;transform:translateY(60px);transition:all 0.9s ease-out;}
.section-show {opacity:1;transform:translateY(0);}

/* ===== Hero Impact Styles ===== */
#hero-impact {
  --red1: #ff3b3b;
  --red2: #b00000;
  --orange: #ff7e29;
  --ink: #ffffff;
  --muted: #d1d5db;
  background: linear-gradient(135deg, #1a1c2c, #0b0f15, #111827);
  text-align: center;
  padding: 100px 20px 80px;
  position: relative;
  overflow: hidden;
}
#hero-impact::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--orange), var(--red1));
  opacity: .85;
}
#hero-impact .kicker {
  font-size: 20px;
  color: var(--muted);
  margin-bottom: 10px;
  opacity: 0; transform: translateY(12px); transition: .6s ease;
}
#hero-impact .headline {
  font-size: 60px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
  opacity: 0; transform: translateY(14px); transition: .7s ease;
}
#hero-impact .headline mark {
  background: none;
  background-image: linear-gradient(90deg, var(--red1), var(--red2));
  -webkit-background-clip: text; color: transparent;
  position: relative;
}
#hero-impact .headline mark::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -8px;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--red1));
  transform: scaleX(0); transform-origin: right;
  transition: transform .9s ease .4s;
}
#hero-impact .sub {
  color: var(--muted);
  font-size: 18px;
  margin-top: 15px;
  opacity: 0; transform: translateY(12px); transition: .6s ease .15s;
}
#hero-impact .cta-counter {
  margin-top: 35px;
  font-size: 22px;
  font-weight: 800;
  color: #f1f5f9; /* لون النص */
  text-align: center;
}

#hero-impact .cta-counter .counter {
  color: #ff3b3b; /* يبرز الرقم */
  font-size: 26px;
  font-weight: 900;
}

#hero-impact .underline {
  height: 6px; width: 220px;
  background: linear-gradient(90deg, var(--orange), var(--red1));
  margin: 22px auto 0;
  border-radius: 999px;
  transform: scaleX(0); transform-origin: right;
  transition: transform .9s ease .6s;
}

/* Reveal state */
#hero-impact.show .kicker,
#hero-impact.show .headline,
#hero-impact.show .sub,
#hero-impact.show .btn { opacity: 1; transform: translateY(0); }
#hero-impact.show .headline mark::after,
#hero-impact.show .underline { transform: scaleX(1); }


/* ===== قسم الأرقام ===== */
.numbers-section {padding:80px 20px;background:#f9f9f9;text-align:center;}
.section-title {font-size:32px;font-weight:800;margin-bottom:10px;}
.section-subtitle {font-size:16px;color:#555;margin-bottom:50px;}
.numbers-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-bottom:40px;}
.number-card {border-radius:20px;padding:40px 20px;color:#fff;box-shadow:0 8px 16px rgba(0,0,0,0.1);transition:.3s;}
.number-card:nth-child(1){background:linear-gradient(135deg,#ff7e29,#ff3b3b);}
.number-card:nth-child(2){background:linear-gradient(135deg,#ff9933,#ff4d4d);}
.number-card:nth-child(3){background:linear-gradient(135deg,#e64545,#b00000);}
.number-card:nth-child(4){background:linear-gradient(135deg,#c80000,#800000);}
.number-card .icon {background:rgba(255,255,255,0.15);width:60px;height:60px;margin:0 auto 15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;}
.number-card h3 {font-size:28px;font-weight:800;margin-bottom:10px;}
.number-card:hover {transform:translateY(-8px);box-shadow:0 12px 20px rgba(0,0,0,0.2);}

/* الكرت العريض */
.wide-card {background:linear-gradient(135deg,#b00000,#e65c00);color:#fff;padding:50px 30px;border-radius:16px;text-align:center;margin-top:40px;}
.wide-card h3{font-size:28px;font-weight:800;margin-bottom:15px;}
.wide-card p{font-size:18px;line-height:1.8;margin:8px 0;color:#f5f5f5;}
.wide-card .highlight-text{font-size:20px;font-weight:700;color:#ffeb3b;}
.wide-card .icon {
  font-size: 48px;                 /* حجم كبير */
  margin: 0 auto 20px auto;        /* يوسّطها أفقياً */
  color: #fff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); /* خلفية خفيفة */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== Rowad – Compare (Problem page) ===== */
.rowad-compare{
  --bg:#0b0f14;
  --surface:#0c1320;
  --card:#0f172a;
  --ink:#e5e7eb;
  --muted:#9aa4b2;
  --good1:#22c55e; --good2:#16a34a;
  --bad1:#ef4444;  --bad2:#ff6a3d;
  --accent:#60a5fa;
  --ring:#1f2a3b;
  --radius:20px;
  --shadow:0 12px 30px rgba(0,0,0,.45);

  background:var(--bg);
  color:var(--ink);
  padding:56px 0;
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.rowad-compare .rc-wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.rowad-compare .rc-head{text-align:center;margin-bottom:18px}
.rowad-compare .rc-head h2{font-size:clamp(24px,4.6vw,40px);margin:0 0 6px;font-weight:900}
.rowad-compare .rc-head p{color:var(--muted);margin:0 0 14px}

/* Toggle */
.rowad-compare .rc-toggle{display:inline-flex;gap:10px;background:#0a1220;border:1px solid var(--ring);padding:6px;border-radius:999px}
.rowad-compare .rc-tab{background:transparent;border:none;color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:800;cursor:pointer}
.rowad-compare .rc-tab.is-active{background:linear-gradient(135deg,var(--good1),var(--accent));color:#00131b}

/* Stage layout: 3 أعمدة (يسار عقد – جوال – يمين عقد) */
.rowad-compare .rc-stage{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:32px;
  align-items:center;
  margin-top:22px;
}
.rowad-compare .rc-side{display:flex;flex-direction:column;gap:16px}

/* صفّ (عقدة + خط موصل) */
.rowad-compare .rc-row{display:flex;align-items:center;gap:14px}
.rowad-compare .rc-row.rc-row--right{flex-direction:row-reverse}

/* العقد */
.rowad-compare .rc-node{
  background:var(--surface);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:12px 14px;
  font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:var(--shadow);
  white-space:nowrap;
}
.rowad-compare .rc-node i{font-size:14px}
.rowad-compare .rc-node--bad{border-color:rgba(239,68,68,.45);color:#ffd3d3;background:linear-gradient(180deg,#1a0e11,#150d10)}
.rowad-compare .rc-node--good{border-color:rgba(34,197,94,.45);color:#d7ffea;background:linear-gradient(180deg,#0c1f18,#0a1a15)}

/* الموصل */
.rowad-compare .rc-connector{
  flex:1;
  height:0;
  border-top:2px solid rgba(239,68,68,.55);
  position:relative;
}
.rowad-compare .rc-connector::after{
  content:"";
  position:absolute;
  right:-6px; top:-4px;
  width:8px;height:8px;border-radius:50%;
  background:rgba(239,68,68,.85);
  box-shadow:0 0 0 2px rgba(239,68,68,.25);
}
.rowad-compare .rc-row.rc-row--right .rc-connector::after{left:-6px;right:auto}
.rowad-compare .rc-connector--good{border-top-color:rgba(34,197,94,.65)}
.rowad-compare .rc-connector--good::after{background:rgba(34,197,94,.9);box-shadow:0 0 0 2px rgba(34,197,94,.25)}

/* الهاتف */
.rowad-compare .rc-phone{justify-self:center}
.rowad-compare .rc-iphone{width:340px;height:680px;border:12px solid #0c0c0f;border-radius:38px;background:#000;box-shadow:var(--shadow);position:relative}
.rowad-compare .rc-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:140px;height:28px;background:#0c0c0f;border-radius:22px}
.rowad-compare .rc-screen{position:absolute;inset:12px;border-radius:28px;background:linear-gradient(180deg,#0f172a,#0b1220);border:1px solid #172136;overflow:hidden;padding:14px}
.rowad-compare .rc-statusbar{display:flex;justify-content:space-between;align-items:center;color:#c3d0e0;font-weight:700;margin-bottom:8px}
.rowad-compare .rc-statusbar .sig i{margin-left:6px;font-size:12px;color:#c3d0e0}

/* المحادثة داخل الهاتف */
.rowad-compare .rc-chat{
  display:flex;flex-direction:column;gap:10px;height:100%;
  overflow-y:auto;padding:4px 6px 10px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.rowad-compare .rc-chat::-webkit-scrollbar{width:0;height:0}

.rowad-compare .rc-bubble{max-width:78%;padding:10px 12px;border-radius:14px;line-height:1.7;font-size:14px;width:max-content;opacity:0;transform:translateY(8px) scale(.98);animation:rc-in .5s ease forwards;animation-delay:var(--d,0s)}
@keyframes rc-in{to{opacity:1;transform:none}}
.rowad-compare .rc-bubble.user{align-self:flex-end;background:#21304a;color:#dbeafe;border:1px solid #27405f}
.rowad-compare .rc-bubble.bot{align-self:flex-start;background:#0a1a2f;border:1px solid #1b2a45;color:#d8e2f0}
.rowad-compare .rc-bubble.rc-ok{background:linear-gradient(180deg,#0c1e31,#0b1a2b);border:1px solid #1c3555;box-shadow:0 0 0 1px rgba(96,165,250,.12) inset}
.rowad-compare .rc-bubble.rc-warn{background:linear-gradient(180deg,#1b0f12,#170e10);border:1px solid rgba(239,68,68,.35);color:#ffdbdb}

.rowad-compare .rc-quick{display:flex;gap:8px;margin-top:10px}
.rowad-compare .rc-quick button{background:#0c2339;border:1px solid #1e3a5f;color:#cfeaff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;cursor:pointer}
.rowad-compare .rc-quick button:hover{border-color:#2b68a9}

/* إظهار/إخفاء السيناريوهات */
.rowad-compare .nodes--with{display:none}
.rowad-compare [data-mode="with"] .nodes--with{display:block}
.rowad-compare [data-mode="with"] .nodes--without{display:none}
.rowad-compare .rc-phone--with{display:none}
.rowad-compare [data-mode="with"] .rc-phone--with{display:block}
.rowad-compare [data-mode="with"] #rc-panel-without{display:none}

/* Responsiveness */
@media (max-width:1024px){
  .rowad-compare .rc-stage{grid-template-columns:1fr;gap:18px}
  .rowad-compare .rc-side{order:3}
  .rowad-compare .rc-phone{order:2;justify-self:center}
  .rowad-compare .rc-row{justify-content:center}
  .rowad-compare .rc-row.rc-row--right{justify-content:center}
  .rowad-compare .rc-connector{display:none} /* على الشاشات الصغيرة نخفي الخطوط ونبقي العقد */
}


/* ===== One Day Without Platform (Dark) ===== */
#one-day {
  --bg-from:#0b0f15; --bg-to:#0a0d12;
  --ink:#e6eaf1; --muted:#98a2b3;
  --red1:#ff3b3b; --red2:#b00000; --orange:#ff7e29;
  --line:#1d2430; --card:#10151d;
  --radius:18px; --shadow:0 16px 40px rgba(0,0,0,.45);

  background:
    radial-gradient(900px 520px at 18% -10%, rgba(255,59,59,.10), transparent),
    radial-gradient(800px 560px at 82% 120%, rgba(255,126,41,.08), transparent),
    linear-gradient(180deg, var(--bg-from), var(--bg-to));
  color:var(--ink);
  padding: clamp(60px,8vw,110px) 20px;
  position:relative; isolation:isolate; overflow:hidden;
}
#one-day .container{ max-width:1200px; margin-inline:auto; }

#one-day .head{ text-align:center; margin-bottom:28px; }
#one-day .title{ font-size: clamp(28px,4.6vw,42px); font-weight:1000; letter-spacing:-.02em; margin:0; }
#one-day .subtitle{ color:var(--muted); margin:10px 0 0; }

#one-day .layout{ display:grid; grid-template-columns: 360px 1fr; gap:28px; align-items:start; }
@media (max-width: 1020px){ #one-day .layout{ grid-template-columns:1fr; } }

/* Sticky Side */
#one-day .side{ position:sticky; top:20px; }
#one-day .clock{
  position:relative; width:min(340px, 86vw); aspect-ratio:1/1;
  margin-inline:auto; border-radius:50%;
  display:grid; place-items:center;
}
#one-day .dial{ width:100%; height:auto; transform:rotate(-90deg); }
#one-day .track{ fill:none; stroke:#111827; stroke-width:12; }
#one-day .progress{
  fill:none; stroke: url(#one-day-grad, red);
  stroke: conic-gradient(var(--red1), var(--red2)); /* fallback */
  stroke: var(--red1); /* ensure stroke color if gradient unsupported */
  stroke-width:12; stroke-linecap:round;
  stroke-dasharray: 327; /* 2 * PI * r where r=52 => ≈ 326.72 */
  stroke-dashoffset: 327; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 0 14px rgba(255,59,59,.35));
}
#one-day .clock-center{
  position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; padding:10px;
}
#one-day .clock-meta{ color:var(--muted); font-size:14px; }
#one-day .clock-total{ font-size: clamp(22px,4.2vw,28px); font-weight:1000; letter-spacing:-.02em; }
#one-day .clock-total .num{ font-variant-numeric:tabular-nums; }

#one-day .legend{ display:flex; gap:14px; justify-content:center; margin:16px 0 0; color:var(--muted); }
#one-day .legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-inline-end:6px; }
#one-day .legend .dot.danger{ background:linear-gradient(90deg,var(--red1),var(--red2)); }
#one-day .legend .dot.warn{ background:linear-gradient(90deg,#ff7e29,#ff3b3b); }
#one-day .legend .dot.neutral{ background:linear-gradient(90deg,#64748b,#0ea5e9); }

/* Timeline */
#one-day .timeline{
  position:relative; padding:8px 0 8px 0; margin:0; list-style:none;
}
#one-day .timeline .line{
  position:absolute; top:0; bottom:0; inset-inline-start: 26px; width:2px; background: #0f1622; border-radius:2px; overflow:visible;
}
#one-day .timeline .line .fill{
  position:absolute; top:0; inset-inline:0; width:100%; height:0%;
  background: linear-gradient(180deg, var(--orange), var(--red1) 60%, var(--red2));
  box-shadow: 0 0 18px rgba(255,59,59,.35);
  transition: height .9s cubic-bezier(.2,.8,.2,1);
}

#one-day .step{
  display:grid; grid-template-columns: 52px 84px 1fr; gap:14px; align-items:start;
  position:relative; padding:18px 12px; border-radius: var(--radius);
  margin-bottom: 12px; opacity:.35; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease, background .4s ease, box-shadow .4s ease;
}
#one-day .step:hover{ background: rgba(255,59,59,.04); box-shadow: inset 0 0 0 1px rgba(255,59,59,.10); }
#one-day .step.active{ opacity:1; transform: translateY(0); }

#one-day .node{
  position:relative; width:52px; height:52px; display:grid; place-items:center;
}
#one-day .node span{
  width:14px; height:14px; border-radius:50%;
  background: #0f1724; border:2px solid #1e293b; position:relative;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
#one-day .step[data-type="danger"].active .node span{ background:var(--red1); border-color: var(--red2); box-shadow:0 0 18px rgba(255,59,59,.55); transform:scale(1.2); }
#one-day .step[data-type="warn"].active .node span{ background: #ff7e29; border-color:#ff3b3b; box-shadow:0 0 18px rgba(255,126,41,.55); transform:scale(1.2);}
#one-day .step[data-type="neutral"].active .node span{ background:#0ea5e9; border-color:#64748b; box-shadow:0 0 18px rgba(14,165,233,.45); transform:scale(1.2); }

#one-day .time{
  font-weight:900; letter-spacing:.02em; color:#e2e8f0;
  padding-top:4px; font-size:14px;
}

#one-day .card{
  border:1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(135deg, rgba(255,59,59,.06), rgba(255,126,41,.06)) , var(--card);
  padding:14px 16px; box-shadow: var(--shadow);
}
#one-day .card h3{ margin:0 0 6px; font-size:18px; font-weight:900; }
#one-day .card p{ margin:0; color:var(--muted); }
#one-day .loss{ margin-top:10px; font-weight:900; display:flex; align-items:baseline; gap:6px; }
#one-day .loss .plus{ color:#fda4af; }
#one-day .loss .val{ font-variant-numeric:tabular-nums; }

/* Mobile */
@media (max-width:640px){
  #one-day .timeline .line{ inset-inline-start: 18px; }
  #one-day .step{ grid-template-columns: 52px 68px 1fr; }
}


/* ==== Summary & CTA ==== */
.summary-card {background:#d40000;color:#fff;padding:25px;border-radius:12px;margin:30px auto;max-width:600px;font-size:18px;font-weight:600;}
.cta-card {background:#d40000;color:#fff;padding:40px 20px;border-radius:16px;margin:40px auto 0;max-width:700px;box-shadow:0 6px 12px rgba(0,0,0,0.15);}
.cta-card h3 {font-size:22px;margin-bottom:10px;color:#ffeb3b;}

    /* ===== Radical Text-Only UI (Scoped) – v2 ===== */
    #rad-f9fe2707 {
      --bg-from: #0b0f15;
      --bg-to: #0a0d12;
      --ink: #e6eaf1;
      --muted: #9aa3b2;
      --accent: #7dd3fc;      /* sky */
      --accent2: #a78bfa;     /* violet */
      --warn: #f43f5e;        /* rose */
      --ok: #34d399;          /* emerald */
      --border: #1e2633;
      --chip: #0f1520;
      --radius: 18px;
      --shadow: 0 12px 36px rgba(0,0,0,.45);
      position: relative; isolation: isolate;
      padding: clamp(56px, 8vw, 110px) clamp(18px, 5vw, 42px);
      background: radial-gradient(900px 520px at 20% -10%, rgba(96,165,250,.14), transparent),
                  radial-gradient(800px 560px at 84% 120%, rgba(167,139,250,.12), transparent),
                  linear-gradient(180deg, var(--bg-from), var(--bg-to));
      color: var(--ink);
      overflow: hidden; text-align: initial;
    }
    #rad-f9fe2707 .container { max-width: 1200px; margin-inline: auto; }

    /* Headline billboard */
    #rad-f9fe2707 .billboard {
      display: grid; gap: 14px;
      justify-items: center; text-align: center;
    }
    #rad-f9fe2707 .billboard .title {
      font-size: clamp(34px, 6vw, 68px);
      font-weight: 1000; letter-spacing: -.04em; line-height: 1.05;
      background: conic-gradient(from 210deg, var(--accent), var(--accent2), var(--ink) 70%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      filter: drop-shadow(0 6px 18px rgba(96,165,250,.18));
    }
    #rad-f9fe2707 .billboard .subtitle {
      color: var(--muted); font-size: clamp(16px, 2.2vw, 20px); max-width: 70ch;
    }

    /* Metric ticker (horizontal chips) */
    #rad-f9fe2707 .ticker {
      margin-top: clamp(24px, 4vw, 34px);
      display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
      gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
    }
    #rad-f9fe2707 .chip {
      border: 1px solid var(--border);
      background: color-mix(in oklab, var(--chip) 88%, transparent);
      padding: 16px 18px; border-radius: 999px;
      display: flex; align-items: baseline; justify-content: center; gap: 8px;
      min-width: 240px; box-shadow: var(--shadow);
      opacity: 0; transform: translateY(8px) scale(.98);
      transition: opacity .5s ease, transform .5s ease;
    }
    #rad-f9fe2707 .chip.show { opacity: 1; transform: translateY(0) scale(1); }
    #rad-f9fe2707 .metric { font-weight: 900; font-size: 22px; letter-spacing: -.02em; }
    #rad-f9fe2707 .unit { color: var(--muted); font-weight: 700; }
    #rad-f9fe2707 .caption { 
  color: var(--muted); 
  font-size: 14px; 
  /* 🛑 التعديل هنا: السماح للنص بالانتقال لسطر جديد */
  white-space: normal; /* تم تغييرها من 'nowrap' لضمان التفاف النص */
  max-width: 100%;     /* لضمان احترام حدود العنصر الأب */
  text-align: center;  /* لتحسين شكل النص عندما يصبح على سطرين */
}

    /* Split: gauge + bars */
    #rad-f9fe2707 .split {
      margin-top: clamp(30px, 5vw, 46px);
      display: grid; gap: 24px; grid-template-columns: 1.05fr 1fr;
    }
    @media (max-width: 980px) { #rad-f9fe2707 .split { grid-template-columns: 1fr; } }

    /* CSS gauge with animatable sweep (via --val %) */
    #rad-f9fe2707 .gauge { display: grid; place-items: center; }
    #rad-f9fe2707 .g-wrap {
      width: min(360px, 70vw); aspect-ratio: 1 / 1;
      border-radius: 50%; position: relative;
      --val: 0;
      background:
  conic-gradient(from 0deg, #b91c1c calc(var(--val) * 1%), #b00000 calc(var(--val) * 1%), transparent 0),
  conic-gradient(from 0.75turn, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);

      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      transition; background 0.2s linear;
    }
    #rad-f9fe2707 .g-inner {
      position: absolute; inset: 18px;
      border-radius: 50%; background: #0d131b; display: grid; place-items: center;
      border: 1px solid var(--border);
    }
    #rad-f9fe2707 .g-value { font-size: 42px; font-weight: 1000; letter-spacing: -.03em; }
    #rad-f9fe2707 .g-sub { color: var(--muted); margin-top: 6px; font-size: 14px; }
    #rad-f9fe2707 .g-target { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
    #rad-f9fe2707 .tag { position: absolute; bottom: 12%; right: 50%; transform: translate(58%, 30%);
      background: #111827; color: #fff; border-radius: 999px; padding: 6px 10px; font-size: 12px; border: 1px solid var(--border); }

    /* Impact bars with glowing cap */
    #rad-f9fe2707 .bars {
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 18px; background: color-mix(in oklab, var(--chip) 88%, transparent);
      box-shadow: var(--shadow);
    }
    #rad-f9fe2707 .bars h3 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
    #rad-f9fe2707 .row { display: grid; grid-template-columns: 120px 1fr 80px; gap: 12px; align-items: center; margin: 12px 0; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
    #rad-f9fe2707 .row.show { opacity: 1; transform: translateY(0); }
    #rad-f9fe2707 .label { color: var(--muted); font-size: 14px; }
    #rad-f9fe2707 .bar { width: 100%; height: 12px; background: #0f1724; border-radius: 999px; overflow: hidden; position: relative; }
    #rad-f9fe2707 .bar > span {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #ff3b3b, #b00000);
  transition: width 1.1s cubic-bezier(.2,.8,.2,1);
}
    #rad-f9fe2707 .bar > span::after { content: ""; position: absolute; right: 0; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: .6; transform: translate(50%, -50%) scale(0); filter: blur(.5px); transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
    #rad-f9fe2707 .bars.active .bar > span::after { transform: translate(50%, -50%) scale(1); opacity: .9; box-shadow: 0 0 16px rgba(125,211,252,.6); }

    /* Problem banner */
    #rad-f9fe2707 .statement {
      margin-top: clamp(30px, 6vw, 60px);
      border: 1px solid var(--border); border-radius: calc(var(--radius) + 8px);
      padding: clamp(20px, 2.8vw, 30px);
      background: linear-gradient(135deg, rgba(125,211,252,.10), rgba(167,139,250,.10)), #0f1520;
      box-shadow: var(--shadow);
      text-align: center;
    }
    #rad-f9fe2707 .statement h3 { margin: 0 0 6px; font-size: clamp(22px, 3.2vw, 30px); font-weight: 1000; }
    #rad-f9fe2707 .statement p { margin: 0; color: var(--muted); }
    #rad-f9fe2707 .strong { color: var(--ink); font-weight: 900; }

    /* Generic reveal (billboard / blocks) */
    #rad-f9fe2707 [data-animate] { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
    #rad-f9fe2707 .show { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      #rad-f9fe2707 [data-animate] { transition: none !important; opacity: 1 !important; transform: none !important; }
      #rad-f9fe2707 .bar > span { transition: none !important; width: 100% !important; }
    }
    
/* ===== الستايلات العامة للهاتف (من الستايل المدمج سابقاً) ===== */
.rowad-compare .rc-phone {
    justify-self: center; /* كان مدمجاً */
}
.rowad-compare .rc-iphone {
    width: 340px;
    height: 680px;
    border: 12px solid #0c0c0f;
    border-radius: 38px;
    background: #000;
    box-shadow: var(--shadow);
    position: relative;
}
.rowad-compare .rc-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 28px;
    background: #0c0c0f;
    border-radius: 22px;
}
.rowad-compare .rc-screen {
    position: absolute;
    inset: 12px;
    border-radius: 28px;
    background: linear-gradient(180deg,#0f172a,#0b1220);
    border: 1px solid #172136;
    overflow: hidden;
    padding: 14px;
}
.rowad-compare .rc-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #c3d0e0;
    font-weight: 700;
    margin-bottom: 8px;
}
.rowad-compare .rc-statusbar .sig i {
    margin-left: 6px;
    font-size: 12px;
    color: #c3d0e0;
}

/* المحادثة داخل الهاتف */
.rowad-compare .rc-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow-y: auto;
    padding: 4px 6px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rowad-compare .rc-chat::-webkit-scrollbar {
    width: 0;
    height: 0;
}
/* تنسيق الفقاعات يعتمد على المتغير --d المدمج في HTML */
.rowad-compare .rc-bubble {
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 14px;
    line-height: 1.7;
    font-size: 14px;
    width: max-content;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    animation: rc-in .5s ease forwards;
    animation-delay: var(--d, 0s); /* يستخدم المتغير المدمج في HTML */
}
/* ألوان الفقاعات */
.rowad-compare .rc-bubble.user {
    align-self: flex-end;
    background: #21304a;
    color: #dbeafe;
    border: 1px solid #27405f;
}
.rowad-compare .rc-bubble.bot {
    align-self: flex-start;
    background: #0a1a2f;
    border: 1px solid #1b2a45;
    color: #d8e2f0;
}
.rowad-compare .rc-bubble.rc-ok {
    background: linear-gradient(180deg, #0c1e31, #0b1a2b);
    border: 1px solid #1c3555;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, .12) inset;
}
.rowad-compare .rc-bubble.rc-warn {
    background: linear-gradient(180deg, #1b0f12, #170e10);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #ffdbdb;
}

.rowad-compare .rc-quick {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.rowad-compare .rc-quick button {
    background: #0c2339;
    border: 1px solid #1e3a5f;
    color: #cfeaff;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.rowad-compare .rc-quick button:hover {
    border-color: #2b68a9;
}
/* كي فريمز حركة الفقاعات */
@keyframes rc-in {
    to {
        opacity: 1;
        transform: none;
    }
}