/* ══════════════════════════════════════════════════════════════════
   CS42.ORG — DESIGN SYSTEM
   ──────────────────────────────────────────────────────────────────
   Single source of truth for design tokens and shared components.
   Update this file to change colors, spacing, fonts, etc. across
   the entire site (or at least all pages that import it).

   USAGE:
     <link rel="stylesheet" href="/styles.css">
     <link rel="stylesheet" href="/assets/css/design-system.css">

     For pages in subdirectories, adjust the path:
       chilling/* →  ../assets/css/design-system.css
       apps/*    →  ../assets/css/design-system.css
       apps/sukoon-ios/* →  ../../assets/css/design-system.css

   STRUCTURE:
     1. Design tokens (CSS custom properties)
     2. Background ambience (orbs)
     3. Page layout (containers, headers, footers)
     4. Navigation components (nav-btn, breadcrumb)
     5. Card components (hub-card, project-card, content-card, info-card)
     6. Form components (input, button, modal)
     7. Typography helpers (eyebrow, badge, title-ar)
     8. Animations
     9. Responsive helpers
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ────────────────────────────────────────────────────────────────── */
:root {
    /* ── Brand & accent palette ─────────────────────────────────── */
    --ds-accent:            #4B7BFF;
    --ds-accent-light:      #8FAEFF;
    --ds-accent-soft:       #6E95FF;
    --ds-accent-2:          #9D46FF;   /* secondary purple */
    --ds-accent-3:          #00E5FF;   /* cyan highlight */

    /* Color-coded card themes (mirrors index.html palette) */
    --ds-teal-a:            #00f2fe;
    --ds-teal-b:            #4facfe;
    --ds-purple-a:          #a78bfa;
    --ds-purple-b:          #7c3aed;
    --ds-amber-a:           #fbbf24;
    --ds-amber-b:           #f97316;
    --ds-rose-a:            #f472b6;
    --ds-rose-b:            #ec4899;
    --ds-blue-a:            #409cff;
    --ds-blue-b:            #3478ff;
    --ds-emerald-a:         #34d399;
    --ds-emerald-b:         #10b981;

    /* Status colors */
    --ds-danger:            #E74C3C;
    --ds-success:           #34d399;

    /* ── Surfaces (dark — default) ──────────────────────────────── */
    --ds-bg:                #07070f;     /* page background */
    --ds-bg-alt:            #09090f;
    --ds-card-bg:           #0f0f18;     /* primary card surface */
    --ds-card-bg-soft:      #111118;
    --ds-glass:             rgba(255,255,255,0.04);
    --ds-glass-strong:      rgba(255,255,255,0.06);

    /* ── Borders ────────────────────────────────────────────────── */
    --ds-border:            rgba(255,255,255,0.06);
    --ds-border-strong:     rgba(255,255,255,0.10);
    --ds-border-hover:      rgba(255,255,255,0.18);

    /* ── Text ───────────────────────────────────────────────────── */
    --ds-text:              #ffffff;
    --ds-text-soft:         rgba(255,255,255,0.75);
    --ds-text-muted:        rgba(255,255,255,0.45);
    --ds-text-dim:          rgba(255,255,255,0.3);

    /* ── Typography ─────────────────────────────────────────────── */
    --ds-font:              'Outfit', 'Roboto', sans-serif;
    --ds-font-ar:           'Amiri', 'Noto Naskh Arabic', serif;

    /* ── Spacing scale ──────────────────────────────────────────── */
    --ds-sp-1:  0.25rem;
    --ds-sp-2:  0.5rem;
    --ds-sp-3:  0.75rem;
    --ds-sp-4:  1rem;
    --ds-sp-5:  1.5rem;
    --ds-sp-6:  2rem;
    --ds-sp-7:  2.5rem;
    --ds-sp-8:  3rem;

    /* ── Radii ──────────────────────────────────────────────────── */
    --ds-radius-sm:  10px;
    --ds-radius-md:  14px;
    --ds-radius-lg:  20px;
    --ds-radius-xl:  28px;
    --ds-radius-pill: 999px;

    /* ── Shadows ────────────────────────────────────────────────── */
    --ds-shadow-sm:    0 4px 12px rgba(0,0,0,0.25);
    --ds-shadow-md:    0 10px 30px rgba(0,0,0,0.35);
    --ds-shadow-lg:    0 22px 55px rgba(0,0,0,0.45);
    --ds-shadow-glow:  0 0 30px rgba(75,123,255,0.3);

    /* ── Motion ─────────────────────────────────────────────────── */
    --ds-ease:         cubic-bezier(0.2, 0, 0.2, 1);
    --ds-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ds-dur-fast:     0.2s;
    --ds-dur:          0.35s;
    --ds-dur-slow:     0.6s;

    /* ── Layout widths ──────────────────────────────────────────── */
    --ds-page-max:     1100px;
    --ds-content-max:  900px;
    --ds-text-max:     700px;
}


