/*
 * Rizve Joarder — Unified Design System
 * Merges Lovable Digital Alchemy + WordPress rizve-os
 * Add to enqueue after rizve-design-system.css
 * Classes here complement rj-* — no conflicts.
 */

/* ─── LOVABLE TOKEN OVERLAY ─────────────────────────────────────────────── */
:root {
  /* Extended color palette — Lovable tokens merged in.
     --rj-primary now CHAINS to --rj-lime (set to the acid lime #c8ff3d in
     rizve-design-system.css, which loads before this file) so the whole site
     uses ONE brand lime. The literal #c8ff3d below is only a safety fallback. */
  --rj-primary:           var(--rj-lime, #c8ff3d);
  --rj-primary-dim:       var(--rj-lime-bg, rgba(200,255,61,.12));
  --rj-primary-glow:      var(--rj-lime-glow, rgba(200,255,61,.35));
  --rj-teal:              #2EE6C5;
  --rj-teal-glow:         rgba(46,230,197,.25);
  --rj-bluex:             #38BDF8;
  --rj-bluex-glow:        rgba(56,189,248,.25);
  /* Gradient brand — matches Lovable gradient-brand (acid-lime start). */
  --rj-gradient-brand:    linear-gradient(135deg,#c8ff3d 0%,#2EE6C5 45%,#38BDF8 75%,#8B5CF6 100%);
  --rj-gradient-soft:     linear-gradient(135deg,rgba(200,255,61,.14),rgba(139,92,246,.14));
  --rj-shadow-glow:       0 0 60px -10px rgba(200,255,61,.35);
  --rj-shadow-card:       0 20px 50px -25px rgba(0,0,0,.8);
  /* Display font */
  --rj-f-display:         'Space Grotesk','Geist',ui-sans-serif,system-ui,sans-serif;
}

/* ─── TYPOGRAPHY UPGRADES ────────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--rj-f-display); letter-spacing:-0.025em; }
h1 { letter-spacing:-0.035em; }

/* Gradient text — Lovable .text-gradient */
.rj-text-gradient,
.text-gradient {
  background: var(--rj-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--rj-f-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--rj-text-muted);
}

/* Kicker/chip pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .85rem;
  border-radius: 9999px;
  background: rgba(184,255,59,.1);
  color: var(--rj-primary);
  border: 1px solid rgba(184,255,59,.28);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
.container-x {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width:768px) { .container-x { padding-inline:2rem; } }

.section { padding-block: 5.5rem; }
@media (min-width:768px) { .section { padding-block:8rem; } }

/* ─── GRID BACKGROUND ────────────────────────────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(to right,  rgba(248,250,252,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(248,250,252,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center,black 40%,transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center,black 40%,transparent 75%);
}

/* Divider gradient line */
.divider-grad {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,transparent,rgba(184,255,59,.4),transparent);
}

/* ─── GLASS ──────────────────────────────────────────────────────────────── */
.glass {
  background:
    linear-gradient(180deg,rgba(13,27,42,.85),rgba(8,22,38,.55));
  border: 1px solid rgba(148,163,184,.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--rj-r-2xl, 36px);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.06);
}

.glass-hover {
  transition: transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .4s ease;
  will-change: transform;
}
.glass-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(184,255,59,.4);
  box-shadow: var(--rj-shadow-card), 0 0 0 1px rgba(184,255,59,.18);
}

/* ─── GRADIENT BORDER RING ───────────────────────────────────────────────── */
.ring-grad { position: relative; }
.ring-grad::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rj-gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
}

/* ─── CARD PREMIUM (Lovable spotlight-on-hover card) ────────────────────── */
.card-premium {
  position: relative;
  border-radius: var(--rj-r-2xl, 36px);
  background: linear-gradient(180deg,rgba(13,27,42,.9),rgba(8,22,38,.5));
  border: 1px solid rgba(148,163,184,.16);
  transition: transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease,box-shadow .45s ease;
  overflow: hidden;
  isolation: isolate;
}
.card-premium::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(184,255,59,.14),transparent 50%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 0;
}
.card-premium:hover {
  transform: translateY(-4px);
  border-color: rgba(184,255,59,.45);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(184,255,59,.2);
}
.card-premium:hover::after { opacity: 1; }
.card-premium > * { position: relative; z-index: 1; }

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-primary {
  position: relative;
  background: var(--rj-primary);
  color: #08120b;
  font-weight: 600;
  border-radius: 9999px;
  padding: .9rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow: var(--rj-shadow-glow), inset 0 1px 0 0 rgba(255,255,255,.3);
  letter-spacing: -.005em;
  text-decoration: none;
  font-family: var(--rj-f-body);
  font-size: 14.5px;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 0 80px -10px rgba(184,255,59,.55), inset 0 1px 0 0 rgba(255,255,255,.35);
  color: #08120b;
  text-decoration: none;
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(8,22,38,.3);
  color: var(--rj-text);
  border: 1px solid rgba(148,163,184,.16);
  font-weight: 500;
  border-radius: 9999px;
  padding: .85rem 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .25s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-decoration: none;
  font-family: var(--rj-f-body);
  font-size: 14.5px;
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: rgba(46,230,197,.55);
  background: rgba(8,22,38,.7);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--rj-text);
}

