/* MyAppAI App Store — cinematic live UI */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg:#03060c;
  --panel:rgba(10,16,28,.72);
  --panel-strong:rgba(12,20,36,.88);
  --text:#f4f7ff;
  --muted:#9db0cc;
  --accent:#5ef0c8;
  --accent2:#6b8cff;
  --gold:#ffd56a;
  --line:rgba(255,255,255,.10);
  --shadow:0 28px 90px rgba(0,0,0,.45);
  --max:1200px;
  --beat:0.12;
  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:'Sora',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:#03060c;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%;display:block}

/* Live wallpapers — page, header, footer */
.live-wallpaper{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 50% at 15% 10%, rgba(94,240,200,calc(.12 + var(--beat)*.2)), transparent 55%),
    radial-gradient(ellipse 70% 45% at 85% 20%, rgba(107,140,255,calc(.14 + var(--beat)*.15)), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,213,106,calc(.06 + var(--beat)*.1)), transparent 55%),
    linear-gradient(180deg,#050a14 0%,#03060c 55%,#010308 100%);
}
.live-wallpaper span{
  position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;
  animation:orbDrift calc(12s - var(--beat)*4s) ease-in-out infinite alternate;
}
.live-wallpaper span:nth-child(1){width:42vw;height:42vw;left:-10%;top:-15%;background:rgba(94,240,200,.18)}
.live-wallpaper span:nth-child(2){width:36vw;height:36vw;right:-8%;top:10%;background:rgba(107,140,255,.2);animation-delay:-3s}
.live-wallpaper span:nth-child(3){width:28vw;height:28vw;left:30%;bottom:-12%;background:rgba(255,213,106,.12);animation-delay:-6s}
.live-wallpaper span:nth-child(4){width:22vw;height:22vw;right:20%;bottom:15%;background:rgba(255,90,140,.1);animation-delay:-9s}
.live-wallpaper .grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 75%);
  opacity:.4;
}
@keyframes orbDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(3%,-4%,0) scale(calc(1.05 + var(--beat)*.15))}
}

.site-header,.site-footer,.page-shell,.music-dock{position:relative;z-index:2}

.header-wallpaper,.footer-wallpaper{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit;
}
.header-wallpaper span,.footer-wallpaper span{
  position:absolute;border-radius:50%;filter:blur(36px);opacity:.5;
  animation:orbDrift 9s ease-in-out infinite alternate;
}
.header-wallpaper span:nth-child(1){width:50%;height:120%;left:-10%;top:-40%;background:rgba(94,240,200,.2)}
.header-wallpaper span:nth-child(2){width:40%;height:100%;right:-5%;top:-20%;background:rgba(107,140,255,.22);animation-delay:-2s}
.footer-wallpaper span:nth-child(1){width:45%;height:140%;left:5%;bottom:-50%;background:rgba(255,213,106,.14)}
.footer-wallpaper span:nth-child(2){width:40%;height:120%;right:0;top:-30%;background:rgba(94,240,200,.12);animation-delay:-4s}

