:root{
  --bg:#0a0a0a;
  --text:#ffffff;
  --muted:#aaaaaa;
  --muted-2:#9ca3af;
  --card:rgba(255,255,255,0.05);
  --card-strong:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.1);
  --purple:#7c3aed;
  --blue:#2563eb;
  --shadow:0 16px 40px rgba(0,0,0,0.3);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

html{
  scroll-behavior:smooth;
}

html, body{
  min-height:100%;
  width:100%;
  overflow-x:clip;
}

body{
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  display:flex;
  flex-direction:column;
}

body.modal-open{
  overflow:hidden;
}

body.is-loading{
  overflow:hidden;
}

body.is-loading .page-content,
body.is-loading .navbar,
body.is-loading .site-footer,
body.is-loading .glow{
  opacity:0;
  filter:blur(8px);
  transform:translateY(12px);
  pointer-events:none;
}

.page-content,
.navbar,
.site-footer,
.glow{
  transition:opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
}

.site-preloader{
  position:fixed;
  inset:0;
  z-index:2200;
  display:grid;
  place-items:center;
  padding:24px;
  background:radial-gradient(circle at 22% 25%, rgba(124,58,237,0.22), transparent 46%),
             radial-gradient(circle at 78% 72%, rgba(37,99,235,0.22), transparent 50%),
             #08090f;
  opacity:1;
  visibility:visible;
  transition:opacity 0.6s ease, visibility 0.6s ease, filter 0.6s ease;
  will-change:opacity, filter;
}

.site-preloader.is-hidden{
  opacity:0;
  visibility:hidden;
  filter:blur(8px);
  pointer-events:none;
}

.preloader-core{
  position:relative;
  width:min(90vw, 420px);
  display:grid;
  justify-items:center;
  gap:16px;
  text-align:center;
}

.preloader-logo{
  width:clamp(140px, 26vw, 220px);
  height:auto;
  display:block;
  filter:drop-shadow(0 0 12px rgba(124,58,237,0.42)) drop-shadow(0 0 18px rgba(37,99,235,0.26));
  animation:logoFloat 3.6s ease-in-out infinite, logoPulse 2.4s ease-in-out infinite, logoFade 2.9s ease-in-out infinite;
  will-change:transform, opacity, filter;
}

.preloader-glow{
  position:absolute;
  width:min(48vw, 460px);
  aspect-ratio:1/1;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.34;
  pointer-events:none;
  animation:glowBreath 4.2s ease-in-out infinite;
}

.preloader-glow-1{
  background:var(--purple);
  top:10%;
  left:8%;
}

.preloader-glow-2{
  background:var(--blue);
  right:8%;
  bottom:10%;
  animation-delay:0.8s;
}

.preloader-text{
  color:#d9def3;
  letter-spacing:2px;
  font-size:13px;
  text-transform:uppercase;
}

.preloader-dots span{
  display:inline-block;
  margin-left:2px;
  animation:dotsBlink 1.1s ease-in-out infinite;
}

.preloader-dots span:nth-child(2){
  animation-delay:0.15s;
}

.preloader-dots span:nth-child(3){
  animation-delay:0.3s;
}

.preloader-progress{
  width:min(84vw, 260px);
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  overflow:hidden;
}

.preloader-progress-line{
  display:block;
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--purple), var(--blue));
  transition:width 0.18s linear;
}

.page-content{
  flex:1;
  width:100%;
  padding-top:88px;
}

.glow{
  position:fixed;
  width:380px;
  height:380px;
  border-radius:50%;
  filter:blur(120px);
  z-index:-1;
  pointer-events:none;
}

.glow1{
  background:var(--purple);
  top:-120px;
  left:-110px;
  opacity:0.28;
}

.glow2{
  background:var(--blue);
  bottom:-120px;
  right:-110px;
  opacity:0.28;
}

.navbar{
  width:100%;
  padding:20px 8%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:background-color 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.navbar.scrolled{
  background:rgba(12, 12, 18, 0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 30px rgba(0,0,0,0.24);
}

.logo{
  display:flex;
  align-items:center;
}
.logo img{
  display:block;
  height:clamp(40px, 4vw, 50px);
  width:auto;
  max-width:100%;
  transform:scale(2);
  transform-origin:left center;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:30px;
  list-style:none;
}

.nav-link{
  position:relative;
  color:#d1d5db;
  text-decoration:none;
  transition:color 0.25s ease;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--purple), var(--blue));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.25s ease;
}

.nav-link:hover,
.nav-link.active{
  color:#fff;
}

.nav-link:hover::after,
.nav-link.active::after{
  transform:scaleX(1);
}

