:root { --teal:#00BFA6; --navy:#1A3E59; --gray:#F5F7FA; --text:#1F2937; }
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--gray)}
a{color:var(--teal);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
nav.nav{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:40}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .brand{display:flex;align-items:center;gap:10px}
.nav .brand img{height:28px;width:auto;display:block}
.nav .links a{color:var(--text);font-weight:600;margin-left:18px;opacity:.9}
.nav .links a:hover{color:var(--navy)}
header.hero{background:linear-gradient(135deg,var(--navy),#0f2b3f);color:#fff;padding:96px 0 72px;text-align:center}
.hero .brand {display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.brand-logo{width:44px;height:44px;border-radius:10px;background:var(--teal);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.hero h1{margin:10px 0 8px;font-size:44px}
.hero .tagline{margin:8px 0 22px;font-size:18px;opacity:.95}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 18px;border-radius:10px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.btn:hover{transform:translateY(-1px);transition:.15s ease}
.btn.btn-outline{background:transparent;border:2px solid #fff;margin-left:10px}
.section{padding:64px 0}
.section h2{margin:0 0 8px;color:var(--navy);font-size:28px}
.muted{color:#6b7280}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);border:1px solid #eef2f7}
.card h3{margin:6px 0 6px}
.card p{margin:0;line-height:1.55}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.portfolio-grid img{width:100%;border-radius:12px;border:1px solid #e5e7eb}

/* Contact layout */
.contact form{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#fff;border-radius:14px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);border:1px solid #eef2f7}
.contact label{display:block;font-weight:600;margin:6px 0 6px}
.contact .field{display:flex;flex-direction:column}
.contact input,.contact textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #d1d5db;background:#fff}
.contact .name{grid-column:1}
.contact .email{grid-column:2}
.contact .message{grid-column:1 / span 2}
.contact .actions{grid-column:1}
button.cta{background:var(--teal);color:#fff;border:none;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}
button.cta:hover{filter:brightness(.95)}

footer{padding:28px 0 40px;text-align:center;color:#6b7280}
footer .links{margin-top:8px}
footer .links a{margin:0 8px;font-size:14px;color:#6b7280}
footer .links a:hover{color:var(--navy)}

@media (max-width:680px){
  .contact form{grid-template-columns:1fr}
  .contact .message{grid-column:1}
}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.plan{background:#fff;border:1px solid #e8edf3;border-radius:16px;padding:22px;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.plan.popular{border-color:var(--teal);box-shadow:0 12px 28px rgba(0,191,166,.18)}
.badge{display:inline-block;font-weight:700;font-size:12px;background:var(--teal);color:#fff;padding:6px 10px;border-radius:999px;margin-bottom:10px}
.price{font-size:32px;color:var(--navy);font-weight:800;margin:4px 0 8px}
.features{list-style:none;padding:0;margin:10px 0 16px}
.features li{display:flex;gap:8px;align-items:flex-start;margin:8px 0;line-height:1.45}
.features li .icon{font-size:18px;line-height:1.1}
.plan .cta{width:100%}
.maint-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}

/* Toast */
.toast{position:fixed;right:20px;bottom:-80px;background:#0f2b3f;color:#fff;padding:14px 16px;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:all .35s ease}
.toast.show{bottom:20px;opacity:1}
.toast.success{background:#007e6f}
.toast.error{background:#b91c1c}