/* Fish Shop Ardit brand refinement — white + logo blue (#0280e6).
   Loaded after page styles so it safely normalizes headers across all languages. */
:root{
  --brand-blue:#0280e6;
  --brand-blue-hover:#006fc9;
  --brand-blue-soft:#eaf6ff;
  --brand-blue-mist:#f5fbff;
  --brand-ink:#17324a;
  --brand-muted:#5f7487;
  --brand-line:#d7ebfa;
  --brand-shadow:0 18px 50px -30px rgba(2,128,230,.55);
}

/* ---------- Global header / language navigation ---------- */
.lang-bar{
  position:sticky!important;
  top:0!important;
  z-index:1100!important;
  color:var(--brand-ink)!important;
  background:rgba(255,255,255,.98)!important;
  border:0!important;
  border-bottom:1px solid var(--brand-line)!important;
  box-shadow:none!important;
  padding:6px 12px!important;
  backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
}
.lang-bar a{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:34px;
  min-height:25px;
  margin:0 3px!important;
  padding:4px 9px!important;
  color:#71879a!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  text-decoration:none!important;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease!important;
}
.lang-bar a:hover{
  color:var(--brand-blue)!important;
  background:var(--brand-blue-soft)!important;
  border-color:#c7e6fb!important;
  transform:translateY(-1px);
}
.lang-bar a.active{
  color:#fff!important;
  background:var(--brand-blue)!important;
  border-color:var(--brand-blue)!important;
  box-shadow:0 6px 16px -9px rgba(2,128,230,.9)!important;
}

nav{
  color:var(--brand-ink)!important;
  background:rgba(255,255,255,.97)!important;
  border:0!important;
  border-bottom:1px solid var(--brand-line)!important;
  box-shadow:0 8px 30px -24px rgba(2,128,230,.72)!important;
  backdrop-filter:blur(18px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(180%)!important;
  transition:box-shadow .25s ease,background .25s ease!important;
}
body.has-lang-bar nav{top:37px!important}
nav.is-scrolled{
  background:#fff!important;
  box-shadow:0 13px 35px -22px rgba(2,128,230,.72)!important;
}
nav::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(2,128,230,.18) 20%,var(--brand-blue) 50%,rgba(2,128,230,.18) 80%,transparent 100%);
  opacity:.65;
}
.nav-inner{max-width:1180px!important}
.nav-logo{
  position:relative;
  z-index:2;
  padding:4px 0!important;
  border-radius:10px;
}
.nav-logo img{
  width:auto!important;
  height:38px!important;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
}
.nav-links{gap:4px!important}
.nav-links a{
  position:relative;
  color:var(--brand-ink)!important;
  background:transparent!important;
  border-radius:999px!important;
  padding:9px 13px!important;
  text-decoration:none!important;
  transition:color .2s ease,background .2s ease,transform .2s ease!important;
}
.nav-links a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  right:13px;
  bottom:5px;
  left:13px;
  height:2px;
  border-radius:2px;
  background:var(--brand-blue);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}
