*{box-sizing:border-box}
:root{
  --bg:#ffffff;
  --text:#171717;
  --muted:#5d6472;
  --line:#ececf2;
  --shadow:0 18px 45px rgba(32,44,84,.12);
  --grad1:#6a5cff;
  --grad2:#ff4d8d;
  --grad3:#00b6ff;
  --grad4:#ffb703;
  --surface:#ffffff;
  --soft:#f8f9ff;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,calc(100% - 2rem));margin:0 auto}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
  gap:1rem;
}
.brand{
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:.02em;
}
.brand span{color:var(--grad2)}
.menu{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.menu a{
  color:var(--muted);
  font-weight:700;
}
.menu a:hover{color:var(--text)}

.hero{
  position:relative;
  overflow:hidden;
  padding:4rem 0 3rem;
  background:
    radial-gradient(circle at top left, rgba(106,92,255,.14), transparent 30%),
    radial-gradient(circle at 90% 15%, rgba(255,77,141,.14), transparent 25%),
    linear-gradient(180deg,#ffffff 0%,#fcfcff 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2rem;
  align-items:center;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800;
  color:var(--grad1);
  font-size:.78rem;
  margin:0 0 .6rem;
}
h1,h2,h3,h4,p{margin-top:0}
h1{
  font-size:clamp(2.2rem,5vw,4.35rem);
  line-height:1.06;
  margin-bottom:1rem;
}
.lead{
  font-size:1.08rem;
  color:var(--muted);
  max-width:58ch;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin:1.6rem 0;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 1.25rem;
  border-radius:999px;
  font-weight:800;
  transition:.25s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--grad1),var(--grad2));
  box-shadow:0 10px 25px rgba(106,92,255,.24);
}
.btn-secondary{
  background:#fff;
  border-color:var(--line);
}
.contact-chip{
  display:inline-flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.7rem 1rem;
  box-shadow:var(--shadow);
}
.contact-chip a{color:var(--grad1);font-weight:700}

.hero-art-card{
  position:relative;
  padding:1rem;
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.05);
}
.hero-art-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:22px;
}
.art-badge{
  position:absolute;
  top:-12px;
  left:18px;
  padding:.6rem .95rem;
  border-radius:999px;
  color:#fff;
  font-size:.85rem;
  font-weight:800;
  background:linear-gradient(135deg,var(--grad3),var(--grad1));
  box-shadow:0 10px 25px rgba(0,182,255,.24);
}
.hero-shape{
  position:absolute;
  border-radius:999px;
  filter:blur(8px);
  opacity:.45;
}
.hero-shape-1{
  width:190px;height:190px;right:-30px;bottom:25px;
  background:linear-gradient(135deg,var(--grad4),var(--grad2));
}
.hero-shape-2{
  width:120px;height:120px;left:-20px;bottom:20px;
  background:linear-gradient(135deg,var(--grad3),var(--grad1));
}

.section{padding:5rem 0}
.section-accent{background:linear-gradient(180deg,#fff 0%,#f9f6ff 100%)}
.section-heading{
  margin-bottom:1.6rem;
}
.section-heading h2{
  font-size:clamp(1.8rem,3vw,3rem);
  margin-bottom:.5rem;
}
.section-heading p{
  color:var(--muted);
  max-width:70ch;
}

.about-panel{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1.2rem;
  align-items:stretch;
}
.about-text,.mini-card,.work-card,.admin-item,.contact-panel{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.about-text{
  padding:1.5rem;
  border-radius:24px;
}
.about-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.mini-card{
  padding:1.25rem;
  border-radius:22px;
}
.mini-card h3{margin-bottom:.4rem}

.featured-work{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  align-items:start;
}
.featured-image{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:28px;
  padding:1rem;
}
.featured-image img{
  border-radius:22px;
}
.featured-content{
  padding:1rem 0;
}
.status-pill{
  display:inline-block;
  padding:.45rem .85rem;
  border-radius:999px;
  background:rgba(106,92,255,.11);
  color:var(--grad1);
  font-weight:800;
  margin-bottom:1rem;
}
.featured-content h3{
  font-size:clamp(1.6rem,2.2vw,2.2rem);
  line-height:1.15;
}
.featured-content p{color:var(--muted)}
.concept-box{
  margin:1.4rem 0 1.6rem;
  border-radius:24px;
  padding:1.25rem;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border:1px solid var(--line);
}
.concept-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  flex-wrap:wrap;
}
.concept-head h4{margin-bottom:.2rem}
.concept-head span{
  font-size:.92rem;
  color:var(--muted);
  font-weight:700;
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}
.work-card{
  border-radius:26px;
  overflow:hidden;
}
.work-card-image{
  padding:1rem 1rem 0;
}
.work-card-image img{
  border-radius:20px;
  aspect-ratio:1/1;
  object-fit:cover;
}
.work-card-body{
  padding:1rem 1.15rem 1.25rem;
}
.card-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
}
.work-state{
  font-size:.85rem;
  font-weight:800;
  color:#fff;
  padding:.45rem .75rem;
  border-radius:999px;
  background:linear-gradient(135deg,var(--grad2),var(--grad1));
}
.work-card ul{
  margin:.75rem 0 0 1rem;
  padding:0;
  color:var(--muted);
}
.placeholder-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:1.4rem;
  min-height:100%;
}
.placeholder-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  font-size:1.4rem;
  font-weight:900;
  color:#fff;
  border-radius:18px;
  background:linear-gradient(135deg,var(--grad3),var(--grad2));
  margin-bottom:1rem;
}

.admin-section{
  background:
    radial-gradient(circle at 10% 10%, rgba(255,183,3,.12), transparent 22%),
    radial-gradient(circle at 100% 90%, rgba(0,182,255,.12), transparent 20%),
    #fff;
}
.admin-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.admin-item{
  padding:1.3rem;
  border-radius:22px;
}
.admin-item h3{margin-bottom:.45rem}
.admin-item p{color:var(--muted)}

.contact-section{
  padding-top:2rem;
}
.contact-panel{
  border-radius:28px;
  padding:2rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  background:linear-gradient(135deg,#ffffff,#f8f9ff);
}
.contact-mail{
  font-size:clamp(1rem,2vw,1.3rem);
  font-weight:800;
  color:var(--grad1);
  word-break:break-word;
}

.site-footer{
  border-top:1px solid var(--line);
  background:#fff;
}
.footer-content{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:1.2rem 0 2rem;
  color:var(--muted);
}

@media (max-width: 980px){
  .hero-grid,.about-panel,.featured-work,.catalog-grid,.admin-grid,.contact-panel{
    grid-template-columns:1fr;
    display:grid;
  }
  .contact-panel{
    align-items:flex-start;
  }
}

@media (max-width: 720px){
  .nav{
    flex-direction:column;
    align-items:flex-start;
  }
  .menu{
    gap:.8rem;
  }
  .section{padding:4rem 0}
  .hero{padding-top:2.4rem}
  .hero-art-card{padding:.8rem}
  .about-text,.mini-card,.admin-item,.contact-panel,.concept-box,.work-card-body{
    padding:1rem;
  }
}