:root{--primary:#6366f1;--primary-hover:#4f46e5;--background:#fff;--surface:#f8fafc;--text:#0f172a;--text-secondary:#64748b;--border:#e2e8f0;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px}body{background-color:var(--background);margin:0}#TopNavBar{background-color:var(--surface);border:1.5px solid var(--border);justify-content:space-between;align-items:center;width:100vw;display:flex}#logo{width:150px;height:12vh;margin-right:auto;margin-left:var(--space-md)}#authbtn{background-color:var(--surface);gap:var(--space-md);margin:var(--space-md);display:flex}.authbtn{background-color:var(--primary);border-radius:var(--radius-md);padding:var(--space-sm);border:none}.authbtn:active{background-color:var(--primary-hover)}#hero{background-color:var(--background);margin:var(--space-3xl);grid-template-columns:1fr;align-items:center;display:grid}#heroText{margin-bottom:var(--space-xl);grid-template-columns:1fr;align-items:center;display:grid}#heroH1text{font-size:var(--space-lg)}#heroH1text h1{margin-bottom:0}#heroh4text{font-size:var(--space-md);margin:0}#herobtn{gap:var(--space-2xl);display:flex}.herobtn{background-color:var(--primary);padding:var(--space-sm) var(--radius-lg);border-radius:var(--radius-md);border:none}.herobtn:active{background-color:var(--primary-hover)}#features{place-items:center;display:grid}#featureImg{grid-template-columns:1fr 1fr 1fr;place-items:center;display:grid}#featureImg img{aspect-ratio:1;object-fit:cover;width:50%;display:block}#websiteSS{margin:var(--space-3xl);place-items:center;display:grid}#ss{place-items:center;display:grid}#ss img{object-fit:cover;aspect-ratio:16/9;width:95%}#footer{background-color:var(--surface);border:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:0 8rem;display:flex}.footerBtn{margin:var(--space-lg);background-color:#fff;border:none;border-bottom:1px solid #000}@media (width<=1024px){#TopNavBar{width:auto}#featureImg img{width:85%}}@media (width<=767px){#logo{width:130px;height:auto}#authbtn{gap:var(--space-sm);margin:var(--space-sm)}#hero{margin:var(--space-xl) var(--space-md)}#heroH1text h1{font-size:2rem}#herobtn{gap:var(--space-md)}#featureImg{gap:var(--space-md);grid-template-columns:1fr}#featureImg img{width:80%;max-width:320px}#websiteSS{margin:var(--space-xl) var(--space-md)}#ss img{width:100%}#footer{justify-content:center;column-gap:var(--space-md)}.footerBtn{margin:var(--space-md) var(--space-sm)}}