.site-header{padding:16px 0 8px}
.page-shell{width:min(var(--max),calc(100vw - 28px));margin:0 auto;padding-bottom:88px}
.header-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:28px;
  background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(20px);
  padding:18px 20px 16px;
}
.brand-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#041018;
  font-family:var(--font-display);font-weight:900;font-size:14px;letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(94,240,200,.25);
}
.brand-copy strong{display:block;font-family:var(--font-display);font-size:1.35rem;letter-spacing:-.02em}
.brand-copy span{color:var(--muted);font-size:.82rem}
.topbar{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.topbar a{
  padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);font-size:.86rem;font-weight:600;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.topbar a:hover,.topbar a.is-active{transform:translateY(-2px);background:rgba(94,240,200,.14);border-color:rgba(94,240,200,.35)}

.hero{
  position:relative;margin-top:20px;padding:clamp(28px,5vw,48px);
  border-radius:32px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(145deg,rgba(94,240,200,.1),rgba(107,140,255,.08) 40%,rgba(8,12,22,.9));
  box-shadow:var(--shadow);
}
.hero-kicker{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid rgba(94,240,200,.35);background:rgba(94,240,200,.1);color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.02;letter-spacing:-.03em;margin:14px 0 12px;max-width:16ch}
.hero p{color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:52ch;margin:0 0 20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 20px;border-radius:999px;border:1px solid transparent;
  font-weight:800;letter-spacing:.02em;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#041018;box-shadow:0 14px 36px rgba(94,240,200,.22)}
.btn-secondary{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--text)}
.btn-buy{background:linear-gradient(135deg,var(--gold),#ff9f43);color:#1a1005;box-shadow:0 12px 32px rgba(255,180,60,.28)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}

.section{margin-top:28px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.section-head h2{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,1.9rem);margin:0;letter-spacing:-.02em}
.section-head p{margin:0;color:var(--muted);max-width:42ch;line-height:1.5}

.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.app-card{
  position:relative;display:grid;gap:12px;padding:20px;border-radius:24px;
  border:1px solid var(--line);background:var(--panel-strong);box-shadow:var(--shadow);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.app-card:hover{transform:translateY(-4px);border-color:rgba(94,240,200,.35);box-shadow:0 28px 70px rgba(0,0,0,.5)}
.app-badge{position:absolute;top:14px;right:14px;padding:4px 10px;border-radius:999px;background:rgba(255,213,106,.15);border:1px solid rgba(255,213,106,.4);color:var(--gold);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.app-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(145deg,rgba(94,240,200,.15),rgba(107,140,255,.12));border:1px solid var(--line)}
.app-cat{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.app-card h3{font-family:var(--font-display);font-size:1.25rem;margin:0}
.app-card .tagline{color:var(--muted);font-size:.92rem;line-height:1.45;margin:0}
.app-price{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--text)}
.app-price small{font-size:.75rem;font-weight:600;color:var(--muted);margin-left:6px}
.app-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

.product-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-top:20px;align-items:start}
.product-hero > *{min-width:0}
.product-panel,.content-panel,.policy-panel,.article-card,.ad-slot{
  border:1px solid var(--line);border-radius:24px;background:var(--panel-strong);box-shadow:var(--shadow);padding:22px;max-width:100%;
}
.product-panel h1{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.6rem);margin:8px 0 10px;letter-spacing:-.02em}
.feature-list{margin:14px 0 0;padding:0 0 0 1.1rem;color:var(--muted);line-height:1.7}
.price-box{margin:18px 0;padding:16px;border-radius:18px;border:1px solid rgba(255,213,106,.3);background:rgba(255,213,106,.08)}
.price-box strong{font-family:var(--font-display);font-size:2rem}

.blog-grid{display:grid;gap:14px}
.article-card h3{font-family:var(--font-display);margin:8px 0;font-size:1.15rem}
.article-card p{color:var(--muted);line-height:1.6;margin:0 0 12px}
.meta{font-size:.78rem;color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.ad-slot{text-align:center;padding:18px;margin:22px 0;min-height:100px;background:rgba(255,255,255,.03)}
.ad-slot .ad-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

.site-footer{width:min(var(--max),calc(100vw - 28px));margin:0 auto 24px}
.footer-card{
  position:relative;overflow:hidden;padding:24px;border-radius:28px;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);
}
.footer-inner{position:relative;z-index:1;display:grid;gap:12px}
.footer-inner p{margin:0;color:var(--muted);line-height:1.6;max-width:60ch}
.footer-links{display:flex;flex-wrap:wrap;gap:10px}
.footer-links a{padding:8px 12px;border-radius:999px;border:1px solid var(--line);font-size:.82rem;font-weight:600;background:rgba(255,255,255,.04)}
.footer-links a:hover{border-color:rgba(94,240,200,.35)}

/* Music dock */
.music-dock{
  position:fixed;right:16px;bottom:16px;z-index:50;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px 10px 14px;border-radius:999px;
  border:1px solid rgba(94,240,200,.3);
  background:rgba(6,10,18,.9);backdrop-filter:blur(16px);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.music-dock strong{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.music-dock button{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.06);
  color:var(--text);border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer;font-size:.8rem;
}
.music-dock button:hover{background:rgba(94,240,200,.15)}
.eq{display:flex;align-items:end;gap:3px;height:18px}
.eq i{display:block;width:3px;border-radius:2px;background:var(--accent);animation:eq 1s ease-in-out infinite alternate}
.eq i:nth-child(1){height:40%;animation-delay:0s}
.eq i:nth-child(2){height:80%;animation-delay:.15s}
.eq i:nth-child(3){height:55%;animation-delay:.3s}
.eq i:nth-child(4){height:90%;animation-delay:.1s}
.eq.paused i{animation:none;height:20%;opacity:.4}
@keyframes eq{from{transform:scaleY(.45)}to{transform:scaleY(1)}}

.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:22px}
.trust-item{padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.trust-item strong{display:block;font-family:var(--font-display);margin-bottom:4px}
.trust-item span{color:var(--muted);font-size:.88rem;line-height:1.4}

@media (max-width:900px){
  .product-hero{grid-template-columns:1fr}
  .music-dock{left:12px;right:12px;justify-content:space-between}
}
@media (max-width:520px){
  .page-shell,.site-footer{width:min(var(--max),calc(100vw - 20px))}
  .product-panel,.content-panel,.policy-panel,.article-card,.ad-slot{padding:18px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .live-wallpaper span,.header-wallpaper span,.footer-wallpaper span,.eq i,.visual-frame{animation:none!important}
}