@font-face {
  font-family:"Mouzambik";
  src:url("../fonts/Mouzambik.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family: "Vipnagorgialla";
  src: url("../fonts/Vipnagorgialla-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vipnagorgialla";
  src: url("../fonts/Vipnagorgialla-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Vipnagorgialla";
  src: url("../fonts/Vipnagorgialla-RegularItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vipnagorgialla";
  src: url("../fonts/Vipnagorgialla-BoldItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  --black: #030304;
  --black-soft: #08070b;
  --panel: rgba(18, 16, 23, .84);
  --panel-hover: rgba(28, 23, 38, .92);
  --white: #f5f2f6;
  --muted: rgba(245,242,246,.48);
  --dim: rgba(245,242,246,.28);
  --line: rgba(255,255,255,.105);
  --purple: #8752c8;
  --purple-light: #bd93ee;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --bio-font: "Hanken Grotesk", "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin:0; min-height:100vh; background:var(--black); color:var(--white); font-family:var(--sans); overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-4; background:radial-gradient(circle at 50% 24%, rgba(84,45,122,.14), transparent 32%), linear-gradient(180deg,#020203 0%,#050407 48%,#020203 100%); }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:20; box-shadow:inset 0 0 180px rgba(0,0,0,.76); }
a { color:inherit; }
button { font:inherit; }

.ambient { position:fixed; width:55vw; height:55vw; border-radius:50%; pointer-events:none; filter:blur(80px); opacity:.14; z-index:-3; animation:drift 18s ease-in-out infinite alternate; }
.ambient-one { top:-28vw; left:20vw; background:#5d2b86; }
.ambient-two { right:-30vw; bottom:-25vw; background:#3e1d63; animation-delay:-8s; }
.grain { position:fixed; inset:0; z-index:30; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode:screen; }
.cursor-light { position:fixed; left:50%; top:50%; width:260px; height:260px; border-radius:50%; pointer-events:none; z-index:-1; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(132,72,181,.11),transparent 68%); opacity:0; transition:opacity .35s ease; }
body.cursor-active .cursor-light { opacity:1; }

#intro-panel { position:fixed; inset:0; z-index:9999; display:grid; place-content:center; border:0; padding:0; background:#020203; color:var(--white); cursor:pointer; transition:opacity .68s ease, filter .68s ease, visibility .68s ease; }
#intro-panel::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(91,46,126,.13),transparent 32%); pointer-events:none; animation:intro-glow 5.5s ease-in-out infinite alternate; }
#intro-panel.entering { opacity:0; filter:blur(12px); visibility:hidden; }
@keyframes intro-glow { from { opacity:.55; transform:scale(1); } to { opacity:1; transform:scale(1.06); } }
#intro-panel .intro-word {
  position:relative;
  display:inline-flex;
  font-family:"Vipnagorgialla", var(--display);
  font-size:clamp(64px,9vw,132px);
  line-height:.84;
  font-weight:400;
  letter-spacing:.012em;
  text-shadow:0 0 34px rgba(255,255,255,.055),0 0 88px rgba(135,82,200,.11);
}
#intro-panel .intro-word i {
  font-style:normal;
  display:inline-block;
  opacity:0;
  transform:translateY(26px);
  animation:intro-letter .9s cubic-bezier(.22,1,.36,1) forwards;
}
#intro-panel .intro-word i:nth-child(1) { animation-delay:.15s; }
#intro-panel .intro-word i:nth-child(2) { animation-delay:.22s; }
#intro-panel .intro-word i:nth-child(3) { animation-delay:.29s; }
#intro-panel .intro-word i:nth-child(4) { animation-delay:.36s; }
#intro-panel .intro-word i:nth-child(5) { animation-delay:.43s; }
#intro-panel .intro-word i:nth-child(6) { animation-delay:.50s; }
@keyframes intro-letter { to { opacity:1; transform:none; } }
.intro-enter { position:relative; display:block; margin-top:34px; text-align:center; font-family:var(--mono); font-size:8px; letter-spacing:.46em; text-indent:.46em; color:rgba(245,242,246,.34); opacity:0; animation:intro-letter .9s .68s cubic-bezier(.22,1,.36,1) forwards; }

.content { min-height:100vh; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .8s ease; }
.content.visible { opacity:1; visibility:visible; }
.top-nav { position:fixed; z-index:100; top:0; left:0; right:0; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,72px); background:linear-gradient(180deg,rgba(3,3,4,.84),transparent); }
.top-nav::after { content:""; position:absolute; left:clamp(24px,5vw,72px); right:clamp(24px,5vw,72px); bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
.nav-brand,.nav-links a { text-decoration:none; font-family:var(--mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:rgba(245,242,246,.54); transition:color .25s ease,text-shadow .25s ease; }
.nav-brand:hover,.nav-links a:hover { color:#fff; text-shadow:0 0 20px rgba(189,147,238,.2); }
.nav-mark { color:var(--purple-light); margin-right:5px; }
.nav-links { display:flex; gap:30px; }

.hero { position:relative; min-height:100vh; display:grid; place-items:center; padding:96px 24px 84px; overflow:hidden; }
.hero-center { position:relative; z-index:1; width:min(1200px,100%); text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:35px; font-family:var(--mono); font-size:8px; letter-spacing:.34em; text-transform:uppercase; color:rgba(245,242,246,.25); }
.hero-eyebrow i { width:34px; height:1px; background:rgba(135,82,200,.5); }
.identity-title {
  margin:0;
  font-family:"Vipnagorgialla",var(--display);
  font-size:clamp(84px,11vw,176px);
  line-height:.82;
  font-weight:400;
  letter-spacing:.012em;
  color:#f5f2f6;
  text-shadow:0 0 34px rgba(255,255,255,.065),0 0 100px rgba(150,85,239,.12);
  transition:text-shadow .35s ease,transform .35s ease;
}
.identity-title:hover { transform:scaleX(.985) scaleY(1.006); text-shadow:0 0 40px rgba(255,255,255,.15),0 0 135px rgba(150,85,239,.28); }
.identity-subtitle {
  margin-top:36px;
  max-width:760px;
  padding:0 20px;
  font-family:var(--mono);
  font-size:clamp(10px,1.05vw,14px);
  font-weight:500;
  line-height:1.8;
  letter-spacing:.24em;
  text-indent:.24em;
  color:var(--purple-light);
  text-transform:none;
  text-shadow:0 0 28px rgba(150,85,239,.20);
}
.statement { margin:40px 0 0; max-width:650px; font-size:13px; line-height:1.8; letter-spacing:.12em; color:rgba(243,240,244,.46); }
.hero-link {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:208px;
  min-height:54px;
  margin-top:46px;
  padding:0 28px;
  border:1px solid rgba(205,181,231,.28);
  border-radius:2px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    rgba(11,9,15,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 18px 42px rgba(0,0,0,.22);
  text-decoration:none;
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.24em;
  text-indent:.24em;
  color:rgba(247,244,248,.78);
  transition:color .28s ease,border-color .28s ease,background .28s ease,transform .28s ease,box-shadow .28s ease;
}
.hero-link::before {
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,255,255,.035);
  pointer-events:none;
}
.hero-link::after {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(160,100,220,.7),transparent);
  opacity:.65;
  transform:scaleX(.55);
  transition:transform .35s ease,opacity .35s ease;
}
.hero-link:hover {
  color:#fff;
  border-color:rgba(196,151,238,.54);
  background:
    linear-gradient(180deg,rgba(150,85,239,.10),rgba(255,255,255,.025)),
    rgba(12,9,17,.72);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 20px 46px rgba(0,0,0,.28),
    0 0 30px rgba(150,85,239,.09);
}
.hero-link:hover::after {
  transform:scaleX(1);
  opacity:1;
}
.hero-rule { position:absolute; top:50%; width:calc((100vw - min(1200px,100vw)) / 2 - 50px); max-width:250px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08)); }
.hero-rule-left { left:0; }
.hero-rule-right { right:0; transform:scaleX(-1); }
.hero-bottom { position:absolute; left:clamp(24px,5vw,72px); right:clamp(24px,5vw,72px); bottom:28px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:8px; letter-spacing:.28em; color:rgba(243,240,244,.24); }

.showcase { width:min(1320px,calc(100% - 48px)); margin:0 auto; padding:112px 12px 120px; }
.members-heading { text-align:center; margin:0 auto 76px; }
.section-label { display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:20px; font-family:var(--mono); font-size:8px; letter-spacing:.30em; color:rgba(243,240,244,.30); text-transform:uppercase; }
.section-label i { width:34px; height:1px; background:rgba(150,85,239,.55); }
.members-heading h2 { margin:0; font-family:"Vipnagorgialla",var(--display); font-size:clamp(58px,7vw,92px); line-height:.9; font-weight:400; letter-spacing:.01em; }
.members-heading p { margin:22px 0 0; font-size:12px; letter-spacing:.08em; color:var(--muted); }
.member-group { margin-top:0; }
.group-heading { display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.group-number { font-family:var(--mono); font-size:8px; letter-spacing:.20em; color:rgba(243,240,244,.26); }
.group-heading h3 {
  margin:0;
  font-family:"Vipnagorgialla",var(--display);
  font-size:clamp(34px,4vw,54px);
  line-height:1;
  font-weight:400;
  letter-spacing:.01em;
}
.group-line { height:1px; flex:1; background:linear-gradient(90deg,rgba(150,85,239,.46),transparent); }
.profile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.profile { position:relative; --mx:-999px; --my:-999px; min-height:122px; display:flex; align-items:center; gap:15px; padding:20px 20px; border:1px solid rgba(255,255,255,.10); border-radius:16px; background:radial-gradient(240px circle at var(--mx) var(--my),rgba(150,95,220,.085),transparent 62%),linear-gradient(145deg,rgba(30,27,38,.78),rgba(12,11,16,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 14px 36px rgba(0,0,0,.14); cursor:pointer; overflow:hidden; outline:none; transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease; }
.profile::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 12% 18%,rgba(135,82,200,.13),transparent 42%); opacity:.8; }
.profile::after { content:""; position:absolute; left:18px; right:18px; bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(135,82,200,.36),transparent); opacity:.45; }
.profile:hover,.profile:focus-visible { z-index:2; background:radial-gradient(260px circle at var(--mx) var(--my),rgba(163,105,235,.13),transparent 62%),linear-gradient(145deg,rgba(42,35,55,.92),rgba(16,13,23,.96)); border-color:rgba(165,112,224,.34); transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 22px 50px rgba(0,0,0,.25),0 0 28px rgba(110,55,160,.09); }
.avatar-wrap { position:relative; z-index:1; flex:0 0 54px; width:54px; height:54px; overflow:hidden; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:#0b080d; box-shadow:0 0 0 3px rgba(0,0,0,.18),0 7px 18px rgba(0,0,0,.20); transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .25s ease,box-shadow .25s ease; }
.profile:hover .avatar-wrap,.profile:focus-visible .avatar-wrap { transform:scale(1.045); border-color:rgba(189,140,255,.62); box-shadow:0 0 0 3px rgba(0,0,0,.2),0 8px 22px rgba(0,0,0,.24),0 0 20px rgba(150,85,239,.11); }
.profile-pic { width:100%; height:100%; display:block; object-fit:cover; }
.profile:hover .profile-pic,.profile:focus-visible .profile-pic { filter:saturate(1.05) brightness(1.04); }
.profile-letter { width:100%; height:100%; display:grid; place-items:center; font-family:var(--display); font-size:22px; color:var(--purple-light); }
.profile-info { position:relative; z-index:1; min-width:0; }
.profile-name {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"Mouzambik",var(--display);
  font-size:25px;
  line-height:1;
  font-weight:400;
  letter-spacing:.01em;
  color:rgba(243,240,244,.95);
  transition:color .25s ease;
}
.profile:hover .profile-name,.profile:focus-visible .profile-name { color:#fff; }
.profile-bio {
  overflow:hidden;
  margin-top:6px;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--bio-font);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.05em;
  line-height:1.5;
  color:rgba(245,242,246,.42);
}
.real-section { margin-top:96px; padding-top:72px; border-top:1px solid var(--line); }
.real-section .group-heading h3 { color:var(--purple-light); }

.modal { display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; padding:20px; background:rgba(3,2,5,.80); backdrop-filter:blur(18px); }
.modal-box { width:min(430px,100%); overflow:hidden; background:#09070c; border:1px solid var(--line); box-shadow:0 30px 100px rgba(0,0,0,.72),0 0 50px rgba(84,37,142,.12); }
.modal-header { position:relative; height:120px; background:linear-gradient(135deg,#0d0912,#1a0d26); }
.modal-avatar-wrap { position:absolute; left:22px; bottom:-30px; width:68px; height:68px; padding:2px; border-radius:50%; background:#09070c; border:1px solid var(--line); }
.modal-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.modal-close { position:absolute; top:14px; right:14px; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:rgba(0,0,0,.35); cursor:pointer; font-size:17px; }
.modal-body { padding:48px 24px 24px; }
.modal-name { font-family:var(--display); font-size:28px; }
.modal-tag { margin-top:4px; font-family:var(--mono); font-size:9px; color:var(--dim); }
.modal-bio { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-family:var(--bio-font); font-size:12px; letter-spacing:.045em; line-height:1.75; color:rgba(245,242,246,.58); }
.modal-connections { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.conn-row { display:flex; align-items:center; gap:9px; color:var(--muted); font-family:var(--mono); font-size:9px; text-decoration:none; }
.conn-row:hover { color:var(--purple-light); }
.conn-row svg { width:13px; height:13px; fill:currentColor; }

@keyframes drift { from { transform:translate3d(-3%,0,0) scale(1); } to { transform:translate3d(4%,5%,0) scale(1.08); } }

@media (max-width:1100px) { .profile-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .hero { min-height:calc(100vh - 68px); padding-top:70px; } .hero-rule { display:none; } .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } }
@media (max-width:620px) {
  .top-nav { padding:20px 18px; }
  .top-nav::after { left:18px; right:18px; }
  .hero { min-height:calc(100vh - 62px); padding:65px 16px 92px; }
  .hero-eyebrow { margin-bottom:30px; font-size:8px; }
  .identity-title { font-size:clamp(78px,22vw,132px); letter-spacing:-.065em; }
  .identity-subtitle { margin-top:30px; font-size:13px; letter-spacing:.42em; text-indent:.42em; }
  .statement { max-width:340px; margin-top:31px; font-size:10px; letter-spacing:.10em; }
  .hero-link { margin-top:37px; }
  .hero-bottom { left:18px; right:18px; bottom:22px; }
  .showcase { width:calc(100% - 28px); padding:78px 0 70px; }
  .members-heading { margin-bottom:62px; }
  .members-heading h2 { font-size:clamp(62px,18vw,92px); }
  .group-heading { gap:12px; }
  .group-heading h3 { font-size:35px; }
  .profile-grid { grid-template-columns:1fr; gap:12px; }
  .profile { min-height:110px; padding:18px; }
  .profile-name { font-size:23px; }
  .real-section { margin-top:82px; padding-top:64px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Supplied Vipnagorgialla identity treatment */
.intro-enter {
  font-family:var(--mono);
}
@media (max-width:620px) {
  #intro-panel .intro-word {
    font-size:clamp(72px,20vw,130px);
  }
  .identity-title {
    font-size:clamp(84px,20vw,145px);
  }
  .hero-link {
    min-width:178px;
    min-height:48px;
  }
}

@media (max-width:620px) {
  #intro-panel .intro-word {
    font-size:clamp(58px,18vw,100px);
  }
  .identity-title {
    font-size:clamp(68px,18vw,118px);
  }
  .identity-subtitle {
    margin-top:30px;
    font-size:13px;
    letter-spacing:.42em;
  }
  .hero-link {
    min-width:188px;
    min-height:50px;
    margin-top:38px;
  }
}

@media (max-width:620px) {
  .identity-subtitle {
    max-width:340px;
    margin-top:28px;
    font-size:9px;
    line-height:1.75;
    letter-spacing:.16em;
    text-indent:.16em;
  }
}

/* ── Scroll reveal ── */
[data-reveal] {
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1),
    transform .85s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].revealed { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
}

/* ── Self-drawing section lines ── */
[data-reveal] .section-label i,
[data-reveal] .group-line {
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1) .2s;
}
[data-reveal].revealed .section-label i,
[data-reveal].revealed .group-line { transform:scaleX(1); }
@media (prefers-reduced-motion:reduce) {
  [data-reveal] .section-label i,
  [data-reveal] .group-line { transform:none; transition:none; }
}

/* ── Custom cursor (desktop only, enabled via JS) ── */
.cursor-dot,.cursor-ring { position:fixed; top:0; left:0; pointer-events:none; z-index:100002; border-radius:50%; opacity:0; will-change:transform; }
.cursor-dot { width:5px; height:5px; background:#e6d5f7; box-shadow:0 0 10px rgba(189,147,238,.55); transform:translate(-100px,-100px); }
.cursor-ring {
  width:30px; height:30px;
  border:1px solid rgba(205,181,231,.38);
  transform:translate(-100px,-100px);
  transition:width .25s ease, height .25s ease, border-color .25s ease;
}
.cursor-ring.is-hover { width:46px; height:46px; border-color:rgba(189,140,255,.78); }
body.custom-cursor-on * { cursor:none !important; }
body.custom-cursor-on .cursor-dot,
body.custom-cursor-on .cursor-ring { opacity:1; }

/* ── Hero entrance (plays once after intro) ── */
@keyframes prada-rise {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}
.content.visible .hero-eyebrow     { animation:prada-rise .9s .10s cubic-bezier(.22,1,.36,1) backwards; }
.content.visible .identity-title   { animation:prada-rise 1.05s .22s cubic-bezier(.22,1,.36,1) backwards; }
.content.visible .identity-subtitle{ animation:prada-rise .95s .40s cubic-bezier(.22,1,.36,1) backwards; }
.content.visible .hero-link        { animation:prada-rise .95s .55s cubic-bezier(.22,1,.36,1) backwards; }
.content.visible .hero-rule-left   { animation:prada-rise 1.1s .50s cubic-bezier(.22,1,.36,1) backwards; }
.content.visible .hero-rule-right  { animation:prada-rise 1.1s .50s cubic-bezier(.22,1,.36,1) backwards; }

@media (max-width:900px) {
  .profile-bio { font-size:10px; letter-spacing:.045em; }
}