/* ===========================================
   Open Source Prosthetics
   Premium Landing Page
=========================================== */

:root {

    --bg: #ffffff;
    --surface: rgba(255,255,255,.72);

    --text: #0f172a;
    --muted: #64748b;

    --border: rgba(15,23,42,.08);

    --primary: #0f8d78;
    --primary-light: #60a5fa;

    --radius: 28px;

    /* Golden-ratio inspired spacing */
    --space-xs: .618rem;
    --space-sm: 1rem;
    --space-md: 1.618rem;
    --space-lg: 2.618rem;
    --space-xl: 4.236rem;
    --space-2xl: 6.854rem;
    --space-3xl: 11.09rem;

    --shadow:
        0 12px 40px rgba(15,23,42,.06);

    --transition: .35s ease;

}

*{
    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.7;

    overflow-x:hidden;

}

/* ===========================
Container
=========================== */

.container{

    width:min(1200px,92%);
    margin:auto;

}

/* ===========================
Background
=========================== */

.background-grid{

    position:fixed;
    inset:0;

    background-image:

        linear-gradient(
            rgba(15,23,42,.035) 1px,
            transparent 1px),

        linear-gradient(
            90deg,
            rgba(15,23,42,.035) 1px,
            transparent 1px);

    background-size:80px 80px;

    z-index:-10;

}

.background-glow{

    position:fixed;

    width:700px;
    height:700px;

    left:-180px;
    top:-180px;

    background:

    radial-gradient(
        circle,
        rgba(37,99,235,.18),
        transparent 70%);

    filter:blur(60px);

    z-index:-9;

    animation:
        floatGlow 12s ease-in-out infinite;

}

.background-circle{

    position:fixed;

    border-radius:50%;

    border:1px solid rgba(37,99,235,.08);

    z-index:-8;

}

.background-circle.one{

    width:620px;
    height:620px;

    right:-260px;
    top:140px;

}

.background-circle.two{

    width:960px;
    height:960px;

    left:-420px;
    bottom:-520px;

}

/* ===========================
Header
=========================== */

header{

    height:88px;

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.logo{

    display:flex;
    align-items:center;
    gap:18px;

    text-decoration:none;
    color:inherit;

}

/*.logo-mark{

    width:42px;
    height:42px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #6aa8ff);

}*/

.logo-text{

    display:flex;
    flex-direction:column;

}

.logo-text span{

    font-size:.8rem;
    color:var(--muted);

}

.logo-text strong{

    font-size:1rem;

}

nav{

    display:flex;
    align-items:center;
    gap:36px;

}

nav a{

    text-decoration:none;
    color:var(--muted);

    transition:var(--transition);

}

nav a:hover{

    color:var(--text);

}

/* ===========================
Buttons
=========================== */

.button{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:16px 28px;

    border-radius:999px;

    text-decoration:none;

    transition:.3s;

    background:var(--primary);

    color:white;

    font-weight:600;

}

.button:hover{

    transform:translateY(-3px);

    box-shadow:
    0 16px 40px rgba(37,99,235,.25);

}

.button.ghost{

    background:white;

    color:var(--text);

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

}

.button.small{

    padding:12px 22px;

}

.button.large{

    padding:20px 42px;

    font-size:1.05rem;

}

/* ===========================
Hero
=========================== */

.hero{

    min-height:85vh;

    display:grid;

    grid-template-columns:
    1.2fr
    .8fr;

    align-items:center;

    gap:100px;

}

.eyebrow{

    letter-spacing:.22em;

    font-size:.78rem;

    color:var(--primary);

    font-weight:700;

    margin-bottom:24px;

}

.hero h1{

    font-size:clamp(4rem,8vw,7rem);

    line-height:.95;

    font-weight:300;

    letter-spacing:-.05em;

    margin-bottom:34px;

}

.lead{

    font-size:1.25rem;

    color:var(--muted);

    max-width:620px;

}

.hero-actions{

    display:flex;

    gap:20px;

    margin-top:48px;

}

.hero-panel{

    display:grid;

    gap:28px;

}

.panel{

    padding:36px;

    border-radius:var(--radius);

    background:var(--surface);

    backdrop-filter:blur(16px);

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

    box-shadow:var(--shadow);

    transition:.4s;

}

.panel:hover{

    transform:translateY(-8px);

}

.panel-label{

    color:var(--primary);

    font-size:.8rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.panel h3{

    margin:14px 0;

    font-size:1.5rem;

}

.panel p{

    color:var(--muted);

}

/* ===========================
Mission
=========================== */

.mission{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    padding:var(--space-3xl) 0;

}

.mission h2{

    font-size:3.5rem;

    line-height:1.05;

    font-weight:300;

}

.mission p{

    color:var(--muted);

    font-size:1.1rem;

}

/* ===========================
Features
=========================== */

.features{

    display:grid;

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

    gap:36px;

    padding-bottom:var(--space-3xl);

}

.features article{

    padding:36px;

    border-radius:24px;

    background:white;

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

    transition:.35s;

}

.features article:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.number{

    font-size:2rem;

    color:var(--primary);

    font-weight:700;

    margin-bottom:24px;

}

.features h3{

    margin-bottom:18px;

}

.features p{

    color:var(--muted);

}

/* ===========================
Stats
=========================== */

.stats{

    padding:var(--space-3xl) 0;

    background:#f8fafc;

}

.stats-grid{

    display:grid;

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

    text-align:center;

}

.stats h2{

    font-size:4rem;

    font-weight:300;

}

.stats p{

    color:var(--muted);

}

/* ===========================
Quote
=========================== */

.quote{

    padding:var(--space-3xl) 0;

    text-align:center;

}

.quote h2{

    font-size:clamp(3rem,5vw,5rem);

    line-height:1.05;

    font-weight:300;

}

/* ===========================
CTA
=========================== */

.cta{

    margin-bottom:var(--space-3xl);

    padding:70px;

    border-radius:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:

        linear-gradient(
            135deg,
            #0f172a,
            #1e3a8a);

    color:white;

}

.cta h2{

    margin-top:12px;

    font-size:3rem;

    font-weight:300;

}

/* ===========================
Footer
=========================== */

footer{

    padding:80px 0;

    display:flex;

    justify-content:space-between;

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

}

footer p{

    color:var(--muted);

    margin-top:8px;

}

footer div:last-child{

    display:flex;
    gap:24px;

}

footer a{

    text-decoration:none;
    color:var(--muted);

}

footer a:hover{

    color:var(--text);

}

/* ===========================
Animations
=========================== */

@keyframes floatGlow{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(60px,40px);
    }

    100%{
        transform:translate(0,0);
    }

}

/* ===========================
Responsive
=========================== */

@media (max-width:960px){

nav{

display:none;

}

.hero,
.mission{

grid-template-columns:1fr;

gap:64px;

}

.features{

grid-template-columns:1fr 1fr;

}

.stats-grid{

grid-template-columns:1fr 1fr;
gap:60px;

}

.cta{

flex-direction:column;
text-align:center;
gap:40px;

}

footer{

flex-direction:column;
gap:40px;

}

}

@media (max-width:640px){

.features{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:3.8rem;

}

.cta{

padding:48px 36px;

}

.mission h2{

font-size:2.7rem;

}

}