@charset "UTF-8";

/* ============================================================
   TVORBA WEB STRÁNOK - layout podstránky
   /tvorba-web-stranok
   Farby: #000 / #fff / #D6F74C (limetka) / #E0E0E0 (linky)
   Pravidlo: žiadna sekcia nemá vlastné pozadie (okrem čiernej
   money-karty). Grafy sa kreslia kódom, viewBox = skutočné px.
   ============================================================ */

.wst-page {
    --lime: #D6F74C;
    --line: #E0E0E0;
    --ghost: #F5F5F5;
    --muted: #9A9A9A;
    display: block;
    width: 100%;
    color: #000;
}

.wst-page section {display:block;width:100%;}

/* ---------- spoločné ---------- */

.wst-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    line-height: 1;
}

.wst-pulse {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--lime);
    box-shadow: 0 0 0 0 rgba(214,247,76,0.9);
    animation: wstPulse 2.2s ease-out infinite;
}

@keyframes wstPulse {
    0%   {box-shadow:0 0 0 0 rgba(214,247,76,0.9);}
    70%  {box-shadow:0 0 0 14px rgba(214,247,76,0);}
    100% {box-shadow:0 0 0 0 rgba(214,247,76,0);}
}

.wst-h2 {
    font-size: clamp(38px, 6vw, 74px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -1.5px;
}

.wst-h2 em {font-style:normal;font-weight:300;}

.wst-lead {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.3px;
}

.wst-mark {
    position: relative;
    display: inline;
    background-image: linear-gradient(var(--lime), var(--lime));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 0% 42%;
    transition: background-size 0.9s cubic-bezier(.22,1,.36,1) 0.25s;
}

.is-in .wst-mark {background-size:100% 42%;}

/* ---------- tlačidlá ---------- */

.wst-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    z-index: 0;
    padding: 20px 32px;
    border: 2px solid #000;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #000;
    background-color: var(--lime);
    transition: transform 0.45s cubic-bezier(.22,1,.36,1), color 0.5s ease;
}

.wst-btn::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background-color: #000;
    z-index: -1;
    transition: width 0.55s cubic-bezier(.22,1,.36,1);
}

.wst-btn:hover::before {width:100%;}
.wst-btn:hover {color:var(--lime);transform:translateY(-3px);}
.wst-btn svg {width:18px;height:18px;flex-shrink:0;stroke:currentColor;transition:transform 0.45s ease;}
.wst-btn:hover svg {transform:translateX(4px);}

.wst-btn-ghost {background-color:transparent;}
.wst-btn-ghost:hover {color:var(--lime);}

/* ---------- odhaľovanie pri scrollovaní ---------- */

.wst-reveal {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--d, 0s);
}

.wst-reveal.is-in {opacity:1;transform:none;}

/* ============================================================
   HERO
   horný odstup drží hero pod plávajúcim .hot-banner (fixed),
   presnú hodnotu dopočítava fitHero() v JS
   ============================================================ */

.wst-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(200px, 17vh, 240px) 0 clamp(60px, 9vh, 110px) 0;
}

/* ---------- telefón v pozadí hero ---------- */

.wst-phone {
    position: absolute;
    top: 50%;
    right: -20px;
    width: clamp(230px, 30vw, 400px);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: -1;
}

.wst-phone svg {display:block;width:100%;height:auto;}

/* obežná dráha "signálu" okolo telefónu */
.wst-phone-orbit {transform-origin:100px 100px;animation:wstSpin 26s linear infinite;}

/* obrys telefónu a appky sa kreslia ťahom */
.wst-phone-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: wstDraw 2.4s cubic-bezier(.22,1,.36,1) forwards;
}

.wst-phone-body {animation-delay:0s;}
.wst-phone-screen {animation-delay:0.4s;}

/* dlaždice appiek - vyskakujú postupne */
.wst-tile {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: wstPop 0.7s cubic-bezier(.34,1.56,.64,1) forwards;
}

.wst-tile-1 {animation-delay:1.15s;}
.wst-tile-2 {animation-delay:1.28s;}
.wst-tile-3 {animation-delay:1.41s;}
.wst-tile-4 {animation-delay:1.54s;}
.wst-tile-5 {animation-delay:1.67s;}
.wst-tile-6 {animation-delay:1.80s;}

.wst-tile-hero {fill:var(--lime);}

/* notifikačný odznak */
.wst-badge {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: wstPop 0.8s cubic-bezier(.34,1.56,.64,1) 2.1s forwards;
}

@keyframes wstDraw {to {stroke-dashoffset:0;}}
@keyframes wstSpin {to {transform:rotate(360deg);}}
@keyframes wstPop {from {opacity:0;transform:scale(0);} to {opacity:1;transform:scale(1);}}

