:root { --bg:#fff; --text:#1f2937; --muted:#6b7280; --primary:#38c6a0; --secondary:#ff7070; --panel:#fff; --radius:18px; --shadow:0 12px 30px rgba(31,41,55,.10); }
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans}
img{max-width:100%;display:block} a{color:var(--primary);text-decoration:none} .container{width:min(1120px,100%);margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #f2f2f2}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0} .brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;letter-spacing:.2px}
.logo{width:36px;height:36px;object-fit:cover;border-radius:8px} .logo.sm{width:28px;height:28px}
#nav-toggle{display:none} .hamburger{display:none;cursor:pointer} .hamburger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0}
.menu{display:flex;align-items:center;gap:18px} .menu a{color:var(--text);padding:8px 12px;border-radius:12px} .menu a.cta{background:var(--primary);color:#003b2c;font-weight:700} .menu a:hover{background:#f7f7f7}
@media (max-width:780px){.hamburger{display:block}.menu{position:absolute;top:64px;right:20px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px;display:none;flex-direction:column;min-width:220px}#nav-toggle:checked~.menu{display:flex}}
.hero{position:relative;background:radial-gradient(1000px 400px at 10% 0%, rgba(56,198,160,.20), transparent 60%), radial-gradient(1000px 380px at 90% 10%, rgba(255,112,112,.16), transparent 60%), #fff}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:36px;padding:60px 0}
.hero h1{font-size:clamp(28px,4vw,48px);margin:0 0 10px;line-height:1.06} .hero .lead{color:var(--muted);font-size:18px} .hero .collab{margin-top:8px}
.hero-ctas{display:flex;gap:12px;margin:16px 0 8px} .badges{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.badges li{background:#f5fdfb;color:#065f46;border:1px solid #ccf5ea;padding:6px 10px;border-radius:999px;font-size:13px}
.hero-art img{width:min(420px,100%);border-radius:24px;box-shadow:var(--shadow);border:1px solid #eee;object-fit:cover} .wave{height:12px;background:linear-gradient(to right, rgba(56,198,160,.35), rgba(255,112,112,.35))}
.cards{display:grid;gap:16px;margin:36px auto} .cards.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .cards.three{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:#fff;border:1px solid #f1f1f1;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)} .panel{background:#fff;border-radius:var(--radius);margin:40px 0}
.panel-inner{border:2px dashed rgba(56,198,160,.3);border-radius:12px;padding:24px;background:linear-gradient(180deg, rgba(56,198,160,.06), rgba(255,255,255,0))}
.page{padding:32px 0 50px} .lead{color:#6b7280} .service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:16px 0 24px} .list{padding-left:18px;line-height:1.9}
.about{display:grid;grid-template-columns:1fr 2fr;gap:20px;align-items:start} .about-photo{width:100%;max-width:360px;border-radius:24px;box-shadow:var(--shadow);border:1px solid #eee;background:#fff}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}.about{grid-template-columns:1fr}}
.form{display:grid;gap:14px} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 16px}
.form label{display:grid;gap:6px;font-weight:600} .form input[type=text], .form input[type=email], .form select, .form textarea{padding:12px;border-radius:14px;border:1px solid #e6e6e6;background:#fff;color:var(--text)}
.btn{display:inline-block;padding:12px 16px;border-radius:999px;font-weight:800} .btn-primary{background:#38c6a0;color:#053e32} .btn-ghost{background:#f5f5f5;color:#1f2937}
.site-footer{background:#fafafa;border-top:1px solid #f1f1f1;padding:26px 0;margin-top:36px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.brand-inline{display:flex;align-items:center;gap:10px;margin-bottom:8px} .muted{color:#6b7280} .tiny{font-size:12px;margin-top:10px}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr}} :focus-visible{outline:3px solid #ff7070;outline-offset:2px}