/* ============================================================
   KANVIO — Street-Art Landing Page
   ============================================================ */

/* ---------- FONT ---------- */
@font-face {
  font-family: 'Audiowide';
  src: url('../assets/fonts/Audiowide/Audiowide-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  --orange: #AF5823;
  --orange-light: #d4742f;
  --orange-glow: rgba(175, 88, 35, .55);
  --taupe: #5E524B;
  --taupe-light: #8a7a70;
  --bg-dark: #0e0c0b;
  --bg-section: #141110;
  --bg-card: #1a1614;
  --text: #e8e0d8;
  --text-muted: #9e938a;
  --font-display: 'Audiowide', Impact, 'Arial Black', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --container: 1120px;
  --radius: 6px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange-light); }

/* ---------- UTILITY ---------- */
.container { width: 92%; max-width: var(--container); margin: 0 auto; }
.text-accent { color: var(--orange); }
.text-glow {
  text-shadow:
    0 0 12px var(--orange-glow),
    0 0 40px var(--orange-glow);
}

/* ---------- GLOBAL NOISE OVERLAY ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ============================================================
   PAINT DRIPS — decorative elements
   ============================================================ */
.drip {
  position: fixed;
  top: 0;
  width: 6px;
  background: var(--orange);
  border-radius: 0 0 50% 50%;
  z-index: 10;
  opacity: .35;
  animation: dripDown 4s ease-in forwards;
  pointer-events: none;
}
.drip--1 { left: 8%;  height: 0; animation-delay: .5s; width: 5px; }
.drip--2 { left: 22%; height: 0; animation-delay: 1.2s; width: 7px; }
.drip--3 { left: 55%; height: 0; animation-delay: .8s; width: 4px; }
.drip--4 { left: 78%; height: 0; animation-delay: 1.8s; width: 6px; }
.drip--5 { left: 93%; height: 0; animation-delay: 2.5s; width: 5px; }

@keyframes dripDown {
  0%   { height: 0; opacity: .5; }
  70%  { opacity: .35; }
  100% { height: 180px; opacity: .12; }
}

/* ============================================================
   PAINT SPLATTERS — CSS-only shapes
   ============================================================ */
.splatter {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.splatter--1 {
  width: 350px; height: 350px;
  top: -60px; right: -80px;
  background: radial-gradient(ellipse at 40% 40%, var(--orange-glow) 0%, transparent 70%);
  opacity: .25;
  filter: blur(30px);
}
.splatter--2 {
  width: 250px; height: 250px;
  bottom: 10%; left: -60px;
  background: radial-gradient(ellipse at 60% 60%, rgba(94,82,75,.5) 0%, transparent 70%);
  opacity: .3;
  filter: blur(25px);
}
.splatter--3 {
  width: 120px; height: 120px;
  top: 40%; right: 15%;
  background: var(--orange);
  opacity: .06;
  filter: blur(40px);
}
.splatter--4 {
  width: 400px; height: 400px;
  top: -100px; left: -100px;
  background: radial-gradient(circle, var(--orange-glow) 0%, transparent 60%);
  opacity: .18;
  filter: blur(40px);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem 0;
  background: linear-gradient(to bottom, rgba(14,12,11,.95) 60%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nav__inner {
  width: 92%; max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo img { height: 32px; width: auto; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .04em;
  padding: .65rem 1.6rem;
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  color: var(--orange);
  background: transparent;
  cursor: pointer;
  transition: all .25s;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn:hover {
  background: var(--orange);
  color: var(--bg-dark);
  box-shadow: 0 0 20px var(--orange-glow), 0 0 60px rgba(175,88,35,.2);
}
.btn--sm { padding: .5rem 1.2rem; font-size: .75rem; }
.btn--primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.btn--primary:hover {
  background: var(--orange-light);
  border-color: var(--orange-light);
  color: #fff;
  box-shadow: 0 0 24px var(--orange-glow), 0 0 60px rgba(175,88,35,.25);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 3rem;
  overflow: hidden;
}
/* Grungy diagonal stripes background */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(175,88,35,.025) 40px,
      rgba(175,88,35,.025) 42px
    );
  pointer-events: none;
}
/* Bottom rough edge */
.hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath d='M0,20 Q60,0 120,25 T240,15 T360,30 T480,10 T600,28 T720,8 T840,22 T960,12 T1080,26 T1200,16 T1320,24 T1440,18 L1440,60 L0,60 Z' fill='%23141110'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: cover;
}
.hero__content { position: relative; z-index: 2; max-width: 700px; }
.hero__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bg-dark);
  background: var(--orange);
  padding: .35rem 1rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
  animation: pulseBadge 2.5s ease-in-out infinite;
}
@keyframes pulseBadge {
  0%, 100% { box-shadow: 0 0 0 0 var(--orange-glow); }
  50%      { box-shadow: 0 0 18px 4px var(--orange-glow); }
}
.hero__logo {
  width: min(340px, 70vw);
  margin: 0 auto 2rem;
  filter: drop-shadow(0 0 30px var(--orange-glow));
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hero__tagline-line { display: block; }
.hero__tagline-line--accent {
  color: var(--orange);
  text-shadow:
    0 0 20px var(--orange-glow),
    0 0 60px rgba(175,88,35,.25);
  /* spray-paint rough edge illusion */
  -webkit-text-stroke: 1px rgba(175,88,35,.3);
}
.hero__sub {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Scroll indicator */
.hero__scroll {
  display: block;
  margin-top: 2.5rem;
  cursor: pointer;
}
.hero__scroll-arrow {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
  opacity: .5;
}
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: .5; }
  50%      { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

/* ============================================================
   SIGNUP FORM
   ============================================================ */
.signup-form__row {
  display: flex;
  gap: .5rem;
  max-width: 480px;
  margin: 0 auto;
}
.signup-form--centered .signup-form__row { justify-content: center; }
.signup-form__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .75rem 1rem;
  border: 2px solid var(--taupe);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.signup-form__input::placeholder { color: var(--text-muted); }
.signup-form__input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 12px var(--orange-glow);
}
.signup-form__note {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .6rem;
}

/* Success state */
.signup-form.submitted .signup-form__row { display: none; }
.signup-form__success {
  display: none;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--orange);
  text-shadow: 0 0 12px var(--orange-glow);
}
.signup-form.submitted .signup-form__success { display: block; }
.signup-form.submitted .signup-form__note { display: none; }
.signup-form__error {
  font-size: .85rem;
  color: #e74c3c;
  margin-top: .5rem;
}

