/* =====================================================================
   HOME: homepage layer (index.html, bg/index.html)
   Loaded AFTER styles.css. Nothing here touches other pages.
   Patterns adapted from stan.vision: wide fluid container, rem scaling
   on large screens, underline wipes, stretched-link cards with arrow
   pop-in, expanding step panels, blur-the-rest hover, balanced headings.
   ===================================================================== */

/*: : : 1. TOKENS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
:root {
  --x-container: var(--page-max-width);         /* page width, set in css/styles.css :root */
  --x-gutter: var(--page-gutter);               /* side padding, set in css/styles.css :root */
  --x-ease: cubic-bezier(0.77, 0, 0.175, 1);    /* shared motion curve */
  --x-ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --x-dur: .35s;
  --x-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11L11 5M6 5h5v5'/%3E%3C/svg%3E");
}

/*: : : PAGE LOADER: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : Five brand-coloured panels sweep up in turn, then the cover lifts
   away. Removed by js/enhancements.js, which then drops the hero dot.
   Speed: .42s panel time, .09s gaps between delays, .75s before lifting,
   .48s lift. Whole loader ≈ 1.2s (was ≈ 2s); the dot lands at ≈ 2s.
   Panel colours follow the logo, ending on green. */
.page-load { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.page-load .curtain {
  position: absolute; inset: 0; overflow: hidden; background: var(--dark);
  transform-origin: 50% 0;
  animation: pl-close .48s cubic-bezier(.76,0,.24,1) .75s forwards;
}
.page-load .fold {
  position: absolute; inset: 0; transform: translateY(100%);
  animation: pl-up .42s cubic-bezier(.76,0,.24,1) forwards;
}
/* Logo colours, deep blue → green (last panel is green) */
.page-load .f1 { background: #1F5EC9;      animation-delay: .03s; }  /* logo deep blue */
.page-load .f2 { background: var(--blue);  animation-delay: .12s; }  /* #1875CC */
.page-load .f3 { background: var(--cyan);  animation-delay: .21s; }  /* #00C2C7 */
.page-load .f4 { background: #1FC7A0;      animation-delay: .30s; }  /* logo teal, cyan→green blend */
.page-load .f5 { background: var(--green); animation-delay: .39s; }  /* #3ECC6A */
@keyframes pl-up    { to { transform: translateY(0); } }
@keyframes pl-close { to { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .page-load { display: none; } }

/* (Floating-panel navbar moved to css/styles.css: it applies to every page.) */

/* (Large-screen scaling moved to css/styles.css: it applies to every page.) */

/*: : : 3. WIDER CONTAINER: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
/* (Content width and side padding are set for all pages by --page-max-width and
    --page-gutter in css/styles.css :root.) */

/* Hero inner: extra top padding */
.page-hero-inner { padding-top: 150px; }

/* (Hero heading size and width are set for all pages in css/styles.css.) */

/* All h2 30% bigger than styles.css
   (was h2: clamp(1.6rem, 2.8vw, 2.5rem); .final-cta h2: clamp(1.8rem, 4vw, 3.2rem)) */
h2 { font-size: clamp(2.08rem, 3.64vw, 3.25rem); }
.final-cta h2 { font-size: clamp(2.34rem, 5.2vw, 4.16rem); }

/* "What we do": numbered cards, one per row, each in its own pale colour.
   No hover effect or link. On desktop they stack (see the sticky block below);
   on smaller screens they simply follow each other.
   --i is the card's place in the stack (0-5); --cover is set by
   js/enhancements.js: how far the cards in front have covered this one. */
.x-offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
.x-offer {
  --i: 0;
  --card-bg: #DCEAF7;
  position: relative;
  padding: 2rem 1.6rem;
  border-radius: 28px;
  background: var(--card-bg);
  box-shadow: 0 12px 40px rgba(11, 30, 63, .08);
  transform-origin: 50% 0;
}
/* Six pale tints, one per card, in the order of the approved palette:
   blue, green, navy, cyan, teal, steel blue (accent colours in brackets). */
.x-offer:nth-child(1) { --i: 0; --card-bg: #DCEAF7; }   /* Blue (#1875CC) */
.x-offer:nth-child(2) { --i: 1; --card-bg: #DCF6E4; }   /* Green (#3ECC6A) */
.x-offer:nth-child(3) { --i: 2; --card-bg: #DFE3ED; }   /* Navy (#1A3A7C) */
.x-offer:nth-child(4) { --i: 3; --card-bg: #D4F5F5; }   /* Cyan (#00C2C7) */
.x-offer:nth-child(5) { --i: 4; --card-bg: #DDF3EF; }   /* Teal (#168F83) */
.x-offer:nth-child(6) { --i: 5; --card-bg: #E7EFF8; }   /* Steel blue (#577DAF) */
/* Darkens a card a little as others stack in front of it */
.x-offer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0B1E3F;
  opacity: calc(var(--cover, 0) * .04);
  pointer-events: none;
}
.x-offer h3 {
  font-size: clamp(1.755rem, 2.6vw, 2.275rem);   /* 30% up from clamp(1.35rem, 2vw, 1.75rem) */
  line-height: 1.3;
  margin-bottom: 2rem;   /* space between heading and text (was 1rem) */
}
.x-offer-num { color: var(--blue); }
.x-offer p { max-width: 75ch; }
.x-offer p + p { margin-top: .85rem; }
/* a paragraph left empty in a translation (no counterpart in that language) takes no space */
.x-offer p:empty { display: none; }
.x-offer-lead {
  font-weight: 500;
  font-size: var(--fs-lead);
  color: var(--txt-head);
}

/* Sticky stacking: each card pins below the fixed 70px nav and the next
   card slides up over it. Desktop only. Cards are opaque, so the covered
   card is simply hidden; js/enhancements.js scales it back and darkens it
   a little. Each card pins 16px lower than the one before (--i), so the
   top edges of the cards behind stay visible like a deck.
   "overflow: clip" replaces "hidden" on body and this section, because
   "hidden" creates a scroll container and stops sticky from working. */
@media (min-width: 991px) {
  body { overflow-x: clip; }
  #solutions.section-glow-soft { overflow: clip; }

  /* The heading is not pinned: it scrolls away after the first card, so the
     cards pin directly under the nav. */
  #solutions .sec-head-center {
    margin-bottom: 0;
    padding: 1.5rem 0 .5rem;
  }
  #solutions .x-offers { margin-top: 0; }

  .x-offers { gap: 0; }
  .x-offer {
    position: sticky;
    top: calc(70px + var(--i) * 16px);
    /* every card ends 24px above the bottom of the screen */
    min-height: calc(100dvh - 70px - var(--i) * 16px - 24px);
    padding: 3rem 3.5rem;
  }
  /* Scroll-linked, so the reveal fade would only delay the card */
  .x-offers .x-offer.fade-up { opacity: 1; transform: none; transition: none; }
  /* Content centred in the card (the picture column keeps its own top) */
  .x-offers .x-offer.has-media { align-content: center; }
}

/* Hero full stop that drops and bounces into place (js/enhancements.js).
   inline-block so it can be transformed; squashes from its base. */
.hero-dot {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Use the extra width: more columns on large screens */
@media (min-width: 1280px) {
  .offer-grid-2x2 { grid-template-columns: repeat(4, 1fr); }
  .industry-grid  { grid-template-columns: repeat(6, 1fr); }
}

/*: : : 4. TYPOGRAPHY POLISH: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--blue); color: #fff; text-shadow: none; }

/* Smoother, longer reveal using the shared curve */
.fade-up {
  transition:
    opacity .7s var(--x-ease-out),
    transform .7s var(--x-ease-out);
}

/*: : : 5. SPLIT SECTION HEAD (title left, action right): : : : : : : : : : : : : : : */
.x-split-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.x-split-head h2 { max-width: 20ch; }
.x-split-head .btn { flex-shrink: 0; }

/*: : : 6. STRETCHED-LINK CARDS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : The whole card is clickable (the link's ::after covers it), an arrow
   circle pops in top-right, and the link text gets an underline wipe. */
.offer-card,
.router-card { position: relative; }

.offer-card .offer-link,
.router-card .router-link {
  position: static;
  align-self: flex-start;
  display: inline-flex;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  padding-bottom: 2px;
  transition: background-size .55s var(--x-ease-out), color .2s ease;
}

/* Full-card hit area */
.offer-card .offer-link::after,
.router-card .router-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

/* Arrow circle */
.offer-card .offer-link::before,
.router-card .router-link::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--x-arrow) center / 1rem no-repeat, var(--grad);
  transform: scale(0);
  opacity: 0;
  transition:
    transform var(--x-dur) var(--x-ease),
    opacity var(--x-dur) ease;
  pointer-events: none;
}

/* Keep headings clear of the arrow */
.offer-card h3,
.router-card .router-question { padding-right: 2.75rem; }

@media (hover: hover) {
  .offer-card:hover .offer-link,
  .router-card:hover .router-link { background-size: 100% 1.5px; }

  .offer-card:hover .offer-link::before,
  .router-card:hover .router-link::before {
    transform: scale(1);
    opacity: 1;
  }

  /* Card fill on hover (brand tint instead of stan.vision's lime) */
  .offer-card:hover,
  .router-card:hover { background: #F5FAFF; }
}

/* Keyboard users: focus ring on the whole card */
.offer-card:has(.offer-link:focus-visible),
.router-card:has(.router-link:focus-visible) {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.offer-link:focus-visible,
.router-link:focus-visible { outline: none; }
.offer-card:has(.offer-link:focus-visible) .offer-link::before,
.router-card:has(.router-link:focus-visible) .router-link::before {
  transform: scale(1);
  opacity: 1;
}

/*: : : 7. EXPANDING STEP PANELS: moved to css/styles.css (shared x-steps component) */

/*: : : 8. INDUSTRIES MAP: moved to css/styles.css (shared ind-map component) */

/*: : : 9. REDUCED MOTION: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/*: : : 10. COMMITMENT SECTION ("Strategic Partnership. Committed Until It Works."): : : Left: lead paragraph + 5-step timeline that fills on scroll.
   Right: proof cards (industry VS Ynnovative, lifetime bars, 100%) that
   count up on scroll, with a cursor-following cyan glow on hover.
   js/enhancements.js adds .is-in to .commit-track and .commit-grid. */
.commit-lead{margin:18px 0 0;max-width:520px;font-size:var(--fs-lead);line-height:1.65;color:rgba(255,255,255,.72)}
.commit-lead strong{color:#fff;font-weight:600}
.commit-track{position:relative;margin:64px 0 62px;max-width:540px;padding-top:34px}
.commit-track-line{position:absolute;left:10px;right:10px;top:43px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.commit-track-line::before{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#1875CC 0%,#00C2C7 55%,#3ECC6A 100%);transition:transform 1.8s cubic-bezier(.65,0,.35,1) .3s}
.commit-track.is-in .commit-track-line::before{transform:scaleX(1)}
.commit-steps{position:relative;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.commit-step{position:relative;display:flex;flex-direction:column;align-items:center;width:20px;text-align:center}
.commit-dot{width:20px;height:20px;border-radius:50%;background:#0B1E3F;border:2px solid rgba(255,255,255,.25);transition:border-color .4s,background .4s,box-shadow .4s;transition-delay:calc(.3s + var(--i) * .36s)}
.commit-track.is-in .commit-dot{border-color:#00C2C7;background:#12305e;box-shadow:0 0 0 4px rgba(0,194,199,.12)}
.commit-step span{position:absolute;top:30px;white-space:nowrap;font:600 12.5px/1.2 Montserrat,sans-serif;color:rgba(255,255,255,.55);transition:color .4s;transition-delay:calc(.3s + var(--i) * .36s)}
.commit-track.is-in .commit-step span{color:#fff}
.commit-step:first-child span{left:0}
.commit-step:last-child span{right:0}
/* a long label between the first and last (e.g. Bulgarian "Въвеждане в работа") wraps onto two lines under its dot instead of running into its neighbour */
.commit-step:not(:first-child):not(:last-child) span{width:max-content;max-width:88px;white-space:normal;text-align:center}
.commit-track.is-in .commit-step.is-beyond .commit-dot{border-color:#3ECC6A;box-shadow:0 0 0 4px rgba(62,204,106,.15),0 0 18px rgba(62,204,106,.5)}
.commit-track.is-in .commit-step:last-child .commit-dot{animation:commitPing 2.2s ease-out 2.4s infinite}
@keyframes commitPing{0%{box-shadow:0 0 0 0 rgba(62,204,106,.55)}100%{box-shadow:0 0 0 14px rgba(62,204,106,0)}}
.commit-stop{position:absolute;top:-34px;left:50%;transform:translate(-50%,6px);white-space:nowrap;font:600 11px/1 Montserrat,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);opacity:0;transition:opacity .5s 1.4s,transform .5s 1.4s}
.commit-stop::after{content:"";position:absolute;left:50%;top:16px;height:14px;border-left:1px dashed rgba(255,255,255,.35)}
.commit-track.is-in .commit-stop{opacity:1;transform:translate(-50%,0)}
.commit-keep{position:absolute;top:-34px;right:0;display:inline-flex;align-items:center;gap:2px;white-space:nowrap;font:700 11px/1 Montserrat,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#3ECC6A;opacity:0;transition:opacity .5s 2.2s}
.commit-track.is-in .commit-keep{opacity:1}
.commit-chev{width:1.15em;height:1.15em;vertical-align:-.22em;margin-left:.2em}
.commit-keep .commit-chev{margin-left:0}
.commit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.commit-card{position:relative;border-radius:18px;padding:26px 24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.commit-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(0,194,199,.18),transparent 60%)}
.commit-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(0,194,199,.9),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.commit-card:hover{transform:translateY(-3px)}
.commit-card:hover::before,.commit-card:hover::after{opacity:1}
.commit-num{font:900 clamp(34px,3.4vw,44px)/1 Montserrat,sans-serif;letter-spacing:-.02em;background:linear-gradient(90deg,#1875CC,#00C2C7);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(0,194,199,.25))}
.commit-label{margin-top:10px;font:700 15px/1.3 Montserrat,sans-serif;color:#fff}
.commit-sub{margin-top:4px;font-size:var(--fs-small);line-height:1.45;color:rgba(255,255,255,.55)}
.commit-vs{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.commit-vs-side.is-industry .commit-num{background:none;color:rgba(255,255,255,.38);filter:none}
.commit-vs-side.is-industry .commit-label{color:rgba(255,255,255,.62)}
.commit-vs-tag{display:inline-block;margin-bottom:10px;font:700 10.5px/1 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.18)}
.commit-vs-side.is-us .commit-vs-tag{color:#00C2C7;border-color:rgba(0,194,199,.5)}
.commit-vs-mid{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 Montserrat,sans-serif;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.commit-zero{display:flex;align-items:center;gap:12px}
.commit-bars{margin-top:16px;display:grid;gap:9px}
.commit-bar{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.6)}
.commit-bar i{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.commit-bar i::before{content:"";display:block;height:100%;width:var(--w);border-radius:inherit;transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.65,0,.35,1) calc(.4s + var(--d,0s))}
.commit-bar.is-us i::before{background:linear-gradient(90deg,#1875CC,#00C2C7)}
.commit-bar.is-ind i::before{background:rgba(255,255,255,.35)}
.commit-grid.is-in .commit-bar i::before{transform:scaleX(1)}
.commit-bar b{font-weight:700;color:#fff}
@media (max-width:640px){
  .commit-grid{grid-template-columns:1fr}
  .commit-vs{grid-template-columns:1fr;gap:14px}
  .commit-vs-mid{justify-self:start}
  .commit-step span{font-size:11px}
  /* five labels do not fit in one row on a phone: every second one drops to a second row */
  .commit-step:nth-child(even) span{top:52px}
  .commit-track{margin-bottom:86px}
  .commit-stop,.commit-keep{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .commit-track *,.commit-track *::before,.commit-grid *,.commit-grid *::before{transition:none !important;animation:none !important}
}

/*: : : 11. DYNAMICS 365 SECTION ("Core Business"): : : : : : : : : : : : : : : : : : : : Navy glass panel in the centre; three module cards overlap its top edge
   and three its bottom edge. Cards match .router-card ("Your Challenges").
   js/enhancements.js adds .is-in on scroll, then .is-done (hover lift).
   The CTA uses the site's .btn.btn-secondary (as in "Take the Next Step"). */
.d3-stage{position:relative;padding:20px 0 10px}
.d3-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0 44px}

/* cards: same style as .router-card */
.d3-card{position:relative;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #D9E6F5;border-radius:12px;padding:28px;
  box-shadow:0 14px 40px rgba(2,8,23,.22);opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s}
.d3-card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,#1875CC,#00C2C7);
  transform:scaleX(0);transform-origin:left;transition:transform .38s}   /* hidden until hover, grows from the left (as .router-card) */
.d3-card:hover::after{transform:scaleX(1)}
.d3-row.top .d3-card{transform:translateY(-40px)}
.d3-row.bottom .d3-card{transform:translateY(40px)}
.d3-row .d3-card:nth-child(2){--off:-18px}
.d3-row.bottom .d3-card:nth-child(2){--off:18px}
.d3-stage.is-in .d3-card{opacity:1;transform:translateY(var(--off,0px));
  transition:transform .9s cubic-bezier(.34,1.56,.64,1) calc(.25s + var(--i) * .09s),opacity .5s calc(.25s + var(--i) * .09s),box-shadow .35s,border-color .35s}
.d3-stage.is-done .d3-card{transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s}
.d3-stage.is-done .d3-card:hover{transform:translateY(calc(var(--off,0px) - 8px));box-shadow:0 22px 50px rgba(2,8,23,.3);border-color:#B9D6F2}
.d3-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.d3-card h3{margin:4px 0 0;font:700 18.24px/1.35 Montserrat,sans-serif;color:#0B1E3F}
.d3-ico{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#EBF3FD;color:#1875CC;
  transition:background .3s,color .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.d3-ico svg{width:23px;height:23px}
.d3-card:hover .d3-ico{background:linear-gradient(135deg,#1875CC,#00C2C7);color:#fff;transform:rotate(-8deg) scale(1.06)}
.d3-card p{margin:12px 0 16px;font:400 var(--fs-card-body)/1.68 "DM Sans",sans-serif;color:#3D5070}
.d3-more{display:inline;margin-top:auto;font:700 14.4px/1.65 Montserrat,sans-serif;color:#1875CC;text-decoration:none;transition:color .18s}
/* cyan only on hover (card or link), as the "Your Challenges" links */
.d3-card:hover .d3-more,.d3-more:hover{color:var(--cyan)}
.d3-more svg{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-left:3px;transition:transform .25s}
.d3-more:hover svg{transform:translateX(3px)}

/* centre panel: navy glass */
.d3-panel{position:relative;z-index:1;margin:-104px 0;padding:170px 48px;border-radius:44px;text-align:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 50% 0%,rgba(0,194,199,.22),transparent 60%),radial-gradient(ellipse at 50% 100%,rgba(24,117,204,.30),transparent 60%),linear-gradient(180deg,#132D57 0%,#0E2449 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 60px rgba(0,194,199,.10),inset 0 1px 0 rgba(255,255,255,.08);   /* no border */
  transform:scale(.96);opacity:0;transition:transform 1s cubic-bezier(.34,1.3,.64,1),opacity .6s}
.d3-stage.is-in .d3-panel{transform:none;opacity:1}
/* (grid mesh removed) */
.d3-panel::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;left:50%;top:50%;border-radius:50%;
  background:radial-gradient(circle,rgba(24,117,204,.35),transparent 65%);transform:translate(-50%,-50%);animation:d3Glow 6s ease-in-out infinite}
@keyframes d3Glow{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
.d3-panel h2{margin:18px auto 0;max-width:900px;font:900 clamp(34px,4.4vw,58px)/1.12 Montserrat,sans-serif;color:#fff;letter-spacing:-.01em}
.d3-hl{background:linear-gradient(90deg,#1875CC,#00C2C7);-webkit-background-clip:text;background-clip:text;color:transparent}
.d3-sub{margin:20px auto 0;max-width:560px;font-size:var(--fs-lead);line-height:1.6;color:rgba(255,255,255,.72)}
.d3-panel .d3-cta{margin-top:30px}   /* .btn.btn-secondary.btn-lg provides the look */

@media (max-width:980px){
  .d3-row{grid-template-columns:1fr 1fr;padding:0 12px}
  .d3-row .d3-card:nth-child(3){grid-column:1 / -1}
  .d3-row .d3-card:nth-child(2),.d3-row.bottom .d3-card:nth-child(2){--off:0px}
}
@media (max-width:640px){
  .d3-row{grid-template-columns:1fr;gap:16px;padding:0}
  /* phones: panel first, then all six cards */
  .d3-stage{display:flex;flex-direction:column}
  .d3-panel{order:-1;margin:0 0 24px;padding:56px 22px;border-radius:28px}
  .d3-row.bottom{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){
  .d3-stage *{transition:none !important;animation:none !important;opacity:1 !important}
}

/*: : : 12. LANGUAGE MENU: open on hover (desktop), like the other menus: : : The click script in js/components.js stays for mobile / touch. */
/* мост между бутона и менюто, за да не се затваря при слизане с мишката */
.lang-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

/* десктоп: отваряне при посочване, като останалите менюта */
@media (min-width:861px){
  .lang-switch:hover .lang-menu,
  .lang-switch:focus-within .lang-menu{opacity:1;visibility:visible;transform:none;
    transition:opacity .22s,transform .3s cubic-bezier(.34,1.45,.5,1)}
  .lang-switch:hover .lang-btn{background:rgba(255,255,255,.75);border-color:rgba(24,117,204,.35);color:#1875CC}
  .lang-switch:hover .lang-caret,
  .lang-switch:focus-within .lang-caret{transform:rotate(180deg)}
}

/*: : : 13. PRODUCT ICONS in "Unified Data & Cloud" cards: : : Official Microsoft icons (assets/icons/): Fabric + Power BI from the
   Microsoft Fabric icon pack, AI Foundry + Azure from the Azure icon pack. */
.offer-card .x-prod-icon{display:block;width:48px;height:48px;margin-bottom:.35rem}

/*: : : 14. DYNAMICS 365 LOGOS + NO LONE ARROWS: : : Official icons from Microsoft's Dynamics 365 icon pack (assets/icons/). */
/* Dynamics 365 logo: large, faint watermark centred behind the panel text.
   z-index -1 keeps it behind the text (the panel isolates its own stacking). */
.d3-logo{position:absolute;left:50%;top:50%;z-index:-1;width:min(420px,70%);height:auto;
  transform:translate(-50%,-50%);opacity:.29;pointer-events:none;user-select:none}
.d3-ico.is-logo img{width:30px;height:30px;display:block}
/* full-colour logos: keep the light tile on hover (only the tilt), not the gradient fill */
.d3-card:hover .d3-ico.is-logo{background:#EBF3FD}

/* keeps a trailing chevron together with the word before it,
   so the arrow never wraps onto a line of its own */
.x-nowrap{white-space:nowrap}

/*: : : 15. TRUST STRIP at the bottom of the hero (client logos): : : The hero background is a gradient, so the strip's edges fade with a mask
   instead of the flat --bg-soft overlays used on the contact page. */
.page-hero .trust-strip{margin:3rem 0 0}
.page-hero .trust-strip-track{animation-duration:47s}   /* 15% quicker than the 55s default */
.page-hero .trust-strip-track-wrap{
  max-width:none;margin:0;   /* full container width, as on the contact page (was capped at 600px) */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent)}
.page-hero .trust-strip-track-wrap::before,
.page-hero .trust-strip-track-wrap::after{display:none}
@media (prefers-reduced-motion:reduce){.page-hero .trust-strip-track-wrap{-webkit-mask-image:none;mask-image:none}}   /* the logos wrap instead of scrolling */

/*: : : 16. "What we do the best" block with a picture on the right: : : Text takes 3/5 of the width, the picture 2/5. Stacks below 991px. */
.x-offer-media{margin:1.5rem 0 0}
.x-offer-media img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--border);box-shadow:0 18px 44px rgba(11,30,63,.14)}
@media (min-width:991px){
  .x-offer.has-media{display:grid;grid-template-columns:3fr 2fr;column-gap:3rem;align-content:start}
  .x-offer.has-media > *{grid-column:1}
  .x-offer.has-media > .x-offer-side{grid-column:2;grid-row:1 / span 12;align-self:start}
  .x-offer.has-media .x-offer-media{margin:0}

  /* Desktop: the screenshot is shown enlarged and cropped. The frame is
     nearly square; the image fills its height, is anchored to the left edge,
     and whatever doesn't fit is hidden on the right (about half of it).
     Same single image as on mobile, where it shows in full. */
  .x-offer.has-media{padding-bottom:2.5rem}   /* air between the picture and the next block's top line */
  .x-offer.has-media .x-offer-media{
    /* An explicit height (not aspect-ratio): the block then grows to contain the
       picture instead of letting it spill into the next block. Roughly square at
       desktop widths, and never taller than what fits in one screen under the
       pinned nav (70px). */
    height:min(clamp(320px,36vw,540px), calc(100dvh - 70px - 50px - 2.5rem - 1rem));
    overflow:hidden;
    border-radius:12px 0 0 12px;   /* square right edge: the picture "continues" past it */
    border:1px solid var(--border);border-right:0;
    box-shadow:0 18px 44px rgba(11,30,63,.14)}
  .x-offer.has-media .x-offer-media img{
    width:100%;height:100%;object-fit:cover;object-position:left top;
    border:0;border-radius:0;box-shadow:none}
}

/*: : : 16b. Option: desktop pictures shown whole instead of cropped: : : On: add .x-offers--whole-media to <div class="x-offers"> in index.html.
   Off: remove that class to go back to the enlarged, cropped view above.
   The picture keeps its own proportions at the column width, with a full
   rounded frame (pictures that are already whole are not affected). */
@media (min-width:991px){
  .x-offers--whole-media .x-offer.has-media .x-offer-media:not(.is-whole){
    height:auto;border:1px solid var(--border);border-radius:12px}
  .x-offers--whole-media .x-offer.has-media .x-offer-media:not(.is-whole) img{
    height:auto;object-fit:contain}
}

/*: : : 17. Wide picture shown whole (e.g. two phones side by side): : : Transparent background: no frame, not cropped; full column width on
   mobile, and on desktop the picture sets its own height instead of the
   near-square frame, so there are no empty bands. */
.x-offer-media.is-whole img{border:0;box-shadow:none;border-radius:0}
@media (min-width:991px){
  .x-offer.has-media .x-offer-media.is-whole{height:auto;border:0;box-shadow:none;border-radius:0;overflow:visible}
  .x-offer.has-media .x-offer-media.is-whole img{height:auto}
}

/*: : : 18. TECHNOLOGY GRID: logos assemble on scroll: : : 11 x 3 grid of 59px tiles (11.8px gap, 5.5px radius). The 5 .scatter tiles
   sit absolutely inside a cell-sized wrapper, so their grid slots stay
   reserved while js/enhancements.js animates them in. Static on mobile. */
.x-tech{text-align:center}
.x-tech .sec-head-center{margin-bottom:0}
.x-tech-sub{max-width:640px;margin:1rem auto 0}
.x-tech-grid{display:grid;grid-template-columns:repeat(11,59px);gap:11.8px;justify-content:center;margin:3rem auto 2.75rem}
.x-tech-cell{position:relative;width:59px;height:59px}
.x-tech-tile{width:59px;height:59px;border-radius:5.5px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(11,30,63,.06),0 6px 16px rgba(11,30,63,.07)}
.x-tech-tile img{display:block;width:100%;height:100%;object-fit:contain;padding:12px}
.x-tech-cell .scatter{position:absolute;inset:0;z-index:2;will-change:transform,filter}
.x-tech-btn{margin-top:.25rem}
.x-tech-trim{display:none !important}   /* last, incomplete row on phones and tablets (js/enhancements.js) */
@media (max-width:991px){
  .x-tech-grid{grid-template-columns:repeat(6,52px);gap:10px;margin:2.25rem auto 2rem}
  .x-tech-cell,.x-tech-tile{width:52px;height:52px}
  .x-tech-tile img{padding:10px}
}
@media (max-width:420px){
  .x-tech-grid{grid-template-columns:repeat(5,52px)}
}
/* landing pulse: a cyan ring rings out of a tile when it lands (js adds .is-landed) */
.x-tech-tile.is-landed{animation:xTechLand .8s ease-out}
@keyframes xTechLand{
  0%{box-shadow:0 1px 2px rgba(11,30,63,.06),0 6px 16px rgba(11,30,63,.07),0 0 0 0 rgba(0,194,199,.55)}
  100%{box-shadow:0 1px 2px rgba(11,30,63,.06),0 6px 16px rgba(11,30,63,.07),0 0 0 16px rgba(0,194,199,0)}
}
@media (prefers-reduced-motion:reduce){.x-tech-tile.is-landed{animation:none}}

/*: : : 20. Caption above the hero numbers: : : "Our team's combined delivery experience" heads the three figures. The thin
   line that sat above the numbers moves above the caption instead. */
.hero-proof-caption{max-width:none;margin:0;padding-top:1.6rem;border-top:1px solid var(--border-soft);
  font:700 .75rem/1.3 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-muted)}
.hero-proof-caption + .hero-proof{border-top:0;padding-top:.9rem}
@media (max-width:600px){
  .hero-proof-caption{margin-top:3.5rem;text-align:center}
  .hero-proof-caption + .hero-proof{margin-top:.9rem !important}
}

/*: : : 21. Commitment timeline without the "Most partners stop here" /
   "We keep going" labels: remove the space reserved for them above the line.
   Pages that still have the labels (e.g. /bg/) keep the original spacing. */
.commit-track:not(:has(.commit-stop)){padding-top:0;margin-top:44px}
.commit-track:not(:has(.commit-stop)) .commit-track-line{top:9px}

/*: : : 22. Footnote under the Commitment proof cards (source for the 50% figure): : : */
.x-fn-ref{display:inline-block;margin-left:2px;font-size:.7em;line-height:1;vertical-align:super;color:var(--cyan);text-decoration:none}
.x-fn-ref:hover{text-decoration:underline}
.x-footnote{grid-column:1 / -1;max-width:none;margin:4px 0 0;font-size:12px;line-height:1.55;color:rgba(255,255,255,.5)}
.x-footnote .x-fn-num{display:inline-block;margin-right:4px;font-size:.85em;vertical-align:super;color:var(--cyan)}
.x-footnote:target{color:rgba(255,255,255,.8)}

/*: : : HOMEPAGE HERO: 3D logo (as a large object behind the headline): : : : */
.hero-3d {
  position: absolute;
  z-index: 0;
  right: max(2rem, 4vw);
  top: 44%;
  height: min(43.4vh, 420px);   /* 30% smaller than the first version (62vh / 600px) */
  width: auto;
  transform: translateY(-50%) rotate(-4deg);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 30px 50px rgba(24, 117, 204, .28));
  animation: hero3dIn 1.1s cubic-bezier(.2, .8, .2, 1) both, hero3dFloat 8s ease-in-out 1.1s infinite;
}
@keyframes hero3dIn {
  from { opacity: 0; transform: translateY(calc(-50% + 40px)) rotate(-10deg) scale(.92); }
  to   { opacity: 1; transform: translateY(-50%) rotate(-4deg) scale(1); }
}
@keyframes hero3dFloat {
  0%, 100% { transform: translateY(-50%) rotate(-4deg); }
  50%      { transform: translateY(calc(-50% - 14px)) rotate(-2deg); }
}
@media (max-width: 991px) {
  /* phones and tablets: the object sits above the headline, so it never covers the text */
  .hero-3d { height: clamp(105px, 18.2vh, 182px); right: 1.25rem; top: 5.2rem; opacity: 1; }
  @keyframes hero3dIn { from { opacity: 0; transform: rotate(-10deg) scale(.92); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
  @keyframes hero3dFloat { 0%, 100% { transform: rotate(-4deg); } 50% { transform: translateY(-8px) rotate(-2deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-3d { animation: none; }
}

/* Positioning context for the "What we do" pictures (the old pixel-reveal canvas was removed). */
.x-offer-media { position: relative; }

/*: : : EDGE LINE (js/edge-reveal.js; also in css/section-nav.css for Solutions): : : */
.edge-line {
  position: relative;
  z-index: 5;
  height: 0;
  pointer-events: none;
}
.edge-line__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #1875CC 22%, #00C2C7 50%, #3ECC6A 78%, transparent 100%);
}
.edge-line__glow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 28px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 194, 199, .22), rgba(24, 117, 204, 0) 70%);
}

/* "Explore more" at the bottom of each "What we do" card: same size and look in every card;
   it sits right under the last paragraph, before the picture (the picture is in .x-offer-side, the grid's second column on desktop). */
.x-offer-link {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .6rem 0;   /* about 44px tall to tap */
  font-weight: 700;
  color: var(--txt-head);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-thickness .15s ease, color .15s ease;
}
.x-offer-link:hover { text-decoration-thickness: 4px; }
.x-offer-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
@media (min-width: 991px) {
  /* the link stays in the text column, right under the last paragraph */
  .x-offer.has-media > .x-offer-link { justify-self: start; }
}