:root{
  --brand-primary: var(--color-primary, #6a5cff);
  --brand-secondary: var(--color-secondary, #8f7bff);
  --brand-accent: var(--color-accent, #14b8a6);
  --lux-bg: var(--color-bg, #0b1020);
  --lux-surface: rgba(255,255,255,0.06);
  --lux-surface-2: rgba(255,255,255,0.1);
  --lux-text: var(--color-text, #f8fafc);
  --lux-muted: rgba(248,250,252,.72);
  --lux-border: rgba(255,255,255,.12);
  --lux-shadow: 0 20px 60px rgba(0,0,0,.22);
  --lux-radius: 22px;
}

body{
  background:
    radial-gradient(circle at top right, rgba(106,92,255,.18), transparent 28%),
    radial-gradient(circle at top left, rgba(20,184,166,.08), transparent 24%),
    var(--lux-bg);
  color: var(--lux-text);
}
.container{
  width:min(1180px, calc(100% - 32px));
  margin-inline:auto;
}

.lux-section,
.lux-page-hero{
  padding: 72px 0;
}

.lux-section-alt{
  background: rgba(255,255,255,.02);
}

.lux-eyebrow{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--lux-border);
  color: var(--lux-muted);
  font-size: 13px;
  margin-bottom: 14px;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
  flex-wrap:wrap;
}

.section-head h2,
.lux-page-hero h1,
.lux-hero-copy h1{
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.05;
  margin:0;
}

.lux-page-hero p,
.lux-hero-copy p{
  color: var(--lux-muted);
  max-width: 720px;
  line-height: 1.9;
  font-size: 1.05rem;
}

.lux-hero{
  min-height: 78vh;
  display:grid;
  align-items:center;
  padding: 90px 0 70px;
}

.lux-hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .8fr;
  gap:28px;
  align-items:stretch;
}

.lux-hero-copy,
.lux-hero-panel,
.lux-panel,
.lux-card,
.lux-cta-box,
.lux-project-card,
.lux-contact-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--lux-border);
  box-shadow: var(--lux-shadow);
  backdrop-filter: blur(18px);
}

.lux-hero-copy,
.lux-hero-panel{
  border-radius: 28px;
  padding: 34px;
}

.lux-hero-actions,
.lux-form-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 22px;
}

.btn-main,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding: 0 22px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:700;
  transition: transform .24s ease, box-shadow .24s ease, opacity .24s ease;
}

.btn-main{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color:#fff;
  box-shadow: 0 16px 32px rgba(106,92,255,.35);
  border:none;
}

.btn-ghost{
  color: var(--lux-text);
  border:1px solid var(--lux-border);
  background: rgba(255,255,255,.04);
}

.btn-main:hover,
.btn-ghost:hover{
  transform: translateY(-2px);
}

.lux-stat{
  padding: 18px 0;
  border-bottom:1px solid var(--lux-border);
}
.lux-stat:last-child{border-bottom:0}
.lux-stat strong{display:block; font-size:1.1rem; margin-bottom:6px}
.lux-stat span{color:var(--lux-muted)}

.lux-card-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:22px;
}
.lux-card{
  border-radius: 24px;
  overflow:hidden;
  transition: transform .28s ease, border-color .28s ease;
}
.lux-card:hover,
.lux-project-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.2);
}
.lux-card-media{
  aspect-ratio: 16/11;
  overflow:hidden;
  background: rgba(255,255,255,.04);
}
.lux-card-media img,
.lux-project-media img,
.lux-service-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lux-card-body{
  padding: 20px;
}
.lux-card-body h3,
.lux-project-body h3{
  margin: 0 0 10px;
  font-size: 1.18rem;
}
.lux-card-body p,
.lux-project-body p{
  color: var(--lux-muted);
  line-height: 1.8;
  margin:0;
}
.lux-link{
  display:inline-block;
  margin-top: 14px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

.lux-chip{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--lux-border);
  margin-bottom:10px;
  font-size: 12px;
}

