:root{
  --ink:#10233f;
  --ink-2:#42536b;
  --muted:#6e7e93;
  --blue:#0b57d0;
  --blue-strong:#083f9c;
  --blue-soft:#edf4ff;
  --line:#dbe3ee;
  --line-strong:#c8d4e3;
  --surface:#fff;
  --canvas:#f7f9fc;
  --success:#167a5e;
  --warning:#8a6511;
  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow-sm:0 2px 8px rgba(16,35,63,.05);
  --shadow-md:0 12px 30px rgba(16,35,63,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--canvas);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
button,input{font:inherit}a{color:inherit;text-decoration:none}
.tool-shell{width:min(1160px,calc(100% - 48px));margin:0 auto}

.tool-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.tool-nav{min-height:72px;display:flex;align-items:center;gap:28px}
.tool-brand{display:flex;align-items:center;gap:12px;min-width:0}.tool-brand img{width:104px;height:auto;display:block}.tool-brand-divider{width:1px;height:30px;background:var(--line)}
.tool-brand-copy{display:grid;gap:2px;white-space:nowrap}.tool-brand-copy strong{font-size:13px;letter-spacing:.01em}.tool-brand-copy small{font-size:10px;color:var(--muted);font-weight:600}
.tool-nav-links{margin-left:auto;display:flex;align-items:center;gap:24px;color:var(--ink-2);font-size:13px;font-weight:700}.tool-nav-links a:hover{color:var(--blue)}
.tool-nav-cta{border:1px solid var(--line-strong);border-radius:8px;padding:10px 14px;color:var(--ink)!important;background:var(--surface);box-shadow:var(--shadow-sm)}.tool-nav-cta svg{width:15px;height:15px;vertical-align:-3px;margin-left:4px}

.hero{background:linear-gradient(180deg,#fff 0%,#f7f9fc 100%);border-bottom:1px solid var(--line);padding:76px 0 54px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:70px;align-items:center}
.eyebrow,.demo-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-2);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.eyebrow-dot,.demo-pill i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.hero h1,.converter-hero h1{margin:0;font-family:var(--font-display);font-weight:750;letter-spacing:-.045em;line-height:1.08}.hero h1{max-width:720px;font-size:clamp(42px,5.1vw,64px)}.converter-hero h1{max-width:790px;font-size:clamp(38px,4.8vw,58px)}.gradient-text{color:var(--blue)}
.hero-copy,.converter-hero p{max-width:680px;margin:22px 0 0;color:var(--ink-2);font-size:17px;line-height:1.7}.preview-disclaimer{margin-top:10px!important;color:var(--muted)!important;font-size:12px!important;line-height:1.55!important}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 16px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:750;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}.btn svg{width:17px;height:17px}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(11,87,208,.2)}.btn-primary:hover{background:var(--blue-strong);transform:translateY(-1px)}.btn-secondary{background:#fff;border-color:var(--line-strong);color:var(--ink)}.btn-secondary:hover{border-color:#9eb3cc;background:#fbfdff}
.hero-note{display:flex;gap:8px;align-items:flex-start;margin:22px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.hero-note svg{width:16px;flex:0 0 auto;color:var(--success)}

.hero-visual{min-height:350px;display:grid;align-items:center}.visual-card{width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:12px;padding:22px;box-shadow:var(--shadow-md)}.visual-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line)}.visual-title{font-size:13px;font-weight:800}.visual-free{color:var(--success);background:#edf8f4;border:1px solid #c9e9dc;border-radius:5px;padding:5px 7px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.visual-file-row{display:flex;align-items:center;gap:13px;margin:18px 0;padding:15px;border:1px solid var(--line);border-radius:8px;background:#fbfcfe}.visual-upload-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:7px;background:var(--blue-soft);color:var(--blue)}.visual-upload-icon svg{width:20px;height:20px}.visual-file-row strong,.visual-file-row small{display:block}.visual-file-row strong{font-size:13px}.visual-file-row small{margin-top:4px;color:var(--muted);font-size:12px}
.visual-meta{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--line);font-size:12px}.visual-meta span{color:var(--muted)}.visual-meta strong{font-size:12px}.visual-status{display:flex;align-items:center;gap:8px;padding-top:15px;color:var(--success);font-size:12px;font-weight:700}.visual-status i{width:7px;height:7px;border-radius:50%;background:var(--success)}

