/*!
 * Fotovault — 3D site
 * Copyright (c) 2026 Craig Foster / Kowin Technologies. All rights reserved.
 * Proprietary and confidential. Not licensed for reuse. See LICENSE.
 */

/* Every colour on the page is a token, because the scrims and glass panels
   that keep copy readable over the photographs have to invert wholesale for
   the light theme — a handful of hard-coded rgba() values would strand dark
   panels on a light page. The 3D scene reads the same two palettes from JS. */

:root {
  /* taken from the live fotovault.co.za stylesheet */
  --bg: #0f0e0c;
  --ink: #faf8f4;
  --muted: #a8a8b3;
  --line: rgba(245, 240, 230, 0.15);
  --accent: #e0a458;
  --accent-deep: #a8701a;
  --accent-hi: #edb46b;
  --btn-ink: #1a1205;

  --scrim-1: rgba(15, 14, 12, 0.96);
  --scrim-2: rgba(15, 14, 12, 0.86);
  --scrim-0: rgba(15, 14, 12, 0);
  --glass-1: rgba(10, 9, 8, 0.97);
  --glass-2: rgba(10, 9, 8, 0.90);
  --glass-0: rgba(10, 9, 8, 0);
  --glass-bg: rgba(12, 11, 9, 0.72);

  --card-bg: rgba(255, 255, 255, 0.04);
  --card-shadow: none;
  --featured-bg: rgba(224, 164, 88, 0.09);
  --featured-line: rgba(224, 164, 88, 0.60);
  --hover-line: rgba(224, 164, 88, 0.55);
  --ghost-hover: rgba(255, 255, 255, 0.08);

  --nav-bg: rgba(15, 14, 12, 0.82);
  --footer-bg: rgba(15, 14, 12, 0.78);
  --track: rgba(255, 255, 255, 0.07);
  --switch-bg: rgba(255, 255, 255, 0.14);
  --vignette: rgba(0, 0, 0, 0.75);

  --max: 1180px;
  color-scheme: dark;
}

/* Light theme — the gold is deepened to stay legible on warm white, and the
   scrims flip from near-black to near-white so copy still lifts off the
   photographs behind it. */
:root[data-theme="light"] {
  --bg: #faf8f4;
  --ink: #17171b;
  --muted: #5f5f6b;
  --line: rgba(0, 0, 0, 0.12);
  --accent: #a8701a;
  --accent-deep: #8f5e12;
  --accent-hi: #c8893d;
  --btn-ink: #fffdf8;

  --scrim-1: rgba(250, 248, 244, 0.97);
  --scrim-2: rgba(250, 248, 244, 0.88);
  --scrim-0: rgba(250, 248, 244, 0);
  --glass-1: rgba(252, 250, 247, 0.97);
  --glass-2: rgba(252, 250, 247, 0.90);
  --glass-0: rgba(252, 250, 247, 0);
  --glass-bg: rgba(255, 255, 255, 0.84);

  --card-bg: rgba(255, 255, 255, 0.86);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  --featured-bg: rgba(168, 112, 26, 0.10);
  --featured-line: rgba(168, 112, 26, 0.45);
  --hover-line: rgba(168, 112, 26, 0.45);
  --ghost-hover: rgba(0, 0, 0, 0.05);

  --nav-bg: rgba(250, 248, 244, 0.86);
  --footer-bg: rgba(250, 248, 244, 0.88);
  --track: rgba(0, 0, 0, 0.08);
  --switch-bg: rgba(0, 0, 0, 0.14);
  --vignette: rgba(250, 248, 244, 0.72);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #faf8f4;
    --ink: #17171b;
    --muted: #5f5f6b;
    --line: rgba(0, 0, 0, 0.12);
    --accent: #a8701a;
    --accent-deep: #8f5e12;
    --accent-hi: #c8893d;
    --btn-ink: #fffdf8;

    --scrim-1: rgba(250, 248, 244, 0.97);
    --scrim-2: rgba(250, 248, 244, 0.88);
    --scrim-0: rgba(250, 248, 244, 0);
    --glass-1: rgba(252, 250, 247, 0.97);
    --glass-2: rgba(252, 250, 247, 0.90);
    --glass-0: rgba(252, 250, 247, 0);
    --glass-bg: rgba(255, 255, 255, 0.84);

    --card-bg: rgba(255, 255, 255, 0.86);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    --featured-bg: rgba(168, 112, 26, 0.10);
    --featured-line: rgba(168, 112, 26, 0.45);
    --hover-line: rgba(168, 112, 26, 0.45);
    --ghost-hover: rgba(0, 0, 0, 0.05);

    --nav-bg: rgba(250, 248, 244, 0.86);
    --footer-bg: rgba(250, 248, 244, 0.88);
    --track: rgba(0, 0, 0, 0.08);
    --switch-bg: rgba(0, 0, 0, 0.14);
    --vignette: rgba(250, 248, 244, 0.72);

    color-scheme: light;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.25s ease, color 0.25s ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(120% 100% at 50% 40%, transparent 40%, var(--vignette) 100%);
}

