/* Site-level integration layer: loaded last. Holds only what the merged page needs on top of the
   per-section styles — the Karo logo artwork (replacing the placeholder bar marks) and cross-section glue. */

/* Header logo: Karo compact wordmark (aspect 1200:500). */
.site-nav .brand { min-width: 0; }
.site-nav .site-logo { display: block; height: 40px; width: auto; transition: height .45s var(--ease); }
.site-nav.scrolled .site-logo { height: 34px; }

/* Footer logo: full Karo lockup with TECARO and the legal name (aspect 1200:610). */
.footer-brand__logo { display: block; height: 92px; width: auto; }
@media (max-width: 680px) { .footer-brand__logo { height: 76px; } }

/* In-page anchors land below the fixed nav. */
#services, #products, #clients, #brands, #consult, #contact { scroll-margin-top: 88px; }

/* A single, stationary canvas of light behind every post-hero section. */
.site-page { isolation: isolate; min-width: 0; }
.site-main, .site-page > .footer { position: relative; z-index: 1; }
.site-atmosphere {
  --site-p: .45;
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #050d14, #061018 60%, #071119);
}
.site-field {
  position: absolute; left: 0; top: 0; width: 90vw; height: 90vh;
  transform: translate3d(calc(var(--site-x) + var(--site-dx) * var(--site-p)), calc(var(--site-y) + var(--site-dy) * var(--site-p)), 0) scale(calc(var(--site-scale) + var(--site-dscale) * var(--site-p)));
  opacity: calc(var(--site-opacity) + var(--site-dopacity) * var(--site-p));
  will-change: transform, opacity;
}
.site-field__light {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--site-color) 70%, transparent) 0%, transparent 70%);
  filter: blur(64px);
  animation: site-drift var(--site-duration) ease-in-out var(--site-delay) infinite;
}
.site-field--1 {
  --site-color: #0db8a8; --site-x: -25vw; --site-y: -28vh; --site-dx: 44vw; --site-dy: 30vh;
  --site-scale: 1; --site-dscale: .12; --site-opacity: .10; --site-dopacity: .02;
  --site-duration: 36s; --site-delay: -8s; --site-drift-x: 3vw; --site-drift-y: 2vh;
}
.site-field--2 {
  --site-color: #087d79; --site-x: 38vw; --site-y: 3vh; --site-dx: -52vw; --site-dy: 15vh;
  --site-scale: 1.15; --site-dscale: -.12; --site-opacity: .14; --site-dopacity: -.03;
  --site-duration: 44s; --site-delay: -22s; --site-drift-x: -3vw; --site-drift-y: 3vh;
}
.site-field--3 {
  --site-color: #1e4a63; --site-x: 4vw; --site-y: 36vh; --site-dx: 24vw; --site-dy: -60vh;
  --site-scale: 1.2; --site-dscale: .15; --site-opacity: .16; --site-dopacity: -.03;
  --site-duration: 40s; --site-delay: -17s; --site-drift-x: 2vw; --site-drift-y: -3vh;
}
.site-field--4 {
  --site-color: #123744; --site-x: -36vw; --site-y: 25vh; --site-dx: 65vw; --site-dy: -32vh;
  --site-scale: 1.05; --site-dscale: .2; --site-opacity: .12; --site-dopacity: .02;
  --site-duration: 28s; --site-delay: -11s; --site-drift-x: -2vw; --site-drift-y: -2vh;
}
.site-field--5 {
  --site-color: #0db8a8; --site-x: 35vw; --site-y: 48vh; --site-dx: -35vw; --site-dy: -22vh;
  --site-scale: .85; --site-dscale: .1; --site-opacity: .10; --site-dopacity: .01;
  --site-duration: 32s; --site-delay: -26s; --site-drift-x: 3vw; --site-drift-y: -2vh;
}
@keyframes site-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .92; }
  50% { transform: translate3d(var(--site-drift-x), var(--site-drift-y), 0) scale(1.04); opacity: 1; }
}
.site-atmosphere.site-atmosphere--paused .site-field__light { animation-play-state: paused; }
/* Align the background, canvas and poster fades; keep the copy and controls intact. */
.site-page .hero { --site-hero-fade-height: 180px; background: transparent; }
.site-page .hero::before {
  background: radial-gradient(ellipse at 50% 70%, rgba(55,160,169,.1), transparent 52%),
    linear-gradient(180deg, #050b12 0%, #07121d 63%, #07101a 100%);
}
.site-page .hero::before, .site-page .hero-stage::before,
.site-page #server-canvas, .site-page .hero-poster {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--site-hero-fade-height)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--site-hero-fade-height)), transparent);
}
/* Short desktop viewports need room for the live server and the cover-fitted poster. */
@media (max-height: 820px) and (min-width: 681px) {
  .site-page .hero { --site-hero-fade-height: 120px; }
}
.site-nav { gap: 24px; }
.site-nav :is(.brand, .nav-links, .nav-actions) { flex-shrink: 0; }
.site-nav :is(.nav-links a, .nav-cta) { white-space: nowrap; }