.menu-toggle{
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:5px;
  z-index:1001;
  border:0;
  background:transparent;
  padding:0;
}

.menu-toggle span{
  width:28px;
  height:3px;
  background:white;
  border-radius:5px;
  transition:0.3s;
}

.nav-links a{
  color:#ccc;
  text-decoration:none;
  transition:0.3s;
}

.hire-btn,
.primary-btn,
.secondary-btn{
  padding:14px 28px;
  border-radius:999px;
  cursor:pointer;
  font-size:16px;
  text-decoration:none;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.hire-btn,
.primary-btn{
  border:none;
  background:linear-gradient(90deg, var(--purple), var(--blue));
  color:#fff;
  box-shadow:0 8px 20px rgba(37,99,235,0.2);
}

.secondary-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
}

.primary-btn:hover,
.secondary-btn:hover,
.hire-btn:hover{
  transform:translateY(-3px);
}

.primary-btn:hover,
.hire-btn:hover{
  box-shadow:0 12px 26px rgba(124,58,237,0.3);
}

.hero{
  width:100%;
  min-height:70vh;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
  margin-top:20px;
  padding:0 5%;
  gap:clamp(30px, 5vw, 60px);
}

.hero-left,
.hero-right{
  min-width:0;
  width:100%;
}

.hero-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.tag{
  color:#a855f7;
  letter-spacing:4px;
  margin-bottom:16px;
  font-size:clamp(11px, 1.5vw, 14px);
}

.hero h1{
  font-size:clamp(38px, 7vw, 72px);
  line-height:1.1;
  margin-bottom:20px;
}

.hero h1 span{
  color:var(--purple);
  display:block;
}

.description{
  color:var(--muted);
  font-size:clamp(16px, 2vw, 18px);
  max-width:550px;
  margin-bottom:32px;
  line-height:1.7;
}

#offer,
.projects-section,
.contact-section{
  width:100%;
  padding:clamp(64px, 8vw, 110px) 5%;
}

.offer-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}

.section-tag{
  color:var(--purple);
  letter-spacing:4px;
  margin-bottom:18px;
  display:inline-block;
  font-size:clamp(11px, 1.4vw, 13px);
}

.offer-text h2,
.projects-section h2,
.contact-card h2{
  font-size:clamp(30px, 5vw, 48px);
  line-height:1.12;
  margin-bottom:20px;
}

.offer-description{
  color:var(--muted);
  font-size:clamp(16px, 2vw, 18px);
  max-width:560px;
  line-height:1.8;
  margin-bottom:30px;
}

.offer-actions,
.buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.offer-grid,
.project-grid{
  display:grid;
  gap:22px;
}

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

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

.offer-card,
.project-card,
.contact-card,
.glass-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding: 30px;
}

.offer-card,
.project-card{
  padding:30px;
  transition:transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.offer-card:hover,
.project-card:hover{
  transform:translateY(-6px);
  border-color:rgba(124,58,237,0.45);
  background:var(--card-strong);
  box-shadow:var(--shadow);
}

.offer-card h3,
.project-card h3{
  margin-bottom:14px;
  font-size:22px;
}

.offer-card p,
.project-card p{
  color:#d1d5db;
  line-height:1.75;
}

.section-intro{
  max-width:700px;
  margin-bottom:38px;
}

.project-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:270px;
}

.project-tags{
  color:#a5b4fc;
  margin:18px 0 24px;
  font-size:14px;
}

.contact-card{
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  box-shadow:var(--shadow);
}

.contact-card .offer-description{
  max-width:540px;
  margin-bottom:0;
}

.site-footer{
  width:100%;
  padding:20px 5%;
  border-top:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(90deg, rgba(124,58,237,0.08), rgba(37,99,235,0.08));
  flex-shrink:0;
}

.footer-copy{
  margin:0;
  text-align:center;
  color:var(--muted-2);
  font-size:14px;
}

.contact-modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5, 6, 12, 0.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:1400;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.28s ease, visibility 0.28s ease;
}

.contact-modal-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.contact-modal{
  position:relative;
  width:min(100%, 560px);
  max-height:90dvh;
  overflow-y:auto;
  padding:26px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.16);
  background:linear-gradient(135deg, rgba(124,58,237,0.16), rgba(37,99,235,0.14)), rgba(13,13,18,0.88);
  box-shadow:0 25px 60px rgba(0,0,0,0.5);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transform:scale(0.94) translateY(8px);
  opacity:0;
  transition:transform 0.3s ease, opacity 0.3s ease;
}

.contact-modal-overlay.is-open .contact-modal{
  transform:scale(1) translateY(0);
  opacity:1;
}

