/* ==========================================================
   BANGABITES — Complete Design System
   ========================================================== */

:root {
    --primary:      #E23744;
    --primary-dark: #c0202d;
    --dark:         #171717;
    --warm-cream:   #FFFCFA;
    --soft-peach:   #FFF5F0;
    --accent-orange:#FF8A00;
    --text-main:    #111827;
    --text-muted:   #4B5563;
    --border:       #E5E7EB;
    --font-head:    'Poppins', sans-serif;
    --font-body:    'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--text-main);
    background: var(--warm-cream);
    overflow-x: hidden;
}
button, input, select { font: inherit; }
.hidden { display: none !important; }

/* ==========================================================
   NAVBAR
   ========================================================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 76px;
    background: rgba(255,252,250,0.92);
    backdrop-filter: blur(16px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}
.logo-link { display: block; line-height: 0; }
.nav-logo.desktop-logo { height: 40px; width: auto; }
.nav-logo.mobile-logo  { height: 34px; width: auto; display: none; }
.nav-center { display: flex; gap: 32px; }
.nav-center a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s;
}
.nav-center a:hover { color: var(--primary); }
.nav-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    background: #F3F4F6;
    padding: 9px 20px;
    border-radius: 30px;
}
.nav-location i { width: 16px; height: 16px; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
    min-height: 750px;
    padding-top: 76px;
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--soft-peach) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hero-bg-shape {
    position: absolute;
    right: -10%; top: -10%;
    width: 60%; height: 120%;
    background: var(--primary);
    opacity: 0.04;
    border-radius: 50%;
    filter: blur(80px);
}
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}
.hero-left { flex: 1; max-width: 640px; }
.eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 24px;
    background: rgba(226,55,68,0.1);
    padding: 6px 16px;
    border-radius: 20px;
}
.hero h1 {
    font-family: var(--font-head);
    font-size: clamp(56px, 7vw, 88px);
    line-height: 1.05;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 24px;
    letter-spacing: -2px;
}
.hero h1 span { color: var(--primary); }
.hero-sub {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.5px;
}
.hero-right {
    flex: 1;
    height: 580px;
    position: relative;
}
.collage-wrapper { position: relative; width: 100%; height: 100%; }
.floating-badge {
    position: absolute;
    background: #fff;
    padding: 12px 22px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: floatUp 6s ease-in-out infinite;
}
.badge-1 { top:20%; left:10%;  animation-delay:0s;   color:var(--text-main); }
.badge-2 { top:40%; right:5%;  animation-delay:1.5s; color:var(--text-main); }
.badge-3 { bottom:28%; left:14%; animation-delay:3s; color:var(--text-muted); }
.badge-4 { bottom:45%; right:18%; animation-delay:4.5s; color:var(--primary); font-size:16px; }
.star-icon  { color:#F59E0B; fill:#F59E0B; width:16px; height:16px; }
.rupee-icon { color:#10B981; width:16px; height:16px; }
.match-icon { color:var(--primary); width:16px; height:16px; }
.deco-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-orange), var(--primary));
}
.circle-1 { width:120px; height:120px; top:15%; right:25%; opacity:0.1; }
.circle-2 { width:240px; height:240px; bottom:10%; left:30%; opacity:0.05; }
.food-graphic {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 56px rgba(226,55,68,0.14);
}
.graphic-dosa   { width:160px; height:160px; top:30%; left:35%; color:var(--accent-orange); }
.graphic-dosa i { width:80px;  height:80px; }
.graphic-coffee   { width:100px; height:100px; top:10%; left:60%; color:#8B4513; }
.graphic-coffee i { width:44px; height:44px; }
.graphic-pizza   { width:120px; height:120px; bottom:20%; right:10%; color:var(--primary); }
.graphic-pizza i { width:52px; height:52px; }
@keyframes floatUp {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.skyline-overlay {
    position: absolute;
    bottom: 0; width: 100%; height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23FFF5F0' d='M0 100h1440V50c-30 0-50-20-70-20s-40 20-70 20-50-20-70-20-40 20-70 20-50-20-70-20-40 20-70 20-50-20-70-20-40 20-70 20-50-20-70-20-40 20-70 20-50-20-70-20z'/%3E%3C/svg%3E");
    background-size: cover;
}

/* ==========================================================
   SEARCH EXPERIENCE
   ========================================================== */
