/* IC Studio — homepage (NFC ecosystem) styles
   Split out from the previous single-file bundle export. Design is unchanged. */

/* ── LANGUAGE ── */
span.l-hr,span.l-en,span.l-de,span.l-cs,
div.l-hr,div.l-en,div.l-de,div.l-cs,
a.l-hr,a.l-en,a.l-de,a.l-cs { display:none }
html.lang-hr span.l-hr,html.lang-hr div.l-hr,html.lang-hr a.l-hr { display:inline }
html.lang-en span.l-en,html.lang-en div.l-en,html.lang-en a.l-en { display:inline }
html.lang-de span.l-de,html.lang-de div.l-de,html.lang-de a.l-de { display:inline }
html.lang-cs span.l-cs,html.lang-cs div.l-cs,html.lang-cs a.l-cs { display:inline }

/* ── FONT ── */
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/mulish-v18-latin_latin-ext-regular.woff2") format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/mulish-v18-latin_latin-ext-600.woff2") format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/mulish-v18-latin_latin-ext-700.woff2") format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/mulish-v18-latin_latin-ext-800.woff2") format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/mulish-v18-latin_latin-ext-900.woff2") format('woff2');}

/* ── TOKENS ── */
:root{
--bg:#000000;--bg2:#0a0a0a;--card:#0d0d0d;--cardg:rgba(255,255,255,0.03);
--text:#ffffff;--muted:rgba(255,255,255,0.62);--faint:rgba(255,255,255,0.38);
--border:rgba(255,255,255,0.10);--border2:rgba(255,255,255,0.20);
--accent:#E2BE7A;--accent-soft:rgba(226,190,122,0.12);
--pillbg:#ffffff;--pillfg:#000000;--navbg:rgba(0,0,0,0.62);
--glow:rgba(255,255,255,0.28);
}
html[data-theme="light"]{
--bg:#f5f5f7;--bg2:#ffffff;--card:#ffffff;--cardg:rgba(0,0,0,0.02);
--text:#0b0b0c;--muted:rgba(10,10,12,0.64);--faint:rgba(10,10,12,0.42);
--border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.18);
--accent:#96722E;--accent-soft:rgba(150,114,46,0.10);
--pillbg:#0b0b0c;--pillfg:#ffffff;--navbg:rgba(245,245,247,0.72);
--glow:rgba(150,114,46,0.35);
}

/* ── RESET / BASE ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:#fff;font-family:'Mulish',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .5s ease;}
#icroot a{color:var(--text);}
#icroot a:hover{color:var(--accent);}
#icroot ::selection{background:var(--accent);color:#000;}
#icroot button{font:inherit;}
#icroot img,#icroot video{max-width:100%;}

/* ── REVEAL ── */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1);}
[data-reveal].in{opacity:1;transform:none;}
[data-hero-reveal]{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1);}
[data-hero-reveal].in{opacity:1;transform:none;}

/* ── SIM GRID (NFC ecosystem) ── */
.sim-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:56px;align-items:start;}
@media (max-width:1080px){
  .sim-grid{grid-template-columns:1fr;gap:24px;}
  .sim-stage{position:relative !important;top:auto !important;width:100%;flex:none;height:64vh;min-height:440px;margin-bottom:32px;}
  .sim-step{min-height:auto !important;padding:28px 0;display:flex !important;flex-direction:column !important;align-items:stretch !important;}
}
@media (max-width:480px){
  .sim-stage{height:56vh;min-height:380px;}
}

/* ── PORTFOLIO FEATURED TILES (Aroma / MB) ──
   On desktop these tiles are wide and short, so the video is mostly
   cropped to a strip and the bottom-gradient only needs to darken a
   small band behind the text. On mobile the same tile becomes narrow
   and tall (grid collapses to 1 column but keeps the 2-row height),
   so far more of the underlying video shows through — including its
   own on-screen text/UI — and it visibly clashes with our overlaid
   title/description. Darken the scrim earlier and harder below the
   tablet breakpoint so the card text stays legible no matter what
   frame of the video is playing underneath. */
@media (max-width:1080px){
  .ic-tile-scrim{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.94) 78%,rgba(0,0,0,.96) 100%) !important;}
}

/* ── MOBILE SCROLL PERFORMANCE ──
   backdrop-filter forces the browser to recompute a blur of whatever is
   behind the element on every scroll/compositing frame, which is a common
   cause of scroll jank on mobile GPUs. Disable it below the tablet
   breakpoint and fall back to a near-opaque solid background instead. */
