* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --blue: #1d4ed8;
  --blue2: #1e40af;
  --blue-pale: #eff6ff;
  --green: #10b981;
  --green-pale: #ecfdf5;
  --text: #1e293b;
  --text2: #475569;
  --text3: #94a3b8;
  --bg: #f8fafc;
  --white: #ffffff;
  --border: #e2e8f0;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
}
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; padding-bottom:80px; }

/* HEADER */
header { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.header-inner { max-width:1100px; margin:0 auto; padding:0 1.5rem; height:64px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-icon { width:38px; height:38px; background:var(--blue); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.logo-icon svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2; }
.logo-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.2rem; font-weight:800; color:var(--text); }
.logo-text span { color:var(--blue); }
.desktop-nav { display:flex; gap:0.25rem; }
.desktop-nav a { padding:0.4rem 0.9rem; border-radius:8px; color:var(--text2); text-decoration:none; font-size:0.9rem; font-weight:500; transition:background 0.15s,color 0.15s; }
.desktop-nav a:hover,.desktop-nav a.active { background:var(--blue-pale); color:var(--blue); }
@media(max-width:768px) { .desktop-nav { display:none; } }

/* HERO */
.hero { background:linear-gradient(135deg, #1d4ed8 0%, #1e40af 50%, #1e3a8a 100%); padding:3rem 1.5rem; text-align:center; }
.hero-badge { display:inline-block; background:rgba(255,255,255,0.15); color:#fff; padding:0.35rem 1rem; border-radius:20px; font-size:0.8rem; font-weight:600; letter-spacing:0.5px; margin-bottom:1.25rem; backdrop-filter:blur(8px); }
.hero h1 { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; color:#fff; margin-bottom:0.75rem; line-height:1.2; }
.hero p { color:rgba(255,255,255,0.85); font-size:1.05rem; max-width:560px; margin:0 auto 1.5rem; }
.hero-stats { display:flex; justify-content:center; gap:2rem; margin-top:1.5rem; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-num { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.8rem; font-weight:800; color:#fff; }
.stat-lbl { font-size:0.8rem; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.5px; }

/* SECTION */
.section-header { max-width:1100px; margin:2.5rem auto 1.25rem; padding:0 1.5rem; }
.section-header h2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.5rem; font-weight:800; color:var(--text); }
.section-header p { color:var(--text2); margin-top:0.35rem; }

/* TOOLS GRID */
.tools-grid { max-width:1100px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.tool-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-decoration:none; display:block; position:relative; transition:box-shadow 0.2s,border-color 0.2s,transform 0.2s; box-shadow:var(--shadow); }
.tool-card:hover { box-shadow:0 8px 32px rgba(29,78,216,0.12); border-color:var(--blue); transform:translateY(-2px); }
.tool-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--green)); border-radius:var(--radius) var(--radius) 0 0; opacity:0; transition:opacity 0.2s; }
.tool-card:hover::before { opacity:1; }
.tool-icon { font-size:2rem; margin-bottom:0.75rem; }
.tool-card h3 { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:0.4rem; }
.tool-card p { color:var(--text2); font-size:0.9rem; line-height:1.5; }
.tool-badge { display:inline-block; margin-top:0.75rem; background:var(--blue-pale); color:var(--blue); font-size:0.75rem; font-weight:600; padding:0.2rem 0.7rem; border-radius:20px; }
.tool-badge.green { background:var(--green-pale); color:var(--green); }
.tool-arrow { position:absolute; top:1.25rem; right:1.25rem; color:var(--text3); font-size:1rem; transition:transform 0.2s,color 0.2s; }
.tool-card:hover .tool-arrow { transform:translate(2px,-2px); color:var(--blue); }
.tool-card.disabled { opacity:0.6; cursor:not-allowed; }
.tool-card.disabled:hover { transform:none; border-color:var(--border); box-shadow:var(--shadow); }

/* CALCULATOR */
.page-wrap { max-width:820px; margin:0 auto; padding:1.5rem; }
.breadcrumb { font-size:0.85rem; color:var(--text3); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--blue); text-decoration:none; }
.breadcrumb span { margin:0 0.4rem; }
.calc-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow); margin-bottom:1.5rem; }
.calc-wrap h1 { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.6rem; font-weight:800; color:var(--text); margin-bottom:0.4rem; }
.calc-wrap .subtitle { color:var(--text2); margin-bottom:1.5rem; font-size:0.95rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
@media(max-width:560px) { .form-row { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:1rem; }
.form-group label { font-size:0.85rem; font-weight:600; color:var(--text2); }
.form-group input,.form-group select { background:var(--bg); border:1.5px solid var(--border); color:var(--text); padding:0.65rem 0.9rem; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:1rem; outline:none; transition:border-color 0.15s; }
.form-group input:focus,.form-group select:focus { border-color:var(--blue); background:#fff; }
.btn-calc { width:100%; background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; padding:0.85rem; border:none; border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:700; cursor:pointer; margin-top:0.5rem; transition:opacity 0.2s; }
.btn-calc:hover { opacity:0.9; }
.results { display:none; margin-top:1.5rem; background:var(--green-pale); border:1px solid #a7f3d0; border-radius:var(--radius); padding:1.5rem; }
.results.show { display:block; }
.results-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:1rem; }
.results-main { font-family:'Plus Jakarta Sans',sans-serif; font-size:2.5rem; font-weight:800; color:var(--text); margin-bottom:0.25rem; }
.results-main span { color:var(--green); }
.results-sub { color:var(--text2); font-size:0.9rem; margin-bottom:1.25rem; }
.results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.75rem; }
.result-item { background:#fff; border-radius:8px; padding:0.85rem 1rem; border:1px solid #a7f3d0; }
.result-item .val { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.2rem; font-weight:700; color:var(--text); }
.result-item .lbl { font-size:0.8rem; color:var(--text2); margin-top:0.2rem; }
.calc-error { color:#dc2626; background:#fef2f2; border:1px solid #fecaca; padding:0.75rem 1rem; border-radius:8px; margin-top:0.75rem; font-size:0.9rem; display:none; }
.info-box { background:var(--blue-pale); border-left:3px solid var(--blue); padding:1rem 1.25rem; border-radius:0 8px 8px 0; margin:1.25rem 0; color:var(--text2); font-size:0.9rem; }
.info-box strong { color:var(--blue); }
.warning-box { background:#fffbeb; border-left:3px solid #f59e0b; padding:1rem 1.25rem; border-radius:0 8px 8px 0; margin:1.25rem 0; color:#92400e; font-size:0.9rem; }

/* AGES CONTAINER */
#ages-container { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:0.75rem; margin-top:0.75rem; }

/* SEO CONTENT */
.seo-content { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; margin:1.5rem 0; box-shadow:var(--shadow); }
.seo-content h2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.2rem; font-weight:700; color:var(--text); margin:1.5rem 0 0.75rem; }
.seo-content h2:first-child { margin-top:0; }
.seo-content p { color:var(--text2); line-height:1.7; margin-bottom:0.75rem; font-size:0.95rem; }
.seo-content ul { padding-left:1.5rem; color:var(--text2); margin-bottom:0.75rem; }
.seo-content li { margin-bottom:0.4rem; line-height:1.6; font-size:0.95rem; }
.seo-content table { width:100%; border-collapse:collapse; margin:1rem 0; }
.seo-content th { background:var(--blue); color:#fff; padding:0.65rem 0.85rem; text-align:left; font-size:0.85rem; }
.seo-content td { padding:0.6rem 0.85rem; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--text2); }
.seo-content tr:nth-child(even) td { background:var(--bg); }
.other-tools { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; margin:1.5rem 0; }
.other-tools h3 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--text); margin-bottom:1rem; font-size:1rem; }
.other-tools a { display:inline-block; margin:0.25rem; padding:0.4rem 0.85rem; background:var(--blue-pale); color:var(--blue); border-radius:20px; text-decoration:none; font-size:0.85rem; font-weight:500; }
.other-tools a:hover { background:var(--blue); color:#fff; }

/* AD SLOT */
.ad-slot { background:#f1f5f9; border:1px dashed #cbd5e1; border-radius:8px; min-height:90px; margin:1.5rem 0; display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:0.8rem; }

/* FOOTER */
footer { background:var(--text); color:rgba(255,255,255,0.7); text-align:center; padding:2rem 1.5rem; font-size:0.85rem; }
.footer-logo { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:0.75rem; }
.footer-logo-icon { width:32px; height:32px; background:var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.footer-logo-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:800; color:#fff; }
.footer-logo-text span { color:#60a5fa; }
.footer-links { display:flex; justify-content:center; gap:1.5rem; margin-top:0.75rem; flex-wrap:wrap; }
.footer-links a { color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.8rem; }
.footer-links a:hover { color:#fff; }

/* BOTTOM NAV */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--border); z-index:200; padding:0 0 env(safe-area-inset-bottom); box-shadow:0 -4px 20px rgba(0,0,0,0.08); }
@media(max-width:768px) { .bottom-nav { display:flex; } body { padding-bottom:80px; } }
.bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0.6rem 0.25rem; text-decoration:none; color:var(--text3); font-size:0.6rem; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; gap:3px; transition:color 0.15s; }
.bottom-nav a svg { width:22px; height:22px; stroke:currentColor; fill:none; }
.bottom-nav a.active,.bottom-nav a:hover { color:var(--blue); }