/* Drip Art — Base Styles */
:root{
  --ink:#0a0a0a;--paper:#ffffff;--cream:#f4efe9;--cream-2:#ebe4da;
  --muted:#7a756f;--line:rgba(10,10,10,0.10);--line-2:rgba(10,10,10,0.06);
  --success:#28c940;--warning:#ffbd2e;--danger:#ff5f57;
  --container-max:1320px;--container-pad:32px;
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:24px;--r-full:999px;
  --t-fast:.3s;--t-med:.4s cubic-bezier(.2,.85,.25,1);--t-slow:1s cubic-bezier(.2,.85,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-weight:400;line-height:1.75;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
section{padding:120px 0}
.dashboard-body section{padding:20px}
.section-eyebrow{font-size:13px;color:var(--muted);margin-bottom:24px;display:flex;align-items:center;gap:10px}
.section-eyebrow::before{content:"";width:24px;height:1px;background:var(--muted)}
.section-eyebrow.center{justify-content:center}
.section-title{font-size:clamp(32px,4.5vw,56px);font-weight:500;line-height:1.2;letter-spacing:-0.03em;margin-bottom:24px;max-width:780px}
.section-title.center{text-align:center;margin-left:auto;margin-right:auto}
.section-title .muted{color:var(--muted);font-weight:400}
.section-lead{font-size:18px;color:var(--muted);line-height:1.85;max-width:620px;margin-bottom:64px}
.section-lead.center{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:80px}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;gap:32px;flex-wrap:wrap}
.section-header .section-title,.section-header .section-lead{margin-bottom:0}
.section-link{font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:var(--r-full);border:1px solid var(--line);transition:all var(--t-fast);flex-shrink:0}
.section-link:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:16px 28px;border-radius:var(--r-full);font-size:15px;font-weight:500;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.btn-primary .arr{width:22px;height:22px;border-radius:50%;background:var(--paper);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.btn-secondary{font-size:15px;font-weight:500;padding:16px 4px;transition:opacity var(--t-fast);display:inline-flex;align-items:center;gap:8px}
.btn-secondary:hover{opacity:.6}
.btn-secondary .play{width:32px;height:32px;border-radius:50%;background:var(--cream);display:inline-flex;align-items:center;justify-content:center}
.btn-secondary .play::after{content:"";width:0;height:0;border-right:8px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-right:-2px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow),transform var(--t-slow)}
.reveal.in{opacity:1;transform:translateY(0)}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes floatGentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulseAnim{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pulse2{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.6}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ico-spin{animation:spin 12s linear infinite;transform-origin:center}
.ico-bob{animation:bob 2.4s ease-in-out infinite}
.ico-pulse{animation:pulse2 2.6s ease-in-out infinite;transform-origin:center}
.ico-drift{animation:drift 3s ease-in-out infinite}