/*
Theme Name: Elsii
Theme URI: https://elsii.pl/
Author: Elsii
Author URI: https://elsii.pl/
Description: Custom landing theme for Elsii — agencja performance. Pixel-perfect conversion of static mockup, FSE block theme, edytowalny w panelu.
Version: 1.0.5
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: elsii
*/


  :root{
    --bg:#FAFAF9; --surface:#FFFFFF; --surface-2:#F5F6F8;
    --ink:#0A1428; --ink-2:#3D4A66; --ink-3:#6B7A99;
    --navy:#0F2E5C; --navy-2:#1A4A87;
    --sky:#1E5FB8; --sky-2:#3B82F6;
    --gold:#C9A95C; --gold-2:#A8842A;
    --line:#E5E7EB; --line-2:#D1D5DB;
    --ok:#16A34A; --warn:#EAB308; --bad:#DC2626;
    --serif:'Fraunces',ui-serif,Georgia,serif;
    --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:var(--navy);color:#fff}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .container{max-width:1240px;margin:0 auto;padding:0 28px}
  .container-narrow{max-width:960px;margin:0 auto;padding:0 28px}

  /* TYPOGRAPHY */
  h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-0.02em;line-height:1.05;color:var(--ink)}
  h1{font-size:clamp(40px,6vw,76px);font-weight:500}
  h2{font-size:clamp(32px,4vw,56px)}
  h3{font-size:clamp(22px,2.5vw,32px)}
  h4{font-size:20px;font-weight:600}
  .eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-2)}
  .lead{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--ink-2);font-weight:400}
  .num{font-family:var(--mono);font-feature-settings:"tnum" 1,"ss01" 1}

  /* TOP BAR */
  .topbar{background:var(--navy);color:#fff;font-size:13px;padding:10px 28px;text-align:center}
  .topbar a{font-weight:600;color:var(--gold);border-bottom:1px dashed var(--gold);padding-bottom:2px;margin-left:6px}
  .topbar span+span{margin-left:18px;opacity:.85}

  /* NAV */
  nav{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.85);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line);transition:all .3s}
  nav.scrolled{background:rgba(255,255,255,.95);box-shadow:0 1px 0 var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1240px;margin:0 auto}
  /* LOGO via mask-image (recolors dynamically) */
  .logo{display:inline-block;width:96px;height:36px;background-color:var(--navy);-webkit-mask:url('/elsii-logo.png') left center/contain no-repeat;mask:url('/elsii-logo.png') left center/contain no-repeat;transition:background-color .2s,transform .2s;text-indent:-9999px;overflow:hidden}
  .logo:hover{background-color:var(--sky);transform:scale(1.02)}
  .logo-mark{display:none}
  /* Hero watermark — same PNG, huge & faint */
  .hero-watermark{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:95vw;height:32vw;background-color:var(--navy);opacity:.18;-webkit-mask:url('/elsii-logo.png') center/contain no-repeat;mask:url('/elsii-logo.png') center/contain no-repeat;pointer-events:none;z-index:1;text-indent:-9999px;overflow:hidden}
  /* Footer logo — white version, bigger */
  .footer-brand h3.logo{width:200px;height:78px;background-color:#fff;display:block;margin-bottom:18px}
  .footer-brand h3.logo:hover{background-color:var(--gold)}
  .nav-menu{display:flex;gap:32px;font-size:14px;color:var(--ink-2)}
  .nav-menu a{transition:color .2s}
  .nav-menu a:hover{color:var(--navy)}
  .nav-cta{display:flex;gap:12px;align-items:center}
  @media(max-width:900px){.nav-menu{display:none}}

  /* BUTTONS */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:9px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;font-family:var(--sans)}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--navy);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04)}
  .btn-primary:hover{background:#081E40;box-shadow:0 8px 24px -8px rgba(15,46,92,.4)}
  .btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 1px 0 rgba(0,0,0,.04)}
  .btn-gold:hover{background:#B8983D;box-shadow:0 8px 24px -8px rgba(201,169,92,.5)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
  .btn-ghost:hover{border-color:var(--navy);background:var(--surface)}
  .btn-sm{padding:10px 18px;font-size:14px}

  /* HERO */
  .hero{position:relative;padding:120px 0 80px;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
  @media(max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:48px}}
  .hero h1 .accent{color:var(--navy);position:relative;display:inline-block}
  .hero h1 .accent::after{content:'';position:absolute;bottom:6px;left:0;right:0;height:14px;background:var(--gold);opacity:.35;z-index:-1;border-radius:2px}
  .hero .lead{margin:32px 0 40px;max-width:560px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-meta{margin-top:36px;display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
  .hero-meta-item{display:flex;align-items:center;gap:6px}
  .hero-meta-item svg{width:16px;height:16px;color:var(--ok)}

  /* HERO VISUAL — animated stat cards */
  .hero-visual{position:relative;height:520px}
  .stat-card{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 24px;box-shadow:0 4px 24px -4px rgba(15,46,92,.08);min-width:220px;transition:transform .3s}
  .stat-card:hover{transform:translateY(-4px)}
  .stat-card .label{font-size:12px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:6px;margin-bottom:8px}
  .stat-card .value{font-family:var(--mono);font-size:32px;font-weight:700;color:var(--navy);letter-spacing:-0.02em}
  .stat-card .delta{font-size:12px;color:var(--ok);font-weight:600;margin-top:4px;display:flex;align-items:center;gap:4px}
  .stat-card.s1{top:20px;left:0;animation:float 6s ease-in-out infinite}
  .stat-card.s2{top:140px;right:0;animation:float 6s ease-in-out infinite .8s}
  .stat-card.s3{top:280px;left:40px;animation:float 6s ease-in-out infinite 1.6s}
  .stat-card.s4{top:400px;right:20px;background:var(--navy);color:#fff;animation:float 6s ease-in-out infinite 2.4s}
  .stat-card.s4 .label{color:rgba(255,255,255,.7)}
  .stat-card.s4 .value{color:var(--gold)}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @media(max-width:1024px){.hero-visual{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}.stat-card{position:static;animation:none}.stat-card.s3,.stat-card.s4{grid-column:span 1}}
  @media(max-width:600px){.hero-visual{grid-template-columns:1fr}}

  /* hero background pattern */
  .hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(30,95,184,.06),transparent 70%);pointer-events:none}
  .hero::after{content:'';position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(201,169,92,.08),transparent 70%);pointer-events:none}

  /* SECTIONS */
  section{padding:100px 0;position:relative}
  .section-head{text-align:center;max-width:760px;margin:0 auto 64px}
  .section-head .eyebrow{margin-bottom:16px;display:inline-block}
  .section-head h2{margin-bottom:20px}
  .section-head .lead{color:var(--ink-2)}

  /* TRUST BAR */
  .trust{padding:56px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trust-grid{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:center}
  @media(max-width:900px){.trust-grid{grid-template-columns:1fr;text-align:center}}
  .trust-stat{font-family:var(--serif);font-size:48px;font-weight:500;color:var(--navy);line-height:1}
  .trust-stat-label{font-size:14px;color:var(--ink-3);margin-top:6px}
  .trust-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:32px;align-items:center;opacity:.7}
  .logo-placeholder{height:48px;display:grid;place-items:center;background:var(--bg);border:1px dashed var(--line-2);border-radius:8px;font-size:12px;color:var(--ink-3);font-family:var(--mono);font-weight:500;text-align:center;padding:0 8px}

  /* MARQUEE infinite scroll */
  .marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%)}
  .marquee-track{display:flex;gap:48px;animation:marquee 32s linear infinite;width:max-content;align-items:center}
  .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .marquee .logo-placeholder{flex:0 0 160px;height:56px;background:var(--surface);opacity:.85}

  /* EMOJI FLOW — marketing symbols drifting */
  .emoji-flow{position:relative;height:280px;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 50%,var(--bg) 100%);padding:0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .emoji-flow::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 90%);pointer-events:none;z-index:2}
  /* OFERTA section setup — emoji as background */
  #oferta{position:relative;overflow:hidden}
  #oferta > .container{position:relative;z-index:2}
  .oferta-emoji-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .oferta-emoji-bg .emoji-particle{position:absolute;left:-120px;font-size:clamp(48px,6vw,96px);animation:emoji-drift linear infinite;line-height:1;user-select:none;opacity:.7;text-shadow:0 6px 14px rgba(15,46,92,.12)}
  /* Original .emoji-particle (was for divider, now unused but harmless) */
  .emoji-particle{position:absolute;left:-90px;font-size:clamp(30px,4vw,56px);animation:emoji-drift linear infinite;will-change:transform;line-height:1;user-select:none;filter:drop-shadow(0 4px 12px rgba(15,46,92,.12))}
  @keyframes emoji-drift{
    0%{transform:translateX(0) translateY(0) rotate(-8deg);opacity:0}
    8%{opacity:.95}
    50%{transform:translateX(50vw) translateY(-30px) rotate(8deg)}
    92%{opacity:.95}
    100%{transform:translateX(calc(100vw + 180px)) translateY(0) rotate(-5deg);opacity:0}
  }
  .emoji-flow:hover .emoji-particle{animation-play-state:paused}
  .ef-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);background:var(--bg);padding:8px 18px;border-radius:24px;border:1px solid var(--line);font-weight:500}

  /* HERO EMOJI FLOATERS — subtle, large, slow */
  .hero-bg .hero-emoji{position:absolute;left:-320px;font-size:clamp(56px,7vw,120px);animation:hero-emoji-drift linear infinite;opacity:.95;pointer-events:none;line-height:1;text-shadow:0 8px 16px rgba(15,46,92,.18);z-index:2;will-change:transform}
  @media(max-width:768px){
    .hero-bg .hero-emoji{font-size:clamp(40px,11vw,72px);opacity:.85}
  }
  @media(prefers-reduced-motion:reduce){
    .hero-bg .hero-emoji{animation-duration:60s!important}
    .stat-card{animation:none!important}
  }
  @keyframes hero-emoji-drift{
    0%{transform:translate3d(0,0,0) rotate(-12deg) scale(.95);opacity:0}
    12%{transform:translate3d(12vw,-15px,0) rotate(-2deg) scale(.98);opacity:.95}
    30%{transform:translate3d(30vw,18px,0) rotate(6deg) scale(1.02)}
    50%{transform:translate3d(50vw,-30px,0) rotate(-4deg) scale(.98)}
    70%{transform:translate3d(70vw,15px,0) rotate(8deg) scale(1.04)}
    88%{transform:translate3d(88vw,-12px,0) rotate(-5deg) scale(1);opacity:.95}
    100%{transform:translate3d(calc(100vw + 400px),0,0) rotate(-8deg) scale(.95);opacity:0}
  }

  /* HERO PARALLAX BG */
  .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint}
  .hero-bg-img{position:absolute;left:0;right:0;top:-15%;bottom:-15%;background-image:radial-gradient(ellipse at 80% 20%,rgba(30,95,184,.10) 0%,transparent 55%),radial-gradient(ellipse at 15% 85%,rgba(201,169,92,.10) 0%,transparent 55%),radial-gradient(ellipse at 50% 50%,rgba(15,46,92,.04) 0%,transparent 70%);background-size:cover;background-position:center;will-change:transform}
  .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,250,249,.15) 0%,rgba(250,250,249,.45) 55%,var(--bg) 100%);pointer-events:none;z-index:1}
  @media(max-width:768px){.hero{min-height:75vh}}
  .hero > .container{position:relative;z-index:2}

  /* PROBLEM */
  .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
  @media(max-width:900px){.problem-grid{grid-template-columns:1fr}}
  .problem-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;position:relative;transition:all .25s}
  .problem-card:hover{border-color:var(--navy);transform:translateY(-4px);box-shadow:0 12px 32px -8px rgba(15,46,92,.12)}
  .problem-icon{width:48px;height:48px;border-radius:12px;background:#FEE2E2;display:grid;place-items:center;color:var(--bad);margin-bottom:20px}
  .problem-card h4{margin-bottom:10px;font-family:var(--sans);font-weight:600;font-size:18px;color:var(--ink)}
  .problem-card p{color:var(--ink-2);font-size:15px}
  /* PROBLEM SECTION — dollar rain background (right→left, slow rotation) */
  #problem{position:relative;overflow:hidden}
  #problem > .container{position:relative;z-index:2}
  .problem-dollars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .problem-dollars span{position:absolute;right:-100px;font-size:clamp(40px,5vw,80px);animation:dollar-fly linear infinite;opacity:.55;line-height:1;will-change:transform;text-shadow:0 6px 14px rgba(15,46,92,.10)}
  @keyframes dollar-fly{
    0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
    8%{opacity:.55}
    50%{transform:translate3d(-50vw,18px,0) rotate(180deg)}
    92%{opacity:.55}
    100%{transform:translate3d(calc(-100vw - 200px),0,0) rotate(360deg);opacity:0}
  }

  /* HOW IT WORKS — 4 steps */
  .how{background:var(--surface)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;position:relative}
  @media(max-width:900px){.steps{grid-template-columns:1fr;gap:32px}}
  .steps::before{content:'';position:absolute;top:32px;left:8%;right:8%;height:2px;background:linear-gradient(to right,var(--line) 0%,var(--gold) 70%,var(--gold) 100%);z-index:0}
  @media(max-width:900px){.steps::before{display:none}}
  .step{position:relative;text-align:center;padding:0 16px;z-index:1}
  .step-num{width:64px;height:64px;border-radius:50%;background:var(--surface);border:2px solid var(--navy);color:var(--navy);font-family:var(--serif);font-size:28px;font-weight:600;display:grid;place-items:center;margin:0 auto 20px;transition:all .3s}
  .step.paid .step-num{background:var(--gold);border-color:var(--gold);color:var(--navy)}
  .step h4{font-family:var(--sans);font-size:17px;font-weight:600;margin-bottom:8px}
  .step p{font-size:14px;color:var(--ink-2);line-height:1.55}
  .step-badge{display:inline-block;margin-top:12px;padding:4px 10px;background:#FEF3C7;color:var(--gold-2);border-radius:20px;font-size:11px;font-weight:600;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
  .step.free .step-badge{background:#DCFCE7;color:var(--ok)}

  /* ROI CALCULATOR */
  .calc{background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 100%)}
  .calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:48px;box-shadow:0 24px 60px -20px rgba(15,46,92,.12)}
  @media(max-width:900px){.calc-wrap{grid-template-columns:1fr;padding:32px;gap:36px}}
  .calc-controls h3{font-family:var(--sans);font-weight:600;font-size:20px;margin-bottom:24px}
  .calc-field{margin-bottom:28px}
  .calc-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2);font-weight:500;margin-bottom:12px}
  .calc-value{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--navy)}
  .calc-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--line);outline:none;cursor:pointer}
  .calc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--navy);cursor:pointer;border:3px solid var(--surface);box-shadow:0 2px 8px rgba(15,46,92,.3);transition:transform .15s}
  .calc-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
  .calc-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--navy);cursor:pointer;border:3px solid var(--surface);box-shadow:0 2px 8px rgba(15,46,92,.3)}
  .calc-results{background:var(--navy);color:#fff;border-radius:16px;padding:36px;position:relative;overflow:hidden}
  .calc-results::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(201,169,92,.2),transparent 70%)}
  .calc-results h4{color:#fff;font-family:var(--sans);font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;position:relative;color:rgba(255,255,255,.7)}
  .calc-result-row{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);position:relative}
  .calc-result-row:last-of-type{border-bottom:0;padding-top:24px}
  .calc-result-row .lbl{font-size:14px;color:rgba(255,255,255,.7)}
  .calc-result-row .val{font-family:var(--mono);font-size:22px;font-weight:700;color:#fff}
  .calc-result-row.highlight .lbl{color:var(--gold);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
  .calc-result-row.highlight .val{color:var(--gold);font-size:36px}
  .calc-cta{margin-top:24px;width:100%;justify-content:center}

  /* CASE STUDIES — emoji rain on hover */
  .case-card{overflow:hidden}
  .case-rain{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .case-rain span{position:absolute;top:-60px;font-size:34px;animation:case-fall ease-in infinite;animation-play-state:paused;opacity:0;transition:opacity .4s ease;line-height:1}
  .case-card:hover .case-rain span{opacity:.55;animation-play-state:running}
  .case-card:hover .rain-workers span{opacity:.7;font-size:42px}
  .case-card > *:not(.case-rain){position:relative;z-index:1}
  @keyframes case-fall{
    0%{transform:translate3d(0,0,0);opacity:0}
    5%{opacity:1}
    95%{opacity:1}
    100%{transform:translate3d(0,720px,0);opacity:0}
  }
  /* CASE STUDIES */
  .cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
  @media(max-width:900px){.cases-grid{grid-template-columns:1fr}}
  .case-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;transition:all .3s;position:relative;overflow:hidden}
  .case-card:hover{border-color:var(--navy);transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(15,46,92,.15)}
  .case-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(to right,var(--navy),var(--sky))}
  .case-meta{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:12px;color:var(--ink-3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
  .case-meta-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
  .case-metric{font-family:var(--serif);font-size:64px;font-weight:500;line-height:1;color:var(--navy);letter-spacing:-0.04em}
  .case-metric-label{font-size:14px;color:var(--ink-2);margin:4px 0 20px}
  .case-card h4{font-family:var(--sans);font-size:18px;font-weight:600;margin-bottom:12px}
  .case-card .quote{font-style:italic;color:var(--ink-2);font-size:14px;line-height:1.6;margin-bottom:24px;padding-left:16px;border-left:3px solid var(--gold)}
  .case-author{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
  .case-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--sky));display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px;font-family:var(--serif)}
  .case-author-info{font-size:13px}
  .case-author-info strong{font-weight:600;display:block}
  .case-author-info span{color:var(--ink-3)}

  /* COMPARISON */
  .compare{background:var(--surface)}
  .compare-table{max-width:880px;margin:48px auto 0;background:var(--bg);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(15,46,92,.1)}
  .compare-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:center;padding:24px 32px;border-bottom:1px solid var(--line);font-size:15px}
  .compare-row:last-child{border-bottom:0}
  .compare-row.head{background:var(--surface);font-weight:600;border-bottom:2px solid var(--navy);padding:28px 32px}
  .compare-row.head .col-them{color:var(--ink-3);font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:500;text-align:center}
  .compare-row.head .col-us{color:var(--navy);font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;text-align:center;position:relative}
  .compare-row.head .col-us::before{content:'';position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--navy);font-size:11px;padding:4px 12px;border-radius:0 0 8px 8px;font-weight:700;letter-spacing:.08em;content:'TY'}
  .compare-label{color:var(--ink);font-weight:500}
  .compare-row .col-them,.compare-row .col-us{text-align:center}
  .compare-row .col-them{color:var(--ink-3);font-size:14px}
  .compare-row .col-us{color:var(--navy);font-weight:600;font-family:var(--mono)}
  .compare-row.featured{background:rgba(201,169,92,.08)}
  @media(max-width:700px){.compare-row{grid-template-columns:1fr;gap:8px;text-align:left}.compare-row .col-them,.compare-row .col-us{text-align:left}.compare-row.head{display:none}.compare-row .col-them::before{content:'Inne agencje: ';color:var(--ink-3);font-size:12px;font-family:var(--mono);text-transform:uppercase}.compare-row .col-us::before{content:'Elsii: ';color:var(--gold-2);font-size:12px;font-family:var(--mono);text-transform:uppercase}}

  /* INCLUDED */
  .incl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;margin-top:48px;max-width:880px;margin-left:auto;margin-right:auto}
  @media(max-width:700px){.incl-grid{grid-template-columns:1fr}}
  .incl-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;transition:border-color .2s}
  .incl-item:hover{border-color:var(--gold)}
  .incl-check{width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;flex-shrink:0;font-weight:700;font-size:14px}
  .incl-text strong{display:block;font-weight:600;font-size:15px;margin-bottom:2px}
  .incl-text span{font-size:13px;color:var(--ink-2)}

  /* TEAM — organic blob frames */
  .team{padding:100px 0;background:var(--bg);position:relative;overflow:hidden}
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:60px;max-width:1100px;margin-left:auto;margin-right:auto}
  @media(max-width:1024px){.team-grid{grid-template-columns:repeat(2,1fr);gap:48px}}
  @media(max-width:600px){.team-grid{grid-template-columns:1fr;gap:48px}}
  .team-card{text-align:center}
  .team-photo{width:180px;height:180px;margin:0 auto 28px;position:relative;display:grid;place-items:center;font-family:var(--serif);font-size:44px;font-weight:500;color:#fff;background:linear-gradient(135deg,var(--navy) 0%,var(--sky) 100%);transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-radius .6s ease;cursor:default;box-shadow:0 20px 40px -16px rgba(15,46,92,.25);letter-spacing:-0.02em;will-change:transform,border-radius}
  .team-photo.shape-1{border-radius:68% 32% 56% 44% / 60% 40% 60% 40%;transform:rotate(-3deg)}
  .team-photo.shape-2{border-radius:34% 66% 70% 30% / 50% 60% 40% 50%;transform:rotate(2deg);background:linear-gradient(135deg,var(--sky) 0%,var(--navy) 100%)}
  .team-photo.shape-3{border-radius:60% 40% 30% 70% / 55% 70% 30% 45%;transform:rotate(-2deg);background:linear-gradient(135deg,var(--navy) 0%,var(--gold-2) 120%)}
  .team-photo.shape-4{border-radius:50% 50% 70% 30% / 35% 60% 40% 65%;transform:rotate(3deg);background:linear-gradient(135deg,var(--gold-2) 0%,var(--navy) 100%)}
  .team-photo.shape-5{border-radius:46% 54% 38% 62% / 60% 30% 70% 40%;transform:rotate(-4deg);background:linear-gradient(135deg,var(--sky) 0%,var(--gold-2) 100%)}
  .team-photo.shape-6{border-radius:62% 38% 64% 36% / 40% 56% 44% 60%;transform:rotate(2deg);background:linear-gradient(135deg,var(--navy) 0%,var(--sky) 70%,var(--gold-2) 130%)}
  /* Real photo variant — replace gradient with background-image, hide initials */
  .team-photo.has-photo{background-size:cover;background-position:center;color:transparent;font-size:0}
  .team-photo.has-photo::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
  .team-card:hover .team-photo{transform:rotate(0deg) scale(1.06);border-radius:50%}
  .team-photo::before{content:'';position:absolute;inset:-10px;border:2px dashed var(--gold);opacity:0;transition:opacity .3s;pointer-events:none;border-radius:inherit}
  .team-card:hover .team-photo::before{opacity:.4}
  .team-card h3{font-family:var(--sans);font-size:19px;font-weight:600;margin-bottom:6px;color:var(--ink)}
  .team-role{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-2);margin-bottom:14px;font-weight:500}
  .team-bio{font-size:14px;color:var(--ink-2);line-height:1.6;max-width:240px;margin:0 auto}

  /* TESTIMONIALS */
  .testimonials{background:var(--surface)}
  .testim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
  @media(max-width:900px){.testim-grid{grid-template-columns:1fr}}
  .testim-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:32px;position:relative}
  .testim-card::before{content:'"';position:absolute;top:12px;left:24px;font-family:var(--serif);font-size:96px;color:var(--gold);opacity:.3;line-height:1}
  .testim-stars{display:flex;gap:2px;margin-bottom:16px;position:relative}
  .testim-stars svg{width:18px;height:18px;color:var(--gold);fill:var(--gold)}
  .testim-quote{font-size:16px;line-height:1.6;color:var(--ink);margin-bottom:24px;position:relative;font-weight:400}
  .testim-author{display:flex;align-items:center;gap:12px}
  .testim-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));display:grid;place-items:center;color:#fff;font-weight:600;font-family:var(--serif);font-size:16px}
  .testim-author-info strong{display:block;font-weight:600;font-size:14px}
  .testim-author-info span{color:var(--ink-3);font-size:13px}

  /* FAQ */
  .faq-list{max-width:780px;margin:48px auto 0}
  .faq-item{border-bottom:1px solid var(--line);padding:24px 0;cursor:pointer;transition:all .2s}
  .faq-item:hover .faq-q{color:var(--navy)}
  .faq-q{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:600;color:var(--ink);font-family:var(--sans);gap:16px}
  .faq-icon{width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;transition:all .25s;color:var(--navy)}
  .faq-icon svg{width:16px;height:16px;transition:transform .25s}
  .faq-item.open .faq-icon{background:var(--navy);color:var(--gold);border-color:var(--navy)}
  .faq-item.open .faq-icon svg{transform:rotate(45deg)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding-top .25s;color:var(--ink-2);font-size:15px;line-height:1.7}
  .faq-item.open .faq-a{max-height:300px;padding-top:16px}

  /* FINAL CTA + FORM */
  .final{background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);padding:120px 0}
  .final-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;max-width:1120px;margin:0 auto;padding:0 28px}
  @media(max-width:900px){.final-wrap{grid-template-columns:1fr;gap:48px}}
  .final-left h2{font-size:clamp(32px,4vw,52px);margin-bottom:20px}
  .final-left .lead{margin-bottom:32px}
  .final-features{list-style:none;display:grid;gap:14px}
  .final-features li{display:flex;align-items:center;gap:12px;font-size:15px}
  .final-features svg{color:var(--ok);width:20px;height:20px;flex-shrink:0}
  .form-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:40px;box-shadow:0 24px 60px -20px rgba(15,46,92,.15)}
  .form-progress{display:flex;gap:6px;margin-bottom:28px}
  .form-progress span{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .3s}
  .form-progress span.active{background:var(--navy)}
  .form-progress span.done{background:var(--gold)}
  .form-step{display:none}
  .form-step.active{display:block;animation:slidein .3s ease}
  @keyframes slidein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
  .form-step h4{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:8px;font-weight:600}
  .form-step .q{font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:24px;line-height:1.2;color:var(--ink)}
  .form-row{display:grid;gap:10px;margin-bottom:16px}
  .form-row label{font-size:13px;color:var(--ink-2);font-weight:500}
  .form-row input,.form-row select,.form-row textarea{padding:14px 16px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:var(--sans);background:var(--bg);color:var(--ink);transition:border-color .2s,box-shadow .2s}
  .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,46,92,.1)}
  .form-options{display:grid;gap:10px}
  .form-option{padding:16px 20px;border:1px solid var(--line);border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all .15s;background:var(--bg)}
  .form-option:hover{border-color:var(--navy)}
  .form-option.selected{border-color:var(--navy);background:rgba(15,46,92,.05)}
  .form-option-icon{width:36px;height:36px;border-radius:8px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy)}
  .form-option-info strong{display:block;font-weight:600;font-size:15px}
  .form-option-info span{font-size:13px;color:var(--ink-3)}
  .form-nav{display:flex;justify-content:space-between;margin-top:24px;gap:12px}
  .form-step.done{text-align:center;padding:20px 0}
  .form-step.done .check{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;margin:0 auto 20px}
  .form-step.done .check svg{width:32px;height:32px}
  .form-step.done h3{margin-bottom:12px}
  .form-step.done .booking-stub{margin-top:24px;padding:24px;background:var(--bg);border:1px dashed var(--line-2);border-radius:12px;font-size:13px;color:var(--ink-2);text-align:left}

  /* LOCATION — animated pin over Google Maps */
  .location{padding:80px 0 0;background:var(--bg);position:relative}
  .location-head{text-align:center;max-width:680px;margin:0 auto 48px;padding:0 28px}
  .location-head h2{margin-bottom:16px}
  .location-head .eyebrow{display:inline-block;margin-bottom:14px}
  .location-map-wrap{position:relative;height:480px;overflow:hidden}
  .location-map-wrap iframe{width:100%;height:100%;border:0;filter:saturate(.9) contrast(1.02)}
  .location-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:5;pointer-events:none;animation:pin-bounce 3s ease-in-out infinite}
  .pin-building{font-size:74px;line-height:1;display:block;filter:drop-shadow(0 14px 20px rgba(15,46,92,.4));animation:building-tilt 4s ease-in-out infinite;transform-origin:bottom center}
  @keyframes building-tilt{
    0%,100%{transform:rotate(-3deg)}
    50%{transform:rotate(3deg)}
  }
  .location-pin .pin-label{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;font-family:var(--sans);white-space:nowrap;letter-spacing:.02em;box-shadow:0 8px 24px -6px rgba(15,46,92,.4);text-align:center;line-height:1.3}
  .location-pin .pin-addr{display:block;font-size:11px;font-weight:400;color:var(--gold);margin-top:2px;letter-spacing:.04em}
  .location-pin .pin-label::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--navy)}
  .location-pulse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;width:24px;height:24px}
  .location-pulse::before,.location-pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--gold);opacity:.5;animation:pulse-ring 2.2s ease-out infinite}
  .location-pulse::after{animation-delay:1.1s}
  @keyframes pin-bounce{
    0%,100%{transform:translate(-50%,-100%) translateY(0)}
    50%{transform:translate(-50%,-100%) translateY(-26px)}
  }
  @keyframes pulse-ring{
    0%{transform:scale(.4);opacity:.7}
    100%{transform:scale(4.5);opacity:0}
  }
  .location-info{display:flex;justify-content:center;align-items:center;gap:32px;padding:36px 28px;background:var(--surface);border-top:1px solid var(--line);flex-wrap:wrap}
  .location-info-item{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2)}
  .location-info-item strong{color:var(--ink);font-weight:600}
  .location-info-icon{width:36px;height:36px;border-radius:50%;background:var(--bg);display:grid;place-items:center;color:var(--navy);flex-shrink:0}

  /* FOOTER */
  footer{background:var(--navy);color:#fff;padding:80px 0 32px}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:64px}
  @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
  @media(max-width:600px){.footer-grid{grid-template-columns:1fr}}
  .footer-brand h3{color:#fff;font-size:28px;margin-bottom:16px}
  .footer-brand p{color:rgba(255,255,255,.7);font-size:14px;line-height:1.6}
  .footer-col h5{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:20px;font-weight:600}
  .footer-col ul{list-style:none;display:grid;gap:10px}
  .footer-col a{color:rgba(255,255,255,.75);font-size:14px;transition:color .2s}
  .footer-col a:hover{color:#fff}
  .footer-bottom{padding-top:32px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px;color:rgba(255,255,255,.6)}
  .footer-legal{display:flex;gap:24px;flex-wrap:wrap}

  /* SCROLL ANIMATIONS — visible by default, IO upgrades if available */
  .reveal{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
  .js .reveal{opacity:0;transform:translateY(24px)}
  .js .reveal.in{opacity:1;transform:translateY(0)}

  /* placeholder shimmer */
  .ph{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:ph 2s infinite}
  @keyframes ph{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* === FIX: WP block wrappers break IntersectionObserver — force visible === */
.js .reveal,
.reveal{opacity:1!important;transform:none!important}

/* === Native Gutenberg .wp-block-details (FAQ) — restore Elsii look === */
.faq-list details.wp-block-details,
.wp-block-details{
  border-bottom:1px solid var(--line);
  padding:24px 0;
  cursor:pointer;
  list-style:none;
}
.wp-block-details summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  font-family:var(--sans);
  gap:16px;
  cursor:pointer;
  list-style:none;
}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary::marker{content:''}
.wp-block-details summary::after{
  content:'+';
  width:32px;height:32px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  display:grid;place-items:center;
  flex-shrink:0;
  font-size:20px;font-weight:300;
  color:var(--navy);
  transition:all .25s;
}
.wp-block-details[open] summary::after{
  content:'×';
  background:var(--navy);
  color:var(--gold);
  border-color:var(--navy);
  transform:rotate(0deg);
}
.wp-block-details summary:hover{color:var(--navy)}
.wp-block-details p{
  padding-top:16px;
  color:var(--ink-2);
  font-size:15px;line-height:1.7;
}

/* === Native Gutenberg wrapper compatibility — preserve our section CSS === */
.wp-block-group.compare > .container,
.wp-block-group.testimonials > .container,
section.wp-block-group{padding:0}
.wp-block-paragraph{margin:0}

/* === PORTFOLIO === */
.portfolio{padding:100px 0;background:var(--bg);position:relative;overflow:hidden}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px;margin-top:60px;max-width:1100px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.portfolio-grid{grid-template-columns:1fr;gap:48px}}
.portfolio-card{display:block;text-decoration:none;color:inherit;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .3s;position:relative;will-change:transform}
.portfolio-card:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 28px 60px -16px rgba(15,46,92,.22);border-color:var(--navy)}
.portfolio-thumb{position:relative;aspect-ratio:1200/750;overflow:hidden;background:linear-gradient(135deg,#0F2E5C 0%,#1E5FB8 100%)}
.portfolio-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1);filter:saturate(.95) contrast(1.02)}
.portfolio-card:hover .portfolio-thumb img{transform:scale(1.05)}
.portfolio-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
.portfolio-card:hover .portfolio-shine{transform:translateX(100%)}
.portfolio-thumb::after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);border-radius:0;pointer-events:none}
.portfolio-meta{padding:28px 28px 32px}
.portfolio-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.portfolio-tags span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);background:rgba(201,169,92,.08);border:1px solid rgba(201,169,92,.18);padding:4px 10px;border-radius:20px}
.portfolio-card h3{font-family:var(--serif);font-size:32px;font-weight:500;margin-bottom:6px;color:var(--ink);line-height:1;letter-spacing:-0.02em}
.portfolio-url{font-family:var(--mono);font-size:13px;color:var(--sky);margin-bottom:14px;font-weight:500}
.portfolio-desc{font-size:14px;color:var(--ink-2);line-height:1.6;margin-bottom:20px}
.portfolio-cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--navy);transition:gap .25s,color .25s}
.portfolio-card:hover .portfolio-cta{color:var(--sky);gap:12px}

