body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header, footer { background: #dd6600; color: white; padding: 1rem; text-align: center; }
nav a { margin: 0 1rem; color: white; text-decoration: none; }
section { padding: 2rem; }

:root{
    --brand: #d86f13;      /* primary */
    --brand-600:#bf600f;   /* hover */
    --brand-700:#9e4f0c;   /* active */
    --ink:#111;
    --paper:#fff;
    --muted:#6b7280;
    --ring: 0 0 0 4px rgba(216,111,19,.25);
  }
  
  .btn{
    -webkit-tap-highlight-color: transparent;
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.8rem 1.1rem; border-radius:14px;
    font-weight:700; letter-spacing:.2px;
    border:1px solid rgba(0,0,0,.08);
    background:#f6f7f9; color:#111;
    box-shadow:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04) inset;
    transition: transform .06s ease, filter .15s ease, background .2s ease, border-color .2s ease;
  }
  .btn:hover{ filter:brightness(0.98); transform: translateY(-1px); }
  .btn:active{ transform: translateY(0); }
  .btn:focus-visible{ outline:none; box-shadow: var(--ring); }
  
  /* primary */
  .btn.primary{
    background: var(--brand); color:white; border-color: transparent;
    box-shadow: 0 8px 20px rgba(216,111,19,.25), 0 1px 1px rgba(255,255,255,.2) inset;
  }
  .btn.primary:hover{ background: var(--brand-600); }
  .btn.primary:active{ background: var(--brand-700); }
  
  /* outline / ghost */
  .btn.ghost{
    background: transparent; color: var(--brand);
    border-color: rgba(216,111,19,.35);
  }
  .btn.ghost:hover{ background: rgba(216,111,19,.06); }
  
  /* subtle link button */
  .btn.link{
    background: transparent; border:0; color: var(--ink);
    padding:.3rem .2rem; border-radius:8px;
  }
  .btn.link:hover{ color: var(--brand); }
  
  /* icon sizing if you add SVGs */
  .btn .icon{ width:1.1em; height:1.1em; }
  
  /* make buttons full-width on mobile if needed */
  @media (max-width:700px){
    .btn.block{ width:100%; justify-content:center; }
  }
  .btn.whatsapp {
    background-color: #25D366;   /* WhatsApp green */
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
  }
  
  .btn.whatsapp:hover {
    background-color: #1ebe5b;   /* Slightly darker green on hover */
  }
  header .btn.whatsapp {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
  }
  /* ===============  Buttons (consistent)  =============== */
