:root{
  --navy:#061a38;
  --navy2:#0a315f;
  --blue:#0a6fd6;
  --blue2:#23a9ff;
  --surface:#ffffff;
  --text:#152238;
  --muted:#6d7a90;
  --border:#d9e3ee;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:#eef4fa;
  color:var(--text);
}


/* =========================================================
   TOPO
   ========================================================= */

.tc-topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6vw;
  background:#061a38;
  color:#fff;
}

.tc-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.tc-brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#fff;
  color:#082c58;
  font-weight:900;
  font-size:21px;
}

.tc-brand strong{
  display:block;
  font-size:22px;
  line-height:1;
}

.tc-brand small{
  display:block;
  margin-top:4px;
  font-size:9px;
  letter-spacing:3px;
  opacity:.7;
  text-transform:uppercase;
}

.tc-nav{
  display:flex;
  gap:25px;
  align-items:center;
}

.tc-nav a{
  color:#dbeaff;
  text-decoration:none;
  font-size:13px;
  font-weight:650;
}

.tc-nav .cta{
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
}


/* =========================================================
   HERO PRINCIPAL
   ========================================================= */

.tc-hero{
  min-height:610px;
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 80% 25%,
      rgba(49,163,255,.30),
      transparent 30%
    ),
    radial-gradient(
      circle at 14% 20%,
      rgba(32,128,255,.22),
      transparent 32%
    ),
    linear-gradient(
      120deg,
      #06172f,
      #073567 60%,
      #0a5aab
    );
}

.tc-hero-inner{
  width:min(1450px,90vw);
  margin:auto;
  min-height:610px;

  display:grid;
  grid-template-columns:
    minmax(330px,1fr)
    440px
    minmax(290px,.85fr);

  gap:40px;
  align-items:center;
}


/* =========================================================
   TEXTO PRINCIPAL
   ========================================================= */

.tc-copy{
  color:#fff;
}

.tc-eyebrow{
  display:inline-block;
  padding:7px 11px;
  margin-bottom:18px;

  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;

  color:#dcecff;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.tc-copy h1{
  margin:0;

  font-size:
    clamp(42px,4.4vw,67px);

  line-height:.97;
  letter-spacing:-2px;
}

.tc-copy h1 span{
  display:block;
  color:#34afff;
}

.tc-copy p{
  max-width:520px;
  margin:22px 0 25px;

  color:#dce9f8;

  font-size:17px;
  line-height:1.5;
}

.tc-benefits{
  display:grid;
  gap:10px;
}

.tc-benefit{
  display:flex;
  align-items:center;
  gap:10px;

  color:#fff;

  font-size:14px;
}

.tc-benefit i{
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border-radius:50%;

  background:#1da7ff;

  font-style:normal;
  font-weight:900;
  font-size:12px;
}


/* =========================================================
   LOGIN
   ========================================================= */

.tc-login{
  position:relative;
  z-index:100;

  width:100%;
  max-width:440px;

  margin:auto;

  padding:30px;

  background:#fff;

  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;

  box-shadow:
    0 28px 80px rgba(0,20,60,.35);
}

.tc-login-head{
  text-align:center;
  margin-bottom:19px;
}

.tc-login-logo{
  width:56px;
  height:56px;

  display:grid;
  place-items:center;

  margin:0 auto 12px;

  border-radius:16px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #0755ad,
      #18a3ff
    );

  font-size:24px;
  font-weight:900;
}

.tc-login h2{
  margin:0;

  color:#0d2954;

  font-size:25px;
}

.tc-login-head span{
  display:block;

  margin-top:4px;

  color:#4472a7;

  font-size:12px;
  font-weight:700;
}

.tc-login-intro{
  margin:0 0 18px;

  color:#778398;

  text-align:center;

  font-size:12px;
  line-height:1.5;
}

.tc-alert{
  margin-bottom:14px;

  padding:11px 13px;

  border:
    1px solid
    #ffd1cc;

  border-radius:10px;

  color:#a31d16;
  background:#fff1ef;

  font-size:12px;
}

.tc-field{
  display:grid;
  gap:6px;

  margin-bottom:13px;
}

