/* =========================================================
   AccoTiva — Kinetic Financial Engine WordPress theme
   Smart Accounting. Clear Growth.
   ========================================================= */

:root {
  --background: #0a0a14;
  --foreground: #fafafa;
  --card: #15151f;
  --muted: #1a1a26;
  --muted-foreground: #a1a1b3;
  --primary: #3b5dff;
  --accent: #7ad9ff;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --kinetic-blue: #3b5dff;
  --kinetic-cyan: #7ad9ff;
  --gradient-brand: linear-gradient(135deg,#3b5dff,#7ad9ff);
  --gradient-headline: linear-gradient(90deg,#fff 0%, rgba(255,255,255,.45) 100%);
  --gradient-glow-blue: radial-gradient(circle, rgba(59,93,255,.18), transparent 70%);
  --shadow-glow: 0 0 30px rgba(59,93,255,.35);
  --shadow-card: 0 30px 60px rgba(0,0,0,.4);
  --radius: .75rem;
  --radius-xl: 1.5rem;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(59,93,255,.08), transparent),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(122,217,255,.05), transparent);
  background-attachment: fixed;
}
::selection { background: var(--kinetic-blue); color:#fff; }

img { max-width:100%; height:auto; display:block; }
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--foreground); }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; color: var(--foreground); }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }
p { margin: 0 0 1rem; }

/* ========== Layout ========== */
.at-container { max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .at-container { padding-inline: 3rem; } }
.at-section { padding-block: 5rem; }
.at-section-sm { padding-block: 3rem; }
.at-text-center { text-align: center; }
.at-mt-4 { margin-top: 1rem; } .at-mt-6 { margin-top: 1.5rem; } .at-mt-8 { margin-top: 2rem; }

.at-grid { display: grid; gap: 1.5rem; }
.at-grid-2,.at-grid-3,.at-grid-4 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .at-grid-2,.at-grid-3,.at-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) {
  .at-grid-3 { grid-template-columns: repeat(3,1fr); }
  .at-grid-4 { grid-template-columns: repeat(4,1fr); }
}

/* ========== Glass / cards ========== */
.at-glass {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  padding: 2rem;
  transition: border-color .3s, transform .3s;
}
.at-glass:hover { border-color: rgba(59,93,255,.5); transform: translateY(-2px); }

/* ========== Buttons ========== */
.at-btn {
  display: inline-flex; align-items: center; justify-content:center; gap:.5rem;
  padding: .875rem 2rem; border-radius: 9999px; font-weight: 600; font-size: .95rem;
  font-family: var(--font-sans); border: none; cursor: pointer; line-height: 1;
  transition: transform .2s, background .2s, box-shadow .2s, color .2s, border-color .2s;
}
.at-btn-primary { background: var(--gradient-brand); color:#fff; box-shadow: var(--shadow-glow); }
.at-btn-primary:hover { transform: translateY(-1px) scale(1.02); color:#fff; }
.at-btn-ghost { background: var(--foreground); color: var(--background); }
.at-btn-ghost:hover { background: rgba(250,250,250,.9); color: var(--background); }
.at-btn-outline { background: transparent; color: var(--foreground); border: 1px solid var(--border-strong); }
.at-btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ========== Eyebrow ========== */
.at-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .875rem; border-radius: 9999px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted-foreground);
}
.at-eyebrow::before { content:""; width:6px; height:6px; border-radius:9999px; background: var(--accent); animation: at-pulse 4s ease-in-out infinite; }