@media (max-width:1080px){
  [style*="backdrop-filter"]{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
  :root{--navbg:rgba(0,0,0,0.94);}
  html[data-theme="light"]{--navbg:rgba(245,245,247,0.96);}
}

/* ── PORTFOLIO SMALL TILES: MOBILE SWIPE CAROUSEL ──
   On desktop .ic-portfolio-mobilescroll is display:contents, so its 4
   children just sit as normal cells in the parent grid (unchanged layout).
   Below the tablet breakpoint it becomes a horizontal scroll-snap strip —
   one big, readable card at a time with the next one peeking at the edge
   as a swipe hint, instead of squeezing everything into 2 cramped columns. */
.ic-portfolio-mobilescroll{display:contents;}
@media (max-width:900px){
  .ic-portfolio-mobilescroll{
    display:flex;
    grid-column:1/-1;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .ic-portfolio-mobilescroll::-webkit-scrollbar{display:none;}
  .ic-portfolio-mobilescroll > div{
    flex:0 0 80%;
    height:260px;
    scroll-snap-align:start;
  }
}

/* ── HERO SCROLL DARKEN / PARALLAX / KINETIC TEXT ──
   --hero-progress (0..1) and --hero-parallax (px) are set on #top by
   initHeroParallax() in ic-home.js, rAF-throttled on scroll. The scrim
   fades the video to black, the content wrapper lifts and fades out, and
   the video itself lags behind at a fraction of scroll speed — all pure
   transform/opacity so it stays on the compositor, no layout cost. */
.ic-hero-scrim,.ic-hero-content{transition:none;}
@media (prefers-reduced-motion:reduce){
  .ic-hero-scrim,.ic-hero-content,.ic-hero-video{transition:none !important;}
}

/* ── MOBILE HERO VIDEO ──
   Mobile now gets its own lightweight portrait video (mobitel.mp4, ~2.4MB)
   instead of the heavy desktop cut, swapped in by the inline script in the
   hero header based on the same 900px breakpoint — so it stays visible
   here rather than being hidden. */

/* ── MOBILE NAV ── */
.ic-navburger{display:none;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;background:var(--cardg);color:var(--text);font-size:17px;cursor:pointer;flex:0 0 auto;}
.ic-nav-menu{display:flex;align-items:center;gap:20px;margin-left:auto;}
@media (max-width:900px){
  .ic-nav-bar{gap:14px;padding:12px 20px !important;}
  .ic-navburger{display:flex;margin-left:auto;}
  .ic-nav-menu{
    position:fixed;top:62px;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:18px;
    background:var(--bg2);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
    border-bottom:1px solid var(--border);
    padding:6px 24px 26px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .35s ease,opacity .3s ease;
  }
  .ic-nav-menu.open{max-height:80vh;opacity:1;pointer-events:auto;overflow-y:auto;}
  .ic-nav-menu>div:first-child{flex-direction:column;align-items:flex-start;gap:16px;}
  .ic-nav-menu .ic-navlink{font-size:16px !important;}
  .ic-nav-menu>div:nth-child(2){align-self:flex-start;}
  .ic-nav-menu .ic-navcta{text-align:center;}
}
.sim-dev{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.9) translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none;}
.sim-dev.on{opacity:1;transform:none;}
/* Only the active step should animate. Without this, all four device
   mockups (phone float/pan/ripple, bar toasts, admin bars, watch shake/
   notif) keep running their infinite CSS animations at all times even
   while invisible (opacity:0), which competes with the browser for
   compositor time during the exact scroll range where this section is
   sticky-pinned — that's what causes the stutter/skip while scrolling
   through "Jedan dodir. Cijeli lokal, orkestriran." Pausing the hidden
   ones removes that constant background work. */
.sim-dev:not(.on) *{animation-play-state:paused !important;}
/* The bar-terminal toast cards and the guest-phone badge use
   backdrop-filter, which forces a fresh blur recompute of whatever is
   behind them on every frame they're animating/repositioning. Inside a
   position:sticky stage that's actively repainting during scroll, that's
   an expensive combination. Drop the blur here (all sizes, not just
   mobile) and rely on the already-near-opaque background instead. */
.sim-stage [style*="backdrop-filter"]{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}

/* ── GLOW CARD ── */
.glow-card{position:relative;}
.glow-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 65%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:2;}
.glow-card:hover::before{opacity:1;}
.ic-tile-lift{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.ic-tile-lift:hover{transform:translateY(-4px);}

/* ── HOVER / FOCUS STATE CLASSES (converted from inline style-hover) ── */
.ic-navlink:hover{color:var(--text)}
.ic-themebtn:hover{border-color:var(--border2)}
.ic-navcta:hover{transform:scale(1.04);color:var(--pillfg)}
.ic-hero-cta1:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,255,255,.25);color:#000}
.ic-hero-cta2:hover{border-color:rgba(255,255,255,.6);color:#fff}
.ic-logo-img:hover{opacity:1}
.ic-cta-tile:hover{background:var(--accent-soft)}
.ic-livebtn:hover{background:#fff !important;color:#000 !important}
.ic-tiercta:hover{background:var(--pillbg) !important;color:var(--pillfg) !important;border-color:var(--pillbg) !important}
.ic-contact-link:hover{border-color:var(--accent);color:var(--accent)}
.ic-forminput:focus{border-color:var(--accent)}
.ic-formsubmit:hover{transform:scale(1.02)}
.ic-modalclose:hover{background:#fff;color:#000}

/* ── LANG PILL BUTTONS ── */
.ic-langbtn{border:none;cursor:pointer;font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.06em;padding:6px 10px;border-radius:999px;background:transparent;color:var(--muted);transition:all .3s ease;}
.ic-langbtn.on{background:var(--pillbg);color:var(--pillfg);}

/* ── STEP DOTS ── */
.ic-dot{height:6px;border-radius:999px;background:var(--border2);transition:all .5s ease;display:block;width:6px;}
.ic-dot.on{width:26px;background:var(--accent);}

/* ── KEYFRAMES ── */
@keyframes icmarquee{from{transform:translateX(0);}to{transform:translateX(-25%);}}
@keyframes icripple{0%{transform:scale(.4);opacity:.9;}100%{transform:scale(2.6);opacity:0;}}
@keyframes icpan{0%{transform:scale(1.06) translateY(0);}100%{transform:scale(1.14) translateY(-3%);}}
@keyframes ictoast{0%{opacity:0;transform:translateX(56px);}6%{opacity:1;transform:translateX(0);}72%{opacity:1;transform:translateX(0);}82%{opacity:0;transform:translateX(-14px);}100%{opacity:0;transform:translateX(-14px);}}
@keyframes icshake{0%,72%,100%{transform:translateX(0);}74%{transform:translateX(-3px) rotate(-.6deg);}78%{transform:translateX(3px) rotate(.6deg);}82%{transform:translateX(-2px);}86%{transform:translateX(2px);}90%{transform:translateX(0);}}
@keyframes icnotif{0%,70%{opacity:0;transform:translateY(26px) scale(.92);}76%,96%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-8px) scale(.96);}}
@keyframes icpulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes icbar{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}
@keyframes icfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes icscroll{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(14px);opacity:0;}100%{transform:translateY(0);opacity:0;}}
@keyframes icblink{0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.5);}50%{box-shadow:0 0 0 6px rgba(52,199,89,0);}}

