:root{
  --bg: #140d08;
  --bg-soft: #1a1209;
  --surface: #241808;
  --surface-2: #2c1d0a;
  --line: #4a3417;
  --line-soft: #34270f;
  --text: #f1e3c4;
  --muted: #b8a37f;
  --gold: #d6a23f;
  --gold-soft: #f0c878;
  --ember: #7c3aed;
  --ember-soft: #a78bfa;
  --purple: #8b5cf6;
  --purple-2: #6d28d9;
  --purple-glow: rgba(139,92,246,0.35);
  --success: #6ee0a8;
  --ink: #100b06;
  --display: 'Cinzel', serif;
  --display-sc: 'Spectral SC', serif;
  --body: 'Spectral', serif;
  --radius: 12px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.65;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(139,92,246,0.14), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(214,162,63,0.10), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(139,92,246,0.08), transparent 50%);
  pointer-events:none;
}
.grain{
  position:fixed; inset:0; z-index:0; opacity:0.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
section{position:relative; z-index:1;}
::selection{background:var(--purple); color:#fff;}

/* ---------- Floating brand motifs ---------- */
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-16px) rotate(8deg);}
}
.page-motif{
  position:fixed; pointer-events:none; z-index:0;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.6));
  animation:float 8s ease-in-out infinite;
  opacity:0.12;
}
.page-motif.pm1{width:132px; top:10%; left:-34px; animation-duration:9s; animation-delay:0s;}
.page-motif.pm2{width:102px; top:36%; right:-28px; animation-duration:11s; animation-delay:2s;}
.page-motif.pm3{width:118px; top:61%; left:-30px; animation-duration:10s; animation-delay:1s;}
.page-motif.pm4{width:92px; top:81%; right:-24px; animation-duration:8s; animation-delay:3s;}
.page-motif.pm5{width:98px; top:22%; right:8px; animation-duration:12s; animation-delay:0.5s;}
.floating-die{
  position:absolute; pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.55));
  animation:float 7s ease-in-out infinite;
}

/* ---------- Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(20,13,8,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
nav{
  max-width:1180px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--gold-soft);
}
.brand-signature{
  display:block; width:auto; height:38px; object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(139,92,246,0.2));
}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{
  font-family:var(--display-sc); font-size:0.82rem; color:var(--muted);
  font-weight:500; letter-spacing:0.04em; transition:color .2s; position:relative;
}
.nav-links a:hover{color:var(--gold-soft);}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:0; height:1px; background:var(--purple); transition:width .25s;
}
.nav-links a:hover::after{width:100%;}
.lang-toggle{
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:999px;
  padding:3px; background:var(--surface);
}
.lang-toggle button{
  border:none; background:transparent; color:var(--muted);
  font-family:var(--display-sc); font-size:0.72rem; font-weight:600;
  padding:6px 12px; border-radius:999px; cursor:pointer; transition:all .2s;
}
.lang-toggle button.active{background:var(--purple); color:#fff;}
.menu-btn{display:none; background:none; border:none; color:var(--gold-soft); font-size:1.4rem; cursor:pointer;}

@media(max-width:760px){
  .nav-links{
    position:fixed; top:60px; left:0; right:0;
    background:var(--bg-soft); border-bottom:1px solid var(--line-soft);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 28px 18px;
    transform:translateY(-130%); opacity:0; transition:all .25s; pointer-events:none;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-links a{padding:12px 0; width:100%; border-bottom:1px solid var(--line-soft);}
  .menu-btn{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  max-width:1180px; margin:0 auto; padding:90px 28px 70px;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px;
  align-items:center; position:relative;
}
.eyebrow{
  font-family:var(--display-sc); font-size:0.82rem; color:var(--ember-soft);
  letter-spacing:0.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:21px; height:21px; flex:0 0 21px;
  background:url("brand/icons/maiq-icon-32.png") center/contain no-repeat;
}
h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem, 4.8vw, 3.4rem);
  line-height:1.12; letter-spacing:0.01em; margin-bottom:22px;
}
h1 .accent{
  background:linear-gradient(100deg, var(--gold-soft), var(--ember-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{font-size:1.08rem; color:var(--muted); max-width:540px; margin-bottom:32px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:var(--display-sc); font-weight:600; font-size:0.88rem; letter-spacing:0.02em;
  padding:13px 26px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s, box-shadow .18s; border:1px solid transparent;
}
.btn-primary{background:linear-gradient(135deg, var(--purple), var(--purple-2)); color:#fff; box-shadow:0 8px 24px -8px rgba(139,92,246,0.55);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(139,92,246,0.7);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--purple); color:var(--ember-soft); transform:translateY(-2px);}
.btn-github{
  margin-left:12px; background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  border-color:var(--gold-soft); color:var(--ink); box-shadow:0 8px 24px -8px rgba(214,162,63,0.5);
}
.btn-github:hover{transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(214,162,63,0.7);}
.btn-icon{width:18px; height:18px; flex:0 0 18px;}

.hero-portrait{position:relative; justify-self:center; width:100%; max-width:340px;}
.portrait-frame{
  position:relative; border-radius:16px; overflow:hidden;
  border:2px solid var(--line); box-shadow:0 30px 60px -20px rgba(0,0,0,0.7);
}
.portrait-frame::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border:1px solid rgba(139,92,246,0.3); border-radius:14px; margin:5px;
}
.portrait-frame::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 55%, rgba(20,13,8,0.85) 100%);
}
.portrait-frame img{width:100%; height:100%; object-fit:cover; aspect-ratio:1/1;}
.brand-deco{
  position:absolute; pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,0.5));
  animation:float 7s ease-in-out infinite;
}
.brand-deco.d1{width:116px; top:-52px; right:-44px; opacity:0.92;}
.brand-deco.d2{width:82px; bottom:-32px; left:-34px; opacity:0.78; animation-delay:1.8s;}

/* ---------- Divider ---------- */
.divider{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:14px; color:var(--purple); opacity:0.55;
}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent);}
.divider img{width:46px; height:32px; object-fit:contain;}

