/* Shared styles for ModifAI (used alongside Tailwind CDN) */
:root {
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --violet: #a855f7;
}

html {
  font-family: Inter, "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  scroll-padding-top: 5rem;
}
body { background: #000; color: #fff; -webkit-font-smoothing: antialiased; }
::selection { background: var(--blue); color: #fff; }

/* Arabic: never letter-space joined script, give tall glyphs room */
[lang="ar"] * { letter-spacing: 0 !important; }
[lang="ar"] h1 { line-height: 1.35 !important; }
[lang="ar"] h2, [lang="ar"] h3 { line-height: 1.5; }
[lang="ar"] body { line-height: 1.8; }

/* Brand accents */
.gradient-text {
  background-image: linear-gradient(90deg, #60a5fa, #22d3ee 45%, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #93c5fd;
}
.eyebrow::before {
  content: ""; width: 1.5rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
}
.accent-bar { background: linear-gradient(90deg, var(--blue), var(--cyan), var(--violet)); }

/* Hero backdrop */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(59,130,246,.22), transparent 70%),
    radial-gradient(35% 40% at 85% 20%, rgba(168,85,247,.16), transparent 70%),
    radial-gradient(30% 35% at 10% 30%, rgba(34,211,238,.10), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 75%);
}
.phone { position: relative; }
.phone::before {
  content: ""; position: absolute; inset: 12% 0; z-index: -1; border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(59,130,246,.45), rgba(168,85,247,.2) 60%, transparent);
  filter: blur(40px);
}

/* Cards */
.card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .6s ease;
}
.card:hover {
  border-color: rgba(96,165,250,.45);
  box-shadow: 0 16px 48px -20px rgba(59,130,246,.55);
}
a.card:hover, .card-lift:hover { transform: translateY(-3px); }
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: .75rem; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 8px 24px -8px rgba(99,102,241,.7);
}
.step-num {
  font-size: 2rem; font-weight: 800; line-height: 1;
  background-image: linear-gradient(180deg, #60a5fa, rgba(96,165,250,.15));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--blue), #8b5cf6);
  box-shadow: 0 8px 24px -10px rgba(99,102,241,.9);
  transition: filter .2s ease, transform .2s ease;
}
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; padding: .625rem 1.25rem; font-size: .875rem; font-weight: 500;
  border: 1px solid rgba(255,255,255,.14); transition: background .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.store-btn {
  display: inline-flex; align-items: center; gap: .75rem; min-width: 11rem;
  border-radius: .875rem; padding: .625rem 1.125rem;
  background: #fff; color: #000; transition: transform .2s ease, box-shadow .2s ease;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(255,255,255,.5); }
.store-btn small { display: block; font-size: .6875rem; line-height: 1.1; opacity: .7; }
.store-btn strong { display: block; font-size: 1.0625rem; line-height: 1.25; font-weight: 600; }
.store-btn.is-soon { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.2); }
.store-btn.is-soon:hover { box-shadow: none; background: rgba(255,255,255,.06); }
.nav-link { font-size: .875rem; color: rgba(255,255,255,.75); transition: color .2s ease; }
.nav-link:hover { color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; border-radius: .375rem; }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  border: 1px solid rgba(96,165,250,.25);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(168,85,247,.25), transparent 60%),
    #07090f;
}

/* FAQ accordion */
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: #93c5fd; transition: transform .2s ease; }
.faq[open] summary::after { transform: rotate(45deg); }

/* Reveal animation respecting reduced motion */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .card, .btn-primary, .store-btn { transition: none; }
}

/* Long-form content (blog posts, privacy policy) */
.prose h2 { color: #fff; padding-bottom: .4rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.prose h3 { color: #93c5fd; }
.prose a { color: #60a5fa; }
.prose li::marker { color: #60a5fa; }
.prose table { border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.prose thead th { background: rgba(255,255,255,.06); padding: .75rem 1rem; }
.prose tbody td { padding: .75rem 1rem; }