/* ===========================================================================
   DogarZada website, shared design system (October 2026).

   WHY THIS FILE EXISTS

   Every page on this site carried its own <style> block, and they had drifted:
   different button sizes, different section spacing, three shades of the same
   blue. The inbox app (inbox.dogarzada.com) meanwhile got a proper system: a
   frosted white surface, a deep navy "command panel" with a faint grid, Sora
   for headings and Inter for text. The website is the front door to that app,
   so it now speaks the same visual language.

   The colours did not change. Royal blue, navy ink, the orange flame and the
   cool white base are the same values the site already used; what changed is
   composition: spacing, depth, panels and rhythm.

   RULES FOR EDITING

   1. Pages may still keep their own <style>; this file is the base, not a cage.
      Page styles load after it and win.
   2. Class names here are generic (.btn, .sec, .card) because every page that
      links this file is opting into them. The shared header and footer keep
      their own dz- prefixed classes so they work on pages that do not link it.
   3. Motion runs once, on arrival, and respects reduced motion.
   =========================================================================== */

:root{
  --ink:#0F172A;--ink-2:#1E293B;--ink-soft:#334155;
  --royal:#1D4ED8;--royal-deep:#1E3A8A;--royal-2:#3B82F6;--royal-3:#93B4FB;
  --tint:#EFF6FF;--tint-2:#DBEAFE;--base:#FAFBFF;--paper:#F3F7FE;
  --muted:#64748B;--line:#E2E8F0;--line-2:#D5DFF0;
  --green:#059669;--green-tint:#ECFDF5;--flame:#F97316;--flame-tint:#FFF7ED;
  --wa:#25D366;
  --navy-1:#07102A;--navy-2:#0B1D4A;--navy-3:#12327F;
  --r-sm:10px;--r:16px;--r-lg:22px;--r-xl:28px;
  --sh-card:0 1px 2px rgba(16,33,74,.04),0 8px 22px -14px rgba(29,78,216,.18);
  --sh-raised:0 2px 8px -2px rgba(16,33,74,.10),0 18px 40px -22px rgba(29,78,216,.34);
  --sh-pop:0 30px 70px -30px rgba(10,23,51,.45);
  --glow:0 0 0 1px rgba(59,130,246,.25),0 10px 30px -8px rgba(59,130,246,.5);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--base);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;letter-spacing:-.022em;line-height:1.18}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;border-radius:6px}

.wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.wrap-narrow{width:min(860px,calc(100% - 32px));margin:0 auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15.5px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,color .18s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-lg{height:56px;padding:0 30px;font-size:16.5px}
.b-royal{background:var(--royal);color:#fff;box-shadow:0 10px 26px -8px rgba(29,78,216,.55)}
.b-royal:hover{background:var(--royal-deep)}
.b-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.b-ghost:hover{border-color:var(--royal);color:var(--royal)}
.b-white{background:#fff;color:var(--ink);box-shadow:var(--glow)}
.b-glass{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.b-glass:hover{background:rgba(255,255,255,.12)}
.b-wa{background:var(--wa);color:#05361A}
.b-wa:hover{background:#1EBE5A}
.b-flame{background:var(--flame);color:#fff;box-shadow:0 10px 26px -8px rgba(249,115,22,.55)}
.link{color:var(--royal);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline}
.link svg{width:16px;height:16px;flex-shrink:0}

/* ---------- Chips and labels ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;background:var(--tint);color:var(--royal-deep);border:1px solid var(--tint-2)}
.chip svg{width:14px;height:14px;flex-shrink:0}
.chip-dark{background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.14)}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--royal);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--flame)}
.hud .kicker,.dark .kicker{color:var(--royal-3)}
.live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 10px rgba(34,197,94,.9)}
.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(34,197,94,.5);animation:ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.badge-green{background:var(--green-tint);color:#047857}
.badge-flame{background:var(--flame-tint);color:#C2410C}
.badge-royal{background:var(--tint);color:var(--royal-deep)}

/* ---------- Sections ---------- */
.sec{padding:96px 0;position:relative}
.sec-tight{padding:64px 0}
.sec-alt{background:linear-gradient(180deg,#fff,var(--paper))}
.sec-line{border-top:1px solid var(--line)}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .kicker{justify-content:center}
.sec-head h2{font-size:clamp(28px,4.2vw,44px);font-weight:700}
.sec-head p{color:var(--muted);font-size:clamp(16px,1.6vw,18px);margin-top:14px}
.hud .sec-head p,.dark .sec-head p{color:rgba(255,255,255,.68)}
@media(max-width:720px){.sec{padding:68px 0}.sec-head{margin-bottom:34px}}

/* ---------- The command panel (same recipe as the app's .hud) ---------- */
.hud{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(700px 340px at 85% 0%,rgba(91,133,240,.35),transparent 60%),
    radial-gradient(600px 300px at 0% 100%,rgba(29,78,216,.35),transparent 60%),
    linear-gradient(135deg,var(--navy-1) 0%,var(--navy-2) 55%,var(--navy-3) 100%)}
.hud-card{border-radius:var(--r-xl);box-shadow:var(--sh-pop),inset 0 1px 0 rgba(255,255,255,.08)}
.hud-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(141,171,247,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(141,171,247,.09) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%)}
.hud-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
:where(.hud>*:not(.hud-grid):not(.hud-orb)){position:relative}
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* ---------- Frosted cards (same recipe as the app's .frost) ---------- */
.card{position:relative;background:rgba(255,255,255,.92);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-card);padding:26px}
.card::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.55),transparent)}
.card-hover{transition:transform .2s,box-shadow .2s,border-color .2s}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-raised);border-color:#BFD0F0}
.card h3{font-size:18px;font-weight:700;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.icon-box{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tint);color:var(--royal);margin-bottom:16px}
.icon-box svg{width:22px;height:22px}
.hud .icon-box{background:rgba(255,255,255,.08);color:var(--royal-3)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.ticks{list-style:none;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.ticks li::before{content:"";flex-shrink:0;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.hud .ticks li::before{background-color:rgba(34,197,94,.14)}

/* ---------- Page hero (used by inner pages) ---------- */
.page-hero{padding:84px 0 76px}
.page-hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:700;max-width:18ch}
.page-hero p.lead{font-size:clamp(16px,1.8vw,19px);color:rgba(255,255,255,.72);max-width:60ch;margin-top:18px}
.page-hero .btns{margin-top:30px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Final call to action ---------- */
.cta-panel{border-radius:var(--r-xl);padding:clamp(40px,6vw,72px) clamp(22px,5vw,64px);text-align:center}
.cta-panel h2{font-size:clamp(28px,4vw,42px);font-weight:700;max-width:22ch;margin:0 auto}
.cta-panel p{color:rgba(255,255,255,.72);max-width:56ch;margin:14px auto 0;font-size:17px}
.cta-panel .btns{justify-content:center;margin-top:30px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.q{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
.q[open]{border-color:#BFD0F0;box-shadow:var(--sh-card)}
.q>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;font-family:'Sora',sans-serif;font-weight:600;font-size:16px}
.q>summary::-webkit-details-marker{display:none}
.q>summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--royal);font-size:20px;font-weight:500;transition:transform .2s}
.q[open]>summary::after{transform:rotate(45deg)}
.q .a{padding:0 22px 20px;color:var(--muted);font-size:15px}
.q .a p+p{margin-top:10px}
.q .a b{color:var(--ink);font-weight:600}

/* ---------- App screen mock-ups (drawn in HTML, demo data) ---------- */
.ms{background:#fff;border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--sh-pop);overflow:hidden;font-size:12.5px;line-height:1.45;color:var(--ink);text-align:left}
.ms-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;background:#F6F9FE;border-bottom:1px solid var(--line)}
.ms-bar i{width:9px;height:9px;border-radius:50%;display:inline-block;background:#E2E8F0}
.ms-bar i:nth-child(1){background:#FCA5A5}.ms-bar i:nth-child(2){background:#FCD34D}.ms-bar i:nth-child(3){background:#86EFAC}
.ms-bar span{margin-left:8px;color:var(--muted);font-size:11.5px;font-weight:500}
.ms-bar em{margin-left:auto;font-style:normal;background:#FFEDD5;color:#9A3412;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:100px}
.ms-body{padding:14px}
.ms-inbox{display:grid;grid-template-columns:1fr 1.45fr;min-height:310px}
.ms-list{border-right:1px solid var(--line)}
.ms-row{display:flex;gap:9px;align-items:center;padding:10px 12px;border-bottom:1px solid #F1F5F9}
.ms-row.on{background:var(--tint)}
.ms-av{width:30px;height:30px;border-radius:50%;background:#E4EBF8;display:grid;place-items:center;font-weight:700;color:#22345B;flex-shrink:0}
.ms-row b{display:block;font-size:12.5px}
.ms-row small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ms-ch{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:5px;margin-right:4px}
.ms-ch.wa{background:#DCFCE7;color:#166534}.ms-ch.ig{background:#FCE7F3;color:#9D174D}.ms-ch.fb{background:#DBEAFE;color:#1E40AF}
.ms-n{margin-left:auto;background:var(--green);color:#fff;border-radius:100px;font-size:10px;padding:1px 7px}
.ms-chat{background:#F3F7FE;padding:14px;display:flex;flex-direction:column;gap:8px}
.ms-b{max-width:84%;padding:8px 11px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ms-b.me{margin-left:auto;background:#E7F2EB}
.ms-b small{display:block;color:var(--muted);font-size:10.5px;margin-top:3px}
.ms-type{margin-top:auto;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 11px;color:#94A3B8}
.ms-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ms-kpi{background:#F3F7FE;border-radius:12px;padding:10px}
.ms-kpi small{color:var(--muted);display:block}
.ms-kpi b{font-family:'Sora',sans-serif;font-size:16px}
.ms-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed #E2E8F0}
.ms-line:last-child{border-bottom:0}
.ms-pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:100px;white-space:nowrap}
.ms-pill.g{background:#DCFCE7;color:#166534}.ms-pill.o{background:#FFEDD5;color:#9A3412}.ms-pill.b{background:#DBEAFE;color:#1E40AF}.ms-pill.r{background:#FEE2E2;color:#991B1B}
.ms-btns{display:flex;gap:8px;margin-top:10px}
.ms-btns span{flex:1;text-align:center;border-radius:9px;padding:8px;font-weight:700;color:#fff;background:var(--royal)}
.ms-btns span.w{background:var(--wa);color:#08331A}
.ms-bars{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:10px}
.ms-bars i{flex:1;background:linear-gradient(var(--royal),#60A5FA);border-radius:6px 6px 0 0;display:block}
.ms-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ms-tags span{background:var(--tint);color:var(--royal-deep);border-radius:100px;padding:3px 9px;font-size:11px;font-weight:600}
.ms-soon{opacity:.66}
@media(max-width:720px){.ms-inbox{grid-template-columns:1fr}.ms-list{border-right:0}}

/* ---------- Motion: runs once on arrival ---------- */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js .rv.d1.in{transition-delay:.08s}.js .rv.d2.in{transition-delay:.16s}.js .rv.d3.in{transition-delay:.24s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float{animation:floaty 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .rv.in{opacity:1!important;transform:none!important;transition:none!important}
  .float,.live::after{animation:none!important}
}