/* ============================================================
   SPRAY LINE DIVIDER
   ============================================================ */
.spray-line {
  height: 4px;
  max-width: 200px;
  margin: 0 auto 3rem;
  border-radius: 4px;
  background: var(--orange);
  position: relative;
  opacity: .5;
  filter: blur(1px);
}
.spray-line::before,
.spray-line::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--orange);
}
.spray-line::before { width: 6px; height: 6px; top: -6px; left: 20%; opacity: .5; }
.spray-line::after  { width: 4px; height: 4px; top: 6px;  left: 60%; opacity: .4; }

/* ============================================================
   SECTIONS — SHARED
   ============================================================ */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
/* Underline spray */
.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--orange);
  margin: .6rem auto 0;
  border-radius: 3px;
  box-shadow: 0 0 8px var(--orange-glow);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
}
.about__bg {
  position: absolute;
  inset: 0;
  background: url('../assets/images/about-photo.jpg') center/cover no-repeat;
  filter: blur(2px);
  will-change: transform;
  z-index: 0;
}
.about__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 12, 11, 0.85);
  z-index: 1;
}
.about .container {
  position: relative;
  z-index: 2;
}
.about__text {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.about__lead {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
}
.about__text p { margin-bottom: 1rem; color: var(--text-muted); }
.about__text strong { color: var(--orange); }

/* Phone Mockup (legacy) */
.phone-mockup {
  width: 220px;
  height: 420px;
  margin: 0 auto;
  border: 3px solid var(--taupe);
  border-radius: 28px;
  background: #0a0908;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(0,0,0,.5),
    inset 0 0 30px rgba(175,88,35,.05);
}
.phone-mockup::before {
  /* notch */
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 22px;
  background: var(--taupe);
  border-radius: 0 0 14px 14px;
}
.phone-mockup__screen {
  position: absolute;
  inset: 30px 10px 20px;
  border-radius: 4px;
  background:
    linear-gradient(160deg, rgba(175,88,35,.08) 0%, transparent 40%),
    #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-mockup__ar-overlay {
  width: 80%;
  animation: arPulse 3s ease-in-out infinite;
}
@keyframes arPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.04); }
}
.phone-mockup__art { width: 100%; height: auto; }