.lux-cta-box{
  border-radius: 28px;
  padding: 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.lux-contact-layout,
.lux-service-layout{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  padding-bottom: 80px;
}

.lux-panel{
  border-radius: 26px;
  padding: 28px;
}

.lux-contact-cards{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.lux-contact-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--lux-border);
}

.lux-contact-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
}

.lux-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.lux-form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}

.lux-field{
  position:relative;
}

.lux-field input,
.lux-field textarea,
.lux-field select{
  width:100%;
  border-radius:16px;
  border:1px solid var(--lux-border);
  background: rgba(255,255,255,.04);
  color:#fff;
  padding: 18px 16px;
  outline:none;
}

.lux-field select{
  appearance:none;
}
.lux-field input:focus,
.lux-field textarea:focus,
.lux-field select:focus{
  border-color: rgba(143,123,255,.65);
  box-shadow: 0 0 0 4px rgba(143,123,255,.14);
}

.lux-field label{
  position:absolute;
  inset-inline-start:16px;
  top:16px;
  color: var(--lux-muted);
  transition: all .2s ease;
  pointer-events:none;
  background: transparent;
}

.lux-field input:focus + label,
.lux-field input:not(:placeholder-shown) + label,
.lux-field textarea:focus + label,
.lux-field textarea:not(:placeholder-shown) + label{
  top:-10px;
  font-size:12px;
  padding: 0 6px;
  background: var(--lux-bg);
  border-radius: 8px;
}

.lux-field .is-static{
  top:-10px;
  font-size:12px;
  padding:0 6px;
  background: var(--lux-bg);
  border-radius:8px;
}

.lux-filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.lux-filter{
  min-height:42px;
  padding: 0 16px;
  border-radius: 999px;
  border:1px solid var(--lux-border);
  background: rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
}
.lux-filter.is-active{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border-color: transparent;
}

.lux-masonry-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:22px;
  padding-bottom:80px;
}

.lux-project-card{
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--lux-border);
  transition: transform .28s ease;
}
.lux-project-link{
  color:inherit;
  text-decoration:none;
}
.lux-project-media{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
}
.lux-project-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.lux-project-body{
  padding:20px;
}
.lux-project-placeholder{
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.lux-service-banner{
  border-radius:20px;
  overflow:hidden;
  aspect-ratio: 16/8;
  margin-bottom: 20px;
}

.lux-richtext{
  line-height:1.95;
  color: var(--lux-muted);
}
.lux-feature-list{
  padding:0;
  list-style:none;
  margin:0 0 24px;
}
.lux-feature-list li{
  padding:12px 0;
  border-bottom:1px solid var(--lux-border);
}

.lux-brands-shell{
  overflow:hidden;
  border-radius: 22px;
  border:1px solid var(--lux-border);
  background: rgba(255,255,255,.03);
}
.brands-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation: brandLoop 28s linear infinite;
  padding: 18px;
}
.lux-brand-item{
  min-width: 170px;
  height: 88px;
  display:grid;
  place-items:center;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--lux-border);
  flex:0 0 auto;
}
.lux-brand-item img{
  max-width: 120px;
  max-height: 48px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter: grayscale(1) opacity(.85);
  transition: filter .24s ease, transform .24s ease;
}
.lux-brand-item:hover img{
  filter:none;
  transform: scale(1.04);
}
.lux-brands-shell:hover .brands-track{
  animation-play-state: paused;
}

@keyframes brandLoop{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (max-width: 980px){
  .lux-hero-grid,
  .lux-contact-layout,
  .lux-service-layout{
    grid-template-columns:1fr;
  }
  .lux-card-grid,
  .lux-masonry-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 680px){
  .lux-card-grid,
  .lux-masonry-grid,
  .lux-form-grid{
    grid-template-columns:1fr;
  }
  .lux-section,
  .lux-page-hero{
    padding: 54px 0;
  }
  .lux-hero-copy,
  .lux-hero-panel,
  .lux-panel{
    padding:22px;
  }
}