/* Fickle MiniStore - base design tokens & components */
:root{
  --primary:#F97316; --primary-600:#EA580C; --primary-50:#FFF4EB; --primary-100:#FFE4CC;
  --navy:#1B2433; --navy-900:#111827; --ink:#0F172A; --muted:#64748B; --line:#E5E7EB;
  --bg:#FFFFFF; --bg-soft:#F8FAFC; --success:#16A34A; --danger:#DC2626; --warn:#F59E0B;
  --radius:14px; --radius-sm:10px; --shadow:0 10px 30px rgba(15,23,42,.08);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--primary-600)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:var(--radius-sm);
  border:1.5px solid transparent;font:600 15px/1 var(--font);text-decoration:none;cursor:pointer;transition:.18s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600);transform:translateY(-1px);box-shadow:0 8px 18px rgba(249,115,22,.3)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary-600)}
.btn:focus-visible{outline:3px solid var(--primary-100);outline-offset:2px}

.brandmark{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--navy);text-decoration:none}
.brandmark i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#FB923C,var(--primary-600));color:#fff;font-style:normal;font-weight:800}
.brandmark b{color:var(--primary)}

/* Spinner ya dots: zinapanda, zinashika juu kidogo, kisha zinashuka */
.dots-loader{display:inline-flex;align-items:flex-end;gap:7px;height:34px}
.dots-loader span{width:10px;height:10px;border-radius:50%;background:var(--primary);opacity:.55;animation:dot-climb 1.5s ease-in-out infinite}
.dots-loader span:nth-child(2){animation-delay:.14s}
.dots-loader span:nth-child(3){animation-delay:.28s}
.dots-loader span:nth-child(4){animation-delay:.42s}
@keyframes dot-climb{
  0%,100%{transform:translateY(0);opacity:.55}
  25%{transform:translateY(-20px);opacity:1}   /* inapanda */
  55%{transform:translateY(-20px);opacity:1}   /* inashika */
  85%{transform:translateY(0);opacity:.55}     /* inashuka */
}
@media (prefers-reduced-motion:reduce){.dots-loader span{animation:none;opacity:1}}

/* Progress bar ya upload (itatumika hatua ya bidhaa) */
.progress{height:10px;border-radius:99px;background:var(--primary-100);overflow:hidden}
.progress>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#FB923C,var(--primary-600));transition:width .2s}

.container{width:100%;max-width:1120px;margin-inline:auto;padding-inline:20px}
.hero{background:linear-gradient(120deg,#fff 0%,var(--primary-50) 100%);padding:72px 0}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.15;margin:20px 0 14px;color:var(--navy)}
.hero h1 em{color:var(--primary);font-style:normal}
.hero p{color:var(--muted);max-width:560px;font-size:18px}