:root{
  --color-bg:#0B0D17;
  --color-text:#FFFFFF;
  --color-text-secondary:#D0D6F9;
  --color-accent:#D0D6F9;
  --color-highlight:#3E3FCE;
  --color-border:#383B4B;

  --font-family-heading:'Bellefair', serif;
  --font-family-subheading:'Barlow Condensed', sans-serif;
  --font-family-body:'Barlow', sans-serif;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semi:600;
  --weight-bold:700;

  --font-size-xxl:150px;
  --font-size-xl:100px;
  --font-size-lg:56px;
  --font-size-md:28px;
  --font-size-sm:16px;
  --font-size-xs:14px;

  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:48px;
  --space-xl:96px;

  --button-bg:transparent;
  --button-border:1px solid rgba(255,255,255,0.25);
  --button-hover-bg:rgba(255,255,255,0.1);
  --button-radius:50%;
  --button-text-color:var(--color-text);

  --max-content-width:1200px;
}

@import url('https://fonts.googleapis.com/css2?family=Bellefair&family=Barlow+Condensed:wght@400;700&family=Barlow:wght@400;500&display=swap');

*{ margin:0; box-sizing:border-box; }
.container{ max-width:1350px; margin:0 auto; }

body{
  background-image:url('../img/technology-background.webp');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  height:100vh;
  overflow:hidden;
  font-family:var(--font-family-body);
  color:var(--color-text);
}

/* Header (padrão) */
.header{
  padding:10px 55px;
  display:flex;
  align-items:center;
  font-family:var(--font-family-heading);
}
.logo img{ display:block; }
.line{
  background-color:#979797;
  height:1px;
  width:473px;
  margin-left:64px;
}
.links{ display:flex; align-items:center; }
.links a{
  text-decoration:none;
  color:var(--color-text);
  white-space:nowrap;
}
ul{
  display:flex;
  column-gap:48px;
  margin:0;
  list-style:none;
  padding:40px 120px;
  background-color:#ffffff17;
  backdrop-filter:blur(5px);
}
ul span{ font-weight:var(--weight-bold); }
li:hover{ text-decoration:underline; cursor:pointer; }
.links .active a{ position:relative; }
.links .active a::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-18px;
  margin:auto;
  width:120px;
  height:3px;
  background-color:#fff;
  opacity:.9;
}

/* Technology layout */
.technology-middle{
  padding:60px 165px;
  display:flex;
  column-gap:160px;
  align-items:center;
}

/* Left column */
.left-technology{
  max-width:520px;
  display:flex;
  column-gap:80px;
  justify-content:center;
}
.left-technology p{
  color:var(--color-accent);
  font-family:var(--font-family-subheading);
  font-size:16px;
  letter-spacing:4px;
}
.section-index{
  opacity:.4;
  margin-right:12px;
  font-weight:var(--weight-bold);
}
.box-technology{
    display: flex;
    flex-direction: column;
    row-gap: 14px;
    align-items: center;
    justify-content: center;
}
.box-technology-title{
    margin-bottom: 25px;
}
/* Tech tabs (circular numbered indicators) */
.tech-tabs{
  display:flex;
  row-gap:32px;
  align-items:center;
  margin-top:20px;
  flex-direction: column;
  justify-content: center;
}
.tech-tab{
  width: 60px;
  height:60px;
  border-radius:50%;
  background:transparent;
  border:1px solid rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-secondary);
  font-family:var(--font-family-subheading);
  font-size:18px;
  cursor:pointer;
  transition: background-color .25s ease, color .25s ease, transform .15s ease;
}
.tech-tab a{
    text-decoration: none;
    color: var(--color-text);
    font-size: 28px;
    font-family: var(--font-family-heading);
}
.tech-tab.active a{
    color: var(--color-bg);
}
.tech-tab:hover{ transform:scale(1.05); }
.tech-tab.active{
  background:#fff;
  border-color:transparent;
}

/* Titles and description */
.tech-subtitle{
  font-family:var(--font-family-subheading);
  font-size:16px;
  letter-spacing:2px;
  color:var(--color-text-secondary);
  margin-top:12px;
  opacity: 0.5;
}
.tech-title{
  font-family:var(--font-family-heading);
  font-weight:normal;
  font-size:56px;
  line-height:1;
  color:#fff;
  margin-top:8px;
  white-space: nowrap;
}
.tech-description{
  color:var(--color-text-secondary);
  font-family:var(--font-family-body);
  font-size:16px;
  line-height:28px;
  width:480px;
  margin-top:12px;
}

/* Right column hero */
.right-technology{
  width:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tech-hero{
  position:relative;
  width:420px;
  height:420px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tech-hero img{
  max-width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.5));
  border-radius: 20px;
}

/* Image transitions */
.tech-hero .tech-image{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  transition: transform .8s ease, opacity .6s ease;

}
.tech-hero .tech-image.active{
  opacity:1;
  transform:translateX(50%,-50%);
  z-index:2;
}
.tech-hero .tech-image.exit-left{
  transform:translate(-150%,-50%);
  opacity:0;
}
.tech-hero .tech-image.enter-right{
  transform:translate(150%,-50%);
  opacity:0;
  z-index:3;
}

/* Step labels vertically (optional, left side) */
.tech-stepper{
  display:flex;
  flex-direction:column;
  row-gap:16px;
  margin-top:32px;
}
.tech-step{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-secondary);
  border:1px solid rgba(255,255,255,0.15);
  background:transparent;
  font-family:var(--font-family-subheading);
}
.tech-step.active{ background:#fff; color:var(--color-bg); border-color:transparent; }

/* Responsividade básica */
@media (max-width:900px){
  .technology-middle{ flex-direction:column-reverse; padding:40px 40px; column-gap:48px; }
  .tech-title{ font-size:40px; }
  .tech-hero{ width:300px; height:300px; }
  .line{ width:240px; margin-left:24px; }
  ul{ padding:20px 40px; column-gap:20px; }
  .tech-tabs{ margin-top:12px; column-gap:12px; }
  .tech-tab{ width:40px; height:40px; font-size:16px; }
  .tech-step{ width:40px; height:40px; }
}