/* Reference-inspired visual layer. Keeps existing behavior; only changes presentation. */
:root {
  --ref-bg: #07080c;
  --ref-bg-2: #0a0b10;
  --ref-panel: rgba(18, 20, 28, .72);
  --ref-panel-strong: rgba(16, 18, 25, .9);
  --ref-line: rgba(255, 255, 255, .09);
  --ref-line-strong: rgba(255, 255, 255, .16);
  --ref-blue: #7aa2ff;
  --ref-blue-2: #dbe6ff;
  --ref-node: #1e2230;
  --ref-node-deep: #141721;
  --ref-grid: rgba(255, 255, 255, .085);
}

body.theme-dark {
  background:
    radial-gradient(circle at 50% -14%, rgba(122, 162, 255, .18), transparent 31%),
    radial-gradient(circle at 88% 14%, rgba(255, 255, 255, .065), transparent 18%),
    linear-gradient(180deg, #0a0b10 0%, #07080c 42%, #06070a 100%) !important;
  background-attachment: fixed !important;
}

body.theme-dark .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  width: min(calc(100% - 32px), 1280px) !important;
  min-height: 64px;
  margin: 18px auto 0 !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 999px !important;
  background: rgba(8, 10, 14, .76) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .22);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

body.theme-dark .main {
  max-width: 1280px !important;
  padding: 20px 28px 64px !important;
}

body.theme-dark .panel,
body.theme-dark .card,
body.theme-dark .wf-left,
body.theme-dark .wf-toolbar,
body.theme-dark .wf-bottom-bar {
  background: var(--ref-panel) !important;
  border-color: var(--ref-line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#page-home {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 120px);
}

#page-home.reference-home::before,
#page-home.reference-home::after {
  content: '';
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(90px);
  z-index: 0;
  opacity: .34;
}

#page-home.reference-home::before {
  left: -130px;
  top: 100px;
  width: 340px;
  height: 340px;
  background: rgba(122, 162, 255, .24);
}

#page-home.reference-home::after {
  right: -130px;
  top: 360px;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, .1);
}

#homeStars {
  opacity: .11 !important;
  filter: blur(.2px);
  pointer-events: none;
}

#page-home > :not(#homeStars) {
  position: relative;
  z-index: 1;
}

#page-home .home-hero {
  max-width: 1040px;
  margin: 30px auto 0;
  padding: 58px 44px 24px;
  text-align: center;
  transition: transform .35s ease, opacity .35s ease;
}

#page-home .home-title {
  font-size: clamp(36px, 5.2vw, 70px) !important;
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 0%, #dbe6ff 76%, #9fbcf4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-wrap: balance;
  text-shadow: 0 0 40px rgba(122, 162, 255, .08);
}

#page-home .home-desc {
  max-width: 720px;
  margin: 16px auto 0;
  font-size: clamp(14px, 1.5vw, 18px);
  color: #9ca7bb !important;
  line-height: 1.75;
}

#page-home .home-search {
  width: min(920px, calc(100% - 24px)) !important;
  margin: 24px auto 18px !important;
  padding: 10px 10px 10px 14px !important;
  border: 1px solid var(--ref-line) !important;
  border-radius: 999px !important;
  background: rgba(18, 20, 28, .74) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

#page-home .home-search:focus-within {
  border-color: rgba(122, 162, 255, .45) !important;
  box-shadow: 0 24px 62px rgba(54, 93, 190, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translateY(-1px);
}

#page-home .home-search .input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 42px;
}

#page-home .home-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  perspective: 1200px;
  margin-top: 30px !important;
}

#page-home .home-card {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative !important;
  overflow: hidden !important;
  min-height: 132px;
  padding: 22px !important;
  border-radius: 24px !important;
  border: 1px solid var(--ref-line) !important;
  background: rgba(18, 20, 28, .72) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28) !important;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease, opacity .35s ease !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#page-home .home-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .24s ease;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .16), transparent 30%);
}

#page-home .home-card::after {
  content: '';
  position: absolute;
  left: -10%;
  top: -35%;
  width: 62%;
  height: 75%;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(122, 162, 255, .22);
  filter: blur(70px);
  opacity: .34;
  transition: opacity .3s ease;
}

#page-home .home-card:hover {
  border-color: rgba(255, 255, 255, .17) !important;
  background: rgba(22, 25, 35, .86) !important;
  box-shadow: 0 26px 58px rgba(0, 0, 0, .46) !important;
}

#page-home .home-card:hover::before,
#page-home .home-card:hover::after {
  opacity: 1;
}

#page-home .home-card > * {
  position: relative;
  z-index: 1;
}

#page-home .home-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .055) !important;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 24px rgba(0, 0, 0, .22);
}

#page-home .reveal-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

