/* Ioniz – shared styles. Page markup carries its own inline styles (from the design). */
html{scroll-behavior:smooth}
html,body{height:100%;margin:0}
body{background:#1b1e23;color:#e8ecf2;font-family:'DM Sans',DMSansFB,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#a9d6cf;text-decoration:none}
a:hover{color:#ffffff}
::selection{background:rgba(169,214,207,.3)}
#dc-root,#dc-root>.sc-host{height:100%}
[data-ix-off]{display:none!important}
/* preloader from the old site is not used on these pages */
#loftloader-wrapper{display:none!important}
/* logged-in view: keep the fixed header below the WordPress admin bar */
html:has(#wpadminbar) [data-ref="navRef"]{top:62px!important}
html:has(#wpadminbar) .ix-mnav{top:132px}
@media (max-width:999px){html:has(#wpadminbar) [data-ref="navRef"]{top:46px!important}html:has(#wpadminbar) .ix-mnav{top:118px}}
@media (max-width:782px){html:has(#wpadminbar) [data-ref="navRef"]{top:60px!important}}

/* project image slots that have no image yet stay empty (design background shows) */
#dc-root img[src^="data:image/svg"]{visibility:hidden}
/* project mockups: crop slightly below the top so the screen stays in view */
[data-ref="workRef"] img{object-position:center 22%!important}

/* Home hero: heading and spacing follow the screen height, so the whole section fits on laptop screens */
@media (min-width:1000px){
  .ioniz-page-home [data-ref="heroRef"] h1{font-size:clamp(46px,min(7vw,8.6vh),100px)!important}
  /* every other page: hero heading uses the same desktop size as the home hero */
  .ioniz-page [data-ref="heroRef"] h1{font-size:clamp(46px,min(7vw,8.6vh),100px)!important}
  .ioniz-page-home [data-ref="heroRef"]>div[style*="grid-template-columns"]{padding-top:clamp(112px,16vh,170px)!important;padding-bottom:clamp(84px,11vh,110px)!important}
}
html:has(#wpadminbar) .ioniz-page-home [data-ref="heroRef"]{min-height:min(960px,100vh - 60px)!important}

/* technology tiles: icons sit directly on the tile, without the small square behind them */
#dc-root span:has(> img[width="40"][height="40"]){background:transparent!important}

/* client logo strip (Home) – logos come from the media library */
.ix-logos{gap:26px!important;align-items:center;-webkit-user-select:none;user-select:none}
.ix-logo img{pointer-events:none;-webkit-user-drag:none}
.ix-logo{flex:none;display:block;position:relative;width:124px;height:66px;overflow:hidden;opacity:.85}
.ix-logo img{position:absolute;left:50%;top:50%;width:136px;height:136px;max-width:none;transform:translate(-50%,-50%)}

/* language switch (inside the design's EN / MK pill) */
.ix-lang{display:inline-flex!important;align-items:center;gap:2px;padding:3px!important;font-size:0!important;letter-spacing:0!important;background:rgba(255,255,255,.03);-webkit-user-select:none;user-select:none}
.ix-lang a{display:block;padding:6px 11px;border-radius:999px;font-family:'Sora',SoraFB,sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;line-height:1;color:#aab3c2;transition:background .25s,color .25s}
.ix-lang a:hover{color:#ffffff;background:rgba(255,255,255,.06)}
.ix-lang a.on,.ix-lang a.on:hover{color:#1b1e23;background:linear-gradient(90deg,#8fb0b6,#a9d6cf)}

/* mobile navigation (added: the design has no menu below 1000px) */
.ix-burger{all:unset;box-sizing:border-box;display:none;flex:none;cursor:pointer;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);position:relative}
.ix-burger span{position:absolute;left:12px;right:12px;height:1.5px;border-radius:2px;background:#e8ecf2;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s,top .3s cubic-bezier(.2,.8,.2,1)}
.ix-burger span:nth-child(1){top:14px}
.ix-burger span:nth-child(2){top:20px}
.ix-burger span:nth-child(3){top:26px}
.ix-burger.on span:nth-child(1){top:20px;transform:rotate(45deg)}
.ix-burger.on span:nth-child(2){opacity:0}
.ix-burger.on span:nth-child(3){top:20px;transform:rotate(-45deg)}
.ix-mnav{position:fixed;z-index:49;top:86px;left:14px;right:14px;max-height:calc(100vh - 100px);overflow:auto;display:grid;gap:2px;padding:10px;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:rgba(30,34,40,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.45);animation:ix-in .3s cubic-bezier(.2,.8,.2,1)}
.ix-mnav[hidden]{display:none}
.ix-mnav>a{display:block;padding:14px 16px;border-radius:14px;font-size:16px;color:#e8ecf2}
.ix-mnav>a.ix-sub{padding:11px 16px 11px 30px;font-size:15px;color:#aab3c2}
.ix-mnav>a:hover,.ix-mnav>a:active{color:#ffffff;background:rgba(255,255,255,.05)}
.ix-mlang{justify-self:start;margin:10px 10px 6px;border:1px solid rgba(255,255,255,.1);border-radius:999px}
.ix-mlang a{padding:9px 16px;font-size:12px}
@keyframes ix-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:999px){
  [data-ref="menuRef"]{display:none!important}
  .ix-burger{display:block}
  [data-ref="navRef"]{top:14px!important;width:calc(100% - 28px)!important;gap:10px!important;padding-left:16px!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ix-mnav{animation:none}}

/* testimonials (Home): moving row of review cards, pauses on hover */
.ix-tm{position:relative;margin-top:56px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ix-tm-track{display:flex;width:max-content;animation:ix-tm 70s linear infinite}
.ix-tm-set{display:flex;flex:none}
.ix-tm:hover .ix-tm-track{animation-play-state:paused}
@keyframes ix-tm{to{transform:translateX(-50%)}}
.ix-tc{flex:none;box-sizing:border-box;width:min(420px,84vw);margin:0 20px 0 0;padding:30px;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.01));display:flex;flex-direction:column;gap:22px;transition:border-color .3s}
.ix-tc:hover{border-color:rgba(169,214,207,.3)}
.ix-tc-top{display:flex;align-items:center;justify-content:space-between}
.ix-tc-stars{font-size:17px;letter-spacing:3px;color:#ffc531}
.ix-tc-q{font-family:'Sora',SoraFB,sans-serif;font-size:56px;line-height:.5;height:22px;color:rgba(169,214,207,.28)}
.ix-tc-text{margin:0;flex:1;font-size:16px;line-height:1.65;color:#c6cfdc}
.ix-tc-by{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07)}
.ix-tc-av{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#2a2f36}
.ix-tc-av img{display:block;width:100%;height:100%;object-fit:cover}
.ix-tc-av.logo{background:#000}
.ix-tc-av.logo img{object-fit:contain;padding:16%;box-sizing:border-box}
.ix-tc-name{display:block;font-family:'Sora',SoraFB,sans-serif;font-weight:600;font-size:16px;color:#e8ecf2}
.ix-tc-role{display:block;margin-top:2px;font-size:13px;color:#8b94a3}
.ix-tc-link{margin-left:auto;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);color:#c6cfdc;font-size:14px;transition:background .3s,color .3s,border-color .3s}
.ix-tc-link:hover{background:#a9d6cf;border-color:#a9d6cf;color:#1b1e23}
@media (prefers-reduced-motion:reduce){.ix-tm{overflow-x:auto}.ix-tm-track{animation:none}}

.ix-tm{touch-action:pan-y;cursor:grab}
.ix-tm-nav{display:flex;gap:10px;margin-left:16px}
.ix-tm-btn{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.14);color:#e8ecf2;font-size:18px;transition:background .3s,box-shadow .3s}
.ix-tm-btn:hover{background:rgba(255,255,255,.08)}
.ix-tm-btn.next{border:0;color:#1b1e23;background:linear-gradient(90deg,#8fb0b6,#a9d6cf)}
.ix-tm-btn.next:hover{background:linear-gradient(90deg,#8fb0b6,#a9d6cf);box-shadow:0 0 24px rgba(169,214,207,.35)}
.ix-tm-btn:focus-visible{outline:2px solid #a9d6cf;outline-offset:3px}

/* language switch in the footer */
.ix-flang{border:1px solid rgba(255,255,255,.1);border-radius:999px}

/* Projects page: project cards */
.ix-pcard:hover{color:#e8ecf2!important;transform:translateY(-8px)!important;border-color:rgba(169,214,207,.3)!important;box-shadow:0 30px 60px rgba(0,0,0,.35)!important}
.ix-pgrid img{object-fit:contain!important;object-position:center!important}
.ix-pcard>div:first-child>div{height:360px!important}
/* the three laptop mockups in the first two rows fill tall frames, as on Home */
.ix-pgrid .ix-pcard:nth-child(-n+6)>div:first-child>div{height:440px!important}
.ix-pgrid .ix-pcard:nth-child(-n+6) img{object-fit:cover!important;object-position:center 22%!important}

/* tightly cropped client logos: scale to fit the logo box */
.ix-logo.fit{display:grid;place-items:center}
.ix-logo.fit img{position:static;transform:none;width:auto;height:auto;max-width:116px;max-height:56px}

/* Text pages (Terms, Privacy): content written in the WordPress editor */
.ix-prose{font-size:16.5px;line-height:1.75;color:#aab3c2;overflow-wrap:anywhere}
.ix-prose>:first-child{margin-top:0}
.ix-prose>h2:first-child{border-top:0;padding-top:0}
.ix-prose h2,.ix-prose h3,.ix-prose h4{font-family:'Sora',SoraFB,sans-serif;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:#e8ecf2}
.ix-prose h2{font-size:clamp(24px,2.6vw,30px);margin:56px 0 16px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.ix-prose h3{font-size:21px;margin:36px 0 12px}
.ix-prose h4{font-size:18px;margin:28px 0 10px}
.ix-prose p{margin:0 0 18px}
.ix-prose ul,.ix-prose ol{margin:0 0 20px;padding-left:22px}
.ix-prose li{margin:0 0 8px}
.ix-prose li::marker{color:#a9d6cf}
.ix-prose a{color:#a9d6cf;text-decoration:underline;text-decoration-color:rgba(169,214,207,.4);text-underline-offset:3px}
.ix-prose a:hover{color:#ffffff}
.ix-prose strong,.ix-prose b{color:#e8ecf2;font-weight:600}
.ix-prose hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:40px 0}
.ix-prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.ix-prose th,.ix-prose td{padding:10px 12px;border:1px solid rgba(255,255,255,.08);text-align:left}
.ix-prose img{max-width:100%;height:auto;border-radius:14px}

/* ---------- Phone layout fixes ---------- */
@media (max-width:700px){
  /* Home: hero stats card */
  .ioniz-page-home [data-ref="heroCardRef"]>div:first-child{padding:22px!important}
  .ioniz-page-home [data-ref="heroCardRef"]>div:first-child>div[style*="justify-content: space-between"]{flex-wrap:wrap}
  .ioniz-page-home [data-ref="heroCardRef"] div[style*="rgba(255, 197, 49, 0.08)"]{padding:6px 11px!important;gap:6px!important}
  .ioniz-page-home [data-ref="heroCardRef"] div[style*="rgba(255, 197, 49, 0.08)"]>span:first-child{font-size:12px!important;letter-spacing:1px!important}
  .ioniz-page-home [data-ref="heroCardRef"] [data-count]{font-size:72px!important}
  .ioniz-page-home [data-ref="heroCardRef"]>div:first-child svg{max-width:40%;height:auto}
  .ioniz-page-home [data-ref="heroCardRef"]>div:nth-child(2)>div{padding:18px!important}
  .ioniz-page-home [data-ref="heroCardRef"]>div:nth-child(2)>div>*:not(:first-child){display:none!important}
  .ioniz-page-home [data-ref="heroCardRef"]>div:nth-child(2)>div>div>div:first-child{font-size:24px!important}
  /* Home: projects stacked instead of a sideways row */
  [data-ref="workRef"]{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;overflow:visible!important}
  [data-ref="workRef"]>a{flex:none!important;min-width:0}
  /* About: hero stats grid */
  .ioniz-page-about [data-ref="heroCardRef"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .ioniz-page-about [data-ref="heroCardRef"]>div{padding:18px!important;min-width:0}
  .ioniz-page-about [data-ref="heroCardRef"] span[style*="font-size: 48px"]{font-size:34px!important}
  .ioniz-page-about [data-ref="heroCardRef"] span[style*="font-size: 30px"]{font-size:21px!important}
  .ioniz-page-about [data-ref="heroCardRef"] span[style*="font-size: 28px"]{font-size:20px!important}
  /* About: the three value panels stack vertically */
  div[data-h-mouseenter="valHoverOn"]{flex-direction:column;height:600px!important}
  div[data-h-mouseenter="valHoverOn"]>article>div[style*="writing-mode: vertical-rl"]{writing-mode:horizontal-tb!important;rotate:none!important;left:104px!important;top:45px!important;bottom:auto!important}
  /* footer columns */
  footer div[style*="minmax(min(100%, 190px), 1fr)"]{grid-template-columns:1fr 1fr!important;gap:36px 20px!important}
  footer div[style*="grid-column: span 2"]{min-width:0!important}
}

/* arrows always drawn as plain text, never as emoji */
body.ioniz-page{font-variant-emoji:text}

/* phone and tablet header: logo on the left, language switch and menu button on the right */
.ix-hlang{display:none!important}
@media (max-width:999px){
  [data-ref="navRef"]>a:last-of-type{display:none!important}
  .ix-hlang{display:inline-flex!important;margin-left:auto;border:1px solid rgba(255,255,255,.1);border-radius:999px}
  [data-ref="navRef"]{top:26px!important}
  html:has(#wpadminbar) [data-ref="navRef"]{top:58px!important}
  .ix-mnav{top:100px}
  html:has(#wpadminbar) .ix-mnav{top:132px}
  /* hero content sits closer to the header */
  [data-ref="heroRef"]>div[style*="170px"]{padding-top:128px!important}
}
@media (max-width:782px){html:has(#wpadminbar) [data-ref="navRef"]{top:72px!important}html:has(#wpadminbar) .ix-mnav{top:146px}}

/* ---------- Phone layout, round 2 ---------- */
@media (max-width:700px){
  /* header: same space at the sides as at the top */
  [data-ref="navRef"]{width:calc(100% - 52px)!important}
  .ix-mnav{left:26px;right:26px}
  /* client logo strip: smaller */
  .ix-logos{gap:18px!important}
  .ix-logo{width:88px;height:46px}
  .ix-logo img{width:96px;height:96px}
  .ix-logo.fit img{width:auto;height:auto;max-width:80px;max-height:38px}
  /* project images: frame follows the shape of the mockups, so the whole laptop shows */
  [data-ref="workRef"]>a>div:first-child>div,
  .ix-pgrid .ix-pcard:nth-child(-n+6)>div:first-child>div{height:auto!important;aspect-ratio:1080/1250}
  [data-ref="workRef"] img,.ix-pgrid .ix-pcard:nth-child(-n+6) img{object-position:center!important}
  /* technologies: tidy filter buttons and a simple 3-column grid of larger tiles */
  section[data-screen-label="Technologies"]{padding-left:14px!important;padding-right:14px!important}
  section[data-screen-label="Technologies"]>div{padding:26px 20px!important;gap:34px!important}
  section[data-screen-label="Technologies"] div:has(>button[data-h-click^="techTabs"]){display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;width:100%!important;box-sizing:border-box;border-radius:22px!important;padding:6px!important}
  section[data-screen-label="Technologies"] button[data-h-click^="techTabs"]{text-align:center!important;padding:11px 8px!important;border-radius:16px!important}
  section[data-screen-label="Technologies"] div[style*="repeat(4, minmax(0px, 1fr))"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;max-width:none!important}
  section[data-screen-label="Technologies"] div[style*="grid-area: 2 / 2 / 4 / 4"]{display:none!important}
  section[data-screen-label="Technologies"] div[style*="repeat(4, minmax(0px, 1fr))"]>div{border-radius:18px!important;gap:8px!important;padding:10px 6px!important}
  section[data-screen-label="Technologies"] div[style*="repeat(4, minmax(0px, 1fr))"]>div>span:last-child{font-size:12px!important}
}

/* ---------- Phone: animated ad scene (phone mock + leads card) ---------- */
@media (max-width:700px){
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]{left:4%!important;width:52%!important;padding:10px!important;gap:8px!important}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]>div:nth-child(3){gap:6px!important}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]>div:nth-child(3)>div>span{max-width:34px}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]>div:nth-child(3)>span{padding:4px 8px!important;font-size:9px!important}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]>div:nth-child(4){gap:6px!important;font-size:8px!important;white-space:nowrap;justify-content:space-between}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]+div{right:4%!important;width:37%!important;padding:11px!important}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]+div span[style*="font-size: 28px"]{font-size:20px!important}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]+div div[style*="align-items: baseline"]{gap:4px!important;white-space:nowrap}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]+div div[style*="align-items: baseline"]>span:last-child{font-size:9px!important}
  div[data-anim="float"][style*="left: 7%"][style*="width: 44%"]~div[data-anim="rise"]{right:4%!important;bottom:7%!important;font-size:11px!important;padding:6px 11px 6px 6px!important}
}

/* 404 page buttons */
.ix-btn-main:hover{color:#ffffff;box-shadow:0 10px 30px rgba(143,176,182,.3)}
.ix-btn-alt:hover{color:#ffffff;background:rgb(15,17,20)!important}

/* Phone: the hero number row keeps one line while the counter runs, so the hero height stays the same */
@media (max-width:700px){
  .ioniz-page-home [data-ref="heroCardRef"]>div:first-child>div[style*="align-items: end"]{flex-wrap:nowrap!important}
  .ioniz-page-home [data-ref="heroCardRef"]>div:first-child>div[style*="align-items: end"]>svg{flex:0 1 40%;min-width:0}
}