/* Ruyox - Technology Made Simple */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#ffffff;--bg-alt:#f8f9fa;--text:#1a1a2e;--text-muted:#6b7280;--border:#e5e7eb;--primary:#2563eb;--primary-hover:#1d4ed8;--card-bg:#ffffff;--card-border:#e5e7eb;--hero-from:#f0f4ff;--hero-to:#ffffff;--footer-bg:#1a1a2e;--footer-text:#9ca3af}
.dark{--bg:#0a0a0f;--bg-alt:#111118;--text:#f3f4f6;--text-muted:#9ca3af;--border:#1f2937;--primary:#3b82f6;--primary-hover:#60a5fa;--card-bg:#111118;--card-border:#1f2937;--hero-from:#0a0a1a;--hero-to:#0a0a0f;--footer-bg:#000000;--footer-text:#6b7280}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
img{max-width:100%;height:auto}
.container{max-width:1280px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.dark header{background:rgba(10,10,15,.95)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:1.5rem;font-weight:800;color:var(--text);letter-spacing:-.02em}
.logo span{color:var(--primary)}
nav{display:none;align-items:center;gap:1.5rem}
@media(min-width:768px){nav{display:flex}}
nav a{font-size:.875rem;font-weight:500;color:var(--text-muted);transition:color .2s}
nav a:hover{color:var(--text)}
.header-actions{display:flex;align-items:center;gap:.5rem}
.theme-btn,.search-btn,.menu-btn{background:none;border:none;cursor:pointer;padding:.5rem;border-radius:.5rem;color:var(--text-muted);font-size:1.25rem;transition:background .2s}
.theme-btn:hover,.search-btn:hover,.menu-btn:hover{background:var(--bg-alt)}
.menu-btn{display:block}@media(min-width:768px){.menu-btn{display:none}}

/* Mobile nav */
.mobile-nav{display:none;border-top:1px solid var(--border);padding:1rem}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:.5rem 0;font-size:.875rem;font-weight:500;color:var(--text-muted)}
.mobile-nav a:hover{color:var(--text)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--hero-from),var(--hero-to));padding:4rem 0;text-align:center}
.hero h1{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:1rem}
@media(min-width:640px){.hero h1{font-size:3rem}}@media(min-width:1024px){.hero h1{font-size:3.75rem}}
.hero p{font-size:1.125rem;color:var(--text-muted);max-width:36rem;margin:0 auto 2rem}
@media(min-width:640px){.hero p{font-size:1.25rem}}
.search-box{display:flex;max-width:32rem;margin:0 auto;gap:.5rem}
.search-box input{flex:1;padding:.75rem 1rem;border:1px solid var(--border);border-radius:.5rem;font-size:1rem;background:var(--card-bg);color:var(--text)}
.search-box input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.search-box button{padding:.75rem 1.5rem;background:var(--primary);color:#fff;border:none;border-radius:.5rem;font-weight:600;cursor:pointer;transition:background .2s}
.search-box button:hover{background:var(--primary-hover)}
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem}
.hero-tags a{padding:.375rem 1rem;border-radius:999px;font-size:.875rem;font-weight:500;background:var(--card-bg);color:var(--text-muted);border:1px solid var(--border);transition:all .2s}
.hero-tags a:hover{color:var(--text);border-color:var(--primary)}

/* Sections */
.section{padding:3rem 0}
.section-alt{background:var(--bg-alt);padding:3rem 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.section-header h1,.section-header h2{font-size:1.5rem;font-weight:700}
.section-header .view-all{font-size:.875rem;font-weight:500;color:var(--primary)}

/* Grids */
.grid-4{display:grid;gap:1.5rem}@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.grid-3{display:grid;gap:1.5rem}@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;gap:1.5rem}@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.grid-5{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}@media(min-width:480px){.grid-5{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.grid-5{grid-template-columns:repeat(5,1fr)}}

/* Card (used by home.js) */
.card{border-radius:.75rem;border:1px solid var(--card-border);background:var(--card-bg);overflow:hidden;transition:all .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.08)}
.card-img{position:relative;aspect-ratio:16/9;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:800;color:var(--text-muted);overflow:hidden}
.card-img span{padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;background:rgba(37,99,235,.1);color:var(--primary)}
.card-body{padding:1rem 1.25rem}
.card-meta{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-muted);margin-bottom:.5rem}
.card-meta span{padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;background:rgba(37,99,235,.1);color:var(--primary);display:inline-block}
.card-body h3{font-size:1.0625rem;font-weight:700;line-height:1.35;margin-bottom:.5rem}
.card-body h3 a{color:var(--text)}
.card-body h3 a:hover{color:var(--primary)}
.card-body p{font-size:.875rem;color:var(--text-muted);margin-bottom:.75rem;line-height:1.5}
.card-author{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:var(--text-muted)}
.card-author span:first-child{font-weight:500;color:var(--text)}

