/* =========================================================
   Hirixo — shared design system
   Loaded by every page. Keep format lists / UI copy in sync
   with assets/converter.js's FORMATS registry.
   ========================================================= */

:root{
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #F1F3F6;
  --text: #14171F;
  --muted: #62697A;
  --border: #E3E6EB;
  --accent: #C97C1A;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(201,124,26,0.12);
  --violet: #7A6FD1;
  --success: #16874F;
  --warning: #C97C1A;
  --error: #D14343;
  --focus: #3D6FE0;
  --shadow: 0 1px 2px rgba(20,23,31,0.04), 0 8px 24px rgba(20,23,31,0.06);
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --blob-1: rgba(201,124,26,0.16);
  --blob-2: rgba(122,111,209,0.14);
  --blob-3: rgba(22,135,79,0.10);
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg: #0B0E14;
  --surface: #10141C;
  --card: #141926;
  --card-2: #1B2130;
  --text: #ECEFF5;
  --muted: #8B93A7;
  --border: #242B3B;
  --accent: #F2A93B;
  --accent-ink: #17110A;
  --accent-soft: rgba(242,169,59,0.14);
  --violet: #A79BF0;
  --success: #4ADE80;
  --warning: #F2A93B;
  --error: #F87171;
  --focus: #6C93FF;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
  --blob-1: rgba(242,169,59,0.14);
  --blob-2: rgba(167,155,240,0.12);
  --blob-3: rgba(74,222,128,0.08);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#0B0E14; --surface:#10141C; --card:#141926; --card-2:#1B2130; --text:#ECEFF5;
    --muted:#8B93A7; --border:#242B3B; --accent:#F2A93B; --accent-ink:#17110A;
    --accent-soft:rgba(242,169,59,0.14); --violet:#A79BF0; --success:#4ADE80;
    --warning:#F2A93B; --error:#F87171; --focus:#6C93FF;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
    --blob-1: rgba(242,169,59,0.14); --blob-2: rgba(167,155,240,0.12); --blob-3: rgba(74,222,128,0.08);
    color-scheme: dark;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  transition: background .2s ease, color .2s ease;
  position:relative;
}
h1,h2,h3{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;
  line-height:1.15;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
a{color:inherit;}
button{font-family:inherit;}
img{max-width:100%;display:block;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- Animated background ----------
   Three blurred, low-opacity radial blobs drifting slowly.
   Fixed + behind content, pointer-events:none, GPU-cheap
   (transform-only animation, no layout thrash), paused for
   prefers-reduced-motion and off-screen via IntersectionObserver
   is unnecessary since it's a single fixed layer. */
.bg-anim{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.bg-anim span{
  position:absolute; border-radius:50%; filter:blur(60px);
  will-change:transform; opacity:.9;
}
.bg-anim .b1{
  width:46vmax; height:46vmax; background:var(--blob-1);
  top:-14vmax; left:-10vmax; animation:drift1 34s ease-in-out infinite;
}
.bg-anim .b2{
  width:38vmax; height:38vmax; background:var(--blob-2);
  bottom:-16vmax; right:-8vmax; animation:drift2 40s ease-in-out infinite;
}
.bg-anim .b3{
  width:30vmax; height:30vmax; background:var(--blob-3);
  top:30%; right:20%; animation:drift3 46s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6vmax,8vmax) scale(1.08); }
}
@keyframes drift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-7vmax,-5vmax) scale(1.05); }
}
@keyframes drift3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5vmax,6vmax) scale(0.94); }
}
@media (prefers-reduced-motion: reduce){
  .bg-anim .b1,.bg-anim .b2,.bg-anim .b3{ animation:none; }
}
/* Keep blobs subtle behind the grid texture inside the converter card too */
.converter::before{ opacity:.5; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:var(--radius-s); z-index:100; font-weight:600;
}
.skip-link:focus{left:16px; top:16px;}

:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* Header */
header.site{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1080px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:9px; font-family:'Space Grotesk'; font-weight:700; font-size:19px; text-decoration:none; color:var(--text);}
.logo svg{display:block;}
nav.primary{display:flex; align-items:center; gap:28px;}
nav.primary a{font-size:14.5px; font-weight:500; color:var(--muted); text-decoration:none;}
nav.primary a:hover{color:var(--text);}
.nav-links{display:flex; gap:24px; position:relative;}
@media (max-width: 780px){ .nav-links{display:none;} }

.dropdown{position:relative;}
.dropdown-panel{
  display:none; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow);
  padding:10px; min-width:220px; z-index:50;
}
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel{display:block;}
.dropdown-panel a{display:block; padding:8px 10px; border-radius:8px; font-size:13.5px; color:var(--text); text-decoration:none;}
.dropdown-panel a:hover{background:var(--card-2);}