/* ══════════════════════════════════════════════════════════════════
   2. BACKGROUND AMBIENCE — drifting blurred orbs
   ────────────────────────────────────────────────────────────────── */
.ds-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.ds-orb--teal {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--ds-teal-b), var(--ds-teal-a));
    top: -200px; left: -200px;
    opacity: 0.14;
    animation: dsOrbDrift 28s linear infinite;
}
.ds-orb--purple {
    width: 450px; height: 450px;
    background: radial-gradient(circle, var(--ds-purple-a), var(--ds-purple-b));
    bottom: 10%; right: -150px;
    opacity: 0.10;
    animation: dsOrbDrift 22s linear infinite reverse;
}
.ds-orb--amber {
    width: 380px; height: 380px;
    background: radial-gradient(circle, var(--ds-amber-a), var(--ds-amber-b));
    bottom: -100px; left: 35%;
    opacity: 0.10;
    animation: dsOrbDrift 18s linear infinite;
}
@keyframes dsOrbDrift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(60px, 40px) scale(1.06); }
    66%  { transform: translate(-40px, 70px) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Mobile: smaller, less expensive orbs */
@media (max-width: 768px) {
    .ds-orb--teal   { width: 350px; height: 350px; filter: blur(60px); }
    .ds-orb--purple { width: 280px; height: 280px; filter: blur(50px); }
    .ds-orb--amber  { width: 220px; height: 220px; filter: blur(40px); }
}


/* ══════════════════════════════════════════════════════════════════
   3. PAGE LAYOUT
   ────────────────────────────────────────────────────────────────── */
.ds-page {
    position: relative;
    z-index: 1;
    max-width: var(--ds-page-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.ds-page--narrow { max-width: var(--ds-content-max); }

/* Standard hub-page header (matches chilling/games hubs) */
.ds-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem 2rem 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.ds-header-titles { flex: 1; min-width: 200px; }
.ds-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--ds-text);
}
.ds-subtitle {
    color: var(--ds-text-muted);
    margin-top: 0.5rem;
    font-size: 1rem;
}

.ds-nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Standard footer (matches chilling/games hubs) */
.ds-footer {
    padding: 2rem 1.5rem 1.5rem;
    margin-top: 3rem;
    border-top: 1px solid var(--ds-border);
}
.ds-footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    color: var(--ds-text-muted);
    font-size: 0.8rem;
    max-width: var(--ds-page-max);
    margin: 0 auto;
}
.ds-footer-logo {
    height: 18px;
    width: auto;
    opacity: 0.6;
    transition: opacity var(--ds-dur) ease, transform var(--ds-dur) ease;
}
.ds-footer-logo:hover { opacity: 1; transform: scale(1.05); }


/* ══════════════════════════════════════════════════════════════════
   4. NAVIGATION COMPONENTS
   ────────────────────────────────────────────────────────────────── */

/* Outlined pill button — used in hub page nav-actions */
.ds-nav-btn {
    text-decoration: none;
    color: var(--ds-text-muted);
    font-family: var(--ds-font);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.55rem 1.4rem;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-pill);
    transition: all var(--ds-dur) ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    cursor: pointer;
}
.ds-nav-btn:hover {
    color: var(--ds-text);
    border-color: var(--ds-border-hover);
    background: var(--ds-glass);
    transform: translateY(-2px);
}

