/* ============================================================
   Chhota Bheem Family Café — Stylesheet
   Fonts: Ubuntu (headings) · Poppins (body/content)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: 'Ubuntu';
  src: url('./Ubuntu-R.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --saffron:      #F4971F;
  --saffron-deep: #D4800A;
  --marigold:     #F4971F;
  --gold:         #F4971F;
  --maroon:       #3A1F0F;
  --maroon-deep:  #2A1508;
  --dark-bg:      #3A1F0F;
  --cream:        #FFF6E4;
  --cream-soft:   #FDF0D5;
  --ivory:        #FFFBF2;
  --brown:        #3A1F0F;
  --brown-soft:   #6B4423;
  --radius-card:  1.25rem;
  --radius-btn:   9999px;
  --font-heading: 'Ubuntu', sans-serif;
  --font-body:    'Poppins', sans-serif;
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  background: var(--cream);
  color: var(--brown);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; vertical-align: middle; }
button { cursor: pointer; font: inherit; background: none; border: none; font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; font-family: var(--font-heading); }
p { font-family: var(--font-body) !important; }
span, li, label, input, select, textarea { font-family: var(--font-body); }
::selection { background: var(--saffron); color: var(--ivory); }

/* ── 3. TYPOGRAPHY ROLES ──────────────────────────────────── */
.font-display { font-family: var(--font-heading); font-optical-sizing: auto; letter-spacing: -0.01em; }
.font-poster  { font-family: var(--font-heading); letter-spacing: 0.01em; }

/* Heading scales */
.h-display {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
    .md\:text-xl {
      font-size: 26x !important;
    }
.h-section {
  font-family: var(--font-heading);
  margin-bottom: 20px;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 40px);
  line-height: 1.0;
}
.h-sub {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 24px);
  line-height: 1.25;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--saffron);
}
.stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 42px);
  line-height: 1;
  color: #f4971f;
  letter-spacing: -0.02em;
}

/* ── 4. LAYOUT HELPERS ────────────────────────────────────── */
.App { min-height: 100vh; background: var(--cream); }
.container-cb {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── 5. NAVIGATION ────────────────────────────────────────── */
.mobile-hero-logo {
  display: none;
}
@media (max-width: 767px) {
  .cb-nav { display: none; }
  .mobile-hero-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
  }
}
.cb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: #fffbf2;
}
.cb-nav{
    position: fixed;
    overflow: visible;
    z-index: 999;
}

/* ── 6. BUTTONS ───────────────────────────────────────────── */
.btn-cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.9rem;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn-cb-primary {
  background: #3a1f0f;
  color: var(--ivory);
  padding: 10px 10px 10px 10px;
}

.btn-cb-primary:hover {
  background: var(--saffron-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(232, 93, 4, .34);
}
.btn-cb-secondary {
  background: transparent;
  color: var(--maroon);
  border: 2px solid var(--maroon);
}
.btn-cb-secondary:hover {
  background: #3a1f0f;
  color: var(--ivory);
  transform: translateY(-2px);
}

/* ── 7. CARDS ─────────────────────────────────────────────── */
.cb-card {
  background: #fff;
  border: 1px solid rgba(58, 31, 15, .10);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 18px rgba(58, 31, 15, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(58, 31, 15, .10);
}
.cb-card-dark {
  background: linear-gradient(140deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  background: #3a1f0f;
  color: var(--cream);
  border-radius: var(--radius-card);
}

/* ── 8. INPUTS ────────────────────────────────────────────── */
.cb-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid rgba(58, 31, 15, .18);
  border-radius: .85rem;
  padding: .9rem 1.1rem;
  color: var(--brown);
  font-family: var(--font-body);
  font-size: .96rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cb-input:focus {
  outline: none;
  border-color: var(--saffron);
  box-shadow: 0 0 0 4px rgba(244, 151, 31, .12);
}
.cb-input::placeholder { color: rgba(58, 31, 15, .45); }

/* ── 9. DECORATIVE PATTERNS ───────────────────────────────── */
.bg-paisley {
    background:#faf2df;
}
.bg-grain {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(58,31,15,.04) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(244,151,31,.04) 1px, transparent 1px);
  background-size: 24px 24px, 32px 32px;
}
.ornament-divider {
  background-image: linear-gradient(90deg, transparent, var(--gold) 20%, var(--saffron) 50%, var(--gold) 80%, transparent);
  height: 2px;
}

/* ── 10. ANIMATIONS ───────────────────────────────────────── */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(2deg); }
}
@keyframes shimmer-line {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0    rgba(244, 151, 31, .4); }
  50%       { box-shadow: 0 0 0 14px rgba(244, 151, 31, 0);  }
}
@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-float-slow  { animation: float-slow   6s   ease-in-out infinite; }
.animate-pulse-glow  { animation: pulse-glow   2.2s ease-out    infinite; }
.animate-slide-up    { animation: slide-up-fade .8s  ease-out   both; }
.ticker-track        { animation: ticker-scroll 28s  linear     infinite; }

