/* ============================================================
   AI NATIVE — Brand Kit (identidade visual "Open PRO")
   Preto puro · Nacelle · Índigo #625FF · glows em gradiente
   Criado 09/08/2026. Importar em toda peça: <link rel="stylesheet" href="ai-native-brand.css">
   ============================================================ */

/* ---- Fontes (Nacelle, locais em open-pro/assets) ---- */
@font-face{font-family:'Nacelle';font-weight:400;font-style:normal;font-display:swap;
  src:url('open-pro/assets/6c3554e272ee60d6_nacelle_regular-s.p.2wytlo23y5.woff2') format('woff2');}
@font-face{font-family:'Nacelle';font-weight:600;font-style:normal;font-display:swap;
  src:url('open-pro/assets/1097fd903120bdc1_nacelle_semibold-s.p.22wukox__.woff2') format('woff2');}
@font-face{font-family:'Nacelle';font-weight:400;font-style:italic;font-display:swap;
  src:url('open-pro/assets/167d8ddbd5e3be75_nacelle_italic-s.p.27j-spn4lcl.woff2') format('woff2');}
@font-face{font-family:'Nacelle';font-weight:600;font-style:italic;font-display:swap;
  src:url('open-pro/assets/795abc3e4eb7b08c_nacelle_semibolditalic-s.p.3e7.woff2') format('woff2');}

/* ---- Tokens ---- */
:root{
  --black:#000000;
  --gray-950:#030712; --gray-900:#101828; --gray-800:#1e2939; --gray-700:#364153;
  --gray-600:#4a5565; --gray-500:#6a7282; --gray-400:#99a1af; --gray-300:#d1d5dc;
  --gray-200:#e5e7eb; --gray-50:#f9fafb;
  --indigo-500:#625fff; --indigo-400:#7d87ff; --indigo-300:#a4b3ff;
  --indigo-200:#c7d2ff; --indigo-100:#e0e7ff;
  --violet:#8d54ff; --cyan:#00bcfe; --green:#3ecf8e; --red:#ff6b6b;

  --bg:var(--black);
  --surface:var(--gray-950);
  --border:rgba(99,95,255,.14);
  --body:rgba(199,210,255,.65);      /* indigo-200/65 — texto padrão */
  --heading:var(--gray-50);
  --font-display:'Nacelle',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--body);font-family:var(--font-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:var(--indigo-500);color:#fff;}
a{color:inherit;}
.wrap{max-width:840px;margin:0 auto;padding:0 20px;}
.center{text-align:center;}

/* ---- Tipografia ---- */
.display{font-family:var(--font-display);font-weight:600;color:var(--heading);
  line-height:1.08;letter-spacing:-.02em;
  background:linear-gradient(to right,var(--gray-200),var(--indigo-200),var(--gray-50),var(--indigo-300),var(--gray-200));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ai-gradient 6s linear infinite;}
@keyframes ai-gradient{to{background-position:200% center;}}
h1.display{font-size:clamp(34px,7.5vw,60px);}
h2.display{font-size:clamp(26px,5.5vw,40px);}
h3{font-family:var(--font-display);font-weight:600;color:var(--gray-50);font-size:19px;letter-spacing:-.01em;}
p{font-size:17px;color:var(--body);margin-bottom:16px;}
p strong,p b,strong,b{color:var(--gray-200);font-weight:600;}
.lead{font-size:20px;color:var(--indigo-200);opacity:.9;}
.muted{color:var(--gray-500);}
em,.italic{font-family:var(--font-display);font-style:italic;color:var(--indigo-300);}

/* label mono (kicker) */
.kicker{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(to right,var(--indigo-300),var(--indigo-100));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:20px;}

/* ---- Botões ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;text-decoration:none;
  padding:13px 28px;border-radius:9px;
  background:linear-gradient(to top,#4f46e5,var(--indigo-500));
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.16),0 10px 30px -10px rgba(99,95,255,.6);
  transition:transform .15s,box-shadow .15s,filter .15s;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.22),0 16px 40px -10px rgba(99,95,255,.75);}
.btn-lg{font-size:18px;padding:17px 40px;border-radius:11px;}
.btn-ghost{background:transparent;border:1px solid var(--gray-800);color:var(--gray-200);box-shadow:none;}
.btn-ghost:hover{border-color:var(--indigo-500);filter:none;}

/* ---- Superfícies ---- */
.card{background:linear-gradient(180deg,rgba(30,41,57,.35),rgba(3,7,18,.4));
  border:1px solid var(--gray-800);border-radius:14px;padding:24px;}
.hairline{height:1px;border:none;
  background:linear-gradient(to right,transparent,rgba(148,163,185,.25),transparent);
  margin:0;}

/* ---- Glow (blurred shape) ---- */
.glow{position:absolute;z-index:0;pointer-events:none;filter:blur(60px);opacity:.5;border-radius:50%;}
.glow-indigo{background:radial-gradient(circle,var(--indigo-500),transparent 70%);}
.glow-violet{background:radial-gradient(circle,var(--violet),transparent 70%);}

/* ---- Selo/símbolo ---- */
.symbol{width:56px;height:56px;}
.symbol svg polygon{fill:var(--indigo-400);}