/* Breadcrumb trail */
.ds-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ds-breadcrumb a {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-text-muted);
    text-decoration: none;
    padding: 0.3rem 0.8rem;
    border-radius: var(--ds-radius-pill);
    border: 1px solid transparent;
    transition: all var(--ds-dur-fast) ease;
}
.ds-breadcrumb a:hover {
    color: var(--ds-text);
    border-color: var(--ds-border);
    background: var(--ds-glass);
}
.ds-breadcrumb a[aria-current="page"] {
    color: var(--ds-accent-light);
    background: rgba(75,123,255,0.08);
}
.ds-breadcrumb .ds-sep {
    color: var(--ds-text-dim);
    font-size: 0.8rem;
    user-select: none;
}


/* ══════════════════════════════════════════════════════════════════
   5. CARD COMPONENTS
   ────────────────────────────────────────────────────────────────── */

/* ── Project card — hub page grid items (chilling/games style) ── */
.ds-grid {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem 1rem 3rem;
    max-width: var(--ds-page-max);
    margin: 0 auto;
    width: 100%;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) {
    .ds-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 2rem 1.5rem 3rem; }
}
@media (min-width: 1000px) {
    .ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.ds-card {
    border-radius: var(--ds-radius-xl);
    border: 1.5px solid var(--ds-border);
    background: var(--ds-card-bg);
    transition: transform var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) ease,
                border-color 0.4s ease;
    position: relative;
    overflow: hidden;
    padding: 2.6rem 1.8rem 2rem;
    min-height: 380px;
    text-decoration: none;
    color: var(--ds-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: dsCardIn var(--ds-dur-slow) var(--ds-ease) both;
    opacity: 0;
}
.ds-card:nth-child(1) { animation-delay: 0.07s; }
.ds-card:nth-child(2) { animation-delay: 0.14s; }
.ds-card:nth-child(3) { animation-delay: 0.21s; }
.ds-card:nth-child(4) { animation-delay: 0.28s; }
.ds-card:nth-child(5) { animation-delay: 0.35s; }
.ds-card:nth-child(6) { animation-delay: 0.42s; }

/* Glow on hover, color-coded */
.ds-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.ds-card:hover { transform: translateY(-8px); }
.ds-card:hover::before { opacity: 1; }

.ds-card[data-color="teal"]::before    { background: radial-gradient(circle at 50% 0%, rgba(75,123,255,0.12), transparent 60%); }
.ds-card[data-color="purple"]::before  { background: radial-gradient(circle at 50% 0%, rgba(157,70,255,0.10), transparent 60%); }
.ds-card[data-color="amber"]::before   { background: radial-gradient(circle at 50% 0%, rgba(241,196,15,0.10), transparent 60%); }
.ds-card[data-color="rose"]::before    { background: radial-gradient(circle at 50% 0%, rgba(244,114,182,0.10), transparent 60%); }
.ds-card[data-color="emerald"]::before { background: radial-gradient(circle at 50% 0%, rgba(52,211,153,0.10), transparent 60%); }

.ds-card[data-color="teal"]:hover    { border-color: rgba(75,123,255,0.45);  box-shadow: 0 22px 55px rgba(75,123,255,0.16),  0 6px 16px rgba(0,0,0,0.5); }
.ds-card[data-color="purple"]:hover  { border-color: rgba(157,70,255,0.45);  box-shadow: 0 22px 55px rgba(157,70,255,0.14),  0 6px 16px rgba(0,0,0,0.5); }
.ds-card[data-color="amber"]:hover   { border-color: rgba(241,196,15,0.4);   box-shadow: 0 22px 55px rgba(241,196,15,0.12),  0 6px 16px rgba(0,0,0,0.5); }
.ds-card[data-color="rose"]:hover    { border-color: rgba(244,114,182,0.45); box-shadow: 0 22px 55px rgba(244,114,182,0.14), 0 6px 16px rgba(0,0,0,0.5); }
.ds-card[data-color="emerald"]:hover { border-color: rgba(52,211,153,0.45);  box-shadow: 0 22px 55px rgba(52,211,153,0.14),  0 6px 16px rgba(0,0,0,0.5); }

/* Card icon — large image (e.g. app icon) */
.ds-card-icon {
    width: 120px;
    height: 120px;
    border-radius: var(--ds-radius-xl);
    object-fit: cover;
    margin-bottom: 1.6rem;
    transition: transform var(--ds-dur) var(--ds-ease-bounce);
    box-shadow: 0 14px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
.ds-card:hover .ds-card-icon { transform: scale(1.1) rotate(3deg); }

/* Card icon — emoji / SVG */
.ds-card-emoji {
    font-size: 4rem;
    margin-bottom: 1.6rem;
    line-height: 1;
    transition: transform var(--ds-dur) var(--ds-ease-bounce);
    display: block;
}
.ds-card:hover .ds-card-emoji { transform: scale(1.18) rotate(4deg); }

.ds-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0 0 0.3rem;
    color: var(--ds-text-muted);
    transition: color 0.4s ease;
}
.ds-card[data-color="teal"]:hover    .ds-card-title { color: var(--ds-accent-light); }
.ds-card[data-color="purple"]:hover  .ds-card-title { color: #C9A4FF; }
.ds-card[data-color="amber"]:hover   .ds-card-title { color: #FBD074; }
.ds-card[data-color="rose"]:hover    .ds-card-title { color: #F8A4CC; }
.ds-card[data-color="emerald"]:hover .ds-card-title { color: #6EE7B7; }

.ds-card-platform {
    font-size: 0.78rem;
    color: var(--ds-text-dim);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.ds-card-desc {
    font-size: 0.92rem;
    color: var(--ds-text-muted);
    line-height: 1.7;
    margin-bottom: 1.4rem;
    flex: 1;
    max-width: 30ch;
}

.ds-card-arrow {
    position: absolute;
    top: 1.4rem; right: 1.4rem;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ds-glass);
    border: 1px solid var(--ds-border-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    color: var(--ds-text-dim);
    opacity: 0;
    transform: scale(0.7) rotate(-45deg);
    transition: opacity var(--ds-dur) ease, transform var(--ds-dur) ease;
}
.ds-card:hover .ds-card-arrow {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* "Coming Soon" / status corner tag (top-left of card) */
.ds-card-tag {
    position: absolute;
    top: 1.4rem; left: 1.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 0.25rem 0.7rem;
    border-radius: var(--ds-radius-pill);
    background: rgba(75,123,255,0.15);
    border: 1px solid rgba(75,123,255,0.3);
    color: var(--ds-accent-light);
    text-transform: uppercase;
    z-index: 2;
}

/* ── Content card — long-form sections (about, terms, privacy) ── */
.ds-section {
    margin-bottom: 2.5rem;
    animation: dsFadeUp var(--ds-dur-slow) ease both;
}
.ds-section:nth-of-type(1) { animation-delay: 0.05s; }
.ds-section:nth-of-type(2) { animation-delay: 0.15s; }
.ds-section:nth-of-type(3) { animation-delay: 0.25s; }
.ds-section:nth-of-type(4) { animation-delay: 0.35s; }
.ds-section:nth-of-type(5) { animation-delay: 0.45s; }
.ds-section:nth-of-type(6) { animation-delay: 0.55s; }

.ds-section-card {
    background: rgba(15, 15, 24, 0.8);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: 2.2rem 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ds-section-card h2 {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 0.3rem;
    color: var(--ds-text);
}
.ds-section-subtitle {
    font-size: 0.8rem;
    color: var(--ds-text-muted);
    margin-bottom: 1.5rem;
    letter-spacing: 0.3px;
}
.ds-section-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-text-soft);
    margin: 1.5rem 0 0.6rem;
    letter-spacing: 0.2px;
}
.ds-section-card h3:first-of-type { margin-top: 0; }
.ds-section-card p,
.ds-section-card li {
    font-size: 0.92rem;
    color: var(--ds-text-muted);
    line-height: 1.8;
}
.ds-section-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ds-section-card ul li {
    padding: 0.4rem 0 0.4rem 1.4rem;
    position: relative;
}
.ds-section-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ds-accent);
    opacity: 0.5;
}
.ds-section-card a {
    color: var(--ds-accent-light);
    text-decoration: none;
}
.ds-section-card a:hover { text-decoration: underline; }
.ds-section-card .ds-meta {
    font-size: 0.78rem;
    color: var(--ds-text-dim);
    margin-top: 1.2rem;
}

/* ── Info card — small key/value blocks (used in info grid) ── */
.ds-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 500px) {
    .ds-info-grid { grid-template-columns: 1fr 1fr; }
}
.ds-info-item {
    display: flex;
    flex-direction: column;
    padding: 0.8rem 1rem;
    border-radius: var(--ds-radius-md);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--ds-border);
}
.ds-info-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--ds-text-dim);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.ds-info-value {
    font-size: 0.9rem;
    color: var(--ds-text-soft);
    font-weight: 500;
}

/* ── Feature item — icon + title + desc, used in features grid ── */
.ds-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 600px) {
    .ds-features-grid { grid-template-columns: 1fr 1fr; }
}
.ds-feature-item {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: var(--ds-radius-md);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--ds-border);
}
.ds-feature-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}
.ds-feature-item h4 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ds-text-soft);
    margin: 0 0 0.2rem;
}
.ds-feature-item p {
    font-size: 0.82rem;
    color: var(--ds-text-muted);
    line-height: 1.5;
    margin: 0;
}


