:root{
      --bg:#000;
      --fg:#f5f5f7;
      --accent:#4E8BC9;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html, body {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      height: 100%;
    }
    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
    body{
      font-family:'Montserrat',sans-serif;
      color:var(--fg);
      min-height:100vh;
      overflow-y:auto;
      background:var(--bg);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

body.index-page {
      min-height: 100dvh;
      display:flex;
      flex-direction:column;
      overflow-x:hidden;
    }

body.index-page header{
      flex:1;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
    }

    

    #stars{
      position:fixed;inset:0;z-index:-1;
    }
    #aurora{
      position:fixed;inset:0;z-index:0; 
      opacity: 0.3;
    }

    header,footer{text-align:center;}
    header{
      height:auto;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      align-items:center;
      position:relative;
    }

    
    .logo-container {
    }
body.index-page .logo-container {
      margin-top: 8vh;
    }
    header img{
      width:clamp(100px,16vw,220px);
      height:auto;
      margin-top: 0;
      margin-bottom: 1rem;
      filter:none;
      transition: transform .25s ease-out;
      will-change:transform;
    }
    body.index-page h1{
      font-size:clamp(4rem,10vw,6rem);
      font-weight:600;
      letter-spacing:.03em;
      animation:float-in 1s ease-out;
    }
body.index-page h1 {
      font-size: clamp(3.6rem, 8vw, 5rem);
      margin-top: 0;
    }
    .font-medium {
      font-weight: 500;
    }
    .font-regular {
      font-weight: 200;
    }
    @keyframes float-in{
      from{opacity:0;transform:translateY(30px)}
      to{opacity:1;transform:translateY(0)}
    }
    .subline{
      margin-top:.8rem;
      font-size:1rem;
      opacity:.85;
      animation:float-in 1.5s ease-out;
    }
    .button{
      animation:float-in 2s ease-out;
    }
    .tagline{
      margin-top:1.1rem;
      font-size:1.3rem;
      font-weight:600;
      color:var(--accent);
      min-height:1.5em;
    }
    .cursor{
      display:inline-block;
      animation:cursor-blink 1s infinite;
    }
    @keyframes cursor-blink{
      0%,50%{opacity:1}
      51%,100%{opacity:0}
    }
    @keyframes typewriter{
      to{width:100%}
    }
    @keyframes blink{
      50%{border-color:transparent}
    }
    .subline a{color:var(--fg);text-decoration:underline}
    .button-container{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:1rem;
      margin-top:1.5rem;
      margin-bottom:1rem;
    }
    .button{
      display:inline-block;
      padding:1rem 2.6rem;
      border:2px solid transparent;
      border-radius:999px;
      color:var(--fg);
      text-decoration:none;
      font-weight:600;
      position:relative;
      background:linear-gradient(var(--bg),var(--bg)) padding-box,
                linear-gradient(45deg,#4E8BC9,#4E8BC9,#4E8BC9) border-box;
      background-size:200% 200%;
      animation:gradient-shift 3s ease infinite;
      transition:all .3s ease;
    }
    .button:hover{
      transform:translateY(-3px) scale(1.05);
      box-shadow:0 10px 40px rgba(78,139,201,0.4);
      filter:brightness(1.2);
    }
    @keyframes gradient-shift{
      0%,100%{background-position:0% 50%}
      50%{background-position:100% 50%}
    }
    .common-footer{
      text-align:center;
      font-size:.85rem;
      opacity:.65;
      padding: 0.2rem 0;
      line-height: 1.5;
      margin-top:auto;
    }

    

    :root{
      --bg:#000;
      --fg:#f5f5f7;
      --accent:#13b0f2;
      --x:50vw;
      --y:50vh;
    }
    *{
      box-sizing:border-box;
      margin:0;
      padding:0
    }
        

    #stars{
      position:fixed;
      inset:0;
      z-index:-2;
      background:#000;
    }


    main{
      flex-grow: 1;
      max-width:1200px;
      width:100%;
      margin:0 auto 0 auto;
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      padding: 0;
      overflow-y: auto;
    }
    h1{
      text-align:center;
      font-size:2.5rem;
      margin-bottom:0.8rem; 
      font-weight:600;
      background:linear-gradient(45deg,var(--fg),var(--accent),var(--fg));
      background-size:200% 200%;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      animation:float-in 0.8s ease-out, shimmer 3s ease-in-out infinite;
    }
    .subtitle{
      text-align:center;
      font-size:1rem; 
      opacity:.85;
      margin-bottom:2rem; 
      animation:float-in 1s ease-out;
    }
    @keyframes shimmer{
      0%,100{
        background-position:0% 50%
      }
      50%{
        background-position:100% 50%
      }
    }
    @keyframes float-in{
      from{
        opacity:0;
        transform:translateY(20px)
      }
      to{
        opacity:1;
        transform:translateY(0)
      }
    }

    .projects-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1.5rem; 
      
      perspective:1000px;
    }

    .project-card{
      background:linear-gradient(145deg,#111,#0a0a0a);
      border-radius:1rem;
      overflow:hidden;
      border:1px solid #222;
      position:relative;
      transition:all .4s cubic-bezier(0.25,0.46,0.45,0.94);
      animation:fade-in 0.8s ease-out forwards;
      opacity:0;
      transform-style:preserve-3d;
    }
    .project-card:nth-child(1){
      animation-delay:0.2s
    }
    .project-card:nth-child(2){
      animation-delay:0.4s
    }

    .project-card::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(45deg,transparent,rgba(19,176,242,0.1),transparent);
      opacity:0;
      transition:opacity .4s ease;
      z-index:1;
      pointer-events:none;
    }

    @keyframes fade-in{
      to{
        opacity:1;
        transform:translateY(0) rotateX(0)
      }
      from{
        opacity:0;
        transform:translateY(30px) rotateX(10deg)
      }
    }

    .project-card:hover{
      border-color:var(--accent);
      transform:translateY(-8px) rotateX(2deg) scale(1.01); 
      box-shadow:0 20px 50px rgba(19,176,242,0.3), 0 0 30px rgba(19,176,242,0.1); 
    }
    .project-card:hover::before{
      opacity:1;
    }

    .main-screenshot{
      width:100%;
      height:200px; 
      overflow:hidden;
      background:linear-gradient(135deg,#0a0a0a,#111);
      position:relative;
    }
    .main-screenshot::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,transparent,rgba(19,176,242,0.05));
      opacity:0;
      transition:opacity .3s ease;
    }
    .project-card:hover .main-screenshot::after{
      opacity:1;
    }
    .main-screenshot img{
      width:100%;
      height:100%;
      object-fit:contain;
      transition:filter .4s ease;
      filter:brightness(0.9);
    }
    .project-card:hover .main-screenshot img{
      filter:brightness(1.1) contrast(1.1);
    }

    .project-content{
      padding:1rem; 
      position:relative;
      z-index:2;
    }

    .project-title{
      font-size:1.4rem; 
      font-weight:600;
      margin-bottom:0.4rem; 
      color:var(--fg);
    }
    .project-type{
      font-size:0.8rem; 
      color:var(--accent);
      text-transform:uppercase;
      letter-spacing:0.1em;
      margin-bottom:0.8rem; 
      opacity:0.9;
    }
    .project-description{
      line-height:1.5; 
      opacity:0.85;
      margin-bottom:1rem; 
    }

    .screenshot-thumbs{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:0.4rem; 
      margin-bottom:1rem; 
    }
    .thumb-item{
      position:relative;
      border-radius:0.5rem;
      overflow:hidden;
      cursor:pointer;
      border:2px solid transparent;
      transition:all .3s cubic-bezier(0.34,1.56,0.64,1);
      background:linear-gradient(135deg,#0a0a0a,#111);
      box-shadow:0 4px 15px rgba(0,0,0,0.3);
    }
    .thumb-item::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(45deg,transparent,rgba(19,176,242,0.1));
      opacity:0;
      transition:opacity .3s ease;
      z-index:1;
    }
    .thumb-item:hover{
      border-color:var(--accent);
      transform:scale(1.03) translateY(-1px); 
      box-shadow:0 6px 20px rgba(19,176,242,0.2); 
    }
    .thumb-item.active{
      border-color:var(--accent);
      box-shadow:0 0 15px rgba(19,176,242,0.4); 
    }
    .thumb-item:hover::before{
      opacity:1;
    }
    .thumb-item img{
      width:100%;
      height:60px; 
      object-fit:contain;
      display:block;
      background:#0a0a0a;
      transition:filter .3s ease;
    }
    .thumb-item:hover img{
      filter:brightness(1.1);
    }
    .thumb-label{
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      background:linear-gradient(transparent,rgba(0,0,0,0.9));
      color:var(--fg);
      padding:0.8rem 0.5rem 0.2rem; 
      font-size:0.65rem; 
      text-align:center;
    }

    .feature-description{
      background:#0a0a0a;
      border-radius:0.5rem;
      padding:0.7rem; 
      margin-bottom:0.8rem; 
      font-size:0.8rem; 
      line-height:1.2; 
      opacity:0.9;
      min-height:40px; 
      transition:all .3s ease;
    }

    .project-link{
      display:inline-block;
      padding:0.7rem 1.8rem; 
      border:2px solid transparent;
      border-radius:999px;
      color:var(--fg);
      text-decoration:none;
      font-weight:600;
      font-size:0.85rem; 
      text-align:center;
      position:relative;
      background:linear-gradient(var(--bg),var(--bg)) padding-box,
                linear-gradient(45deg,#13b0f2,#0099ff,#13b0f2) border-box;
      background-size:200% 200%;
      animation:gradient-shift 3s ease infinite;
      transition:all .3s ease;
      width:100%;
    }
    .project-link:hover{
      transform:translateY(-1px); 
      box-shadow:0 4px 15px rgba(19,176,242,0.3); 
      filter:brightness(1.1);
    }

    @keyframes gradient-shift{
      0%,100%{
        background-position:0% 50%
      }
      50%{
        background-position:100% 50%
      }
    }

    

  body.portfolio-page{
    font-family:'Montserrat',sans-serif;
    color:var(--fg);
    min-height:100dvh;
    display:flex;
    flex-direction:column;

    scroll-behavior:smooth;
    background:
      radial-gradient(600px circle at var(--x) var(--y),
        rgba(19,176,242,0.25) 0%, rgba(0,0,0,0) 70%), var(--bg);
    overflow-y: auto;
  }

  .portfolio-page main{
    overflow-y: visible;
  }

    @media (max-width:1200px){
      .projects-grid{
        grid-template-columns:1fr 1fr;
      }
      .next-project{
        grid-column:1 / -1;
      }
    }
    @media (max-width:800px){
      .projects-grid{
        grid-template-columns:1fr;
      }
    }
    .next-project{
      text-align:center;
      padding:2rem 1.5rem; 
      background:linear-gradient(135deg,#111,#0a0a0a);
      border-radius:1rem;
      border:1px solid #222;
      position:relative;
      overflow:hidden;
      transition:all .4s cubic-bezier(0.25,0.46,0.45,0.94);
      animation:fade-in 1s ease-out forwards;
      animation-delay:0.6s;
      opacity:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:300px; 
    }
    .next-project::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(45deg,transparent,rgba(19,176,242,0.05),transparent);
      opacity:0;
      transition:opacity .4s ease;
    }
    .next-project:hover{
      border-color:var(--accent);
      box-shadow:0 15px 40px rgba(19,176,242,0.25); 
      transform:translateY(-3px); 
    }
    .next-project:hover::before{
      opacity:1;
    }
    .next-project h2{
      font-size:1.6rem; 
      margin-bottom:0.8rem; 
      color:var(--fg);
      position:relative;
      z-index:1;
    }
    .next-project p{
      font-size:0.9rem; 
      opacity:0.85;
      margin-bottom:1rem; 
      position:relative;
      z-index:1;
    }

@media (max-width:768px){
  body.index-page h1 {
    font-size:3rem;
  }
  h1{
    font-size:2rem
  }
  .project-content{
    padding:1rem
  }
  .screenshot-thumbs{
    gap:0.2rem
  }
}

@media (max-width:768px){
  body.index-page h1{
    font-size:3rem;
  }
}


body.success-page{
  font-family:'Montserrat',sans-serif;
  color:var(--fg);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  
  scroll-behavior:smooth;
  background:
    radial-gradient(600px circle at var(--x) var(--y),
      rgba(19,176,242,0.25) 0%, rgba(0,0,0,0) 70%), var(--bg);
  overflow-y: auto; 
}


body.success-page h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem); 
  font-weight: 600; 
  letter-spacing: 0.05em;
  background: linear-gradient(45deg, #13b0f2, #00d4ff, #13b0f2); 
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite, float-in 1s ease-out;
  text-shadow: 0 0 15px rgba(19, 176, 242, 0.6); 
}

