:root {

 
--black: #080A0D;

--black-soft: #0D1116;

--dark: #12181E;

--border: rgba(255,255,255,0.12);

--white: #F5F7F8;

--text: #AAB3BC;

--muted: #68737D;

--accent: #B6F23A;

--accent-dark: #8BBE28;

--max-width: 1180px;
 

}

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

 
scroll-behavior: smooth;
 

}

body {

 
min-height: 100vh;

overflow-x: hidden;

font-family: "Inter", Arial, sans-serif;

color: var(--white);

background: var(--black);

line-height: 1.6;
 

}

a {

 
color: inherit;
 

}

.container {

 
width: min(

    var(--max-width),

    calc(100% - 48px)

);

margin: 0 auto;
 

}

/* Accessibility */

.skip-link {

 
position: absolute;

left: -9999px;

top: 10px;

z-index: 999;

padding: 12px 18px;

color: var(--black);

background: var(--accent);
 

}

.skip-link:focus {

 
left: 20px;
 

}

/* Background canvas */

#backgroundCanvas {

 
position: fixed;

inset: 0;

z-index: -3;

width: 100%;

height: 100%;

pointer-events: none;
 

}

.background-grid {

 
position: fixed;

inset: 0;

z-index: -2;

pointer-events: none;

opacity: 0.25;

background-image:

    linear-gradient(

        rgba(255,255,255,0.025) 1px,

        transparent 1px

    ),

    linear-gradient(

        90deg,

        rgba(255,255,255,0.025) 1px,

        transparent 1px

    );

background-size: 70px 70px;

mask-image:

    radial-gradient(

        ellipse at center,

        black 0%,

        transparent 75%

    );
 

}

/* Header */

.site-header {

 
position: relative;

z-index: 10;

border-bottom: 1px solid var(--border);
 

}

.header-inner {

 
min-height: 88px;

display: flex;

align-items: center;

justify-content: space-between;
 

}

/* Logo */

.logo,

.footer-logo {

 
display: inline-flex;

align-items: center;

gap: 5px;

color: var(--white);

text-decoration: none;

font-size: 25px;

font-weight: 700;

letter-spacing: 4px;
 

}

.logo-symbol {

 
color: var(--accent);

font-weight: 600;
 

}

.logo-name {

 
letter-spacing: 5px;
 

}

/* Status */

.header-status {

 
display: flex;

align-items: center;

gap: 9px;

color: var(--muted);

font-size: 11px;

letter-spacing: 0.5px;
 

}

.status-dot {

 
width: 7px;

height: 7px;

border-radius: 50%;

background: var(--accent);

box-shadow:

    0 0 0 4px rgba(182,242,58,0.1),

    0 0 15px rgba(182,242,58,0.7);

animation: pulse 2.5s infinite;
 

}

@keyframes pulse {

 
0%,
100% {

    opacity: 1;

}

50% {

    opacity: 0.45;

}
 

}

/* Hero */

.hero {

 
min-height: 670px;

display: flex;

align-items: center;
 

}

.hero-container {

 
display: grid;

grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);

align-items: center;

gap: 80px;

padding: 90px 0;
 

}

.eyebrow {

 
display: flex;

align-items: center;

gap: 12px;

margin-bottom: 24px;

color: var(--accent);

font-size: 10px;

font-weight: 700;

letter-spacing: 2px;
 

}

.eyebrow-line {

 
width: 30px;

height: 1px;

background: var(--accent);
 

}

h1 {

 
max-width: 760px;

font-size: clamp(48px, 6vw, 78px);

line-height: 1.02;

letter-spacing: -4px;

font-weight: 700;
 

}

h1 span {

 
display: block;

color: var(--accent);
 

}

.hero-description {

 
max-width: 560px;

margin-top: 30px;

color: var(--text);

font-size: 17px;
 

}

.hero-actions {

 
display: flex;

flex-wrap: wrap;

gap: 14px;

margin-top: 38px;
 

}

/* Buttons */

.button {

 
display: inline-flex;

align-items: center;

justify-content: center;

gap: 16px;

min-height: 52px;

padding: 0 23px;

border: 1px solid transparent;

border-radius: 3px;

text-decoration: none;

font-size: 11px;

font-weight: 700;

letter-spacing: 0.7px;

text-transform: uppercase;

transition:

    transform 0.2s ease,

    background 0.2s ease,

    border-color 0.2s ease;
 

}

.button:hover {

 
transform: translateY(-3px);
 

}

.button-primary {

 
color: var(--black);

background: var(--accent);
 

}

.button-primary:hover {

 
background: var(--white);
 

}

.button-secondary {

 
color: var(--white);

border-color: var(--border);
 

}

.button-secondary:hover {

 
color: var(--accent);

border-color: var(--accent);
 

}

/* Hero visual */

.hero-visual {

 
position: relative;

min-height: 430px;

display: grid;

place-items: center;
 

}

.code-card {

 
position: relative;

z-index: 2;

width: min(100%, 500px);

overflow: hidden;

border: 1px solid rgba(182,242,58,0.25);

border-radius: 8px;

background: rgba(14,18,23,0.85);

box-shadow:

    0 30px 100px rgba(0,0,0,0.6),

    0 0 80px rgba(182,242,58,0.05);

transform:

    perspective(1000px)

    rotateY(-8deg)

    rotateX(4deg);
 

}

