/* ==========================================================
   ORDIUS DESIGN LANGUAGE v1.0
   ========================================================== */

   :root {

    /* Backgrounds */

    --bg: #0A0A0A;
    --surface: #111111;
    --panel: #181818;

    /* Typography */

    --text: #F5F5F5;
    --muted: #B3B3B3;

    /* Borders */

    --border: #262626;

    /* Brand */

    --accent: #4D0B0B;
    --accent-hover: #6B0D0B;

    /* Layout */

    --container: 1180px;

    --radius: 16px;

}

/* ========================================================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    background: var(--bg);

    color: var(--text);

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

    line-height: 1.75;

    -webkit-font-smoothing: antialiased;

}

/* ========================================================== */

h1,
h2,
h3,
h4 {

    font-family: "Sora", sans-serif;

    font-weight: 600;

}

/* ========================================================== */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 72px 56px;

}   

.hero-container {

    width: 100%;

    max-width: var(--container);

}

/* ========================================================== */

.brand-block {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin-bottom: 36px;

}

/* ========================================================== */

.brand-logo {

    width: 72px;

    height: auto;

    margin-bottom: 10px;

}

/* ========================================================== */

.eyebrow {

    text-transform: uppercase;
    
    font-size: 13px;
    
    letter-spacing: 4px;
    
    color: #8B8B8B;
    
    margin-bottom: 18px;
    
    font-weight: 500;

}

/* ========================================================== */

h1 {

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.02;

    letter-spacing: -0.04em;

    margin-bottom: 22px;

}

/* ========================================================== */

.tagline {

    font-family: "Sora", sans-serif;

    font-size: clamp(20px,2.2vw,28px);

    color: var(--muted);

    margin-bottom: 32px;

}

/* ========================================================== */

.hero-copy {

    max-width: 590px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 56px;

}

/* ========================================================== */

.hero-actions {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

/* ========================================================== */

.button-primary,
.button-secondary {

    text-decoration: none;

    padding: 15px 26px;

    border-radius: 14px;

    transition: .18s ease;

    font-weight: 600;
    font-size: 15px;

}

.button-primary {

    background: var(--accent);

    color: white;

}

.button-primary:hover {

    background: var(--accent-hover);

    transform: translateY(-1px);

}

.button-secondary {

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

    color: white;

}

.button-secondary:hover {

    border-color: var(--accent);

}

/* ========================================================== */

.section {

   padding: 64px 40px;

}

.section.dark {

    background: var(--surface);

}

/* ========================================================== */

.section-container {

    max-width: var(--container);

    margin: auto;

}

/* ========================================================== */

.section h2 {

    font-size: clamp(30px,4vw,40px);

    letter-spacing: -0.03em;

    margin-bottom: 32px;

}

/* ========================================================== */

.feature-grid {

    display: grid;

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

    gap: 32px;

}

/* ========================================================== */

.feature-card {

    background: var(--panel);

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

    border-radius: var(--radius);

    padding: 36px;

    transition: transform .22s ease, border-color .22s ease;

}

.feature-card:hover {

    border-color: var(--accent);

    transform: translateY(-4px);

}

/* ========================================================== */

.feature-card h3 {

    margin-bottom: 18px;

    font-size: 21px;

}

.feature-card p {

    color: var(--muted);

}

/* ========================================================== */

pre {

    background: #050505;

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

    border-radius: var(--radius);

    padding: 28px;

    overflow-x: auto;

    margin-bottom: 28px;

}

code {

    font-family: Menlo, monospace;

    color: #DDDDDD;

}

/* ========================================================== */

.pricing-grid {

    display: grid;

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

    gap: 32px;

}

/* ========================================================== */

.pricing-card {

    background: var(--panel);

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

    border-radius: var(--radius);

    padding: 34px;

    transition: transform .22s ease, border-color .22s ease;

}

.pricing-card:hover {

    border-color: var(--accent);

    transform: translateY(-4px);

}

/* ========================================================== */

.pricing-card h3 {

    margin-bottom: 18px;

    font-size: 22px;

}

.pricing-card p {

    color: var(--muted);

    margin-bottom: 22px;

}

.pricing-card strong {

    color: white;

}

/* ========================================================== */

footer {

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

    padding: 80px 40px;

}

.footer-container {

    max-width: var(--container);

    margin: auto;

}

footer p {

    color: var(--muted);
    
    font-size: 14px;
    
    line-height: 1.8;

    margin-bottom: 14px;

}

footer nav {

    display: flex;

    gap: 24px;

    margin: 26px 0;

}

footer nav a {

    color: white;

    text-decoration: none;

}

.footer-keywords {

    font-size: 14px;

}

/* ========================================================== */

@media (max-width:900px){

.feature-grid,
.pricing-grid{

grid-template-columns:1fr;

}

.hero{

padding:80px 28px;

}

.section{

padding:90px 28px;

}

.hero-copy{

font-size:18px;

}

}