/* ============================================================
 * Staffball marketing pages shared styles (mkt-*)
 * Dark-first. Navy #1a1f2e + amber #F59E0B.
 * Used by index.html, precos.html, sobre.html
 * ============================================================ */

:root{
  --mkt-navy:#0f1420;
  --mkt-navy-2:#1a1f2e;
  --mkt-navy-3:#232937;
  --mkt-amber:#F59E0B;
  --mkt-amber-dk:#D97706;
  --mkt-amber-lt:rgba(245,158,11,.12);
  --mkt-text:#ffffff;
  --mkt-text-2:rgba(255,255,255,.7);
  --mkt-text-3:rgba(255,255,255,.45);
  --mkt-border:rgba(255,255,255,.08);
  --mkt-border-2:rgba(255,255,255,.14);
  --fd:'Space Grotesk',sans-serif;
  --fb:'DM Sans',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--mkt-navy);color:var(--mkt-text);font-family:var(--fb);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
body{overflow-x:hidden;}

/* ==================== NAV ==================== */
.mkt-nav{position:sticky;top:0;z-index:100;background:rgba(15,20,32,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--mkt-border);}
.mkt-nav-inner{max-width:1200px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.mkt-logo{font:700 22px var(--fd);letter-spacing:-.5px;display:flex;align-items:center;gap:10px;}
.mkt-logo .a{color:var(--mkt-text-3);}
.mkt-logo .b{color:var(--mkt-text);}
.mkt-logo .c{color:var(--mkt-amber);}
.mkt-logo .beta{font:600 9px var(--fd);letter-spacing:1.5px;color:var(--mkt-amber);background:var(--mkt-amber-lt);padding:3px 8px;border-radius:20px;text-transform:uppercase;margin-left:4px;}
.mkt-nav-links{display:flex;align-items:center;gap:28px;font-size:13px;color:var(--mkt-text-2);}
.mkt-nav-links a{transition:color .2s;position:relative;}
.mkt-nav-links a:hover{color:var(--mkt-text);}
.mkt-nav-links a.on{color:var(--mkt-text);}
.mkt-nav-links a.on::after{content:'';position:absolute;left:0;right:0;bottom:-22px;height:2px;background:var(--mkt-amber);}
.mkt-nav-cta{position:relative;}
.mkt-nav-cta-btn{background:var(--mkt-amber);color:#1a1f2e;padding:9px 18px;border-radius:8px;font:600 13px var(--fd);cursor:pointer;border:none;display:flex;align-items:center;gap:6px;transition:background .2s;}
.mkt-nav-cta-btn:hover{background:var(--mkt-amber-dk);}
.mkt-nav-cta-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--mkt-navy-2);border:1px solid var(--mkt-border-2);border-radius:12px;padding:8px;min-width:220px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,transform .2s;box-shadow:0 20px 40px rgba(0,0,0,.4);}
.mkt-nav-cta.open .mkt-nav-cta-menu{opacity:1;pointer-events:auto;transform:translateY(0);}
.mkt-nav-cta-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:8px;transition:background .2s;}
.mkt-nav-cta-menu a:hover{background:var(--mkt-navy-3);}
.mkt-nav-cta-menu a .tt{font:600 13px var(--fd);color:var(--mkt-text);}
.mkt-nav-cta-menu a .dd{font:400 11px var(--fb);color:var(--mkt-text-3);}
.mkt-mob-toggle{display:none;background:none;border:1px solid var(--mkt-border-2);color:var(--mkt-text);width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:18px;}