/* ─── GLOW ORBS (hero ambient) ───────────────────────────────────────────── */
.glow-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  pointer-events: none;
}
.glow-orb-1 { background: rgba(184,255,59,.35);  animation: float-glow   12s ease-in-out infinite; }
.glow-orb-2 { background: rgba(139,92,246,.4);   animation: float-glow-2 14s ease-in-out infinite; }
.glow-orb-3 { background: rgba(56,189,248,.3);   animation: float-glow   16s ease-in-out infinite reverse; }

/* ─── PORTRAIT FRAME (Meet Rizve section) ────────────────────────────────── */
.portrait-frame {
  position: relative;
  border-radius: 28px;
  padding: 10px;
  background: linear-gradient(180deg,rgba(13,27,42,.9),rgba(8,22,38,.4));
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: var(--rj-shadow-card), 0 0 80px -30px rgba(184,255,59,.35);
  overflow: hidden;
}
.portrait-frame::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 20px;
  background: radial-gradient(120% 80% at 50% 110%,rgba(184,255,59,.22),transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.portrait-frame-inner {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 100%,rgba(46,230,197,.2),transparent 70%),
    linear-gradient(180deg,rgba(13,27,42,.6),rgba(2,8,20,.8));
  aspect-ratio: 4/5;
}
.portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
}

/* Portrait animation */
.portrait-float { animation: portrait-float 7s ease-in-out infinite; }

/* Brand labels around portrait */
.brand-label {
  position: absolute;
  font-family: var(--rj-f-display);
  font-weight: 600;
  font-size: clamp(.65rem,.85vw,.78rem);
  letter-spacing: .32em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  color: rgba(248,250,252,.55);
  text-shadow: 0 0 18px rgba(2,8,20,.8);
}
.brand-label-top-left    { top:0; left:.5rem;  color:rgba(46,230,197,.78); }
.brand-label-top-right   { top:0; right:.5rem; color:rgba(184,255,59,.85); }
.brand-label-bottom-left { bottom:0; left:.5rem;  color:rgba(56,189,248,.8); }
.brand-label-bottom-right{ bottom:0; right:.5rem; color:rgba(139,92,246,.8); }
.brand-label-side-left {
  top:50%; left:-1.2rem;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left center;
  color: rgba(248,250,252,.35);
}