/* ══════════════════════════════════════════════════════════════════
   5b. EXPANDABLE / COLLAPSIBLE BLOCK
   ──────────────────────────────────────────────────────────────────
   Pattern:
     <p class="ds-brief">Brief 1-2 sentence summary…</p>
     <details class="ds-expandable">
         <summary class="ds-expand-toggle">
             <span class="ds-expand-show">Read more</span>
             <span class="ds-expand-hide">Show less</span>
             <svg class="ds-expand-chevron">…</svg>
         </summary>
         <div class="ds-expand-content">…full content…</div>
     </details>
   ────────────────────────────────────────────────────────────────── */

.ds-brief {
    font-size: 0.95rem;
    color: var(--ds-text-soft);
    line-height: 1.7;
    margin: 0 0 1rem;
}

.ds-expandable {
    margin-top: 0.5rem;
}
/* Hide the default disclosure triangle */
.ds-expandable > summary {
    list-style: none;
    cursor: pointer;
}
.ds-expandable > summary::-webkit-details-marker { display: none; }
.ds-expandable > summary::marker { display: none; }

.ds-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-glass);
    border: 1px solid var(--ds-border-strong);
    color: var(--ds-text-soft);
    font-family: var(--ds-font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: all var(--ds-dur-fast) ease;
    user-select: none;
}
.ds-expand-toggle:hover {
    background: var(--ds-glass-strong);
    border-color: var(--ds-border-hover);
    color: var(--ds-text);
}
.ds-expand-toggle:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 3px;
}
.ds-expand-chevron {
    width: 14px;
    height: 14px;
    transition: transform var(--ds-dur) ease;
}
.ds-expandable[open] .ds-expand-chevron {
    transform: rotate(180deg);
}