.theme-toggle{
  display:flex; align-items:center; background:var(--card-2); border:1px solid var(--border);
  border-radius:999px; padding:3px; gap:2px;
}
.theme-toggle button{
  border:none; background:transparent; color:var(--muted); width:30px; height:30px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-toggle button[aria-pressed="true"]{background:var(--card); color:var(--accent); box-shadow:var(--shadow);}
.theme-toggle svg{width:15px; height:15px;}

/* Hero */
.hero{padding:56px 0 8px;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:16px;}
.hero h1{font-size:clamp(30px, 5vw, 48px); max-width:16ch;}
.hero p.lead{color:var(--muted); font-size:17px; max-width:56ch; margin-top:14px;}
.breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:14px;}
.breadcrumb a{text-decoration:none;}
.breadcrumb a:hover{color:var(--text);}

.trust-strip{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px;}
.trust-item{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted);}
.trust-item svg{width:15px; height:15px; color:var(--success); flex-shrink:0;}

/* Converter card */
.converter{
  margin-top:34px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-l);
  box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.converter::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 70%);
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
.converter-inner{position:relative; padding:28px;}
@media (min-width:640px){ .converter-inner{padding:38px;} }

.dropzone{
  border:1.5px dashed var(--border); border-radius:var(--radius-m);
  background:var(--card-2);
  padding:48px 20px; text-align:center; cursor:pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.dropzone:hover{border-color:var(--accent);}
.dropzone.drag{border-color:var(--accent); background:var(--accent-soft); transform:scale(1.005);}
.dropzone:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}
.dz-icon{
  width:52px; height:52px; margin:0 auto 16px; border-radius:14px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.dz-icon svg{width:26px; height:26px;}
.dropzone .dz-title{font-family:'Space Grotesk'; font-weight:600; font-size:17px; margin:0 0 6px; color:var(--text);}
.dropzone p{color:var(--muted); font-size:13.5px; margin:0;}
.dz-formats{margin-top:16px; display:flex; flex-wrap:wrap; gap:7px; justify-content:center;}
.format-chip{
  font-family:'JetBrains Mono'; font-size:11px; padding:3px 9px; border-radius:6px;
  background:var(--surface); border:1px solid var(--border); color:var(--muted);
}
.choose-btn{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink); border:none; padding:11px 22px;
  border-radius:999px; font-weight:600; font-size:14.5px; cursor:pointer;
}
.choose-btn:hover{filter:brightness(1.06);}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.file-panel{display:none;}
.file-panel.active{display:block;}
.file-head{display:flex; gap:16px; align-items:center;}
.thumb{
  width:76px; height:76px; border-radius:var(--radius-s); overflow:hidden; flex-shrink:0;
  background:var(--card-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
}
.thumb img{width:100%; height:100%; object-fit:cover;}
.file-meta{min-width:0;}
.file-name{font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.file-sub{font-family:'JetBrains Mono'; font-size:12.5px; color:var(--muted); margin-top:5px;}
.file-sub .dot{margin:0 6px; opacity:.5;}
.clear-btn{
  margin-left:auto; background:transparent; border:1px solid var(--border); color:var(--muted);
  width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.clear-btn:hover{color:var(--error); border-color:var(--error);}

.step-label{font-size:13px; font-weight:600; color:var(--muted); margin:26px 0 12px;}
.format-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px;}
.format-opt{
  border:1.5px solid var(--border); background:var(--surface); border-radius:var(--radius-s);
  padding:14px 8px; text-align:center; cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.format-opt:hover{border-color:var(--accent);}
.format-opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft);}
.format-opt .fmt-name{font-family:'JetBrains Mono'; font-weight:500; font-size:14px;}
.format-opt .fmt-note{font-size:10.5px; color:var(--muted); margin-top:3px;}
.format-opt:disabled{opacity:.35; cursor:not-allowed;}
.format-opt:disabled:hover{border-color:var(--border);}

.actions-row{display:flex; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap;}
.btn-primary{
  background:var(--accent); color:var(--accent-ink); border:none; padding:13px 26px;
  border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  text-decoration:none;
}
.btn-primary:disabled{opacity:.4; cursor:not-allowed;}
.btn-primary:not(:disabled):hover{filter:brightness(1.06);}
.btn-secondary{
  background:transparent; color:var(--text); border:1px solid var(--border); padding:12px 22px;
  border-radius:999px; font-weight:600; font-size:14.5px; cursor:pointer; text-decoration:none;
}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent);}
.spinner{
  width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:currentColor;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.result-panel{display:none; margin-top:8px;}
.result-panel.active{display:block;}
.result-compare{display:grid; grid-template-columns:1fr; gap:14px; margin-top:6px;}
@media(min-width:560px){.result-compare{grid-template-columns:1fr auto 1fr;}}
.compare-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); padding:16px;}
.compare-card .cc-label{font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px;}
.compare-card .cc-val{font-family:'JetBrains Mono'; font-size:17px; font-weight:500;}
.compare-card .cc-sub{font-family:'JetBrains Mono'; font-size:12px; color:var(--muted); margin-top:3px;}
.compare-arrow{display:flex; align-items:center; justify-content:center; color:var(--muted);}
.savings-badge{
  display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--success) 15%, transparent);
  color:var(--success); font-family:'JetBrains Mono'; font-size:12.5px; padding:5px 11px; border-radius:999px; margin-top:14px;
}

