/*
Theme Name: Imler Apps
Theme URI: https://example.com
Description: A studio landing page that lists apps with App Store and Google Play download links. Child theme of Twenty Twenty-Four. Edit your apps in functions.php (the $imler_apps array).
Author: Imler
Version: 1.0.0
Template: twentytwentyfour
Requires at least: 6.0
Tested up to: 6.5
License: GNU General Public License v2 or later
Text Domain: imler-apps
*/

:root{
  --bg:#0c0d10;
  --panel:#15171c;
  --panel-hi:#1c1f26;
  --ink:#f4f5f7;
  --mut:#8b909c;
  --line:#262a33;
  --glow:#7c5cff;
  --glow-2:#26e0a3;
}

/* Reset within our page so the parent theme doesn't fight us */
.imler-page *{margin:0;padding:0;box-sizing:border-box}
.imler-page{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
.imler-wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

.imler-ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(600px 400px at 15% -5%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(500px 400px at 95% 10%, rgba(38,224,163,.12), transparent 60%);
}

.imler-header{padding:88px 0 64px}
.imler-eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--mut);display:flex;align-items:center;gap:12px;
}
.imler-eyebrow::before{content:"";width:28px;height:1px;background:var(--glow)}
.imler-header h1{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(40px,7vw,76px);line-height:1.02;letter-spacing:-.03em;
  margin:24px 0 20px;max-width:14ch;color:var(--ink);
}
.imler-header h1 em{font-style:normal;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,var(--glow),var(--glow-2))}
.imler-lede{color:var(--mut);font-size:18px;max-width:48ch}

.imler-main{padding-bottom:96px}
.imler-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

.imler-card{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;
  display:flex;flex-direction:column;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.imler-card:hover{border-color:#3a3f4d;transform:translateY(-3px);background:var(--panel-hi)}
.imler-card-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.imler-icon{
  width:64px;height:64px;border-radius:16px;flex:none;display:grid;place-items:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:#0c0d10;
}
.imler-card h2{font-family:'Space Grotesk',sans-serif;font-size:21px;letter-spacing:-.01em;margin-bottom:4px;color:var(--ink)}
.imler-tag{font-size:13px;color:var(--mut)}
.imler-card p{color:var(--mut);font-size:15px;flex:1;margin-bottom:22px}

.imler-stores{display:flex;flex-wrap:wrap;gap:10px}
.imler-store{
  display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:11px;
  border:1px solid var(--line);background:#0f1115;color:var(--ink);text-decoration:none;
  font-size:14px;font-weight:500;transition:border-color .2s, background .2s;
}
.imler-store:hover{border-color:#454b59;background:#181b21;color:var(--ink)}
.imler-store svg{width:18px;height:18px;flex:none}
.imler-store small{display:block;font-size:10px;color:var(--mut);letter-spacing:.04em;line-height:1.1}
.imler-store .lbl{line-height:1.15}
.imler-store.soon{opacity:.5;cursor:default}
.imler-store.soon:hover{border-color:var(--line);background:#0f1115}

.imler-card.ghost{
  border-style:dashed;background:transparent;align-items:center;justify-content:center;
  text-align:center;color:var(--mut);min-height:200px;
}
.imler-card.ghost:hover{transform:none;background:transparent;border-color:var(--line)}
.imler-card.ghost .plus{font-size:30px;margin-bottom:10px;color:var(--glow)}

.imler-footer{border-top:1px solid var(--line);padding:32px 0;color:var(--mut);font-size:14px}
.imler-footer a{color:var(--ink);text-decoration:none}
.imler-footer .imler-wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media(max-width:560px){.imler-header{padding:56px 0 40px}}
@media(prefers-reduced-motion:reduce){.imler-page *{transition:none!important}}
.imler-page :focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}