/* ===========================================================
   FOZIQO — App Harmonized Theme Design System
   Matches Foziqo Food Delivery App (Burnt Sienna & Golden Sand)
   =========================================================== */

:root {
  --orange: #9B3E25;
  --orange-deep: #883620;
  --amber: #E0A951;
  --red: #8C331B;
  --cyan: #01B6DC;
  --blue: #0025D5;
  --leaf: #37A005;
  --cream: #FAF6F0;
  --cream-2: #F5ECE0;
  --paper: #FAF6F0;
  --ink: #1F1917;
  --ink-soft: #4A3E39;
  --ring: rgba(155, 62, 37, .35);
  --shadow-warm: 0 24px 60px -18px rgba(155, 62, 37, .35);
  --shadow-soft: 0 18px 50px -20px rgba(31, 25, 23, .22);
}

* {
  -webkit-tap-highlight-color: transparent
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

/* keep anchored sections clear of the fixed navbar */
section[id],
div[id="contact"] {
  scroll-margin-top: 96px
}

body {
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
}

/* ---------- Custom Slim Scrollbar for Dropdowns ---------- */
.custom-dropdown-scroll::-webkit-scrollbar {
  width: 5px;
}
.custom-dropdown-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 9999px;
  margin: 6px 2px;
}
.custom-dropdown-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9B3E25 0%, #E0A951 100%);
  border-radius: 9999px;
}
.custom-dropdown-scroll::-webkit-scrollbar-thumb:hover {
  background: #E0A951;
}
.custom-dropdown-scroll {
  scrollbar-width: thin;
  scrollbar-color: #9B3E25 rgba(255, 255, 255, 0.04);
}

/* ---------- Typography helpers ---------- */
.font-display {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-optical-sizing: auto;
  letter-spacing: -.02em
}

.font-body {
  font-family: 'Manrope', system-ui, sans-serif
}

.font-accent {
  font-family: 'Fraunces', Georgia, serif
}

.tight {
  letter-spacing: -.035em;
  line-height: .94
}

.balance {
  text-wrap: balance
}

.pretty {
  text-wrap: pretty
}

/* Gradient text in brand theme */
.grad-citrus {
  background: linear-gradient(96deg, #E0A951 0%, #9B3E25 45%, #8C331B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-cool {
  background: linear-gradient(96deg, #01B6DC 0%, #0F6BE8 55%, #0025D5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Texture & atmosphere ---------- */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mesh {
  background:
    radial-gradient(48% 60% at 8% 6%, rgba(224, 169, 81, .28) 0%, transparent 62%),
    radial-gradient(42% 52% at 96% 12%, rgba(155, 62, 37, .18) 0%, transparent 60%),
    radial-gradient(50% 48% at 78% 92%, rgba(1, 182, 220, .14) 0%, transparent 62%),
    radial-gradient(60% 60% at 40% 100%, rgba(224, 169, 81, .25) 0%, transparent 65%),
    linear-gradient(180deg, #FBF6EF 0%, #FAF6F0 45%, #F5ECE0 100%);
}

.dotgrid {
  background-image: radial-gradient(rgba(155, 62, 37, .16) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

.hatch {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 9px);
}

/* Speed lines — signature motif lifted from the logo */
.speedlines {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none
}

.speedlines i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--orange) 100%);
  animation: whoosh 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

.speedlines i:nth-child(1) {
  width: 74px;
  animation-delay: 0s
}

.speedlines i:nth-child(2) {
  width: 112px;
  animation-delay: .18s
}

.speedlines i:nth-child(3) {
  width: 58px;
  animation-delay: .36s
}

@keyframes whoosh {
  0% {
    transform: translateX(-14px) scaleX(.7);
    opacity: .15
  }

  45% {
    transform: translateX(0) scaleX(1);
    opacity: 1
  }

  100% {
    transform: translateX(16px) scaleX(.72);
    opacity: .1
  }
}

/* ---------- Surfaces ---------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(31, 25, 23, .07);
  border-radius: 26px;
  box-shadow: 0 2px 0 rgba(31, 25, 23, .04), var(--shadow-soft);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s, border-color .5s;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px -26px rgba(155, 62, 37, .42);
  border-color: rgba(155, 62, 37, .28)
}

.card-tint {
  background: linear-gradient(168deg, #fff 0%, #FAF4EE 100%)
}

.glass {
  background: rgba(250, 246, 240, .78);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .6);
}

.ring-soft {
  box-shadow: 0 0 0 1px rgba(155, 62, 37, .16), 0 18px 44px -22px rgba(155, 62, 37, .4)
}

/* Pill / chip like the app filter row */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: .82rem;
  background: #fff;
  border: 1px solid rgba(31, 25, 23, .09);
  color: var(--ink);
  box-shadow: 0 6px 14px -8px rgba(31, 25, 23, .2);
  transition: .35s cubic-bezier(.16, 1, .3, 1);
}

.chip:hover {
  transform: translateY(-3px);
  border-color: var(--ring)
}

.chip-active {
  background: linear-gradient(180deg, #9B3E25, #883620);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 24px -10px rgba(155, 62, 37, .65)
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 800;
  border-radius: 99px;
  padding: .95rem 1.6rem;
  font-size: .95rem;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s, filter .3s;
  will-change: transform;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #9B3E25 0%, #B44C27 50%, #E0A951 100%);
  box-shadow: 0 12px 26px -10px rgba(155, 62, 37, .65), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 40px -12px rgba(155, 62, 37, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
  background: linear-gradient(135deg, #A8452B 0%, #C2532D 50%, #EAB35B 100%);
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .55) 48%, transparent 76%);
  transform: translateX(-120%);
  transition: opacity .2s;
}

.btn-primary:hover::after {
  opacity: 1;
  animation: sheen .85s cubic-bezier(.3, 0, .3, 1)
}

@keyframes sheen {
  to {
    transform: translateX(120%)
  }
}

.btn-ink {
  color: #fff;
  background: linear-gradient(180deg, #1F1917, #111827);
  box-shadow: 0 12px 26px -12px rgba(31, 25, 23, .6)
}

.btn-ink:hover {
  transform: translateY(-3px) scale(1.02)
}

.btn-ghost {
  color: var(--ink);
  background: #fff;
  border: 1.5px solid rgba(31, 25, 23, .1);
  box-shadow: 0 8px 20px -12px rgba(31, 25, 23, .3)
}

.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--ring);
  color: var(--orange-deep)
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1)
}

