:root{
    --bg:#050505;
    --panel:#121212;
    --panel-2:#181818;
    --line:#2c2c2c;
    --white:#f7f5f0;
    --white-dim:#f7f5f0a6;
    --red:#e0261c;
    --red-dim:#e0261c26;
    --orange:#f2860a;
    --orange-dim:#f2860a26;
    --green:#25d366;
    --green-dark:#128c43;
    --radius:14px;
    --wrap:1120px;
    --ease:cubic-bezier(.16,.8,.24,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--white);
    font-family:'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Space Grotesk', sans-serif;
    margin:0;
    letter-spacing:-0.01em;
    color:var(--white);
  }
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
  .mono{font-family:'IBM Plex Mono', monospace;}

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--red);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--red);
    display:inline-block;
  }
  .eyebrow.orange{color:var(--orange);}
  .eyebrow.orange::before{background:var(--orange);}

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 28px;
    border-radius:999px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-weight:500;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    white-space:nowrap;
  }
  .btn:focus-visible{outline:2px solid var(--white); outline-offset:3px;}
  .btn-white{
    background:var(--white);
    color:#0a0a0a;
  }
  .btn-white:hover{transform:translateY(-2px); box-shadow:0 12px 30px -10px #f7f5f099;}
  .btn-whatsapp{
    background:var(--green);
    color:#04210f;
  }
  .btn-whatsapp:hover{transform:translateY(-2px); box-shadow:0 12px 30px -10px #25d36699, 0 0 0 6px #25d36626;}
  .btn-red{
    background:var(--red);
    color:var(--white);
  }
  .btn-red:hover{transform:translateY(-2px); box-shadow:0 12px 30px -10px var(--red-dim), 0 0 0 6px var(--red-dim);}
  .btn-orange{
    background:var(--orange);
    color:#1a0d00;
  }
  .btn-orange:hover{transform:translateY(-2px); box-shadow:0 12px 30px -10px var(--orange-dim), 0 0 0 6px var(--orange-dim);}
  .btn-ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--white);
  }
  .btn-ghost:hover{border-color:var(--white); transform:translateY(-2px);}
  .btn-arrow{transition:transform .3s var(--ease);}
  .btn:hover .btn-arrow{transform:translateX(3px);}
  .btn svg{flex-shrink:0;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:120px 0 80px;
    overflow:hidden;
  }
  .hero-line-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.5;
  }
  .hero-glow{
    position:absolute;
    top:-20%;
    left:50%;
    transform:translateX(-50%);
    width:900px;
    height:900px;
    background:radial-gradient(circle, var(--red-dim) 0%, transparent 65%);
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
  }
  .hero h1{
    font-size:clamp(34px, 6vw, 68px);
    line-height:1.08;
    max-width:820px;
    font-weight:600;
  }
  .hero h1{text-transform:uppercase;}
  .hero h1 .accent{color:var(--red);}
  .hero h1 .accent2{color:var(--orange);}
  .hero-sub{
    font-size:clamp(15px, 2vw, 18px);
    color:var(--white-dim);
    max-width:520px;
    line-height:1.6;
  }
  .hero-ctas{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:8px;
  }
  .hero-tag{
    margin-top:26px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--white-dim);
    padding:10px 18px;
    border:1px solid var(--line);
    border-radius:999px;
  }
  .hero-tag strong{color:var(--orange); font-weight:500;}
  .scroll-cue{
    position:absolute;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--white-dim);
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    animation:floaty 2.4s ease-in-out infinite;
  }
  @keyframes floaty{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}
  .scroll-cue span{
    width:1px; height:34px;
    background:linear-gradient(var(--white-dim), transparent);
  }

  /* ---------- SECTION SCAFFOLD ---------- */
  section{position:relative; padding:110px 0;}
  .section-head{
    max-width:640px;
    margin-bottom:56px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .section-head h2{
    font-size:clamp(28px, 4vw, 42px);
    font-weight:600;
    line-height:1.15;
  }
  .section-head p{color:var(--white-dim); font-size:16px; line-height:1.65;}
  .divider{
    height:1px;
    background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  }

  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- PROTOCOL CARDS ---------- */
  .protocol{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:0;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:28px;
  }
  .protocol:last-child{margin-bottom:0;}
  .protocol-visual{
    position:relative;
    padding:44px 40px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:
      repeating-linear-gradient(135deg, transparent 0 22px, #ffffff05 22px 23px),
      var(--panel-2);
    border-right:1px solid var(--line);
    min-height:260px;
  }
  .protocol-index{
    font-family:'IBM Plex Mono', monospace;
    font-size:64px;
    font-weight:500;
    color:transparent;
    -webkit-text-stroke:1px var(--line);
    line-height:1;
  }
  .protocol-tier{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--white-dim);
  }
  .protocol-body{
    padding:44px 44px;
    display:flex;
    flex-direction:column;
    gap:18px;
    justify-content:center;
  }
  .protocol-body h3{font-size:clamp(22px, 3vw, 30px); font-weight:600;}
  .protocol-body p{color:var(--white-dim); font-size:15px; line-height:1.7;}
  .protocol-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:2px;
  }
  .chip{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--white-dim);
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 12px;
  }
  .protocol-cta{margin-top:10px;}
  .protocol--red .protocol-tier{color:var(--red);}
  .protocol--red .protocol-index{-webkit-text-stroke:1px var(--red);}
  .protocol--orange .protocol-tier{color:var(--orange);}
  .protocol--orange .protocol-index{-webkit-text-stroke:1px var(--orange);}

  @media (max-width:820px){
    .protocol{grid-template-columns:1fr;}
    .protocol-visual{border-right:none; border-bottom:1px solid var(--line); flex-direction:row; align-items:center; min-height:auto; padding:28px 30px;}
    .protocol-body{padding:32px 30px;}
  }

  /* ---------- ABOUT ---------- */
  .about{
    display:grid;
    grid-template-columns:.85fr 1.4fr;
    gap:64px;
    align-items:start;
  }
  .portrait-wrap{
    position:relative;
  }
  .portrait{
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--panel);
  }
  .portrait img{width:100%; height:auto; display:block; filter:grayscale(.15) contrast(1.05);}
  .portrait-caption{
    padding:18px 20px;
    border-top:1px solid var(--line);
    background:var(--panel);
  }
  .portrait-caption .name{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:.02em;
  }
  .portrait-caption .role{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--white-dim);
    margin-top:4px;
    letter-spacing:.03em;
  }
  .about-copy h2{font-size:clamp(26px,4vw,38px); margin-bottom:20px;}
  .about-copy p{color:var(--white-dim); font-size:16px; line-height:1.75; margin-bottom:16px;}

  .stats-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    margin-top:28px;
  }
  .stat{
    background:var(--panel);
    padding:26px 20px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .stat .num{font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700; color:var(--red);}
  .stat:nth-child(even) .num{color:var(--orange);}
  .stat .label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--white-dim);}

  @media (max-width:760px){
    .about{grid-template-columns:1fr; gap:40px;}
    .portrait-wrap{max-width:320px; margin:0 auto;}
    .stats-grid{grid-template-columns:repeat(2, 1fr);}
  }

  /* ---------- FREE CONTENT / FOOTER ---------- */
  .footer-section{
    background:var(--panel);
    border-top:1px solid var(--line);
  }
  .free-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  .free-card{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px;
    display:flex;
    flex-direction:column;
    gap:16px;
    transition:border-color .3s var(--ease), transform .3s var(--ease);
  }
  .free-card:hover{border-color:var(--white); transform:translateY(-4px);}
  .free-icon{
    width:42px; height:42px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel-2);
    border:1px solid var(--line);
  }
  .free-card h3{font-size:19px; font-weight:600;}
  .free-card p{color:var(--white-dim); font-size:14px; line-height:1.6;}
  .free-card .btn{align-self:flex-start; margin-top:auto;}

  @media (max-width:900px){
    .free-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    .free-grid{grid-template-columns:1fr;}
  }

  .footer-bottom{
    padding:36px 0;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--white-dim);
  }
  .footer-bottom a{color:var(--white); border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .3s;}
  .footer-bottom a:hover{border-color:var(--white);}

  /* sticky mobile cta */
  .sticky-cta{
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:50;
    background:var(--panel);
    border-top:1px solid var(--line);
    padding:12px 16px;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    backdrop-filter:blur(6px);
  }
  .sticky-cta p{font-size:13px; color:var(--white-dim);}
  .sticky-cta .btn{padding:12px 18px; font-size:12px;}
  @media (max-width:720px){
    .sticky-cta{display:flex;}
    section:last-of-type{padding-bottom:150px;}
  }

  ::selection{background:var(--red); color:var(--white);}
