/* SC-USCS - Professional Dark Theme with Cyan Accents */
:root{--bg-primary:#0a0e17;--bg-secondary:#111827;--bg-tertiary:#1a2234;--bg-card:#151d2e;--bg-card-hover:#1c2640;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-primary:#06b6d4;--accent-secondary:#0ea5e9;--accent-glow:rgba(6,182,212,0.4);--accent-gradient:linear-gradient(135deg,#06b6d4 0%,#0ea5e9 100%);--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--border-color:#2d3a52;--border-light:#374463;--font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code','Consolas',monospace;--container-max:1400px;--section-padding:6rem;--border-radius:12px;--border-radius-lg:16px;--border-radius-sm:8px;--transition-fast:150ms ease;--transition-base:250ms ease;--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 4px 16px rgba(0,0,0,0.4);--shadow-lg:0 8px 32px rgba(0,0,0,0.5);--shadow-glow:0 0 40px var(--accent-glow)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-display);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

.bg-grid{position:fixed;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(6,182,212,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,0.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:-2}
.bg-glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:0.4;pointer-events:none;z-index:-1}
.bg-glow-1{top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,var(--accent-primary) 0%,transparent 70%);animation:float 20s ease-in-out infinite}
.bg-glow-2{bottom:-20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,var(--accent-secondary) 0%,transparent 70%);animation:float 25s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(20px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(0.95)}75%{transform:translate(30px,10px) scale(1.02)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.container{max-width:var(--container-max);margin:0 auto;padding:0 2rem}

.header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,14,23,0.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:2rem}
.logo{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:inherit}
.logo-icon{width:40px;height:40px;color:var(--accent-primary)}
.logo-text{display:flex;flex-direction:column;line-height:1.2}
.logo-name{font-weight:700;font-size:1.25rem;letter-spacing:-0.02em}
.logo-version{font-size:0.75rem;color:var(--text-muted);font-family:var(--font-mono)}
.nav{display:flex;align-items:center;gap:0.5rem}
.nav-link{padding:0.5rem 1rem;color:var(--text-secondary);text-decoration:none;font-size:0.9rem;font-weight:500;border-radius:var(--border-radius-sm);transition:all var(--transition-fast)}
.nav-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}
.header-actions{display:flex;align-items:center;gap:1rem}
.mobile-menu-btn{display:none;flex-direction:column;gap:5px;padding:8px;background:none;border:none;cursor:pointer}
.mobile-menu-btn span{display:block;width:24px;height:2px;background:var(--text-primary);border-radius:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.625rem 1.25rem;font-family:inherit;font-size:0.9rem;font-weight:600;text-decoration:none;border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}
.btn-primary{background:var(--accent-gradient);color:var(--bg-primary);box-shadow:var(--shadow-sm),0 0 20px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),0 0 30px var(--accent-glow)}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}
.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-light)}
.btn-ghost{background:transparent;color:var(--text-secondary);padding:0.5rem 0.75rem}
.btn-ghost:hover{color:var(--text-primary);background:var(--bg-tertiary)}
.btn-lg{padding:0.875rem 1.75rem;font-size:1rem}
.btn-generate{padding:1rem 2rem;font-size:1.1rem;background:var(--accent-gradient);color:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-md),var(--shadow-glow)}
.btn-generate:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-lg),0 0 50px var(--accent-glow)}
.btn-generate:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.hero{padding:calc(72px + 4rem) 0 4rem;min-height:100vh;display:flex;align-items:center}
.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-content{max-width:600px}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.3);border-radius:100px;color:var(--accent-primary);font-size:0.85rem;font-weight:500;margin-bottom:1.5rem;animation:fadeInUp 0.6s ease}
.hero-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-0.03em;animation:fadeInUp 0.6s ease 0.1s both}
.hero-title-line{display:block}
.hero-title-gradient{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-description{font-size:1.15rem;color:var(--text-secondary);line-height:1.7;margin-bottom:2rem;animation:fadeInUp 0.6s ease 0.2s both}
.hero-description strong{color:var(--text-primary)}
.hero-stats{display:flex;gap:2.5rem;margin-bottom:2.5rem;animation:fadeInUp 0.6s ease 0.3s both}
.stat{display:flex;flex-direction:column}
.stat-value{font-size:2rem;font-weight:700;color:var(--accent-primary);font-family:var(--font-mono)}
.stat-label{font-size:0.85rem;color:var(--text-muted)}
.hero-cta{display:flex;gap:1rem;animation:fadeInUp 0.6s ease 0.4s both}
.hero-visual{animation:fadeInUp 0.8s ease 0.3s both}

.terminal{background:var(--bg-secondary);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow-lg)}
.terminal-header{display:flex;align-items:center;gap:1rem;padding:0.875rem 1.25rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}
.terminal-dots{display:flex;gap:8px}
.terminal-dots span{width:12px;height:12px;border-radius:50%}
.terminal-dots span:nth-child(1){background:#ef4444}
.terminal-dots span:nth-child(2){background:#f59e0b}
.terminal-dots span:nth-child(3){background:#10b981}
.terminal-title{font-family:var(--font-mono);font-size:0.8rem;color:var(--text-muted)}
.terminal-body{padding:1.5rem;font-family:var(--font-mono);font-size:0.85rem;line-height:1.8;overflow-x:auto}
.terminal-body pre{margin:0}
.cmd-comment{color:#6b7280}
.cmd-keyword{color:#06b6d4}
.cmd-string{color:#10b981}

.section-header{text-align:center;margin-bottom:3rem}
.section-title{font-size:clamp(2rem,4vw,2.75rem);font-weight:700;margin-bottom:1rem;letter-spacing:-0.02em}
.section-description{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto}

.tools-section{padding:var(--section-padding) 0}
.quick-actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.5rem;justify-content:center}
.quick-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);color:var(--text-secondary);font-family:inherit;font-size:0.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}
.quick-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-light)}
.quick-btn:active{transform:scale(0.98)}

.category-filter{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:2rem;justify-content:center}
.filter-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1.25rem;background:transparent;border:1px solid var(--border-color);border-radius:100px;color:var(--text-secondary);font-family:inherit;font-size:0.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}
.filter-btn:hover{background:var(--bg-card);color:var(--text-primary)}
.filter-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-primary)}