/* Draw-on animations */
.draw-circle {
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: drawStroke 2s .5s ease-out forwards;
}
.draw-path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawStroke 1.5s 1.5s ease-out forwards;
}
.draw-text {
  opacity: 0;
  animation: fadeIn .6s 2.5s ease-out forwards;
}
@keyframes drawStroke {
  to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* AR pin bounce */
.phone-mockup__pin {
  position: absolute;
  bottom: 30%;
  left: 50%;
  width: 12px; height: 12px;
  background: var(--orange);
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  box-shadow: 0 0 10px var(--orange-glow);
  animation: pinBounce 2s ease-in-out infinite;
}
@keyframes pinBounce {
  0%, 100% { transform: translateX(-50%) rotate(-45deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(-45deg) translateY(-8px); }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how {
  padding: 6rem 0;
  background: var(--bg-dark);
  /* Brick-like subtle pattern */
  background-image:
    linear-gradient(to right, rgba(94,82,75,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94,82,75,.06) 1px, transparent 1px);
  background-size: 60px 30px;
}
.how__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}
.step {
  flex: 0 1 280px;
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
}
.step__icon {
  width: 80px; height: 80px;
  margin: 0 auto 1.2rem;
  position: relative;
}
.step__icon svg { width: 100%; height: 100%; }
.step__icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(175,88,35,.2);
  animation: spinSlow 20s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.step__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .5rem;
  text-shadow: 0 0 10px var(--orange-glow);
}
.step__desc { font-size: .92rem; color: var(--text-muted); }
.step__arrow {
  flex: 0 0 40px;
  padding-top: 3.5rem;
  opacity: .4;
}
.step__arrow svg { width: 40px; height: 20px; }

/* ============================================================
   FEATURES
   ============================================================ */
.features {
  padding: 6rem 0;
  background: var(--bg-section);
  position: relative;
}
/* Rough top edge */
.features::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50'%3E%3Cpath d='M0,30 Q80,50 160,28 T320,35 T480,25 T640,40 T800,22 T960,38 T1120,26 T1280,34 T1440,28 L1440,0 L0,0 Z' fill='%230e0c0b'/%3E%3C/svg%3E") no-repeat top center;
  background-size: cover;
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid rgba(94,82,75,.25);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
/* Tape-strip top accent */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 1.5rem;
  width: 40px; height: 6px;
  background: var(--orange);
  opacity: .6;
  border-radius: 0 0 3px 3px;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 8px 30px rgba(175,88,35,.15);
}
.feature-card__icon {
  width: 48px; height: 48px;
  margin-bottom: 1rem;
}
.feature-card__icon svg { width: 100%; height: 100%; }
.feature-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: .5rem;
  color: var(--text);
}
.feature-card__desc {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   WAITLIST CTA
   ============================================================ */
.waitlist {
  padding: 6rem 0;
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.waitlist__inner { position: relative; z-index: 1; }
.waitlist__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.waitlist__sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 2rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 3rem 0 2rem;
  background: #090807;
  border-top: 1px solid rgba(94,82,75,.2);
}
.footer__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: .8rem;
  gap: .4rem;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.footer__brand a {
  display: flex;
  align-items: center;
}
.footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.footer__made-by {
  font-size: .85rem;
  color: var(--text-muted);
}
.footer__korrelated-logo {
  width: 140px;
  height: 28px;
  object-fit: cover;
  object-position: center 53%;
  opacity: .7;
  transition: opacity .2s;
}
.footer__korrelated-logo:hover { opacity: 1; }
.footer__legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.footer__divider {
  font-size: .82rem;
  color: var(--text-muted);
  opacity: .5;
}
.footer__legal a {
  font-size: .82rem;
  color: var(--text-muted);
  opacity: .5;
  transition: color .2s, opacity .2s;
}
.footer__legal a:hover { color: var(--orange); opacity: .8; }
.footer__links a {
  font-size: .82rem;
  color: var(--text-muted);
  transition: color .2s;
}
.footer__links a:hover { color: var(--orange); }
.footer__copy {
  font-size: .75rem;
  color: var(--text-muted);
  opacity: .6;
  text-align: center;
}

/* ============================================================
   SCROLL REVEAL (JS-driven)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
}

@media (max-width: 700px) {
  .how__steps {
    flex-direction: column;
    align-items: center;
  }
  .step__arrow {
    padding-top: 0;
    transform: rotate(90deg);
  }
  .signup-form__row {
    flex-direction: column;
  }
  .signup-form__input,
  .signup-form__row .btn {
    width: 100%;
  }
  .features__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero { padding-top: 5rem; }
  .hero__logo { width: min(260px, 65vw); }
  .phone-mockup { width: 180px; height: 340px; }
}

/* ============================================================
   LEGAL PAGES (Privacy Policy & Terms of Service)
   ============================================================ */
.legal {
  padding: 7rem 0 4rem;
  min-height: 100vh;
  background: var(--bg-dark);
}
.legal h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text);
  margin-bottom: .5rem;
}
.legal__date {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--orange);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  text-transform: none;
}
.legal h3 {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--text);
  margin-top: 1.8rem;
  margin-bottom: .75rem;
  text-transform: none;
}
.legal p,
.legal li {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.8;
  margin-bottom: .75rem;
}
.legal ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.legal li {
  margin-bottom: .4rem;
}
.legal a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(175, 88, 35, .3);
  text-underline-offset: 2px;
}
.legal a:hover {
  text-decoration-color: var(--orange);
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
}
.legal th,
.legal td {
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(94, 82, 75, .25);
  font-size: .9rem;
  color: var(--text-muted);
}
.legal th {
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.legal strong {
  color: var(--text);
}

@media (max-width: 700px) {
  .legal table {
    font-size: .82rem;
  }
  .legal th,
  .legal td {
    padding: .5rem .6rem;
    font-size: .82rem;
  }
}

/* ============================================================
   BRAND ASSETS PAGE
   ============================================================ */
.brand {
  padding: 7rem 0 4rem;
  min-height: 100vh;
  background: var(--bg-dark);
}
.brand h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text);
  margin-bottom: .5rem;
}
.brand__intro {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 3rem;
  max-width: 600px;
}