/* Toggle the label between Show / Hide states */
.ds-expand-hide { display: none; }
.ds-expandable[open] .ds-expand-show { display: none; }
.ds-expandable[open] .ds-expand-hide { display: inline; }

/* Explicit hide/show — overrides any inherited display so the details stays collapsed by default */
.ds-expandable:not([open]) .ds-expand-content { display: none; }
.ds-expandable[open] .ds-expand-content {
    display: block;
    margin-top: 1.5rem;
    animation: dsFadeUp 0.35s ease both;
}

/* When prefers-reduced-motion is on, skip the fade-in */
@media (prefers-reduced-motion: reduce) {
    .ds-expand-content { animation: none; }
    .ds-expand-chevron { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════
   6. FORM COMPONENTS
   ────────────────────────────────────────────────────────────────── */

/* Solid primary button (CTA) */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.8rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-accent);
    color: white;
    font-family: var(--ds-font);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--ds-dur) ease;
    box-shadow: 0 4px 18px rgba(75,123,255,0.3);
}
.ds-btn:hover:not(:disabled) {
    background: #3a6aee;
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(75,123,255,0.4);
}
.ds-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--ds-glass-strong);
    color: var(--ds-text-muted);
    box-shadow: none;
}

/* App-store style white button */
.ds-btn--store {
    background: white;
    color: #000;
    border-radius: var(--ds-radius-md);
    padding: 0.85rem 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.ds-btn--store:hover:not(:disabled) {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.ds-btn--store:disabled {
    background: var(--ds-glass-strong);
    color: var(--ds-text-muted);
}

/* Form fields */
.ds-form { display: flex; flex-direction: column; gap: 0.9rem; }
.ds-field { display: flex; flex-direction: column; gap: 0.3rem; }
.ds-field label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--ds-text-muted);
}
.ds-field input,
.ds-field textarea {
    background: var(--ds-glass);
    border: 1px solid var(--ds-border-strong);
    color: var(--ds-text);
    font-family: var(--ds-font);
    font-size: 0.88rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--ds-radius-md);
    outline: none;
    transition: border-color var(--ds-dur-fast) ease;
}
.ds-field input::placeholder,
.ds-field textarea::placeholder { color: var(--ds-text-dim); }
.ds-field input:focus,
.ds-field textarea:focus { border-color: rgba(75,123,255,0.5); }

