/* Chill-Astro Software - style.css */
/* Tomorrow Font */
@font-face{font-family:"Tomorrow";src:url("../fonts/Tomorrow-Regular.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Tomorrow";src:url("../fonts/Tomorrow-Medium.ttf") format("truetype");font-weight:500}
@font-face{font-family:"Tomorrow";src:url("../fonts/Tomorrow-SemiBold.ttf") format("truetype");font-weight:600}
@font-face{font-family:"Tomorrow";src:url("../fonts/Tomorrow-Bold.ttf") format("truetype");font-weight:700}
@font-face{font-family:"Tomorrow";src:url("../fonts/Tomorrow-ExtraBold.ttf") format("truetype");font-weight:800}

:root{
--bg:#fff;--surface:#f7f7f8;--text:#111;--muted:#666;
--button-bg:#111;--button-text:#fff;--card-border:#e6e6e6;
--shadow:0 8px 30px rgba(0,0,0,.08);--radius:24px}
@media(prefers-color-scheme:dark){
:root{--bg:#0b0b0b;--surface:#151515;--text:#fff;--muted:#b8b8b8;
--button-bg:#fff;--button-text:#111;--card-border:#292929;
--shadow:0 8px 30px rgba(0,0,0,.45)}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Tomorrow",sans-serif;background:var(--bg);color:var(--text);transition:.3s;overflow-x:hidden}
section{width:min(1200px,90%);margin:auto}
a{text-decoration:none;color:inherit}
p{color:var(--muted);line-height:1.7}
h1{font-size:clamp(2.5rem,4vw,3.6rem);font-weight:700;line-height:1.1;white-space:nowrap}
h2{font-size:clamp(2.2rem,3.5vw,3.2rem);font-weight:700;white-space:nowrap}
.primary-btn{display:inline-flex;padding:15px 32px;border-radius:999px;
background:var(--button-bg);color:var(--button-text);margin-top:2rem;
font-weight:600;transition:.25s}
.primary-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow)}
.hero{padding-top:100px;min-height:30vh;width:min(1000px,90%);display:flex;align-items:center;justify-content:space-between;gap:3rem;}
.hero-left{display:flex;flex-direction:column;align-items:center;animation:float 5s ease-in-out infinite}
.logo-circle{width:300px;height:300px;border-radius:50%;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.logo-circle img{width:100%;height:100%;object-fit:cover}
.username{margin-top:18px;font-weight:600}
.hero-right{max-width:620px}
.hero-right p{margin-top:1.2rem;max-width:620px}
.projects{padding:120px 0}
.projects h2{text-align:center;margin-bottom:70px}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.project-card{transition:.3s}
.project-card:hover{transform:translateY(-8px)}
.project-image{aspect-ratio:1;border-radius:22px;overflow:hidden;background:transparent;}
.project-image img{width:100%;height:100%;object-fit:cover;transition:.35s}
.project-card:hover img{transform:scale(1.02);text-align: center;}
.project-card h3{margin-top:20px;font-weight:600;text-align: center;}
.project-card p{margin-top:10px;text-align: center;}
.cta{padding:50px 0;text-align:center}
.cta h2{font-size: 2.2rem;margin-bottom: 40px;}
footer{width:min(1200px,90%);margin:auto;padding:50px 0;display:flex;justify-content:space-between;align-items:center}
footer svg{transition:.25s}footer a:hover svg{transform:scale(1.12)}
/* Footer */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 2rem 4rem;
}

/* Social Icons */
.socials {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.socials a {
    color: var(--text-color);
    transition: transform .25s ease, opacity .25s ease;
}

.socials a:hover {
    transform: translateY(-2px);
    opacity: .8;
}

.socials svg {
    display: block;
}
.hidden{opacity:0;transform:translateY(45px)}
.show{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media(max-width:768px){
.hero{flex-direction:column;text-align:center;justify-content:center;gap:50px}
.hero-right{max-width:100%}
h1,h2{white-space:normal}
.project-grid{grid-template-columns:1fr}
footer{padding:40px 0}
}

.project-card{
    display:grid;
    grid-template-rows:
        320px   /* image */
        auto    /* title */
        90px    /* description */
        auto    /* version */
        auto;   /* download button */

    justify-items:center;
    text-align:center;
}

.project-image img{
    width:82%;
    height:82%;
    object-fit:contain;
    display:block;
    margin:auto;
}

.project-card h3,
.project-card p,
.project-version{
    text-align:center;
}

.project-version{
    margin-top:12px;
    font-size:.95rem;
    font-weight:600;
    color:var(--muted);
}

.download-btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:fit-content;
    margin:18px auto 0;
    padding:12px 28px;
    border-radius:999px;
    background:var(--button-bg);
    color:var(--button-text);
    text-decoration:none;
    font-weight:600;
    transition:.25s;
}

.download-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}