:root{
  --navy:#071b32;--navy-2:#0d3158;--blue:#2d6fa8;--blue-2:#4b91c8;
  --ink:#10243e;--muted:#66778d;--line:#dce6f0;--soft:#f3f7fb;--white:#fff;
  --shadow:0 22px 60px rgba(7,27,50,.12)
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--soft)}
body{margin:0;min-height:100%;background:radial-gradient(circle at 84% 7%,rgba(61,135,194,.12),transparent 25%),linear-gradient(180deg,#f8fbfe,#eef4fa);color:var(--ink);font-family:Tahoma,"Segoe UI",Arial,sans-serif;line-height:1.55}
a{text-decoration:none;color:inherit}
button{font:inherit}
.compact-page{min-height:100vh;display:grid;grid-template-rows:64px 1fr auto;overflow:hidden}
.compact-header{width:min(1180px,calc(100% - 32px));height:64px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(15,53,98,.08)}
.compact-brand{display:flex;align-items:center;gap:10px;min-width:0;font-weight:900;color:var(--navy);white-space:nowrap}
.compact-brand img{display:block;width:45px;height:40px;object-fit:contain}
.compact-brand span{font-size:.98rem}
.compact-header-actions{display:flex;align-items:center;gap:8px}
.language-button,.header-login,.action-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;font-weight:900;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.language-button,.header-login{height:39px;padding:0 12px;font-size:.78rem;border:1px solid var(--line);background:rgba(255,255,255,.72)}
.header-login.admin{color:var(--navy-2)}
.header-login.user{color:#fff;background:linear-gradient(135deg,var(--navy-2),var(--blue-2));border-color:transparent;box-shadow:0 9px 24px rgba(45,111,168,.2)}
.language-button:hover,.header-login:hover,.action-button:hover{transform:translateY(-2px)}
.language-button svg,.header-login svg,.action-button svg{width:18px;height:18px;flex:none}
.compact-main{width:min(1180px,calc(100% - 32px));margin:14px auto 12px;display:grid;align-content:center;gap:10px}
.compact-hero{min-height:360px;border-radius:30px;background:radial-gradient(circle at 78% 36%,rgba(77,155,214,.28),transparent 30%),linear-gradient(125deg,#06172c 0%,#0b2d53 58%,#184e82 100%);color:#fff;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);align-items:center;gap:24px;padding:32px 46px;position:relative;overflow:hidden;box-shadow:var(--shadow);isolation:isolate}
.compact-hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.hero-content{max-width:650px;position:relative;z-index:3}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.74rem;font-weight:900;color:#d8e9f8}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:#43d59b;box-shadow:0 0 0 5px rgba(67,213,155,.12)}
.hero-content h1{font-size:clamp(2.05rem,3.7vw,3.35rem);line-height:1.16;letter-spacing:-.035em;margin:17px 0 12px}
.hero-content>p{margin:0;color:#c6d8e8;font-size:clamp(.94rem,1.4vw,1.08rem);max-width:620px}
.primary-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:21px}
.action-button{min-height:46px;padding:0 17px;border:1px solid transparent;cursor:pointer;font-size:.84rem}
.action-button.primary{background:#fff;color:var(--navy);box-shadow:0 12px 30px rgba(0,0,0,.15)}
.action-button.secondary{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.action-button.install{background:transparent;color:#e8f2fb;border-color:rgba(255,255,255,.25)}
.action-button[hidden]{display:none!important}
.availability-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:16px;color:#bfd2e4;font-size:.76rem}
.availability-row span{display:inline-flex;align-items:center;gap:7px}
.availability-row svg{width:15px;height:15px}
.online-dot{width:8px;height:8px;border-radius:50%;background:#43d59b;box-shadow:0 0 0 4px rgba(67,213,155,.13)}
.hero-logo-panel{height:275px;position:relative;display:grid;place-items:center}
.logo-halo{position:absolute;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,rgba(119,190,239,.2),transparent 67%)}
.hero-logo{width:255px;height:240px;object-fit:contain;filter:drop-shadow(0 24px 38px rgba(0,0,0,.27));position:relative;z-index:2;animation:logoFloat 5s ease-in-out infinite}
.orbit-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(9px);box-shadow:0 12px 25px rgba(0,0,0,.14);font-size:.68rem;font-weight:900;color:#eff7fd}
.orbit-chip svg{width:17px;height:17px}
.chip-one{top:34px;inset-inline-start:0}.chip-two{top:43%;inset-inline-end:-8px}.chip-three{bottom:28px;inset-inline-start:16px}
@keyframes logoFloat{50%{transform:translateY(-8px)}}
.compact-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.compact-features article{min-height:88px;padding:13px 16px;border-radius:19px;background:rgba(255,255,255,.9);border:1px solid rgba(15,53,98,.08);box-shadow:0 10px 26px rgba(7,27,50,.055);display:flex;align-items:center;gap:14px}
.feature-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;color:var(--blue);background:linear-gradient(145deg,#e7f2fb,#fbfdff);border:1px solid #d6e7f5}
.feature-icon svg{width:22px;height:22px}
.compact-features h2{font-size:.96rem;margin:0 0 3px;color:var(--navy)}
.compact-features p{font-size:.76rem;margin:0;color:var(--muted)}
.security-bar{min-height:42px;border-radius:15px;background:linear-gradient(90deg,#e8f1f9,#f8fbfe);border:1px solid #d7e4ef;display:flex;align-items:center;justify-content:center;gap:34px;padding:10px 16px;color:#375774;font-size:.77rem;font-weight:800}
.security-bar span{display:inline-flex;align-items:center;gap:7px}
.security-bar svg{width:17px;height:17px;color:var(--blue)}
.compact-footer{min-height:68px;background:linear-gradient(105deg,#06172c,#123e6a);color:#fff;padding:10px max(20px,calc((100vw - 1180px)/2));display:grid;grid-template-columns:170px 1fr 48px;gap:22px;align-items:center}
.alafiq-brand{display:flex;align-items:center;justify-content:center;overflow:hidden}
.alafiq-brand img{display:block;width:150px;height:46px;object-fit:contain}
.footer-text{min-width:0;padding-inline:22px;border-inline:1px solid rgba(255,255,255,.13);font-size:.66rem;color:#bed0e2;line-height:1.35}
.footer-text p{margin:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer-text a{color:#fff;font-weight:900}
.footer-logo{width:42px;height:42px;object-fit:contain}
.install-modal[hidden]{display:none}.install-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}.install-backdrop{position:absolute;inset:0;background:rgba(3,13,26,.68);backdrop-filter:blur(5px)}.install-card{position:relative;z-index:1;width:min(430px,100%);background:#fff;border-radius:23px;padding:26px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.28)}.modal-close{position:absolute;top:11px;inset-inline-end:11px;width:36px;height:36px;border:0;border-radius:50%;font-size:1.35rem;background:#f1f5f9;color:var(--navy);cursor:pointer}.modal-icon{width:58px;height:58px;margin:auto;border-radius:17px;display:grid;place-items:center;background:#ecf5fd;color:var(--blue)}.modal-icon svg{width:29px;height:29px}.install-card h2{font-size:1.25rem;margin:16px 0 7px}.install-card p{font-size:.85rem;color:var(--muted)}.modal-button{border:0;border-radius:12px;background:linear-gradient(135deg,var(--navy-2),var(--blue-2));color:#fff;font-weight:900;padding:10px 22px;cursor:pointer}
@media(max-width:980px){.compact-page{grid-template-rows:64px auto auto}.compact-main{align-content:start}.compact-hero{grid-template-columns:1fr;min-height:auto;padding:42px}.hero-content{max-width:760px}.hero-logo-panel{height:245px}.hero-logo{width:235px;height:220px}.compact-features article{align-items:flex-start}.compact-footer{grid-template-columns:150px 1fr 44px}.alafiq-brand img{width:145px}.footer-text p{white-space:normal}}
@media(max-width:720px){.compact-page{display:block}.compact-header{height:64px;width:calc(100% - 20px)}.compact-brand span,.header-login span,.language-button span{display:none}.compact-brand img{width:46px;height:41px}.language-button,.header-login{width:40px;height:40px;padding:0}.compact-main{width:calc(100% - 20px);margin:10px auto 14px;gap:10px}.compact-hero{border-radius:22px;padding:29px 20px 23px;gap:8px}.hero-content{text-align:center}.hero-badge{font-size:.68rem}.hero-content h1{font-size:2.15rem;margin-top:14px}.hero-content>p{font-size:.88rem}.primary-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:20px}.primary-actions .primary{grid-column:1/-1}.action-button{width:100%;padding:0 12px}.availability-row{justify-content:center;gap:11px;margin-top:16px}.hero-logo-panel{height:225px}.hero-logo{width:225px;height:205px}.orbit-chip{font-size:.61rem;padding:6px 8px}.chip-one{top:10px}.chip-two{top:42%;inset-inline-end:0}.chip-three{bottom:7px}.compact-features{grid-template-columns:1fr;gap:8px}.compact-features article{min-height:78px;padding:12px 14px;align-items:center}.feature-icon{width:39px;height:39px}.compact-features h2{font-size:.88rem}.compact-features p{font-size:.72rem}.security-bar{justify-content:flex-start;overflow-x:auto;gap:18px;padding-inline:14px;white-space:nowrap}.compact-footer{grid-template-columns:1fr 42px;gap:10px;padding:13px 16px;text-align:center}.alafiq-brand{grid-column:1/-1}.alafiq-brand img{width:145px;height:46px}.footer-text{padding-inline:0;border:0;text-align:start}.footer-text p{white-space:normal}.footer-logo{width:40px;height:40px}}
@media(max-width:420px){.hero-content h1{font-size:1.9rem}.primary-actions{grid-template-columns:1fr}.primary-actions .primary{grid-column:auto}.hero-logo-panel{height:195px}.hero-logo{width:195px;height:180px}.orbit-chip span{display:none}.compact-footer{grid-template-columns:1fr}.footer-text{text-align:center}.footer-logo{margin:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.hero-logo{animation:none}.language-button,.header-login,.action-button{transition:none}}


/* V4.8 — centered compact copyright footer */
.compact-footer{grid-template-columns:170px minmax(0,1fr) 48px!important}
.footer-text{display:flex;align-items:center;justify-content:center;min-height:46px;text-align:center!important;padding-inline:20px!important}
.footer-text p{margin:0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-weight:700;color:#d5e2ef}
@media(max-width:720px){.compact-footer{grid-template-columns:145px minmax(0,1fr) 42px!important}.alafiq-brand{grid-column:auto!important}.footer-text{text-align:center!important;padding-inline:8px!important}.footer-logo{margin:0!important}}
@media(max-width:520px){.compact-footer{grid-template-columns:1fr!important}.alafiq-brand,.footer-text,.footer-logo{justify-self:center!important}.footer-text{order:2}.footer-logo{order:3}.alafiq-brand{order:1}}

/* V4.9 — no duplicated top navigation; language lives in the footer */
.compact-page-no-header{grid-template-rows:1fr auto}
.compact-page-no-header .compact-main{margin:20px auto 14px;align-content:center}
.warning-dot{width:8px;height:8px;border-radius:50%;background:#f4b740;box-shadow:0 0 0 4px rgba(244,183,64,.14)}
.system-state.needs-review{color:#f7d893}
.footer-text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.footer-text p{width:100%;text-align:center}
.footer-language{display:flex;align-items:center;justify-content:center}
.landing-language-switch{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:4px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:.66rem;font-weight:900;line-height:1;transition:.18s ease}
.landing-language-switch:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.landing-language-switch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:980px){.compact-page-no-header{display:grid;grid-template-rows:auto auto}.compact-page-no-header .compact-main{margin-top:14px}}
@media(max-width:720px){.compact-page-no-header{display:block}.compact-page-no-header .compact-main{margin-top:10px}.footer-text{grid-column:auto;padding-inline:0;text-align:center}.footer-text p{text-align:center}.landing-language-switch{min-height:27px;font-size:.61rem}}


/* V4.10 — language switch at the upper page corner */
.compact-page{position:relative}
.landing-language-corner{position:fixed;top:max(12px,env(safe-area-inset-top));inset-inline-end:max(12px,env(safe-area-inset-right));z-index:80}
.landing-language-corner .landing-language-switch{min-height:36px;padding:6px 12px;background:rgba(255,255,255,.92);border-color:rgba(18,59,104,.16);color:#123b68;box-shadow:0 10px 24px rgba(7,27,50,.10);backdrop-filter:blur(12px)}
.landing-language-corner .landing-language-switch:hover{background:#fff;border-color:#2d6ea8}
.footer-language{display:none!important}
@media(max-width:720px){.landing-language-corner{top:max(9px,env(safe-area-inset-top));inset-inline-end:9px}.landing-language-corner .landing-language-switch{min-height:32px;padding:5px 9px;font-size:.62rem}}