/* ===================== TOKENS / ROOT ===================== */
:root {
  --cream:#F7EEE2;
  --cream2:#FBF6EF;
  --ink:#39281B;
  --brown:#6E4C36;
  --brown-deep:#43301F;
  --brown-darker:#2C2013;
  --orange:#E2793B;
  --orange-dark:#C9682E;
  --muted:#8B7461;
  --line:rgba(57,40,27,0.12);
}

/* ===================== KEYFRAMES ===================== */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes fadeInUp { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform: translateY(0); } }
@keyframes wiggle { 0%,100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(8deg) scale(1.08); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(226,121,59,0.45); } 70% { box-shadow: 0 0 0 12px rgba(226,121,59,0); } 100% { box-shadow: 0 0 0 0 rgba(226,121,59,0); } }
@keyframes bounceDown { 0%,100% { transform: translateY(0); opacity:0.6; } 50% { transform: translateY(10px); opacity:1; } }
@keyframes dashFlow { to { stroke-dashoffset: -36; } }

/* ===================== BASE ===================== */
html { scroll-behavior: smooth; }
body { margin: 0; }

.site {
  font-family:'Work Sans',sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}

.fade-item { opacity:0; animation: fadeInUp 0.8s ease forwards; }

.carousel-control-prev-icon, .carousel-control-next-icon {
  filter: invert(1);
  background-color: rgba(67,48,31,0.5);
  border-radius:50%;
  padding:18px;
  background-size:50%;
}
.nav-toggler {
	border-color: rgba(255,255,255,0.4);
	background: #c7b3a4;
}
/* ===================== SHARED HELPERS ===================== */
.eyebrow { color:var(--orange); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:14px; }