.reveal.in {
  opacity: 1;
  transform: none
}

.reveal-l {
  opacity: 0;
  transform: translateX(-34px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1)
}

.reveal-r {
  opacity: 0;
  transform: translateX(34px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1)
}

.reveal-l.in,
.reveal-r.in {
  opacity: 1;
  transform: none
}

.reveal-s {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1)
}

.reveal-s.in {
  opacity: 1;
  transform: none
}

/* Hero entrance stagger */
.rise {
  opacity: 0;
  transform: translateY(26px);
  animation: rise .95s cubic-bezier(.16, 1, .3, 1) forwards
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none
  }
}

/* ---------- Ambient motion ---------- */
@keyframes float-a {

  0%,
  100% {
    transform: translateY(0) rotate(0)
  }

  50% {
    transform: translateY(-16px) rotate(2.5deg)
  }
}

@keyframes float-b {

  0%,
  100% {
    transform: translateY(0) rotate(0)
  }

  50% {
    transform: translateY(-24px) rotate(-3deg)
  }
}

@keyframes float-c {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

.float-a {
  animation: float-a 6s ease-in-out infinite
}

.float-b {
  animation: float-b 8s ease-in-out infinite
}

.float-c {
  animation: float-c 4.5s ease-in-out infinite
}

/* When an element needs BOTH the entrance fade and an ambient float,
   the two `animation` shorthands would clobber each other. Declare them
   together at higher specificity so opacity + float both run. */
.rise.float-a {
  animation: rise .95s cubic-bezier(.16, 1, .3, 1) forwards, float-a 6s ease-in-out infinite
}

.rise.float-b {
  animation: rise .95s cubic-bezier(.16, 1, .3, 1) forwards, float-b 8s ease-in-out infinite
}

.rise.float-c {
  animation: rise .95s cubic-bezier(.16, 1, .3, 1) forwards, float-c 4.5s ease-in-out infinite
}

.reveal.in.float-a,
.reveal-s.in.float-a {
  animation: float-a 6s ease-in-out infinite
}

.reveal.in.float-b,
.reveal-s.in.float-b {
  animation: float-b 8s ease-in-out infinite
}

.reveal.in.float-c,
.reveal-s.in.float-c {
  animation: float-c 4.5s ease-in-out infinite
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg)
  }
}

.spin-slow {
  animation: spin-slow 26s linear infinite
}

.spin-rev {
  animation: spin-slow 34s linear infinite reverse
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(155, 62, 37, .5)
  }

  70% {
    box-shadow: 0 0 0 22px rgba(155, 62, 37, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(155, 62, 37, 0)
  }
}

.pulse-ring {
  animation: pulse-ring 2.4s cubic-bezier(.4, 0, .2, 1) infinite
}

