/* Likho Urdu — home page. Scoped to .likho-home so it sits safely inside any theme. */
.likho-home{
  --lh-ink:#10231D; --lh-muted:#55665F; --lh-line:#DDE7E2; --lh-bg:#F3F8F5; --lh-card:#FFFFFF;
  --lh-green:#0F6B4F; --lh-green-2:#0A4F3B; --lh-deep:#073529; --lh-blue:#1D4FA3; --lh-gold:#F2B441; --lh-soft:#E2F1EA;
  --lh-urdu:"Likho Nastaliq","Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",serif;
  --lh-r:20px; --lh-shadow:0 1px 2px rgba(7,53,41,.06),0 8px 24px rgba(7,53,41,.07);
  color:var(--lh-ink);font-size:17px;line-height:1.65;container-type:inline-size;
}
.likho-home *,.likho-home *::before,.likho-home *::after{box-sizing:border-box}
.likho-home h1,.likho-home h2,.likho-home h3,.likho-home p,.likho-home ul,.likho-home ol{margin:0;padding:0}
.likho-home ul,.likho-home ol{list-style:none}
.likho-home a{text-decoration:none}
.likho-home .lh-urdu{font-family:var(--lh-urdu);line-height:2.1}
.likho-home svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.likho-home :focus-visible{outline:3px solid var(--lh-gold);outline-offset:3px;border-radius:8px}

/* ---------- hero ---------- */
.lh-hero{position:relative;overflow:hidden;display:grid;gap:36px;align-items:center;padding:44px 26px;border-radius:28px;color:#fff;
  background:radial-gradient(900px 500px at 110% -10%,rgba(29,79,163,.55),transparent 60%),radial-gradient(700px 420px at -10% 120%,rgba(242,180,65,.20),transparent 60%),linear-gradient(140deg,var(--lh-deep),var(--lh-green) 70%);}
@container (min-width:900px){.lh-hero{grid-template-columns:1.1fr .9fr;padding:68px 60px}}
.lh-hero-text,.lh-demo{position:relative;z-index:1}
.lh-eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--lh-gold);margin-bottom:14px!important}
.likho-home h1{font-size:clamp(2rem,6cqi,3.5rem);line-height:1.08;font-weight:800;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.lh-h1-ur{display:block;font-size:.62em;font-weight:400;color:#CDEBDD;margin-top:.15em;letter-spacing:0}
.lh-lead{margin-top:18px!important;font-size:1.08rem;color:#DCEDE5;max-width:56ch}
.lh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.lh-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:700;font-size:1rem;background:var(--lh-gold);color:#2A1C00!important;border:2px solid var(--lh-gold);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.lh-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,180,65,.35);background:#FFC65A}
.lh-btn:active{transform:translateY(0)}
.lh-btn-ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.45)}
.lh-btn-ghost:hover{background:rgba(255,255,255,.12);box-shadow:none;border-color:#fff}
.lh-btn-light{background:#fff;border-color:#fff;color:var(--lh-green-2)!important}
.lh-btn-light:hover{background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.2)}
.lh-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px!important;font-size:.9rem;color:#CDEBDD}
.lh-trust li::before{content:"✓";display:inline-block;margin-right:7px;color:var(--lh-gold);font-weight:700}

/* floating Urdu letters */
.lh-float{position:absolute;inset:0;pointer-events:none}
.lh-float span{position:absolute;font-family:var(--lh-urdu);font-size:clamp(2rem,7cqi,4.5rem);color:rgba(255,255,255,.07);animation:lh-drift 14s ease-in-out infinite}
.lh-float span:nth-child(1){left:4%;top:8%}
.lh-float span:nth-child(2){left:22%;top:66%;animation-delay:-3s}
.lh-float span:nth-child(3){left:40%;top:4%;animation-delay:-6s}
.lh-float span:nth-child(4){left:54%;top:74%;animation-delay:-2s}
.lh-float span:nth-child(5){left:68%;top:10%;animation-delay:-8s}
.lh-float span:nth-child(6){left:86%;top:60%;animation-delay:-5s}
.lh-float span:nth-child(7){left:12%;top:36%;animation-delay:-10s}
.lh-float span:nth-child(8){left:92%;top:20%;animation-delay:-1s}
.lh-float span:nth-child(9){left:32%;top:40%;animation-delay:-7s}
.lh-float span:nth-child(10){left:76%;top:82%;animation-delay:-4s}
.lh-float span:nth-child(11){left:60%;top:40%;animation-delay:-9s}
.lh-float span:nth-child(12){left:2%;top:80%;animation-delay:-11s}
@keyframes lh-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}

/* typing demo */
.lh-demo{background:rgba(255,255,255,.97);color:var(--lh-ink);border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.28);padding:0 0 18px;animation:lh-bob 7s ease-in-out infinite}
@keyframes lh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.lh-demo-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--lh-line);font-size:.78rem;color:var(--lh-muted);font-weight:600}
.lh-demo-bar i{width:10px;height:10px;border-radius:50%;background:#E3E9E6}
.lh-demo-bar i:first-child{background:#F2B441}
.lh-demo-bar span{margin-left:8px}
.lh-demo-row{padding:14px 20px 4px}
.lh-demo-label{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lh-muted);font-weight:700;margin-bottom:4px}
.lh-demo-roman{font-size:1.15rem;min-height:1.9em;font-weight:500}
.lh-caret{display:inline-block;width:2px;height:1.1em;background:var(--lh-green);margin-left:2px;vertical-align:-.18em;animation:lh-blink 1s steps(1) infinite}
@keyframes lh-blink{50%{opacity:0}}
.lh-demo-arrow{text-align:center;color:var(--lh-green);font-size:1.2rem;line-height:1;padding-top:6px;animation:lh-nudge 1.6s ease-in-out infinite}
@keyframes lh-nudge{50%{transform:translateY(4px)}}
.lh-demo-urdu{font-size:1.7rem;min-height:2.3em;color:var(--lh-green-2);transition:opacity .35s ease,transform .35s ease}
.lh-demo-urdu.is-out{opacity:0;transform:translateY(6px)}

/* ---------- stats ---------- */
.lh-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lh-line);border:1px solid var(--lh-line);border-radius:var(--lh-r);overflow:hidden;margin-top:22px}
@container (min-width:760px){.lh-stats{grid-template-columns:repeat(4,1fr)}}
.lh-stats div{background:var(--lh-card);padding:20px 16px;text-align:center;transition:background .25s ease}
.lh-stats div:hover{background:var(--lh-soft)}
.lh-stats b{display:block;font-size:1.9rem;line-height:1.1;font-weight:800;color:var(--lh-green);font-variant-numeric:tabular-nums}
.lh-stats span{font-size:.88rem;color:var(--lh-muted)}

/* ---------- sections ---------- */
.lh-section{margin-top:72px}
.likho-home h2{font-size:clamp(1.55rem,3.6cqi,2.2rem);line-height:1.2;font-weight:800;letter-spacing:-.015em;color:var(--lh-ink);text-wrap:balance}
.lh-section>h2::after{content:"";display:block;width:54px;height:4px;border-radius:4px;margin-top:14px;background:linear-gradient(90deg,var(--lh-green),var(--lh-blue))}
.lh-sub{margin-top:14px!important;color:var(--lh-muted);max-width:70ch}
.likho-home h3{font-size:1.14rem;line-height:1.3;font-weight:700;color:var(--lh-ink)}

/* tool cards */
.lh-tools{display:grid;gap:18px;margin-top:30px;grid-template-columns:1fr}
@container (min-width:640px){.lh-tools{grid-template-columns:repeat(2,1fr)}}
@container (min-width:1120px){.lh-tools{grid-template-columns:repeat(4,1fr)}}
.lh-tool{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:26px 24px 24px;background:var(--lh-card);border:1px solid var(--lh-line);border-radius:var(--lh-r);color:var(--lh-ink)!important;box-shadow:var(--lh-shadow);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease}
.lh-tool::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--lh-green),var(--lh-blue));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.lh-tool:hover{transform:translateY(-8px);box-shadow:0 2px 4px rgba(7,53,41,.06),0 22px 44px rgba(7,53,41,.16);border-color:#B9D6CA}
.lh-tool:hover::before{transform:scaleX(1)}
.lh-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--lh-soft);color:var(--lh-green);transition:background .28s ease,color .28s ease,transform .28s ease}
.lh-tool:hover .lh-ico,.lh-feat:hover .lh-ico{background:var(--lh-green);color:#fff;transform:rotate(-6deg) scale(1.06)}
.lh-tool-ur{font-size:1.25rem;color:var(--lh-green);margin-top:4px}
.lh-tool p{color:var(--lh-muted);font-size:.96rem;flex:1}
.lh-go{margin-top:8px;font-weight:700;color:var(--lh-green);font-size:.95rem}
.lh-go i,.lh-pick i,.lh-more i,.lh-guide i{display:inline-block;font-style:normal;transition:transform .25s ease}
.lh-tool:hover .lh-go i,.lh-pick a:hover i,.lh-more a:hover i,.lh-guide:hover i{transform:translateX(6px)}

/* split: text + steps */
.lh-split{display:grid;gap:34px;align-items:start}
@container (min-width:900px){.lh-split{grid-template-columns:1.25fr 1fr;gap:56px}}
.lh-split p{margin-top:16px!important}
.lh-split h2+p{margin-top:28px!important}
.lh-steps{display:grid;gap:14px;counter-reset:s}
.lh-steps li{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--lh-bg);border:1px solid var(--lh-line);border-radius:16px;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.lh-steps li:hover{transform:translateX(6px);background:#fff;border-color:#B9D6CA}
.lh-steps b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lh-green);color:#fff;font-weight:800}
.lh-steps strong{display:block;line-height:1.35}
.lh-steps span{display:block;color:var(--lh-muted);font-size:.94rem;margin-top:2px}

/* features */
.lh-feats{display:grid;gap:18px;margin-top:30px;grid-template-columns:1fr}
@container (min-width:640px){.lh-feats{grid-template-columns:repeat(2,1fr)}}
.lh-feat{padding:26px 24px;border-radius:var(--lh-r);background:var(--lh-bg);border:1px solid transparent;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.lh-feat:hover{background:#fff;border-color:var(--lh-line);transform:translateY(-4px);box-shadow:var(--lh-shadow)}
.lh-feat h3{margin-top:16px}
.lh-feat p{margin-top:8px!important;color:var(--lh-muted);font-size:.97rem}

/* picker rows */
.lh-pick{display:grid;gap:12px;margin-top:28px}
.lh-pick a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:18px 22px;border:1px solid var(--lh-line);border-radius:16px;background:var(--lh-card);color:var(--lh-ink)!important;transition:border-color .25s ease,background .25s ease,transform .25s ease}
.lh-pick a:hover{border-color:var(--lh-green);background:var(--lh-soft);transform:translateX(4px)}
.lh-pick strong{grid-column:1}
.lh-pick span{grid-column:1;color:var(--lh-muted);font-size:.95rem}
.lh-pick i{grid-column:2;grid-row:1/3;font-size:1.3rem;color:var(--lh-green)}

/* who */
.lh-who{display:grid;gap:16px;margin-top:28px;grid-template-columns:1fr}
@container (min-width:640px){.lh-who{grid-template-columns:repeat(2,1fr)}}
@container (min-width:1120px){.lh-who{grid-template-columns:repeat(4,1fr)}}
.lh-who div{padding:22px;border-left:4px solid var(--lh-soft);background:var(--lh-card);border-radius:0 14px 14px 0;transition:border-color .25s ease,background .25s ease}
.lh-who div:hover{border-left-color:var(--lh-green);background:var(--lh-bg)}
.lh-who p{margin-top:8px!important;color:var(--lh-muted);font-size:.96rem}

/* guides */
.lh-guides{display:grid;gap:16px;margin-top:28px;grid-template-columns:1fr}
@container (min-width:640px){.lh-guides{grid-template-columns:repeat(2,1fr)}}
@container (min-width:1120px){.lh-guides{grid-template-columns:repeat(3,1fr)}}
.lh-guide{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--lh-line);border-radius:16px;background:var(--lh-card);color:var(--lh-ink)!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.lh-guide:hover{transform:translateY(-5px);box-shadow:var(--lh-shadow);border-color:#B9D6CA}
.lh-guide small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--lh-blue)}
.lh-guide strong{font-size:1.06rem;line-height:1.35}
.lh-guide span{color:var(--lh-muted);font-size:.93rem;flex:1}
.lh-guide em{font-style:normal;font-weight:700;color:var(--lh-green);font-size:.92rem}
.lh-more{margin-top:22px!important;font-weight:700}
.lh-more a{color:var(--lh-green)!important}

/* faq */
.lh-faq{background:var(--lh-bg);border-radius:28px;padding:40px 24px}
@container (min-width:760px){.lh-faq{padding:56px}}
.lh-faq h3{margin-top:26px;padding-top:22px;border-top:1px solid var(--lh-line)}
.lh-faq h2+h3{margin-top:30px}
.lh-faq p{margin-top:8px!important;color:var(--lh-muted);max-width:78ch}

/* closing band */
.lh-band{margin-top:72px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:38px 30px;border-radius:28px;color:#fff;background:linear-gradient(120deg,var(--lh-green-2),var(--lh-blue))}
.lh-band h2{color:#fff}
.lh-band p{margin-top:8px!important;color:#DCE8F5}

/* reveal on scroll (only when JavaScript is running) */
.lh-js .lh-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.lh-js .lh-reveal.is-in{opacity:1;transform:none}
.lh-js .lh-tool.lh-reveal.is-in:hover{transform:translateY(-8px)}
.lh-js .lh-feat.lh-reveal.is-in:hover{transform:translateY(-4px)}
.lh-js .lh-pick a.lh-reveal.is-in:hover{transform:translateX(4px)}
.lh-tools .lh-reveal:nth-child(2),.lh-feats .lh-reveal:nth-child(2),.lh-who .lh-reveal:nth-child(2),.lh-guides .lh-reveal:nth-child(2),.lh-pick .lh-reveal:nth-child(2){transition-delay:.08s}
.lh-tools .lh-reveal:nth-child(3),.lh-feats .lh-reveal:nth-child(3),.lh-who .lh-reveal:nth-child(3),.lh-guides .lh-reveal:nth-child(3),.lh-pick .lh-reveal:nth-child(3){transition-delay:.16s}
.lh-tools .lh-reveal:nth-child(4),.lh-feats .lh-reveal:nth-child(4),.lh-who .lh-reveal:nth-child(4),.lh-guides .lh-reveal:nth-child(4),.lh-pick .lh-reveal:nth-child(4){transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .likho-home *,.likho-home *::before{animation:none!important;transition:none!important}
  .lh-js .lh-reveal{opacity:1;transform:none}
}