@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap');

:root {
  --brand-blue: #0a4ba7;
  --brand-blue-2: #0d5cc9;
  --brand-blue-3: #06357c;
  --brand-yellow: #facd0e;
  --brand-yellow-2: #ffe46a;
  --ink: #0b1634;
  --muted: #5d6880;
  --surface: #ffffff;
  --surface-soft: #f5f8fd;
  --surface-blue: #edf4ff;
  --line: rgba(9, 48, 107, 0.12);
  --line-strong: rgba(9, 48, 107, 0.2);
  --success: #0f8a5f;
  --danger: #bf2f45;
  --shadow-sm: 0 10px 30px rgba(13, 42, 93, 0.08);
  --shadow-md: 0 20px 60px rgba(13, 42, 93, 0.14);
  --shadow-lg: 0 34px 90px rgba(5, 38, 91, 0.22);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --container: 1180px;
  --header-h: 78px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  background: var(--surface);
}
@view-transition { navigation: auto; }
body {
  margin: 0;
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 12%, rgba(250, 205, 14, .08), transparent 23rem),
    linear-gradient(180deg, #fff 0%, #fff 75%, #f7faff 100%);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::selection { background: rgba(250,205,14,.35); color: var(--brand-blue-3); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.section { padding: 100px 0; position: relative; }
.section-sm { padding: 72px 0; }
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-blue);
  background: rgba(10, 75, 167, .07);
  border: 1px solid rgba(10, 75, 167, .1);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.section-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand-yellow);
  box-shadow: 0 0 0 5px rgba(250, 205, 14, .15);
}
.section-title {
  margin: 18px 0 12px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.section-copy {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  max-width: 760px;
}
.section-head { max-width: 790px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .section-copy { margin-inline: auto; }

.scroll-progress {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: right center;
  background: linear-gradient(90deg, var(--brand-yellow), #fff2a2);
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px) saturate(160%);
  border-color: var(--line);
  box-shadow: 0 10px 35px rgba(6, 41, 94, .07);
}
.nav {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-width: 128px;
}
.brand img {
  width: 126px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
}
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  font-weight: 600;
  font-size: .94rem;
}
.nav-links a { color: rgba(255,255,255,.86); transition: color .2s ease, transform .2s ease; }
.site-header.is-scrolled .nav-links a { color: #20304f; }
.nav-links a:hover { color: var(--brand-yellow); transform: translateY(-1px); }
.site-header.is-scrolled .nav-links a:hover { color: var(--brand-blue); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: white;
  align-items: center;
  justify-content: center;
}
.site-header.is-scrolled .menu-toggle { color: var(--brand-blue); border-color: var(--line); background: white; }
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-menu {
  display: none;
  position: fixed;
  top: calc(var(--header-h) - 4px);
  right: 16px;
  left: 16px;
  z-index: 850;
  padding: 16px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.mobile-menu[data-open="true"] { display: grid; animation: menuIn .2s var(--ease) both; }
.mobile-menu a { padding: 12px 14px; border-radius: 12px; font-weight: 650; }
.mobile-menu a:hover { background: var(--surface-blue); color: var(--brand-blue); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

.btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 14px;
  padding: 11px 18px;
  font-weight: 700;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.btn-primary {
  background: var(--brand-yellow);
  color: #18335f;
  box-shadow: 0 12px 30px rgba(250, 205, 14, .22);
}
.btn-primary:hover { box-shadow: 0 16px 36px rgba(250, 205, 14, .3); background: #ffd92f; }
.btn-blue { background: var(--brand-blue); color: white; box-shadow: 0 14px 34px rgba(10,75,167,.2); }
.btn-blue:hover { background: var(--brand-blue-2); }
.btn-ghost { color: white; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-outline { color: var(--brand-blue); border: 1px solid var(--line-strong); background: #fff; }
.btn-outline:hover { border-color: rgba(10,75,167,.35); box-shadow: var(--shadow-sm); }
.btn-disabled, .btn[aria-disabled="true"] { opacity: .68; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.hero {
  position: relative;
  overflow: clip;
  padding: calc(var(--header-h) + 72px) 0 90px;
  min-height: 760px;
  background:
    radial-gradient(circle at 8% 22%, rgba(250,205,14,.20), transparent 21rem),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,.1), transparent 22rem),
    linear-gradient(135deg, #06316f 0%, #0a4ba7 48%, #0d5cc9 100%);
  color: white;
}
.hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.09);
  top: 15%;
  left: -180px;
  box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.016);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 2;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  font-size: .88rem;
  font-weight: 650;
}
.hero-kicker span { width: 8px; height: 8px; background: var(--brand-yellow); border-radius: 999px; box-shadow: 0 0 0 5px rgba(250,205,14,.13); }
.hero h1 {
  margin: 22px 0 18px;
  font-size: clamp(3rem, 6.3vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.hero h1 .accent { color: var(--brand-yellow); }
.hero-copy {
  margin: 0;
  max-width: 690px;
  color: rgba(255,255,255,.82);
  font-size: clamp(1.06rem, 1.8vw, 1.28rem);
  line-height: 1.9;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.store-pill {
  min-width: 164px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.92);
}
.store-pill svg { width: 25px; height: 25px; }
.store-pill small { display: block; font-size: .68rem; color: rgba(255,255,255,.58); line-height: 1.1; }
.store-pill strong { display: block; font-family: Inter, sans-serif; font-size: .88rem; margin-top: 4px; }
.hero-note { color: rgba(255,255,255,.56); font-size: .8rem; margin-top: 12px; }

.map-shell {
  position: relative;
  border-radius: 34px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 40px 100px rgba(0, 24, 63, .36);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}
.map-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border-radius: 25px;
  background: #f8fbff;
  color: var(--ink);
}
.map-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
}
.map-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--surface-soft);
  color: #7a8497;
  font-size: .86rem;
}
.map-search svg { width: 17px; height: 17px; }
.map-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-blue); color: var(--brand-yellow); font-weight: 800; }
.map-stage {
  position: relative;
  height: 330px;
  overflow: hidden;
  background:
    linear-gradient(26deg, transparent 0 43%, rgba(255,255,255,.92) 43% 46%, transparent 46%),
    linear-gradient(104deg, transparent 0 32%, rgba(255,255,255,.92) 32% 35%, transparent 35%),
    linear-gradient(153deg, transparent 0 57%, rgba(255,255,255,.82) 57% 60%, transparent 60%),
    radial-gradient(circle at 30% 25%, #d4ebdb 0 7%, transparent 7.5%),
    radial-gradient(circle at 72% 62%, #d4ebdb 0 9%, transparent 9.5%),
    #dbe8f3;
}
.map-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(10,75,167,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(10,75,167,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .45;
}
.map-pin {
  position: absolute;
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50% 50% 50% 10%;
  transform: rotate(-45deg);
  background: var(--brand-blue);
  box-shadow: 0 10px 24px rgba(10,75,167,.28);
  display: grid;
  place-items: center;
}
.map-pin::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-yellow); }
.map-pin:hover, .map-pin[aria-pressed="true"] { background: var(--brand-blue-2); box-shadow: 0 0 0 8px rgba(10,75,167,.1), 0 12px 28px rgba(10,75,167,.3); }
.map-pin:nth-of-type(1) { top: 18%; right: 22%; }
.map-pin:nth-of-type(2) { top: 46%; right: 54%; }
.map-pin:nth-of-type(3) { top: 65%; right: 28%; }
.map-pin:nth-of-type(4) { top: 30%; right: 72%; }
.map-pin > span { transform: rotate(45deg); }
.map-offer {
  position: absolute;
  z-index: 5;
  left: 15px;
  right: 15px;
  bottom: 13px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(10,75,167,.1);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
.offer-logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-blue); color: var(--brand-yellow); font-size: 1.25rem; font-weight: 800; }
.map-offer h3 { margin: 0; font-size: .94rem; }
.map-offer p { margin: 2px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.offer-badge { padding: 6px 9px; border-radius: 999px; background: rgba(250,205,14,.2); color: #846b00; font-size: .72rem; font-weight: 750; }
.map-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px;
  background: white;
}
.map-stat { text-align: center; padding: 9px 6px; border-radius: 12px; background: var(--surface-soft); }
.map-stat strong { display: block; color: var(--brand-blue); font-size: .86rem; }
.map-stat span { display: block; color: var(--muted); font-size: .7rem; margin-top: 2px; }

.trust-strip { margin-top: -34px; position: relative; z-index: 10; }
.trust-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.trust-item { display: flex; align-items: center; gap: 13px; padding: 22px 24px; }
.trust-item + .trust-item { border-right: 1px solid var(--line); }
.trust-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-blue); color: var(--brand-blue); flex: 0 0 auto; }
.trust-icon svg { width: 22px; height: 22px; }
.trust-item strong { display: block; font-size: .94rem; }
.trust-item span { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.about-visual {
  position: relative;
  min-height: 490px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 28% 30%, rgba(250,205,14,.38), transparent 11rem),
    linear-gradient(145deg, #0b4da8 0%, #06357b 100%);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-visual::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  left: -100px;
  top: -90px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 55px rgba(255,255,255,.04), 0 0 0 110px rgba(255,255,255,.025);
}
.phone-mockup {
  position: absolute;
  width: 260px;
  height: 430px;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%) rotate(4deg);
  border-radius: 38px;
  padding: 10px;
  background: #0b1424;
  box-shadow: 0 26px 60px rgba(0,0,0,.28);
}
.phone-screen { height: 100%; border-radius: 30px; overflow: hidden; background: #f7faff; }
.phone-top { height: 90px; padding: 18px; background: var(--brand-blue); color: white; }
.phone-top small { color: rgba(255,255,255,.7); }
.phone-top strong { display: block; margin-top: 4px; }
.phone-map { height: 210px; position: relative; background: repeating-linear-gradient(35deg,#dfeaf5 0 18px,#edf4f9 18px 36px); }
.phone-map i { position: absolute; width: 22px; height: 22px; border-radius: 50% 50% 50% 7px; transform: rotate(-45deg); background: var(--brand-blue); box-shadow: 0 6px 14px rgba(10,75,167,.2); }
.phone-map i:nth-child(1){right:28%;top:28%;}.phone-map i:nth-child(2){right:62%;top:48%;}.phone-map i:nth-child(3){right:42%;top:68%;}
.phone-offer { margin: -24px 13px 0; position: relative; z-index: 3; padding: 13px; border-radius: 16px; background: white; box-shadow: var(--shadow-sm); }
.phone-offer b { font-size: .8rem; }.phone-offer p { margin: 3px 0 0; font-size: .68rem; color: var(--muted); }
.floating-card { position: absolute; border-radius: 16px; padding: 13px 15px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,.4); }
.floating-card.one { right: 24px; top: 34px; }.floating-card.two { left: 22px; bottom: 44px; }
.floating-card b { display: block; color: var(--brand-blue); font-size: .82rem; }.floating-card span { display: block; color: var(--muted); font-size: .68rem; margin-top: 2px; }
.about-points { display: grid; gap: 18px; margin-top: 30px; }
.about-point { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.about-point .icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--brand-blue); background: var(--surface-blue); }
.about-point .icon svg { width: 22px; height: 22px; }
.about-point h3 { margin: 0 0 4px; font-size: 1rem; }.about-point p { margin: 0; color: var(--muted); font-size: .92rem; }

.features { background: linear-gradient(180deg, #f8fbff 0%, #fff 100%); }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature-card {
  position: relative;
  overflow: hidden;
  padding: 26px;
  min-height: 250px;
  border-radius: var(--radius-md);
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 14px 44px rgba(11,45,97,.06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(10,75,167,.18); }
.feature-card::after { content: ""; position: absolute; width: 140px; height: 140px; left: -55px; bottom: -65px; border-radius: 50%; background: rgba(10,75,167,.035); }
.feature-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: var(--brand-blue); background: linear-gradient(145deg, #edf4ff, #f8fbff); border: 1px solid rgba(10,75,167,.09); }
.feature-icon svg { width: 25px; height: 25px; }
.feature-card h3 { margin: 20px 0 8px; font-size: 1.15rem; }.feature-card p { margin: 0; color: var(--muted); font-size: .94rem; }
.feature-card.primary { background: linear-gradient(145deg, var(--brand-blue), var(--brand-blue-3)); color: white; border: 0; }
.feature-card.primary .feature-icon { color: var(--brand-yellow); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.13); }
.feature-card.primary p { color: rgba(255,255,255,.73); }

.producers-wrap {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: stretch;
  background: linear-gradient(135deg, #fff7cb, #fffdf2);
  border: 1px solid rgba(250,205,14,.35);
  border-radius: 30px;
  padding: 46px;
  overflow: hidden;
  position: relative;
}
.producers-wrap::after { content: ""; position: absolute; width: 260px; height: 260px; left: -100px; bottom: -110px; border-radius: 50%; border: 46px solid rgba(250,205,14,.17); }
.producer-tags { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 24px; }
.producer-tags span { padding: 8px 12px; border-radius: 999px; background: white; border: 1px solid rgba(112,90,0,.1); color: #6b5600; font-size: .84rem; font-weight: 650; }
.producer-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 2; }
.product-mini { min-height: 150px; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.84); border: 1px solid rgba(120,98,0,.09); box-shadow: 0 12px 30px rgba(80,66,0,.06); }
.product-mini:nth-child(2) { transform: translateY(24px); }.product-mini:nth-child(3) { transform: translateY(-8px); }
.product-mini .dot { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-yellow); color: var(--brand-blue-3); font-weight: 800; }
.product-mini h4 { margin: 14px 0 3px; font-size: .92rem; }.product-mini p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }

.merchant-section { background: linear-gradient(145deg, #061f49 0%, #083b86 100%); color: white; overflow: hidden; }
.merchant-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 60px; align-items: center; }
.merchant-section .section-kicker { background: rgba(255,255,255,.08); color: white; border-color: rgba(255,255,255,.13); }
.merchant-section .section-copy { color: rgba(255,255,255,.72); }
.merchant-list { display: grid; gap: 12px; margin: 26px 0 30px; }
.merchant-list div { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.88); font-size: .94rem; }
.merchant-list svg { width: 20px; height: 20px; color: var(--brand-yellow); flex: 0 0 auto; }
.dashboard-mock {
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  padding: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.24);
  transform: perspective(1200px) rotateY(4deg);
}
.dashboard-inner { display: grid; grid-template-columns: 95px 1fr; min-height: 420px; border-radius: 18px; overflow: hidden; background: #f5f8fc; color: var(--ink); }
.dash-side { background: #fff; border-left: 1px solid var(--line); padding: 18px 12px; }
.dash-brand { height: 36px; border-radius: 11px; background: var(--brand-blue); margin-bottom: 24px; }
.dash-line { height: 10px; border-radius: 999px; background: #e7eef7; margin: 12px 2px; }.dash-line.active { background: rgba(10,75,167,.18); }
.dash-main { padding: 22px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dash-title { width: 120px; height: 14px; border-radius: 999px; background: #1b2940; }.dash-actions { display:flex;gap:7px;}.dash-actions i {width:32px;height:32px;border-radius:10px;background:#fff;border:1px solid var(--line);}
.dash-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.dash-kpi { padding: 14px; border-radius: 15px; background: white; border: 1px solid var(--line); }.dash-kpi b { display:block;color:var(--brand-blue);font-size:1.05rem;}.dash-kpi span {font-size:.65rem;color:var(--muted);}
.dash-chart { height: 130px; margin-top: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); padding: 15px; display:flex;align-items:end;gap:8px; }
.dash-chart i { flex:1; border-radius:7px 7px 2px 2px; background: linear-gradient(180deg,var(--brand-blue-2),rgba(10,75,167,.22)); }.dash-chart i:nth-child(1){height:32%;}.dash-chart i:nth-child(2){height:58%;}.dash-chart i:nth-child(3){height:43%;}.dash-chart i:nth-child(4){height:74%;}.dash-chart i:nth-child(5){height:54%;}.dash-chart i:nth-child(6){height:88%;}.dash-chart i:nth-child(7){height:69%;}
.dash-table { margin-top:12px;display:grid;gap:8px; }.dash-row {height:38px;border-radius:12px;background:#fff;border:1px solid var(--line);}

.steps-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step; }
.step-card { position:relative;padding:28px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 34px rgba(9,49,104,.05);counter-increment:step; }
.step-card::before { content:"0" counter(step); position:absolute;top:18px;left:20px;font-family:Inter,sans-serif;font-size:2.2rem;font-weight:800;color:rgba(10,75,167,.07); }
.step-number { width:44px;height:44px;border-radius:14px;background:var(--brand-yellow);display:grid;place-items:center;color:var(--brand-blue-3);font-weight:800;margin-bottom:18px; }
.step-card h3 {margin:0 0 7px;font-size:1.05rem}.step-card p{margin:0;color:var(--muted);font-size:.9rem}

.privacy-band { padding: 34px; border-radius: 28px; background: linear-gradient(135deg,#eef5ff,#f9fbff); border:1px solid var(--line); display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center; }
.privacy-list {display:grid;grid-template-columns:1fr 1fr;gap:12px}.privacy-item{display:flex;align-items:flex-start;gap:10px;padding:14px;border-radius:16px;background:white;border:1px solid var(--line)}.privacy-item svg{width:20px;height:20px;color:var(--brand-blue);flex:0 0 auto;margin-top:2px}.privacy-item b{font-size:.86rem}.privacy-item span{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}

.contact { background: linear-gradient(180deg,#fff,#f7faff); }
.contact-grid { display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:start; }
.contact-cards {display:grid;gap:12px;margin-top:28px}.contact-card{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff}.contact-card .icon{width:46px;height:46px;border-radius:14px;background:var(--surface-blue);color:var(--brand-blue);display:grid;place-items:center}.contact-card svg{width:22px;height:22px}.contact-card b{display:block;font-size:.9rem}.contact-card span,.contact-card a{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}.contact-card a:hover{color:var(--brand-blue)}.is-placeholder{pointer-events:none;color:#8b94a6!important}
.contact-form {padding:26px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.82rem;font-weight:650;color:#2d3b55}.field input,.field textarea{width:100%;border:1px solid #dbe3ee;border-radius:13px;background:#fbfdff;padding:12px 13px;outline:none;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.field input:focus,.field textarea:focus{border-color:rgba(10,75,167,.45);box-shadow:0 0 0 4px rgba(10,75,167,.08);background:#fff}.field textarea{resize:vertical;min-height:135px}.form-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.form-note{font-size:.72rem;color:var(--muted);margin:0}.form-status{font-size:.76rem;margin-top:10px;min-height:1.4em}.form-status[data-type="error"]{color:var(--danger)}.form-status[data-type="success"]{color:var(--success)}

.faq-list {display:grid;gap:10px;max-width:860px;margin-inline:auto}.faq-item{border:1px solid var(--line);border-radius:18px;background:white;overflow:hidden}.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;border:0;background:white;padding:18px 20px;text-align:right;color:var(--ink);font-weight:700}.faq-question svg{width:20px;height:20px;color:var(--brand-blue);transition:transform .2s ease}.faq-question[aria-expanded="true"] svg{transform:rotate(45deg)}.faq-answer{padding:0 20px 18px;color:var(--muted);font-size:.92rem}.faq-answer p{margin:0}

.site-footer { background:#061d43;color:white;padding:64px 0 24px; }
.footer-grid { display:grid;grid-template-columns:1.2fr .75fr .75fr 1fr;gap:36px; }
.footer-brand img { width:148px;height:60px;object-fit:contain;border-radius:11px;margin-bottom:16px}.footer-brand p{margin:0;color:rgba(255,255,255,.62);font-size:.88rem;max-width:330px}.footer-title{font-size:.9rem;margin:0 0 14px;color:white}.footer-links{display:grid;gap:10px}.footer-links a{font-size:.84rem;color:rgba(255,255,255,.64)}.footer-links a:hover{color:var(--brand-yellow)}
.verification-box{padding:15px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}.verification-box .v-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.75rem}.verification-box .v-row:last-child{border-bottom:0}.verification-box .v-row span:first-child{color:rgba(255,255,255,.5)}.verification-box .v-row span:last-child{color:rgba(255,255,255,.84);text-align:left}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;color:rgba(255,255,255,.48);font-size:.76rem}.footer-mini{display:flex;gap:14px;flex-wrap:wrap}.footer-mini a:hover{color:white}

.legal-hero { padding: calc(var(--header-h) + 64px) 0 64px; background:linear-gradient(135deg,#06316f,#0a4ba7);color:white; }
.legal-hero .breadcrumbs{display:flex;gap:8px;align-items:center;color:rgba(255,255,255,.6);font-size:.82rem;margin-bottom:16px}.legal-hero h1{margin:0 0 12px;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.15}.legal-hero p{margin:0;max-width:760px;color:rgba(255,255,255,.75)}
.legal-wrap{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}.legal-toc{position:sticky;top:calc(var(--header-h) + 18px);padding:18px;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}.legal-toc h3{margin:0 0 10px;font-size:.9rem}.legal-toc a{display:block;padding:8px 10px;border-radius:10px;color:var(--muted);font-size:.78rem}.legal-toc a:hover{background:var(--surface-blue);color:var(--brand-blue)}.legal-content{padding:30px;border-radius:24px;background:white;border:1px solid var(--line);box-shadow:0 12px 40px rgba(8,42,92,.05)}.legal-content h2{margin:34px 0 12px;font-size:1.4rem;color:var(--brand-blue-3)}.legal-content h2:first-child{margin-top:0}.legal-content h3{margin:24px 0 9px;font-size:1.03rem}.legal-content p,.legal-content li{color:#4e5a71;font-size:.94rem}.legal-content ul{padding-right:20px}.legal-note{padding:14px 16px;border-radius:14px;background:#fff7d3;border:1px solid rgba(250,205,14,.35);color:#685500;font-size:.82rem;margin-bottom:22px}.legal-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.legal-meta span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:.76rem;color:rgba(255,255,255,.72)}

.support-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}.support-card{padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(9,44,95,.05)}.support-card svg{width:26px;height:26px;color:var(--brand-blue)}.support-card h3{margin:14px 0 5px;font-size:1rem}.support-card p,.support-card a{margin:0;color:var(--muted);font-size:.84rem}

[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:none; }
[data-reveal][data-delay="1"] { transition-delay:.08s; }
[data-reveal][data-delay="2"] { transition-delay:.16s; }
[data-reveal][data-delay="3"] { transition-delay:.24s; }

@media (max-width: 1020px) {
  .nav-links { display:none; }
  .nav { grid-template-columns:auto 1fr auto; }
  .nav-actions .btn { display:none; }
  .menu-toggle { display:inline-flex; }
  .hero-grid,.about-grid,.merchant-grid,.contact-grid,.producers-wrap,.privacy-band { grid-template-columns:1fr; }
  .hero-grid { gap:44px; }
  .hero { padding-top:calc(var(--header-h) + 52px); }
  .map-shell { max-width:650px; width:100%; margin-inline:auto; transform:none; }
  .about-grid { gap:40px; }.about-visual{min-height:440px;}
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .producers-wrap{padding:34px}.merchant-grid{gap:44px}.dashboard-mock{transform:none}.privacy-list{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}
  .legal-wrap{grid-template-columns:1fr}.legal-toc{position:static;display:flex;gap:6px;overflow:auto}.legal-toc h3{display:none}.legal-toc a{white-space:nowrap}
}

@media (max-width: 720px) {
  :root { --header-h: 68px; }
  .container{width:min(calc(100% - 24px),var(--container))}.section{padding:76px 0}.section-sm{padding:56px 0}
  .brand img{width:110px;height:44px}.hero{min-height:auto;padding-bottom:70px}.hero h1{font-size:clamp(2.6rem,14vw,4.4rem)}.hero-copy{font-size:1rem}.hero-actions{display:grid}.hero-actions .btn{width:100%}.store-row{display:grid;grid-template-columns:1fr 1fr}.store-pill{min-width:0}
  .map-card{min-height:470px}.map-stage{height:300px}.map-offer{grid-template-columns:46px 1fr}.offer-logo{width:46px;height:46px}.offer-badge{display:none}.map-bottom{grid-template-columns:1fr 1fr 1fr}.map-shell{padding:8px;border-radius:26px}.map-card{border-radius:20px}
  .trust-card{grid-template-columns:1fr}.trust-item+.trust-item{border-right:0;border-top:1px solid var(--line)}.trust-strip{margin-top:-22px}
  .feature-grid,.steps-grid,.support-cards{grid-template-columns:1fr}.feature-card{min-height:auto}.producer-showcase{grid-template-columns:1fr 1fr}.producers-wrap{padding:26px}.product-mini{min-height:130px}.product-mini:nth-child(2),.product-mini:nth-child(3){transform:none}
  .about-visual{min-height:390px}.phone-mockup{width:225px;height:365px}.floating-card.one{right:14px}.floating-card.two{left:12px}
  .dashboard-inner{grid-template-columns:72px 1fr;min-height:350px}.dash-side{padding:14px 8px}.dash-main{padding:14px}.dash-cards{grid-template-columns:1fr 1fr}.dash-kpi:nth-child(3){display:none}.dash-chart{height:110px}
  .privacy-list{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-footer{align-items:stretch;flex-direction:column}.form-footer .btn{width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column}.site-footer{padding-top:50px}
  .legal-content{padding:22px}.legal-hero{padding-top:calc(var(--header-h) + 48px)}
}

@media (max-width: 440px) {
  .store-row{grid-template-columns:1fr}.map-toolbar{padding:12px}.map-search{font-size:.75rem}.map-stage{height:280px}.map-pin{width:36px;height:36px}.map-pin::before{width:11px;height:11px}.map-bottom{padding:10px}.map-stat span{font-size:.62rem}
  .producer-showcase{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-grid>div{grid-column:auto!important}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  [data-reveal] { opacity:1!important; transform:none!important; }
}