/* Force font-display swap for all web fonts */
@font-face { font-display: swap; }
/* ── CALCUS.ONLINE — GLOBAL STYLESHEET ─────────────── */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:        #F8FAFC;
  --surface:   #FFFFFF;
  --border:    #E2E8F0;
  --text:      #0F172A;
  --muted:     #64748B;
  --accent:    #2563EB;
  --accent-lt: #EFF6FF;
  --accent-hv: #1D4ED8;
  --cat-finance:  #0EA5E9;
  --cat-health:   #10B981;
  --cat-text:     #8B5CF6;
  --cat-dev:      #F59E0B;
  --cat-unit:     #EC4899;
  --cat-image:    #06B6D4;
  --cat-pdf:      #EF4444;
  --cat-utility:  #6366F1;
  --radius:   10px;
  --shadow:   0 1px 3px rgba(0,0,0,.07);
  --shadow-hv:0 4px 16px rgba(37,99,235,.13);
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}

/* ── HEADER ──────────────────────────────────────────── */
.site-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:16px}
.logo{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--accent);letter-spacing:-0.5px;flex-shrink:0;text-decoration:none;line-height:1}
.logo span{color:var(--text)}
.header-search{flex:1;min-width:0;max-width:480px;position:relative}
.header-search input{width:100%;padding:9px 16px 9px 40px;border:1.5px solid var(--border);border-radius:10px;font-family:var(--font-body);font-size:14px;background:var(--bg);color:var(--text);transition:border-color .2s,box-shadow .2s;outline:none}
.header-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.header-search input::placeholder{color:var(--muted)}
.header-search .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
/* Header right group */
.header-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}

.header-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}

/* Hamburger */


/* Donate button */
.btn-donate{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:linear-gradient(135deg,#F59E0B,#EF4444);color:#fff;border:none;border-radius:10px;font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;flex-shrink:0;transition:opacity .15s;white-space:nowrap;box-shadow:0 2px 8px rgba(239,68,68,.25)}
.btn-donate:hover{opacity:.9}


/* ── CURRENCY SWITCHER ──────────────────────────────── */
.currency-wrap{position:relative;flex-shrink:0}
.currency-btn{display:flex;align-items:center;gap:5px;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);transition:all .15s;white-space:nowrap;line-height:1}
.currency-btn:hover{border-color:var(--accent);color:var(--accent)}
.currency-btn svg{color:var(--muted);flex-shrink:0}
.currency-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:400;min-width:240px;max-height:320px;overflow-y:auto;display:none}
.currency-menu.open{display:block}
.currency-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s;font-size:13px}
.currency-option:hover{background:var(--bg)}
.currency-option.active{background:var(--accent-lt);color:var(--accent)}
.currency-option:first-child{border-radius:10px 10px 0 0}
.currency-option:last-child{border-radius:0 0 10px 10px}
.curr-flag{font-size:16px;flex-shrink:0}
.curr-info strong{margin-right:4px}

/* ── LANGUAGE SWITCHER ───────────────────────────────── */
.lang-wrap{position:relative;flex-shrink:0}
.lang-btn{display:flex;align-items:center;gap:5px;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);transition:all .15s;white-space:nowrap;line-height:1}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-btn svg{color:var(--muted);flex-shrink:0}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:400;min-width:220px;max-height:320px;overflow-y:auto;display:none}
.lang-menu.open{display:block}
.lang-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s;font-size:13px}
.lang-option:hover{background:var(--bg)}
.lang-option.active{background:var(--accent-lt);color:var(--accent)}
.lang-option:first-child{border-radius:10px 10px 0 0}
.lang-option:last-child{border-radius:0 0 10px 10px}

