:root{
  --bg:#080e1b;
  --panel:#0d192a;
  --raised:#10243a;
  --border:#1d3654;
  --accent:#56c8ff;
  --blue:#218bcc;
  --text:#eaf5ff;
  --muted:#9ab1cb;
  --dim:#64809e;
  --radius:14px;
  --shadow:0 18px 55px #0004
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:radial-gradient(ellipse at 70% -10%,#12304a 0,transparent 42%),var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  line-height:1.65;
  min-height:100vh
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  background-image:linear-gradient(#56c8ff08 1px,transparent 1px),linear-gradient(90deg,#56c8ff08 1px,transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
  z-index:-1
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit
}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px clamp(16px,4vw,58px);
  background:#080e1beF;
  border-bottom:1px solid #56c8ff25;
  backdrop-filter:blur(16px)
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font:700 .94rem Orbitron,sans-serif;
  letter-spacing:.04em;
  white-space:nowrap
}
.brand small{
  display:block;
  font:10px 'Share Tech Mono',monospace;
  color:var(--muted);
  letter-spacing:.12em;
  margin-top:3px
}
.brand-mark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--accent);
  color:var(--accent);
  border-radius:8px;
  box-shadow:0 0 20px #56c8ff22
}
.main-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  justify-content:flex-end
}
.nav-link{
  padding:8px 10px;
  border-radius:7px;
  color:var(--muted);
  font-size:.78rem;
  transition:.2s
}
.nav-link:hover,.nav-link.active{
  background:#56c8ff12;
  color:var(--accent)
}
.nav-link.active{
  box-shadow:inset 0 -2px var(--accent)
}
.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  color:var(--accent);
  padding:7px 11px;
  border-radius:7px
}
.site-main{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
  padding:34px 0 70px
}
.eyebrow,.overline{
  font:12px 'Share Tech Mono',monospace;
  letter-spacing:.13em;
  color:var(--accent)
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 15px
}
.pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5de6a7;
  box-shadow:0 0 12px #5de6a777;
  display:inline-block;
  flex-shrink:0
}
.panel{
  background:linear-gradient(135deg,#0e1c2eF5,#0b1524F5);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(230px,.7fr);
  gap:30px;
  padding:clamp(24px,5vw,56px);
  position:relative;
  overflow:hidden
}
.hero:after{
  content:"";
  position:absolute;
  width:330px;
  height:330px;
  border-radius:50%;
  border:1px solid #56c8ff17;
  right:-100px;
  top:-170px;
  box-shadow:0 0 0 30px #56c8ff05,0 0 0 60px #56c8ff03;
  pointer-events:none
}
.overline{
  margin:0 0 17px
}
.overline span{
  color:#567796
}
.hero h1{
  font:700 clamp(2.2rem,5.4vw,4.6rem)/1.12 Orbitron,sans-serif;
  letter-spacing:-.045em;
  margin:0;
  max-width:850px
}
.hero-subtitle{
  max-width:680px;
  color:var(--muted);
  font-size:1.02rem;
  margin:20px 0 0
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px
}
.button{
  display:inline-flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:8px;
  border:1px solid var(--border);
  font-weight:600;
  font-size:.85rem;
  transition:.2s
}
.button-primary{
  background:var(--blue);
  border-color:#56c8ff66;
  color:white
}
.button-primary:hover{
  background:#31a3e7;
  transform:translateY(-2px)
}
.button-ghost{
  background:#0a1726;
  color:#c4d9ee
}
.button-ghost:hover{
  border-color:var(--accent);
  color:var(--accent)
}
.hero-side{
  align-self:center;
  position:relative;
  z-index:1
}
.terminal-mini{
  border:1px solid #56c8ff44;
  border-radius:10px;
  background:#07111e;
  overflow:hidden;
  transform:rotate(1deg)
}
.terminal-mini-head{
  display:flex;
  gap:6px;
  align-items:center;
  padding:11px;
  border-bottom:1px solid #56c8ff25;
  color:#ff6977;
  font-size:9px
}
.terminal-mini-head span:nth-child(2){
  color:#ffd166
}
.terminal-mini-head span:nth-child(3){
  color:#5de6a7
}
.terminal-mini-head b{
  margin-left:auto;
  font:10px 'Share Tech Mono';
  color:#87a8c6
}
.terminal-mini-body{
  padding:17px;
  font:11px 'Share Tech Mono',monospace
}
.terminal-mini-body p{
  display:flex;
  gap:10px;
  color:var(--muted);
  margin:0 0 13px
}
.terminal-mini-body i{
  color:#527492;
  font-style:normal
}
.terminal-mini-body strong{
  margin-left:auto;
  color:var(--accent);
  font-weight:400
}
.mini-meter{
  height:5px;
  background:#172b40;
  border-radius:99px;
  margin:18px 0 10px;
  overflow:hidden
}
.mini-meter span{
  display:block;
  width:78%;
  height:100%;
  background:linear-gradient(90deg,#218bcc,#56c8ff)
}
.terminal-mini-body small{
  color:#6583a0
}
.section{
  margin-top:30px
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:16px
}
.section-kicker{
  font:11px 'Share Tech Mono',monospace;
  color:var(--accent);
  letter-spacing:.12em
}
.section h2{
  font:600 clamp(1.3rem,3vw,2rem) Orbitron,sans-serif;
  margin:4px 0 0
}
.section-head p{
  color:var(--muted);
  max-width:520px;
  margin:0;
  font-size:.9rem
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  min-width:0;
  transition:transform .2s,border-color .2s,box-shadow .2s
}
.card:hover{
  transform:translateY(-3px);
  border-color:#56c8ff88;
  box-shadow:0 10px 28px #0003
}
.card-body{
  padding:16px
}
.card h3{
  font-size:1rem;
  margin:0 0 7px
}
.card p{
  color:var(--muted);
  font-size:.86rem;
  margin:0
}
.card-meta{
  font:10px 'Share Tech Mono',monospace;
  letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:7px
}
.image-slot{
  aspect-ratio:16/10;
  position:relative;
  display:grid;
  place-items:center;
  background:repeating-linear-gradient(135deg,#0e2032,#0e2032 12px,#10243a 12px,#10243a 24px);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  color:#83a8c8;
  text-align:center;
  padding:12px
}
.image-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  display:block;
  transition:transform .25s
}
.card:hover .image-slot img{
  transform:scale(1.035)
}
.image-slot.no-image{
  border:1px dashed #3b6687;
  margin:10px;
  border-radius:8px;
  aspect-ratio:16/9
}
.slot-label{
  position:relative;
  z-index:1;
  background:#08111edc;
  border:1px dashed #4a7392;
  padding:9px 12px;
  border-radius:6px;
  font:10px 'Share Tech Mono',monospace;
  letter-spacing:.1em
}
.image-slot img:not([src=""])+.slot-label{
  display:none
}
.image-slot.no-image .slot-label{
  display:block
}
.pill-row{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:13px
}
.pill{
  border:1px solid #2b4b68;
  background:#102238;
  border-radius:999px;
  padding:4px 9px;
  font-size:.72rem;
  color:#b9d5ec
}
.split-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.info-card{
  padding:22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px
}
.info-card .symbol{
  font:26px Orbitron;
  color:var(--accent)
}
.info-card h3{
  margin:8px 0
}
.info-card p{
  margin:0;
  color:var(--muted);
  font-size:.9rem
}
.filter-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0
}
.filter-btn{
  border:1px solid var(--border);
  background:#0b1727;
  color:var(--muted);
  padding:8px 12px;
  border-radius:7px;
  cursor:pointer;
  font-size:.8rem
}
.filter-btn:hover,.filter-btn.active{
  color:var(--accent);
  border-color:var(--accent);
  background:#56c8ff12
}
.empty-note{
  padding:35px;
  border:1px dashed #31516f;
  border-radius:12px;
  text-align:center;
  color:var(--muted)
}
.step-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  counter-reset:steps
}
.step{
  padding:22px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  counter-increment:steps
}
.step-number{
  font:12px 'Share Tech Mono';
  color:var(--accent)
}
.step h3{
  margin:8px 0
}
.step p{
  margin:0;
  color:var(--muted);
  font-size:.9rem
}
.price{
  font:600 1.35rem Orbitron;
  color:var(--text);
  margin:13px 0 4px
}
.price-note{
  font-size:.78rem;
  color:var(--dim)
}
.payment-bar{
  display:flex;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:#20384e;
  margin:17px 0
}
.payment-bar span:first-child{
  width:30%;
  background:#56c8ff
}
.payment-bar span:last-child{
  width:70%;
  background:#218bcc
}
.faq-list{
  display:grid;
  gap:10px
}
.faq-list details{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:9px;
  padding:15px 17px
}
.faq-list summary{
  cursor:pointer;
  font-weight:600
}
.faq-list details p{
  color:var(--muted);
  margin:10px 0 0;
  font-size:.9rem
}
.contact-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:25px;
  background:linear-gradient(100deg,#10243a,#0b1929);
  border:1px solid #315778;
  border-radius:12px
}
.contact-banner h2{
  margin:0;
  font:600 1.3rem Orbitron
}
.contact-banner p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.88rem
}
.site-footer{
  border-top:1px solid #56c8ff22;
  padding:25px clamp(16px,4vw,58px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:#070d17
}
.site-footer>div:first-child{
  display:flex;
  gap:12px;
  align-items:center;
  font:11px 'Share Tech Mono';
  color:var(--accent)
}
.site-footer>div:first-child span{
  color:var(--dim)
}
.footer-status,.view-counter{
  font:10px 'Share Tech Mono';
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}
.view-counter strong{
  color:var(--accent)
}
.lightbox{
  position:fixed;
  inset:0;
  background:#020711ed;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:55px 22px
}
.lightbox.open{
  display:flex
}
.lightbox figure{
  margin:0;
  max-width:min(1100px,85vw);
  max-height:85vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px
}
.lightbox img{
  max-width:100%;
  max-height:75vh;
  object-fit:contain;
  border:1px solid #56c8ff55;
  border-radius:8px
}
.lightbox figcaption{
  color:var(--muted);
  text-align:center;
  font-size:.85rem
}
.lightbox button{
  position:absolute;
  background:#0d1c2c;
  border:1px solid #315778;
  color:var(--accent);
  font-size:28px;
  width:44px;
  height:44px;
  border-radius:8px;
  cursor:pointer
}
.lightbox-close{
  top:20px;
  right:20px
}
.lightbox-prev{
  left:20px;
  top:50%
}
.lightbox-next{
  right:20px;
  top:50%
}
.note{
  color:var(--muted);
  font-size:.8rem;
  margin-top:13px
}
.text-link{
  color:var(--accent);
  font-weight:600
}
.text-link:hover{
  text-decoration:underline
}
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}
.tagline{
  font-size:1.05rem;
  color:#d5e7f8
}
.avatar-row{
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:22px
}
.avatar{
  width:68px;
  height:68px;
  border-radius:50%;
  border:1px solid var(--accent);
  object-fit:cover;
  background:#10243a
}
.avatar-row small{
  display:block;
  color:var(--muted)
}
@media(max-width:1020px){
  .main-nav{
    gap:0
  }
  .nav-link{
    font-size:.7rem;
    padding:7px
  }
  .hero{
    grid-template-columns:1fr .65fr
  }
  .card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  }
