/* Geometric layered background using CSS only */
body.landing-gradient {
  --grad1: radial-gradient(circle at 12% 22%, rgba(99,102,241,0.30), transparent 62%);
  --grad2: radial-gradient(circle at 88% 28%, rgba(236,72,153,0.32), transparent 68%);
  --grad3: radial-gradient(circle at 68% 82%, rgba(14,165,233,0.28), transparent 62%);
  --bg-base: linear-gradient(135deg,#f8fafc 0%,#ffffff 40%,#f1f5f9 100%);
  background: var(--bg-base), var(--grad1), var(--grad2), var(--grad3);
  background-blend-mode: normal,overlay,overlay,overlay;
  color: #111827;
}

/* Dark mode base */
body.landing-gradient.dark {
  --grad1: radial-gradient(circle at 14% 24%, rgba(129,140,248,0.28), transparent 65%);
  --grad2: radial-gradient(circle at 85% 30%, rgba(236,72,153,0.32), transparent 70%);
  --grad3: radial-gradient(circle at 70% 80%, rgba(56,189,248,0.25), transparent 65%);
  --bg-base: linear-gradient(135deg,#0f172a 0%,#111827 45%,#1e293b 100%);
  background: var(--bg-base), var(--grad1), var(--grad2), var(--grad3);
  color: #f1f5f9;
}

/* Toggle (dark mode) */
.color-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 60;
  display: flex; align-items: center; gap:.5rem;
  font-size: .75rem; font-weight:500; letter-spacing:.05em;
}
.color-toggle button { 
  background: rgba(255,255,255,0.7); border:1px solid rgba(148,163,184,0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: .4rem .75rem; border-radius: 9999px; cursor:pointer; font-weight:600;
  font-size:.65rem; text-transform:uppercase; line-height:1; letter-spacing:.08em;
  transition: background .25s, color .25s, border-color .25s;
}
body.dark .color-toggle button {background: rgba(30,41,59,0.6); color:#e2e8f0; border-color: rgba(71,85,105,0.6);} 
.color-toggle button:hover { background: rgba(255,255,255,0.9);} 
body.dark .color-toggle button:hover { background: rgba(51,65,85,0.9);} 

/* Abstract polygon shards using pseudo element */
body.landing-gradient::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:-1;
}

/* Decorative svg overlay */
/* The SVG polygons layer sits behind header/main (z-index 0). */
.geo-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index:0;
}

.geo-shape { stroke-width: 2; opacity:.32; animation: float 22s linear infinite; }
.geo-fill { opacity:.28; mix-blend-mode:overlay; }
body.dark .geo-fill { mix-blend-mode:screen; opacity:.24; }

/* Light mode polygon gradient overrides (applied inline via defs on Index), ensure subtlety */
body:not(.dark) .geo-fill { filter: saturate(1.2) brightness(1.05); }
body.dark .geo-shape { opacity:.33; }

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-25px) rotate(6deg);} 
  100% { transform: translateY(0) rotate(0deg);} 
}

/* Glass cards */
.feature-card {
  background: linear-gradient(145deg,rgba(255,255,255,0.85),rgba(248,250,252,0.65));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 14px;
  box-shadow: 0 6px 22px -6px rgba(15,23,42,0.15),0 2px 6px rgba(15,23,42,0.08);
  transition: transform .28s cubic-bezier(.4,.2,.2,1), box-shadow .28s;
}
.feature-card, .feature-card p, .feature-card li, .feature-card small, .feature-card span { color: var(--color-text-light); }
.feature-card:hover { transform: translateY(-6px); box-shadow:0 10px 26px -6px rgba(15,23,42,.18),0 4px 10px rgba(15,23,42,.12); }
body.dark .feature-card { background: linear-gradient(145deg,rgba(30,41,59,0.85),rgba(15,23,42,0.65)); border-color: rgba(71,85,105,0.6); box-shadow:0 6px 24px -6px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.4);} 
body.dark .feature-card, body.dark .feature-card p, body.dark .feature-card li, body.dark .feature-card small, body.dark .feature-card span { color: var(--color-text-dark); }
body.dark .feature-card:hover { box-shadow:0 10px 30px -6px rgba(0,0,0,0.55); }
.feature-card h1, .feature-card h2, .feature-card h3, .feature-card h4, .feature-card h5, .feature-card h6 { color: var(--color-text-light); }
body.dark .feature-card h1, body.dark .feature-card h2, body.dark .feature-card h3, body.dark .feature-card h4, body.dark .feature-card h5, body.dark .feature-card h6 { color: var(--color-text-dark); }

/* Utility to disable hover lift when we don’t want motion on cards (e.g., auth forms) */
.no-hover-lift:hover { transform:none !important; box-shadow: inherit !important; }

.hero-gradient-text { 
  /* Fallback solid color (when background-clip:text not supported) */
  color: var(--color-text-light);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.dark .hero-gradient-text { color: var(--color-text-dark); }

/* Robust gradient text with proper clipping in supported browsers */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero-gradient-text {
  background: linear-gradient(90deg,#6366f1,#ec4899 55%,#0ea5e9) !important;
  -webkit-background-clip: text !important; background-clip:text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  display: inline; /* Avoid full-width block background */
  }
  body.dark .hero-gradient-text {
    background: linear-gradient(90deg,#818cf8,#f472b6 55%,#38bdf8) !important;
  }
}

/* Hard fallback for dark mode to avoid colored line boxes in engines with buggy clipping */
body.dark .hero-gradient-text {
  background: none !important;
  -webkit-text-fill-color: inherit !important;
  color: var(--color-text-dark) !important;
  text-shadow: none !important;
}

/* Selection styling remains readable */
.hero-gradient-text::selection { background:#6366f1; color:#fff; }

.btn { display:inline-flex; align-items:center; justify-content:center; font-weight:600; border-radius:10px; line-height:1.2; position:relative; overflow:hidden; }
.btn:focus-visible { outline:2px solid #6366f1; outline-offset:2px; }
.btn-primary { background:linear-gradient(92deg,#2563eb,#6366f1 60%,#0ea5e9); color:#fff; padding:.95rem 2.1rem; box-shadow:0 10px 22px -8px rgba(37,99,235,.55); }
.btn-primary:hover { filter:brightness(1.05); box-shadow:0 14px 30px -8px rgba(37,99,235,.65); }
.btn-outline { background:rgba(255,255,255,.75); color:#1e293b; border:1px solid #cbd5e1; padding:.95rem 2rem; }
.btn-outline:hover { background:#fff; }
body.dark .btn-outline { background:rgba(30,41,59,.6); color:#e2e8f0; border-color:#475569; }
body.dark .btn-outline:hover { background:rgba(51,65,85,.75); }
.cta-primary { box-shadow:0 10px 22px -6px rgba(79,70,229,.55); }
.cta-primary:hover { box-shadow:0 16px 32px -8px rgba(79,70,229,.6); }

/* Parallax attributes */
[data-parallax] { will-change: transform; }

/* Dark mode global links */
body.dark a { color:#93c5fd; }
body.dark a:hover { color:#bfdbfe; }

/* Generic surfaces for app pages (applies when not on landing) */
body.theme-surface:not(.landing-gradient) { background:linear-gradient(135deg,#f8fafc 0%,#ffffff 60%,#f1f5f9 100%); }
body.theme-surface.dark:not(.landing-gradient) { background:linear-gradient(135deg,#0f172a 0%,#111827 55%,#1e293b 100%); color:#f1f5f9; }


/* Responsive tweaks */
@media (max-width: 760px) {
  .hero-layout { text-align:center; }
}