/* ============================================================
   PROJECT INDO-PHOENIX — Base Design System (shared)
   Templates override: --bg --ink --accent --muted --line
   --font-display --font-body
   ============================================================ */

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

:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  background: var(--bg, #0a0a0b);
  color: var(--ink, #ecebe6);
  font-family: var(--font-body, "Jost", system-ui, -apple-system, sans-serif);
  overflow-x: hidden;
  min-height: 100vh;
}

::selection { background: var(--accent, #c9a96e); color: #0a0a0b; }

/* ---------- Background layers ---------- */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
}
.grain {
  position: fixed; inset: 0;
  z-index: 3; pointer-events: none; opacity: .055;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px clamp(24px, 5vw, 56px);
  z-index: 20;
}
.brand {
  font-size: 13px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; font-weight: 400;
}
.brand em { color: var(--accent); font-style: normal; }
.nav-right { display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  color: var(--ink); text-decoration: none;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  opacity: .6; transition: opacity .4s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.lang-toggle {
  border: 1px solid var(--accent); border-radius: 999px;
  background: transparent; color: var(--accent);
  font-family: inherit; font-size: 11px; letter-spacing: .22em;
  padding: 9px 20px; cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.lang-toggle:hover { background: var(--accent); color: var(--bg); }

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

/* ---------- Sections ---------- */
.section {
  position: relative; z-index: 5;
  max-width: 1360px; margin: 0 auto;
  padding: clamp(90px, 14vh, 170px) clamp(24px, 7vw, 110px);
}
.label {
  font-size: 11px; letter-spacing: .44em; text-transform: uppercase;
  color: var(--accent); display: block;
}
.section-title {
  font-family: var(--font-display, "Jost", serif);
  font-weight: 300; line-height: 1.04;
  font-size: clamp(38px, 5.2vw, 74px);
  margin-top: 22px; letter-spacing: -.01em;
}

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(46px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg, #0a0a0b);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s var(--ease), visibility .9s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader__num {
  font-family: var(--font-display, "Jost");
  font-weight: 200; font-size: clamp(70px, 11vw, 150px);
  color: var(--accent, #c9a96e); letter-spacing: .04em;
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 99;
  pointer-events: none; border-radius: 50%;
  opacity: 0; margin: -3px 0 0 -3px;
}
.has-cursor .cursor-dot, .has-cursor .cursor-ring { opacity: 1; }
.cursor-dot { width: 6px; height: 6px; background: var(--accent); }
.cursor-ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 1px solid var(--accent);
  opacity: .5;
  transition: width .35s var(--ease), height .35s var(--ease),
              margin .35s var(--ease), opacity .35s var(--ease);
}
.cursor-ring.is-active { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: .9; }

/* ---------- Footer / CTA ---------- */
.footer {
  position: relative; z-index: 5;
  padding: clamp(80px, 12vh, 140px) clamp(24px, 7vw, 110px) 48px;
}
.footer-rule {
  border: 0; border-top: 1px solid var(--line, rgba(255,255,255,.12));
  margin-bottom: 56px;
}
.footer-bottom {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, #7d786c); opacity: .8;
}

.btn-line {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--accent); color: var(--accent);
  padding: 18px 44px; font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; border-radius: 999px;
  position: relative; overflow: hidden;
  transition: color .5s var(--ease);
}
.btn-line::before {
  content: ""; position: absolute; inset: 0;
  background: var(--accent); border-radius: 999px;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease); z-index: -1;
}
.btn-line:hover { color: var(--bg); }
.btn-line:hover::before { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}