:root{
  --bg-dark:#1E1E1E;
  --magenta:#FF00FF;
  --cyan:#00FFFF;
  --green:#00FF00;
  --soft-magenta:#FF5FFF;
  --soft-cyan:#5FFFFF;
  --ai-blue:#4A90E2;
  --ai-purple:#8B5CF6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-padding-top:80px}
body{background:var(--bg-dark);color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6}
.container{width:min(1120px,92%);margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(30,30,30,0.85);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;font-weight:800}
.brand img{width:52px;height:52px;border-radius:22%}
.brand .brand-title{font-size:28px;letter-spacing:0.2px}
.site-nav{display:flex;gap:18px;align-items:center}
.site-nav a{color:#fff;text-decoration:none;opacity:.9}
.site-nav a:hover{opacity:1}
.menu-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px}
@media (max-width: 800px){
  .site-nav{display:none;position:absolute;right:16px;top:56px;flex-direction:column;background:#121212;border:1px solid rgba(255,255,255,0.12);padding:12px 10px;border-radius:12px}
  .menu-toggle{display:block}
}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--magenta),var(--cyan));color:#111;box-shadow:0 10px 30px rgba(255,0,255,.25),0 6px 18px rgba(0,255,255,.2)}
/* Hide/resize Gumroad elements in button */
.gumroad-button svg,
.gumroad-button img,
.gumroad-button .logo,
.gumroad-button [class*="logo"],
.gumroad-button [class*="icon"]{display:none !important}
.gumroad-button::before{display:none !important}
.gumroad-button{position:relative;font-size:16px !important}
/* Target Gumroad overlay button specifically */
.gumroad-overlay-iframe .gumroad-button{padding:12px 18px !important}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff}
.btn-small{padding:8px 12px;font-size:14px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)}
.vapor-hero{background:linear-gradient(135deg,var(--magenta),var(--cyan));padding:80px 0}
.hero-inner{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.hero h1{font-size:48px;line-height:1.08;margin:0}
@media (max-width: 720px){.hero h1{font-size:32px}}
.dynamic-word{
  display:inline;
  color:#fff;
  transition:opacity 0.3s ease;
}
.subtitle{opacity:.95;max-width:760px}
.cta{display:flex;gap:12px;margin-top:8px}
.badges{list-style:none;display:flex;gap:10px;padding:0;margin:16px 0 0 0;flex-wrap:wrap}
.badges li{font-size:14px;opacity:.95;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px}
.section{padding:56px 0}
.section-title{font-size:28px;margin:0 0 18px 0;color:var(--magenta)}
.grid{display:grid;gap:16px}
.two-col{grid-template-columns: repeat(2,minmax(0,1fr))}
@media (max-width: 900px){.two-col{grid-template-columns:1fr}}
.features-grid{grid-template-columns: repeat(3,minmax(0,1fr))}
@media (max-width: 1200px){.features-grid{grid-template-columns: repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.features-grid{grid-template-columns: 1fr}}
.neon-card{background:rgba(255,255,255,0.06);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:18px;transition:all 0.3s ease}
.neon-card:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,0,255,0.3);box-shadow:0 8px 32px rgba(255,0,255,0.15)}
.neon-card h3{margin:0 0 8px 0}
.center{text-align:center}
.code{background:#111;border:1px solid rgba(255,255,255,0.12);padding:12px;border-radius:10px;overflow:auto}
.hint{font-size:14px;opacity:.85}
.faq details{margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;background:#141414}
.footer-inner{display:flex;justify-content:space-between;align-items:center;opacity:.9}

/* Terminal Graphics */
.terminal-demo{background:#0d1117;border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:20px;font-family:'SF Mono',Monaco,Inconsolata,'Roboto Mono',Consolas,'Courier New',monospace;color:#c9d1d9;position:relative;overflow:hidden}
.terminal-demo::before{content:"";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(90deg,#ff5f56,#ffbd2e,#27ca3f);border-radius:12px 12px 0 0;opacity:0.8}
.terminal-demo::after{content:"● ● ●";position:absolute;top:8px;left:12px;font-size:12px;color:#fff;opacity:0.6}
.terminal-content{margin-top:30px;line-height:1.6}
.terminal-prompt{color:var(--green);font-weight:bold}
.terminal-command{color:var(--cyan);font-weight:bold}
.terminal-output{color:#8b949e;margin:8px 0}
.terminal-success{color:var(--green)}
.terminal-error{color:#ff6b6b}
.terminal-highlight{color:var(--soft-magenta);font-weight:bold}
.terminal-box{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:16px;margin:16px 0}

/* CLI Commands Grid */
.cli-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:24px 0}
.cli-command{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:16px}
.cli-command h4{margin:0 0 8px 0;color:var(--cyan);font-family:'SF Mono',Monaco,monospace}
.cli-command p{margin:0;font-size:14px;opacity:0.8}
.cli-command code{background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:13px}

/* AI Workflow Section */
.ai-workflow-section{background:linear-gradient(135deg,rgba(255,0,255,0.08),rgba(0,255,255,0.08));border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08)}
.workflow-demo{display:flex;align-items:center;justify-content:center;gap:20px;margin:32px 0;flex-wrap:wrap}
.workflow-step{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:120px}
.step-number{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--magenta),var(--cyan));color:#000;display:flex;align-items:center;justify-content:center;font-weight:bold;margin-bottom:12px}
.workflow-step h3{margin:8px 0 4px 0;color:var(--soft-cyan);font-size:18px}
.workflow-step p{margin:0;font-size:14px;opacity:0.8}
.workflow-arrow{font-size:24px;color:var(--magenta);font-weight:bold}
.workflow-result{text-align:center;margin-top:32px;padding:24px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px}
.workflow-result h3{margin:0;color:var(--green);font-size:20px}
@media (max-width: 800px){
  .workflow-demo{flex-direction:column;gap:16px}
  .workflow-arrow{transform:rotate(90deg)}
}

/* Seamless Screenshot Showcase - Pure Vaporwave Integration */
.gui-showcase{position:relative;overflow:hidden;padding:40px 0}
.screenshot-viewer{position:relative;max-width:1200px;margin:0 auto}
.swiper{position:relative;max-width:1200px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(255,0,255,0.2),0 8px 24px rgba(0,255,255,0.15);padding-bottom:40px}
.swiper .swiper-slide{display:flex;align-items:center;justify-content:center;background:#000;aspect-ratio: 1280 / 756}
.swiper .swiper-slide img{width:100%;height:100%;object-fit:contain;border-radius:0}
.swiper-settings{background:#000 !important}
.swiper-settings .swiper-slide{display:flex !important;align-items:center !important;justify-content:center !important;background:#000 !important;aspect-ratio:auto !important;min-height:unset !important;padding:10px 0 !important}
.swiper-settings .swiper-slide img{object-fit:contain !important;width:100% !important;height:auto !important;max-width:100% !important;max-height:unset !important}

/* Settings screenshots are mostly window-cropped; use tighter aspect ratio */
.screenshot-display.auto-aspect{
  aspect-ratio: 16 / 10;
}

/* Swiper pagination dots - make visible on dark backgrounds */
.swiper-pagination{
  bottom: 10px !important;
  z-index: 10 !important;
}
.swiper-pagination-bullet{
  background: rgba(255,255,255,0.8) !important;
  opacity: 0.7 !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
.swiper-pagination-bullet-active{
  background: var(--magenta) !important;
  opacity: 1 !important;
  transform: scale(1.3) !important;
  border-color: var(--magenta) !important;
}

.screenshot-display img{
.screenshot-display img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  /* Avoid transform/layout shifts; fade only */
  transition:opacity 0.5s ease;
  border-radius:16px;
  cursor:default;
  opacity:0;
  will-change: opacity;
}

/* Settings carousel uses tighter aspect and covers to reduce outer bars */
.screenshot-display.auto-aspect img{
  object-fit:cover;
}
.screenshot-display img.active{opacity:1}
.screenshot-nav{display:flex;gap:12px;justify-content:center;margin-top:32px}
.nav-dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.25);border:none;cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative}
.nav-dot::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,var(--magenta),var(--cyan));opacity:0;transition:opacity 0.4s ease;z-index:-1}
.nav-dot.active{background:rgba(255,255,255,0.9);transform:scale(1.1)}
.nav-dot.active::before{opacity:0.4}
.nav-dot:hover{background:rgba(255,255,255,0.7);transform:scale(1.15)}
.nav-dot:hover::before{opacity:0.2}

/* Carousel arrows */
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.22);color:#fff;width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);z-index:2}
.carousel-arrow:hover{background:rgba(0,0,0,0.5)}
.carousel-arrow.left{left:8px}
.carousel-arrow.right{right:8px}