@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{--p:#15c08a;--pd:#0fa070;--pdd:#0b7a56;--pl:#e6faf3;--pm:#1dd9a0;--ink:#0b0f0e;--muted:#5a7268;--light:#8faaa2;--bg:#ffffff;--bg2:#f5faf8;--bg3:#edf7f2;--bdr:#dceee7;--bdr2:#c4ddd3;--dark:#081510;--drk2:#0d1f19;--drk3:#112b22;--drkb:#1a3d2e;--r:12px;--r2:18px;--r3:26px;--sh:0 2px 16px rgba(11,15,14,.07);--shm:0 8px 40px rgba(21,192,138,.14);--font:'DM Sans',sans-serif;--disp:'Syne',sans-serif;--mono:'JetBrains Mono',monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:var(--font);cursor:pointer}
ol{list-style:decimal}ul{list-style:disc}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:3px}

/* NAV */
.nav{position:sticky;top:0;z-index:200;height:64px;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 2rem}
.nav-inner{max-width:1160px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:36px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:0;list-style:none}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);padding:8px 16px;border-radius:8px;transition:color .18s,background .18s;display:block}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--bg2)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-btn{font-size:13px;font-weight:600;padding:8px 20px;border-radius:9px;border:none;transition:all .18s}
.nav-btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--bdr2)}
.nav-btn-ghost:hover{background:var(--bg2);color:var(--ink)}
.nav-btn-solid{background:var(--p);color:#fff}
.nav-btn-solid:hover{background:var(--pd);transform:translateY(-1px);box-shadow:0 4px 16px rgba(21,192,138,.35)}
.hamburger{display:none;flex-direction:column;gap:5px;border:none;background:none;padding:4px}
.hamburger span{width:22px;height:2px;background:var(--ink);border-radius:2px;display:block}
.mobile-nav{display:none;position:fixed;inset:64px 0 0 0;background:#fff;z-index:199;padding:1.5rem 2rem;border-top:1px solid var(--bdr);overflow-y:auto}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:12px 0;font-size:16px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--bg3);transition:color .2s}
.mobile-nav a:hover{color:var(--p)}
.mobile-nav .m-cta{display:block;margin-top:20px;background:var(--p);color:#fff;text-align:center;padding:14px;border-radius:var(--r);font-weight:700;font-size:15px}

/* HERO */
.hero{position:relative;overflow:hidden;background:var(--dark);padding:100px 2rem 80px;text-align:center}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(21,192,138,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(21,192,138,.07) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 30%,transparent 100%)}
.hero-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(21,192,138,.22) 0%,transparent 70%);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(21,192,138,.12);border:1px solid rgba(21,192,138,.28);color:var(--pm);font-size:12px;font-weight:600;padding:6px 14px;border-radius:100px;margin-bottom:28px;letter-spacing:.04em}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--p);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.hero h1{font-family:var(--disp);font-size:clamp(36px,6vw,68px);font-weight:800;letter-spacing:-2px;line-height:1.08;color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--p)}
.hero-sub{font-size:clamp(15px,2vw,18px);color:#7fa99a;line-height:1.7;max-width:520px;margin:0 auto 40px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:60px}
.btn-hero-primary{background:var(--p);color:#fff;font-size:15px;font-weight:700;padding:14px 32px;border-radius:11px;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.btn-hero-primary:hover{background:var(--pm);transform:translateY(-2px);box-shadow:0 8px 28px rgba(21,192,138,.4)}
.btn-hero-ghost{background:rgba(255,255,255,.06);color:#b2cdc6;font-size:15px;font-weight:600;padding:14px 28px;border-radius:11px;border:1px solid rgba(255,255,255,.1);transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.btn-hero-ghost:hover{background:rgba(255,255,255,.11);color:#fff}
.hero-stats{display:flex;justify-content:center;border:1px solid rgba(21,192,138,.2);border-radius:var(--r2);overflow:hidden;background:rgba(21,192,138,.05)}
.hero-stat{flex:1;padding:20px 24px;text-align:center;border-right:1px solid rgba(21,192,138,.15)}
.hero-stat:last-child{border:none}
.hero-stat-num{font-family:var(--disp);font-size:26px;font-weight:800;color:var(--p);line-height:1}
.hero-stat-lbl{font-size:12px;color:#7fa99a;margin-top:4px;font-weight:500}

/* LAYOUT */
.section{padding:96px 2rem}
.container{max-width:1160px;margin:0 auto}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p);margin-bottom:10px}
.section-title{font-family:var(--disp);font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:-1px;line-height:1.15;color:var(--ink);margin-bottom:14px}
.section-sub{font-size:17px;color:var(--muted);line-height:1.7;max-width:480px}

/* TOOL CARDS */
.tools-search-wrap{position:relative;max-width:280px}
.tools-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--light)}
.tools-search{width:100%;padding:12px 16px 12px 44px;border:1.5px solid var(--bdr);border-radius:var(--r);font-family:var(--font);font-size:14px;outline:none;background:var(--bg);color:var(--ink);transition:border .2s,box-shadow .2s}
.tools-search:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(21,192,138,.12)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:32px}
.tool-card{background:#fff;border:1.5px solid var(--bdr);border-radius:var(--r2);padding:28px 24px;transition:border-color .2s,transform .2s,box-shadow .2s;display:block;text-decoration:none;color:inherit;position:relative;overflow:hidden}
.tool-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--pl) 0%,transparent 60%);opacity:0;transition:opacity .2s;pointer-events:none}
.tool-card:hover{border-color:var(--p);transform:translateY(-4px);box-shadow:var(--shm)}
.tool-card:hover::after{opacity:1}
.tool-card:hover .tc-arrow{transform:translate(3px,-3px);opacity:1}
.tool-card:hover .tc-icon{background:var(--p);border-color:var(--p)}
.tool-card:hover .tc-icon svg{stroke:#fff}
.tc-icon{width:48px;height:48px;background:var(--pl);border:1px solid var(--bdr2);border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;z-index:1;transition:background .2s,border-color .2s}
.tc-title{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:7px;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.tc-arrow{font-size:16px;color:var(--p);opacity:0;transition:all .2s}
.tc-desc{font-size:13px;color:var(--muted);line-height:1.65;position:relative;z-index:1}

/* WHY SECTION */
.why-section{background:var(--dark);padding:96px 2rem}
.why-inner{max-width:1160px;margin:0 auto}
.why-head{text-align:center;margin-bottom:64px}
.why-head .section-eyebrow{color:var(--pm)}
.why-head .section-title{color:#fff}
.why-head .section-sub{color:#7fa99a;margin:0 auto}
.why-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--drkb);border-radius:var(--r2);overflow:hidden;margin-bottom:48px}
.why-stat{background:var(--drk2);padding:32px 24px;text-align:center}
.why-stat-num{font-family:var(--disp);font-size:40px;font-weight:800;color:var(--p);line-height:1}
.why-stat-lbl{font-size:13px;color:#7fa99a;margin-top:6px;font-weight:500}
.why-features{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--drkb);border-radius:var(--r2);overflow:hidden}
.wf-card{background:var(--drk2);padding:36px 32px;display:flex;gap:20px;align-items:flex-start;transition:background .2s}
.wf-card:hover{background:var(--drk3)}
.wf-icon{width:46px;height:46px;background:rgba(21,192,138,.1);border:1px solid rgba(21,192,138,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wf-title{font-family:var(--disp);font-size:16px;font-weight:700;color:#fff;margin-bottom:7px}
.wf-desc{font-size:14px;color:#7fa99a;line-height:1.7;margin:0}

/* CTA */
.cta-section{background:var(--dark);padding:0 2rem 96px}
.cta-inner{max-width:1160px;margin:0 auto}
.cta-card{background:linear-gradient(135deg,var(--drk3) 0%,var(--drk2) 100%);border:1px solid var(--drkb);border-radius:var(--r3);padding:72px 64px;display:flex;align-items:center;justify-content:space-between;gap:48px;position:relative;overflow:hidden}
.cta-card::before{content:'';position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(21,192,138,.15) 0%,transparent 70%);pointer-events:none}
.cta-left{flex:1}
.cta-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p);margin-bottom:14px}
.cta-title{font-family:var(--disp);font-size:clamp(26px,3.5vw,40px);font-weight:800;letter-spacing:-1px;color:#fff;line-height:1.15;margin-bottom:14px}
.cta-title em{font-style:normal;color:var(--p)}
.cta-sub{font-size:16px;color:#7fa99a;line-height:1.7;max-width:400px}
.cta-right{display:flex;flex-direction:column;gap:12px;flex-shrink:0}
.btn-cta-primary{background:var(--p);color:#fff;font-size:15px;font-weight:700;padding:15px 32px;border-radius:11px;border:none;transition:all .2s;white-space:nowrap;text-align:center;display:block}
.btn-cta-primary:hover{background:var(--pm);box-shadow:0 8px 28px rgba(21,192,138,.4);transform:translateY(-1px)}
.btn-cta-ghost{background:rgba(255,255,255,.05);color:#a8d8c8;font-size:14px;font-weight:600;padding:14px 28px;border-radius:11px;border:1px solid var(--drkb);transition:all .2s;white-space:nowrap;text-align:center;display:block}
.btn-cta-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;font-family:var(--font);border:none;transition:all .2s}
.btn-primary{background:var(--p);color:#fff}
.btn-primary:hover{background:var(--pd);transform:translateY(-1px);box-shadow:0 4px 14px rgba(21,192,138,.35)}
.btn-secondary{background:var(--bg2);color:var(--ink);border:1.5px solid var(--bdr)}
.btn-secondary:hover{border-color:var(--p);color:var(--p);background:var(--pl)}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:8px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}

/* TOOL HERO */
.tool-hero{background:var(--bg2);border-bottom:1px solid var(--bdr);padding:48px 2rem 36px}
.tool-hero-inner{max-width:960px;margin:0 auto}
.tool-hero h1{font-family:var(--disp);font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-1px;color:var(--ink);margin-bottom:10px;line-height:1.15}
.tool-hero p{font-size:16px;color:var(--muted);line-height:1.7;max-width:560px}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--light);margin-bottom:18px;flex-wrap:wrap}
.breadcrumb a{color:var(--p);font-weight:500}
.breadcrumb a:hover{color:var(--pd)}
.breadcrumb span{color:var(--light)}

/* TOOL MAIN */
.tool-main{max-width:960px;margin:0 auto;padding:36px 2rem 80px}
.t-box{background:#fff;border:1.5px solid var(--bdr);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);margin-bottom:20px;width:100%}
.t-box-head{background:var(--bg2);border-bottom:1.5px solid var(--bdr);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.t-box-head span{font-size:13px;font-weight:600;color:var(--muted)}
.t-box-body{padding:24px}
.t-box-body textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box;display:block;border:1.5px solid var(--bdr);border-radius:var(--r);padding:14px 16px;font-family:var(--mono);font-size:13px;resize:vertical;outline:none;min-height:200px;background:var(--bg2);color:var(--ink);line-height:1.75;transition:border .2s,box-shadow .2s}
.t-box-body textarea:focus{border-color:var(--p);background:#fff;box-shadow:0 0 0 3px rgba(21,192,138,.1)}
.t-result{background:#0b1a14;border:1.5px solid #1a3d2e;color:#a8d8c8;border-radius:var(--r);font-family:var(--mono);font-size:13px;min-height:200px;padding:16px 18px;white-space:pre-wrap;word-break:break-all;line-height:1.8;position:relative;width:100%;box-sizing:border-box}
.copy-fab{position:absolute;top:10px;right:10px;background:rgba(21,192,138,.15);border:1px solid rgba(21,192,138,.28);color:#a8d8c8;font-size:12px;padding:5px 12px;border-radius:6px;font-family:var(--font);font-weight:600;transition:background .2s}
.copy-fab:hover{background:rgba(21,192,138,.3)}
.status-ok{background:#ecfdf5;color:#065f46;border:1.5px solid #6ee7b7;font-size:13px;font-weight:600;padding:10px 14px;border-radius:9px;margin-top:12px;display:block}
.status-err{background:#fef2f2;color:#991b1b;border:1.5px solid #fca5a5;font-size:13px;font-weight:600;padding:10px 14px;border-radius:9px;margin-top:12px;display:block}

/* SEO CONTENT */
.seo-content{margin-top:56px}
.seo-content h2{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.4px;margin:36px 0 12px;color:var(--ink);border-left:3px solid var(--p);padding-left:14px}
.seo-content h3{font-size:16px;font-weight:700;margin:22px 0 8px;color:var(--pdd)}
.seo-content p{font-size:15px;color:var(--muted);line-height:1.85;margin-bottom:12px}
.seo-content ul,.seo-content ol{margin:10px 0 14px 22px}
.seo-content li{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:5px}
.seo-content code{font-family:var(--mono);background:var(--pl);color:var(--pdd);padding:2px 7px;border-radius:5px;font-size:13px}
.seo-content strong{font-weight:700;color:var(--ink)}

/* FAQ */
.faq-section{margin-top:56px}
.faq-section h2{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.4px;margin-bottom:20px;color:var(--ink);border-left:3px solid var(--p);padding-left:14px}
.faq-item{border:1.5px solid var(--bdr);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.faq-q{padding:15px 20px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;background:var(--bg2);transition:background .15s;gap:12px;user-select:none}
.faq-q:hover{background:var(--pl);color:var(--pdd)}
.faq-arrow{font-size:11px;color:var(--p);transition:transform .3s;flex-shrink:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease,padding .32s;font-size:14px;color:var(--muted);line-height:1.75;padding:0 20px}
.faq-a.open{max-height:300px;padding:14px 20px}
.faq-open .faq-arrow{transform:rotate(180deg)}

/* PAGE HERO */
.page-hero{background:var(--dark);padding:80px 2rem 64px;text-align:center;position:relative;overflow:hidden}
.page-hero-glow{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:500px;height:300px;background:radial-gradient(ellipse,rgba(21,192,138,.18) 0%,transparent 70%);pointer-events:none}
.page-hero-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.page-hero h1{font-family:var(--disp);font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-1.5px;color:#fff;line-height:1.12;margin-bottom:16px}
.page-hero h1 em{font-style:normal;color:var(--p)}
.page-hero p{font-size:17px;color:#7fa99a;line-height:1.7}

/* PAGE CONTENT */
.page-content{max-width:800px;margin:0 auto;padding:60px 2rem 100px}
.page-content h2{font-family:var(--disp);font-size:21px;font-weight:700;margin:40px 0 12px;letter-spacing:-.4px;border-left:3px solid var(--p);padding-left:14px;color:var(--ink)}
.page-content h3{font-size:16px;font-weight:700;margin:22px 0 8px;color:var(--pdd)}
.page-content p{font-size:15px;color:var(--muted);line-height:1.85;margin-bottom:14px}
.page-content ul,.page-content ol{margin:10px 0 16px 22px}
.page-content li{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:6px}
.page-content a{color:var(--p);font-weight:500}
.page-content code{font-family:var(--mono);background:var(--pl);color:var(--pdd);padding:2px 7px;border-radius:5px;font-size:13px}
.page-content strong{font-weight:700;color:var(--ink)}

/* ABOUT */
.about-mission{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-visual{background:linear-gradient(135deg,var(--drk2) 0%,var(--drk3) 100%);border:1px solid var(--drkb);border-radius:var(--r3);aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:72px;max-width:380px}
.value-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:48px}
.value-card{background:var(--bg2);border:1.5px solid var(--bdr);border-radius:var(--r2);padding:28px;transition:border-color .2s}
.value-card:hover{border-color:var(--p)}
.value-icon{font-size:26px;margin-bottom:14px}
.value-card h3{font-family:var(--disp);font-size:16px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.value-card p{font-size:14px;color:var(--muted);line-height:1.7}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:3fr 2fr;gap:56px;align-items:start}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-group label{font-size:13px;font-weight:600;color:var(--ink)}
.form-group input,.form-group select,.form-group textarea{padding:12px 16px;border:1.5px solid var(--bdr);border-radius:var(--r);font-family:var(--font);font-size:14px;outline:none;transition:border .2s,box-shadow .2s;background:var(--bg);color:var(--ink)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(21,192,138,.1)}
.form-group textarea{min-height:130px;resize:vertical}
.contact-info-card{background:var(--dark);border-radius:var(--r2);padding:32px}
.contact-info-card h3{font-family:var(--disp);font-size:18px;font-weight:700;color:#fff;margin-bottom:24px}
.ci-item{display:flex;gap:14px;margin-bottom:20px;align-items:flex-start}
.ci-icon{width:40px;height:40px;background:rgba(21,192,138,.12);border:1px solid rgba(21,192,138,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-label{font-size:12px;font-weight:600;color:#5a8070;text-transform:uppercase;letter-spacing:.06em}
.ci-val{font-size:14px;color:#7fa99a;margin-top:3px}

/* FOOTER */
footer{background:var(--dark);border-top:1px solid var(--drkb);padding:64px 2rem 32px}
.footer-inner{max-width:1160px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand p{font-size:14px;color:#5a8070;margin-top:14px;line-height:1.8;max-width:240px}
.footer-col h5{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5a8070;margin-bottom:16px}
.footer-col a{display:block;font-size:14px;color:#7fa99a;margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:var(--p)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--drkb);padding-top:24px}
.footer-bottom p{font-size:13px;color:#3d6050}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{font-size:13px;color:#3d6050;transition:color .2s}
.footer-bottom-links a:hover{color:var(--p)}

/* TOAST */
.toast{position:fixed;bottom:28px;right:28px;background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--r);font-size:14px;font-weight:600;z-index:9999;transform:translateY(90px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 32px rgba(0,0,0,.3);display:flex;align-items:center;gap:8px}
.toast.show{transform:translateY(0);opacity:1}
.toast-icon{color:var(--p)}

/* RESPONSIVE */
@media(max-width:900px){.nav-links,.nav-right{display:none}.hamburger{display:flex}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.contact-grid{grid-template-columns:1fr}.about-mission{grid-template-columns:1fr}.why-stats{grid-template-columns:repeat(2,1fr)}.why-features{grid-template-columns:1fr}.cta-card{flex-direction:column;padding:48px 32px;text-align:center}.cta-right{width:100%}.btn-cta-primary,.btn-cta-ghost{width:100%}.form-row{grid-template-columns:1fr}}
@media(max-width:600px){.hero{padding:70px 1.5rem 60px}.hero-stats{flex-direction:column}.hero-stat{border-right:none;border-bottom:1px solid rgba(21,192,138,.15)}.hero-stat:last-child{border:none}.section{padding:64px 1.5rem}.tool-main{padding:28px 1rem 60px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}.tools-grid{grid-template-columns:1fr}.why-stats{grid-template-columns:repeat(2,1fr)}.cta-card{padding:36px 24px}}

/* ── TEXTAREA NUCLEAR FIX ── */
textarea {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
.t-box-body textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  border: 1.5px solid var(--bdr) !important;
  border-radius: var(--r) !important;
  padding: 14px 16px !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  resize: vertical !important;
  outline: none !important;
  min-height: 200px !important;
  background: var(--bg2) !important;
  color: var(--ink) !important;
  line-height: 1.75 !important;
  transition: border .2s, box-shadow .2s !important;
}
.t-box-body textarea:focus {
  border-color: var(--p) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(21,192,138,.1) !important;
}

/* ═══════════════════════════════════════
   ELEGANT TOOL UI — v4
═══════════════════════════════════════ */

/* Tool workspace — full bleed editor feel */
.tool-workspace {
  background: var(--bg);
  border: 1.5px solid var(--bdr);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(11,15,14,.08), 0 1px 4px rgba(11,15,14,.04);
  margin-bottom: 20px;
}

/* Editor top bar — like a code editor titlebar */
.tool-topbar {
  background: #f8faf9;
  border-bottom: 1.5px solid var(--bdr);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  gap: 12px;
}
.tool-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tool-topbar-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tool-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.tool-dot-red   { background: #ff5f57; }
.tool-dot-yellow{ background: #febc2e; }
.tool-dot-green { background: #28c840; }
.tool-topbar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
  margin-left: 4px;
}
.tool-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tba-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 7px;
  border: 1.5px solid var(--bdr);
  background: var(--bg);
  color: var(--muted);
  transition: all .18s;
  font-family: var(--font);
  cursor: pointer;
}
.tba-btn:hover { border-color: var(--p); color: var(--p); background: var(--pl); }
.tba-btn-primary {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
}
.tba-btn-primary:hover {
  background: var(--pd);
  border-color: var(--pd);
  color: #fff;
  box-shadow: 0 2px 10px rgba(21,192,138,.35);
}

/* Editor pane split */
.tool-editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}
.tool-editor-split.single { grid-template-columns: 1fr; }
.tool-pane {
  display: flex;
  flex-direction: column;
  border-right: 1.5px solid var(--bdr);
  position: relative;
}
.tool-pane:last-child { border-right: none; }
.tool-pane-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--light);
  padding: 10px 18px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bg3);
}
.tool-pane-label span { display: flex; align-items: center; gap: 6px; }
.pane-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--pl);
  color: var(--p);
  letter-spacing: .04em;
}
.pane-badge-dark {
  background: rgba(21,192,138,.12);
  color: var(--pm);
}
.tool-pane-textarea {
  flex: 1;
  position: relative;
}
.tool-pane-textarea textarea {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: unset !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 18px !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  resize: none !important;
  outline: none !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.tool-pane-textarea textarea:focus {
  background: #fffffe !important;
  box-shadow: none !important;
  border: none !important;
}
.tool-pane-output {
  flex: 1;
  background: #0b1a14;
  font-family: var(--mono);
  font-size: 13px;
  color: #a8d8c8;
  padding: 16px 18px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.8;
  min-height: 340px;
}
.tool-pane-output.empty { color: #3d6050; font-style: italic; }

/* Bottom action bar */
.tool-actionbar {
  background: #f8faf9;
  border-top: 1.5px solid var(--bdr);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tool-actionbar-left {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-actionbar-right { display: flex; gap: 8px; }
.tab-action {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 9px;
  border: 1.5px solid var(--bdr);
  background: var(--bg);
  color: var(--ink);
  transition: all .18s;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tab-action:hover { border-color: var(--bdr2); background: var(--bg3); }
.tab-action-primary {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
}
.tab-action-primary:hover {
  background: var(--pd);
  border-color: var(--pd);
  box-shadow: 0 3px 14px rgba(21,192,138,.38);
  transform: translateY(-1px);
}
.tab-action-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--bdr);
}
.tab-action-ghost:hover { color: var(--ink); border-color: var(--bdr2); background: var(--bg3); }

/* Status strip */
.tool-statusbar {
  background: #f0f7f4;
  border-top: 1px solid var(--bdr);
  padding: 7px 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.tool-statusbar.ok  { background: #ecfdf5; color: #065f46; }
.tool-statusbar.err { background: #fef2f2; color: #991b1b; }
.tool-statusbar-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; flex-shrink: 0; }

/* Copy button in output pane */
.pane-copy-btn {
  position: absolute;
  top: 10px; right: 12px;
  background: rgba(21,192,138,.15);
  border: 1px solid rgba(21,192,138,.3);
  color: #a8d8c8;
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  transition: background .2s;
  z-index: 2;
}
.pane-copy-btn:hover { background: rgba(21,192,138,.28); }

/* Responsive: stack on mobile */


/* ═══════════════════════════════════════
   COMPREHENSIVE MOBILE FIXES
═══════════════════════════════════════ */

/* ── 900px: tablets and below ── */
@media (max-width: 900px) {
  /* Nav */
  .nav-links, .nav-right { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero { padding: 70px 1.5rem 56px; }
  .hero h1 { letter-spacing: -1.5px; }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: var(--r);
  }
  .hero-stat {
    border-right: 1px solid rgba(21,192,138,.15);
    border-bottom: 1px solid rgba(21,192,138,.15);
    padding: 16px 12px;
  }
  .hero-stat:nth-child(2n) { border-right: none; }
  .hero-stat:nth-child(3), .hero-stat:nth-child(4) { border-bottom: none; }

  /* Sections */
  .section { padding: 64px 1.5rem; }
  .container { padding: 0; }

  /* Tools grid */
  .tools-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Why section */
  .why-section { padding: 64px 1.5rem; }
  .why-stats { grid-template-columns: 1fr 1fr; }
  .why-features { grid-template-columns: 1fr; }
  .wf-card { padding: 24px 20px; }

  /* CTA */
  .cta-section { padding: 0 1.5rem 64px; }
  .cta-card {
    flex-direction: column;
    padding: 40px 28px;
    text-align: center;
    gap: 28px;
  }
  .cta-sub { max-width: 100%; margin: 0 auto; }
  .cta-right { width: 100%; align-items: stretch; }
  .btn-cta-primary, .btn-cta-ghost { width: 100%; text-align: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Pages */
  .contact-grid { grid-template-columns: 1fr; }
  .about-mission { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .about-visual { max-width: 100%; aspect-ratio: 2/1; font-size: 48px; }
}

/* ── 600px: phones ── */
@media (max-width: 600px) {
  /* Nav */
  .nav { padding: 0 1rem; }
  .nav-logo img { height: 28px; }

  /* Hero */
  .hero { padding: 56px 1rem 48px; }
  .hero h1 { font-size: 32px; letter-spacing: -1px; }
  .hero-sub { font-size: 15px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .btn-hero-primary, .btn-hero-ghost { width: 100%; justify-content: center; padding: 14px 20px; }
  .hero-stats { grid-template-columns: 1fr 1fr; margin-bottom: 0; }

  /* Sections */
  .section { padding: 52px 1rem; }
  .section-title { font-size: 26px; letter-spacing: -.5px; }
  .why-section { padding: 52px 1rem; }
  .why-head { margin-bottom: 40px; }
  .why-stat-num { font-size: 30px; }

  /* Tools grid — single column on phones */
  .tools-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .tool-card { padding: 22px 18px; }

  /* CTA */
  .cta-section { padding: 0 1rem 52px; }
  .cta-card { padding: 32px 20px; border-radius: var(--r2); }
  .cta-title { font-size: 26px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
  footer { padding: 48px 1rem 24px; }

  /* Page heroes */
  .page-hero { padding: 56px 1rem 40px; }
  .page-hero h1 { font-size: 32px; letter-spacing: -1px; }
  .page-content { padding: 40px 1rem 60px; }

  /* Tool hero */
  .tool-hero { padding: 32px 1rem 24px; }
  .tool-hero h1 { font-size: 24px; letter-spacing: -.5px; }
  .tool-hero p { font-size: 14px; }
  .tool-main { padding: 16px 1rem 60px; }
}

/* ── TOOL WORKSPACE MOBILE — complete rewrite ── */
@media (max-width: 700px) {

  /* Workspace container */
  .tool-workspace {
    border-radius: var(--r);
    box-shadow: 0 2px 16px rgba(11,15,14,.06);
  }

  /* Titlebar — hide filename, keep dots + actions */
  .tool-topbar {
    padding: 0 12px;
    height: 44px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .tool-topbar-title { display: none; }
  .tool-topbar-dots { gap: 5px; }
  .tool-dot { width: 9px; height: 9px; }
  .tba-btn { padding: 4px 10px; font-size: 11px; border-radius: 6px; }

  /* Split → stack vertically */
  .tool-editor-split {
    display: flex;
    flex-direction: column;
  }

  /* Each pane — fixed height on mobile, NOT position:absolute */
  .tool-pane {
    border-right: none;
    border-bottom: 1.5px solid var(--bdr);
    display: flex;
    flex-direction: column;
  }
  .tool-pane:last-child { border-bottom: none; }

  /* Input pane — use natural height */
  .tool-pane-textarea {
    position: relative;
    min-height: 180px;
    height: 180px;
  }
  .tool-pane-textarea textarea {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    resize: none !important;
  }

  /* Output pane */
  .tool-pane-output {
    min-height: 160px;
    font-size: 12px;
    padding: 12px 14px;
  }

  /* Pane labels */
  .tool-pane-label {
    padding: 8px 14px 5px;
    font-size: 10px;
  }

  /* Action bar — wrap and shrink */
  .tool-actionbar {
    padding: 10px 12px;
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
  }
  .tool-actionbar-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .tool-actionbar-right { width: 100%; }
  .tab-action {
    font-size: 12px;
    padding: 9px 10px;
    justify-content: center;
    border-radius: 8px;
    gap: 5px;
  }
  .tab-action svg { width: 12px; height: 12px; }
  .tool-actionbar-right .tab-action { width: 100%; justify-content: center; }

  /* Status bar */
  .tool-statusbar {
    padding: 6px 14px;
    font-size: 11px;
  }

  /* Copy button in output pane */
  .pane-copy-btn {
    top: 6px; right: 8px;
    font-size: 10px;
    padding: 3px 9px;
  }

  /* Breadcrumb */
  .breadcrumb { font-size: 12px; gap: 4px; }

  /* SEO content */
  .seo-content { margin-top: 36px; }
  .seo-content h2 { font-size: 18px; }
  .seo-content p, .seo-content li { font-size: 14px; }

  /* FAQ */
  .faq-section { margin-top: 36px; }
  .faq-section h2 { font-size: 18px; }
  .faq-q { font-size: 13px; padding: 13px 16px; }
  .faq-a { font-size: 13px; }

  /* Why stats on phone */
  .why-stats { grid-template-columns: 1fr 1fr; }
  .why-stat { padding: 20px 16px; }
  .why-stat-num { font-size: 28px; }

  /* Contact info card */
  .contact-info-card { padding: 24px 20px; }

  /* Value cards */
  .value-cards { grid-template-columns: 1fr; gap: 12px; }

  /* Page content */
  .page-content h2 { font-size: 18px; }
}

/* ── 380px: very small phones ── */
@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .hero-stat-num { font-size: 22px; }
  .tool-actionbar-left { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .why-stats { grid-template-columns: 1fr 1fr; }
  .nav-logo img { height: 24px; }
}

/* ── HAMBURGER ANIMATION ── */
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.hamburger span { transition: transform .25s, opacity .25s; }