.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border) 80%,transparent);transition:min-height var(--base) var(--ease),box-shadow var(--base) var(--ease)}
html{scroll-behavior:smooth}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
.nav{min-height:72px;display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;min-width:0}
.brand img{width:160px;height:auto;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.nav-links a{color:var(--muted);font-size:.92rem;font-weight:600}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.icon-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:transform var(--fast) var(--ease),border-color var(--fast),background var(--fast)}
.icon-btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 42%,var(--border))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.72rem 1rem;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:.93rem;cursor:pointer;transition:transform var(--fast) var(--ease),background var(--fast),border-color var(--fast)}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-1px)}
.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-secondary:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--border))}
.menu-btn{display:none}
.mobile-panel{display:none;border-top:1px solid var(--border);background:var(--surface)}
.mobile-panel.open{display:block}
.mobile-panel .container{padding-block:1rem 1.25rem;display:grid;gap:.25rem}
.mobile-panel a{padding:.8rem 0;border-bottom:1px solid var(--border);font-weight:650}
.mobile-panel a{display:inline-flex;align-items:center;gap:.4rem}
label{display:inline-flex;align-items:center;gap:.4rem}
label svg{flex-shrink:0;color:var(--muted)}
.hero{padding-block:clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:.75rem}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--brand);border-radius:2px}
h1,h2,h3{line-height:1.08;letter-spacing:-.025em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.6rem + 3vw,3.7rem);max-width:12ch}
h2{font-size:clamp(1.75rem,1.45rem + 1.2vw,2.35rem)}
h3{font-size:clamp(1.125rem,1rem + .45vw,1.45rem)}
.lead{font-size:clamp(1.05rem,1rem + .3vw,1.22rem);color:var(--muted);max-width:62ch;margin:1.15rem 0 1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:2rem;max-width:620px}
.hero-meta div{padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface) 82%,transparent)}
.hero-meta strong{display:block;font-size:.88rem}
.hero-meta span{color:var(--muted);font-size:.77rem}
.placeholder{aspect-ratio:4/3;border:1px solid var(--border);border-radius:var(--radius-lg);background:radial-gradient(circle at 72% 18%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 32%),linear-gradient(145deg,var(--surface),var(--surface-2));display:grid;place-items:center;position:relative;overflow:hidden;min-height:280px}
.placeholder::before,.placeholder::after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--muted) 20%,transparent);border-radius:50%;width:70%;aspect-ratio:1;left:-20%;top:8%}
.placeholder::after{width:55%;left:auto;right:-16%;top:auto;bottom:-18%}
.placeholder-content{position:relative;z-index:2;text-align:center;padding:1.5rem}
.placeholder-mark{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin:0 auto .9rem;background:var(--brand);color:#fff;font-weight:850;letter-spacing:.03em}
.placeholder small{color:var(--muted);display:block;margin-top:.35rem}
section{padding-block:var(--section-space);scroll-margin-top:88px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2rem}
.section-head p{color:var(--muted);max-width:58ch;margin:.65rem 0 0}
.grid{display:grid;gap:1.2rem}
.products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.solutions-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.insights-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;min-width:0;transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),border-color var(--base) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--brand) 26%,var(--border))}
.card .tag{display:inline-flex;border:1px solid var(--border);background:var(--surface-2);padding:.28rem .55rem;border-radius:999px;font-size:.72rem;font-weight:750;color:var(--muted);margin-bottom:.85rem}
.card p{color:var(--muted);margin:.75rem 0 1rem;font-size:.94rem}
.card .link{color:var(--brand);font-weight:750;font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem;transition:gap .2s ease}
.card .link:hover{gap:.55rem}
.flagship{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--brand-soft) 60%,var(--surface)));border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,2.25rem);overflow:hidden}
.flagship>*{min-width:0}
.flagship img{width:100%;height:100%;object-fit:cover;display:block}
.feature-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.4rem}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.42rem .68rem;font-size:.78rem;color:var(--muted)}
.ui-preview{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);padding:1rem;min-height:280px;display:grid;align-content:start;gap:.8rem;box-shadow:var(--shadow-sm)}
.ui-top{display:flex;justify-content:space-between;align-items:center}
.ui-badge{background:var(--brand-soft);color:var(--brand);font-weight:800;border-radius:999px;padding:.3rem .6rem;font-size:.72rem}
.progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.progress span{display:block;width:72%;height:100%;background:var(--brand)}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}
.mini{padding:.8rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);font-size:.82rem}
.ecosystem{display:grid;grid-template-columns:1.3fr .7fr;gap:1.25rem;align-items:start}
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.stack .card{display:flex;gap:.9rem;align-items:flex-start}
.number{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:850;flex:none}
.contact-grid{display:grid;grid-template-columns:1fr .8fr;gap:1.25rem}
form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.field{display:grid;gap:.3rem;margin-bottom:.7rem}
label{font-size:.82rem;font-weight:750}
input,textarea,select{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:12px;padding:.6rem .8rem;min-height:40px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
textarea{min-height:90px;resize:vertical}
.notice{display:none;margin-top:1rem;border-radius:12px;padding:.85rem 1rem;background:var(--brand-soft);color:var(--text);border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border))}
.notice.show{display:block}
.notice.success{background:#e8f5e9;border-color:#4caf50;color:#1b5e20}
.notice.error{background:#fbe9e7;border-color:#ef5350;color:#b71c1c}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.footer{border-top:1px solid var(--border);margin-top:var(--section-space);padding:clamp(2.5rem,5vw,4rem) 0 1.5rem;background:color-mix(in srgb,var(--brand) 94%,#000);color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
.footer p,.footer a{color:rgba(255,255,255,.75)}
.footer h3{font-size:.95rem;margin-bottom:.8rem;letter-spacing:0}
.footer-col{display:grid;align-content:start;gap:.5rem}
.footer-col a:hover{color:#fff}
.footer-bottom{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:.35rem .55rem;align-items:center}
.sep{opacity:.55}
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--slow) var(--ease-enter),transform var(--slow) var(--ease-enter)}
.reveal.is-visible{opacity:1;transform:none}
.dev-panel{position:fixed;right:1rem;bottom:1rem;width:min(360px,calc(100vw - 2rem));max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:1rem;z-index:100;display:none}
.dev-panel.open{display:block}
.dev-panel pre{white-space:pre-wrap;word-break:break-word;color:var(--muted);font-size:.75rem}
.back-to-top{position:fixed;bottom:1.5rem;right:1.5rem;width:48px;height:48px;border-radius:999px;background:var(--brand);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease,background .2s ease;z-index:90}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--brand-2);transform:translateY(-2px)}
.back-to-top:active{transform:scale(.95)}
@media(max-width:1023px){.nav-links{display:none}.menu-btn{display:grid}.hero-grid,.flagship,.ecosystem,.contact-grid{grid-template-columns:1fr}.products-grid,.solutions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.insights-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{max-width:14ch}.placeholder{min-height:240px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.nav{min-height:64px}.brand img{width:120px}.nav-actions .btn{display:none}.hero{padding-block:2.7rem}.hero-meta{grid-template-columns:1fr}.section-head{display:block}.section-head .btn{margin-top:.75rem}.products-grid,.solutions-grid,.insights-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:grid}.hero-actions .btn{flex:1 1 100%}body::before{background-size:62rem auto;opacity:.28}.container{padding-inline:var(--page-gutter)}}
@media(max-width:480px){.hero h1{font-size:1.75rem}.btn{padding:.6rem .8rem;font-size:.85rem}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.footer-bottom{grid-template-columns:1fr;text-align:center}.footer-legal{justify-content:center}}