.section-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:36px; margin:12px 0 20px; }
.section-title--tight { margin:12px 0 14px; }
.section-title--wide { margin:12px 0 40px; }
.section-title--top { margin:12px 0 0; }
.section-title--sm { font-size:34px; }
.section-title--light { color:#fff; }
.section-title--dl { margin:0 0 16px; }

.lead-text { font-size:17px; color:var(--muted); line-height:1.75; }
.muted-text { color:var(--muted); margin-bottom:0; }

.mb-14 { margin-bottom:14px; }
.mb-26 { margin-bottom:26px; }
.mb-30 { margin-bottom:30px; }

/* ===================== HEADER / NAV ===================== */
.site-nav { background:var(--brown-deep); padding:14px 0; box-shadow:0 2px 18px rgba(0,0,0,0.18); }
.brand { font-family:'Poppins',sans-serif; }
.brand-logo { height:48px; width:auto; }
.brand-name { color:#fff; font-weight:800; font-size:16px; letter-spacing:0.4px; line-height:1.15; }
.brand-name-sub { color:var(--orange); font-size:13px; letter-spacing:1px; }
.nav-toggler { border-color:rgba(255,255,255,0.4); }
.nav-links { font-weight:600; }
.nav-link-cream { color:#F0E6DA; }
.btn-download { background:var(--orange); color:#fff; font-weight:700; border-radius:999px; padding:9px 22px; }
.btn-download:hover { background:var(--orange-dark); color:#fff; }

/* ===================== HERO ===================== */
.hero {
  position:relative;
  padding:150px 0 90px;
  background:linear-gradient(135deg, rgba(44,32,19,0.88), rgba(67,48,31,0.82)), url('https://images.unsplash.com/photo-1494783367193-149034c05e8f?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}
.hero-badge {
  display:inline-block; background:rgba(226,121,59,0.18); color:var(--orange);
  border:1px solid rgba(226,121,59,0.4); padding:6px 16px; border-radius:999px;
  font-weight:600; font-size:13px; letter-spacing:0.5px; margin-bottom:20px; animation-delay:0.05s;
}
.hero-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:48px; line-height:1.15; color:#fff; margin-bottom:20px; animation-delay:0.18s; }
.hero-lead { font-size:18px; color:#E7DCCC; max-width:520px; margin:0 0 34px; line-height:1.65; animation-delay:0.32s; }
.hero-pills { animation-delay:0.4s; margin-bottom:22px; }
.hero-pill {
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.1); color:#fff;
  border:1px solid rgba(255,255,255,0.18); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600;
}
.pill-icon { color:var(--orange); font-size:14px; }
.hero-actions { animation-delay:0.46s; }
.hero-fade-3 { animation-delay:0.3s; }
.hero-phone-float { animation:floaty 5s ease-in-out infinite; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.45)); }
.hero-phone-img { width:100%; max-width:420px; display:block; }
.hero-scroll { position:absolute; bottom:18px; left:0; right:0; }
.hero-scroll-icon { color:#E7DCCC; font-size:22px; animation:bounceDown 1.6s ease-in-out infinite; }

/* ===================== STORE BUTTONS ===================== */
.store-btn { background:#1c130b; color:#fff; border-radius:14px; text-decoration:none; border:1px solid rgba(255,255,255,0.15); }
.store-btn--sm { padding:12px 22px; transition:transform 0.25s ease, box-shadow 0.25s ease; }
.store-btn--sm:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 12px 24px rgba(0,0,0,0.35); }
.store-btn--lg { padding:12px 24px; }
.store-text { text-align:left; line-height:1.1; }
.store-caption { display:block; font-size:11px; color:#C9BBA9; }
.store-title { font-size:16px; }
.store-title--lg { font-size:17px; }
.store-icon-apple { font-size:26px; }
.store-icon-apple--lg { font-size:28px; }
.store-icon-play { font-size:22px; }
.store-icon-play--lg { font-size:24px; }

/* ===================== ABOUT ===================== */
.about { padding:100px 0; background:var(--cream); }
.about-feat-icon { color:var(--orange); font-size:20px; margin-top:2px; }
.about-feat-text { font-size:16px; }
.about-img-wrap { filter:drop-shadow(0 24px 50px rgba(57,40,27,0.28)); }
.about-img { width:100%; max-width:400px; display:block; }

/* ===================== ROUTE ===================== */
.route { padding:100px 0; background:var(--cream); }
.route-path { font-weight:700; color:var(--brown); font-size:15px; }
.route-arrow { color:var(--orange); }
.route-card { background:#fff; border-radius:14px; border:1px solid var(--line); }
.route-code { font-family:'Poppins',sans-serif; font-weight:800; color:var(--orange); min-width:52px; }
.route-desc { color:var(--muted); font-size:15px; }
.route-carousel { border-radius:28px; overflow:hidden; box-shadow:0 24px 50px rgba(57,40,27,0.2); }
.route-carousel-img { width:100%; height:720px; object-fit:cover; display:block; }
.route-indicators { margin-bottom:14px; }

/* ===================== WHY BROWN SIGNS ===================== */
.why { padding:100px 0; background:linear-gradient(135deg, var(--brown), var(--brown-deep)); }
.why-lead { color:#E7DCCC; font-size:16px; line-height:1.75; }
.why-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:28px; min-height: 100%; }
.why-card-icon { font-size:26px; color:var(--orange); }
.why-card-text { color:#F0E6DA; margin:14px 0 0; font-size:15px; line-height:1.6; }

/* ===================== FEATURES ===================== */
.features { padding:100px 0; background:var(--cream2); }
.feature-card {
  background:#fff; border-radius:24px; padding:34px 28px; height:100%;
  box-shadow:0 10px 30px rgba(57,40,27,0.06); border:1px solid var(--line);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover { transform:translateY(-8px); box-shadow:0 18px 38px rgba(57,40,27,0.16); }
.feature-icon-box {
  width:56px; height:56px; border-radius:16px; background:rgba(226,121,59,0.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.feature-card:hover .feature-icon-box { animation:wiggle 0.5s ease; }
.feature-icon { font-size:26px; color:var(--orange); }
.feature-tag {
  display:inline-block; background:rgba(226,121,59,0.12); color:var(--orange); font-weight:700;
  font-size:11px; letter-spacing:0.5px; text-transform:uppercase; padding:4px 12px; border-radius:999px; margin-bottom:10px;
}
.feature-heading { font-family:'Poppins',sans-serif; font-weight:700; }

/* ===================== HOW IT WORKS ===================== */
.how { padding:100px 0; background:var(--cream); overflow:hidden; }
.steps { position:relative; padding-left:8px; }
.steps-line { position:absolute; left:40px; top:12px; bottom:12px; border-left:3px dashed var(--orange); }
.step-badge {
  flex-shrink:0; width:64px; height:64px; border-radius:50%; background:var(--brown-deep); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(57,40,27,0.2); z-index:1;
}
.step-badge--active { background:var(--orange); animation:pulseRing 2s infinite; }
.step-badge-icon { font-size:24px; }
.step-badge-icon--sm { font-size:22px; }
.step-num { display:block; color:var(--orange); font-family:'Poppins',sans-serif; font-weight:800; font-size:12px; letter-spacing:1px; margin-bottom:4px; }
.step-title { font-weight:700; margin-bottom:6px; font-size:18px; }
.how-phone { animation:floaty 6s ease-in-out infinite; background:var(--brown-darker); padding:14px; border-radius:46px; box-shadow:0 24px 60px rgba(57,40,27,0.22); }
.how-phone-img { width:260px; display:block; border-radius:34px; }

/* ===================== FAQ ===================== */
.faq { padding:100px 0; background:var(--cream2); }
.faq-item { border:none; border-radius:16px; overflow:hidden; margin-bottom:14px; box-shadow:0 6px 20px rgba(57,40,27,0.06); }
.faq-item--last { margin-bottom:0; }
.faq-btn { font-weight:700; background:#fff; color:var(--ink); }
.faq-body { color:var(--muted); background:#fff; }

/* ===================== DOWNLOAD ===================== */
.download { padding:90px 0; background:radial-gradient(circle at top left, var(--brown), var(--brown-deep)); }
.download-lead { color:#E7DCCC; font-size:18px; max-width:560px; margin:0 auto 34px; }

/* ===================== CONTACT ===================== */
.contact { padding:90px 0; background:var(--cream); }
.contact-card { background:#fff; border-radius:20px; padding:34px 24px; height:100%; box-shadow:0 10px 30px rgba(57,40,27,0.06); border:1px solid var(--line); }
.contact-icon { font-size:28px; color:var(--orange); }
.contact-heading { font-weight:700; margin:14px 0 6px; }

/* ===================== FOOTER ===================== */
.site-footer { background:var(--brown-darker); padding:50px 0 24px; }
.footer-logo { height:44px; width:auto; }
.footer-brand { color:#fff; font-weight:800; font-family:'Poppins',sans-serif; font-size:15px; line-height:1.15; }
.footer-brand-sub { color:var(--orange); }
.footer-link { color:#C9BBA9; text-decoration:none; font-size:14px; }
.footer-copy { color:#8B7461; font-size:13px; }


.nav-link:focus, .nav-link:hover {
	color: var(--orange);
}
.brand-logomobile { display:none; height:48px; width:auto; }
/* ===================== MOBILE NAV (below navbar-expand-lg) ===================== */
@media (max-width: 991.98px) {
  /* The wordmark image is ~233px wide, so brand + toggler + logo cannot share
     one row on a phone — it wrapped onto its own line and pushed the menu down.
     The .brand text already carries the name, so drop the image here. */
  .brand-logo { display:none; }
  .brand-logomobile { display:inline-block; height:48px; width:auto; }

  .nav-toggler:focus { box-shadow:none; }

  /* Long menus must stay scrollable inside the fixed-top bar. */
  #navMain {
    margin-top:12px;
    max-height:calc(100vh - 96px);
    overflow-y:auto;
  }
  .nav-links .nav-link {
    padding:11px 2px;
    border-bottom:1px solid rgba(255,255,255,0.10);
  }
  .nav-links .btn-download { display:inline-block; margin-top:14px; }
}