/* ── COOKIE BANNER (improved) ───────────────────────── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#0F172A;border-top:2px solid #2563EB;padding:16px 24px;z-index:9999;display:flex;align-items:center;gap:16px;flex-wrap:wrap;transform:translateY(110%);transition:transform .4s cubic-bezier(.4,0,.2,1);contain:layout style}
.cookie-banner.show{transform:translateY(0)}
.cookie-icon{font-size:28px;flex-shrink:0}
.cookie-text{flex:1;min-width:200px}
.cookie-title{font-family:var(--font-head);font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.cookie-text p{font-size:12px;color:#94A3B8;line-height:1.5;margin:0}
.cookie-text p a{color:#60A5FA;text-decoration:underline}
.cookie-text p strong{color:#E2E8F0}
.cookie-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.cookie-accept{padding:9px 18px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap}
.cookie-accept:hover{background:var(--accent-hv)}
.cookie-decline{padding:9px 16px;background:transparent;color:#94A3B8;border:1px solid #334155;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
.cookie-decline:hover{border-color:#64748B;color:#fff}
.cookie-manage{padding:9px 16px;background:transparent;color:#60A5FA;border:1px solid #1E40AF;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
.cookie-manage:hover{background:#1E3A5F}

/* ── BREADCRUMB ──────────────────────────────────────── */
.breadcrumb{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 20px}
.breadcrumb-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.breadcrumb a{color:var(--muted);transition:color .15s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--text);font-weight:500}
.breadcrumb-sep{color:var(--border)}

/* ── PAGE HERO ─────────────────────────────────────────*/
.page-hero{background:linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%);color:#fff;padding:48px 20px 40px}
.page-hero-inner{max-width:1200px;margin:0 auto}
.page-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:100px;padding:4px 14px;font-size:12px;font-weight:500;color:#93C5FD;margin-bottom:14px}
.page-hero h1{font-family:var(--font-head);font-size:clamp(24px,4vw,38px);font-weight:700;line-height:1.2;margin-bottom:10px;letter-spacing:-0.5px}
.page-hero p{font-size:15px;color:#94A3B8;max-width:560px}

/* ── MAIN LAYOUT ──────────────────────────────────────
   Single-column layout (no side-by-side sidebar). Related
   tools / quick tips / reference cards render as a full-
   width row below the main tool content, in source order. */
.page-main{max-width:1200px;margin:0 auto;padding:40px 20px 60px}
.page-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}

/* ── CARD ──────────────────────────────────────────── */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:28px}
.card-title{font-family:var(--font-head);font-size:17px;font-weight:700;margin-bottom:20px;color:var(--text)}

/* ── FORM ELEMENTS ─────────────────────────────────── */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-hint{font-size:12px;color:var(--muted);margin-bottom:6px;display:block}
.form-input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:15px;color:var(--text);background:var(--surface);transition:border-color .2s,box-shadow .2s;outline:none}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-select{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:15px;color:var(--text);background:var(--surface);cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.form-select:focus{border-color:var(--accent)}
.input-prefix-wrap{position:relative}
.input-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;pointer-events:none}
.input-prefix-wrap .form-input{padding-left:28px}
.input-suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.input-suffix-wrap .form-input{padding-right:44px}
input[type="range"]{width:100%;accent-color:var(--accent);cursor:pointer;height:4px}

/* ── BUTTON ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 24px;border-radius:8px;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-primary{background:var(--accent);color:#fff;width:100%}
.btn-primary:hover{background:var(--accent-hv)}
.btn-secondary{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:7px 16px;font-size:13px}

/* ── RESULT BOX ─────────────────────────────────────── */
.result-box{background:linear-gradient(135deg,#EFF6FF,#F0FDF4);border:1.5px solid #BFDBFE;border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:20px}
.result-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:6px}
.result-value{font-family:var(--font-head);font-size:36px;font-weight:700;color:var(--accent);line-height:1;margin-bottom:4px}
.result-sub{font-size:13px;color:var(--muted)}
.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.result-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:14px;text-align:center}
.result-item-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.result-item-value{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--text)}

/* ── TABS ────────────────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:24px}
.tab-btn{padding:10px 18px;font-size:14px;font-weight:500;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:color .15s,border-color .15s}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* ── TABLE ───────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{background:var(--bg);padding:10px 14px;text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--border)}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--bg)}
.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border)}

/* ── BELOW-CONTENT TOOL CARDS (related tools / quick tips / reference) ───
   Renders after the main tool content, full width, cards side by side on
   wider screens and stacked on mobile. "Quick Tips" stays visually last
   because it is already the last card in each page's source order. */
.sidebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;order:99;margin-top:12px;padding-top:32px;border-top:1.5px solid var(--border)}
.related-list{display:flex;flex-direction:column;gap:8px}
.related-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);transition:border-color .15s,background .15s;font-size:13px;font-weight:500;color:var(--text)}
.related-item:hover{border-color:var(--accent);background:var(--accent-lt);color:var(--accent)}
.related-item-icon{font-size:16px}

/* ── SEO CONTENT ────────────────────────────────────── */
.seo-content{margin-top:48px}
.seo-content h2{font-family:var(--font-head);font-size:22px;font-weight:700;margin-bottom:12px;margin-top:32px;color:var(--text)}
.seo-content h2:first-child{margin-top:0}
.seo-content h3{font-family:var(--font-head);font-size:17px;font-weight:600;margin-bottom:8px;margin-top:24px;color:var(--text)}
.seo-content p{color:#334155;margin-bottom:14px;font-size:15px;line-height:1.75}
.seo-content ul{list-style:disc;padding-left:22px;margin-bottom:14px;color:#334155}
.seo-content ul li{margin-bottom:6px;font-size:15px;line-height:1.6}

/* ── FAQ ─────────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.faq-item{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-q{width:100%;text-align:left;padding:16px 20px;background:var(--surface);border:none;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q:hover{background:var(--bg)}
.faq-q svg{flex-shrink:0;transition:transform .2s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{display:none;padding:0 20px 16px;font-size:14px;color:#475569;line-height:1.7;background:var(--surface)}
.faq-item.open .faq-a{display:block}

/* ── ALERT ───────────────────────────────────────────── */
.alert{padding:14px 16px;border-radius:8px;font-size:14px;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.alert-info{background:#EFF6FF;border:1px solid #BFDBFE;color:#1E40AF}
.alert-warn{background:#FFFBEB;border:1px solid #FDE68A;color:#92400E}
.alert-success{background:#ECFDF5;border:1px solid #6EE7B7;color:#065F46}

/* ── CHART BAR ──────────────────────────────────────── */
.chart-bar-wrap{margin-bottom:10px}
.chart-bar-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
.chart-bar-track{height:10px;background:var(--bg);border-radius:100px;overflow:hidden}
.chart-bar-fill{height:100%;border-radius:100px;transition:width .5s ease}

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer{background:#0F172A;color:#94A3B8;padding:52px 20px 28px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.8fr repeat(4,1fr);gap:32px;margin-bottom:40px}
.footer-brand .logo{display:block;margin-bottom:10px}
.footer-brand .logo span{color:#64748B}
.footer-brand p{font-size:13px;line-height:1.7;color:#64748B}
.footer-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:3px 12px;font-size:11px;color:#64748B;margin-top:12px}
.footer-col h4{font-family:var(--font-head);font-size:11px;font-weight:700;color:#E2E8F0;margin-bottom:14px;text-transform:uppercase;letter-spacing:.8px}
.footer-col ul{display:flex;flex-direction:column;gap:8px}
.footer-col ul li a{font-size:13px;color:#64748B;transition:color .15s}
.footer-col ul li a:hover{color:#fff}
.footer-divider{border:none;border-top:1px solid #1E293B;margin-bottom:20px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:#475569}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:#475569;transition:color .15s}
.footer-links a:hover{color:#fff}

/* ── UTILITY ─────────────────────────────────────────── */
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mb-4{margin-bottom:16px}
.divider{border:none;border-top:1px solid var(--border);margin:32px 0}

/* ── LEGAL PAGES ────────────────────────────────────── */
.legal-body{max-width:760px}
.legal-body h2{font-family:var(--font-head);font-size:19px;font-weight:700;margin:32px 0 10px;color:var(--text)}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:15px;line-height:1.75;color:#334155;margin-bottom:14px}
.legal-body ul{list-style:disc;padding-left:22px;margin-bottom:14px}
.legal-body ul li{font-size:15px;line-height:1.7;color:#334155;margin-bottom:6px}
.last-updated{display:inline-block;background:var(--accent-lt);color:var(--accent);font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:28px}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.header-search{max-width:none;flex:1}.result-grid{grid-template-columns:1fr 1fr}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:640px){
  .header-inner{flex-wrap:wrap;height:auto;padding:10px 16px;gap:8px}
  .logo{order:1;font-size:20px}
  .header-right{order:2;gap:8px;margin-left:auto}
  .header-search{order:3;flex-basis:100%;max-width:none}
  .lang-wrap{order:2}
  .currency-wrap{order:2}
  .btn-donate{order:2}
}

@media(max-width:480px){#currCode{display:none}#langCode{display:none}.currency-btn,.lang-btn{padding:7px 9px;font-size:12px}.btn-donate{padding:8px 12px;font-size:12px}.cookie-actions{width:100%}}
@media(max-width:480px){.result-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr}}

/* ── GOOGLE TRANSLATE WIDGET (hide default chrome, keep our own UI) ── */
.goog-te-banner-frame.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
#google_translate_element{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}

/* Prevent CLS from font swap */
@font-face {
  font-family: 'Inter';
  src: local('system-ui');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
/* Ensure images don't cause CLS */
img { max-width: 100%; height: auto; }
/* Prevent layout shift from form elements */
select, input, textarea { font-family: inherit; }

/* ── SEO & PERFORMANCE ADDITIONS ───────────────────────────────── */

/* Improve Core Web Vitals - reduce layout shift */
img { max-width: 100%; height: auto; display: block; }
canvas { display: block; }

/* Ensure tool cards have defined height to reduce CLS */
.tool-card { contain: layout style; }

/* Reading progress bar for long pages */
#reading-progress {
  position: fixed; top: 0; left: 0; width: 0%;
  height: 3px; background: var(--accent); z-index: 9999;
  transition: width 0.1s linear; border-radius: 0 2px 2px 0;
}

/* "Also use" link hover */
.also-use-links a:hover { text-decoration: underline; }

/* Print styles */
@media print {
  #site-header, #site-footer, .sidebar, .breadcrumb, .tbtn, button { display: none !important; }
  .page-main { max-width: 100%; padding: 0; }
  .card { border: 1px solid #ccc; break-inside: avoid; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* Skip to content for accessibility/SEO */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: #fff;
  padding: 8px 16px; z-index: 1000; border-radius: 0 0 8px 0;
  font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* Ensure FAQ answers have proper spacing for readability */
.faq-a { line-height: 1.7; }

/* Table styles for SEO content tables */
.seo-content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.seo-content th { background: var(--accent); color: #fff; padding: 8px 12px; }
.seo-content td { padding: 8px 12px; border-bottom: 1px solid var(--border); }


/* ════════════════════════════════════════════════════
   ANIMATION SYSTEM — Fast, smooth, no library needed
   ════════════════════════════════════════════════════ */

/* ── Page load fade-in ──────────────────────────────── */
body { animation: bodyFadeIn .35s ease-out both; }
@keyframes bodyFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── Scroll reveal ──────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .5s ease,transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(-28px); transition:opacity .5s ease,transform .5s ease; }
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(28px); transition:opacity .5s ease,transform .5s ease; }
.reveal-right.visible { opacity:1; transform:none; }

/* Staggered children */
.stagger-children > * { opacity:0; transform:translateY(20px); transition:opacity .45s ease,transform .45s ease; }
.stagger-children.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:.05s; }
.stagger-children.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.1s; }
.stagger-children.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.15s; }
.stagger-children.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.2s; }
.stagger-children.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:.25s; }
.stagger-children.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:.3s; }
.stagger-children.visible > *:nth-child(n+7) { opacity:1; transform:none; transition-delay:.35s; }

/* ── Button animations ──────────────────────────────── */
.tbtn, button, .btn {
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease !important;
  position: relative; overflow: hidden;
}
.tbtn:hover, button:hover:not(:disabled), .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.25);
}
.tbtn:active, button:active, .btn:active { transform: translateY(0) scale(.97); }

/* Ripple on click */
.ripple-effect {
  position:absolute; border-radius:50%; background:rgba(255,255,255,.35);
  transform:scale(0); animation:ripple .5s linear; pointer-events:none;
}
@keyframes ripple { to { transform:scale(4); opacity:0; } }

/* ── Card hover lift ────────────────────────────────── */
.card {
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
.card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
  transform: translateY(-2px);
  border-color: #93C5FD !important;
}

/* ── Tool cards on homepage ─────────────────────────── */
.tool-card {
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
  cursor: pointer;
}
.tool-card:hover {
  box-shadow: 0 6px 24px rgba(37,99,235,.18) !important;
  transform: translateY(-3px) scale(1.01);
  border-color: #2563EB !important;
}
.tool-card:hover .tool-icon { transform: scale(1.15) rotate(-3deg); }
.tool-icon { transition: transform .2s ease; display:inline-block; }

/* ── Number count-up ────────────────────────────────── */
.count-up { font-variant-numeric: tabular-nums; }

/* ── Result slide-in ────────────────────────────────── */
.result-animate {
  animation: resultPop .4s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes resultPop {
  from { opacity:0; transform:scale(.92) translateY(8px); }
  to   { opacity:1; transform:none; }
}

/* ── Animated gradient hero ─────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0F172A 100%);
  background-size: 300% 300%;
  animation: heroGrad 8s ease infinite;
}
@keyframes heroGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating particles */
.particle {
  position:absolute; border-radius:50%; pointer-events:none;
  animation: floatParticle linear infinite;
  opacity:.12;
}
@keyframes floatParticle {
  0%   { transform:translateY(0) translateX(0) rotate(0deg); opacity:.12; }
  25%  { transform:translateY(-30px) translateX(15px) rotate(90deg); opacity:.18; }
  50%  { transform:translateY(-15px) translateX(-10px) rotate(180deg); opacity:.12; }
  75%  { transform:translateY(-40px) translateX(20px) rotate(270deg); opacity:.08; }
  100% { transform:translateY(0) translateX(0) rotate(360deg); opacity:.12; }
}

/* ── Animated gauge (BMI, etc) ──────────────────────── */
.gauge-wrap { position:relative; width:180px; height:90px; margin:0 auto 8px; overflow:hidden; }
.gauge-bg { fill:none; stroke:#E2E8F0; stroke-width:18; }
.gauge-fill { fill:none; stroke-width:18; stroke-linecap:round;
  transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1), stroke .4s ease; }
.gauge-needle {
  position:absolute; bottom:0; left:50%; width:3px; height:76px;
  background:linear-gradient(to top, #0F172A, #2563EB);
  transform-origin:bottom center;
  border-radius:3px 3px 0 0;
  transition: transform 1s cubic-bezier(.4,0,.2,1);
}

/* ── Chart canvas animations ────────────────────────── */
canvas.chart-canvas { opacity:0; transition:opacity .4s ease; }
canvas.chart-canvas.drawn { opacity:1; }

/* ── FAQ accordion smooth ───────────────────────────── */
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .25s ease; padding:0 0; }
.faq-a.open { max-height:400px; padding:10px 0 4px; }

/* ── Input focus glow ───────────────────────────────── */
.form-input:focus, .form-select:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
  border-color: var(--accent) !important;
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* ── Toast notification ─────────────────────────────── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:#0F172A; color:#fff; padding:10px 18px; border-radius:10px;
  font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;
  animation: toastIn .3s ease both; box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.toast.out { animation: toastOut .3s ease both; }
.toast-icon { font-size:15px; }
@keyframes toastIn { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateX(60px); } }

/* ── Skeleton loader ────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,#E2E8F0 25%,#F1F5F9 50%,#E2E8F0 75%);
  background-size:200% 100%; animation:skeleton 1.5s infinite; border-radius:6px; }
@keyframes skeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── 3D Dice ────────────────────────────────────────── */
.dice-3d {
  width:80px; height:80px; position:relative; transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.175,.885,.32,1.275);
  cursor:pointer; margin:0 auto;
}
.dice-3d.rolling { animation:diceRoll .6s ease; }
@keyframes diceRoll {
  0%   { transform:rotateX(0) rotateY(0); }
  25%  { transform:rotateX(180deg) rotateY(90deg); }
  50%  { transform:rotateX(360deg) rotateY(180deg); }
  75%  { transform:rotateX(540deg) rotateY(270deg); }
  100% { transform:rotateX(720deg) rotateY(360deg); }
}

/* ── Coin flip animation ────────────────────────────── */
.coin {
  width:90px; height:90px; border-radius:50%; margin:0 auto;
  position:relative; transform-style:preserve-3d; cursor:pointer;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.coin.flipping { animation:coinFlip .8s ease; }
@keyframes coinFlip {
  0%   { transform:rotateY(0) scale(1); }
  50%  { transform:rotateY(900deg) scale(1.08); }
  100% { transform:rotateY(1080deg) scale(1); }
}
.coin-face {
  position:absolute; width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:800; backface-visibility:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}

/* ── Progress bar animated ──────────────────────────── */
.progress-bar { height:8px; background:#E2E8F0; border-radius:100px; overflow:hidden; }
.progress-fill {
  height:100%; border-radius:100px; background:linear-gradient(90deg,var(--accent),#60A5FA);
  transition:width 1s cubic-bezier(.4,0,.2,1);
  background-size:200% 100%; animation:progressShimmer 2s infinite;
}
@keyframes progressShimmer { 0%{background-position:200%} 100%{background-position:-200%} }

/* ── Pulse badge ────────────────────────────────────── */
.pulse-badge { display:inline-flex; align-items:center; gap:6px; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:#22C55E;
  animation:pulseDot 1.5s ease infinite; }
@keyframes pulseDot {
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
}

/* ── Typing cursor ──────────────────────────────────── */
.typing-cursor { border-right:2px solid var(--accent); animation:blink .7s step-end infinite; }
@keyframes blink { 50%{border-color:transparent} }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ════════════════════════════════════════════════════
   ANIMATION SYSTEM — Fast, smooth, no library needed
   ════════════════════════════════════════════════════ */
body { animation: bodyFadeIn .35s ease-out both; }
@keyframes bodyFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .5s ease,transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }
.stagger-children > * { opacity:0; transform:translateY(20px); transition:opacity .45s ease,transform .45s ease; }
.stagger-children.visible > *:nth-child(1){opacity:1;transform:none;transition-delay:.05s}
.stagger-children.visible > *:nth-child(2){opacity:1;transform:none;transition-delay:.1s}
.stagger-children.visible > *:nth-child(3){opacity:1;transform:none;transition-delay:.15s}
.stagger-children.visible > *:nth-child(4){opacity:1;transform:none;transition-delay:.2s}
.stagger-children.visible > *:nth-child(5){opacity:1;transform:none;transition-delay:.25s}
.stagger-children.visible > *:nth-child(n+6){opacity:1;transform:none;transition-delay:.3s}

.tbtn, .btn { transition:transform .15s ease,box-shadow .15s ease,background .2s ease !important; position:relative; overflow:hidden; }
.tbtn:hover, .btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(37,99,235,.25); }
.tbtn:active, .btn:active { transform:translateY(0) scale(.97); }
.ripple-effect { position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); animation:ripple .5s linear; pointer-events:none; }
@keyframes ripple { to { transform:scale(4); opacity:0; } }

.card { transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease !important; }
.card:hover { box-shadow:0 8px 28px rgba(0,0,0,.1) !important; transform:translateY(-2px); border-color:#93C5FD !important; }

.tool-card { transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease !important; cursor:pointer; }
.tool-card:hover { box-shadow:0 6px 24px rgba(37,99,235,.18) !important; transform:translateY(-3px) scale(1.01); border-color:#2563EB !important; }
.tool-card:hover .tool-icon { transform:scale(1.15) rotate(-3deg); }
.tool-icon { transition:transform .2s ease; display:inline-block; }

.result-animate { animation:resultPop .4s cubic-bezier(.175,.885,.32,1.275) both; }
@keyframes resultPop { from{opacity:0;transform:scale(.92) translateY(8px)} to{opacity:1;transform:none} }

.hero-gradient { background:linear-gradient(135deg,#0F172A 0%,#1E3A5F 50%,#0F172A 100%); background-size:300% 300%; animation:heroGrad 8s ease infinite; }
@keyframes heroGrad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.particle { position:absolute; border-radius:50%; pointer-events:none; animation:floatParticle linear infinite; opacity:.12; }
@keyframes floatParticle { 0%{transform:translateY(0) translateX(0);opacity:.12} 50%{transform:translateY(-30px) translateX(15px);opacity:.18} 100%{transform:translateY(0) translateX(0);opacity:.12} }

.gauge-wrap { position:relative; width:200px; height:100px; margin:0 auto 8px; overflow:visible; }
.gauge-bg { fill:none; stroke:#E2E8F0; stroke-width:16; }
.gauge-fill { fill:none; stroke-width:16; stroke-linecap:round; transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1),stroke .4s ease; }
.gauge-needle { position:absolute; bottom:0; left:50%; width:3px; height:86px; background:linear-gradient(to top,#0F172A,#2563EB); transform-origin:bottom center; border-radius:3px 3px 0 0; transition:transform 1.2s cubic-bezier(.4,0,.2,1); }

#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { background:#0F172A; color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; animation:toastIn .3s ease both; box-shadow:0 4px 16px rgba(0,0,0,.25); pointer-events:auto; }
.toast.out { animation:toastOut .3s ease both; }
@keyframes toastIn { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1;transform:none} to{opacity:0;transform:translateX(60px)} }

.progress-bar { height:8px; background:#E2E8F0; border-radius:100px; overflow:hidden; }
.progress-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--accent),#60A5FA); transition:width 1s cubic-bezier(.4,0,.2,1); }

.pulse-dot { width:8px; height:8px; border-radius:50%; background:#22C55E; display:inline-block; animation:pulseDot 1.5s ease infinite; }
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }

.coin { width:90px; height:90px; border-radius:50%; margin:0 auto; position:relative; cursor:pointer; transition:transform .8s cubic-bezier(.4,0,.2,1); }
.coin.flipping { animation:coinFlip .9s ease both; }
@keyframes coinFlip { 0%{transform:rotateY(0) scale(1)} 40%{transform:rotateY(720deg) scale(1.1)} 100%{transform:rotateY(1080deg) scale(1)} }

.dice-wrap { width:80px; height:80px; margin:0 auto; position:relative; cursor:pointer; }
.dice-face { width:80px; height:80px; border-radius:14px; background:#1E40AF; display:flex; align-items:center; justify-content:center; font-size:36px; color:#fff; box-shadow:0 6px 20px rgba(37,99,235,.4); transition:transform .3s ease,box-shadow .3s ease; }
.dice-wrap:hover .dice-face { transform:translateY(-4px) scale(1.05); box-shadow:0 10px 28px rgba(37,99,235,.5); }
.dice-wrap.rolling .dice-face { animation:diceShake .6s ease; }
@keyframes diceShake { 0%{transform:rotate(0) scale(1)} 20%{transform:rotate(-15deg) scale(1.1)} 40%{transform:rotate(15deg) scale(1.1)} 60%{transform:rotate(-10deg) scale(1.05)} 80%{transform:rotate(5deg) scale(1.02)} 100%{transform:rotate(0) scale(1)} }

.form-input:focus, .form-select:focus, textarea:focus { box-shadow:0 0 0 3px rgba(37,99,235,.15) !important; border-color:var(--accent) !important; transition:box-shadow .15s ease,border-color .15s ease; }

.typing-cursor { border-right:2px solid var(--accent); animation:blink .7s step-end infinite; padding-right:2px; }
@keyframes blink { 50%{border-color:transparent} }

canvas.anim-chart { opacity:0; transform:translateY(10px); transition:opacity .5s ease,transform .5s ease; }
canvas.anim-chart.ready { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ── Tool-specific responsive fixes ─────────────────── */
@media (max-width: 640px) {
  /* Scientific calculator */
  .calc-grid { grid-template-columns: repeat(4, 1fr) !important; }
  
  /* OG tag generator preview */
  .og-preview { width: 100% !important; max-width: 100% !important; }
  .og-card { width: 100% !important; }
  
  /* Markdown preview */
  .md-split { flex-direction: column !important; }
  .md-pane { width: 100% !important; min-height: 200px; }
  
  /* Business days calendar grid */
  .cal-week { grid-template-columns: repeat(7, 1fr); font-size: 11px; }
  
  /* Stat grids that are 3+ columns */
  .stats-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* white-space nowrap buttons — allow wrapping */
  .mode-tab, .unit-tab, .tab-btn { white-space: normal !important; min-width: 0 !important; }
  
  /* Result value — prevent overflow */
  .result-value, .big-result { font-size: clamp(1.2rem, 5vw, 2.5rem) !important; }
  
  /* Fix inline grid pages */
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .page-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .visible-breadcrumb { font-size: 11px; }
  .stat-strip { gap: 16px; }
  .how-steps { gap: 8px; }
  .how-step { padding: 10px; }
}

/* Range input styling */
.range-input { -webkit-appearance:none; width:100%; height:5px; background:#E2E8F0; border-radius:5px; cursor:pointer; }
.range-input::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; }

/* ── Missing global utility classes ─────────────────── */
.stat-box { text-align:center; padding:16px 12px; background:#F8FAFC; border-radius:12px; border:2px solid #E2E8F0; transition:border-color .2s; }
.stat-box:hover { border-color:#2563EB; }
.related-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.related-tools a { background:#EFF6FF; color:var(--accent); padding:5px 12px; border-radius:100px; font-size:12px; font-weight:700; text-decoration:none; border:1.5px solid #BFDBFE; }
.related-tools a:hover { background:#2563EB; color:#fff; }
.big-result { font-size:clamp(1.4rem,4vw,2.4rem); font-weight:800; color:var(--accent); line-height:1.1; }
.alert-error { background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.alert-success { background:#F0FDF4; border:1px solid #86EFAC; color:#166534; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.alert-info { background:#EFF6FF; border:1px solid #BFDBFE; color:#1E40AF; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.mode-btn, .tab-btn, .unit-tab, .mode-tab { padding:7px 16px; border-radius:8px; border:2px solid #E2E8F0; background:#F8FAFC; font-weight:700; cursor:pointer; font-size:13px; transition:all .15s; color:#0F172A; }
.mode-btn.active, .tab-btn.active, .unit-tab.active, .mode-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.file-drop { border:2px dashed #CBD5E1; border-radius:12px; padding:32px 20px; text-align:center; cursor:pointer; transition:border-color .2s,background .2s; }
.file-drop:hover, .file-drop.dragover { border-color:var(--accent); background:#EFF6FF; }
.unit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.unit-box-abbr { font-size:11px; color:#94A3B8; font-weight:600; }
.ref-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:12px; }
.vehicle-btn, .frame-btn { padding:7px 14px; border-radius:8px; border:2px solid #E2E8F0; background:#F8FAFC; cursor:pointer; font-weight:600; font-size:13px; transition:all .15s; }
.vehicle-btn.active, .frame-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.bmi-scale { height:16px; border-radius:100px; background:linear-gradient(90deg,#60A5FA,#22C55E,#F59E0B,#EF4444); margin:8px 0; }
.dim-input { width:80px; text-align:center; }
.ratio-btn { padding:6px 14px; border-radius:8px; border:1.5px solid #E2E8F0; background:#F8FAFC; cursor:pointer; font-weight:700; font-size:12px; }
.ratio-btn:hover { border-color:var(--accent); }
.res-table { width:100%; border-collapse:collapse; font-size:13px; }
.res-table th { background:var(--accent); color:#fff; padding:8px 12px; text-align:left; }
.res-table td { padding:8px 12px; border-bottom:1px solid #E2E8F0; }
.res-table tr:hover td { background:#F8FAFC; }
.vehicle-type, .depreciation-note { font-size:12px; color:#64748B; margin-top:6px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #F1F5F9; font-size:13px; }
.bday-countdown { background:linear-gradient(135deg,#EFF6FF,#DBEAFE); border-radius:12px; padding:16px; text-align:center; }
.milestone-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #F1F5F9; font-size:13px; }
.ms-past { color:#94A3B8; }
.ms-next { color:#2563EB; font-weight:700; }
.ms-future { color:#0F172A; }

/* ── Explore More button ─────────────────────────── */
.explore-more-btn{display:inline-flex;align-items:center;gap:8px;background:#EFF6FF;color:#2563EB;border:2px solid #BFDBFE;padding:9px 22px;border-radius:100px;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s}
.explore-more-btn:hover{background:#2563EB;color:#fff;border-color:#2563EB;transform:translateY(-1px)}
.article-coming-card:hover{border-color:#2563EB!important;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.12)}
.story-coming-card:hover{border-color:#2563EB!important;transform:scale(1.02)}