:root{
    --brand:#d86f13;       /* your orange */
    --brand-600:#bf600f;   /* hover */
    --ink:#111;
    --paper:#fff;
  }
  
  .btn{
    -webkit-tap-highlight-color: transparent;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.70rem 1rem;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.08);
    font-weight:700; letter-spacing:.2px;
    background:#f6f7f9; color:var(--ink);
    transition: transform .06s ease, filter .15s ease, background .2s ease, border-color .2s ease;
    text-decoration:none;
  }
  .btn:hover{ filter:brightness(.98); transform: translateY(-1px); }
  .btn:active{ transform: translateY(0); }
  .btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(216,111,19,.25); }
  
  /* Primary (use this for Get the App, WhatsApp, CTAs) */
  .btn--primary{
    background: var(--brand); color:white; border-color:transparent;
    box-shadow: 0 8px 20px rgba(216,111,19,.20);
  }
  .btn--primary:hover{ background: var(--brand-600); }
  
  /* Outline (secondary actions if you want them) */
  .btn--outline{
    background: transparent; color: var(--brand);
    border-color: rgba(216,111,19,.35);
  }
  .btn--outline:hover{ background: rgba(216,111,19,.08); }
  
  /* Size helpers */
  .btn--sm{ padding:.45rem .8rem; border-radius:12px; font-size:.92rem; }
  .btn--block{ width:100%; }
  
  /* If you want WhatsApp to keep brand green but same style */
  .btn--wa{ background:#25D366; color:#fff; border-color:transparent; }
  .btn--wa:hover{ background:#1ebe5b; }
  
  /* ===============  Hero layout  =============== */
  .container{max-width:1100px;margin:0 auto;padding:0 20px;}
  .hero{padding:36px 0;}
  .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;}
  .hero h1{margin:0 0 10px}
  .hero p.lead{color:#333;max-width:60ch;margin:.2rem 0 1rem;}
  .cta-row{display:flex; gap:10px; flex-wrap:wrap;}
  
  .hero-img-wrap{
    display:flex; justify-content:center; align-items:center;
  }
  .hero-img{
    width:100%; max-width:420px; height:auto; border-radius:22px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    border:1px solid rgba(0,0,0,.06);
  }
  
  /* Responsive: stack columns on mobile */
  @media (max-width: 900px){
    .hero-grid{grid-template-columns:1fr}
    .hero-img{max-width: 520px;}
  }

  /* ====== Theme tokens ====== */
:root{
    --brand:#d86f13;         /* your orange */
    --brand-600:#bf600f;
    --bg:#ffffff;
    --ink:#0b0e12;
    --muted:#6b7280;
    --line:#e9edf2;
  }
  
  /* ====== Base ====== */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
  a{text-decoration:none;color:inherit}
  p{line-height:1.6;margin:0 0 1rem}
  .container{max-width:1100px;margin:0 auto;padding:0 20px}
  
  /* ====== Header / Nav ====== */
  .site-header{
    position: sticky; top:0; z-index:50;
    background:linear-gradient(0deg, rgba(216,111,19,.88), rgba(216,111,19,.88));
    /* subtle shadow under header */
    box-shadow:0 1px 0 rgba(0,0,0,.06);
  }
  .nav{
    height:68px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; color:#fff}
  .top-nav{display:flex; align-items:center; gap:18px}
  .top-nav a{color:#fff; opacity:.9; font-weight:600}
  .top-nav a:hover{opacity:1}
  .top-actions{display:flex; align-items:center; gap:10px}
  
  /* ====== Buttons (consistent) ====== */
  .btn{
    -webkit-tap-highlight-color: transparent;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.70rem 1rem; border-radius:14px; border:1px solid rgba(0,0,0,.06);
    font-weight:700; letter-spacing:.2px; background:#f6f7f9; color:var(--ink);
    transition: transform .06s ease, filter .15s ease, background .2s ease;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
  }
  .btn:hover{ filter:brightness(.98); transform: translateY(-1px); }
  .btn:active{ transform: translateY(0); }
  
  .btn--primary{ background:var(--brand); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(216,111,19,.22);}
  .btn--primary:hover{ background:var(--brand-600); }
  
  .btn--outline{ background:transparent; color:var(--brand); border-color:rgba(216,111,19,.35);}
  .btn--outline:hover{ background:rgba(216,111,19,.08); }
  
  .btn--sm{ padding:.48rem .85rem; border-radius:12px; font-size:.92rem; }
  
  /* Optional: keep WA green but same shape */
  .btn--wa{ background:#25D366; color:#fff; border-color:transparent;}
  .btn--wa:hover{ background:#1ebe5b; }
  
  /* ====== Hero ====== */
  .hero{
    padding:48px 0 24px;
    background:
      radial-gradient(900px 360px at 80% -10%, rgba(216,111,19,.10), transparent),
      radial-gradient(700px 280px at 0% 0%, rgba(0,0,0,.04), transparent);
    border-bottom:1px solid var(--line);
  }
  .hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; }
  .hero h1{margin:0 0 10px; font-size:32px}
  .hero p.lead{color:#2d3748; margin:0 0 18px; max-width:60ch}
  .cta-row{display:flex; gap:10px; flex-wrap:wrap}
  
  /* Phone frame for the app screenshot */
  .phone{
    width:100%; max-width:400px; margin-inline:auto; border-radius:28px;
    background:#fff; border:1px solid rgba(0,0,0,.06);
    box-shadow: 0 20px 40px rgba(0,0,0,.16);
    padding:10px;        /* “bezel” */
  }
  .phone img{ width:100%; height:auto; display:block; border-radius:20px; }
  
  /* ====== Sections ====== */
  .section{ padding:54px 0; }
  .section h2{ margin:0 0 12px; font-size:24px }
  .section .muted{ color:var(--muted) }
  
  /* ====== Footer ====== */
  .site-footer{ border-top:1px solid var(--line); background:#fff; }
  .footer-inner{ display:flex; align-items:center; justify-content:center; height:64px; color:var(--muted); }
  
  /* ====== Responsive ====== */
  @media (max-width: 900px){
    .hero-grid{ grid-template-columns:1fr; }
    .top-actions{ gap:8px; }
  }
/* --- How it works --- */
.hiw-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  
  .hiw-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    box-shadow:0 2px 12px rgba(0,0,0,.04);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .hiw-card:hover{
    transform: translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  
  .hiw-card h3{
    margin:10px 0 6px;
    font-size:18px;
  }
  
  .hiw-card p{
    margin:0;
    color:var(--muted);
  }
  
  /* icon chip */
  .hiw-icon{
    width:46px;height:46px;border-radius:12px;
    display:grid;place-items:center;
    margin-bottom:10px;
    background:rgba(216,111,19,.10);           /* default tint */
    border:1px solid rgba(216,111,19,.25);
  }
  .hiw-icon svg{ width:24px;height:24px; fill:none; stroke:#d86f13; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
  
  /* optional accent tints per step */
  .hiw-icon.user{ background:rgba(216,111,19,.10) }
  .hiw-icon.restaurant{ background:rgba(250,207,90,.14); border-color:rgba(250,207,90,.35) }
  .hiw-icon.driver{ background:rgba(49,208,170,.12); border-color:rgba(49,208,170,.35) }
  
  /* tagline */
  .hiw-tagline{
    text-align:center;
    margin-top:18px;
    color:#2d3748;
  }
  
  /* responsive */
  @media (max-width: 900px){
    .hiw-grid{ grid-template-columns:1fr; }
  }
  /* ===== Partner CTA ===== */
.partners{
    background: linear-gradient(180deg, rgba(216,111,19,.06), rgba(49,208,170,.05));
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .partners-inner{
    display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center;
  }
  .partners .lead{ color:#2d3748; margin:.4rem 0 1rem; }
  
  .benefits{
    list-style:none; padding:0; margin:12px 0 16px;
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;
  }
  .benefits li{
    background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px;
    display:flex; gap:10px; align-items:flex-start;
    box-shadow:0 2px 12px rgba(0,0,0,.04);
  }
  .b-icon{
    display:grid; place-items:center;
    width:36px; height:36px; border-radius:10px;
    background:rgba(216,111,19,.1); border:1px solid rgba(216,111,19,.25);
    font-size:18px;
  }
  .benefits li p{ margin:.2rem 0 0; color:var(--muted); }
  
  /* Decorative “dashboard card” mock */
  .partners-card{
    background:#fff; border:1px solid var(--line); border-radius:18px;
    box-shadow:0 16px 40px rgba(0,0,0,.12);
    overflow:hidden;
  }
  .pc-head{
    height:36px; background:#f6f7f9; border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:6px; padding:0 10px;
  }
  .pc-head .dot{ width:10px; height:10px; border-radius:50%; background:#e57373; }
  .pc-head .dot:nth-child(2){ background:#ffd166; }
  .pc-head .dot:nth-child(3){ background:#7bd389; }
  .pc-body{ padding:16px; }
  .pc-body h3{ margin:0 0 8px; font-size:18px; }
  .pc-body ul{ margin:0; padding-left:18px; color:#2d3748; }
  .tiny-note{ margin-top:10px; color:var(--muted); font-size:.9rem; }
  
  /* Responsive */
  @media (max-width: 900px){
    .partners-inner{ grid-template-columns:1fr; }
    .benefits{ grid-template-columns:1fr; }
  }
/* Contact section */
.contact{
    text-align:center;
    background:#fff;
    padding:40px 0;
  }
  
  .contact .lead{
    margin-bottom:20px;
    color:var(--muted);
  }
  
  .contact-info{
    margin-bottom:18px;
  }
  .contact-info div{
    margin:6px 0;
    font-size:16px;
  }
  
  .social-links {
    display: flex;
    justify-content: center;
    gap: 14px;
  }
  
  .social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  
  .social-links img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none; /* Removes gold tint */
    transition: transform 0.2s ease;
  }
  
  .social-links a:hover img {
    transform: scale(1.1); /* Slight zoom on hover */
  }
    /* Mobile polish */
@media (max-width: 900px){
    /* Header: keep actions on one line or wrap cleanly */
    .top-actions { gap: 8px; }
    .btn--sm { padding:.5rem .8rem; font-size:.95rem; }
  
    /* Hero: stack, center, space nicely */
    .hero { padding: 28px 0 10px; }
    .hero-grid { grid-template-columns: 1fr; gap: 18px; }
    .hero h1 { font-size: 26px; line-height: 1.15; }
    .hero p.lead { font-size: 15px; margin-bottom: 10px; }
    .cta-row { gap: 8px; }
    .cta-row .btn { padding:.65rem .9rem; }
    .phone { max-width: 340px; }       /* app screenshot */
    .hero .container { padding: 0 16px; }
  
    /* “How it works” cards: single column */
    .hiw-grid { grid-template-columns: 1fr; gap: 12px; }
  
    /* Partner section: single column + tighter cards */
    .partners-inner { grid-template-columns: 1fr; gap: 16px; }
    .benefits { grid-template-columns: 1fr; }
    .benefits li { padding: 12px; }
  
    /* Contact icons: same size, aligned */
    .social-links a { width: 36px; height: 36px; }
  }
  
  #google_translate_element { margin: 6px 0; }
  #google_translate_element .goog-te-gadget { font-size: 0; } /* hide "Powered by" label text */
  #google_translate_element .goog-te-gadget .goog-te-combo {
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
  }
  
  

/* === KB Mobile Polish === */
@media (max-width: 900px){
  .nav{ padding:0 8px; gap:8px; }
  .top-actions{ gap:8px; flex-wrap:wrap; }
  .btn--sm{ padding:.5rem .8rem; font-size:.95rem; }

  .hero{ padding:28px 0 10px; }
  .hero-grid{ grid-template-columns:1fr !important; gap:18px; }
  .hero h1{ font-size:26px; line-height:1.18; }
  .hero p.lead{ font-size:15px; margin-bottom:12px; }
  .cta-row{ gap:8px; }
  .cta-row .btn{ padding:.65rem .9rem; }
  .phone{ max-width:360px; margin-inline:auto; }

  .hiw-grid{ grid-template-columns:1fr !important; gap:12px; }
  .hiw-card{ padding:14px; }

  .partners-inner{ grid-template-columns:1fr !important; gap:16px; }
  .benefits{ grid-template-columns:1fr !important; }
  .benefits li{ padding:12px; }

  .social-links a{ width:36px; height:36px; }
}

@media (max-width: 420px){
  .cta-row .btn{ width:100%; justify-content:center; }
  .top-nav{ display:none; }
}

/* Social icon sizing & keep brand colors */
.social-links{ display:flex; justify-content:center; gap:14px; }
.social-links a{ width:40px; height:40px; display:inline-block; }
.social-links img{ width:100%; height:100%; object-fit:contain; filter:none; transition:transform .2s ease; }
.social-links a:hover img{ transform:scale(1.08); }


/* === KB Language Switch === */
.lang-fab{
  position: fixed; bottom: 14px; right: 14px; z-index: 9999;
  background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:14px;
  padding:6px; display:flex; gap:6px; box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.lang-fab button{
  -webkit-tap-highlight-color: transparent;
  background:#fff; color:#111; border:1px solid transparent;
  padding:.35rem .55rem; border-radius:10px; font-weight:700;
  font-size:.92rem; line-height:1; display:inline-flex; align-items:center; gap:.35rem;
}
.lang-fab button.active{ background: var(--brand, #d86f13); color:#fff; }
@media (max-width:520px){
  .lang-fab button{ font-size:0; padding:.38rem .48rem; }
  .lang-fab button span{ font-size:18px; }
}
/* hide Google default UI/banners but keep functional */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.goog-te-gadget{ font-size:0 !important; }
.goog-te-banner-frame{ display:none !important; }
body{ top:0 !important; }
/* Keep Google UI hidden but functional */
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}

.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-te-gadget {
    font-size: 0 !important;
}
/* hides "Powered by Google" label */

/* Header language pill */
.lang-switch {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
}

.lang-btn {
    -webkit-tap-highlight-color: transparent;
    background: #fff;
    color: #111;
    border: 1px solid transparent;
    padding: .35rem .55rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1;
}

    .lang-btn.is-active {
        background: var(--brand, #d86f13);
        color: #fff;
    }

@media (max-width:520px) {
    .lang-btn {
        padding: .35rem .45rem;
        font-size: .85rem;
    }
}
@media (max-width: 900px) {
    .hero {
        padding: 28px 0 10px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hero h1 {
        font-size: 26px;
        line-height: 1.18;
    }

    .hero p.lead {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .phone {
        max-width: 360px;
        margin-inline: auto;
    }

    .cta-row {
        gap: 8px;
    }

    .hiw-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .partners-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .cta-row .btn {
        width: 100%;
        justify-content: center;
    }

    .top-nav {
        display: none;
    }
}

/* === KB Bottom-right Language FAB === */
.lang-fab{
  position: fixed; bottom: 14px; right: 14px; z-index: 9999;
  background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:14px;
  padding:6px; display:flex; gap:6px; box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.lang-fab .lang-btn{
  -webkit-tap-highlight-color: transparent;
  background:#fff; color:#111; border:1px solid transparent;
  padding:.35rem .55rem; border-radius:10px; font-weight:700; font-size:.92rem; line-height:1;
  display:inline-flex; align-items:center; gap:.35rem;
}
.lang-fab .lang-btn.active{ background: var(--brand, #d86f13); color:#fff; }
@media (max-width:520px){
  .lang-fab .lang-btn{ font-size:0; padding:.38rem .48rem; }
  .lang-fab .lang-btn span{ font-size:18px; }
}
.visually-hidden{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.goog-te-banner-frame{ display:none !important; }
body{ top:0 !important; }
.goog-te-gadget{ font-size:0 !important; }