/* ====================================================================
   TAVON — Apple-light Design System
   ==================================================================== */

@font-face{
  font-family:'Tavon';
  src:url('assets/Tavon-Regular.otf') format('opentype');
  font-weight:400;
  font-display:swap;
}

:root{
  /* color */
  --bg:        #fbfaf7;
  --bg-2:      #f5f3ee;
  --bg-3:      #efece4;
  --surface:   #ffffff;
  --surface-2: #fafaf7;
  --ink:       #0a0a0a;
  --ink-2:     #1d1d1f;
  --ink-3:     #2a2825;
  --text:      #1d1d1f;
  --muted:     #6e6e73;
  --soft:      #86868b;
  --faint:     rgba(29,29,31,.32);
  --line:      rgba(20,18,14,.07);
  --line-2:    rgba(20,18,14,.14);
  --gold:      #b9a784;
  --gold-2:    #cfb98e;
  --gold-deep: #8a7a5e;
  --success:   #1f9d55;
  --warning:   #b98300;
  --danger:    #e02e2a;

  /* dark surfaces for hero accents */
  --hero-ink:  #0a0a0a;

  /* shadows */
  --shadow-1: 0 1px 2px rgba(20,18,14,.04), 0 1px 1px rgba(20,18,14,.02);
  --shadow-2: 0 1px 2px rgba(20,18,14,.04), 0 6px 16px rgba(20,18,14,.05);
  --shadow-3: 0 2px 4px rgba(20,18,14,.04), 0 16px 40px rgba(20,18,14,.08);
  --shadow-lift: 0 1px 2px rgba(20,18,14,.05), 0 24px 60px rgba(20,18,14,.12);
  --shadow-float: 0 4px 12px rgba(20,18,14,.06), 0 40px 100px rgba(20,18,14,.18);

  /* type */
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --tavon: 'Tavon', var(--mono);

  /* motion */
  --ease: cubic-bezier(.23,1,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:rgba(185,167,132,.28);color:var(--ink)}

/* ============== TYPE ============== */
.kicker{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.kicker-ink{ color:var(--muted) }
.display{ font-weight:600; letter-spacing:-.028em; line-height:1.05; text-wrap:balance }
.display em{ font-style:italic; font-weight:500; color:var(--muted) }
.display .accent{ color:var(--gold) }

/* Tavon wordmark — uses custom font ligature */
.tavon-mark{
  font-family:var(--tavon);
  letter-spacing:0;
  line-height:1;
  color:var(--ink);
}
.tavon-mark .v-stack{
  display:inline-block;
  position:relative;
}
.tavon-mark .fork{
  position:absolute;
  left:50%;
  top:.04em;
  transform:translateX(-50%);
  font-size:.72em;
  line-height:1;
  pointer-events:none;
  color:var(--gold);
}
.tavon-mark .v-letter{ color:var(--gold) }

/* ============== NAV ============== */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:500;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .35s var(--ease), backdrop-filter .35s, height .25s, border-color .25s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(251,250,247,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--line);
}
.nav-inner{
  width:100%;
  max-width:1024px;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-logo{
  font-size:22px;
  display:inline-flex;
  align-items:baseline;
}
.nav-links{
  display:flex;
  gap:0;
  list-style:none;
}
.nav-links a{
  display:inline-block;
  padding:6px 14px;
  font-size:12px;
  font-weight:400;
  color:var(--ink-2);
  opacity:.88;
  transition:opacity .2s, color .2s;
}
.nav-links a:hover{ opacity:1; color:var(--gold-deep) }
.nav-actions{ display:flex; align-items:center; gap:10px }
.nav-cta{
  font-size:12px;
  font-weight:500;
  color:#fff;
  background:var(--ink);
  padding:7px 14px;
  border-radius:999px;
  transition:background .2s, transform .15s;
}
.nav-cta:hover{ background:#2a2a2a; transform:translateY(-1px) }
.nav-mobile{ display:none }

/* ============== HERO ============== */
.hero{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(96px,14vw,140px) 22px clamp(50px,8vw,90px);
  overflow:hidden;
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(185,167,132,.18), transparent 60%),
    radial-gradient(800px 500px at 90% 100%, rgba(185,167,132,.12), transparent 60%),
    var(--bg);
}
.hero-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.65 0 0 0 0 0.5 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; max-width:980px; width:100% }

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line-2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:36px;
  opacity:0;
  animation:fade-down .8s var(--ease-out) .15s forwards;
}
.hero-eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(185,167,132,.5);
  animation:pulse 2.2s ease infinite;
}

