:root{
    --primary:#e50066;
    --dark:#0e0e0e;
    --grey:#aaa;
    --max-width:1200px;
}
html {
    scroll-behavior: smooth;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;background:var(--dark);color:#fff;line-height:1.6;overflow-x:hidden;}
a{color:#fff;text-decoration:none;}
.container{width:90%;max-width:var(--max-width);margin:auto;}

/* Adicionando a imagem de fundo na tag main */
main {
    background-image: url('../img/page-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
}

/* KEYFRAMES */
@keyframes customFadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes customFadeDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fillX{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.fade-up{opacity:0;animation:customFadeUp .9s ease-out forwards;}
.fade-down{opacity:0;animation:customFadeDown .9s ease-out forwards;}

/* NAVBAR */
.navbar{background:#000;padding:15px 0;position:relative;z-index:99;}
.navbar .container{display:flex;align-items:center;justify-content:space-between;}
.logo{font-size:24px;font-weight:700;}
.logo span{color:var(--primary);}/* the "BA" */
.nav-links{display:flex;gap:25px;font-size:14px;transition:.3s;}
.hire-btn{background:var(--primary);padding:10px 18px;border-radius:3px;font-size:14px;white-space:nowrap;}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;}

/* HERO */
.hero{margin-top:60px;position:relative;background:#111;border:1px solid #222;border-radius:4px;overflow:hidden;}
.hero .container{display:flex;align-items:center;gap:40px;padding:60px 40px;}
.hero-text small{display:inline-block;background:var(--primary);padding:3px 10px;border-radius:2px;font-size:12px;margin-bottom:15px;letter-spacing:.5px;}
.hero-text h1{font-size:48px;font-weight:700;line-height:1.2;}
.hero-text h1 span{color:var(--primary);}/* name highlight */
.hero-text p{color:var(--grey);margin:18px 0 30px;font-size:14px;max-width:420px;}
.social{display:flex;gap:12px;margin-bottom:25px;}
.social a{display:inline-flex;width:30px;height:30px;border:1px solid #333;border-radius:50%;align-items:center;justify-content:center;font-size:14px;transition:.3s;}
.social a:hover{background:var(--primary);border-color:var(--primary);}
.contact{font-size:13px;color:var(--grey);} .contact span{display:block;margin-top:4px;color:#fff;}
.hero-img img{max-width:300px;border-radius:4px;animation:customFadeUp 1s ease-out .6s forwards;opacity:0;transform:translateY(20px);}

/* SECTIONS */
.section{padding:100px 0;border-top:1px solid #222;}
.section-title{display:inline-block;background:var(--primary);padding:4px 14px;font-size:12px;margin-bottom:18px;letter-spacing:.5px;animation:customFadeDown .9s ease-out forwards;opacity:0;}
.section h2{font-size:32px;font-weight:600;margin-bottom:12px;animation:customFadeUp .9s ease-out .2s forwards;opacity:0;}
.section h2 span{color:var(--primary);}/* word highlight */
.section>p{color:var(--grey);font-size:14px;max-width:600px;margin-bottom:50px;animation:customFadeUp .9s ease-out .4s forwards;opacity:0;}

/* SKILLS */
.skills-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;}
.skill{font-size:14px;}
.skill-header{display:flex;justify-content:space-between;margin-bottom:6px;}
.progress{background:#222;border-radius:3px;height:6px;overflow:hidden;}
.progress-bar{height:100%;background:var(--primary);transform-origin:left;transform:scaleX(0);animation:fillX 1.6s ease-out forwards;}

/* SERVICES / SLIDER */
.slider-wrapper { position: relative; }
.services{display:grid;grid-template-columns:repeat(4, 1fr);gap:25px;margin-top:60px;align-items:start;}
.service-card{background:#111;border:1px solid #222;border-radius:4px;transition:.3s; display: flex; flex-direction: column; height: 100%;}
.service-card:hover{border-color:var(--primary);}
.service-card-content { padding: 40px 20px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center;}
.service-card i{background:#222;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:18px;}
.service-card h3{font-size:18px;margin-bottom:10px;}
.service-card p{color:var(--grey);font-size:13px;}
.slider-btn { display: none; position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: white; border: none; padding: 10px; border-radius: 50%; cursor: pointer; z-index: 10; width: 40px; height: 40px; font-size: 18px; }
.slider-btn.prev { left: -15px; }
.slider-btn.next { right: -15px; }

/* PRICING SECTION */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 60px; }
.pricing-card { background: #111; border: 1px solid #222; border-radius: 5px; padding: 40px; text-align: center; position: relative; overflow: hidden; transition: transform 0.3s, border-color 0.3s; }
.pricing-card:hover { transform: translateY(-10px); border-color: var(--primary); }
.pricing-card .popular-badge { position: absolute; top: 15px; right: -35px; background: var(--primary); color: #fff; padding: 5px 40px; transform: rotate(45deg); font-size: 12px; font-weight: 600; }
.pricing-card .free-badge { position: absolute; top: 15px; right: 15px; background: #333; color: #fff; padding: 3px 10px; font-size: 12px; border-radius: 3px; }
.pricing-card h3 { font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--grey); margin-bottom: 20px; }
.pricing-card .price { font-size: 48px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.pricing-card .price span { font-size: 16px; color: var(--grey); }
.pricing-card .price-desc { font-size: 12px; color: var(--grey); margin-bottom: 30px; }
.pricing-card ul { list-style: none; padding: 0; margin-bottom: 40px; }
.pricing-card ul li { margin-bottom: 15px; font-size: 14px; }
.pricing-card ul li i { color: var(--primary); margin-right: 10px; }
.pricing-card .btn, .resume-profile-info .btn, .contact-form .btn { display: inline-block; background: var(--primary); color: #fff; padding: 12px 30px; border-radius: 3px; text-transform: uppercase; font-size: 13px; font-weight: 600; transition: background 0.3s; border: none; width: 100%; cursor: pointer;}
.pricing-card .btn:hover, .resume-profile-info .btn:hover, .contact-form .btn:hover { background: #c40055; }

/* RESUME SECTION */
.resume-profile-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; margin-bottom: 80px; background: #111; border: 1px solid #222; padding: 40px; border-radius: 5px; }
.resume-profile-img img { width: 100%; border-radius: 5px; }
.resume-profile-info h3 { font-size: 28px; margin-top: 10px; margin-bottom: 15px; }
.resume-profile-info h3 span { color: var(--primary); }
.resume-profile-info p { color: var(--grey); margin-bottom: 20px; }
.resume-profile-info ul { list-style: none; padding: 0; margin-bottom: 30px; }
.resume-profile-info ul li { margin-bottom: 10px; font-size: 14px; }
.resume-profile-info ul li strong { color: #fff; min-width: 80px; display: inline-block; }
.resume-profile-info ul li span { color: var(--grey); }

/* PORTFOLIO SECTION */
.portfolio-filters { text-align: center; margin-bottom: 40px; }
.portfolio-filters button { background: none; border: none; color: var(--grey); font-size: 14px; font-weight: 600; margin: 0 15px; cursor: pointer; transition: color 0.3s; padding: 5px 0; position: relative; }
.portfolio-filters button::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s; }
.portfolio-filters button.active { color: #fff; }
.portfolio-filters button.active::after { width: 100%; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.portfolio-item { position: relative; overflow: hidden; border-radius: 5px; }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.portfolio-item:hover img { transform: scale(1.1); }
.portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.4s; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay .icon { font-size: 36px; color: #fff; margin-bottom: 10px; }
.portfolio-overlay .category { font-size: 12px; color: var(--grey); text-transform: uppercase; letter-spacing: 1px; }
.portfolio-overlay .title { font-size: 18px; font-weight: 600; color: #fff; }

/* CONTACT SECTION */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info h2 { font-size: 32px; margin-bottom: 15px; }
.contact-info h2 span { color: var(--primary); }
.contact-info p { color: var(--grey); margin-bottom: 30px; }
.contact-details { list-style: none; padding: 0; margin-bottom: 30px; }
.contact-details li { margin-bottom: 15px; display: flex; align-items: center; }
.contact-details i { color: var(--primary); margin-right: 15px; width: 20px; text-align: center; }
.contact-form { background: #111; padding: 30px; border-radius: 5px; }
.contact-form h4 { font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.contact-form input, .contact-form textarea { width: 100%; background: #0e0e0e; border: 1px solid #222; color: #fff; padding: 12px; margin-bottom: 15px; border-radius: 3px; }
.contact-form .terms { font-size: 12px; color: var(--grey); text-align: center; margin-top: 15px; }
.info-request { text-align: center; margin-top: 100px; }
.info-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px; }
.info-card { background: #111; padding: 30px; border-radius: 5px; }
.info-card i { font-size: 24px; color: var(--primary); margin-bottom: 15px; }
.info-card h4 { font-size: 16px; margin-bottom: 10px; }
.info-card p { color: var(--grey); margin-bottom: 20px; }
.info-card a { font-size: 13px; font-weight: 600; color: #fff; }
.info-card a i { font-size: 12px; margin-left: 5px; transition: transform 0.3s; }
.info-card a:hover i { transform: translateX(5px); }
.cta-banner { background: #111; padding: 50px 0; text-align: center; margin-top: 100px; }
.cta-banner h2 { font-size: 28px; margin-bottom: 10px; }
.cta-banner p { color: var(--grey); margin-bottom: 20px; }
.cta-contact { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; }
.cta-contact i { color: var(--primary); margin-right: 15px; }

/* FOOTER */
.footer{background:#000;padding:30px 0;margin-top:80px;border-top: 1px solid #222;}
.footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-text { font-size: 13px; color: var(--grey); }
.footer-text span { color: #fff; }
#toTopBtn { position: fixed; bottom: 20px; right: 20px; z-index: 100; background-color: var(--primary); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 20px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: opacity 0.3s, transform 0.3s, visibility 0.3s; opacity: 0; transform: translateY(10px); visibility: hidden; display: flex; align-items: center; justify-content: center; }
#toTopBtn.show { opacity: 1; transform: translateY(0); visibility: visible; }

/* ------------ RESPONSIVE ------------- */
@media(max-width:992px){
  .hero-text h1{font-size:40px;}
  #services .services { grid-template-columns: repeat(2, 1fr); }
  .resume-profile-grid { grid-template-columns: 1fr; }
  .resume-grid { grid-template-columns: 1fr; }
  .resume-item::before, .resume-item::after { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media(max-width:768px){
  .navbar .container{padding:0 10px;}
  .nav-toggle{display:block;}
  .nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:#000;padding:20px 0;gap:15px;border-top:1px solid #111;}
  .nav-links.open{display:flex;}
  .hero .container{flex-direction:column;text-align:center;padding:40px 20px;}
  .hero-img img{max-width:220px;margin-top:30px;}
  .hero-text h1{font-size:34px;}
  .section{padding:70px 0;}
  
  /* Services Slider */
  #services .slider-wrapper { overflow: hidden; }
  #services .services { display: flex; transition: transform 0.5s ease-in-out; gap: 0; margin-top: 30px; }
  #services .service-card { flex: 0 0 100%; min-width: 100%; padding: 0; border: none; background: transparent; }
  #services .service-card-content { background:#111; border:1px solid #222; padding:40px 20px; margin: 0 15px; border-radius: 4px; }
  #services .slider-btn { display: block; }
  
  /* Pricing Slider */
  #pricing .slider-wrapper { overflow: hidden; }
  #pricing .pricing-grid { display: flex; transition: transform 0.5s ease-in-out; gap: 0; }
  #pricing .pricing-card { flex: 0 0 100%; min-width: 100%; padding: 0 15px; background: transparent; border: none; box-sizing: border-box; }
  #pricing .pricing-card-content { background: #111; border: 1px solid #222; border-radius: 5px; padding: 40px; height: 100%; }
  #pricing .slider-btn { display: block; }

  .footer .container { justify-content: center; text-align: center; }
}

@media(max-width:420px){
  .hero-text h1{font-size:30px;}
  .logo{font-size:20px;}
  .hire-btn{padding:8px 14px;font-size:13px;}
  .slider-btn.prev { left: 5px; }
  .slider-btn.next { right: 5px; }
}

/* NAVBAR */
.navbar {
  background: #000;
  padding: 15px 0;
  position: relative;
  z-index: 99;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 24px;
  font-weight: 700;
}

.logo span {
  color: var(--primary);
}

.nav-links {
  display: flex;
  gap: 25px;
  font-size: 14px;
  transition: .3s;
}

.header-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hire-btn {
  background: var(--primary);
  padding: 10px 18px;
  border-radius: 3px;
  font-size: 14px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}