/* Algovision page upgrade layer: hero media, featured catalog, spotlight surfaces,
   bento benefits, timeline steps, motion. Loaded after styles.css. */

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.metrics strong, .price, .stat strong, .stat-grid strong, td, .chart-readout, .evaluation-section td { font-variant-numeric: tabular-nums; }

/* Film grain over everything (very subtle) */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Pressed feedback + smoother buttons */
.button, .card-button, .btn-sm, .acct-cta, .discord { transition: transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.button:active, .card-button:active, .btn-sm:active, .acct-cta:active { transform: translateY(1px) scale(.985); }

/* ---------------------------------------------------------------- Hero media */
.has-media { position: relative; isolation: isolate; min-height: 540px; margin-top: 18px; display: flex; flex-direction: column; justify-content: center; }
.hero-media { position: absolute; z-index: -1; top: 0; bottom: 0; right: -48px; width: min(66%, 960px); overflow: hidden; border-radius: 22px 0 0 22px; }
.hero-media { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; display: block; }
.hero-media:after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--bg) 0%, rgba(9,10,13,.82) 22%, rgba(9,10,13,.18) 58%, rgba(9,10,13,0) 100%),
  linear-gradient(0deg, var(--bg) 0%, rgba(9,10,13,0) 30%),
  linear-gradient(180deg, var(--bg) 0%, rgba(9,10,13,0) 18%); }
.has-media > *:not(.hero-media) { max-width: 640px; }
.hero-stats { display: flex; gap: 34px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats div { border-left: 1px solid #3a3238; padding-left: 16px; }
.hero-stats strong { display: block; font-family: var(--display); font-size: 30px; letter-spacing: -.03em; font-weight: 650; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: 12.5px; color: #9d9ea9; }

/* ---------------------------------------------------------------- Spotlight surfaces */
.spot { position: relative; isolation: isolate; }
.spot:before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(196,138,144,.16), transparent 60%); }
.spot:hover:before { opacity: 1; }
.spot:after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(214,170,176,.75), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.spot:hover:after { opacity: 1; }

/* ---------------------------------------------------------------- Catalog */
.catalog.upgraded { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.catalog.upgraded > .algo-card { grid-column: span 2; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease; }
.catalog.upgraded > .algo-card.wide { grid-column: span 3; }
.catalog.upgraded > .algo-card:hover { transform: translateY(-3px); }
.catalog.upgraded > .algo-card .card-bottom { margin-top: auto; }
.algo-card.featured { grid-column: 1 / -1 !important; position: relative; padding: 34px calc(50% + 40px) 30px 36px;
  background: radial-gradient(ellipse at 85% 0%, rgba(167,212,189,.09), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(196,138,144,.08), transparent 55%), #111217;
  border-color: #3b3439; }
.algo-card.featured > .spark, .algo-card.featured > svg { position: absolute; top: 34px; right: 36px; width: calc(50% - 36px); height: calc(100% - 96px); }
.algo-card.featured > .chart-note { position: absolute; right: 36px; bottom: 30px; margin: 0; }
.algo-card.featured h3 { font-size: clamp(2rem, 3vw, 2.7rem); letter-spacing: -.035em; }
.algo-card.featured .metrics strong { font-size: 2.3rem; }
.algo-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.algo-badge { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 650; padding: 5px 9px; border-radius: 4px; border: 1px solid; }
.algo-badge.flag { color: #ecd2d6; border-color: #6b4a50; background: rgba(196,138,144,.12); }
.algo-badge.auto { color: #b8e6d3; border-color: #2b5445; background: rgba(167,212,189,.10); }
.algo-badge.soon { color: #a9aab5; border-color: #34353c; background: transparent; }

/* ---------------------------------------------------------------- Tables */
.table-wrap table tbody tr { transition: background .15s ease; }
.table-wrap table tbody tr:hover { background: rgba(255,255,255,.025); }
td.pos { color: #a7d4bd; }
td.neg { color: #e2a3aa; }

/* ---------------------------------------------------------------- Stats (performance) */
.stat-grid .stat { transition: border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.stat-grid .stat:hover { transform: translateY(-2px); }
.chart-panel { transition: border-color .25s ease; }

/* ---------------------------------------------------------------- BloFin bento */
.benefit-grid.bento { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-auto-rows: minmax(210px, auto); gap: 18px; }
.benefit-grid.bento .benefit { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.benefit-grid.bento .benefit:hover { transform: translateY(-3px); }
.benefit-grid.bento .benefit.hero { text-align: left; align-items: flex-start; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; overflow: hidden;
  background: radial-gradient(ellipse at 20% 0%, rgba(196,138,144,.22), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(167,212,189,.10), transparent 55%), #121114; border-color: #4a3438; }
.benefit-grid.bento .benefit.hero > span { font-family: var(--display); font-size: clamp(6rem, 12vw, 10rem); line-height: .9; letter-spacing: -.07em; font-weight: 650;
  background: linear-gradient(110deg, #fff 10%, #d7b3b8 45%, #fff 65%, #b8a0a4 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 18px; }
.benefit-grid.bento .benefit.hero h3 { font-size: 26px; }
.benefit-grid.bento .benefit.hero p { max-width: 46ch; margin: 10px 0 0; padding: 0; }

/* Steps as a connected timeline */
.steps.timeline { position: relative; }
.steps.timeline .step { position: relative; padding-top: 34px; border-top: 0; }
.steps.timeline:before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: linear-gradient(90deg, var(--rose-dark), #34353c 60%, transparent); }
.steps.timeline .step:before { content: ""; position: absolute; top: 5px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--rose); box-shadow: 0 0 0 5px rgba(196,138,144,.12); }

/* FAQ as a two-column grid */
.faq.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.faq.grid2 > .eyebrow, .faq.grid2 > h2 { grid-column: 1 / -1; }
.faq.grid2 details { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: #0f1014; transition: border-color .2s ease, background .2s ease; }
.faq.grid2 details[open] { border-color: #4a3a3e; background: #131216; }
.faq.grid2 details summary { cursor: pointer; }

/* ---------------------------------------------------------------- Reveal motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media video { display: none; }
  .spot:before, .spot:after { display: none; }
}

@media (max-width: 960px) {
  .has-media { min-height: 0; padding-top: 220px; }
  .hero-media { top: -40px; right: -22px; left: -22px; width: auto; height: 300px; bottom: auto; border-radius: 0; }
  .hero-media:after { background: linear-gradient(0deg, var(--bg) 8%, rgba(9,10,13,.25) 60%, rgba(9,10,13,.6) 100%); }
  .catalog.upgraded { grid-template-columns: 1fr; }
  .catalog.upgraded > .algo-card, .catalog.upgraded > .algo-card.wide { grid-column: 1 / -1; }
  .algo-card.featured { padding: 26px 22px; }
  .algo-card.featured > .spark, .algo-card.featured > svg, .algo-card.featured > .chart-note { position: static; width: auto; height: auto; }
  .benefit-grid.bento { grid-template-columns: 1fr; }
  .benefit-grid.bento .benefit.hero { grid-row: auto; min-height: 320px; }
  .faq.grid2 { grid-template-columns: 1fr; }
}