:root{--navy:#071e35;--navy2:#0c3150;--gold:#d19a19;--gold2:#f2c75c;--teal:#0b817d;--cream:#f7f4ec;--ink:#10243a;--muted:#5b6c7c;--line:#d9e2e7;--white:#fff;--shadow:0 18px 48px rgba(7,30,53,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Arial,sans-serif;line-height:1.7}
.shell{width:min(980px,calc(100% - 30px));margin:auto}
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.nav{min-height:72px;display:flex;align-items:center}
.brand{font:700 34px Georgia,serif;text-decoration:none;color:var(--navy);letter-spacing:-2px}.brand b,.eyebrow{color:var(--gold)}
.language{margin-inline-start:auto;color:var(--navy);font-weight:800}
.hero{position:relative;isolation:isolate;min-height:500px;display:grid;align-items:center;background:var(--navy) url("./hero-linear-systemic-3d.png") center/cover no-repeat;color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,30,53,.32),rgba(7,30,53,.94) 62%,rgba(7,30,53,.98))}
[dir="ltr"] .hero::before{background:linear-gradient(270deg,rgba(7,30,53,.32),rgba(7,30,53,.94) 62%,rgba(7,30,53,.98))}
.hero-content{padding-block:64px}
.hero h1{max-width:650px;font-size:clamp(42px,6vw,68px);line-height:1.15;margin:8px 0}
.hero-content>p:not(.eyebrow):not(.boundary){max-width:650px;font-size:20px;color:#e7eef3}
.boundary{max-width:700px;font-size:14px;border-inline-start:3px solid var(--gold);padding-inline-start:12px;color:#d7e2e9}
.main{padding:40px 0 80px}
.progress{display:flex;gap:9px;margin-bottom:20px}
.journey-title{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px;color:var(--muted)}.journey-title strong{color:var(--navy)}.journey-title span{font-weight:800}
.progress span{height:8px;flex:1;background:#ccd6dc;border-radius:99px;transition:background-color .3s,transform .3s}
.progress .active{background:var(--gold);transform:scaleY(1.18)}
.panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.panel[hidden],[hidden]{display:none!important}
.panel h2{font-size:clamp(30px,4vw,44px);line-height:1.3;margin:6px 0 20px}
.intro-step{max-width:820px;margin:auto}.intro-step>p:not(.eyebrow):not(.privacy-note):not(.center-note){font-size:18px}.primary-wide{display:flex;width:min(420px,100%);margin-inline:auto}.center-note{text-align:center;margin:10px 0 0}
.privacy-note{padding:14px 16px;border-radius:14px;background:#eaf6f4;border-inline-start:4px solid var(--teal)}
.context-picker{margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:18px}.context-picker legend{font-size:20px;font-weight:900;padding-inline:8px}.context-picker>p{margin:0 0 12px;color:var(--muted)}#context-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}#context-options label{position:relative;display:flex;align-items:center;min-height:56px;padding:10px 14px;border:2px solid var(--line);border-radius:14px;cursor:pointer;transition:.18s}#context-options label:has(input:checked){border-color:var(--gold);background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(7,30,53,.16)}#context-options input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.context-result{padding:12px 15px;border-radius:12px;background:#f4f7f8}
.privacy-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 28px;padding:0;border:0}.privacy-modes legend{grid-column:1/-1;margin-bottom:8px;font-weight:900}.privacy-modes label{display:flex;padding:15px;border:2px solid var(--line);border-radius:15px;background:#fff;cursor:pointer}.privacy-modes label:has(input:checked){border-color:var(--teal);background:#edf8f6;box-shadow:0 8px 20px rgba(8,127,122,.12)}.privacy-modes input{margin:7px 0 0 9px}.privacy-modes strong{display:block}.privacy-modes a{color:var(--navy);font-weight:800}
.panel .dimensions{grid-template-columns:repeat(3,1fr)}
.panel .privacy-modes{grid-template-columns:repeat(2,1fr)}
@media(max-width:680px){.panel .privacy-modes{grid-template-columns:1fr}}
.local-progress button{border:0;background:none;color:var(--navy);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.save-choice{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:24px;padding:16px;border:2px solid var(--line);border-radius:16px;background:#f7fafb;cursor:pointer}.save-choice:has(input:checked){border-color:var(--teal);background:#edf8f6}.save-choice input{margin-top:8px}.save-choice strong{display:block}
.question{padding:20px 0;border-bottom:1px solid var(--line)}
.question p{font-size:18px;font-weight:850;margin:0 0 12px}
.scale{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.scale label{position:relative;display:grid;place-items:center;min-height:64px;padding:10px;border:2px solid var(--line);border-radius:16px;background:#fff;text-align:center;cursor:pointer;box-shadow:0 4px 12px rgba(7,30,53,.04);transition:transform .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease}
.scale label:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 22px rgba(7,30,53,.12)}
.scale label.selected,.scale label:has(input:checked){transform:translateY(-3px) scale(1.02);border-color:var(--gold);background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;box-shadow:0 12px 26px rgba(7,30,53,.2)}
.scale label.selected::after,.scale label:has(input:checked)::after{content:"✓";position:absolute;inset-block-start:5px;inset-inline-end:9px;color:var(--gold2);font-weight:900}
.scale input{position:absolute;inline-size:1px;block-size:1px;opacity:0}
.scale input:focus-visible+span{outline:3px solid #53b9ff;outline-offset:7px;border-radius:6px}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:52px;margin-top:18px;padding:11px 22px;border:2px solid var(--gold);border-radius:13px;background:var(--gold);color:var(--navy);font:inherit;font-weight:900;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(7,30,53,.15)}
.button.secondary{background:#fff;border-color:var(--navy)}
.button:focus-visible,.text-button:focus-visible,input:focus-visible{outline:4px solid #53b9ff;outline-offset:3px}
.score{display:flex;align-items:center;gap:18px;margin:12px 0 20px;padding:18px;background:var(--navy);color:#fff;border-radius:18px}.score strong{font-size:48px;color:var(--gold2)}.score span{font-weight:800}
.report{background:#edf6f5;border-inline-start:5px solid var(--teal);padding:20px;border-radius:14px}.report h3{font-size:25px;margin-top:0}
.dimensions-title{margin:28px 0 12px}.dimensions{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.dimension{padding:14px 10px;border:1px solid var(--line);border-radius:14px;background:#fff}.dimension strong,.dimension span{display:block}.dimension strong{font-size:15px;min-height:52px}.dimension span{font-size:24px;color:var(--teal);font-weight:900}.dimension-bar{height:7px;margin-top:8px;background:#e1e7ea;border-radius:99px;overflow:hidden}.dimension-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:inherit}.insight-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 20px}.insight-pair p{margin:0;padding:16px;border-radius:14px;background:#f4f7f8}.insight-pair strong,.insight-pair span{display:block}.insight-pair span{margin-top:4px}
.next-route{margin:20px 0;padding:18px;border:1px solid #dfc476;border-radius:16px;background:#fff7df}.next-route p{margin:4px 0 0}
.custom-context-offer{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:#f4f7f8}.custom-context-offer p{margin:4px 0}.custom-context-offer .button{margin-top:10px}
.fields{display:grid;gap:15px}.field{display:grid;gap:6px;font-weight:800}.field input{width:100%;padding:14px;border:1px solid #c7d2d9;border-radius:11px;font:inherit}.consent{display:grid;grid-template-columns:auto 1fr;gap:10px}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.text-button{margin-top:18px;border:0;background:none;color:var(--navy);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.status{color:#a24020;font-weight:850}.small{font-size:14px;color:var(--muted)}.compact{max-width:760px;margin:auto}.email-link{display:flex;width:max-content;margin-inline:auto}
@media(max-width:680px){.hero{min-height:560px;background-position:38% center}.hero::before,[dir="ltr"] .hero::before{background:rgba(7,30,53,.82)}.panel{padding:20px}.scale,#context-options{grid-template-columns:1fr}.dimensions{grid-template-columns:1fr 1fr}.insight-pair{grid-template-columns:1fr}.actions .button,.email-link{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scale label,.button,.progress span{transition:none}}
