:root{
  --asphalt:#14181c;
  --asphalt-2:#1c2126;
  --asphalt-3:#252b31;
  --lane:#eef1f3;
  --lane-dim:#aab2ba;
  --amber:#f5a623;
  --amber-dim:#c9860f;
  --signal-green:#1f6f54;
  --signal-green-2:#25876a;
  --brake-red:#d64545;
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--asphalt);
  color:var(--lane);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
body.lang-ar{ font-family:'Tajawal',sans-serif; }
body.lang-ur{ font-family:'Noto Nastaliq Urdu',serif; line-height:2.15; }
body.lang-ur h1, body.lang-ur h2, body.lang-ur h3, body.lang-ur .display{ font-family:'Noto Nastaliq Urdu',serif; }
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar .display{ font-family:'Tajawal',sans-serif; font-weight:900; }
body.lang-en .display, body.lang-en h1, body.lang-en h2, body.lang-en h3{ font-family:'Space Grotesk',sans-serif; }

.lane-line{
  height:6px; width:100%;
  background-image:repeating-linear-gradient(90deg, var(--amber) 0 34px, transparent 34px 62px);
  background-size:96px 6px;
  animation:drive 2.2s linear infinite;
  opacity:.85;
}
[dir="rtl"] .lane-line{ animation-direction:reverse; }
@keyframes drive{ from{ background-position:0 0; } to{ background-position:96px 0; } }
@media (prefers-reduced-motion:reduce){ .lane-line{ animation:none; } }

/* ============ LANGUAGE GATE ============ */
#gate{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; padding:32px 20px; text-align:center;
  background:radial-gradient(ellipse at 50% -10%, rgba(245,166,35,.10), transparent 55%), var(--asphalt);
}
.gate-mark{
  width:150px; height:auto; border-radius:12px; background:#0c2643;
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  padding:14px 18px; box-shadow:0 0 0 4px var(--asphalt-3), 0 0 0 6px rgba(245,166,35,.4);
}
.gate-mark img{ width:100%; height:auto; display:block; }
.gate-title{ font-size:clamp(28px,5vw,44px); font-weight:700; letter-spacing:.5px; margin:0 0 6px; }
.gate-sub{ color:var(--lane-dim); font-size:15px; margin:0 0 8px; letter-spacing:.3px; }
.gate-city{ color:var(--amber); font-size:13px; margin:0 0 34px; letter-spacing:.4px; }
.gate-sub b{ color:var(--amber); font-weight:600; }

.signs{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; max-width:900px; }
.sign-btn{
  position:relative; width:220px; padding:28px 18px 22px;
  background:linear-gradient(180deg, var(--asphalt-3), var(--asphalt-2));
  border:2px solid #333b42; border-radius:10px; color:var(--lane); cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  font-family:inherit;
}
.sign-btn::before, .sign-btn::after{ content:''; position:absolute; top:8px; width:6px; height:6px; border-radius:50%; background:#565f68; }
.sign-btn::before{ left:8px; } .sign-btn::after{ right:8px; }
.sign-btn:hover{ transform:translateY(-6px); border-color:var(--amber); box-shadow:0 14px 30px rgba(0,0,0,.35); }
.sign-btn .flag{ font-size:30px; display:block; margin-bottom:12px; }
.sign-native{ display:block; font-size:22px; font-weight:700; margin-bottom:4px; }
.sign-btn[data-lang="ar"] .sign-native{ font-family:'Tajawal',sans-serif; font-weight:900; }
.sign-btn[data-lang="ur"] .sign-native{ font-family:'Noto Nastaliq Urdu',serif; font-size:26px; }
.sign-btn[data-lang="en"] .sign-native{ font-family:'Space Grotesk',sans-serif; }
.sign-en{ display:block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--lane-dim); }
.gate-lane{ margin-top:52px; width:min(560px,90vw); border-radius:6px; overflow:hidden; }