.status-line{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); margin-top:18px;}
.status-line[data-state="error"]{color:var(--error);}
.progress-track{height:5px; background:var(--card-2); border-radius:999px; margin-top:14px; overflow:hidden; display:none;}
.progress-track.active{display:block;}
.progress-fill{height:100%; width:0%; background:var(--accent); border-radius:999px; transition:width .2s ease;}

section.block{padding:64px 0;}
section.block.tight{padding:44px 0;}
.section-head{max-width:60ch; margin-bottom:28px;}
.section-head h2{font-size:clamp(24px,3.4vw,32px);}
.section-head p{color:var(--muted); margin-top:10px; font-size:15.5px;}
.prose{max-width:70ch; color:var(--text); font-size:15.5px;}
.prose p{margin:0 0 14px;}
.prose h2{font-size:22px; margin:30px 0 12px;}

.formats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media(min-width:640px){.formats-grid{grid-template-columns:repeat(3,1fr);}}
.format-card{border:1px solid var(--border); border-radius:var(--radius-m); padding:18px; background:var(--card);}
.format-card .fc-top{display:flex; align-items:center; justify-content:space-between;}
.format-card .fc-code{font-family:'JetBrains Mono'; font-weight:600; font-size:15px;}
.format-card .fc-dot{width:7px; height:7px; border-radius:999px; background:var(--success);}
.format-card .fc-dot.unsure{background:var(--warning);}
.format-card p{font-size:12.5px; color:var(--muted); margin:8px 0 0;}

.steps-row{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:720px){.steps-row{grid-template-columns:repeat(3,1fr);}}
.step-num{
  font-family:'JetBrains Mono'; font-size:12px; color:var(--accent); border:1px solid var(--border);
  width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.step-card h3{font-size:16.5px; margin-bottom:6px;}
.step-card p{font-size:14px; color:var(--muted); margin:0;}

.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{padding:18px 2px; cursor:pointer; font-weight:500; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; color:var(--muted); font-size:19px; flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{color:var(--muted); font-size:14.5px; padding:0 2px 18px; margin:0; max-width:64ch;}

.links-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
@media(min-width:640px){.links-grid{grid-template-columns:repeat(3,1fr);}}
.link-card{
  border:1px solid var(--border); border-radius:var(--radius-s); padding:14px 16px; text-decoration:none;
  color:var(--text); font-size:14px; font-weight:500; display:flex; align-items:center; justify-content:space-between;
  background:var(--card);
}
.link-card:hover{border-color:var(--accent); color:var(--accent);}

.ad-slot{
  border:1px dashed var(--border); border-radius:var(--radius-m); padding:20px; text-align:center;
  color:var(--muted); font-size:12px; font-family:'JetBrains Mono';
}

footer.site{border-top:1px solid var(--border); padding:40px 0 32px;}
.footer-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px;}
.footer-brand p{color:var(--muted); font-size:13.5px; margin-top:6px; max-width:32ch;}
.footer-cols{display:flex; gap:40px; flex-wrap:wrap;}
.footer-col h4, .footer-col .footer-col-title{font-size:12px; color:var(--muted); font-weight:600; margin:0 0 10px; text-transform:none;}
.footer-col a{display:block; font-size:13.5px; color:var(--muted); text-decoration:none; margin-bottom:8px;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{margin-top:28px; padding-top:20px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.sr-live{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* Utility classes — used instead of inline style="" attributes so the CSP's
   style-src can omit 'unsafe-inline'. */
.u-hidden{display:none;}
.u-mt-0{margin-top:0;}
.footer-logo{font-size:17px;}