/* Node Fortress Wallet Styles - Based on Main Site */
:root{
  --bg:#0b0f17;
  --panel:#121826;
  --muted:#8b97b9;
  --text:#e6ebff;
  --brand:#6aa9ff;
  --brand-2:#9b8cff;
  --accent:#64fbd2;
  --card:#0f1422;
  --border:#1f2a44;
}

/* Node Fortress Brand Colors */
.bg-sw-blue { background-color: #212eec; }
.bg-sw-purple { background-color: #6f42c1; }
.bg-sw-magenta { background-color: #d63384; }
.bg-sw-red { background-color: #dc3545; }
.bg-sw-orange { background-color: #fd7e14; }
.bg-sw-yellow { background-color: #ffc107; }

.border-sw-blue { border-color: #212eec; }
.border-sw-yellow { border-color: #ffc107; }

.text-sw-orange { color: #fd7e14; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(100,251,210,0.12), transparent 50%),
              radial-gradient(1200px 800px at 90% -20%, rgba(155,140,255,0.12), transparent 50%),
              var(--bg);
}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 60%)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(11,15,23,0.6);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.nav .btn-primary{color:#fff !important}
.nav .btn-primary:hover{color:#fff !important}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--text);transition:all .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));border-color:transparent;color:#fff;box-shadow:0 6px 30px rgba(106,169,255,0.3)}
.btn-ghost{background:transparent}
.btn-small{padding:8px 12px}
.btn-large{padding:16px 32px;font-size:1.1em;font-weight:600}

/* Hero */
.hero{padding-top:96px}
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 10px 0}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 12px 0}
.lead{color:var(--muted);font-size:18px}
.hero-cta{display:flex;gap:12px;margin-top:18px}
.hero-art{position:relative;min-height:320px}
.orb{position:absolute;border-radius:50%;filter:blur(24px);opacity:.7}
.orb-1{width:200px;height:200px;right:20%;top:0;background:radial-gradient(circle at 30% 30%, var(--brand), transparent 60%)}
.orb-2{width:160px;height:160px;right:0;bottom:10%;background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%)}

/* Wallet-specific hero image */
.hero-image-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:5;
  max-width:500px;
  width:100%;
}
.hero-image{
  width:100%;
  height:auto;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,0.5));
  animation:float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Wallet-specific hero card */
.hero-card{position:absolute;left:0;right:0;bottom:0;margin:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;max-width:420px;box-shadow:0 10px 40px rgba(0,0,0,0.4)}
.wallet-card{padding:24px}
.card-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.card-row+.card-row{border-top:1px dashed var(--border)}
.card-row .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px}
.card-row .label{flex:1;color:var(--muted);margin-left:8px}
.card-row .value{font-weight:600}

/* Announcement Box */
.announcement-box{
  background:linear-gradient(135deg, rgba(106,169,255,0.12), rgba(155,140,255,0.12));
  border:2px solid var(--brand);
  border-radius:20px;
  padding:40px;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}
.announcement-box h2{
  margin:0 0 16px 0;
  font-size:1.8em;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.announcement-box .lead{
  margin:0;
  line-height:1.7;
}

/* Cards */
.cards{display:grid;gap:16px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);border:1px solid var(--border);padding:24px;border-radius:16px;transition:all .3s ease}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--brand);
  box-shadow:0 8px 30px rgba(106,169,255,0.2);
}
.card h3{margin:0 0 12px 0;font-size:1.2em}
.card p{margin:0;color:var(--muted);line-height:1.6}

/* CTA */
.cta{padding:96px 0}
.cta-inner{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;background:linear-gradient(135deg, rgba(106,169,255,0.12), rgba(155,140,255,0.12));border:1px solid var(--border);border-radius:20px;padding:48px}
.cta-inner h2{margin:0 0 12px 0}
.cta-inner p{margin:0;max-width:600px}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:24px 0;background:rgba(0,0,0,0.2)}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:8px;color:var(--muted)}
.footer-nav{display:flex;gap:12px}
.footer-nav a{color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--text)}
.footer-copy{color:var(--muted)}

/* Troubleshooting FAQ */
.faq-list{
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:all .3s ease;
}
.faq-item[open]{
  border-color:var(--brand);
  box-shadow:0 4px 20px rgba(106,169,255,0.15);
}
.faq-question{
  padding:20px 24px;
  cursor:pointer;
  font-weight:600;
  font-size:1.05em;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
  transition:color .2s;
}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{
  content:'+';
  margin-left:auto;
  font-size:1.3em;
  color:var(--brand);
  transition:transform .2s;
}
.faq-item[open] .faq-question::after{
  content:'−';
}
.faq-question:hover{color:var(--brand)}
.faq-answer{
  padding:0 24px 20px;
  color:var(--muted);
  line-height:1.7;
}
.faq-answer p{margin:0 0 12px 0}
.faq-answer p:last-child{margin:0}
.faq-answer a{
  color:var(--brand);
  text-decoration:underline;
  text-underline-offset:3px;
}
.faq-answer a:hover{color:var(--accent)}
.faq-steps{
  background:rgba(106,169,255,0.08);
  border-left:3px solid var(--brand);
  padding:12px 16px;
  border-radius:0 8px 8px 0;
  font-size:0.95em;
}

/* X/Twitter Banner */
.x-banner-section{
  padding:40px 0;
}
.x-banner{
  display:flex;
  align-items:center;
  gap:20px;
  max-width:700px;
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px 28px;
  text-decoration:none;
  color:var(--text);
  transition:all .3s ease;
}
.x-banner:hover{
  border-color:var(--brand);
  box-shadow:0 8px 30px rgba(106,169,255,0.15);
  transform:translateY(-2px);
}
.x-banner-icon{
  flex-shrink:0;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.06);
  border-radius:14px;
}
.x-banner-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.x-banner-handle{
  font-size:0.85em;
  color:var(--muted);
  font-weight:500;
}
.x-banner-text{
  font-size:0.95em;
  line-height:1.6;
  color:var(--text);
}
.x-banner-gif{
  width:100%;
  max-width:320px;
  border-radius:12px;
  margin-top:10px;
}
.x-banner-arrow{
  flex-shrink:0;
  font-size:1.4em;
  color:var(--brand);
  transition:transform .2s;
}
.x-banner:hover .x-banner-arrow{
  transform:translateX(4px);
}
@media (max-width:600px){
  .x-banner{flex-direction:column;text-align:center}
  .x-banner-arrow{display:none}
}

/* Typography Enhancements */
h2{
  font-size:2em;
  margin:0 0 24px 0;
  text-align:center;
}

/* Responsive */
@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr}
  .cards-2, .cards-3{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--panel);padding:12px;border-bottom:1px solid var(--border);flex-direction:column}
  .nav-toggle{display:inline-flex}
  .hero{padding-top:48px}
  .hero h1{font-size:32px}
  .announcement-box{padding:24px}
  .announcement-box h2{font-size:1.4em}
  .hero-image-wrapper{position:relative;transform:none;top:auto;left:auto;margin:40px auto;max-width:400px}
  .wallet-card{max-width:100%;position:relative;margin-top:40px}
}

@media (max-width: 600px){
  .hero h1{font-size:28px}
  .section{padding:48px 0}
  .cta{padding:64px 0}
  .cta-inner{padding:32px 20px}
}