/* ========== Gradient text ========== */
.at-text-gradient { background: var(--gradient-headline); -webkit-background-clip: text; background-clip: text; color: transparent; }
.at-text-brand { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ========== Glow background ========== */
.at-glow-blue { position: relative; }
.at-glow-blue::before {
  content:""; position:absolute; inset:-10% 0 0 0;
  background: var(--gradient-glow-blue); opacity:.6; pointer-events:none; z-index:0;
}
.at-glow-blue > * { position: relative; z-index:1; }

/* ========== Stats ========== */
.at-stat { text-align:center; padding: 2rem 1rem; }
.at-stat-num { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.03em;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.at-stat-label { margin-top:.5rem; color: var(--muted-foreground); font-size:.9rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }

/* ========== Service icon ========== */
.at-icon-box { width:48px; height:48px; border-radius: var(--radius); background: var(--gradient-brand);
  display: grid; place-items: center; color:#fff; font-size:1.25rem; margin-bottom:1.25rem; box-shadow: var(--shadow-glow); }

/* ========== Forms ========== */
.at-input, .at-textarea, .at-select {
  width: 100%; padding: .875rem 1rem; background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--foreground); font-family: var(--font-sans); font-size: 1rem;
  transition: border-color .2s, background .2s;
}
.at-input:focus, .at-textarea:focus, .at-select:focus { outline:none; border-color: var(--kinetic-blue); background: rgba(255,255,255,.06); }
.at-textarea { min-height: 140px; resize: vertical; }
.at-label { display:block; font-size:.85rem; font-weight: 600; margin-bottom: .5rem; color: var(--foreground); }
.at-form-msg { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.at-form-msg.ok { background: rgba(122,217,255,.1); border: 1px solid rgba(122,217,255,.4); color: var(--accent); }
.at-form-msg.err { background: rgba(255,80,80,.1); border: 1px solid rgba(255,80,80,.4); color: #ff8a8a; }

/* ========== Header ========== */
.at-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,20,.8);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.at-header-inner { display:flex; align-items:center; justify-content: space-between; padding-block: 1rem; gap: 1rem; }
.at-logo { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.25rem; color: var(--foreground); }
.at-logo-mark { width:28px; height:28px; border-radius: 9999px; background: var(--gradient-brand); box-shadow: var(--shadow-glow); flex-shrink:0; }
.at-nav { display:none; gap: 1.75rem; font-size:.9rem; font-weight: 500; list-style:none; margin:0; padding:0; }
.at-nav a { color: var(--muted-foreground); }
.at-nav a:hover, .at-nav .current-menu-item > a { color: var(--foreground); }
.at-header-cta { display:none; }
@media (min-width: 1024px) { .at-nav { display:inline-flex; } .at-header-cta { display: inline-flex; } }
.at-menu-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--foreground);
  padding: .5rem .75rem; border-radius: .5rem; cursor: pointer; font-family: inherit;
}
@media (min-width: 1024px) { .at-menu-toggle { display: none; } }
.at-mobile-nav {
  display: none; border-top: 1px solid var(--border);
  background: rgba(10,10,20,.95); backdrop-filter: blur(20px);
}
.at-mobile-nav.open { display: block; }
.at-mobile-nav ul { list-style:none; margin:0; padding: 1rem 1.5rem; display: grid; gap: .25rem; }
.at-mobile-nav a { display: block; padding: .75rem .5rem; color: var(--muted-foreground); font-weight: 500; }
.at-mobile-nav a:hover { color: var(--foreground); }

/* ========== Footer ========== */
.at-footer { border-top: 1px solid var(--border); margin-top: 6rem; padding-block: 4rem 1.5rem; }
.at-footer h4 { font-size: .9rem; margin-bottom: 1rem; }
.at-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; color: var(--muted-foreground); font-size: .9rem; }
.at-footer-bottom {
  border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.5rem;
  font-size:.8rem; color: var(--muted-foreground);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap:.5rem;
}
.at-social { display:inline-flex; gap:.75rem; margin-top: 1.5rem; }
.at-social a {
  width:36px; height:36px; border-radius: 9999px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted-foreground);
  font-family: var(--font-mono); font-size: .85rem;
}
.at-social a:hover { color: var(--accent); border-color: var(--accent); }

/* ========== Page hero ========== */
.at-page-hero { padding-block: 5rem 3rem; text-align: center; position: relative; }
.at-page-hero::before {
  content:""; position:absolute; inset:-2rem 0 0; background: var(--gradient-glow-blue); opacity: .4; pointer-events:none;
}
.at-page-hero > * { position: relative; }
.at-page-hero p { color: var(--muted-foreground); max-width: 42rem; margin: 1rem auto 0; font-size: 1.0625rem; }

