/*
Theme Name: FunnelFox
Theme URI: https://www.funnelfox.cz/
Author: FunnelFox
Description: Minimal custom theme for FunnelFox (MVP).
Version: 0.4.4
Text Domain: funnelfox
*/

:root{
  --bg:#FEFAF7;
  --text:#36293F;
  --accent:#AB3CFD;
  --card:#ffffff;
  --muted: rgba(54,41,63,.72);
  --border: rgba(54,41,63,.12);
  --shadow: 0 12px 30px rgba(54,41,63,.10);
  --radius: 6px;
}

html{ scroll-behavior:smooth; }

.ff-scrollfade{
  position:fixed;
  inset:0;
  background: var(--bg);
  opacity:0;
  pointer-events:none;
  transition: opacity 260ms ease;
  z-index: 9999;
}
.ff-scrollfade.is-on{ opacity: .18; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

a{ color: inherit; text-decoration: none; }

.ff-container{ max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ff-topbar{ padding: 22px 0; }
.ff-brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.ff-mark{ width:12px; height:12px; border-radius:999px; background:var(--accent); box-shadow: 0 0 0 6px rgba(171,60,253,.12); }

.ff-hero{ padding: 26px 0 10px; }
.ff-hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items: start; }
@media (max-width: 920px){ .ff-hero-grid{ grid-template-columns: 1fr; } }

.ff-h1{ font-size: 5vw; line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.8px; }
@media (max-width: 520px){ .ff-h1{ font-size: 48px; line-height: 1.3em; } }
.ff-lead{ font-size: 18px; color: var(--muted); margin: 0 0 22px; }

.ff-cta-row{ display:flex; gap: 12px; flex-wrap: wrap; align-items:center; }
.ff-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(171,60,253,.35);
  background: #321C4C;
  color: #fff;
  font-weight: 800;
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}
.ff-btn:hover{ background: var(--accent); }
.ff-btn-secondary{
  background: #FDAB3C;
  color: #321C4C;
  border: none;
  transition: background-color .5s ease, color .5s ease;
}
.ff-btn-secondary:hover{ background: var(--accent); color:#fff; }

.ff-card{
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ff-kalk-placeholder{ padding: 18px; }
.ff-kalk-title{ font-weight:800; margin: 0 0 10px; }
.ff-kalk-box{
  border-radius: calc(var(--radius) + 2px);
  border: 1px dashed rgba(54,41,63,.25);
  background: rgba(171,60,253,.06);
  padding: 18px;
  color: rgba(54,41,63,.85);
}

/* Calculator intro (image + text) */
.ff-calc-intro-grid{ display:grid; grid-template-columns: 230px 1fr; gap: 10px; align-items:center; margin-bottom: 12px; }
.ff-calc-intro-art{ display:flex; justify-content:flex-end; }
.ff-calc-intro-art img{ width:75%; height:auto; display:block; }
@media (max-width: 720px){ .ff-calc-intro-grid{ grid-template-columns: 1fr; } .ff-calc-intro-art{ max-width: 320px; justify-content:flex-start; } }

/* Calculator outer container (radius + soft glow) */
.ff-calc-wrap{ border-radius: 9px; overflow:hidden; background:#fff; box-shadow: 0 10px 28px rgba(50,28,76,.12); padding:30px; }

.ff-section{ padding: 26px 0; }
.ff-section-title{ font-size: 27px; margin: 0 0 14px; letter-spacing: -0.3px; }
.ff-grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 920px){ .ff-grid-3{ grid-template-columns: 1fr; } }

.ff-item{ padding: 16px; }
.ff-item h3{ margin: 0 0 8px; font-size: 20px; color: #321C4C; line-height: 1.2em; display:flex; align-items:center; gap:10px; }
.ff-item p{ margin: 0; color: var(--muted); }

.ff-steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 920px){ .ff-steps{ grid-template-columns: 1fr; } }
.ff-step{ padding: 16px; }
.ff-step b{ display:inline-block; margin-bottom: 6px; }

.ff-footer{ padding: 30px 0 50px; color: rgba(54,41,63,.55); font-size: 13px; }


.ff-logo{ width:230px; height:auto; display:block; }
@media (max-width:520px){ .ff-logo{ width:180px; } }


/* Footer */
.ff-footer{ background: var(--accent); color:#fff; }
.ff-footer a{ color:#fff; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 1200px){ .ff-h1{ font-size: 60px; } }

.ff-subhead{ margin: 0 0 14px; font-size: 20px; color: var(--muted); font-weight: 600; }
@media (max-width: 520px){ .ff-subhead{ font-size: 18px; } }
.ff-h1-accent{ color: var(--accent); }


/* Benefits: white cards, purple headings, dark text */
.ff-benefits .ff-section-title{ color: #321C4C; }
.ff-item{ background: #fff; border-color: var(--border); }
.ff-item h3{ color:#321C4C; }
.ff-item p{ color: #321C4C; }

/* Footer keep purple */
.ff-footer{ background: var(--accent); color:#fff; }
.ff-footer a{ color:#fff; text-decoration: underline; text-underline-offset: 3px; }

.ff-step-small{ margin-top:8px; font-size:13px; color: rgba(50,28,76,.70); line-height:1.45; }

.ff-steps-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px){ .ff-steps-3{ grid-template-columns: 1fr; } }

.ff-item{ border:none !important; }

.ff-benefits .ff-item h3::before{ content:''; width:18px; height:18px; display:inline-block; background: url('/gfx/ok.svg') no-repeat center/contain; flex: 0 0 18px; }

/* Lifecycle section */
.ff-lifecycle .ff-item{ background:#FDAB3C; }
.ff-lifecycle .ff-item h3{ color:#321C4C; }
.ff-lifecycle .ff-item p{ color:#321C4C; }

.ff-hero-art{ display:flex; justify-content:center; align-items:flex-start; }
.ff-hero-mascot{ width:100%; max-width: 520px; height:auto; display:block; }

.ff-center{ text-align:center; max-width: 820px; margin: 0 auto; }


.ff-hero-video{ padding:0; margin: 0; }
.ff-hero-video__inner{
  background:#321C4C;
  padding: 30px 0;
}
.ff-hero-video__video{
  width: 100vw;
  max-height: calc(100vh - 60px);
  display:block;
  margin: 0 auto;
  object-fit: contain;
}

/* Hero full height on desktop */
@media (min-width: 921px){
  /* keep hero full-screen, but reduce empty space above headline */
  .ff-hero{
    min-height: calc(100vh - 50px);
    padding-top: 50px;
    padding-bottom: 30px;
    display:flex;
    align-items:flex-start;
  }
  .ff-hero-grid{ align-items:start; }
}


/* Steps section like lifecycle */
.ff-steps-orange .ff-step{ background:#FDAB3C; }
.ff-steps-orange .ff-step b{ font-size:20px; line-height:1.2em; color:#321C4C; }
.ff-steps-orange .ff-step div{ color:#321C4C !important; }
.ff-steps-orange .ff-step-small{ color: rgba(50,28,76,.85) !important; }


/* How-it-works split layout */
.ff-how-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items:center; }
@media (max-width: 920px){ .ff-how-grid{ grid-template-columns: 1fr; } }

.ff-how-text{ display:flex; flex-direction:column; gap: 16px; }
.ff-how-block h3{ margin:0 0 6px; font-size:20px; line-height:1.2em; color:#321C4C; }
.ff-how-block p{ margin: 0 0 8px; color:#321C4C; opacity:.92; }
.ff-how-block p:last-child{ margin-bottom:0; }

.ff-how-art{ display:flex; justify-content:center; align-items:center; }
.ff-how-art img{ width:100%; max-width: 520px; height:auto; display:block; }


/* CRM section layout */
.ff-crm-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items:start; }
@media (max-width: 920px){ .ff-crm-grid{ grid-template-columns: 1fr; } }

.ff-crm-step{ padding: 14px; background: #fff; border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow); }
.ff-crm-step h3{ margin:0 0 6px; font-size:16px; color:#321C4C; line-height:1.2em; }
.ff-crm-step p{ margin:0; color: rgba(50,28,76,.75); }

.ff-crm-right{ display:flex; flex-direction:column; gap: 12px; }

/* CTA slab (full width, slanted edges) */
.ff-cta-slab{ padding:0; margin: 10px 0; }
.ff-cta-slab__inner{
  position: relative;
  background: #321C4C;
  color: #fff;
  padding: 54px 0;
  overflow: hidden;
}
.ff-cta-slab__inner:before,
.ff-cta-slab__inner:after{
  content:"";
  position:absolute;
  left:0; right:0;
  height: 34px;
  background: var(--bg);
}
/* top slant */
.ff-cta-slab__inner:before{
  top:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
}
/* bottom slant */
.ff-cta-slab__inner:after{
  bottom:-1px;
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%);
}
.ff-cta-slab__grid{ display:flex; flex-direction:column; gap: 14px; align-items:center; text-align:center; }
.ff-cta-slab__grid > div{ width: min(600px, 100%); }
.ff-cta-slab__title{ margin:0 0 8px; font-size: 28px; line-height:1.15; letter-spacing:-.2px; color:#FDAB3C; }
@media (max-width: 520px){ .ff-cta-slab__title{ font-size: 22px; } }
.ff-cta-slab__subtitle{ font-size:27px; line-height:1.2; font-weight:800; color:#fff; margin:0 0 10px; }
.ff-cta-slab__text{ margin:0; opacity:.95; }
.ff-cta-slab__actions{ display:flex; flex-direction:column; gap: 10px; align-items:center; }

/* CTA slab button hover behavior: normal=accent, hover=dark */
.ff-cta-slab .ff-btn{ background: var(--accent); border-color: rgba(255,255,255,.25); }
.ff-cta-slab .ff-btn:hover{ background: #321C4C; border-color: rgba(255,255,255,.45); }

/* References as buttons */
.ff-ref-buttons{ display:flex; flex-direction:column; gap:12px; align-items:center; margin-top: 18px; }
.ff-ref-btn{ display:inline-flex; justify-content:center; align-items:center; gap:10px; width:fit-content; max-width: 100%; padding: 14px 16px; border-radius: 999px; background: #321C4C; color:#fff; font-weight: 700; text-decoration:none; transition: background-color .5s ease, color .5s ease; }
.ff-ref-btn:after{ content:"↗"; font-size: 16px; line-height: 1; opacity:.95; }
.ff-ref-btn:hover{ background:#FDAB3C; color:#321C4C; }
@media (max-width: 520px){ .ff-ref-btn{ width: 100%; } }

/* Footer */
.ff-footer{ background: var(--accent); color: #fff; }
.ff-footer__inner{ display:grid; grid-template-columns: 1fr auto 1fr; gap:18px; align-items:start; padding: 26px 0; }
@media (max-width: 920px){ .ff-footer__inner{ grid-template-columns: 1fr; } }
.ff-footer__mid{ display:flex; flex-direction:column; gap: 10px; align-items:flex-start; }
@media (min-width: 921px){ .ff-footer__mid{ justify-self:center; } }

.ff-footer__logo{ display:block; width:270px; height:auto; margin: 0 0 10px; }
@media (max-width:520px){ .ff-footer__logo{ width: 220px; } }
.ff-footer__brand{ font-weight:700; }
.ff-footer__links a{ color:#fff; text-decoration:underline; text-decoration-thickness: 1px; }
.ff-footer__h3{ margin:0 0 8px; font-size:16px; }
.ff-footer__ctaText{ margin:0 0 10px; opacity:.95; }
.ff-footer__ctaBtn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 16px; border-radius: 999px; background:#321C4C; color:#fff; font-weight:800; border: 1px solid rgba(255,255,255,.25); text-decoration:none; }
.ff-footer__ctaBtn:after{ content:"↗"; font-size: 16px; line-height: 1; opacity:.95; }
.ff-footer__ctaBtn:hover{ background:#FDAB3C; color:#321C4C; }
@media (max-width: 520px){
  .ff-footer__inner{ padding: 30px; }
}

/* Blog list */
.ff-blog__title{ margin: 6px 0 40px; font-size: 10vw; line-height: 1.05; color:#FDAB3C; letter-spacing: -0.8px; }
@media (max-width:520px){ .ff-blog__title{ font-size: 67px; } }
.ff-blog__list{ display:flex; flex-direction:column; gap: 30px; }
.ff-blog-item__grid{ display:grid; grid-template-columns: 1fr 420px; gap: 22px; align-items:start; }
@media (max-width: 920px){ .ff-blog-item__grid{ grid-template-columns: 1fr; } }

.ff-blog-item__h2{ margin:0 0 6px; font-size: 28px; line-height:1.15; letter-spacing: -0.3px; }
.ff-blog-item__h2 a{ color:#321C4C; text-decoration:none; }
.ff-blog-item__meta{ font-size: 14px; font-weight: 700; color: rgba(50,28,76,.72); margin-bottom: 10px; }
.ff-blog-item__perex{ margin:0 0 14px; color: rgba(50,28,76,.85); }
.ff-blog-item__btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px; border-radius: 999px; background: var(--accent); color:#fff; font-weight:900; text-decoration:none; border: 1px solid rgba(171,60,253,.25); }
.ff-blog-item__btn:hover{ background:#321C4C; }

.ff-blog-item__imgwrap{ display:block; background: #fff; border-radius: 14px; padding: 12px; box-shadow: var(--shadow); border: 1px solid rgba(50,28,76,.12); }
.ff-blog-item__imgwrap img{ display:block; width: 100%; height: 240px; object-fit: contain; }

.ff-blog__pagination{ margin: 28px 0 0; }
.ff-blog__pagination .page-numbers{ display:inline-flex; gap: 10px; align-items:center; margin-right: 6px; color:#321C4C; font-weight: 800; text-decoration:none; }
.ff-blog__pagination .page-numbers.current{ opacity:.65; }

/* Footer latest posts (beige background) */
.ff-footer-posts{ padding: 34px 0 34px; background: var(--bg) !important; }
.ff-footer-posts__title{ margin: 0 0 14px; font-size: 18px; color:#321C4C; }
.ff-footer-posts__grid{ display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px; }
@media (max-width: 920px){ .ff-footer-posts__grid{ grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px){ .ff-footer-posts__grid{ grid-template-columns: 1fr !important; } }

.ff-footer-post{
  background: #fff;
  border: 1px solid rgba(50,28,76,.12);
  border-radius: 14px;
  overflow: hidden;
  padding: 12px;
  box-shadow: var(--shadow);
}
.ff-footer-post__imgwrap{ display:block; border-radius: 12px; overflow:hidden; background: rgba(50,28,76,.04); }
.ff-footer-post__img{ display:block; width: 100%; height: 160px; object-fit: contain; }
.ff-footer-post__h4{ margin: 12px 0 6px; font-size: 21px; line-height:1.2; color:#321C4C; }
.ff-footer-post__h4 a{ color:#321C4C; text-decoration:none; }
.ff-footer-post__perex{ margin: 0 0 10px; color: rgba(50,28,76,.80); font-size: 14px; }
.ff-footer-post__btn{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 14px; border-radius: 999px; background: var(--accent); color:#fff; font-weight:800; text-decoration:none; border: 1px solid rgba(171,60,253,.25); }
.ff-footer-post__btn:hover{ background:#321C4C; color:#fff; }

.ff-footer-posts__all{ display:flex; justify-content:center; margin-top: 18px; }
.ff-footer-posts__allbtn{ display:inline-flex; align-items:center; justify-content:center; padding: 14px 18px; border-radius: 999px; background:#321C4C; color:#fff; font-weight: 900; text-decoration:none; border: 1px solid rgba(50,28,76,.18); }
.ff-footer-posts__allbtn:hover{ background: var(--accent); }