/* =========================================================
   PROTOCOLO 15X — Landing Page
   Preto + Metal + Dourado
   ========================================================= */

:root{
  --black-main:#050505;
  --black-alt:#0D0D0D;
  --graphite:#1A1A1A;
  --graphite-border:#2A2A2A;
  --silver:#C7C7C7;
  --light-gray:#E5E5E5;
  --white:#FFFFFF;
  --gold:#D6A62E;
  --gold-bright:#F2C94C;

  --font-title:'Sora', 'Manrope', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;

  --container-w:1180px;
  --radius:16px;
  --transition:220ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black-main);
  color:var(--light-gray);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,p{margin:0;}

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 20px;
}

.text-gold{color:var(--gold);}
.text-silver{color:var(--silver);}

.only-desktop{display:none;}

/* -------------------- Brand marks -------------------- */
.mark-15{
  font-family:var(--font-title);
  font-weight:800;
  background:linear-gradient(180deg,#FFFFFF 0%, #C7C7C7 45%, #8A8A8A 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.mark-x{
  font-family:var(--font-title);
  font-weight:800;
  background:linear-gradient(180deg,var(--gold-bright) 0%, var(--gold) 60%, #A87A1B 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 24px rgba(214,166,46,.35);
}

.brand-mark{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-size:26px;
  letter-spacing:-0.5px;
}
.brand-word{
  font-family:var(--font-title);
  font-weight:700;
  font-size:14px;
  letter-spacing:2.5px;
  color:var(--light-gray);
}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:10px;
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:0.3px;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition);
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, #B98A22);
  color:#1a1204;
  box-shadow:0 8px 24px rgba(214,166,46,.28);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(242,201,76,.4);
  background:linear-gradient(135deg, #FFDE7A, var(--gold-bright) 55%, var(--gold));
}
.btn-gold:active{transform:translateY(0);}

.btn-outline-gold{
  background:transparent;
  border:1.5px solid var(--gold);
  color:var(--gold-bright);
}
.btn-outline-gold:hover{
  background:rgba(214,166,46,.1);
}

.btn-ghost{
  background:transparent;
  color:var(--silver);
  font-weight:600;
}
.btn-ghost:hover{color:var(--white);}

.btn-small{padding:10px 18px;font-size:14px;}
.btn-large{padding:17px 30px;font-size:16px;}
.btn-full{width:100%;}

/* -------------------- Header -------------------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  padding:16px 0;
  background:rgba(5,5,5,0);
  border-bottom:1px solid transparent;
  transition:background var(--transition), border-color var(--transition), padding var(--transition);
}
.site-header.scrolled{
  background:rgba(5,5,5,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--graphite-border);
  padding:12px 0;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-cta{display:none;}

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 0 80px;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-1;}
.grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(199,199,199,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,199,199,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 80%);
}
.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.35;
}
.glow-gold{
  width:480px;height:480px;
  background:var(--gold);
  top:-120px; right:-140px;
}
.glow-silver{
  width:420px;height:420px;
  background:var(--silver);
  bottom:-160px; left:-140px;
  opacity:.12;
}
.orbit-path{
  position:absolute;
  top:50%;left:50%;
  width:640px;height:640px;
  transform:translate(-50%,-50%);
  opacity:.25;
}
.orbit-path circle{
  fill:none;
  stroke:url(#none);
  stroke:var(--gold);
  stroke-width:.6;
  stroke-dasharray:2 10;
}

.hero-inner{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-logo{
  width:min(360px, 78vw);
  height:auto;
  margin-bottom:8px;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.6));
}
.hero-title{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(30px, 8vw, 54px);
  line-height:1.12;
  color:var(--white);
  letter-spacing:-0.5px;
  margin-top:8px;
}
.hero-subtitle{
  margin-top:22px;
  max-width:620px;
  font-size:clamp(15px,3.6vw,18px);
  color:var(--silver);
}
.hero-cta{
  margin-top:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.cta-note{
  font-size:13px;
  color:#8a8a8a;
  letter-spacing:.3px;
}

.scroll-cue{
  position:absolute;
  bottom:28px;left:50%;
  transform:translateX(-50%);
  width:22px;height:36px;
  border:1.5px solid var(--graphite-border);
  border-radius:20px;
}
.scroll-cue span{
  position:absolute;
  top:6px;left:50%;
  width:3px;height:8px;
  background:var(--gold);
  border-radius:3px;
  transform:translateX(-50%);
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{opacity:1;top:6px;}
  70%{opacity:0;top:18px;}
  100%{opacity:0;top:6px;}
}

/* -------------------- Sections -------------------- */
.section{
  position:relative;
  padding:88px 0;
}
.section-alt{background:var(--black-alt);}

.eyebrow{
  display:block;
  text-align:center;
  font-family:var(--font-title);
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.section-title{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(26px, 6.4vw, 40px);
  line-height:1.18;
  text-align:center;
  color:var(--white);
  letter-spacing:-.3px;
  max-width:780px;
  margin:0 auto;
}
.section-title-sm{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(22px,5vw,28px);
  line-height:1.25;
  color:var(--white);
  margin-bottom:24px;
}
.section-lead{
  text-align:center;
  max-width:600px;
  margin:20px auto 0;
  color:var(--silver);
  font-size:clamp(15px,3.6vw,17px);
}
.transition-line{
  text-align:center;
  font-size:clamp(17px,4vw,21px);
  color:var(--light-gray);
  max-width:600px;
  margin:44px auto 0;
  font-family:var(--font-title);
  font-weight:600;
}

/* -------------------- Objection cards -------------------- */
.objection-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.objection-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--black-main);
  border:1px solid var(--graphite-border);
  border-radius:var(--radius);
  padding:18px 20px;
  transition:border-color var(--transition), transform var(--transition);
}
.objection-card:hover{
  border-color:rgba(214,166,46,.35);
  transform:translateY(-2px);
}
.objection-icon{
  flex:none;
  width:30px;height:30px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(199,199,199,.08);
  color:#8a8a8a;
  font-size:13px;
}
.objection-card p{
  font-size:15px;
  color:var(--light-gray);
  font-style:italic;
}

