/* ============================================================
   JPEG XL Converter — shared styles
   Clean, fast, trustworthy utility aesthetic (light theme).
   ============================================================ */
:root{
  --bg:#ffffff; --bg-soft:#f6f8fc; --bg-soft2:#eef2f9;
  --ink:#0d1526; --ink2:#3b475c; --muted:#6b7890;
  --line:#e3e8f0; --line2:#cdd6e4;
  --brand:#5b4bff; --brand-d:#4a3ce0; --brand-soft:#ede9ff;
  --accent:#10b8a6; --accent-d:#0c9384;
  --ok:#16a34a; --ok-bg:#ecfdf3; --warn:#b45309; --warn-bg:#fff7ed;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 12px 40px rgba(45,40,120,.12);
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-d); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:62px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--ink); letter-spacing:-.02em;}
.brand:hover{text-decoration:none;}
.brand .logo{width:30px; height:30px; border-radius:8px; display:block;}
.brand .tld{color:var(--brand);}
.nav-right{display:flex; align-items:center; gap:18px;}
.nav-links{display:flex; gap:18px; font-size:14.5px; font-weight:500;}
.nav-links a{color:var(--ink2);}
.lang{position:relative;}
.lang summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--ink2); padding:7px 11px; border:1px solid var(--line2);
  border-radius:9px; background:#fff;}
.lang summary::-webkit-details-marker{display:none;}
.lang[open] summary{border-color:var(--brand); color:var(--brand-d);}
.lang-menu{position:absolute; right:0; top:46px; background:#fff; border:1px solid var(--line);
  border-radius:11px; box-shadow:var(--shadow-lg); padding:6px; min-width:170px;}
.lang-menu a{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px;
  color:var(--ink2); font-size:14px; font-weight:500;}
.lang-menu a:hover{background:var(--bg-soft); text-decoration:none;}
.lang-menu a.active{color:var(--brand-d); font-weight:700;}
.flag{font-size:16px;}

/* ---------- hero / tool ---------- */
.hero{padding:46px 0 18px; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--brand-d); background:var(--brand-soft);
  padding:5px 12px; border-radius:30px;}
.hero h1{font-size:40px; line-height:1.12; margin:16px 0 10px; letter-spacing:-.03em; font-weight:800;}
.hero p.sub{font-size:18px; color:var(--ink2); max-width:680px; margin:0 auto;}
.badges{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:20px 0 6px;}
.badge{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--ink2); background:var(--bg-soft); border:1px solid var(--line); padding:7px 13px; border-radius:30px;}
.badge svg{width:15px; height:15px;}
.badge.green{color:var(--ok); background:var(--ok-bg); border-color:#c7f0d4;}

/* ---------- converter card ---------- */
.tool{max-width:760px; margin:26px auto 0;}
.dropzone{
  border:2.5px dashed var(--line2); border-radius:var(--radius); background:var(--bg-soft);
  padding:46px 24px; text-align:center; cursor:pointer; transition:.18s ease;
}
.dropzone:hover{border-color:var(--brand); background:var(--brand-soft);}
.dropzone.drag{border-color:var(--brand); background:var(--brand-soft); transform:scale(1.005);}
.dropzone .dz-icon{width:54px; height:54px; margin:0 auto 14px; color:var(--brand);}
.dropzone .dz-title{font-size:18px; font-weight:700; color:var(--ink);}
.dropzone .dz-hint{font-size:14px; color:var(--muted); margin-top:5px;}
.dropzone .dz-btn{display:inline-block; margin-top:16px; background:var(--brand); color:#fff;
  font-weight:700; font-size:15px; padding:11px 22px; border-radius:10px; box-shadow:var(--shadow);}
.dropzone .dz-privacy{margin-top:15px; font-size:13.5px; color:var(--ok); font-weight:600; display:flex; align-items:center; gap:6px; justify-content:center;}

/* controls */
.controls{display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center; justify-content:center;
  margin-top:18px; padding:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);}
