/* =========================================
   ZELOBYTE - STYLE.CSS COMPLETO
========================================= */

:root{

  /* DARK MODE */

  --bg:#020817;
  --bg-secondary:#06111f;
  --text:#ffffff;
  --text-secondary:#9ca3af;
  --primary:#22d3ee;
  --border:rgba(255,255,255,.05);
  --card:#06111f;
  --navbar:#020817cc;

}

/* =========================================
   LIGHT MODE AUTOMÁTICO
========================================= */

@media (prefers-color-scheme: light){

  :root{

    --bg:#f5f7fb;
    --bg-secondary:#ffffff;
    --text:#0f172a;
    --text-secondary:#475569;
    --primary:#0891b2;
    --border:rgba(15,23,42,.08);
    --card:#ffffff;
    --navbar:rgba(255,255,255,.85);

  }

}

html{
  color-scheme:light dark;
}

/* =========================================
   RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* =========================================
   GRID BACKGROUND
========================================= */

.grid-bg{

  position:fixed;
  inset:0;

  background-image:
  linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px);

  background-size:70px 70px;

  z-index:-1;
}

/* =========================================
   NAVBAR
========================================= */

.navbar{

  width:100%;

  padding:20px 60px;

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

  position:sticky;
  top:0;

  backdrop-filter:blur(15px);

  background:var(--navbar);

  border-bottom:1px solid var(--border);

  z-index:100;
}

.logo{

  display:flex;
  align-items:center;
  gap:12px;
}

/* =========================================
   LOGO
========================================= */

.logo-icon{

    width: 50px;
    height: 50px;

    border-radius: 15px;

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

    font-size: 22px;

    overflow: visible;
}

.logo-icon img {

    height: 250px;

    margin-left: 100px;

    object-fit: contain;
}

.logo h2{
  font-size:28px;
}

.logo span{
  color:var(--primary);
}

/* =========================================
   NAV LINKS
========================================= */

nav{
  display:flex;
  gap:40px;
}

nav a{

  color:var(--text-secondary);

  text-decoration:none;

  transition:.3s;
}

nav a:hover{
  color:var(--primary);
}

/* =========================================
   BUTTONS
========================================= */

.btn-nav,
.btn-primary{

  background:var(--primary);

  color:black;

  text-decoration:none;

  padding:16px 28px;

  border-radius:18px;

  font-weight:700;

  box-shadow:0 0 40px rgba(34,211,238,.35);

  transition:.3s;
}

.btn-nav:hover,
.btn-primary:hover{
  transform:translateY(-3px);
}

.btn-secondary{

  padding:16px 28px;

  border-radius:18px;

  border:1px solid var(--border);

  text-decoration:none;

  color:var(--text);

  background:rgba(255,255,255,.03);

  transition:.3s;
}

.btn-secondary:hover{
  background:rgba(255,255,255,.06);
}

/* =========================================
   HERO
========================================= */

.hero{

  min-height:100vh;

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

  text-align:center;

  padding:100px 20px;
}

.badge{

  padding:12px 24px;

  border-radius:999px;

  background:rgba(255,255,255,.03);

  border:1px solid var(--border);

  margin-bottom:40px;

  color:var(--text-secondary);

  backdrop-filter:blur(12px);
}

.hero h1{

  font-size:88px;

  line-height:1.1;

  font-weight:900;
}

.hero h1 span{

  background:linear-gradient(to right,#67e8f9,#0ea5e9);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{

  margin-top:40px;

  max-width:950px;

  color:var(--text-secondary);

  font-size:24px;

  line-height:1.7;
}

.hero-buttons{

  display:flex;

  gap:20px;

  margin-top:50px;
}

.hero small{

  margin-top:30px;

  color:var(--text-secondary);
}

/* =========================================
   SECTIONS
========================================= */

.section{
  padding:120px 8%;
}

.section-title{
  text-align:center;
  margin-bottom:80px;
}

.section-title span{

  color:var(--primary);

  border:1px solid rgba(34,211,238,.2);

  padding:10px 20px;

  border-radius:999px;

  font-size:13px;

  letter-spacing:3px;
}

.section-title h2{

  margin-top:30px;

  font-size:64px;

  line-height:1.2;
}

.section-title p{

  margin-top:25px;

  color:var(--text-secondary);

  font-size:22px;

  line-height:1.7;
}

/* =========================================
   GRIDS
========================================= */

.services-grid,
.process-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

  gap:30px;
}

.diferenciais-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));

  gap:30px;
}

.stats{

  margin-top:80px;

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

  gap:30px;
}

/* =========================================
   CARDS
========================================= */

.card,
.process-card,
.diferencial-card,
.stat-card{

  background:var(--card);

  border:1px solid var(--border);

  border-radius:30px;

  padding:40px;

  transition:.3s;
}

.card:hover,
.process-card:hover,
.diferencial-card:hover{

  transform:translateY(-10px);

  border-color:rgba(34,211,238,.35);
}

.icon{

  width:60px;
  height:60px;

  background:rgba(34,211,238,.08);

  border-radius:18px;

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

  margin-bottom:30px;

  color:var(--primary);

  font-size:22px;
}

.card h3,
.process-card h3,
.diferencial-card h3{

  font-size:30px;

  margin-bottom:20px;
}

.card p,
.process-card p,
.diferencial-card p{

  color:var(--text-secondary);

  line-height:1.8;
}

.card ul{

  margin-top:25px;

  padding-left:20px;

  color:#67e8f9;

  line-height:2;
}

/* =========================================
   ABOUT
========================================= */

.about{
  padding:120px 8%;
}

.stat-card h3{

  font-size:64px;

  color:var(--primary);
}

.stat-card p{

  margin-top:20px;

  color:var(--text-secondary);

  text-transform:uppercase;

  letter-spacing:2px;
}

/* =========================================
   PROCESS
========================================= */

.process-card span{

  font-size:38px;

  font-weight:900;

  color:var(--primary);
}

/* =========================================
   CONTACT
========================================= */

.contact{
  padding:120px 8%;
}

.contact-box{

  padding:100px 50px;

  border-radius:40px;

  text-align:center;

  background:linear-gradient(
  90deg,
  rgba(34,211,238,.08),
  rgba(34,211,238,.14),
  rgba(34,211,238,.08)
  );

  border:1px solid rgba(34,211,238,.12);
}

.contact-box h2{

  font-size:72px;

  line-height:1.2;
}

.contact-box p{

  margin-top:30px;

  color:var(--text-secondary);

  font-size:24px;
}

.contact-buttons{

  margin-top:50px;

  display:flex;

  justify-content:center;

  gap:20px;
}

/* =========================================
   FOOTER
========================================= */

footer{

  border-top:1px solid var(--border);

  padding:40px 8%;

  display:flex;

  justify-content:space-between;

  align-items:center;

  color:var(--text-secondary);
}

.footer-logo{

  font-size:24px;

  font-weight:700;
}

.footer-logo span{
  color:var(--primary);
}