:root {

  --bg1: #0f1724;

  --bg2: #071225;

  --accent: linear-gradient(90deg, #7c5cff, #2dd4bf);

  --muted: rgba(255, 255, 255, 0.65);

  --glass: rgba(255, 255, 255, 0.04);

  --card: rgba(255, 255, 255, 0.03);

  --maxw: 980px;

}



* {

  box-sizing: border-box;

}



html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}



body {

  min-height: 100vh;

  background: linear-gradient(180deg, var(--bg1), var(--bg2));

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: 100% 100%;

  color: #e6eef8;

  font-family: Inter, system-ui, Segoe UI, Roboto, 'Helvetica Neue', Arial;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  line-height: 1.45;

  display: flex;

  justify-content: center;

  padding: 48px 20px;

}



/* Animation keyframes */

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



/* Animated sections */

.animate-section {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}



.animate-section.visible {

  opacity: 1;

  transform: translateY(0);

}



.animate-item {

  opacity: 0;

  transform: translateY(15px);

  transition: opacity 0.4s ease-out, transform 0.4s ease-out;

}



.animate-item.visible {

  opacity: 1;

  transform: translateY(0);

}



.container {

  width: 100%;

  max-width: var(--maxw);

}



.header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 28px 0;

}



.brand {

  display: flex;

  flex-direction: column;

}



.brand h1 {

  margin: 0;

  font-weight: 800;

  font-size: 32px;

  letter-spacing: -0.02em;

}



.tag {

  margin-top: 6px;

  color: var(--muted);

  font-weight: 300;

}



.cta {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.06);

  padding: 10px 14px;

  border-radius: 12px;

  color: inherit;

  text-decoration: none;

  transition: all 0.2s;

}



.cta:hover {

  border-color: #7c5cff;

  color: #7c5cff;

}



.hero {

  display: grid;

  grid-template-columns: 1fr;

  gap: 28px;

  align-items: center;

  padding: 36px 0;

}



.hero-left {

  padding: 28px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);

  border-radius: 16px;

}



.hero-title {

  font-size: 28px;

  margin: 0 0 12px 0;

  font-weight: 800;

}



.hero-sub {

  margin: 0;

  color: var(--muted);

  font-weight: 300;

}



.primary-cta {

  display: inline-block;

  margin-top: 20px;

  padding: 12px 18px;

  border-radius: 12px;

  background: linear-gradient(90deg, #7c5cff, #2dd4bf);

  color: #071225;

  text-decoration: none;

  font-weight: 600;

  transition: opacity 0.2s;

  position: relative;

  overflow: hidden;

}



.primary-cta:hover {

  opacity: 0.85;

}



/* Typewriter effect for email button */

.primary-cta.typewriter {

  color: transparent;

}



.primary-cta.typewriter::before {

  content: '';

  position: absolute;

  top: 12px;

  left: 18px;

  color: #071225;

  font-weight: 600;

  animation: typewriter 2s steps(30, end), blink-caret 0.75s step-end infinite;

  border-right: 2px solid #071225;

  white-space: nowrap;

  overflow: hidden;

}



.primary-cta.typewriter:hover::before {

  content: 'letsconnect@romanbanar.com';

  animation: typewriter 1.8s steps(30, end), blink-caret 0.75s step-end infinite;

}



@keyframes typewriter {

  from {

    width: 0;

  }

  to {

    width: 100%;

  }

}



@keyframes blink-caret {

  from,

  to {

    border-color: transparent;

  }

  50% {

    border-color: #071225;

  }

}



.tech-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 20px;

}



.tech-card {

  padding: 12px 14px;

  border-radius: 10px;

  background: var(--glass);

  font-size: 13px;

  color: var(--muted);

  display: flex;

  align-items: center;

  gap: 10px;

}



.tech-card i {

  color: #7c5cff;

}



.tech-card.highlight {

  background: rgba(255, 255, 255, 0.2);

  font-weight: 700;

  color: #ffffff;

}



.feature {

  margin-top: 22px;

  padding: 18px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);

  border-radius: 12px;

}



.stack-grid {

  display: grid;

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

  gap: 12px;

}



.stack-item {

  padding: 12px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);

  display: flex;

  align-items: flex-start;

  gap: 12px;

}



.stack-item i {

  color: #7c5cff;

  font-size: 20px;

  margin-top: 4px;

}



.stack-title {

  font-weight: 600;

}



.hightlight {

  margin-top: 18px;

  padding: 18px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.02);

}



.hightlight ul {

  margin: 8px 0 0 18px;

  color: var(--muted);

}



.letsconnect {

  margin: 0 0 8px 0;

}



.contact {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 28px;

  margin-top: 28px;

  border-radius: 12px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);

}



.contact p {

  margin: 0 0 10px 0;

  color: var(--muted);

}



.socials {

  display: flex;

  gap: 12px;

  margin-top: 8px;

}



.icon-btn {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);

  text-decoration: none;

  color: inherit;

  transition: all 0.2s;

}



.icon-btn:hover {

  background: rgba(124, 92, 255, 0.15);

  color: #7c5cff;

}



.footer {

  margin-top: 26px;

  padding: 18px;

  color: var(--muted);

  text-align: center;

  font-size: 13px;

}



@media (max-width: 880px) {

  .stack-grid {

    grid-template-columns: 1fr;

  }

}



.small {

  font-size: 13px;

  color: var(--muted);

}



.flex1 {

  flex: 1;

}