:root{
  --ink:#e6f7ff; --dim:#7f97a8; --cyan:#00f0ff; --magenta:#ff2e88; --amber:#ffb347;
  --bg:#05060a; --card:rgba(9,13,20,.88); --line:rgba(0,240,255,.26);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:
    radial-gradient(1100px 620px at 50% -12%, rgba(0,240,255,.10) 0%, transparent 62%),
    radial-gradient(900px 520px at 88% 8%, rgba(255,46,136,.08) 0%, transparent 60%),
    #05060a;
  color:var(--ink);font-family:'Share Tech Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  line-height:1.6;-webkit-font-smoothing:antialiased;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 4px);
  opacity:.35}
a{color:inherit}
.top{display:flex;align-items:center;gap:18px;padding:18px 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(5,8,13,.94),rgba(5,8,13,.72));backdrop-filter:blur(6px);
  position:relative;z-index:10}
.mark{font-family:'Chakra Petch',sans-serif;font-size:17px;font-weight:600;letter-spacing:.42em;
  text-transform:uppercase;text-decoration:none;color:var(--cyan);
  text-shadow:0 0 14px rgba(0,240,255,.55)}
.top nav{margin-left:auto;display:flex;gap:22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.top nav a{text-decoration:none;color:var(--dim);border-bottom:1px solid transparent;padding-bottom:2px}
.top nav a:hover{color:var(--magenta);border-bottom-color:var(--magenta)}
main{max-width:1080px;margin:0 auto;padding:0 26px 80px;position:relative;z-index:10}
.hero{padding:66px 0 42px;max-width:660px}
h1,h2,h3{font-family:'Chakra Petch',sans-serif;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin:0}
.hero h1{font-size:clamp(40px,7vw,64px);line-height:1.02;margin:0 0 16px;color:#fff;
  text-shadow:0 0 22px rgba(0,240,255,.45), 3px 0 0 rgba(255,46,136,.35)}
.hero p{color:var(--dim);font-size:17px;margin:0}
.shelf{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.shelf li{display:flex}
.card{flex:1;display:flex;gap:16px;padding:18px;background:var(--card);
  border:1px solid var(--line);text-decoration:none;position:relative;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.card:hover{border-color:rgba(255,46,136,.65);transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,46,136,.25), 0 18px 40px rgba(0,0,0,.6)}
.card>div{display:flex;flex-direction:column;min-width:0}
.card img{width:56px;height:56px;flex:none;border:1px solid var(--line);border-radius:12px;filter:saturate(1.05) contrast(1.05)}
.card h2{font-size:19px;margin:0 0 6px;color:#fff;letter-spacing:.06em}
.card p{margin:0;font-size:15px;color:var(--dim)}
.card .p{margin-top:auto;padding-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.bundle{margin-top:46px;padding:28px;background:linear-gradient(160deg,rgba(20,6,16,.85),rgba(6,10,16,.9));
  border:1px solid rgba(255,46,136,.4);display:grid;gap:22px;align-items:center;
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  box-shadow:inset 0 0 40px rgba(255,46,136,.06)}
.bundle h2{font-size:32px;margin:0 0 10px;color:#fff;text-shadow:0 0 18px rgba(255,46,136,.5)}
.bundle p{margin:0 0 18px;color:var(--dim)}
.bundle-mark{display:flex;justify-content:center}
.bundle-mark img{width:176px;height:176px;border-radius:38px;border:1px solid rgba(255,179,71,.45);
  box-shadow:0 0 34px rgba(236,179,84,.28)}
@media (min-width:760px){.bundle{grid-template-columns:1fr .8fr}}
.price{display:flex;align-items:baseline;gap:12px;margin:0 0 20px;flex-wrap:wrap}
.price b{font-family:'Chakra Petch',sans-serif;font-size:38px;font-weight:600;color:#fff;
  text-shadow:0 0 18px rgba(0,240,255,.5);letter-spacing:.02em}
.price s{color:var(--dim);font-size:16px}
.price span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.buy{display:inline-block;white-space:nowrap;padding:14px 28px;text-decoration:none;
  font-family:'Chakra Petch',sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#04121a;background:var(--cyan);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:0 0 26px rgba(0,240,255,.45);transition:background .16s ease,box-shadow .16s ease,color .16s ease}
.buy:hover{background:var(--magenta);color:#12000a;box-shadow:0 0 30px rgba(255,46,136,.55)}
.app{padding-top:46px}
.head{display:flex;gap:22px;align-items:center;margin-bottom:26px}
.head img{width:96px;height:96px;border-radius:20px;border:1px solid var(--line);box-shadow:0 0 30px rgba(0,240,255,.18)}
.head h1{margin:0 0 8px;font-size:clamp(34px,5vw,48px);color:#fff;
  text-shadow:0 0 20px rgba(0,240,255,.4)}
.head .tag{margin:0;color:var(--dim);font-size:16px}
.meta{margin:10px 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.blurb{max-width:660px;color:#c3d4de;font-size:16px}
.blurb p{margin:0 0 14px}
section{margin:40px 0}
section h2{font-size:21px;letter-spacing:.14em;margin:0 0 16px;color:var(--cyan);
  text-shadow:0 0 14px rgba(0,240,255,.35)}
ul.feat{margin:0;padding:0;list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
ul.feat li{padding:12px 14px;border-left:2px solid var(--cyan);background:rgba(0,240,255,.05);
  font-size:15px;color:#c3d4de}
.shots{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.shots .shot{margin:0;position:relative;cursor:zoom-in}
.shots img{display:block;width:100%;border:1px solid var(--line)}
.shots .big{position:fixed;top:50%;left:50%;width:auto;height:auto;max-height:88vh;max-width:92vw;
  border:1px solid var(--line);z-index:95;pointer-events:none;box-shadow:0 30px 80px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.965);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.shots .shot::after{content:'';position:fixed;inset:0;background:rgba(3,5,9,.9);z-index:94;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s}
@media (hover:hover),(pointer:fine){
  .shot:hover::after,.shot:focus-within::after{opacity:1;visibility:visible;
    transition:opacity .3s ease .06s,visibility 0s .06s}
  .shot:hover .big,.shot:focus-within .big{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);
    transition:opacity .42s cubic-bezier(.2,.7,.3,1) .16s,transform .5s cubic-bezier(.2,.7,.3,1) .16s,visibility 0s .16s}
}
.new p{margin:0;color:var(--dim);font-size:15px}
.solo{margin-top:52px}
.solo h2{font-size:32px;margin:0 0 16px;color:#fff;text-shadow:0 0 18px rgba(255,46,136,.45)}
.solo-card{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;padding:28px;background:var(--card);
  border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px))}
.solo-card img{width:176px;height:176px;border-radius:38px;border:1px solid rgba(255,179,71,.45);grid-column:1;grid-row:1}
.solo-card h3{font-size:24px;margin:0 0 6px;color:#fff}
.solo-card a.name{color:#fff;text-decoration:none;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.solo-card a.name:hover{color:var(--magenta);border-bottom-color:rgba(255,46,136,.65)}
.solo-card a.icon{grid-column:1;grid-row:1;display:block;line-height:0}
.solo-card p{margin:0;color:var(--dim);font-size:15px}
.solo-card .price{margin:14px 0 16px;flex-wrap:wrap;gap:8px}
.solo-text{grid-column:2;grid-row:1;min-width:0}
footer{max-width:1080px;margin:0 auto;padding:30px 26px 46px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:26px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  position:relative;z-index:10}
footer a{text-decoration:none}
footer a:hover{color:var(--magenta)}
@media (max-width:760px){
  .bundle-mark{order:-1}
  .bundle-mark img{width:132px;height:132px}
}
@media (max-width:560px){
  .head{flex-direction:column;align-items:flex-start;gap:14px}
  .hero{padding:42px 0 30px}
  .top nav{display:none}
  .solo-card{grid-template-columns:1fr;gap:18px}
  .solo-card img{width:132px;height:132px;border-radius:30px;grid-column:1;grid-row:1}
  .solo-text{grid-column:1;grid-row:2;width:100%}
  .solo-card .buy{display:block;text-align:center;white-space:normal}
  .price b{font-size:32px}
}