/* ========== Blog ========== */
.at-post-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .at-post-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .at-post-grid { grid-template-columns: repeat(3,1fr); } }
.at-post-card { display: flex; flex-direction: column; }
.at-post-card .at-post-thumb {
  aspect-ratio: 16/9; border-radius: 1rem; overflow:hidden; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(59,93,255,.3), rgba(122,217,255,.1));
}
.at-post-card .at-post-thumb img { width:100%; height:100%; object-fit: cover; }
.at-post-meta { font-family: var(--font-mono); font-size: .75rem; color: var(--muted-foreground); display: flex; gap: .5rem; }
.at-post-card h3 { margin: .5rem 0; font-size: 1.125rem; line-height: 1.4; }
.at-post-card h3 a { color: var(--foreground); }
.at-post-card h3 a:hover { color: var(--accent); }
.at-post-card .at-post-excerpt { color: var(--muted-foreground); font-size: .9rem; flex: 1; }

/* Single post */
.at-single { max-width: 760px; margin: 0 auto; padding-block: 3rem 5rem; }
.at-single .at-post-thumb { aspect-ratio: 16/9; border-radius: 1.5rem; overflow:hidden; margin: 2rem 0; }
.at-single .at-post-thumb img { width:100%; height:100%; object-fit:cover; }
.at-prose { color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.75; }
.at-prose p { margin-bottom: 1.25rem; }
.at-prose h2 { font-size: 1.75rem; margin-top: 2.5rem; margin-bottom: .75rem; color: var(--foreground); }
.at-prose h3 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: .5rem; color: var(--foreground); }
.at-prose ul, .at-prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.at-prose ul li, .at-prose ol li { margin-bottom: .35rem; }
.at-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.at-prose strong { color: var(--foreground); font-weight: 600; }
.at-prose blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; color: var(--foreground); font-style: italic; margin: 1.5rem 0; }
.at-prose img { border-radius: 1rem; margin: 1.5rem 0; }
.at-prose code { background: rgba(255,255,255,.05); padding: .15rem .4rem; border-radius: .25rem; font-family: var(--font-mono); font-size: .9em; }
.at-prose pre { background: rgba(0,0,0,.4); padding: 1rem 1.25rem; border-radius: .75rem; overflow-x:auto; }

/* Pagination */
.at-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; }
.at-pagination .page-numbers {
  padding: .5rem .85rem; border-radius: .5rem; background: rgba(255,255,255,.03);
  border: 1px solid var(--border); color: var(--muted-foreground); font-weight: 500;
}
.at-pagination .page-numbers.current,
.at-pagination .page-numbers:hover { color: var(--foreground); border-color: var(--accent); }

/* Comments */
.at-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.at-comments .comment-list { list-style: none; padding: 0; }
.at-comments .comment-body { padding: 1.25rem; background: rgba(255,255,255,.02); border:1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; }

/* Tools / calculators */
.at-tool-grid { display:grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .at-tool-grid { grid-template-columns: 1fr 1fr; } }
.at-tool-result { font-family: var(--font-mono); font-size: 1.125rem; color: var(--accent); margin-top: 1rem; }
.at-tool-result span { color: var(--foreground); font-weight: 700; font-size: 1.5rem; display: block; margin-top: .25rem; }

/* Animations */
@keyframes at-fade-up { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
@keyframes at-pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.at-fade-up { animation: at-fade-up .7s ease-out both; }
.at-fade-up-2 { animation: at-fade-up .7s ease-out .15s both; }
.at-fade-up-3 { animation: at-fade-up .7s ease-out .3s both; }

/* WP defaults the theme should still respect */
.alignleft { float:left; margin: .5rem 1.5rem 1rem 0; }
.alignright { float:right; margin: .5rem 0 1rem 1.5rem; }
.aligncenter { display:block; margin: 1rem auto; }
.wp-caption { max-width:100%; }
.wp-caption .wp-caption-text { font-size: .85rem; color: var(--muted-foreground); margin-top: .5rem; text-align:center; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

.at-widget { margin-bottom: 1.5rem; }
.at-widget-title { font-size: .9rem; margin-bottom: .75rem; color: var(--foreground); }
.at-widget ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; color: var(--muted-foreground); font-size: .9rem; }