/*
Theme Name: Agency WhoWhere
Theme URI: https://www.whowhere.online/
Author: WhoWhere.online
Author URI: https://www.whowhere.online/
Description: Custom multilingual WordPress theme for WhoWhere.online digital marketing agency.
Version: 0.1.0
Text Domain: agency-whowhere
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
*/

/* ============================================================
   WhoWhere.online — Design System
   Shared stylesheet for all page templates.
   Maps to a WordPress custom theme (see design-system.html).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  /* ---- Brand colors (sampled from logo) ---- */
  --teal:#1699BF;
  --blue:#115690;
  --royal:#1E5FCC;
  --navy:#252564;
  --ink:#16203a;          /* charcoal navy text */
  --ink-2:#3f4a63;        /* secondary text */
  --muted:#6b7689;        /* tertiary text */
  --green:#86BB24;        /* logo dot accent */
  --green-deep:#6fa015;

  /* ---- Surfaces ---- */
  --bg:#ffffff;
  --bg-soft:#f4f7fb;      /* cool near-white */
  --bg-soft-2:#eef3f9;
  --line:#e3e9f1;
  --line-strong:#cfd8e6;

  /* ---- Brand gradient (logo arrow) ---- */
  --grad: linear-gradient(100deg,#1699BF 0%,#1f6fb8 42%,#1c3f8f 72%,#252564 100%);
  --grad-soft: linear-gradient(120deg,#eaf4fb 0%,#eef2fc 100%);

  /* ---- Type ---- */
  --display:'Sora',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;

  /* ---- Radius / shadow ---- */
  --r-sm:6px; --r:8px; --r-lg:14px; --r-xl:20px;
  --sh-1:0 1px 2px rgba(22,32,58,.06), 0 1px 3px rgba(22,32,58,.05);
  --sh-2:0 6px 18px rgba(22,32,58,.08);
  --sh-3:0 18px 48px rgba(20,40,80,.14);
  --sh-blue:0 18px 40px rgba(24,72,140,.20);

  /* ---- Layout ---- */
  --maxw:1200px;
  --gutter:clamp(20px,5vw,48px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
main,section,.wrap{min-width:0}
.mobile-only-br{display:none}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(30,95,204,.18)}

/* ---- Typography scale ---- */
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:700}
.eyebrow{
  font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--green); border-radius:2px}
.h1{font-size:clamp(2.4rem,5.2vw,4rem); font-weight:800; letter-spacing:-.03em}
.h2{font-size:clamp(1.9rem,3.6vw,2.85rem); font-weight:700}
.h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.27rem); color:var(--ink-2); line-height:1.55}
.muted{color:var(--muted)}
.text-grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,120px)}
.section-sm{padding-block:clamp(48px,6vw,80px)}
.soft{background:var(--bg-soft)}
.eyebrow-center{justify-content:center}
.center{text-align:center}
.stack{display:flex; flex-direction:column}
.sec-head{max-width:760px}
.sec-head.center{margin-inline:auto}
.sec-head .h2{margin-top:14px}
.sec-head p{margin-top:16px}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --pad:15px 26px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  padding:var(--pad); border-radius:var(--r); border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--royal); color:#fff; box-shadow:0 8px 20px rgba(30,95,204,.26)}
.btn-primary:hover{background:#1a52b6; transform:translateY(-2px); box-shadow:0 14px 30px rgba(30,95,204,.34)}
.btn-grad{background:var(--grad); color:#fff; background-size:140% 140%; box-shadow:var(--sh-blue)}
.btn-grad:hover{transform:translateY(-2px); background-position:100% 0; box-shadow:0 22px 46px rgba(24,72,140,.3)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--royal); color:var(--royal); transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.2); transform:translateY(-2px)}
.btn-lg{--pad:18px 32px; font-size:16.5px}
.btn-block{width:100%}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--royal)}
.btn:disabled,.btn.is-disabled{background:var(--bg-soft-2); color:var(--muted); border-color:var(--line);
  box-shadow:none; cursor:not-allowed; transform:none; pointer-events:none}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line);
  transition:background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.nav{display:flex; align-items:center; gap:28px; height:78px; transition:height .24s ease, gap .24s ease}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand img{height:38px; width:auto; transition:height .24s ease, max-width .24s ease}