/* ==================== LAYOUT ==================== */
.mkt-section{padding:96px 32px;position:relative;}
.mkt-section-tight{padding:64px 32px;}
.mkt-container{max-width:1200px;margin:0 auto;}
.mkt-container-narrow{max-width:840px;margin:0 auto;}
.mkt-eyebrow{display:inline-block;font:600 10px var(--fd);letter-spacing:2px;color:var(--mkt-amber);background:var(--mkt-amber-lt);padding:5px 12px;border-radius:20px;text-transform:uppercase;margin-bottom:18px;}
.mkt-h1{font:700 clamp(36px,5vw,64px)/1.05 var(--fd);letter-spacing:-1.5px;margin-bottom:20px;}
.mkt-h1 em{font-style:normal;color:var(--mkt-amber);}
.mkt-h2{font:700 clamp(28px,3.6vw,44px)/1.1 var(--fd);letter-spacing:-1px;margin-bottom:16px;}
.mkt-h2 em{font-style:normal;color:var(--mkt-amber);}
.mkt-h3{font:600 20px var(--fd);letter-spacing:-.3px;margin-bottom:10px;}
.mkt-lead{font:400 clamp(15px,1.4vw,18px)/1.6 var(--fb);color:var(--mkt-text-2);margin-bottom:32px;max-width:640px;}

/* ==================== HERO (landing) ==================== */
.mkt-hero{padding:80px 32px 120px;position:relative;overflow:hidden;}
.mkt-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.9) 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.9) 0%,transparent 70%);pointer-events:none;}
.mkt-hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;pointer-events:none;}
.mkt-hero-orb-1{width:400px;height:400px;background:var(--mkt-amber);top:-100px;right:-100px;animation:mkt-float1 20s ease-in-out infinite;}
.mkt-hero-orb-2{width:500px;height:500px;background:#3b82f6;bottom:-200px;left:-150px;animation:mkt-float2 24s ease-in-out infinite;}
@keyframes mkt-float1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,40px) scale(1.1);}}
@keyframes mkt-float2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,-30px) scale(1.15);}}
.mkt-hero-content{position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto;}
.mkt-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.mkt-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:10px;font:600 14px var(--fd);cursor:pointer;transition:all .2s;border:none;text-decoration:none;}
.mkt-btn-primary{background:var(--mkt-amber);color:#1a1f2e;}
.mkt-btn-primary:hover{background:var(--mkt-amber-dk);transform:translateY(-1px);}
.mkt-btn-secondary{background:transparent;color:var(--mkt-text);border:1px solid var(--mkt-border-2);}
.mkt-btn-secondary:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.25);}
.mkt-hero-note{margin-top:40px;font-size:12px;color:var(--mkt-text-3);letter-spacing:.5px;}

/* ==================== PROBLEM section ==================== */
.mkt-problem{background:var(--mkt-navy-2);border-top:1px solid var(--mkt-border);border-bottom:1px solid var(--mkt-border);}
.mkt-problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;}
.mkt-problem-card{background:var(--mkt-navy-3);border:1px solid var(--mkt-border);border-radius:12px;padding:24px;}
.mkt-problem-ico{font-size:24px;margin-bottom:12px;display:block;}
.mkt-problem-card h3{font:600 14px var(--fd);margin-bottom:6px;color:var(--mkt-text);}
.mkt-problem-card p{font-size:13px;color:var(--mkt-text-3);line-height:1.5;}

/* ==================== HOW IT WORKS ==================== */
.mkt-how-toggle{display:inline-flex;background:var(--mkt-navy-3);border:1px solid var(--mkt-border);border-radius:999px;padding:4px;margin-bottom:48px;}
.mkt-how-toggle button{background:transparent;border:none;color:var(--mkt-text-3);padding:10px 22px;border-radius:999px;cursor:pointer;font:600 12px var(--fd);letter-spacing:.5px;transition:all .2s;}
.mkt-how-toggle button.on{background:var(--mkt-amber);color:#1a1f2e;}
.mkt-how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.mkt-how-step{position:relative;padding:32px 28px;background:var(--mkt-navy-2);border:1px solid var(--mkt-border);border-radius:16px;}
.mkt-how-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--mkt-amber-lt);color:var(--mkt-amber);border-radius:50%;font:700 13px var(--fd);margin-bottom:16px;}
.mkt-how-step h3{font:600 16px var(--fd);margin-bottom:8px;}
.mkt-how-step p{font-size:13px;line-height:1.6;color:var(--mkt-text-2);}

