.eyebrow { display:inline-flex; align-items:center; gap:.5rem; border:1px solid #dfe7ee; border-radius:999px; padding:.4rem .7rem; font-size:.78rem; font-weight:700; color:#35536f; background:#fff; }
.eyebrow::before { content:""; width:.45rem; height:.45rem; border-radius:999px; background:#1caf83; box-shadow:0 0 0 4px #d9f8eb; }
.card { border:1px solid #e5ebf0; border-radius:1.25rem; background:#fff; box-shadow:0 10px 30px rgba(11,20,36,.04); }
.soft-grid { background-image:linear-gradient(to right,rgba(11,20,36,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(11,20,36,.035) 1px,transparent 1px); background-size:28px 28px; }
.dot-grid { background-image:radial-gradient(rgba(49,69,95,.12) 1px,transparent 1px); background-size:18px 18px; }
.phone-frame { width:8.2rem; border:1px solid #cfd8e2; border-radius:1.7rem; background:#0b1424; padding:.35rem; box-shadow:0 20px 45px rgba(11,20,36,.15); }
.phone-screen { background:#fff; border-radius:1.4rem; min-height:15.6rem; overflow:hidden; }
.dash-line { height:.55rem; border-radius:999px; background:#e5ebf0; }
.dash-chip { border:1px solid #dfe7ee; border-radius:999px; padding:.28rem .48rem; font-size:.66rem; color:#53687d; background:#fff; white-space:nowrap; }
.logo-pill { display:flex; align-items:center; justify-content:center; gap:.55rem; padding:.75rem 1rem; border:1px solid #e3eaf0; border-radius:.9rem; background:#fff; color:#43576a; font-weight:700; }
.workflow-step { position:relative; min-width:8rem; }
.workflow-step:not(:last-child)::after { content:"→"; position:absolute; right:-1.25rem; top:50%; transform:translateY(-50%); color:#8aa0b5; font-weight:800; }
.dark-code { background:#07111f; border:1px solid #223248; border-radius:1rem; color:#d8e4ef; box-shadow:0 24px 60px rgba(3,10,18,.28); }
.faq details > summary { list-style:none; cursor:pointer; }
.faq details > summary::-webkit-details-marker { display:none; }
.faq details[open] .faq-plus { transform:rotate(45deg); }
.faq-plus { transition:transform .2s ease; }
.nav-panel { box-shadow:0 20px 60px rgba(11,20,36,.12); }
.focus-ring:focus-visible { outline:3px solid rgba(28,175,131,.28); outline-offset:3px; }
.nav-trigger { display:inline-flex; align-items:center; gap:.35rem; border-radius:.6rem; padding:.55rem .7rem; font-size:.875rem; font-weight:700; color:#475569; transition:.16s ease; }
.nav-trigger:hover,.nav-trigger:focus-visible { background:#f8fafc; color:#0f172a; outline:none; }
.nav-dropdown { position:relative; }
.nav-dropdown::after { content:""; position:absolute; left:0; right:0; top:100%; height:.85rem; }
.nav-dropdown-panel { position:absolute; left:50%; top:calc(100% + .75rem); transform:translateX(-50%) translateY(-4px); width:min(720px,80vw); padding:.75rem; border:1px solid #e2e8f0; border-radius:1rem; background:rgba(255,255,255,.98); box-shadow:0 22px 55px rgba(15,23,42,.14); opacity:0; visibility:hidden; pointer-events:none; transition:.16s ease; z-index:70; }
.nav-dropdown:hover .nav-dropdown-panel,.nav-dropdown:focus-within .nav-dropdown-panel,.nav-dropdown.is-open .nav-dropdown-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dropdown:hover .nav-caret,.nav-dropdown:focus-within .nav-caret,.nav-dropdown.is-open .nav-caret { transform:rotate(180deg); }
.nav-caret { transition:transform .16s ease; }
.nav-menu-link { display:flex; gap:.75rem; border-radius:.8rem; padding:.7rem; transition:.14s ease; }
.nav-menu-link:hover,.nav-menu-link:focus-visible { background:#f8fafc; outline:none; }
.nav-menu-icon { display:grid; width:2rem; height:2rem; flex:0 0 2rem; place-items:center; border-radius:.65rem; background:#f0fdfa; color:#0f766e; }
.mobile-nav-details summary { list-style:none; cursor:pointer; }
.mobile-nav-details summary::-webkit-details-marker { display:none; }
.mobile-nav-details[open] .mobile-nav-caret { transform:rotate(180deg); }
.mobile-nav-caret { transition:transform .16s ease; }