/* === PAGE HEADER (uproszczony — dla podstron i bloga) === */
.page-header{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.92);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line)}
.page-header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1240px;margin:0 auto}
.page-nav{display:flex;gap:28px;font-size:14px;color:var(--ink-2)}
.page-nav a{transition:color .2s;text-decoration:none;color:inherit}
.page-nav a:hover{color:var(--navy)}
.page-nav a[aria-current="page"]{color:var(--navy);font-weight:600}
@media(max-width:900px){.page-nav{display:none}}

/* === PAGE main (podstrony statyczne) === */
.page-main{max-width:760px;margin:0 auto;padding:80px 28px 100px}
.page-main .page-title{font-family:var(--serif);font-size:clamp(36px,5vw,56px);font-weight:500;letter-spacing:-0.02em;line-height:1.05;color:var(--ink);margin-bottom:32px}
.page-main p,.page-main li{font-size:17px;line-height:1.7;color:var(--ink-2);margin-bottom:18px}
.page-main h2{font-family:var(--serif);font-size:32px;font-weight:500;margin:48px 0 16px;color:var(--ink);letter-spacing:-0.02em}
.page-main h3{font-family:var(--sans);font-size:22px;font-weight:600;margin:32px 0 12px;color:var(--ink)}
.page-main h4{font-family:var(--sans);font-size:18px;font-weight:600;margin:24px 0 10px;color:var(--ink)}
.page-main ul,.page-main ol{padding-left:24px;margin:20px 0}
.page-main li{margin-bottom:8px}
.page-main blockquote{border-left:4px solid var(--gold);padding:8px 0 8px 24px;margin:32px 0;color:var(--ink-2);font-style:italic;font-size:18px}
.page-main strong{color:var(--ink);font-weight:600}
.page-main a{color:var(--sky);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.page-main a:hover{color:var(--navy)}
.page-main code{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-family:var(--mono);font-size:14px;color:var(--navy)}
.page-main pre{background:var(--ink);color:#FAFAF9;padding:20px;border-radius:12px;overflow-x:auto;margin:24px 0;font-size:14px;line-height:1.6}
.page-main pre code{background:transparent;border:0;color:inherit;padding:0}
.page-main img{border-radius:12px;margin:32px 0;width:100%;height:auto}
.page-main table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.page-main th,.page-main td{padding:12px 16px;border:1px solid var(--line);text-align:left}
.page-main th{background:var(--surface);font-weight:600;color:var(--ink);font-family:var(--sans)}

/* === BLOG listing === */
.blog-main{max-width:1200px;margin:0 auto;padding:80px 28px 100px}
.blog-head{text-align:center;max-width:760px;margin:0 auto 64px}
.blog-head .eyebrow{display:inline-block;margin-bottom:14px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);font-weight:500}
.blog-head h1{font-family:var(--serif);font-size:clamp(36px,5vw,56px);font-weight:500;line-height:1.1;letter-spacing:-0.02em;margin-bottom:20px;color:var(--ink)}
.blog-head .lead{font-size:18px;color:var(--ink-2);line-height:1.55}
.blog-grid-wrap{margin-top:0}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media(max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}
.blog-grid > li{list-style:none;padding:0;margin:0}
.blog-card-thumb{display:block;margin-bottom:16px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--sky));aspect-ratio:16/10;transition:transform .4s}
.blog-card-thumb:hover{transform:translateY(-3px)}
.blog-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:0 4px}
.blog-card-cats{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);margin-bottom:8px;font-weight:600}
.blog-card-cats a{color:inherit;text-decoration:none}
.blog-card-title{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-0.01em;margin-bottom:8px}
.blog-card-title a{color:var(--ink);text-decoration:none;transition:color .2s}
.blog-card-title a:hover{color:var(--navy)}
.blog-card-excerpt{font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:10px}
.blog-card-date{font-size:12px;color:var(--ink-3);font-family:var(--mono)}