/* Category Card */
.category-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding:1.5rem 1rem;border-radius:.75rem;border:1px solid var(--card-border);background:var(--card-bg);transition:all .2s}
.category-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.category-card .category-icon,.category-card .icon{font-size:2rem}
.category-card h3{font-size:.9375rem;font-weight:600;color:var(--text)}
.category-card p{font-size:.75rem;color:var(--text-muted);line-height:1.4}

/* Tool Card */
.tool-card{padding:1rem;border-radius:.75rem;border:1px solid var(--card-border);background:var(--card-bg);text-align:center;transition:all .2s}
.tool-card h4{font-size:.875rem;font-weight:600;margin-bottom:.25rem}
.tool-card p{font-size:.75rem;color:var(--text-muted)}

/* Ad placeholder */
.ad-placeholder{background:var(--bg-alt);border:2px dashed var(--border);border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--text-muted);margin:2rem 0;min-height:90px}

/* Newsletter */
.newsletter{text-align:center;padding:3rem 0}
.newsletter h2{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.newsletter p{color:var(--text-muted);margin-bottom:1.5rem}
.newsletter-form{display:flex;max-width:28rem;margin:0 auto;gap:.5rem}
.newsletter-form input{flex:1;padding:.75rem 1rem;border:1px solid var(--border);border-radius:.5rem;font-size:.9375rem;background:var(--card-bg);color:var(--text)}
.newsletter-form input:focus{outline:none;border-color:var(--primary)}
.newsletter-form button{padding:.75rem 1.5rem;background:var(--primary);color:#fff;border:none;border-radius:.5rem;font-weight:600;cursor:pointer;transition:background .2s}
.newsletter-form button:hover{background:var(--primary-hover)}

/* Footer */
footer{background:var(--footer-bg);color:var(--footer-text);padding:3rem 0 1.5rem;margin-top:auto}
.footer-grid{display:grid;gap:2rem}@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-col h4{color:#fff;font-size:.875rem;font-weight:600;margin-bottom:1rem}
.footer-col p{font-size:.8125rem;line-height:1.6}
.footer-col a{display:block;font-size:.8125rem;color:var(--footer-text);padding:.3rem 0;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid #1f2937;padding-top:1.5rem;margin-top:2rem;font-size:.75rem;text-align:center}

/* Article Page (generated) */
.article-page{padding:2rem 0}
.article-page .breadcrumbs{font-size:.8125rem;color:var(--text-muted);margin-bottom:1rem;display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.article-page .breadcrumbs a{color:var(--text-muted)}
.article-page .breadcrumbs a:hover{color:var(--primary)}
.article-page h1{font-size:2.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:1rem}
@media(min-width:640px){.article-page h1{font-size:2.75rem}}
.article-meta-bar{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.8125rem;color:var(--text-muted);padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border)}
.article-meta-bar a{color:var(--primary);font-weight:500}
.article-meta-bar a:hover{color:var(--primary-hover)}
.article-page .container{max-width:800px}
.article-page h2{font-size:1.5rem;font-weight:700;margin-top:2rem;margin-bottom:.75rem;scroll-margin-top:5rem}
.article-page h3{font-size:1.125rem;font-weight:600;margin-top:1.5rem;margin-bottom:.5rem}
.article-page p{margin-bottom:1rem;font-size:1.0625rem;line-height:1.75;color:var(--text)}
.article-page ul,.article-page ol{margin-bottom:1rem;padding-left:1.5rem}
.article-page li{margin-bottom:.375rem;font-size:1.0625rem;line-height:1.75}
.article-page strong{font-weight:600}
.article-page code{background:var(--bg-alt);padding:.125rem .375rem;border-radius:.25rem;font-size:.875rem}

/* Page content (about, contact, legal) */
.page-content{max-width:780px;margin:0 auto}
.page-content h1{font-size:2rem;font-weight:800;margin-bottom:1rem}
.page-content h2{font-size:1.5rem;font-weight:700;margin-top:2rem;margin-bottom:.75rem}
.page-content h3{font-size:1.125rem;font-weight:600;margin-top:1.5rem;margin-bottom:.5rem}
.page-content p{margin-bottom:1rem;line-height:1.7;color:var(--text);font-size:1rem}
.page-content ul,.page-content ol{margin-bottom:1rem;padding-left:1.5rem}
.page-content li{margin-bottom:.375rem;line-height:1.6}
.page-content table{width:100%;border-collapse:collapse;margin:1rem 0}
.page-content th,.page-content td{padding:.75rem;border:1px solid var(--border);text-align:left;font-size:.875rem}
.page-content th{background:var(--bg-alt);font-weight:600}
.page-content td{color:var(--text-muted)}

/* Lead text */
.lead{font-size:1.125rem;color:var(--text-muted);margin-bottom:2rem;line-height:1.6}

/* Category page (generated) */
.section h1{font-size:1.75rem;font-weight:800;margin-bottom:.5rem}

/* Contact grid */
.contact-grid{display:grid;gap:1rem;margin:2rem 0}@media(min-width:640px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
.contact-card{padding:1.5rem;border:1px solid var(--border);border-radius:.75rem;background:var(--card-bg)}
.contact-card h3{font-size:1rem;font-weight:600;margin-bottom:.5rem}
.contact-card p{font-size:.875rem;color:var(--text-muted);margin-bottom:.25rem}
.contact-card a{color:var(--primary);font-weight:500}

/* Contact form */
.contact-form{max-width:36rem;margin:2rem auto}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem;color:var(--text)}
.form-group input,.form-group textarea{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:.5rem;font-size:.9375rem;background:var(--card-bg);color:var(--text)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.form-group textarea{min-height:8rem;resize:vertical}

/* Buttons */
.btn-primary{display:inline-block;padding:.75rem 2rem;background:var(--primary);color:#fff;border:none;border-radius:.5rem;font-weight:600;font-size:.9375rem;cursor:pointer;transition:background .2s;text-decoration:none}
.btn-primary:hover{background:var(--primary-hover);color:#fff}
.btn-secondary{display:inline-block;padding:.75rem 2rem;background:var(--bg-alt);color:var(--text);border:1px solid var(--border);border-radius:.5rem;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-secondary:hover{background:var(--border);color:var(--text)}

/* FAQ */
.faq-section{margin-top:2rem;border:1px solid var(--border);border-radius:.75rem;overflow:hidden}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-question{width:100%;padding:1rem 1.25rem;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;color:var(--text);text-align:left;gap:1rem}
.faq-question:hover{background:var(--bg-alt)}
.faq-question .faq-icon{font-size:1.25rem;transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-question .faq-icon{transform:rotate(45deg)}
.faq-answer{display:none;padding:0 1.25rem 1rem;font-size:.875rem;color:var(--text-muted);line-height:1.6}
.faq-item.open .faq-answer{display:block}

/* Empty state */
.empty-state{text-align:center;padding:3rem 0;color:var(--text-muted)}
.empty-state h2{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}
.empty-state p{font-size:.875rem}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:2rem}
.pagination a,.pagination span{padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:1px solid var(--border);background:var(--card-bg);color:var(--text-muted);transition:all .2s}
.pagination a:hover{border-color:var(--primary);color:var(--primary)}
.pagination .active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Search page */
.search-page-box{margin:20px 0;max-width:32rem}

/* Breadcrumbs (standalone) */
.breadcrumbs{font-size:.8125rem;color:var(--text-muted);margin-bottom:1rem;display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.breadcrumbs a{color:var(--text-muted)}
.breadcrumbs a:hover{color:var(--primary)}

/* 404 */
.not-found{text-align:center;padding:6rem 0}
.not-found h1{font-size:8rem;font-weight:800;color:var(--border);line-height:1}
.not-found h2{font-size:1.5rem;font-weight:700;margin:1rem 0 .5rem}
.not-found p{color:var(--text-muted);margin-bottom:2rem}

/* TOC */
.toc{border:1px solid var(--border);border-radius:.75rem;padding:1.25rem;margin-bottom:1.5rem}
.toc h3{font-size:.875rem;font-weight:600;margin-bottom:.75rem}
.toc a{display:block;font-size:.8125rem;padding:.3rem 0;color:var(--text-muted);border-left:2px solid transparent;padding-left:.75rem;transition:all .2s}
.toc a:hover,.toc a.active{border-left-color:var(--primary);color:var(--text)}

/* Utility */
.text-center{text-align:center}
.mt-4{margin-top:1rem}
.mt-8{margin-top:2rem}
.mb-4{margin-bottom:1rem}
.mb-8{margin-bottom:2rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.gap-4{gap:1rem}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}