/* Asaan Labs: system fonts only, no third-party requests. */
:root { --bg:#F5F3EC; --ink:#121417; --muted:#5B6168; --line:#DCD8CC; --green:#0E7A4A; --green-soft:#E3EFE7; }
* { box-sizing:border-box; margin:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font:400 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x:hidden; }
a { color:inherit; }
a:focus-visible, .cta:focus-visible, .card:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--ink); color:#fff; padding:8px 12px; border-radius:6px; z-index:10; }
.skip:focus { left:8px; }
.ur { font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Geeza Pro","Noto Naskh Arabic",serif; direction:rtl; }

header { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; font-size:20px; text-decoration:none; }
.mark { width:28px; height:28px; border-radius:8px; background:var(--green); position:relative; flex:none; }
.mark::after { content:""; position:absolute; left:7px; right:7px; top:13px; height:2.5px; background:#fff; border-radius:2px; }
nav a { color:var(--muted); text-decoration:none; margin-left:28px; font-size:15px; }
nav a:hover { color:var(--ink); }

.hero { padding:72px 0 88px; display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:end; border-bottom:1px solid var(--line); }
h1 { font-size:clamp(44px, 7.4vw, 104px); line-height:.98; letter-spacing:-.045em; font-weight:700; }
.swap { display:inline-grid; color:var(--muted); }
.swap span { grid-area:1/1; opacity:0; transform:translateY(.25em); transition:opacity .5s, transform .5s; text-decoration:line-through; text-decoration-thickness:.06em; text-decoration-color:var(--green); }
.swap span.on { opacity:1; transform:none; }
.green { color:var(--green); }
.hero aside p { color:var(--muted); font-size:19px; max-width:34ch; }
.hero aside .ur { font-size:34px; line-height:2; color:var(--green); margin-bottom:8px; text-align:left; }
.cta { display:inline-block; margin-top:24px; background:var(--ink); color:#fff; padding:14px 22px; border-radius:10px; text-decoration:none; font-weight:600; font-size:15px; }

section { padding:88px 0; }
.eyebrow { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:28px; }
.products { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .3s, box-shadow .3s; }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(0,0,0,.25); }
.card img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-bottom:1px solid var(--line); }
.card div { padding:24px 26px 28px; }
.card h3 { font-size:26px; letter-spacing:-.02em; }
.card p { color:var(--muted); margin-top:6px; }
.card .tag { display:inline-block; margin-top:14px; font-size:13px; background:var(--green-soft); color:var(--green); padding:4px 10px; border-radius:99px; font-weight:600; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.principles div { padding:28px 28px 0 0; }
.principles h3 { font-size:22px; letter-spacing:-.02em; margin-bottom:8px; }
.principles p { color:var(--muted); }

footer { border-top:1px solid var(--line); padding:40px 0 56px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; color:var(--muted); font-size:15px; }
footer a { color:var(--ink); }

/* Text pages: privacy, legal, 404 */
.doc { max-width:68ch; padding:56px 0 88px; }
.doc h1 { font-size:clamp(40px, 6vw, 64px); margin-bottom:24px; }
.doc h2 { font-size:22px; letter-spacing:-.02em; margin:40px 0 10px; }
.doc p, .doc li { color:#2b2f34; }
.doc p + p, .doc ul { margin-top:12px; }
.doc ul { padding-left:20px; }
.doc .muted { color:var(--muted); }
.doc address { font-style:normal; }

@media (max-width:860px) {
  nav a:not(:last-child) { display:none; }
  .hero { grid-template-columns:1fr; padding:40px 0 56px; }
  .products, .principles { grid-template-columns:1fr; }
  section { padding:56px 0; }
}
@media (prefers-reduced-motion:reduce) { .swap span, .card { transition:none; } .card:hover { transform:none; } }