/* Reverie Design - Minimal Geometric Styling
   Purpose: Provide modern, minimalist, geometric styles that complement Tailwind classes.
   Notes: Keep styles small and performant. Uses CSS variables for quick theming.
*/

:root{
  /* Default variables set to a dark purple theme with amber accents */
  --bg: #1e1a4d; /* violet-900 (Tailwind) page background base */
  --surface: rgba(255,255,255,0.04); /* subtle light surface on dark bg */
  --text: #fff8e6; /* warm readable text on dark purple */
  --muted: rgba(255,248,230,0.72);
  --accent: #f59e0b; /* amber accent */
  --accent-2: #1a0b2b; /* darker purple surface accent */
  --grad-start: #f59e0b; /* amber (start) */
  --grad-mid: #fbbf24;   /* amber/yellow (mid) */
  --grad-end: #f97316;   /* warm orange-amber (end) */
  --card-shadow: 0 10px 30px rgba(2,6,23,0.6);
  --radius: 14px;
  --glass: rgba(255,255,255,0.06);
}

@media (prefers-color-scheme:dark){
  :root{
  --bg:#3c096c;
    --surface:#120920;
    --text:#fff8e6;
    --muted:rgba(255,248,230,0.6);
    --accent:#f59e0b;
    --card-shadow: 0 12px 30px rgba(0,0,0,0.6);
  }
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Smooth scrolling for in-page anchor jumps */
html{scroll-behavior:smooth}

/* Decorative geometric shape in hero */
.decorative-shape{
  position:absolute;
  right:-40px;
  top:20px;
  width:320px;
  height:320px;
  background:linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01));
  transform:rotate(25deg);
  border-radius:28px 2px 28px 2px;
  filter: blur(10px);
  z-index:0;
}

.geometric-card{
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}

.icon-circle{
  width:56px;
  height:56px;
  border-radius:12px;
  background:linear-gradient(180deg, var(--accent) 0%, rgba(0,0,0,0.08) 100%);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
}

/* Pricing cards */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
}
.pricing-card{
  background:var(--surface);
  padding:1.25rem;
  border-radius:12px;
  box-shadow:var(--card-shadow);
}
.pricing-price{
  font-weight:800;
  font-size:1.25rem;
}

/* Portfolio thumbnails */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem;
}
.portfolio-thumb{
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
  transition:transform .28s ease, box-shadow .28s ease;
}
.portfolio-thumb:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(2,6,23,0.12)}

/* Testimonials */
.testimonial{
  background:var(--surface);
  border-radius:10px;
  padding:1rem;
  box-shadow:var(--card-shadow);
}

/* CTA */
.cta-hero{
  display:flex;
  gap:1rem;
  align-items:center;
}

/* Gradient button with glow and animated hover */
.btn-gradient{
  background: linear-gradient(90deg, var(--grad-start), var(--grad-mid));
  color: #fff;
  border-radius: 10px;
  /* persistent base glow */
  box-shadow: 0 18px 60px rgba(245,158,11,0.20), 0 0 36px rgba(245,158,11,0.08) inset;
  transition: box-shadow .14s ease, transform .12s ease;
  position:relative;
  overflow:visible;
}
.btn-gradient:before{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0));mix-blend-mode:overlay;pointer-events:none;border-radius:10px;
}
.btn-gradient::after{ content:'';position:absolute;inset:-8px;background:radial-gradient(circle at 50% 50%, rgba(245,158,11,0.22), rgba(245,158,11,0) 40%);filter:blur(14px);opacity:1;transition:opacity .12s ease, transform .12s ease;pointer-events:none }
.btn-gradient::after{ content:'';position:absolute;inset:-8px;background:radial-gradient(circle at 50% 50%, rgba(245,158,11,0.22), rgba(245,158,11,0) 40%);filter:blur(14px);opacity:1;transition:opacity .12s ease, transform .12s ease;pointer-events:none }
.btn-gradient:hover{transform:translateY(-2px);box-shadow:0 34px 110px rgba(245,158,11,0.36), 0 0 60px rgba(245,158,11,0.22)}
.btn-gradient:focus{outline:none;box-shadow:0 24px 80px rgba(245,158,11,0.32), 0 0 40px rgba(245,158,11,0.18)}
.btn-gradient:hover::after{ transform: scale(1.08); filter:blur(18px); opacity:1 }

@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn-gradient.animated{
  background-size:200% 200%;
  animation:gradient-shift 4s ease infinite;
}

