/* ============================================================
   QORE · Design System v1.0
   "Entendemos antes de entregar."
   70% escuros · 20% bone · 10% iris — o roxo com parcimônia.
   ============================================================ */

/* ---------- FONTES (Geist self-hostada) ---------- */
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/Geist-Light.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/Geist-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/Geist-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/Geist-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/Geist-Bold.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:900; font-display:swap;
  src:url("../fonts/Geist-Black.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/GeistMono-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/GeistMono-Medium.woff2") format("woff2");
}

/* ---------- TOKENS ---------- */
:root{
  /* Paleta oficial */
  --void:    #08080A;   /* background */
  --surface: #0E0E12;   /* cards */
  --border:  #1F1F28;   /* divisores */
  --iris:    #9D6FFF;   /* accent — só o Q e detalhes */
  --bone:    #EEEDF5;   /* texto */

  /* Derivadas (texto secundário/muted, sem fugir da paleta) */
  --bone-60: rgba(238,237,245,.60);
  --bone-40: rgba(238,237,245,.40);
  --bone-24: rgba(238,237,245,.24);
  --iris-12: rgba(157,111,255,.12);
  --iris-30: rgba(157,111,255,.30);

  /* Tipografia */
  --font:  "Geist", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --section-pad: clamp(72px, 12vh, 140px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font); font-weight:300;
  background:var(--void); color:var(--bone);
  line-height:1.8; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--iris-30); color:var(--bone); }

/* ---------- HELPERS ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-pad); position:relative; }
.mono{
  font-family:var(--mono); font-weight:500; font-size:12px;
  letter-spacing:.22em; text-transform:lowercase; color:var(--iris);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:500; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--bone-40);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--iris); }
.muted{ color:var(--bone-60); }

/* Logo (Q sempre iris, resto bone) */
.logo{ font-family:var(--font); font-weight:900; letter-spacing:-.04em; color:var(--bone); }
.logo .q{ color:var(--iris); }

/* Brackets / cantos de moldura (assinatura visual do manual) */
.frame{ position:relative; }
.frame::before, .frame::after{
  content:""; position:absolute; width:18px; height:18px; pointer-events:none;
  border-color:var(--iris-30); border-style:solid; border-width:0;
}
.frame::before{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.frame::after{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center;
  height:64px;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
}
.nav.scrolled{
  background:rgba(8,8,10,.72);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--border);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.nav .logo{ font-size:22px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:lowercase; color:var(--bone-60);
  transition:color .2s var(--ease);
}
.nav-links a:hover{ color:var(--bone); }
.nav-links a.nav-cta{
  color:var(--bone); padding:9px 18px; border:1px solid var(--border);
  border-radius:999px; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.nav-links a.nav-cta:hover{ border-color:var(--iris); background:var(--iris-12); }
.nav-toggle{ display:none; background:none; border:0; color:var(--bone); cursor:pointer; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-top:64px; overflow:hidden;
}
/* grid sutil de fundo */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 78%);
  opacity:.5;
}
/* círculo roxo recuando (do manual) */
.hero-orb{
  position:absolute; z-index:0; top:-22%; right:-14%;
  width:min(760px, 80vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(157,111,255,.16), rgba(157,111,255,.04) 45%, transparent 70%);
  filter:blur(6px); pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; }
.hero-tag{ margin-bottom:28px; }
.hero h1{
  font-weight:900; letter-spacing:-.05em; line-height:.92;
  font-size:clamp(64px, 15vw, 180px); margin-bottom:6px;
}
.hero h1 .q{ color:var(--iris); }
.hero-slogan{
  font-weight:700; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(22px, 4vw, 38px); color:var(--bone);
  max-width:18ch; margin-bottom:24px;
}
.hero-desc{
  font-size:clamp(15px, 2vw, 18px); color:var(--bone-60);
  max-width:46ch; margin-bottom:40px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font); font-weight:500; font-size:15px;
  padding:14px 26px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .15s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--iris); color:#0A0712; font-weight:600; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ border-color:var(--border); color:var(--bone); }
.btn-ghost:hover{ border-color:var(--iris); background:var(--iris-12); }
.btn svg{ width:16px; height:16px; }

/* ============================================================
   TÍTULOS DE SEÇÃO
   ============================================================ */
.section-head{ max-width:640px; margin-bottom:clamp(40px,6vh,72px); }
.section-head h2{
  font-weight:700; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(34px, 5.5vw, 60px); margin-top:18px;
}
.section-head p{ margin-top:18px; color:var(--bone-60); font-size:clamp(15px,2vw,18px); }

