/*
   ORANO review skin
   -----------------
   This file is deliberately additive. The landing markup, phone frames,
   screen assets, section order, spacing system, and scroll hooks all remain
   owned by design.css, landing.css, and scroll.js. Only the visual treatment
   and a few contextual mascot accents live here.
*/

:root {
  --bg: #080706;
  --bg-card: #0b0a09;
  --bg-elevated: #11100e;
  --border: #282522;
  --border-soft: #1b1917;
  --text: #f3eee5;
  --text-2: #aaa198;
  --text-3: #756d64;
  --text-4: #4b443d;
  --platinum: #e0483c;
}

body {
  background: radial-gradient(ellipse 100% 70% at 50% 0%, #141313 0%, #070707 52%, #000000 100%);
  background-attachment: fixed;
}

/* Keep the page quiet so the supplied product screens remain the visual
   source of truth. The previous review build's large circles and backdrop
   are intentionally absent here. */
.hero-glow,
.fx-texture,
.fx-grain,
.fx-particles {
  display: none;
}

/* Source platforms stay literal: white icons only, with no image panel,
   colored tiles, or decorative card treatment. */
.source-icons {
  display: flex;
  align-items: center;
  gap: 20px;
  background: none;
}

.source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text);
  opacity: 0.92;
}

.source-icon svg {
  width: 100%;
  height: 100%;
}

.stage-socials {
  max-width: none;
}

.fv-socials .source-icons {
  gap: 16px;
}

@media (max-width: 720px) {
  .source-icons {
    gap: 16px;
  }

  .source-icon {
    width: 28px;
    height: 28px;
  }
}

.nav {
  background: rgba(8, 7, 6, 0.72);
}

.nav.scrolled {
  background: rgba(8, 7, 6, 0.92);
  border-bottom-color: var(--border);
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
}

.btn-primary:hover {
  background: #eaded0;
}

.btn-secondary {
  border-color: #4a433c;
}

.btn-secondary:hover {
  border-color: var(--text-2);
}

.device {
  border-color: rgba(243, 238, 229, 0.16);
  box-shadow: 0 0 60px -24px rgba(243, 238, 229, 0.22);
}

.device-screen {
  border-color: rgba(243, 238, 229, 0.08);
}

.hero-center {
  position: relative;
}

/* Keep the CTA centered in the hero stack so the first viewport reads as one
   clear vertical path. On mobile it remains full-width below the mockup. */
@media (min-width: 980px) {
  .hero-ctas {
    position: static;
    align-self: center;
    justify-content: center;
  }
}

/* Keep the existing five-stage story and rail. Each mascot is a child of its
   phone wrapper so the existing scroll parallax carries both as one unit. */
.stage {
  background: none;
}

.stage-mascot {
  position: absolute;
  bottom: 17px;
  width: 180px;
  height: 180px;
  object-fit: contain;
  transform: translate3d(0, var(--mascot-lag-y, 0px), 0) rotate(var(--mascot-tilt, 0deg));
  transform-origin: 70% 86%;
  will-change: transform;
  animation: mascot-hover 3.4s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.96;
  z-index: 3;
}

@keyframes mascot-hover {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 6px; }
}

/* The share sheet's ORANO destination is the action to notice. Keep the
   supplied white logo legible on a dark tile and use one restrained red ring
   instead of the empty white square. */
.sc-share .target .icon.orano {
  background: #0b0a09;
  padding: 7px;
  border: 1px solid rgba(243, 238, 229, 0.3);
  box-shadow: 0 0 0 2px rgba(224, 72, 60, 0.95), 0 0 18px rgba(224, 72, 60, 0.28);
}

.sc-share .target .icon.orano img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.stage:nth-child(1) .stage-mascot,
.stage:nth-child(3) .stage-mascot,
.stage:nth-child(5) .stage-mascot {
  right: 56px;
}

.stage:nth-child(2) .stage-mascot,
.stage:nth-child(4) .stage-mascot {
  left: 81px;
}

.story-rail .fill {
  background: var(--platinum);
}

.feature .f-icon,
.fv-agents .agent-code {
  color: var(--platinum);
}

.cta {
  overflow: hidden;
}

.cta-inner::after {
  content: "";
  display: block;
  width: 180px;
  height: 180px;
  margin-top: 4px;
  background: url("../assets/mascot/12-action-checklist.png") center / contain no-repeat;
  pointer-events: none;
}

.footer {
  border-top-color: var(--border);
}

@media (max-width: 979px) {
  .stage-mascot {
    width: 160px;
    height: 160px;
    right: 24px;
    left: auto;
  }
}

@media (max-width: 720px) {
  .stage-mascot {
    display: none;
  }

  .cta-inner::after {
    width: 140px;
    height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-mascot {
    transform: none;
    will-change: auto;
    animation: none;
  }

  .cta-inner::after {
    transform: none;
  }
}