/* ---------- Section heading ---------- */
.section-head{max-width:1180px; margin:0 auto; padding:0 28px; margin-bottom:44px;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{
  font-family:var(--display); font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:600; letter-spacing:0.01em; margin-bottom:14px;
}
.section-head p{color:var(--muted); max-width:620px; font-size:1rem;}
section.block{padding:84px 0; position:relative;}
section.block.alt{background:var(--bg-soft); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}

/* ---------- About ---------- */
.about-wrap{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1fr 1fr; gap:52px;
}
.about-text p{color:var(--muted); margin-bottom:16px; font-size:1rem; line-height:1.7;}
.skill-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.skill-tags span{
  font-family:var(--display-sc); font-size:0.76rem; color:var(--gold-soft);
  border:1px solid var(--line); background:var(--surface);
  padding:7px 14px; border-radius:8px; letter-spacing:0.04em;
  transition:border-color .25s, box-shadow .25s, transform .2s, color .2s;
  cursor:default;
}
.skill-tags span:hover{
  border-color:var(--purple);
  color:var(--ember-soft);
  box-shadow:0 0 16px -4px var(--purple-glow), 0 0 0 1px rgba(139,92,246,0.18);
  transform:translateY(-2px);
}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.stat-card{
  background:linear-gradient(160deg, var(--surface), var(--ink));
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px;
  position:relative; overflow:hidden;
  transition:border-color .3s, box-shadow .3s, transform .25s;
  display:flex; flex-direction:column;
}
.stat-card:hover{
  border-color:var(--purple);
  box-shadow:0 0 28px -6px var(--purple-glow), 0 0 0 1px rgba(139,92,246,0.18);
  transform:translateY(-3px);
}
.stat-card::before{
  content:""; position:absolute; top:-20px; left:-20px;
  width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.15), transparent 70%);
  pointer-events:none;
}
.stat-card::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background:linear-gradient(135deg, rgba(139,92,246,0.07), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.stat-card:hover::after{opacity:1;}
.stat-icon{
  display:block; width:58px; height:58px; object-fit:contain; margin-bottom:12px;
  animation:float 7s ease-in-out infinite;
  filter:drop-shadow(0 4px 10px rgba(139,92,246,0.35));
}
.stat-card .num{font-family:var(--display); font-size:2.1rem; color:var(--gold-soft); font-weight:700;}
.stat-card .label{color:var(--muted); font-size:0.84rem; margin-top:6px; line-height:1.4;}

/* ---------- Projects ---------- */
.projects{max-width:1180px; margin:0 auto; padding:0 28px; display:flex; flex-direction:column; gap:24px;}
.project-card{
  background:linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:16px;
  overflow:hidden;
  display:grid; grid-template-columns:260px 1fr;
  transition:border-color .25s, box-shadow .25s;
}
.project-card:hover{
  border-color:rgba(139,92,246,0.45);
  box-shadow:0 0 32px -10px var(--purple-glow);
}
.project-media{
  position:relative; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding:36px; border-right:1px solid var(--line-soft);
}
.project-media img{
  max-width:130px; max-height:130px; object-fit:contain;
  animation:float 6s ease-in-out infinite;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,0.6)) drop-shadow(0 0 18px rgba(139,92,246,0.45));
  transition:filter .3s;
}
.project-card:hover .project-media img{
  filter:drop-shadow(0 16px 28px rgba(0,0,0,0.7)) drop-shadow(0 0 32px rgba(139,92,246,0.7));
}
.project-card:nth-child(2) .project-media img{animation-delay:1.2s; animation-duration:7s;}
.project-card:nth-child(3) .project-media img{animation-delay:2.4s; animation-duration:5.5s;}
.project-card:nth-child(4) .project-media img{animation-delay:0.6s; animation-duration:8s;}
.project-card:nth-child(5) .project-media img{animation-delay:1.8s; animation-duration:6.5s;}
.project-card:nth-child(6) .project-media img{animation-delay:3s; animation-duration:7.5s;}
.project-card:nth-child(7) .project-media img{animation-delay:2.2s; animation-duration:6.8s;}
.project-status{
  position:absolute; top:14px; left:14px;
  font-family:var(--display-sc); font-size:0.66rem; letter-spacing:0.08em;
  color:var(--success); display:flex; align-items:center; gap:6px;
}
.project-status .pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--success); box-shadow:0 0 8px var(--success);
}
.project-body{padding:32px 34px;}
.project-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.project-body h3{font-family:var(--display); font-size:1.3rem; font-weight:600; color:var(--gold-soft);}
.project-tag{
  font-family:var(--display-sc); font-size:0.7rem; letter-spacing:0.06em;
  color:var(--purple); border:1px solid rgba(139,92,246,0.4);
  background:rgba(139,92,246,0.08);
  padding:4px 12px; border-radius:999px;
}
.project-body p.desc{color:var(--muted); margin-bottom:18px; font-size:0.95rem; line-height:1.65;}
.feature-list{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 18px;
  margin-bottom:24px; list-style:none;
}
.feature-list li{
  font-size:0.86rem; color:var(--text); display:flex; gap:8px; align-items:flex-start;
}
.feature-list li::before{content:"›"; color:var(--gold); font-weight:700; flex-shrink:0;}
.project-links{display:flex; gap:10px; flex-wrap:wrap;}
.telegram-link{display:block;}
.telegram-link small{display:block; max-width:190px; margin-top:5px; color:var(--muted); font-size:0.72rem; line-height:1.35;}
.pill-link{
  font-family:var(--display-sc); font-size:0.78rem; font-weight:600;
  padding:9px 18px; border-radius:8px;
  border:1px solid var(--line); display:inline-flex; align-items:center; gap:6px;
  transition:all .18s; letter-spacing:0.02em; color:var(--text);
}
.pill-link:hover{border-color:var(--gold); color:var(--gold-soft); transform:translateY(-1px);}
.pill-link.primary{background:linear-gradient(135deg, var(--purple), var(--purple-2)); border-color:var(--purple); color:#fff;}
.pill-link.primary:hover{box-shadow:0 6px 18px -6px rgba(139,92,246,0.6); transform:translateY(-1px);}

@media(max-width:760px){
  .project-card{grid-template-columns:1fr;}
  .project-media{border-right:none; border-bottom:1px solid var(--line-soft); padding:28px;}
  .feature-list{grid-template-columns:1fr;}
}

/* ---------- Communities ---------- */
.comm-wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.comm-split{display:grid; grid-template-columns:1fr 1.4fr; gap:28px;}
.comm-side-title{
  font-family:var(--display-sc); font-size:0.76rem; color:var(--muted);
  letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px;
}
.comm-item{
  display:flex; align-items:center; gap:16px;
  background:linear-gradient(160deg, var(--surface), var(--ink));
  border:1px solid var(--line-soft); border-radius:14px;
  padding:20px; transition:border-color .2s, transform .2s;
}
.comm-item:hover{border-color:rgba(214,162,63,0.4); transform:translateY(-2px);}
.comm-item img{width:46px; height:46px; object-fit:contain; border-radius:10px; flex-shrink:0;}
.comm-item h4{font-family:var(--display); font-size:1rem; font-weight:600; color:var(--gold-soft); margin-bottom:3px;}
.comm-item span{color:var(--muted); font-size:0.84rem;}
.pro-card{
  background:linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:14px;
  padding:26px; display:flex; gap:18px; align-items:flex-start;
  position:relative; overflow:hidden;
  transition:border-color .3s, box-shadow .3s, transform .25s;
}
.pro-card::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:linear-gradient(135deg, rgba(139,92,246,0.07), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.pro-card:hover{
  border-color:var(--purple);
  box-shadow:0 0 28px -6px var(--purple-glow), 0 0 0 1px rgba(139,92,246,0.18);
  transform:translateY(-3px);
}
.pro-card:hover::after{opacity:1;}
.pro-card img{width:52px; height:52px; object-fit:contain; border-radius:10px; flex-shrink:0;}
.pro-info h4{font-family:var(--display); font-size:1.1rem; font-weight:600; color:var(--gold-soft); margin-bottom:6px;}
.pro-role{
  display:inline-block; font-family:var(--display-sc); font-size:0.7rem;
  color:var(--gold-soft); border:1px solid var(--gold); padding:3px 10px;
  border-radius:999px; margin-bottom:16px; letter-spacing:0.06em;
}
.pro-links{display:flex; flex-wrap:wrap; gap:8px;}
.pro-links a{
  font-family:var(--display-sc); font-size:0.76rem; font-weight:600;
  padding:7px 14px; border-radius:8px;
  border:1px solid var(--line); transition:all .18s; letter-spacing:0.02em;
}
.pro-links a:hover{border-color:var(--purple); color:var(--ember-soft); transform:translateY(-1px);}

@media(max-width:760px){
  .comm-split{grid-template-columns:1fr;}
  .pro-card{flex-direction:column;}
}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line-soft); padding:48px 28px; text-align:center; color:var(--muted); font-size:0.88rem;}
footer .brand{justify-content:center; margin-bottom:14px;}
.footer-signature{height:50px; filter:none;}
footer a{color:var(--ember-soft);}
footer a:hover{text-decoration:underline;}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .hero{grid-template-columns:1fr; padding:40px 20px 56px; gap:36px;}
  .hero-portrait{order:-1; max-width:220px; margin:0 auto;}
  h1{font-size:clamp(1.8rem, 8vw, 2.4rem);}
  .hero p.lead{font-size:1rem; max-width:100%;}
  .hero-cta{width:100%;}
  .hero-cta .btn{flex:1 1 auto; justify-content:center; text-align:center;}
  .btn-github{margin-left:0 !important;}
  section.block{padding:52px 0;}
  .section-head{margin-bottom:28px; padding:0 20px;}
  .section-head h2{font-size:1.5rem;}
  .about-wrap{grid-template-columns:1fr; padding:0 20px; gap:32px;}
  .stat-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .stat-card{padding:16px;}
  .stat-card .num{font-size:1.6rem;}
  .stat-icon{width:48px; height:48px; margin-bottom:8px;}
  .projects{padding:0 20px; gap:18px;}
  .project-body{padding:22px 18px;}
  .project-media{padding:24px;}
  .project-body h3{font-size:1.15rem;}
  .project-top{flex-direction:column; align-items:flex-start; gap:8px;}
  .comm-wrap{padding:0 20px;}
  nav{padding:12px 20px;}
  nav .brand-signature{height:34px;}
  footer{padding:36px 20px;}
  .divider{padding:0 20px;}
  .page-motif{display:none;}
}
@media(max-width:420px){
  .hero-cta{flex-direction:column;}
  .feature-list{font-size:0.82rem;}
}