a { color: inherit; text-decoration: none; }

/* ---------- canvas ---------- */

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

#noWebgl {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  padding: 14px 20px;
  background: var(--glass-bg);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ---------- scroll progress ---------- */

#progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 40;
  background: var(--track);
}
#progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px max(24px, calc((100vw - var(--max)) / 2));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, var(--nav-bg), var(--scrim-0));
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand .mark { color: var(--accent); font-size: 13px; }
.nav nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
}
.nav nav a { transition: color 0.25s; }
.nav nav a:hover { color: var(--ink); }

/* ---------- theme toggle ---------- */

.themebtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.themebtn:hover { border-color: var(--hover-line); background: var(--ghost-hover); }
.themebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.themebtn svg { width: 18px; height: 18px; }
/* dark (default) shows the sun you'd switch to; light shows the moon */
.ico-sun { display: block; }
.ico-moon { display: none; }
:root[data-theme="light"] .ico-sun { display: none; }
:root[data-theme="light"] .ico-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .ico-sun { display: none; }
  :root:not([data-theme]) .ico-moon { display: block; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--btn-ink);
  background: var(--accent);
  border: 1px solid transparent;
  transition: transform 0.25s ease, background 0.25s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--accent-hi); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--ghost-hover); }

/* ---------- layout ---------- */

main { position: relative; z-index: 2; }

.panel {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: safe center;
  padding: 120px max(24px, calc((100vw - var(--max)) / 2));
}

/* photos pass behind the copy, so each side panel carries a scrim */
.panel:not(.center)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-0) 66%);
}
.panel.right:not(.center)::before {
  background: linear-gradient(270deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-0) 66%);
}

.panel .inner { max-width: 520px; }
.panel.hero .inner, .panel#sa .inner { max-width: 640px; }
.panel.right { justify-content: flex-end; }
.panel.right .inner { text-align: right; }
.panel.center { justify-content: center; text-align: center; }
.panel.center .inner {
  max-width: 940px;
  padding: 44px 32px;
  background: radial-gradient(86% 74% at 50% 50%, var(--glass-1) 0%, var(--glass-2) 52%, var(--glass-0) 84%);
}
.panel.center.wide .inner { max-width: 1120px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

h1 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(42px, 6.2vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin-bottom: 26px;
}
h1 em { font-style: normal; color: var(--accent); }

h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(28px, 3.7vw, 47px);
  line-height: 1.09;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 20px;
}
h2.big { font-size: clamp(32px, 4.6vw, 60px); max-width: 16ch; margin-left: auto; margin-right: auto; }
.flag { font-size: 0.7em; }

p { color: var(--muted); }
.lead { font-size: clamp(16px, 1.4vw, 19px); max-width: 46ch; }
.panel.right .lead, .panel.right p { margin-left: auto; }
.panel.center .lead { margin: 0 auto; }
.mist { color: var(--muted); }

.actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.panel.right .actions { justify-content: flex-end; }
.panel.center .actions { justify-content: center; }

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

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-bg);
  font-size: 12.5px;
  color: var(--ink);
}
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.micro { font-size: 13.5px; margin-top: 16px; }
.footnote { font-size: 12px; margin-top: 14px; max-width: 52ch; }