.tools-grid{display:flex;flex-direction:column;gap:2rem}
.tool-category{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);overflow:hidden}
.tool-category.hidden{display:none}
.category-header{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:var(--bg-tertiary);cursor:pointer;transition:background var(--transition-fast)}
.category-header:hover{background:var(--bg-card-hover)}
.category-icon{font-size:1.5rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-radius:var(--border-radius-sm)}
.category-info{flex:1}
.category-title{font-size:1.1rem;font-weight:600;margin-bottom:0.25rem}
.category-desc{font-size:0.85rem;color:var(--text-muted)}
.category-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-muted);cursor:pointer;transition:transform var(--transition-fast)}
.category-toggle.collapsed{transform:rotate(-90deg)}
.category-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1rem;padding:1.5rem}
.category-tools.collapsed{display:none}

.tool-card{display:flex;gap:1rem;padding:1.25rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);transition:all var(--transition-fast)}
.tool-card:hover{background:var(--bg-tertiary);border-color:var(--border-light)}
.tool-card.selected{border-color:var(--accent-primary);box-shadow:0 0 0 1px var(--accent-primary),0 0 20px rgba(6,182,212,0.15)}
.tool-card.recommended{background:linear-gradient(135deg,rgba(6,182,212,0.05) 0%,transparent 100%)}
.tool-checkbox{position:relative;flex-shrink:0}
.tool-checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox-custom{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all var(--transition-fast)}
.checkbox-custom svg{width:14px;height:14px;opacity:0;transform:scale(0.5);transition:all var(--transition-fast);stroke:var(--bg-primary)}
.tool-checkbox input:checked+.checkbox-custom{background:var(--accent-primary);border-color:var(--accent-primary)}
.tool-checkbox input:checked+.checkbox-custom svg{opacity:1;transform:scale(1)}
.tool-checkbox input:focus+.checkbox-custom{box-shadow:0 0 0 3px var(--accent-glow)}
.tool-content{flex:1;min-width:0}
.tool-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;flex-wrap:wrap}
.tool-name{font-size:0.95rem;font-weight:600}
.tool-badges{display:flex;gap:0.375rem}
.badge{padding:0.125rem 0.5rem;font-size:0.7rem;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:0.03em}
.badge-recommended{background:rgba(245,158,11,0.2);color:#f59e0b}
.badge-safe{background:rgba(16,185,129,0.2);color:#10b981}
.badge-moderate{background:rgba(245,158,11,0.2);color:#f59e0b}
.badge-advanced{background:rgba(239,68,68,0.2);color:#ef4444}
.badge-type{background:var(--bg-card);color:var(--text-muted)}
.tool-description{font-size:0.85rem;color:var(--text-secondary);line-height:1.5;margin-bottom:0.5rem}
.tool-details-btn{display:inline-flex;align-items:center;gap:0.375rem;padding:0;background:none;border:none;color:var(--accent-primary);font-family:inherit;font-size:0.8rem;font-weight:500;cursor:pointer;transition:opacity var(--transition-fast)}
.tool-details-btn:hover{opacity:0.8}

.script-options{margin-top:3rem;padding:2rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg)}
.options-title{display:flex;align-items:center;gap:0.75rem;font-size:1.1rem;font-weight:600;margin-bottom:1.5rem;color:var(--text-primary)}
.options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.option-card{display:block;cursor:pointer}
.option-card input{position:absolute;opacity:0;width:0;height:0}
.option-content{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);transition:all var(--transition-fast)}
.option-card:hover .option-content{background:var(--bg-tertiary);border-color:var(--border-light)}
.option-card input:checked+.option-content{border-color:var(--accent-primary);box-shadow:0 0 0 1px var(--accent-primary)}
.option-icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-radius:var(--border-radius-sm);color:var(--text-muted);transition:color var(--transition-fast)}
.option-card input:checked+.option-content .option-icon{color:var(--accent-primary)}
.option-text{display:flex;flex-direction:column}
.option-name{font-weight:600;font-size:0.9rem;margin-bottom:0.125rem}
.option-desc{font-size:0.8rem;color:var(--text-muted)}

.generate-section{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:2rem;padding:1.5rem 2rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg)}
.selection-summary{display:flex;align-items:center;gap:2rem}
.summary-count{display:flex;align-items:baseline;gap:0.5rem}
.count-number{font-size:2rem;font-weight:700;font-family:var(--font-mono);color:var(--accent-primary)}
.count-label{font-size:0.9rem;color:var(--text-muted)}
.summary-risk{display:flex;align-items:center;gap:0.5rem}
.risk-dot{width:10px;height:10px;border-radius:50%}
.risk-dot.safe{background:var(--success)}
.risk-dot.moderate{background:var(--warning)}
.risk-dot.advanced{background:var(--danger)}
.risk-text{font-size:0.85rem;color:var(--text-secondary)}

