:root{
  --bg:#0b0f14;
  --panel:#131926;
  --panel-2:#0f1420;
  --text:#e6f1ff;
  --muted:#9bb0c8;
  --accent:#00e0ff;
  --accent-2:#ff007a;
  --glow: 0 0 18px rgba(0,224,255,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1000px 600px at 10% -10%, rgba(0,224,255,.07), transparent 40%),
              radial-gradient(900px 600px at 110% 10%, rgba(255,0,122,.07), transparent 40%),
              var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(13,18,28,.95), rgba(13,18,28,.75));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.brand .logo{
  width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px rgba(0,224,255,.35), inset 0 0 18px rgba(255,255,255,.15);
}
.brand span{font-weight:700; letter-spacing:.6px}

nav a{
  color:var(--text); text-decoration:none; margin-left:18px; padding:8px 12px; border-radius:10px;
  transition:all .2s ease;
  border:1px solid transparent;
}
nav a:hover, nav a.active{
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--glow);
}

/* Hero */
.hero{
  position:relative;
  min-height:64vh;
  display:grid; place-items:center;
  text-align:center;
  padding:80px 20px;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url('assets/ComfyUI_00021_.png') center/cover no-repeat;
  filter: saturate(1.2) brightness(.7) blur(1px);
  opacity:.35;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 60% at 50% 60%, rgba(0,224,255,.25), transparent 50%);
  mix-blend-mode:screen; pointer-events:none;
}
.hero .content{
  position:relative; max-width:900px; padding:28px; border-radius:20px;
  background: linear-gradient(180deg, rgba(19,25,38,.85), rgba(15,20,32,.6));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--glow);
}
.kicker{ color: var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem }
.hero h1{ margin:8px 0 6px; font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
.hero p{ color:var(--muted); margin: 0 0 18px }

.btnrow{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
  text-decoration:none; color:var(--text);
  border:1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-2px); border-color:rgba(0,224,255,.3); box-shadow: 0 0 24px rgba(0,224,255,.25) }
.btn.primary{ background: linear-gradient(135deg, rgba(0,224,255,.25), rgba(255,0,122,.18)); border-color: rgba(0,224,255,.35) }

.section{ max-width:1200px; margin:40px auto; padding:0 20px }
.section h2{ font-size: clamp(1.2rem, 2.2vw, 1.6rem); opacity:.9 }

/* Feature cards */
.cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; margin-top:14px }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-3px); border-color:rgba(0,224,255,.35); box-shadow:var(--glow) }
.card p{ color:var(--muted); margin:.4rem 0 0 }

/* Gallery */
.gallery{ max-width:1200px; margin:30px auto; padding:0 20px }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px }
.tile{
  position:relative; overflow:hidden; border-radius:14px;
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
}
.tile img{ width:100%; height:220px; object-fit:cover; display:block; transition: transform .35s ease }
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 70% at 50% 120%, rgba(0,224,255,.1), transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
.tile:hover img{ transform: scale(1.06) }
.tile:hover::after{ opacity:1 }

/* Lightbox */
#lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(5,8,13,.9); z-index:100 }
#lightbox.open{ display:flex }
#lightbox img{ max-width:min(92vw,1400px); max-height:86vh; border-radius:14px; border:1px solid rgba(255,255,255,.08) }
#lightbox .close{ position:absolute; top:16px; right:16px; background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15); padding:8px 10px; border-radius:10px; cursor:pointer }
#lightbox .close:hover{ border-color: rgba(0,224,255,.35); box-shadow: var(--glow) }

/* Footer */
footer{
  margin-top:50px; border-top:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(13,18,28,.7), rgba(13,18,28,.92));
}
.footer-inner{ max-width:1200px; margin:0 auto; padding:22px 20px; color:var(--muted) }

/* Forms */
form{
  display:grid; gap:12px; max-width:560px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px;
}
label{ font-size:.9rem; color:var(--muted) }
input, textarea, button{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background: var(--panel-2); color:var(--text);
}
textarea{ min-height:140px; resize:vertical }
button{ cursor:pointer; background: linear-gradient(135deg, rgba(0,224,255,.25), rgba(255,0,122,.18)); border-color: rgba(0,224,255,.35) }
button:hover{ box-shadow: var(--glow) }

.carousel{
  position:relative; overflow:hidden; max-width:1000px; margin:20px auto;
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
}
.carousel .track{
  display:flex; transition:transform .5s ease;
}
.carousel .slide{
  min-width:100%;
}
.carousel img{
  width:100%; display:block; object-fit:cover; height:500px;
}
.carousel button{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.4); border:none; color:white; font-size:2rem;
  padding:8px 12px; cursor:pointer; border-radius:8px;
}
.carousel .prev{ left:10px; }
.carousel .next{ right:10px; }

/* Carousel */
.carousel{ position:relative; max-width:1200px; margin:24px auto; padding:0 20px }
.carousel-viewport{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--panel);
}
.carousel-track{ display:flex; transition: transform .5s ease }
.carousel-slide{ min-width:100%; height:56vh; max-height:720px; display:grid; place-items:center; background:#0b0f14 }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block }

.carousel-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none }
.carousel-btn{
  pointer-events:auto; background:rgba(10,14,20,.55); color:var(--text); border:1px solid rgba(255,255,255,.15);
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; cursor:pointer; margin:0 10px;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.carousel-btn:hover{ transform:translateY(-1px); box-shadow:var(--glow); border-color:rgba(0,224,255,.35) }
.carousel-dots{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:6px }
.carousel-dot{
  width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.4); cursor:pointer
}
.carousel-dot.active{ background:var(--accent); box-shadow:0 0 10px rgba(0,224,255,.6) }