:root {
  --bg: #f7f4ef;
  --panel: rgba(255, 255, 255, .78);
  --panel2: rgba(255, 255, 255, .94);
  --text: #1f2024;
  --muted: #65615b;
  --gold: #bd8423;
  --purple: #7552d8;
  --cyan: #168bac;
  --blue: #9b6a18;
  --green: #23855e;
  --orange: #bc681b;
  --border: rgba(89, 69, 38, .16);
}

html {
  background: #f7f4ef;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, rgba(218, 181, 111, .24), transparent 30rem),
    radial-gradient(circle at 88% 14%, rgba(255, 255, 255, .98), transparent 34rem),
    linear-gradient(180deg, #fcfbf9 0%, #f1ede7 58%, #faf8f4 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at -8% 104%, transparent 0 55%, rgba(255,255,255,.8) 55.2% 55.7%, transparent 55.9%),
    radial-gradient(110% 88% at -2% 105%, transparent 0 63%, rgba(185,132,40,.48) 63.1% 63.35%, rgba(255,255,255,.9) 63.5% 64%, transparent 64.2%),
    radial-gradient(104% 84% at 101% -8%, transparent 0 65%, rgba(192,139,49,.4) 65.1% 65.35%, rgba(255,255,255,.82) 65.5% 66%, transparent 66.2%),
    repeating-radial-gradient(ellipse at 0 100%, transparent 0 17px, rgba(128,122,113,.12) 18px 19px, transparent 20px 26px);
  opacity: .78;
}

body > * { position: relative; z-index: 1; }

.nav {
  background: rgba(252, 251, 249, .92);
  border-bottom-color: rgba(164, 116, 37, .2);
  box-shadow: 0 10px 36px rgba(75, 58, 34, .06);
}

.brand, .links a, h1, h2, h3, a, footer a { color: var(--text); }
.links a:hover { color: #a76f18; }

.brand-mark {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(177, 126, 38, .25) !important;
  border-radius: 13px !important;
  background: #f7f4ef url('/assets/lieta-studios/favicon.png') center / cover no-repeat !important;
  box-shadow: 0 7px 18px rgba(65, 49, 27, .12) !important;
  object-fit: cover;
  opacity: 1;
  color: transparent;
}

img.brand-mark { object-position: -9999px -9999px; }

.hero-logo {
  border: 1px solid rgba(177, 126, 38, .2);
  border-radius: 28px;
  box-shadow: 0 28px 75px rgba(68, 53, 30, .16), 0 2px 0 rgba(255,255,255,.8) inset;
}

.card {
  background: rgba(255,255,255,.8);
  border-color: rgba(113, 85, 43, .16);
  box-shadow: 0 16px 44px rgba(75, 57, 32, .07);
  backdrop-filter: blur(14px);
}

.card.highlight {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,225,201,.58));
  border-color: rgba(181, 127, 38, .28);
}

.badge, .pill, .policy-nav a, .secondary {
  background: rgba(255,255,255,.68);
  border-color: rgba(166, 117, 36, .25);
  color: #805817;
}

.primary {
  background: linear-gradient(135deg, #d8a744, #a86e16);
  color: #fff;
  box-shadow: 0 9px 22px rgba(143, 93, 20, .2);
}

p, .feature-list, footer { color: var(--muted); }
footer { border-top-color: rgba(113, 85, 43, .15); }

@media (max-width: 950px) {
  .nav-inner { gap: 8px; padding: 12px 0 10px; }
  .brand-mark { width: 44px !important; height: 44px !important; }
  .links {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 22px 7px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .links::-webkit-scrollbar { display: none; }
  .links a { white-space: nowrap; font-size: 13px; }
  .hero { padding-top: 28px; }
  .hero-logo {
    width: min(260px, 70vw);
    margin-left: auto;
    margin-right: auto;
    border-radius: 22px;
  }
}