/* ===================== TOKENS ===================== */
:root{
  --paper:#F6F7F4;
  --paper-raised:#FFFFFF;
  --ink:#151E19;
  --ink-soft:#4B5A52;
  --line:#DCE3DE;
  --accent:#237A4E;
  --accent-strong:#1B5F3D;
  --accent-soft:#E4F2EA;
  --amber:#D98C2B;
  --danger:#C2432B;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(21,30,25,0.06);
  --shadow-md:0 8px 24px rgba(21,30,25,0.10);
  --font-display:'Outfit',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'Inter',ui-monospace,monospace;
  --header-h:68px;
  color-scheme: light;
}
html.dark{
  --paper:#0E1712;
  --paper-raised:#152119;
  --ink:#EDF3EE;
  --ink-soft:#9FB2A7;
  --line:#26362E;
  --accent:#3FAE79;
  --accent-strong:#57C58E;
  --accent-soft:#183828;
  --amber:#E8A94B;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 12px 32px rgba(0,0,0,0.45);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  overflow-x:hidden;
  transition:background .25s ease,color .25s ease;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; margin:0 0 .5em; letter-spacing:-0.01em; color:var(--ink);}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:var(--accent-strong); text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:999; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

.section-inner{max-width:1180px; margin:0 auto; padding:0 24px;}
.section-inner.narrow{max-width:760px;}

:focus-visible{outline:2.5px solid var(--amber); outline-offset:2px;}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:12px 22px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-strong);}
.btn-primary:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-secondary{background:var(--paper-raised); color:var(--ink); border-color:var(--line);}
.btn-secondary:hover{border-color:var(--accent);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-text{background:transparent; color:var(--ink-soft); padding:8px 10px;}
.btn-text:hover{color:var(--danger);}
.btn-large{padding:14px 30px; font-size:1rem;}
.btn-small{padding:8px 16px; font-size:.85rem;}
.btn-invert{background:var(--paper); color:var(--accent-strong);}
.btn-invert-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.6);}
.btn-spinner{width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:0 24px;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo{display:flex; align-items:center; gap:9px;}
.logo-text{font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--ink);}
.main-nav ul{list-style:none; display:flex; gap:6px; margin:0; padding:0; align-items:center;}
.main-nav > ul > li > a, .nav-drop-btn{
  display:flex; align-items:center; gap:5px;
  padding:9px 14px; border-radius:8px; font-weight:500; font-size:.92rem; color:var(--ink);
  background:transparent; border:none; cursor:pointer;
}
.main-nav > ul > li > a:hover, .nav-drop-btn:hover{background:var(--accent-soft); color:var(--accent-strong);}
.has-dropdown{position:relative;}
.chev{transition:transform .2s ease;}
.has-dropdown.open .chev{transform:rotate(180deg);}
.dropdown-panel{
  position:absolute; top:100%; left:0; margin-top:8px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); min-width:240px; padding:8px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.has-dropdown.open .dropdown-panel{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown-panel a{padding:9px 12px; border-radius:6px; font-size:.9rem; color:var(--ink);}
.dropdown-panel a:hover{background:var(--accent-soft); color:var(--accent-strong);}

.header-actions{display:flex; align-items:center; gap:10px;}
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper-raised); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-toggle .icon-moon{display:none;}
html.dark .theme-toggle .icon-sun{display:none;}
html.dark .theme-toggle .icon-moon{display:block;}

.nav-burger{display:none; flex-direction:column; gap:4px; width:38px; height:38px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); border-radius:8px; cursor:pointer;}
.nav-burger span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.mobile-nav{display:none; flex-direction:column; padding:10px 24px 18px; border-top:1px solid var(--line); background:var(--paper);}
.mobile-nav a{padding:11px 4px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line);}
.mobile-nav details summary{padding:11px 4px; font-weight:500; cursor:pointer; border-bottom:1px solid var(--line); list-style:none;}
.mobile-nav details a{padding-left:16px; border-bottom:none; font-weight:400; font-size:.92rem;}
.mobile-nav.open{display:flex;}

/* ===================== BREADCRUMB ===================== */
.breadcrumb{padding:14px 0 0;}
.breadcrumb-inner{max-width:1180px; margin:0 auto; padding:0 24px; display:flex; gap:8px; font-size:.82rem; color:var(--ink-soft); flex-wrap:wrap;}
.breadcrumb-inner a{color:var(--ink-soft);}
.breadcrumb-inner a:hover{color:var(--accent-strong);}
.breadcrumb-inner [aria-current]{color:var(--ink); font-weight:600;}