.how-section{padding:var(--section-padding) 0;background:var(--bg-secondary)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:3rem}
.step-card{position:relative;padding:2rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);text-align:center}
.step-number{position:absolute;top:-1rem;left:2rem;font-size:3rem;font-weight:700;font-family:var(--font-mono);color:var(--accent-primary);opacity:0.3}
.step-icon{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:rgba(6,182,212,0.1);border-radius:50%;color:var(--accent-primary);margin-bottom:1.5rem}
.step-title{font-size:1.25rem;font-weight:600;margin-bottom:0.75rem}
.step-description{font-size:0.95rem;color:var(--text-secondary);line-height:1.6}

.safety-notice{display:flex;gap:1.5rem;padding:2rem;background:linear-gradient(135deg,rgba(16,185,129,0.1) 0%,transparent 100%);border:1px solid rgba(16,185,129,0.3);border-radius:var(--border-radius-lg)}
.notice-icon{flex-shrink:0;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,0.2);border-radius:50%;color:var(--success)}
.notice-content h4{font-size:1.1rem;font-weight:600;margin-bottom:0.75rem;color:var(--success)}
.notice-content ul{list-style:none}
.notice-content li{position:relative;padding-left:1.5rem;margin-bottom:0.5rem;font-size:0.9rem;color:var(--text-secondary)}
.notice-content li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:600}

