/* ============================================================
   QuantX Homepage Styles
   Only included by index.html
   ============================================================ */

/* ---- Body offset for fixed header ---- */
body.home-page {
  padding-top: var(--header-height);
  background-color: transparent;
  --quantx-ray-energy: .82;
  --quantx-ray-glow: .14;
  --quantx-ray-sweep-y: 18vh;
  --quantx-mark-light: 1;
  --quantx-word-light: .94;
}
.home-page__rays { position:fixed; z-index:-1; inset:0; overflow:hidden; pointer-events:none; background:var(--color-surface); }
.home-page__rays canvas { display:block; width:100%; height:100%; }

/* ---- Section container ---- */
.section-container {
  max-width: var(--content-max-width, 68.75rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .section-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ---- Event hero ---- */
.home-event { position:relative; isolation:isolate; overflow:hidden; min-height:calc(100svh - var(--header-height)); padding:0 1.5rem 5rem; }
.home-event__light-sweep { position:absolute; z-index:0; top:calc(var(--quantx-ray-sweep-y) - 9rem); right:-7rem; width:30rem; height:18rem; pointer-events:none; background:radial-gradient(ellipse at 78% 20%,rgba(218,232,255,.30) 0%,rgba(135,180,255,.12) 34%,rgba(120,151,224,.035) 55%,transparent 73%); filter:blur(16px); mix-blend-mode:screen; opacity:var(--quantx-ray-glow); transition:top 60ms linear,opacity 100ms linear; }
.home-event::before {
  position:absolute;
  z-index:0;
  inset:0;
  background:
    radial-gradient(ellipse 48% 55% at 109% -8%, rgba(146,193,255,.16), transparent 68%),
    linear-gradient(143deg, transparent 0 50%, rgba(130,169,255,.035) 51.5%, transparent 55%),
    linear-gradient(151deg, transparent 0 49%, rgba(245,184,121,.045) 51%, transparent 53.5%),
    linear-gradient(159deg, transparent 0 45%, rgba(141,176,255,.035) 47%, transparent 49.5%),
    linear-gradient(167deg, transparent 0 42%, rgba(237,206,164,.025) 43.5%, transparent 46%);
  content:"";
  display:none;
}
.home-event__inner { position:relative; z-index:1; max-width:var(--content-max-width,68.75rem); margin:0 auto; text-align:center; }
.home-event__animation { position:relative; display:grid; height:clamp(22.75rem,48vh,31rem); overflow:visible; place-items:center; isolation:isolate; }
.home-event__animation::before { position:absolute; top:50%; left:50%; z-index:-1; width:min(29rem,66vw); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(107,142,255,.11) 0%,rgba(77,104,195,.038) 43%,transparent 72%); content:""; filter:blur(10px); }
.home-event__mark-wrap { position:absolute; top:6.5rem; left:50%; width:clamp(14.5rem,23vw,20rem); aspect-ratio:1; transform:translateX(-50%); }
.home-event__mark { position:relative; z-index:1; width:100%; height:100%; overflow:visible; shape-rendering:geometricPrecision; transform:translateZ(0); filter:saturate(1.01) brightness(var(--quantx-mark-light,1)) drop-shadow(0 .7rem 1.1rem rgb(104 140 224 / calc(var(--quantx-ray-glow) * .72))); transition:filter 160ms linear; will-change:filter; }
.quantx-mark-glass { fill:url("#quantx-mark-glass-dark"); }
.home-event__iridescence { position:absolute; z-index:2; inset:0; display:block; width:100%; height:100%; opacity:0; filter:saturate(.42) brightness(.96) drop-shadow(0 .8rem 1.5rem rgba(112,144,228,.3)); transition:opacity .18s ease-out; }
[data-theme="light"] .quantx-mark-glass { fill:url("#quantx-mark-glass-light"); }
[data-theme="light"] .home-event__iridescence { filter:brightness(.56) contrast(1.1) saturate(.35) drop-shadow(0 .65rem 1.25rem rgba(43,73,146,.2)); }
.home-event__copy h1 { margin:0; color:var(--color-text-secondary); font-size:clamp(3.5rem,7.2vw,5.75rem); font-weight:650; letter-spacing:-.04em; line-height:.9; }
.home-event__shiny-text { --wordmark-dim:#9aa6ba; display:inline-block; color:var(--wordmark-dim); -webkit-text-fill-color:currentColor; filter:brightness(var(--quantx-word-light,.82)); text-shadow:0 0 calc(.15rem + var(--quantx-ray-glow) * .52rem) rgb(205 221 255 / calc(var(--quantx-ray-glow) * .38)); will-change:filter,text-shadow; transition:filter 160ms linear,text-shadow 160ms linear; }
.home-event__description { max-width:42rem; margin:1.75rem auto 0; color:var(--color-text); font-size:1.125rem; line-height:1.65; text-wrap:pretty; }
.home-event__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:2rem; }
.home-event .home-event__cta { width:auto; min-width:12rem; height:3.25rem; padding-inline:1.5rem; font-size:1rem; }
.home-event .btn-primary { background:var(--color-text-emphasis); color:var(--color-surface); }
.home-event .btn-primary:hover { background:var(--color-text); }
.home-event .btn-secondary { border:1px solid var(--color-border); background:transparent; color:var(--color-text-emphasis); }
.home-event .btn-secondary:hover { background:var(--color-surface-secondary); }

[data-theme="dark"] .home-event__animation::before { background:radial-gradient(circle,rgba(88,123,255,.13) 0%,rgba(65,91,189,.045) 43%,transparent 72%); }
[data-theme="light"] .home-page__rays { mix-blend-mode:multiply; }
[data-theme="light"] .home-event__light-sweep { background:radial-gradient(ellipse at 78% 20%,rgba(52,79,129,.18) 0%,rgba(99,140,202,.075) 36%,transparent 72%); mix-blend-mode:multiply; }
[data-theme="dark"] .home-event__copy h1 { color:rgba(230,232,240,.38); }
[data-theme="dark"] .home-event__shiny-text { --wordmark-dim:#9aa6ba; }
[data-theme="light"] .home-event__shiny-text { --wordmark-dim:#263653; filter:brightness(calc(.83 + var(--quantx-ray-glow) * .45)); text-shadow:0 0 calc(.12rem + var(--quantx-ray-glow) * .32rem) rgb(59 93 154 / calc(var(--quantx-ray-glow) * .22)); }

/* Direct adaptation of the supplied Uiverse button: one label only, a quiet
   inset highlight, and per-letter breathing. The source symbol is omitted. */
.home-event__actions { gap:.875rem; }
.home-event .home-event__cta {
  --button-ink:#f6f8ff;
  --button-paper:rgba(8,9,12,.76);
  --button-highlight:217deg;
  position:relative;
  display:inline-flex;
  min-width:12.75rem;
  height:3.5rem;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:var(--button-paper);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.20),inset 0 2px 2px rgba(255,255,255,.15),inset 0 4px 4px rgba(255,255,255,.07),inset 0 8px 8px rgba(255,255,255,.035),0 1px 1px rgba(0,0,0,.12);
  color:var(--button-ink);
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:box-shadow .4s ease,border-color .4s ease,background-color .4s ease,transform .2s ease;
}
.home-event .home-event__cta::before { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(0deg,rgba(255,255,255,.24),hsl(var(--button-highlight) 82% 72% / .32) 8%,transparent 34%); content:""; opacity:0; pointer-events:none; transition:opacity .4s ease; }
.home-event .home-event__cta::after { position:absolute; right:12%; bottom:-.22rem; left:12%; z-index:0; height:.7rem; border-radius:999px; background:linear-gradient(90deg,transparent,hsl(var(--button-highlight) 92% 74% / .58),rgba(222,196,255,.5),transparent); content:""; filter:blur(.34rem); opacity:0; pointer-events:none; transform:translateY(.28rem); transition:opacity .32s ease,transform .32s ease; }
.home-event .home-event__cta > span { position:relative; z-index:1; display:inline-flex; }
.home-event .home-event__cta > span .btn-letter { display:inline-block; min-width:.08em; color:color-mix(in srgb,currentColor 65%,transparent); animation:home-button-letter-breathe 2s ease-in-out infinite; animation-delay:calc(var(--letter-index,0) * 80ms); transition:color .4s ease,text-shadow .4s ease,filter .4s ease,transform .4s ease; }
.home-event .home-event__cta:hover,.home-event .home-event__cta.is-specular-active { border-color:hsl(var(--button-highlight) 100% 80% / .38); box-shadow:inset 0 -8px 12px -6px rgba(255,255,255,.52),inset 0 -16px 16px -8px hsl(var(--button-highlight) 100% 70% / .2),inset 0 2px 2px rgba(255,255,255,.17),0 1px 1px rgba(0,0,0,.12); transform:translateY(-1px); }
.home-event .home-event__cta:hover::before,.home-event .home-event__cta.is-specular-active::before { opacity:.58; }
.home-event .home-event__cta:hover::after,.home-event .home-event__cta.is-specular-active::after,.home-event .home-event__cta:focus-visible::after { opacity:.92; transform:translateY(0); }
.home-event .home-event__cta:hover .btn-letter,.home-event .home-event__cta.is-specular-active .btn-letter { color:currentColor; text-shadow:0 0 3px hsl(var(--button-highlight) 100% 78% / .58); }
.home-event .home-event__cta:focus-visible { outline:0; border-color:hsl(var(--button-highlight) 100% 82% / .64); }
.home-event .home-event__cta:focus-visible::before { opacity:.66; }
.home-event .home-event__cta:focus-visible .btn-letter { animation:home-button-focus-letter .9s ease-in-out both,home-button-letter-breathe 1.2s ease-in-out infinite 1s; }
.home-event .home-event__cta:active { transform:scale(.985); }
.home-event .home-event__cta--primary { --button-ink:#f4f6fb; --button-paper:rgba(0,0,0,.5); --button-highlight:216deg; border-color:rgba(255,255,255,.34); }
.home-event .home-event__cta--secondary { --button-ink:#f4f6fb; --button-paper:rgba(0,0,0,.5); }
[data-theme="light"] .home-event .home-event__cta--primary { --button-ink:#111a2a; --button-paper:rgba(255,255,255,.62); border-color:rgba(13,24,43,.22); }
[data-theme="light"] .home-event .home-event__cta--secondary { --button-ink:#111a2a; --button-paper:rgba(255,255,255,.62); border-color:rgba(13,24,43,.22); }
@keyframes home-button-letter-breathe { 50% { color:currentColor; text-shadow:0 0 3px color-mix(in srgb,currentColor 46%,transparent); } }
@keyframes home-button-focus-letter { 50% { filter:blur(5px) brightness(1.3); text-shadow:-18px 6px 12px hsl(var(--button-highlight) 100% 72% / .66); transform:scale(1.35); } }
@media (max-width:767px) { .home-event { padding:0 1rem 3.5rem; }.home-event__animation { height:clamp(15rem,58vw,20rem); }.home-event__mark-wrap { top:clamp(3.2rem,12vw,5rem); width:clamp(10rem,42vw,14rem); }.home-event__copy h1 { font-size:3.5rem; }.home-event__description { font-size:1rem; }.home-event .home-event__cta { width:min(100%,14rem); } }
@media (prefers-reduced-motion:reduce) { .home-event__shiny-text { animation:none; } .home-event .home-event__cta, .home-event .home-event__cta::before, .home-event .home-event__cta::after, .home-event .home-event__cta .btn-letter { animation:none; transition:none; } }

/* ---- Section title ---- */
.section-title {
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--color-text-emphasis);
}

/* ---- Primary button ---- */
.btn-primary {
  width: 13.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--color-background-primary-solid);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

[data-theme="dark"] .btn-primary {
  color: var(--gray-1000);
}

.btn-primary:hover {
  background: var(--color-background-primary-solid-hover);
}

/* Icon hover animation: primary moves down */
.btn-primary .btn-icon {
  transition: transform 0.2s ease-out;
}

.btn-primary:hover .btn-icon {
  transform: translateY(2px);
}

/* ---- Secondary button ---- */
.btn-secondary {
  height: 3.5rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-background-primary-soft-alpha);
  color: var(--color-text-emphasis);
  font-size: 1.125rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.btn-secondary:hover {
  background: var(--color-background-primary-soft);
}

/* Icon hover animation: secondary moves right */
.btn-secondary .btn-icon {
  transition: transform 0.2s ease-out;
}

.btn-secondary:hover .btn-icon {
  transform: translateX(2px);
}

/* The paired hero actions should read as one deliberate choice set. */
.hero-cta { width: 13.5rem; padding-inline: 0; }
.hero-cta:hover .btn-icon { transform: translateX(2px); }
.hero-cta--start .btn-icon { display: none; }
.hero-cta--start::after { content: "→"; font-size: 1.35rem; line-height: 1; }

/* The AI preview follows the same 68.75rem content frame as the hero and
   uses a compact complete workspace when reached from the quick-start CTA. */
.home-ai-section { margin-top:3rem; padding:0 1.5rem 4rem; }
.home-content-frame { width:100%; max-width:var(--content-max-width,68.75rem); margin-inline:auto; }
#ai-surface { scroll-margin-top: var(--header-height); }
#ai-surface:target .ai-surface-wrap {
  height:min(41.25rem, calc(100svh - var(--header-height) - 2rem));
  min-height:min(31.25rem, calc(100svh - var(--header-height) - 2rem));
  max-height:41.25rem;
}

/* ---- Feature card ---- */
.feature-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
  background: var(--color-surface-secondary);
}

/* ---- Use case cards ---- */
.usecase-card {
  min-height: 12.5rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic),
    border-color var(--transition-duration-basic) var(--transition-ease-basic);
}
.usecase-card:hover { background: color-mix(in srgb, var(--color-surface-secondary) 82%, transparent); border-color: var(--color-border); }
.usecase-card h3 { color: var(--color-text-emphasis); font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.usecase-card p { margin-top: .5rem; color: var(--color-text-secondary); font-size: .875rem; line-height: 1.65; }
.usecase-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tag-pill { display: inline-flex; align-items: center; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-full); padding: .25rem .875rem; color: var(--color-text-secondary); font-size: .75rem; line-height: 1.5; }
[data-theme="light"] .usecase-card { background: color-mix(in srgb, #fff 74%, transparent); }

/* ---- What's new card ---- */
.whatsnew-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
  background: var(--color-surface);
}

/* ---- Footer link ---- */
.footer-link {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-duration-basic) var(--transition-ease-basic);
  display: inline-block;
}

.footer-link:hover {
  color: var(--color-text-emphasis);
}

/* ---- App preview inner ---- */
.app-preview-inner {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  aspect-ratio: 16 / 10;
  position: relative;
  width: 100%;
}

/* ---- Chat bubble (feature mock) ---- */
.chat-bubble-user {
  background: var(--gray-150);
  color: var(--gray-900);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  max-width: 85%;
  align-self: flex-end;
}

.chat-bubble-ai {
  background: var(--color-surface);
  color: var(--gray-800);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  max-width: 85%;
  align-self: flex-start;
  border: 1px solid var(--color-border-subtle);
}

/* ---- Bullet list ---- */
.bullet-list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.75;
}

.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--gray-900);
}

[data-theme="dark"] .bullet-list li::before {
  background: var(--gray-100);
}


/* Footer logo theme swap */
.footer-logo-dark {
  display: none;
}
[data-theme="dark"] .footer-logo-light {
  display: none;
}
[data-theme="dark"] .footer-logo-dark {
  display: block;
}