/* ===================== HERO ===================== */
.hero{padding:56px 0 70px;}
.hero-inner{max-width:1180px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.eyebrow{display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-strong); background:var(--accent-soft); padding:6px 12px; border-radius:999px; margin-bottom:18px;}
.hero-copy h1{font-size:clamp(2.1rem, 3.6vw, 3rem); line-height:1.08; margin-bottom:18px;}
.hero-sub{font-size:1.06rem; max-width:52ch; margin-bottom:28px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px;}
.hero-trust{list-style:none; display:flex; gap:20px; padding:0; margin:0; flex-wrap:wrap; font-size:.85rem; color:var(--ink-soft);}
.hero-trust li{display:flex; align-items:center; gap:6px;}
.hero-trust li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent);}

.hero-visual{display:flex; justify-content:center;}
.grid-card{
  width:100%; max-width:400px; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; position:relative;
}
.grid-card-bar{display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line);}
.grid-card-bar span{width:9px; height:9px; border-radius:50%; background:var(--line);}
.cell-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:5px; padding:16px;}
.cell-grid div{height:26px; background:var(--accent-soft); border-radius:4px; opacity:0; animation:cellIn .6s ease forwards;}
@keyframes cellIn{from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);}}
.convert-arrow{
  position:absolute; bottom:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}
@media (prefers-reduced-motion: reduce){
  .cell-grid div{animation:none; opacity:1;}
  .convert-arrow{animation:none;}
}

/* ===================== CONVERTER ===================== */
.converter-section{padding:20px 0 70px;}
.converter-section h2, .results-section h2, .features h2, .how-it-works h2, .faq h2, .tool-strip-title{text-align:center; font-size:clamp(1.6rem,2.6vw,2.1rem);}
.section-lead{text-align:center; max-width:52ch; margin:0 auto 36px; font-size:1rem;}

.converter-panel{
  max-width:760px; margin:0 auto; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm);
}
.dropzone{
  border:1.5px dashed var(--line); border-radius:var(--radius-md); padding:44px 20px; text-align:center;
  cursor:pointer; transition:border-color .2s ease, background .2s ease; color:var(--ink-soft);
}
.dropzone svg{margin:0 auto 12px; color:var(--accent);}
.dropzone.dragover{border-color:var(--accent); background:var(--accent-soft);}
.dz-title{font-weight:600; color:var(--ink); margin-bottom:4px;}
.dz-sub{font-size:.85rem; margin:0;}

.file-info{margin-top:18px; padding-top:18px; border-top:1px solid var(--line);}
.file-info-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.file-badge{display:flex; align-items:center; gap:12px; color:var(--accent);}
.file-name{margin:0; font-weight:600; color:var(--ink); font-size:.92rem; word-break:break-all;}
.file-meta{margin:0; font-size:.8rem; color:var(--ink-soft);}
.sheet-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.sheet-tab{padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; font-size:.82rem; cursor:pointer; color:var(--ink-soft);}
.sheet-tab.active{background:var(--accent); border-color:var(--accent); color:#fff;}

.field-error{color:var(--danger); font-size:.85rem; margin:14px 0 0; padding:10px 14px; background:color-mix(in srgb, var(--danger) 10%, transparent); border-radius:8px;}
.convert-actions{margin-top:22px; text-align:center;}

/* ===================== RESULTS ===================== */
.results-section{padding:20px 0 70px; scroll-margin-top:90px;}
.results-header{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:1000px; margin:0 auto 6px;}
.results-header h2{text-align:left; margin:0;}
.results-actions{display:flex; gap:10px; flex-wrap:wrap;}
.split-download{display:flex; gap:8px;}
.results-note{max-width:1000px; margin:14px auto 20px; font-size:.82rem; color:var(--ink-soft); background:var(--accent-soft); padding:12px 16px; border-radius:10px;}
.table-wrap{max-width:1000px; margin:0 auto; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); max-height:480px; overflow-y:auto;}
.preview-table{border-collapse:collapse; width:100%; font-size:.85rem; font-family:var(--font-mono);}
.preview-table th, .preview-table td{border:1px solid var(--line); padding:8px 12px; text-align:left; white-space:nowrap;}
.preview-table th{background:var(--accent-soft); color:var(--accent-strong); position:sticky; top:0; font-weight:600;}
.preview-table tr:nth-child(even) td{background:color-mix(in srgb, var(--line) 25%, transparent);}
.results-meta{max-width:1000px; margin:14px auto 0; font-size:.82rem; text-align:right;}

