/* ─────────────────────────────────────────────────────────────
   AFRICAFRESH EXPORT LLC · EXPRESS — mobile-first QR landing
   ───────────────────────────────────────────────────────────── */

:root{
  --paper:       #FAF6ED;
  --ink:         #1A1410;
  --ink-soft:    #3B2F24;
  --terra:       #C24828;
  --sunset:      #E87B3A;
  --fresh:       #3A8C46;
  --gold:        #C9A961;
  --leaf:        #6D8A4F;
  --whatsapp:    #25D366;
  --line:        rgba(26,20,16,0.12);
  --line-soft:   rgba(26,20,16,0.06);
  --shadow-lg:   0 1px 0 rgba(26,20,16,0.04), 0 24px 48px -24px rgba(26,20,16,0.25), 0 8px 16px -12px rgba(26,20,16,0.12);
  --shadow-md:   0 1px 0 rgba(26,20,16,0.05), 0 12px 24px -16px rgba(26,20,16,0.18);

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans:  "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

html{
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
body{
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Warm ambient background */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 600px at 90% -5%, rgba(232,123,58,0.13), transparent 55%),
    radial-gradient(700px 500px at -5% 100%, rgba(194,72,40,0.07), transparent 55%);
}
body::after{
  content:"";
  position: fixed; inset:0;
  pointer-events:none; z-index:0; opacity:0.3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

main{
  position: relative; z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 18px 40px;
}

/* ── MANIFEST BAR ─────────────────────────────────────── */
.manifest{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  box-shadow: var(--shadow-md);
}
.manifest-left{
  display:flex; align-items:center; gap: 8px;
  min-width: 0;
}
.pulse{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 0 rgba(109,138,79,0.55);
  animation: pulse 2s infinite ease-out;
  flex: 0 0 auto;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(109,138,79,0.55); }
  80%{ box-shadow: 0 0 0 10px rgba(109,138,79,0); }
  100%{ box-shadow: 0 0 0 0 rgba(109,138,79,0); }
}
.batch{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-chip{
  appearance:none;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 7px 11px 7px 9px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display:flex; align-items:center; gap: 6px;
  cursor: pointer;
  transition: transform .12s ease;
  flex: 0 0 auto;
}
.lang-chip:active{ transform: scale(0.96); }
.lang-chip .globe{ width:12px; height:12px; }
.lang-chip .flag{ font-size: 13px; line-height: 1; }

/* ── LOGO ─────────────────────────────────────────────── */
.logo-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 52px 0 44px;
  opacity: 0;
  animation: rise .65s cubic-bezier(.2,.7,.2,1) .08s forwards;
}
/* Exact match to .nav-logo on main site */
.site-logo{
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.site-logo span{ color: var(--fresh); }
.site-logo em{ color: var(--terra); font-style: normal; }

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

/* ── ACTION TILES ─────────────────────────────────────── */
.actions{
  display: grid;
  gap: 14px;
}

.tile{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  appearance:none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s;
  opacity: 0;
  transform: translateY(12px);
  animation: rise .65s cubic-bezier(.2,.7,.2,1) forwards;
}
.tile:nth-child(1){ animation-delay: .18s; }
.tile:nth-child(2){ animation-delay: .26s; }
.tile:nth-child(3){ animation-delay: .34s; }

.tile:active{
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 1px 0 rgba(26,20,16,0.05), 0 4px 10px -6px rgba(26,20,16,0.2);
}

.tile .ico{
  flex: 0 0 auto;
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid; place-items: center;
}
.tile .ico svg{ width: 28px; height: 28px; }

.tile .copy{ flex: 1 1 auto; min-width:0; }
.tile .label{
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "SOFT" 20;
  font-weight: 480;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  display:block;
}
.tile .hint{
  display:block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.tile .arrow{
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display:grid; place-items:center;
  color: var(--ink-soft);
  transition: transform .2s ease;
}
.tile:hover .arrow{ transform: translateX(3px); }

/* Telegram */
.tile--tg .ico{
  background: linear-gradient(160deg, #29B6F6 0%, #0288D1 100%);
  color:#fff;
  box-shadow: 0 6px 18px -6px rgba(41,182,246,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.tile--tg::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background: #29B6F6;
}

/* WhatsApp */
.tile--wa .ico{
  background: linear-gradient(160deg, #25D366 0%, #128C7E 100%);
  color:#fff;
  box-shadow: 0 6px 18px -6px rgba(37,211,102,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.tile--wa::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background: var(--whatsapp);
}

/* Catalog */
.tile--cat .ico{
  background: linear-gradient(160deg, var(--sunset) 0%, var(--terra) 100%);
  color:#fff;
  box-shadow: 0 6px 18px -6px rgba(194,72,40,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
}
.tile--cat::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background: var(--terra);
}

/* Request call */
.tile--call .ico{
  background: linear-gradient(160deg, #2B2620 0%, #0F0B08 100%);
  color: var(--gold);
  box-shadow: 0 6px 18px -6px rgba(26,20,16,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
.tile--call::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background: var(--gold);
}

/* RTL */
html[dir="rtl"] .tile::before{ left:auto; right:0; }

/* ── FOOTER ───────────────────────────────────────────── */
footer{
  margin-top: 36px;
  text-align:center;
  display: grid;
  justify-items: center;
  gap: 8px;
  opacity: 0;
  animation: rise .6s ease .45s forwards;
}
footer span,
footer address{
  font: 500 12px/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
footer address{
  font-style: normal;
}
footer a{
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── MODAL ────────────────────────────────────────────── */
.modal{
  position: fixed; inset: 0;
  background: rgba(15,11,8,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: opacity .25s ease;
}
.modal.open{ display:flex; opacity:1; }
.sheet{
  width: 100%;
  max-width: 560px;
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  padding: 10px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.4);
  transform: translateY(30px);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
  max-height: 92dvh;
  overflow-y: auto;
}
.modal.open .sheet{ transform: none; }
.grab{
  width: 42px; height: 4px; border-radius: 2px;
  background: rgba(26,20,16,0.2);
  margin: 6px auto 18px;
}
.sheet h2{
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  font-weight: 380;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}
.sheet h2 em{ font-style: italic; color: var(--terra); }
.sheet p.lead{
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.field{ margin-bottom: 14px; }
.field label{
  display:block;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.phoneRow{ display:flex; gap: 8px; }
.phoneRow select, .field input, .field textarea{
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.phoneRow select{
  flex: 0 0 98px;
  font: 500 14px/1 var(--mono);
  letter-spacing: 0.04em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231A1410' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 28px;
  -webkit-appearance:none; appearance:none;
}
.field input:focus, .field textarea:focus, .phoneRow select:focus{
  border-color: var(--terra);
  box-shadow: 0 0 0 4px rgba(194,72,40,0.12);
}
.field textarea{ resize:vertical; min-height:88px; line-height:1.5; }

.form-err{
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(194,72,40,0.08);
  border: 1px solid rgba(194,72,40,0.3);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--terra);
  line-height: 1.45;
}

.submit{
  appearance:none; border:none;
  width:100%; padding:18px 20px; margin-top:8px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "SOFT" 30;
  font-weight: 460; font-size: 19px; letter-spacing: -0.01em;
  color: var(--paper); background: var(--ink);
  border-radius: 16px; cursor: pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition: transform .12s ease;
}
.submit:active{ transform: scale(0.985); }
.submit svg{ width:18px; height:18px; }

.cancel{
  appearance:none; background:transparent; border:none;
  color: var(--ink-soft);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 10px 4px;
  margin: 0 auto; display:block; cursor:pointer;
}

/* Confirmation */
.done{ text-align:center; padding:18px 6px 6px; }
.done .check{
  width:72px; height:72px; margin:8px auto 18px;
  border-radius:50%;
  background: linear-gradient(160deg, var(--leaf) 0%, #4A5D3A 100%);
  display:grid; place-items:center; color:#fff;
  box-shadow: 0 10px 30px -10px rgba(74,93,58,0.6);
  animation: pop .5s cubic-bezier(.2,1.3,.3,1) both;
}
@keyframes pop{
  0%{ transform:scale(0.4); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.done h3{
  font-family:var(--serif);
  font-weight:400;
  font-variation-settings:"opsz" 144,"SOFT" 50;
  font-size:30px; line-height:1.05; letter-spacing:-0.02em;
  margin:0 0 8px;
}
.done h3 em{ font-style:italic; color:var(--terra); }
.done p{
  color:var(--ink-soft); font-size:14.5px; line-height:1.5;
  max-width:32ch; margin:0 auto 22px;
}

/* ── LANG SHEET ───────────────────────────────────────── */
.lang-sheet{
  position:fixed; inset:0;
  background:rgba(15,11,8,0.4);
  backdrop-filter:blur(4px);
  display:none; align-items:flex-end; justify-content:center;
  z-index:110;
}
.lang-sheet.open{ display:flex; }
.lang-sheet .sheet{ max-width:420px; padding-bottom:14px; }
.lang-list{
  list-style:none; padding:0; margin:10px 0 6px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.lang-list button{
  appearance:none; width:100%; text-align:left;
  background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:14px;
  font:500 14px/1.1 var(--sans); color:var(--ink);
  cursor:pointer; display:flex; align-items:center; gap:10px;
  transition:border-color .12s, background .12s;
}
.lang-list button .flg{ font-size:20px; line-height:1; }
.lang-list button .code{
  margin-left:auto;
  font:500 10px/1 var(--mono); letter-spacing:0.12em;
  color:var(--ink-soft); text-transform:uppercase;
}
.lang-list button.active{ border-color:var(--terra); background:#FFF3EC; }

/* Accessibility */
:focus-visible{
  outline:2px solid var(--terra); outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}
@media (min-width:560px){
  .tile{ padding:22px 24px; }
  .logo-wrap{ padding:64px 0 52px; }
}