@keyframes blob {

  0%,
  100% {
    border-radius: 44% 56% 62% 38%/48% 42% 58% 52%;
    transform: rotate(0)
  }

  50% {
    border-radius: 60% 40% 38% 62%/58% 56% 44% 42%;
    transform: rotate(8deg)
  }
}

.blob {
  animation: blob 16s ease-in-out infinite
}

/* ---------- Marquee ---------- */
.marquee {
  display: flex;
  gap: 0;
  width: max-content;
  animation: slide 26s linear infinite
}

.marquee-rev {
  animation-direction: reverse
}

@keyframes slide {
  to {
    transform: translateX(-50%)
  }
}

.marquee-wrap:hover .marquee {
  animation-play-state: paused
}

/* ---------- Word rotator ---------- */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden
}

.rotator span {
  grid-area: 1/1;
  opacity: 0;
  transform: translateY(100%) rotate(6deg);
  animation: rot 9s cubic-bezier(.16, 1, .3, 1) infinite;
}

.rotator span:nth-child(1) {
  animation-delay: 0s
}

.rotator span:nth-child(2) {
  animation-delay: 3s
}

.rotator span:nth-child(3) {
  animation-delay: 6s
}

@keyframes rot {
  0% {
    opacity: 0;
    transform: translateY(100%) rotate(6deg)
  }

  6%,
  29% {
    opacity: 1;
    transform: none
  }

  36%,
  100% {
    opacity: 0;
    transform: translateY(-100%) rotate(-6deg)
  }
}

/* ---------- Device frames ---------- */
.phone {
  position: relative;
  border-radius: 44px;
  padding: 9px;
  background: linear-gradient(160deg, #2B3240 0%, #0B0F16 45%, #242B37 100%);
  box-shadow: 0 44px 90px -30px rgba(17, 24, 39, .6), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.phone::before {
  /* content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:32%; max-width:82px; height:13px; background:#05070B; border-radius:99px; z-index:3; */
}

.phone img {
  border-radius: 35px;
  display: block;
  width: 100%;
  height: auto
}

.browser {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 44px 90px -34px rgba(17, 24, 39, .5), 0 0 0 1px rgba(17, 24, 39, .08);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #F5F3F0, #EAE7E2);
  border-bottom: 1px solid rgba(17, 24, 39, .08);
}

.browser-bar b {
  width: 11px;
  height: 11px;
  border-radius: 99px;
  display: block
}

/* ---------- Feature tabs ---------- */
.tab-panel {
  display: none
}

.tab-panel.active {
  display: block;
  animation: fade-up .6s cubic-bezier(.16, 1, .3, 1)
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ---------- Accordion ---------- */
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.16, 1, .3, 1), opacity .4s;
  opacity: 0
}

.acc.open .acc-body {
  opacity: 1
}

.acc.open .acc-icon {
  transform: rotate(45deg);
  background: var(--orange);
  color: #fff
}

/* ---------- Step connector ---------- */
.dashline {
  background-image: linear-gradient(90deg, rgba(155, 62, 37, .55) 55%, transparent 55%);
  background-size: 16px 3px;
  background-repeat: repeat-x;
}

/* ---------- Typewriter (AI section) ---------- */
.caret::after {
  content: "▌";
  color: var(--orange);
  animation: blink 1s steps(1) infinite;
  margin-left: 2px;
  font-weight: 400;
}

@keyframes blink {
  50% {
    opacity: 0
  }
}

/* ---------- Misc ---------- */
.scroll-prog {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  z-index: 90;
  width: 0;
  background: linear-gradient(90deg, #E0A951, #9B3E25 40%, #8C331B 70%, #01B6DC 100%);
  box-shadow: 0 0 14px rgba(155, 62, 37, .7);
}

.underline-grow {
  position: relative
}

.underline-grow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2.5px;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--amber), var(--orange));
  transition: width .35s cubic-bezier(.16, 1, .3, 1);
}

.underline-grow:hover::after,
.underline-grow[aria-current="true"]::after {
  width: 100%
}

.stars {
  color: #FFB300;
  letter-spacing: .06em
}

.hide-scroll::-webkit-scrollbar {
  display: none
}

.hide-scroll {
  scrollbar-width: none
}

::selection {
  background: var(--orange);
  color: #fff
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 8px
}

::-webkit-scrollbar {
  width: 11px
}

::-webkit-scrollbar-track {
  background: #F5ECE0
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9B3E25, #883620);
  border-radius: 9px;
  border: 2px solid #F5ECE0
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .reveal,
  .reveal-l,
  .reveal-r,
  .reveal-s,
  .rise {
    opacity: 1 !important;
    transform: none !important
  }
}