/* MIZAN Mobile v0.4 — independent mobile-first Home and working dropdown.
   MIZAN12AI wordmark: 12 is always blue. The original logo image is never modified. */
:root{--navy:#061c39;--navy-2:#0b3056;--navy-3:#092744;--blue-12:#168cff;--gold:#d6ab59;--gold-light:#f3d991;--ice:#eaf2fb;--white:#fff;--ink:#0c2948;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink);background:var(--ice);font-synthesis:none;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--ice)}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffde86;outline-offset:3px}svg{height:24px;width:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hidden,[hidden]{display:none!important}.app-shell{max-width:1050px;margin:auto;min-height:100vh;background:var(--ice);box-shadow:0 0 42px rgba(0,12,30,.07)}
/* Header: menu left / brand center / language right on both LTR and RTL */
.topbar{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 15px 12px;background:linear-gradient(160deg,#031528,var(--navy) 72%,#092b50);color:#fff;direction:ltr;position:relative;z-index:12}.header-brand{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.wordmark{font-family:Arial,"Segoe UI",sans-serif;font-size:clamp(21px,6vw,30px);font-weight:900;letter-spacing:.35px;line-height:1.05;direction:ltr;white-space:nowrap;color:#fff}.brand-number{color:var(--blue-12)!important}.brand-caption{font-size:clamp(7px,2vw,9px);font-weight:600;letter-spacing:2px;color:#cad5e3;white-space:nowrap}.head-control{width:46px;height:46px;display:grid;place-items:center;border:1px solid #3d668d;border-radius:13px;background:#0c3359;color:white;box-shadow:inset 0 1px rgba(255,255,255,.12)}.head-control svg{height:25px;width:25px}.language-switch{font-weight:800;font-size:13px}
/* Dropdown: genuine interactive navigation, not a decorative icon */
.menu-backdrop{position:fixed;inset:0;background:rgba(0,12,28,.42);z-index:19}.menu-panel{position:fixed;z-index:20;top:calc(72px + env(safe-area-inset-top));left:12px;width:min(330px,calc(100vw - 24px));max-height:calc(100dvh - 104px);overflow:auto;background:#082746;color:#fff;border:1px solid #d3a95d85;border-radius:18px;box-shadow:0 18px 55px #00122883;padding:13px;direction:rtl}.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px 13px;font-weight:800;color:var(--gold-light);border-bottom:1px solid #33587d}.menu-heading button{display:grid;place-items:center;width:35px;height:35px;border:0;border-radius:9px;color:#fff;background:#16416d;font-size:27px;line-height:1}.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;margin-top:3px;border:0;border-radius:10px;text-align:start;color:#e6f0ff;background:transparent;font-weight:650;min-height:47px}.menu-item:hover,.menu-item:focus-visible,.menu-item.active{background:#16466f;color:#fff}.menu-dot{width:7px;height:7px;background:var(--gold);border-radius:99px;flex:none}.menu-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #33587d;margin:9px 3px 0;padding:14px 5px 4px;color:#a9c4e0;font-size:10px}.wordmark--small{font-size:15px}html[dir="ltr"] .menu-panel{direction:ltr}
/* Main hero v0.4: original mark centered, clean negative space, gold arc, single CTA */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;color:#fff;padding:38px 18px 20px;background:radial-gradient(ellipse at 50% 37%,#1467ad70 0%,transparent 52%),linear-gradient(158deg,#04192e 0%,#0b3057 62%,#04192f 100%);border-radius:0 0 28px 28px;border-bottom:2px solid var(--gold);box-shadow:0 13px 21px #001b3b22}
.hero-gold-arc{position:absolute;left:0;right:0;top:0;width:100%;height:56px;pointer-events:none;z-index:0}
.hero-halo{position:absolute;left:50%;top:42px;transform:translateX(-50%);width:184px;height:184px;border:1px solid #d6ab5954;border-radius:50%;box-shadow:0 0 0 26px #d6ab590a,0 0 60px #126bc13d;pointer-events:none;z-index:0}
.logo-frame{position:relative;z-index:1;width:100%;height:170px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.hero-logo{display:block;width:min(168px,52vw);height:min(168px,52vw);object-fit:contain;object-position:center;filter:drop-shadow(0 9px 20px #0008)}
.logo-fallback{font-size:24px}
.ask-button{position:relative;z-index:1;width:100%;max-width:520px;min-height:50px;display:flex;align-items:center;justify-content:center;gap:15px;margin:0 auto;padding:11px 22px;border:1px solid #ffe3a0;border-radius:17px;background:linear-gradient(120deg,#f9e5b0,#d7a853);box-shadow:0 7px 22px #dba95040;color:#071f3b;font-weight:850;font-size:16px}
.ask-button svg{height:19px;width:19px;flex:none;transform:scaleX(-1)}html[dir="ltr"] .ask-button svg{transform:none}
.ask-label{display:inline-flex;gap:4px;align-items:baseline;justify-content:center;direction:inherit;flex-wrap:wrap}.cta-wordmark{direction:ltr;unicode-bidi:isolate;font-family:Arial,"Segoe UI",sans-serif;font-weight:900;letter-spacing:-.2px;white-space:nowrap}
/* Services: centered icon, centered title, centered subtitle */
.services{padding:20px 14px 8px}.services-heading{text-align:center;margin:0 0 14px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#a77e32;font-weight:900}.services-heading h2{margin:0;font-size:clamp(19px,5.5vw,24px);color:#0b2b50;line-height:1.4}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.service-card{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;min-height:145px;gap:8px;padding:13px 10px;border:1px solid #6a95b98a;border-radius:18px;background:linear-gradient(145deg,#114674,#092d52 67%,#071f39);color:#fff;box-shadow:0 7px 16px #001a3223;transition:transform .16s,border-color .16s}.service-card:hover{border-color:var(--gold);transform:translateY(-2px)}.service-card:active{transform:scale(.985)}.service-icon{width:48px;height:48px;display:grid;place-items:center;flex:none;border:1px solid #638ab07a;border-radius:15px;background:#164f84;color:var(--gold-light)}.service-icon svg{height:24px;width:24px}.service-text{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:100%;min-width:0}.service-text strong{font-weight:850;font-size:14px;line-height:1.25}.service-text small{font-size:10px;line-height:1.35;color:#c7d9e9}.preview-note{color:#69829c;text-align:center;font-size:11px;padding:0 15px 104px;line-height:1.7}
/* Module screens are placeholders until user approves API integration */
.module-panel{margin:22px 14px 120px;min-height:320px;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid #d6e2ee;border-radius:20px;box-shadow:0 10px 24px #10283b14}.module-symbol{width:74px;height:74px;display:grid;place-items:center;border-radius:21px;background:#e6f0fc;color:#bd913d;font-size:40px;margin-bottom:18px}.module-panel h2{font-size:25px;color:#0b2b50;margin:9px 0}.module-panel p{color:#647b94;line-height:1.7;margin:4px 0 15px}.module-notice{font-size:12px;padding:12px 16px;background:#faf3e4;color:#795b28;border-radius:12px}.back-button{margin-top:22px;padding:13px 22px;border:0;border-radius:12px;background:#103c67;color:#fff;font-weight:750}
/* Bottom tabs on real phones, with safe-area insets */
.mobile-tabs{position:fixed;z-index:10;left:0;right:0;bottom:0;max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:8px 8px max(9px,env(safe-area-inset-bottom));background:linear-gradient(160deg,#0b3159,#04172f);border-top:1px solid #cfa65b;box-shadow:0 -5px 22px #00172e45;direction:rtl}.tab{min-width:0;min-height:57px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid transparent;border-radius:12px;background:transparent;color:#c9d9eb;padding:6px 2px}.tab svg{width:22px;height:22px}.tab span{font-size:clamp(9px,2.4vw,11px);line-height:1.1;white-space:nowrap}.tab.active{background:#12436e;color:#f9d68b;border-color:#d2a251;font-weight:800}html[dir="ltr"] .mobile-tabs{direction:ltr}
@media(min-width:700px){.topbar{padding:18px 28px}.hero{border-radius:0 0 28px 28px;padding:42px 24px 24px}.logo-frame{height:188px}.hero-logo{width:176px;height:176px}.services{padding:24px 28px}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.service-card{min-height:164px}.preview-note{padding-bottom:108px}.menu-panel{left:max(16px,calc((100vw - 1050px)/2 + 14px))}}
@media(max-width:355px){.header-brand .wordmark{font-size:20px}.brand-caption{font-size:7px;letter-spacing:1.45px}.topbar{gap:3px;padding-left:10px;padding-right:10px}.service-card{min-height:138px}.service-text strong{font-size:13px}.service-text small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.service-card{transition:none}}



/* v0.6: Installed iOS web-app safe areas. Layout and color system unchanged. */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
  .mobile-tabs { padding-bottom: max(9px, env(safe-area-inset-bottom)); }
}