@media(max-width:780px){
  .site-header{
    padding:12px 17px
  }
  .menu-toggle{
    display:block
  }
  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#08111ef7;
    border-bottom:1px solid var(--border);
    padding:12px;
    align-items:stretch;
    flex-direction:column
  }
  .main-nav.open{
    display:flex
  }
  .nav-link{
    text-align:left;
    padding:11px 13px;
    font-size:.82rem
  }
  .site-main{
    width:min(100% - 26px,680px);
    padding-top:23px
  }
  .hero{
    grid-template-columns:1fr;
    padding:25px
  }
  .hero-side{
    max-width:380px;
    width:100%;
    margin:0 auto
  }
  .hero h1{
    font-size:clamp(2rem,9vw,3.3rem)
  }
  .section-head{
    align-items:start;
    flex-direction:column
  }
  .price-grid{
    grid-template-columns:1fr
  }
  .contact-banner{
    align-items:flex-start;
    flex-direction:column
  }
  .site-footer{
    align-items:flex-start;
    flex-direction:column
  }
  .card-grid{
    gap:11px
  }
  .card-body{
    padding:13px
  }
  }
@media(max-width:480px){
  .card-grid,.split-grid,.step-list{
    grid-template-columns:1fr
  }
  .hero-actions .button{
    width:100%
  }
  .image-slot{
    aspect-ratio:16/9
  }
  .lightbox-prev{
    left:7px
  }
  .lightbox-next{
    right:7px
  }
  .lightbox figure{
    max-width:100%
  }
  .site-footer>div:first-child{
    flex-wrap:wrap
  }
  }