/* ==========================================================================
   Fueora — fueora.com
   Palette and materials lifted from the iOS app so the site and the product
   read as one thing.
   ========================================================================== */

:root {
  --canvas-1: #0b444b;
  --canvas-2: #0a2a2f;
  --canvas-3: #061c20;
  --canvas-4: #021519;
  --canvas-5: #030f12;
  --canvas-6: #010c0f;

  --sea-glass: #a7ded1;
  --champagne: #eac07a;
  --tiffany: #7fced9;

  --ink: #eaf5f2;
  --ink-soft: #a8c4c1;
  --ink-faint: #6f8f8e;

  --rule: rgba(167, 222, 209, 0.14);
  --glass: rgba(255, 255, 255, 0.035);

  --display: "Instrument Serif", Georgia, serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 1140px;
  --gutter: clamp(20px, 5vw, 48px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas-5);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lit ground, then the mineral texture on soft-light — the same stack the
   app uses in screen-shell.tsx. The texture is what gives glass something
   to refract. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 80% at 72% 8%, rgba(11, 68, 75, 0.85) 0%, rgba(2, 21, 25, 0) 62%),
    radial-gradient(90% 60% at 8% 92%, rgba(15, 84, 92, 0.35) 0%, rgba(2, 21, 25, 0) 60%),
    linear-gradient(178deg, var(--canvas-4) 0%, var(--canvas-5) 46%, var(--canvas-6) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("canvas-bg.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.42;
  filter: brightness(0.62) contrast(1.08);
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sea-glass);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sea-glass);
  margin: 0 0 18px;
}

/* --------------------------------------------------------------- header -- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(3, 15, 18, 0.72);
  border-bottom: 1px solid var(--rule);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

/* public/fueora-wordmark.svg, 933x135, ships in light teal so it sits on
   the dark canvas untouched. Sized by height; width follows. */
.wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.wordmark img { height: 26px; width: auto; display: block; }
.footer .wordmark img { height: 30px; }

.masthead nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
}

.masthead nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.18s ease;
}

.masthead nav a:hover { color: var(--sea-glass); }

/* ----------------------------------------------------------------- hero -- */

.hero { padding: clamp(56px, 9vw, 108px) 0 clamp(48px, 7vw, 88px); }

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 7.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 26px;
}

h1 em { font-style: italic; color: var(--champagne); }

.lede {
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 34px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  background: var(--champagne);
  color: #22160a;
  box-shadow: 0 10px 30px rgba(234, 192, 122, 0.18);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(234, 192, 122, 0.26);
}

.btn-ghost {
  border: 1px solid var(--rule);
  color: var(--ink);
  background: var(--glass);
}

.btn-ghost:hover {
  border-color: rgba(167, 222, 209, 0.36);
  transform: translateY(-2px);
}

.status-note {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- the orb -- */

.orb-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 470px;
  margin-inline: auto;
  width: 100%;
}

.orb-stage::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 222, 209, 0.2) 0%, rgba(167, 222, 209, 0) 68%);
  filter: blur(28px);
  opacity: 0;
  animation:
    glow-in 1s ease-out 0s forwards,
    aura 14s ease-in-out 1s infinite;
}

.orb-stage svg { width: 100%; height: auto; position: relative; }

/* ---- the load sequence -------------------------------------------------
   0.00s  ambient glow blooms
   0.15s  sphere materialises
   0.55s  ring tracks fade in, inner to outer
   1.05s  arcs draw while each bead rides the head of its own arc
   1.15s  score counts up (script)
   2.55s  breathe, bead pulse and glints take over
   ----------------------------------------------------------------------- */

.orb-sphere-in {
  transform-box: view-box;
  transform-origin: 130px 130px;
  opacity: 0;
  animation: sphere-in 0.95s cubic-bezier(0.2, 0.9, 0.25, 1) 0.15s forwards;
}

.orb-sphere {
  transform-box: view-box;
  transform-origin: 130px 130px;
  animation: breathe 6s ease-in-out 2.55s infinite;
}

.ring-in { opacity: 0; animation: fade-in 0.8s ease-out forwards; }
.ring-in-1 { animation-delay: 0.55s; }
.ring-in-2 { animation-delay: 0.67s; }
.ring-in-3 { animation-delay: 0.79s; }