.hero-wordmark{
  font-family:var(--tavon);
  font-size:clamp(96px, 20vw, 240px);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--ink);
  margin-bottom:clamp(28px,5vw,52px);
  display:flex;
  justify-content:center;
  align-items:baseline;
}
.hero-wordmark .letter{
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  animation:letter-rise .9s var(--ease-out) forwards;
}
.hero-wordmark .letter.gold{ color:var(--gold) }
.hero-wordmark .v-stack{
  display:inline-block;
  position:relative;
  opacity:0;
  animation:letter-rise .9s var(--ease-out) forwards;
}
.hero-wordmark .v-stack .fork{
  position:absolute;
  left:50%;
  top:.05em;
  transform:translateX(-50%);
  font-size:.72em;
  color:var(--gold);
}
.hero-wordmark .v-stack .v-letter{ color:var(--gold) }

.hero-title{
  font-size:clamp(36px, 6.2vw, 88px);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.04;
  margin-bottom:22px;
  color:var(--ink);
  text-wrap:balance;
  opacity:0;
  animation:fade-up 1s var(--ease-out) 1s forwards;
}
.hero-title em{
  font-style:italic;
  font-weight:400;
  color:var(--muted);
}
.hero-sub{
  font-size:clamp(17px, 1.7vw, 22px);
  color:var(--muted);
  max-width:640px;
  margin:0 auto 40px;
  line-height:1.5;
  letter-spacing:-.011em;
  opacity:0;
  animation:fade-up 1s var(--ease-out) 1.2s forwards;
}
.hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  opacity:0;
  animation:fade-up 1s var(--ease-out) 1.4s forwards;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 24px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.005em;
  transition:transform .2s, background .2s, color .2s, box-shadow .25s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12);
}
.btn-primary:hover{ background:#2a2a2a; transform:translateY(-1px); box-shadow:0 1px 2px rgba(0,0,0,.08), 0 14px 32px rgba(0,0,0,.18) }
.btn-ghost{
  background:rgba(255,255,255,.6);
  color:var(--ink);
  border:1px solid var(--line-2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{ background:#fff; transform:translateY(-1px); border-color:rgba(20,18,14,.22) }
.btn-arrow{ font-size:14px; transition:transform .25s }
.btn:hover .btn-arrow{ transform:translateX(3px) }

.hero-scroll{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:0;
  animation:fade-up 1s ease 2.2s forwards;
}
.hero-scroll-label{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--faint);
}
.hero-scroll-bar{
  width:1px; height:44px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:scroll-bar 2.4s ease infinite;
  transform-origin:top;
}

/* ============== SECTION CHROME ============== */
.section{
  padding:clamp(80px, 12vw, 160px) 22px;
  position:relative;
}
.section-wide{ padding-left:0; padding-right:0 }
.section-alt{ background:var(--bg-2) }
.section-dark{ background:var(--ink); color:#fff }
.section-dark .kicker{ color:var(--gold-2) }
.section-dark .display{ color:#fff }
.section-dark .display em{ color:rgba(255,255,255,.5) }
.section-dark .sec-text{ color:rgba(255,255,255,.6) }

.container{ max-width:1080px; margin:0 auto }
.container-wide{ max-width:1280px; margin:0 auto }
.container-narrow{ max-width:780px; margin:0 auto }

.sec-head{
  margin-bottom:clamp(48px, 7vw, 88px);
  text-align:center;
}
.sec-head .kicker{ margin-bottom:18px; display:inline-block }
.sec-head h2{
  font-size:clamp(34px, 5.5vw, 68px);
  font-weight:600;
  letter-spacing:-.024em;
  line-height:1.05;
  margin-bottom:18px;
  color:var(--ink);
  text-wrap:balance;
}
.sec-head h2 em{
  font-style:italic;
  font-weight:400;
  color:var(--muted);
}
.section-dark .sec-head h2{ color:#fff }
.section-dark .sec-head h2 em{ color:rgba(255,255,255,.45) }
.sec-text{
  font-size:clamp(17px, 1.5vw, 21px);
  color:var(--muted);
  max-width:640px;
  margin:0 auto;
  line-height:1.5;
  text-wrap:pretty;
}
.sec-head--left{ text-align:left }
.sec-head--left .sec-text{ margin:0 }

/* reveal */
.rev{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) }
.rev.on{ opacity:1; transform:translateY(0) }
.rev-delay-1{ transition-delay:.08s }
.rev-delay-2{ transition-delay:.16s }
.rev-delay-3{ transition-delay:.24s }
.rev-delay-4{ transition-delay:.32s }

/* ============== DEVICE / MACOS WINDOW ============== */
.macwin{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-lift);
  overflow:hidden;
  position:relative;
}
.macwin-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, #f7f5f0, #f0eee8);
  position:relative;
}
.macwin-dots{ display:flex; gap:8px }
.macwin-dot{ width:12px; height:12px; border-radius:50%; background:#dcdbd6 }
.macwin-dot.r{ background:#ff5f57 }
.macwin-dot.y{ background:#febc2e }
.macwin-dot.g{ background:#28c840 }
.macwin-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-2);
  letter-spacing:-.005em;
}
.macwin-title small{
  color:var(--muted);
  font-weight:400;
  margin-left:4px;
}

/* ============== CARDÁPIO (matches real screenshot) ============== */
.cardapio-app{
  display:grid;
  grid-template-rows:auto auto 1fr;
  background:var(--surface);
  font-size:14px;
  height:720px;
}
.cardapio-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:18px 28px;
  border-bottom:1px solid var(--line);
}
.cardapio-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.cardapio-brand .mark{
  font-family:var(--tavon);
  font-size:26px;
  color:var(--ink);
  line-height:1;
  display:inline-flex;
  align-items:baseline;
}
.cardapio-brand .mark .v-stack{ display:inline-block; position:relative }
.cardapio-brand .mark .v-stack .fork{
  position:absolute; left:50%; top:.04em;
  transform:translateX(-50%);
  font-size:.72em; color:var(--gold);
}
.cardapio-brand .mark .v-letter{ color:var(--gold) }
.cardapio-brand .name{ font-size:18px; font-weight:500; color:var(--ink) }
.cardapio-search{
  display:flex; align-items:center; gap:10px;
  height:46px;
  padding:0 18px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--muted);
  font-size:15px;
  max-width:520px;
  margin:0 auto;
  width:100%;
}
.cardapio-search svg{ color:var(--muted); flex-shrink:0 }
.cardapio-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.cardapio-pill{
  display:inline-flex; align-items:center; gap:8px;
  height:46px; padding:0 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-2);
}
.cardapio-pill--ghost{ background:transparent; padding:0 18px }
.cardapio-pill .icon{ color:var(--ink-2) }
.cardapio-gear{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--muted);
  background:var(--surface);
}

.cardapio-grid{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:24px;
  padding:22px 28px 32px;
  overflow:hidden;
  position:relative;
}

.cardapio-sidebar{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}
.cardapio-sidebar .head{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:4px 14px 14px;
  font-weight:500;
}
.cardapio-cat{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border:0; background:transparent;
  color:var(--ink-2);
  font-size:15px;
  font-weight:500;
  border-radius:14px;
  text-align:left;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.cardapio-cat:hover{ background:var(--bg-2) }
.cardapio-cat.active{ background:var(--ink); color:#fff }
.cardapio-cat .cat-ic{
  width:32px; height:32px;
  display:grid; place-items:center;
  flex-shrink:0;
}
.cardapio-cat .cat-ic svg{ width:22px; height:22px; opacity:.9 }
.cardapio-sidebar .foot-mark{
  margin-top:auto;
  padding:32px 16px 8px;
  text-align:left;
  font-family:var(--tavon);
  font-size:18px;
  color:var(--muted);
  opacity:.35;
}

.cardapio-main{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* DESTAQUE row */
.destaque-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.destaque-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
.destaque-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3) }
.destaque-img{
  aspect-ratio:16/10;
  position:relative;
  overflow:hidden;
}
.destaque-img .ph{ position:absolute; inset:0 }
.destaque-badge{
  position:absolute;
  top:14px; left:14px;
  padding:6px 12px;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
}
.destaque-info{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.destaque-info strong{
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.012em;
}
.destaque-info b{
  font-size:16px;
  font-weight:500;
  color:var(--muted);
}

/* Itens header */
.itens-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
}
.itens-head h3{
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.014em;
}
.itens-head .count{ font-size:14px; color:var(--muted) }

/* Item grid */
.itens-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.item-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-1);
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
.item-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3) }
.item-img{
  aspect-ratio:16/11;
  position:relative;
  overflow:hidden;
}
.item-img .ph{ position:absolute; inset:0 }
.item-time{
  position:absolute;
  top:14px; right:14px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 11px;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  font-size:12.5px;
  font-weight:500;
}
.item-info{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.item-info strong{
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.012em;
}
.item-info p{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.45;
  flex:1;
}
.item-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
}
.item-price{ font-size:16px; color:var(--ink); font-weight:500 }
.item-add{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 18px;
  background:var(--ink); color:#fff;
  border-radius:999px;
  font-size:13.5px; font-weight:500;
}