/* The loaded Persian font needs about 710px including gutters; keep a 10px reserve. */
@media (max-width: 720px) {
  .site-nav { top: 12px; height: 62px; border-radius: 15px; padding: 0 12px; }
  .site-nav.scrolled { top: 8px; height: 52px; padding-inline: 10px; }
  .site-nav .site-logo { height: 32px; }
  .site-nav.scrolled .site-logo { height: 28px; }
  .site-nav .nav-links { position: absolute; top: 72px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,18,28,.9); backdrop-filter: blur(20px); max-height: calc(100svh - 100px); overflow-y: auto; }
  .site-nav .nav-links.open { display: flex; }
  .site-nav.scrolled .nav-links { gap: 0; }
  .site-nav .nav-links a { padding: 9px 12px; }
  .site-nav .nav-links a:after { display: none; }
  .site-nav .nav-cta { padding: 8px 12px; font-size: 10px; }
  .site-nav.scrolled .nav-cta { padding: 7px 11px; font-size: 9px; }
  .site-nav .menu-btn { display: block; }
}

@media (max-width: 680px) {
  .site-field { width: 120vw; height: 90vh; }
  .site-field__light { filter: blur(36px); }
  .site-field--4, .site-field--5 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-atmosphere { --site-p: .45 !important; }
  .site-field { will-change: auto; }
  .site-field__light { animation: none; }
  .site-nav .site-logo { transition: none; }
}

.site-activity--paused,.site-activity--paused *,.site-activity--paused *::before,.site-activity--paused *::after{animation-play-state:paused!important}

.products-item__details{display:none}
@media (max-width:680px){
  .products:not([data-site-hydrated]) .products-index{display:flex;flex-direction:column;align-items:stretch}
  .products:not([data-site-hydrated]) .products-col{display:contents}
  .products:not([data-site-hydrated]) .products-group[data-group="Compute & Storage"]{order:0}
  .products:not([data-site-hydrated]) .products-group[data-group="Networking & Security"]{order:1}
  .products:not([data-site-hydrated]) .products-group[data-group="Components"]{order:2}
  .products:not([data-site-hydrated]) .products-group[data-group="Connectivity"]{order:3}
  .products:not([data-site-hydrated]) .products-group:not([data-group="Compute & Storage"]) .products-list{display:none}
  .products:not([data-site-hydrated]) .products-group__label{min-height:52px;padding:14px 0;font-size:13px}
  .products:not([data-site-hydrated]) .products-group[data-group="Compute & Storage"] .products-group__chev{transform:translateY(2px) rotate(-135deg)}
  .products:not([data-site-hydrated]) .products-row--active .products-row__name{color:rgba(230,243,241,.7);text-shadow:none}
  .products:not([data-site-hydrated]) .products-row--active .products-row__fa{color:var(--muted)}
  .products:not([data-site-hydrated]) .products-row__trace:before{transform:scaleX(0)}
}