/* =====================
RESET
===================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:tahoma, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji";
  background:#060612;
  color:#fff;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{
  text-decoration:none;
  color:inherit;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Avoid CLS: always reserve space for images inside fixed-height wrappers */
.portfolio-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =====================
CONTAINER
===================== */
.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* =====================
SECTIONS
===================== */
.section{
  padding:100px 0;
}
.section--dark{
  background:#0a0a1a;
}
.section__head{
  text-align:center;
  margin-bottom:60px;
}
.section__head--between{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:60px;
}
.section__title{
  font-size:34px;
  margin-bottom:10px;
}
.section__subtitle{
  color:#9ea0c3;
  font-size:15px;
}

/* =====================
BUTTONS
===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:10px;
  font-size:14px;
  transition:transform .3s, background-color .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn-primary{
  background:#6c4cff;
  color:#fff;
}
.btn-primary:hover{
  background:#7f64ff;
  transform:translateY(-2px);
}
.btn-outline{
  border:1px solid #6c4cff;
  color:#6c4cff;
}
.btn-outline:hover{
  background:#6c4cff;
  color:#fff;
}

/* =====================
HERO
===================== */
.hero{
  position:relative;
  padding:120px 0 140px;
  overflow:hidden;
}
.hero__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
}
.hero__badge{
  background:#15152c;
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  display:inline-block;
  margin-bottom:20px;
}
.hero__title{
  font-size:48px;
  line-height:1.3;
  margin-bottom:20px;
}
.hero__title-gradient{
  background:linear-gradient(90deg,#7c5cff,#4cc3ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__subtitle{
  color:#a8aacb;
  margin-bottom:30px;
}
.hero__cta{
  display:flex;
  gap:15px;
  margin-bottom:40px;
}
/* meta */
.hero__meta{
  display:flex;
  gap:40px;
}
.hero__meta-item{
  display:flex;
  flex-direction:column;
}
.hero__meta-number{
  font-size:26px;
  font-weight:bold;
  color:#7c5cff;
}
.hero__meta-label{
  font-size:12px;
  color:#9ea0c3;
}
/* visual */
.hero__visual{
  position:relative;
  height:420px;
}
#hero-webgl-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero__floating-cards{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-card{
  position:absolute;
  background:#121228;
  border:1px solid #242448;
  padding:14px 18px;
  border-radius:10px;
  font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.hero-card--store{ top:20%; left:10%; }
.hero-card--personal{ top:60%; left:20%; }
.hero-card--company{ top:35%; right:10%; }

/* =====================
SERVICES
===================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}
.service-card{
  background:#0f0f25;
  border:1px solid #1f1f40;
  padding:30px;
  border-radius:16px;
  transition:transform .3s, border-color .3s, box-shadow .3s;
  will-change:transform;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:#6c4cff;
  box-shadow:0 12px 30px rgba(108,76,255,.15);
}
.service-card__icon{
  width:40px;
  height:40px;
  background:#6c4cff;
  border-radius:8px;
  margin-bottom:14px;
}
.service-card__title{
  font-size:18px;
  margin-bottom:10px;
}
.service-card__text{
  font-size:14px;
  color:#a4a7cc;
  margin-bottom:14px;
}
.service-card__features{
  list-style:none;
}
.service-card__features li{
  font-size:13px;
  margin-bottom:6px;
  color:#c5c7e0;
}

/* =====================
PORTFOLIO
===================== */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.portfolio-card{
  background:#0f0f22;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #202040;
  transition:transform .3s, box-shadow .3s, border-color .3s;
  will-change:transform;
}
.portfolio-card:hover{
  transform:translateY(-5px);
  border-color:#2a2a5a;
  box-shadow:0 14px 36px rgba(15,15,34,.35);
}
.portfolio-card__thumb{
  height:220px;
  overflow:hidden;
}
.portfolio-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.portfolio-card:hover img{
  transform:scale(1.08);
}
.portfolio-card__body{
  padding:18px;
}
.portfolio-card__tag{
  font-size:11px;
  background:#6c4cff;
  padding:4px 10px;
  border-radius:20px;
  display:inline-block;
  margin-bottom:8px;
}
.portfolio-card__title{
  font-size:18px;
  margin-bottom:6px;
}
.portfolio-card__text{
  font-size:13px;
  color:#9fa2c8;
}

/* =====================
PROCESS
===================== */
.process{
  max-width:700px;
  margin:auto;
}
.process__list{
  list-style:none;
  margin-top:40px;
}
.process__item{
  display:flex;
  gap:20px;
  margin-bottom:24px;
}
.process__step{
  width:34px;
  height:34px;
  background:#6c4cff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

/* =====================
CTA
===================== */
.cta-final{
  background:#0a0a18;
}
.cta-final__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#121228;
  padding:40px;
  border-radius:16px;
}
.cta-final__title{
  font-size:26px;
  margin-bottom:10px;
}
.cta-final__subtitle{
  font-size:14px;
  color:#a0a3c9;
}

/* =====================
RESPONSIVE
===================== */

/* Large tablets / small desktops */
@media (max-width: 1200px){
  .hero__inner{ gap:48px; }
}

/* Tablets */
@media (max-width: 992px){
  .hero__inner{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
  }
  .hero__cta{ justify-content:center; }
  .hero__meta{ justify-content:center; }

  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:80px 0; }
  .hero__visual{ height:360px; }
}

