/* ==========================================================================
Navigation (mega menu)+ Hero(3D interactive scene)
==========================================================================*/

/* --- Fixed navbar ---*/
.nav {
position: fixed;
inset: 0 0 auto0;
z-index: 100;
height: var(--nav-h);
display: flex;
align-items:center;
background: rgba(11, 11,18,0.82);
backdrop-filter:blur(14px);
border-bottom: 1px solid var(--c-line);
transition: background var(--t-base) var(--e-out);
}

.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline:var(--sp-3);
}

.brand{
display: flex;
align-items:center;
gap: var(--sp-2);
color: var(--c-ink);
}

.brand:hover{ text-decoration: none;}

.brand__mark {
 position:relative;
width:34px;
height:34px;
flex: 0 0 34px;
background: conic-gradient(from 210deg, var(--c-violet-lift), var(--c-cyan), var(--c-lime), var(--c-magenta), var(--c-violet-lift));
clip-path:polygon(50% 0%,100% 25%, 100% 75%,50% 100%, 0% 75%,0% 25%);
}

.brand__mark::after{
content: "";
position: absolute;
inset:6px;
background: var(--c-void);
clip-path:polygon(50% 0%, 100% 25%,100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.brand__text{ display:flex; flex-direction:column;line-height: 1.15;}

.brand__name{
font-family:var(--f-display);
font-weight:800;
font-size:0.95rem;
letter-spacing: -0.01em;
}

.brand__domain{
font-family: var(--f-mono);
font-size:var(--fs-micro);
color:var(--c-lime);
letter-spacing:0.08em;
}

/* --- Desktop nav list ---*/
.nav__list{
display:none;
align-items:center;
gap:var(--sp-1);
}

.nav__item{ position: relative; }

.nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap:0.4rem;
padding: 0.55rem var(--sp-2);
color: var(--c-ink-soft);
font-size:var(--fs-small);
font-weight:600;
border-radius:var(--r-pill);
background:none;
border:0;
font-family:inherit;
cursor:pointer;
transition:color var(--t-fast) linear, background var(--t-fast) linear;
}

.nav__link:hover,
.nav__link[aria-expanded="true"]{
color: var(--c-ink);
background: var(--c-surface-2);
text-decoration: none;
}

.nav__caret {
width:8px;
height: 8px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition:transform var(--t-fast) var(--e-out);
}

.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(225deg) translateY(-2px); }

/*--- Mega menu panel ---*/
.mega {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform:translateX(-50%) translateY(-8px);
width: min(680px, calc(100vw - 2 * var(--sp-3)));
padding:var(--sp-4);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-lift);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--t-base) var(--e-out),
transform var(--t-base) var(--e-out),
visibility var(--t-base) linear;
}

.mega[data-open="true"]{
opacity:1;
visibility:visible;
pointer-events: auto;
transform:translateX(-50%) translateY(0);
}

.mega__grid{
display: grid;
gap:var(--sp-3);
grid-template-columns: repeat(2,minmax(0,1fr));
}

.mega__card {
display:block;
padding: var(--sp-2);
border-radius:var(--r-md);
border:1px solid transparent;
color: var(--c-ink);
transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}

.mega__card:hover{
text-decoration: none;
border-color:var(--c-line);
background: var(--c-surface-2);
}

.mega__card
h3 {
font-size:0.95rem;
margin-bottom:0.35rem;
letter-spacing: 0;
}

.mega__card
p{
margin:0;
font-size:var(--fs-small);
color: var(--c-ink-soft);
line-height: 1.55;
}

.mega__foot {
display:flex;
align-items:center;
justify-content:space-between;
gap: var(--sp-2);
margin-top: var(--sp-3);
padding-top:var(--sp-3);
border-top:1px solid var(--c-line);
font-size: var(--fs-small);
color: var(--c-ink-mute);
}

/*--- Mobile hamburger ---*/
.nav__toggle{
display: inline-flex;
flex-direction:column;
justify-content: center;
gap: 5px;
width:44px;
height: 44px;
padding: 0 10px;
background: var(--c-surface-2);
border:1px solid var(--c-line);
border-radius:var(--r-sm);
cursor:pointer;
}

.nav__toggle
span{
display: block;
height: 2px;
background: var(--c-ink);
transition:transform var(--t-fast) var(--e-out), opacity var(--t-fast) linear;
}

.nav__toggle[aria-expanded="true"]
span:nth-child(1){ transform:translateY(7px) rotate(45deg);}
.nav__toggle[aria-expanded="true"]
span:nth-child(2) { opacity:0; }
.nav__toggle[aria-expanded="true"]
span:nth-child(3){transform: translateY(-7px) rotate(-45deg); }

/*--- Mobile drawer ---*/
.drawer{
position:fixed;
inset: var(--nav-h) 0 auto0;
z-index: 99;
max-height: calc(100vh - var(--nav-h));
overflow-y:auto;
padding:var(--sp-3) var(--sp-3) var(--sp-5);
background: var(--c-surface);
border-bottom:1px solid var(--c-line);
transform: translateY(-12px);
opacity: 0;
visibility: hidden;
transition:opacity var(--t-base) var(--e-out),
transform var(--t-base) var(--e-out),
visibility var(--t-base) linear;
}

.drawer[data-open="true"]{
opacity: 1;
visibility: visible;
transform:translateY(0);
}

.drawer__group+ .drawer__group{
margin-top: var(--sp-3);
padding-top:var(--sp-3);
border-top: 1px solid var(--c-line);
}

.drawer__title {
font-family:var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.2em;
text-transform:uppercase;
color:var(--c-lime);
margin-bottom:var(--sp-1);
}

