/* ============================================================
   Fynzo — PREMIUM DESIGN LAYER  (2026)
   Drop-in enhancement. Load it AFTER styles.css:
       <link rel="stylesheet" href="/styles.css">
       <link rel="stylesheet" href="/styles-premium.css">
   100% additive — it only refines what you already have.
   The seo-autofix.py script links it automatically.
   ============================================================ */

/* 1. Typography polish ------------------------------------ */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
h1,.hero h1,.page-head h1{ letter-spacing:-1.4px; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* 2. Cards — softer, layered depth ------------------------ */
.tool,.silo-card,.calc-wrap,.doc,.cm,.bcard{
  transition:transform .28s cubic-bezier(.22,.61,.36,1),
             box-shadow .28s cubic-bezier(.22,.61,.36,1),
             border-color .2s ease;
}
.tool:hover,.silo-card:hover,.bcard:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -18px rgba(11,16,32,.28);
  border-color:rgba(31,138,112,.35);
}
/* animated accent bar on tool cards */
.tool{ position:relative; overflow:hidden; }
.tool::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--green),var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.tool:hover::after{ transform:scaleX(1); }

/* 3. Buttons — micro motion ------------------------------- */
.btn,.nav-btn,.act-btn{
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,filter .2s ease;
  will-change:transform;
}
.btn-primary{ box-shadow:0 8px 20px -10px rgba(11,16,32,.55); }
.btn:hover,.nav-btn:hover{ transform:translateY(-2px); }
.btn:active,.nav-btn:active,.act-btn:active{ transform:translateY(0) scale(.98); }

/* 4. Clear focus states (a11y + polish) ------------------- */
.btn:focus-visible,.nav-btn:focus-visible,.act-btn:focus-visible,
.filter:focus-visible,.icon-btn:focus-visible,.lang-select:focus-visible,
a:focus-visible{
  outline:3px solid rgba(31,138,112,.45); outline-offset:2px; border-radius:8px;
}
.field input:focus,.field select:focus,.field textarea:focus,
.calc-search input:focus{
  border-color:var(--green); box-shadow:0 0 0 4px rgba(31,138,112,.14);
}

/* 5. Hero — subtle gradient glow + gradient headline ------ */
.hero{ position:relative; }
.hero::before{
  content:""; position:absolute; inset:-10% 40% 40% -10%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(31,138,112,.10),transparent 70%);
  z-index:-1; pointer-events:none;
}
.hero h1 span{
  background:linear-gradient(90deg,var(--green),#26a68a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* 6. Result box — premium depth --------------------------- */
.result{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 12px 30px -14px rgba(11,16,32,.5); }
.rbig{ letter-spacing:-.5px; }

/* 7. FAQ smoother open ------------------------------------ */
.faq-a{ transition:max-height .4s cubic-bezier(.22,.61,.36,1),padding .3s ease; }

/* 8. Prose links — elegant underline reveal --------------- */
.prose a,.doc a,.article a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .28s ease; text-decoration:none;
}
.prose a:hover,.doc a:hover,.article a:hover{ background-size:100% 2px; }

/* 9. Images never shift layout (CLS = 0) ------------------ */
img,svg{ height:auto; }

/* 10. Selection + scrollbar ------------------------------- */
::selection{ background:rgba(31,138,112,.22); }
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:100px; }

/* 11. Skip-to-content link (a11y + SEO trust) ------------- */
.skip-link{
  position:absolute; left:-999px; top:8px; z-index:999;
  background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px;
  font-weight:600; font-size:14px;
}
.skip-link:focus{ left:12px; }

/* 12. Subtle section entrance ----------------------------- */
@media (prefers-reduced-motion:no-preference){
  .sec,.content,.article,.calc-wrap{ animation:ft-fade .5s ease both; }
  @keyframes ft-fade{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* 13. Dark-mode refinements ------------------------------- */
[data-theme="dark"] .result{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 34px -16px rgba(0,0,0,.6);
}
[data-theme="dark"] .tool:hover,
[data-theme="dark"] .silo-card:hover,
[data-theme="dark"] .bcard:hover{ box-shadow:0 20px 44px -20px rgba(0,0,0,.7); }