/* ----------  DESIGN TOKENS  ---------- */
:root{
    --bg:#0b0e13;
    --surface:#161b22;
    --primary:#1d8cff;
    --accent:#ff4fd0;
    --text:#c9d1d9;
    --text2:#8b949e;
    --border:#30363d;
    --radius:12px;
    --glow:0 0 18px #1d8cff66;
}
[data-theme="light"]{
    --bg:#ffffff;
    --surface:#f6f8fa;
    --text:#24292e;
    --text2:#586069;
    --border:#d0d7de;
    --glow:0 0 12px #1d8cff44;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
body{background:var(--bg);color:var(--text);transition:background .3s,color .3s;scroll-behavior:smooth;}
img,svg{max-width:100%;display:block;}
a{color:var(--primary);text-decoration:none;}
h1,h2,h3{line-height:1.2;}
p{line-height:1.6;color:var(--text2);}
.btn{display:inline-block;margin-top:1rem;background:var(--primary);color:var(--bg);padding:.7rem 1.4rem;border-radius:var(--radius);font-weight:600;box-shadow:var(--glow);transition:.25s;}
.btn:hover{transform:translateY(-2px);}
.container{max-width:960px;margin:auto;padding:0 1rem;}
/* ----------  NAV  ---------- */
header{position:sticky;top:0;z-index:10;background:#ffffff11;backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;}
.logo{font-size:1.25rem;font-weight:700;}
.nav-links{display:flex;gap:1.2rem;align-items:center;}
.toggle{cursor:pointer;font-size:1.3rem;}
/* ----------  HERO  ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6rem 0 4rem;}
.hero h1{font-size:clamp(2.2rem,5vw,3.2rem);}
.hero p{max-width:600px;margin:1rem auto 0;}
.hero-art{width:90%;max-width:500px;margin-top:2rem;filter:drop-shadow(0 0 20px #1d8cff44);}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-art{animation:float 5s ease-in-out infinite;}
/* ----------  SECTIONS  ---------- */
section{padding:4rem 0;}
.grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;transition:.3s;}
.card:hover{transform:translateY(-4px);border-color:var(--primary);}
.card-icon{width:48px;height:48px;margin-bottom:1rem;}
.reveal{opacity:0;transform:translateY(30px);}
.reveal-visible{opacity:1;transform:translateY(0);transition:all .8s ease-out;}
/* ----------  FORM  ---------- */
form{margin-top:1rem;}
label{display:block;margin-bottom:.5rem;}
input,textarea{width:100%;padding:.6rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);}
.error{color:var(--accent);font-size:.85rem;margin-top:.3rem;}
/* ----------  FOOTER  ---------- */
footer{text-align:center;padding:2.5rem 0;font-size:.85rem;color:var(--text2);border-top:1px solid var(--border);}

/* ----------  LOGO  ---------- */
.logo img {
    -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.logo img:hover {
    transition: mask-position 2s ease,-webkit-mask-position 2s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
}