.ctrl{display:flex; flex-direction:column; gap:6px; font-size:13px;}
.ctrl > label{font-weight:700; color:var(--ink2); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;}
.seg{display:inline-flex; background:var(--bg-soft2); border-radius:9px; padding:3px;}
.seg button{border:0; background:transparent; padding:7px 13px; border-radius:7px; font-weight:600;
  font-size:13.5px; color:var(--ink2); cursor:pointer;}
.seg button.on{background:#fff; color:var(--brand-d); box-shadow:var(--shadow);}
.quality{display:flex; align-items:center; gap:10px;}
.quality input[type=range]{accent-color:var(--brand); width:150px;}
.quality output{font-weight:700; color:var(--brand-d); min-width:34px;}
.switch{display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; color:var(--ink2);}
.switch input{accent-color:var(--brand); width:17px; height:17px;}

/* results */
.results{margin-top:20px; display:flex; flex-direction:column; gap:12px;}
.result{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 14px; box-shadow:var(--shadow);}
.result .thumb{width:54px; height:54px; border-radius:8px; object-fit:cover; background:var(--bg-soft2); flex:none;}
.result .meta{flex:1; min-width:0;}
.result .fname{font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.result .sizes{font-size:13px; color:var(--muted); margin-top:2px;}
.result .saved{font-weight:700;}
.result .saved.good{color:var(--ok);} .result .saved.bad{color:var(--warn);}
.result .spin{font-size:13px; color:var(--brand-d); font-weight:600;}
.result .err{font-size:13px; color:#b91c1c; font-weight:600;}
.btn-dl{flex:none; background:var(--brand); color:#fff; border:0; font-weight:700; font-size:13.5px;
  padding:9px 16px; border-radius:9px; cursor:pointer; text-decoration:none;}
.btn-dl:hover{background:var(--brand-d); text-decoration:none;}
.btn-dl.ghost{background:#fff; color:var(--brand-d); border:1px solid var(--line2);}
.results-actions{display:flex; gap:10px; justify-content:center; margin-top:4px;}
.spinner{display:inline-block; width:15px; height:15px; border:2.5px solid var(--brand-soft);
  border-top-color:var(--brand); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; margin-right:6px;}
@keyframes sp{to{transform:rotate(360deg)}}
.noscript-warn{background:var(--warn-bg); border:1px solid #fed7aa; color:var(--warn);
  padding:12px 16px; border-radius:10px; text-align:center; font-weight:600; margin:16px auto; max-width:760px;}

/* ---------- content sections ---------- */
section.block{padding:40px 0;}
section.block.alt{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.block h2{font-size:27px; letter-spacing:-.02em; margin:0 0 8px; text-align:center;}
.block .lead{text-align:center; color:var(--ink2); max-width:680px; margin:0 auto 26px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.feature{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.feature .fi{width:40px; height:40px; border-radius:10px; background:var(--brand-soft); color:var(--brand-d);
  display:flex; align-items:center; justify-content:center; margin-bottom:13px;}
.feature h3{margin:0 0 6px; font-size:17px;}
.feature p{margin:0; color:var(--ink2); font-size:14.5px;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s;}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px 20px;}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:-15px; left:20px;
  width:32px; height:32px; background:var(--brand); color:#fff; border-radius:9px; display:flex;
  align-items:center; justify-content:center; font-weight:800; box-shadow:var(--shadow);}
.step h3{margin:8px 0 5px; font-size:16px;}
.step p{margin:0; color:var(--ink2); font-size:14.5px;}

/* comparison table */
.cmp{max-width:720px; margin:0 auto; border-collapse:collapse; width:100%; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.cmp th,.cmp td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:14.5px;}
.cmp th{background:var(--bg-soft2); font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink2);}
.cmp td.y{color:var(--ok); font-weight:700;} .cmp td.n{color:var(--muted);}
.cmp tr:last-child td{border-bottom:0;}

/* FAQ */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 18px;}
.faq summary{cursor:pointer; font-weight:700; padding:14px 0; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--brand); font-size:22px; font-weight:400;}
.faq details[open] summary::after{content:"\2013";}
.faq details[open] summary{border-bottom:1px solid var(--line);}
.faq .ans{padding:12px 0 16px; color:var(--ink2); font-size:14.5px;}

/* legal pages */
.legal-page{max-width:760px; margin:34px auto 56px; padding:0 20px;}
.legal-page h1{font-size:30px; letter-spacing:-.02em; margin:0 0 6px;}
.legal-page .updated{color:var(--muted); font-size:14px; margin-bottom:22px;}
.legal-page h2{font-size:19px; margin:28px 0 8px;}
.legal-page p,.legal-page li{color:var(--ink2);}
.legal-page a{color:var(--brand-d);}
.legal-page .ph{background:#fff7d6; border:1px solid #f3d98a; padding:1px 6px; border-radius:5px; font-weight:600; color:#8a6d20;}
.legal-page .back{display:inline-block; margin-bottom:8px; font-weight:600; font-size:14px;}
.flegal a{color:#cbd5e6;}

/* jxl viewer */
.viewer-stage{margin-top:18px; background:repeating-conic-gradient(#eef2f9 0% 25%, #fff 0% 50%) 50%/22px 22px;
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; min-height:150px;
  display:flex; align-items:center; justify-content:center;}
.viewer-stage canvas,.viewer-stage img{max-width:100%; max-height:62vh; border-radius:8px; box-shadow:var(--shadow);}
.viewer-stage .ph-hint{color:var(--muted); font-size:14px;}
.viewer-stage .spin{color:var(--brand-d); font-weight:600;}
.viewer-stage .err{color:#b91c1c; font-weight:600;}
.viewer-info{margin-top:12px; font-size:14px; color:var(--ink2); font-weight:600; text-align:center;}
.viewer-dl{display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap;}

/* conversion cross-links */
.conv-links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:760px; margin:0 auto;}
.conv-link{display:inline-block; background:#fff; border:1px solid var(--line); border-radius:30px;
  padding:9px 17px; font-weight:600; font-size:14px; color:var(--brand-d); box-shadow:var(--shadow);}
.conv-link:hover{border-color:var(--brand); background:var(--brand-soft); text-decoration:none;}

/* call-to-action cards (viewer / guide) */
.cta-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:760px; margin:0 auto;}
.cta-card{display:flex; flex-direction:column; gap:3px; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--brand); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); color:var(--ink2);}
.cta-card:hover{border-color:var(--brand); text-decoration:none; box-shadow:var(--shadow-lg);}
.cta-card .cta-ic{font-size:22px;}
.cta-card b{color:var(--ink); font-size:15.5px;}
.cta-card .cta-sub{font-size:13.5px;}
@media (max-width:640px){.cta-row{grid-template-columns:1fr;}}

/* ============ polished buttons (v2) ============ */
.dropzone .dz-btn{
  background:linear-gradient(135deg,#6d5cff 0%,#4a3ce0 100%);
  padding:12px 28px; border-radius:11px; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(75,60,224,.30), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.dropzone:hover .dz-btn{transform:translateY(-1px); box-shadow:0 12px 26px rgba(75,60,224,.44), inset 0 1px 0 rgba(255,255,255,.3); filter:brightness(1.06);}
.btn-dl{
  background:linear-gradient(135deg,#6d5cff 0%,#4a3ce0 100%); border:0; letter-spacing:.2px;
  box-shadow:0 4px 12px rgba(75,60,224,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-dl:hover{transform:translateY(-1px); box-shadow:0 9px 20px rgba(75,60,224,.42); filter:brightness(1.06); text-decoration:none;}
.btn-dl.ghost{background:#fff; color:var(--brand-d); box-shadow:0 2px 8px rgba(16,24,40,.07);}
.btn-dl.ghost:hover{background:var(--brand-soft); filter:none;}
.seg{padding:4px; box-shadow:inset 0 1px 2px rgba(16,24,40,.06);}
.seg button{transition:all .14s ease; border-radius:8px;}
.seg button.on{box-shadow:0 2px 8px rgba(75,60,224,.20);}
.seg button:not(.on):hover{color:var(--brand-d); background:rgba(255,255,255,.6);}
.lang summary{transition:border-color .15s ease, box-shadow .15s ease;}
.lang summary:hover{border-color:var(--brand); box-shadow:0 3px 10px rgba(75,60,224,.14);}
.conv-link{transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;}
.conv-link:hover{transform:translateY(-1px);}
.cta-card{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.cta-card:hover{transform:translateY(-2px);}
.dz-btn:active,.btn-dl:active{transform:translateY(0); filter:brightness(.98);}

/* ============ buttons v3 — bolder, pill-shaped, glowing ============ */
.dropzone .dz-btn{
  background:linear-gradient(135deg,#8b6bff 0%,#5b4bff 48%,#4636cf 100%);
  padding:15px 38px; border-radius:999px; font-size:16px; font-weight:800; letter-spacing:.3px;
  box-shadow:0 10px 26px rgba(91,75,255,.45), inset 0 1px 0 rgba(255,255,255,.34);
}
.dropzone:hover .dz-btn{transform:translateY(-2px) scale(1.03); box-shadow:0 18px 40px rgba(91,75,255,.58), inset 0 1px 0 rgba(255,255,255,.42); filter:saturate(1.1) brightness(1.05);}
.btn-dl{background:linear-gradient(135deg,#8b6bff 0%,#5b4bff 48%,#4636cf 100%); border-radius:999px; padding:10px 20px; box-shadow:0 6px 16px rgba(91,75,255,.4);}
.btn-dl:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 12px 28px rgba(91,75,255,.55);}
.btn-dl.ghost{background:#fff; color:var(--brand-d); box-shadow:0 3px 10px rgba(16,24,40,.08);}
.seg{background:#eceefa; padding:5px; border-radius:13px;}
.seg button{border-radius:9px;}
.seg button.on{background:#fff; box-shadow:0 3px 10px rgba(91,75,255,.22); color:var(--brand-d); font-weight:800;}
.lang summary{border-radius:999px; padding:8px 15px;}
.cta-card{border-radius:16px;}

/* ============ header v4 — premium ============ */
header.site{position:sticky; top:0; z-index:50;}
header.site::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
  background:linear-gradient(90deg,#5b4bff,#22d3ee,#fbbf24,#10b8a6,#5b4bff);
  background-size:300% 100%; animation:hdrshift 16s linear infinite;
}
@keyframes hdrshift{to{background-position:300% 0;}}
.nav{height:66px;}
.brand{font-size:18.5px;}
.brand .logo{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.brand:hover .logo{transform:rotate(-8deg) scale(1.08);}
.nav-links{gap:3px;}
.nav-links a{position:relative; padding:9px 15px; border-radius:10px; font-weight:600; color:var(--ink2);
  transition:color .16s ease, background .16s ease;}
.nav-links a:hover{color:var(--brand-d); background:var(--brand-soft); text-decoration:none;}
.lang summary{background:#fff; border:1.5px solid var(--line2); border-radius:999px; padding:8px 15px;
  font-weight:700; box-shadow:0 2px 6px rgba(16,24,40,.05); transition:.18s ease;}
.lang[open] summary,.lang summary:hover{border-color:var(--brand); color:var(--brand-d);
  box-shadow:0 5px 14px rgba(91,75,255,.18); transform:translateY(-1px);}
.lang-menu{border-radius:14px; box-shadow:0 16px 44px rgba(45,40,120,.16);}
.lang-menu a{border-radius:10px;}

/* ---------- footer ---------- */
footer.site{background:#0d1526; color:#aeb9cc; padding:34px 0 28px; font-size:14px;}
footer.site .fcols{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
footer.site .brand{color:#fff;}
footer.site a{color:#cbd5e6;}
footer.site .fnav{display:flex; gap:26px; flex-wrap:wrap;}
footer.site .legal{margin-top:22px; padding-top:18px; border-top:1px solid #24304a; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:10px; color:#7f8da6; font-size:13px;}
.privacy-pill{display:inline-flex; align-items:center; gap:7px; color:#7ee0c8; font-weight:600;}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero h1{font-size:31px;} .hero p.sub{font-size:16px;}
  .grid3,.steps{grid-template-columns:1fr;}
  .nav-links{display:none;}
}
@media (max-width:520px){
  .controls{flex-direction:column; align-items:stretch;}
  .result{flex-wrap:wrap;}
}