.contact-modal h3{
  margin:0 0 18px;
  font-size:clamp(24px, 5vw, 30px);
}

.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease;
}

.modal-close:hover{
  background:rgba(255,255,255,0.18);
  transform:scale(1.05);
}

.contact-modal-form{
  display:grid;
  gap:14px;
}

.form-group{
  display:grid;
  gap:8px;
}

.form-group label{
  color:#d7d7df;
  font-size:14px;
}

.form-group input,
.form-group textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.06);
  color:#fff;
  padding:12px 14px;
  outline:none;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group textarea{
  resize:vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color:#b4b8c5;
}

.form-group input:focus,
.form-group textarea:focus,
.modal-close:focus-visible,
.modal-send-btn:focus-visible,
.menu-toggle:focus-visible,
.nav-link:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(124,58,237,0.28);
}

.modal-send-btn{
  margin-top:4px;
  width:100%;
}

.line{
  height:15px;
  background:rgba(255,255,255,0.1);
  border-radius:20px;
  margin-bottom:20px;
}

.short{
  width:40%;
  background:var(--purple);
}

.medium{
  width:70%;
}

.card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:44px;
}

.mini-card{
  height:120px;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
}

.hero-right .glass-card{
  width:min(100%, 560px);
  margin-inline:auto;
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.65s ease, transform 0.65s ease;
  will-change:transform, opacity;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

@keyframes logoFloat{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-9px) scale(1.02); }
}

@keyframes logoPulse{
  0%, 100%{ filter:drop-shadow(0 0 12px rgba(124,58,237,0.4)) drop-shadow(0 0 16px rgba(37,99,235,0.24)); }
  50%{ filter:drop-shadow(0 0 22px rgba(124,58,237,0.68)) drop-shadow(0 0 28px rgba(37,99,235,0.45)); }
}

@keyframes logoFade{
  0%, 100%{ opacity:0.96; }
  50%{ opacity:1; }
}

@keyframes glowBreath{
  0%, 100%{ transform:scale(1); opacity:0.24; }
  50%{ transform:scale(1.12); opacity:0.38; }
}

@keyframes dotsBlink{
  0%, 80%, 100%{ opacity:0.26; transform:translateY(0); }
  40%{ opacity:1; transform:translateY(-1px); }
}

@media(max-width:1024px){
  .offer-grid,
  .project-grid{
    grid-template-columns:1fr 1fr;
  }

  .hero{
    padding:0 6%;
  }
}

@media(max-width:900px){
  .page-content{
    padding-top:84px;
  }

  .hero{
    grid-template-columns:1fr;
    text-align:center;
    margin-top:8px;
    padding:0 20px;
    gap:30px;
  }

  .hero-right{
    width:100%;
  }

  .hero-right .glass-card{
    width:min(100%, 560px);
  }

  .hero-left,
  .hero-right,
  .description,
  .offer-text,
  .section-intro,
  .contact-card > div{
    margin:0 auto;
  }

  .buttons,
  .offer-actions{
    justify-content:center;
  }

  .offer-wrapper,
  .project-grid,
  .offer-grid{
    grid-template-columns:1fr;
  }

  .contact-card{
    flex-direction:column;
    text-align:center;
    padding:32px 22px;
  }

  .contact-card .primary-btn{
    align-self:center;
    margin-top:12px;
  }

  .nav-links{
    position:fixed;
    top:84px;
    left:0;
    width:100%;
    background:rgba(12, 12, 18, 0.95);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,0.1);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:26px 0 34px;
    gap:22px;
    opacity:0;
    transform:translateY(-14px);
    pointer-events:none;
    visibility:hidden;
    transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index:1002;
  }

  .nav-links.active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    visibility:visible;
  }

  .nav-hire-item{
    display:none;
  }

  .menu-toggle{
    display:flex;
    z-index:1003;
  }

  .menu-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2){
    opacity:0;
  }

  .menu-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .contact-modal{
    width:min(100%, 94vw);
    padding:20px;
  }
}

@media(max-width:600px){
  .navbar{
    padding:18px 5%;
  }

  #offer,
  .projects-section,
  .contact-section{
    padding:56px 5%;
  }

  .hero h1{
    font-size:clamp(34px, 10vw, 46px);
  }

  .description,
  .offer-description,
  .offer-card p,
  .project-card p{
    text-align:left;
  }

  .project-card,
  .offer-card{
    padding:24px 20px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *{
    animation:none !important;
    transition:none !important;
  }

  .reveal,
  .reveal.visible{
    opacity:1;
    transform:none;
  }

  .preloader-logo,
  .preloader-glow,
  .preloader-dots span{
    animation:none;
  }
}