.nav-links a:not(.nav-cta):hover{
  color:var(--brand-blue)!important;
  background:var(--brand-blue-soft)!important;
  transform:translateY(-1px);
}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(.62)}
.nav-cta{
  color:#fff!important;
  background:var(--brand-blue)!important;
  border:1px solid var(--brand-blue)!important;
  box-shadow:0 10px 22px -14px rgba(2,128,230,.9)!important;
}
.nav-cta:hover{
  color:#fff!important;
  background:var(--brand-blue-hover)!important;
  border-color:var(--brand-blue-hover)!important;
  transform:translateY(-1px)!important;
}
.hamburger{
  position:relative;
  display:none;
  color:var(--brand-blue)!important;
  background:var(--brand-blue-soft)!important;
  border:1px solid #c8e6fb!important;
  border-radius:13px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:9px!important;
  box-shadow:none!important;
  transition:background .2s ease,border-color .2s ease,transform .2s ease!important;
}
.hamburger:hover,.hamburger[aria-expanded="true"]{
  color:#fff!important;
  background:var(--brand-blue)!important;
  border-color:var(--brand-blue)!important;
  transform:translateY(-1px);
}
.hamburger svg{width:24px!important;height:24px!important}
.mobile-menu{
  display:none!important;
  color:var(--brand-ink)!important;
  background:#fff!important;
  border:0!important;
  border-top:1px solid var(--brand-line)!important;
  border-bottom:1px solid var(--brand-line)!important;
  padding:10px 16px 16px!important;
  box-shadow:0 22px 42px -28px rgba(2,128,230,.75)!important;
  overflow:auto;
  max-height:min(70vh,580px);
  transform-origin:top center;
}
.mobile-menu.is-open{
  display:block!important;
  animation:brandMenuIn .24s cubic-bezier(.2,.8,.2,1) both;
}
.mobile-menu a{
  display:flex!important;
  align-items:center;
  min-height:46px;
  color:var(--brand-ink)!important;
  background:#fff!important;
  border:0!important;
  border-bottom:1px solid #edf5fb!important;
  border-radius:10px!important;
  margin:2px 0!important;
  padding:11px 12px!important;
  font-weight:600!important;
  text-decoration:none!important;
  transition:color .18s ease,background .18s ease,padding .18s ease!important;
}
.mobile-menu a:hover,.mobile-menu a:focus-visible{
  color:var(--brand-blue)!important;
  background:var(--brand-blue-soft)!important;
  padding-left:16px!important;
  outline:none;
}
.mobile-menu a:last-child{
  justify-content:center;
  color:#fff!important;
  background:var(--brand-blue)!important;
  border-bottom:0!important;
  margin-top:8px!important;
  box-shadow:0 10px 22px -15px rgba(2,128,230,.9)!important;
}
.mobile-menu a:last-child:hover{color:#fff!important;background:var(--brand-blue-hover)!important;padding-left:12px!important}
@keyframes brandMenuIn{
  from{opacity:0;transform:translateY(-8px) scaleY(.96)}
  to{opacity:1;transform:none}
}

/* ---------- Homepage brand and motion polish ---------- */
.home-hero{
  background:linear-gradient(145deg,#f4fbff,#dff3ff)!important;
}
.hero-video{transition:opacity .35s ease,transform 8s ease!important}
.hero-video[data-ready]{transform:scale(1.012)}
.hero-overlay{
  background:linear-gradient(to bottom,rgba(5,30,52,.12) 0%,rgba(5,30,52,.27) 48%,rgba(5,30,52,.76) 100%)!important;
}
.hero-eyebrow{
  border-color:rgba(255,255,255,.55)!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 28px -20px rgba(0,0,0,.7);
}
.hero-eyebrow::before{
  background:#36a8ff!important;
  box-shadow:0 0 0 4px rgba(54,168,255,.18),0 0 14px rgba(54,168,255,.95)!important;
}
.hero-h1 em{color:#eaf7ff!important}
.btn-call{
  background:rgba(255,255,255,.18)!important;
  border-color:rgba(255,255,255,.62)!important;
}
.btn-call:hover{background:#fff!important;color:var(--brand-blue)!important}

.pillars{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 8% 10%,rgba(2,128,230,.09),transparent 28%),
    radial-gradient(circle at 92% 88%,rgba(2,128,230,.07),transparent 30%),
    #fff!important;
  overflow:hidden;
}
.pillars::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-80px;
  left:50%;
  width:min(1120px,90vw);
  height:160px;
  border:1px solid rgba(2,128,230,.12);
  border-radius:50%;
  transform:translateX(-50%);
}
.pillar,.story{
  --spot-x:50%;
  --spot-y:50%;
  position:relative;
  isolation:isolate;
  border-color:var(--brand-line)!important;
  box-shadow:0 16px 45px -36px rgba(2,128,230,.7)!important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease!important;
}
.pillar::before,.story::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(360px circle at var(--spot-x) var(--spot-y),rgba(2,128,230,.13),transparent 55%);
  opacity:0;
  transition:opacity .3s ease;
}
.pillar:hover,.story:hover{
  border-color:#acdafa!important;
  box-shadow:0 24px 55px -34px rgba(2,128,230,.78)!important;
  transform:translateY(-6px)!important;
}
.pillar:hover::before,.story:hover::before{opacity:1}
.pillar-icon{
  color:var(--brand-blue)!important;
  background:linear-gradient(145deg,#fff,var(--brand-blue-soft))!important;
  border:1px solid #c8e7fc;
  box-shadow:0 12px 24px -18px rgba(2,128,230,.9);
}

/* Editorial split layout: the social videos are vertical, so show the complete frame. */
.video-sec{
  display:grid!important;
  grid-template-columns:minmax(270px,420px) minmax(320px,1fr)!important;
  align-items:center!important;
  gap:clamp(38px,7vw,90px)!important;
  padding:clamp(76px,9vw,118px) max(20px,calc((100vw - 1120px)/2))!important;
  background:
    linear-gradient(120deg,rgba(2,128,230,.055),transparent 48%),
    var(--brand-blue-mist)!important;
  overflow:hidden;
}
.video-sec.alt{
  color:var(--brand-ink)!important;
  background:
    radial-gradient(circle at 14% 20%,rgba(2,128,230,.13),transparent 31%),
    linear-gradient(145deg,#fff 0%,#eaf7ff 100%)!important;
}
.video-sec> .reveal:first-child{
  position:relative;
  z-index:2;
  max-width:420px;
}
.video-sec .sec-eye,.video-sec .sec-title,.video-sec .sec-sub{
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
.video-sec .sec-eye{
  display:inline-flex!important;
  align-items:center;
  gap:9px;
  color:var(--brand-blue)!important;
}
.video-sec .sec-eye::before{
  content:"";
  width:28px;
  height:2px;
  border-radius:2px;
  background:var(--brand-blue);
}
.video-sec.alt .sec-title{color:var(--brand-ink)!important}
.video-sec.alt .sec-sub{color:var(--brand-muted)!important}
.video-sec.alt> .reveal:first-child{grid-column:2;grid-row:1}
.video-sec.alt> .video-frame{grid-column:1;grid-row:1}
.video-frame{
  width:min(100%,440px)!important;
  height:auto!important;
  aspect-ratio:9/16!important;
  justify-self:center;
  background:linear-gradient(145deg,#dff2ff,#fff)!important;
  border:8px solid #fff!important;
  border-radius:34px!important;
  box-shadow:0 35px 80px -42px rgba(2,128,230,.82),0 0 0 1px rgba(2,128,230,.12)!important;
  isolation:isolate;
  overflow:hidden!important;
}
.video-frame::before{
  content:"";
  position:absolute;
  z-index:4;
  top:13px;
  left:50%;
  width:48px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  transform:translateX(-50%);
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  pointer-events:none;
}
.video-frame::after{
  content:attr(data-label);
  position:absolute;
  z-index:4;
  right:14px;
  bottom:14px;
  left:14px;
  color:#fff;
  background:rgba(2,128,230,.88);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:9px 14px;
  font-size:12px;
  font-weight:700;
  text-align:center;
  letter-spacing:.02em;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:1;
  transform:translateY(0);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
.video-frame:hover::after{opacity:0;transform:translateY(7px)}
.video-frame video{
  object-fit:contain!important;
  object-position:center!important;
  background:#05090c!important;
}
.video-frame .play-btn{
  background:linear-gradient(to bottom,rgba(2,128,230,.02),rgba(0,0,0,.38))!important;
}
.play-ring{
  width:78px!important;
  height:78px!important;
  background:#fff!important;
  border:1px solid rgba(2,128,230,.22);
  box-shadow:0 18px 38px -18px rgba(0,0,0,.75)!important;
}
.play-tri{border-left-color:var(--brand-blue)!important}

.gallery{
  position:relative;
  background:linear-gradient(#fff,#f7fcff)!important;
}
.gallery::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:120px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--brand-blue),transparent);
  transform:translateX(-50%);
}
.marquee{cursor:grab;touch-action:pan-y}
.marquee.is-dragging{cursor:grabbing}
.marquee-item{
  border:1px solid var(--brand-line);
  box-shadow:0 22px 45px -34px rgba(2,128,230,.7)!important;
}
.marquee-item::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid transparent;
  border-radius:inherit;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.marquee-item:hover::after{border-color:rgba(2,128,230,.58);box-shadow:inset 0 0 0 5px rgba(255,255,255,.18)}

.stories{
  background:
    radial-gradient(circle at 90% 5%,rgba(2,128,230,.08),transparent 23%),
    #fff!important;
}
.story{overflow:hidden!important}
.story-img{transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .4s ease!important}
.story:hover .story-img{transform:scale(1.055);filter:saturate(1.06)}
.story-tag,.story-more{color:var(--brand-blue)!important}
.btn-curious{
  color:#fff!important;
  background:var(--brand-blue)!important;
  box-shadow:0 16px 30px -20px rgba(2,128,230,.9)!important;
}
.btn-curious:hover{background:var(--brand-blue-hover)!important}

.cta-band{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.2),transparent 32%),
    radial-gradient(circle at 84% 80%,rgba(255,255,255,.15),transparent 30%),
    linear-gradient(135deg,#1398f2 0%,var(--brand-blue) 54%,#0474cf 100%)!important;
}
.cta-band::after{
  content:"";
  position:absolute;
  right:-7%;
  bottom:-80px;
  width:310px;
  height:180px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  transform:rotate(-12deg);
}
.btn-or{color:var(--brand-blue)!important}

footer{
  background:linear-gradient(180deg,#f7fcff 0%,#eaf6ff 100%)!important;
  border-top-color:var(--brand-line)!important;
}
.footer-brand h3,.footer-col h4{color:var(--brand-ink)!important}
.footer-brand p,.footer-col a,.footer-bot{color:var(--brand-muted)!important}
.footer-col a:hover,.footer-bot a:hover{color:var(--brand-blue)!important}

.fab{
  background:linear-gradient(145deg,#159af3,var(--brand-blue))!important;
  box-shadow:0 16px 35px -13px rgba(2,128,230,.82),0 0 0 3px #fff!important;
}
.fab-label{
  color:var(--brand-blue)!important;
  background:#fff!important;
  border:1px solid var(--brand-line);
  box-shadow:0 10px 25px -18px rgba(2,128,230,.85)!important;
}
.fab-label::after{background:#fff!important;border-right:1px solid var(--brand-line);border-top:1px solid var(--brand-line)}
.assistant{border-color:var(--brand-line)!important;box-shadow:0 30px 70px -36px rgba(2,128,230,.8)!important}
.assistant-head{background:linear-gradient(135deg,#159af3,var(--brand-blue))!important}

/* Motion accessibility. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .marquee-track{animation:none!important}
}

@media (max-width:820px){
  body.has-lang-bar nav{top:37px!important}
  .nav-links{display:none!important}
  .hamburger{display:flex!important;align-items:center!important;justify-content:center!important}
  .nav-inner{min-height:62px!important;padding:7px 16px!important}
  .nav-logo img{height:33px!important;max-width:min(240px,65vw)!important}

  .home-hero{min-height:78svh!important;background:linear-gradient(145deg,#eaf7ff,#fff)!important}
  .hero-overlay{background:linear-gradient(to bottom,rgba(5,30,52,.04) 0%,rgba(5,30,52,.17) 45%,rgba(5,30,52,.82) 81%,rgba(5,30,52,.95) 100%)!important}

  .video-sec,.video-sec.alt{
    display:flex!important;
    flex-direction:column!important;
    gap:34px!important;
    padding:68px 18px!important;
  }
  .video-sec.alt> .reveal:first-child,.video-sec.alt> .video-frame{grid-column:auto;grid-row:auto}
  .video-sec> .reveal:first-child{max-width:640px;width:100%;order:0}
  .video-sec .sec-eye,.video-sec .sec-title,.video-sec .sec-sub{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  .video-sec .sec-eye{display:flex!important;justify-content:center}
  .video-sec .sec-eye::before{display:none}
  .video-frame{
    order:1;
    width:min(100%,430px)!important;
    border-width:6px!important;
    border-radius:28px!important;
    max-height:none!important;
  }
}

@media (max-width:520px){
  .lang-bar{padding:5px 8px!important}
  .lang-bar a{min-width:31px;min-height:24px;padding:3px 8px!important;font-size:11px!important}
  body.has-lang-bar nav{top:34px!important}
  .nav-inner{min-height:58px!important;padding:6px 12px!important}
  .nav-logo img{height:29px!important;max-width:67vw!important}
  .hamburger{min-width:42px!important;min-height:42px!important;border-radius:12px!important}
  .mobile-menu{padding:8px 12px 14px!important}
  .mobile-menu a{min-height:44px;padding:10px 11px!important;font-size:15px!important}
  .video-frame{width:min(100%,390px)!important;border-width:5px!important;border-radius:24px!important}
  .video-frame::after{right:10px;bottom:10px;left:10px;padding:8px 11px;font-size:11px}
  .play-ring{width:68px!important;height:68px!important}
}
.marquee.is-paused .marquee-track{animation-play-state:paused!important}
@media (max-width:520px){
  .video-frame::after{right:62px;white-space:normal;line-height:1.2}
}