/* Gradient text for navbar link (no background) */
.nav-gradient-text{background:linear-gradient(90deg,var(--grad-start),var(--grad-mid));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Responsive tweaks */
@media (max-width:640px){
  .decorative-shape{display:none}
  .icon-circle{width:48px;height:48px;border-radius:10px;font-size:16px}
}

/* Small helpers */
.lead{color:var(--muted);font-size:1.02rem}
.small{font-size:0.92rem;color:var(--muted)}

/* Accessibility - focus outlines */
a:focus, button:focus{outline:3px solid rgba(0,0,0,0.06);outline-offset:3px}

/* Animated ticker (CodePen-style) */
@keyframes ticker-kf {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-108rem, 0, 0); }
}

.img-ticker {
  animation: ticker-kf 18s linear infinite;
}

/* Force ticker images to render at a 3:2 aspect ratio and be responsive.
   Keeps existing visual size (w-64 ~= 16rem) on desktop but scales down on small screens. */
.img-ticker img{
  width:20rem; /* bigger than w-64 to make images larger */
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 0.5rem; /* smaller horizontal gap between images */
}

@media (max-width:1024px){
  .img-ticker img{
    width:16rem; /* medium screens */
  }
}

@media (max-width:640px){
  .img-ticker img{
    width:13rem; /* slightly smaller on mobile */
    margin: 0 0.4rem;
  }
}

/* Pause on hover/focus */
.img-ticker:hover,
.img-ticker:focus-within{ animation-play-state: paused }

@media (max-width:768px){
  .decorative-shape{display:none}
}

/* Steps grid & cards */
.steps-grid{align-items:start}
.step-card{
  background:var(--surface);
  border-radius:14px;
  padding:1rem;
  box-shadow:var(--card-shadow);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.step-media{position:relative;border-radius:10px;overflow:hidden}
.step-image{width:100%;height:200px;object-fit:cover;display:block}
.step-badge{
  position:absolute;left:12px;top:12px;background:#000;color:#fff;border-radius:6px;padding:6px 10px;font-weight:700;font-size:0.95rem;box-shadow:0 6px 18px rgba(2,6,23,0.28)
}
.step-title{font-size:1.05rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px}
.step-duration{font-size:0.92rem;color:var(--muted);font-weight:600}
.step-desc{color:var(--muted);font-size:0.95rem;line-height:1.45}

@media (min-width:1024px){
  .step-image{height:220px}
}

/* ---------- Site-wide: force light-mode appearance with dark, sleek backgrounds ---------- */
/* Always use light component rules (so classes like dark:* have no effect) */
html{ color-scheme: light }

/* Base page background (dark, professional) */
body{ background: linear-gradient(180deg, var(--bg) 0%, #29043f 100%); color: var(--text) }

/* Section-level coordinated backgrounds */
#hero{ background: linear-gradient(135deg,#0c0430 0%, #1b0b3f 100%) }
#process{ background: linear-gradient(135deg,#0c0430 0%, #16072f 100%) }
#why{ background: linear-gradient(135deg,#0b0328 0%, #211038 100%) }
#work{ background: linear-gradient(135deg,#0d0430 0%, #24113f 100%) }
#pricing{ background: linear-gradient(135deg,#0c0430 0%, #16072f 100%) }
#faq{ background: linear-gradient(135deg,#0c0430 0%, #16072f 100%) }

/* Make typical card elements appear as light surfaces on the dark backgrounds */
.geometric-card, .step-card, .testimonial, .portfolio-thumb, .pricing-card, .img-ticker img{
  background: rgba(255,255,255,0.04) !important;
  color: #e6eef8 !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Neutralize specific dark: utility effects by overriding the resulting classes */
.dark\:bg-gray-900, .dark\:bg-gray-800, .dark\:text-white, .dark\:text-gray-400, .dark\:border-gray-700{
  background: transparent !important;
  color: inherit !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Color adjustments for normally dark-mode text/border utilities */
.text-gray-900{ color: #e6eef8 !important }
.text-gray-600{ color: rgba(230,238,248,0.72) !important }
.text-gray-500{ color: rgba(230,238,248,0.6) !important }
.bg-white, .bg-gray-50{ background: transparent !important }

/* Strong overrides inside lower sections to ensure consistent dark appearance */
#process, #process *,
#why, #why *,
#work, #work *,
#pricing, #pricing *,
#faq, #faq * {
  background: transparent !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Make table cells and rows within these sections use the surface */
#why table, #why thead, #why tbody, #why td, #why th {
  background: transparent !important;
  color: var(--text) !important;
}

/* Ensure the step badges remain high-contrast (black bg, white text) despite section-wide resets */
#process .step-badge,
#why .step-badge,
#work .step-badge,
#pricing .step-badge,
#faq .step-badge {
  background: #000 !important;
  color: #fff !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.28) !important;
}