/*
Theme Name: SYOU Oferta
Description: SEEYOU - marketing i technologia. Autorski header.
Version: 2.0.52
Text Domain: syou-oferta
*/
*{box-sizing:border-box}html{color-scheme:light;scroll-behavior:smooth}body{margin:0;min-height:100svh;background:var(--sy-bg);color:var(--sy-ink);font:16px/1.6 var(--sy-font-body);-webkit-font-smoothing:antialiased}body.sy-dialog-open{overflow:hidden}a{color:inherit;text-decoration:none}button,summary{font:inherit;cursor:pointer}input,select,textarea{font:inherit}button{color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}svg{width:20px;height:20px;stroke-width:1.7;flex-shrink:0}button svg,a svg{pointer-events:none}[hidden]{display:none!important}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--sy-focus);outline-offset:5px}::selection{background:var(--sy-accent-tint)}.sy-container{max-width:1400px;margin:auto;padding-inline:48px}.sy-skip{position:fixed;z-index:200;top:8px;left:12px;transform:translateY(-180%);background:white;padding:12px 20px;border-radius:8px}.sy-skip:focus{transform:none}.sy-overline{display:block;font-size:10px;line-height:1.5;letter-spacing:.13em;font-weight:600;color:var(--sy-muted)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--sy-font-display);letter-spacing:-.025em}.sy-empty-main{min-height:0}
/* A slow sheen, an always visible phone number and unhurried messages. */
.sy-topbar{position:relative;background:linear-gradient(110deg,var(--sy-dark) 0%,var(--sy-dark-surface) 48%,var(--sy-dark-surface) 75%,var(--sy-dark) 100%);color:white;isolation:isolate;overflow:hidden}
.sy-topbar-inner{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;position:relative}
.sy-topbar-sheen{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sy-topbar-sheen:before{content:'';position:absolute;inset:0 auto 0 0;width:60%;background:linear-gradient(110deg,transparent 22%,#ffffff08 39%,#ffffff24 49%,#ffffff08 58%,transparent 72%);transform:translate3d(-130%,0,0);animation:sy-topbar-shine 14s ease-in-out infinite}
.sy-topbar-phone{display:flex;align-items:center;justify-self:start;gap:10px;min-height:44px;white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:.015em;font-variant-numeric:tabular-nums;transition:color .2s}
.sy-topbar-phone:hover{color:var(--sy-accent-light)}.sy-topbar-phone>svg{width:13px;height:13px;color:var(--sy-dark-muted);margin-left:1px}
.sy-phone-status{position:relative;display:block;width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--sy-accent);box-shadow:0 0 10px rgba(var(--sy-accent-rgb),.44)}
.sy-phone-status:after{content:'';position:absolute;inset:-1px;border:1px solid var(--sy-accent);border-radius:50%;animation:sy-phone-pulse 2.8s cubic-bezier(.2,.65,.3,1) infinite}
.sy-topbar-story{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;font-size:12px;font-weight:400;white-space:nowrap;color:var(--sy-dark-muted)}
.sy-topbar-story strong{font-weight:600;color:#fff}.sy-topbar-story [data-topbar-copy]{display:block}
.sy-topbar-controls{display:flex;align-items:center;justify-self:end;gap:9px}
.sy-topbar-controls>a{font-size:11px;font-weight:500;display:flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap}
.sy-topbar-link-short{display:none}
.sy-topbar-controls>a svg{width:15px;height:15px;color:inherit;transition:transform .2s}
.sy-topbar-controls>a:hover svg{transform:translate(2px,-2px)}
.sy-motion-toggle{position:relative;width:44px;height:44px;flex-shrink:0;border:0;display:grid;place-items:center;background:none;padding:0;color:white}
.sy-motion-toggle:before{content:'';position:absolute;inset:8px;border:1px solid #ffffff24;border-radius:7px;transition:background .2s}
.sy-motion-toggle:hover:before{background:#ffffff20}
.sy-motion-toggle span{display:flex}.sy-motion-toggle svg{width:12px;height:12px}
.sy-play-icon{display:none!important}.is-motion-paused .sy-play-icon{display:flex!important}.is-motion-paused .sy-pause-icon{display:none}
.sy-topbar a:focus-visible,.sy-topbar button:focus-visible{outline-color:white;outline-offset:-3px}
/* Equal side columns keep the approved wordmark at the true center. */
:root{--sy-header-height:76px}
.sy-header{position:sticky;top:0;z-index:40;margin-bottom:calc(-1 * var(--sy-header-height));background:transparent;border:0;transition:background .25s,box-shadow .25s}
.sy-header.is-scrolled{background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(var(--sy-dark-rgb),.06),0 5px 20px rgba(var(--sy-dark-rgb),.04)}
.sy-header-inner{height:var(--sy-header-height);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;position:relative}
.sy-header-left{min-width:0;justify-self:start}
.sy-logo{display:grid;place-items:center;min-height:44px;justify-self:center}
/* Optical alignment of the wordmark and lighter tagline, including SVG bottom space. */
.sy-logo img{display:block;grid-area:1/1;width:154px;height:auto;transform:translateY(3px);transition:opacity .18s ease}
.sy-logo .sy-logo-dark{opacity:0}
.sy-header.is-scrolled .sy-logo-light{opacity:0}
.sy-header.is-scrolled .sy-logo-dark{opacity:1}
/* Compact service navigation: the labels remain visible before any interaction. */
.sy-desktop-nav{display:flex;align-items:stretch;gap:4px;padding:4px;border:1px solid var(--sy-line);border-radius:12px;background:var(--sy-surface)}
.sy-service-link{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:46px;padding:5px 12px 7px;border-radius:8px;font-size:14px;font-weight:500;line-height:1.25;white-space:nowrap;color:var(--sy-ink)}
.sy-service-link:before{content:'';position:absolute;inset:0;z-index:-1;border:1px solid var(--sy-accent-tint);border-radius:inherit;background:var(--sy-accent);opacity:0;transition:opacity .2s}
.sy-service-link:after{content:'';position:absolute;bottom:0;left:12px;right:12px;height:2px;border-radius:2px;background:var(--sy-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--sy-ease)}
.sy-service-meta{font-size:9px;font-weight:500;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--sy-muted)}
.sy-service-title{display:flex;align-items:center;gap:12px}.sy-service-title svg{width:13px;height:13px;margin-left:auto;opacity:.45;transition:transform .24s var(--sy-ease),opacity .2s}
.sy-service-link:focus-visible{outline:2px solid var(--sy-focus);outline-offset:2px}.sy-service-link:focus-visible:before{opacity:1}.sy-service-link:focus-visible:after{transform:scaleX(1)}.sy-service-link:focus-visible svg{opacity:1}
@media(hover:hover) and (pointer:fine){.sy-service-link:hover:before{opacity:1}.sy-service-link:hover:after{transform:scaleX(1)}.sy-service-link:hover svg{opacity:1;transform:translate(2px,-2px)}}
.is-motion-paused .sy-service-link:before,.is-motion-paused .sy-service-link:after,.is-motion-paused .sy-service-link svg{transition:none}.is-motion-paused .sy-service-link:hover svg{transform:none}
@media(prefers-reduced-motion:reduce){.sy-service-link:hover svg{transform:none}}
.sy-header-actions{display:flex;align-items:center;gap:14px;justify-self:end}
/* A single lime surface: no separate tile behind the arrow, no blur or looping effect. */
.sy-button{--sy-arrow-y:-2px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:50px;border:1px solid var(--sy-accent);border-radius:10px;background:var(--sy-accent);box-shadow:inset 0 1px 0 #ffffff17,0 2px 3px rgba(var(--sy-dark-rgb),.05);color:var(--sy-on-accent);padding:0 20px;font-family:var(--sy-font-display);font-size:13px;font-weight:600;line-height:1.3;transition:transform .2s var(--sy-ease)}
.sy-button:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-50% auto -50% 0;width:45%;background:linear-gradient(90deg,transparent,#ffffff12,transparent);transform:translateX(-160%) skewX(-20deg)}
.sy-button-arrow{width:20px;height:22px;flex-shrink:0;background:none;color:inherit;display:grid;place-items:center}
.sy-button-arrow svg{width:19px;height:19px;stroke-width:1.8;transition:transform .24s var(--sy-ease)}
@media(hover:hover) and (pointer:fine){.sy-button:not(:disabled):hover{transform:translateY(-1px)}.sy-button:not(:disabled):hover:before{transform:translateX(360%) skewX(-20deg);transition:transform .65s ease}.sy-button:not(:disabled):hover .sy-button-arrow svg{transform:translate(2px,var(--sy-arrow-y))}}
.sy-button:not(:disabled):active{transform:translateY(0) scale(.985)}
.is-motion-paused .sy-button:before{display:none}.is-motion-paused .sy-button:not(:disabled):hover,.is-motion-paused .sy-button:not(:disabled):active,.is-motion-paused .sy-button:not(:disabled):hover .sy-button-arrow svg{transform:none;transition:none}
.sy-header-cta{min-height:46px;padding:0 17px;gap:18px}
.sy-header-cta .sy-button-arrow{width:20px;height:22px}
.sy-menu-toggle{display:none;width:44px;height:44px;padding:12px 10px;border:1px solid var(--sy-line);border-radius:8px;background:white;place-content:center;gap:6px;transition:background .2s}
.sy-menu-toggle:hover{background:var(--sy-bg)}.sy-menu-toggle span{display:block;width:20px;height:1.5px;background:var(--sy-ink)}.sy-menu-toggle span:last-child{width:14px}
.admin-bar .sy-header{top:32px}
/* Contact and mobile panels use native modal focus handling. */
dialog{border:1px solid var(--sy-line);padding:0;color:var(--sy-ink);max-height:calc(100dvh - 32px);overscroll-behavior:contain}dialog::backdrop{background:rgba(var(--sy-dark-rgb),.31)}dialog[open]{animation:sy-panel-in .3s var(--sy-ease)}.sy-icon-button{width:44px;height:44px;display:grid;place-items:center;padding:0;background:white;border:1px solid var(--sy-line);border-radius:50%;flex-shrink:0}.sy-icon-button:hover{background:var(--sy-bg)}.sy-dialog-close{position:absolute;top:18px;right:18px}.sy-mobile-dialog{width:min(460px,calc(100% - 20px));margin:10px 10px 10px auto;max-height:calc(100dvh - 20px);height:calc(100dvh - 20px);border-radius:18px;background:#fff;padding:24px;flex-direction:column}.sy-mobile-dialog[open]{display:flex}.sy-mobile-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:36px}.sy-mobile-head img{width:186px;height:auto}.sy-mobile-dialog nav>.sy-overline{margin-bottom:16px}.sy-mobile-service{display:flex;gap:18px;align-items:center;border-top:1px solid var(--sy-line);padding:20px 0}.sy-mobile-number{font-size:10px;letter-spacing:.08em;color:var(--sy-ink);align-self:flex-start;margin-top:5px}.sy-mobile-service>span:nth-child(2){flex:1}.sy-mobile-service strong{display:block;font:600 21px/1.3 var(--sy-font-display);letter-spacing:-.02em}.sy-mobile-service small{display:block;font-size:11px;color:var(--sy-muted);margin-top:6px}.sy-mobile-service>svg{width:18px;height:18px}.sy-mobile-section{border-top:1px solid var(--sy-line)}.sy-mobile-section summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:58px;font-size:14px}.sy-mobile-section summary::-webkit-details-marker{display:none}.sy-mobile-section summary svg{width:14px;height:14px}.sy-mobile-section[open] summary svg{transform:rotate(180deg)}.sy-mobile-section p{font-size:13px;color:var(--sy-muted);line-height:1.7}.sy-mobile-section a{min-height:44px;display:flex;align-items:center;gap:16px;font-size:12px;color:var(--sy-ink);margin:8px 0 16px}.sy-mobile-bottom{margin-top:auto;padding-top:30px}.sy-mobile-bottom .sy-button{width:100%;margin-top:16px}.sy-mobile-email{display:block;text-align:center;font-size:12px;color:var(--sy-muted);padding-top:18px;min-height:44px}
@keyframes sy-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sy-topbar-shine{0%{transform:translate3d(-130%,0,0)}54%,100%{transform:translate3d(300%,0,0)}}
@keyframes sy-phone-pulse{0%{transform:scale(1);opacity:.7}65%,100%{transform:scale(2.6);opacity:0}}
@keyframes sy-header-enter{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:none}}
.sy-enhanced .sy-header-inner{animation:sy-header-enter .55s var(--sy-ease) both}
@media(max-width:1200px){
 .sy-container{padding-inline:32px}.sy-header-inner{gap:20px}.sy-service-link{padding-inline:9px;font-size:13px}.sy-service-title{gap:9px}.sy-service-meta{letter-spacing:.07em}.sy-header-actions{gap:10px}
 .sy-topbar-phone{font-size:13px;gap:10px}.sy-topbar-story{font-size:11px;gap:8px}.sy-topbar-controls{gap:4px}.sy-topbar-controls>a{font-size:11px}.sy-topbar-inner{gap:16px}
}
@media(max-width:1100px){
 .sy-desktop-nav{display:none}.sy-menu-toggle:not([hidden]){display:grid}:root{--sy-header-height:72px}.sy-logo img{width:147px}
 .sy-topbar-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:18px}.sy-topbar-phone>svg{display:none}.sy-topbar-controls>a{font-size:11px}
}
@media(max-width:950px){.sy-topbar-link-full{display:none}.sy-topbar-link-short{display:inline}.sy-topbar-story{font-size:10px}.sy-topbar-inner{gap:12px}}
@media(max-width:760px){.sy-topbar-inner{grid-template-columns:1fr auto;gap:12px}.sy-topbar-story{display:none}.sy-topbar-phone{font-size:12px;gap:8px}.sy-topbar-controls{gap:8px}}
@media(max-width:700px){
 .sy-container{padding-inline:22px}.sy-topbar-inner{padding-right:12px}.sy-topbar-controls>a{gap:6px}
 :root{--sy-header-height:68px}.sy-header-inner{gap:8px}.sy-logo img{width:clamp(123.2px,37.8vw,140px)}.sy-header-actions{gap:0}
 .sy-header-cta{width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;border-radius:9px}
 .sy-header-cta>span:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .sy-header-cta .sy-button-arrow{width:20px;height:22px}.sy-header-cta .sy-button-arrow svg{width:20px;height:20px}
 
 
}
@media(max-width:390px){
 .sy-container{padding-inline:16px}.sy-topbar-inner{padding-right:8px;gap:8px}.sy-topbar-controls{gap:2px}.sy-topbar-phone{font-size:12px;gap:8px}.sy-mobile-dialog{padding:20px}.sy-mobile-head{padding-bottom:28px}.sy-mobile-head img{width:176px}
 .sy-mobile-service strong{font-size:20px}.sy-mobile-service{padding:18px 0;gap:12px}
}
@media(max-width:782px){.admin-bar .sy-header{top:46px}}@media(max-width:600px){.admin-bar .sy-header{top:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.sy-button:not(:disabled):hover,.sy-button:not(:disabled):active,.sy-button:not(:disabled):hover .sy-button-arrow svg{transform:none}.sy-button:before{display:none}.sy-phone-status:after{opacity:0}}
.sy-topbar.is-decoration-paused .sy-topbar-sheen:before,.sy-topbar.is-decoration-paused .sy-phone-status:after{animation-play-state:paused!important}

.sy-nojs-services{display:flex;gap:20px;flex-wrap:wrap;padding-block:12px;border-top:1px solid var(--sy-line)}.sy-nojs-services a{min-height:44px;display:flex;align-items:center;gap:8px;font-size:13px}.sy-nojs-services a svg{width:14px;height:14px}

html:not(.sy-motion-ready) .sy-topbar-sheen:before,html:not(.sy-motion-ready) .sy-phone-status:after{animation:none}
/* Selection stays legible on both photographic and light surfaces. */
::selection{background:var(--sy-accent);color:var(--sy-on-accent)}

/* Transparent over the hero; the requested frosted treatment is confined to the sticky strip. */
.sy-header .sy-contact-button{color:#fff;background:rgba(var(--sy-dark-rgb),.18);border-color:#ffffff70}
.sy-header .sy-contact-button:hover{background:rgba(var(--sy-dark-rgb),.42);border-color:#fff}
.sy-header .sy-logo:focus-visible,.sy-header .sy-contact-button:focus-visible,.sy-header .sy-header-cta:focus-visible{outline-color:var(--sy-accent)}
.sy-header.is-scrolled .sy-contact-button{color:var(--sy-ink);background:rgba(var(--sy-dark-rgb),.035);border-color:rgba(var(--sy-dark-rgb),.12)}
.sy-header.is-scrolled .sy-contact-button:hover{background:rgba(var(--sy-dark-rgb),.075);border-color:rgba(var(--sy-dark-rgb),.24)}
.sy-header.is-scrolled :is(a,button):focus-visible{outline-color:var(--sy-focus)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .sy-header.is-scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
@media(prefers-reduced-transparency:reduce){
 .sy-header.is-scrolled{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