/* Sections */
.brand__section {
  margin-bottom: 3.5rem;
}
.brand__section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--orange);
  margin-bottom: .6rem;
  text-transform: none;
}
.brand__section h3 {
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--text);
  margin-bottom: .75rem;
  text-transform: none;
}
.brand__desc {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* Asset cards */
.brand__card {
  background: var(--bg-card);
  border: 1px solid rgba(94,82,75,.25);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

/* Preview areas */
.brand__preview {
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.brand__preview img {
  max-height: 120px;
  width: auto;
}
.brand__preview--dark {
  background: #0e0c0b;
  border: 1px solid rgba(94,82,75,.3);
}
.brand__preview--light {
  background: #f5f0eb;
  border: 1px solid rgba(94,82,75,.15);
}

/* Download buttons row */
.brand__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Icon grid */
.brand__previews--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.brand__previews--grid .brand__card {
  margin-bottom: 0;
}

/* Color swatches */
.brand__colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
}
.brand__swatch {
  background: var(--bg-card);
  border: 1px solid rgba(94,82,75,.25);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.brand__swatch:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 16px rgba(175,88,35,.15);
}
.brand__swatch-fill {
  display: block;
  height: 64px;
  width: 100%;
  border-radius: var(--radius) var(--radius) 0 0;
}
.brand__swatch-label {
  display: block;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--text);
  padding: .6rem .75rem 0;
}
.brand__swatch-hex {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--text-muted);
  padding: .15rem .75rem .6rem;
  letter-spacing: .02em;
}

/* Typography samples */
.brand__type-samples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.brand__type-card {
  background: var(--bg-card);
  border: 1px solid rgba(94,82,75,.25);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.brand__type-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  margin-bottom: .25rem;
}
.brand__type-usage {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.brand__type-sample {
  font-size: 1.3rem;
  color: var(--text);
  line-height: 1.4;
}

@media (max-width: 700px) {
  .brand__previews--grid {
    grid-template-columns: 1fr;
  }
  .brand__colors {
    grid-template-columns: repeat(2, 1fr);
  }
  .brand__type-samples {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SUPPORT PAGE
   ============================================================ */
.support {
  padding: 7rem 0 4rem;
  min-height: 100vh;
  background: var(--bg-dark);
}
.support h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text);
  margin-bottom: .5rem;
}
.support__intro {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 600px;
}
.support-form {
  max-width: 520px;
}
.support-form__group {
  margin-bottom: 1.25rem;
}
.support-form__label {
  display: block;
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: .4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.support-form__select {
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239e938a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.support-form__textarea {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.support-form.submitted .support-form__group,
.support-form.submitted .btn { display: none; }
.support-form__success {
  display: none;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--orange);
  text-shadow: 0 0 12px var(--orange-glow);
}
.support-form.submitted .support-form__success { display: block; }
.support-form__error {
  font-size: .85rem;
  color: #e74c3c;
  margin-top: .5rem;
}

/* ============================================================
   SAFETY PAGE
   ============================================================ */
.safety {
  padding: 7rem 0 4rem;
  min-height: 100vh;
  background: var(--bg-dark);
}
.safety h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text);
  margin-bottom: .5rem;
}
.safety__intro {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 3rem;
  max-width: 600px;
}
.safety__section {
  margin-bottom: 3.5rem;
}
.safety__section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--orange);
  margin-bottom: .6rem;
  text-transform: none;
}
.safety__section h3 {
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--text);
  margin-bottom: .75rem;
  margin-top: 1.5rem;
  text-transform: none;
}
.safety__section p,
.safety__section li {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.8;
}
.safety__section p {
  margin-bottom: .75rem;
}
.safety__section ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.safety__section li {
  margin-bottom: .35rem;
}
.safety__section strong {
  color: var(--text);
}
.safety__steps {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.safety__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid rgba(94,82,75,.25);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.safety__step-number {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--orange);
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}
.safety__step div {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.8;
}
.safety__step strong {
  color: var(--text);
}
.safety__step em {
  color: var(--text);
  font-style: normal;
  background: rgba(175,88,35,.1);
  padding: .1rem .4rem;
  border-radius: 3px;
}