/* Modal overlay */
.ds-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ds-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.ds-modal {
    background: var(--ds-card-bg-soft);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-xl);
    padding: 2.2rem;
    max-width: 420px;
    width: 100%;
    position: relative;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.35s var(--ds-ease);
}
.ds-modal-backdrop.is-open .ds-modal {
    transform: translateY(0) scale(1);
}
.ds-modal-close {
    position: absolute;
    top: 1.1rem; right: 1.2rem;
    background: none;
    border: none;
    color: var(--ds-text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.3rem;
    line-height: 1;
    border-radius: 50%;
    transition: color var(--ds-dur-fast);
}
.ds-modal-close:hover { color: var(--ds-text); }


/* ══════════════════════════════════════════════════════════════════
   7. TYPOGRAPHY HELPERS
   ────────────────────────────────────────────────────────────────── */

.ds-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--ds-accent-light);
    background: rgba(75,123,255,0.12);
    border: 1px solid rgba(75,123,255,0.3);
    display: inline-block;
    padding: 0.25rem 0.8rem;
    border-radius: var(--ds-radius-pill);
    text-transform: uppercase;
}

.ds-badge {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 0.18rem 0.55rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-glass);
    border: 1px solid var(--ds-border-strong);
    color: var(--ds-text-muted);
    text-transform: uppercase;
}

.ds-title-ar {
    font-family: var(--ds-font-ar);
    font-weight: 700;
    color: var(--ds-accent-light);
    direction: rtl;
    unicode-bidi: isolate;
}

/* Hero-level titles */
.ds-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text);
    margin: 0;
}
.ds-hero-tagline {
    font-size: 1.05rem;
    color: var(--ds-text-muted);
    max-width: 520px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════════
   8. ANIMATIONS
   ────────────────────────────────────────────────────────────────── */
@keyframes dsCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dsFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ds-card, .ds-section, .ds-orb {
        animation: none !important;
        transition: none !important;
    }
    .ds-card { opacity: 1; }
    /* Modal: snap open/close instead of transitioning */
    .ds-modal-backdrop, .ds-modal {
        transition: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   9. RESPONSIVE HELPERS
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ds-header {
        padding: 1.5rem 1rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .ds-nav-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .ds-title { font-size: 1.6rem; }
    .ds-section-card { padding: 1.6rem 1.3rem; }
}