body.success-page .subtitle {
  font-size: 1.2rem; 
  font-weight: normal; 
  opacity: 0.9;
  color: #e0e0e0; 
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2); 
}


body.contact-page{
  font-family:'Montserrat',sans-serif;
  font-family:'Montserrat',sans-serif;
  
  background:var(--bg);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  scroll-behavior:smooth;
  overflow-y: auto; 
  font-size: 1.4rem; 
}

body.contact-page main{
  width:100%;
  max-width:600px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
}

body.contact-page h1 {
  margin-bottom: 0.5rem; 
}

body.contact-page .card{
  width:100%;
  background:linear-gradient(135deg,#111,#0a0a0a);
  border:1px solid #222;
  border-radius:1rem;
  padding:1.2rem; 
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
  margin-top:0.8rem; 
}

body.contact-page .contact-form{
  display:flex;
  flex-direction:column;
  gap:0.75rem; 
}

body.contact-page .form-group{
  display:flex;
  flex-direction:column;
}

body.contact-page .form-label{
  font-size:0.9rem;
  font-weight:600;
  margin-bottom:0.2rem; 
}

body.contact-page .form-input{
  padding:1.2rem 1.8rem;
  border-radius:0.5rem;
  border:1px solid #333;
  background:#0a0a0a;
  color:var(--fg);
  font-size:1.3rem; 
}

body.contact-page .form-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(78,139,201,0.5);
}

