/* ===================================================================
   keycaps.lafym.studio — identidade própria (dark/gamer, violeta)
   Reaproveita o DNA estrutural do institucional (cantos "+", labels mono,
   numeração em colchetes, tipografia Space Grotesk/Hanken/Space Mono).
   =================================================================== */
:root{
  --k-bg:#14121B;
  --k-bg-card:#1E1B29;
  --k-ink:#F2EFFB;
  --k-ink-soft:#B3ACC9;
  --k-ink-faint:#6F6889;
  --k-line:#2E2A40;
  --k-accent:#8B5CF6;
  --k-accent-deep:#6D3FD1;
  --k-lime:#C6F23A;
  --k-mono: 'Space Mono', ui-monospace, monospace;
  --k-display: 'Space Grotesk', -apple-system, sans-serif;
  --k-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--k-sans);background:var(--k-bg);color:var(--k-ink-soft);line-height:1.6;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.mono{font-family:var(--k-mono);}
.muted{color:var(--k-ink-soft);}
section{padding:60px 0;}
h1,h2,h3{font-family:var(--k-display);font-weight:700;color:var(--k-ink);margin:0 0 .5rem;letter-spacing:-0.01em;}

.eyebrow{font-family:var(--k-mono);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--k-accent);text-transform:uppercase;margin:0 0 16px;}
.eyebrow::before{content:"// ";}

.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--k-mono);font-weight:600;font-size:14px;padding:14px 22px;cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--k-accent);color:#fff;}
.btn-primary:hover{background:var(--k-accent-deep);}
.btn-outline{background:transparent;color:var(--k-ink);border-color:var(--k-line);}
.btn-outline:hover{border-color:var(--k-accent);}
.btn-whatsapp{background:var(--k-accent);color:#fff;border:none;width:100%;padding:14px;font-size:14px;font-weight:600;font-family:var(--k-mono);cursor:pointer;}
.btn-whatsapp:hover{background:var(--k-accent-deep);}

/* Hero com mockup de keycap */
.hero{padding:80px 0 64px;}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;}
.hero h1{font-size:42px;line-height:1.15;}
.hero h1 .accent{color:var(--k-lime);}
.hero p.sub{font-size:16px;max-width:480px;margin:18px 0 28px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}

.keycap-demo{display:flex;gap:14px;justify-content:center;align-items:flex-end;}
.keycap{background:var(--k-bg-card);border:1px solid var(--k-line);border-bottom:4px solid var(--k-line);border-radius:8px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-family:var(--k-mono);color:var(--k-ink-faint);font-size:14px;}
.keycap.featured{width:96px;height:96px;border-color:var(--k-accent);border-bottom-color:var(--k-accent-deep);background:#241F38;position:relative;}
.keycap.featured .keycap-icon{width:42px;height:42px;}
.keycap.featured .keycap-letter{position:absolute;bottom:6px;right:8px;font-size:10px;color:var(--k-ink-faint);}

/* Processo */
.process-band{background:var(--k-bg-card);border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line);}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.process-step{border-left:1px solid var(--k-line);padding:0 22px;}
.process-step:first-child{border-left:none;padding-left:0;}
.step-num{font-family:var(--k-mono);color:var(--k-accent);font-size:13px;margin-bottom:8px;}
.process-step h3{font-size:17px;margin-bottom:6px;}
.process-step p{font-size:13px;color:var(--k-ink-soft);margin:0;}

/* Tipos de ícone */
.icon-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.icon-type-card{position:relative;background:var(--k-bg-card);border:1px solid var(--k-line);padding:22px;}
.icon-type-card .corner{position:absolute;font-family:var(--k-mono);font-size:11px;color:var(--k-accent);}
.icon-type-card .corner.tl{top:8px;left:10px;} .icon-type-card .corner.tr{top:8px;right:10px;}
.icon-type-card h3{font-size:15px;margin-bottom:6px;}
.icon-type-card p{font-size:12px;color:var(--k-ink-soft);margin:0;}

/* Exemplos (tabela de binds) */
.example-table{width:100%;border-collapse:collapse;margin-top:10px;}
.example-table th{font-family:var(--k-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--k-ink-faint);text-align:left;padding:10px 14px;border-bottom:1px solid var(--k-line);}
.example-table td{padding:14px;border-bottom:1px solid var(--k-line);font-size:14px;}
.example-table .bind-cell{font-family:var(--k-mono);color:var(--k-lime);font-weight:700;}
.example-table .game-cell{color:var(--k-ink-faint);font-family:var(--k-mono);font-size:12px;}

/* CTA band */
.cta-band{background:var(--k-accent);color:#1A1030;text-align:center;padding:64px 0;}
.cta-band h2{color:#1A1030;font-size:30px;max-width:540px;margin:0 auto 14px;}
.cta-band p{color:#3A2A5C;max-width:460px;margin:0 auto 26px;font-size:15px;}
.cta-band .btn-primary{background:#1A1030;color:#fff;}
.cta-band .btn-primary:hover{background:#0D0818;}

/* Builder (criar meu set) */
.keyrow{display:grid;grid-template-columns:90px 1fr 1fr auto;gap:10px;align-items:end;margin-bottom:10px;}
.keyrow input,.keyrow select{width:100%;}
.keyrow .remove-key{background:transparent;border:1px solid var(--k-line);color:var(--k-ink-faint);border-radius:6px;padding:9px 12px;cursor:pointer;font-family:var(--k-mono);font-size:12px;}
.add-key-btn{align-self:flex-start;background:transparent;border:1px dashed var(--k-line);color:var(--k-ink-soft);border-radius:6px;padding:10px 16px;cursor:pointer;font-family:var(--k-mono);font-size:13px;margin-bottom:14px;}
.add-key-btn:hover{border-color:var(--k-accent);color:var(--k-ink);}
.form-grid{display:flex;flex-direction:column;gap:14px;max-width:640px;}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--k-ink-faint);font-weight:600;font-family:var(--k-mono);text-transform:uppercase;letter-spacing:.04em;}
.form-grid input,.form-grid select,.form-grid textarea{padding:10px 12px;border:1px solid var(--k-line);border-radius:6px;font-size:14px;font-family:var(--k-sans);color:var(--k-ink);background:var(--k-bg-card);}
.field-hint{font-size:12px;color:var(--k-ink-faint);font-weight:400;text-transform:none;font-family:var(--k-sans);margin:-4px 0 0;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--k-line);padding:16px 0;}
.faq-item summary{cursor:pointer;font-family:var(--k-display);font-weight:600;color:var(--k-ink);font-size:15px;}
.faq-item p{margin:10px 0 0;color:var(--k-ink-soft);font-size:14px;}

.coming-soon{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .process-grid,.icon-type-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .process-step{border-left:none;padding-left:0;}
  .keyrow{grid-template-columns:1fr;}
}