/* ============================================================
   GRID DE CARDS (serviços / pilares)
   ============================================================ */
.grid{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--surface); padding:clamp(24px,3vw,36px);
  display:flex; flex-direction:column; gap:14px; min-height:200px;
  position:relative; transition:background .25s var(--ease);
}
.card:hover{ background:#13131A; }
.card .num{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--iris); }
.card h3{ font-weight:700; letter-spacing:-.01em; font-size:20px; }
.card p{ color:var(--bone-60); font-size:15px; line-height:1.7; }
.card .tag{
  margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:lowercase; color:var(--bone-40);
}

/* ============================================================
   PROCESSO (escuta → entende → entrega)
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
.step{ position:relative; padding-top:28px; border-top:1px solid var(--border); }
.step .mono{ display:block; margin-bottom:14px; }
.step h3{ font-weight:700; font-size:22px; letter-spacing:-.01em; margin-bottom:10px; }
.step p{ color:var(--bone-60); font-size:15px; }
.step::before{
  content:""; position:absolute; top:-1px; left:0; width:40px; height:2px; background:var(--iris);
}

/* ============================================================
   PRODUTOS / APPS (hub de links pros sistemas)
   ============================================================ */
.apps{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.app-card{
  display:flex; flex-direction:column; gap:16px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(24px,3vw,32px); position:relative;
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.app-card:hover{ border-color:var(--iris-30); transform:translateY(-3px); background:#101017; }
.app-card .app-top{ display:flex; align-items:center; justify-content:space-between; }
.app-thumb{
  width:46px; height:46px; border-radius:11px; flex:none;
  display:grid; place-items:center; font-family:var(--font); font-weight:900;
  background:var(--iris-12); color:var(--iris); font-size:22px; border:1px solid var(--iris-30);
}
.app-status{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid var(--border); color:var(--bone-40); }
.app-status.live{ color:var(--iris); border-color:var(--iris-30); }
.app-status.live::before{ content:"● "; }
.app-card h3{ font-weight:700; font-size:20px; letter-spacing:-.01em; }
.app-card p{ color:var(--bone-60); font-size:15px; flex:1; }
.app-meta{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border); }
.app-meta .kind{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:lowercase; color:var(--bone-40); }
.app-open{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--bone); transition:gap .2s var(--ease), color .2s; }
.app-card:hover .app-open{ color:var(--iris); gap:11px; }
.app-open svg{ width:15px; height:15px; }
.app-card.soon{ pointer-events:none; opacity:.55; }

/* ============================================================
   CTA FINAL (único uso de roxo em área grande)
   ============================================================ */
.cta{
  background:var(--iris); color:#0A0712; border-radius:calc(var(--radius) + 6px);
  padding:clamp(40px,7vw,88px); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
}
.cta::after{
  content:""; position:absolute; right:-60px; bottom:-120px; width:380px; height:380px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
  pointer-events:none;
}
.cta .mono{ color:#0A0712; opacity:.6; }
.cta h2{ font-weight:900; letter-spacing:-.03em; line-height:1; font-size:clamp(34px,6vw,64px); max-width:14ch; }
.cta p{ font-size:clamp(15px,2vw,18px); max-width:42ch; color:rgba(10,7,18,.78); }
.cta .btn-primary{ background:#0A0712; color:var(--bone); }
.cta .btn-primary:hover{ filter:brightness(1.25); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--border); padding-block:clamp(48px,7vh,80px); }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.footer .logo{ font-size:28px; }
.footer-slogan{ color:var(--bone-60); margin-top:12px; font-size:15px; max-width:24ch; }
.footer-cols{ display:flex; gap:clamp(40px,8vw,96px); flex-wrap:wrap; }
.footer-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-40); margin-bottom:16px; }
.footer-col a, .footer-col span{ display:block; color:var(--bone-60); font-size:15px; margin-bottom:10px; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--bone); }
.footer-bottom{ margin-top:clamp(40px,6vh,64px); padding-top:24px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; }
.footer-bottom span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--bone-40); text-transform:lowercase; }

/* ============================================================
   REVEAL (animação de entrada por scroll)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:28px; }
  .apps{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .grid-4{ grid-template-columns:1fr; }
  .nav-links{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(8,8,10,.96); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:8px var(--gutter) 20px; transform:translateY(-120%);
    transition:transform .3s var(--ease); align-items:stretch;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ padding:14px 0; border-bottom:1px solid var(--border); font-size:14px; }
  .nav-links a.nav-cta{ margin-top:14px; text-align:center; border-radius:999px; }
  .nav-toggle{ display:inline-flex; }
}