:root {
  color-scheme: light;
  --cream: #fbfaf4;
  --paper: #fffefa;
  --green: #0c5f38;
  --green-dark: #073d27;
  --green-soft: #e9efe2;
  --red: #c83231;
  --red-dark: #a92328;
  --ink: #193528;
  --muted: #686960;
  --line: #d8ddc9;
  --shadow: 0 10px 26px rgba(35, 53, 38, 0.09);
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; font-family: "Tajawal", "Segoe UI", sans-serif; background: #f2f1e9; color: var(--ink); }
a { color: inherit; }
svg { display: block; }

.home-shell { width: 100%; max-width: 460px; min-height: 100vh; margin: 0 auto; padding-bottom: 6.4rem; overflow: hidden; background: var(--cream); box-shadow: 0 0 50px rgba(24, 47, 33, 0.08); }
.hero-landing { position: relative; min-height: 315px; overflow: hidden; background: linear-gradient(180deg, #fffefa 0%, #f8f3e7 73%, #f4ead5 100%); }
.hero-copy { position: relative; z-index: 4; width: 52%; padding: 2.1rem 1.35rem 0; }
.hero-brand-lockup { display: flex; width: min(100%, 245px); align-items: center; gap: 0.65rem; color: #063f32; }
.hero-brand-logo { display: block; width: 64px; height: 64px; flex: 0 0 auto; border-radius: 15px; object-fit: contain; }
.hero-brand-name { font-family: "Amiri", serif; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.hero-copy p { margin: 0.65rem 0 0; color: #343a35; font-size: clamp(1.05rem, 3vw, 1.55rem); font-weight: 700; }
.hero-cloud { position: absolute; z-index: 1; height: 24px; border-radius: 999px 999px 15px 15px; background: rgba(225, 217, 196, 0.42); }
.hero-cloud::before, .hero-cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50% 50% 0 0; background: inherit; }
.hero-cloud::before { right: 18%; width: 44px; height: 36px; }
.hero-cloud::after { right: 48%; width: 35px; height: 28px; }
.cloud-one { top: 65px; right: 22%; width: 125px; }
.cloud-two { top: 122px; right: 6%; width: 90px; }
.hero-hills { position: absolute; inset: auto 0 0; z-index: 1; height: 125px; background: linear-gradient(160deg, transparent 0 19%, #e9dfc6 20% 44%, transparent 45%), linear-gradient(196deg, transparent 0 28%, #dbe0c2 29% 54%, transparent 55%); opacity: 0.8; }
.hero-road { position: absolute; z-index: 2; left: -10%; bottom: -44px; width: 82%; height: 180px; overflow: hidden; border-radius: 50% 70% 0 0; background: linear-gradient(90deg, #163d2a, #315a3c); transform: rotate(-5deg); clip-path: polygon(0 65%, 38% 33%, 66% 22%, 100% 0, 100% 100%, 0 100%); }
.hero-road::before { content: ""; position: absolute; inset: 47% -5% auto 29%; height: 5px; border-top: 3px dashed rgba(255, 255, 255, 0.9); transform: rotate(-10deg); }
.hero-road span { position: absolute; inset: 58% -8% auto 5%; height: 4px; border-top: 3px solid #e1b95b; transform: rotate(-8deg); }
.hero-signs { position: absolute; right: 4%; bottom: 45px; z-index: 4; width: 48%; height: 220px; direction: ltr; }
.sign { position: absolute; filter: drop-shadow(0 5px 5px rgba(22, 44, 31, 0.18)); }
.sign-danger { width: 31%; left: 1%; bottom: 36px; }
.sign-speed { width: 28%; left: 31%; bottom: 23px; }
.sign-roundabout { width: 29%; left: 59%; bottom: 0; }
.roadside-plants { position: absolute; z-index: 3; right: 0; bottom: 0; width: 24%; height: 90px; }
.roadside-plants i { position: absolute; bottom: -8px; width: 22px; height: 86px; border-radius: 100% 0; background: #456d3f; transform-origin: bottom; }
.roadside-plants i:nth-child(1) { right: 18%; transform: rotate(28deg); }
.roadside-plants i:nth-child(2) { right: 31%; height: 70px; transform: rotate(8deg); }
.roadside-plants i:nth-child(3) { right: 44%; height: 78px; transform: rotate(-18deg); }
.roadside-plants i:nth-child(4) { right: 54%; height: 58px; transform: rotate(-38deg); }

.journey-sections { position: relative; display: grid; gap: 1rem; padding: 1.2rem 1rem 0; }
.journey-sections > *, .primary-copy, .secondary-card > span:last-child, .section-copy, .source-copy { min-width: 0; }
.journey-line { position: absolute; z-index: 0; top: -80px; right: 2%; width: 32%; height: 560px; overflow: visible; pointer-events: none; }
.journey-line path { fill: none; stroke: #c2c5b7; stroke-width: 0.8; stroke-dasharray: 5 4; }
.journey-sections > section { position: relative; z-index: 1; }

.primary-actions { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.primary-card { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) 32px; align-items: center; width: 100%; min-height: 150px; padding: 1rem; overflow: hidden; border-radius: 22px; color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.quiz-card { background: linear-gradient(135deg, #0b6b3e, #064b2e); }
.exam-card { background: linear-gradient(135deg, #d33b38, #ad252a); }
.card-illustration { display: grid; place-items: center; width: 78px; height: 98px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.card-illustration svg { width: 76px; height: 76px; fill: #f4e2bc; stroke: #fff7e8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.car-illustration svg { fill: #f29b72; }
.primary-copy { display: grid; gap: 0.38rem; padding-inline: 0.45rem; }
.primary-copy strong { font-size: 1.45rem; }
.primary-copy small { max-width: 170px; font-size: 0.91rem; line-height: 1.6; }
.card-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.14); }
.card-arrow svg { width: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.secondary-actions { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.secondary-card { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; width: 100%; min-height: 112px; padding: 0.8rem; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, 0.62); text-decoration: none; }
.soft-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--green-soft); }
.soft-icon svg { width: 38px; fill: var(--green); stroke: var(--green); stroke-width: 1.5; stroke-linejoin: round; }
.secondary-card > span:last-child { display: grid; gap: 0.22rem; padding-inline: 0.45rem; }
.secondary-card strong { font-size: 1.12rem; }
.secondary-card small { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }

.content-card { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, 0.58); box-shadow: 0 5px 14px rgba(35, 53, 38, 0.03); }
.about-card { grid-template-columns: 1fr 118px; align-items: center; }
.section-copy h2, .source-copy h2 { margin: 0; font-size: 1.25rem; }
.section-copy p, .source-copy p { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.8; }
.title-mark { display: block; width: 42px; height: 3px; margin-top: 0.3rem; border-radius: 3px; background: #e8aa35; }
.about-logo { display: grid; place-items: center; width: 112px; height: 112px; overflow: hidden; border: 2px solid #ccd5b9; border-radius: 50%; background: #fff; }
.about-logo img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }

.source-card { grid-template-columns: minmax(0, 0.82fr) minmax(150px, 1.18fr); align-items: center; }
.source-copy { display: grid; justify-items: start; }
.document-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 0.5rem; border-radius: 50%; background: var(--green-soft); }
.document-icon svg { width: 30px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdf-button { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; margin-top: 0.75rem; padding: 0.65rem 0.8rem; border-radius: 12px; background: var(--green); color: #fff; text-decoration: none; font-weight: 700; }
.pdf-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pdf-preview { display: block; height: 175px; overflow: hidden; border: 1px solid #bfc7b4; border-radius: 12px; background: #fff; box-shadow: 0 6px 15px rgba(35, 53, 38, 0.1); }
.pdf-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.exam-info-card { gap: 0.85rem; }
.exam-info-card > summary { position: relative; display: grid; padding-inline-end: 2rem; cursor: pointer; list-style: none; }
.exam-info-card > summary::-webkit-details-marker { display: none; }
.exam-info-card > summary::after { content: "+"; position: absolute; inset-inline-end: 0.2rem; top: 50%; color: var(--green); font-size: 1.5rem; font-weight: 700; transform: translateY(-50%); }
.exam-info-card[open] > summary::after { content: "−"; }
.full-width { grid-column: 1 / -1; }
.exam-guidance { display: grid; gap: 0.55rem; }
.exam-guidance p { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 0.65rem; margin: 0; padding: 0.7rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.58); color: var(--muted); font-size: 0.82rem; line-height: 1.65; }
.guidance-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--green-soft); }
.guidance-icon svg { width: 23px; height: 23px; fill: none; stroke: var(--green-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.useful-links-section { display: grid; gap: 0.8rem; }
.official-links-grid { display: grid; grid-template-columns: 1fr; gap: 0.55rem; }
.official-link-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 0.55rem; min-height: 62px; padding: 0.65rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, 0.68); text-decoration: none; box-shadow: 0 4px 12px rgba(35, 53, 38, 0.04); }
.official-link-card strong { font-size: 0.82rem; line-height: 1.5; }
.official-link-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green-soft); color: var(--green); }
.official-link-icon svg, .external-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.external-icon { color: var(--green); }
.external-icon svg { width: 18px; height: 18px; }
.more-official-links { border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, 0.5); overflow: hidden; }
.more-official-links summary { padding: 0.75rem 0.85rem; color: var(--green-dark); font-size: 0.84rem; font-weight: 700; cursor: pointer; }
.additional-links { display: grid; padding: 0 0.7rem 0.7rem; }
.additional-links a { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; min-height: 44px; padding: 0.55rem 0.25rem; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.8rem; font-weight: 700; }
.additional-links svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.bottom-nav { position: fixed; z-index: 20; right: 50%; bottom: 0; width: min(460px, 100vw); padding: 0 0.6rem calc(0.55rem + env(safe-area-inset-bottom)); transform: translateX(50%); }
.bottom-nav-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 72px; padding: 0.45rem 0.35rem; border: 1px solid rgba(28, 58, 40, 0.08); border-radius: 34px 34px 20px 20px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 -6px 20px rgba(35, 53, 38, 0.12); backdrop-filter: blur(10px); }
.bottom-nav-link { position: relative; display: grid; justify-items: center; align-content: center; gap: 0.3rem; color: #313631; text-decoration: none; font-size: 0.7rem; font-weight: 700; }
.bottom-nav-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav-link.active { color: var(--green); }
.bottom-nav-link.active::before { content: ""; position: absolute; top: -0.45rem; width: 28px; height: 4px; border-radius: 4px; background: var(--green); }

@media (min-width: 620px) {
  .hero-copy { padding-inline-start: 2.5rem; }
  .primary-actions, .secondary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primary-card { min-height: 175px; }
  .official-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 920px) {
  body { padding-block: 1rem; }
  .home-shell { border-radius: 28px; }
  .bottom-nav { bottom: 0.7rem; }
}

@media (max-width: 430px) {
  .hero-landing { min-height: 284px; }
  .hero-copy { width: 58%; padding: 1.8rem 0.9rem 0; }
  .hero-brand-lockup { gap: 0.5rem; }
  .hero-brand-logo { width: 54px; height: 54px; border-radius: 13px; }
  .hero-brand-name { font-size: clamp(1.65rem, 8vw, 2.25rem); }
  .hero-copy p { font-size: 0.94rem; }
  .hero-signs { right: 0; bottom: 48px; width: 52%; height: 180px; }
  .hero-road { width: 93%; height: 155px; }
  .journey-sections { padding-inline: 0.72rem; }
  .primary-card { grid-template-columns: 72px 1fr 30px; min-height: 136px; padding: 0.82rem; }
  .card-illustration { width: 66px; height: 86px; }
  .card-illustration svg { width: 64px; height: 64px; }
  .primary-copy strong { font-size: 1.22rem; }
  .primary-copy small { font-size: 0.8rem; }
  .about-card { grid-template-columns: 1fr 94px; }
  .about-logo { width: 90px; height: 90px; }
  .source-card { grid-template-columns: 1fr; }
  .pdf-preview { grid-row: 1; height: 165px; }
  .source-copy { grid-row: 2; }
  .bottom-nav-link { font-size: 0.64rem; }
  .bottom-nav-link svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}