/* ============================================================
   skrypt_ — engenharia comercial
   Stylesheet — segue os tokens do manual de marca (skrypt-manual-de-marca)
   ============================================================ */

:root{
  --ink:#11141B;
  --ink-soft:#171B25;
  --ink-line:#262C3A;
  --text-light:#ECE9E2;
  --comment:#6E7681;
  --comment-light:#8B8576;
  --cursor:#FF7A52;
  --amber:#FFC857;
  --mint:#6FCF97;
  --violet:#9D8DF1;

  --mono:'JetBrains Mono', ui-monospace, monospace;
  --sans:'Inter', ui-sans-serif, system-ui, sans-serif;

  --max: 1040px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text-light);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
img,svg{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--cursor); color:var(--ink);
  font-family:var(--mono); font-size:0.85rem;
  padding:0.6rem 1rem; z-index:200;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--cursor); outline-offset:2px; }

.text-cursor{ color:var(--cursor); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;
  font-family:var(--mono); font-size:0.9rem;
  padding:0.75rem 1.3rem; border-radius:8px;
  transition:opacity 0.15s ease, background-color 0.15s ease;
}
.btn-cursor{ background:var(--cursor); color:var(--ink); font-weight:600; }
.btn-cursor:hover{ opacity:0.9; }
.btn-outline{ border:1px solid var(--ink-line); color:var(--text-light); }
.btn-outline:hover{ background:var(--ink-soft); }

/* ---------------- header ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(17,20,27,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ink-line);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:0 1.5rem;
  height:64px;
  display:flex; align-items:center; gap:1.75rem;
}
.brand{
  font-family:var(--mono); font-weight:700; font-size:1.05rem;
  color:var(--text-light); flex:0 0 auto;
}
.cursor{ color:var(--cursor); animation:blink 1.1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.main-nav{ display:flex; align-items:center; gap:1.6rem; flex:1 1 auto; }
.main-nav a{
  font-size:0.92rem; color:var(--comment);
  transition:color 0.15s ease;
}
.main-nav a:hover{ color:var(--text-light); }

.header-cta{ flex:0 0 auto; padding:0.55rem 1.1rem; font-size:0.85rem; }

.nav-toggle{
  display:none; flex:0 0 auto;
  width:36px; height:32px;
  flex-direction:column; justify-content:center; gap:6px;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background:var(--text-light); border-radius:2px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:760px){
  .main-nav{
    position:absolute; top:64px; left:0; right:0;
    background:var(--ink-soft); border-bottom:1px solid var(--ink-line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:0.5rem 1.5rem 1rem;
    display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:0.7rem 0; width:100%; border-bottom:1px solid var(--ink-line); }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }
}

/* ---------------- hero ---------------- */
.hero{ padding:5rem 0 4rem; }
.eyebrow{
  font-family:var(--mono); font-size:0.85rem; color:var(--comment);
  margin:0 0 1.2rem;
}
.logo-mark{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(2.6rem, 9vw, 6rem);
  letter-spacing:-0.02em; line-height:0.95;
  color:var(--text-light);
}
.hero-lede{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(1.1rem, 2.2vw, 1.5rem);
  max-width:36ch; margin-top:1.6rem;
}
.hero-lede em{ color:var(--cursor); font-style:italic; }
.hero-sub{
  color:var(--comment-light); max-width:62ch;
  margin-top:1.1rem; font-size:1rem;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.9rem; }
.hero-quote{
  font-family:var(--mono); font-size:0.9rem; font-style:italic;
  color:var(--comment); max-width:64ch; margin-top:2.3rem;
}

.capability-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem;
  margin-top:2.3rem;
}
@media (min-width:600px){ .capability-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:860px){ .capability-grid{ grid-template-columns:repeat(4,1fr); } }
.capability-grid li{
  font-family:var(--mono); font-size:0.78rem;
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:6px;
  padding:0.6rem 0.75rem;
}
.dot.mint{ color:var(--mint); margin-right:0.4rem; }

.stack-label{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--comment); margin-top:2.8rem;
}
.stack-list{ display:flex; flex-wrap:wrap; gap:0.4rem 1.3rem; margin-top:0.7rem; }
.stack-list li{
  font-family:var(--mono); font-size:0.9rem; color:var(--comment-light);
  transition:color 0.15s ease;
}
.stack-list li:hover{ color:var(--cursor); }