#page-home .reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Mouse click wave / spark effect */
.reference-click-layer { position: fixed; inset: 0; z-index: 10020; overflow: hidden; pointer-events: none; }
.reference-click-wave { position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid rgba(122, 162, 255, .95); border-radius: 50%; box-shadow: 0 0 18px rgba(122, 162, 255, .7), inset 0 0 10px rgba(255,255,255,.25); animation: refClickWave .58s cubic-bezier(.16, 1, .3, 1) forwards; }
.reference-click-spark { position: fixed; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: linear-gradient(135deg, #ffffff, #8ab4ff); box-shadow: 0 0 10px rgba(122, 162, 255, .9); animation: refClickSpark .52s ease-out forwards; }
@keyframes refClickWave { 0% { opacity: .95; transform: scale(.25); } 70% { opacity: .45; } 100% { opacity: 0; transform: scale(5.8); } }
@keyframes refClickSpark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.15); } }

/* Keep only text clarity safeguards. Original canvas layout remains untouched. */
#page-canvas .wf-viewport { will-change: auto !important; backface-visibility: visible !important; transform-style: flat !important; image-rendering: auto !important; }
#page-canvas .wf-node.wf-raster-refresh { transform: translateZ(0); backface-visibility: hidden; }

@media (max-width: 980px) { #page-home .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { body.theme-dark .topbar { border-radius: 22px !important; } #page-home .home-hero { padding: 38px 18px 16px; } #page-home .home-search { border-radius: 20px !important; } #page-home .home-cards { grid-template-columns: 1fr !important; } }
/* Night sky meteor canvas */
#homeMeteors { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .92; mix-blend-mode: screen; }
body.light #homeMeteors { display: none; }

/* Per-feature colors */
#page-home .home-card[data-go="imagegen"] { --card-accent: #60a5fa; --card-soft: rgba(96,165,250,.16); }
#page-home .home-card[data-go="canvas"] { --card-accent: #a78bfa; --card-soft: rgba(167,139,250,.16); }
#page-home .home-card[data-go="layers"] { --card-accent: #22d3ee; --card-soft: rgba(34,211,238,.15); }
#page-home .home-card[data-go="ecommerce"] { --card-accent: #f59e0b; --card-soft: rgba(245,158,11,.16); }
#page-home .home-card[data-go="3d"] { --card-accent: #34d399; --card-soft: rgba(52,211,153,.15); }
#page-home .home-card[data-go="vectorize"] { --card-accent: #f472b6; --card-soft: rgba(244,114,182,.15); }
#page-home .home-card[data-go="upscale"] { --card-accent: #fb923c; --card-soft: rgba(251,146,60,.16); }
#page-home .home-card[data-go="interactive"] { --card-accent: #8b5cf6; --card-soft: rgba(139,92,246,.16); }
#page-home .home-card[data-go="profile"] { --card-accent: #94a3b8; --card-soft: rgba(148,163,184,.16); }

/* Light theme home */
body.light #page-home.reference-home::before { background: rgba(96, 165, 250, .18); opacity: .28; }
body.light #page-home.reference-home::after { background: rgba(167, 139, 250, .14); opacity: .25; }
body.light #homeStars { opacity: .03 !important; }
body.light #page-home .home-title { background: linear-gradient(180deg, #0f172a 0%, #334155 82%, #64748b 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none; }
body.light #page-home .home-desc { color: #64748b !important; }
body.light #page-home .home-search { background: rgba(255, 255, 255, .88) !important; border-color: rgba(15, 23, 42, .1) !important; box-shadow: 0 18px 44px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255,255,255,.9); }
body.light #page-home .home-search .input { color: #0f172a !important; }
body.light #page-home .home-card { background: linear-gradient(145deg, rgba(255,255,255,.97), var(--card-soft)) !important; border-color: color-mix(in srgb, var(--card-accent) 24%, rgba(15,23,42,.08)) !important; color: #0f172a !important; box-shadow: 0 16px 34px color-mix(in srgb, var(--card-accent) 12%, rgba(15,23,42,.08)) !important; backdrop-filter: blur(14px); }
body.light #page-home .home-card:hover { border-color: color-mix(in srgb, var(--card-accent) 48%, rgba(15,23,42,.12)) !important; box-shadow: 0 22px 48px color-mix(in srgb, var(--card-accent) 18%, rgba(15,23,42,.12)) !important; }
body.light #page-home .home-card-icon { color: var(--card-accent); background: color-mix(in srgb, var(--card-soft) 82%, #fff) !important; border-color: color-mix(in srgb, var(--card-accent) 30%, transparent) !important; }
body.light #page-home .home-card-body h3 { color: #0f172a; }
body.light #page-home .home-card-body p,
body.light #page-home .home-card-arrow { color: #64748b !important; }
body.light #page-home .home-card::after { background: var(--card-accent); opacity: .18; }