/* Mobile */
@media (max-width: 768px){
  .section{ padding:60px 0; }

  .section__head--between{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:15px;
  }

  .hero__title{ font-size:32px; }
  .hero__subtitle{ font-size:14px; }

  .services-grid{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:1fr; }

  .cta-final__inner{
    flex-direction:column;
    text-align:center;
    gap:20px;
    padding:28px;
  }

  .hero__floating-cards{ display:none; }
  .hero__visual{ height:300px; }
}

/* Small mobile */
@media (max-width: 480px){
  .container{ width:92%; }
  .hero__title{ font-size:28px; }
  .hero__meta{ gap:24px; }
  .service-card{ padding:22px; }
  .portfolio-card__thumb{ height:200px; }
}

/* =========================
HEADER
========================= */

.header{
  position:fixed;
  top:0;
  width:100%;
  background:rgba(10,10,20,0.6);
  backdrop-filter:blur(12px);
  z-index:1000;
}

body{
  padding-top:80px;
}

.header .container{
  max-width:1200px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* =========================
LOGO
========================= */

.logo img{
  height:64px;
  transition:0.3s;
}

.logo img:hover{
  transform:rotate(-3deg) scale(1.05);
}

/* =========================
MENU
========================= */

.menu{
  display:flex;
  align-items:center;
  gap:28px;
}

.menu a{
  color:#fff;
  text-decoration:none;
  font-size:15px;
  position:relative;
}

.menu a::after{
  content:"";
  position:absolute;
  bottom:-6px;
  right:0;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,#7c5cff,#00d4ff);
  transition:0.3s;
}

.menu a:hover::after{
  width:100%;
}

/* =========================
HEADER AUTH BUTTONS
========================= */

.header-auth{
  display:flex;
  align-items:center;
  gap:10px;
  margin-inline-start:14px;
}

.header-auth__btn{
  white-space:nowrap;
  padding:10px 16px;
  border-radius:10px;
  line-height:1;
}

.header-auth__btn--danger{
  border-color:rgba(239,68,68,.6);
  color:#ef4444;
}

.header-auth__btn--danger:hover{
  background:rgba(239,68,68,.08);
}

/* =========================
BUTTON
========================= */

.btn-primary{
  background:linear-gradient(90deg,#7c5cff,#00d4ff);
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
  transition:0.3s;
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* =========================
MOBILE MENU BUTTON
========================= */

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.menu-toggle span{
  width:26px;
  height:2px;
  background:#fff;
  border-radius:2px;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:900px){

  .header .container{
    flex-direction:row-reverse;
  }

  .logo img{
    height:52px;
  }

  .menu{
    position:fixed;
    top:70px;
    right:0;
    width:100%;
    background:rgba(10,10,20,0.96);
    backdrop-filter:blur(10px);
    flex-direction:column;
    gap:20px;
    padding:30px 0;
    display:none;
    text-align:center;
  }

  .menu.active{
    display:flex;
  }

  .btn-primary{
    display:none;
  }

  .header-auth{
    display:none;
  }

  .menu-toggle{
    display:flex;
  }
}
/* --- Register form mobile fix --- */
.register-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px){
  .register-form{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .register-form > div{
    grid-column: 1 / -1 !important;
  }

  .register-form button[type="submit"],
  .register-form .btn,
  .register-form .btn-primary{
    width: 100% !important;
    display: flex !important;
  }
}

@media (max-width: 480px){
  .auth-page{
    padding-bottom: 120px !important;
  }

  .register-form button[type="submit"],
  .register-form .btn,
  .register-form .btn-primary{
    min-height: 48px;
    font-size: 15px;
  }
}