.nav-links{display:flex; align-items:center; gap:4px; margin:0 0 0 8px; padding:0; list-style:none}
.nav-links .menu-item{list-style:none}
.nav-links a{
  position:relative; padding:10px 14px; border-radius:var(--r-sm); font-weight:600; font-size:15.5px;
  color:var(--ink-2); transition:color .18s, background .18s, padding .24s ease, font-size .24s ease; white-space:nowrap;
}
.nav-links a:hover{color:var(--ink); background:var(--bg-soft)}
.nav-links a.active{color:var(--royal)}
.nav-links a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--green); border-radius:2px;
}
.nav-spacer{flex:1}

/* dropdown */
.has-drop{position:relative}
.has-drop>a{display:inline-flex; align-items:center; gap:5px}
.has-drop>a .chev{width:14px;height:14px; transition:transform .2s; color:var(--muted)}
.has-drop:hover>a .chev{transform:rotate(180deg)}
.drop{
  position:absolute; top:calc(100% + 8px); left:0; min-width:300px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translateY(0)}
.drop a{display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:var(--r); color:var(--ink)}
.drop a:hover{background:var(--bg-soft)}
.drop a > span:last-child{display:flex; flex-direction:column; gap:1px; min-width:0}
.drop .di{width:34px;height:34px;flex:0 0 34px; border-radius:9px; display:grid; place-items:center; background:var(--grad-soft); color:var(--blue)}
.drop .di svg{width:18px;height:18px}
.drop .dt{display:block; font-weight:700; font-size:14.5px; font-family:var(--display)}
.drop .dd{display:block; font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:1px}

/* lang switch */
.lang{display:inline-flex; align-items:center; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:3px; gap:1px}
.lang button,
.lang a{
  border:0; background:transparent; font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--muted);
  padding:6px 11px; border-radius:999px; cursor:pointer; transition:.18s, padding .24s ease, font-size .24s ease; line-height:1.2;
}
.lang button:hover,
.lang a:hover{color:var(--ink)}
.lang button.on,
.lang a.on{background:#fff; color:var(--royal); box-shadow:var(--sh-1)}

.nav-cta{display:flex; align-items:center; gap:14px}
.nav-consult{padding:8px 17px; min-height:38px; font-size:14px; box-shadow:0 8px 18px rgba(24,72,140,.18)}
.nav-consult:hover{box-shadow:0 12px 24px rgba(24,72,140,.24)}
.burger{display:none; width:44px;height:44px; border:1px solid var(--line); background:#fff; border-radius:var(--r); cursor:pointer; align-items:center; justify-content:center; transition:width .24s ease, height .24s ease, border-radius .24s ease}
.burger svg{width:22px;height:22px;color:var(--ink)}

.site-header.is-compact{background:rgba(255,255,255,.95); border-bottom-color:rgba(207,216,230,.78)}
.site-header.is-compact .nav{height:62px}
.site-header.is-compact .brand img{height:32px}
.site-header.is-compact .nav-links a{padding:7px 12px; font-size:14.5px}
.site-header.is-compact .lang button,
.site-header.is-compact .lang a{padding:5px 10px; font-size:12.5px}
.site-header.is-compact .nav-consult{min-height:34px; padding:6px 14px; font-size:13.5px}
.site-header.is-compact .burger{width:40px; height:40px; border-radius:7px}

/* mobile menu */
.mobile-menu{display:none; position:fixed; inset:78px 0 0; z-index:55; background:#fff; padding:36px clamp(30px,8vw,48px) 34px; overflow:auto}
body.admin-bar .mobile-menu{inset:110px 0 0}
.site-header.is-compact + .mobile-menu{inset:62px 0 0}
body.admin-bar .site-header.is-compact + .mobile-menu{inset:94px 0 0}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:15px 4px; font-family:var(--display); font-weight:600; font-size:20px; border-bottom:1px solid var(--line)}
.mobile-menu .sub{font-size:15px; font-family:var(--body); color:var(--muted); padding-left:14px; font-weight:600}
.mobile-actions{margin-top:24px; display:flex; flex-direction:column; gap:12px}
.mobile-actions .btn{justify-content:center; text-align:center}
.mobile-lang{margin-top:24px; display:flex; gap:8px; width:100%}
.mobile-lang .lang{width:100%; display:flex}
.mobile-lang .lang button,
.mobile-lang .lang a{flex:1; text-align:center; justify-content:center}
.cf7-wrap .wpcf7-form{display:grid; gap:18px}
.cf7-wrap p{margin:0}
.cf7-wrap label{font-weight:700; color:var(--ink); font-size:14px}
.cf7-wrap input,
.cf7-wrap textarea,
.cf7-wrap select{
  width:100%; margin-top:7px; border:1px solid var(--line-strong); border-radius:var(--r);
  padding:13px 14px; font-family:var(--body); font-size:15px; color:var(--ink); background:#fff;
}
.cf7-wrap textarea{min-height:150px; resize:vertical}
.cf7-wrap input[type="submit"]{
  background:var(--grad); color:#fff; border:0; font-family:var(--display); font-weight:700;
  cursor:pointer; box-shadow:var(--sh-blue);
}
.cf7-wrap .wpcf7-not-valid-tip{font-size:13px; margin-top:6px}

/* ============================================================
   Chips / pills / badges
   ============================================================ */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line-strong); font-weight:600; font-size:14.5px; color:var(--ink);
  box-shadow:var(--sh-1);
}
.chip .dot{width:8px;height:8px;border-radius:50%; background:var(--green)}
.chip svg{width:16px;height:16px;color:var(--blue)}
.badge{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); padding:6px 11px; border-radius:999px; background:var(--grad-soft)}

