:root{
  --void:#120821;
  --void-soft:#1C0F35;
  --panel:#241245;
  --violet:#8A5CF6;
  --violet-deep:#6A3FD1;
  --orchid:#D8B4FF;
  --gold:#F5C263;
  --mist:#EFE9FB;
  --mist-dim:rgba(239,233,251,0.68);
  --hairline:rgba(216,180,255,0.16);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--void);
  color:var(--mist);
  font-family:'Inter', sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--mist);
}

a{color:inherit;text-decoration:none;}

.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--orchid);
  opacity:0.85;
}
.eyebrow-light{color:var(--orchid);}
.eyebrow-gold{color:var(--gold);}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 30px;
  border-radius:100px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.92rem;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{
  background:var(--gold);
  color:var(--void);
}
.btn-gold:hover{box-shadow:0 12px 30px -8px rgba(245,194,99,0.55);}
.btn-outline{
  border-color:rgba(239,233,251,0.4);
  color:var(--mist);
}
.btn-outline:hover{background:var(--mist);color:var(--void);border-color:var(--mist);}

section{padding:120px 8vw;}
@media(max-width:720px){section{padding:80px 6vw;}}

/* ===== NAV ===== */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 6vw;
  background:rgba(18,8,33,0);
  transition:background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
nav.scrolled{
  background:rgba(18,8,33,0.88);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--hairline);
  padding:12px 6vw;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0; /* allows flex children to shrink instead of overflowing */
}
.nav-logo{
  height:56px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
}
.nav-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  font-size:1.2rem;
  color:var(--mist);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-links{gap:36px;font-size:0.87rem;font-weight:500;display:none;}
.nav-links a{opacity:0.7;transition:opacity 0.2s;}
.nav-links a:hover{opacity:1;color:var(--orchid);}
@media(min-width:760px){.nav-links{display:flex;}}

@media(max-width:600px){
  .nav-logo{height:40px;}
  .nav-name{font-size:0.95rem;}
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-top:130px;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(138,92,246,0.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 80%, rgba(216,180,255,0.18), transparent 60%),
    var(--void);
  overflow:hidden;
}
#constellation{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:680px;
}
.hero h1{
  font-size:clamp(2.2rem,6vw,4.6rem);
  margin-bottom:26px;
}
.hero .glow{
  color:var(--gold);
  text-shadow:0 0 40px rgba(245,194,99,0.5);
}
.hero .tagline{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:500;
  font-style:italic;
  font-size:1.15rem;
  color:var(--orchid);
  margin-bottom:22px;
}
.hero .lede{
  font-size:1.05rem;
  max-width:460px;
  color:var(--mist-dim);
  margin-bottom:38px;
}
.scroll-cue{
  position:absolute;
  bottom:24px;
  left:6vw;
  z-index:2;
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--mist-dim);
}
.scroll-cue::after{
  content:"";
  display:block;
  width:1px;height:34px;
  background:linear-gradient(var(--orchid),transparent);
  margin:10px auto 0;
}
@media(max-width:600px){
  .hero{padding-top:110px;}
  .scroll-cue{display:none;} /* saves vertical space on short mobile screens */
}

/* ===== DIVIDER STRIP ===== */
.divider-strip{
  padding:34px 8vw;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:18px;
  background:var(--void-soft);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--mist-dim);
}
.divider-strip i{color:var(--violet);font-style:normal;opacity:0.7;}
.divider-strip:empty{display:none;} /* collapses the bar when there's no content in it */

/* ===== ABOUT ===== */
.about{
  display:grid;
  grid-template-columns:0.75fr 1.25fr;
  gap:80px;
  align-items:center;
}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:48px;}}

.orb-wrap{display:flex;justify-content:center;}

.about-portrait{
  width:280px;
  height:280px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 80px -10px rgba(138,92,246,0.6), 0 30px 60px -20px rgba(0,0,0,0.5);
}
@media(max-width:600px){
  .about-portrait{width:200px;height:200px;}
}

.about-copy h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin:14px 0 22px;}
.about-copy p{max-width:480px;color:var(--mist-dim);margin-bottom:32px;}

/* ===== CLIENTS ===== */
.clients{background:var(--void-soft);}
.section-head{max-width:560px;margin-bottom:56px;}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-top:12px;}

.client-grid{
  display:flex;
  gap:26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:16px 4px 20px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--violet) var(--void-soft);
}
.client-grid::-webkit-scrollbar{height:8px;}
.client-grid::-webkit-scrollbar-track{background:var(--void-soft);border-radius:10px;}
.client-grid::-webkit-scrollbar-thumb{background:var(--violet);border-radius:10px;}

