/* =============================
   Infonions - site/assets/style.css
   Base styles + micro-interactions
   ============================= */

/* ----------------
   Theme variables
   ---------------- */
:root{
  --accent: #2B6CB0;
  --accent-2: #4F46E5;
  --muted: #6b7280;
  --bg: #ffffff;
  --card: #f8fafc;
  --text: #0f172a;
  --maxw: 1100px;
  --radius: 10px;
  --glass: rgba(255,255,255,0.6);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* ----------------
   Reset / base
   ---------------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);line-height:1.4}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:20px}

/* typography */
h1,h2,h3,h4{margin:0;color:var(--text)}
h1.hero-title{font-size:44px;line-height:1.02;margin:8px 0 6px;font-weight:700}
h2.section-title{font-size:20px;margin-bottom:6px;font-weight:700}
p.muted, .muted { color: var(--muted); font-size:15px }
.small{font-size:13px;color:var(--muted)}

/* utilities */
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.center{text-align:center}
.row{display:flex;gap:12px;align-items:center}

/* ----------------
   Header / nav
   ---------------- */
.site-header{background:var(--glass);position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:42px}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-weight:700}
.brand-sub{font-size:13px;color:var(--muted)}

/* main nav */
.main-nav{display:flex;gap:12px;align-items:center}
.nav-link{padding:8px 10px;border-radius:8px;color:var(--accent)}
.nav-link:hover{background:#f1f5f9}
.btn.btn-primary{padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;border:none;font-weight:600}
.btn.btn-ghost{padding:8px 12px;border-radius:8px;background:transparent;border:1px solid #e6eef6;color:var(--accent)}
.btn.btn-outline{padding:8px 12px;border-radius:8px;background:transparent;border:1px solid #d1d5db;color:var(--accent)}

/* mobile nav toggle */
.nav-toggle{display:none;border:none;background:transparent;font-size:20px;padding:6px 8px;cursor:pointer}
@media (max-width:900px){
  .main-nav{display:none;position:absolute;right:18px;top:62px;background:var(--bg);flex-direction:column;padding:12px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.06)}
  .nav-toggle{display:inline-flex}
  .main-nav.open{display:flex}
}

/* ----------------
   Hero
   ---------------- */
.hero{padding:28px 0}
.hero-grid{display:grid;gap:18px;align-items:start}
.hero-left{padding-right:8px}
.hero-sub{color:var(--muted);max-width:62%}
.hero-actions{display:flex;gap:10px;margin-top:12px}

/* quick stats */
.quick-stats li{display:flex;flex-direction:column;align-items:flex-start}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#eef2ff;color:var(--accent)}

/* card */
.card{background:#fff;padding:16px;border-radius:12px;border:1px solid #f1f5f9;box-shadow:0 6px 18px rgba(2,6,23,0.02)}
.card h3, .card h4{margin-top:0}

/* forms */
.quick-form input, input, select, textarea{
  padding:10px 12px;border-radius:8px;border:1px solid #e6eef6;font-size:15px;width:100%;
  background:#fff;color:var(--text);
}
.quick-form .full{flex:1}
.form-row{display:flex;gap:8px}

/* grid-3 for sections */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:880px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .grid-3{grid-template-columns:1fr} }

/* cta */
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 10px 30px rgba(2,6,23,0.04)}

/* footer */
.site-footer{border-top:1px solid #eef2f6;padding:18px 0;margin-top:28px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-right a{margin-left:12px;color:var(--muted);font-size:14px}

/* ----------------
   Small components / utilities
   ---------------- */
.kpi-row{display:flex;gap:20px;margin-top:18px}
.kpi{background:#f8fafc;padding:12px;border-radius:12px;min-width:120px;text-align:center}
.kpi .num{font-weight:700;font-size:20px}
.helper{font-size:13px;padding:8px 10px;border-radius:10px;background:#0f172a;color:#fff;display:inline-block;box-shadow:0 10px 30px rgba(2,6,23,0.12)}

/* accessibility helpers */
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

/* ----------------
   Buttons variants & helpers
   ---------------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;border:none;cursor:pointer}
.btn.secondary{background:#fff;color:var(--accent);border:1px solid #d1d5db}
.btn.full{width:100%}

/* primary gradient shimmer helper class */
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));background-size:200% 100;}
.btn-primary.hover-shimmer:hover{animation: shimmer 2.2s linear infinite;}

/* ripple helper (JS will add .ripple-effect) */
.btn.ripple{overflow:hidden;position:relative}

/* ----------------
   Responsive tweaks
   ---------------- */
@media (max-width:720px){
  .hero-grid{grid-template-columns:1fr}
  .hero-sub{max-width:100%}
  .header-inner{padding:10px 0}
  .nav-toggle{display:inline-flex}
}

/* ----------------
   Your micro-interactions + animations
   (appended from your snippet)
   ---------------- */

/* subtle focus outlines for accessibility */
:focus { outline: 3px solid rgba(79,70,229,0.12); outline-offset: 3px; }

/* card hover lift */
.card {
  transition: transform 280ms cubic-bezier(.2,.9,.2,1), box-shadow 280ms;
  will-change: transform;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(15,23,42,0.10);
}

/* buttons: micro-press */
.btn {
  position: relative;
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.997); }

/* primary gradient shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.btn-primary {
  background-size: 400% 100%;
}
.btn-primary.hover-shimmer:hover { animation: shimmer 2.2s linear infinite; }

/* subtle outline on focus for ghost/outline buttons */
.btn-ghost:focus, .btn-outline:focus { box-shadow: 0 6px 20px rgba(79,70,229,0.08); }

/* floating action micro shadow for CTA */
.cta-inner { transition: transform 360ms cubic-bezier(.2,.9,.2,1); }
.cta-inner:hover { transform: translateY(-4px); }

/* small badges */
.badge {
  display:inline-block;padding:6px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#eef2ff;color:var(--accent);
}

/* header shrink on scroll */
.site-header {
  transition: backdrop-filter 280ms, padding 220ms, box-shadow 220ms;
  padding: 18px 0;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(0px);
}
.site-header.scrolled {
  padding: 8px 0;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}

/* nav slide (mobile) */
.main-nav.mobile-open {
  display:flex !important;
  animation: navSlideIn 260ms ease both;
}
@keyframes navSlideIn {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.997);
  transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* skeleton loader (use class .skeleton) */
.skeleton {
  background: linear-gradient(90deg,#f3f4f6,#f8fafc,#f3f4f6);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s linear infinite;
  border-radius: 8px;
}
@keyframes skeletonShimmer {
  0% { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

/* subtle tooltip-like helper */
.helper {
  font-size:13px;padding:8px 10px;border-radius:10px;background:#0f172a;color:#fff;display:inline-block;
  box-shadow: 0 10px 30px rgba(2,6,23,0.12);
}

/* ripple effect (JS adds .ripple span) */
.btn.ripple { overflow:hidden; position:relative; }
.btn.ripple .ripple-effect {
  position:absolute; border-radius:50%; transform:scale(0); opacity:0.45;
  background: rgba(255,255,255,0.32); pointer-events:none;
  animation: rippleAnim 620ms cubic-bezier(.2,.9,.2,1);
}
@keyframes rippleAnim {
  to { transform:scale(2.6); opacity:0; }
}

/* small-screen optimizations */
@media (max-width:520px){
  .hero-title { font-size:20px }
  .brand-title { font-size:15px }
  .cta-inner { flex-direction:column; gap:12px; }
}

/* tiny accessibility helpers */
.visually-hidden { position:absolute !important; height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap; }