/* ==================== FEATURES ==================== */
.mkt-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
.mkt-feat{padding:32px;background:var(--mkt-navy-2);border:1px solid var(--mkt-border);border-radius:16px;transition:border-color .2s,transform .2s;}
.mkt-feat:hover{border-color:var(--mkt-border-2);transform:translateY(-2px);}
.mkt-feat-ico{width:40px;height:40px;background:var(--mkt-amber-lt);color:var(--mkt-amber);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;}
.mkt-feat h3{font:600 17px var(--fd);margin-bottom:8px;}
.mkt-feat p{font-size:13px;line-height:1.65;color:var(--mkt-text-2);}

/* ==================== PRICING CARDS ==================== */
.mkt-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;}
.mkt-price-grid-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto;}
.mkt-price{position:relative;padding:32px 28px;background:var(--mkt-navy-2);border:1px solid var(--mkt-border);border-radius:16px;transition:border-color .2s;display:flex;flex-direction:column;}
.mkt-price.featured{background:linear-gradient(180deg,rgba(245,158,11,.08),rgba(245,158,11,.02));border-color:rgba(245,158,11,.3);}
.mkt-price-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--mkt-amber);color:#1a1f2e;font:600 10px var(--fd);letter-spacing:1px;padding:4px 12px;border-radius:20px;text-transform:uppercase;}
.mkt-price-name{font:600 14px var(--fd);color:var(--mkt-text-3);letter-spacing:1.5px;text-transform:uppercase;}
.mkt-price.featured .mkt-price-name{color:var(--mkt-amber);}
.mkt-price-amt{font:700 36px var(--fd);margin:12px 0 4px;letter-spacing:-1px;}
.mkt-price-amt small{font:400 14px var(--fb);color:var(--mkt-text-3);}
.mkt-price-desc{font-size:12px;color:var(--mkt-text-3);margin-bottom:20px;min-height:36px;}
.mkt-price ul{list-style:none;padding:0;margin:0 0 24px;flex:1;}
.mkt-price ul li{font-size:13px;line-height:1.6;color:var(--mkt-text-2);padding:6px 0;display:flex;align-items:flex-start;gap:10px;}
.mkt-price ul li::before{content:'✓';color:var(--mkt-amber);font-weight:700;flex-shrink:0;}
.mkt-price ul li.off{color:var(--mkt-text-3);}
.mkt-price ul li.off::before{content:'–';color:var(--mkt-text-3);}
.mkt-price .mkt-btn{width:100%;justify-content:center;margin-top:auto;}

/* ==================== CTA BAND ==================== */
.mkt-cta-band{background:linear-gradient(135deg,var(--mkt-navy-2),var(--mkt-navy-3));border:1px solid var(--mkt-border-2);border-radius:24px;padding:56px 48px;text-align:center;position:relative;overflow:hidden;margin:96px auto;max-width:1000px;}
.mkt-cta-band::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:var(--mkt-amber);opacity:.08;border-radius:50%;filter:blur(60px);}
.mkt-cta-band h2{position:relative;}

/* ==================== FOOTER ==================== */
.mkt-footer{background:var(--mkt-navy);border-top:1px solid var(--mkt-border);padding:56px 32px 32px;}
.mkt-footer-inner{max-width:1200px;margin:0 auto;}
.mkt-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--mkt-border);}
.mkt-footer-brand p{font-size:13px;color:var(--mkt-text-3);line-height:1.6;margin-top:12px;max-width:320px;}
.mkt-footer-col h4{font:600 11px var(--fd);letter-spacing:1.5px;color:var(--mkt-text-3);text-transform:uppercase;margin-bottom:16px;}
.mkt-footer-col a{display:block;font-size:13px;color:var(--mkt-text-2);padding:5px 0;transition:color .2s;}
.mkt-footer-col a:hover{color:var(--mkt-amber);}
.mkt-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12px;color:var(--mkt-text-3);}