/* ---------------- generic file sections ---------------- */
.file-section{ padding:3.6rem 0; border-top:1px solid var(--ink-line); }
.file-title{
  font-family:var(--mono); font-size:0.9rem; font-weight:600;
  color:var(--comment); margin-bottom:1.4rem;
}
.section-title{
  font-family:var(--sans); font-weight:700; line-height:1.2;
  font-size:clamp(1.7rem, 4vw, 2.4rem);
  max-width:22ch;
}
.section-lede{
  color:var(--comment-light); max-width:64ch;
  margin-top:1rem; font-size:1rem;
}
.fine-print{
  font-family:var(--mono); font-size:0.8rem; color:var(--comment-light);
  max-width:72ch; margin-top:1.6rem;
}
.mini-label{
  font-family:var(--mono); font-size:0.78rem; color:var(--comment);
  margin-top:1.3rem;
}

/* ---------------- diagnostico ---------------- */
.problem-list{
  margin-top:1.6rem;
  display:grid; gap:0;
}
@media (min-width:700px){ .problem-list{ grid-template-columns:1fr 1fr; column-gap:2rem; } }
.problem-list li{
  font-family:var(--mono); font-size:0.92rem;
  border-bottom:1px solid var(--ink-line);
  padding:0.8rem 0; display:flex; gap:0.75rem; align-items:baseline;
}
.problem-list .num{ color:var(--comment); }
.problem-list .bang{ color:var(--cursor); }

/* ---------------- metodologia ---------------- */
.steps-list{ margin-top:2rem; display:flex; flex-direction:column; gap:0.75rem; }
.steps-list li{
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:10px;
  padding:1.25rem; display:grid; gap:1.1rem; align-items:start;
}
@media (min-width:700px){ .steps-list li{ grid-template-columns:auto 1fr; } }
.step-tag{ font-family:var(--mono); color:var(--cursor); font-size:1.1rem; }
.step-title{ font-family:var(--sans); font-weight:700; font-size:1.1rem; }
.step-desc{ color:var(--comment-light); font-size:0.92rem; margin-top:0.3rem; }

/* ---------------- planos ---------------- */
.plans-grid{ margin-top:2rem; display:grid; gap:1rem; }
@media (min-width:760px){ .plans-grid{ grid-template-columns:1fr 1fr; } }

.plan-card{
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:14px;
  padding:1.6rem; position:relative;
  display:flex; flex-direction:column;
}
.plan-card.featured{ border-color:var(--cursor); }
.featured-tag{
  position:absolute; top:-0.85rem; left:1.5rem;
  font-family:var(--mono); font-size:0.7rem;
  background:var(--cursor); color:var(--ink);
  padding:0.15rem 0.55rem; border-radius:4px;
}
.plan-head{ display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; }
.plan-head h3{ font-family:var(--mono); font-weight:700; font-size:1.5rem; }
.token-amber .plan-head h3{ color:var(--amber); }
.token-mint .plan-head h3{ color:var(--mint); }
.token-violet .plan-head h3{ color:var(--violet); }
.token-cursor .plan-head h3{ color:var(--cursor); }
.plan-days{ font-family:var(--mono); font-size:0.78rem; color:var(--comment); white-space:nowrap; }
.plan-price{ font-family:var(--mono); font-weight:700; font-size:1.9rem; margin-top:0.7rem; }
.plan-desc{ color:var(--comment-light); font-size:0.92rem; margin-top:0.5rem; }

.chev-list{ margin-top:0.4rem; display:flex; flex-direction:column; gap:0.35rem; }
.chev-list li{ font-size:0.9rem; display:flex; gap:0.5rem; }
.token-amber .chev{ color:var(--amber); }
.token-mint .chev{ color:var(--mint); }
.token-violet .chev{ color:var(--violet); }
.token-cursor .chev{ color:var(--cursor); }

.plus-list{ margin-top:0.4rem; display:flex; flex-direction:column; gap:0.35rem; }
.plus-list li{ font-size:0.9rem; display:flex; gap:0.5rem; }
.plus{ color:var(--mint); }

.plan-meetings{
  margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--ink-line);
}
.token-amber .plan-meetings{ border-top-color:rgba(255,200,87,0.4); }
.token-mint .plan-meetings{ border-top-color:rgba(111,207,151,0.4); }
.token-violet .plan-meetings{ border-top-color:rgba(157,141,241,0.4); }
.token-cursor .plan-meetings{ border-top-color:rgba(255,122,82,0.4); }
.plan-meetings p:last-child{ font-size:0.9rem; margin-top:0.3rem; min-height:2.4rem; }

.plan-btn{ margin-top:1.4rem; text-align:center; }

