:root{
--bg:#040404;
--panel:#0b0b0b;
--soft:#101010;
--line:#1b1b1b;
--text:#f5f5f5;
--muted:#8e9490;
--accent:#7ee787;
--gold:#c7a96b;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
background:
radial-gradient(circle at top right,rgba(126,231,135,.06),transparent 30%),
radial-gradient(circle at bottom left,rgba(199,169,107,.05),transparent 35%),
var(--bg);
color:var(--text);
font-family:Inter,Arial,sans-serif;
line-height:1.6;
overflow-x:hidden;
}

body:before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
background-size:40px 40px;
opacity:.18;
}

header{
position:sticky;
top:0;
z-index:100;
background:rgba(4,4,4,.84);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
padding:20px 7%;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-weight:900;
letter-spacing:.24em;
font-size:13px;
}

.logo span{
color:var(--accent);
}

nav{
display:flex;
gap:22px;
flex-wrap:wrap;
}

nav a{
color:var(--muted);
text-decoration:none;
font-size:13px;
font-family:monospace;
text-transform:uppercase;
}

nav a:hover{
color:#fff;
}

.hero{
padding:110px 7% 80px;
max-width:1300px;
margin:auto;
}

.tag{
font-family:monospace;
color:var(--accent);
font-size:13px;
letter-spacing:.18em;
text-transform:uppercase;
margin-bottom:20px;
}

h1{
font-size:clamp(52px,7vw,96px);
line-height:.95;
margin:0 0 24px;
letter-spacing:-.04em;
max-width:900px;
}

.lead{
font-size:22px;
color:var(--muted);
max-width:900px;
}

.cta{
margin-top:34px;
display:flex;
gap:14px;
flex-wrap:wrap;
}

.btn{
padding:15px 22px;
border:1px solid var(--line);
background:var(--panel);
color:#fff;
text-decoration:none;
font-family:monospace;
font-size:13px;
text-transform:uppercase;
}

.btn:hover{
border-color:var(--accent);
}

.btn.primary{
background:var(--accent);
color:#000;
border-color:var(--accent);
font-weight:bold;
}

section{
padding:70px 7%;
border-top:1px solid var(--line);
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
margin-top:34px;
}

.card{
background:#090909;
border:1px solid var(--line);
padding:30px;
}

.card h3{
margin:0 0 14px;
font-size:24px;
}

.card p{
margin:0;
color:var(--muted);
}

footer{
padding:50px 7%;
border-top:1px solid var(--line);
color:#666;
font-family:monospace;
font-size:13px;
}

@media(max-width:900px){

header{
display:block;
}

.logo{
margin-bottom:16px;
}

h1{
font-size:56px;
}

}

.mainnav{
display:flex;
gap:22px;
flex-wrap:wrap;
align-items:center;
}

.navdrop{
position:relative;
display:inline-block;
}

.submenu{
display:none;
position:absolute;
top:100%;
left:0;
min-width:240px;
background:#060606;
border:1px solid var(--line);
padding:10px;
z-index:999;
box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.submenu a{
display:block;
padding:10px 12px;
margin:0;
white-space:nowrap;
color:var(--muted);
}

.submenu a:hover{
color:#fff;
background:#0e0e0e;
}

.navdrop:hover .submenu{
display:block;
}

/* FORCE COMPACT DROPDOWN MENU */
header{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:24px!important;
}

.mainnav{
display:flex!important;
align-items:center!important;
gap:22px!important;
flex-wrap:nowrap!important;
}

.mainnav > a,
.navdrop > a{
display:inline-flex!important;
align-items:center!important;
height:48px!important;
white-space:nowrap!important;
}

.navdrop{
position:relative!important;
}

.submenu{
display:none!important;
position:absolute!important;
top:48px!important;
left:0!important;
min-width:280px!important;
background:#050505!important;
border:1px solid var(--line)!important;
padding:10px!important;
z-index:9999!important;
box-shadow:0 18px 40px rgba(0,0,0,.55)!important;
}

.submenu a{
display:block!important;
padding:11px 14px!important;
white-space:nowrap!important;
}

.navdrop:hover .submenu{
display:block!important;
}

@media(max-width:1100px){
header{
display:block!important;
}
.mainnav{
margin-top:14px!important;
flex-wrap:wrap!important;
gap:14px!important;
}
.submenu{
position:static!important;
margin-top:6px!important;
}
.navdrop:hover .submenu{
display:block!important;
}
}

/* ===== MODERN GRID BACKGROUND ===== */

body{
position:relative;
overflow-x:hidden;
}

body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-2;

background-image:
linear-gradient(rgba(126,231,135,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(126,231,135,.055) 1px, transparent 1px);

background-size:42px 42px;

mask-image:radial-gradient(circle at center, black 35%, transparent 95%);
-webkit-mask-image:radial-gradient(circle at center, black 35%, transparent 95%);

animation:gridDrift 18s linear infinite;
}

body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;

background:
radial-gradient(circle at var(--mx,50%) var(--my,50%),
rgba(126,231,135,.10),
transparent 220px);

transition:
background-position .08s linear,
opacity .15s ease;
}