/* -------------------- Steps flow -------------------- */
.steps-flow{
  margin-top:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.step-item{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--graphite);
  border:1px solid var(--graphite-border);
  border-radius:14px;
  padding:16px 26px;
  width:100%;
  max-width:340px;
}
.step-num{
  font-family:var(--font-title);
  font-weight:800;
  font-size:14px;
  color:var(--black-main);
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.step-label{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--white);
  font-size:15px;
}
.step-connector{
  width:2px;
  height:32px;
  background:linear-gradient(180deg, var(--gold), rgba(214,166,46,.1));
}

/* -------------------- Two column (para quem é / não é) -------------------- */
.two-col{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
}
.fit-list li{
  position:relative;
  padding:12px 0 12px 34px;
  border-bottom:1px solid var(--graphite-border);
  font-size:15px;
  color:var(--light-gray);
}
.fit-list li:last-child{border-bottom:none;}
.fit-list li::before{
  position:absolute;
  left:0;top:12px;
  font-family:var(--font-title);
  font-weight:800;
  font-size:14px;
}
.fit-yes li::before{
  content:"✓";
  color:var(--gold);
}
.fit-no li::before{
  content:"✕";
  color:#6b6b6b;
}
.fit-no li{color:#9a9a9a;}

/* -------------------- Diferenciais -------------------- */
.diff-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.diff-card{
  background:var(--black-alt);
  border:1px solid var(--graphite-border);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.diff-card:hover{
  transform:translateY(-4px);
  border-color:rgba(214,166,46,.4);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.diff-icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:12px;
  background:rgba(214,166,46,.1);
  font-size:20px;
  margin-bottom:16px;
}
.diff-card h3{
  font-family:var(--font-title);
  font-weight:700;
  font-size:18px;
  color:var(--white);
  margin-bottom:8px;
  letter-spacing:.2px;
}
.diff-card p{
  font-size:14.5px;
  color:var(--silver);
}

/* -------------------- Antecipação -------------------- */
.section-anticip{
  position:relative;
  text-align:center;
  padding:100px 0;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(214,166,46,.10), transparent 60%),
    var(--black-alt);
  border-top:1px solid var(--graphite-border);
  border-bottom:1px solid var(--graphite-border);
}
.anticip-bg{
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(199,199,199,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(199,199,199,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%);
}
.mini-mark{
  display:inline-flex;
  font-size:44px;
  margin-bottom:20px;
  opacity:.9;
}
.section-anticip .section-lead{margin-top:16px;}
.section-anticip .btn{margin-top:32px;}

/* -------------------- Footer -------------------- */
.site-footer{
  background:var(--black-main);
  border-top:1px solid var(--graphite-border);
  padding:56px 0 110px;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.footer-logo{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  font-size:30px;
}
.footer-logo .brand-word{font-size:16px;}
.footer-copy{font-size:13px;color:#8a8a8a;}
.footer-links{
  display:flex;
  gap:10px;
  font-size:13px;
  color:var(--silver);
}
.footer-links a:hover{color:var(--gold);}
.footer-disclaimer{
  margin-top:10px;
  font-size:11.5px;
  line-height:1.6;
  color:#666;
  max-width:560px;
}

/* -------------------- Sticky mobile CTA -------------------- */
.sticky-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:150;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(5,5,5,.92);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--graphite-border);
  transform:translateY(120%);
  transition:transform var(--transition);
}
.sticky-cta.visible{transform:translateY(0);}

/* -------------------- Modal -------------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--transition), visibility var(--transition);
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal{
  position:relative;
  width:100%;
  max-width:460px;
  max-height:92svh;
  overflow-y:auto;
  background:linear-gradient(180deg, #101010, var(--black-main));
  border:1px solid var(--graphite-border);
  border-bottom:none;
  border-radius:24px 24px 0 0;
  padding:32px 24px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(40px);
  transition:transform var(--transition);
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
}
.modal-overlay.open .modal{transform:translateY(0);}

.modal-close{
  position:absolute;
  top:16px;right:16px;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--graphite);
  border:1px solid var(--graphite-border);
  color:var(--silver);
  font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{color:var(--gold);border-color:rgba(214,166,46,.4);}

.modal-mark{
  text-align:center;
  font-size:38px;
  margin-bottom:6px;
}
.modal-title{
  font-family:var(--font-title);
  font-weight:800;
  font-size:22px;
  text-align:center;
  color:var(--white);
  letter-spacing:.3px;
  margin-bottom:8px;
}
.modal-subtitle{
  text-align:center;
  font-size:14px;
  color:var(--silver);
  margin-bottom:6px;
}

#leadForm{margin-top:22px;}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--light-gray);
  margin-bottom:8px;
}
.field input{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1.5px solid var(--graphite-border);
  background:var(--black-alt);
  color:var(--white);
  font-size:16px;
  font-family:var(--font-body);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.field input::placeholder{color:#5a5a5a;}
.field input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(214,166,46,.15);
}
.field input.invalid{border-color:#c0392b;}
.field-error{
  display:block;
  min-height:16px;
  font-size:12px;
  color:#e0645a;
  margin-top:6px;
}

.checkbox-field{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--silver);
  margin-bottom:4px;
  cursor:pointer;
  line-height:1.5;
}
.checkbox-field input{
  margin-top:2px;
  width:18px;height:18px;
  accent-color:var(--gold);
  flex:none;
}

.privacy-note{
  margin-top:14px;
  text-align:center;
  font-size:11.5px;
  color:#777;
}
.privacy-note a{color:var(--silver);text-decoration:underline;}

#submitBtn{margin-top:8px;}

/* Success view */
#viewSuccess{text-align:center;}
.success-check{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}
.success-check svg{width:84px;height:84px;}
.check-circle{
  stroke:var(--gold);
  stroke-width:2;
  stroke-dasharray:151;
  stroke-dashoffset:151;
  animation:circle-draw .5s ease forwards;
}
.check-mark{
  stroke:var(--gold-bright);
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:34;
  stroke-dashoffset:34;
  animation:check-draw .35s ease forwards .5s;
}
@keyframes circle-draw{to{stroke-dashoffset:0;}}
@keyframes check-draw{to{stroke-dashoffset:0;}}

#viewSuccess .btn{margin-top:10px;}

/* -------------------- Reveal on scroll -------------------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* -------------------- Responsive -------------------- */
@media(min-width:640px){
  .objection-grid{grid-template-columns:1fr 1fr;}
  .diff-grid{grid-template-columns:1fr 1fr;}
}

@media(min-width:860px){
  .only-desktop{display:inline;}
  .header-cta{display:inline-flex;}
  .sticky-cta{display:none;}

  .two-col{grid-template-columns:1fr 1fr;gap:64px;}
  .diff-grid{grid-template-columns:repeat(3,1fr);}
  .objection-grid{grid-template-columns:repeat(3,1fr);}

  .steps-flow{
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
  }
  .step-item{
    flex-direction:column;
    text-align:center;
    max-width:150px;
    padding:22px 16px;
    gap:12px;
  }
  .step-connector{
    width:44px;height:2px;
    background:linear-gradient(90deg, var(--gold), rgba(214,166,46,.1));
    align-self:center;
  }

  .modal-overlay{align-items:center;}
  .modal{
    border-radius:24px;
    border-bottom:1px solid var(--graphite-border);
    max-width:440px;
  }
}

@media(min-width:1024px){
  .hero{padding-top:140px;}
}

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