body.contact-page .form-textarea{
  resize:vertical;
  min-height:100px; 
  font-size:1.4rem; 
}

body.contact-page .form-button{
  align-self:center; 
  margin-top:1rem;
  padding:1rem 2.6rem; 
  border-radius:999px;
  font-weight:600;
  color:var(--fg);
  border:2px solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,
            linear-gradient(45deg,#4E8BC9,#4E8BC9,#4E8BC9) border-box;
  background-size:200% 200%;
  animation:gradient-shift 3s ease infinite;
  transition:all .3s ease;
  font-size:1rem; 
}

body.contact-page .form-button:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 40px rgba(78,139,201,0.4);
  filter:brightness(1.2);
}

body.contact-page .contact-alt{
  margin-top:1rem; 
  text-align:center;
  font-size:0.9rem;
  opacity:0.85;
}

body.contact-page .contact-alt a{
  color:var(--accent);
}

.phone-digits{
  font-size:0.8em;
  vertical-align:sub;
  margin-left:0.2em;
  display:inline-block;
}

body.contact-page .phone-contact{
  font-size:1.2rem;
  margin-top:0.5rem;
}

body.contact-page .phone-contact a{
  color:var(--accent);
}

body.index-page .phone-contact{
  font-size:clamp(2rem,6vw,3rem);
  font-weight:600;
  margin-top:1.5rem;
}

body.index-page .phone-contact a{
  display:inline-block;
  background:linear-gradient(45deg,var(--fg),var(--accent),var(--fg));
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 3s ease-in-out infinite;
  text-decoration:none;
  color:transparent;
  transition:transform .2s ease;
}

body.index-page .phone-contact a:hover{
  transform:scale(1.05);
}

body.contact-page #result{
  margin-top:0.5rem;
  font-size:0.9rem;
  opacity:0.85;
}



@media (max-width:600px){
  body.contact-page{
    padding:0.8rem 0.4rem 0.4rem;
    font-size: 0.9rem;
  }
  body.contact-page h1 {
    font-size: 2.2rem;
  }
  body.contact-page .card {
    padding: 1rem;
    width: 90%;
  }
  body.contact-page .form-button {
    padding: 1rem 2.6rem;
    font-size: 1.1rem;
  }

  body.index-page .logo-container{
    margin-top:5vh;
  }
  .button-container{
    margin-top:1rem;
  }
}

.home-link{
  display:block;
  margin: 0.5rem auto; 
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  transition:all .2s ease;
  font-size: 1rem; 
}
.home-link:hover{
  text-decoration:underline;
  transform:translateX(-5px);
}