/* QuantaFinder — "cinema" theme. Loaded last. A dark, film-like page: aurora light behind
   everything, a faint grain, glass panels, letterboxed full-width hero, scenes that fade in.
   The laser machine, the logo and the navigation stay exactly as they are. */

:root {
  --paper: #07080F;
  --white: #12131F;          /* surfaces: cards, panels, inputs */
  --stage: #0F1019;
  --panel: #161828;
  --ink: #F2F3FA;
  --ink-2: #1A1C2E;
  --ink-3: #23263B;
  --steel: #A6AAC4;
  --steel-light: #6F7390;
  --rule: #22243A;
  --rule-strong: #343752;
  --photon: #2F7BFF;
  --photon-hover: #4A8DFF;
  --photon-tint: #14213D;
  --photon-ink: #8FB8FF;
  --ember: #FF9F0A;
  --ember-tint: #2B2112;
  --ok: #4ED39A;
  --ok-tint: #10261C;
  --wait: #FFC46B;
  --wait-tint: #2A2210;
  --danger: #FF6B6B;
  --danger-tint: #2C1416;
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); position: relative; counter-reset: scene; }

/* aurora light, grain and vignette behind everything */
body::before { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 15%, rgba(91,61,245,.28), transparent 60%),
    radial-gradient(35% 30% at 80% 25%, rgba(0,229,255,.16), transparent 60%),
    radial-gradient(45% 40% at 60% 85%, rgba(255,106,43,.12), transparent 60%);
  filter: blur(40px); animation: aurora 26s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-4%, 3%, 0) rotate(2deg); } 100% { transform: translate3d(3%, -3%, 0) rotate(-2deg); } }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { background-position: 0 0; } 20% { background-position: 40px -30px; } 40% { background-position: -30px 50px; } 60% { background-position: 60px 20px; } 80% { background-position: -50px -40px; } 100% { background-position: 0 0; } }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%); }