.wst-hero-eyebrow {margin-bottom:34px;opacity:0;animation:wstUp 1s cubic-bezier(.22,1,.36,1) 0.15s forwards;}

.wst-title {
    font-size: clamp(44px, 8.2vw, 118px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.wst-title span {display:block;overflow:hidden;padding-bottom:0.06em;}
.wst-title span > em {display:block;font-style:normal;transform:translateY(105%);animation:wstMask 1.15s cubic-bezier(.22,1,.36,1) forwards;}
.wst-title span:nth-child(1) > em {animation-delay:0.25s;}
.wst-title span:nth-child(2) > em {animation-delay:0.38s;}
.wst-title span:nth-child(3) > em {animation-delay:0.51s;}

@keyframes wstMask {to {transform:translateY(0);}}
@keyframes wstUp {from {opacity:0;transform:translateY(20px);} to {opacity:1;transform:none;}}

.wst-underline {display:block;width:min(420px,74%);margin-top:2px;}
.wst-underline path {
    fill: none;
    stroke: var(--lime);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: wstDraw 1.3s cubic-bezier(.22,1,.36,1) 1.1s forwards;
}

.wst-hero-sub {
    max-width: 640px;
    margin-top: 38px;
    font-size: clamp(19px, 2.1vw, 27px);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.2px;
    opacity: 0;
    animation: wstUp 1s cubic-bezier(.22,1,.36,1) 1.15s forwards;
}

.wst-rot {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    vertical-align: bottom;
    font-weight: 700;
    white-space: nowrap;
}

.wst-rot span {display:inline-block;}
.wst-rot .wst-rot-out {animation:wstRotOut 0.4s cubic-bezier(.55,0,.65,.35) forwards;}
.wst-rot .wst-rot-in {animation:wstRotIn 0.55s cubic-bezier(.22,1,.36,1) forwards;}

@keyframes wstRotOut {to {opacity:0;transform:translateY(-70%) skewY(-4deg);}}
@keyframes wstRotIn {from {opacity:0;transform:translateY(70%) skewY(4deg);} to {opacity:1;transform:none;}}

.wst-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 50px;
    opacity: 0;
    animation: wstUp 1s cubic-bezier(.22,1,.36,1) 1.35s forwards;
}

.wst-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 90px;
    border-top: 1px solid var(--line);
    opacity: 0;
    animation: wstUp 1s cubic-bezier(.22,1,.36,1) 1.55s forwards;
}

.wst-stat {
    flex: 1 1 200px;
    padding: 34px 30px 0 0;
    position: relative;
}

.wst-stat::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 46px;
    height: 3px;
    background-color: var(--lime);
}

.wst-stat strong {display:block;font-size:clamp(32px,3.4vw,46px);font-weight:700;line-height:1;letter-spacing:-1px;}
.wst-stat span {display:block;margin-top:12px;font-size:16px;font-weight:300;line-height:1.5;letter-spacing:0.4px;}

/* ============================================================
   BEŽIACI PÁS
   ============================================================ */