.cardapio-version{
  position:absolute;
  right:14px; bottom:6px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--faint);
  letter-spacing:.04em;
}

/* ===== Photo placeholders (warm gradients suggesting food) ===== */
.ph{ position:relative; isolation:isolate }
.ph::before, .ph::after{
  content:''; position:absolute; inset:0;
}
.ph-burger::before{
  background:
    radial-gradient(circle at 32% 65%, #8d4a23 0%, transparent 36%),
    radial-gradient(circle at 60% 42%, #d68c40 0%, transparent 42%),
    radial-gradient(circle at 78% 78%, #5c2f12 0%, transparent 40%),
    linear-gradient(160deg, #2a1a0e 0%, #4a2a14 55%, #2a1408 100%);
}
.ph-burger::after{
  background:
    radial-gradient(ellipse at 55% 50%, rgba(255,200,120,.22) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.08), transparent 50%);
}
.ph-ribs::before{
  background:
    radial-gradient(circle at 60% 55%, #5e2818 0%, transparent 50%),
    radial-gradient(ellipse 60% 30% at 50% 65%, #2a0e08 0%, transparent 60%),
    radial-gradient(circle at 22% 70%, #c43020 0%, transparent 30%),
    linear-gradient(150deg, #1a0d08 0%, #3a1c10 50%, #14080a 100%);
}
.ph-ribs::after{
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255,180,80,.18) 0%, transparent 60%);
}
.ph-drinks::before{
  background:
    radial-gradient(circle at 28% 55%, #f0d480 0%, transparent 28%),
    radial-gradient(circle at 52% 50%, #c7e070 0%, transparent 26%),
    radial-gradient(circle at 76% 58%, #b8324a 0%, transparent 30%),
    linear-gradient(170deg, #1a1410 0%, #3a2a1c 100%);
}
.ph-drinks::after{
  background:
    radial-gradient(ellipse 100% 60% at 50% 20%, rgba(255,220,150,.22) 0%, transparent 50%);
}
.ph-salmon::before{
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, #d8826a 0%, transparent 60%),
    radial-gradient(circle at 30% 30%, #b2c47a 0%, transparent 20%),
    radial-gradient(circle at 70% 35%, #d04030 0%, transparent 14%),
    linear-gradient(160deg, #f7efe2 0%, #e7d8c2 100%);
}
.ph-salmon::after{
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.4), transparent 60%);
}
.ph-cocktail::before{
  background:
    radial-gradient(ellipse 50% 60% at 30% 60%, #f7c860 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 70% 65%, #f0e8a8 0%, transparent 60%),
    linear-gradient(170deg, #f0c878 0%, #886230 100%);
}
.ph-cocktail::after{
  background: radial-gradient(ellipse at 50% 25%, rgba(255,255,255,.22), transparent 60%);
}
.ph-can::before{
  background:
    linear-gradient(160deg, #14171a 0%, #2a2e34 30%, #0a0d10 100%),
    radial-gradient(circle at 30% 50%, #3a8a4a 0%, transparent 25%);
}
.ph-can::after{
  background:
    radial-gradient(ellipse 30% 80% at 50% 50%, rgba(80,200,120,.25), transparent 70%),
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.15), transparent 50%);
}
.ph-dessert::before{
  background:
    radial-gradient(circle at 50% 55%, #4a2a18 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, #6e3a20 0%, transparent 22%),
    linear-gradient(160deg, #f4ead8 0%, #d4bea0 100%);
}
.ph-dessert::after{
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.3), transparent 60%);
}
.ph-pasta::before{
  background:
    radial-gradient(circle at 50% 55%, #e8a850 0%, transparent 45%),
    radial-gradient(circle at 40% 40%, #c8341e 0%, transparent 18%),
    radial-gradient(circle at 60% 60%, #3e7a3a 0%, transparent 14%),
    linear-gradient(160deg, #1a0e08 0%, #3a1f12 100%);
}
.ph-pasta::after{
  background: radial-gradient(ellipse at 50% 30%, rgba(255,200,100,.25), transparent 55%);
}

/* ============== Pinned showcase ============== */
.showcase{
  padding:0 0 clamp(80px,10vw,140px);
  position:relative;
}
.showcase-head{
  text-align:center;
  padding:0 22px clamp(50px,7vw,90px);
}

.pin-section{
  position:relative;
}
.pin-stage{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.pin-stage-inner{
  position:relative;
  width:min(1180px, 92vw);
  height:min(76vh, 720px);
}
.pin-mock{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(40px) scale(.96);
  transition:opacity .55s var(--ease-out), transform .65s var(--ease-out);
  pointer-events:none;
}
.pin-mock.active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.pin-text-track{
  position:relative;
}
.pin-text-screen{
  height:100vh;
  display:flex;
  align-items:center;
  pointer-events:none;
}
.pin-text-card{
  margin-left:clamp(22px, 6vw, 88px);
  max-width:380px;
  pointer-events:auto;
}
.pin-text-card .kicker{ display:block; margin-bottom:14px }
.pin-text-card h3{
  font-size:clamp(28px, 3.4vw, 44px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.08;
  color:var(--ink);
  margin-bottom:14px;
}
.pin-text-card p{
  font-size:16px;
  color:var(--muted);
  line-height:1.55;
}
.pin-progress{
  position:fixed;
  left:50%; bottom:42px;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:8px;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
}
.pin-progress.show{ opacity:1 }
.pin-progress .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--line-2);
  transition:background .25s, transform .25s;
}
.pin-progress .dot.active{
  background:var(--ink);
  transform:scale(1.4);
}

/* ============== Workflow ============== */
.wf{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  position:relative;
  counter-reset:step;
}
.wf::before{
  content:'';
  position:absolute;
  top:30px; left:11%; right:11%;
  height:1px;
  background:var(--line-2);
  z-index:0;
}
.wf-step{ position:relative; z-index:1; text-align:center }
.wf-num{
  width:60px; height:60px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line-2);
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.02em;
  transition:transform .3s, background .3s, color .3s;
}
.wf-step.on .wf-num{
  background:var(--ink);
  color:#fff;
  transform:scale(1.08);
}
.wf-step h4{
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
  letter-spacing:-.012em;
}
.wf-step p{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.55;
  max-width:240px;
  margin:0 auto;
}

/* ============== Stats ============== */
.stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  text-align:center;
}
.stat-v{
  font-size:clamp(48px, 7vw, 96px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--ink);
  margin-bottom:14px;
}
.section-dark .stat-v{
  background:linear-gradient(135deg, #f5e8c8 0%, #b9a784 60%, #8a7a5e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.stat-l{
  font-size:14.5px;
  color:var(--muted);
  letter-spacing:-.005em;
}
.section-dark .stat-l{ color:rgba(255,255,255,.55) }

/* ============== Features (bento) ============== */
.bento{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:18px;
}
.feat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
  position:relative;
  overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .35s;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:260px;
}
.feat:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-3);
}
.feat-ic{
  width:48px; height:48px;
  border-radius:14px;
  background:var(--bg-2);
  color:var(--gold-deep);
  display:grid; place-items:center;
  margin-bottom:auto;
}
.feat h4{
  font-size:20px;
  font-weight:600;
  letter-spacing:-.014em;
  color:var(--ink);
}
.feat p{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.55;
}
.feat-tag{
  align-self:flex-start;
  padding:4px 10px;
  border-radius:999px;
  background:var(--bg-2);
  color:var(--gold-deep);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
}
.feat-w2{ grid-column:span 2 }
.feat-w3{ grid-column:span 3 }
.feat-w4{ grid-column:span 4 }

/* ============== Testimonial ============== */
.testi{
  text-align:center;
  max-width:820px;
  margin:0 auto;
}
.testi q{
  display:block;
  font-size:clamp(24px, 3.4vw, 40px);
  font-weight:400;
  letter-spacing:-.018em;
  line-height:1.25;
  color:var(--ink);
  margin-bottom:36px;
  quotes:'\201C' '\201D';
  text-wrap:balance;
}
.testi q::before{ content:open-quote; color:var(--gold); margin-right:.05em }
.testi q::after{ content:close-quote; color:var(--gold); margin-left:.05em }
.testi-author{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.testi-avatar{
  width:48px; height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  display:grid; place-items:center;
  color:#fff;
  font-weight:600;
  font-size:18px;
}
.testi-meta{ text-align:left; line-height:1.4 }
.testi-meta b{ display:block; font-size:15px; font-weight:600; color:var(--ink) }
.testi-meta span{ font-size:13px; color:var(--muted) }

/* ============== CTA ============== */
.cta-card{
  max-width:980px;
  margin:0 auto;
  text-align:center;
  padding:clamp(48px, 7vw, 88px) 32px;
  background:linear-gradient(160deg, #fff 0%, #f5f3ee 100%);
  border:1px solid var(--line);
  border-radius:32px;
  box-shadow:var(--shadow-3);
  position:relative;
  overflow:hidden;
}
.cta-card::before{
  content:'';
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle at 30% 30%, rgba(185,167,132,.25), transparent 55%);
  pointer-events:none;
}
.cta-card > *{ position:relative; z-index:1 }
.cta-card .kicker{ margin-bottom:18px; display:inline-block }
.cta-card h2{
  font-size:clamp(34px, 5vw, 60px);
  font-weight:600;
  letter-spacing:-.026em;
  line-height:1.05;
  margin-bottom:18px;
  color:var(--ink);
}
.cta-card h2 em{ font-style:italic; font-weight:400; color:var(--gold-deep) }
.cta-card p{
  font-size:17px;
  color:var(--muted);
  margin-bottom:32px;
  max-width:540px;
  margin-left:auto; margin-right:auto;
}
.cta-fine{ margin-top:18px !important; font-size:13px !important; color:var(--faint) !important }

/* ============== Footer ============== */
.footer{
  padding:64px 22px 28px;
  background:var(--ink);
  color:rgba(255,255,255,.6);
  font-size:13.5px;
}
.foot-grid{
  display:grid;
  grid-template-columns:2.4fr 1fr 1fr 1fr;
  gap:48px;
  max-width:1080px;
  margin:0 auto 40px;
}
.foot-brand{ display:flex; flex-direction:column; gap:16px }
.foot-mark{ font-family:var(--tavon); font-size:28px; color:#fff; display:inline-flex; align-items:baseline }
.foot-mark .v-stack{ display:inline-block; position:relative }
.foot-mark .v-stack .fork{ position:absolute; left:50%; top:.04em; transform:translateX(-50%); font-size:.72em; color:var(--gold) }
.foot-mark .v-letter{ color:var(--gold) }
.foot-brand p{
  max-width:320px;
  color:rgba(255,255,255,.5);
  font-size:13px;
  line-height:1.6;
}
.foot-social{ display:flex; gap:10px; margin-top:6px }
.foot-social a{
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:grid; place-items:center;
  color:rgba(255,255,255,.7);
  font-size:11px;
  font-weight:600;
  transition:background .2s, color .2s, transform .2s;
}
.foot-social a:hover{ background:var(--gold); color:#0a0a0a; transform:translateY(-2px) }
.foot-col h5{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:14px;
  font-weight:500;
}
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px }
.foot-col a{
  color:rgba(255,255,255,.7);
  transition:color .2s;
  font-size:13.5px;
}
.foot-col a:hover{ color:var(--gold) }
.foot-bot{
  max-width:1080px;
  margin:0 auto;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.foot-copy{ font-size:12.5px; color:rgba(255,255,255,.4) }
.foot-copy b{ color:var(--gold); font-weight:500 }
.foot-legal{ display:flex; gap:18px; flex-wrap:wrap }
.foot-legal a{ font-size:12.5px; color:rgba(255,255,255,.4); transition:color .2s }
.foot-legal a:hover{ color:rgba(255,255,255,.9) }

/* ============== Demo Modal ============== */
.modal-overlay{
  position:fixed; inset:0;
  z-index:9000;
  background:rgba(10,10,10,.4);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:grid; place-items:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease-out);
}
.modal-overlay.open{ opacity:1; pointer-events:auto }
.modal{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(28px,4vw,44px);
  width:min(560px, 100%);
  position:relative;
  transform:translateY(20px) scale(.98);
  transition:transform .35s var(--ease-out);
  box-shadow:0 60px 120px rgba(0,0,0,.3);
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1) }
.modal-close{
  position:absolute;
  top:14px; right:14px;
  width:34px; height:34px;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--muted);
  font-size:14px;
  transition:background .2s, color .2s;
}
.modal-close:hover{ background:var(--bg-2); color:var(--ink) }
.modal h3{
  font-size:28px;
  font-weight:600;
  letter-spacing:-.022em;
  margin-bottom:8px;
  color:var(--ink);
}
.modal h3 em{ font-style:italic; font-weight:500; color:var(--gold-deep) }
.modal > p{ font-size:14.5px; color:var(--muted); margin-bottom:26px; line-height:1.55 }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.modal-field{ display:flex; flex-direction:column; gap:6px }
.modal-field.full{ grid-column:1 / -1 }
.modal-field label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.modal-field input, .modal-field textarea{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  font-size:14.5px;
  font-family:var(--sans);
  color:var(--ink);
  outline:none;
  transition:background .2s, border-color .2s, box-shadow .2s;
  width:100%;
  resize:none;
}
.modal-field input:focus, .modal-field textarea:focus{
  background:#fff;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(185,167,132,.18);
}
.modal-field input.err{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(224,46,42,.12);
}
.modal-actions{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.modal-fine{ font-size:12px; color:var(--faint) }
.modal-success{ text-align:center; padding:24px 0 8px }
.modal-success-icon{
  width:64px; height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  display:grid; place-items:center;
  color:#fff;
  font-size:30px;
}
.modal-success h4{
  font-size:22px;
  font-weight:600;
  letter-spacing:-.016em;
  margin-bottom:8px;
  color:var(--ink);
}
.modal-success p{ font-size:14.5px; color:var(--muted); line-height:1.55 }

/* ============== Marquee strip ============== */
.marquee{
  padding:18px 0;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee-item{
  display:flex; align-items:center; gap:14px;
  padding:0 28px;
  flex-shrink:0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
}
.marquee-sep{
  width:5px; height:5px; border-radius:50%;
  background:var(--gold);
  opacity:.5;
  flex-shrink:0;
}

/* ============== Animations ============== */
@keyframes fade-up{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-down{ from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes letter-rise{ to{opacity:1;transform:translateY(0)} }
@keyframes scroll-bar{
  0%{transform:scaleY(0);transform-origin:top}
  49%{transform:scaleY(1);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(185,167,132,.5)}
  50%{box-shadow:0 0 0 6px rgba(185,167,132,0)}
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============== Responsive ============== */
@media (max-width:1080px){
  .destaque-row{ grid-template-columns:repeat(2,1fr) }
  .itens-grid{ grid-template-columns:repeat(2,1fr) }
  .bento{ grid-template-columns:repeat(2,1fr) }
  .feat-w2,.feat-w3,.feat-w4{ grid-column:span 1 }
  .foot-grid{ grid-template-columns:1.5fr 1fr 1fr; gap:36px }
  .foot-grid .foot-brand{ grid-column:1 / -1 }
}
@media (max-width:820px){
  .nav-links{ display:none }
  .pin-stage{ height:auto; position:relative; padding:60px 22px 0 }
  .pin-stage-inner{ height:auto }
  .pin-mock{ position:relative; opacity:1; transform:none; transition:none }
  .pin-mock + .pin-mock{ margin-top:32px }
  .pin-text-screen{ height:auto; padding:24px 22px 60px; pointer-events:auto }
  .pin-text-card{ margin-left:0; max-width:none }
  .pin-progress{ display:none }
  .cardapio-grid{ grid-template-columns:1fr; gap:18px; padding:18px }
  .cardapio-sidebar{
    flex-direction:row;
    overflow-x:auto;
    padding:10px;
    gap:6px;
    flex-shrink:0;
  }
  .cardapio-sidebar .head, .cardapio-sidebar .foot-mark{ display:none }
  .cardapio-cat{ padding:10px 14px; font-size:13.5px; white-space:nowrap }
  .cardapio-cat .cat-ic{ width:22px; height:22px }
  .cardapio-cat .cat-ic svg{ width:18px; height:18px }
  .cardapio-app{ height:auto }
  .cardapio-top{
    grid-template-columns:1fr auto;
    gap:12px;
    padding:14px 18px;
  }
  .cardapio-search{ display:none }
  .cardapio-pill{ height:38px; padding:0 14px; font-size:13px }
  .cardapio-pill .pill-txt{ display:none }
  .cardapio-gear{ width:38px; height:38px }
  .destaque-row{ grid-template-columns:1fr }
  .itens-grid{ grid-template-columns:1fr }
  .wf{ grid-template-columns:1fr 1fr; gap:36px 24px }
  .wf::before{ display:none }
  .stats{ grid-template-columns:1fr 1fr; gap:36px }
  .bento{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px }
  .foot-grid .foot-brand{ grid-column:1 / -1 }
  .foot-bot{ flex-direction:column; text-align:center }
  .hero-scroll{ display:none }
}
@media (max-width:540px){
  .hero-wordmark{ font-size:24vw }
  .modal-grid{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr }
  .btn{ width:100%; max-width:300px }
  .hero-actions{ flex-direction:column; align-items:center }
  .stats{ grid-template-columns:1fr }
  .destaque-card .destaque-info strong,
  .item-info strong{ font-size:16px }
}

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