.home-hero{background:var(--petrol-night);color:var(--on-night)}.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-8);align-items:center;padding-block:var(--space-8) 64px}.hero .eyebrow{color:var(--on-night-accent)}.hero h1{font-size:var(--fs-display-hero);font-weight:700;line-height:1.15;margin-block:12px 18px;color:var(--on-night)}.hero h1 .hl{color:var(--orange)}.hero .lead{color:var(--on-night-muted);font-size:var(--fs-body-lead);max-inline-size:32rem;margin:0}.hero .btns{margin-block-start:26px}.hero .fine{margin-block:18px 0;font-size:var(--fs-small);color:var(--mist)}.frame{background:var(--surface);border-radius:var(--radius-xl);padding:8px;box-shadow:var(--shadow-frame)}.art{position:relative;container-type:inline-size}.art img{display:block;inline-size:100%;block-size:auto;border-radius:12px}.onscreen{position:absolute;left:29.5%;top:22.4%;direction:ltr;display:flex;flex-direction:column;gap:.5cqw}.onscreen .logo{gap:1.1cqw;font-size:3.5cqw;line-height:1;letter-spacing:-.02em}.onscreen .logo svg{inline-size:4cqw;block-size:4cqw}.onscreen .tagline{font-size:1.25cqw;font-weight:500;color:var(--teal);padding-left:5.1cqw}.onscreen .tagline[dir=rtl]{font-size:1.4cqw}@media(max-width:600px){.onscreen .tagline{display:none}}.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block-start:1px solid var(--line-night);list-style:none;margin:0;padding:0}.strip li{padding:20px var(--space-6) var(--space-6);display:flex;flex-direction:column;gap:var(--space-1);color:var(--on-night-muted);font-size:var(--fs-small)}.strip li+li{border-inline-start:1px solid var(--line-night)}.strip b{color:var(--on-night);font-weight:600;font-size:var(--fs-body);display:flex;align-items:center;gap:var(--space-2)}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}.step{display:flex;flex-direction:column;gap:10px;padding-block-start:18px;border-block-start:3px solid var(--line)}.step:first-child{border-color:var(--petrol)}.step .n{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;color:var(--orange-text)}:lang(ar) .step .n{font-family:var(--font-sans);font-size:var(--fs-small)}.step h3{margin:0;font-size:var(--fs-title);font-weight:600}.step p{margin:0;color:var(--ink-muted);font-size:var(--fs-small)}.addr{font-size:var(--fs-code);background:var(--sky);color:var(--petrol);padding:1px 6px;border-radius:4px}.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}.card h3{margin:0;font-size:var(--fs-title);font-weight:600}.card ul{margin:0;padding-inline-start:18px;color:var(--ink-muted);font-size:var(--fs-small);display:flex;flex-direction:column;gap:6px}.icon{inline-size:44px;block-size:44px;border-radius:12px;display:grid;place-items:center}.icon svg{inline-size:24px;block-size:24px;fill:none;stroke-width:2;stroke-linecap:round}.icon-petrol{background:var(--sky)}.icon-petrol svg{stroke:var(--petrol)}.icon-orange{background:color-mix(in srgb,var(--orange) 18%,var(--surface))}.icon-orange svg{stroke:var(--orange-text)}.icon-teal{background:color-mix(in srgb,var(--teal) 15%,var(--surface))}.icon-teal svg{stroke:var(--teal)}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-8);align-items:start}.split .section-head{margin:0}.security{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) 28px;list-style:none;margin:0;padding:0}.security li{display:flex;gap:var(--space-3)}.security svg{flex:none;inline-size:22px;block-size:22px;margin-block-start:3px;fill:none;stroke:var(--petrol);stroke-width:2}.security b{display:block;font-weight:600}.security span{color:var(--ink-muted);font-size:var(--fs-small)}@media(max-width:860px){.hero,.split,.steps,.roles,.strip{grid-template-columns:1fr}.strip li+li{border-inline-start:0;border-block-start:1px solid var(--line-night)}.security{grid-template-columns:1fr}}.course-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}.examples-note{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-4);color:var(--ink-muted);font-size:var(--fs-small)}.course-tile{position:relative;block-size:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;flex-direction:column;transition:border-color .15s,transform .15s}.course-tile .cover{block-size:128px;border-start-start-radius:calc(var(--radius-lg) - 1px);border-start-end-radius:calc(var(--radius-lg) - 1px);position:relative;display:grid;place-items:center;overflow:hidden}.course-tile .cover svg{inline-size:54px;block-size:54px;fill:none;stroke:var(--on-night);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}.cover-petrol{background:linear-gradient(135deg,var(--petrol),var(--teal))}.cover-orange{background:linear-gradient(135deg,var(--orange-text),var(--orange))}.cover-night{background:linear-gradient(135deg,var(--petrol-night),var(--petrol))}.cover-teal{background:linear-gradient(135deg,var(--teal),var(--teal-bright))}.course-tile .flag{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:var(--surface);color:var(--ink);font-size:var(--fs-eyebrow);font-weight:700;border-radius:var(--radius-md);padding:3px 8px}.course-tile .flag-free{background:var(--status-ok-bg);color:var(--status-ok)}.course-tile .body{padding:14px var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}.course-tile .cat{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-text)}:lang(ar) .course-tile .cat{font-family:var(--font-sans);letter-spacing:0;font-size:var(--fs-small)}.course-tile h3{margin:0;font-size:var(--fs-body);font-weight:600;line-height:1.3}.course-tile h3 a{color:var(--ink);text-decoration:none}.course-tile h3 a:after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--radius-lg)}@supports selector(:has(*)){.course-tile h3 a:focus-visible{outline:none}.course-tile:has(a:focus-visible){outline:3px solid var(--petrol);outline-offset:2px}}.course-tile .meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:0;font-size:var(--fs-small);color:var(--ink-muted)}.course-tile .foot,.course-tile .pop-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);margin:auto 0 0;padding-block-start:10px;border-block-start:1px solid var(--line)}.course-tile .price{font-weight:700;color:var(--ink)}.course-tile .price-free{color:var(--status-ok)}.course-tile .more{font-size:var(--fs-small);font-weight:600;color:var(--petrol)}@media(hover:none){.course-tile .pop{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}@media(hover:hover){.course-tile:hover,.course-tile:focus-within{border-color:var(--petrol);transform:translateY(-2px);z-index:5}.course-tile .pop{display:flex;flex-direction:column;gap:var(--space-2);position:absolute;inset-block-start:0;inset-inline:0;min-block-size:100%;z-index:1;padding:18px;background:var(--surface);border:2px solid var(--petrol);border-radius:var(--radius-lg);opacity:0;pointer-events:none;transition:opacity .15s}.course-tile:hover .pop,.course-tile:focus-within .pop{opacity:1}.course-tile[data-dismissed] .pop{opacity:0}}@media(hover:hover)and (prefers-reduced-motion:reduce){.course-tile,.course-tile .pop{transition:none}.course-tile:hover,.course-tile:focus-within{transform:none}}.course-tile .pop p{margin:0;font-size:var(--fs-small);color:var(--ink-muted)}.course-tile .pop .pop-title{font-size:var(--fs-body);font-weight:600;color:var(--ink)}.course-tile .pop .learn{font-weight:600;color:var(--ink)}.course-tile .pop ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:var(--fs-small)}.course-tile .pop li{display:flex;gap:7px}.course-tile .pop li:before{content:"";inline-size:7px;block-size:7px;border-radius:2px;background:var(--orange);flex:none;margin-block-start:.5em}.course-tile .pop .who{font-size:var(--fs-small)}@media(max-width:1024px){.course-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.course-tiles{grid-template-columns:minmax(0,1fr)}}