/* ============================================================
   NEXPORT — DESIGN SYSTEM
   Inteligência que transforma importação em lucro.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  --color-navy:        #102845;
  --color-navy-light:  #163354;
  --color-navy-dark:   #0E1A2E;
  --color-blue:        #103A70;
  --color-blue-mid:    #1A4F96;
  --color-cyan:        #00C2FF;
  --color-cyan-dim:    #00A3D9;
  --color-cyan-glow:   rgba(0, 194, 255, 0.15);
  --color-white-ice:   #F8FAFC;
  --color-white:       #FFFFFF;
  --color-gray-100:    #F1F5F9;
  --color-gray-200:    #E5E7EB;
  --color-gray-300:    #D1D5DB;
  --color-gray-400:    #9CA3AF;
  --color-gray-500:    #6B7280;
  --color-gray-600:    #4B5563;
  --color-gray-700:    #374151;
  --color-gray-800:    #1F2937;
  --color-green:       #10B981;
  --color-green-dim:   #059669;
  --color-green-glow:  rgba(16, 185, 129, 0.15);
  --color-red:         #EF4444;
  --color-red-dim:     #DC2626;
  --color-red-glow:    rgba(239, 68, 68, 0.15);
  --color-yellow:      #F59E0B;
  --color-yellow-glow: rgba(245, 158, 11, 0.15);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  --space-1:  0.25rem;  --space-2:  0.5rem;
  --space-3:  0.75rem;  --space-4:  1rem;
  --space-5:  1.25rem;  --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;
  --space-12: 3rem;     --space-16: 4rem;
  --space-20: 5rem;     --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm:   4px;    --radius-md:   8px;
  --radius-lg:   12px;   --radius-xl:   16px;
  --radius-2xl:  24px;   --radius-full: 9999px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.12);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.16);
  --shadow-xl:    0 16px 64px rgba(0,0,0,.36), 0 8px 32px rgba(0,0,0,.2);
  --shadow-cyan:  0 0 32px rgba(0,194,255,.2), 0 0 64px rgba(0,194,255,.08);
  --shadow-green: 0 0 24px rgba(16,185,129,.25);
  --shadow-card:  0 2px 8px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06);

  --transition-fast:   150ms cubic-bezier(.4,0,.2,1);
  --transition-base:   250ms cubic-bezier(.4,0,.2,1);
  --transition-slow:   400ms cubic-bezier(.4,0,.2,1);
  --transition-spring: 500ms cubic-bezier(.34,1.56,.64,1);

  --z-dropdown: 100;  --z-sticky: 200;
  --z-overlay:  300;  --z-modal:  400;  --z-toast: 500;

  --container-max: 1280px;
  --sidebar-width: 260px;
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-white-ice);
  background-color: var(--color-navy-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

/* ─── LAYOUT ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto; margin-right: auto;
  padding-left: var(--space-6); padding-right: var(--space-6);
}
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: var(--space-2); }  .gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }  .gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }  .gap-12 { gap: var(--space-12); }
.grid   { display: grid; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100vh; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.overflow-hidden { overflow: hidden; }
.z-10 { z-index: 10; }

/* ─── SPACING ─────────────────────────────────────────────── */
.p-4  { padding: var(--space-4); }  .p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); } .px-6 { padding-inline: var(--space-6); }
.px-8 { padding-inline: var(--space-8); }
.py-4 { padding-block: var(--space-4); }  .py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }  .py-16{ padding-block: var(--space-16); }
.py-24{ padding-block: var(--space-24); } .py-32{ padding-block: var(--space-32); }
.mt-2 { margin-top: var(--space-2); }     .mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }     .mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }  .mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }  .mb-8 { margin-bottom: var(--space-8); }
.mb-12{ margin-bottom: var(--space-12); }

/* ─── TYPOGRAPHY ──────────────────────────────────────────── */
.font-display    { font-family: var(--font-display); }
.font-semibold   { font-weight: var(--weight-semibold); }
.font-bold       { font-weight: var(--weight-bold); }
.font-extrabold  { font-weight: var(--weight-extrabold); }
.font-medium     { font-weight: var(--weight-medium); }
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.tracking-tight  { letter-spacing: var(--tracking-tight); }
.tracking-wide   { letter-spacing: var(--tracking-wide); }
.text-xs  { font-size: var(--text-xs); }  .text-sm  { font-size: var(--text-sm); }
.text-base{ font-size: var(--text-base); } .text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }  .text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); } .text-6xl { font-size: var(--text-6xl); }
.text-7xl { font-size: var(--text-7xl); }