.site-header, .sale-bar, main, .site-footer, .flashes, .announcement { position: relative; z-index: 2; }
.scroll-line { position: fixed; left: 0; top: 0; height: 2px; width: 0; z-index: 50; background: linear-gradient(90deg, #5B3DF5, #00E5FF); box-shadow: 0 0 12px rgba(0,229,255,.8); transition: width .1s linear; }

/* type */
h1, h2, .display { letter-spacing: -.03em; }
.section-head h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.section-head h2::before { content: "Scene " counter(scene, decimal-leading-zero); display: block; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .24em; text-transform: uppercase; color: #9FE9FF; margin-bottom: 10px; }
.section-tight { counter-increment: scene; }
.section-tight::before { background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,255,255,.12) 8%, rgba(255,255,255,.12) 92%, rgba(0,0,0,0)); }
.section-head > a { color: #9FE9FF; }
a { color: var(--photon-ink); }

/* header: glass over the aurora */
.site-header { background: rgba(7,8,15,.62); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.07); }
.header-main, .dept-bar { background: transparent; }
.search { background: rgba(255,255,255,.08); }
.search:focus-within { background: #12131F; }
.search:focus-within .search-q, .search:focus-within .search-dept, .search:focus-within .search-go { color: #fff; }
.search-dept option { color: #111; }
.sale-bar { background: rgba(255,255,255,.04); border-bottom-color: rgba(255,255,255,.06); color: var(--steel); }

/* hero: full width, letterboxed, bigger title that resolves in */
.hero-lab { padding: 0; }
.hero-lab .wrap { max-width: none; padding: 0; }
.lab { border-radius: 0; min-height: min(84vh, 860px); padding: clamp(36px, 6vw, 88px) clamp(20px, 6vw, 96px) clamp(28px, 4vw, 56px); background: transparent; gap: clamp(24px, 4vw, 64px); }
.lab::before { background: radial-gradient(55% 60% at 68% 55%, rgba(91,61,245,.26), transparent 70%), radial-gradient(30% 40% at 15% 20%, rgba(0,229,255,.12), transparent 70%); }
.lab::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: #000; box-shadow: 0 calc(min(84vh, 860px) - 14px) 0 0 #000; pointer-events: none; }
.lab-eyebrow { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .26em; font-size: 11px; }
.lab-eyebrow .typed { color: #fff; min-width: 9ch; display: inline-block; }
.lab-eyebrow .typed::after { content: "▍"; color: #9FE9FF; animation: caret 1s steps(2) infinite; }
@keyframes caret { to { opacity: 0; } }
.lab-copy h1 { font-size: clamp(2.8rem, 1.6rem + 4.2vw, 5.6rem); max-width: 10ch; }
.cine-enter .lab-copy h1 { animation: engrave 7s ease-in-out infinite, title-in 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes title-in { from { opacity: 0; letter-spacing: .12em; filter: blur(8px); } to { opacity: 1; letter-spacing: -.03em; filter: blur(0); } }
.lab-copy > p { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); max-width: 40ch; }
.cine-enter .lab-copy > p { animation: fade-up 1.2s .5s ease both; }
.cine-enter .lab-copy .actions, .cine-enter .lab-steps { animation: fade-up 1.2s .8s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lab-copy .btn-outline-light { backdrop-filter: blur(8px); background: rgba(255,255,255,.06); }
.lab-made { opacity: .5; }
.lab-made:hover, .lab-made.is-now, .lab-made.is-fresh { opacity: 1; }

/* surfaces as glass */
.card-media { background: linear-gradient(160deg, #15172A, #0E0F1A); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.card-media.tilt:hover { box-shadow: 0 34px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(0,229,255,.35), 0 0 40px -10px rgba(0,229,255,.35); }
.card-title a { color: var(--ink); }
.card-title a:hover { color: #9FE9FF; }
.card-price { color: var(--steel); }
.card-price .price { color: #fff; }
.dept-tile figure { background: linear-gradient(160deg, #15172A, #0E0F1A); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.dept-tile span { color: var(--ink); }
.dept-tile:hover span { color: #9FE9FF; }
.deals-tile figure { background: linear-gradient(135deg, #5B3DF5, #00A6C8); }
.demo { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.demo-choice { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: var(--ink); }
.demo-choice[aria-pressed="true"] { background: #fff; color: #0A0B14; border-color: #fff; }
.demo-stage { background: #15172A; }
.biz-band { background: linear-gradient(135deg, #15172A, #0B0C16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cta-band { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cta-band .btn-secondary, .btn-secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #fff; }
.cta-band .btn-secondary:hover, .btn-secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.btn, .btn-light { color: #fff; }
.btn-ink, .btn-buy-now { background: #fff; border-color: #fff; color: #0A0B14; }
.btn-ink:hover, .btn-buy-now:hover { background: #E8E8ED; border-color: #E8E8ED; color: #0A0B14; }
.btn-google { background: #fff; color: #0A0B14; }
.btn-google:hover { background: #fff; color: #0A0B14; }
.panel, .form-card, .co-section, .progress, .summary, .buybox, .customize, .rail-section, .empty-results, .filters-panel, .order-card, .mega-side, .care-reply { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border: 0; }
.stage { background: linear-gradient(160deg, #15172A, #0E0F1A); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.thumb { background: #15172A; }
.thumb-label { color: var(--steel); }
.pdp-badges li { background: rgba(255,255,255,.08); color: var(--ink); }
.size-btn > span, .pill > span { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--ink); }
.size-btn input:checked + span { background: rgba(255,255,255,.1); border-color: #9FE9FF; box-shadow: inset 0 0 0 1px #9FE9FF; }
.pill input:checked + span { background: #fff; color: #0A0B14; border-color: #fff; }
.bulk table, .specs { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.bulk thead th { background: rgba(255,255,255,.04); }
.bulk tr.is-current td { background: rgba(47,123,255,.18); }
.buybox .biz-link { background: rgba(255,255,255,.06); color: var(--ink); }
.stepper { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.stepper button { background: rgba(255,255,255,.08); color: #fff; }
.stepper input { background: transparent; color: #fff; }
.customize input[type="text"], .customize textarea, .form-card input, .form-card select, .form-card textarea, .panel input, .panel select, .panel textarea, .co-section input, .co-section select, .co-section textarea, .input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], input[type="search"], select, textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2F3FA' stroke-width='2'/%3E%3C/svg%3E"); }
input::placeholder, textarea::placeholder { color: #6F7390; }
.upload-row, .dropzone { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.2); }
.upload-thumb { background: #15172A; border-color: rgba(255,255,255,.1); }
.radio-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.radio-card:has(input:checked) { background: var(--photon-tint); }
.or-rule span { background: #0E0F1A; }
.active-filters a, .filter-bar a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--ink); }
.filter-bar a[aria-current="true"] { background: #fff; color: #0A0B14; border-color: #fff; }
.filter-group a { color: var(--ink); }
.filters-head { background: #0E0F1A; }
.acct-panel, .mega, .drawer-panel { background: #12131F; color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.6); border-color: rgba(255,255,255,.1); }
.acct-panel a:not(.btn):hover, .acct-panel button:hover, .drawer-panel li a:hover { background: rgba(255,255,255,.06); }
.drawer-head { background: #0E0F1A; border-bottom-color: rgba(255,255,255,.08); }
.mega-col h2 a, .drawer-panel li a { color: var(--ink); }
.mega-col li a { color: var(--steel); }
.mosaic-label { background: rgba(18,19,31,.9); color: var(--ink); }
.badge-muted { background: rgba(255,255,255,.08); color: var(--steel); }
.notice-success { background: var(--ok-tint); border-color: #1F4D37; color: #BFF2DA; }
.notice-error { background: var(--danger-tint); border-color: #5A2328; color: #FFC7C7; }
.notice-info { background: var(--photon-tint); border-color: #28407A; color: #C9DBFF; }
.notice-wait { background: var(--wait-tint); border-color: #5A4A1A; color: #FFE2B0; }
.data-table th, .data-table td, .review { border-color: rgba(255,255,255,.08); }
.timeline li::after { background: rgba(255,255,255,.14); }
.progress li::before { background: #12131F; border-color: rgba(255,255,255,.25); }
.progress li::after { background: rgba(255,255,255,.14); }
.crumbs, .crumbs a { color: var(--steel); }
.stars { color: rgba(255,255,255,.18); }

/* footer */
.site-footer { background: #05060B; border-top-color: rgba(255,255,255,.06); color: var(--steel); }
.footer-trust { border-bottom-color: rgba(255,255,255,.08); }
.trust-row strong, .footer-grid h2 { color: #fff; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(255,255,255,.08); }

/* the pointer light and section laser lines read brighter on dark */
.spot { background: radial-gradient(circle, rgba(0,229,255,.16) 0%, rgba(91,61,245,.14) 35%, rgba(0,0,0,0) 70%); mix-blend-mode: screen; }
.reveal { transform: translateY(26px) scale(.985); }
.reveal.is-in { transform: none; }

@media (max-width: 900px) { .lab { min-height: 0; } .lab::after { display: none; } body::before { filter: blur(30px); } }
@media (prefers-reduced-motion: reduce) { body::before, .grain, .lab-copy h1, .lab-copy > p, .lab-copy .actions, .lab-steps, .lab-eyebrow .typed::after { animation: none !important; } }
@media print { body::before, .grain, .vignette, .scroll-line { display: none !important; } }

/* after the first look: keep the whole machine on screen; no entrance animations on phones */
@media (min-width: 1100px) { .lab { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); } .lab-bed { left: 50%; } }
@media (max-width: 900px) {
  .lab-copy h1 { animation: engrave 7s ease-in-out infinite; }
  .lab-copy > p, .lab-copy .actions, .lab-steps { animation: none; opacity: 1; transform: none; }
}