:root{--bg:#f8fafb;--text:#0b0d12;--muted:#5c6674;--card:#ffffff;--border:#e6eaf1;--accent:#27b37e;--accent2:#0097e6;--ink:#0b0d12;--ink2:#111827}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(135deg, rgba(43,196,138,.06) 0%, rgba(0,167,255,.06) 100%), var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6}
a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:24px}
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#ffffff;border-bottom:1px solid var(--border)}
.header .container{padding:16px 28px}
.brand{font-weight:700;letter-spacing:.2px;text-decoration:none;color:var(--text)}
.nav{display:flex;gap:14px;font-size:14px}
.nav a{text-decoration:none;color:var(--text)}
.nav a:hover{color:var(--accent)}
.hero{padding:20px 0}
.hero h1{margin:0 0 8px;font-size:clamp(32px,5vw,60px);line-height:1.08;letter-spacing:-.02em}
.hero p{margin:0;color:var(--muted)}
.hero-box{background:linear-gradient(135deg, rgba(43,196,138,.08) 0%, rgba(0,167,255,.08) 100%), #ffffff;border:1px solid var(--border);border-radius:16px;padding:18px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.blob{width:100%;min-height:140px;border-radius:16px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.logo-mark{width:120px;height:120px;opacity:.85}
.logo-wordmark{width:180px;height:auto;opacity:.95;object-fit:contain}
.logo-wordmark.blend{mix-blend-mode:multiply;opacity:.9;filter:saturate(108%)}
.header .logo-wordmark{height:56px;width:auto}
.container main.container, main.container{padding-top:112px}
.section{margin-top:32px}
.section h2{margin:0 0 12px;font-size:20px}
.section.alt{background:#ffffff;border:1px solid var(--border);border-radius:16px;padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-decoration:none;color:var(--text);transition:transform .12s ease,border-color .12s ease}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.card .title{font-weight:600}
.card .desc{color:var(--muted);font-size:14px}
.card .price{margin-top:8px;font-weight:600}
.card.visual{position:relative;min-height:220px;padding:16px;background:linear-gradient(135deg,#ffffff,#f8fafb)}
.card.visual::before{content:"";position:absolute;inset:0;border-radius:12px;background-image:var(--card-image);background-size:cover;background-position:center;opacity:.12}
.card.visual .title{position:relative;font-size:18px}
.card.visual .desc{position:relative}
.card.visual .price{position:relative}
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:#dbe3ef;border-radius:8px}
.slide{scroll-snap-align:start;flex:0 0 300px}
.cta-row{display:flex;gap:12px;align-items:center;margin-top:14px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.feature{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:14px}
.feature .icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#eaf7ff,#f6fffb);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.feature .title{font-weight:600}
.feature .desc{color:var(--muted);font-size:14px}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.input,.select{padding:10px;border:1px solid var(--border);border-radius:8px;background:#ffffff;color:var(--text)}
.input::placeholder{color:var(--muted)}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;border:1px solid var(--border);background:#fff;color:var(--text)}
.btn.primary{background:var(--accent);color:#0b0d12;border:1px solid var(--accent)}
.btn.primary:hover{filter:brightness(1.05)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#f1f6ff;color:var(--text);font-size:12px}
.badge.ok{background:#eafdf4;border-color:#c7f3db}
.announce{background:#fff;border-bottom:1px solid var(--border)}
.announce .container{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 24px;color:var(--muted);font-size:14px}
.announce .strong{color:var(--text);font-weight:600}
.breadcrumb{font-size:14px;margin-bottom:12px;color:var(--muted)}
.footer{border-top:1px solid var(--border);color:var(--muted)}
.footer-cta{background:linear-gradient(135deg, rgba(43,196,138,.12), rgba(0,167,255,.12));padding:18px;border:1px solid var(--border);border-radius:14px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-cta .title{font-weight:700;color:var(--text);font-size:18px}
.footer-cta .desc{color:var(--muted)}
.footer-cta .cta{white-space:nowrap}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.container{padding:16px}}
@media (max-width:720px){.nav{gap:10px}.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.slide{flex:0 0 240px}}
.card .icon{width:36px;height:36px;border-radius:10px;background:#eef3f9;display:flex;align-items:center;justify-content:center;margin-bottom:8px;font-size:18px}