*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#0a0b14;color:#d1d5db;line-height:1.7;min-height:100vh}

a{color:#a5b4fc;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:#c7d2fe;text-decoration-thickness:2px}
img{max-width:100%;height:auto;display:block;border-radius:12px}
h1,h2,h3,h4,h5,h6{color:#f1f1f3;line-height:1.3;font-weight:700}
h1{font-size:2.5rem}
h2{font-size:1.75rem;margin-top:2.5rem;margin-bottom:1rem}
h3{font-size:1.25rem;margin-top:1.5rem;margin-bottom:.5rem}
p{margin-bottom:1rem}
ol,ul{margin-bottom:1rem;padding-left:1.5rem}
li{margin-bottom:.4rem}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* NAV */
.site-nav{background:rgba(10,11,20,.95);border-bottom:1px solid rgba(255,255,255,.06);padding:14px 0;position:sticky;top:0;z-index:100}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:0 20px}
.nav-logo{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:700;color:#f1f1f3;text-decoration:none}
.nav-logo img{height:28px;width:auto;border-radius:0}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{color:#d1d5db;font-size:.9rem;font-weight:500;text-decoration:none}
.nav-links a:hover{color:#f1f1f3}
.nav-cta{background:linear-gradient(135deg,#7c3aed,#3b82f6);color:#fff !important;padding:8px 20px;border-radius:8px;font-weight:600;font-size:.9rem}
.nav-cta:hover{opacity:.9;color:#fff}
.nav-toggle{display:none;background:none;border:none;color:#f1f1f3;font-size:1.5rem;cursor:pointer}

/* HERO */
.hero{padding:60px 0 40px;background:radial-gradient(ellipse at 30% 0%,rgba(124,58,237,.12) 0%,transparent 60%),radial-gradient(ellipse at 70% 100%,rgba(59,130,246,.08) 0%,transparent 60%)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:1100px;margin:0 auto;padding:0 20px}
.hero h1{margin-bottom:16px}
.hero-sub{font-size:1.1rem;color:#d1d5db;margin-bottom:0}

/* TOOL CARD */
.tool-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;backdrop-filter:blur(8px)}
.tool-card textarea,.tool-card input[type="text"]{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;color:#f1f1f3;font-size:.95rem;font-family:inherit;resize:vertical}
.tool-card textarea{min-height:100px}
.tool-card textarea:focus,.tool-card input[type="text"]:focus{outline:none;border-color:rgba(124,58,237,.5)}
.tool-card textarea::placeholder,.tool-card input::placeholder{color:#6b7280}
.tool-row{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.tool-select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;color:#f1f1f3;font-size:.9rem;font-family:inherit;cursor:pointer}
.tool-select option{background:#1a1b2e;color:#f1f1f3}
.btn-generate{background:linear-gradient(135deg,#7c3aed,#3b82f6);color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;text-decoration:none}
.btn-generate:hover{opacity:.9;text-decoration:none}
.btn-generate:disabled{opacity:.5;cursor:not-allowed}
.tool-output{margin-top:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:16px;min-height:80px;display:none;color:#d1d5db;font-size:.95rem;line-height:1.7;white-space:pre-wrap;word-wrap:break-word;position:relative}
.tool-output.visible{display:block}
.output-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.btn-icon{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#d1d5db;padding:6px 10px;cursor:pointer;font-size:.85rem;font-family:inherit}
.btn-icon:hover{color:#f1f1f3;background:rgba(255,255,255,.1)}
.tool-loading{color:#a5b4fc;font-size:.9rem;display:none}
.tool-loading.visible{display:block}
.tool-error{color:#f87171;font-size:.9rem;display:none}
.tool-error.visible{display:block}
.char-count{font-size:.8rem;color:#9ca3af;text-align:right;margin-top:4px}

/* CONTENT SECTIONS */
.content-section{padding:40px 0}
.content-section p{color:#d1d5db;max-width:800px}
.content-section h2{color:#f1f1f3}
.content-section ol{color:#d1d5db}
.content-section ol li{margin-bottom:.6rem}
.content-section a{color:#a5b4fc}

/* TOOLS GRID (homepage) */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}
.tool-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:20px;color:#d1d5db;text-decoration:none}
.tool-box:hover{border-color:rgba(124,58,237,.3);background:rgba(255,255,255,.06);text-decoration:none}
.tool-box h3{font-size:1rem;color:#f1f1f3;margin:0 0 6px}
.tool-box p{font-size:.85rem;color:#d1d5db;margin:0;line-height:1.5}

/* IMAGE BOX */
.img-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:6px;margin:24px 0}
.img-box img{border-radius:10px;width:100%}

/* FAQ */
.faq-section{margin-top:2rem}
.faq-item{border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0}
.faq-q{font-weight:600;color:#f1f1f3;font-size:1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q::after{content:'+';font-size:1.2rem;color:#a5b4fc;flex-shrink:0;margin-left:12px}
.faq-q.open::after{content:'-'}
.faq-a{color:#d1d5db;font-size:.95rem;margin-top:10px;display:none;line-height:1.7}
.faq-a.open{display:block}

/* RELATED TOOLS */
.related-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px}
.related-tool{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;font-size:.9rem;color:#d1d5db;text-decoration:none}
.related-tool:hover{border-color:rgba(124,58,237,.3);color:#f1f1f3;text-decoration:none}

/* APP SECTION */
.app-section{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.15);border-radius:14px;padding:28px;margin:24px 0}
.app-section h2{margin-top:0}
.app-btn{display:inline-block;background:linear-gradient(135deg,#7c3aed,#3b82f6);color:#fff;padding:10px 24px;border-radius:8px;font-weight:600;font-size:.95rem;margin-top:12px;text-decoration:none}
.app-btn:hover{opacity:.9;color:#fff;text-decoration:none}

/* FOOTER */
.site-footer{background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.06);padding:40px 0 24px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;max-width:1100px;margin:0 auto;padding:0 20px}
.footer-col h2{font-size:.95rem;color:#f1f1f3;margin-bottom:12px;margin-top:0}
.footer-col a{display:block;color:#d1d5db;font-size:.85rem;margin-bottom:6px;text-decoration:none}
.footer-col a:hover{color:#f1f1f3}
.footer-bottom{text-align:center;color:#9ca3af;font-size:.85rem;margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);max-width:1100px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}

/* POPUP */
.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:1000;display:none;align-items:center;justify-content:center}
.popup-overlay.visible{display:flex}
.popup-box{background:#1a1b2e;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;max-width:420px;width:90%;text-align:center}
.popup-box h3{color:#f1f1f3;font-size:1.3rem;margin-bottom:12px}
.popup-box p{color:#d1d5db;font-size:.95rem;margin-bottom:20px}
.popup-close{position:absolute;top:12px;right:16px;background:none;border:none;color:#d1d5db;font-size:1.5rem;cursor:pointer}
.popup-close:hover{color:#f1f1f3}
.popup-box .btn-generate{display:inline-block;width:100%;text-align:center;margin-bottom:10px;text-decoration:none}
.popup-link{color:#a5b4fc;font-size:.9rem}

/* BEST APPS TABLE */
.apps-table{width:100%;border-collapse:collapse;margin:20px 0}
.apps-table th,.apps-table td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}
.apps-table th{color:#f1f1f3;font-weight:600;font-size:.9rem}
.apps-table td{color:#d1d5db;font-size:.9rem}
.apps-table tr:hover td{background:rgba(255,255,255,.02)}

/* ABOUT / LEGAL PAGES */
.legal-content{max-width:800px}
.legal-content h2{font-size:1.4rem}
.legal-content h3{font-size:1.15rem}
.legal-content p,.legal-content li{color:#d1d5db;font-size:.95rem}

/* BREADCRUMB */
.breadcrumb{font-size:.85rem;color:#9ca3af;margin-bottom:8px}
.breadcrumb a{color:#a5b4fc}

/* MOBILE */
@media(max-width:768px){
    h1{font-size:1.8rem}
    h2{font-size:1.4rem}
    .hero-inner{grid-template-columns:1fr;gap:24px}
    .nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:rgba(10,11,20,.98);flex-direction:column;padding:20px;gap:16px;border-bottom:1px solid rgba(255,255,255,.06)}
    .nav-links.open{display:flex}
    .nav-toggle{display:block}
    .tools-grid{grid-template-columns:1fr 1fr}
    .related-tools{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
    .tool-card{backdrop-filter:none}
}
@media(max-width:480px){
    .tools-grid{grid-template-columns:1fr}
    .related-tools{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .tool-row{flex-direction:column;align-items:stretch}
    .tool-row .btn-generate{width:100%}
}