*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
--bg-deep:#0d0a07;
--concrete-1:#1e1c1a;--concrete-2:#1a1816;--concrete-3:#222019;--concrete-4:#161412;
--corrosion-1:#6B4423;--corrosion-2:#5A3A1A;
--olive-1:#3d3c2e;--olive-2:#4a4835;
--yellow-1:#B8960B;--yellow-2:#8B7500;
--blood-1:#6B0000;--blood-2:#5a0000;--blood-3:#3a0000;
--bone-1:#C8C0B0;--bone-2:#A89E8E;
--amber:#A08030;
--rust-1:#8B4513;--rust-2:#6B4423;--rust-3:#5A3A1A;
--bolt:#3a3530;--washer:#2a2520;
--slab-light:#2a2725;--slab-dark:#0a0908;
--font-heading:'Bebas Neue',sans-serif;
--font-body:'Special Elite',cursive;
--font-mono:'Share Tech Mono',monospace;
}
html{scroll-behavior:smooth;background:var(--bg-deep);overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{
font-family:var(--font-body);color:var(--bone-1);
background:
repeating-radial-gradient(circle at 47% 53%, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 13% 27%, rgba(200,190,170,0.015) 0px, rgba(200,190,170,0.015) 1px, transparent 1px, transparent 6px),
repeating-radial-gradient(circle at 71% 83%, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 2px, transparent 2px, transparent 7px),
repeating-radial-gradient(circle at 89% 11%, rgba(180,170,150,0.013) 0px, rgba(180,170,150,0.013) 1px, transparent 1px, transparent 5px),
var(--bg-deep);
overflow-x:hidden;line-height:1.7;
 -webkit-text-size-adjust:100%;
}

/* ========== FLUORESCENT FLICKER OVERLAY ========== */
.flicker-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(8,10,14,0.04);
z-index:9998;pointer-events:none;
animation:fluorFlicker 6s ease-in-out infinite;
}
@keyframes fluorFlicker{
0%,100%{opacity:0.04;}
30%{opacity:0.0;}
50%{opacity:0.04;}
70%{opacity:0.02;}
85%{opacity:0.04;}
}

/* ========== DUST CANVAS ========== */
#dustCanvas{
position:fixed;top:0;left:0;width:100%;height:100%;
z-index:0;pointer-events:none;
}

/* ========== CONCRETE GRAIN TEXTURE ========== */
.concrete-grain::before{
content:'';position:absolute;top:0;left:0;width:100%;height:100%;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px),
repeating-radial-gradient(circle at 60% 40%, rgba(200,190,170,0.025) 0px, rgba(200,190,170,0.025) 1px, transparent 1px, transparent 5px),
repeating-radial-gradient(circle at 30% 70%, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 6px),
repeating-radial-gradient(circle at 80% 20%, rgba(180,170,150,0.035) 0px, rgba(180,170,150,0.035) 1px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 15% 85%, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 3px, transparent 3px, transparent 8px);
background-size:4px 4px, 6px 6px, 7px 7px, 5px 5px, 9px 9px;
opacity:0.7;pointer-events:none;z-index:1;
}

/* ========== CONCRETE PANEL ========== */
.concrete-panel{
position:relative;
background:
radial-gradient(ellipse at 20% 30%, rgba(40,35,30,0.5) 0%, transparent 50%),
radial-gradient(ellipse at 75% 65%, rgba(50,45,38,0.3) 0%, transparent 45%),
radial-gradient(ellipse at 55% 80%, rgba(107,68,35,0.08) 0%, transparent 40%),
radial-gradient(ellipse at 15% 70%, rgba(107,68,35,0.06) 0%, transparent 35%),
linear-gradient(180deg, var(--concrete-1) 0%, var(--concrete-2) 40%, var(--concrete-1) 70%, var(--concrete-2) 100%);
border-left:2px solid var(--slab-light);
border-bottom:2px solid var(--slab-dark);
border-right:1px solid rgba(10,9,8,0.8);
border-top:1px solid rgba(42,39,37,0.5);
overflow:hidden;
}

/* ========== CONCRETE ANCHORS ========== */
.anchor{
position:absolute;width:22px;height:22px;z-index:5;pointer-events:none;
}
.anchor-tl{top:12px;left:12px;}
.anchor-tr{top:12px;right:12px;}
.anchor-bl{bottom:12px;left:12px;}
.anchor-br{bottom:12px;right:12px;}

