:root{
  --bg:#0d1418;
  --card:#121b21;
  --text:#cfe8ee;
  --muted:#88a7ae;
  --accent:#29d2d2;
  --accent-2:#19b2b2;
  --shadow:0 15px 40px rgba(0,0,0,.38);
  --glow: 0 0 0 1px rgba(41,210,210,.45), 0 8px 25px rgba(41,210,210,.15);
  --radius:16px;
  --radius-sm:12px;
  --radius-pill:28px;
  --maxw:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% 0%, #0f1c22 0, #0d1418 50%), #0d1418;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--maxw); margin:0 auto; padding:24px 20px}
.card{
  background:linear-gradient(180deg,#111a20, #0e171c);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid #15222a;
  padding:20px;
}
h1,h2,h3{margin:0 0 12px 0; line-height:1.25}
h1{font-size:42px} h2{font-size:28px}
p{margin:0 0 10px 0; color:var(--muted)}

.btn, .btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:var(--radius-pill);
  border:1px solid rgba(41,210,210,.35);
  background:linear-gradient(180deg,#1c2c33,#17262c);
  color:#dff9ff; text-decoration:none; font-weight:600; letter-spacing:.2px;
  box-shadow: var(--glow);
  transition:.18s ease-in-out;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(41,210,210,.6), 0 10px 28px rgba(41,210,210,.22)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; border-color:#22414a; color:#bde9ef; box-shadow:none}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

.header{
  position:sticky; top:0; z-index:50; background:rgba(13,20,24,.7); backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid #132028;
}
.header-inner{display:flex; align-items:center; gap:16px; padding:14px 20px; max-width:var(--maxw); margin:0 auto}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:38px; height:38px; border-radius:10px; background:#16313a; box-shadow:0 0 0 1px #1a2e37}
.brand b{font-weight:700; letter-spacing:.3px}

.nav{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.nav a{
  position:relative;
  padding:8px 14px; border-radius:14px;
  background:linear-gradient(180deg,#1a2a31,#16252b);
  border:1px solid #1b2f38; color:#bfe7ee; font-weight:600; letter-spacing:.2px;
}
.nav a.active{color:#eaffff; box-shadow:var(--glow)}
.nav a.active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-8px; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px 4px rgba(41,210,210,.6);
}

.hero{display:grid; grid-template-columns: 340px 1fr; gap:24px; align-items:center}
.hero .photo{
  aspect-ratio:1/1; overflow:hidden; border-radius:20px; border:1px solid #15222a;
  background:#0f1a1f; box-shadow:var(--shadow);
}
.hero .photo img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.96)}
.hero .about.card{min-height:220px}

.section{padding:40px 0}
.section h2{margin-bottom:12px}
.grid{display:grid; gap:14px}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}

.work-card{
  background:linear-gradient(180deg,#131f25,#101a1f);
  border:1px solid #15222a; border-radius:14px; padding:14px; min-height:110px;
}
.work-card h4{margin:0 0 6px 0}
.work-card p{font-size:13px}

.footer{border-top:1px solid #132028; margin-top:40px}
.footer .inner{max-width:var(--maxw); margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.social{display:flex; gap:8px}
.social a{display:inline-flex; width:32px; height:32px; border-radius:9px; align-items:center; justify-content:center; background:linear-gradient(180deg,#1a2a31,#16252b); border:1px solid #1b2f38; box-shadow:0 6px 16px rgba(0,0,0,.35)}
.social img{width:16px; height:16px}

.works-switch-btns{display:flex; gap:10px; margin-bottom:14px}
.works-switch-btns .btn{min-width:120px}
.works-switch-btns .btn.is-active{background:linear-gradient(180deg,#23caca,#18a7a7); color:#062428; border-color:transparent; box-shadow:0 12px 28px rgba(35,202,202,.25)}

#works .grid-gallery{display:none}
#works .grid-live{display:none}
#works.is-gallery .grid-gallery{display:grid}
#works.is-live .grid-live{display:grid}

.pager{display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center}
.pager button{
  width:40px; height:36px; border-radius:11px; border:1px solid #1b2f38; background:linear-gradient(180deg,#1a2a31,#16252b);
  color:#bfe7ee; box-shadow:0 10px 20px rgba(0,0,0,.3)
}
.pager .status{font-size:12px; color:#9bc6cd}

.form{display:grid; gap:10px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.input, textarea{
  width:100%; padding:10px 12px; border-radius:12px; background:#0e181d; border:1px solid #1b2f38; color:#d7f2f7;
}
textarea{min-height:140px; resize:vertical}
.form .actions{display:flex; justify-content:flex-end}
@media (max-width:900px){
  .hero{grid-template-columns: 1fr; }
  .form .row{grid-template-columns: 1fr}
}