.faq-section{padding:var(--section-padding) 0}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:1000px;margin:0 auto}
.faq-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius);overflow:hidden}
.faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1.25rem 1.5rem;background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:1rem;font-weight:600;text-align:left;cursor:pointer;transition:background var(--transition-fast)}
.faq-question:hover{background:var(--bg-tertiary)}
.faq-question svg{flex-shrink:0;color:var(--text-muted);transition:transform var(--transition-base)}
.faq-item.open .faq-question svg{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--transition-base)}
.faq-item.open .faq-answer{max-height:300px}
.faq-answer p{padding:0 1.5rem 1.5rem;font-size:0.95rem;color:var(--text-secondary);line-height:1.7}

.about-section{padding:var(--section-padding) 0;background:var(--bg-secondary)}
.about-content{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;align-items:start}
.about-text p{font-size:1rem;color:var(--text-secondary);line-height:1.8;margin-bottom:1.5rem}
.about-text a{color:var(--accent-primary);text-decoration:none}
.about-text a:hover{text-decoration:underline}
.about-text em{color:var(--text-primary);font-style:normal}
.about-links h3{font-size:1.1rem;font-weight:600;margin-bottom:1rem}
.link-cards{display:flex;flex-direction:column;gap:1rem}
.link-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius);text-decoration:none;color:inherit;transition:all var(--transition-fast)}
.link-card:hover{background:var(--bg-card-hover);border-color:var(--border-light);transform:translateX(4px)}
.link-flag{font-size:1.5rem}
.link-info{flex:1;display:flex;flex-direction:column}
.link-title{font-weight:600;font-size:0.95rem}
.link-url{font-size:0.8rem;color:var(--text-muted);font-family:var(--font-mono)}
.link-card svg{color:var(--text-muted)}

.footer{padding:3rem 0 2rem;background:var(--bg-primary);border-top:1px solid var(--border-color)}
.footer-content{display:flex;justify-content:space-between;gap:4rem;padding-bottom:2rem;border-bottom:1px solid var(--border-color)}
.footer-brand .logo{margin-bottom:0.5rem}
.footer-tagline{font-size:0.9rem;color:var(--text-muted)}
.footer-links{display:flex;gap:4rem}
.footer-col h4{font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:1rem}
.footer-col a{display:block;padding:0.375rem 0;color:var(--text-secondary);text-decoration:none;font-size:0.9rem;transition:color var(--transition-fast)}
.footer-col a:hover{color:var(--accent-primary)}
.footer-bottom{padding-top:1.5rem;text-align:center}
.footer-bottom p{font-size:0.85rem;color:var(--text-muted);margin-bottom:0.5rem}
.footer-disclaimer{font-size:0.8rem;max-width:600px;margin:0 auto}