/* ===================== TOOL STRIP ===================== */
.tool-strip{padding:50px 0; background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.tool-strip-title{margin-bottom:26px;}
.tool-strip-grid{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.tool-strip-grid a{padding:8px 16px; border:1px solid var(--line); border-radius:999px; font-size:.83rem; color:var(--ink-soft);}
.tool-strip-grid a:hover{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft);}

/* ===================== FEATURES ===================== */
.features{padding:76px 0;}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px;}
.feature-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px;}
.feature-icon{width:42px; height:42px; border-radius:10px; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.feature-card h3{font-size:1.05rem; margin-bottom:6px;}
.feature-card p{margin:0; font-size:.9rem;}

/* ===================== HOW IT WORKS ===================== */
.how-it-works{padding:20px 0 76px;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:40px;}
.step{position:relative; padding-top:8px;}
.step-num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.9rem; margin-bottom:14px;}
.step h3{font-size:1rem; margin-bottom:6px;}
.step p{font-size:.88rem; margin:0;}

/* ===================== ARTICLE ===================== */
.article-section{padding:20px 0 76px;}
.article-section h2{font-size:1.5rem; text-align:left;}
.article-section p{font-size:.98rem;}

/* ===================== FAQ ===================== */
.faq{padding:20px 0 76px;}
.accordion{margin-top:32px; border-top:1px solid var(--line);}
.accordion-item{border-bottom:1px solid var(--line);}
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; padding:18px 4px; cursor:pointer;
  font-weight:600; font-size:.98rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.accordion-trigger svg{flex-shrink:0; transition:transform .2s ease; color:var(--accent);}
.accordion-trigger[aria-expanded="true"] svg{transform:rotate(45deg);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.accordion-panel p{padding:0 4px 18px; margin:0; font-size:.92rem;}

/* ===================== CTA ===================== */
.cta{padding:70px 0; background:var(--accent-strong); background-image:linear-gradient(135deg, var(--accent-strong), var(--accent));}
.cta-inner{text-align:center; max-width:600px;}
.cta h2{color:#fff; margin-bottom:8px;}
.cta p{color:rgba(255,255,255,.88); margin-bottom:26px;}
.cta-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--paper-raised); border-top:1px solid var(--line); padding-top:56px;}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:28px; padding-bottom:40px;}
.footer-brand p{font-size:.85rem; margin-top:12px;}
.footer-col h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:14px;}
.footer-col{display:flex; flex-direction:column; gap:9px;}
.footer-col a{font-size:.85rem; color:var(--ink-soft);}
.footer-col a:hover{color:var(--accent-strong);}
.footer-bottom{border-top:1px solid var(--line); padding:22px 24px 32px; display:flex; flex-direction:column; gap:8px;}
.footer-bottom p{margin:0; font-size:.8rem;}
.trademark-note{font-size:.76rem; color:var(--ink-soft); max-width:900px;}

/* ===================== COOKIE BANNER ===================== */
.cookie-banner{
  position:fixed; bottom:18px; left:18px; right:18px; max-width:520px; margin:0 auto;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); padding:18px 20px; z-index:200;
  display:flex; flex-direction:column; gap:12px;
}
.cookie-banner p{margin:0; font-size:.85rem;}
.cookie-banner[hidden]{display:none;}
.cookie-actions{display:flex; justify-content:flex-end; gap:10px;}

/* ===================== TOAST ===================== */
.toast{
  position:fixed; bottom:24px; right:24px; background:var(--ink); color:var(--paper);
  padding:12px 20px; border-radius:8px; font-size:.88rem; box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:300;
}
.toast.show{opacity:1; transform:translateY(0);}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; gap:36px;}
  .hero-visual{order:-1;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .main-nav{display:none;}
  .nav-burger{display:flex;}
  .mobile-nav{display:none;}
  .mobile-nav.open{display:flex;}
  .features-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:repeat(2,1fr);}
  .results-header{flex-direction:column; align-items:flex-start;}
  .split-download{width:100%;}
  .results-actions{width:100%;}
  .results-actions .btn{flex:1 1 auto;}
}
@media (max-width:480px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .section-inner{padding:0 16px;}
  .cta-buttons{flex-direction:column; width:100%;}
  .cta-buttons .btn{width:100%;}
}