/* /apps/ catalog — warm KwickPhone design system */
:root{--bg:#faf8f4;--panel:#fff;--ink:#16120e;--mut:#6b635a;--line:rgba(22,18,14,.11);
 --accent:#e1251b;--green:#1c7a44;--dark:#15110d;--sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.ey{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
h1{font-weight:800;font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.05;letter-spacing:-.03em;margin:.3em 0}
h1 .r{color:var(--accent)}
.sub{font-size:clamp(1.02rem,1.4vw,1.2rem);color:#4a443c;max-width:60ch}
.sub b{color:var(--ink);font-weight:600}
section{padding:56px 0}
.counts{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px}
.counts div b{display:block;font-size:1.9rem;font-weight:800;color:var(--ink)}
.counts div{color:var(--mut);font-size:.88rem}
/* advantage band */
.adv{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.adv .c{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.adv .c h4{font-size:.98rem;font-weight:800;margin-bottom:4px}
.adv .c p{font-size:.85rem;color:var(--mut)}
/* flagship + category cards */
.deep{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.dcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s;display:block}
.dcard:hover{transform:translateY(-3px);box-shadow:0 24px 60px -30px rgba(22,18,14,.35)}
.dcard img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.dcard .b{padding:18px 22px}
.dcard .tag{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.dcard h3{font-size:1.2rem;font-weight:800;margin:6px 0}
.dcard p{color:var(--mut);font-size:.9rem}
.dcard .go{color:var(--accent);font-weight:700;font-size:.88rem;margin-top:9px;display:inline-block}
/* category directory */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:30px}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.18s}
.ccard:hover{transform:translateY(-2px);box-shadow:0 18px 44px -26px rgba(22,18,14,.3)}
.ccard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ccard .b{padding:13px 16px}
.ccard .b h3{font-size:1.02rem;font-weight:800}
.ccard .b span{font-size:.8rem;color:var(--mut)}
/* app grid */
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.tools input{flex:1;min-width:220px;border:1.5px solid var(--line);border-radius:10px;padding:12px 15px;font:inherit;background:var(--panel)}
.chip{border:1.5px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:22px}
.app{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.16s}
.app:hover{transform:translateY(-2px);box-shadow:0 16px 40px -26px rgba(22,18,14,.3)}
.app .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#f0ece5;display:block}
.app .ic{width:100%;aspect-ratio:16/9;object-fit:contain;background:#faf7f2;padding:14px;display:block}
.app .b{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.app .b h3{font-size:1.02rem;font-weight:800}
.app .b .em{font-size:.9em}
.app .b p{font-size:.85rem;color:var(--mut);flex:1}
.app .b .go{color:var(--accent);font-weight:700;font-size:.82rem}
.hidden{display:none!important}
.miss{color:var(--mut);font-size:.9rem;margin-top:16px}
/* category hero */
.chero{position:relative;border-radius:20px;overflow:hidden;margin-top:8px;min-height:280px;display:flex;align-items:flex-end}
.chero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chero .ov{position:relative;width:100%;padding:34px;background:linear-gradient(to top,rgba(21,17,13,.86),rgba(21,17,13,.15) 70%,transparent);color:#fff}
.chero h1{color:#fff;margin:.1em 0}
.chero p{color:rgba(255,255,255,.9);max-width:60ch;font-size:1.05rem}
/* related / links */
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pill{border:1.5px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 15px;font-size:.85rem;font-weight:600}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:8px;padding:14px 26px;font-size:.95rem;font-weight:600;border:1.5px solid transparent}
.btn.solid{background:var(--accent);color:#fff}
.btn.ghost{border-color:var(--line)}
.cta{background:var(--dark);color:#fff;text-align:center;padding:52px 0}
.cta h2{font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em}
.cta p{color:rgba(255,255,255,.75);max-width:56ch;margin:12px auto 0}
.crumb{font-size:.82rem;color:var(--mut);padding-top:26px}
.crumb a:hover{color:var(--accent)}
@media(max-width:900px){.wrap{padding:0 20px}.deep{grid-template-columns:1fr}.adv{grid-template-columns:1fr 1fr}section{padding:44px 0}}
@media(max-width:560px){.adv{grid-template-columns:1fr}}