.trust-strip{padding:18px 0;background:#fff;border-bottom:1px solid var(--line)}.trust-row{display:flex;gap:20px 38px;flex-wrap:wrap;color:var(--ink-2);font-size:12px;font-weight:700}.trust-row span{display:flex;gap:8px;align-items:center}.trust-row svg{width:16px;color:var(--blue)}

.section{padding:72px 0}.section-white{background:#fff;border-bottom:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:28px}.section-kicker{margin:0 0 10px;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.section-title{margin:0;font-size:clamp(29px,3.5vw,42px);letter-spacing:-.04em;line-height:1.12}.section-desc{max-width:450px;margin:0;color:var(--ink-2);font-size:15px;line-height:1.65}
.tool-grid{display:grid;grid-template-columns:minmax(0,390px);gap:16px}.tool-card{min-height:276px;padding:22px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tool-card:hover{border-color:#99b8dd;box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-top{display:flex;justify-content:space-between;gap:10px}.card-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;background:var(--icon-bg,#edf4ff);color:var(--icon-color,var(--blue))}.card-icon svg{width:20px;height:20px}.card-badge{border:1px solid #c9e9dc;border-radius:5px;padding:5px 7px;color:var(--success);background:#f4fbf8;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.tool-card h3{margin:22px 0 8px;font-size:19px;letter-spacing:-.025em}.tool-card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.65}.card-link{display:flex;gap:7px;align-items:center;margin-top:auto;padding-top:22px;color:var(--blue);font-size:13px;font-weight:800}.card-link svg{width:15px;height:15px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.how-step{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:24px 22px;border-right:1px solid var(--line)}.how-step:first-child{padding-left:0}.how-step:last-child{border:0}.step-number{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;background:var(--ink);color:#fff;font-size:11px;font-weight:800}.how-step h3{margin:2px 0 6px;font-size:15px}.how-step p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.6}
.tool-footer{background:#fff;border-top:1px solid var(--line);padding:25px 0}.footer-row{display:flex;justify-content:space-between;gap:18px;color:var(--muted);font-size:12px}.footer-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:13px;font-weight:800}.footer-brand img{width:88px;height:auto}

/* Converter workspace */
.converter-main{padding:52px 0 68px}.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:28px;color:var(--muted);font-size:12px;font-weight:700}.breadcrumb a:hover{color:var(--blue)}.breadcrumb svg{width:14px;color:#9aabbd}.converter-hero{padding-bottom:32px;border-bottom:1px solid var(--line)}.converter-hero p{font-size:16px}.demo-pill{margin-bottom:16px;color:var(--blue);background:var(--blue-soft);border-color:#cdddf4}.demo-pill i{background:var(--blue)}.converter-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;margin-top:30px;align-items:start}.upload-panel{padding:12px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)}.dropzone{min-height:296px;display:grid;place-items:center;padding:32px 22px;border:1.5px dashed #b9c8d9;border-radius:8px;background:#fbfcfe;text-align:center;cursor:pointer;transition:border-color .16s ease,background .16s ease;outline:none}.dropzone:hover,.dropzone:focus-visible,.dropzone.is-dragging{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 2px rgba(11,87,208,.08)}.dropzone.is-ready{border-style:solid;border-color:#8fc9b6;background:#f3fbf7}.drop-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 16px;border-radius:8px;background:var(--blue-soft);color:var(--blue)}.drop-icon svg{width:25px;height:25px}.dropzone.is-ready .drop-icon{background:#e5f6ef;color:var(--success)}.dropzone h2{margin:0 0 8px;font-size:19px;letter-spacing:-.02em}.dropzone p{margin:0;color:var(--muted);font-size:14px}.browse-copy{color:var(--blue);font-weight:800}.file-preview{display:none;align-items:center;gap:13px;max-width:460px;text-align:left}.dropzone.is-ready .file-prompt{display:none}.dropzone.is-ready .file-preview{display:flex}.file-type{width:48px;height:52px;display:grid;place-items:center;border:1px solid #cde2d9;border-radius:7px;background:#fff;color:var(--success);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:800;text-transform:uppercase}.file-info{min-width:0}.file-name{display:block;max-width:350px;overflow:hidden;font-size:15px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.file-size{display:block;margin-top:4px;color:var(--muted);font-size:12px}.convert-button{width:100%;margin-top:10px;min-height:48px}.convert-button:disabled{background:#e5ebf3;color:#8a99aa;box-shadow:none;cursor:not-allowed;transform:none}.convert-button .spin{display:none;animation:spin .8s linear infinite}.convert-button.is-loading .spin{display:block}.convert-button.is-loading .wand{display:none}@keyframes spin{to{transform:rotate(360deg)}}
.format-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:15px 0 0}.format-row span{border:1px solid var(--line);border-radius:5px;background:#fff;padding:5px 7px;color:var(--ink-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700}.format-row .format-label{border:0;background:transparent;padding-left:0;color:var(--muted);font-family:var(--font-ui);font-weight:600}.privacy-note{display:flex;gap:8px;margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.privacy-note svg{width:16px;flex:0 0 auto;color:var(--success)}
.side-card{padding:20px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow-sm)}.side-card+.side-card{margin-top:14px}.side-card h2{margin:0 0 16px;font-size:15px}.benefit-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}.benefit-list li{display:grid;grid-template-columns:30px 1fr;gap:10px;color:var(--ink-2);font-size:13px;line-height:1.5}.benefit-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:var(--blue-soft);color:var(--blue)}.benefit-icon svg{width:15px;height:15px}.benefit-list strong{display:block;margin-bottom:2px;color:var(--ink);font-size:13px}.side-demo{border-color:#d2dce8;background:#f3f6fa;color:var(--ink)}.side-demo h2{color:var(--ink)}.side-demo p{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.65}.side-demo strong{color:var(--ink)}.status-row{display:flex;gap:8px;align-items:center;margin-top:16px;color:var(--muted);font-size:11.5px;font-weight:700}.status-row i{width:7px;height:7px;border-radius:50%;background:#d89d14}.demo-toast{position:fixed;z-index:60;left:50%;bottom:24px;display:flex;gap:11px;align-items:flex-start;width:min(510px,calc(100% - 30px));padding:14px 16px;border:1px solid #31445e;border-radius:8px;background:var(--ink);color:#fff;box-shadow:0 18px 40px rgba(16,35,63,.25);opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:.22s ease}.demo-toast.is-visible{opacity:1;transform:translate(-50%,0)}.demo-toast svg{width:18px;flex:0 0 auto;color:#bcd8ff}.demo-toast strong{display:block;margin-bottom:3px;font-size:13px}.demo-toast span{color:#c8d5e4;font-size:12px;line-height:1.45}

@media(max-width:900px){.hero{padding:58px 0 42px}.hero-grid,.converter-layout{grid-template-columns:1fr;gap:34px}.hero-visual{min-height:0;max-width:620px}.converter-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}.side-card+.side-card{margin-top:0}.how-step{padding:22px 16px}.how-step:first-child{padding-left:0}}
@media(max-width:640px){.tool-shell{width:min(100% - 32px,1160px)}.tool-nav{min-height:64px}.tool-brand img{width:94px}.tool-brand-divider,.tool-brand-copy,.tool-nav-links>a:not(.tool-nav-cta){display:none}.tool-nav-links{margin-left:auto}.tool-nav-cta{padding:9px 11px;font-size:12px}.hero{padding:44px 0 36px}.hero h1{font-size:42px}.hero-copy{font-size:16px}.eyebrow{font-size:10px;letter-spacing:.04em}.hero-actions{margin-top:24px}.btn{width:100%}.trust-row{gap:12px 18px}.section{padding:52px 0}.section-heading{display:block}.section-desc{margin-top:14px}.tool-grid,.how-grid,.converter-side{grid-template-columns:1fr}.tool-card{min-height:244px}.how-grid{margin-top:26px}.how-step{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}.how-step:last-child{border-bottom:0}.converter-main{padding:34px 0 52px}.converter-hero{padding-bottom:26px}.converter-hero h1{font-size:39px}.converter-layout{margin-top:22px}.dropzone{min-height:262px;padding:28px 16px}.format-row .format-label{width:100%}.file-name{max-width:210px}.footer-row{display:grid;gap:10px}.visual-card{padding:18px}.visual-file-row{padding:13px}.demo-toast{bottom:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}