@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root{
  --primary:#137fec;
  --primary-light:#60a5fa;
  --bg-light:#f6f7f8;
  --bg-dark:#101922;
  --text-dark:#0b1220;
  --text-light:#f8fafc;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg-light); color:var(--text-dark);}

/* Basic layout helpers used by the exported HTMLs */
.layout-container{display:flex;flex-direction:column;min-height:100vh}
.layout-content-container{max-width:640px;width:100%;margin:0 auto;padding:1rem}

/* Featured glow */
.featured-glow{box-shadow:0 0 20px rgba(19,127,236,0.25)}
.featured-glow:hover{box-shadow:0 0 30px rgba(19,127,236,0.4)}

/* Cards / links */
a{color:inherit;text-decoration:none}
a.rounded-xl{border-radius:12px}

/* Simple utilities for spacing and flex used in markup (not exhaustive) */
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.text-center{text-align:center}
.w-full{width:100%}

/* Footer */
footer{padding:3rem 1rem;text-align:center}

/* Material Symbols */
.material-symbols-outlined{font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; font-family: 'Material Symbols Outlined';}

/* Dark mode support: preserve class-based dark mode */
.dark body, .dark{background:var(--bg-dark);color:var(--text-light)}

/* Misc tweaks for better local editing */
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto}

/* Small responsive helpers */
@media (min-width:768px){
  .md\:pt-24{padding-top:6rem}
}