.tc-field label{
  color:#2a3851;

  font-size:12px;
  font-weight:800;
}

.tc-field input{
  position:relative;
  z-index:101;

  width:100%;
  height:47px;

  padding:0 14px;

  border:
    1px solid
    #ccd8e6;

  border-radius:11px;

  outline:none;

  color:#17243a;
  background:#fff;

  font-size:14px;

  pointer-events:auto !important;
  user-select:text !important;
}

.tc-field input:focus{
  border-color:#1270d6;

  box-shadow:
    0 0 0 3px
    rgba(18,112,214,.10);
}

.tc-login-button{
  position:relative;
  z-index:102;

  width:100%;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:7px;

  border:0;
  border-radius:11px;

  cursor:pointer;

  color:#fff;

  background:
    linear-gradient(
      90deg,
      #07509f,
      #087bd9
    );

  font-size:14px;
  font-weight:900;

  box-shadow:
    0 10px 23px
    rgba(8,91,182,.20);

  pointer-events:auto !important;
}

.tc-login-button:hover{
  filter:brightness(1.05);
}

.tc-divider{
  position:relative;

  margin:20px 0 17px;

  text-align:center;

  color:#8b95a6;

  font-size:11px;
}

.tc-divider:before{
  content:"";

  position:absolute;
  left:0;
  right:0;
  top:50%;

  height:1px;

  background:#e3e8ef;
}

.tc-divider span{
  position:relative;
  z-index:2;

  padding:0 10px;

  background:#fff;
}

.tc-register{
  position:relative;
  z-index:102;

  width:100%;
  min-height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    #1b7cda;

  border-radius:11px;

  color:#145fba;

  background:
    linear-gradient(
      90deg,
      #fff,
      #f3f8ff
    );

  text-decoration:none;

  font-size:13px;
  font-weight:900;

  pointer-events:auto !important;
}

.tc-register:hover{
  background:#eef6ff;
}


/* =========================================================
   MOCKUP / PROPAGANDA DIREITA
   ========================================================= */

.tc-showcase{
  position:relative;
  min-height:430px;
}

.tc-screen{
  position:absolute;

  width:330px;
  height:215px;

  right:0;
  top:80px;

  overflow:hidden;

  border:8px solid #f5f8fc;
  border-radius:18px;

  background:#fff;

  box-shadow:
    0 25px 65px
    rgba(0,20,60,.38);

  transform:
    perspective(900px)
    rotateY(-8deg);
}

.tc-screen-top{
  height:37px;

  display:flex;
  align-items:center;
  gap:6px;

  padding:0 11px;

  background:#edf1f5;
}

.tc-screen-top i{
  width:7px;
  height:7px;

  display:block;

  border-radius:50%;

  background:#c7d0db;
}

.tc-screen-body{
  padding:15px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.tc-screen-card{
  min-height:58px;

  padding:9px;

  border-radius:9px;

  background:#edf5ff;
}

.tc-screen-card strong{
  display:block;

  color:#145baf;

  font-size:15px;
}

.tc-screen-card span{
  color:#798699;
  font-size:8px;
}

.tc-bars{
  grid-column:1/-1;

  height:75px;

  display:flex;
  align-items:flex-end;
  gap:7px;

  padding:12px;

  border-radius:9px;

  background:#f7f9fc;
}

.tc-bars i{
  width:18px;

  border-radius:4px 4px 0 0;

  background:
    linear-gradient(
      #20a7ff,
      #0b63bc
    );
}

.tc-float{
  position:absolute;

  min-width:190px;

  padding:13px 14px;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius:13px;

  color:#fff;

  background:
    rgba(12,71,136,.76);

  backdrop-filter:blur(10px);

  box-shadow:
    0 15px 30px
    rgba(0,20,55,.18);
}

.tc-float strong{
  display:block;

  font-size:12px;
}

.tc-float span{
  display:block;

  margin-top:3px;

  color:#d7e8fb;

  font-size:10px;
}

.tc-float.a{
  top:20px;
  right:10px;
}

.tc-float.b{
  left:0;
  bottom:85px;
}

.tc-float.c{
  right:5px;
  bottom:18px;
}


/* =========================================================
   PROPAGANDAS / PRODUTOS
   ========================================================= */

.tc-products{
  padding:
    32px max(4vw,22px) 35px;

  background:#fff;
}

.tc-products-inner{
  width:min(1450px,100%);
  margin:auto;
}

.tc-section-title h3{
  margin:0;

  color:#12213a;

  font-size:24px;
}

.tc-section-title p{
  margin:5px 0 20px;

  color:#738096;

  font-size:13px;
}

.tc-product-grid{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:13px;
}

.tc-product{
  min-height:165px;

  position:relative;

  overflow:hidden;

  padding:18px;

  border:
    1px solid
    #dfe7ef;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f7f9fc
    );

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.tc-product:hover{
  transform:translateY(-4px);

  box-shadow:
    0 16px 35px
    rgba(15,65,120,.10);
}

.tc-product-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  margin-bottom:13px;

  border-radius:12px;

  color:#fff;

  font-weight:900;
}

