:root{
  --bg:#07080c;
  --ink:#f3f5ff;
  --muted:rgba(243,245,255,.72);
  --muted2:rgba(243,245,255,.56);
  --accent:#10b981;
  --accent2:#b7f7dc;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
button{font:inherit}

#webgl{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}


.vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(0,0,0,.0), rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.78));
}

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
}

header{
  position:fixed; left:0; right:0; top:0; z-index:50;
  padding:16px 18px;
  background: linear-gradient(180deg, rgba(7,8,12,.80), rgba(7,8,12,.16));
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar{
  width:min(1180px,100%); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}

.brand{display:flex; align-items:center; gap:10px; font-weight:860; letter-spacing:.2px;}
.sig{
  width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(16,185,129,.62), transparent 70%),
    radial-gradient(18px 18px at 70% 70%, rgba(243,245,255,.18), transparent 70%),
    rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  position:relative;
}
.sig:after{content:""; position:absolute; inset:10px; border-radius:10px; border:1px solid rgba(255,255,255,.14); transform:rotate(12deg);}

nav{display:flex; align-items:center; gap:18px; color:var(--muted2); font-weight:650; font-size:13px; letter-spacing:.14px;}
nav a{opacity:.9}
nav a:hover{opacity:1; color:rgba(243,245,255,.86)}
@media (max-width: 920px){ nav{display:none} }

.right{display:flex; align-items:center; gap:14px}
.lang{display:flex; gap:10px; align-items:center; color:rgba(243,245,255,.74); font-weight:720; font-size:12px}
.lang a{opacity:.75}
.lang a.active{opacity:1; color:rgba(243,245,255,.92)}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px; font-weight:900;
  border:1px solid rgba(16,185,129,.32);
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(255,255,255,.06));
  box-shadow: 0 18px 60px rgba(16,185,129,.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(16,185,129,.46); box-shadow: 0 22px 74px rgba(16,185,129,.14)}

.iconBtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  color:rgba(243,245,255,.86);
}
.iconBtn:hover{border-color:rgba(255,255,255,.18)}

.rail{
  position:fixed; left:18px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px; z-index:40;
  color:rgba(243,245,255,.40); font-weight:900; letter-spacing:.14px; font-size:12px;
}
.rail a{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
}
.rail .num{width:26px; text-align:right; color:rgba(243,245,255,.52)}
.rail a.active{border-color:rgba(16,185,129,.30); background: rgba(16,185,129,.08)}
.rail a.active .num{color:rgba(183,247,220,.92)}
@media (max-width: 980px){ .rail{display:none} }

main{position:relative; z-index:5}
.wrap{width:min(1180px,100%); margin:0 auto; padding:96px 18px 70px}
section.panel{min-height:100vh; padding:74px 0 42px; display:flex; align-items:center;}
.panel + .panel{border-top:1px solid rgba(255,255,255,.08);}

.grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:center;}
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }

.kicker{font-family:var(--serif); letter-spacing:.18px; color:rgba(243,245,255,.78); font-size:14px; margin-bottom:14px;}
.h1{font-family:var(--serif); font-size: clamp(44px, 5.4vw, 72px); line-height: 0.95; letter-spacing:-0.8px; margin:0 0 14px;}
.subhead{max-width: 62ch; color:var(--muted); font-size:16.5px; line-height:1.68; margin:0 0 18px;}
.subhead.soft{color:rgba(243,245,255,.66)}

.metaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.pill{display:inline-flex; align-items:center; gap:10px; padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color:rgba(243,245,255,.80); font-weight:800; font-size:13px;}
.dot{width:7px; height:7px; border-radius:999px; background:var(--accent); box-shadow: 0 0 0 4px rgba(16,185,129,.16)}

.chapter{display:flex; align-items:center; gap:12px; color:rgba(243,245,255,.66); font-weight:900; letter-spacing:.16px; font-size:12px; text-transform:uppercase;}
.bar{width:44px; height:1px; background:rgba(255,255,255,.18)}
h2{margin:10px 0 10px; font-family:var(--serif); font-size:30px; letter-spacing:-.25px;}

.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-top:18px;}
.card{
  grid-column: span 6;
  padding:16px 16px 15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 70px rgba(0,0,0,.34);
  position:relative;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(255,255,255,.06), transparent 60%);
  opacity:.55;
  mask: linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
  pointer-events:none;
}
.card h3{margin:0 0 8px; font-size:14px; letter-spacing:.15px}
.card p{margin:0; color:var(--muted2); line-height:1.55; font-size:13.5px}
@media (max-width: 980px){ .card{grid-column: span 12} }

.gallery{display:grid; grid-template-columns: repeat(12,1fr); gap:14px; margin-top:18px;}
.gItem{
  grid-column: span 4;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
  min-height: 320px;
  box-shadow: 0 18px 70px rgba(0,0,0,.34);
}
@media (max-width: 980px){ .gItem{grid-column: span 12; min-height: 260px} }

.gItem .label{
  position:absolute; left:14px; bottom:12px; right:14px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
  pointer-events:none;
}
.gItem .label b{font-family:var(--serif); font-size:18px; letter-spacing:-.1px}
.gItem .label span{color:rgba(243,245,255,.70); font-size:12px; font-weight:800}

.gItem .layer{position:absolute; inset:0; background-size:cover; background-position:center;}
.gItem .layer.segment{opacity:0; will-change: transform, opacity;}

.formWrap{
  margin-top:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background: rgba(0,0,0,.22);
  box-shadow: 0 24px 90px rgba(0,0,0,.50);
}
iframe{width:100%; height:760px; border:0}

footer{padding:56px 0 42px; color:rgba(243,245,255,.62); font-size:13px;}
.footRow{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.10); padding-top:16px;}

#menuOverlay{
  position:fixed; inset:0; z-index:80;
  display:none;
  background: radial-gradient(900px 520px at 30% 20%, rgba(16,185,129,.14), transparent 62%), rgba(7,8,12,.92);
  backdrop-filter: blur(14px);
}
#menuOverlay.open{display:block}
.menuInner{width:min(980px,100%); margin:0 auto; padding:110px 18px 40px;}
.menuGrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;}
@media (max-width: 980px){ .menuGrid{grid-template-columns:1fr} }
.menuTitle{font-family:var(--serif); font-size: clamp(34px, 4.2vw, 56px); line-height: 0.98; margin:0 0 14px;}
.menuList{display:flex; flex-direction:column; gap:12px; margin-top:18px;}
.menuLink{padding:14px 16px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-weight:900;}
.menuLink:hover{border-color:rgba(16,185,129,.36); background: rgba(16,185,129,.08)}