@keyframes gridDrift{
0%{
transform:translate3d(0,0,0);
}
50%{
transform:translate3d(-12px,-8px,0);
}
100%{
transform:translate3d(0,0,0);
}
}

/* subtle hover glow */

.card,
.terminal,
.box{
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}

.card:hover,
.terminal:hover,
.box:hover{
transform:translateY(-3px);
border-color:rgba(126,231,135,.32)!important;
box-shadow:0 12px 40px rgba(126,231,135,.08);
}

/* hero glow */

.hero{
position:relative;
}

.hero::before{
content:"";
position:absolute;
width:700px;
height:700px;
right:-180px;
top:-180px;
border-radius:50%;
background:radial-gradient(circle,
rgba(126,231,135,.05),
transparent 70%);
pointer-events:none;
filter:blur(30px);
}

/* cleaner nav */

nav a{
letter-spacing:.08em;
transition:color .15s ease;
}

nav a:hover{
color:#fff!important;
}

/* smooth buttons */

.btn{
transition:
transform .15s ease,
border-color .15s ease,
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(126,231,135,.10);
}

/* subtle terminal pulse */

.terminal{
animation:terminalPulse 5s ease-in-out infinite;
}

@keyframes terminalPulse{
0%{box-shadow:0 0 28px rgba(126,231,135,.04)}
50%{box-shadow:0 0 44px rgba(126,231,135,.09)}
100%{box-shadow:0 0 28px rgba(126,231,135,.04)}
}


/* ===== REAL TEXTURED GRID V2 ===== */

body{
background:
radial-gradient(circle at top right,rgba(126,231,135,.08),transparent 32%),
radial-gradient(circle at bottom left,rgba(199,169,107,.055),transparent 35%),
#040404!important;
}

body::before{
content:""!important;
position:fixed!important;
inset:0!important;
z-index:-3!important;
pointer-events:none!important;

background-image:
linear-gradient(rgba(126,231,135,.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(126,231,135,.16) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px)!important;

background-size:
64px 64px,
64px 64px,
16px 16px,
16px 16px!important;

opacity:.38!important;
mask-image:linear-gradient(to bottom, black 0%, black 65%, transparent 100%)!important;
-webkit-mask-image:linear-gradient(to bottom, black 0%, black 65%, transparent 100%)!important;

animation:gridMoveStrong 22s linear infinite!important;
}

body::after{
content:""!important;
position:fixed!important;
inset:0!important;
z-index:-2!important;
pointer-events:none!important;

background:
linear-gradient(115deg, transparent 0%, rgba(126,231,135,.045) 48%, transparent 56%),
radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(126,231,135,.16), transparent 260px)!important;

mix-blend-mode:screen;
opacity:.8!important;
}

main,section,header,footer{
position:relative;
z-index:1;
}

section{
background:rgba(4,4,4,.42);
backdrop-filter:blur(0.5px);
}

.card,.terminal,.box,.formbox{
background:
linear-gradient(180deg,rgba(13,13,13,.96),rgba(5,5,5,.96))!important;
}