.extras-grid{ margin-top:1.4rem; display:grid; gap:1rem; }
@media (min-width:700px){ .extras-grid{ grid-template-columns:1fr 1fr; } }
.extra-card{
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:10px;
  padding:1.25rem;
}
.extra-title{ font-family:var(--sans); font-weight:600; }
.extra-price{ font-family:var(--mono); font-size:0.9rem; color:var(--cursor); margin-top:0.3rem; }
.extra-desc{ color:var(--comment-light); font-size:0.9rem; margin-top:0.5rem; }

/* ---------------- módulos ---------------- */
.modules-grid{ margin-top:2rem; display:grid; gap:0.75rem; }
@media (min-width:600px){ .modules-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .modules-grid{ grid-template-columns:repeat(3,1fr); } }
.module-card{
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:10px;
  padding:1.25rem; transition:border-color 0.15s ease;
}
.module-card:hover{ border-color:rgba(255,122,82,0.5); }
.module-title{ font-family:var(--sans); font-weight:700; }
.module-price{ font-family:var(--mono); font-size:0.88rem; color:var(--cursor); margin-top:0.3rem; }
.module-desc{ color:var(--comment-light); font-size:0.9rem; margin-top:0.5rem; }

/* ---------------- suporte ---------------- */
.support-grid{ margin-top:2rem; display:grid; gap:0.75rem; }
@media (min-width:700px){ .support-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .support-grid{ grid-template-columns:repeat(3,1fr); } }
.support-card{
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:10px;
  padding:1.1rem;
}
.support-title{ font-family:var(--sans); font-weight:700; }
.support-price{ font-family:var(--mono); font-size:0.88rem; color:var(--amber); margin-top:0.3rem; }
.support-desc{ color:var(--comment-light); font-size:0.9rem; margin-top:0.5rem; }

/* ---------------- faq ---------------- */
.faq-list{
  margin-top:2rem; border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line);
}
.faq-item{ border-bottom:1px solid var(--ink-line); padding:1rem 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; gap:0.75rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .chev{ font-family:var(--mono); color:var(--cursor); margin-top:0.15rem; }
.faq-q{ font-family:var(--sans); font-weight:600; flex:1; }
.faq-toggle{
  font-family:var(--mono); color:var(--comment);
  transition:transform 0.2s ease;
}
.faq-item[open] .faq-toggle{ transform:rotate(45deg); }
.faq-a{
  color:var(--comment-light); font-size:0.92rem;
  margin-top:0.75rem; padding-left:1.85rem; max-width:72ch;
}

.datacrazy-banner{
  margin-top:2.5rem;
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:12px;
  padding:1.6rem;
}
.db-flag{ font-family:var(--mono); font-size:0.88rem; color:var(--mint); }
.datacrazy-banner h3{ font-family:var(--sans); font-weight:700; font-size:1.25rem; margin-top:0.5rem; }
.db-desc{ color:var(--comment-light); font-size:0.9rem; margin-top:0.5rem; max-width:60ch; }
.db-code{ font-family:var(--mono); font-size:0.9rem; margin-top:0.8rem; }
.datacrazy-banner .btn{ margin-top:1rem; }

/* ---------------- contato ---------------- */
.contact-form{
  margin-top:2rem;
  background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:14px;
  padding:1.6rem;
  display:grid; gap:1rem;
  font-family:var(--mono); font-size:0.9rem;
}
@media (min-width:700px){ .contact-form{ grid-template-columns:1fr 1fr; } }
.field-wide{ grid-column:1 / -1; }
.field label{ color:var(--comment); display:block; margin-bottom:0.4rem; }
.field input, .field select, .field textarea{
  width:100%; background:var(--ink); border:1px solid var(--ink-line); border-radius:6px;
  padding:0.65rem 0.8rem; color:var(--text-light);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--cursor); outline:none;
}
.submit-btn{
  background:var(--cursor); color:var(--ink); font-weight:700;
  border-radius:8px; padding:0.85rem; text-align:center;
  transition:opacity 0.15s ease;
}
.submit-btn:hover{ opacity:0.9; }
.form-note{ color:var(--comment-light); font-size:0.78rem; }

.whats-link{
  margin-top:1.6rem; display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--mono); font-size:0.9rem; color:var(--mint);
  transition:color 0.15s ease;
}
.whats-link:hover{ color:var(--cursor); }

/* ---------------- footer ---------------- */
.site-footer{ border-top:1px solid var(--ink-line); padding:2rem 0 3rem; }
.footer-inner{
  display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:space-between;
  font-family:var(--mono); font-size:0.78rem; color:var(--comment);
}