.arc {
  animation: draw-1 1.5s cubic-bezier(0.35, 0, 0.15, 1) 1.05s both;
}
.arc-2 { animation-name: draw-2; animation-delay: 1.17s; }
.arc-3 { animation-name: draw-3; animation-delay: 1.29s; }

/* The arm sweeps from 12 o'clock to the arc head as the arc grows, so the
   bead reads as the thing drawing the line. */
.bead-arm {
  transform-box: view-box;
  transform-origin: 130px 130px;
  animation: sweep-1 1.5s cubic-bezier(0.35, 0, 0.15, 1) 1.05s both;
}
.bead-arm-2 { animation-name: sweep-2; animation-delay: 1.17s; }
.bead-arm-3 { animation-name: sweep-3; animation-delay: 1.29s; }

/* The sphere's 3.5% breathe is ~6px on a 168px ball but a fraction of a
   pixel on a 3.4px bead, so beads get their own amplitude on the same
   6s clock. */
.orb-bead {
  transform-box: view-box;
  animation: bead-pulse 6s ease-in-out 2.55s infinite;
}

.glint-set { opacity: 0; animation: fade-glint 1.4s ease-out 2.55s forwards; }

/* Rides inside the drawn arc only. The dash begins at the arc's start and
   travels until its leading edge reaches the arc head, then fades and
   restarts — it never runs past the bead. End offset per ring is
   (arc length - highlight length): 381.8-42.8, 539.1-48.0, 344.9-53.2. */
.glint   { animation: travel-1 7s   ease-in-out 2.55s infinite; }
.glint-2 { animation: travel-2 8.4s ease-in-out 2.90s infinite; }
.glint-3 { animation: travel-3 9.8s ease-in-out 3.25s infinite; }

@keyframes travel-1 {
  0%        { stroke-dashoffset: 0;    opacity: 0; }
  14%       { opacity: 0.85; }
  76%       { opacity: 0.85; }
  92%, 100% { stroke-dashoffset: -339; opacity: 0; }
}
@keyframes travel-2 {
  0%        { stroke-dashoffset: 0;    opacity: 0; }
  14%       { opacity: 0.85; }
  76%       { opacity: 0.85; }
  92%, 100% { stroke-dashoffset: -491; opacity: 0; }
}
@keyframes travel-3 {
  0%        { stroke-dashoffset: 0;    opacity: 0; }
  14%       { opacity: 0.85; }
  76%       { opacity: 0.85; }
  92%, 100% { stroke-dashoffset: -292; opacity: 0; }
}

@keyframes glow-in  { to { opacity: 1; } }
@keyframes fade-in  { to { opacity: 1; } }
@keyframes fade-glint { to { opacity: 1; } }