@keyframes gridMoveStrong{
0%{background-position:0 0,0 0,0 0,0 0}
100%{background-position:64px 64px,64px 64px,16px 16px,16px 16px}
}

.card:hover,
.terminal:hover,
.box:hover,
.formbox:hover{
background-image:
linear-gradient(180deg,rgba(13,13,13,.98),rgba(5,5,5,.98)),
linear-gradient(rgba(126,231,135,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(126,231,135,.08) 1px, transparent 1px)!important;
background-size:auto,18px 18px,18px 18px!important;
}


/* ===== PERF FIX: REMOVE MOUSE GLOW ===== */

body::after{
background:
linear-gradient(115deg, transparent 0%, rgba(126,231,135,.035) 48%, transparent 56%)!important;
opacity:.45!important;
mix-blend-mode:screen!important;
}

.card:hover,
.terminal:hover,
.box:hover,
.formbox:hover{
transform:none!important;
box-shadow:0 8px 26px rgba(126,231,135,.045)!important;
}

.terminal{
animation:none!important;
}


/* ===== LEAN MEAN GREEN PERFORMANCE OVERRIDE ===== */

*{
animation:none!important;
transition:none!important;
}

html,body{
background:#040604!important;
}

body::before{
content:""!important;
position:fixed!important;
inset:0!important;
z-index:-2!important;
pointer-events:none!important;
background-image:
linear-gradient(rgba(126,231,135,.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(126,231,135,.09) 1px, transparent 1px)!important;
background-size:52px 52px!important;
opacity:.55!important;
mask-image:none!important;
-webkit-mask-image:none!important;
transform:none!important;
animation:none!important;
}

body::after{
display:none!important;
content:none!important;
}

header{
background:#030503!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
border-bottom:1px solid rgba(126,231,135,.18)!important;
}

section{
background:rgba(3,5,3,.86)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}

.hero::before{
display:none!important;
content:none!important;
}

.submenu{
background:#030503!important;
border:1px solid rgba(126,231,135,.22)!important;
box-shadow:none!important;
opacity:1!important;
}

.submenu a{
background:#030503!important;
color:#b7b7b7!important;
opacity:1!important;
}

.submenu a:hover{
background:#0a140a!important;
color:#7ee787!important;
}

.card,.terminal,.box,.formbox{
background:#070907!important;
border:1px solid rgba(126,231,135,.14)!important;
box-shadow:none!important;
transform:none!important;
}

.card:hover,.terminal:hover,.box:hover,.formbox:hover{
background:#0a100a!important;
border-color:rgba(126,231,135,.35)!important;
box-shadow:none!important;
transform:none!important;
}

.btn:hover{
box-shadow:none!important;
transform:none!important;
}

img{
image-rendering:auto;
}


/* dropdown keep/fix */
.mainnav{display:flex!important;align-items:center!important;gap:22px!important;flex-wrap:nowrap!important;overflow:visible!important}
.navdrop{position:relative!important;display:inline-flex!important}
.submenu{display:none!important;position:absolute!important;top:48px!important;left:0!important;min-width:290px!important;background:#030503!important;border:1px solid rgba(126,231,135,.25)!important;padding:10px!important;z-index:999999!important}
.submenu a{display:block!important;padding:11px 14px!important;white-space:nowrap!important;color:#b7b7b7!important;text-decoration:none!important;background:#030503!important}
.submenu a:hover{background:#0a140a!important;color:#7ee787!important}
.navdrop:hover .submenu{display:block!important}
@media(max-width:1100px){.mainnav{flex-wrap:wrap!important}.submenu{position:absolute!important}}

/* HARD FIX SUBMENU VISIBILITY */
.submenu{
background:#050805!important;
border:1px solid rgba(126,231,135,.55)!important;
box-shadow:0 12px 30px rgba(0,0,0,.9)!important;
opacity:1!important;
}

.submenu a{
color:#f2f2f2!important;
opacity:1!important;
font-weight:700!important;
letter-spacing:.08em!important;
background:#050805!important;
}

.submenu a:hover{
color:#7ee787!important;
background:#102010!important;
}

.navdrop:hover .submenu,
.submenu:hover{
display:block!important;
opacity:1!important;
}

/* HARD FIX SUBMENU VISIBILITY */
.submenu{
background:#050805!important;
border:1px solid rgba(126,231,135,.55)!important;
box-shadow:0 12px 30px rgba(0,0,0,.9)!important;
opacity:1!important;
}

.submenu a{
color:#f2f2f2!important;
opacity:1!important;
font-weight:700!important;
letter-spacing:.08em!important;
background:#050805!important;
}

.submenu a:hover{
color:#7ee787!important;
background:#102010!important;
}

.navdrop:hover .submenu,
.submenu:hover{
display:block!important;
opacity:1!important;
}

/* HARD FIX: MENU ABOVE CONTENT */
header{
position:sticky!important;
top:0!important;
z-index:999999!important;
overflow:visible!important;
}

.mainnav,
.navdrop{
position:relative!important;
z-index:999999!important;
overflow:visible!important;
}

.submenu{
position:absolute!important;
z-index:1000000!important;
background:#050805!important;
border:1px solid rgba(126,231,135,.65)!important;
box-shadow:0 18px 45px rgba(0,0,0,.95)!important;
}

main,
section,
.hero,
.card,
.grid{
z-index:1!important;
}


/* FORCE SMALLER HERO TITLES */
.hero h1,
section.hero h1,
h1{
font-size:clamp(42px,5vw,78px)!important;
line-height:1.04!important;
max-width:920px!important;
letter-spacing:-0.045em!important;
}

.hero{
padding-top:90px!important;
padding-bottom:80px!important;
}

.lead,
.hero p{
max-width:900px!important;
font-size:1.05rem!important;
line-height:1.65!important;
}

@media(max-width:900px){
.hero h1,
section.hero h1,
h1{
font-size:clamp(36px,10vw,58px)!important;
}
}

.product-visual{
max-width:980px;
margin:0 auto 90px auto;
padding:0 24px;
}

.product-visual img{
width:100%;
display:block;
border:1px solid rgba(126,255,138,.24);
box-shadow:0 0 55px rgba(0,255,80,.12);
border-radius:18px;
background:#020502;
}

@media(max-width:800px){
.product-visual{
margin-bottom:55px;
}
}

/* TYPHON HERO VISUAL FIX */
.typhon-hero-wrap{
display:grid;
grid-template-columns:1.05fr .75fr;
gap:56px;
align-items:center;
max-width:1280px;
margin:0 auto;
padding:0 24px;
}

.typhon-hero-visual{
position:relative;
opacity:.82;
filter:drop-shadow(0 0 45px rgba(126,255,138,.14));
}

.typhon-hero-visual img{
width:100%;
max-height:620px;
object-fit:contain;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
background:transparent!important;
}

.product-visual{
display:none!important;
}

@media(max-width:950px){
.typhon-hero-wrap{
display:block;
}
.typhon-hero-visual{
margin-top:35px;
opacity:.65;
}
.typhon-hero-visual img{
max-height:480px;
}
}

/* Blend TYPHON visual into PI green-black palette */
.typhon-hero-visual{
opacity:.55!important;
mix-blend-mode:screen;
filter:
  grayscale(.25)
  sepia(.2)
  hue-rotate(75deg)
  saturate(1.25)
  brightness(.72)
  contrast(.95)
  drop-shadow(0 0 55px rgba(126,255,138,.10))!important;
}

.typhon-hero-visual:after{
content:"";
position:absolute;
inset:0;
background:
  radial-gradient(circle at center, rgba(126,255,138,.08), rgba(0,0,0,.48) 68%),
  linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.65));
pointer-events:none;
}

.typhon-hero-visual img{
opacity:.9;
}

/* TYPHON visual reset — use native image color */
.typhon-hero-visual{
opacity:1!important;
mix-blend-mode:normal!important;
filter:drop-shadow(0 0 38px rgba(126,255,138,.14))!important;
}

.typhon-hero-visual:after{
display:none!important;
}

.typhon-hero-visual img{
opacity:1!important;
}