:root{
  --pink:#FF4081; --teal:#00BCD4; --orange:#FF9800; --green:#4CAF50; --navy:#003366;
}
*{box-sizing:border-box}
body{font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:#222;line-height:1.6;background:#fff}
.container{max-width:1080px;margin:0 auto;padding:0 1rem}
.skip-link{position:absolute;left:-9999px} .skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem 1rem;z-index:1000}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:999}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#111}
.brand img{height:44px;width:auto}
.brand-text{font-weight:700}
.site-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.site-nav a{color:#111;text-decoration:none}
.site-nav a.btn{background:var(--pink);color:#fff;padding:.5rem .9rem;border-radius:.6rem}
.nav-toggle{display:none}
.hero{background:linear-gradient(135deg, rgba(255,64,129,.08), rgba(0,188,212,.08)); padding:4rem 0}
.hero h1{font-size:2.2rem;margin:.2rem 0}
.hero p{max-width:720px}
.cta{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.cta .btn{background:var(--teal);color:#fff;padding:.8rem 1.1rem;border-radius:.7rem;text-decoration:none}
.grid{display:grid;gap:1.2rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid #eee;border-radius:12px;padding:1rem;background:#fff}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-size:.75rem;background:#eee;margin-bottom:.4rem}
.section{padding:3rem 0}
.section h2{margin-top:0}
.feature{display:flex;gap:1.2rem;align-items:flex-start}
.feature .icon{font-size:1.6rem}
.site-footer{border-top:1px solid #eee;margin-top:2rem;padding:2rem 0;background:#fafafa}
.footer-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(4,1fr)}
.legal{margin-top:1rem;font-size:.9rem;color:#666}
@media (max-width:800px){
  .site-nav ul{display:none;flex-direction:column;background:#fff;position:absolute;top:64px;right:1rem;padding:1rem;border:1px solid #eee;border-radius:12px}
  .nav-toggle{display:inline-flex;background:#eee;border:0;padding:.4rem .7rem;border-radius:.5rem}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
.highlight{background:#fff;border-left:4px solid var(--orange);padding:1rem;border-radius:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #eee;padding:.6rem}
.notice{background:rgba(255,152,0,.1);padding:1rem;border:1px dashed var(--orange);border-radius:8px}
.banner{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid #eee;border-radius:12px;background:#fff}
.banner img{height:56px}
small, .muted{color:#666}
form.card input, form.card textarea{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:8px}
form.card .btn{background:var(--pink);color:#fff;border:0;padding:.6rem 1rem;border-radius:.6rem;cursor:pointer}