/* ─── COLORS ──────────────────────────────────────────────── */
.text-white     { color: var(--color-white); }
.text-white-ice { color: var(--color-white-ice); }
.text-cyan      { color: var(--color-cyan); }
.text-green     { color: var(--color-green); }
.text-red       { color: var(--color-red); }
.text-yellow    { color: var(--color-yellow); }
.text-gray-300  { color: var(--color-gray-300); }
.text-gray-400  { color: var(--color-gray-400); }
.text-gray-500  { color: var(--color-gray-500); }

.gradient-text {
  background: linear-gradient(135deg, var(--color-cyan) 0%, #60B8FF 50%, var(--color-white-ice) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-green {
  background: linear-gradient(135deg, var(--color-green) 0%, #34D399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── BORDER + RADIUS ─────────────────────────────────────── */
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
.border       { border: 1px solid rgba(255,255,255,.08); }
.border-cyan  { border: 1px solid rgba(0,194,255,.3); }
.border-green { border: 1px solid rgba(16,185,129,.3); }

/* ─── GLASS MORPHISM ──────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
}
.glass-dark {
  background: rgba(7,15,30,.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.06);
}

/* ─── BADGE ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.badge-cyan   { background: rgba(0,194,255,.12);   color: var(--color-cyan);   border: 1px solid rgba(0,194,255,.25); }
.badge-green  { background: rgba(16,185,129,.12);  color: var(--color-green);  border: 1px solid rgba(16,185,129,.25); }
.badge-red    { background: rgba(239,68,68,.12);   color: var(--color-red);    border: 1px solid rgba(239,68,68,.25); }
.badge-yellow { background: rgba(245,158,11,.12);  color: var(--color-yellow); border: 1px solid rgba(245,158,11,.25); }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-family: var(--font-body); font-size: var(--text-base);
  font-weight: var(--weight-semibold); line-height: 1;
  transition: all var(--transition-base);
  cursor: pointer; border: none; white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background var(--transition-fast); }
.btn:hover::before { background: rgba(255,255,255,.08); }

.btn-primary {
  background: linear-gradient(135deg, var(--color-cyan) 0%, #0099CC 100%);
  color: var(--color-navy-dark);
  box-shadow: 0 4px 24px rgba(0,194,255,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,194,255,.45); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: rgba(255,255,255,.06); color: var(--color-white-ice);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); transform: translateY(-1px); }

.btn-outline-cyan {
  background: transparent; color: var(--color-cyan);
  border: 1px solid rgba(0,194,255,.4);
}
.btn-outline-cyan:hover { background: rgba(0,194,255,.08); border-color: var(--color-cyan); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--color-gray-300); }
.btn-ghost:hover { color: var(--color-white); background: rgba(255,255,255,.05); }

.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); border-radius: var(--radius-xl); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-md); }
.btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--radius-md); }

/* ─── FORM ELEMENTS ───────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-gray-300); }
.form-input {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  color: var(--color-white-ice);
  transition: all var(--transition-fast); outline: none;
}
.form-input::placeholder { color: var(--color-gray-500); }
.form-input:focus {
  border-color: rgba(0,194,255,.5);
  background: rgba(0,194,255,.04);
  box-shadow: 0 0 0 3px rgba(0,194,255,.1);
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: var(--space-10);
}

/* ─── MISC ────────────────────────────────────────────────── */
.divider { height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
.glow-cyan  { box-shadow: var(--shadow-cyan); }
.glow-green { box-shadow: var(--shadow-green); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-navy-dark); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .text-7xl { font-size: var(--text-5xl); }
  .text-6xl { font-size: var(--text-4xl); }
  .text-5xl { font-size: var(--text-3xl); }
  .hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
  .container { padding-inline: var(--space-3); }
  .text-5xl { font-size: var(--text-2xl); }
  .text-4xl { font-size: var(--text-xl); }
}