/* ── CASE STUDY MODAL ── */
.ic-modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.78);backdrop-filter:blur(18px);display:none;align-items:center;justify-content:center;padding:24px;}
.ic-modal-overlay.open{display:flex;}

/* ── HERO: ambient gold glow orb ── */
.ic-hero-glow{
  position:absolute;
  width:1000px;height:520px;
  top:46%;left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(226,190,122,.11) 0%,transparent 66%);
  pointer-events:none;
  z-index:1;
  filter:blur(56px);
}

/* ── HERO: gold-tint badge border ── */
.ic-hero-badge{
  border-color:rgba(226,190,122,.28) !important;
  box-shadow:0 0 0 1px rgba(226,190,122,.07),inset 0 0 18px rgba(226,190,122,.04);
}

/* ── HERO: gradient shimmer accent word ── */
.ic-hero-accent{
  font-style:normal;
  background:linear-gradient(108deg,#ffffff 0%,var(--accent) 36%,#f0deb0 60%,#ffffff 82%);
  background-size:240% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ic-heroshine 5.4s ease-in-out infinite;
  will-change:background-position;
}
@keyframes ic-heroshine{
  0%  {background-position:0% center;}
  55% {background-position:120% center;}
  100%{background-position:240% center;}
}

/* ── HERO: CTA white button shine sweep ── */
.ic-hero-cta1{position:relative;overflow:hidden;}
.ic-hero-cta1::after{
  content:'';
  position:absolute;
  top:0;left:-130%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.44),transparent);
  transform:skewX(-16deg);
  animation:ic-ctashine 5.5s ease-in-out infinite;
  animation-delay:1.8s;
  pointer-events:none;
}
@keyframes ic-ctashine{
  0%,100%{left:-130%;}
  42%    {left:165%;}
}