/* Itzan. Calm glass panels and pills over a soft ambient ground. One accent (jade). Light and dark. Phone first. */
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-ar-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-ar-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-ar-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(fonts/plex-ar-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-500.woff2) format("woff2");font-weight:500 600;font-display:swap}
:root{
  color-scheme:light;
  --bg:#edf3f1; --ink:#0e2622; --muted:#587069; --faint:#7f958e;
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.78); --stroke:rgba(255,255,255,.85); --hair:rgba(14,38,34,.1);
  --accent:#167a65; --on-accent:#fff; --accent-soft:rgba(22,122,101,.11);
  --gold:#b2862f; --gain:#167a65; --loss:#b0544b; --loss-soft:rgba(176,84,75,.1);
  --amb1:#bde7d7; --amb2:#c6dbf6; --amb3:#f5e2cd;
  --shadow:0 1px 1px rgba(14,38,34,.04),0 18px 40px -18px rgba(14,38,34,.22);
  --text:"Inter","Plex Arabic","Segoe UI",Tahoma,sans-serif;
  --num:"Inter","Plex Arabic","Segoe UI",sans-serif;
}
:root[lang="ar"]{--text:"Plex Arabic","Inter","Segoe UI",Tahoma,sans-serif}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#07120f; --ink:#e9f2ef; --muted:#9ab0a9; --faint:#7d938c;
  --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.11); --stroke:rgba(255,255,255,.14); --hair:rgba(255,255,255,.1);
  --accent:#56c9aa; --on-accent:#05211a; --accent-soft:rgba(86,201,170,.13);
  --gold:#d8b45f; --gain:#62d3b3; --loss:#f0958a; --loss-soft:rgba(240,149,138,.12);
  --amb1:#0e4a3d; --amb2:#162f5c; --amb3:#47301f;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 22px 44px -20px rgba(0,0,0,.7);
}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0) max(16px,env(safe-area-inset-right,0)) env(safe-area-inset-bottom,0) max(16px,env(safe-area-inset-left,0))}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9}
.ambient i:nth-child(1){width:26rem;height:26rem;background:var(--amb1);top:-8rem;inset-inline-start:-8rem}
.ambient i:nth-child(2){width:24rem;height:24rem;background:var(--amb2);top:14rem;inset-inline-end:-10rem}
.ambient i:nth-child(3){width:22rem;height:22rem;background:var(--amb3);top:38rem;inset-inline-start:-6rem}
.glass{background:var(--glass);border:1px solid var(--stroke);border-radius:1.75rem;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%)}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted)} .tiny{font-size:.78rem;color:var(--faint)}
a{color:var(--accent);text-underline-offset:.2em}
h1{font-size:1.5rem;font-weight:600;line-height:1.4;margin:0;text-wrap:balance}
h2{font-size:1.05rem;font-weight:600;margin:0 0 .4rem}
p{margin:0}

.bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + .6rem);z-index:5;max-width:27rem;margin:.6rem auto 0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-radius:999px;padding:.45rem .55rem;padding-inline-start:1.1rem}
.brand{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink)}
.brand b{font-weight:600;font-size:1.12rem}
.bar-end{display:flex;gap:.35rem}
.app{position:relative;z-index:1;max-width:27rem;margin:0 auto;padding-block:1rem 2rem}
.view{display:flex;flex-direction:column;gap:1rem}
.pad{padding:1.35rem 1.35rem 1.45rem}
.hero{text-align:center;padding:1.8rem 1.35rem 1.6rem;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.eyebrow{font-size:.9rem;color:var(--accent);font-weight:500}
.lead{color:var(--muted);max-width:22rem}

/* The balance: a bar with two weights that swings and settles. No pans, no ribs. */
.beam{width:11rem;max-width:100%;height:auto;overflow:visible}
.beam path{fill:none;stroke:var(--accent);stroke-linecap:round}
.beam-base{stroke-width:2.6;opacity:.55}
.beam-stem{stroke-width:2.8}
.beam-bar{stroke-width:3}
.beam-w1{fill:var(--gold)} .beam-w2{fill:var(--accent)}
.beam-arm{transform-box:view-box;transform-origin:110px 58px}
#beamHero .beam-arm{animation:settle 3.4s ease-in-out both}
#beamHero .beam-w1,#beamHero .beam-w2{animation:weigh 1.1s ease-out both}
.beam.settled .beam-arm{transform:rotate(0)}
@keyframes settle{
  0%{transform:rotate(-11deg)} 22%{transform:rotate(6.5deg)} 42%{transform:rotate(-3.8deg)}
  60%{transform:rotate(2.1deg)} 76%{transform:rotate(-1.1deg)} 90%{transform:rotate(.4deg)} 100%{transform:rotate(0)}
}
@keyframes weigh{from{r:0;opacity:0}to{opacity:1}}

button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pill{border-radius:999px;background:var(--glass-2);border:1px solid var(--stroke);padding:.3rem .85rem;font-size:.84rem}
.cta,.ghost,.danger{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.6rem;border-radius:999px;font-weight:500;transition:transform .15s,opacity .15s}
.cta{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 24px -12px var(--accent)}
.ghost{background:var(--glass-2);border:1px solid var(--stroke)}
.danger{background:var(--loss-soft);color:var(--loss);border:1px solid var(--loss-soft)}
.cta:active,.ghost:active,.danger:active{transform:scale(.97)}
button:disabled{opacity:.45;cursor:not-allowed}
.wide{width:100%}
.link{color:var(--accent);font-size:.92rem;padding:.3rem;align-self:center}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.4rem}
.actions.start{justify-content:flex-start;margin-top:.9rem}