/* ============================================================
   Cards
   ============================================================ */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-1); transition:transform .22s, box-shadow .22s, border-color .22s}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-strong)}
.card-icon{width:52px;height:52px;border-radius:13px; display:grid; place-items:center; background:var(--grad-soft); color:var(--blue); margin-bottom:18px}
.card-icon svg{width:26px;height:26px}
.card h3{font-size:1.22rem; margin-bottom:9px}
.card p{color:var(--ink-2); font-size:15.5px; margin:0}
.card-link{margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--royal)}
.card-link svg{width:16px;height:16px; transition:transform .2s}
.card:hover .card-link svg{transform:translateX(4px)}
.service-card{position:relative; min-height:238px; padding-bottom:68px; scroll-margin-top:104px}
.service-card-cta{
  position:absolute; right:24px; bottom:22px; margin-top:0; border:0; background:transparent; cursor:pointer;
  padding:6px 0; color:var(--royal);
}
.service-card-cta:hover{color:var(--blue)}
.service-card-cta:focus-visible{outline:none; border-radius:var(--r-sm); box-shadow:0 0 0 4px rgba(30,95,204,.14)}
.svc-hero-card{scroll-margin-top:104px}

/* service order modal */
body.service-modal-open{overflow:hidden}
.service-modal{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:24px}
.service-modal.is-open{display:flex}
.service-modal__backdrop{position:absolute; inset:0; background:rgba(17,25,58,.52); backdrop-filter:blur(8px)}
.service-modal__dialog{
  position:relative; z-index:1; width:min(680px,100%); max-height:calc(100vh - 48px); overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 28px 80px rgba(17,25,58,.28);
  padding:clamp(26px,4vw,42px);
}
.service-modal__close{
  position:absolute; top:18px; right:18px; width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink-2); cursor:pointer; transition:.18s;
}
.service-modal__close:hover{color:var(--ink); border-color:var(--line-strong); box-shadow:var(--sh-1)}
.service-modal__close svg{width:20px; height:20px}
.service-modal .h2{margin-top:14px; padding-right:44px}
.service-modal .muted{margin:14px 0 24px; max-width:56ch}
.service-order-form{margin-top:22px}
.service-order-form .consent{margin:4px 0 22px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-note{
  display:none; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--r);
  background:rgba(134,187,36,.12); border:1px solid rgba(134,187,36,.34); color:var(--green-deep); font-weight:700;
}
.form-note.is-visible{display:flex}
.form-note.is-error{background:rgba(214,69,61,.1); border-color:rgba(214,69,61,.28); color:#b7352f}

@media (min-width:641px){
  .service-modal__dialog{
    width:min(760px,calc(100vw - 64px)); overflow:visible; padding:28px 34px 30px;
  }
  .service-modal__close{top:20px; right:24px; width:40px; height:40px}
  .service-modal .eyebrow{font-size:12px}
  .service-modal .h2{font-size:clamp(2rem,4vw,3rem); margin-top:10px}
  .service-modal .muted{font-size:1rem; line-height:1.45; margin:10px 0 18px; max-width:60ch}
  .service-order-form{margin-top:16px}
  .service-modal .field{gap:6px; margin-bottom:12px}
  .service-modal .field label{font-size:13.5px}
  .service-modal .input,
  .service-modal .textarea{font-size:15px; padding:10px 13px}
  .service-modal .textarea{min-height:112px}
  .service-order-form .consent{margin:2px 0 16px; font-size:13.5px}
  .service-order-form .btn{--pad:13px 24px}
}

@media (max-width:640px){
  .service-modal{padding:14px}
  .service-modal__dialog{padding:26px 22px}
  .form-grid{grid-template-columns:1fr; gap:0}
  .service-card{min-height:auto}
}

/* feature service card (dominant) */
.svc-hero-card{position:relative; overflow:hidden; padding:36px; border-radius:var(--r-xl); border:1px solid var(--line); background:#fff; box-shadow:var(--sh-2); transition:transform .25s, box-shadow .25s}
.svc-hero-card:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.svc-hero-card .tag{position:absolute; top:24px; right:24px}
.svc-hero-card .num{font-family:var(--display); font-weight:800; font-size:14px; color:var(--teal); letter-spacing:.1em}
.svc-hero-card h3{font-size:1.7rem; margin:14px 0 12px}
.svc-hero-card p{color:var(--ink-2); margin:0 0 22px; max-width:46ch}
.svc-feature-list{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:11px}
.svc-feature-list li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink-2)}
.svc-feature-list svg{width:20px;height:20px;color:var(--green-deep); flex:0 0 20px; margin-top:1px}
.svc-hero-card .visual{position:absolute; right:-40px; bottom:-40px; width:220px; height:220px; opacity:.08; pointer-events:none}

