/* Trimio site — light skin. Shared styles: hover states, nav, responsive.
   Layout/spacing stays inline per the design references; this file only holds
   what inline styles can't express (hover, media queries, keyframes). */

:root{
  --paper:#FFFFFF; --panel:#F5F5F7; --ink:#0F0F0F; --body:#1D1D1F;
  --muted:#6E6E73; --faint:#86868B; --orange:#FF8000; --orange-hover:#FF9226;
  --green:#12B76A;
}
html{scroll-padding-top:84px}
body{margin:0;background:#FFFFFF;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#1D1D1F}
a{color:inherit;text-decoration:none}
a:hover{color:#FF8000}
input,button,select,textarea{font-family:'Inter',system-ui,sans-serif}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:#FF8000;color:#0F0F0F;font-weight:700;border:none;border-radius:9px;cursor:pointer}
.btn-primary:hover{background:#FF9226;color:#0F0F0F}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(15,15,15,.25);color:#0F0F0F;font-weight:600;background:none;border-radius:9px;cursor:pointer}
.btn-secondary:hover{border-color:rgba(15,15,15,.5);color:#0F0F0F}

/* Cards that lift on hover */
.card-lift{transition:all .2s}
.card-lift:hover{border-color:rgba(15,15,15,.28)!important;transform:translateY(-3px);color:inherit}

/* Links that darken to ink instead of orange */
.link-ink:hover{color:#0F0F0F}

/* ── Nav ── */
.nav-outer{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(15,15,15,.1)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:34px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:13.5px}
.navlink{color:rgba(15,15,15,.66);font-weight:500}
.navlink:hover{color:#0F0F0F}
body[data-page="product"] .navlink[data-nav="product"],
body[data-page="pricing"] .navlink[data-nav="pricing"],
body[data-page="financial"] .navlink[data-nav="financial"],
body[data-page="developers"] .navlink[data-nav="developers"],
body[data-page="solutions"] .navlink[data-nav="solutions"]{color:#0F0F0F;font-weight:600}
.nav-caret{font-size:8px;display:inline-block;transform:rotate(0deg);transition:transform .18s}
.nav-drop-wrap.open .nav-caret{transform:rotate(180deg)}
.nav-drop{position:absolute;top:100%;left:-24px;padding-top:16px;z-index:90;display:none}
.nav-drop-wrap.open .nav-drop{display:block}
.droplink{display:block;padding:9px 12px;border-radius:10px}
.droplink:hover{background:rgba(15,15,15,.06);color:inherit}
.droplink .t{color:#0F0F0F;font-weight:600;font-size:13.5px}
.droplink .d{color:rgba(15,15,15,.55);font-size:12.5px;margin-top:2px;line-height:1.45}
.nav-burger{background:none;border:1px solid rgba(15,15,15,.22);border-radius:8px;padding:9px 10px;cursor:pointer;display:none;flex-direction:column;gap:4px}
.nav-burger span{display:block;width:16px;height:2px;background:#0F0F0F}
.nav-mobile{display:none;border-top:1px solid rgba(15,15,15,.1);padding:18px 24px 22px;flex-direction:column;gap:4px}
.nav-mobile a{color:#0F0F0F;font-size:15px;font-weight:600;padding:9px 0}
.nav-mobile .nav-mobile-cta{margin-top:12px;background:#FF8000;font-weight:700;font-size:14px;padding:12px 18px;border-radius:8px;text-align:center}
.nav-cta{background:#FF8000;color:#0F0F0F;font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:8px}
.nav-cta:hover{background:#FF9226;color:#0F0F0F}
@media (max-width:979.98px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-mobile.open{display:flex}
}

/* Hero marquee */
@keyframes trimioMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[data-marquee-track]{display:flex;width:max-content;animation:trimioMarquee 30s linear infinite}
[data-marquee-track]:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){[data-marquee-track]{animation:none!important}}

/* FAQ accordions */
.faq-item{border-bottom:1px solid rgba(15,15,15,.1)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;cursor:pointer;text-align:left;padding:20px 0;font-size:16.5px;font-weight:600;color:#0F0F0F}
.faq-ind{font-size:20px;font-weight:300;color:#86868B;flex:none}
.faq-a{display:none;padding:0 0 22px;font-size:15px;font-weight:300;line-height:1.65;color:#6E6E73;max-width:720px}
.faq-item.open .faq-a{display:block}

/* Code tabs (Developers) */
.code-tab{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.6);font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px}
.code-tab.active{background:rgba(255,255,255,.14);color:#FFFFFF}
.code-pane{display:none}
.code-pane.active{display:block}

/* Trust modal */
.modal-overlay{position:fixed;inset:0;background:rgba(15,15,15,.72);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{display:flex}

/* Forms */
.field-label{display:block;font-size:12.5px;font-weight:600;color:#0F0F0F;margin-bottom:7px}
.field-input{width:100%;box-sizing:border-box;background:#FFFFFF;border:1px solid rgba(15,15,15,.16);border-radius:9px;padding:12px 14px;font-size:14.5px;color:#0F0F0F;outline:none}
.field-input::placeholder{color:#A8A8AD}
.field-input:focus{border-color:rgba(15,15,15,.4)}
button[disabled].btn-primary{opacity:.45;cursor:not-allowed}
button[disabled].btn-primary:hover{background:#FF8000}