:root{--accent:#9c1f2e;--accent-2:#ff8a70;--bg:#060202;--card:#0f0505;--muted:#9aa4b2;--accent-dark:#5c1018}
*{box-sizing:border-box}
.no-scroll-fix-html, html, body { height: auto !important; overflow: auto !important; }
.no-scroll-fix-body { touch-action: auto !important; }
.body-bg{ }
.bg-accent{background:linear-gradient(180deg,#020102 0%,#140909 100%)}
.bg-accent{background:linear-gradient(180deg,#020102 0%,#140909 100%)}
html{overflow-x:hidden}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#e6f8ff;background:radial-gradient(1200px 480px at 8% 12%, rgba(156,31,46,0.10), transparent 14%), radial-gradient(900px 360px at 92% 84%, rgba(200,40,50,0.04), transparent 12%), linear-gradient(180deg,#0a0303 0%,#020101 100%);min-height:100vh;overflow-x:hidden}
.container{max-width:1360px;margin:0 auto;padding:32px}
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(2,6,12,0.6),rgba(2,6,12,0.25));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,60,60,0.02);box-shadow:0 6px 20px rgba(2,10,20,0.6)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 32px}
.site-header h1{margin:0;font-size:18px;letter-spacing:0.6px;font-weight:800}
.site-header nav a{color:var(--muted);margin-left:18px;text-decoration:none;font-weight:700}

.site-header img.logo{height:40px;width:auto;image-rendering:pixelated}
.site-header nav{display:flex;gap:14px;align-items:center}
.site-header nav a{padding:8px 10px;border-radius:8px}
.site-header nav a:hover{background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);color:#fff}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px}
.brand .logo{height:40px;width:40px}
.site-header .brand{flex-direction:row;gap:12px;align-items:center}
.brand div{margin-left:6px;text-align:left}
.hero{display:grid;grid-template-columns:1fr 540px;gap:44px;align-items:center;padding:100px 0 72px;position:relative}
.hero::before{content:"";position:absolute;right:6%;top:10%;width:520px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(156,31,46,0.12), rgba(255,60,60,0.02) 35%, transparent 45%);filter:blur(40px);z-index:0}
.hero-inner{position:relative;z-index:2}
.hero .meta{color:var(--accent-2);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.hero h2{font-size:64px;line-height:1.02;margin:0 0 14px;font-family:Poppins,Inter,system-ui;font-weight:800}
.hero p.lead{font-size:18px;color:var(--muted);margin:0 0 18px;max-width:64ch}
.cta-row{display:flex;gap:12px;align-items:center}
.btn{display:inline-block;padding:12px 18px;background:linear-gradient(90deg,var(--accent-dark),var(--accent));color:#fff;text-decoration:none;border-radius:12px;font-weight:800;box-shadow:0 18px 40px rgba(70,45,10,0.22);border:1px solid rgba(255,60,60,0.04);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(156,31,46,0.10)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);font-weight:700}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.012),rgba(255,255,255,0.002));padding:18px;border-radius:14px;border:1px solid rgba(255,60,60,0.03);box-shadow:0 12px 36px rgba(2,10,18,0.6);backdrop-filter:blur(4px)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.feature h4{font-family:Poppins,Inter;font-weight:700}
.feature p{margin:0;color:var(--muted)}
.feature{padding:14px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
.feature h4{margin:0 0 8px}
.preview{padding:18px}
.gui-preview img{width:100%;height:auto;border-radius:8px;border:1px solid rgba(255,60,60,0.04);background:linear-gradient(180deg,rgba(3,8,12,0.6),rgba(6,12,18,0.6))}
/* overlay highlights on the GUI image */
.gui-preview{position:relative}
.gui-overlay{position:absolute;left:6%;top:46px;width:72%;max-width:620px;height:28px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity 180ms ease,transform 180ms ease,background .12s ease;box-shadow:0 6px 20px rgba(156,31,46,0.06);border:1px solid rgba(156,31,46,0.06);z-index:3}
.gui-overlay[data-key="auto"]{top:60px;left:7%;width:66%}
.gui-overlay[data-key="macro"]{top:86px;left:7%;width:62%}
.gui-overlay[data-key="greenhouse"]{top:112px;left:9%;width:58%}
.gui-overlay[data-key="predict"]{top:136px;left:10%;width:54%}
.gui-overlay[data-key="failsafe"]{top:160px;left:11%;width:50%}
.gui-overlay[data-key="fish"]{top:184px;left:12%;width:48%}
.gui-overlay[data-key="enchant"]{top:208px;left:13%;width:46%}
.gui-overlay.active{opacity:1;transform:scale(1.02);background:linear-gradient(90deg,rgba(156,31,46,0.18),rgba(180,40,50,0.04));box-shadow:0 12px 34px rgba(156,31,46,0.12);pointer-events:auto;cursor:pointer}
.gui-overlay:hover{transform:scale(1.03);box-shadow:0 18px 44px rgba(156,31,46,0.12)}
.download-cta{display:flex;align-items:center;gap:18px}
.muted{color:var(--muted)}
.site-footer{padding:36px 0;color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,0.02);margin-top:48px}
code{background:#07162a;padding:2px 6px;border-radius:4px}
img{max-width:100%;height:auto;border-radius:10px}

/* Oringo-like hero steps */
.steps{display:flex;gap:18px;margin-top:18px}
.step{background:linear-gradient(180deg,rgba(255,255,255,0.015),transparent);padding:12px;border-radius:10px;flex:1;border:1px solid rgba(255,255,255,0.02)}
.step .num{font-weight:900;color:var(--accent);font-size:20px}
.modules-banner{display:flex;align-items:center;gap:16px;padding:16px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,0.012),transparent);margin-top:18px;border:1px solid rgba(255,255,255,0.02)}
.modules-banner strong{font-size:18px}
.gui-preview{background:#06070a;border-radius:8px;padding:8px}
.modules-list{background:linear-gradient(180deg,rgba(6,16,24,0.85),rgba(4,10,18,0.85));padding:10px;border-radius:8px;color:var(--muted);font-size:13px;height:220px;overflow:auto;border:1px solid rgba(255,255,255,0.02)}
.modules-list div{padding:6px 8px;border-radius:6px}
.modules-list div:hover{background:linear-gradient(90deg,rgba(255,255,255,0.01),transparent);color:#fff}

/* Brand logo */
.brand .logo{width:40px;height:40px;display:block}
.brand div{line-height:1}
/* ensure header logo visible and crisp */
.brand .logo{border-radius:6px;background:transparent}
.brand img.logo{border-radius:6px}

/* Module GUI styles */
.module-gui{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.modules-list{background:linear-gradient(180deg,#02121a,#04182a);padding:10px;border-radius:12px;color:var(--muted);font-size:14px;height:260px;overflow:auto;border:1px solid rgba(255,60,60,0.03)}
.modules-list .item{padding:12px 14px;border-radius:8px;margin-bottom:8px;cursor:pointer;color:#cfeff6}
.modules-list .item.active{background:linear-gradient(90deg,rgba(156,31,46,0.14),rgba(180,40,50,0.04));color:#fff;font-weight:800}
.modules-list .item:hover{background:linear-gradient(90deg,rgba(156,31,46,0.08),transparent);color:#e6fbff}
/* Custom slim scrollbar for a modern look (blue theme) */
.modules-list::-webkit-scrollbar{width:10px}
.modules-list::-webkit-scrollbar-track{background:transparent;border-radius:8px}
.modules-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,60,60,0.12),rgba(156,31,46,0.12));border-radius:8px;border:2px solid rgba(0,0,0,0.2)}
.modules-list{padding-right:8px}
.module-detail{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);margin-top:6px}
.module-detail .module-title{margin:0;font-family:Poppins,Inter;font-weight:700}

/* FAQ improved */
.faq-toggle{background:#0b0f12;border-radius:6px;padding:8px 12px;border:1px solid rgba(255,255,255,0.04);cursor:pointer}
.faq-body{padding:12px 8px;color:var(--muted);max-height:0px;overflow:hidden;transition:max-height 260ms ease}

/* stronger header gradient and site background */
body{background:linear-gradient(180deg,#0d0404 0%,#030101 60%), radial-gradient(800px 320px at 10% 10%, rgba(156,31,46,0.09), transparent 10%)}

/* highlight span */
.highlight{font-family:Poppins,Inter;color:#ff8a70;font-weight:700}

/* animated page gradient */
@keyframes bgShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
body{background-image: linear-gradient(120deg, rgba(20,5,6,0.85), rgba(2,2,3,0.98)), radial-gradient(800px 320px at 10% 10%, rgba(156,31,46,0.05), transparent 10%), radial-gradient(900px 360px at 90% 80%, rgba(255,60,60,0.02), transparent 12%);background-size:200% 200%;animation:bgShift 18s linear infinite}

/* hero heading gradient text */
.hero h2{background:linear-gradient(90deg,#ff8a70 0%, #ffb08a 30%, #ff8a70 60%, #ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* layout for module GUI: two columns */
.module-gui{display:flex;gap:18px;align-items:flex-start}
.modules-list{width:44%;max-height:420px}
.module-detail{width:56%;min-height:240px;display:flex;flex-direction:column;gap:12px}
.module-detail .module-desc{color:#dff8ff}
.module-detail img#module-image{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,60,60,0.05);box-shadow:0 18px 50px rgba(2,10,20,0.7);background:linear-gradient(180deg,rgba(3,8,12,0.6),rgba(6,12,18,0.6));display:block}

/* make the module preview look like a window with a header */
.module-detail .preview-window{background:linear-gradient(180deg,rgba(8,10,12,0.98),rgba(12,14,16,0.95));border-radius:8px;padding:8px}
.module-detail .preview-window .titlebar{height:28px;border-radius:6px;background:linear-gradient(90deg,rgba(0,0,0,0.25),rgba(255,255,255,0.02));display:flex;align-items:center;padding:0 10px;font-weight:700;color:var(--muted);margin-bottom:8px}

/* make FAQ more readable */
.faq-toggle{display:block;width:100%;text-align:left;background:linear-gradient(90deg,rgba(7,20,30,0.7),transparent);border-radius:8px;padding:10px 40px 10px 14px;border:1px solid rgba(255,60,60,0.03);font-weight:700;color:#dff9ff;font-size:15px;font-family:inherit}
.faq-body{color:#cfeff6;font-size:15px;line-height:1.6}
/* FAQ chevron and open state */
.faq-toggle{position:relative}
.faq-body.muted{color:#dff8ff !important}
.faq-toggle::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);opacity:0.9;color:var(--accent-2);font-weight:900}
.faq-toggle.open{background:linear-gradient(90deg,rgba(11,40,60,0.85),transparent);box-shadow:0 6px 18px rgba(2,10,20,0.6)}
.faq-toggle.open::after{transform:translateY(-50%) rotate(180deg)}

/* emphasize module title */
.module-title{font-size:20px;background:linear-gradient(90deg,var(--accent-2),#ff5a4d);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Oringo-like inline highlighter chip */
.highlight-chip{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,60,60,0.16),rgba(156,31,46,0.08));color:var(--accent-2);font-weight:700;font-size:13px}

/* hero badge chips + stat row */
.hero .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px;margin-bottom:6px}
.stat{background:linear-gradient(180deg,rgba(255,60,60,0.03),transparent);border:1px solid rgba(255,60,60,0.05);border-radius:12px;padding:12px;text-align:center}
.stat-num{font-family:Poppins,Inter;font-weight:900;font-size:24px;color:var(--accent-2);background:linear-gradient(90deg,var(--accent-2),#ff5a4d);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== ClickGUI mock (Oringo-inspired) ===== */
.clickgui-card{padding:0;overflow:hidden}
.clickgui{background:linear-gradient(180deg,#060a10,#03060a);border-radius:14px;overflow:hidden}
.clickgui-titlebar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,rgba(156,31,46,0.14),rgba(156,31,46,0.08));border-bottom:1px solid rgba(255,60,60,0.06)}
.clickgui-title{font-family:Poppins,Inter;font-weight:900;letter-spacing:1px;color:#eafcff;font-size:14px}
.clickgui-version{font-size:12px}
.clickgui-body{display:grid;grid-template-columns:92px 1fr 1.15fr;gap:0;min-height:340px}
.clickgui-categories{background:rgba(2,6,10,0.5);border-right:1px solid rgba(255,60,60,0.05);padding:10px 6px;display:flex;flex-direction:column;gap:4px}
.clickgui-categories .cat{padding:10px 6px;border-radius:8px;text-align:center;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;writing-mode:horizontal-tb;transition:background .15s ease,color .15s ease}
.clickgui-categories .cat:hover{background:rgba(255,60,60,0.06);color:#e6fbff}
.clickgui-categories .cat.active{background:linear-gradient(90deg,rgba(156,31,46,0.22),rgba(180,40,50,0.06));color:#fff;box-shadow:inset 2px 0 0 var(--accent-2)}
.clickgui .modules-list{width:auto;max-height:none;height:auto;border-radius:0;border:none;border-right:1px solid rgba(255,60,60,0.05);background:rgba(4,10,16,0.5);padding:10px 8px}
.clickgui .modules-list .item{font-size:13px;padding:10px 10px;margin-bottom:4px}
.clickgui .module-detail{width:auto;border:none;border-radius:0;background:rgba(3,8,12,0.35);padding:16px}
.clickgui-footer{padding:10px 16px;border-top:1px solid rgba(255,60,60,0.05);font-size:12px;text-align:center}

/* settings panel controls */
.settings-panel{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#cfeff6}
.toggle{--w:38px;width:var(--w);height:20px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,60,60,0.08);position:relative;flex:0 0 auto;cursor:pointer;transition:background .15s ease}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#dfeaee;transition:transform .18s ease,background .18s ease}
.toggle.on{background:linear-gradient(90deg,var(--accent-dark),var(--accent))}
.toggle.on::after{transform:translateX(18px);background:#fff}
.slider-track{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,0.08);position:relative;cursor:pointer;margin:0 4px}
.slider-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),#ff3d3d)}
.slider-val{width:34px;text-align:right;color:var(--accent-2);font-weight:700;font-size:12px}
@media (max-width:980px){
  .clickgui-body{grid-template-columns:64px 1fr}
  .clickgui .module-detail{grid-column:1/-1;border-top:1px solid rgba(255,60,60,0.05)}
}

/* ===== glow / highlight accents (Oringo-inspired) ===== */
.glow-title .line-glow{background:linear-gradient(90deg,#ff8a70,#ff9a7a,#ff3d3d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,60,60,0.3)) drop-shadow(0 0 32px rgba(156,31,46,0.28))}

.lead .hl{color:var(--accent-2);font-weight:700}

.btn-glow{box-shadow:0 0 0 1px rgba(255,60,60,0.08),0 8px 30px rgba(156,31,46,0.35),0 0 46px rgba(255,60,60,0.18);animation:btnGlow 2.6s ease-in-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,60,60,0.08),0 8px 30px rgba(156,31,46,0.35),0 0 46px rgba(255,60,60,0.18)}50%{box-shadow:0 0 0 1px rgba(255,60,60,0.14),0 8px 34px rgba(156,31,46,0.45),0 0 64px rgba(255,60,60,0.3)}}

.section-eyebrow{text-align:center;letter-spacing:2px;text-transform:uppercase;font-size:12px;font-weight:800;color:var(--accent-2);margin:0}

/* section separators within hero */
.section-label{margin:26px 0 10px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-2);font-weight:800;opacity:0.85}
.stat-row{padding-bottom:8px;border-bottom:1px solid rgba(255,60,60,0.05)}

/* CTA band before footer */
.cta-band{margin-top:64px;padding:64px 0;background:linear-gradient(180deg,rgba(156,31,46,0.08),transparent),radial-gradient(600px 260px at 50% 0%,rgba(255,60,60,0.06),transparent 70%);border-top:1px solid rgba(255,60,60,0.05);border-bottom:1px solid rgba(255,60,60,0.05);text-align:center}
.cta-band-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-band h3{margin:0;font-family:Poppins,Inter;font-weight:900;font-size:36px;color:#eafcff}
.cta-band p{margin:0 0 6px;max-width:52ch}

/* Footer */
.site-footer{padding:48px 0 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;text-align:left;padding-bottom:32px}
.footer-brand-name{display:flex;align-items:center;gap:10px;font-family:Poppins,Inter;font-weight:800;font-size:18px;color:#eafcff}
.footer-logo{width:32px;height:32px}
.footer-brand p{margin:10px 0 0;max-width:36ch;font-size:13px}
.footer-col-title{font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:0 0 12px;color:var(--muted)}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col a{color:var(--muted);text-decoration:none;font-size:14px}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-top:1px solid rgba(255,255,255,0.04)}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-brand-name{justify-content:center}
  .footer-bottom{flex-direction:column;gap:6px;text-align:center}
}

/* Modules section grid */
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.module-card{padding:16px}
.module-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.module-card-head h4{margin:0;font-family:Poppins,Inter;font-weight:700;font-size:15px}
.module-card p{margin:0;font-size:13px;line-height:1.5}
@media (max-width:980px){ .module-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .module-grid{grid-template-columns:1fr} }

/* stronger hero heading underline */
.hero h2::after{background:linear-gradient(90deg,var(--accent-2),#ff3d3d)}

/* Oringo-like micro-animations & chips */
.chip{display:inline-block;padding:6px 12px;border-radius:999px;background:linear-gradient(90deg,rgba(255,60,60,0.12),rgba(156,31,46,0.06));color:var(--accent-2);font-weight:800;font-size:13px}
.nav-underline{position:relative}
.nav-underline::after{content:'';position:absolute;left:0;bottom:-6px;height:3px;width:0;background:linear-gradient(90deg,var(--accent-2),#ff3d3d);border-radius:3px;transition:width .28s ease}
.nav-active::after{width:48px}

/* overlay pulse */
@keyframes overlayPulse { 0% { box-shadow:0 8px 24px rgba(156,31,46,0.12); transform:scale(1.00); } 50% { box-shadow:0 18px 54px rgba(156,31,46,0.18); transform:scale(1.015); } 100% { box-shadow:0 8px 24px rgba(156,31,46,0.12); transform:scale(1.00); } }
.gui-overlay.pulse{animation:overlayPulse 700ms ease both}

/* smoother module-image transitions */
#module-image{transition:opacity 220ms ease, transform 220ms ease, filter 260ms ease}
/* ensure module preview visible even if JS timing issues occur */
#module-image{opacity:1 !important}

/* micro-interactions */
.modules-list .item.active{box-shadow:0 14px 40px rgba(156,31,46,0.12);transform:translateX(0);transition:box-shadow .22s ease,transform .18s ease}
.module-detail .preview-window{transition:transform .18s ease,box-shadow .18s ease}
.module-detail .preview-window:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(2,10,20,0.6)}
#module-image.loading{opacity:0.0;transform:scale(0.98)}
#module-image.loaded{opacity:1;transform:scale(1)}

/* stronger hero and section headings */
.hero h2{font-size:72px;letter-spacing:-1px}
h2{color:#e8fbff}

/* ===== Typography + glow pass ===== */
/* Orbitron for display/section headings, Poppins stays for card-level titles, JetBrains Mono for numeric/code accents */
h2, .clickgui-title, .cta-band h3{font-family:'Orbitron',Poppins,Inter,sans-serif}

section > h2{position:relative;letter-spacing:0.5px;text-shadow:0 0 18px rgba(255,60,60,0.18),0 0 40px rgba(156,31,46,0.12)}
section > h2::after{content:"";display:block;height:4px;width:46px;border-radius:4px;margin-top:12px;background:linear-gradient(90deg,var(--accent-2),#ff3d3d);box-shadow:0 0 12px rgba(255,60,60,0.5)}

.stat-num, code, .highlight-chip{font-family:'JetBrains Mono',monospace}
.stat-num{text-shadow:0 0 24px rgba(255,60,60,0.25)}

.feature h4, .module-card-head h4{position:relative;display:inline-block}
.feature:hover h4, .module-card:hover .module-card-head h4{text-shadow:0 0 16px rgba(255,60,60,0.35)}
.feature:hover, .module-card:hover{box-shadow:0 0 0 1px rgba(255,60,60,0.08),0 18px 44px rgba(2,10,20,0.6),0 0 34px rgba(156,31,46,0.12)}

.clickgui-title{letter-spacing:2px;text-shadow:0 0 14px rgba(255,60,60,0.4)}
.module-title{text-shadow:0 0 20px rgba(255,60,60,0.2)}

.cta-band h3{text-shadow:0 0 24px rgba(255,60,60,0.25),0 0 50px rgba(156,31,46,0.2)}

.footer-brand-name{font-family:'Orbitron',Poppins,Inter,sans-serif;letter-spacing:0.5px}

/* responsive */
@media (max-width:980px){
	.hero{grid-template-columns:1fr;gap:18px;padding:36px 0}
	.gui-preview{max-width:100%;}
	.container{padding:18px}
	.features-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .gui-overlay{left:4%;width:92%;height:22px}
  .gui-preview{max-width:420px;margin:0 auto}
}
.site-header .container{gap:12px}
@media (max-width:640px){
	.features-grid{grid-template-columns:1fr}
	.modules-list{height:140px}
	.site-header nav a{display:none}
}

/* animations */
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.fade-in.show{opacity:1;transform:none}
/* Safety net: if JS hasn't added .show yet (slow observer callback,
   script error, etc.) content must never be stuck invisible. */
@media (prefers-reduced-motion: reduce){ .fade-in{opacity:1;transform:none;transition:none} }
.no-js .fade-in{opacity:1;transform:none}
.card:hover{transform:translateY(-8px);transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 18px 40px rgba(0,0,0,0.6)}

/* subtle animated gradient underlines for headings */
.hero h2::after{content:"";display:block;height:6px;width:64px;border-radius:6px;margin-top:18px;background:linear-gradient(90deg,var(--accent),#a0444b);opacity:.9}

.lead{opacity:.95}

/* =========================================================
   Polish pass — clearer section separation + more presence
   ========================================================= */

/* Don't let the hero's clickgui card sit invisible waiting on
   the IntersectionObserver — it's above the fold, so it should
   just be there. Only sections further down should fade in. */
.clickgui-card.fade-in{opacity:1;transform:none}

/* Give every section real breathing room instead of a flat 28px */
#features, #modules, #downloads, #faq{padding-top:96px !important;padding-bottom:8px}

/* Alternating section "bands" so each block reads as its own
   area instead of one continuous scroll of cards */
#features, #downloads{position:relative}
#features::before, #modules::before, #downloads::before{
  content:"";position:absolute;left:0;right:0;top:0;
  width:100%;height:100%;z-index:-1;
}
#features{
  background:linear-gradient(180deg,rgba(156,31,46,0.05),transparent 60%);
  border-top:1px solid rgba(255,60,60,0.05);
}
#modules{
  background:rgba(7,10,14,0.55);
  border-top:1px solid rgba(255,60,60,0.05);
  border-bottom:1px solid rgba(255,60,60,0.05);
  padding-bottom:96px !important;
}
#downloads{
  padding-bottom:96px !important;
}
#faq{
  border-top:1px solid rgba(255,60,60,0.05);
  padding-bottom:96px !important;
}

/* Section headings get more presence + a short intro line under them */
section > h2{font-size:34px;margin-bottom:6px}
.section-intro{color:var(--muted);font-size:15px;margin:14px 0 0;max-width:60ch}

/* Feature cards: lift them off the flat background with real card
   treatment (border/shadow) instead of a near-invisible tint, and
   add an icon badge so the grid isn't just stacked text */
.features-grid{gap:22px;margin-top:32px}
.feature{
  padding:24px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.005));
  border:1px solid rgba(255,60,60,0.06);
  box-shadow:0 14px 34px rgba(2,10,18,0.45);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.feature:hover{transform:translateY(-6px);border-color:rgba(255,60,60,0.18)}
.feature-icon{
  width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(156,31,46,0.35),rgba(156,31,46,0.25));
  border:1px solid rgba(255,60,60,0.12);
  font-size:18px;margin-bottom:14px;
}
.feature p{margin-top:6px;line-height:1.55}

/* Module cards: same lift + a visible top accent per category so
   the grid has color variety instead of nine identical grey boxes */
.module-card{
  border-radius:16px;
  border:1px solid rgba(255,60,60,0.06);
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.005));
  box-shadow:0 14px 34px rgba(2,10,18,0.45);
  position:relative;overflow:hidden;
}
.module-card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent-2),#ff3d3d);opacity:.75;
}
.module-card p{line-height:1.55;margin-top:4px}
.module-grid{gap:20px}
.module-card{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.module-card:hover{transform:translateY(-4px);border-color:rgba(255,60,60,0.18)}
.module-card.active{border-color:rgba(255,60,60,0.35);box-shadow:0 0 0 1px rgba(255,60,60,0.15),0 14px 34px rgba(2,10,18,0.45)}
.module-card.active::before{opacity:1;height:4px}
.module-spotlight-copy .chip{margin-bottom:4px}

/* Downloads: give it real card presence instead of a thin inline row */
#downloads .card{
  padding:28px;border-radius:18px;
  background:linear-gradient(135deg,rgba(156,31,46,0.10),rgba(156,31,46,0.05));
  border:1px solid rgba(255,60,60,0.08);
  flex-wrap:wrap;gap:18px;
}
#downloads .card strong{font-size:18px;font-family:Poppins,Inter}
#downloads .card p{margin-top:6px}

/* FAQ: more space between rows and a hover cue */
#faq .card{border-radius:12px;transition:border-color .2s ease}
#faq .card:hover{border-color:rgba(255,60,60,0.16)}

@media (max-width:640px){
  #features, #modules, #downloads, #faq{padding-top:56px !important}
  #modules, #downloads, #faq{padding-bottom:56px !important}
}

/* "How to install" — give it its own clearly separated block so
   jumping to it via the Install Guide button doesn't read as landing
   in the middle of Features */
.install-guide{
  margin-top:36px;padding:28px 28px 24px;border-radius:18px;
  background:linear-gradient(135deg,rgba(156,31,46,0.10),rgba(156,31,46,0.05));
  border:1px solid rgba(255,60,60,0.08);
  scroll-margin-top:96px;
}
.install-guide-label{
  font-size:20px !important;
  letter-spacing:1px;
  margin:0 0 18px !important;
  opacity:1 !important;
}
@media (max-width:640px){
  .install-guide{padding:20px 18px}
}

/* Module spotlight — mini ClickGUI showcase inside the Modules section */
.module-spotlight{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  margin-top:24px;padding:0;overflow:hidden;
  background:linear-gradient(135deg,rgba(156,31,46,0.08),rgba(156,31,46,0.05));
}
.module-spotlight-copy{padding:32px}
.module-spotlight-copy h3{margin:12px 0 10px;font-family:Poppins,Inter;font-size:26px;color:#eafcff}
.module-spotlight-copy p{margin:0 0 14px;line-height:1.6}
.module-spotlight-list{margin:0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.9}
.module-spotlight-gui{
  background:linear-gradient(180deg,#060a10,#03060a);
  border-left:1px solid rgba(255,60,60,0.06);
  display:flex;flex-direction:column;
}
.module-spotlight-gui .setting-row span:first-child{color:#cfeff6;min-width:120px}
@media (max-width:820px){
  .module-spotlight{grid-template-columns:1fr}
  .module-spotlight-gui{border-left:none;border-top:1px solid rgba(255,60,60,0.06)}
}