:root{
  --bg:#07080b;
  --text:#eef1fb;
  --muted:#a7afc8;
  --muted2:#8f97b1;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.13);
  --glowA:rgba(120,150,255,.22);
  --glowB:rgba(255,120,210,.14);
  --glowC:rgba(70,240,200,.12);
  --shadow2: 0 10px 40px rgba(0,0,0,.35);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .1px;
}
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.bg__glow{position:absolute; filter: blur(40px); opacity:.9; transform: translateZ(0)}
.bg__glow--a{width:820px;height:560px; left:-180px; top:-220px; background: radial-gradient(circle at 30% 30%, var(--glowA), transparent 60%)}
.bg__glow--b{width:820px;height:560px; right:-260px; top:-140px; background: radial-gradient(circle at 40% 40%, var(--glowB), transparent 60%)}
.bg__glow--c{width:880px;height:640px; left:20%; bottom:-420px; background: radial-gradient(circle at 40% 40%, var(--glowC), transparent 60%)}
.bg__noise{
  position:absolute; inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.09;
  mix-blend-mode: overlay;
  transform: rotate(8deg);
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1100px; margin:0 auto; padding:0 22px}
.top{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(16px);
  background: rgba(7,8,11,.62);
  border-bottom:1px solid var(--line);
}
.top__inner{display:flex; align-items:center; justify-content:space-between; height:68px;}
.brand{display:flex; align-items:baseline; gap:10px}
.brand__dot{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, rgba(120,150,255,1), rgba(255,120,210,1));
  box-shadow: 0 0 0 7px rgba(120,150,255,.08);
}
.brand__name{font-weight:750; letter-spacing:.2px}
.brand__sub{color:var(--muted); font-size:13px; padding-left:6px}
.nav{display:flex; align-items:center; gap:16px; color:var(--muted)}
.nav a{padding:10px 10px; border-radius:12px}
.nav a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{background: rgba(255,255,255,.10); transform: translateY(-1px)}
.btn--ghost{background: transparent}
.btn--small{padding:10px 12px; border-radius:12px}
.hero{padding:64px 0 18px}
.hero__inner{display:grid; grid-template-columns: 1.25fr .75fr; gap:18px; align-items:start;}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(255,255,255,.03);
  color:var(--muted);
  width:fit-content;
}
.kicker__dot{
  width:8px; height:8px; border-radius:50%;
  background: rgba(70,240,200,.95);
  box-shadow: 0 0 0 6px rgba(70,240,200,.08);
}
h1{font-size:46px; line-height:1.07; margin:14px 0 12px; letter-spacing:-.8px;}
.sub{color:var(--muted); max-width:62ch; font-size:16px}
.cta{display:flex; gap:12px; margin:18px 0 18px; flex-wrap:wrap}
.meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.pill{
  padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.03); color:var(--muted);
}
.signal{
  margin-top:18px; border:1px solid var(--line); border-radius: var(--radius);
  background: rgba(255,255,255,.02); padding:14px 16px;
}
.signal__row{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid rgba(255,255,255,.06)}
.signal__row:first-child{border-top:none}
.signal__label{color:var(--muted2); font-size:13px}
.signal__value{color:var(--text); font-size:13px}
.panel{border-radius: var(--radius); border:1px solid var(--line); padding:16px; box-shadow: var(--shadow2);}
.panel--glass{background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));}
.panel--plain{margin-top:14px; background: rgba(255,255,255,.03); position: relative;}
.panel__cap{color:var(--muted2); font-size:13px}
.panel__title{font-size:18px; font-weight:780; margin:8px 0 8px; letter-spacing:-.2px}
.panel__desc{color:var(--muted); margin-bottom:12px}
.panel__chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.chip{
  font-size:12px; color:var(--muted); padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
}
.panel__actions{display:flex; gap:10px; flex-wrap:wrap}
.list{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.list li{margin:6px 0}
.section{padding:54px 0}
.section--alt{background: rgba(255,255,255,.02); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px;}
h2{margin:0; font-size:22px; letter-spacing:-.2px}
.section__hint{color:var(--muted); font-size:14px}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.pack{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius: var(--radius); padding:16px;
  box-shadow: var(--shadow2);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.pack:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));}
.pack__top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.pack__title{font-weight:780; letter-spacing:-.2px; margin-bottom:6px}
.pack__badge{
  font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; background: rgba(255,255,255,.03); white-space:nowrap;
}
.pack__desc{color:var(--muted); margin:0 0 12px; min-height:44px}
.pack__tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.tag{
  font-size:12px; color:var(--muted); padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02);
}
.pack__actions{display:flex; gap:10px; flex-wrap:wrap}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.card{background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius: var(--radius); padding:16px;}
.card__title{font-weight:760}
.card__text{color:var(--muted); margin-top:8px}
.faq{border:1px solid var(--line); border-radius: var(--radius); padding:14px 16px; margin:10px 0; background: rgba(255,255,255,.02);}
.faq summary{cursor:pointer; font-weight:700}
.faq__body{color:var(--muted); padding-top:10px}
.foot{padding:30px 0 60px; border-top:1px solid var(--line); color:var(--muted);}
.foot__inner{display:flex; justify-content:space-between; gap:16px; align-items:center}
.brandline{display:flex; align-items:center; gap:10px; color:var(--text)}
.brandline__name{font-weight:740}
.sep{opacity:.55; padding:0 8px}
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr;}
  .grid{grid-template-columns: 1fr;}
  .cards{grid-template-columns: 1fr;}
  h1{font-size:36px}
  .brand__sub{display:none}
}

/* Image Card Styles for Prompt Shop */
.pack--image {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--text);
}

.pack__media {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.pack__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pack__body {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

/* Copy Button for Prompt Panels */
.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
}
.copy-btn:hover { background: rgba(255,255,255,.1); }
.copy-btn:active { transform: scale(0.95); }