/* ============================================================
   Forms
   ============================================================ */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.field label{font-weight:600; font-size:14.5px; color:var(--ink)}
.field label .req{color:var(--green-deep)}
.input, .textarea, select.input{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--line-strong); border-radius:var(--r); padding:13px 15px; transition:.18s;
}
.input::placeholder, .textarea::placeholder{color:#9aa6b8}
.input:focus, .textarea:focus, select.input:focus{outline:none; border-color:var(--royal); box-shadow:0 0 0 4px rgba(30,95,204,.13)}
.textarea{resize:vertical; min-height:140px}
.input.error, .textarea.error{border-color:#d6453d; box-shadow:0 0 0 4px rgba(214,69,61,.12)}
.input.success, .textarea.success{border-color:var(--green-deep); box-shadow:0 0 0 4px rgba(134,187,36,.14)}
.field-hint{font-size:13px; color:var(--muted)}
.field-error{font-size:13px; color:#d6453d; display:none}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.5}
.consent input{margin-top:3px; width:19px;height:19px; accent-color:var(--royal); flex:0 0 19px}
.consent a{color:var(--royal); text-decoration:underline; text-underline-offset:2px}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:#11193a; color:#c9d3e6}
.footer-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-block:64px}
.footer-brand .fl{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:1.35rem; color:#fff; margin-bottom:16px}
.footer-brand .fl img{height:40px; width:40px}
.footer-brand .fl .dotg{color:var(--green)}
.footer-brand p{color:#9fabc6; font-size:15px; max-width:34ch; margin:0 0 22px}
.footer-col h4{color:#fff; font-family:var(--display); font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px}
.footer-col ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.footer-col a{color:#aab6d0; font-size:15px; transition:color .18s}
.footer-col a:hover{color:#fff}
.footer-col .ico-row{display:flex; gap:9px; align-items:center}
.footer-col .ico-row svg{width:17px;height:17px; color:var(--teal); flex:0 0 17px}
.socials{display:flex; gap:10px; margin-top:4px}
.socials a{width:40px;height:40px;border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:#c9d3e6; transition:.18s}
.socials a:hover{background:var(--royal); color:#fff; transform:translateY(-2px)}
.socials svg{width:19px;height:19px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-block:24px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; font-size:13.5px; color:#8b98b8}
.footer-bottom .legal{display:flex; gap:22px; flex-wrap:wrap}
.footer-bottom a:hover{color:#fff}
.footer-company{display:flex; gap:18px; flex-wrap:wrap}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{position:relative; overflow:hidden; background:var(--grad); color:#fff; border-radius:var(--r-xl)}
.cta-band .inner{position:relative; z-index:2; padding:clamp(40px,6vw,72px); display:grid; grid-template-columns:1.4fr auto; gap:36px; align-items:center}
.cta-band .inner > *{min-width:0}
.cta-band h2{color:#fff; font-size:clamp(1.7rem,3vw,2.4rem)}
.cta-band p{color:rgba(255,255,255,.86); margin-top:14px; max-width:52ch}
.cta-band .actions{display:flex; gap:14px; flex-wrap:wrap}
.cta-grid-bg{position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(ellipse 80% 90% at 80% 20%,#000,transparent)}

/* ============================================================
   Misc utilities
   ============================================================ */
.grid{display:grid; gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.divider{height:1px; background:var(--line); border:0; margin:0}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.kicker-link{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; color:var(--royal)}
.kicker-link svg{width:17px;height:17px; transition:transform .2s}
.kicker-link:hover svg{transform:translateX(4px)}

/* breadcrumbs */
.crumbs{display:flex; gap:9px; align-items:center; font-size:13.5px; color:var(--muted); flex-wrap:wrap}
.crumbs a:hover{color:var(--royal)}
.crumbs .sep{color:var(--line-strong)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1040px){
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .nav{gap:12px}
  .brand{max-width:calc(100% - 56px); min-width:0}
  .brand img{height:34px; max-width:220px}
  .site-header.is-compact .brand img{height:30px; max-width:195px}
  .nav-cta{margin-left:auto; gap:8px; flex-shrink:0}
  .nav-links, .nav .lang{display:none}
  .burger{display:inline-flex}
  .nav-cta .btn{display:none}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .cta-band .inner{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .mobile-only-br{display:block}
  .wrap{padding-inline:24px}
  .nav{height:72px}
  .brand img{height:32px; max-width:205px}
  .mobile-menu{inset:72px 0 0}
  body.admin-bar .mobile-menu{inset:118px 0 0}
  .site-header.is-compact .nav{height:60px}
  .site-header.is-compact .brand img{height:29px; max-width:185px}
  .site-header.is-compact + .mobile-menu{inset:60px 0 0}
  body.admin-bar .site-header.is-compact + .mobile-menu{inset:106px 0 0}
  .cta-band .inner{padding:32px clamp(24px,7vw,34px); gap:24px}
  .cta-band .actions{width:100%}
  .cta-band .actions .btn{width:100%; min-width:0; white-space:normal; text-align:center; line-height:1.25; padding:15px clamp(14px,4vw,22px); font-size:15.5px}
  .cta-band .actions .btn svg{flex:0 0 18px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 24px}
  .footer-brand{grid-column:1 / -1}
  .footer-top .footer-col:nth-child(2){grid-column:1}
  .footer-top .footer-col:nth-child(3){grid-column:2}
  .footer-top .footer-col:nth-child(4){grid-column:1 / -1}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}

/* ============================================================
   V2 — Brand-specific visual system
   Reusable across pages: mini site preview, branded thumbnails,
   case-preview cards, blog category covers, journey timeline.
   ============================================================ */

/* ---- Branded background motifs ---- */
.bp{position:relative; overflow:hidden}
.bp-grid::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:26px 26px}
.bp-dots::before{content:""; position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.6) 1.4px, transparent 1.4px); background-size:18px 18px}
.bp-diag::before{content:""; position:absolute; inset:0; opacity:.4;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 1px, transparent 1px 13px)}
.bp-ghost{position:absolute; pointer-events:none; opacity:.16; mix-blend-mode:screen}

/* ---- Mini website preview (browser mock as a component) ---- */
.site-mini{border-radius:9px; overflow:hidden; background:#fff; box-shadow:0 14px 30px rgba(16,32,70,.22); border:1px solid rgba(255,255,255,.7)}
.site-mini .sm-bar{display:flex; align-items:center; gap:5px; padding:8px 10px; background:#eef3f9; border-bottom:1px solid var(--line)}
.site-mini .sm-bar i{width:7px;height:7px;border-radius:50%; background:#cdd8e6}
.site-mini .sm-bar i:nth-child(1){background:#ff5f57}.site-mini .sm-bar i:nth-child(2){background:#febc2e}.site-mini .sm-bar i:nth-child(3){background:#28c840}
.site-mini .sm-bar .sm-url{margin-left:6px; flex:1; height:13px; border-radius:99px; background:#fff; border:1px solid var(--line)}
.site-mini .sm-body{padding:14px; display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg,#fff,#f7fafd)}
.site-mini .ln{height:9px; border-radius:99px; background:#e7eef6}
.site-mini .ln.acc{background:var(--teal); width:46%}
.site-mini .ln.w7{width:72%}.site-mini .ln.w5{width:54%}.site-mini .ln.w9{width:88%}
.site-mini .sm-btn{height:22px; width:84px; border-radius:6px; background:var(--green); box-shadow:0 6px 14px rgba(134,187,36,.4); margin-top:2px}
.site-mini .sm-cards{display:flex; gap:8px; margin-top:4px}
.site-mini .sm-cards i{flex:1; height:34px; border-radius:6px; background:#eef3f9; border:1px solid var(--line)}

/* ---- Floating data card (shared chrome for fragments) ---- */
.dcard{background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:13px; box-shadow:var(--sh-3); padding:14px 16px}
.dcard .dt{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px}
.dcard .dt .gd{width:7px;height:7px;border-radius:50%; background:var(--green)}
.dcard .dbig{font-family:var(--display); font-weight:800; font-size:1.55rem; color:var(--ink); line-height:1; margin-top:6px}
.dcard .dbig em{font-style:normal; font-size:.9rem; color:var(--green-deep); font-weight:700}
.dcard .bars{display:flex; align-items:flex-end; gap:5px; height:34px; margin-top:9px}
.dcard .bars i{flex:1; border-radius:3px 3px 0 0; background:#cfe1f3}
.dcard .bars i:nth-child(2){background:#a8cdee}.dcard .bars i:nth-child(3){background:#6ea7e6}.dcard .bars i:nth-child(4){background:var(--royal)}.dcard .bars i:nth-child(5){background:var(--green)}

/* ---- Stage pill (path node label) ---- */
.stage-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 9px; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-2); font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--ink); white-space:nowrap}
.stage-pill .sp-dot{width:18px;height:18px;border-radius:50%; background:var(--grad); display:grid; place-items:center; flex:0 0 18px}
.stage-pill .sp-dot::after{content:""; width:6px;height:6px;border-radius:50%; background:#fff}
.stage-pill.is-win{border-color:rgba(134,187,36,.5); background:linear-gradient(0deg,rgba(134,187,36,.08),#fff)}
.stage-pill.is-win .sp-dot{background:var(--green)}

/* ---- Case-preview card (portfolio) ---- */
.case2{display:flex; flex-direction:column; padding:0; overflow:hidden}
.case2 .c2-top{position:relative; aspect-ratio:16/11; padding:22px 22px 0; display:flex; align-items:flex-end; overflow:hidden}
.case2 .c2-top .site-mini{width:100%; transform:translateY(10px); transition:transform .3s ease}
.case2:hover .c2-top .site-mini{transform:translateY(2px)}
.case2 .c2-badge{position:absolute; top:14px; left:14px; z-index:3}
.case2 .c2-slot{position:absolute; top:14px; right:14px; z-index:3; font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:rgba(255,255,255,.9);
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.3); padding:3px 8px; border-radius:6px; display:flex; align-items:center; gap:5px}
.case2 .c2-body{padding:20px 22px 24px}
.case2 .c2-cat{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--blue)}
.case2 h3{font-size:1.18rem; margin:8px 0 12px}
.case2 .c2-result{display:flex; align-items:center; gap:9px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.case2 .c2-result .rc{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; color:var(--green-deep)}
.case2 .c2-result .rc svg{width:16px;height:16px}

/* ---- Blog category cover ---- */
.cover{position:relative; aspect-ratio:16/9; overflow:hidden; display:grid; place-items:center}
.cover .cv-ico{position:relative; z-index:2; width:62px;height:62px;border-radius:16px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(4px)}
.cover .cv-ico svg{width:30px;height:30px}
.cover .pcat{position:absolute; top:14px; left:14px; z-index:3}
.cover .cv-mini{position:absolute; right:-30px; bottom:-26px; z-index:1; opacity:.9}
.cover.cat-proces{background:linear-gradient(150deg,#1a2a55,#2f6fd0)}
.cover.cat-weby{background:linear-gradient(150deg,#16213f,#1699BF)}
.cover.cat-strategie{background:linear-gradient(150deg,#1c2f63,#3f8fe0)}
.cover.cat-funnely{background:linear-gradient(150deg,#173a5e,#1f8a6b)}
.cover::after{content:""; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:26px 26px;
  mask-image:radial-gradient(ellipse 80% 90% at 80% 20%,#000,transparent)}

/* ---- Journey timeline (process) ---- */
.journey{position:relative; margin-top:54px}
.journey-line{position:absolute; left:0; right:0; top:34px; height:3px; z-index:0;
  background:linear-gradient(90deg,var(--teal),var(--royal) 60%,var(--green)); border-radius:99px; opacity:.9}
.journey-line::after{content:""; position:absolute; right:-2px; top:-6px; border-left:11px solid var(--green); border-top:8px solid transparent; border-bottom:8px solid transparent}
.journey-row{position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.jstep{text-align:center; padding:0 6px}
.jnode{width:70px;height:70px;border-radius:50%; margin:0 auto; display:grid; place-items:center; background:#fff; border:3px solid var(--line);
  font-family:var(--display); font-weight:800; font-size:1.25rem; color:var(--blue); position:relative; transition:transform .25s, border-color .25s, box-shadow .25s}
.jstep:hover .jnode{transform:translateY(-4px); border-color:var(--royal); box-shadow:var(--sh-blue)}
.jstep:last-child .jnode{border-color:var(--green); color:var(--green-deep); background:#fff}
.jstep .jh{font-family:var(--display); font-weight:700; font-size:1.04rem; margin:18px 0 7px}
.jstep .jp{font-size:14px; color:var(--ink-2); margin:0}
.jstep .jtag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin-bottom:10px}
@media(max-width:900px){
  .journey-line{left:35px; top:0; bottom:0; right:auto; width:3px; height:auto; background:linear-gradient(180deg,var(--teal),var(--royal) 60%,var(--green))}
  .journey-line::after{right:auto; left:-6px; bottom:-2px; top:auto; border-left:8px solid transparent; border-right:8px solid transparent; border-top:11px solid var(--green); border-bottom:0}
  .journey-row{grid-template-columns:1fr; gap:26px}
  .jstep{display:grid; grid-template-columns:70px minmax(0,1fr); gap:0 18px; padding:0; text-align:left; align-items:start}
  .jstep .jnode{grid-column:1; grid-row:1 / span 3}
  .jstep .jtag{grid-column:2; grid-row:1; margin:4px 0 8px}
  .jstep .jh{grid-column:2; grid-row:2; margin:0 0 7px}
  .jstep .jp{grid-column:2; grid-row:3}
}

/* ---- Pillar relationship hint (service focus) ---- */
.pillars-rel{display:flex; align-items:center; justify-content:center; gap:14px; margin:30px auto 0; flex-wrap:wrap; color:var(--muted); font-weight:600; font-size:14px}
.pillars-rel .pr-node{display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-family:var(--display); font-weight:700}
.pillars-rel .pr-node .d{width:9px;height:9px;border-radius:50%; background:var(--royal)}
.pillars-rel .pr-node.win .d{background:var(--green)}
.pillars-rel svg{width:18px;height:18px; color:var(--line-strong)}

/* ============================================================
   Trust strip (premium client bar)
   ============================================================ */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft)}
.trust .wrap{padding-block:26px}
.trust-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:20px}
.trust-head .tl{display:flex; flex-direction:column; gap:3px}
.trust-head .tl b{font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-.01em}
.trust-head .tl span{font-size:13.5px; color:var(--muted)}
.trust-head .tr{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-2); max-width:30ch; text-align:right}
.trust-head .tr svg{width:17px;height:17px; flex:0 0 17px; color:var(--green-deep)}
.trust-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.tclient{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; box-shadow:var(--sh-1); transition:transform .2s, box-shadow .2s, border-color .2s}
.tclient:hover{transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line-strong)}
.tclient .mono{flex:0 0 38px; width:38px; height:38px; border-radius:9px; background:var(--grad); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:13.5px; letter-spacing:-.02em}
.tclient .tcn{font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink); line-height:1.2}
.tclient .tci{font-size:12px; color:var(--muted); margin-top:2px}
@media(max-width:1040px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){
  .trust{overflow:hidden}
  .trust-head .tr{display:none}
  .trust-grid{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(210px,82vw); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; margin-inline:-24px; padding-inline:24px; max-width:100vw}
  .trust-grid{scrollbar-width:none}
  .trust-grid::-webkit-scrollbar{display:none}
  .tclient{scroll-snap-align:start}
}

/* ============================================================
   V3 — Awareness-stage sections
   Diagnostic cards, cost-of-inaction path, mechanism map, FAQ.
   ============================================================ */
:root{ --warn:#c2724e; }

/* problem / symptom diagnostic cards */
.diag-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:44px}
.diag{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-1); transition:transform .2s,box-shadow .2s,border-color .2s}
.diag:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-strong)}
.diag .di{width:44px;height:44px;border-radius:11px; background:var(--bg-soft-2); color:var(--blue); display:grid;place-items:center; margin-bottom:16px}
.diag .di svg{width:22px;height:22px}
.diag p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.5}
@media(max-width:1040px){.diag-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.diag-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.diag-grid{grid-template-columns:1fr}}

/* cost-of-inaction — broken conversion path */
.costpath{margin-top:46px; display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap}
.cstage{display:inline-flex; flex-direction:column; align-items:center; gap:10px; text-align:center; width:104px}
.cstage .cn{width:58px;height:58px;border-radius:50%; background:#fff; border:2px solid var(--line-strong); display:grid;place-items:center; color:var(--blue)}
.cstage.win .cn{border-color:var(--green); color:var(--green-deep); background:linear-gradient(0deg,rgba(134,187,36,.1),#fff)}
.cstage .cn svg{width:24px;height:24px}
.cstage .cl{font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--ink)}
.clink{flex:0 0 auto; width:clamp(34px,6vw,80px); height:2px; position:relative; margin:29px 4px 0}
.clink.ok{background:var(--line-strong)}
.clink.weak{background:transparent; border-top:2px dashed var(--warn)}
.clink.weak::after{content:"častý únik"; position:absolute; top:9px; left:50%; transform:translateX(-50%); font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--warn); white-space:nowrap}
@media(max-width:760px){
  .costpath{flex-direction:column; align-items:flex-start; padding-left:8px}
  .cstage{flex-direction:row; width:auto; gap:14px; text-align:left}
  .clink{width:2px; height:30px; margin:4px 0 4px 28px}
  .clink.ok{background:var(--line-strong)}
  .clink.weak{border-top:0; border-left:2px dashed var(--warn)}
  .clink.weak::after{top:50%; left:12px; transform:translateY(-50%)}
}

/* mechanism / solution framework */
.mech{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px}
.mstep{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-1); position:relative; transition:transform .2s,box-shadow .2s,border-color .2s}
.mstep:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-strong)}
.mstep .mn{font-family:var(--display); font-weight:800; font-size:13px; color:var(--teal); letter-spacing:.08em}
.mstep h3{font-size:1.08rem; margin:9px 0 6px}
.mstep p{margin:0; font-size:14px; color:var(--ink-2)}
.mstep .mi{position:absolute; top:22px; right:22px; width:36px;height:36px;border-radius:10px; background:var(--grad-soft); color:var(--blue); display:grid;place-items:center}
.mstep .mi svg{width:19px;height:19px}
.mstep.win{border-color:rgba(134,187,36,.4)}
.mstep.win .mn{color:var(--green-deep)}
.mstep.win .mi{background:rgba(134,187,36,.13); color:var(--green-deep)}
@media(max-width:860px){.mech{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mech{grid-template-columns:1fr}}

/* FAQ accordion (shared) */
.faq-wrap{max-width:820px; margin:44px auto 0}
.faq-item{border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:14px; background:#fff; overflow:hidden; transition:box-shadow .2s,border-color .2s}
.faq-item.open{box-shadow:var(--sh-2); border-color:var(--line-strong)}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:18px; width:100%; text-align:left; padding:22px 24px; background:none; border:0; cursor:pointer; font-family:var(--display); font-weight:600; font-size:1.08rem; color:var(--ink)}
.faq-q .pl{flex:0 0 24px; width:24px;height:24px; border-radius:50%; background:var(--grad-soft); color:var(--blue); display:grid; place-items:center; transition:transform .25s}
.faq-q .pl svg{width:14px;height:14px}
.faq-item.open .faq-q .pl{transform:rotate(45deg); background:var(--royal); color:#fff}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:340px}
.faq-a p{margin:0; padding:0 24px 24px; color:var(--ink-2)}

/* ---- Scroll to top button ---- */
.scroll-top{
  position:fixed;
  right:clamp(16px,2.3vw,34px);
  bottom:clamp(16px,2.3vw,34px);
  z-index:900;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:var(--grad);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 16px 34px rgba(31,95,204,.25);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.96);
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease, box-shadow .2s ease;
}
.scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.scroll-top:hover{box-shadow:0 18px 42px rgba(31,95,204,.34); transform:translateY(-2px) scale(1)}
.scroll-top:focus-visible{outline:3px solid rgba(134,187,36,.42); outline-offset:4px}
.scroll-top svg{width:22px;height:22px}
.scroll-top span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
@media(max-width:640px){
  .scroll-top{
    width:44px;
    height:44px;
    right:18px;
    bottom:18px;
    border-radius:13px;
  }
}
@media (prefers-reduced-motion:reduce){
  .scroll-top{transition:none}
  .scroll-top:hover{transform:none}
}