.code-card-header {

 
height: 48px;

display: flex;

align-items: center;

gap: 7px;

padding: 0 18px;

border-bottom: 1px solid var(--border);
 

}

.window-dot {

 
width: 9px;

height: 9px;

border-radius: 50%;

background: var(--muted);
 

}

.code-file {

 
margin-left: 12px;

color: var(--muted);

font-family: monospace;

font-size: 11px;
 

}

.code-content {

 
min-height: 240px;

padding: 38px 30px;

color: var(--text);

font-family: monospace;

font-size: 14px;

line-height: 2;
 

}

.code-keyword {

 
color: #C792EA;
 

}

.code-variable {

 
color: #82AAFF;
 

}

.code-function {

 
color: var(--accent);
 

}

.code-string {

 
color: #D6DEEB;
 

}

.code-symbol {

 
color: #8996A6;
 

}

/* Orbiting visual */

.orbital {

 
position: absolute;

border: 1px solid rgba(182,242,58,0.15);

border-radius: 50%;

transform: rotate(-25deg);
 

}

.orbital-one {

 
width: 520px;

height: 180px;

animation: orbit 18s linear infinite;
 

}

.orbital-two {

 
width: 430px;

height: 150px;

transform: rotate(35deg);

animation: orbitReverse 14s linear infinite;
 

}

.orbital-three {

 
width: 350px;

height: 120px;

transform: rotate(80deg);

opacity: 0.6;
 

}

@keyframes orbit {

 
from {

    transform: rotate(-25deg);

}

to {

    transform: rotate(335deg);

}
 

}

@keyframes orbitReverse {

 
from {

    transform: rotate(35deg);

}

to {

    transform: rotate(-325deg);

}
 

}

/* Statement bar */

.brand-statement {

 
border-top: 1px solid var(--border);

border-bottom: 1px solid var(--border);

background: rgba(18,24,30,0.7);
 

}

.statement-grid {

 
display: grid;

grid-template-columns: repeat(3, 1fr);
 

}

.statement-item {

 
display: flex;

gap: 18px;

align-items: center;

min-height: 120px;

padding: 20px 28px;

border-right: 1px solid var(--border);
 

}

.statement-item:first-child {

 
border-left: 1px solid var(--border);
 

}

.statement-number {

 
color: var(--accent);

font-family: monospace;

font-size: 12px;
 

}

.statement-item strong {

 
display: block;

margin-bottom: 3px;

font-size: 14px;
 

}

.statement-item span:last-child {

 
color: var(--muted);

font-size: 11px;
 

}

/* Contact */

.contact-section {

 
padding: 90px 0;

background: var(--accent);

color: var(--black);
 

}

.contact-inner {

 
display: flex;

align-items: center;

justify-content: space-between;

gap: 50px;
 

}

.contact-label {

 
margin-bottom: 12px;

color: #4E681C;

font-size: 10px;

font-weight: 700;

letter-spacing: 2px;
 

}

.contact-section h2 {

 
font-size: clamp(32px, 4vw, 52px);

line-height: 1.05;

letter-spacing: -2px;
 

}

.contact-section p:not(.contact-label) {

 
max-width: 600px;

margin-top: 16px;

color: #40521D;
 

}

.button-dark {

 
flex-shrink: 0;

color: var(--white);

background: var(--black);
 

}

.button-dark:hover {

 
color: var(--black);

background: var(--white);
 

}

/* Footer */

.site-footer {

 
border-top: 1px solid var(--border);

background: var(--black);
 

}

.footer-inner {

 
min-height: 120px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;
 

}

.footer-logo {

 
font-size: 18px;
 

}

.footer-inner p {

 
color: var(--muted);

font-size: 10px;
 

}

/* Responsive */

@media (max-width: 900px) {

 
.hero-container {

    grid-template-columns: 1fr;

    gap: 50px;

}


.hero-visual {

    min-height: 350px;

}


.statement-grid {

    grid-template-columns: 1fr;

}


.statement-item {

    border-left: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

}


.statement-item:last-child {

    border-bottom: 0;

}


.contact-inner {

    align-items: flex-start;

    flex-direction: column;

}
 

}

@media (max-width: 600px) {

 
.container {

    width: calc(100% - 32px);

}


.header-inner {

    min-height: 72px;

}


.logo {

    font-size: 20px;

}


.header-status {

    font-size: 9px;

}


h1 {

    font-size: 46px;

    letter-spacing: -2.5px;

}


.hero {

    min-height: auto;

}


.hero-container {

    padding: 75px 0;

}


.hero-actions {

    flex-direction: column;

    align-items: stretch;

}


.button {

    width: 100%;

}


.hero-visual {

    min-height: 280px;

}


.code-card {

    transform: none;

}


.code-content {

    padding: 25px 20px;

    font-size: 11px;

}


.orbital-one {

    width: 350px;

}


.orbital-two {

    width: 300px;

}


.orbital-three {

    width: 240px;

}


.statement-item {

    min-height: 100px;

    padding: 18px 15px;

}


.footer-inner {

    align-items: flex-start;

    flex-direction: column;

    padding: 30px 0;

}
 

}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

 
html {

    scroll-behavior: auto;

}


*,

*::before,

*::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

}
 

}