.p1{
  background:#1478dc;
}

.p2{
  background:#d9365d;
}

.p3{
  background:#185fc7;
}

.p4{
  background:#6444d7;
}

.p5{
  background:#10a282;
}

.tc-product h4{
  margin:
    0 0 6px;

  color:#13223b;

  font-size:17px;
}

.tc-product p{
  margin:0;

  color:#66758b;

  font-size:12px;
  line-height:1.5;
}


/* =========================================================
   INDIQUE E GANHE
   ========================================================= */

.tc-referral-wrap{
  padding:
    0 max(4vw,22px) 38px;

  background:#fff;
}

.tc-referral{
  width:min(1450px,100%);
  margin:auto;

  display:grid;
  grid-template-columns:
    1fr 1.5fr auto;

  gap:25px;
  align-items:center;

  padding:27px 34px;

  border-radius:20px;

  color:#fff;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(52,171,255,.30),
      transparent 30%
    ),
    linear-gradient(
      110deg,
      #061e45,
      #0758aa 70%,
      #0886d8
    );

  box-shadow:
    0 18px 40px
    rgba(5,53,109,.15);
}

.tc-referral h3{
  margin:0;

  font-size:29px;
}

.tc-referral h3 span{
  display:block;

  color:#35b5ff;
}

.tc-referral p{
  margin:0;

  color:#e2effc;

  font-size:16px;
}

.tc-referral p strong{
  color:#ffc535;

  font-size:28px;
}

.tc-referral a{
  min-width:170px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 18px;

  border-radius:999px;

  color:#082b58;

  background:#ffc42e;

  text-decoration:none;

  font-size:12px;
  font-weight:900;
}


/* =========================================================
   FOOTER
   ========================================================= */

.tc-footer{
  padding:
    0 20px 30px;

  background:#fff;

  color:#8791a1;

  text-align:center;

  font-size:11px;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:1180px){

  .tc-hero-inner{
    grid-template-columns:
      1fr 430px;
  }

  .tc-showcase{
    display:none;
  }

  .tc-product-grid{
    grid-template-columns:
      repeat(3,1fr);
  }
}

@media(max-width:820px){

  .tc-nav{
    display:none;
  }

  .tc-topbar{
    padding:0 20px;
  }

  .tc-hero-inner{
    grid-template-columns:1fr;

    width:100%;

    padding:
      40px 18px 50px;
  }

  .tc-copy{
    text-align:center;
  }

  .tc-copy p{
    margin:
      20px auto;
  }

  .tc-benefits{
    width:max-content;
    max-width:100%;

    margin:auto;

    text-align:left;
  }

  .tc-login{
    max-width:500px;
  }

  .tc-product-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .tc-referral{
    grid-template-columns:1fr;

    text-align:center;
  }

  .tc-referral a{
    margin:auto;
  }
}

@media(max-width:540px){

  .tc-copy h1{
    font-size:39px;
  }

  .tc-login{
    padding:24px 19px;
  }

  .tc-product-grid{
    grid-template-columns:1fr;
  }
}