.shimmer-text {
    background: #f4971f;
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-line 6s linear infinite;
}

/* ── 11. UTILITY: FLEX / GRID ─────────────────────────────── */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }
.block        { display: block; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.shrink-0      { flex-shrink: 0; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.col-span-2  { grid-column: span 2; }

/* gaps */
.gap-1\.5 { gap: .375rem; }
.gap-2 {
    gap: 1.5rem;
}
.gap-2\.5 { gap: .625rem; }
.gap-3    { gap: .75rem;  }
.gap-4    { gap: 1rem;    }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem;  }
.gap-7    { gap: 1.75rem; }
.gap-8    { gap: 2rem;    }
.gap-10   { gap: 2.5rem;  }
.gap-12   { gap: 3rem;    }

/* space-y */
.space-y-2\.5 > * + * { margin-top: .625rem; }
.space-y-3    > * + * { margin-top: .75rem;  }
.space-y-4    > * + * { margin-top: 1rem;    }

/* ── 12. UTILITY: SIZING ──────────────────────────────────── */
.w-full  { width: 100%; }
.w-11    { width: 2.75rem; } .h-11   { height: 2.75rem; }
.w-12    { width: 3rem; }    .h-12   { height: 3rem; }
.w-14    { width: 3.5rem; }  .h-14   { height: 3.5rem; }
.w-24    { width: 6rem; }    .h-24   { height: 6rem; }
.w-32    { width: 8rem; }    .h-32   { height: 8rem; }
.w-48    { width: 12rem; }   .h-48   { height: 12rem; }
.w-56    { width: 14rem; }   .h-56   { height: 14rem; }
.w-72    { width: 18rem; }   .h-72   { height: 18rem; }
.w-80    { width: 20rem; }   .h-80   { height: 20rem; }
.w-1\.5  { width: .375rem; } .h-1\.5 { height: .375rem; }
.h-2\.5  { height: .625rem; }
.h-full  { height: 100%; }
.h-\[420px\] { height: 420px; }
.min-h-screen   { min-height: 100vh; }
.min-h-\[110px\]{ min-height: 110px; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-md  { max-width: 28rem; }
.aspect-square { aspect-ratio: 1; }
.w-auto { width: auto; }

/* ── 13. UTILITY: SPACING ─────────────────────────────────── */
.p-2 { padding: .5rem; }   .p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-3 { padding-left: .75rem;  padding-right: .75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }

.py-1\.5 { padding-top: .375rem;  padding-bottom: .375rem; }
.py-2\.5 { padding-top: .625rem;  padding-bottom: .625rem; }
.py-3    { padding-top: .75rem;   padding-bottom: .75rem; }
.py-3\.5 { padding-top: .875rem;  padding-bottom: .875rem; }
.py-4    { padding-top: 1rem;     padding-bottom: 1rem; }
.py-14   { padding-top: 3.5rem;   padding-bottom: 3.5rem; }

.pt-2   { padding-top: .5rem;  }
.pt-5   { padding-top: 1.25rem; }
.pt-28  { padding-top: 7rem;   }
.pb-2\.5{ padding-bottom: .625rem; }
.pb-16  { padding-bottom: 4rem; }

.mt-0\.5 { margin-top: .125rem; } .mt-1   { margin-top: .25rem;  }
.mt-1\.5 { margin-top: .375rem; } .mt-2   { margin-top: .5rem;   }
.mt-2\.5 { margin-top: .625rem; } .mt-3   { margin-top: .75rem;  }
.mt-4    { margin-top: 1rem;    } .mt-5   { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem;  } .mt-7   { margin-top: 1.75rem; }
.mt-8    { margin-top: 2rem;    } .mt-10  { margin-top: 1rem;  }
.mt-12   { margin-top: 3rem;    } .mt-14  { margin-top: 3.5rem;  }
.mt-16   { margin-top: 4rem;    }
.-mt-1   { margin-top: -.25rem; } .-mt-4  { margin-top: -1rem;   }
.mb-1\.5 { margin-bottom: .375rem; }
.mb-3    { margin-bottom: .75rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-2    { margin-left: .5rem; margin-right: .5rem; }

/* ── 14. UTILITY: POSITION ────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed;    }

.inset-0   { inset: 0; }
.-inset-3  { inset: -.75rem; }
.-inset-4  { inset: -1rem;   }

.top-20   { top: 5rem; }
.right-0  { right: 0; }  .right-2  { right: .5rem; }
.right-5  { right: 1.25rem; } .right-10 { right: 2.5rem; }
.bottom-2 { bottom: .5rem; }  .bottom-5 { bottom: 1.25rem; }
.bottom-10{ bottom: 2.5rem; }
.left-2   { left: .5rem; }  .left-5  { left: 1.25rem; }
.left-10  { left: 2.5rem; }

.-top-2   { top: -.5rem; }   .-top-4  { top: -1rem;   }
.-top-6   { top: -1.5rem; }  .-top-8  { top: -2rem;   }
.-top-12  { top: -3rem; }    .-top-16 { top: -4rem;   }
.-top-20  { top: -5rem; }
.-bottom-6  { bottom: -1.5rem; } .-bottom-12 { bottom: -3rem; }
.-bottom-24 { bottom: -6rem; }
.-left-4   { left: -1rem; }  .-left-12  { left: -3rem; }
.-left-20  { left: -5rem; }
.-right-3  { right: -.75rem; } .-right-6  { right: -1.5rem; }
.-right-8  { right: -2rem; }  .-right-12 { right: -3rem; }
.-right-16 { right: -4rem; }

.z-10  { z-index: 10; }
.z-50  { z-index: 50; }

/* ── 15. UTILITY: TYPOGRAPHY ──────────────────────────────── */
.text-xs   { font-size: .75rem;  line-height: 1rem;   }
.text-sm   { font-size: .875rem; line-height: 1.25rem;}
.text-base { font-size: 1rem;    line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem;line-height: 1.75rem;}
.text-xl   { font-size: 30px ; line-height: 1.75rem;}
.text-2xl  { font-size: 30px;  line-height: 2rem;   }
.text-3xl  { font-size: 40px;line-height: 2.25rem;}
.text-4xl  { font-size: 40px; line-height: 3rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 13px; }
.text-\[12px\] { font-size: 12px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 14px; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.uppercase     { text-transform: uppercase; }
.text-left     { text-align: left; }
.text-center   { text-align: center; }
.leading-none    { line-height: 1;     }
.leading-tight   { line-height: 1.25;  }
.leading-relaxed { line-height: 1.625; }
.whitespace-nowrap { white-space: nowrap; }
.break-all { word-break: break-all; }
.resize-y  { resize: vertical; }

/* letter-spacing */
.tracking-wide        { letter-spacing: .025em;  }
.tracking-wider       { letter-spacing: .05em;   }
.tracking-\[0\.14em\] { letter-spacing: .14em;   }
.tracking-\[0\.16em\] { letter-spacing: .16em;   }
.tracking-\[0\.18em\] { letter-spacing: .18em;   }
.tracking-\[0\.22em\] { letter-spacing: .22em;   }

/* ── 16. UTILITY: COLOURS ─────────────────────────────────── */
/* Backgrounds */
.bg-white            { background-color: #fff; }
.bg-\[\#FFF6E4\]     { background-color: #FFF6E4; }
.bg-\[\#FFF6E4\]\/5  { background-color: rgba(255,246,228,.05); }
.bg-\[\#FFF6E4\]\/8  { background-color: rgba(255,246,228,.08); }
.bg-\[\#FFFBF2\]     { background-color: #FFFBF2; }
.bg-\[\#FDF0D5\]     { background-color: #FDF0D5; }
.bg-\[\#5A1414\]     { background-color: #3A1F0F; }
.bg-\[\#3A0F0F\]     { background-color: #3A1F0F; }
.bg-\[\#E85D04\]     { background-color: #F4971F; }
.bg-\[\#F4A024\]     { background-color: #F4971F; }
.bg-\[\#7B1E1E\]\/8  { background-color: rgba(58,31,15,.08); }
.bg-\[\#7B1E1E\]\/12 { background-color: rgba(58,31,15,.12); }
.bg-\[\#7B1E1E\]\/15 { background-color: rgba(58,31,15,.15); }
.bg-\[\#E85D04\]\/10 { background-color: rgba(244,151,31,.10); }
.bg-\[\#E85D04\]\/15 { background-color: rgba(244,151,31,.15); }
.bg-\[\#F4A024\]\/10 { background-color: rgba(244,151,31,.10); }
.bg-\[\#F4A024\]\/15 { background-color: rgba(244,151,31,.15); }
.bg-\[\#F4A024\]\/20 { background-color: rgba(244,151,31,.20); }

/* Gradients */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right,        var(--tw-gradient-stops)); }
.bg-gradient-to-t  { background-image: linear-gradient(to top,          var(--tw-gradient-stops)); }

.from-\[\#E85D04\]      { --tw-gradient-from: #F4971F;                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#F4A024\]      { --tw-gradient-from: #F4971F;                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#F4A024\]\/30  { --tw-gradient-from: rgba(244,151,31,.3);             --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#7B1E1E\]      { --tw-gradient-from: #3A1F0F;                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#5A1414\]\/70  { --tw-gradient-from: rgba(58,31,15,.7);              --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#3A0F0F\]\/85  { --tw-gradient-from: rgba(58,31,15,.85);             --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#FFF6E4\]      { --tw-gradient-from: #FFF6E4;                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-transparent        { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent); }
.via-\[\#3A0F0F\]\/20   { --tw-gradient-stops: var(--tw-gradient-from), rgba(58,31,15,.2), var(--tw-gradient-to, transparent); }
.to-\[\#7B1E1E\]        { --tw-gradient-to: #3A1F0F; }
.to-\[\#7B1E1E\]\/20    { --tw-gradient-to: rgba(58,31,15,.2); }
.to-\[\#5A1414\]        { --tw-gradient-to: #3A1F0F; }
.to-\[\#E85D04\]        { --tw-gradient-to: #F4971F; }
.to-\[\#F4A024\]        { --tw-gradient-to: #F4971F; }
.to-\[\#FDF0D5\]        { --tw-gradient-to: #FDF0D5; }
.to-transparent         { --tw-gradient-to: transparent; }

/* Text colours */
.text-\[\#3A2515\]      { color: #3A1F0F; font-weight: 500;}
.text-\[\#6B4423\]      { color: #6B4423; }
.text-\[\#6B4423\]\/80  { color: rgba(107,68,35,.8); }
.text-\[\#7B1E1E\]      { color: #3A1F0F; }
.text-\[\#7B1E1E\]\/20  { color: rgba(58,31,15,.2); }
.text-\[\#E85D04\]      { color: #F4971F; }
.\!text-\[\#E85D04\]    { color: #F4971F !important; }
.text-\[\#F4A024\]      { color: #F4971F; }
.\!text-\[\#F4A024\]    { color: #F4971F !important; }
.text-\[\#FFF6E4\]      { color: #FFF6E4; }
.text-\[\#FFF6E4\]\/40  { color: rgba(255,246,228,.4); }
.text-\[\#FDF0D5\]\/55  { color: rgba(253,240,213,.55); }
.text-\[\#FDF0D5\]\/60  { color: rgba(253,240,213,.6); }
.text-\[\#FDF0D5\]\/75  { color: rgba(253,240,213,.75); }
.text-\[\#FDF0D5\]\/80  { color: rgba(253,240,213,.8); }
.text-\[\#FDF0D5\]\/85  { color: rgba(253,240,213,.85); }
.text-\[\#FDF0D5\]\/90  { color: rgba(253,240,213,.9); }

/* Hover text */
.hover\:text-\[\#E85D04\]:hover { color: #F4971F; }
.hover\:text-\[\#F4A024\]:hover { color: #F4971F; }

/* Extra utility classes */
.text-\[\#3A0F0F\]             { color: #3A1F0F; }
.hover\:bg-\[\#e39a1f\]:hover  { background-color: #D4800A; }

/* ── 17. UTILITY: BORDERS ─────────────────────────────────── */
.border   { border-width: 1px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-t { border-top-width:    1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; }
.border-dashed { border-style: dashed; }
.border-white             { border-color: #fff; }
.border-\[\#7B1E1E\]\/10  { border-color: rgba(58,31,15,.10); }
.border-\[\#7B1E1E\]\/15  { border-color: rgba(58,31,15,.15); }
.border-\[\#7B1E1E\]\/20  { border-color: rgba(58,31,15,.20); }
.border-\[\#7B1E1E\]\/30  { border-color: rgba(58,31,15,.30); }
.border-\[\#E85D04\]\/30  { border-color: rgba(244,151,31,.30); }
.border-\[\#F4A024\]\/15  { border-color: rgba(244,151,31,.15); }
.border-\[\#F4A024\]\/20  { border-color: rgba(244,151,31,.20); }
.border-\[\#F4A024\]\/25  { border-color: rgba(244,151,31,.25); }
.border-\[\#F4A024\]\/30  { border-color: rgba(244,151,31,.30); }

/* ── 18. UTILITY: BORDER RADIUS ──────────────────────────── */
.rounded-full     { border-radius: 9999px;    margin-top: -14px; }
.rounded-xl       { border-radius: .75rem; }
.rounded-2xl      { border-radius: 1rem;   }
.rounded-3xl      { border-radius: 1.5rem; }
.rounded-\[1\.75rem\] { border-radius: 1.75rem; }
.rounded-\[2rem\]     { border-radius: 2rem;    }

/* ── 19. UTILITY: SHADOWS ─────────────────────────────────── */
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

/* ── 20. UTILITY: MISC ────────────────────────────────────── */
.overflow-hidden    { overflow: hidden; }
.pointer-events-none{ pointer-events: none; }
.object-cover       { object-fit: cover; }
.opacity-25  { opacity: .25; }
.opacity-30  { opacity: .30; }
.opacity-60  { opacity: .60; }
.opacity-80  { opacity: .80; }

/* blur */
.blur-xl  { filter: blur(24px);  }
.blur-2xl { filter: blur(40px);  }
.blur-3xl { filter: blur(64px);  }
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* transitions */
.transition        { transition: color .15s,background-color .15s,border-color .15s,opacity .15s,box-shadow .15s,transform .15s; }
.transition-colors { transition: color .15s,background-color .15s,border-color .15s; }
.duration-500      { transition-duration: 500ms; }

/* group hover */
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }


.logo-wrap{
    position: relative;
}

.cb-logo{
    width: 150px;
    max-width: none;
    margin-top: 90px;
}
.mall-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 12px;

    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.18em;

    color:#F4971F;
    background:rgba(244,151,31,0.20);
    border:1px solid rgba(244,151,31,0.30);
    border-radius:9999px;
}
.location-text{
  text-align: left;
}
.feature-title{
  text-align: center;
    margin-top:16px;
    color:#3A1F0F;
    font-weight:700;
    font-size:20px;
    line-height:1.3;
    font-family: var(--font-heading);
}

.feature-text{
  text-align: center;
    margin-top:8px;
    color:#6B4423;
    font-size:15px;
    line-height:1.7;
}
.flagship-title{
    margin-top:24px;
    font-size:36px;
    font-weight:700;
    line-height:1.2;
    font-family: var(--font-heading);
}

.flagship-desc{
    margin-top:9px;
    font-size:16px;
    color:rgba(253,240,213,0.90);
}

.location-wrap{
    margin-top:10px;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.location-text{
    font-size:14px;
    color:rgba(253,240,213,0.80);
    line-height:1.5;
}
.investment-stats{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:left;
}

.stat-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.stat-num{
    font-size:24px;
    font-weight:700;
    line-height:1;
}

.stat-label{
    margin-top:4px;
    font-size:12px;
    line-height:1.3;
    color:#6B4423;
}
.solution-section{
  padding-top: 20px;
  padding-bottom: 50px;
}
.offer-section{
  padding-top: 50px;
  padding-bottom: 60px;
}
.why-now{
  padding: 80px;
}

/* ── INVEST ACCORDION ─────────────────────────────────── */
.invest-accordion {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
  margin:24px auto 0;
}
@media(max-width:639px){
  .invest-accordion { gap: 8px; }
}
@media(min-width:640px){
  .invest-accordion { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.invest-accordion-col {
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:flex-start;
}

.accordion-item {
  background:#fff;
  border:1px solid rgba(58,31,15,.10);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 6px rgba(58,31,15,.05);
  transition:box-shadow .25s ease;
}
.accordion-item.open {
  box-shadow:0 4px 18px rgba(58,31,15,.09);
  border-color:rgba(244,151,31,.35);
}

.accordion-header {
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  cursor:pointer;
  background:none;
  border:none;
  text-align:left;
  transition:background .2s ease;
}
.accordion-header:hover { background:rgba(244,151,31,.04); }

.acc-icon {
  width:36px; height:36px; flex-shrink:0;
  border-radius:8px;
  background:rgba(58,31,15,.08);
  color:#3A1F0F;
  display:flex; align-items:center; justify-content:center;
}
.accordion-item.open .acc-icon {
  background:rgba(244,151,31,.15);
  color:#F4971F;
}

.acc-title {
  flex:1;
  font-weight:700;
  font-size:15px;
  color:#3A1F0F;
  line-height:1.3;
  font-family: var(--font-heading);
}

.acc-chevron {
  flex-shrink:0;
  color:#F4971F;
  transition:transform .3s ease;
}
.accordion-item.open .acc-chevron { transform:rotate(180deg); }

.accordion-body {
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  contain: layout;
}
.accordion-item.open .accordion-body { max-height:120px; }

.acc-text {
  padding:0 18px 14px 66px;
  color:#6B4423;
  font-size:14px;
  line-height:1.7;
  margin:0;
}

@media (max-width:640px) {
  .acc-text { padding:0 14px 12px 14px; }
}
.form-section{
  padding: 60px;
  padding-bottom: 50px !important;
}
.invest-section{
  padding: 40px 30px;
}
.story-section{
  padding: 50px;
}
@media (min-width:768px){
  
    .investment-stats{
            grid-template-columns: repeat(3, 1fr);
        gap:16px;
    }

    .stat-item{
        text-align:left;
    }

    .stat-num{
        font-size:30px;
    }

    .stat-label{
        font-size:14px;
    }
}
@media (max-width:767px){
    .revenue-value{
        font-size:16px !important;
        line-height:1.3;
    }
}
/* Mobile */
@media (max-width:767px){

    .flagship-title{
        font-size:28px;
        text-align:center;
    }

    .flagship-desc{
        text-align:center;
    }

    .location-wrap{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .location-text{
        text-align:center;
    }
}

@media (max-width:767px){
    .feature-title{
        font-size:18px;
        text-align:center;
    }

    .feature-text{
        font-size:14px;
        text-align:center;
    }
}

@media (max-width:767px){
    .mall-badge{
        margin:0 auto;
    }
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.stat-card{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(244,151,31,0.20);
    border-radius:16px;
    padding:20px;
}

.stat-number{
    font-family: var(--font-heading);
    font-size:30px;
    font-weight:700;
    color:#F4971F;
    line-height:1;
}

.stat-text{
    margin-top:6px;
    font-size:13px;
    line-height:1.4;
    color:rgba(245,245,245,0.80);
}

/* Mobile */
@media (max-width:767px){
    .stats-grid{
        grid-template-columns:repeat(1,2fr);
        gap:12px;
    }

    .stat-card{
        padding:16px;
        text-align:center;
    }

    .stat-number{
        font-size:24px;
    }

    .stat-text{
        font-size:12px;
    }
}
@media (max-width:767px){

    .bg-\[\#3A0F0F\] .relative{
        text-align:center;
    }

    .bg-\[\#3A0F0F\] .flex.items-center{
        justify-content:center;
    }

    .bg-\[\#3A0F0F\] p{
        text-align:center;
    }

    .bg-\[\#3A0F0F\] .border-t{
        text-align:center;
    }
}

/* Mobile */

@media (max-width: 767px){
    .cb-logo{
              width: 130px;
        margin-top: 11px;
    }
    
    .h-display {
       margin-top: 56px;
    font-size: 35px;
    text-align: center;
    line-height: 1.1;
  }
  .rounded-full {
    border-radius: 9999px;
    margin-top: -35px;
}
 .md\:text-xl   { font-size: 22px !important; line-height: 1.75rem;text-align: center; }
  .mt-8.flex.flex-wrap.gap-3.sm\:gap-4 {
    justify-content: center;
    text-align: center;
  }
      .mt-8.flex.flex-wrap.gap-3.sm\:gap-4 {
        margin-top: 20px;}
  
.stat-num {
    font-size: 22px !important;
  }
  .text-\[\#6B4423\] {
    font-size: 15px;
}
.text-\[\#3A2515\] {
    margin-top: 3px;
}
.eyebrow {
    justify-content: center;
    text-align: center;
  }
   #problem p {
    font-size: 13px;
    text-align: center;
  }
  .h-section{
    text-align: center;
  }
  .backdrop-blur-sm {
    font-size: 12px !important;
    text-align: center;}
    .w-12.h-12.object-contain {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .h-section + p {
    text-align: center;
    font-size:20px ;
  }
  .mt-8.grid.grid-cols-2.sm\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .cb-card {
    padding: 12px !important;
  }

  .cb-card .text-2xl {
    font-size: 22px !important;
    line-height: 1.2;
  }

  .cb-card .text-xs {
    font-size: 11px !important;
    line-height: 1.3;
  }
  .tag-list{
        display: none;
    }
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .gallery-grid img {
        height: 220px !important;
        margin-top: 0 !important;
    }
    .text-\[\#6B4423\] {
}
.revenue-icon{
    margin-top: -15px;
}
.mt-1.font-display.font-bold.text-lg.sm\:text-xl.text-\[\#3A2515\] {
    font-size: 12px;
  }
}



#master .mt-7.grid .flex {
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}

#master .mt-7.grid .flex span {
  white-space: nowrap;
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
 footer{
  background:#3A1F0F;
  padding:30px 30px;
  display:flex;align-items:center;justify-content:space-between;  text-align:center;flex-direction:column;text-align:center;;
  border-top:1px solid rgba(244,151,31,.15);flex-wrap:wrap;gap:10px;
}
.footer-brand{display:flex;align-items:center;gap:10px;flex-direction:column;text-align: center;margin-top: 15px;}
.footer-brand .hexmark{width:32px;height:32px}
.footer-brand .hexmark .hm{font-size:13px}
.footer-words .fn{
  font-family: var(--font-body);
  font-weight:600;
  color:rgba(249,245,236,.7);
}
.footer-words .fs{font-family: var(--font-body);font-size:10px;color:#F4971F;letter-spacing:1.5px;text-transform:uppercase;margin-top:0px}
.footer-center p{font-size:12px;text-align:center}
.footer-right{font-size:11px;text-align:center;line-height:1.7}
.footer-right p{
  font-size: 15px;
  color: rgba(245,245,245,0.6);
}

.footer-center p
{
  color:rgba(245,245,245,0.85);
    margin:4px 0;
    font-size: 15px;
    margin-bottom: 5px;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px){
    .cb-logo{
        width: 120px;
        margin-top: 70px;
    }
}

/* Desktop */
@media (min-width: 1024px){
    .cb-logo{
        width: 112px;
        margin-top: 68px;
    }
}

/* ── 21. RESPONSIVE BREAKPOINTS ───────────────────────────── */
@media (min-width: 640px) {
  .sm\:flex  { display: flex; }
  .sm\:w-auto { width: auto; }
  .sm\:h-64  { height: 16rem; }
  .sm\:h-\[480px\] { height: 480px; }
  .sm\:rounded-2xl { border-radius: 1rem; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:p-7 { padding: 29px; }
  .sm\:p-8 { padding: 2rem;   }
  .sm\:p-10{ padding: 2.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .sm\:gap-4  { gap: 1rem; }
  .sm\:gap-6  { gap: 1.5rem; }
  .sm\:text-sm  { font-size: .875rem; line-height: 1.25rem; }
  .sm\:text-base{ font-size: 1rem;    line-height: 1.5rem;  }
  .sm\:text-xl  { font-size: 22px; line-height: 1.75rem; }
  .sm\:text-3xl { font-size: 1.875rem;line-height: 2.25rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem;  }
  .sm\:text-\[11px\] { font-size: 11px; }
  .sm\:text-\[13px\] { font-size: 14px; }
  .sm\:text-\[15px\] { font-size: 14px; }
}

@media (min-width: 768px) {
  .md\:flex  { display: flex; }
  .md\:w-11  { width: 2.75rem; }
  .md\:h-11  { height: 2.75rem; }
  .md\:mt-20 { margin-top: 5rem; }
  .md\:pt-32 { padding-top: 8rem; }
  .md\:pb-20 { padding-bottom: 5rem; }
  .md\:py-4  { padding-top: 1rem;   padding-bottom: 1rem; }
  .md\:py-16 { padding-top: 4rem;   padding-bottom: 4rem; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2,  minmax(0,1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3,  minmax(0,1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .md\:col-span-3   { grid-column: span 3; }
  .md\:col-span-4   { grid-column: span 4; }
  .md\:col-span-5   { grid-column: span 5; }
  .md\:text-base { font-size: 1rem;    line-height: 1.5rem;  }
  .md\:text-lg   { font-size: 1.125rem;line-height: 1.75rem; }
  .md\:text-3xl  { font-size: 1.875rem;line-height: 2.25rem; }
  .md\:text-\[11px\] { font-size: 11px; }
}

@media (min-width: 1024px) {
  .lg\:flex   { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:h-\[560px\] { height: 560px; }
  .lg\:pt-36  { padding-top:    9rem; }
  .lg\:pb-24  { padding-bottom: 3rem; }
  .lg\:p-10   { padding: 30px; }
  .lg\:p-12   { padding: 3rem;   }
  .lg\:gap-8  { gap: 2rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2,  minmax(0,1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3,  minmax(0,1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4,  minmax(0,1fr)); }
  .lg\:grid-cols-5  { grid-template-columns: repeat(5,  minmax(0,1fr)); }
  .lg\:grid-cols-6  { grid-template-columns: repeat(6,  minmax(0,1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .lg\:col-span-5   { grid-column: span 5; }
  .lg\:col-span-6   { grid-column: span 6; }
  .lg\:col-span-7   { grid-column: span 7; }
  .lg\:-left-8  { left: -2rem;   }
  .lg\:-right-6 { right: -1.5rem;}
}

/* ── 22. RESPONSIVE COMPONENT TWEAKS ──────────────────────── */
@media (max-width: 1024px) {
  .section      { padding: 4.5rem 0; }
  .container-cb { padding: 0 1.5rem;
  padding-top: 20px; }
}
@media (min-width:1024px) and (max-width:1199px) {
    #hero .mt-16{
        width: fit-content !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        background: #3A1F0F;
        overflow: hidden;
    }
}

@media (min-width:1200px){
    #hero .mt-16{
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

@media (min-width:1024px){
  .ticker-track > div:last-child{
      display: none;
  }
}
@media (max-width: 768px) {
  .section      { padding: 3.5rem 0; }
  .container-cb { padding: 0 1.25rem; }
  .form-section { padding: 2rem 0; }
  .form-section .mt-10 > .flex { align-items: flex-start; }
}
@media (max-width: 480px) {
  .section      { padding: 1.75rem 0; }
  .container-cb { padding: 0 1rem; justify-content: center;}
  .form-section { padding: 1.5rem 0; }
}


@media (max-width:767px){

    /* Top badge */
    .risk-section .flex.items-center{
        justify-content:center;
        text-align:center;
        white-space: nowrap;
    }

    /* Heading */
    .risk-section h3{
        text-align:center;
        font-size:24px;
    }

    /* Risk points */
    .risk-section .grid > div{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:8px;
        white-space: nowrap;
    }

    /* Icons */
    .risk-section .grid > div svg{
        margin:0;
        
    }

    /* Text */
    .risk-section .grid > div span{
        
        white-space: nowrap;
        margin: auto;
    }

    /* Button */
    .risk-section .btn-cb{
        width:100%;
        justify-content:center;
    }
    /* In styles.css */
#master .bg-\[\#FFF6E4\]\/5 span,
#master .flex.items-start span {
  white-space: nowrap;
}
}
@media (max-width: 767px) {


  /* ── HERO: Stats bar — dark brown background, stacked rows ── */
.investment-stats {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 60px;

    display: flex;       /* IMPORTANT */
    flex-direction: column;

    overflow: hidden;
}
.stat-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
}

.stat-num,
.stat-label {
    display: inline-block !important;
    margin: 0 !important;
}
.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
}
.stat-label {
    margin-top: 0;
}

  .stat-item:last-child {
    border-bottom: none;
  }

.stat-num,
.stat-label {
    font-size: 18px;
    font-weight: 600;
    color: #FFF6E4;
}

  .stat-item:nth-child(1) {
    background: #2A1508; /* Brand Primary Dark */
    gap:6px;
}

/* Second Item */
.stat-item:nth-child(2) {
    background: #3A1F0F; /* Brand Primary */
    gap:6px;
}

/* Third Item */
.stat-item:nth-child(3) {
    background: #4A2810; /* Brand Primary Light */
    gap:6px;
}


.border-\[\#7B1E1E\]\/30
 {
    padding-bottom: 30px;}
    .h-section{
      font-size: 24px;
    }

}
.price-responsive {
  text-align: left;
}

@media (max-width: 640px) {
  .price-responsive {
    text-align: center;
  }
}


@media (max-width: 767px) {
  #apply .flex.gap-4 {
    align-items: center !important;
    display: flex !important;
  }
  #apply .flex.gap-4 > div:first-child {
    margin-top: 0 !important;
  }
}
.btn-center{
  display: block;
  width: calc(100% - 80px); /* 40px gap on each side */
  margin: 28px auto 0;
}
 .mobile-cta {
  display: block;
}

/* keep visible on desktop too, just restyle as a normal in-card button */
@media (min-width: 640px) {
  .mobile-cta {
    display: block !important;
    margin: 1.25rem auto 0 !important;
    padding: 0.6rem 1.4rem !important;
    width: fit-content !important;
    border-radius: 9999px !important;
    text-align: center !important;
  }
}


/* ─── FORMATS SECTION: CENTER HEADING + CARD CONTENT ─── */
#formats .flex.items-start.justify-between.gap-3.flex-wrap {
  justify-content: center;
}
#formats h3.font-display,
#formats .flagship-title {
  text-align: center;
}
#formats > .container-cb > div > p,
#formats h3.font-display + p,
#formats .flagship-title + p,
#formats .flagship-desc {
  text-align: center;
}
#formats .mt-3.inline-flex,
#formats .location-wrap {
  justify-content: center;
  width: 100%;
  text-align: center;
}
#formats .location-text {
  text-align: center;
}
#formats .grid.grid-cols-1.sm\:grid-cols-2.gap-4 > div,
#formats .grid.grid-cols-1.sm\:grid-cols-2.gap-4 > div.col-span-2 > div {
  text-align: center;
}
#formats .flex.items-center.gap-1\.5 {
  justify-content: center;
}
#formats .mt-1.font-display {
  text-align: center;
}


/* ─── APPLY SECTION: align step icon with text vertically ─── */
#apply .flex.gap-4 {
  align-items: center;
}


/* ─── SOLUTION SECTION: center card content, remove top spacing ─── */
#solution .cb-card h3.h-sub,
#solution .cb-card p {
  text-align: center;
}
#solution .cb-card .relative {
  text-align: center;
}
#solution .cb-card .w-12.h-12 {
  display: none;
}
#solution .cb-card h3.h-sub {
  margin-top: 0;
}


/* ─── WHY-NOW SECTION: center icon + heading + text in tailwind cards ─── */
.why-now .bg-\[\#FFF6E4\]\/5.border.border-\[\#F4A024\]\/20.rounded-2xl {
  text-align: center;
}
.why-now .bg-\[\#FFF6E4\]\/5.border.border-\[\#F4A024\]\/20.rounded-2xl img {
  margin-left: auto;
  margin-right: auto;
}

.why-now .bg-\[\#3A0F0F\].border.border-\[\#F4A024\]\/25.rounded-2xl {
  text-align: center;
}
.why-now .bg-\[\#3A0F0F\].border.border-\[\#F4A024\]\/25.rounded-2xl .flex.items-center.gap-2 {
  justify-content: center ;
}

/* ─── ZONE CARDS: force price centering ─── */
.why-now .bg-\[\#3A0F0F\].border.border-\[\#F4A024\]\/25.rounded-2xl .mt-5 {
  text-align: center !important;
}
.why-now .bg-\[\#3A0F0F\].border.border-\[\#F4A024\]\/25.rounded-2xl .mt-5 div {
  text-align: center !important;
}

.boxes,.a-protected-boxes{
  margin-top: 35px !important;
}