/* ===================================================
   ORION TECHNOLOGY
   Premium Landing Page
   Part 1
=================================================== */

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Inter,
    Segoe UI,
    Helvetica,
    Arial,
    sans-serif;

    background:#05070d;
    color:#edf3ff;

    overflow-x:hidden;

    line-height:1.6;

}

/* VARIABLES */

:root{

--bg:#05070d;
--bg2:#0c1222;
--card:#111827;

--border:rgba(255,255,255,.08);

--primary:#19d38a;
--secondary:#43b5ff;

--text:#f2f6ff;
--muted:#a6b2c8;

--radius:22px;

--shadow:
0 20px 50px rgba(0,0,0,.45);

}

/* LINKS */

a{

text-decoration:none;

color:inherit;

}

img{

max-width:100%;

display:block;

}

/* CONTAINER */

.container{

width:min(1200px,92%);

margin:auto;

}

/* ===================================================
BACKGROUND
=================================================== */

.background-grid{

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:70px 70px;

opacity:.25;

z-index:-3;

}

.background-glow{

position:fixed;

width:550px;

height:550px;

border-radius:50%;

filter:blur(120px);

opacity:.18;

z-index:-2;

}

.glow-left{

background:#18d38a;

top:-180px;

left:-150px;

}

.glow-right{

background:#37a8ff;

bottom:-180px;

right:-150px;

}

/* ===================================================
HEADER
=================================================== */

.header{

position:sticky;

top:0;

z-index:1000;

backdrop-filter:blur(20px);

background:rgba(5,7,13,.72);

border-bottom:1px solid rgba(255,255,255,.06);

}

/* NAVBAR */

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

height:80px;

}

.logo{

display:flex;

align-items:center;

gap:14px;

font-size:1.4rem;

font-weight:700;

letter-spacing:.04em;

}

.logo-icon{

width:42px;

height:42px;

border-radius:14px;

background:

linear-gradient(135deg,

var(--primary),

var(--secondary));

box-shadow:

0 0 35px rgba(25,211,138,.45);

}

/* NAV LINKS */

.nav-links{

display:flex;

gap:38px;

list-style:none;

}

.nav-links a{

color:var(--muted);

transition:.3s;

font-weight:500;

}

.nav-links a:hover{

color:white;

}

/* MOBILE */

.menu-toggle{

display:none;

background:none;

border:none;

font-size:2rem;

color:white;

cursor:pointer;

}

/* ===================================================
HERO
=================================================== */

.hero{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

padding:

120px 0

100px;

min-height:90vh;

}

.eyebrow{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:

rgba(25,211,138,.08);

color:var(--primary);

border:

1px solid rgba(25,211,138,.25);

font-size:.82rem;

letter-spacing:.12em;

margin-bottom:28px;

}

.hero h1{

font-size:4.5rem;

line-height:1.05;

font-weight:800;

margin-bottom:28px;

}

.gradient-text{

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.2rem;

color:var(--muted);

max-width:620px;

margin-bottom:42px;

}

/* BUTTONS */

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn{

padding:

16px 32px;

border-radius:999px;

font-weight:700;

transition:.35s;

display:inline-flex;

align-items:center;

justify-content:center;

cursor:pointer;

}

.btn-primary{

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary));

color:#04131a;

box-shadow:

0 15px 40px rgba(25,211,138,.35);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 22px 60px rgba(25,211,138,.55);

}

.btn-secondary{

border:

1px solid rgba(255,255,255,.12);

background:

rgba(255,255,255,.03);

color:white;

backdrop-filter:blur(12px);

}

.btn-secondary:hover{

background:

rgba(255,255,255,.08);

transform:translateY(-5px);

}

/* ===================================================
GRAPHIC
=================================================== */

.hero-graphic{

display:flex;

justify-content:center;

align-items:center;

}

.orbital{

position:relative;

width:420px;

height:420px;

}

.core{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:120px;

height:120px;

border-radius:50%;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary));

box-shadow:

0 0 80px rgba(25,211,138,.6);

}

.ring{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

border-radius:50%;

border:

1px solid rgba(255,255,255,.08);

animation:spin linear infinite;

}

.ring1{

width:200px;

height:200px;

animation-duration:18s;

}

.ring2{

width:300px;

height:300px;

animation-duration:28s;

animation-direction:reverse;

}

.ring3{

width:400px;

height:400px;

animation-duration:40s;

}

/* ===================================================
SECTION
=================================================== */

.section{

padding:110px 0;

}

.alt{

background:

linear-gradient(

180deg,

rgba(255,255,255,.015),

transparent);

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:3rem;

margin-bottom:18px;

}

.section-title p{

color:var(--muted);

max-width:720px;

margin:auto;

}

/* ===================================================
ANIMATIONS
=================================================== */

@keyframes spin{

from{

transform:

translate(-50%,-50%)

rotate(0deg);

}

to{

transform:

translate(-50%,-50%)

rotate(360deg);

}

}

.reveal{

opacity:0;

transform:translateY(40px);

transition:

all

1s

ease;

}

.reveal.active{

opacity:1;

transform:none;

}