.drawer__link {
display:block;
padding:0.7rem 0;
color:var(--c-ink);
font-weight:600;
border-bottom: 1px solid var(--c-line);
}

.drawer__link:last-child { border-bottom: 0; }
.drawer__link:hover{color: var(--c-lime); text-decoration: none;}

/* ==========================================================================
Hero — 3D interactive scene
========================================================================== */

.hero {
position:relative;
min-height: min(100svh, 900px);
padding-top: calc(var(--nav-h) + var(--sp-5));
padding-bottom: var(--sp-5);
display: flex;
align-items:center;
overflow:hidden;
background-color:var(--c-surface);
background-image: url("../assets/hero-bg.jpg");
background-size:cover;
background-position: center;
}

/*Overlay guarantees AA contrast for hero copy over the photo */
.hero::before {
content: "";
position: absolute;
inset:0;
background: linear-gradient(105deg,
rgba(11,11, 18,0.96) 0%,
rgba(11, 11,18, 0.9) 42%,
rgba(20,8,48, 0.82) 72%,
rgba(11,11, 18, 0.9) 100%);
}

.hero::after{
content: "";
position: absolute;
inset:0;
background:
radial-gradient(60% 50% at 82% 28%,rgba(108, 43, 217, 0.45), transparent 70%),
radial-gradient(45% 40% at 12% 82%, rgba(34,229,216, 0.16), transparent 72%);
pointer-events: none;
}

.hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--sp-3);
display:grid;
gap: var(--sp-5);
grid-template-columns: 1fr;
align-items: center;
}

.hero__title
.line{ display: block; }

.hero__title
.line--accent{
background:linear-gradient(96deg,var(--c-lime), var(--c-cyan) 55%, var(--c-magenta));
-webkit-background-clip: text;
background-clip: text;
color:transparent;
}

.hero__lead {
margin-top:var(--sp-3);
margin-bottom: var(--sp-4);
font-size:var(--fs-lead);
color: var(--c-ink-soft);
max-width: 54ch;
}

.hero__cta {
display:flex;
flex-wrap: wrap;
gap:var(--sp-2);
}

.hero__stats{
display: grid;
grid-template-columns:repeat(3,minmax(0, 1fr));
gap: var(--sp-2);
margin-top:var(--sp-5);
padding-top:var(--sp-4);
border-top: 1px solid rgba(245,245, 250, 0.16);
}

.stat__num{
display:block;
font-family:var(--f-display);
font-size: clamp(1.6rem, 3.4vw,2.4rem);
font-weight:800;
color: var(--c-lime);
letter-spacing: -0.02em;
line-height:1.1;
}

.stat__label {
font-size:var(--fs-micro);
letter-spacing:0.12em;
text-transform: uppercase;
color: var(--c-ink-soft);
}

/* --- The 3D stage: CSS transform-3d, pointer-reactive via JS --- */
.stage {
position:relative;
height: clamp(300px,44vw, 460px);
perspective: 1100px;
display: none;
}

.stage__scene {
position:absolute;
inset: 0;
transform-style:preserve-3d;
transform:rotateX(var(--rx,-14deg)) rotateY(var(--ry,22deg));
transition:transform var(--t-slow) var(--e-out);
}

.stage__plate{
position: absolute;
top: 50%;
left:50%;
width: clamp(150px, 20vw,215px);
aspect-ratio:1 /1;
margin: calc(clamp(150px, 20vw, 215px) / -2) 0 0 calc(clamp(150px, 20vw, 215px) / -2);
border-radius: var(--r-lg);
border: 1px solid rgba(245,245, 250,0.2);
background: rgba(18, 18,28, 0.72);
backdrop-filter:blur(4px);
transform-style:preserve-3d;
display: grid;
place-content:center;
text-align:center;
padding: var(--sp-2);
}

.stage__plate--a{
transform: translate3d(-72px,-88px, 90px) rotate(-8deg);
border-color:rgba(198, 255, 0, 0.55);
box-shadow:0 0 42px -14px rgba(198,255, 0,0.5);
}

.stage__plate--b {
transform: translate3d(84px,-16px,0) rotate(5deg);
border-color:rgba(255, 45, 149, 0.5);
box-shadow: 0 0 42px -14px rgba(255,45,149,0.45);
}

.stage__plate--c {
transform:translate3d(-40px, 92px,-70px) rotate(-3deg);
border-color: rgba(34, 229,216, 0.5);
box-shadow: 0 0 42px -14px rgba(34, 229,216, 0.4);
}

.stage__glyph {
font-size:1.9rem;
line-height:1;
margin-bottom: 0.6rem;
}

.stage__k{
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing:0.16em;
text-transform: uppercase;
color: var(--c-ink);
}

.stage__v{
display:block;
margin-top:0.3rem;
font-size: var(--fs-micro);
color: var(--c-ink-soft);
letter-spacing:0.04em;
}

.stage__grid{
position: absolute;
left:50%;
top:50%;
width:min(120%,560px);
aspect-ratio: 1 / 1;
transform:translate(-50%,-50%) rotateX(74deg);
background-image:
linear-gradient(to right, rgba(139, 92,246,0.3) 1px, transparent 1px),
linear-gradient(to bottom, rgba(139,92,246, 0.3) 1px, transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(circle at center, #000 12%,transparent 68%);
-webkit-mask-image: radial-gradient(circle at center, #000 12%, transparent 68%);
}

.stage__hint{
position: absolute;
left:50%;
bottom:-6px;
transform: translateX(-50%);
font-family: var(--f-mono);
font-size:var(--fs-micro);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-ink-mute);
white-space: nowrap;
}