.form{display:flex;flex-direction:column;gap:.95rem}
.form label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--muted)}
input:not([type=checkbox]){font:inherit;color:var(--ink);width:100%;min-height:3rem;border-radius:1rem;border:1px solid var(--hair);background:var(--glass-2);padding:0 1rem;font-family:var(--num)}
input.code{font-size:1.25rem;letter-spacing:.3em;text-align:center}
.form label.check{flex-direction:row;align-items:flex-start;gap:.6rem;color:var(--ink);font-size:.9rem}
.check input{width:1.2rem;height:1.2rem;margin-top:.3rem;accent-color:var(--accent);flex:none}
.err{background:var(--loss-soft);color:var(--loss);border-radius:1rem;padding:.6rem .9rem;font-size:.92rem}
.okmsg{background:var(--accent-soft);border-radius:1rem;padding:.6rem .9rem;font-size:.92rem}
.steps{letter-spacing:.02em}
.howto{margin:0;padding-inline-start:1.2rem;font-size:.93rem}
.qr{align-self:center;width:11.5rem;max-width:100%;background:#fff;border-radius:1.2rem;padding:.6rem;line-height:0}
.qr svg{width:100%;height:auto;display:block}
.secret{display:flex;align-items:center;gap:.5rem;justify-content:center;flex-wrap:wrap}
.secret code{font-size:.82rem;word-break:break-all;background:var(--glass-2);border-radius:.8rem;padding:.35rem .7rem}
.codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.codes li{background:var(--glass-2);border:1px solid var(--stroke);border-radius:.9rem;padding:.5rem;text-align:center;font-size:.95rem;letter-spacing:.04em}
.rowline{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-top:1px solid var(--hair)}
.rowline:first-of-type{border-top:0}
.tag{font-size:.76rem;border-radius:999px;padding:.1rem .7rem;background:var(--hair);color:var(--muted)}
.tag.ok{background:var(--accent-soft);color:var(--accent)}

dialog.sheet{color:var(--ink);width:min(25rem,calc(100% - 32px));padding:1.4rem;background:var(--bg)}
dialog::backdrop{background:rgba(7,18,15,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.foot{position:relative;z-index:1;max-width:27rem;margin:0 auto;padding:0 0 1.6rem;display:flex;flex-direction:column;gap:.3rem;text-align:center}
.toast{position:fixed;z-index:9;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 1.2rem);padding:.6rem 1.2rem;border-radius:999px;font-size:.92rem;max-width:calc(100% - 32px)}
.doc{line-height:1.9} .doc h2{margin-top:1.4rem} .doc ul{padding-inline-start:1.2rem;margin:.3rem 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* brand lockup */
.mark{display:block;border-radius:.6rem;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand{gap:.6rem;align-items:center}
.bar{padding-inline-start:.55rem}

/* story of the name */
.story p{margin:.7rem 0 0;color:var(--muted)}
.story p:first-of-type{margin-top:.5rem}
.story h2{color:var(--ink)}

/* footer, same shape as Qaif */
.foot{position:relative;z-index:1;max-width:27rem;margin:1.6rem auto 0;padding:0 0 2.2rem;display:flex;flex-direction:column;gap:.45rem;text-align:start}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.1rem}
.social{display:flex;gap:.5rem}
.circle{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;color:var(--ink);background:var(--glass-2)}
.circle svg{width:1.1rem;height:1.1rem;fill:currentColor}
.pill.support{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--on-accent);background:var(--accent);border-color:transparent;padding:.55rem 1.15rem;font-weight:500}
.pill.support svg{width:1.05rem;height:1.05rem;fill:currentColor}
.foot hr{border:0;border-top:1px solid var(--hair);margin:0 0 1.1rem;width:100%}
.foot-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
.foot-brand span{display:flex;flex-direction:column;line-height:1.25}
.foot-brand b{font-weight:600;font-size:1.05rem}
.foot .small{font-size:.88rem}
.foot a{color:var(--muted)}
.totop{position:fixed;z-index:8;inset-inline-end:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 1.2rem);
  width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.totop svg{width:1.15rem;height:1.15rem}