/* ==================== ABOUT page ==================== */
.mkt-about-story{font-size:16px;line-height:1.85;color:var(--mkt-text-2);}
.mkt-about-story p{margin-bottom:18px;}
.mkt-about-story strong{color:var(--mkt-text);font-weight:500;}
.mkt-founders{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px;}
.mkt-founder{padding:28px;background:var(--mkt-navy-2);border:1px solid var(--mkt-border);border-radius:16px;}
.mkt-founder-av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--mkt-amber),#D97706);display:flex;align-items:center;justify-content:center;font:700 18px var(--fd);color:#1a1f2e;margin-bottom:16px;}
.mkt-founder-name{font:600 17px var(--fd);margin-bottom:4px;}
.mkt-founder-role{font:400 12px var(--fb);color:var(--mkt-text-3);margin-bottom:12px;}
.mkt-founder-bio{font-size:13px;line-height:1.6;color:var(--mkt-text-2);}

/* ==================== FAQ (precos page) ==================== */
.mkt-faq{margin-top:64px;}
.mkt-faq-item{border-bottom:1px solid var(--mkt-border);padding:20px 0;}
.mkt-faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font:600 15px var(--fd);color:var(--mkt-text);}
.mkt-faq-q::after{content:'+';font-size:20px;color:var(--mkt-amber);transition:transform .2s;}
.mkt-faq-item.open .mkt-faq-q::after{transform:rotate(45deg);}
.mkt-faq-a{max-height:0;overflow:hidden;transition:max-height .3s;font-size:14px;line-height:1.7;color:var(--mkt-text-2);}
.mkt-faq-item.open .mkt-faq-a{max-height:300px;padding-top:12px;}

/* ==================== COMPARISON TABLE (precos) ==================== */
.mkt-compare{margin-top:64px;border:1px solid var(--mkt-border);border-radius:16px;overflow:hidden;background:var(--mkt-navy-2);}
.mkt-compare-head{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;background:var(--mkt-navy-3);padding:18px 24px;font:600 12px var(--fd);color:var(--mkt-text-3);letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--mkt-border);}
.mkt-compare-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:14px 24px;align-items:center;border-bottom:1px solid var(--mkt-border);font-size:13px;}
.mkt-compare-row:last-child{border-bottom:none;}
.mkt-compare-row .lbl{color:var(--mkt-text-2);}
.mkt-compare-row .val{color:var(--mkt-text);font-weight:500;}
.mkt-compare-row .val.no{color:var(--mkt-text-3);}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px){
  .mkt-nav-links{display:none;}
  .mkt-mob-toggle{display:flex;align-items:center;justify-content:center;}
  .mkt-nav-cta-btn{padding:8px 14px;font-size:12px;}
  .mkt-section{padding:64px 20px;}
  .mkt-hero{padding:56px 20px 80px;}
  .mkt-problem-grid{grid-template-columns:repeat(2,1fr);}
  .mkt-how-steps,.mkt-feat-grid,.mkt-price-grid{grid-template-columns:1fr;}
  .mkt-founders{grid-template-columns:1fr;}
  .mkt-footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .mkt-footer-bottom{flex-direction:column;gap:10px;text-align:center;}
  .mkt-cta-band{padding:40px 24px;margin:48px 16px;}
  .mkt-compare-head,.mkt-compare-row{grid-template-columns:1.5fr 1fr 1fr 1fr;padding:12px 16px;font-size:12px;}
}
@media (max-width: 500px){
  .mkt-problem-grid{grid-template-columns:1fr;}
  .mkt-footer-grid{grid-template-columns:1fr;}
  .mkt-hero-ctas{flex-direction:column;align-items:stretch;}
  .mkt-hero-ctas .mkt-btn{justify-content:center;}
  .mkt-compare-head,.mkt-compare-row{grid-template-columns:1fr 1fr;}
  .mkt-compare-head .col-director,.mkt-compare-row .col-director{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .mkt-hero-orb-1,.mkt-hero-orb-2{animation:none !important;}
}