.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;display:none;align-items:center;justify-content:center;padding:2rem}
.modal.open{display:flex}
.modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px)}
.modal-content{position:relative;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg)}
.modal-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:none;border-radius:var(--border-radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.modal-close:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.modal-header{padding:1.5rem 2rem;border-bottom:1px solid var(--border-color)}
.modal-header h3{font-size:1.25rem;font-weight:600;padding-right:2rem}
.modal-body{padding:1.5rem 2rem}
.modal-body p{margin-bottom:1rem;color:var(--text-secondary);line-height:1.7}
.modal-body pre{padding:1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-family:var(--font-mono);font-size:0.8rem;overflow-x:auto;color:var(--accent-primary)}

@media(max-width:1200px){.hero .container{grid-template-columns:1fr;gap:3rem}.hero-visual{max-width:600px;margin:0 auto}.about-content{grid-template-columns:1fr;gap:3rem}}
@media(max-width:992px){:root{--section-padding:4rem}.steps-grid{grid-template-columns:1fr;max-width:500px;margin:0 auto 3rem}.faq-grid{grid-template-columns:1fr}.footer-content{flex-direction:column;gap:2rem}}
@media(max-width:768px){.container{padding:0 1.25rem}.nav,.header-actions{display:none}.mobile-menu-btn{display:flex}.hero{padding-top:calc(72px + 2rem);min-height:auto}.hero-stats{flex-wrap:wrap;gap:1.5rem}.hero-cta{flex-direction:column}.hero-cta .btn{width:100%;justify-content:center}.category-tools{grid-template-columns:1fr}.options-grid{grid-template-columns:1fr}.generate-section{flex-direction:column;text-align:center}.selection-summary{flex-direction:column;gap:1rem}.safety-notice{flex-direction:column;text-align:center}.notice-icon{margin:0 auto}.notice-content li{text-align:left}.footer-links{flex-direction:column;gap:2rem}}
@media(max-width:480px){.hero-title{font-size:2rem}.hero-description{font-size:1rem}.stat-value{font-size:1.5rem}.terminal{font-size:0.75rem}.tool-card{flex-direction:column}.tool-checkbox{align-self:flex-start}.quick-actions{gap:0.5rem}.quick-btn{flex:1;min-width:calc(50% - 0.25rem);justify-content:center}}

/* ================================
   Scroll Navigation Buttons
   Same look + animation style
   ================================ */

.scroll-btn{
  position: fixed;

  /* Safe-area aware */
  right: calc(1.5rem + env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Glass + card look (matches theme) */
  background: rgba(21, 29, 46, 0.72); /* var(--bg-card) with alpha */
  border: 1px solid rgba(45, 58, 82, 0.85); /* var(--border-color) with alpha */
  backdrop-filter: blur(14px);

  color: var(--text-secondary);
  cursor: pointer;

  /* Hidden state (animated) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;

  z-index: 110; /* above header(100), below modal(200) */

  box-shadow: var(--shadow-md);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Cyan glow ring layer */
.scroll-btn::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(6,182,212,0.35), transparent 55%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.scroll-btn.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Hover matches your primary button energy */
.scroll-btn:hover{
  background: rgba(6,182,212,0.14);
  border-color: rgba(6,182,212,0.55);
  color: var(--text-primary);
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--shadow-lg), 0 0 28px rgba(6,182,212,0.25);
}
.scroll-btn:hover::before{ opacity: 1; }

/* Click feedback */
.scroll-btn:active{
  transform: translateY(-1px) scale(1.02);
}

/* Keyboard focus */
.scroll-btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-md);
}

/* Stack the buttons */
.scroll-to-top{
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
.scroll-to-bottom{
  bottom: calc(5rem + env(safe-area-inset-bottom));
}

@media (max-width: 768px){
  .scroll-btn{
    width: 42px;
    height: 42px;
    right: calc(1rem + env(safe-area-inset-right));
  }
  .scroll-to-top{
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .scroll-to-bottom{
    bottom: calc(4rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce){
  .scroll-btn{
    transition: none;
    transform: none;
  }
  .scroll-btn.visible{
    transform: none;
  }
}