/* Native selects retain keyboard/mobile behavior with consistent inner spacing. */
.form-grid select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  padding: 12px 44px 12px 15px;
  line-height: 1.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b506a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
  cursor: pointer;
}
[data-theme=dark] .form-grid select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b6c8e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form-grid :is(input, select, textarea) { transition: border-color .2s, box-shadow .2s, background-color .2s; }
.form-grid :is(input, select, textarea):hover { border-color: var(--blue); }
.form-grid :is(input, select, textarea):focus-visible { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb,var(--blue) 12%,transparent); }
.problem-card, .audience-grid article, .security-items > div, .proof-item > svg, .button svg, .step-icon { transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease; }
.problem-card, .audience-grid article { background-image: radial-gradient(ellipse at top right, color-mix(in srgb,var(--blue) 4%,transparent),transparent 70%); }
.feature-panel { transition: border-color .25s, box-shadow .25s; }
.feature-panel:focus-within { border-color: var(--blue); }
.button { position: relative; overflow: hidden; }
.button:after { content: ''; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 20%,#ffffff20 48%,transparent 76%); transform: translateX(-120%); }
.nav-inner nav a { position: relative; }
.nav-inner nav a:after { content: ''; position: absolute; bottom: 6px; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-inner nav a:hover:after, .nav-inner nav a:focus-visible:after { transform: scaleX(1); }
.faq-list details[open] > p { animation: answer-enter .3s ease-out; }
.feature-media img { animation: screen-enter .4s ease-out; }
.hero-grid { animation: grid-settle 4s ease-out both; }
.ring-outer { animation: orbit-arrive 2.8s ease-out both; }
.demo-form:focus-within { box-shadow: 0 18px 60px color-mix(in srgb,var(--blue) 12%,transparent); }
@media (hover:hover) and (pointer:fine) {
  .problem-card:hover, .audience-grid article:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--blue) 40%,var(--line)); box-shadow: 0 16px 36px color-mix(in srgb,var(--blue) 9%,transparent); }
  .security-items > div:hover { transform: translateX(4px); }
  .proof-item:hover > svg, .steps article:hover .step-icon { transform: translateY(-3px); }
  .button:hover svg { transform: translate(2px,-2px); }
  .button:hover:after { animation: button-sheen .65s ease-out; }
}
@keyframes answer-enter { from { opacity: .5; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes screen-enter { from { opacity: .6; } to { opacity: 1; } }
@keyframes grid-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: .12; transform: translateY(0); } }
@keyframes orbit-arrive { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes button-sheen { to { transform: translateX(120%); } }
@media (prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none!important; transition: none!important; }
  .problem-card:hover, .audience-grid article:hover, .security-items > div:hover, .proof-item:hover > svg, .steps article:hover .step-icon, .button:hover svg { transform: none; }
}