:root{
  /* Brand */
  --brand:#FF6B00; --brand-600:#e66000; --brand-300:#ffa86f;
  /* UI */
  --bg:#0f1115; --panel:#151922; --panel-2:#10141b;
  --text:#e8eaed; --muted:#b5b9c3; --ok:#29cc7a; --err:#ff4d4f;
  --ring: rgba(255,107,0,.35); --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:16px; --header-h:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: var(--bg);
  color:var(--text);
  padding-top: var(--header-h);
  position:relative; overflow-x:hidden;
}
/* background glow without seams */
body::before{
  content:""; position:fixed; inset:-20% -10% -20% -10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 8% -10%, rgba(255,107,0,.10), transparent 60%),
    radial-gradient(900px 700px at 110% 0%, rgba(255,107,0,.08), transparent 62%);
  filter: blur(8px);
}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, 92vw); margin-inline:auto}

/* Fixed top bar */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient(to bottom, rgba(15,17,21,.9), rgba(15,17,21,.6));
  border-bottom:1px solid rgba(255,255,255,.05);
  transition: box-shadow .25s ease, background .25s ease;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 0; min-height: var(--header-h);
}
.brand{display:flex; align-items:center; gap:12px; font-weight:700}
.logo{
  width:32px; height:32px; border-radius:10px;
  /*background: conic-gradient(from 180deg, var(--brand), #ff9d5c, var(--brand));*/
  box-shadow:0 0 0 3px rgba(255,107,0,.15)
}

/* Topbar — unified minimal buttons (NO .nav a.btn rules anywhere) */
.nav-links{display:flex; gap:10px; align-items:center}
.nav-links a.btn{
  padding:.56rem .9rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:transparent;
  color:var(--text);
  transition:background .2s, border-color .2s, transform .2s;
}
.nav-links a.btn:hover{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.10);
}
.nav-links a.btn:active{ transform:translateY(1px) scale(.99) }
.nav-links a.btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }

/* CTA ghost → solid on hover */
.nav-links a.btn.cta{
  border-color:rgba(255,107,0,.45);
}
.nav-links a.btn.cta:hover{
  background:var(--brand);
  color:#0b0c0f;
  border-color:transparent;
}
.nav-links a.btn.cta:active{ background:var(--brand-600) }

/* Minimal animations */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }
.fade{ opacity:0; transform:translateY(6px) }
.fade.in{ opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease }

.hero{padding:64px 0 24px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px}
@media (max-width: 920px){ .hero-grid{grid-template-columns:1fr} }
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:var(--muted); font-size:.85rem}
.title{font-size:clamp(2rem, 3.2vw + 1rem, 3.2rem); line-height:1.05; margin:14px 0}
.subtitle{font-size:1.05rem; color:var(--muted); max-width:60ch}
.brand-accent{color:var(--brand)}
.hero-cta{display:flex; gap:10px; margin-top:16px}
.hero-card{
  background:linear-gradient(180deg, rgba(255,107,0,.08), rgba(255,107,0,0) 60%), var(--panel);
  border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .25s;
}
.hero-card:hover{transform:translateY(-2px)}

/* Topic widget */
.topic{display:grid; gap:10px}
.topic .row{display:flex; gap:10px; align-items:center}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; font-size:.8rem; color:#0b0c0f; background:var(--brand); border-radius:999px; font-weight:700}
.topic-title{font-size:1.1rem; font-weight:700}
.topic-intro{color:var(--muted)}
.topic .status{font-size:.9rem; color:var(--muted)}
.topic-ai{display:grid; gap:8px; margin-top:6px}
.ai-row{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:flex-start}
.ai-tag{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:.78rem; font-weight:700; color:#0b0c0f}
.ai-tag.pro{background: linear-gradient(180deg, rgba(41,204,122,.9), rgba(41,204,122,.7))}
.ai-tag.con{background: linear-gradient(180deg, rgba(255,77,79,.9), rgba(255,77,79,.7))}

/* Screens / slider */
.screens{margin-top:22px; background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.slider{position:relative; overflow:hidden; border-radius:12px; touch-action:pan-y; -webkit-user-select:none; user-select:none}
.slider::after{content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.03));}
.slides{display:flex; transition:transform .5s ease; will-change:transform}
.slide{min-width:100%; aspect-ratio: 1/1; display:grid; place-items:center; background:#0b0c10; border:1px solid rgba(255,255,255,.05); border-radius:12px; overflow:hidden}
.slide img{width:100%; height:100%; object-fit:cover; display:block; user-select:none}

/* Carousel dots — perfectly round */
.slider-controls{display:flex; justify-content:center; gap:10px; margin-top:10px}
.dot{
  --dot: 15px;
  inline-size: var(--dot);
  block-size: var(--dot);
  aspect-ratio: 1 / 1;
  display:inline-block;
  border-radius:9999px;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer;
  transition:transform .2s, background .2s, border-color .2s;
}
.dot.active{ background:var(--brand); border-color:transparent }
.dot:hover{ transform:scale(1.1) }
.dot:active{ transform:scale(.95) }

/* Features */
.features{padding:48px 0}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width: 920px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width: 600px){ .grid{grid-template-columns:1fr} }
.card{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:transform .2s, box-shadow .25s, border-color .25s}
.card:hover{box-shadow:0 8px 24px rgba(255,107,0,.18); border-color: var(--ring); transform:translateY(-2px)}
.icon{width:28px; height:28px; color:var(--brand)}
.card h3{margin:10px 0 8px}
.card p{color:var(--muted); margin:0}

/* CTA */
.cta{
  display:grid; gap:16px; place-items:center; text-align:center;
  background:linear-gradient(180deg, rgba(255,107,0,.08), rgba(255,107,0,0) 60%), var(--panel);
  border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .25s;
}
.cta:hover{transform:translateY(-1px)}
.add-to-discord{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:12px; background:var(--brand); color:#0b0c0f; font-weight:800; border:1px solid rgba(0,0,0,.15); transition:background .2s, transform .2s}
.add-to-discord:hover{background:var(--brand-600)}
.add-to-discord:active{transform:translateY(1px) scale(.99)}
.kbd{padding:.12rem .34rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:6px}
.hr{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); margin:24px 0}

/* Footer */
.footer-wrap{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  flex-wrap:wrap;            /* inofensivo aunque estemos en grid */
  padding:36px 0 48px;
  color:var(--muted);
}

.footer-left   { justify-self:start; }
.footer-center { justify-self:center; text-align:center; }
.footer-right  { justify-self:end; }

.footer-links{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }

.brand-inline{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;        /* evita saltos que “empujen” el centro */
}

.brand-logo{
  width:50px; height:50px;   /* más discreto para el footer */
  object-fit:contain;
  flex:0 0 auto;
  /* filter: invert(1) brightness(1.2);  <- si tu logo es oscuro sobre fondo oscuro */
}

/* Responsive: apilado centrado */
@media (max-width: 640px){
  .footer-wrap{
    grid-template-columns: 1fr;
    row-gap:12px;
    text-align:center;
  }
  .footer-left, .footer-center, .footer-right{
    justify-self:center;
  }
  .footer-links{ justify-content:center; }
}