@keyframes sphere-in {
  from { opacity: 0; transform: scale(0.74); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes draw-1 {
  from { stroke-dasharray: 0 615.8; }
  to   { stroke-dasharray: 381.8 234.0; }
}
@keyframes draw-2 {
  from { stroke-dasharray: 0 691.2; }
  to   { stroke-dasharray: 539.1 152.1; }
}
@keyframes draw-3 {
  from { stroke-dasharray: 0 766.6; }
  to   { stroke-dasharray: 344.9 421.6; }
}

@keyframes sweep-1 { from { transform: rotate(0deg); } to { transform: rotate(223.2deg); } }
@keyframes sweep-2 { from { transform: rotate(0deg); } to { transform: rotate(280.8deg); } }
@keyframes sweep-3 { from { transform: rotate(0deg); } to { transform: rotate(162deg); } }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

@keyframes bead-pulse {
  0%, 100% { transform: scale(0.9);  opacity: 0.75; }
  50%      { transform: scale(1.35); opacity: 1; }
}

@keyframes travel {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes aura {
  0%, 100% { transform: scale(0.96); opacity: 0.72; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* hero copy rises in behind the orb */
.rise {
  opacity: 0;
  animation: rise-in 0.85s cubic-bezier(0.22, 0.85, 0.3, 1) both;
}
.r1 { animation-delay: 1.30s; }
.r2 { animation-delay: 1.42s; }
.r3 { animation-delay: 1.56s; }
.r4 { animation-delay: 1.70s; }
.r5 { animation-delay: 1.84s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.orb-legend {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  margin-top: 26px;
  flex-wrap: wrap;
}

.orb-legend div {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.orb-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* -------------------------------------------------------------- section -- */

.band { padding: clamp(56px, 8vw, 104px) 0; }
.band-rule { border-top: 1px solid var(--rule); }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.band-intro {
  max-width: 60ch;
  color: var(--ink-soft);
  margin: 0 0 clamp(34px, 5vw, 56px);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
}

.card {
  background: var(--glass);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 36px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.card h3 {
  font-family: var(--body);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}

.card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.card-mark {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--champagne);
  display: block;
  margin-bottom: 18px;
}

/* A day is a real sequence, so it gets real numbering. */
.day-step {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: clamp(18px, 3vw, 36px);
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}

.day-step:last-child { border-bottom: 1px solid var(--rule); }

.day-when {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--champagne);
  padding-top: 4px;
}

.day-step h3 {
  font-family: var(--body);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
}

.day-step p { margin: 0; color: var(--ink-soft); max-width: 62ch; }

/* -------------------------------------------------------------- pricing -- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
  max-width: 780px;
}

.price {
  background: var(--glass);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: clamp(28px, 3.4vw, 40px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}

.price-best {
  border-color: rgba(234, 192, 122, 0.42);
  background: rgba(234, 192, 122, 0.05);
}

.price-tag {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne);
  border: 1px solid rgba(234, 192, 122, 0.4);
  border-radius: 999px;
  padding: 5px 11px;
}

.price h3 {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}

.price .amount {
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 58px);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}

.price .per {
  font-size: 14px;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 20px;
}

.price p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* -------------------------------------------------------------- company -- */

.company {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.company p { color: var(--ink-soft); max-width: 54ch; }

.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.detail-list li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}

.detail-list .k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}

.detail-list .v { color: var(--ink); }
.detail-list .v a { color: var(--sea-glass); text-decoration: none; }
.detail-list .v a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- footer -- */

.footer {
  border-top: 1px solid var(--rule);
  padding: clamp(40px, 5vw, 60px) 0 48px;
  background: rgba(1, 12, 15, 0.6);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 40px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
}

.footer-links a { font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--sea-glass); }

.footer small {
  display: block;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.7;
}

/* ------------------------------------------------------------ documents -- */

.doc { padding: clamp(48px, 7vw, 84px) 0 clamp(56px, 8vw, 96px); }
.doc .wrap { max-width: 760px; }

.doc h1 { font-size: clamp(38px, 5.2vw, 58px); margin-bottom: 12px; }

.doc .updated {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 40px;
}

.doc h2 {
  font-family: var(--body);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 44px 0 14px;
}

.doc h3 { font-family: var(--body); font-size: 16px; font-weight: 700; margin: 26px 0 10px; }

.doc p,
.doc li { color: var(--ink-soft); font-size: 16px; line-height: 1.7; }

.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 9px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--sea-glass); }

.callout {
  border: 1px solid rgba(234, 192, 122, 0.34);
  background: rgba(234, 192, 122, 0.06);
  border-radius: 18px;
  padding: 24px 26px;
  margin: 32px 0;
}

.callout p { margin: 0; color: var(--ink); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .orb-stage { max-width: 380px; order: -1; }
  .grid-2 { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .company { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wordmark img { height: 21px; }
  .masthead nav { gap: 16px; }
  .masthead nav a { font-size: 13px; }
  .day-step { grid-template-columns: 1fr; gap: 8px; }
  .detail-list li { grid-template-columns: 1fr; gap: 4px; }
  .footer .wrap { flex-direction: column; }
}

/* Everything arrives in its final state, with no motion at all. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .orb-stage::before,
  .orb-sphere-in,
  .orb-sphere,
  .ring-in,
  .arc,
  .bead-arm,
  .orb-bead,
  .glint,
  .glint-set,
  .rise {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .glint-set { opacity: 0; }
  .btn { transition: none; }
}