body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:white;
color:#0b0b12;
overflow-x:hidden;
}

.section{
min-height:100vh;
padding:120px 60px;
position:relative;
}

.navbar{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content: space-between;
align-items:center;
padding:18px 40px;
background:rgba(255,255,255,.9);
backdrop-filter:blur(10px);
z-index:100;
}

nav{
display:flex;
align-items:center;
flex-wrap:wrap;
margin-right: 85px;
}

.logo{width:60px;margin-right:10px}
.brand{display:flex;align-items:center}

.navbar .brand span{
background: linear-gradient(to right,#51148a, #8a0d79);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: bold;
}

nav a{
margin-left:20px;
cursor:pointer;
opacity:.8;
white-space:nowrap;
min-width:fit-content;
font-weight: bold;
}

nav a.active{color:#4d0b79}

.hero{
text-align:center;
overflow:hidden;
}

#heroCanvas{
position:absolute;
width:100%;
height:100%;
top:80px;
left:0;
}

.hero-content{
position:relative;
z-index:2;
top:35%;
}

.hero h1{
font-size:72px;
background: linear-gradient(to right,#9333ea, #db2777);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero h2{
font-size:42px;
background: linear-gradient(to right,#9333ea, #db2777);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero p{
background: linear-gradient(to right, #6a0fc0, #830d7d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 36px;
}

p.reveal, p1.reveal {
margin-top: 50px;
}

#home p1.reveal {
position: absolute;
bottom: 265px;
left: 50%;
transform: translateX(-50%);
width: 60%;
max-width: 800px;
margin-top: 0;
text-align: center;
}

.hero p1{
background: linear-gradient(to right, #270746, #270746);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 19px;
width: 60%;
max-width: 800px;
}

.hero p2{
background: linear-gradient(to right, #7028b3, #37054e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 25px;
width: 60%;
max-width: 800px;
text-align: center;
font-weight: 300;
letter-spacing: 1px;
margin-top: 10px;
margin-bottom: 20px;
}


.cta{
padding:15px 25px;
border:none;
background:white;
color:black;
border-radius:5px;
margin-top:20px;
cursor:pointer;
}

.gallery{max-width:80%;margin:auto}

.gallery h2{
  font-size:42px;
  background: linear-gradient(to right,#9333ea, #db2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gallery p{
  background: linear-gradient(to right, #270746, #270746);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 19px;
  width: 60%;
  max-width: 800px;
}

/* .gallery p1{
background: linear-gradient(to right, #6a0fc0, #830d7d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 22px;
width: 60%;
max-width: 800px;
text-align: center;
margin: 20px auto;
} */

.gallery-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 40px;
}

.gallery-item{
width:100%;
margin-bottom:20px;
border-radius:10px;
cursor:pointer;
transition:transform .4s;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.shop-toggle {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.toggle-btn {
  padding: 10px 18px;
  border: 1px solid #e9ecef;
  background: #f8f9fa;
  color: #0b0b12;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

.toggle-btn.active,
.toggle-btn:hover {
  background: #9333ea;
  color: #fff;
  border-color: #9333ea;
}

.shop-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid #e9ecef;
  border-radius: 15px;
  padding: 24px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 18px;
}

.shop-card h3 {
  margin: 0 0 10px 0;
  font-size: 22px;
  color: #9333ea;
}

.shop-meta {
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #0b0b12;
}

.shop-card p {
  margin: 0 0 18px 0;
  line-height: 1.5;
  color: #27272a;
}

.shop-link {
  display: inline-block;
  padding: 10px 18px;
  background: #9333ea;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  align-self: flex-start;
}

.shop-link:hover {
  background: #7c2d91;
}

.shop-link-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.gallery-item:hover{transform:scale(1.05)}

.filters button{
  padding:10px 18px;
  margin:5px;
  background:#f8f9fa;
  color:#0b0b12;
  border:1px solid #e9ecef;
  cursor:pointer
}

.contact{max-width:800px;margin:auto}

.contact h2{
  font-size:42px;
  background: linear-gradient(to right,#9333ea, #db2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-layout {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  margin-bottom: 40px;
  align-items: flex-start;
}

.contact-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 300px;
}

.contact-card {
  border: 1px solid #e9ecef;
  border-radius: 15px;
  padding: 20px;
  background: rgba(255,255,255,0.9);
  width: 100%;
}

.contact-card h3 {
  margin-top: 0;
  color: #9333ea;
}

.contact-card p{
background: linear-gradient(to right, #270746, #270746);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 18px;
width: 90%;
max-width: 800px;
}

.contact-form {
  border: 1px solid #e9ecef;
  border-radius: 15px;
  padding: 20px;
  background: rgba(255,255,255,0.9);
  width: 400px;
  margin-left: 15px;
}

.contact-form h3 {
  margin-top: 0;
  color: #9333ea;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
  resize: vertical;
}

.contact-form button {
  padding: 10px 20px;
  background: #9333ea;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.contact-form button:hover {
  background: #7c2d91;
}

.custom-commission-card {
  border: 1px solid #e9ecef;
  border-radius: 15px;
  padding: 20px;
  background: rgba(255,255,255,0.9);
  width: 100%;
}

.custom-commission-card p{
  background: linear-gradient(to right, #270746, #270746);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 18px;
  width: 90%;
  max-width: 800px;
}

.custom-commission-card h3 {
  margin-top: 0;
  color: #9333ea;
}

.custom-commission-card p {
  margin: 10px 0;
}

.faq{margin-top:40px}

.faq p{
 background: linear-gradient(to right, #270746, #270746);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 18px;
  width: 90%;
  max-width: 800px;
}

/* responsive contact */
@media (max-width:768px){
.contact-layout { flex-direction: column; gap: 20px; }
.contact-left { width: 100%; }
.contact-card, .contact-form, .custom-commission-card { width: 100%; }
}
.faq-item{margin-bottom:20px;padding:20px;background:white;border:1px solid #e9ecef;border-radius:10px}
.faq-item h4{margin:0 0 10px 0;color:#9333ea}
.faq-item p{margin:0}

footer{text-align:center;padding:40px;background:#d2d8df;color:#0b0b12}

footer p{
  background: linear-gradient(to right, #270746, #1a0430);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 12px;
  width: 90%;
  max-width: 800px;
  margin: 0 auto 20px;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto 20px;
  flex-wrap: wrap;
}

.footer-brand h3 {
  margin: 0 0 10px 0;
  color: #6a1eb1;
  font-size: 24px;
}

.footer-brand p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}


.footer-brand p{
  background: linear-gradient(to right, #270746, #270746);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 14px;
  width: 90%;
  max-width: 800px;
}


.footer-sitemap, .footer-connect {
  text-align: left;
}

.footer-sitemap h4, .footer-connect h4 {
  margin: 0 0 10px 0;
  color: #0b0b12;
  font-size: 18px;
}

.footer-sitemap ul, .footer-connect ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-sitemap li, .footer-connect li {
  margin-bottom: 5px;
}

.footer-sitemap a, .footer-connect a {
  color: #0b0b12;
  text-decoration: none;
  font-size: 14px;
}

.footer-sitemap a:hover, .footer-connect a:hover {
  color: #9333ea;
}

/* responsive footer */
@media (max-width:768px){
.footer-content { flex-direction: column; text-align: center; }
.footer-sitemap, .footer-connect { text-align: center; margin-top: 20px; }
}

/* lightbox */
.lightbox{
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,.95);
display:none;
justify-content:center;
align-items:center;
z-index:200
}

.lightbox img{
max-width:90%;
max-height:90%;
animation:zoom .6s ease
}

@keyframes zoom{
from{transform:scale(.7);opacity:0}
to{transform:scale(1);opacity:1}
}

.music-production-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #e9ecef;
  border-radius: 15px;
  padding: 20px;
  margin: 0 auto 20px;
  width: 80%;
  max-width: 900px;
  text-align: left;
  background: rgba(255,255,255,0.9);
}

.music-text {
  flex: 1;
  text-align: left;
}

.music-text p2 {
  text-align: left;
  margin-bottom: 10px;
}

.music-image {
  flex: 1;
  text-align: right;
}

.music-image img {
  max-width: 60%;
  height: auto;
  border-radius: 10px;
}

.literary-works-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #e9ecef;
  border-radius: 15px;
  padding: 20px;
  margin: 0 auto 20px;
  width: 80%;
  max-width: 900px;
  text-align: left;
  background: rgba(255,255,255,0.9);
}

.literary-text {
  flex: 1;
  text-align: left;
}

.literary-text p2 {
  text-align: left;
  margin-bottom: 10px;
}

.literary-image {
  flex: 1;
  text-align: right;
}

.literary-image img {
  max-width: 60%;
  height: auto;
  border-radius: 10px;
}

.visualarts-works-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #e9ecef;
  border-radius: 15px;
  padding: 20px;
  margin: 0 auto 20px;
  width: 80%;
  max-width: 900px;
  text-align: left;
  background: rgba(255,255,255,0.9);
}

.visualarts-text {
  flex: 1;
  text-align: left;
}

.visualarts-text p2 {
  text-align: left;
  margin-bottom: 10px;
}

.visualarts-image {
  flex: 1;
  text-align: right;
}

.visualarts-image img {
  max-width: 60%;
  height: auto;
  border-radius: 10px;
}

.creative-division {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.sets-apart {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.apart-item {
  flex: 1;
  border: 1px solid #e9ecef;
  border-radius: 15px;
  padding: 20px;
  background: rgba(255,255,255,0.9);
  text-align: center;
}

.apart-item h3 {
  margin-top: 0;
  color: #9333ea;
}

.apart-item img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 10px;
}

.fuse-bead-item {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.fuse-bead-section {
  margin-top: 20px;
  margin-bottom: 40px;
  text-align: center;
}

.fuse-bead-section p {
  margin-bottom: 15px;
}

.fuse-images {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  margin-top: 20px;
}

.fuse-images img {
  max-width: 30%;
  height: auto;
  border-radius: 10px;
}

/* responsive */
@media (max-width:768px){
.navbar{padding:15px 20px}
.navbar .brand span{font-size:14px}
nav a{margin-left:10px;font-size:14px;min-width:fit-content}
.hero h1{font-size:48px}
.section{padding:100px 30px}
.gallery-grid{column-count:2}
.creative-division { flex-direction: column; }
.music-production-section { text-align: center; margin-right: 0; margin-bottom: 20px; }
.music-production-section { flex-direction: column; }
.music-text { text-align: center; margin-bottom: 20px; }
.music-image { text-align: center; }
.music-image img { max-width: 100%; }
.music-production-section { width: 90%; }
.literary-works-section { text-align: center; margin-right: 0; margin-bottom: 20px; }
.literary-text { text-align: center; margin-bottom: 20px; }
.literary-image { text-align: center; }
.visualarts-works-section { text-align: center; margin-right: 0; margin-bottom: 20px; }
.visualarts-text { text-align: center; margin-bottom: 20px; }
.visualarts-image { text-align: center; }
.sets-apart { flex-direction: column; }
.apart-item { margin-bottom: 20px; }
.fuse-images { flex-direction: column; align-items: center; }
.fuse-images img { max-width: 80%; }
.fuse-bead-item { width: 60%; }
}

@media (max-width:480px){
.navbar{padding:12px 15px}
.navbar .brand span{display:none}
nav a{margin-left:6px;font-size:12px;padding:6px 4px;min-width:fit-content}
}

@media (max-width:360px){
nav a{margin-left:4px;font-size:11px;padding:4px 2px}
.navbar{padding:10px 12px}
}

@media (max-width:360px){
nav{flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:rgba(0,0,0,.9);display:none}
nav.show{display:flex}
.navbar.has-menu nav{display:flex}
}