:root{
		--bg:#070708;
		--text:#e9e9ea;
		--muted:rgba(233,233,234,.72);
		--faint:rgba(233,233,234,.48);
		--line:rgba(233,233,234,.35);
		--lineHover:rgba(233,233,234,.9);
		--sans:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	*{ box-sizing:border-box; }
	html, body{
		height:100%;
		margin:0;
		background:var(--bg);
		color:var(--text);
		font-family:var(--sans);

	}
img {
    max-width: 100%;
}
	/* No scrollbar (even if something accidentally overflows) */
	html, body{ overflow:hidden; }

	/* Centered layout that adapts to any screen */
	.page{
		height:100vh;
		height:100svh; /* modern mobile safe viewport */
		display:flex;
		align-items:center;
		justify-content:center;
		padding: clamp(18px, 4vw, 44px);
/*        background: rgba(0, 0, 0, .5);*/
        z-index: 1;
        position: relative;
	}
/* Background image layer (behind everything) */
.bg{
	position: fixed;
	inset: 0;
	z-index: 0;
	background: url("../images/bg.jpg") center center / cover no-repeat;
    opacity: 0.5;
	transform-origin: center;
	animation: slowZoom 5s ease-in-out infinite;
	filter: brightness(.55) contrast(1.05);
}

.production {
    margin: 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #959492;
}

.press {
    margin: 4rem 0;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    opacity: 0.7;
}
.press ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;      /* 🔥 vertical alignment */
    justify-content: center;  /* horizontal centering */
    gap: 16px;                /* spacing between logos */
    flex-wrap: wrap;          /* responsive */
}
.press ul li {
    display: inline-block;
    width: 15%;
    align-items: center;      /* ensures img centers inside */
}
.press ul li img {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.press ul li img {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.press ul li img:hover {
    opacity: 1;
}
/* Slow push-in, then return */
@keyframes slowZoom{
	0%   { transform: scale(1) translate3d(0,0,0); }
	50%  { transform: scale(1.03) translate3d(0,-0.8%,0); }
	100% { transform: scale(1) translate3d(0,0,0); }
}
	.inner{
		width:min(760px, 100%);
		text-align:center;
	}

	h1{
		margin:0;
		font-weight:500;
		letter-spacing:.06em;
		text-transform:uppercase;
		font-size: clamp(34px, 6vw, 64px);
		line-height:1.02;
	}
    .logo {
        max-width: 100%;
    }

	.tagline{
		margin-top: clamp(10px, 2.2vw, 16px);
		font-size: clamp(14px, 2vw, 16px);
		color:var(--muted);
		letter-spacing:.02em;
	}

	.logline{
		margin: clamp(16px, 3vw, 28px) auto 0;
		max-width: 62ch;
		font-size: clamp(15px, 2.2vw, 18px);
		line-height:1.55;
		color: rgba(233,233,234,.84);
	}

	.actions{
		margin-top: clamp(18px, 4vw, 34px);
		display:flex;
		gap: 18px;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
	}

	.action{
		text-decoration:none;
		color: var(--text);
		font-size: 12px;
		letter-spacing: .14em;
		text-transform: uppercase;
		padding-bottom: 5px;
		border-bottom: 1px solid var(--line);
            transition: .2s all;
	}

	.action:hover{ border-bottom-color: var(--lineHover); }

	/* Bottom footer pinned inside viewport */
		.footer{
		position:fixed;
		left:0;
		right:0;
		bottom: 18px;
		padding: 0 18px;
		display:flex;
		justify-content:space-between;
		align-items:center;
		gap: 12px;
		font-size: 11px;
		letter-spacing:.08em;
            z-index: 2;
		text-transform:uppercase;
		color: var(--faint);
		pointer-events:none; /* prevents accidental scroll focus on mobile */
	}

	.footer a{
		pointer-events:auto;
		/*color: var(--faint);*/
		text-decoration:none;
		border-bottom: 1px solid rgba(233,233,234,.22);
		padding-bottom: 2px;
            transition: .2s all;
	}

	.footer a:hover{
		color: var(--text);
		border-bottom-color: var(--lineHover);
	}

	/* Mobile: stack footer */
	@media (max-width: 520px){
		.footer{
			flex-direction:column;
			bottom: 14px;
		}
	}

	/* Glitch overlay (normally off) */
#glitchCanvas{
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	opacity: 0;
	z-index: 9999;
	mix-blend-mode: screen;
}

/* Micro “text split” during glitch */
body.is-glitching .inner{
	filter:
		drop-shadow(2px 0 rgba(255,0,0,.35))
		drop-shadow(-2px 0 rgba(0,255,255,.28));
	transform: translate3d(0,0,0);
}

body.is-glitching .inner *{
	animation: microJitter 90ms steps(2,end) infinite;
}

@keyframes microJitter{
	0%{ transform: translate(0,0); }
	50%{ transform: translate(2px,-1px); }
	100%{ transform: translate(0,0); }
}

h3 {
    width: 350px;
    margin: 4rem auto 0.5rem;
    text-align: left;  
}
/* signup section */
.signup{
	margin-top: 4rem;
	display:flex;
	justify-content:center;
    text-align: left;
}

/* form layout */
.signup form{
	display:flex;
	gap:12px;
	align-items:center;
}

/* email input */
.signup input[type="text"],
.signup input[type="email"]{

	background:transparent;
	border:none;
	border-bottom:1px solid rgba(255,255,255,.35);

	color:#fff;
	font-size:14px;
	letter-spacing:.04em;

	padding:0;
	width:220px;

	outline:none;
}
.mc-field-group {
    padding: 0.5rem 0;
}
/* placeholder */
.signup input::placeholder{
	color:rgba(255,255,255,.45);
}

/* submit button */
.signup button{

	background:none;
	border:none;
	border-bottom:1px solid rgba(255,255,255,.35);

	color:#fff;
	font-size:12px;
	letter-spacing:.18em;
	text-transform:uppercase;

	padding:8px 0;
	cursor:pointer;

}

.button {
    padding: .5rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 1);
    transition: .2s all;
}
.signup .button:hover{
    cursor: pointer;
}

.signup form{
	display:flex;
	align-items:center;
	gap:10px;
	position:relative;
}
.button.disabled {
filter: blur(2px) brightness(.7);    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}
.email-input{
	background:transparent;
	border:none;
	border-bottom:1px solid rgba(255,255,255,.35);

	color:#fff;
	font-size:14px;
	letter-spacing:.04em;

	padding:8px 2px;
	width:230px;

	outline:none;
}
.indicates-required {
    font-style: italic;
    font-size: .75rem;
    color: #7d7970;
    margin-top: 0.5rem;
}
/* blinking cursor */
.fake-cursor{

	position:absolute;

	left:205px;
	height:16px;
	width:1px;

	background:#fff;
	opacity:.7;

	animation:blink 1s infinite;
}

/* hide fake cursor when typing */
.email-input:focus + .fake-cursor{
	display:none;
}
label {
    width: 125px !important;
    display: inline-block;
}

@keyframes blink{
	0%{opacity:0;}
	50%{opacity:1;}
	100%{opacity:0;}
}