.client-card{
  flex:0 0 300px;
  scroll-snap-align:start;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:20px;
  padding:52px 32px;
  text-align:center;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.client-card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,180,255,0.4);
  box-shadow:0 24px 50px -20px rgba(138,92,246,0.45);
}

.client-mark{
  width:140px;
  height:140px;
  margin:0 auto 22px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  background:linear-gradient(150deg,var(--violet),var(--violet-deep));
}
.client-card h3{font-size:1.08rem;margin-bottom:6px;}
.client-card p{font-size:0.85rem;color:var(--mist-dim);margin:0;}

@media(max-width:600px){
  .client-card{
    flex:0 0 78%;
    padding:36px 22px;
  }
  .client-mark{
    width:110px;
    height:110px;
  }
}

/* ===== PERFORMANCE ===== */
.Performance{background:var(--void-soft);}

.Performance-grid{
  display:flex;
  gap:26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:16px 4px 20px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--violet) var(--void-soft);
}
.Performance-grid::-webkit-scrollbar{height:8px;}
.Performance-grid::-webkit-scrollbar-track{background:var(--void);border-radius:10px;}
.Performance-grid::-webkit-scrollbar-thumb{background:var(--violet);border-radius:10px;}

.Performance-card{
  flex:0 0 calc((100% - 52px) / 3);
  scroll-snap-align:start;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:20px;
  padding:24px;
  text-align:center;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.Performance-card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,180,255,0.4);
  box-shadow:0 24px 50px -20px rgba(138,92,246,0.45);
}
@media(max-width:900px){
  .Performance-card{flex:0 0 calc((100% - 26px) / 2);}
}
@media(max-width:600px){
  .Performance-card{flex:0 0 85%;padding:18px;}
}

.Performance-mark{
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  margin:0 0 12px;
  border-radius:14px;
  object-fit:contain;
  background:var(--panel);
}
.Performance-card h3{font-size:1.08rem;margin-bottom:6px;}
.Performance-card p{font-size:0.85rem;color:var(--mist-dim);margin:0;}

/* ===== SERVICES ===== */
.service-list{
  display:flex;
  flex-direction:column;
}
.service-row{
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:26px 4px;
  border-bottom:1px solid var(--hairline);
}
.service-row:first-child{border-top:1px solid var(--hairline);}
.service-row svg{
  width:24px;height:24px;
  stroke:var(--gold);
  flex-shrink:0;
  margin-top:4px;
}
.service-row h4{font-size:1.08rem;font-weight:600;margin-bottom:4px;}
.service-row p{font-size:0.92rem;color:var(--mist-dim);max-width:520px;}

@media(max-width:600px){
  .service-row{gap:16px;padding:20px 2px;}
  .service-row svg{width:20px;height:20px;}
}

/* ===== CONTACT ===== */
.contact{
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(138,92,246,0.3), transparent 60%),
    var(--void-soft);
}
.contact-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:48px;
}
.contact h2{font-size:clamp(2rem,5vw,3.4rem);max-width:560px;margin:16px 0 32px;}
.contact-details{display:flex;flex-direction:column;gap:10px;font-size:1rem;}
.contact-details a{color:var(--mist-dim);}
.contact-details a:hover{color:var(--orchid);}
.contact-details .handle{color:var(--mist-dim);opacity:0.7;}
.social-row{display:flex;gap:14px;margin-top:18px;}
.social-row a{
  width:38px;height:38px;
  border:1.5px solid var(--hairline);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.social-row a:hover{background:var(--orchid);border-color:var(--orchid);}
.social-row a:hover svg{stroke:var(--void);}
.social-row svg{width:16px;height:16px;stroke:var(--mist);transition:stroke 0.2s ease;}

footer{
  padding:30px 8vw;
  text-align:center;
  font-size:0.78rem;
  color:var(--mist-dim);
  opacity:0.6;
  background:var(--void-soft);
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}
.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:28px;height:22px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:var(--mist);
  border-radius:2px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-links{
  gap:36px;
  font-size:0.87rem;
  font-weight:500;
  display:none;
}
@media(min-width:760px){
  .nav-links{display:flex;}
  .nav-toggle{display:none;}
}

/* mobile dropdown state */
@media(max-width:759px){
  .nav-links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:70%;
    max-width:300px;
    background:var(--void-soft);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:28px;
    padding:40px;
    transform:translateX(100%);
    transition:transform 0.3s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,0.4);
  }
  .nav-links.open{
    display:flex;
    transform:translateX(0);
  }
  .nav-links a{font-size:1.1rem;}
}