.anchor-intact::before{
content:'';position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;
background:radial-gradient(ellipse at 40% 35%, #332e2a, var(--washer) 60%, #1a1815 100%);
}
.anchor-intact::after{
content:'+';position:absolute;top:1px;left:1px;width:20px;height:20px;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:14px;font-weight:bold;line-height:1;
color:rgba(255,255,255,0.08);
background:radial-gradient(ellipse at 38% 32%, rgba(255,255,255,0.08), var(--bolt) 45%, #2a2520 100%);
border-radius:50%;
box-shadow:inset 0 -1px 2px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.05);
}

.anchor-corroded::before{
content:'';position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;
background:radial-gradient(ellipse at 45% 40%, #5a3a1a, #3d2a10 70%, #1a1510 100%);
box-shadow:0 0 3px rgba(107,68,35,0.3);
}
.anchor-corroded::after{
content:'+';position:absolute;top:2px;left:2px;width:18px;height:18px;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:12px;font-weight:bold;line-height:1;
color:rgba(90,58,26,0.25);
background:radial-gradient(ellipse at 40% 35%, #7a5533, #5a3a1a 50%, #3d2a10 100%);
border-radius:50%;
box-shadow:inset 0 -1px 3px rgba(0,0,0,0.7);
}

.anchor-missing::before{
content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
background:radial-gradient(circle, #030303 35%, #0a0908 60%, #151210 100%);
box-shadow:inset 0 2px 5px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.5);
}
.anchor-missing::after{
content:'';position:absolute;top:0;left:8px;width:6px;height:4px;
background:var(--concrete-1);border-radius:0 0 3px 3px;
transform:rotate(15deg);opacity:0.7;
}

.anchor-stripped::before{
content:'';position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;
background:radial-gradient(ellipse at 50% 50%, #2a2520, #1a1815);
border:1px solid rgba(58,53,48,0.4);
border-top-color:transparent;
}
.anchor-stripped::after{
content:'+';position:absolute;top:2px;left:3px;width:17px;height:17px;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:13px;font-weight:bold;line-height:1;
color:rgba(255,255,255,0.05);
background:radial-gradient(ellipse at 50% 40%, #4a4540, #2a2520);
border-radius:50%;
box-shadow:inset 0 -2px 3px rgba(0,0,0,0.7);
transform:rotate(25deg) translate(1px, -1px);
}

/* ========== HAZARD DIVIDER ========== */
.hazard-divider{
position:relative;width:100%;height:18px;overflow:hidden;z-index:1;
}
.hazard-divider::before{
content:'';position:absolute;top:0;left:0;width:100%;height:100%;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px),
repeating-linear-gradient(
-45deg,
var(--yellow-1) 0px, var(--yellow-1) 10px,
#1a1a1a 10px, #1a1a1a 20px
);
background-size:3px 3px, auto;
opacity:0.25;
}
.hazard-divider::after{
content:'';position:absolute;top:0;left:0;width:100%;height:100%;
background:
repeating-radial-gradient(circle at 50% 50%, rgba(30,28,26,0.4) 0px, rgba(30,28,26,0.4) 2px, transparent 2px, transparent 5px),
linear-gradient(to right, var(--bg-deep) 0%, transparent 15%, transparent 85%, var(--bg-deep) 100%);
background-size:5px 5px, 100% 100%;
}

/* ========== NAV ========== */
.nav{
position:fixed;top:0;left:0;width:100%;z-index:9999;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 70% 50%, rgba(200,190,170,0.015) 0px, rgba(200,190,170,0.015) 1px, transparent 1px, transparent 5px),
radial-gradient(ellipse at 20% 50%, rgba(40,35,30,0.3) 0%, transparent 40%),
radial-gradient(ellipse at 80% 50%, rgba(50,45,38,0.2) 0%, transparent 35%),
linear-gradient(180deg, var(--concrete-4) 0%, #100e0c 100%);
background-size:4px 4px, 5px 5px, 100% 100%, 100% 100%, 100% 100%;
border-bottom:1px solid var(--slab-light);
box-shadow:0 4px 15px rgba(0,0,0,0.8);
}
.nav-inner{
max-width:1280px;margin:0 auto;display:flex;align-items:center;
justify-content:space-between;padding:0 30px;height:60px;
}
.nav-left{
display:flex;
align-items:center;
gap:14px;
}
.nav-brand{
text-decoration:none;
display:flex;
align-items:center;
}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;}
.nav-links a{
font-family:var(--font-mono);font-size:0.78rem;color:var(--bone-1);
text-decoration:none;letter-spacing:2px;text-transform:uppercase;
transition:color 0.3s;
}
.nav-links a:hover{color:var(--yellow-1);}
.nav-cta{
font-family:var(--font-mono);font-size:0.72rem;
background:var(--blood-1);color:var(--bone-1);
border:1px solid var(--corrosion-1);
padding:8px 18px;text-decoration:none;text-transform:uppercase;
letter-spacing:2px;transition:background 0.3s;cursor:pointer;
}
.nav-cta:hover{background:#7a0000;}
.nav-rivet-strip{
position:absolute;bottom:0;left:0;width:100%;height:4px;
background:repeating-radial-gradient(circle, #3a3530 1px, transparent 1.5px);
background-size:12px 12px;
background-position:0 center;
opacity:0.5;
}

/* ========== CSS LOGO ========== */
.logo-mark{
position:relative;display:inline-flex;align-items:center;gap:10px;
}
.logo-gear{
position:relative;width:36px;height:36px;flex-shrink:0;
}
.logo-gear-circle{
position:absolute;top:4px;left:4px;width:28px;height:28px;
border:3px solid var(--yellow-1);border-radius:50%;
background:transparent;
}
.logo-gear-dot{
position:absolute;top:50%;left:50%;width:6px;height:6px;
background:var(--yellow-1);border-radius:50%;
transform:translate(-50%,-50%);
}
.logo-gear-teeth1{
position:absolute;top:50%;left:50%;width:34px;height:34px;
transform:translate(-50%,-50%) rotate(0deg);
}
.logo-gear-teeth1::before{
content:'';position:absolute;top:0;left:50%;width:4px;height:100%;
transform:translateX(-50%);
background:linear-gradient(to bottom, var(--yellow-1) 0%, var(--yellow-1) 5px, transparent 5px, transparent calc(100% - 5px), var(--yellow-1) calc(100% - 5px));
}
.logo-gear-teeth1::after{
content:'';position:absolute;top:50%;left:0;width:100%;height:4px;
transform:translateY(-50%);
background:linear-gradient(to right, var(--yellow-1) 0%, var(--yellow-1) 5px, transparent 5px, transparent calc(100% - 5px), var(--yellow-1) calc(100% - 5px));
}
.logo-gear-teeth2{
position:absolute;top:50%;left:50%;width:34px;height:34px;
transform:translate(-50%,-50%) rotate(45deg);
}
.logo-gear-teeth2::before{
content:'';position:absolute;top:0;left:50%;width:4px;height:100%;
transform:translateX(-50%);
background:linear-gradient(to bottom, var(--yellow-1) 0%, var(--yellow-1) 5px, transparent 5px, transparent calc(100% - 5px), var(--yellow-1) calc(100% - 5px));
}
.logo-gear-teeth2::after{
content:'';position:absolute;top:50%;left:0;width:100%;height:4px;
transform:translateY(-50%);
background:linear-gradient(to right, var(--yellow-1) 0%, var(--yellow-1) 5px, transparent 5px, transparent calc(100% - 5px), var(--yellow-1) calc(100% - 5px));
}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-text-main{
font-family:var(--font-heading);font-size:1.3rem;
color:var(--yellow-1);letter-spacing:3px;font-weight:bold;
line-height:1.1;
}
.logo-text-sub{
font-family:var(--font-mono);font-size:0.55rem;
color:var(--bone-2);letter-spacing:4px;text-transform:uppercase;
line-height:1.2;
}
.hosted-by{
display:flex;align-items:center;gap:8px;
color:var(--bone-2);
white-space:nowrap;
transform:translateY(1px);
}
.hosted-by-logo{
width:28px;
height:28px;
border-radius:50%;
display:block;
flex-shrink:0;
border:1px solid rgba(200,192,176,0.35);
}
.hosted-by-text{
display:flex;
flex-direction:column;
line-height:1;
}
.hosted-by-main{
font-family:var(--font-heading);
font-size:1.3rem;
font-weight:bold;
letter-spacing:3px;
color:var(--yellow-1);
line-height:1.1;
}
.hosted-by-sub{
font-family:var(--font-mono);
font-size:0.55rem;
letter-spacing:4px;
text-transform:uppercase;
color:var(--bone-1);
line-height:1.2;
margin-top:1px;
}
.hosted-by-link{
text-decoration:none;
border-bottom:1px dotted rgba(184,150,11,0.55);
}
.hosted-by-link:hover .hosted-by-main{color:#d4b52a;}

.hamburger{
display:none;flex-direction:column;gap:4px;cursor:pointer;
background:none;border:none;padding:8px;
}
.hamburger span{
display:block;width:22px;height:2px;background:var(--bone-1);
transition:all 0.3s;
}
.mobile-menu{
position:fixed;top:0;right:-300px;width:280px;height:100vh;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px),
linear-gradient(180deg, var(--concrete-4) 0%, #100e0c 100%);
background-size:4px 4px, 100% 100%;
border-left:2px solid var(--slab-light);
z-index:10001;transition:right 0.35s ease;
padding:80px 30px 30px;
display:flex;flex-direction:column;gap:24px;
}
.mobile-menu.open{right:0;}
.mobile-menu a{
font-family:var(--font-mono);font-size:0.85rem;color:var(--bone-1);
text-decoration:none;letter-spacing:2px;text-transform:uppercase;
display:block;padding:10px 0;border-bottom:1px solid rgba(107,68,35,0.3);
}
.mobile-menu a:hover{
color:var(--yellow-1);
border-bottom-color:rgba(184,150,11,0.55);
}
.mobile-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.7);z-index:10000;
display:none;
}
.mobile-overlay.open{display:block;}

/* ========== HERO ========== */
.hero{
position:relative;min-height:100svh;display:flex;flex-direction:column;
align-items:center;justify-content:flex-start;text-align:center;
padding:70px 24px 40px;
box-sizing:border-box;
background:
radial-gradient(ellipse at 30% 40%, rgba(40,35,30,0.3) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, rgba(50,45,38,0.2) 0%, transparent 45%),
radial-gradient(ellipse at 50% 80%, rgba(107,68,35,0.05) 0%, transparent 40%),
linear-gradient(180deg, var(--bg-deep) 0%, #110e0b 50%, var(--bg-deep) 100%);
z-index:1;
}
.hero.concrete-grain::before{opacity:0.4;}
.hero-fade{
position:absolute;bottom:0;left:0;width:100%;height:120px;
background:linear-gradient(to bottom, transparent, var(--bg-deep));
z-index:2;pointer-events:none;
}
.hero-content{
position:relative;z-index:3;
display:flex;flex-direction:column;align-items:center;
width:100%;max-width:1100px;margin:0 auto;
flex:1 1 auto;min-height:0;max-height:calc(100svh - 110px);
justify-content:flex-start;
container-type:inline-size;
container-name:hero;
}
.hero-head{
flex:0 0 auto;width:100%;
}
.hero-video-slot{
position:relative;
flex:0 1 auto;
align-self:center;
width:min(100%,900px);
max-width:calc(100% - 8px);
aspect-ratio:16/9;
height:auto;
max-height:min(52svh,54vh,520px);
margin:8px auto 12px;
border-radius:10px;
background:#000;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
overflow:hidden;
contain:layout style;
}
.hero-intro-stack{
position:relative;
width:100%;
height:100%;
min-height:0;
border-radius:inherit;
background:#000;
}
.hero-intro-layer{
position:absolute;
inset:0;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
object-position:center center;
border-radius:inherit;
display:block;
opacity:0;
transition:opacity 0.55s ease;
pointer-events:none;
z-index:0;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
#hero-intro-video{
background:#000;
}
.hero-intro-layer.is-active{
opacity:1;z-index:1;pointer-events:auto;
}
.hero-intro-layer.is-instant-off{
opacity:0!important;transition:none!important;
pointer-events:none;z-index:0!important;
}
.hero-intro-stack.is-retired{
opacity:0!important;pointer-events:none;
transition:opacity 1s ease;
}
.hero-intro-atmosphere{
position:absolute;inset:0;border-radius:10px;overflow:hidden;
opacity:0;pointer-events:none;z-index:0;
transition:opacity 1s ease;
}
.hero-intro-atmosphere.is-active{
opacity:1;z-index:1;pointer-events:auto;
}
.hero-breath-stage{
position:absolute;
inset:0;
transform:none;
will-change:opacity;
}
.hero-breath-under,.hero-breath-over{
position:absolute;
inset:0;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
object-position:center center;
display:block;
will-change:opacity,filter;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
.hero-breath-under{
z-index:0;
animation:heroBreathGhost 14s ease-in-out infinite;
}
.hero-breath-over{
z-index:1;
animation:heroEndLive 7s ease-in-out infinite,heroBreathSwap 14s ease-in-out infinite;
}
.hero-intro-atmosphere.is-active .hero-breath-stage{
animation:none;
}
.hero-fx-red-pulse{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(ellipse 50% 45% at 14% 18%,rgba(220,45,40,0.45) 0%,transparent 62%),
radial-gradient(ellipse 80% 70% at 50% 50%,rgba(180,20,20,0.08) 0%,transparent 70%);
mix-blend-mode:screen;
animation:heroRedWash 6s ease-in-out infinite;
}
.hero-fx-red-pulse::after{
content:"";position:absolute;left:7%;top:7%;
width:clamp(28px,9vw,56px);height:clamp(28px,9vw,56px);
border-radius:50%;
background:radial-gradient(circle,rgba(255,70,55,0.95) 0%,rgba(200,30,25,0.35) 45%,transparent 72%);
filter:blur(3px);
box-shadow:0 0 28px 8px rgba(255,50,40,0.55),0 0 60px 20px rgba(180,20,20,0.25);
animation:heroLampFlicker 2.8s linear infinite;
}
.hero-fx-vignette{
position:absolute;inset:0;z-index:3;pointer-events:none;
box-shadow:inset 0 0 90px 20px rgba(0,0,0,0.55);
animation:heroVignettePulse 11s ease-in-out infinite;
}
.hero-fx-grain{
position:absolute;inset:0;z-index:4;pointer-events:none;
overflow:hidden;opacity:1;
}
.hero-fx-grain::before{
content:"";position:absolute;inset:-70%;width:240%;height:240%;
opacity:0.2;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:heroGrainDrift 0.55s steps(3) infinite;
mix-blend-mode:overlay;
}
.hero-fx-scan{
position:absolute;inset:0;z-index:5;pointer-events:none;
opacity:0.1;
background:repeating-linear-gradient(0deg,rgba(255,255,255,0.05) 0px,rgba(255,255,255,0.05) 1px,transparent 1px,transparent 3px);
mix-blend-mode:overlay;
animation:heroScanDrift 8s linear infinite;
}
.hero-fx-shimmer{
position:absolute;inset:0;z-index:6;pointer-events:none;
background:linear-gradient(108deg,transparent 38%,rgba(255,210,190,0.14) 48%,rgba(255,80,60,0.06) 52%,transparent 62%);
background-size:220% 100%;
mix-blend-mode:screen;
animation:heroShimmerSweep 6.5s ease-in-out infinite;
}
@keyframes heroBreathGhost{
0%,100%{opacity:0.18;filter:brightness(0.88) contrast(1.08) saturate(0.95);}
50%{opacity:0.48;filter:brightness(1.22) contrast(1.1) saturate(1.05);}
}
@keyframes heroEndLive{
0%,100%{filter:brightness(0.94) contrast(1.04) saturate(1.02);}
50%{filter:brightness(1.12) contrast(1.08) saturate(1.08);}
}
@keyframes heroBreathSwap{
0%,38%,100%{opacity:1;}
48%,52%{opacity:0.72;}
}
@keyframes heroRedWash{
0%,100%{opacity:0.65;}
50%{opacity:1;}
}
@keyframes heroLampFlicker{
0%,88%,100%{opacity:1;transform:scale(1);}
89%{opacity:0.45;transform:scale(0.96);}
90%{opacity:1;transform:scale(1.02);}
92%{opacity:0.6;transform:scale(0.98);}
94%{opacity:0.95;}
}
@keyframes heroVignettePulse{
0%,100%{opacity:0.75;}
50%{opacity:1;}
}
@keyframes heroGrainDrift{
0%{transform:translate(0,0);}
100%{transform:translate(-3%,-2%);}
}
@keyframes heroScanDrift{
0%{transform:translateY(0);}
100%{transform:translateY(8%);}
}
@keyframes heroShimmerSweep{
0%{background-position:200% 0;opacity:0;}
18%{opacity:1;}
55%{background-position:-40% 0;opacity:0.85;}
100%{background-position:-120% 0;opacity:0;}
}
@media (prefers-reduced-motion:reduce){
.hero-breath-stage{animation:none;}
.hero-breath-under{animation:none;opacity:0;filter:none;transform:none;}
.hero-breath-over{animation:none;opacity:1;filter:none;transform:none;}
.hero-fx-red-pulse{animation:none;}
.hero-fx-red-pulse::after{animation:none;opacity:0.7;}
.hero-fx-vignette{animation:none;}
.hero-fx-grain::before{animation:none;opacity:0.08;}
.hero-fx-scan{animation:none;}
.hero-fx-shimmer{animation:none;opacity:0;}
.hero-intro-atmosphere.is-active .hero-breath-stage{animation:none;}
.hero-intro-layer,.hero-breath-under,.hero-breath-over{
transform:none!important;
}
}
.hero-video-mute{
position:absolute;right:10px;bottom:10px;z-index:12;
width:40px;height:40px;padding:0;border-radius:50%;
border:1px solid rgba(184,150,11,0.4);
background:rgba(8,6,4,0.75);color:var(--bone-1);
cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 12px rgba(0,0,0,0.55);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:background 0.2s,border-color 0.2s,transform 0.15s,color 0.2s;
}
.hero-video-mute:hover,.hero-video-mute:focus-visible{
background:rgba(20,14,10,0.92);
border-color:var(--yellow-1);
color:var(--yellow-1);
outline:2px solid rgba(184,150,11,0.35);
outline-offset:2px;
transform:scale(1.05);
}
.hero-video-mute svg{
width:22px;height:22px;fill:none;stroke:currentColor;
stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
pointer-events:none;flex-shrink:0;
}
.hero-video-mute .icon-unmute .mute-slash{
stroke:#c41e3a;
}
.hero-video-mute .icon-mute{display:none;}
.hero-video-mute.is-unmuted .icon-unmute{display:none;}
.hero-video-mute.is-unmuted .icon-mute{display:block;}
.hero-video-mute.is-hidden{
display:none!important;
pointer-events:none;
}
.hero-video-replay{
position:absolute;left:12px;bottom:12px;z-index:12;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;padding:10px 18px 10px 14px;border-radius:999px;
border:2px solid rgba(212,148,10,0.75);
background:linear-gradient(180deg,rgba(28,20,8,0.95) 0%,rgba(8,6,4,0.92) 100%);
color:#f5efe0;
font-family:var(--font-mono);
font-size:0.72rem;font-weight:700;
letter-spacing:0.16em;text-transform:uppercase;
line-height:1;cursor:pointer;
box-shadow:0 4px 18px rgba(0,0,0,0.65),0 0 0 1px rgba(0,0,0,0.4) inset;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:background 0.2s,border-color 0.2s,transform 0.15s,color 0.2s,box-shadow 0.2s,opacity 0.35s ease;
}
.hero-video-replay-label{
pointer-events:none;white-space:nowrap;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.hero-video-replay svg{
width:20px;height:20px;flex-shrink:0;
fill:none;stroke:#d4940a;
stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;
pointer-events:none;
filter:drop-shadow(0 0 4px rgba(212,148,10,0.45));
}
.hero-video-replay:hover,.hero-video-replay:focus-visible{
background:linear-gradient(180deg,rgba(212,148,10,0.35) 0%,rgba(20,14,8,0.95) 100%);
border-color:#e8c04a;
color:#fff;
outline:2px solid rgba(232,192,74,0.45);
outline-offset:2px;
transform:translateY(-1px);
box-shadow:0 6px 22px rgba(0,0,0,0.7),0 0 20px rgba(212,148,10,0.25);
}
.hero-video-replay:hover svg,.hero-video-replay:focus-visible svg{
stroke:#ffe08a;
}
.hero-video-replay.is-hidden{
display:none!important;
pointer-events:none;
}
@media(max-width:500px){
.hero-video-replay{
left:8px;bottom:8px;
min-height:40px;padding:8px 14px 8px 12px;
font-size:0.65rem;gap:6px;
}
.hero-video-replay svg{width:18px;height:18px;}
}
.hero-video-placeholder{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;padding:28px 20px;text-align:center;width:100%;height:100%;
min-height:inherit;box-sizing:border-box;
}
.hero-video-placeholder-icon{
font-size:clamp(1.6rem,4vw,2.4rem);color:var(--yellow-1);opacity:0.35;line-height:1;
letter-spacing:0;user-select:none;
}
.hero-video-placeholder-text{
font-family:var(--font-mono);font-size:clamp(0.85rem,2.2vw,1.05rem);
letter-spacing:0.18em;color:var(--bone-2);
max-width:28em;line-height:1.5;
}
.hero-cta-block{
flex:0 0 auto;width:100%;max-width:100%;
box-sizing:border-box;
padding-inline:clamp(4px,2vw,20px);
padding-bottom:4px;
scroll-margin-bottom:24px;
}
.hero-presents{
font-family:var(--font-heading);font-size:clamp(1.35rem,2.8vw,2.25rem);
font-size:clamp(1.35rem,4.5cqi,2.25rem);
color:var(--yellow-1);letter-spacing:clamp(4px,1.2cqi,10px);
text-transform:uppercase;margin-bottom:10px;
text-shadow:0 0 20px rgba(184,150,11,0.15);
}
.hero-head .hero-presents{margin-bottom:8px;}
.hero-title{
font-family:var(--font-heading);
font-size:clamp(3rem,5vw,6.25rem);
font-size:clamp(3rem,14cqi,6.25rem);
color:var(--bone-1);letter-spacing:clamp(4px,1.5cqi,10px);
line-height:0.95;margin-bottom:0;
text-transform:uppercase;
}
.hero-head .hero-title{margin-bottom:0;}
.hero-unofficial-sponsor{
margin:12px auto 16px;
width:fit-content;
max-width:100%;
text-align:center;
padding:8px 12px 7px;
border:1px solid rgba(255,255,255,0.1);
border-radius:6px;
background:rgba(0,0,0,0.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.hero-unofficial-sponsor-line{
display:block;
font-family:var(--font-heading);
font-size:clamp(0.62rem,2cqi,0.82rem);
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--bone-2);
line-height:1.45;
}
.hero-unofficial-sponsor-label{
display:inline;
color:var(--yellow-1);
margin-right:0.45em;
}
.hero-unofficial-sponsor-pref{
display:inline;
font-family:var(--font-body);
font-size:1.05em;
letter-spacing:0.05em;
text-transform:none;
font-style:italic;
opacity:0.8;
margin-right:0.45em;
}
.hero-unofficial-sponsor-brand{
display:inline;
font-size:1.2em;
letter-spacing:0.24em;
color:var(--bone-1);
}
.hero-unofficial-sponsor-disclaimer{
display:block;
margin-top:8px;
font-family:var(--font-body);
font-size:clamp(0.42rem,1.35cqi,0.66rem);
line-height:1.35;
letter-spacing:0;
text-transform:none;
color:var(--bone-2);
opacity:0.52;
white-space:nowrap;
}
.hero-tagline{
font-family:var(--font-body);font-size:clamp(0.72rem,2.1vw,1.2rem);
color:var(--bone-2);max-width:min(38rem,100%);width:100%;margin:0 auto 16px;
line-height:1.45;text-align:center;
white-space:normal;
overflow-wrap:break-word;
text-wrap:balance;
}
.hero-sub{
font-family:var(--font-body);font-size:1.05rem;
color:var(--bone-2);opacity:0.7;max-width:600px;margin:0 auto 20px;
}
.hero-cta-block .cta-btn{margin-top:2px;white-space:normal;max-width:min(100%,34rem);line-height:1.25;letter-spacing:0.14em;padding:16px 24px;box-sizing:border-box;}
a.cta-btn:visited{color:var(--bone-1);}
.cta-btn{
display:inline-block;
font-family:var(--font-heading);font-size:1.15rem;
color:var(--bone-1);letter-spacing:4px;text-transform:uppercase;
background:linear-gradient(180deg, var(--blood-2) 0%, var(--blood-3) 100%);
border:1px solid var(--corrosion-1);
padding:18px 50px;text-decoration:none;
clip-path:polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
transition:background 0.3s, transform 0.3s;
cursor:pointer;
}
.cta-btn:hover{
background:linear-gradient(180deg, #7a0000 0%, #4a0000 100%);
transform:scale(1.03);
}
.contact-wrap{
max-width:760px;
margin:20px auto 0;
text-align:left;
}
.contact-note{
font-family:var(--font-body);
font-size:0.92rem;
color:var(--bone-2);
margin:8px auto 16px;
text-align:center;
}
.contact-note a{
color:var(--yellow-1);
text-decoration:none;
border-bottom:1px dotted rgba(184,150,11,0.55);
}
.contact-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
position:relative;
}
.contact-form-hp{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
.contact-consent{margin-top:4px;}
.contact-form label.contact-check,
.contact-check{
display:flex;
flex-direction:row;
align-items:flex-start;
justify-content:flex-start;
gap:10px;
font-family:var(--font-body);
font-size:0.88rem;
color:var(--bone-2);
line-height:1.45;
cursor:pointer;
text-transform:none;
letter-spacing:normal;
margin-bottom:0;
}
.contact-check input{margin:3px 0 0;flex:0 0 auto;order:0;}
.contact-form .contact-check input[type="checkbox"],
.contact-check input[type="checkbox"]{
width:auto;
min-width:1rem;
max-width:none;
flex:0 0 auto;
padding:0;
background:transparent;
border:none;
box-shadow:none;
accent-color:var(--yellow-1);
}
.contact-check span{order:1;flex:1 1 auto;min-width:0;}
.contact-check a{color:var(--yellow-1);}
.contact-form .full{grid-column:1 / -1;}
.contact-form label{
display:block;
font-family:var(--font-mono);
font-size:0.68rem;
letter-spacing:1.8px;
text-transform:uppercase;
color:var(--bone-2);
margin-bottom:6px;
}
.contact-form input,
.contact-form textarea{
width:100%;
background:rgba(0,0,0,0.35);
border:1px solid rgba(90,58,26,0.6);
color:var(--bone-1);
font-family:var(--font-body);
font-size:1rem;
padding:10px 12px;
outline:none;
}
.contact-form textarea{
resize:vertical;
min-height:120px;
}
.contact-form input:focus,
.contact-form textarea:focus{
border-color:var(--yellow-1);
box-shadow:0 0 0 1px rgba(184,150,11,0.25);
}
.contact-submit{
font-family:var(--font-heading);
font-size:1rem;
letter-spacing:2px;
text-transform:uppercase;
background:linear-gradient(180deg, var(--blood-2) 0%, var(--blood-3) 100%);
color:var(--bone-1);
border:1px solid var(--corrosion-1);
padding:12px 18px;
cursor:pointer;
width:100%;
}
.contact-submit:disabled{opacity:0.65;cursor:not-allowed;}
.contact-status{
margin-top:10px;
min-height:1.2em;
font-family:var(--font-body);
font-size:0.9rem;
color:var(--bone-2);
}
.hero-anim{
animation:fadeInUp 1.5s ease-out both;
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}
}

/* ========== SECTIONS ========== */
.section{
position:relative;z-index:1;
padding:90px 30px;
}
.section-inner{
max-width:1100px;margin:0 auto;position:relative;z-index:2;
}
.section-label{
font-family:var(--font-mono);font-size:0.7rem;
color:var(--amber);letter-spacing:6px;text-transform:uppercase;
margin-bottom:14px;
}
.section-title{
font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.2rem);
color:var(--bone-1);letter-spacing:5px;margin-bottom:40px;
text-transform:uppercase;
}

/* ========== SECTION SLAB ROTATIONS ========== */
.section-about{
transform:rotate(-0.3deg);
box-shadow:6px 8px 30px rgba(0,0,0,0.6);
}
.section-features{
transform:rotate(0.2deg);
box-shadow:4px 6px 25px rgba(0,0,0,0.5);
}
.section-cta{
transform:rotate(-0.15deg);
box-shadow:5px 7px 28px rgba(0,0,0,0.55);
}

/* ========== ABOUT GRID ========== */
.about-grid{
display:grid;grid-template-columns:1fr 1fr;gap:50px;
align-items:start;
}
.about-text p{
font-family:var(--font-body);font-size:1.05rem;
color:var(--bone-1);line-height:1.9;margin-bottom:22px;
}

/* ========== DOSSIER BOX ========== */
.dossier-box{
background:
radial-gradient(ellipse at 30% 40%, rgba(40,35,30,0.4) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(107,68,35,0.06) 0%, transparent 40%),
#0a0908;
border:2px solid var(--rust-3);
box-shadow:inset 0 0 0 1px rgba(90,58,26,0.3), inset 0 2px 6px rgba(0,0,0,0.5);
overflow:hidden;
transform:rotate(0.4deg);
}
.dossier-header{
background:
radial-gradient(circle at 12px 50%, rgba(58,53,48,0.6) 0%, rgba(58,53,48,0.6) 3px, transparent 3.5px),
radial-gradient(circle at calc(100% - 12px) 50%, rgba(58,53,48,0.6) 0%, rgba(58,53,48,0.6) 3px, transparent 3.5px),
linear-gradient(180deg, #2e2924, var(--washer));
padding:10px 18px;
font-family:var(--font-mono);font-size:0.75rem;
color:var(--amber);letter-spacing:3px;text-transform:uppercase;
border-bottom:1px solid var(--corrosion-2);
display:flex;
align-items:center;
justify-content:space-between;
}
.dossier-header-note{
font-size:0.62rem;
letter-spacing:2px;
color:rgba(200,192,176,0.75);
}
.dossier-content{
padding:22px 18px;
}
.dossier-content p{
font-family:var(--font-mono);font-size:0.82rem;
color:var(--amber);line-height:2;margin:0;
}
.redacted{
display:inline-block;
padding:0 4px;
background:#0a0a0a;
color:#0a0a0a;
text-shadow:none;
letter-spacing:1px;
position:relative;
transform:skewX(-3deg) scaleY(0.86);
}
.redacted::after{
content:'';
position:absolute;
inset:0;
background:repeating-linear-gradient(
  90deg,
  rgba(255,255,255,0.02) 0px,
  rgba(255,255,255,0.02) 2px,
  rgba(0,0,0,0) 2px,
  rgba(0,0,0,0) 5px
);
pointer-events:none;
}
.blink-cursor{
display:inline-block;width:8px;height:14px;
background:var(--amber);vertical-align:middle;
margin-left:4px;
animation:cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink{
0%,100%{opacity:1;}50%{opacity:0;}
}

/* ========== FEATURES GRID ========== */
.features-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:15px;
}

/* ========== FEATURE CARD — CONCRETE SLAB ========== */
.feature-card{
position:relative;
background:
radial-gradient(ellipse at 25% 35%, rgba(40,35,30,0.5) 0%, transparent 50%),
radial-gradient(ellipse at 75% 70%, rgba(50,45,38,0.3) 0%, transparent 45%),
radial-gradient(ellipse at 60% 20%, rgba(107,68,35,0.08) 0%, transparent 40%),
linear-gradient(160deg, var(--concrete-1) 0%, var(--concrete-2) 40%, var(--concrete-3) 70%, var(--concrete-1) 100%);
border-left:2px solid var(--slab-light);
border-bottom:2px solid var(--slab-dark);
border-right:1px solid rgba(10,9,8,0.8);
border-top:1px solid rgba(42,39,37,0.4);
padding:35px 25px;
transition:transform 0.3s, box-shadow 0.3s;
overflow:hidden;
}
/* Individual card rotations and shadows */
.feature-card:nth-child(1){transform:rotate(-0.8deg);box-shadow:4px 6px 20px rgba(0,0,0,0.7);}
.feature-card:nth-child(2){transform:rotate(0.5deg);box-shadow:2px 3px 12px rgba(0,0,0,0.5);}
.feature-card:nth-child(3){transform:rotate(-0.3deg);box-shadow:4px 6px 20px rgba(0,0,0,0.7);}
.feature-card:nth-child(4){transform:rotate(0.6deg);box-shadow:2px 3px 12px rgba(0,0,0,0.5);}
.feature-card:nth-child(5){transform:rotate(-0.5deg);box-shadow:4px 6px 20px rgba(0,0,0,0.7);}
.feature-card:nth-child(6){transform:rotate(0.4deg);box-shadow:2px 3px 12px rgba(0,0,0,0.5);}

/* Vary concrete textures per card */
.feature-card:nth-child(2){
background:
radial-gradient(ellipse at 70% 25%, rgba(50,45,38,0.4) 0%, transparent 45%),
radial-gradient(ellipse at 20% 75%, rgba(40,35,30,0.35) 0%, transparent 50%),
radial-gradient(ellipse at 85% 80%, rgba(107,68,35,0.07) 0%, transparent 38%),
linear-gradient(160deg, var(--concrete-2) 0%, var(--concrete-1) 40%, var(--concrete-3) 70%, var(--concrete-2) 100%);
}
.feature-card:nth-child(3){
background:
radial-gradient(ellipse at 50% 15%, rgba(45,40,34,0.45) 0%, transparent 48%),
radial-gradient(ellipse at 30% 85%, rgba(50,45,38,0.3) 0%, transparent 42%),
radial-gradient(ellipse at 10% 50%, rgba(107,68,35,0.09) 0%, transparent 35%),
linear-gradient(160deg, var(--concrete-3) 0%, var(--concrete-1) 50%, var(--concrete-2) 100%);
}
.feature-card:nth-child(4){
background:
radial-gradient(ellipse at 10% 50%, rgba(40,35,30,0.5) 0%, transparent 48%),
radial-gradient(ellipse at 90% 40%, rgba(50,45,38,0.3) 0%, transparent 40%),
radial-gradient(ellipse at 50% 90%, rgba(107,68,35,0.07) 0%, transparent 42%),
linear-gradient(160deg, var(--concrete-1) 0%, var(--concrete-3) 50%, var(--concrete-2) 100%);
}
.feature-card:nth-child(5){
background:
radial-gradient(ellipse at 60% 80%, rgba(45,40,34,0.4) 0%, transparent 45%),
radial-gradient(ellipse at 25% 20%, rgba(50,45,38,0.35) 0%, transparent 42%),
radial-gradient(ellipse at 80% 50%, rgba(107,68,35,0.08) 0%, transparent 38%),
linear-gradient(160deg, var(--concrete-2) 0%, var(--concrete-3) 40%, var(--concrete-1) 100%);
}
.feature-card:nth-child(6){
background:
radial-gradient(ellipse at 40% 40%, rgba(40,35,30,0.45) 0%, transparent 50%),
radial-gradient(ellipse at 75% 65%, rgba(50,45,38,0.3) 0%, transparent 45%),
radial-gradient(ellipse at 20% 90%, rgba(107,68,35,0.08) 0%, transparent 40%),
linear-gradient(160deg, var(--concrete-3) 0%, var(--concrete-2) 50%, var(--concrete-1) 100%);
}
.feature-card:nth-child(7){
background:
radial-gradient(ellipse at 55% 30%, rgba(45,40,34,0.5) 0%, transparent 48%),
radial-gradient(ellipse at 15% 65%, rgba(50,45,38,0.35) 0%, transparent 42%),
radial-gradient(ellipse at 75% 85%, rgba(107,68,35,0.07) 0%, transparent 38%),
linear-gradient(160deg, var(--concrete-1) 0%, var(--concrete-2) 45%, var(--concrete-3) 100%);
}
.feature-card:nth-child(8){
background:
radial-gradient(ellipse at 35% 70%, rgba(40,35,30,0.45) 0%, transparent 48%),
radial-gradient(ellipse at 80% 25%, rgba(50,45,38,0.3) 0%, transparent 42%),
radial-gradient(ellipse at 50% 50%, rgba(107,68,35,0.09) 0%, transparent 40%),
linear-gradient(160deg, var(--concrete-2) 0%, var(--concrete-1) 45%, var(--concrete-3) 100%);
}

.feature-card.concrete-grain::before{opacity:0.6;z-index:0;}
/* Hover: lift, increase shadow, halve rotation */
.feature-card:nth-child(1):hover{transform:rotate(-0.4deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(2):hover{transform:rotate(0.25deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(3):hover{transform:rotate(-0.15deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(4):hover{transform:rotate(0.3deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(5):hover{transform:rotate(-0.25deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(6):hover{transform:rotate(0.2deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(7){transform:rotate(-0.6deg);box-shadow:4px 6px 20px rgba(0,0,0,0.7);}
.feature-card:nth-child(8){transform:rotate(0.35deg);box-shadow:2px 3px 12px rgba(0,0,0,0.5);}
.feature-card:nth-child(7):hover{transform:rotate(-0.3deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}
.feature-card:nth-child(8):hover{transform:rotate(0.18deg) translateY(-6px);box-shadow:8px 12px 30px rgba(0,0,0,0.8);}

.feature-card .anchor{z-index:2;}
.card-symbol{
font-size:2.2rem;color:var(--yellow-2);margin-bottom:16px;
line-height:1;position:relative;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;
background:radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(26,22,20,0.5) 60%, transparent 75%);
border-radius:6px;
box-shadow:inset 0 1px 4px rgba(0,0,0,0.5);
}
.card-title{
font-family:var(--font-heading);font-size:1.3rem;
color:var(--yellow-1);letter-spacing:3px;margin-bottom:14px;
text-transform:uppercase;position:relative;z-index:2;
}
.card-desc{
font-family:var(--font-body);font-size:0.92rem;
color:var(--bone-2);line-height:1.8;position:relative;z-index:2;
}

/* ========== CTA SECTION ========== */
.cta-section{
text-align:center;
background:
radial-gradient(ellipse at 50% 50%, rgba(90,0,0,0.06) 0%, transparent 60%),
radial-gradient(ellipse at 30% 70%, rgba(40,35,30,0.4) 0%, transparent 45%),
radial-gradient(ellipse at 70% 30%, rgba(50,45,38,0.3) 0%, transparent 40%),
radial-gradient(ellipse at 60% 80%, rgba(107,68,35,0.06) 0%, transparent 35%),
linear-gradient(160deg, var(--concrete-1) 0%, var(--concrete-2) 50%, var(--concrete-1) 100%);
padding:100px 30px;
position:relative;z-index:1;
border-left:2px solid var(--slab-light);
border-bottom:2px solid var(--slab-dark);
border-right:1px solid rgba(10,9,8,0.8);
border-top:1px solid rgba(42,39,37,0.4);
}
.cta-section .section-label{margin-bottom:14px;}
.cta-section .section-title{margin-bottom:20px;}
.cta-subtext{
font-family:var(--font-body);font-size:1.05rem;
color:var(--bone-2);max-width:550px;margin:0 auto 40px;
}
.cta-large{
font-size:1.5rem;padding:22px 65px;
animation:breathe 3s ease-in-out infinite;
}
@keyframes breathe{
0%,100%{opacity:0.85;}50%{opacity:1;}
}

/* ========== FOOTER ========== */
.footer{
position:relative;z-index:1;
background:
repeating-radial-gradient(circle, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 40% 60%, rgba(200,190,170,0.015) 0px, rgba(200,190,170,0.015) 1px, transparent 1px, transparent 6px),
radial-gradient(ellipse at 50% 80%, rgba(40,35,30,0.3) 0%, transparent 50%),
linear-gradient(160deg, rgba(10,9,8,0.9) 0%, var(--slab-dark) 50%, rgba(10,9,8,0.9) 100%),
var(--slab-dark);
background-size:4px 4px, 6px 6px, 100% 100%, 100% 100%, 100% 100%;
border-top:2px solid var(--concrete-1);
box-shadow:inset 0 2px 6px rgba(0,0,0,0.4);
padding:35px 30px 25px;text-align:center;
}
.footer-rivets{
position:absolute;top:2px;left:0;width:100%;height:4px;
background:repeating-radial-gradient(circle, #3a3530 1px, transparent 1.5px);
background-size:12px 12px;opacity:0.5;
}
.footer-copy{
font-family:var(--font-mono);font-size:0.75rem;
color:var(--bone-2);letter-spacing:2px;margin-bottom:8px;
opacity:0.92;
}
.footer-warn{
font-family:var(--font-mono);font-size:0.65rem;
color:rgba(200,192,176,0.72);letter-spacing:1px;
}
.footer-brand-note{
font-family:var(--font-mono);font-size:0.68rem;letter-spacing:1px;
color:var(--bone-2);opacity:0.9;max-width:40rem;margin:0 auto 10px;line-height:1.55;
}
.section-company .company-lead{max-width:42rem;margin:0 auto 16px;text-align:center;}
.section-company .company-links{
font-family:var(--font-mono);font-size:0.75rem;letter-spacing:2px;text-align:center;margin-top:18px;
}
.section-company .company-links a{color:var(--yellow-1);text-decoration:none;margin:0 10px;}
.section-company .company-links a:hover{text-decoration:underline;}
.section-company .company-note{
font-family:var(--font-mono);font-size:0.68rem;color:var(--bone-2);text-align:center;
margin-top:14px;max-width:36rem;margin-left:auto;margin-right:auto;line-height:1.55;
}
.footer-site-nav{
display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;
margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(184,150,11,0.25);
}
.footer-site-nav a{
font-family:var(--font-mono);font-size:0.72rem;letter-spacing:2px;
text-transform:uppercase;text-decoration:none;color:var(--bone-1);
}
.footer-site-nav a:hover{color:var(--yellow-1);}
.footer-links{
display:flex;
justify-content:center;
gap:16px;
margin:10px 0 8px;
}
.footer-links a{
font-family:var(--font-mono);
font-size:0.72rem;
letter-spacing:1.6px;
text-transform:uppercase;
}
.footer a{
color:var(--yellow-1);
text-decoration:none;
border-bottom:1px dotted rgba(184,150,11,0.5);
}
.footer a:visited{
color:var(--yellow-1);
}
.footer a:hover{
color:#d4b52a;
}

@keyframes revealFallback{to{opacity:1;transform:translateY(0);}}
/* ========== REVEAL ========== */
.reveal{
animation:revealFallback 0s 3s forwards;
opacity:0;transform:translateY(30px);
transition:opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible{
opacity:1;transform:translateY(0);
}

/* ========== MOBILE CLOSE BUTTON ========== */
.mobile-close{
position:absolute;top:15px;right:20px;
background:none;border:none;color:var(--bone-1);
font-size:2rem;cursor:pointer;z-index:10002;
}
.mobile-close:hover{color:var(--blood-1);}

/* ========== RESPONSIVE ========== */
@media(orientation:portrait) and (min-width:390px){
.hero-video-slot{
width:min(100%,min(92vw,520px));
max-height:min(42svh,380px);
}
}
/* Short phones only — not iPad landscape (often 768–834px tall) */
@media(max-height:820px) and (max-width:767px){
.hero{padding:64px 20px 32px;}
.hero-content{max-height:calc(100svh - 96px);}
.hero-video-slot{
width:min(100%,820px);
max-height:min(36svh,280px);
margin-bottom:8px;
}
.hero-title{font-size:clamp(2.25rem,11cqi,4rem);}
.hero-presents{margin-bottom:6px;}
.hero-sub{margin-bottom:12px;font-size:0.95rem;}
}
/* iPad / tablet: keep 16:9 video readable (no tiny 280px cap) */
@media(min-width:768px) and (max-width:1100px){
.hero{padding:80px 28px 36px;}
.hero-content{max-height:none;}
.hero-video-slot{
width:min(100%,min(92vw,820px));
max-height:min(44vh,480px);
min-height:min(44vw,280px);
aspect-ratio:16/9;
flex:0 1 auto;
}
.hero-intro-layer,
.hero-breath-under,
.hero-breath-over,
#hero-intro-video{
object-fit:contain!important;
object-position:center center!important;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
}
@media(orientation:portrait) and (min-width:768px) and (max-width:1100px){
.hero-video-slot{
width:min(100%,640px);
max-height:min(40vh,420px);
}
}
@media(min-width:1200px){
.hero-video-slot{
width:min(900px,88vw);
max-height:min(50svh,540px);
}
}
@media(min-width:1600px){
.hero-title{font-size:clamp(3.25rem,11cqi,6rem);}
.hero-video-slot{max-height:min(52svh,560px);}
}
@media(max-width:1100px){
.features-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media(max-width:900px){
.nav:not(.nav--pill-menu) .nav-links{display:none;}
.nav:not(.nav--pill-menu) .hamburger{display:flex;}
.about-grid{grid-template-columns:1fr;gap:30px;}
.hero-title{letter-spacing:5px;}
.cta-btn{padding:16px 35px;font-size:1rem;}
.hero-cta-block .cta-btn{padding:14px 20px;font-size:0.95rem;letter-spacing:0.1em;}
.cta-large{padding:18px 40px;font-size:1.2rem;}
.section{padding:60px 20px;}
}
@media(max-width:768px){
/* Remove rotations on mobile */
.section-about,
.section-features,
.section-cta{transform:none;}
.features-grid{
grid-template-columns:1fr;
gap:14px;
max-width:100%;
}
.feature-card{
display:grid;
grid-template-columns:52px 1fr;
column-gap:16px;
row-gap:6px;
align-items:start;
padding:20px 18px;
}
.feature-card .card-symbol{
grid-column:1;
grid-row:1 / span 2;
margin-bottom:0;
align-self:start;
width:48px;
height:48px;
font-size:1.75rem;
}
.feature-card .card-title{
grid-column:2;
grid-row:1;
margin-bottom:0;
font-size:1.15rem;
letter-spacing:2px;
}
.feature-card .card-desc{
grid-column:2;
grid-row:2;
font-size:0.88rem;
line-height:1.65;
}
.feature-card:nth-child(1),
.feature-card:nth-child(2),
.feature-card:nth-child(3),
.feature-card:nth-child(4),
.feature-card:nth-child(5),
.feature-card:nth-child(6),
.feature-card:nth-child(7),
.feature-card:nth-child(8){transform:none;}
.feature-card:nth-child(1):hover,
.feature-card:nth-child(2):hover,
.feature-card:nth-child(3):hover,
.feature-card:nth-child(4):hover,
.feature-card:nth-child(5):hover,
.feature-card:nth-child(6):hover,
.feature-card:nth-child(7):hover,
.feature-card:nth-child(8):hover{transform:translateY(-4px);}
.dossier-box{transform:none;}
.contact-form{grid-template-columns:1fr;}
}
@media(max-width:1200px){
.hosted-by{
transform:none;
}
.hosted-by-main{
font-size:1rem;
letter-spacing:2px;
}
.hosted-by-sub{
font-size:0.5rem;
letter-spacing:3px;
}
}
@media(max-width:820px){
.nav:not(.nav--pill-menu) .nav-links{display:none;}
.nav:not(.nav--pill-menu) .hamburger{display:flex;}
}
@media(max-width:500px){
.nav-inner{padding:0 16px;}
.hero{padding:88px 18px 56px;}
.hero-video-slot{
width:100%;
max-width:100%;
max-height:min(38svh,300px);
margin:4px auto 10px;
}
.hero-tagline{
font-size:clamp(0.78rem,3.6vw,1.05rem);
line-height:1.5;
max-width:100%;
padding-inline:2px;
}
.hero-sub{font-size:0.95rem;}
.feature-card{padding:18px 16px;}
.feature-card .card-symbol{width:44px;height:44px;font-size:1.55rem;}
.feature-card .card-title{font-size:1.05rem;}
.feature-card .card-desc{font-size:0.84rem;}
.logo-text-main{font-size:1.1rem;letter-spacing:2px;}
.logo-text-sub{font-size:0.5rem;letter-spacing:2px;}
.hosted-by{display:flex;gap:6px;}
.hosted-by-logo{width:22px;height:22px;}
.hosted-by-main{font-size:0.72rem;letter-spacing:1px;}
.hosted-by-sub{font-size:0.42rem;letter-spacing:2px;}
.logo-gear{width:30px;height:30px;}
.logo-gear-circle{top:3px;left:3px;width:24px;height:24px;border-width:2px;}
.logo-gear-teeth1,.logo-gear-teeth2{width:28px;height:28px;}
}

/* iPhone Safari (phones only): no input zoom + stable hero video */
@supports (-webkit-touch-callout: none) {
@media (max-width: 767px) {
input,
textarea,
select,
button{
font-size:16px !important;
}
.hero-video-slot{
max-height:min(40svh,360px);
-webkit-mask-image:-webkit-radial-gradient(white,black);
}
.hero-intro-layer,
.hero-breath-under,
.hero-breath-over{
object-fit:contain!important;
object-position:center center!important;
}
#hero-intro-video{
object-fit:contain!important;
object-position:center center!important;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
.hero-breath-under,
.hero-breath-over{
transform:none!important;
-webkit-transform:none!important;
}
.hero-breath-stage{
transform:none!important;
animation:none!important;
}
}
}