/* ========================================
   BASE / RESET
======================================== */
:root{
  --bg: #48595F;
  --fg: #F4F7F8;
  --muted: #D7E1E4;
  --primary: #00BFB2;
  --info: #7AA3DB;
  --accent: #A05EB5;

  --card: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.16);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #111;
  color: var(--fg);
}

a{
  color: var(--primary);
  text-decoration: none;
}

/* ========================================
   LAYOUT
======================================== */
.container{
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* ========================================
   TOPBAR
======================================== */
.topbar{
  background: var(--bg);
  border-bottom: 3px solid var(--primary);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}

.brand{
  font-weight: 800;
  letter-spacing: .4px;
}

.toplinks{
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
}

.toplinks a{
  color: var(--fg);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  opacity: .92;
}

.toplinks a:hover{
  opacity: 1;
  border-color: var(--border);
  background: rgba(255,255,255,0.06);
}

.toplinks a.active{
  border-color: rgba(0,191,178,0.45);
  background: rgba(0,191,178,0.16);
}

.toplinks a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,191,178,.30);
}

/* CTA */
.toplink-cta{
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(160,94,181,0.22);
  border: 1px solid rgba(160,94,181,0.45);
}

.toplink-cta:hover{
  background: rgba(160,94,181,0.30);
}

/* ========================================
   HERO
======================================== */
.hero{
  position: relative;
  padding: 70px 0;
  background: radial-gradient(circle at top, #13232b, #0b1216);
}

.hero::after{
  content: "";
  position: absolute;
  right: 10%;
  top: 20%;
  width: 400px;
  height: 400px;
  background: url('/assets/img/concept-wordmark.png') no-repeat center;
  background-size: contain;
  opacity: 0.03;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: center;
}

.hero-text h1{
  font-size: 42px;
  margin-bottom: 10px;
}

.hero-sub{
  font-size: 15px;
  opacity: 0.75;
  max-width: 520px;
  margin-bottom: 20px;
}

.hero-actions{
  display:flex;
  gap: 12px;
}

/* LOGO */
.hero-brand{
  display:flex;
  justify-content:center;
}

.hero-logo{
  max-width: 320px;
  opacity: 0.95;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  animation: float 6s ease-in-out infinite;
}

@keyframes float{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0); }
}

/* ========================================
   BUTTONS
======================================== */
.btn{
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  transition: all .2s ease;
  border: 1px solid transparent;
}

.btn.primary{
  background: #00d4ff;
  color: #000;
  font-weight: 600;
}

.btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,212,255,0.3);
}

.btn.ghost{
  border: 1px solid rgba(255,255,255,0.2);
}

/* ========================================
   SERVICES
======================================== */
.services{
  background: #0f1416;
  padding: 56px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.services-head{
  text-align:center;
}

.services-head h2{
  font-size: 22px;
}

.services-head p{
  opacity: 0.6;
}

/* GRID */
.services-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 26px;
}

/* CARD */
.service-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  background: linear-gradient(145deg, #182229, #11181d);
  border-radius: 18px;
  padding: 20px;
  color: #fff;

  border: 1px solid rgba(255,255,255,0.05);
  transition: all .25s ease;
}

.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  border-color: rgba(0,212,255,0.25);
}

.service-title{
  font-weight: 900;
}

.service-desc{
  font-size: 13px;
  opacity: 0.7;
}

.service-auth{
  font-size: 12px;
  opacity: 0.5;
  margin-top: 10px;
}

/* BADGE */
.badge-internal{
  font-size: 11px;
  background: rgba(0,212,255,0.1);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ========================================
   CONCEPTS
======================================== */
.concepts{
  background: #0f1416;
  padding: 56px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.concepts-head{
  text-align:center;
}

.concepts-head h2{
  font-size: 22px;
}

.concepts-sub{
  opacity: 0.6;
}

.concepts-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
  margin-top: 22px;
}

.concept-linkcard{
  padding: 10px;
  border-radius: 12px;
  transition: all .2s ease;
}

.concept-linkcard:hover{
  background: rgba(255,255,255,0.03);
}

/* ========================================
   FOOTER
======================================== */
.footer{
  background: #0b0f10;
  border-top: 2px solid rgba(0,191,178,0.35);
  padding: 16px 0;
}

.footer-inner{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer a{
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 12px;
}

.footer a:hover{
  color: var(--fg);
  background: rgba(0,191,178,0.08);
}

/* ========================================
   USER
======================================== */
.user-area {
  display: flex;
  align-items: center;
  gap: 18px;
}

.user-name {
  opacity: 0.9;
}

.user-info{
  font-size: 13px;
  color: #9fdcff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.login-link,
.logout-link{
  font-size: 12px;
  color: #00d4ff;
  opacity: 0.8;  
  transition: opacity 0.2s ease;
}

.login-link:hover,
.logout-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ========================================
   RESPONSIVO
======================================== */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-text h1{ font-size: 34px; }
}

@media (max-width: 600px){
  .concepts-grid{ grid-template-columns: 1fr; }
}