/*
  arvolve.css - the shared theme for every Factory product site.
  Mirrors arvolve.ai (Tailwind tokens in arvolveWeb/tailwind.config.cjs).
  To re-theme a product, override the variables in :root only; never fork this file.
*/

@font-face {
  font-family: "Sora";
  src: url("Sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --arv-black: #0A0A0C;
  --arv-gunmetal: #494849;
  --arv-stone: #C0BDBA;
  --arv-offwhite: #F5F5F5;
  --arv-white: #FFFFFF;
  --arv-midnight: #103662;
  --arv-cobalt: #256CC3;
  --arv-azure: #3195F0;
  --arv-sky: #00A9FF;

  --bg: var(--arv-black);
  --surface: rgba(73, 72, 73, 0.30);
  --border: rgba(73, 72, 73, 0.50);
  --text: var(--arv-offwhite);
  --muted: var(--arv-stone);
  --accent: var(--arv-azure);
  --accent-strong: var(--arv-cobalt);

  --font: "Sora", "Inter", system-ui, sans-serif;
  --radius: 12px;
  --max: 1100px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; line-height: 1.6; }
a { color: var(--muted); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }
::selection { background: rgba(37, 108, 195, .3); color: var(--arv-white); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* nav: sticky, blurred, gunmetal hairline, like arvolve.ai */
.nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: rgba(10, 10, 12, .7); border-bottom: 1px solid var(--arv-gunmetal); }
.nav .wrap { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; text-transform: none; }
.brand img { width: 32px; height: 32px; }
.nav .links { display: flex; gap: 6px; flex-wrap: wrap; }
.nav .links a { padding: 6px 12px; border-radius: 6px; }
.nav .links a:hover { background: rgba(73, 72, 73, .4); color: var(--text); }

/* hero */
.hero { padding: 80px 0 48px; }
.eyebrow { color: var(--accent); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.1; font-weight: 600; margin: 0 0 16px; }
.hero .lede { color: var(--muted); font-size: 18px; max-width: 640px; margin: 0 0 32px; }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(4px); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.section { padding: 48px 0; }
.section h2 { font-size: 26px; font-weight: 500; margin: 0 0 20px; }
.features { list-style: none; padding: 0; margin: 0; }
.features li { padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.features li strong { color: var(--text); font-weight: 500; }
.shot { border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }

/* buy panel */
.buy { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.price { font-size: 40px; font-weight: 600; }
.price small { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.btn { display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 500; padding: 14px 28px; border-radius: 8px; background: var(--accent); color: var(--arv-white); transition: background .2s, opacity .2s; }
.btn:hover { background: var(--accent-strong); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: transparent; border: 1px solid var(--arv-gunmetal); color: var(--text); }
.note { color: var(--muted); font-size: 13px; margin-top: 8px; }

.footer { border-top: 1px solid var(--arv-gunmetal); padding: 32px 0; color: var(--muted); font-size: 13px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }