/* lib.mehyar.us — Everything I Build, Explained (2026-10-23 rework) */
:root{
  --bg:#07070d;
  --panel:rgba(255,255,255,.055);
  --panel-strong:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.12);
  --ink:#f4f4f8;
  --muted:#a7a7ba;
  --muted2:#82829a;
  --accent:#22d3ee;
  --accent2:#818cf8;
  --radius:20px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 600px at 85% -10%,rgba(99,102,241,.28),transparent 60%),
    radial-gradient(900px 520px at -10% 30%,rgba(34,211,238,.16),transparent 60%),
    radial-gradient(800px 600px at 50% 110%,rgba(244,63,94,.12),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
  overflow-x:hidden;min-height:100dvh;
}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* ── sticky top bar ── */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;
  background:rgba(7,7,13,.94);
  border-bottom:1px solid var(--line);
}
.top-id{display:flex;align-items:center;gap:10px;font-family:inherit;font-weight:700;font-size:15px;min-width:0}
.top-id img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.top-id em{font-style:normal;color:var(--muted);font-weight:500;font-size:13px}
.share-btn{
  display:flex;align-items:center;gap:7px;flex:none;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);font-size:13px;font-weight:600;
  transition:background .2s,transform .15s;
}
.share-btn:hover{background:var(--panel-strong)}
.share-btn:active{transform:scale(.97)}
.share-btn svg{width:15px;height:15px}

/* ── layout ── */
.wrap{max-width:1140px;margin:0 auto;padding:16px 18px 56px}
.section{margin-top:34px}

/* ── reveal on scroll ── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── slim identity strip ── */
.idstrip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.id-ava{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.25);flex:none}
.id-text{min-width:0;flex:1}
.id-name{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.id-sub{color:var(--muted);font-size:13px;margin-top:1px}
.id-socs{display:flex;gap:7px;flex:none}
.id-soc{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);transition:all .18s}
.id-soc:hover{background:var(--panel-strong);transform:translateY(-2px)}
.id-soc svg{width:15px;height:15px}

/* ── section heads ── */
.sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-title{font-family:inherit;font-size:23px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.sec-title .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));flex:none}
.sec-count{font-size:12.5px;font-weight:700;color:var(--accent);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);padding:3px 10px;border-radius:999px}
.sec-sub{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:640px}

/* ── featured (ValleyGods) ── */
.feat-sec{margin-top:18px}
.feat{
  display:block;position:relative;padding:18px;border-radius:24px;overflow:hidden;
  background:linear-gradient(140deg,rgba(124,58,237,.42),rgba(16,185,129,.16) 55%,rgba(255,255,255,.04));
  border:1px solid rgba(167,139,250,.5);box-shadow:var(--shadow);
  transition:transform .25s ease;
}
.feat:hover{transform:translateY(-3px)}
.feat-badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.02em;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.feat-main{display:flex;gap:15px;margin-top:13px;align-items:flex-start}
.feat-icon{flex:none}
.feat-icon img{width:76px;height:76px;border-radius:20px;object-fit:cover;border:1px solid rgba(255,255,255,.35);box-shadow:0 10px 28px rgba(0,0,0,.4)}
.feat-text{display:block;min-width:0}
.feat-name{display:block;font-size:24px;font-weight:800;line-height:1.15}
.feat-tag{display:block;font-weight:700;color:#ddd6fe;margin-top:1px;font-size:14.5px}
.feat-desc{display:block;color:#e9e9f4;font-size:14px;margin-top:6px;max-width:620px}
.feat-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:#fff;color:#111827;font-weight:800;font-size:14.5px;
  padding:11px 20px;border-radius:999px;
}
.feat-cta svg{width:16px;height:16px}

/* ── finder (search + filters) — slim bar ── */
.finder{
  position:sticky;top:53px;z-index:40;margin-top:34px;padding:8px;
  background:rgba(10,10,18,.96);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.3);
}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:0 12px}
.search svg{width:16px;height:16px;color:var(--muted);flex:none}
.search input{
  flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:14.5px;
  padding:9px 0;outline:none;
}
.search input::placeholder{color:var(--muted2)}
.fchips{display:flex;gap:6px;margin-top:8px;overflow-x:auto;padding-bottom:1px;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchip{
  flex:none;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:#dcdcea;transition:all .18s;min-height:32px;
}
.fchip:hover{background:var(--panel-strong)}
.fchip.on{background:#fff;color:#111827;border-color:#fff}
.result-line{margin-top:10px;font-size:13px;color:var(--muted)}
.empty{margin-top:12px;padding:16px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:14.5px}
.empty b{color:var(--ink)}

/* ── shared bits (sheet reuses these) ── */
.price{
  flex:none;font-size:11.5px;font-weight:700;color:#a7f3d0;
  background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);
  padding:4px 9px;border-radius:999px;line-height:1.3;text-align:center;
}
.card-points{list-style:none;margin-top:10px;display:grid;gap:5px}
.card-points li{position:relative;padding-left:20px;font-size:13.5px;color:#cfcfe0}
.card-points li::before{
  content:"";position:absolute;left:1px;top:4px;width:11px;height:11px;border-radius:50%;
  background:rgba(34,211,238,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/8px no-repeat;
}
.card-who{font-size:13px;color:var(--muted);margin-top:10px}
.card-who b{color:#e8e8f2}

/* ── product tiles ── */
.tiles{
  display:grid;gap:18px 10px;margin-top:16px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
}
@media (min-width:880px){.tiles{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:22px 12px}}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;
  padding:4px 2px;border-radius:18px;transition:transform .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.tile:hover{transform:translateY(-3px)}
.tile:active{transform:scale(.96)}
.tile-logo{position:relative;display:block}
.tile-logo img{
  width:72px;height:72px;border-radius:20px;object-fit:cover;
  background:#fff;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 22px rgba(0,0,0,.35);transition:transform .3s ease;
}
@media (min-width:880px){.tile-logo img{width:84px;height:84px;border-radius:23px}}
.tile:hover .tile-logo img{transform:scale(1.05) rotate(-2deg)}
.tile-free{
  position:absolute;top:-6px;right:-8px;font-size:9.5px;font-weight:800;letter-spacing:.04em;
  color:#052e16;background:linear-gradient(135deg,#4ade80,#22d3ee);
  padding:2.5px 7px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.tile-name{
  margin-top:9px;font-size:13.5px;font-weight:600;line-height:1.25;color:#ececf4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tile-micro{font-size:11.5px;color:var(--muted2);margin-top:2px;line-height:1.3}
.tile[hidden],.section[hidden]{display:none!important}

/* ── detail sheet / modal ── */
.sheet-wrap{position:fixed;inset:0;z-index:100}
.sheet-wrap[hidden]{display:none}
.sheet-backdrop{
  position:absolute;inset:0;background:rgba(3,3,8,.66);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .25s ease;
}
.sheet{
  position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow-y:auto;
  background:linear-gradient(170deg,#171724,#0d0d16);
  border:1px solid rgba(255,255,255,.16);border-bottom:0;
  border-radius:28px 28px 0 0;padding:26px 22px 30px;
  box-shadow:0 -18px 60px rgba(0,0,0,.55);
  animation:sheetUp .38s cubic-bezier(.22,1.2,.36,1);
  perspective:900px;
}
.sheet-flip{animation:flipIn .45s cubic-bezier(.22,1,.36,1);transform-origin:50% 0}
.sheet-close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-strong);border:1px solid var(--line);z-index:2;
}
.sheet-close svg{width:16px;height:16px}
.sheet-logo{display:block;width:84px}
.sheet-logo img{
  width:84px;height:84px;border-radius:22px;object-fit:cover;background:#fff;
  border:1px solid rgba(255,255,255,.25);box-shadow:0 12px 30px rgba(0,0,0,.45);
  animation:logoFlip .55s cubic-bezier(.22,1,.36,1);
}
.sheet-head{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;margin-top:16px}
.sheet-name{font-family:inherit;font-size:25px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.sheet-head .price{margin-top:4px}
.sheet-tag{font-weight:600;color:#d9d9e8;font-size:15.5px;margin-top:4px}
.sheet-desc{color:var(--muted);font-size:14.5px;margin-top:8px}
.sheet .card-points{margin-top:12px}
.sheet .card-who{margin-top:12px}
.sheet-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b0b12;
  font-weight:800;font-size:16px;padding:15px 20px;border-radius:16px;min-height:52px;
  transition:transform .15s ease;
}
.sheet-cta:active{transform:scale(.98)}
.sheet-cta svg{width:18px;height:18px}
.sheet-domain{text-align:center;color:var(--muted2);font-size:12.5px;font-weight:600;margin-top:10px}
@media (min-width:720px){
  .sheet{
    left:50%;right:auto;bottom:auto;top:50%;width:520px;max-width:calc(100vw - 40px);
    border-bottom:1px solid rgba(255,255,255,.16);border-radius:28px;
    transform:translate(-50%,-50%);
    animation:popIn .34s cubic-bezier(.22,1.15,.36,1);
  }
}
@keyframes sheetUp{from{transform:translateY(56px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes popIn{from{transform:translate(-50%,-46%) scale(.94);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes flipIn{from{transform:rotateX(-16deg) translateY(10px);opacity:0}to{transform:rotateX(0) translateY(0);opacity:1}}
@keyframes logoFlip{from{transform:rotateY(-70deg) scale(.85);opacity:0}to{transform:rotateY(0) scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .sheet,.sheet-flip,.sheet-logo img,.sheet-backdrop{animation:none}
}
body.locked{overflow:hidden}

/* ── service / work with me ── */
.service{
  display:block;position:relative;margin-top:16px;padding:22px;border-radius:24px;overflow:hidden;
  background:linear-gradient(140deg,rgba(139,92,246,.22),rgba(59,130,246,.1) 60%,rgba(255,255,255,.03));
  border:1px solid rgba(167,139,250,.4);transition:transform .2s;
}
.service:hover{transform:translateY(-2px)}
.service-glow{position:absolute;inset:auto -10% -60%;height:220px;background:radial-gradient(closest-side,rgba(139,92,246,.3),transparent);pointer-events:none}
.service-head{display:flex;align-items:center;gap:14px;position:relative}
.service-logo img{width:52px;height:52px;border-radius:15px;object-fit:cover}
.service-name{font-family:inherit;font-size:19px;font-weight:700}
.service-sub{color:var(--muted);font-size:13.5px}
.service-head .chev{width:20px;height:20px;margin-left:auto;color:var(--muted)}
.service-desc{color:#e2e2ee;font-size:14.5px;margin-top:12px;position:relative;max-width:640px}
.service-cta{display:inline-block;margin-top:14px;font-weight:700;font-size:14.5px;color:#c4b5fd;position:relative}

/* ── contact ── */
.contact-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pill{
  display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-weight:600;font-size:14px;
  transition:background .2s,transform .15s;min-height:44px;
}
.pill:hover{background:var(--panel-strong);transform:translateY(-1px)}
.pill svg{width:17px;height:17px}

/* ── capture ── */
.capture{padding:22px;border-radius:22px;background:var(--panel);border:1px solid var(--line);text-align:center}
.capture-title{font-family:inherit;font-size:19px;font-weight:700}
.capture-sub{color:var(--muted);font-size:14px;margin-top:6px}
.capture-form{display:flex;gap:9px;max-width:440px;margin:16px auto 0}
.capture-form input{
  flex:1;min-width:0;padding:12px 15px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.3);color:var(--ink);font:inherit;font-size:15px;outline:none;min-height:44px;
}
.capture-form input:focus{border-color:var(--accent)}
.capture-form button{
  padding:12px 22px;border-radius:12px;font-weight:700;min-height:44px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b0b12;
}

/* ── footer / toast ── */
.footer{text-align:center;color:var(--muted2);font-size:13px;margin-top:48px}
.foot-note{margin-top:5px}
.inline-link{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:90;
  background:#fff;color:#111827;font-size:14px;font-weight:600;
  padding:11px 20px;border-radius:999px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:all .3s ease;max-width:92vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:560px){
  .wrap{padding:12px 14px 48px}
  .feat{padding:15px}
  .feat-icon img{width:62px;height:62px;border-radius:17px}
  .feat-name{font-size:21px}
  .id-sub{font-size:12.5px}
  .finder{top:51px}
}