/* ============ MAIN SITE ============ */
#site{ display:none; min-height:100vh; }
header.topbar{
  background:var(--asphalt-2); border-bottom:1px solid #2c333a; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .dot{ width:56px; height:32px; border-radius:6px; background:#0c2643; display:flex; align-items:center; justify-content:center; flex:none; padding:3px 6px; }
.brand .dot img{ width:100%; height:100%; object-fit:contain; }
.brand-name{ font-weight:700; font-size:17px; line-height:1.25; }
.brand-name small{ display:block; font-size:11.5px; font-weight:400; color:var(--lane-dim); letter-spacing:.4px; }
.lang-switch{ display:flex; gap:6px; background:var(--asphalt); padding:5px; border-radius:9px; border:1px solid #2c333a; }
.lang-switch button{ border:none; background:transparent; color:var(--lane-dim); padding:7px 13px; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit; font-weight:600; }
.lang-switch button.active{ background:var(--amber); color:var(--asphalt); }

.header-actions{ display:flex; align-items:center; gap:12px; }
.back-btn{
  display:flex; align-items:center; gap:7px;
  background:var(--asphalt); border:1px solid #2c333a; color:var(--lane-dim);
  padding:9px 14px; border-radius:9px; cursor:pointer; font-family:inherit; font-weight:600; font-size:13px;
  transition:border-color .15s ease, color .15s ease;
}
.back-btn:hover{ border-color:var(--amber); color:var(--amber); }
.back-btn svg{ width:16px; height:16px; }
[dir="rtl"] .back-btn svg{ transform:scaleX(-1); }

.hero{ padding:52px 24px 36px; text-align:center; max-width:820px; margin:0 auto; }
.hero h1{ font-size:clamp(26px,4vw,38px); margin:0 0 12px; font-weight:700; }
.hero p{ color:var(--lane-dim); font-size:16px; margin:0 0 10px; }
.hero .addr{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  background:rgba(245,166,35,.1); border:1px solid rgba(245,166,35,.35); color:var(--amber);
  padding:7px 14px; border-radius:20px; font-size:13px; font-weight:600;
}
.hero .addr svg{ width:14px; height:14px; flex:none; }

main{ max-width:1080px; margin:0 auto; padding:12px 24px 80px; }
.section-block{ margin-top:44px; }
.section-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.section-head .icon-badge{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.section-head.laws .icon-badge{ background:rgba(214,69,69,.16); border:1px solid rgba(214,69,69,.4); }
.section-head.yards .icon-badge{ background:rgba(37,135,106,.18); border:1px solid rgba(37,135,106,.45); }
.section-head .icon-badge svg{ width:23px; height:23px; }
.section-head h2{ font-size:22px; margin:0 0 3px; }
.section-head p{ color:var(--lane-dim); font-size:14px; margin:0; }

/* laws list */
.law-list{ display:flex; flex-direction:column; gap:10px; }
.law-item{
  background:linear-gradient(180deg,var(--asphalt-3),var(--asphalt-2));
  border:1px solid #2c333a; border-radius:11px; padding:16px 18px;
  display:flex; gap:14px; align-items:flex-start;
}
.law-item.key{ border-color:var(--amber-dim); background:linear-gradient(180deg,rgba(245,166,35,.08),var(--asphalt-2)); }
.law-num{
  flex:none; width:30px; height:30px; border-radius:8px; background:var(--asphalt);
  border:1px solid #3a424a; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:var(--amber);
}
.law-body p{ margin:0; font-size:14.5px; color:var(--lane); line-height:1.85; }
body.lang-ur .law-body p{ line-height:2.3; }
.law-sub{ margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.law-sub li{ list-style:none; font-size:13.5px; color:var(--lane-dim); position:relative; padding-inline-start:16px; }
.law-sub li::before{ content:'—'; position:absolute; inset-inline-start:0; color:var(--amber-dim); }
.sample-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  background:var(--amber); color:var(--asphalt); border:none; padding:8px 15px;
  border-radius:7px; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit;
}
.sample-link svg{ width:15px; height:15px; }

/* yard cards */
.yard-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:640px){ .yard-grid{ grid-template-columns:1fr; } }
.yard-card{
  background:linear-gradient(180deg,var(--asphalt-3),var(--asphalt-2));
  border:1px solid #2c333a; border-radius:12px; padding:20px; position:relative;
}
.yard-card::before, .yard-card::after{ content:''; position:absolute; top:10px; width:6px; height:6px; border-radius:50%; background:#4a525a; }
.yard-card::before{ left:10px; } .yard-card::after{ right:10px; }
.yard-card .pin{
  width:42px; height:42px; border-radius:10px; background:rgba(37,135,106,.18);
  border:1px solid rgba(37,135,106,.45); display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.yard-card .pin svg{ width:22px; height:22px; }
.yard-card h3{ font-size:16px; margin:0 0 4px; }
.yard-card p{ font-size:13px; color:var(--lane-dim); margin:0 0 14px; }
.yard-link{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--signal-green); color:var(--lane); border:none; padding:9px 16px;
  border-radius:8px; font-weight:700; font-size:13px;
}
.yard-link:hover{ background:var(--signal-green-2); }
.yard-link svg{ width:15px; height:15px; }

footer{ border-top:1px solid #2c333a; padding:22px 24px; text-align:center; color:var(--lane-dim); font-size:12.5px; }
footer .foot-addr{ margin-top:4px; }

/* modal */
#modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(10,12,14,.82); z-index:100;
  align-items:center; justify-content:center; padding:24px;
}
#modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--asphalt-2); border:1px solid #333b42; border-radius:14px; max-width:520px; width:100%;
  max-height:88vh; overflow:auto; padding:18px;
}
.modal-box img{ width:100%; border-radius:8px; display:block; }
.modal-box h4{ margin:14px 2px 4px; font-size:15px; }
.modal-box .modal-note{ margin:0 2px 12px; font-size:12.5px; color:var(--lane-dim); }
.modal-close{
  display:block; margin:6px auto 0; background:var(--asphalt-3); color:var(--lane); border:1px solid #3a424a;
  padding:9px 22px; border-radius:8px; cursor:pointer; font-family:inherit; font-weight:600; font-size:13px;
}

[data-i18n]{ transition:opacity .12s ease; }