.search-experience {
    background: var(--soft-peach);
    padding: 80px 40px 120px;
    position: relative;
    overflow: hidden;
}
.search-bg-elements { position:absolute; inset:0; pointer-events:none; }
.bg-circle-1 {
    position:absolute; top:-100px; left:-100px;
    width:400px; height:400px; border-radius:50%;
    background:rgba(226,55,68,0.03); filter:blur(40px);
}
.bg-circle-2 {
    position:absolute; bottom:0; right:-50px;
    width:600px; height:600px; border-radius:50%;
    background:rgba(255,138,0,0.03); filter:blur(60px);
}
.search-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 10;
}
.search-header h2 {
    font-family: var(--font-head);
    font-size: clamp(36px,5vw,62px);
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}
.search-header p {
    font-size: 20px;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
}
.immersive-form {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
.primary-search-wrapper { margin-bottom: 28px; }
.primary-search-box {
    display: flex;
    background: #fff;
    border-radius: 100px;
    padding: 10px;
    box-shadow: 0 28px 56px rgba(0,0,0,0.06), 0 0 0 8px rgba(255,255,255,0.4);
    position: relative;
    align-items: center;
}
.search-icon { width:30px; height:30px; color:var(--primary); margin:0 18px; flex-shrink:0; }
.primary-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 22px;
    font-weight: 500;
    color: var(--text-main);
    outline: none;
}
.primary-search-box input::placeholder { color:#9CA3AF; font-weight:400; }
.mega-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 0 44px;
    height: 68px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 10px 24px rgba(226,55,68,0.28);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.mega-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(226,55,68,0.38);
}
.mega-btn:disabled { background:#fda4af; cursor:not-allowed; transform:none; box-shadow:none; }
.loader {
    width:22px; height:22px;
    border:3px solid rgba(255,255,255,0.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Autocomplete */
.suggestions {
    position:absolute;
    top:calc(100% + 14px);
    left:40px; right:40px;
    background:#fff;
    border-radius:22px;
    box-shadow:0 20px 48px rgba(0,0,0,0.1);
    overflow:hidden;
    z-index:200;
}
.suggestion-item {
    padding:18px 28px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    border-bottom:1px solid var(--border);
}
.suggestion-item:last-child { border-bottom:none; }
.suggestion-item:hover { background:#FFF5F0; }
.suggestion-item strong { font-size:17px; color:var(--text-main); }
.suggestion-item span   { font-size:13px; color:var(--text-muted); margin-top:2px; }

/* Secondary Filters */
.secondary-filters {
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:36px;
}
.filter-pill {
    background:#fff;
    border-radius:100px;
    padding:6px 22px 6px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.04);
    border:1px solid transparent;
    transition:all 0.2s;
}
.filter-pill:hover { border-color:var(--border); transform:translateY(-2px); }
.filter-pill i { color:var(--primary); width:18px; height:18px; flex-shrink:0; }
.filter-pill input,
.filter-pill select {
    border:none;
    background:transparent;
    font-size:15px;
    font-weight:500;
    color:var(--text-main);
    outline:none;
    height:46px;
    min-width:130px;
}

/* Popular searches */
.popular-searches { text-align:center; }
.popular-label {
    font-size:14px;
    font-weight:600;
    color:var(--text-muted);
    display:block;
    margin-bottom:14px;
}
.chips-wrapper { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.chip {
    background:rgba(255,255,255,0.7);
    border:1px solid rgba(0,0,0,0.06);
    padding:9px 22px;
    border-radius:100px;
    font-size:14px;
    font-weight:600;
    color:var(--text-main);
    cursor:pointer;
    transition:all 0.2s;
    backdrop-filter:blur(8px);
}
.chip:hover {
    background:#fff;
    color:var(--primary);
    box-shadow:0 8px 20px rgba(0,0,0,0.07);
    transform:translateY(-2px);
}

/* Error */
.error-message {
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
    padding:14px 20px;
    border-radius:16px;
    margin-bottom:24px;
    font-size:15px;
    display:flex;
    align-items:center;
    gap:10px;
}

/* ==========================================================
   BENGALURU FOOD CULTURE
   ========================================================== */
.food-culture {
    background: var(--warm-cream);
    padding: 120px 40px 200px;
    position: relative;
    overflow: hidden;
}
.culture-header { text-align:center; margin-bottom:80px; }
.culture-header h2 {
    font-family:var(--font-head);
    font-size:clamp(44px,6vw,72px);
    font-weight:900;
    line-height:1.1;
    letter-spacing:-2px;
    margin-bottom:20px;
}
.culture-header p { font-size:20px; color:var(--text-muted); }
.editorial-grid {
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(2,300px);
    gap:28px;
}
.ed-card {
    border-radius:40px;
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    position:relative;
    transition:transform 0.4s cubic-bezier(.4,0,.2,1);
}
.ed-card:hover { transform:translateY(-10px); }
.ed-icon i { width:60px; height:60px; opacity:0.8; }
.ed-content h3 {
    font-family:var(--font-head);
    font-size:30px;
    font-weight:800;
    margin-bottom:10px;
    letter-spacing:-0.5px;
}
.ed-content p { font-size:17px; font-weight:500; opacity:0.85; }
.card-coffee { grid-column:span 2; background:#F3E8E0; color:#4A3525; }
.card-coffee .ed-icon { align-self:flex-end; color:#8B4513; }
.card-dosa   { grid-column:span 1; grid-row:span 2; background:#FFF3CD; color:#856404; justify-content:flex-start; }
.card-dosa .ed-icon { position:absolute; bottom:36px; right:36px; color:#D39E00; }
.card-dosa i { width:120px; height:120px; opacity:0.18; }
.card-biryani { grid-column:span 1; grid-row:span 2; background:#FDE8E8; color:#9B1C1C; justify-content:flex-end; }
.card-biryani .ed-icon { position:absolute; top:36px; left:36px; color:#F05252; }
.card-biryani i { width:100px; height:100px; opacity:0.28; }
.card-cafe { grid-column:span 2; background:#E1EFFE; color:#1E429F; flex-direction:row; align-items:center; }
.card-cafe .ed-icon { color:#3F83F8; margin-right:36px; }
.city-skyline-divider {
    position:absolute;
    bottom:0; left:0; right:0; height:200px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%23171717' d='M0 200h1440v-50h-40v-30h-30v40h-20v-60h-40v60h-30v-40h-20v40h-50v-80h-40v80h-20v-20h-30v20h-60v-50h-40v50h-20v-40h-30v40h-50v-70h-40v70h-20v-30h-30v30h-60v-60h-40v60h-20v-40h-30v40h-50v-90h-40v90h-20v-20h-30v20h-60v-50h-40v50z'/%3E%3C/svg%3E");
    background-size:cover;
    background-position:bottom;
}

/* ==========================================================
   HOW IT WORKS (DARK)
   ========================================================== */
.dark-section {
    background: var(--dark);
    color: var(--warm-cream);
    padding: 120px 40px;
    position: relative;
    overflow: hidden;
}
.how-header { text-align:center; max-width:800px; margin:0 auto 100px; }
.how-header h2 {
    font-family:var(--font-head);
    font-size:clamp(38px,5vw,64px);
    font-weight:800;
    margin-bottom:20px;
    letter-spacing:-1px;
}
.how-header p { font-size:20px; color:#9CA3AF; }
.ml-visual-flow { position:relative; max-width:800px; height:600px; margin:0 auto; }
.ml-center {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:340px;
    background:#262626;
    border:1px solid #404040;
    border-radius:30px;
    padding:40px;
    text-align:center;
    z-index:10;
    box-shadow:0 30px 60px rgba(0,0,0,0.5);
}
.ml-target { display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:28px; color:var(--primary); }
.huge-target { width:64px; height:64px; }
.ml-target span { font-size:26px; font-weight:900; letter-spacing:1px; }
.ml-restaurant-card h4 { font-size:22px; margin-bottom:10px; color:#fff; }
.ml-restaurant-card p  { font-size:14px; color:#A3A3A3; margin-bottom:4px; }
.ml-signal {
    position:absolute;
    background:#333;
    padding:20px;
    border-radius:20px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    color:#fff; width:140px;
    border:1px solid #404040;
}
.ml-signal i   { width:30px; height:30px; color:var(--accent-orange); }
.ml-signal span { font-size:12px; font-weight:700; letter-spacing:1px; }
.signal-1 { top:0; left:0; }
.signal-2 { top:0; right:0; }
.signal-3 { bottom:0; left:0; }
.signal-4 { bottom:0; right:0; }
.ml-visual-flow::before {
    content:'';
    position:absolute;
    top:50px; left:50px; right:50px; bottom:50px;
    border:2px dashed #404040;
    border-radius:50%;
    z-index:1;
    animation:rotate 60s linear infinite;
}
@keyframes rotate { 100% { transform:rotate(360deg); } }

/* ==========================================================
   RESULTS SECTION
   ========================================================== */
.results-section {
    background: #fff;
    padding: 100px 40px;
}
.results-header { text-align:center; margin-bottom:70px; }
.results-header h2 {
    font-family:var(--font-head);
    font-size:clamp(36px,5vw,56px);
    font-weight:900;
    letter-spacing:-1.5px;
    margin-bottom:14px;
}
.results-header p { font-size:19px; color:var(--text-muted); }
.results-container { max-width:1400px; margin:0 auto; }
.featured-result { margin-bottom:70px; }
.other-results-header h3 {
    font-family:var(--font-head);
    font-size:28px;
    font-weight:800;
    margin-bottom:36px;
}
.results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:32px; }

/* Featured card */
.featured-card {
    display:flex;
    background:var(--warm-cream);
    border-radius:40px;
    border:1px solid var(--border);
    overflow:hidden;
    box-shadow:0 32px 70px rgba(0,0,0,0.06);
}
.feat-visual {
    flex:1;
    background:linear-gradient(135deg,var(--soft-peach),#FFE4E6);
    display:flex; align-items:center; justify-content:center;
    position:relative; min-height:320px;
}
.feat-icon-huge  { width:140px; height:140px; color:var(--primary); opacity:0.75; }
.feat-number     { position:absolute; top:36px; left:36px; font-family:var(--font-head); font-size:110px; font-weight:900; color:rgba(226,55,68,0.08); line-height:1; }
.feat-content    { flex:1.2; padding:60px; display:flex; flex-direction:column; justify-content:center; }
.feat-match {
    display:inline-flex; align-items:center; gap:10px;
    background:#FFF1F2; color:var(--primary);
    padding:10px 22px; border-radius:100px;
    font-size:18px; font-weight:800; margin-bottom:28px; align-self:flex-start;
}
.feat-title { font-family:var(--font-head); font-size:44px; font-weight:800; line-height:1.1; margin-bottom:22px; }
.feat-meta { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:28px; font-size:17px; color:var(--text-muted); font-weight:500; }
.feat-meta div { display:flex; align-items:center; gap:7px; }
.feat-reasons { display:flex; flex-direction:column; gap:14px; margin-bottom:44px; }
.feat-reason  { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; }
.feat-reason i { color:#10B981; width:18px; height:18px; }
.feat-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    background:var(--text-main); color:#fff; text-decoration:none;
    padding:0 36px; height:58px; border-radius:100px;
    font-size:16px; font-weight:700; transition:all 0.25s; align-self:flex-start;
}
.feat-btn:hover { background:var(--primary); transform:translateY(-3px); box-shadow:0 14px 28px rgba(226,55,68,0.28); }

/* Rec cards */
.rec-card {
    background:#fff; border:1px solid var(--border); border-radius:28px; padding:36px;
    transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    display:flex; flex-direction:column;
}
.rec-card:hover { transform:translateY(-7px); box-shadow:0 24px 48px rgba(0,0,0,0.07); border-color:#FECDD3; }
.rec-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.restaurant-rank { font-size:12px; font-weight:700; color:var(--primary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.rec-title   { font-family:var(--font-head); font-size:26px; font-weight:800; line-height:1.2; margin-bottom:6px; }
.rec-location { font-size:14px; color:var(--text-muted); font-weight:500; display:flex; align-items:center; gap:5px; }
.score-ring {
    width:68px; height:68px; border-radius:50%; flex-shrink:0;
    background:conic-gradient(var(--primary) var(--percentage), #F3F4F6 0);
    display:flex; align-items:center; justify-content:center; position:relative;
}
.score-ring::after { content:''; position:absolute; width:52px; height:52px; background:#fff; border-radius:50%; }
.score-ring span { position:relative; z-index:10; font-weight:800; font-size:15px; }
.rec-stats { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.rec-stat {
    background:var(--warm-cream); border:1px solid var(--border);
    padding:7px 14px; border-radius:10px; font-size:13px; font-weight:600; color:var(--text-muted);
    display:flex; align-items:center; gap:6px;
}
.rec-zomato {
    margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
    height:52px; border-radius:14px; border:2px solid var(--border);
    color:var(--text-main); text-decoration:none; font-weight:700; font-size:15px;
    transition:all 0.2s;
}
.rec-zomato:hover { background:#FFF1F2; border-color:#FECDD3; color:var(--primary); }

/* Empty state */
.empty-state {
    grid-column:1/-1;
    text-align:center; padding:80px 40px;
    border-radius:32px; border:1px dashed #D1D5DB;
}
.empty-state i { width:64px; height:64px; color:#9CA3AF; margin-bottom:20px; }
.empty-state h3 { font-size:28px; font-weight:800; margin-bottom:10px; }
.empty-state p  { font-size:17px; color:var(--text-muted); max-width:440px; margin:0 auto; }

/* ==========================================================
   ABOUT BANGABITES (SINGLE-PAGE SECTION)
   ========================================================== */
.about-section { background: var(--warm-cream); }

/* --- ABOUT INTRO --- */
.about-intro {
    padding: 120px 40px;
    background: linear-gradient(135deg, var(--warm-cream) 0%, var(--soft-peach) 100%);
    position: relative;
    overflow: hidden;
}
.about-intro::before {
    content: '';
    position: absolute;
    left: -10%; top: -10%;
    width: 60%; height: 120%;
    background: var(--accent-orange);
    opacity: 0.03;
    border-radius: 50%;
    filter: blur(80px);
}
.about-intro-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}
.about-intro-text { flex: 1.1; }
.about-intro-text .eyebrow { margin-bottom: 28px; }
.about-intro-text h2 {
    font-family: var(--font-head);
    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 32px;
}
.about-intro-text p {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 18px;
}
.about-intro-visual {
    flex: 1;
    height: 480px;
    position: relative;
}
.about-collage { position: relative; width: 100%; height: 100%; }
.about-central-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 180px; height: 180px;
    background: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    box-shadow: 0 30px 60px rgba(226,55,68,0.12);
}
.about-central-icon i { width: 80px; height: 80px; }

/* --- WHAT IS BANGABITES --- */
.about-what {
    padding: 100px 40px;
    background: #fff;
}
.about-section-heading {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 40px;
    text-align: center;
}
.about-what-text {
    max-width: 780px;
    margin: 0 auto 64px;
    text-align: center;
    font-size: 19px;
    color: var(--text-muted);
    line-height: 1.8;
}
.about-what-text p { margin-bottom: 14px; }
.about-signals-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.about-signal-card {
    background: var(--warm-cream);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.about-signal-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.07); }
.signal-icon {
    width: 60px; height: 60px;
    background: var(--soft-peach);
    color: var(--primary);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.signal-icon i { width: 28px; height: 28px; }
.about-signal-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.about-signal-card p  { font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.signal-primary {
    background: #FFF1F2;
    border-color: #FECDD3;
}
.signal-primary .signal-icon { background: #FFE4E6; }

/* --- PIPELINE --- */
.about-pipeline {
    padding: 100px 40px;
    background: var(--soft-peach);
}
.about-pipeline-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}
.about-pipeline-text { flex: 1; }
.about-pipeline-text h2 {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 20px;
}
.about-pipeline-text p { font-size: 18px; color: var(--text-muted); line-height: 1.7; }
.pipeline-steps {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.pipe-step {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: border-color 0.2s;
}
.pipe-step:hover { border-color: #FECDD3; }
.pipe-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
    background: #FFF1F2;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.pipe-step-final {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(226,55,68,0.28);
}
.pipe-step-final .pipe-num { background: rgba(255,255,255,0.2); color: #fff; }
.pipe-arrow {
    color: var(--primary);
    margin: 6px 0;
    display: flex;
    justify-content: center;
}
.pipe-arrow i { width: 20px; height: 20px; }

/* --- ENGINE (DARK) --- */
.about-engine {
    background: var(--dark);
    color: var(--warm-cream);
    padding: 100px 40px;
}
.about-engine-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    align-items: center;
}
.about-engine-text { flex: 1; }
.about-engine-text h2 {
    font-family: var(--font-head);
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
.about-engine-text p { font-size: 18px; color: #9CA3AF; line-height: 1.7; }
.engine-visual {
    flex: 1;
    display: flex;
    gap: 48px;
    align-items: center;
}
.engine-score-card {
    background: #262626;
    border: 1px solid #404040;
    border-radius: 32px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 24px 56px rgba(0,0,0,0.4);
    flex-shrink: 0;
}
.engine-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #6B7280;
    margin-bottom: 24px;
}
.engine-ring {
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    color: var(--primary);
    margin: 0 auto;
}
.engine-pct   { font-family:var(--font-head); font-size:44px; font-weight:900; line-height:1; }
.engine-match { font-size:13px; font-weight:800; letter-spacing:3px; }
.engine-bars  { flex: 1; display:flex; flex-direction:column; gap:28px; }
.engine-bar-row {}
.ebar-label { display:flex; justify-content:space-between; margin-bottom:10px; font-size:16px; font-weight:600; }
.ebar-pct   { font-weight:800; }
.ebar-track { width:100%; height:10px; background:#333; border-radius:20px; overflow:hidden; }
.ebar-fill  { height:100%; border-radius:20px; transition:width 1.2s cubic-bezier(.4,0,.2,1); }

/* --- WHY BENGALURU --- */
.about-blr { padding: 100px 40px; background: var(--warm-cream); }
.about-blr-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.about-blr-inner h2 {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
.about-blr-inner > p {
    font-size: 19px;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 60px;
    max-width: 760px;
    margin-left: auto; margin-right: auto;
}
.blr-food-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
.blr-food-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 32px 28px;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.blr-food-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.07); }
.blr-food-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.blr-food-icon i { width: 28px; height: 28px; }
.blr-food-card span { font-size: 16px; font-weight: 700; color: var(--text-main); }
.blr-food-card small { font-size: 12px; color: var(--text-light, #9CA3AF); text-align: center; }
.blr-coffee  .blr-food-icon { background: #FDE8D0; color: #92400E; }
.blr-dosa    .blr-food-icon { background: #FFF9DB; color: #92400E; }
.blr-biryani .blr-food-icon { background: #FFF1F2; color: var(--primary); }
.blr-pizza   .blr-food-icon { background: #FFF1F2; color: #EF4444; }
.blr-cafe    .blr-food-icon { background: #EFF6FF; color: #3B82F6; }

/* --- FEATURES --- */
.about-features {
    padding: 100px 40px;
    background: var(--soft-peach);
}
.features-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 24px;
}
.feature-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 40px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
.feat-card-icon {
    width: 56px; height: 56px;
    background: #FFF1F2;
    color: var(--primary);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}
.feat-card-icon i { width: 26px; height: 26px; }
.feature-card h4 { font-size: 21px; font-weight: 700; margin-bottom: 12px; }
.feature-card p  { font-size: 15px; color: var(--text-muted); line-height: 1.65; }

/* --- TECHNOLOGY --- */
.about-tech {
    padding: 80px 40px;
    background: #fff;
    text-align: center;
}
.tech-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
}
.tech-pill {
    background: #F3F4F6;
    padding: 12px 26px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    border: 1px solid transparent;
    transition: all 0.2s;
}
.tech-pill:hover { border-color: var(--border); transform: translateY(-2px); }
.tech-pill-accent {
    background: #FFF1F2;
    color: var(--primary);
    border-color: #FECDD3;
    font-weight: 700;
}

/* --- CREATOR --- */
.about-creator {
    padding: 100px 40px;
    background: var(--warm-cream);
    display: flex;
    justify-content: center;
}
.creator-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 72px 60px;
    max-width: 820px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 56px rgba(0,0,0,0.05);
}
.creator-avatar {
    width: 88px; height: 88px;
    background: var(--primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    margin: 0 auto 28px;
}
.creator-avatar i { width: 44px; height: 44px; }
.creator-card h2 {
    font-family: var(--font-head);
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 12px;
}
.creator-role {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 36px;
}
.creator-bio { margin-bottom: 44px; }
.creator-bio p {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 16px;
}
.creator-quote {
    font-style: italic;
    border-left: 3px solid var(--primary);
    padding-left: 20px;
    text-align: left;
    border-radius: 2px;
}
.creator-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.creator-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 32px;
    height: 54px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.25s;
}
.creator-btn-dark {
    background: var(--text-main);
    color: #fff;
}
.creator-btn-dark:hover { background: var(--primary); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(226,55,68,0.26); }
.creator-btn-outline {
    background: transparent;
    color: var(--text-main);
    border: 2px solid var(--border);
}
.creator-btn-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); }

/* --- CLOSING QUOTE --- */
.about-closing {
    padding: 140px 40px;
    background: var(--dark);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.about-closing::before {
    content: '';
    position: absolute;
    top: -100px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.05;
    filter: blur(80px);
}
.closing-inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 10; }
.closing-quote-mark {
    font-family: var(--font-head);
    font-size: 160px;
    line-height: 0.7;
    color: var(--primary);
    opacity: 0.25;
    margin-bottom: 32px;
    display: block;
}
.about-closing h2 {
    font-family: var(--font-head);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 900;
    color: var(--warm-cream);
    letter-spacing: -1.5px;
    margin-bottom: 28px;
}
.about-closing p {
    font-size: 22px;
    color: #9CA3AF;
    line-height: 1.7;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
    background: #111827;
    color: #fff;
    padding: 80px 40px;
    text-align: center;
}
.footer-inner { max-width: 700px; margin: 0 auto; }
.footer-logo { height: 44px; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-tagline { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.footer-stack  { font-size: 13px; color: #6B7280; margin-bottom: 36px; }
.footer-divider { width: 60px; height: 2px; background: rgba(255,255,255,0.1); margin: 0 auto 28px; border-radius: 2px; }
.footer-credit { font-size: 15px; color: #9CA3AF; margin-bottom: 20px; }
.footer-credit strong { color: #fff; }
.footer-social { display: flex; justify-content: center; gap: 28px; }
.footer-social a {
    color: #6B7280;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s;
}
.footer-social a:hover { color: var(--primary); }

/* ==========================================================
   RESPONSIVE
   All rules below are mobile-only overrides.
   Desktop (≥1024px) is completely untouched.
   ========================================================== */

/* ----------------------------------------------------------
   TABLET — 1024px and below
   ---------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Navbar */
    .nav-container { padding: 0 28px; }

    /* Hero — hide illustration panel, keep text side */
    .hero-right { display: none; }
    .hero-left  { max-width: 100%; }

    /* Editorial food culture grid → 2 columns */
    .editorial-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .card-dosa, .card-biryani { grid-row: auto; }
    .card-coffee { grid-column: span 2; }
    .card-cafe   { grid-column: span 2; }

    /* How it works — stack vertically */
    .ml-visual-flow {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .ml-center {
        position: relative;
        transform: none;
        top: auto; left: auto;
        width: 100%;
        max-width: 380px;
    }
    .ml-signal {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        flex-direction: row;
        width: 100%;
        max-width: 380px;
    }
    .ml-visual-flow::before { display: none; }

    /* About intro — stack */
    .about-intro-inner { flex-direction: column; gap: 60px; }
    .about-intro-visual { width: 100%; height: 360px; }

    /* Pipeline — stack */
    .about-pipeline-inner { flex-direction: column; gap: 48px; }
    .about-pipeline-text { text-align: center; }

    /* Engine — stack */
    .about-engine-inner { flex-direction: column; gap: 60px; }
    .engine-visual { flex-direction: column; gap: 40px; align-items: center; }
    .engine-bars { width: 100%; max-width: 480px; }

    /* Results featured card — stack */
    .featured-card { flex-direction: column; }
    .feat-visual   { min-height: 220px; }
    .feat-content  { padding: 40px; }
}

/* ----------------------------------------------------------
   MOBILE LARGE — 768px and below
   ---------------------------------------------------------- */
@media (max-width: 768px) {

    /* ------ NAVBAR ------ */
    .navbar { height: 64px; }
    .nav-container {
        padding: 0 16px;
        gap: 12px;
    }
    /* Show icon-only logo, hide full logo */
    .nav-logo.desktop-logo { display: none; }
    .nav-logo.mobile-logo  { display: block; }

    /* Collapse nav center links — keep but smaller */
    .nav-center { gap: 16px; }
    .nav-center a { font-size: 13px; font-weight: 600; }

    /* Location pill — tighter */
    .nav-location {
        font-size: 12px;
        padding: 7px 12px;
        gap: 5px;
    }
    .nav-location i { width: 13px; height: 13px; }

    /* ------ HERO ------ */
    .hero {
        min-height: auto;
        padding-top: 64px; /* match collapsed navbar */
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 60px;
        align-items: flex-start;
    }
    .hero-container {
        padding: 40px 0 0;
        flex-direction: column;
    }
    .hero-left {
        max-width: 100%;
        padding-bottom: 0;
    }
    .eyebrow {
        font-size: 11px;
        letter-spacing: 1.8px;
        margin-bottom: 18px;
    }
    .hero h1 {
        font-size: clamp(40px, 10vw, 64px);
        letter-spacing: -1.5px;
        margin-bottom: 16px;
    }
    .hero-sub { font-size: 22px; }
    .hero-right { display: none; }
    .skyline-overlay { height: 60px; }

    /* ------ SEARCH SECTION ------ */
    .search-experience { padding: 56px 20px 72px; }
    .search-header { margin-bottom: 40px; }
    .search-header h2 { letter-spacing: -1px; }
    .search-header p { font-size: 17px; }

    /* Primary search box — stack vertically */
    .primary-search-box {
        flex-direction: column;
        border-radius: 24px;
        padding: 16px;
        gap: 12px;
        align-items: stretch;
    }
    .search-icon { display: none; }
    .primary-search-box input {
        font-size: 18px;
        font-weight: 500;
        text-align: left;
        padding: 4px 8px;
        width: 100%;
    }
    .mega-btn {
        width: 100%;
        height: 56px;
        font-size: 17px;
        justify-content: center;
        border-radius: 16px;
        padding: 0 24px;
    }

    /* Autocomplete — stay inside search box width */
    .suggestions {
        left: 0;
        right: 0;
        top: calc(100% + 10px);
        border-radius: 18px;
    }
    .suggestion-item { padding: 14px 20px; }
    .suggestion-item strong { font-size: 16px; }
    .suggestion-item span   { font-size: 12px; }

    /* Secondary filters — full-width column */
    .secondary-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .filter-pill {
        justify-content: flex-start;
        border-radius: 16px;
        padding: 4px 16px 4px 14px;
        border: 1px solid var(--border);
    }
    .filter-pill input,
    .filter-pill select {
        width: 100%;
        min-width: 0;
        font-size: 16px; /* prevent iOS zoom */
        height: 48px;
    }

    /* Popular search chips — allow horizontal scroll without page overflow */
    .chips-wrapper {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .chips-wrapper::-webkit-scrollbar { display: none; }
    .chip { flex-shrink: 0; }

    /* ------ FOOD CULTURE ------ */
    .food-culture { padding: 72px 20px 160px; }
    .culture-header { margin-bottom: 56px; }
    .culture-header h2 { letter-spacing: -1.5px; }
    .culture-header p  { font-size: 17px; }

    .editorial-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }
    .card-coffee  { grid-column: span 2; }
    .card-dosa    { grid-column: span 1; grid-row: auto; }
    .card-biryani { grid-column: span 1; grid-row: auto; }
    .card-cafe    { grid-column: span 2; }
    .ed-card { border-radius: 28px; padding: 28px; }
    .ed-content h3 { font-size: 22px; }
    .ed-content p  { font-size: 15px; }
    .ed-icon i { width: 44px; height: 44px; }

    /* ------ HOW IT WORKS (DARK) ------ */
    .dark-section { padding: 80px 20px; }
    .how-header { margin-bottom: 60px; }
    .how-header p { font-size: 17px; }
    .ml-center { padding: 32px 24px; width: 100%; max-width: 100%; }
    .ml-target span { font-size: 22px; }
    .ml-restaurant-card h4 { font-size: 18px; }
    .ml-signal { max-width: 100%; padding: 16px; }

    /* ------ RESULTS SECTION ------ */
    .results-section { padding: 56px 20px; }
    .results-header { margin-bottom: 48px; }
    .results-header h2 { letter-spacing: -1px; }
    .results-header p  { font-size: 16px; }

    /* Featured card — stack */
    .featured-card    { flex-direction: column; border-radius: 28px; }
    .feat-visual      { min-height: 180px; }
    .feat-icon-huge   { width: 100px; height: 100px; }
    .feat-number      { font-size: 80px; }
    .feat-content     { padding: 28px 24px 32px; }
    .feat-match       { font-size: 15px; padding: 8px 18px; margin-bottom: 18px; }
    .feat-title       { font-size: 28px; margin-bottom: 16px; }
    .feat-meta        { font-size: 15px; gap: 14px; }
    .feat-reasons     { gap: 10px; margin-bottom: 28px; }
    .feat-btn {
        width: 100%;
        justify-content: center;
        height: 52px;
        font-size: 15px;
        align-self: stretch;
    }

    /* Results grid — single column */
    .results-grid { grid-template-columns: 1fr; gap: 20px; }
    .other-results-header h3 { font-size: 22px; margin-bottom: 24px; }

    /* Rec cards */
    .rec-card { padding: 28px 24px; border-radius: 22px; }
    .rec-title { font-size: 22px; }
    .rec-top { align-items: flex-start; gap: 12px; }
    .score-ring { width: 60px; height: 60px; flex-shrink: 0; }
    .score-ring::after { width: 46px; height: 46px; }
    .score-ring span { font-size: 13px; }
    .rec-stats { gap: 8px; margin-bottom: 20px; }
    .rec-stat { font-size: 12px; padding: 6px 12px; }
    .rec-zomato { height: 48px; font-size: 14px; }
    .rec-location { overflow-wrap: anywhere; }

    /* Empty state */
    .empty-state { padding: 56px 24px; }
    .empty-state h3 { font-size: 22px; }
    .empty-state p  { font-size: 15px; }

    /* ------ ABOUT SECTION ------ */
    /* Shared padding */
    .about-intro,
    .about-what,
    .about-pipeline,
    .about-engine,
    .about-blr,
    .about-features,
    .about-tech,
    .about-creator,
    .about-closing {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* About intro */
    .about-intro { padding-top: 72px; padding-bottom: 72px; }
    .about-intro-inner { flex-direction: column; gap: 48px; }
    .about-intro-visual { height: 300px; width: 100%; }
    .about-intro-text h2 { font-size: clamp(28px, 7vw, 44px); letter-spacing: -1px; }
    .about-intro-text p  { font-size: 16px; }

    /* About what */
    .about-what { padding-top: 72px; padding-bottom: 72px; }
    .about-what-text { font-size: 16px; }
    .about-signals-grid { grid-template-columns: 1fr; gap: 16px; }
    .about-signal-card { padding: 28px 24px; }
    .about-signal-card h4 { font-size: 18px; }

    /* Pipeline */
    .about-pipeline { padding-top: 72px; padding-bottom: 72px; }
    .about-pipeline-inner { flex-direction: column; gap: 36px; }
    .about-pipeline-text { text-align: center; }
    .about-pipeline-text h2 { font-size: clamp(26px, 6vw, 44px); }
    .pipe-step { padding: 12px 20px; font-size: 14px; }
    .pipe-num  { font-size: 10px; }

    /* Engine dark */
    .about-engine { padding-top: 72px; padding-bottom: 72px; }
    .about-engine-inner { flex-direction: column; gap: 48px; }
    .about-engine-text h2 { font-size: clamp(26px, 6vw, 44px); }
    .engine-visual { flex-direction: column; gap: 32px; align-items: stretch; }
    .engine-score-card { padding: 36px 28px; align-self: center; }
    .engine-bars { width: 100%; max-width: 100%; }
    .ebar-label { font-size: 14px; }

    /* Why Bengaluru */
    .about-blr { padding-top: 72px; padding-bottom: 72px; }
    .about-blr-inner > p { font-size: 16px; margin-bottom: 40px; }
    .blr-food-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        justify-items: center;
    }
    .blr-food-card { width: 100%; padding: 24px 16px; }
    .blr-food-icon { width: 52px; height: 52px; }
    .blr-food-card span { font-size: 14px; }

    /* Features grid */
    .about-features { padding-top: 72px; padding-bottom: 72px; }
    .features-grid { grid-template-columns: 1fr; gap: 16px; }
    .feature-card { padding: 28px 24px; border-radius: 22px; }
    .feature-card h4 { font-size: 18px; }

    /* Technology pills */
    .about-tech { padding-top: 60px; padding-bottom: 60px; }
    .tech-pill { font-size: 14px; padding: 10px 20px; }

    /* Creator */
    .about-creator { padding-top: 72px; padding-bottom: 72px; }
    .creator-card  { padding: 44px 24px; border-radius: 28px; }
    .creator-card h2 { font-size: clamp(22px, 5vw, 30px); }
    .creator-role { font-size: 12px; letter-spacing: 0.5px; }
    .creator-bio p { font-size: 16px; }
    .creator-links { gap: 12px; }
    .creator-btn { height: 48px; padding: 0 24px; font-size: 15px; }

    /* Closing quote */
    .about-closing { padding: 96px 20px; }
    .closing-quote-mark { font-size: 100px; }
    .about-closing h2 { font-size: clamp(28px, 7vw, 48px); }
    .about-closing p  { font-size: 18px; }

    /* ------ FOOTER ------ */
    .site-footer { padding: 56px 20px; }
    .footer-stack { font-size: 12px; word-break: break-word; }
    .footer-social { gap: 20px; flex-wrap: wrap; }
}

/* ----------------------------------------------------------
   MOBILE MEDIUM — 430px and below
   ---------------------------------------------------------- */
@media (max-width: 430px) {

    /* Navbar — hide nav links when very narrow */
    .nav-center { display: none; }
    .nav-container { justify-content: space-between; }

    /* Hero */
    .hero {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 48px;
    }
    .hero h1 {
        font-size: clamp(36px, 11vw, 56px);
        letter-spacing: -1px;
    }
    .hero-sub { font-size: 20px; }

    /* Search */
    .search-experience { padding: 48px 16px 64px; }
    .search-header h2  { font-size: clamp(26px, 8vw, 40px); letter-spacing: -0.8px; }
    .search-header p   { font-size: 15px; }

    /* Filter pills */
    .filter-pill input,
    .filter-pill select { font-size: 16px; }

    /* Food culture — 2-column mini grid */
    .food-culture { padding: 60px 16px 140px; }
    .editorial-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .card-coffee  { grid-column: span 2; }
    .card-cafe    { grid-column: span 2; flex-direction: column; }
    .card-dosa    { grid-column: span 1; }
    .card-biryani { grid-column: span 1; }
    .ed-card      { border-radius: 22px; padding: 22px 18px; }
    .ed-content h3 { font-size: 18px; }
    .ed-content p  { font-size: 14px; }
    .ed-icon i     { width: 36px; height: 36px; }

    /* How it works */
    .dark-section { padding: 64px 16px; }

    /* Results */
    .results-section { padding: 48px 16px; }
    .feat-content { padding: 24px 18px 28px; }
    .feat-title   { font-size: 24px; }
    .rec-card     { padding: 22px 18px; }
    .rec-title    { font-size: 20px; }

    /* About shared padding */
    .about-intro,
    .about-what,
    .about-pipeline,
    .about-engine,
    .about-blr,
    .about-features,
    .about-tech,
    .about-creator,
    .about-closing {
        padding-left: 16px;
        padding-right: 16px;
    }
    .about-intro { padding-top: 60px; padding-bottom: 60px; }
    .about-intro-visual { height: 260px; }
    .about-central-icon { width: 130px; height: 130px; }
    .about-central-icon i { width: 60px; height: 60px; }

    /* Bengaluru food grid — 2 cols on small phones */
    .blr-food-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    /* 5th card (cafe) centered */
    .blr-cafe { grid-column: span 2; max-width: 160px; margin: 0 auto; width: 100%; }

    /* Creator */
    .creator-card  { padding: 36px 16px; }
    .creator-links { flex-direction: column; align-items: stretch; }
    .creator-btn   { justify-content: center; }

    /* Closing */
    .about-closing { padding: 80px 16px; }
    .closing-quote-mark { font-size: 80px; }

    /* Footer */
    .site-footer { padding: 48px 16px; }
    .footer-social { gap: 16px; }
}

/* ----------------------------------------------------------
   MOBILE SMALL — 375px and below
   ---------------------------------------------------------- */
@media (max-width: 375px) {

    /* Hero */
    .hero h1 { font-size: clamp(32px, 10vw, 48px); }
    .hero-sub { font-size: 18px; }

    /* Navbar location pill — shorten */
    .nav-location span { display: none; }

    /* Search */
    .search-experience { padding: 40px 14px 56px; }
    .mega-btn { height: 52px; font-size: 16px; }

    /* Food culture — single column on tiny screens */
    .editorial-grid { grid-template-columns: 1fr; }
    .card-coffee  { grid-column: 1; }
    .card-dosa    { grid-column: 1; }
    .card-biryani { grid-column: 1; }
    .card-cafe    { grid-column: 1; flex-direction: row; }

    /* Rec cards */
    .rec-title { font-size: 18px; }
    .score-ring { width: 54px; height: 54px; }
    .score-ring::after { width: 40px; height: 40px; }
    .score-ring span { font-size: 12px; }

    /* About */
    .about-intro,
    .about-what,
    .about-pipeline,
    .about-engine,
    .about-blr,
    .about-features,
    .about-tech,
    .about-creator,
    .about-closing {
        padding-left: 14px;
        padding-right: 14px;
    }
    .creator-card { padding: 32px 14px; }
    .creator-card h2 { font-size: 20px; }

    /* Footer */
    .footer-stack { display: none; } /* too long on tiny screens */
}

/* ----------------------------------------------------------
   MOBILE XSMALL — 320px and below
   ---------------------------------------------------------- */
@media (max-width: 320px) {
    .hero h1 { font-size: 30px; }
    .hero-sub { font-size: 17px; }
    .search-header h2 { font-size: 24px; }
    .mega-btn { font-size: 15px; height: 50px; }
    .filter-pill input,
    .filter-pill select { font-size: 15px; }
    .feat-title { font-size: 21px; }
    .rec-title { font-size: 17px; }
    .creator-card h2 { font-size: 18px; }
    .about-section-heading { font-size: clamp(22px, 7vw, 32px); }
    .closing-quote-mark { font-size: 64px; }
}

/* ----------------------------------------------------------
   GLOBAL OVERFLOW PREVENTION
   These apply at all sizes but only bite on mobile content.
   ---------------------------------------------------------- */
img, svg, video, iframe, embed {
    max-width: 100%;
}

.hero-container,
.search-experience,
.immersive-form,
.primary-search-wrapper,
.primary-search-box,
.secondary-filters,
.results-container,
.results-grid,
.featured-card,
.about-intro-inner,
.about-engine-inner,
.about-pipeline-inner,
.about-blr-inner,
.features-grid,
.about-signals-grid,
.footer-inner {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Prevent very long text strings (restaurant names, cuisines) from overflowing cards */
.rec-title,
.rec-location,
.rec-stat,
.feat-title,
.feat-meta {
    overflow-wrap: anywhere;
}

/* Autocomplete box: never wider than the containing search box */
.suggestions {
    max-width: 100%;
    box-sizing: border-box;
}

/* Touch-target minimum for all interactive elements */
@media (max-width: 1024px) {
    .chip,
    .creator-btn,
    .feat-btn,
    .rec-zomato,
    .mega-btn,
    .filter-pill input,
    .filter-pill select,
    .suggestion-item,
    .footer-social a,
    .nav-center a {
        min-height: 44px;
    }
}