.wst-marquee {
    margin: clamp(60px, 8vw, 110px) 0;
    padding: 26px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.wst-marquee-track {
    display: flex;
    width: max-content;
    animation: wstMarquee 40s linear infinite;
}

.wst-marquee:hover .wst-marquee-track {animation-play-state:paused;}

.wst-marquee-track span {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-right: 26px;
    font-size: clamp(24px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.wst-marquee-track span:nth-child(2n) {
    color: transparent;
    -webkit-text-stroke: 1px #000;
}

.wst-marquee-track i {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--lime);
    -webkit-text-stroke: 0;
}

@keyframes wstMarquee {to {transform:translateX(-50%);}}

/* ============================================================
   SEKCIE - hlavička
   ============================================================ */

.wst-sec {margin:clamp(90px, 13vw, 190px) 0;}

.wst-sec-head {margin-bottom:clamp(50px, 6vw, 90px);}
.wst-sec-head .wst-eyebrow {margin-bottom:22px;}
.wst-sec-head p {margin-top:24px;max-width:660px;}

/* ============================================================
   ČO ZÍSKATE - sticky stĺpec + zoznam
   ============================================================ */

.wst-split {display:flex;gap:8%;align-items:flex-start;}
.wst-split-left {flex:0 0 45%;position:sticky;top:60px;}
.wst-split-right {flex:1 1 auto;min-width:0;}

.wst-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 34px;
    padding: 46px 0;
    border-top: 1px solid var(--line);
}

.wst-item:last-child {border-bottom:1px solid var(--line);}

.wst-item b {
    grid-row: 1 / 3;
    font-size: clamp(46px, 5vw, 68px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -2px;
    color: transparent;
    -webkit-text-stroke: 1.5px #000;
    transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}

.wst-item:hover b {color:var(--lime);-webkit-text-stroke-color:#000;}

.wst-item h3 {font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.25;letter-spacing:-0.4px;}
.wst-item p {margin-top:16px;font-size:16px;font-weight:300;line-height:1.75;letter-spacing:0.3px;}

.wst-inline-link {
    position: relative;
    font-weight: 700;
    color: #000;
    box-shadow: inset 0 -3px 0 var(--lime);
    transition: box-shadow 0.4s cubic-bezier(.22,1,.36,1);
}

.wst-inline-link:hover {box-shadow:inset 0 -22px 0 var(--lime);}

/* ============================================================
   ČASOVÁ OS - ako vzniká aplikácia
   ============================================================ */

.wst-timeline {position:relative;padding-left:clamp(40px, 6vw, 90px);}

.wst-tl-rail {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: clamp(9px, 1.4vw, 21px);
    width: 2px;
    background-color: var(--line);
}

.wst-tl-fill {
    position: absolute;
    inset: 0;
    background-color: #000;
    transform: scaleY(0);
    transform-origin: top;
}

.wst-step {position:relative;padding-bottom:clamp(46px, 5vw, 74px);}
.wst-step:last-child {padding-bottom:0;}

.wst-step::before {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(clamp(40px, 6vw, 90px) * -1 + clamp(9px, 1.4vw, 21px) - 7px);
    width: 16px;
    height: 16px;
    border: 2px solid #000;
    border-radius: 50%;
    background-color: #fff;
    transition: background-color 0.5s ease, transform 0.5s cubic-bezier(.22,1,.36,1);
}

.wst-step.is-in::before {background-color:var(--lime);transform:scale(1.25);}

.wst-step strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.wst-step h3 {font-size:clamp(24px,2.8vw,36px);font-weight:700;line-height:1.2;letter-spacing:-0.6px;}
.wst-step p {margin-top:14px;max-width:640px;font-size:16px;font-weight:300;line-height:1.75;letter-spacing:0.3px;}

/* ============================================================
   FUNKCIE - karty
   ============================================================ */

.wst-features {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.wst-feature {
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: flex;
    flex-direction: column;
    min-height: 268px;
    padding: 32px 30px 34px 30px;
    border: 2px solid #000;
    border-radius: 12px;
    transition: transform 0.55s cubic-bezier(.22,1,.36,1);
}

.wst-feature::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background-color: var(--lime);
    z-index: -1;
    transition: height 0.55s cubic-bezier(.22,1,.36,1);
}

.wst-feature:hover::before {height:100%;}
.wst-feature:hover {transform:translateY(-8px);}

.wst-feature-no {
    position: absolute;
    top: 4px;
    right: 20px;
    font-size: 78px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -4px;
    color: transparent;
    -webkit-text-stroke: 1.5px #C6C6C6;
    transition: -webkit-text-stroke-color 0.5s ease, transform 0.55s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

.wst-feature:hover .wst-feature-no {-webkit-text-stroke-color:#000;transform:scale(1.05);}

.wst-feature-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 2px solid #000;
    border-radius: 50%;
    transition: background-color 0.45s ease, transform 0.55s cubic-bezier(.22,1,.36,1);
}

.wst-feature-ico svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.45s ease;
}

.wst-feature:hover .wst-feature-ico {background-color:#000;transform:rotate(-6deg);}
.wst-feature:hover .wst-feature-ico svg {stroke:var(--lime);}

.wst-feature strong {display:block;margin-top:auto;padding-top:30px;font-size:clamp(21px,2.1vw,26px);font-weight:700;line-height:1.16;letter-spacing:-0.5px;}
.wst-feature em {display:block;margin-top:11px;font-style:normal;font-size:15px;font-weight:300;line-height:1.6;}

/* ============================================================
   PRÍBEH / prečo natívne
   ============================================================ */

.wst-story {max-width:820px;}
.wst-story p {margin-top:30px;font-size:clamp(18px,1.8vw,23px);font-weight:300;line-height:1.72;letter-spacing:0.3px;}
.wst-story p:first-child {margin-top:0;}
.wst-story h3 {margin-top:70px;font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.2;letter-spacing:-0.8px;}
.wst-story h3 + p {margin-top:22px;}

.wst-quote {
    margin: 70px 0 0 0;
    padding-left: 34px;
    border-left: 4px solid var(--lime);
    font-size: clamp(22px,2.6vw,32px);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -0.2px;
}

/* ============================================================
   DÁTOVÉ LABORATÓRIUM - kalkulačka + grafy (#kalkulacka)
   ============================================================ */

.wst-lab .wst-sec-head p.wst-lead {margin-top:26px;}

.wst-lab-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 46px;
    padding: 34px 0 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 46px;
}

.wst-ctl-label {
    display: block;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.wst-chips {display:flex;flex-wrap:wrap;gap:10px;}

.wst-chip {
    position: relative;
    overflow: hidden;
    z-index: 0;
    padding: 13px 20px;
    border: 2px solid #000;
    border-radius: 100px;
    background-color: #fff;
    color: #000;
    cursor: pointer;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1;
    text-transform: uppercase;
    transition: color 0.4s ease, background-color 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}

.wst-chip::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background-color: var(--lime);
    z-index: -1;
    transition: height 0.4s cubic-bezier(.22,1,.36,1);
}

.wst-chip:hover::before {height:100%;}
.wst-chip:hover {transform:translateY(-2px);}
.wst-chip[aria-pressed="true"] {background-color:#000;color:var(--lime);}
.wst-chip[aria-pressed="true"]::before {height:0;}

/* ---------- KPI pás ---------- */

.wst-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    margin-bottom: clamp(40px, 5vw, 60px);
}

.wst-kpi {position:relative;padding:32px 26px 0 0;}

.wst-kpi::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--lime);
}

.wst-kpi-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wst-kpi strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
    font-size: clamp(25px, 2.7vw, 37px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.4px;
    font-variant-numeric: tabular-nums;
}

.wst-kpi strong i {font-style:normal;color:var(--muted);}
.wst-kpi strong em {
    font-style: normal;
    background-image: linear-gradient(var(--lime), var(--lime));
    background-repeat: no-repeat;
    background-position: 0 86%;
    background-size: 100% 40%;
}

.wst-kpi strong svg {width:20px;height:20px;flex-shrink:0;fill:none;stroke:#000;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.wst-kpi-note {display:block;margin-top:13px;font-size:14px;font-weight:300;line-height:1.5;letter-spacing:0.3px;}

/* ---------- karta grafu ---------- */

.wst-card {
    padding: clamp(24px, 3vw, 38px);
    border: 2px solid #000;
    border-radius: 16px;
    margin-bottom: 20px;
}

.wst-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 30px;
    margin-bottom: 26px;
}

.wst-card-head .wst-eyebrow {margin-bottom:14px;color:var(--muted);}
.wst-card-head h3 {font-size:clamp(23px,2.5vw,32px);font-weight:700;line-height:1.15;letter-spacing:-0.7px;}
.wst-card-sub {max-width:360px;font-size:14.5px;font-weight:300;line-height:1.6;letter-spacing:0.3px;}

.wst-legend {display:flex;flex-wrap:wrap;gap:10px 22px;}
.wst-lg {display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;}
.wst-lg::before {content:"";display:block;width:22px;height:4px;border-radius:2px;background-color:var(--lime);}
.wst-lg-app::before {background-color:#000;}
.wst-lg-web::before {height:0;border-top:3px dashed #B4B4B4;background:none;border-radius:0;}

.wst-chart {position:relative;width:100%;}
.wst-chart svg {display:block;width:100%;overflow:visible;}
.wst-chart-scrub {cursor:crosshair;touch-action:pan-y;}

.wst-chart svg text {font-family:'Chakra Petch', sans-serif;}
.wst-c-ax {fill:var(--muted);font-size:11px;font-weight:700;letter-spacing:1.1px;}
.wst-c-band {fill:#8E8E8E;font-size:10.5px;font-weight:700;letter-spacing:1.5px;}
.wst-c-goal {fill:#000;font-size:17px;font-weight:700;letter-spacing:-0.3px;}

.wst-chart-foot {
    margin-top: 22px;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.3px;
}

.wst-chart-foot b {font-weight:700;}

/* bublina nad grafom retencie */
.wst-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    min-width: 172px;
    padding: 14px 16px;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -108%);
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.wst-tip.is-on {opacity:1;visibility:visible;}
.wst-tip u {display:block;margin-bottom:9px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;}
.wst-tip s {display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:14px;text-decoration:none;font-weight:300;}
.wst-tip s + s {margin-top:5px;}
.wst-tip s b {font-weight:700;font-variant-numeric:tabular-nums;}
.wst-tip s.wst-tip-web {color:var(--muted);}
.wst-tip s.wst-tip-gain {margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}
.wst-tip s.wst-tip-gain b {padding:1px 7px;background-color:var(--lime);border-radius:4px;}

/* ---------- graf dosahu: donut + rozpis ---------- */

.wst-reach {display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,54px);align-items:center;}
.wst-donut {position:relative;width:clamp(180px,26vw,230px);flex-shrink:0;}
.wst-donut svg {display:block;width:100%;height:auto;overflow:visible;}
.wst-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.wst-donut-center b {font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;}
.wst-donut-center span {margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);max-width:120px;}
.wst-donut-seg {transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1), stroke-width 0.4s ease;}

.wst-reach-rows {min-width:0;}
.wst-reach-row {padding:20px 0;border-bottom:1px solid var(--line);}
.wst-reach-row:first-child {border-top:1px solid var(--line);}
.wst-reach-top {display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.wst-reach-name {display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:0.2px;}
.wst-reach-name i {display:block;width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.wst-reach-name i.is-ios {background-color:#000;}
.wst-reach-name i.is-android {background-color:var(--lime);box-shadow:0 0 0 1.5px #000 inset;}
.wst-reach-val {font-size:20px;font-weight:700;letter-spacing:-0.5px;font-variant-numeric:tabular-nums;}
.wst-reach-desc {margin-top:8px;font-size:14px;font-weight:300;line-height:1.55;color:#444;}
.wst-reach-row.is-dim {opacity:0.4;}

/* ---------- graf kanálov: pruhy ---------- */

.wst-bars {display:flex;flex-direction:column;gap:26px;padding:4px 0 6px 0;}
.wst-bar-row {display:grid;grid-template-columns:1fr;gap:9px;}
.wst-bar-top {display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.wst-bar-name {font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;}
.wst-bar-name small {display:block;margin-top:5px;font-size:12px;font-weight:300;letter-spacing:0;text-transform:none;color:var(--muted);}
.wst-bar-val {font-size:22px;font-weight:700;letter-spacing:-0.5px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wst-bar-track {position:relative;height:16px;border-radius:8px;background-color:var(--ghost);overflow:hidden;}
.wst-bar-fill {position:absolute;inset:0 auto 0 0;width:0;border-radius:8px;background-color:#B4B4B4;transition:width 1.2s cubic-bezier(.22,1,.36,1);}
.wst-bar-row.is-hero .wst-bar-fill {background-color:var(--lime);box-shadow:0 0 0 2px #000 inset;}
.wst-bar-row.is-hero .wst-bar-name {color:#000;}

/* ---------- čierna karta so sumou ---------- */

.wst-money {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: clamp(38px, 5vw, 66px) clamp(24px, 3vw, 38px);
    margin-top: 20px;
}

.wst-money h3 {margin-top:22px;font-size:clamp(26px,3vw,38px);font-weight:300;line-height:1.15;letter-spacing:-0.8px;}

.wst-money-amount {
    display: block;
    margin: 22px 0 8px 0;
    font-size: clamp(52px, 10vw, 132px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -5px;
    color: var(--lime);
    font-variant-numeric: tabular-nums;
}

.wst-money-sub {display:block;font-size:clamp(16px,1.8vw,21px);font-weight:300;letter-spacing:0.3px;}

.wst-slider {position:relative;width:min(760px,100%);margin:0 auto;}
.wst-money-slider {margin-top:46px;}
.wst-money-slider label {display:block;margin-bottom:20px;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;}
.wst-money-slider label b {color:var(--lime);font-variant-numeric:tabular-nums;}

.wst-slider input[type=range] {
    --p: 0%;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 34px;
    background: transparent;
    cursor: pointer;
}

.wst-slider input[type=range]::-webkit-slider-runnable-track {height:4px;border-radius:2px;background-image:linear-gradient(to right, var(--lime) var(--p), #3A3A3A var(--p));}
.wst-slider input[type=range]::-moz-range-track {height:4px;border-radius:2px;background-image:linear-gradient(to right, var(--lime) var(--p), #3A3A3A var(--p));}

.wst-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 34px;
    margin-top: -15px;
    border: 3px solid var(--lime);
    border-radius: 50%;
    background-color: #000;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}

.wst-slider input[type=range]::-moz-range-thumb {width:30px;height:30px;border:3px solid var(--lime);border-radius:50%;background-color:#000;}
.wst-slider input[type=range]:hover::-webkit-slider-thumb,
.wst-slider input[type=range]:active::-webkit-slider-thumb {transform:scale(1.18);}

.wst-slider-legend {display:flex;justify-content:space-between;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);}

.wst-money-note {max-width:540px;margin:34px auto 0 auto;font-size:14px;font-weight:300;line-height:1.7;letter-spacing:0.3px;color:var(--muted);}

/* ---------- metodika ---------- */

.wst-method {margin-top:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.wst-method summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(16px,1.7vw,19px);
    font-weight: 700;
    letter-spacing: -0.2px;
}

.wst-method summary::-webkit-details-marker {display:none;}

.wst-method summary::before {
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 2px solid #000;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}

.wst-method summary:hover::before {background-color:var(--lime);}
.wst-method[open] summary::before {content:"–";background-color:var(--lime);transform:rotate(180deg);}

.wst-method-body {max-width:820px;padding-bottom:34px;}
.wst-method-body p {margin-top:20px;font-size:16px;font-weight:300;line-height:1.75;letter-spacing:0.3px;}
.wst-method-body p:first-child {margin-top:0;}
.wst-method-body ol {margin:24px 0 0 0;padding:0;list-style:none;counter-reset:appm;}

.wst-method-body li {
    position: relative;
    padding: 0 0 0 46px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.3px;
    counter-increment: appm;
}

.wst-method-body li::before {
    content: "0" counter(appm);
    position: absolute;
    top: 1px;
    left: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #B4B4B4;
}

.wst-method-formula {
    padding: 20px 22px;
    border-left: 4px solid var(--lime);
    background-color: var(--ghost);
    font-size: 14.5px !important;
    line-height: 1.8 !important;
}

.wst-method-formula span {font-weight:700;}

/* ============================================================
   PORTFÓLIO - reálne aplikácie
   ============================================================ */

.wst-showcase {--acc:#3FA9E0;display:grid;gap:clamp(30px, 4vw, 46px);}

.wst-show-stage {
    display: grid;
    grid-template-columns: clamp(230px, 30%, 290px) 1fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.wst-show-device {position:relative;display:flex;justify-content:center;transition:opacity 0.24s ease, transform 0.24s ease;}
.wst-show-phone {position:relative;z-index:1;width:100%;max-width:280px;height:auto;display:block;filter:drop-shadow(0 26px 50px rgba(0,0,0,0.14));}

.wst-show-glow {
    position: absolute;
    inset: -8% -12%;
    z-index: 0;
    background: radial-gradient(circle at 50% 44%, var(--acc) 0%, transparent 62%);
    opacity: 0.32;
    filter: blur(16px);
    transition: background 0.5s ease;
    pointer-events: none;
}

.wst-show-phone text {font-family:'Chakra Petch', sans-serif;}
.wst-scr-name {font-size:20px;font-weight:700;letter-spacing:-0.4px;}
.wst-scr-sub {font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;}
.wst-scr-cta {font-size:15px;font-weight:700;letter-spacing:0.4px;}

.wst-scr-glyph {animation:wstScrGlyph 0.6s ease 0.12s both;}
.wst-scr-row {animation:wstScrRow 0.5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 0.09s + 0.16s);}
@keyframes wstScrGlyph {from {opacity:0;} to {opacity:1;}}
@keyframes wstScrRow {from {opacity:0;transform:translateX(16px);} to {opacity:1;transform:translateX(0);}}

.wst-show-info {min-width:0;transition:opacity 0.24s ease, transform 0.24s ease;}
.wst-show-stage.is-out .wst-show-device,
.wst-show-stage.is-out .wst-show-info {opacity:0;transform:translateY(14px);}

.wst-show-count {font-size:14px;font-weight:700;letter-spacing:1px;color:var(--muted);font-variant-numeric:tabular-nums;}
.wst-show-count b {font-size:20px;color:#000;}
.wst-show-count i {font-style:normal;}

.wst-show-plat {display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.wst-show-plat span {display:inline-flex;padding:6px 14px;border:1.5px solid #000;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;}

.wst-show-name {margin-top:18px;font-size:clamp(30px,4vw,48px);font-weight:700;line-height:1.05;letter-spacing:-1.2px;}
.wst-show-tag {margin-top:11px;font-size:13px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);}
.wst-show-desc {margin-top:22px;max-width:520px;font-size:16px;font-weight:300;line-height:1.72;letter-spacing:0.3px;}

.wst-show-links {display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.wst-show-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    z-index: 0;
    padding: 13px 22px;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #000;
    transition: color 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}
.wst-show-links a::before {content:"";position:absolute;inset:0 auto 0 0;width:0;background-color:#000;z-index:-1;transition:width 0.45s cubic-bezier(.22,1,.36,1);}
.wst-show-links a:hover::before {width:100%;}
.wst-show-links a:hover {color:var(--lime);transform:translateY(-2px);}
.wst-show-links a svg {width:15px;height:15px;flex-shrink:0;stroke:currentColor;}

.wst-show-progress {position:relative;margin-top:34px;height:3px;border-radius:2px;background-color:var(--line);overflow:hidden;max-width:520px;}
.wst-show-progress i {display:block;height:100%;width:0;background-color:#000;}
.wst-show-progress i.go {animation:wstShowBar 6s linear forwards;}
.wst-showcase:hover .wst-show-progress i.go {animation-play-state:paused;}
@keyframes wstShowBar {from {width:0;} to {width:100%;}}

/* dlaždice appiek */
.wst-show-tabs {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}

.wst-show-tab {
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 20px;
    border: 2px solid #000;
    border-radius: 12px;
    background-color: #fff;
    cursor: pointer;
    text-align: left;
    font-family: 'Chakra Petch', sans-serif;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.wst-show-tab::before {content:"";position:absolute;inset:auto 0 0 0;height:0;background-color:var(--lime);z-index:-1;transition:height 0.4s cubic-bezier(.22,1,.36,1);}
.wst-show-tab:hover::before {height:100%;}
.wst-show-tab:hover {transform:translateY(-3px);}
.wst-show-tab i {position:absolute;top:16px;right:16px;width:11px;height:11px;border-radius:50%;background-color:var(--tabacc,#ccc);border:1.5px solid #000;}
.wst-show-tab b {font-size:12px;font-weight:700;letter-spacing:1px;color:var(--muted);font-variant-numeric:tabular-nums;}
.wst-show-tab span {font-size:16px;font-weight:700;letter-spacing:-0.3px;line-height:1.1;}
.wst-show-tab[aria-selected="true"] {background-color:#000;}
.wst-show-tab[aria-selected="true"]::before {height:0;}
.wst-show-tab[aria-selected="true"] b {color:rgba(255,255,255,0.55);}
.wst-show-tab[aria-selected="true"] span {color:#fff;}
.wst-show-tab[aria-selected="true"] i {box-shadow:0 0 0 2px #fff;}

/* datasheet panel v zariadení (SVG text) */
.wst-scr-lbl {font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;fill:#9A9A9A;}
.wst-scr-val {font-size:15px;font-weight:700;letter-spacing:-0.2px;fill:#111;}

/* technické parametre v info paneli */
.wst-show-specs {display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;margin-top:28px;max-width:520px;}
.wst-spec {border-top:2px solid #000;padding-top:12px;}
.wst-spec b {display:block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);}
.wst-spec span {display:block;margin-top:6px;font-size:17px;font-weight:700;letter-spacing:-0.3px;line-height:1.1;}

/* posuvník vnútri svetlej karty grafu */
.wst-chart-slider {margin-top:26px;}
.wst-chart-slider label {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:16px;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;}
.wst-chart-slider label b {color:#000;font-variant-numeric:tabular-nums;}
.wst-chart-slider .wst-slider input[type=range]::-webkit-slider-thumb {border-color:#000;background-color:var(--lime);}
.wst-chart-slider .wst-slider input[type=range]::-moz-range-thumb {border-color:#000;background-color:var(--lime);}
.wst-chart-slider .wst-slider input[type=range]::-webkit-slider-runnable-track {background-image:linear-gradient(to right, #000 var(--p), var(--line) var(--p));}
.wst-chart-slider .wst-slider input[type=range]::-moz-range-track {background-image:linear-gradient(to right, #000 var(--p), var(--line) var(--p));}
.wst-chart-slider .wst-slider-legend {color:var(--muted);}

/* ============================================================
   FAQ - najčastejšie otázky
   ============================================================ */

.wst-faq-list {border-top:1px solid var(--line);}

.wst-faq-item {border-bottom:1px solid var(--line);}

.wst-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(18px,2vw,24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.wst-faq-item summary::-webkit-details-marker {display:none;}

.wst-faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 2px solid #000;
    border-radius: 50%;
    background-image:
        linear-gradient(#000,#000),
        linear-gradient(#000,#000);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px 2px, 2px 13px;
    transition: background-color 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}

.wst-faq-item summary:hover::after {background-color:var(--lime);}
.wst-faq-item[open] summary::after {background-color:var(--lime);transform:rotate(135deg);}

.wst-faq-a {padding:0 60px 30px 0;}
.wst-faq-a p {font-size:16px;font-weight:300;line-height:1.75;letter-spacing:0.3px;}
.wst-faq-a p + p {margin-top:16px;}

/* ============================================================
   ZÁVEREČNÁ VÝZVA + PODPIS
   ============================================================ */

.wst-final {text-align:center;margin-bottom:clamp(100px, 12vw, 180px);}
.wst-final h2 {font-size:clamp(40px,7vw,96px);font-weight:700;line-height:1.02;letter-spacing:-2.5px;}
.wst-final h2 em {font-style:normal;font-weight:300;}
.wst-final .wst-lead {margin:26px auto 44px auto;max-width:600px;}
.wst-final-cta {display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}

.wst-page .wst-sign {display:flex;flex-wrap:wrap;align-items:center;gap:clamp(30px,5vw,70px);}

.wst-avatar {position:relative;flex:0 0 auto;width:200px;height:200px;}
.wst-avatar img {position:absolute;top:26px;left:26px;width:148px;height:148px;border-radius:50%;object-fit:cover;}

.wst-ring {position:absolute;inset:0;width:100%;height:100%;animation:wstSpin 22s linear infinite;}
.wst-ring text {font-size:11.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;fill:#000;}

.wst-sign-text {flex:1 1 320px;min-width:0;}
.wst-sign-text strong {display:block;font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1.15;letter-spacing:-0.8px;}
.wst-sign-text span {display:block;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;}
.wst-sign-text p {margin-top:22px;max-width:580px;font-size:16px;font-weight:300;line-height:1.75;letter-spacing:0.3px;}

.wst-sign-links {display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:26px;}
.wst-sign-links a {position:relative;font-size:clamp(18px,1.8vw,22px);font-weight:700;color:#000;letter-spacing:0.2px;}
.wst-sign-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background-color: var(--lime);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}
.wst-sign-links a:hover::after {transform:scaleX(1);transform-origin:left;}

/* ============================================================
   RESPONZÍVNE
   ============================================================ */

@media only screen and (max-width: 1023px) {
    .wst-features {grid-template-columns:repeat(2,1fr);}
    .wst-split {flex-direction:column;gap:50px;}
    .wst-split-left {position:static;flex:1 1 auto;width:100%;}
    .wst-phone {right:-90px;opacity:0.5;}
    .wst-kpis {grid-template-columns:repeat(2,1fr);}
    .wst-kpi {padding-right:20px;}
    .wst-kpi:nth-child(n+3) {margin-top:30px;padding-top:32px;border-top:1px solid var(--line);}
    .wst-show-stage {grid-template-columns:1fr;justify-items:center;text-align:center;}
    .wst-show-info {text-align:center;}
    .wst-show-plat,.wst-show-links {justify-content:center;}
    .wst-show-specs {margin-left:auto;margin-right:auto;text-align:left;}
    .wst-show-desc {margin-left:auto;margin-right:auto;}
    .wst-show-progress {margin-left:auto;margin-right:auto;}
    .wst-show-tabs {grid-template-columns:repeat(2,1fr);}
    .wst-reach {grid-template-columns:1fr;justify-items:center;text-align:center;}
    .wst-reach-rows {width:100%;text-align:left;}
}

@media only screen and (max-width: 767px) {
    .wst-hero {padding-top:300px;}
    .wst-title {letter-spacing:-1.5px;}
    .wst-features {grid-template-columns:1fr;}
    .wst-hero-cta {gap:12px;}
    .wst-btn {width:100%;justify-content:center;padding:20px 24px;}
    .wst-hero-stats {margin-top:60px;}
    .wst-stat {flex:1 1 100%;padding:26px 0 0 0;border-top:1px solid var(--line);}
    .wst-stat:first-child {border-top:none;}
    .wst-item {grid-template-columns:1fr;gap:18px;}
    .wst-item b {grid-row:auto;}
    .wst-phone {top:auto;bottom:-30px;right:-70px;width:270px;transform:none;opacity:0.35;}
    .wst-lab-controls {grid-template-columns:1fr;gap:30px;}
    .wst-chip {padding:11px 15px;font-size:11.5px;letter-spacing:0.8px;}
    .wst-kpis {grid-template-columns:1fr;}
    .wst-kpi {padding-right:0;}
    .wst-kpi:nth-child(n+2) {margin-top:26px;padding-top:28px;border-top:1px solid var(--line);}
    .wst-card-sub {max-width:none;}
    .wst-money-amount {letter-spacing:-2.5px;}
    .wst-tip {min-width:150px;padding:12px 13px;}
    .wst-show-tabs {grid-template-columns:1fr;}
    .wst-show-name {letter-spacing:-0.8px;}
    .wst-faq-a {padding-right:0;}
    .wst-sign {gap:34px;}
}

/* ============================================================
   MENEJ POHYBU
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .wst-page *,
    .wst-page *::before,
    .wst-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .wst-reveal {opacity:1;transform:none;}
    .wst-title span > em {transform:none;}
    .wst-marquee-track {animation:none;}
    .wst-tile, .wst-badge {opacity:1;}
}

/* ============================================================
   LIEVIK - z návštevníka zákazník (Graf 03)
   ============================================================ */
.wst-funnel {display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,48px);}
.wst-funnel-title {display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:20px;color:var(--muted);}
.wst-funnel-title i {width:12px;height:12px;border-radius:3px;flex-shrink:0;background:#D0D0D0;}
.wst-funnel-col.is-new .wst-funnel-title {color:#000;}
.wst-funnel-col.is-new .wst-funnel-title i {background:var(--lime);box-shadow:0 0 0 1.5px #000 inset;}
.wst-funnel-stage {margin-bottom:16px;}
.wst-funnel-lbl {display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px;font-size:12.5px;font-weight:700;letter-spacing:0.2px;}
.wst-funnel-lbl b {font-size:16px;letter-spacing:-0.3px;font-variant-numeric:tabular-nums;}
.wst-funnel-track {height:14px;border-radius:7px;background:var(--ghost);overflow:hidden;}
.wst-funnel-bar {height:100%;width:0;border-radius:7px;transition:width 1s cubic-bezier(.22,1,.36,1);}
.wst-funnel-col.is-old .wst-funnel-bar {background:#B4B4B4;}
.wst-funnel-col.is-new .wst-funnel-bar {background:var(--lime);box-shadow:0 0 0 2px #000 inset;}

@media only screen and (max-width: 620px) {
    .wst-funnel {grid-template-columns:1fr;gap:28px;}
}