.trust {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.trust li { font-size: 13px; color: var(--muted); }
.trust b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

/* ---------- how it works ---------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
  text-align: left;
}
.steps li {
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.steps .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 1px solid var(--featured-line);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}
.steps h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.steps p { font-size: 14.5px; }

/* ---------- feature cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
  text-align: left;
}
.cards article {
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.cards article:hover { transform: translateY(-5px); border-color: var(--hover-line); }
.cards .ic {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 9px;
  border: 1px solid var(--featured-line);
  background: var(--featured-bg);
  color: var(--accent);
  font-size: 15px;
}
.cards h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.cards article > p { font-size: 14.5px; }
.cards ul { list-style: none; margin-top: 14px; }
.cards li {
  font-size: 13.5px;
  color: var(--muted);
  padding: 5px 0 5px 18px;
  position: relative;
}
.cards li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 9px;
  font-size: 8px;
  color: var(--accent);
}
.evolving { margin-top: 30px; font-size: 15px; max-width: 660px; margin-left: auto; margin-right: auto; }
.evolving strong { color: var(--accent); font-weight: 600; }

/* ---------- south africa points ---------- */

.points { list-style: none; margin-top: 26px; display: grid; gap: 14px; }
.points li { font-size: 14px; color: var(--muted); }
.points b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

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

.billing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14px;
  color: var(--muted);
}
.billing .on { color: var(--ink); font-weight: 600; }
.billing em { font-style: normal; color: var(--accent); }
.switch {
  width: 46px;
  height: 26px;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--switch-bg);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.switch .knob {
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.switch.on { border-color: var(--featured-line); }
.switch.on .knob { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
  text-align: left;
}
.tiers article {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.tiers article:hover { transform: translateY(-5px); border-color: var(--hover-line); }
.tiers .featured {
  border-color: var(--featured-line);
  background: var(--featured-bg);
}
.tiers .tag {
  position: absolute;
  top: -10px; left: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--btn-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tiers h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.price { font-size: 34px; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }
.price .per { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.tiers .sub { font-size: 13.5px; margin-top: 4px; }
.tiers ul { list-style: none; margin-top: 16px; flex: 1; }
.tiers li {
  font-size: 14px;
  color: var(--muted);
  padding: 6px 0 6px 18px;
  position: relative;
}
.tiers li::before {
  content: "◆";
  position: absolute;
  left: 0;
  font-size: 8px;
  top: 10px;
  color: var(--accent);
}
.btn-tier {
  display: flex;
  width: 100%;
  margin-top: 18px;
  padding: 11px 18px;
  font-size: 13.5px;
}
.fineprint { margin-top: 26px; font-size: 13px; max-width: 720px; margin-left: auto; margin-right: auto; }

.enterprise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass-bg);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: left;
}
.enterprise strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.enterprise span { font-size: 14px; color: var(--muted); }

/* ---------- FAQ ---------- */

.faq {
  margin-top: 26px;
  text-align: left;
  padding: 4px 22px;
  border-radius: 14px;
  background: var(--glass-bg);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 34px 16px 0;
  font-size: 16.5px;
  font-weight: 550;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq p {
  padding: 0 34px 18px 0;
  font-size: 15px;
  line-height: 1.6;
}

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

footer {
  position: relative;
  z-index: 2;
  padding: 40px max(24px, calc((100vw - var(--max)) / 2)) 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--footer-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px 40px;
}
.foot-brand { max-width: 320px; }
.foot-brand p { margin-top: 12px; font-size: 14px; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 30px 50px; }
.foot-cols .col { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.col-head { color: var(--ink); font-weight: 600; }
.foot-cols a { color: var(--muted); transition: color 0.25s; }
.foot-cols a:hover { color: var(--accent); }
.foot-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 22px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

/* ---------- sign in ---------- */

.signin {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s;
}
.signin:hover { color: var(--ink); }

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
.inner .reveal:nth-child(2) { transition-delay: 0.06s; }
.inner .reveal:nth-child(3) { transition-delay: 0.12s; }
.inner .reveal:nth-child(4) { transition-delay: 0.18s; }
.inner .reveal:nth-child(5) { transition-delay: 0.24s; }
.inner .reveal:nth-child(6) { transition-delay: 0.30s; }
.inner .reveal:nth-child(7) { transition-delay: 0.36s; }

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

@media (max-width: 1080px) {
  .cards, .steps, .tiers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .nav { gap: 14px; }
  .nav nav { display: none; }
  .themebtn { margin-left: auto; }
  .signin { font-size: 13px; }
  .hero-badge { display: none; }

  .panel { padding-left: 24px; padding-right: 24px; }
  .panel.right { justify-content: flex-start; }
  .panel.right .inner { text-align: left; }
  .panel.right .lead, .panel.right p { margin-left: 0; }
  .panel.right .actions { justify-content: flex-start; }
  .panel.center .inner { padding: 36px 16px; }

  .cards, .steps, .tiers { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .enterprise { flex-direction: column; align-items: flex-start; }
  .enterprise .btn { width: 100%; }

  .panel:not(.center)::before,
  .panel.right:not(.center)::before {
    background: linear-gradient(180deg, var(--scrim-1) 0%, var(--scrim-2) 48%, var(--scrim-0) 82%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- wide-copy side panel ---------- */

/* The South Africa panel carries a paragraph plus three points, so its copy
   runs much further across the wall of prints than the other side panels do.
   Its scrim has to travel with it, or the text sits on bare photographs. */
#sa:not(.center)::before {
  background: linear-gradient(270deg, var(--scrim-1) 0%, var(--scrim-1) 30%, var(--scrim-2) 50%, var(--scrim-0) 86%);
}

@media (max-width: 980px) {
  /* the id above outranks the stacked mobile scrim, so restate it here */
  #sa:not(.center)::before {
    background: linear-gradient(180deg, var(--scrim-1) 0%, var(--scrim-2) 48%, var(--scrim-0) 82%);
  }
}