/* Pagination */
.wp-block-query-pagination{display:flex;gap:8px;justify-content:center;margin-top:64px}
.wp-block-query-pagination a,.wp-block-query-pagination span{padding:8px 14px;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:14px}
.wp-block-query-pagination a:hover{border-color:var(--navy);color:var(--navy)}

/* === SINGLE post === */
.post-main{max-width:720px;margin:0 auto;padding:60px 28px 100px}
.post-meta{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--ink-3);margin-bottom:20px;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.post-categories a{color:var(--gold-2);text-decoration:none;font-weight:600}
.post-title{font-family:var(--serif);font-size:clamp(36px,5vw,56px);font-weight:500;line-height:1.05;letter-spacing:-0.02em;margin-bottom:24px;color:var(--ink)}
.post-author-row{display:flex;align-items:center;gap:14px;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.post-author-row .wp-block-post-author{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2)}
.post-featured{margin:0 0 36px;border-radius:16px;overflow:hidden}
.post-featured img{width:100%;height:auto;display:block}
.post-content{font-size:17px;line-height:1.75;color:var(--ink-2)}
.post-content p{margin-bottom:20px}
.post-content h2{font-family:var(--serif);font-size:30px;font-weight:500;margin:48px 0 16px;color:var(--ink);letter-spacing:-0.02em}
.post-content h3{font-family:var(--sans);font-size:22px;font-weight:600;margin:32px 0 12px;color:var(--ink)}
.post-content ul,.post-content ol{padding-left:24px;margin:20px 0}
.post-content li{margin-bottom:8px}
.post-content blockquote{border-left:4px solid var(--gold);padding:8px 0 8px 24px;margin:32px 0;color:var(--ink-2);font-style:italic;font-size:19px}
.post-content strong{color:var(--ink);font-weight:600}
.post-content a{color:var(--sky);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post-content code{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-family:var(--mono);font-size:14px;color:var(--navy)}
.post-content img{border-radius:12px;margin:32px 0;width:100%;height:auto}
.post-back-cta{margin-top:64px;padding-top:32px;border-top:1px solid var(--line);font-size:14px}
.post-back-cta a{color:var(--ink-2);text-decoration:none}
.post-back-cta a:hover{color:var(--navy)}

/* === Calculator v2: hint pod suwakiem ROAS + assumption note === */
.calc-hint{font-size:12px;color:var(--ink-3);margin-top:6px;font-family:var(--mono);letter-spacing:.02em}
.calc-assumption{font-size:12px;color:var(--ink-3);line-height:1.6;margin:20px 0 24px;padding:16px;background:rgba(15,46,92,.04);border-radius:10px;border-left:3px solid var(--gold-2)}
.calc-assumption strong{color:var(--ink-1)}

/* === Team phone links === */
.team-phone{margin:-12px 0 12px;font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.team-phone a{color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;transition:all .2s}
.team-phone a:hover{color:var(--gold-2);border-bottom-color:var(--gold-2)}
.team-phone-placeholder{color:var(--ink-3);font-style:italic}

/* === Calculator v3: SEO + blended CPC layout === */
.calc-field-seo{background:linear-gradient(135deg,rgba(16,185,129,.05) 0%,rgba(30,95,184,.05) 100%);padding:14px 14px 4px;border-radius:10px;margin:0 -8px}
.calc-total{padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.calc-total .val{font-size:1.15em}
.calc-divider{height:1px;background:var(--line);margin:14px 0 6px}
.calc-cpc{background:rgba(201,169,92,.06);margin:4px -8px;padding:10px 8px;border-radius:8px}
.calc-cpc-saved{display:block;font-size:11px;color:#10B981;font-family:var(--mono);letter-spacing:.02em;margin-top:4px;font-weight:500}

/* === Trust bar: real client logos === */
.marquee-track .logo-item{display:inline-flex;align-items:center;justify-content:center;height:64px;min-width:140px;padding:0 28px;flex-shrink:0;opacity:.55;filter:grayscale(60%);transition:all .3s ease;text-decoration:none}
.marquee-track .logo-item:hover{opacity:1;filter:grayscale(0%);transform:scale(1.05)}
.marquee-track .logo-item img{max-height:48px;width:auto;height:auto;display:block;object-fit:contain}
@media(max-width:768px){
  .marquee-track .logo-item{height:48px;min-width:100px;padding:0 18px}
  .marquee-track .logo-item img{max-height:36px}
}