/* ─── SCROLL REVEAL ──────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── HOVER UTILITIES ────────────────────────────────────────────────────── */
.hover-glow {
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.hover-glow:hover {
  border-color: rgba(184,255,59,.45);
  box-shadow:
    0 0 0 1px rgba(184,255,59,.25),
    0 0 40px -8px rgba(184,255,59,.35);
}

.lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.lift:hover { transform: translateY(-3px); }

/* Image zoom on hover */
.img-zoom { overflow: hidden; }
.img-zoom > img {
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.img-zoom:hover > img { transform: scale(1.06); }

/* Link underline motion */
.link-underline { position: relative; }
.link-underline::after {
  content: ''; position: absolute; left:0; bottom:-2px; height:1px; width:100%;
  background: var(--rj-gradient-brand);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* WhatsApp pulse */
.whatsapp-pulse { position: relative; }
.whatsapp-pulse::before {
  content: '';
  position: absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: wa-pulse 2.4s cubic-bezier(.2,.7,.2,1) infinite;
  pointer-events: none;
}

/* Glow pulse on CTA */
.glow-pulse { animation: cta-glow 3.2s ease-in-out infinite; }

/* Page enter */
.page-enter { animation: page-in .5s cubic-bezier(.2,.7,.2,1) both; }

/* Slide in up */
.slide-in-up { animation: slide-in-up .35s cubic-bezier(.2,.7,.2,1) both; }

/* Accordion via grid-template-rows */
.accordion-row {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1);
}
.accordion-row[data-open='true'] { grid-template-rows: 1fr; }
.accordion-row > .accordion-inner { overflow: hidden; min-height: 0; }

/* Section bg tints */
.bg-tint-violet { background: radial-gradient(60% 50% at 80% 0%,rgba(139,92,246,.14),transparent 60%); }
.bg-tint-cyan   { background: radial-gradient(60% 50% at 0% 100%,rgba(56,189,248,.12),transparent 60%); }

/* ─── KEYFRAME ANIMATIONS ────────────────────────────────────────────────── */
@keyframes float-glow {
  0%,100% { transform: translate3d(0,0,0) scale(1);    opacity:.55; }
  50%     { transform: translate3d(0,-20px,0) scale(1.08); opacity:.8; }
}
@keyframes float-glow-2 {
  0%,100% { transform: translate3d(0,0,0) scale(1);      opacity:.4; }
  50%     { transform: translate3d(20px,15px,0) scale(1.1); opacity:.65; }
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes portrait-float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}
@keyframes page-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slide-in-up {
  from { opacity:0; transform:translateY(18px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cta-glow {
  0%,100% { box-shadow: 0 0 40px -10px rgba(184,255,59,.35); }
  50%     { box-shadow: 0 0 80px -10px rgba(184,255,59,.6); }
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0   rgba(37,211,102,0); }
}
@keyframes img-float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-6px); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(184,255,59,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(184,255,59,0); }
  100% { box-shadow: 0 0 0 0   rgba(184,255,59,0); }
}
@keyframes shine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* img-float utility */
.img-float { animation: img-float 7s ease-in-out infinite; }

/* ─── SECTION HEAD UTILITY ───────────────────────────────────────────────── */
.rj-section-head--center { text-align: center; max-width: 720px; margin-inline: auto; }

/* ─── HERO SECTION OVERLAY ───────────────────────────────────────────────── */
.rj-hero-unified {
  position: relative;
  overflow: hidden;
  padding-top: clamp(80px, 12vw, 140px);
  padding-bottom: clamp(60px, 8vw, 112px);
}
.rj-hero-unified .rj-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

/* Dashboard mock floating card */
.rj-dashboard-mock {
  position: relative;
}
.rj-dashboard-mock .rj-mock-topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.rj-mock-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.rj-mock-dot:nth-child(1) { background: rgba(251,113,133,.7); }
.rj-mock-dot:nth-child(2) { background: rgba(184,255,59,.7); }
.rj-mock-dot:nth-child(3) { background: rgba(46,230,197,.7); }
.rj-mock-url {
  font-family: var(--rj-f-mono);
  font-size: .7rem;
  color: var(--rj-text-muted);
  margin-left: .75rem;
}
.rj-mini-card {
  background: rgba(8,22,38,.6);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 12px;
  padding: .75rem;
}
.rj-mini-card__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  color: var(--rj-text-muted);
  margin-bottom: .25rem;
}
.rj-mini-card__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rj-text);
}
.rj-mini-card__trend {
  font-size: .7rem;
  color: var(--rj-primary);
  margin-left: .5rem;
}

/* ─── STATS STRIP UNIFIED ────────────────────────────────────────────────── */
.rj-stats-strip-unified {
  border-top: 1px solid rgba(148,163,184,.12);
  border-bottom: 1px solid rgba(148,163,184,.12);
  background: rgba(8,22,38,.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rj-stats-strip-unified .rj-stat-number {
  font-family: var(--rj-f-display);
  font-size: clamp(1.75rem,3vw,3rem);
  font-weight: 600;
  letter-spacing: -.04em;
  background: var(--rj-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── TESTIMONIAL CARD UNIFIED ───────────────────────────────────────────── */
.rj-testimonial-unified {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
}
.rj-testimonial-unified blockquote {
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(248,250,252,.85);
  flex: 1;
  margin: 0;
  font-style: normal;
}

/* ─── FINAL CTA UNIFIED ──────────────────────────────────────────────────── */
.rj-final-cta-unified {
  text-align: center;
  padding: clamp(3rem,6vw,5rem) 1.25rem;
}
.rj-final-cta-unified h2 {
  font-family: var(--rj-f-display);
  font-size: clamp(1.75rem,3.5vw,3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 1.25rem;
}

/* ─── ACCESSIBILITY ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .portrait-float,
  .page-enter,
  .glow-orb-1,.glow-orb-2,.glow-orb-3,
  .img-float,
  .glow-pulse,
  .whatsapp-pulse::before,
  .slide-in-up {
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .accordion-row { transition: none !important; }
  .img-zoom > img { transition: none !important; }
  .lift, .glass-hover, .card-premium, .hover-glow {
    transition: none !important;
  }
}