:root{
  --navy:#0f1012;--navy2:#191a1d;--navy3:#232427;--navy4:#303135;  /* graphite (neutral, was navy-blue) */
  --red:#e23232;--red2:#ff4d4a;
  --accent:#6366f1;            /* electric indigo — secondary accent */
  --accent2:#22d3ee;           /* cyan spark — used sparingly */
  --white:#f3f2f0;--muted:#96a7bf;--muted2:#c8d2e0;--nav-link:#d4dce8;
  --border:rgba(255,255,255,0.10);--border2:rgba(255,255,255,0.16);
  --grad:linear-gradient(135deg,#ff5a36,var(--red));
  --grad-accent:linear-gradient(120deg,var(--red),var(--accent));

  /* modern refresh tokens (2026) */
  --red-rgb:226,50,50; --accent-rgb:99,102,241; --accent2-rgb:34,211,238;
  --r-sm:9px; --r-md:13px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --dur-1:.16s; --dur-2:.26s; --dur-3:.42s;
  --glass:rgba(15,16,18,.62);
  --surface:rgba(255,255,255,0.03); --surface-2:rgba(255,255,255,0.06);
  --shadow-1:0 1px 2px rgba(0,0,0,.28),0 6px 16px -8px rgba(0,0,0,.5);
  --shadow-2:0 6px 18px -6px rgba(0,0,0,.5),0 24px 50px -18px rgba(0,0,0,.6);
  --shadow-3:0 12px 30px -8px rgba(0,0,0,.5),0 44px 90px -28px rgba(0,0,0,.7);
  --ring:rgba(226,50,50,.6);
}

/* ═══ DARK THEME: lift the two hardcoded-faint texts site-wide ═══ */
html:not(.light) .wi-t{color:rgba(238,236,234,.9);}
html:not(.light) .nf-excerpt{color:rgba(238,236,234,.82);}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--navy);color:var(--white);overflow-x:clip;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:rgba(226,50,50,.3);color:#fff;}

/* PAGE SYSTEM */
.page{display:none;}
.page.active{display:block;}

/* ═══ NAV ═══ */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:64px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;
  background:rgba(15,16,18,0.97);
  backdrop-filter:blur(16px);
  z-index:300;
}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:18px;letter-spacing:1px;color:var(--white);cursor:pointer;}
.logo-red{color:var(--red);}
.nav-links{display:flex;gap:4px;list-style:none;}
.nav-links a{
  position:relative;
  text-decoration:none;color:var(--nav-link);font-size:13px;font-weight:500;letter-spacing:.2px;
  padding:8px 14px;border-radius:6px;cursor:pointer;
  transition:color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.nav-links a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:center;
  transition:transform var(--dur-3) var(--ease);
}
.nav-links a:hover{color:var(--white);transform:translateY(-1px);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:var(--white);}
.nav-right{display:flex;align-items:center;gap:10px;}
.lang-sw{display:flex;gap:2px;background:var(--navy3);border-radius:7px;padding:3px;border:1px solid var(--border);}
.lb{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;padding:5px 10px;border-radius:5px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:all var(--dur-1) var(--ease);}
.lb.on{background:var(--red);color:#fff;}
.nav-cta{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;padding:9px 20px;background:var(--red);color:#fff;border:none;border-radius:7px;cursor:pointer;transition:all var(--dur-1) var(--ease);white-space:nowrap;}
.nav-cta:hover{background:var(--red2);}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;z-index:310;position:relative;background:none;border:0;}
.burger span{display:block;width:22px;height:1.5px;background:var(--white);transition:transform .28s cubic-bezier(.23,1,.32,1),opacity .2s;}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mob-menu-close{align-self:flex-end;margin:12px 18px 4px;width:40px;height:40px;flex-shrink:0;border:1px solid var(--border2);border-radius:10px;background:transparent;color:var(--muted2);font-size:17px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s;}
.mob-menu-close:hover{color:var(--white);border-color:rgba(255,255,255,.3);}
.mob-menu-backdrop{position:fixed;inset:0;z-index:280;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);}
.mob-menu{display:none;flex-direction:column;background:var(--navy2);border-bottom:1px solid var(--border);position:fixed;top:64px;left:0;right:0;z-index:290;max-height:calc(100vh - 64px);overflow-y:auto;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);}
.mob-menu.open{display:flex;}
.mob-menu a{text-decoration:none;color:var(--muted2);font-size:15px;padding:15px 24px;border-bottom:1px solid var(--border);cursor:pointer;}
.mob-menu a:hover{color:var(--white);}

/* ═══ COMMON ═══ */
.section{padding:88px 48px;border-bottom:1px solid var(--border);}
.section-sm{padding:64px 48px;border-bottom:1px solid var(--border);}
.s-eye{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:14px;}
.s-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,2.5vw,34px);font-weight:700;letter-spacing:-1px;margin-bottom:40px;line-height:1.12;}
.s-title em{font-style:normal;color:var(--red);}
.btn-red{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;padding:11px 24px;background:var(--red);color:#fff;border:none;border-radius:7px;cursor:pointer;transition:all var(--dur-1) var(--ease);}
.btn-red:hover{background:var(--red2);}
.btn-ghost{font-family:'Inter',sans-serif;font-size:13px;font-weight:400;padding:11px 24px;background:transparent;color:var(--muted2);border:1px solid var(--border2);border-radius:7px;cursor:pointer;transition:all var(--dur-1) var(--ease);}
.btn-ghost:hover{color:var(--white);border-color:rgba(255,255,255,.3);}


/* ═══════════════════════════════
   PAGE: HOME
═══════════════════════════════ */
.hero{
  padding:clamp(48px,8vh,100px) 48px 44px;border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
  min-height:calc(100vh - 64px);
  min-height:calc(100svh - 64px);
  display:flex;flex-direction:column;justify-content:space-between;
  -webkit-user-select:none;user-select:none;
}
.hero-noise{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 70% 60% at 80% 20%,rgba(226,50,50,.09) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%,rgba(42,43,48,.85) 0%,transparent 70%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 80% at 60% 30%,black 10%,transparent 70%);
}
.hero-badge-row{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.h-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--border2);background:rgba(var(--red-rgb),.08);}
.h-badge-dot{width:6px;height:6px;background:var(--red);border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.h-badge span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);font-weight:500;}
.hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,4.4vw,58px);font-weight:800;line-height:1.02;letter-spacing:-0.03em;max-width:820px;margin-bottom:24px;position:relative;overflow-wrap:break-word;}
.hero-title em{font-style:normal;color:var(--red);}
.hero-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--border);position:relative;}
.hbc{padding:32px 0;border-right:1px solid var(--border);}
.hbc:last-child{border-right:none;}
.hbc:nth-child(2){padding:32px 40px;}
.hbc:nth-child(3){padding:32px 0 32px 40px;}
.hbc-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.hbc-num{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,4vw,60px);font-weight:700;letter-spacing:-0.02em;line-height:1;color:var(--white);}
.hbc-num .r{color:var(--red);font-size:.5em;vertical-align:.42em;margin-left:2px;font-weight:600;}
.hbc-since{display:inline-block;font-size:12px;color:var(--muted2);margin-top:14px;letter-spacing:.06em;padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.02);}
.hbc-desc{font-size:15px;line-height:1.7;color:var(--muted2);font-weight:400;max-width:340px;margin-bottom:24px;}
.hbc-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hero-top{position:relative;z-index:1;}
.hero-scroll{align-self:center;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px 0;color:var(--muted);}
.hero-scroll-txt{font-size:11px;letter-spacing:2px;text-transform:uppercase;}
.hero-scroll svg{width:22px;height:22px;animation:heroBob 1.8s ease-in-out infinite;}
@keyframes heroBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-scroll svg{animation:none;}}
/* Short desktop viewports: compress hero rhythm so the stats/CTA row never
   slips below the fold (e.g. 1366x768, 1280x720). Width-guarded so mobile,
   which uses min-height:auto, is untouched. */
@media(min-width:769px) and (max-height:820px){
  .hero{padding-top:clamp(36px,4.5vh,64px);padding-bottom:30px;}
  .hero-badge-row{margin-bottom:20px;}
  .hero-title{margin-bottom:18px;}
  .hero-diff{margin-top:18px;}
  .hero-scroll{margin:8px 0;}
  .hbc{padding-top:22px;padding-bottom:22px;}
  .hbc:nth-child(2){padding:22px 40px;}
  .hbc:nth-child(3){padding:22px 0 22px 40px;}
}

/* ── Cases-first hero: offer headline on top, a slider of real work fills the screen ── */
.hero--cases{justify-content:flex-start;gap:clamp(16px,2.6vh,30px);padding-top:clamp(28px,4.5vh,56px);padding-bottom:clamp(24px,3.4vh,44px);}
.hero--cases .hero-badge-row{margin-bottom:16px;}
.hero-lead{position:relative;z-index:1;}
.hero-lead-main{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;margin-top:20px;}
.hero-lead-l{min-width:0;flex:1 1 460px;}
.hero-lead-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(31px,4.3vw,56px);font-weight:800;line-height:1.03;letter-spacing:-.03em;margin:0;overflow-wrap:break-word;}
.hero-lead-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.hero-lead-sub{font-size:clamp(14px,1.25vw,16px);line-height:1.62;color:var(--muted2);font-weight:400;max-width:520px;margin:16px 0 0;}
.hero-lead-r{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex-shrink:0;}
.hero-lead-stats{display:flex;gap:28px;}
/* Proof numbers stay white (real credibility) but sit a scale-step below the H1 so they
   read as supporting proof, not a second headline. */
.hls-v{font-family:'Space Grotesk',sans-serif;font-size:clamp(21px,1.9vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--white);}
.hls-v .r{color:var(--red);font-size:.5em;vertical-align:.42em;margin-left:1px;font-weight:600;}
.hls-l{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:8px;max-width:118px;line-height:1.3;}
.hero-lead-actions{display:flex;gap:10px;flex-wrap:wrap;}
/* One dominant primary in the hero (filled vs. ghost is already the hierarchy — just give it more presence). */
.hero-lead-actions .btn-red{padding:14px 30px;}

.hero-cases-eye{margin:clamp(10px,1.6vh,16px) 0 0;}
.hero-cases{position:relative;z-index:1;flex:1 1 auto;display:flex;align-items:center;min-height:0;margin:0 -48px;}
.hero-cases-viewport{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);}
.hero-cases-track{display:flex;gap:16px;width:max-content;padding:12px 48px;cursor:grab;touch-action:pan-y;}
.hero-cases-track.dragging{cursor:grabbing;}
.hero-cases-track img{-webkit-user-drag:none;}
/* Image-first hero case cards: the screenshot is the hero of the card; text is pared
   back to the brand name + a small country pill + an arrow. These override the generic
   .cc chrome (padding/tags/metrics) that the class still carries for use elsewhere. */
/* Landscape (16:9) case cards: the screenshots are wide website captures, so a wide
   card window shows them in their natural shape. object-position:top anchors the site
   header + hero and crops the lower page band, so cards read as clean "top-of-site"
   previews instead of tall, aggressively-cropped slivers. Height follows from the
   media aspect + the name bar, and the flex strip centres the cards in the hero.
   min-height:0 + justify-content:flex-start RESET the generic .cc card (min-height:320px,
   space-between): those forced a card taller than media+name and space-between pushed the
   slack into one dead band between the screenshot and the name bar (52px desktop, 88px
   mobile). Keep both resets if you ever re-add chrome to this variant. */
.hero-cases .cc{width:clamp(320px,34vw,460px);height:auto;min-height:0;padding:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;}
.hero-cases .cc-media{position:relative;flex:0 0 auto;aspect-ratio:16/9;overflow:hidden;background:var(--navy3);}
.hero-cases .cc-shot{width:100%;height:100%;min-height:0;object-fit:cover;object-position:top center;border:0;border-radius:0;margin:0;display:block;transition:transform .6s var(--ease);}
.hero-cases .cc:hover .cc-shot{transform:scale(1.05);}
/* SVG placeholders are centred vector art, not page captures — keep them centred. */
.hero-cases .cc-shot[src*=".svg"]{object-position:center;}
.hero-cases .cc-country{position:absolute;top:10px;left:10px;z-index:1;font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#fff;background:rgba(15,16,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 10px;border-radius:999px;}
.hero-cases .cc-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-top:1px solid var(--border);}
.hero-cases .cc-name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.4px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-cases .cc-go{flex:0 0 auto;font-size:17px;line-height:1;color:var(--red);transition:transform .25s var(--ease);}
.hero-cases .cc:hover .cc-go{transform:translateX(4px);}
.hero-cases .reel-arrow{opacity:.5;}
.hero-cases:hover .reel-arrow{opacity:1;}
.hero-cases .reel-arrow-prev{left:8px;}
.hero-cases .reel-arrow-next{right:8px;}
@media(max-width:900px){
  .hero-lead-main{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:22px;}
  .hero-lead-l{flex:0 0 auto;}   /* column axis: keep flex-basis from becoming a height */
  .hero-lead-r{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;}
  .hero-lead-stats{gap:24px;}
}
@media(max-width:768px){
  .hero--cases{padding:64px 20px 30px;gap:22px;}
  .hero-lead-main{margin-top:18px;}
  .hero-cases{margin:0 -20px;}
  .hero-cases-track{padding:12px 20px;}
  .hero-cases-viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);}
  .hero-cases .reel-arrow{display:none;}
  /* Stack the right column and let the three stats SHARE the row width so long
     labels ("відвідувачів/міс") can never overflow the viewport (body is overflow-x:clip,
     so overflow shows as clipped text, not a scrollbar). */
  .hero-lead-r{flex-direction:column;align-items:stretch;gap:20px;}
  .hero-lead-stats{gap:14px;}
  .hero-lead-stats .hls{flex:1 1 0;min-width:0;}
  .hls-v{font-size:clamp(20px,6.4vw,28px);}
  .hls-l{max-width:none;font-size:10px;letter-spacing:.02em;margin-top:6px;}
  .hero-lead-actions{width:100%;}
  .hero-lead-actions>*{flex:1 1 auto;text-align:center;justify-content:center;}
}

/* Short desktop viewports (720p/768p laptops): trim the card width a touch so the strip
   stays compact under the offer headline. The cards are landscape/intrinsic-height now,
   so they clear the fold without a fixed height. */
@media(min-width:769px) and (max-height:820px){
  .hero-cases .cc{width:clamp(300px,30vw,410px);}
}

/* services on home */
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.sv-card{background:var(--navy);padding:32px 24px;position:relative;cursor:pointer;transition:background .25s;display:flex;flex-direction:column;gap:14px;}
.sv-card:hover{background:var(--navy3);}
.sv-card:hover .sv-arr{opacity:1;transform:translate(3px,-3px);}
.sv-n{font-size:11px;color:var(--red);letter-spacing:1px;}
.sv-icon{width:42px;height:42px;border-radius:10px;background:var(--navy3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;}
.sv-name{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:1.2;}
.sv-desc{font-size:13px;line-height:1.6;color:var(--muted2);font-weight:400;flex:1;}
.sv-arr{position:absolute;top:20px;right:20px;font-size:15px;color:var(--red);opacity:0;transition:all var(--dur-1) var(--ease);}

/* cases scroll */
.cases-scroll{overflow-x:auto;scrollbar-width:none;margin:0 -48px;padding:0 48px;}
.cases-scroll::-webkit-scrollbar{display:none;}
.cases-track{display:flex;gap:16px;width:max-content;padding-bottom:4px;}
.cc{
  width:360px;flex-shrink:0;
  background:var(--navy2);border:1px solid var(--border);border-radius:14px;
  padding:32px 28px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:320px;cursor:pointer;transition:border-color .25s,transform .25s;
}
.cc:hover{border-color:rgba(var(--red-rgb),.35);transform:translateY(-4px);}
.cc-flag{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.cc-flag span{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.cc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.cc-logo{height:28px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.8;}
.cc-name{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.5px;}
.cc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.c-tag{font-size:10px;padding:3px 10px;border:1px solid var(--border2);border-radius:var(--r-pill);color:var(--muted2);}
.cc-quote{font-size:13px;line-height:1.6;color:var(--muted2);font-style:italic;font-weight:400;border-left:2px solid var(--red);padding-left:12px;}
.cc-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px;}
.cc-metric{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:var(--white);letter-spacing:-.5px;line-height:1;}
.cc-metric span{font-size:11px;color:var(--muted);font-family:'Inter',sans-serif;display:block;margin-top:3px;}
.cc-link{font-size:11px;color:var(--red);font-weight:500;text-decoration:none;transition:opacity .2s;}
.cc-link:hover{opacity:.7;}

/* numbers */
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.num-cell{background:var(--navy2);padding:36px 28px;}
.num-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,4vw,58px);font-weight:700;letter-spacing:-0.035em;color:var(--white);line-height:1;}
.num-big .r{color:var(--red);}
.num-label{font-size:13px;color:var(--muted2);margin-top:10px;font-weight:400;line-height:1.5;}

/* why */
.why-grid{display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:start;}
.why-sticky{position:sticky;top:88px;}
.why-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:20px;}
.why-title em{font-style:normal;color:var(--red);}
.why-sub{font-size:14px;color:var(--muted2);line-height:1.7;font-weight:400;margin-bottom:28px;}
.cert-badge{display:inline-flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--border2);border-radius:10px;}
.cert-top{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
.cert-val{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--white);}
.why-list{display:flex;flex-direction:column;}
.wi{padding:24px 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:44px 1fr;gap:12px;}
.wi:first-child{border-top:1px solid var(--border);}
.wi-n{font-size:11px;color:var(--red);font-weight:600;padding-top:3px;}
.wi-t{font-size:15px;line-height:1.65;color:rgba(238,236,234,.75);font-weight:400;}
.wi-t strong{color:var(--white);font-weight:500;}

/* integrations */
.int-groups{display:flex;flex-direction:column;gap:28px;margin-top:48px;}
.int-group-title{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:12px;}
.int-group-items{display:flex;flex-wrap:wrap;gap:8px;}
.int-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;
  background:var(--navy2);
  border:1px solid var(--border2);
  border-radius:var(--r-sm);
  cursor:default;
  transition:all var(--dur-1) var(--ease);
}
.int-pill.has-tip{cursor:pointer;}
.int-pill:hover{background:var(--navy3);border-color:rgba(255,255,255,.22);}
.int-pill.has-tip:hover{transform:translateY(-1px);border-color:rgba(var(--red-rgb),.5);}
.int-pill.has-tip:active{transform:translateY(0);}
.int-pill.has-tip:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.int-pill svg{width:15px;height:15px;flex-shrink:0;opacity:.8;}
.int-pill-name{font-size:13px;color:var(--muted2);font-weight:400;white-space:nowrap;}
.int-pill:hover .int-pill-name{color:var(--white);}

/* Integration tooltip ("облачко") — one shared floating bubble, JS-positioned.
   Shown on hover/focus (desktop) or tap (touch); hidden on leave/click-away. */
.int-tip{
  position:fixed;z-index:400;left:0;top:0;
  max-width:min(300px,calc(100vw - 24px));
  padding:11px 14px;
  background:#202127;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.62);
  opacity:0;transform:translateY(4px) scale(.98);
  pointer-events:none;
  /* visibility:hidden keeps the empty tooltip out of the accessibility tree while
     idle (an empty role="tooltip" has no accessible name and fails a11y audits);
     the 0s delay flips it back only after the fade-out finishes. When shown it is
     visible and takes its name from the injected .int-tip-name / .int-tip-desc text. */
  visibility:hidden;
  transition:opacity .15s var(--ease,ease),transform .15s var(--ease,ease),visibility 0s linear .15s;
  will-change:transform,opacity;
}
.int-tip.show{opacity:1;transform:translateY(0) scale(1);visibility:visible;transition:opacity .15s var(--ease,ease),transform .15s var(--ease,ease),visibility 0s;}
.int-tip-name{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:#fff;margin-bottom:4px;letter-spacing:-.2px;}
.int-tip-desc{display:block;font-size:12.5px;line-height:1.55;color:#b8b6b3;}
.int-tip::after{content:'';position:absolute;left:var(--arrow-x,24px);width:11px;height:11px;background:#202127;transform:translateX(-50%) rotate(45deg);}
.int-tip[data-place="top"]::after{bottom:-6px;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);}
.int-tip[data-place="bottom"]::after{top:-6px;border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);}
html.light .int-tip{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 18px 40px -14px rgba(15,23,42,.26);}
html.light .int-tip::after{background:#fff;}
html.light .int-tip[data-place="top"]::after{border-color:rgba(0,0,0,.1);}
html.light .int-tip[data-place="bottom"]::after{border-color:rgba(0,0,0,.1);}
html.light .int-tip-name{color:#0f172a;}
html.light .int-tip-desc{color:#475569;}

/* method */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.mc{background:var(--navy2);padding:40px 32px;}
.mc-tag{display:inline-block;padding:4px 12px;border-radius:var(--r-pill);font-size:10px;letter-spacing:1px;text-transform:uppercase;border:1px solid;margin-bottom:14px;}
.mc-tag.g{color:var(--accent);border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08);}
.mc-tag.b{color:var(--accent2);border-color:rgba(var(--accent2-rgb),.4);background:rgba(var(--accent2-rgb),.1);}
.mc-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:20px;}
.mc-steps{display:flex;flex-direction:column;gap:10px;}
.mc-step{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted2);font-weight:400;line-height:1.5;}
.mc-dot{width:5px;height:5px;background:var(--red);border-radius:50%;flex-shrink:0;margin-top:7px;}

/* cta block — a centred closing statement (no empty gutters) */
.cta-block{padding:96px 48px;background:var(--navy);border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;}
.cta-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-1.5px;line-height:1.08;max-width:18ch;}
.cta-title em{font-style:normal;color:var(--red);}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;}
.cta-start{font-size:15px;padding:14px 28px;text-decoration:none;}
.cta-block .btn-ghost{text-decoration:none;}
.cta-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;font-size:14px;color:var(--muted);margin:0;}
.cta-contact a{color:var(--muted2);text-decoration:none;transition:color .2s;}
.cta-contact a:hover{color:var(--red);}
.cta-dot{color:var(--muted);opacity:.55;}

/* footer — brand + link columns over a thin copyright bar */
footer{padding:0;background:var(--navy2);border-top:1px solid var(--border);}
.f-inner{max-width:1240px;margin:0 auto;padding:56px 48px 26px;}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid var(--border);}
.f-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:340px;}
.f-logo{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:22px;letter-spacing:1px;color:var(--white);text-decoration:none;}
.f-tagline{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;}
.f-contact{display:flex;flex-direction:column;gap:7px;margin-top:2px;}
.f-contact a{font-size:14px;font-weight:600;color:var(--muted2);text-decoration:none;white-space:nowrap;transition:color .2s;}
.f-contact a:hover{color:var(--red);}
.f-col{display:flex;flex-direction:column;gap:11px;}
.f-col-h{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:3px;}
.f-col a{font-size:13.5px;color:var(--muted2);text-decoration:none;width:fit-content;transition:color .2s,transform .2s;}
.f-col a:hover{color:var(--white);transform:translateX(3px);}
/* "All services →" — closes the deep-link column without reading as one more service */
.f-col a.f-col-all{margin-top:3px;font-weight:600;color:var(--red);}
.f-col a.f-col-all:hover{color:var(--red2);}
/* Footer NAP address block (local-SEO signal, present on every page) */
.f-addr{display:flex;flex-direction:column;gap:3px;margin-top:2px;}
.f-addr-l{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:600;}
.f-addr-v{font-size:13px;line-height:1.5;color:var(--muted2);text-decoration:none;transition:color .2s;}
a.f-addr-v:hover{color:var(--white);text-decoration:underline;text-underline-offset:2px;}
.f-base{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;}
.f-copy{font-size:12px;color:var(--muted);}

/* developer credit */
.f-credit{display:flex;align-items:center;gap:12px;}
.f-credit-ava{
  position:relative;width:42px;height:42px;flex-shrink:0;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  border:1.5px solid var(--border2);
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.f-credit-ava:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 8px 22px -8px rgba(226,50,50,.55);}
.f-credit-ava img{width:100%;height:100%;object-fit:cover;display:block;}
.f-credit-mono{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;
  color:#fff;background:var(--grad);
}
.f-credit-meta{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.3;text-align:left;}
.f-credit-by{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);}
.f-credit-name{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;letter-spacing:-.2px;
  color:var(--white);text-decoration:none;transition:color .2s;
}
.f-credit-li{width:16px;height:16px;flex-shrink:0;color:#0a66c2;transition:transform .2s,color .2s;}
.f-credit-name:hover .f-credit-li{transform:scale(1.15);color:#2a82e0;}
.f-credit-role{font-size:11px;color:var(--muted2);}
/* Four columns need one more step down than three did: 3-up at ~1080, then the
   brand goes full-width above a 3-up link row, then 2-up, then a single stack. */
@media(max-width:1080px){
  .f-top{grid-template-columns:1fr 1fr 1fr;gap:34px;}
  .f-brand{grid-column:1/-1;max-width:none;}
}
@media(max-width:900px){
  .f-top{grid-template-columns:1fr 1fr;gap:32px 40px;}
  .f-brand{grid-column:1/-1;max-width:none;}
}
@media(max-width:768px){
  .f-top{grid-template-columns:1fr;gap:28px;}
  .f-base{flex-direction:column;align-items:flex-start;gap:16px;}
}

/* ═══ PROJECT SCREENSHOT REEL ═══ */
.proj-reel-section{
  border-bottom:1px solid var(--border);
  padding:56px 0 64px;
  overflow:hidden;
  background:var(--navy);
  position:relative;
}
.proj-reel-section::before,.proj-reel-section::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:4;pointer-events:none;
}
.proj-reel-section::before{left:0;background:linear-gradient(to right,var(--navy) 20%,transparent);}
.proj-reel-section::after{right:0;background:linear-gradient(to left,var(--navy) 20%,transparent);}
.proj-reel-header{padding:0 48px 28px;}
.proj-reel-track{
  display:flex;gap:16px;width:max-content;
  padding:12px 0 20px;
  cursor:grab;
  touch-action:pan-y;
  will-change:transform;
  -webkit-user-select:none;user-select:none;
}
.proj-reel-track.dragging{cursor:grabbing;}
.proj-reel-track img{-webkit-user-drag:none;}

/* ═══ TESTIMONIALS / REVIEWS ═══ */
.reviews{position:relative;overflow:hidden;padding:6px 0;}
.reviews-track{display:flex;align-items:stretch;gap:24px;width:max-content;will-change:transform;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.reviews-track.dragging{cursor:grabbing;}
.review{display:flex;flex-direction:column;flex:0 0 clamp(290px,38vw,410px);background:var(--navy2);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 34px;}
.reviews-track img{-webkit-user-drag:none;}
@media(prefers-reduced-motion:reduce){.reviews-track,.reviews-track .review{transition:none;}}

/* ═══ HERO DIFFERENTIATORS ═══ */
.hero-diff{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.hero-diff span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border2);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--nav-link);background:var(--surface-2);white-space:nowrap;}
.hero-diff span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--grad);flex-shrink:0;}

/* ═══ TRUST / CLIENT LOGO WALL ═══ */
.lw-marquee{position:relative;margin-top:6px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);}
.lw-track{display:flex;width:max-content;animation:lw-scroll 50s linear infinite;}
.lw-marquee:hover .lw-track{animation-play-state:paused;}
@keyframes lw-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lw-item{flex:0 0 auto;width:180px;margin-right:16px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:22px 20px;min-height:86px;box-shadow:0 6px 18px -12px rgba(0,0,0,.35);transition:transform .25s,box-shadow .25s;}
.lw-item:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.28);}
.lw-item img{max-height:38px;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s;}
.lw-item:hover img{filter:none;opacity:1;}
html.light .lw-item{background:#fbfcfe;border-color:rgba(0,0,0,.09);box-shadow:0 2px 4px rgba(0,0,0,.04),0 10px 24px -12px rgba(0,0,0,.22);}
@media(prefers-reduced-motion:reduce){
  .lw-track{animation:none;flex-wrap:wrap;justify-content:center;gap:16px;}
  .lw-item{margin-right:0;}
  .lw-item[aria-hidden="true"]{display:none;}
}

/* ═══ HOW WE WORK ═══ */
.howwork{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:6px;}
.hw-step{background:var(--navy2);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 26px;transition:transform .25s,border-color .25s;}
.hw-step:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.28);box-shadow:var(--shadow-2);}
.hw-n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;line-height:1;color:var(--red);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px;}
.hw-t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:var(--white);margin-bottom:10px;}
.hw-d{font-size:14px;line-height:1.65;color:var(--muted);}
@media(max-width:900px){.howwork{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.howwork{grid-template-columns:1fr;}.hero-diff span{font-size:12px;padding:7px 12px;}}
@media(max-width:900px){.reviews-track .review{flex-basis:84%;}}
@media(max-width:560px){.reviews-track .review{flex-basis:90%;}}
.review-quote{font-size:clamp(15px,1.5vw,18px);line-height:1.75;color:var(--muted2);white-space:pre-line;}
.reviews-track .review-quote{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;min-height:calc(1.75em * 3);}
.review-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px;}
.reviews-track .review-foot{margin-top:auto;}
@media(max-width:560px){.reviews-track .review{padding:26px 22px;}}
/* Mobile: native swipe carousel instead of the auto-marquee (which stretched
   all cards to the tallest one, leaving big empty boxes on short reviews) */
@media(max-width:768px){
  .reviews{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding:0 20px;padding-bottom:16px;}
  .reviews-track{transform:none!important;width:max-content;gap:14px;touch-action:auto;cursor:default;}
  /* fixed viewport-relative width (not % against a max-content track, which mis-sized cards) */
  .reviews-track .review{flex:0 0 82vw;max-width:360px;scroll-snap-align:center;}
  .reviews-track .review[aria-hidden="true"]{display:none;}  /* drop the loop duplicates */
}
.proj-reel-cta{text-align:center;margin-top:30px;padding:0 20px;}
.proj-reel-cta .btn-ghost{text-decoration:none;}
/* Portfolio "show more" — deliberately large */
.proj-more-wrap{text-align:center;margin-top:40px;}
.proj-more{font-size:15.5px;padding:17px 52px;border-radius:var(--r-pill);text-decoration:none;letter-spacing:.3px;}
/* Portfolio cards: pin the tags row + work-type footer to the bottom, so the
   pills and the "Розробка з нуля…" line sit at the same spot on every card
   regardless of description length (grid already makes cards equal height). */
.pj-card{display:flex;flex-direction:column;}
.pj-body{display:flex;flex-direction:column;flex:1;}
.pj-tags{margin-top:auto;}

/* Portfolio numbered pagination */
#proj-grid{scroll-margin-top:84px;}
.proj-pag{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px;}
.proj-pag[hidden]{display:none;}
.pf-page{min-width:42px;height:42px;padding:0 8px;border-radius:12px;border:1px solid var(--border2);background:transparent;color:var(--muted2);font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),transform var(--dur-2) var(--ease);}
.pf-page:hover{color:var(--white);border-color:rgba(255,255,255,.3);transform:translateY(-2px);}
.pf-page.on{background:var(--red);border-color:var(--red);color:#fff;}
html.light .pf-page:hover{color:var(--white);border-color:rgba(0,0,0,.3);}
/* Blog numbered pagination */
.blog-page-nums{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.blog-page-num{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 8px;border-radius:12px;border:1px solid var(--border2);color:var(--muted2);font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;text-decoration:none;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease);}
a.blog-page-num:hover{color:var(--white);border-color:rgba(255,255,255,.3);transform:translateY(-2px);}
.blog-page-num.on{background:var(--red);border-color:var(--red);color:#fff;}
.blog-page-dots{color:var(--muted);padding:0 2px;}
.review-author{display:flex;align-items:center;gap:13px;}
.review-photo{width:50px;height:50px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid var(--border2);}
.review-photo--mono{display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:.5px;}
.review-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:var(--white);}
.review-role{font-size:12.5px;color:var(--muted);margin-top:2px;}
.review-role a{color:var(--red2);text-decoration:none;}
.review-role a:hover{text-decoration:underline;}
.review-more{font-size:13px;font-weight:500;color:var(--red2);text-decoration:none;white-space:nowrap;transition:color .2s,transform .2s;}
.review-more:hover{color:var(--red);transform:translateX(2px);}
.reviews-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px;}
.reviews-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--border2);background:transparent;color:var(--muted2);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur-1) var(--ease);}
.reviews-arrow:hover{color:var(--white);border-color:var(--red);background:rgba(226,50,50,.1);}
.reviews-dots{display:flex;gap:8px;align-items:center;}
.reviews-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--border2);cursor:pointer;padding:0;transition:all var(--dur-2) var(--ease);}
.reviews-dot.active{background:var(--red);width:24px;border-radius:4px;}
.reviews-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:20px;}
.review--full{display:block;}
.review-logo{align-self:flex-start;display:inline-flex;margin-bottom:22px;background:#fff;border-radius:10px;padding:9px 13px;transition:transform .2s,box-shadow .2s,opacity .4s;}
.review-logo:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25);}
.review-logo img{height:30px;width:auto;max-width:150px;object-fit:contain;display:block;}
@keyframes proj-reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.proj-reel-item{
  width:310px;height:200px;flex-shrink:0;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);
  background:var(--navy3);
  position:relative;
  text-decoration:none;
  display:block;
  transition:transform .45s cubic-bezier(.23,1,.32,1),box-shadow .45s,border-color .3s;
  will-change:transform;
}
.proj-reel-item:hover{
  transform:scale(1.07) translateY(-8px);
  box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 0 1px rgba(var(--red-rgb),.3);
  border-color:rgba(var(--red-rgb),.4);
  z-index:10;
}
.proj-reel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;z-index:1;}
/* Placeholder when no screenshot */
.proj-reel-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(140deg,var(--navy3) 0%,var(--navy4) 100%);
}
.proj-reel-ph::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);
}
.proj-reel-ph-flag{font-size:30px;position:relative;z-index:1;}
.proj-reel-ph-name{
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:-.3px;color:rgba(255,255,255,.35);
  text-align:center;padding:0 16px;position:relative;z-index:1;
}
/* Hover overlay + label */
.proj-reel-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,15,17,.95) 0%,rgba(14,15,17,.3) 45%,transparent 100%);
  opacity:0;transition:opacity .35s;
}
.proj-reel-item:hover .proj-reel-overlay{opacity:1;}
.proj-reel-label{
  position:absolute;bottom:14px;left:16px;right:16px;
  transform:translateY(8px);opacity:0;
  transition:opacity .35s,transform .4s cubic-bezier(.23,1,.32,1);
}
.proj-reel-item:hover .proj-reel-label{opacity:1;transform:none;}
.proj-reel-name{
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;
  color:#fff;margin-bottom:3px;letter-spacing:-.2px;
}
.proj-reel-url{font-size:11px;color:var(--red);font-weight:500;letter-spacing:.3px;}
/* Open-in-new-tab indicator */
.proj-reel-ext{
  position:absolute;top:12px;right:12px;
  width:26px;height:26px;border-radius:6px;
  background:rgba(20,21,24,.7);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:rgba(255,255,255,.5);
  opacity:0;transition:opacity .3s;
}
.proj-reel-item:hover .proj-reel-ext{opacity:1;}

/* Reel navigation arrows */
.reel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:5;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);
  cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .3s,background .2s,transform .2s;
}
.proj-reel-section:hover .reel-arrow{opacity:1;}
.reel-arrow:hover{background:rgba(255,255,255,.2);color:#fff;transform:translateY(-50%) scale(1.1);}
.reel-arrow svg{width:18px;height:18px;flex-shrink:0;}
.reel-arrow-prev{left:18px;}
.reel-arrow-next{right:18px;}
html.light .reel-arrow{background:rgba(15,23,42,.12);border-color:rgba(15,23,42,.2);color:rgba(15,23,42,.65);}
html.light .reel-arrow:hover{background:rgba(15,23,42,.22);color:#0f172a;}

/* ═══ NEWS / CASES BLOCK ═══ */
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}

/* ── Featured card ── */
.news-featured{
  border-radius:16px;overflow:hidden;min-height:480px;
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:inherit;position:relative;
  border:1px solid var(--border);
}
.nf-image{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  transition:transform .6s cubic-bezier(.23,1,.32,1);
}
.news-featured:hover .nf-image{transform:scale(1.04);}
.nf-image-placeholder{
  position:absolute;inset:0;background:var(--navy2);
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 20%,rgba(var(--red-rgb),.1) 0%,transparent 55%),
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:auto,52px 52px,52px 52px;
}
.nf-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(14,15,17,0) 15%,rgba(14,15,17,.55) 50%,rgba(14,15,17,.97) 100%);
}
.nf-content{position:relative;z-index:1;padding:28px 32px 32px;}
.nf-badge-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.nf-featured-label{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(var(--red-rgb),.18);border:1px solid rgba(var(--red-rgb),.4);color:var(--red);
}
.nf-featured-label::before{content:'★';font-size:7px;}
.nf-cat{
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;padding:3px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.55);
}
.nf-title{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2vw,26px);
  font-weight:700;letter-spacing:-.5px;line-height:1.2;margin-bottom:10px;
}
.nf-excerpt{
  font-size:13px;line-height:1.65;color:rgba(238,236,234,.6);font-weight:400;
  margin-bottom:22px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nf-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);}
.nf-date{font-size:11px;color:rgba(255,255,255,.35);}
.nf-link{
  font-size:12px;color:var(--red);font-weight:500;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:rgba(var(--red-rgb),.12);border:1px solid rgba(var(--red-rgb),.25);
  transition:background .2s,border-color .2s;
}
.nf-link:hover{background:rgba(var(--red-rgb),.25);border-color:rgba(var(--red-rgb),.5);}

/* ── Side cards ── */
.news-list{display:grid;grid-auto-rows:1fr;gap:12px;}
.news-card{
  background:var(--navy2);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;display:flex;
  text-decoration:none;color:inherit;
  transition:border-color .25s,transform .2s;
  min-height:120px;
}
.news-card:hover{border-color:rgba(255,255,255,.14);transform:translateX(5px);}
.nc-image{
  width:100px;flex-shrink:0;
  background:var(--navy3) center/cover no-repeat;
  border-right:1px solid var(--border);
  position:relative;overflow:hidden;
}
.nc-image-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:24px;opacity:.18;
  background:linear-gradient(135deg,var(--navy3),var(--navy4));
}
.nc-body{padding:16px 20px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:6px;}
.nc-top{flex:1;}
.nc-cat{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:6px;}
.nc-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;letter-spacing:-.2px;line-height:1.35;}
.nc-footer{display:flex;align-items:center;justify-content:space-between;}
.nc-date{font-size:11px;color:var(--muted);}
.nc-arrow{font-size:15px;color:var(--red);opacity:.4;transition:opacity .2s,transform .2s;}
.news-card:hover .nc-arrow{opacity:1;transform:translateX(3px);}

/* ── Empty state ── */
.news-empty-state{text-align:center;padding:60px 24px;color:var(--muted);font-size:14px;}

@media(max-width:900px){
  .news-grid{grid-template-columns:1fr;}
  .news-featured{min-height:360px;}
  .news-list{grid-auto-rows:auto;}
  .nc-image{width:80px;}
}

/* ═══════════════════════════════
   PAGE: PROJECTS
═══════════════════════════════ */
.page-hero{padding:56px 48px 60px;border-bottom:1px solid var(--border);background:var(--navy2);position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center;}
.page-hero::before{content:'';position:absolute;top:-34%;right:-6%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(226,50,50,.13),transparent 62%);pointer-events:none;z-index:0;}
.ph-main{min-width:0;}
.page-hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(27px,2.9vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.04;margin-bottom:14px;}
.page-hero-title em{font-style:normal;color:var(--red);}
.page-hero-sub{font-size:15px;color:var(--muted2);font-weight:400;max-width:560px;}

.projects-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px;}
.pf-btn{font-family:'Inter',sans-serif;font-size:12px;padding:6px 16px;border-radius:var(--r-pill);border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;transition:all var(--dur-1) var(--ease);}
.pf-btn.on,.pf-btn:hover{background:var(--red);color:#fff;border-color:var(--red);}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pj-card{
  background:var(--navy2);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;cursor:pointer;transition:all var(--dur-2) var(--ease);
}
.pj-card:hover{border-color:rgba(var(--red-rgb),.4);transform:translateY(-4px);}
.pj-img{
  height:180px;background:var(--navy3);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.pj-img-logo{height:48px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.6;}
.pj-img-text{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;color:rgba(255,255,255,.15);}
.pj-img-badge{position:absolute;top:12px;right:12px;font-size:9px;padding:3px 9px;border-radius:var(--r-pill);letter-spacing:1px;text-transform:uppercase;font-weight:500;}
.pj-img-badge.new{background:rgba(var(--red-rgb),.15);color:var(--red);border:1px solid rgba(var(--red-rgb),.3);}
.pj-img-badge.support{background:rgba(96,165,250,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.2);}
.pj-body{padding:24px 22px;}
.pj-flag-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pj-flag{font-size:14px;}
.pj-country{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.pj-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px;}
.pj-desc{font-size:13px;line-height:1.6;color:var(--muted2);font-weight:400;margin-bottom:16px;}
.pj-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;}
.pj-bottom{display:flex;justify-content:space-between;align-items:center;}
.pj-type{font-size:11px;color:var(--muted);letter-spacing:.5px;}
.pj-arrow{font-size:13px;color:var(--red);font-weight:500;}

/* ═══════════════════════════════
   PAGE: SINGLE PROJECT
═══════════════════════════════ */
.proj-hero{padding:80px 48px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start;}
.proj-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:28px;transition:color .2s;}
.proj-back:hover{color:var(--white);}
.proj-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(27px,2.9vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;margin-bottom:18px;}
.proj-title em{font-style:normal;color:var(--red);}
.proj-desc{font-size:16px;line-height:1.75;color:var(--muted2);font-weight:400;max-width:580px;margin-bottom:32px;}
.proj-actions{display:flex;gap:12px;}
.proj-meta-card{background:var(--navy2);border:1px solid var(--border);border-radius:14px;padding:28px 24px;}
.proj-meta-item{padding:14px 0;border-bottom:1px solid var(--border);}
.proj-meta-item:first-child{padding-top:0;}
.proj-meta-item:last-child{border-bottom:none;padding-bottom:0;}
.proj-meta-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.proj-meta-val{font-size:14px;color:var(--white);font-weight:400;}
.proj-screens{padding:64px 48px;border-bottom:1px solid var(--border);}
.proj-screen-mock{
  background:var(--navy2);border:1px solid var(--border);border-radius:12px;
  height:400px;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:80px;font-weight:800;
  color:rgba(255,255,255,.04);letter-spacing:-3px;
  position:relative;overflow:hidden;
}
.proj-screen-mock::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px;
}
.proj-screen-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;}
.proj-results{padding:64px 48px;border-bottom:1px solid var(--border);}
.proj-results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:36px;}
.pr-cell{background:var(--navy2);padding:32px 24px;}
.pr-big{font-family:'Space Grotesk',sans-serif;font-size:44px;font-weight:700;letter-spacing:-2px;color:var(--white);line-height:1;}
.pr-big .r{color:var(--red);}
.pr-label{font-size:13px;color:var(--muted2);margin-top:8px;font-weight:400;}
.proj-tech{padding:64px 48px;border-bottom:1px solid var(--border);}
.tech-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;}
.tech-pill{font-size:12px;padding:6px 16px;border:1px solid var(--border2);border-radius:var(--r-pill);color:var(--muted2);}
.proj-nav-bottom{display:flex;justify-content:space-between;padding:32px 48px;border-bottom:1px solid var(--border);}
.pnb-btn{display:flex;flex-direction:column;gap:4px;cursor:pointer;}
.pnb-label{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.pnb-name{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--white);transition:color .2s;}
.pnb-btn:hover .pnb-name{color:var(--red);}

/* ═══════════════════════════════
   PAGE: WHY US
═══════════════════════════════ */
.why-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.why-pg-cell{background:var(--navy2);padding:40px 32px;}
.why-pg-icon{font-size:28px;margin-bottom:16px;}
.why-pg-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;margin-bottom:10px;letter-spacing:-.3px;}
.why-pg-text{font-size:14px;line-height:1.65;color:var(--muted2);font-weight:400;}

/* ═══════════════════════════════
   PAGE: SERVICES
═══════════════════════════════ */
.services-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.sl-row{background:var(--navy2);padding:32px 36px;display:grid;grid-template-columns:64px 200px 1fr auto;gap:24px;align-items:center;cursor:pointer;transition:background .2s;}
.sl-row:hover{background:var(--navy3);}
.sl-row:hover .sl-arr{opacity:1;transform:translateX(4px);}
.sl-num{font-size:11px;color:var(--red);font-weight:600;letter-spacing:1px;}
.sl-icon{font-size:28px;}
.sl-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.3px;}
.sl-desc{font-size:14px;color:var(--muted2);line-height:1.6;font-weight:400;}
.sl-arr{font-size:20px;color:var(--red);opacity:0;transition:all var(--dur-1) var(--ease);}

/* ═══════════════════════════════
   PAGE: CLIENTS
═══════════════════════════════ */
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.cl-cell{background:var(--navy2);padding:36px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;transition:background .2s;min-height:160px;}
.cl-cell:hover{background:var(--navy3);}
.cl-logo-chip{width:74px;height:74px;flex-shrink:0;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;padding:13px;box-shadow:0 8px 20px -12px rgba(0,0,0,.55);transition:transform .25s,box-shadow .25s;}
.cl-cell:hover .cl-logo-chip{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(0,0,0,.7);}
.cl-logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:none;opacity:1;}
.cl-logo-text{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;color:var(--muted);transition:color .2s;}
.cl-cell:hover .cl-logo-text{color:var(--white);}
.cl-country{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}

/* ═══════════════════════════════
   PAGE: BLOG
═══════════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.blog-card{background:var(--navy2);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:all var(--dur-2) var(--ease);}
.blog-card:hover{border-color:rgba(var(--red-rgb),.3);transform:translateY(-3px);}
.blog-img{height:160px;background:var(--navy3);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);}
.blog-cat{font-size:9px;padding:3px 10px;border-radius:var(--r-pill);background:rgba(var(--red-rgb),.12);color:var(--red);border:1px solid rgba(var(--red-rgb),.25);letter-spacing:1px;text-transform:uppercase;}
.blog-body{padding:22px 20px;}
.blog-date{font-size:11px;color:var(--muted);margin-bottom:8px;}
.blog-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:1.3;margin-bottom:10px;}
.blog-excerpt{font-size:13px;color:var(--muted2);line-height:1.6;font-weight:400;}

/* ═══════════════════════════════
   PAGE: CONTACTS
═══════════════════════════════ */
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.cont-cell{background:var(--navy2);padding:48px 40px;}
.cont-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:20px;}
.cont-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.5vw,28px);font-weight:600;letter-spacing:-.5px;color:var(--white);margin-bottom:8px;text-decoration:none;display:block;transition:color .2s;}
.cont-big:hover{color:var(--red);}
.cont-sub{font-size:14px;color:var(--muted2);font-weight:400;line-height:1.6;}
.form-group{margin-bottom:16px;}
.form-label{font-size:12px;color:var(--muted);letter-spacing:.5px;margin-bottom:8px;display:block;}
.form-input{width:100%;background:var(--navy3);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;font-family:'Inter',sans-serif;font-size:14px;color:var(--white);outline:none;transition:border-color .2s;}
.form-input:focus{border-color:rgba(var(--red-rgb),.5);}
.form-input::placeholder{color:var(--muted);}
textarea.form-input{resize:vertical;min-height:100px;}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .hero-bottom{grid-template-columns:1fr 1fr;}
  .hbc:nth-child(3){display:none;}
  .sv-grid{grid-template-columns:repeat(2,1fr);}
  .num-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:1fr;gap:40px;}
  .why-sticky{position:static;}
  .int-grid{grid-template-columns:repeat(4,1fr);}
  .method-grid{grid-template-columns:1fr;}
  .cta-block{gap:28px;}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .proj-hero{grid-template-columns:1fr;}
  .why-page-grid{grid-template-columns:1fr;}
  .clients-grid{grid-template-columns:repeat(3,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .contacts-grid{grid-template-columns:1fr;}
  .proj-results-grid{grid-template-columns:repeat(2,1fr);}
  .sl-row{grid-template-columns:44px 160px 1fr 32px;}
}
@media(max-width:768px){
  nav{padding:0 20px;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .burger{display:flex;}
  .hero{padding:64px 20px 40px;min-height:auto;}
  .hero-bottom{grid-template-columns:1fr;}
  .hbc:nth-child(2){padding:24px 0;}
  .hbc:nth-child(3){display:block;padding:24px 0;}
  .hbc{border-right:none;border-top:1px solid var(--border);}
  .section,.section-sm{padding:56px 20px;}
  .cases-scroll{margin:0 -20px;padding:0 20px;}
  .cta-block{padding:64px 20px;}
  .page-hero{padding:48px 20px 40px;}
  .projects-grid{grid-template-columns:1fr;}
  .proj-hero{padding:48px 20px;}
  .proj-screens,.proj-results,.proj-tech,.proj-nav-bottom{padding:48px 20px;}
  .proj-results-grid{grid-template-columns:repeat(2,1fr);}
  .clients-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:1fr;}
  .f-inner{padding:40px 20px 22px;}
  .sl-row{grid-template-columns:1fr;gap:8px;}
  .sl-num,.sl-arr{display:none;}
  .int-grid{grid-template-columns:repeat(3,1fr);}
  .cc{width:280px;}
}

.page-hero{padding:56px 48px 60px;border-bottom:1px solid var(--border);background:var(--navy2);position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center;}
.page-hero::before{content:'';position:absolute;top:-34%;right:-6%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(226,50,50,.13),transparent 62%);pointer-events:none;z-index:0;}
.ph-main{min-width:0;}
.page-hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(27px,2.9vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.04;margin-bottom:14px;}
.page-hero-title em{font-style:normal;color:var(--red);}
.page-hero-sub{font-size:15px;color:var(--muted2);font-weight:400;max-width:560px;}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pj-card{background:var(--navy2);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:all var(--dur-2) var(--ease);}
.pj-card:hover{border-color:rgba(var(--red-rgb),.4);transform:translateY(-4px);}
.pj-img{height:180px;background:var(--navy3);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.pj-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s cubic-bezier(.23,1,.32,1);}
.pj-card:hover .pj-shot{transform:scale(1.05);}
.pj-img-text{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;color:rgba(255,255,255,.15);}
.pj-img-badge{position:absolute;top:12px;right:12px;z-index:2;font-size:9px;padding:4px 10px;border-radius:var(--r-pill);letter-spacing:1px;text-transform:uppercase;font-weight:600;backdrop-filter:blur(4px);}
.pj-img-badge.new{background:rgba(226,50,50,.92);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 8px -2px rgba(226,50,50,.6);}
.pj-img-badge.support{background:rgba(59,130,246,.92);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 8px -2px rgba(59,130,246,.6);}
.pj-body{padding:24px 22px;}
.pj-flag-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pj-flag{font-size:14px;}
.pj-country{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.pj-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px;}
.pj-desc{font-size:13px;line-height:1.6;color:var(--muted2);font-weight:400;margin-bottom:14px;}
.pj-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.pj-bottom{display:flex;justify-content:space-between;align-items:center;}
.pj-type{font-size:11px;color:var(--muted);letter-spacing:.5px;}
.pj-arrow{font-size:13px;color:var(--red);font-weight:500;}
.proj-hero{padding:80px 48px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start;}
.proj-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:28px;transition:color .2s;text-decoration:none;}
.proj-back:hover{color:var(--white);}
.proj-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(27px,2.9vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;margin-bottom:18px;}
.proj-title em{font-style:normal;color:var(--red);}
.proj-desc{font-size:16px;line-height:1.75;color:var(--muted2);font-weight:400;max-width:580px;margin-bottom:32px;}
.proj-actions{display:flex;gap:12px;flex-wrap:wrap;}
.proj-meta-card{background:var(--navy2);border:1px solid var(--border);border-radius:14px;padding:28px 24px;}
.proj-meta-item{padding:14px 0;border-bottom:1px solid var(--border);}
.proj-meta-item:first-child{padding-top:0;}
.proj-meta-item:last-child{border-bottom:none;padding-bottom:0;}
.proj-meta-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.proj-meta-val{font-size:14px;color:var(--white);font-weight:400;}
.proj-screens{padding:64px 48px;border-bottom:1px solid var(--border);}
.proj-results{padding:64px 48px;border-bottom:1px solid var(--border);}
.proj-results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:36px;}
.pr-cell{background:var(--navy2);padding:32px 24px;}
.pr-big{font-family:'Space Grotesk',sans-serif;font-size:44px;font-weight:700;letter-spacing:-2px;color:var(--white);line-height:1;}
.pr-big .r{color:var(--red);}
.pr-label{font-size:13px;color:var(--muted2);margin-top:8px;font-weight:400;}
.proj-tech{padding:64px 48px;border-bottom:1px solid var(--border);}
.tech-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;}
.tech-pill{font-size:12px;padding:6px 16px;border:1px solid var(--border2);border-radius:var(--r-pill);color:var(--muted2);}
/* Linked chips (tech has its own /technologies page). Selector scoped through
   .tech-list so it outweighs the later `html.light .tech-pill` override without
   depending on source order. Non-linked <span> pills keep the static look. */
.tech-list a.tech-pill{text-decoration:none;cursor:pointer;transition:color .2s,border-color .2s,background .2s;}
.tech-list a.tech-pill:hover,.tech-list a.tech-pill:focus-visible{color:var(--white);border-color:var(--red);}
.proj-nav-bottom{display:flex;justify-content:space-between;padding:32px 48px;border-bottom:1px solid var(--border);}
.pnb-btn{display:flex;flex-direction:column;gap:4px;}
.pnb-label{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.pnb-name{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--white);transition:color .2s;}
.pnb-btn:hover .pnb-name{color:var(--red);}
.why-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.why-pg-cell{background:var(--navy2);padding:40px 32px;}
.why-pg-icon{font-size:28px;margin-bottom:16px;}
.why-pg-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;margin-bottom:10px;letter-spacing:-.3px;}
.why-pg-text{font-size:14px;line-height:1.65;color:var(--muted2);font-weight:400;}
.services-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.sl-row{background:var(--navy2);padding:28px 32px;display:grid;grid-template-columns:56px 56px 200px 1fr 48px;gap:20px;align-items:center;cursor:pointer;transition:background .2s;}
.sl-row:hover{background:var(--navy3);}
.sl-row:hover .sl-arr{opacity:1;transform:translateX(4px);}
.sl-num{font-size:11px;color:var(--red);font-weight:600;letter-spacing:1px;}
.sl-icon{font-size:24px;}
.sl-name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.3px;}
.sl-desc{font-size:14px;color:var(--muted2);line-height:1.6;font-weight:400;}
.sl-arr{font-size:18px;color:var(--red);opacity:0;transition:all var(--dur-1) var(--ease);}
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.cl-cell{background:var(--navy2);padding:36px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;transition:background .2s;min-height:160px;}
.cl-cell:hover{background:var(--navy3);}
.cl-logo-chip{width:74px;height:74px;flex-shrink:0;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;padding:13px;box-shadow:0 8px 20px -12px rgba(0,0,0,.55);transition:transform .25s,box-shadow .25s;}
.cl-cell:hover .cl-logo-chip{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(0,0,0,.7);}
.cl-logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:none;opacity:1;}
.cl-logo-text{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;color:var(--muted);transition:color .2s;}
.cl-cell:hover .cl-logo-text{color:var(--white);}
.cl-country{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.blog-card{background:var(--navy2);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:all var(--dur-2) var(--ease);}
.blog-card:hover{border-color:rgba(var(--red-rgb),.3);transform:translateY(-3px);}
.blog-img{height:160px;background:var(--navy3);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);}
.blog-cat{font-size:9px;padding:3px 10px;border-radius:var(--r-pill);background:rgba(var(--red-rgb),.12);color:var(--red);border:1px solid rgba(var(--red-rgb),.25);letter-spacing:1px;text-transform:uppercase;}
.blog-body{padding:22px 20px;}
.blog-date{font-size:11px;color:var(--muted);margin-bottom:8px;}
.blog-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:1.3;margin-bottom:10px;color:var(--white);}
.blog-excerpt{font-size:13px;color:var(--muted2);line-height:1.6;font-weight:400;}
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:40px;}
.cont-cell{background:var(--navy2);padding:48px 40px;}
.cont-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:20px;}
.cont-big{font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.5vw,28px);font-weight:600;letter-spacing:-.5px;color:var(--white);margin-bottom:8px;text-decoration:none;display:block;transition:color .2s;}
.cont-big:hover{color:var(--red);}
.cont-sub{font-size:14px;color:var(--muted2);font-weight:400;line-height:1.6;}
.form-group{margin-bottom:16px;}
.form-label{font-size:12px;color:var(--muted);letter-spacing:.5px;margin-bottom:8px;display:block;}
.form-input{width:100%;background:var(--navy3);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;font-family:'Inter',sans-serif;font-size:14px;color:var(--white);outline:none;transition:border-color .2s;}
.form-input:focus{border-color:rgba(var(--red-rgb),.5);}
.form-input::placeholder{color:var(--muted);}
textarea.form-input{resize:vertical;min-height:100px;}
.mob-menu a.cta-mob{color:var(--red);font-weight:500;}
@media(max-width:1024px){.proj-hero{grid-template-columns:1fr;}.why-page-grid{grid-template-columns:1fr;}.clients-grid{grid-template-columns:repeat(3,1fr);}.blog-grid{grid-template-columns:repeat(2,1fr);}.contacts-grid{grid-template-columns:1fr;}.proj-results-grid{grid-template-columns:repeat(2,1fr);}.sl-row{grid-template-columns:44px 44px 160px 1fr 32px;}.projects-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){.page-hero{padding:48px 20px 40px;}.proj-hero{padding:48px 20px;}.proj-results,.proj-tech,.proj-screens,.proj-nav-bottom{padding:48px 20px;}.clients-grid{grid-template-columns:repeat(2,1fr);}.blog-grid{grid-template-columns:1fr;}.projects-grid{grid-template-columns:1fr;}.sl-row{grid-template-columns:1fr;gap:6px;padding:20px;}.sl-num,.sl-arr{display:none;}}

/* ═══ THEME TOGGLE BUTTON ═══ */
.theme-toggle{
  width:36px;height:36px;flex-shrink:0;
  border:1px solid var(--border2);
  background:var(--navy3);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted2);
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.theme-toggle:hover{color:var(--white);background:var(--navy4);transform:scale(1.08);}
.theme-toggle svg{width:17px;height:17px;display:block;}
/* dark mode (default): show MOON — indicating current dark state */
.theme-toggle .icon-sun{display:none;}
/* light mode: show SUN — indicating current light state */
html.light .theme-toggle .icon-sun{display:block;}
html.light .theme-toggle .icon-moon{display:none;}

/* ═══ LIGHT THEME ═══ */
html.light{
  --navy:#ffffff;
  --navy2:#f4f7fa;
  --navy3:#edf1f6;
  --navy4:#dde4ed;
  --white:#0f172a;
  --muted:#64748b;
  --muted2:#1e3a5f;--nav-link:#3a4658;
  --border:rgba(0,0,0,.08);
  --border2:rgba(0,0,0,.16);
}

html.light body{background:var(--navy);color:var(--white);}

/* nav — white with subtle bottom shadow instead of blur-dark */
html.light nav{
  background:rgba(255,255,255,.97);
  border-bottom-color:rgba(0,0,0,.08);
  box-shadow:0 1px 12px rgba(0,0,0,.06);
}

/* hero — light gradient, no dark glow */
html.light .hero-noise{
  background-image:
    radial-gradient(ellipse 70% 60% at 80% 20%,rgba(var(--red-rgb),.06) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%,rgba(200,220,245,.6) 0%,transparent 70%);
}

/* mobile menu */
html.light .mob-menu{background:#fff;border-bottom-color:rgba(0,0,0,.08);}
html.light .mob-menu a{color:var(--muted);border-bottom-color:rgba(0,0,0,.07);}
html.light .mob-menu a:hover{color:var(--white);}

/* section separators */
html.light .section,html.light .section-sm{border-bottom-color:rgba(0,0,0,.07);}

/* buttons */
html.light .btn-ghost{color:var(--muted2);border-color:rgba(0,0,0,.18);}
html.light .btn-ghost:hover{color:var(--white);border-color:rgba(0,0,0,.35);background:var(--navy3);}

/* logos — no invert on light bg */
html.light .cc-logo{filter:none;opacity:.75;}
html.light .pj-img-logo{filter:none;opacity:.6;}
html.light .cl-logo-img{filter:none;opacity:1;}
html.light .cl-logo-chip{box-shadow:0 4px 14px -10px rgba(0,0,0,.3);border-color:rgba(0,0,0,.1);}

/* hardcoded light-text colours that need reversal */
html.light .wi-t{color:rgba(15,23,42,.6);}
html.light .proj-reel-ph-name{color:rgba(15,23,42,.25);}
html.light .pj-img-text{color:rgba(15,23,42,.1);}
html.light .proj-screen-mock{color:rgba(15,23,42,.05);}

/* project card image area */
html.light .pj-img{background:var(--navy3);}
html.light .pj-card:hover{border-color:rgba(0,0,0,.14);}

/* badges/pills */
html.light .nf-cat{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12);color:var(--muted2);}
html.light .nf-date{color:rgba(15,23,42,.38);}
html.light .nf-excerpt{color:rgba(15,23,42,.55);}
html.light .c-tag{background:rgba(0,0,0,.05);color:var(--muted2);}
html.light .tech-pill{background:var(--navy3);color:var(--muted2);border-color:rgba(0,0,0,.12);}

/* lang switcher */
html.light .lang-btn{color:var(--muted);}
html.light .lang-btn:hover{color:var(--white);border-color:rgba(0,0,0,.2);}
html.light .lang-btn.active{color:var(--white);}

/* integration pills */
html.light .int-pill{border-color:rgba(0,0,0,.1);background:var(--navy2);}
html.light .int-pill:hover{border-color:rgba(0,0,0,.22);background:#fff;}

/* form inputs */
html.light .form-input{background-color:var(--navy3);color:var(--white);border-color:rgba(0,0,0,.14);}
html.light .form-input::placeholder{color:var(--muted);}
html.light .form-input:focus{border-color:rgba(var(--red-rgb),.45);}

/* num cells */
html.light .num-cell{background:var(--navy2);border-color:rgba(0,0,0,.08);}

/* proj-back link */
html.light .proj-back{color:var(--muted);border-color:rgba(0,0,0,.14);}
html.light .proj-back:hover{color:var(--white);}

/* proj meta card */
html.light .proj-meta-card{background:var(--navy2);border-color:rgba(0,0,0,.1);}
html.light .proj-meta-item{border-bottom-color:rgba(0,0,0,.07);}

/* news / blog cards */
html.light .news-card{border-color:rgba(0,0,0,.09);}
html.light .news-card:hover{border-color:rgba(0,0,0,.2);}
html.light .blog-card{border-color:rgba(0,0,0,.09);}
html.light .blog-img{background:var(--navy3);}

/* CTA block */
html.light .cta-block{background:var(--navy2);border-top:1px solid rgba(0,0,0,.07);}

/* why page cells */
html.light .why-pg-cell{background:var(--navy2);border-color:rgba(0,0,0,.09);}

/* why page cards */
html.light .why-card{background:var(--navy2);}

/* contact cells */
html.light .cont-cell{border-color:rgba(0,0,0,.07);}

/* footer */
html.light footer{background:var(--navy2);border-top-color:rgba(0,0,0,.08);}
html.light .f-copy{color:var(--muted);}
html.light .f-col a,html.light .f-contact a{color:var(--muted2);}
html.light .f-col a:hover{color:var(--white);}
html.light .f-contact a:hover{color:var(--red);}

/* ════════════════════════════════════════════════════════════
   ███  MODERN REDESIGN LAYER  ███
═══════════════════════════════════════════════════════════════ */

/* ── Floating IT / e-commerce icons ── */
.hero,.page-hero,.cta-block{position:relative;}
.hero > div,.page-hero > *,.cta-block > *{position:relative;z-index:1;}
.fx-icons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.fx-ico{
  position:absolute;bottom:-70px;--rise:88vh;
  color:var(--muted);opacity:0;
  animation-name:fx-float;animation-timing-function:ease-in-out;
  animation-iteration-count:1;animation-fill-mode:forwards;
  will-change:transform,opacity;
}
.fx-ico:nth-child(3n){color:var(--red);}
.fx-ico:nth-child(3n+1){color:var(--accent);}
.page-hero .fx-ico,.cta-block .fx-ico{--rise:42vh;}
@keyframes fx-float{
  0%{opacity:0;transform:translateY(8px) translateX(0) rotate(-10deg) scale(.78);}
  14%{opacity:.17;}
  86%{opacity:.17;}
  100%{opacity:0;transform:translateY(calc(var(--rise) * -1)) translateX(var(--drift,0)) rotate(12deg) scale(1.02);}
}

/* ── Hero falling icons (slow, behind the text; double-click to burst) ── */
.fx-ico--fall{top:-64px;bottom:auto;animation-name:fx-fall;}
.hero > .fx-icons{position:absolute;inset:0;z-index:0;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 84%);mask-image:linear-gradient(to bottom,#000 60%,transparent 84%);}
.fx-drop{position:absolute;border-radius:50%;pointer-events:none;opacity:.9;transform:translate(0,0) scale(1);transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .55s ease-out;will-change:transform,opacity;}
@keyframes fx-fall{
  0%{opacity:0;transform:translateY(-10px) translateX(0) rotate(-8deg) scale(.8);}
  12%{opacity:.45;}
  88%{opacity:.45;}
  100%{opacity:0;transform:translateY(var(--fall,96vh)) translateX(var(--drift,0)) rotate(14deg) scale(1.04);}
}

/* ── Hero depth glow ── */
.hero::after{
  content:'';position:absolute;width:62vw;height:62vw;top:-22%;right:-12%;
  background:radial-gradient(circle,rgba(99,102,241,.11),transparent 60%);
  pointer-events:none;z-index:0;
  animation:fx-drift 20s ease-in-out infinite alternate;
}
@keyframes fx-drift{from{transform:translate(0,0)}to{transform:translate(-7%,9%)}}

/* ── Gradient accents ── */
.hero-title em,.s-title em,.page-hero-title em,.proj-title em,
.cta-title em,.why-title em,.why-page-title em{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.s-eye{display:inline-flex;align-items:center;gap:9px;}
.s-eye::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--grad);flex-shrink:0;}
/* Back link must stay on its own line (s-eye above is inline-flex, so an inline
   back link would otherwise share its line box on project/blog-post heroes). */
.proj-back{display:flex;width:fit-content;}

/* ── Buttons: gradient + glow ── */
.btn-red,.nav-cta,.hero .btn-red{
  background:var(--grad);
  box-shadow:0 4px 16px -2px rgba(226,50,50,.3);
}
.btn-red:hover,.nav-cta:hover,.hero .btn-red:hover{
  background:var(--grad);filter:brightness(1.08);
  box-shadow:0 7px 24px -2px rgba(226,50,50,.45);transform:translateY(-1px);
}

/* ── Glassier nav ── */
nav{backdrop-filter:blur(18px) saturate(1.5);}

/* ── Card hover glow + smoother motion ── */
.cc,.pj-card,.blog-card,.sv-card,.news-card,.news-featured{
  transition:transform .4s cubic-bezier(.23,1,.32,1),border-color .3s,box-shadow .4s,background .25s;
}
.cc:hover,.pj-card:hover,.blog-card:hover,.news-featured:hover{
  box-shadow:0 22px 55px -16px rgba(0,0,0,.65),0 0 0 1px rgba(226,50,50,.22);
}
.sv-card:hover{box-shadow:inset 0 0 0 1px rgba(226,50,50,.18);}

/* ── Readability: lift thin secondary text ── */
.hbc-desc,.sv-desc,.proj-desc,.pj-desc,.blog-excerpt,.wi-t,.num-label,
.mc-step,.cont-sub,.why-pg-text,.nf-excerpt,.page-hero-sub,.sl-desc,.why-sub{
  font-weight:400;
}
.hbc-desc{font-size:16px;color:var(--muted2);line-height:1.75;}
.sv-desc,.pj-desc,.blog-excerpt,.why-pg-text{font-size:14px;}
.wi-t{color:rgba(243,242,240,.82);}
.nf-excerpt{color:rgba(243,242,240,.7);}

/* ── Reel cached image fade-in ── */
.proj-reel-img{transition:opacity .5s ease;}
.proj-reel-img[data-loaded="0"]{opacity:0;}

/* ── Case card screenshot ── */
.cc-shot{
  width:100%;height:152px;object-fit:cover;object-position:top center;
  border-radius:10px;border:1px solid var(--border);
  margin-bottom:16px;display:block;background:var(--navy3);
}
.cc:hover .cc-shot{border-color:rgba(226,50,50,.3);}

/* ══════════════ SEARCH (header dropdown) ══════════════ */
.search-panel{
  position:fixed;top:72px;right:20px;width:min(440px,calc(100vw - 32px));z-index:320;
  background:var(--navy2);border:1px solid var(--border2);border-radius:14px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);overflow:hidden;
}
.search-panel[hidden]{display:none;}
.search-panel-form{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);}
.search-form-icon{width:18px;height:18px;color:var(--muted);flex-shrink:0;}
.search-panel-input{flex:1;background:transparent;border:none;outline:none;font-family:'Inter',sans-serif;font-size:15px;color:var(--white);}
.search-panel-input::placeholder{color:var(--muted);}
.search-panel-close{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 6px;line-height:1;}
.search-panel-close:hover{color:var(--white);}
.search-suggest{max-height:min(60vh,440px);overflow-y:auto;}
.sug-hint{padding:18px;color:var(--muted);font-size:13px;text-align:center;}
.sug-group{padding:6px 0;border-bottom:1px solid var(--border);}
.sug-group:last-of-type{border-bottom:none;}
.sug-group-t{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:600;padding:8px 16px 4px;}
.sug-item{display:block;padding:9px 16px;color:var(--white);text-decoration:none;font-size:14px;transition:background .15s;}
.sug-item:hover{background:var(--navy3);}
.sug-all{display:block;padding:12px 16px;text-align:center;color:var(--red);font-weight:600;font-size:13px;text-decoration:none;border-top:1px solid var(--border);}
.sug-all:hover{background:var(--navy3);}
@media(max-width:560px){.search-panel{right:8px;left:8px;width:auto;}}

.search-group{margin-bottom:40px;}
.search-list{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.search-item{
  display:flex;gap:14px;align-items:flex-start;padding:16px 20px;
  background:var(--navy2);border:1px solid var(--border);border-radius:12px;
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;
}
.search-item:hover{border-color:rgba(226,50,50,.35);transform:translateX(4px);}
.search-item-icon{font-size:22px;flex-shrink:0;line-height:1.3;}
.search-item-body{display:flex;flex-direction:column;gap:3px;}
.search-item-body b{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;}
.search-item-desc{font-size:13px;color:var(--muted2);line-height:1.5;}

/* ══════════════ MODERN SVG ICONS (services / why) ══════════════ */
.ic-svg{display:block;}
.sv-icon{background:linear-gradient(135deg,rgba(226,50,50,.14),rgba(99,102,241,.14));}
.sv-icon .ic-svg{width:22px;height:22px;color:#fff;}
.sv-card:hover .sv-icon .ic-svg{color:var(--red);}
.sl-icon{display:flex;align-items:center;justify-content:center;}
.sl-icon .ic-svg{width:26px;height:26px;color:var(--red);}
.why-pg-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;font-size:0;
  background:linear-gradient(135deg,rgba(226,50,50,.18),rgba(99,102,241,.18));
  border:1px solid var(--border2);
}
.why-pg-icon .ic-svg{width:25px;height:25px;color:#fff;}

/* ═══ HOME: AUDIENCE SPLIT (B2B / B2C) ═══ */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.aud-card{position:relative;display:flex;flex-direction:column;background:var(--navy2);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 30px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;}
.aud-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:.9;}
.aud-card--b2c::before{background:linear-gradient(135deg,#38bdf8,#6366f1);}
.aud-card:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:0 24px 60px -30px rgba(0,0,0,.7);}
.aud-tag{align-self:flex-start;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:var(--muted2);border:1px solid var(--border2);border-radius:var(--r-pill);padding:5px 12px;margin-bottom:18px;}
.aud-name{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--white);margin-bottom:10px;}
.aud-desc{font-size:14.5px;line-height:1.65;color:var(--muted2);margin-bottom:18px;}
.aud-points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;}
.aud-points li{position:relative;padding-left:24px;font-size:13.5px;color:var(--muted2);line-height:1.4;}
.aud-points li::before{content:'';position:absolute;left:2px;top:3px;width:12px;height:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg);}
.aud-cta{margin-top:auto;font-size:14px;font-weight:600;color:var(--red2);transition:transform .2s;}
.aud-card:hover .aud-cta{transform:translateX(4px);}
@media(max-width:760px){.aud-grid{grid-template-columns:1fr;}}

/* ═══ HOME: cases — multiple metrics ═══ */
.cc-bottom{flex-direction:column;align-items:stretch;gap:14px;}
.cc-metrics{display:flex;flex-wrap:wrap;gap:18px;}
.cc-metrics .cc-metric{font-size:18px;}
.cc-link{align-self:flex-start;}

/* ═══ HOME: FAQ ═══ */
.faq-grid{display:grid;grid-template-columns:360px 1fr;gap:56px;align-items:start;}
.faq-aside{position:sticky;top:96px;}
.faq-aside-title{margin-bottom:16px;}
.faq-aside-txt{font-size:15px;line-height:1.7;color:var(--muted2);margin-bottom:22px;max-width:340px;}
.faq-aside-btn{text-decoration:none;}
.faq-list{display:grid;gap:12px;}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr;gap:26px;}.faq-aside{position:static;}}
.faq-item{background:var(--navy2);border:1px solid var(--border);border-radius:12px;padding:0 22px;transition:border-color .25s;}
.faq-item[open]{border-color:var(--border2);}
.faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--white);}
.faq-q::-webkit-details-marker{display:none;}
.faq-ic{position:relative;flex-shrink:0;width:16px;height:16px;}
.faq-ic::before,.faq-ic::after{content:'';position:absolute;background:var(--red);border-radius:2px;transition:transform .25s,opacity .25s;}
.faq-ic::before{top:7px;left:0;width:16px;height:2px;}
.faq-ic::after{top:0;left:7px;width:2px;height:16px;}
.faq-item[open] .faq-ic::after{transform:scaleY(0);opacity:0;}
.faq-a{padding:0 0 22px;font-size:14.5px;line-height:1.7;color:var(--muted2);max-width:70ch;}

/* ═══ HOME: quick estimate form ═══ */
.qf-sec{background:var(--navy2);}
.qf-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.qf-left .s-title{margin-bottom:20px;}
.qf-sub{font-size:15px;line-height:1.7;color:var(--muted2);max-width:420px;}
.qf-form{display:grid;gap:14px;background:var(--navy);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.qf-msg{min-height:84px;}
.qf-submit{width:100%;font-size:15px;padding:15px;margin-top:2px;}
.qf-note{font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center;}
.qf-err{color:#e84040;font-size:12px;margin-top:5px;}
.qf-success{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);border-radius:10px;padding:14px 18px;margin-bottom:16px;color:#4ade80;font-size:14px;}
select.form-input{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2396a7bf' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;}
@media(max-width:760px){.qf-wrap{grid-template-columns:1fr;gap:28px;}.qf-row{grid-template-columns:1fr;}}

/* ══════════════ WHY-US (enterprise) ══════════════ */
.wh-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.wh-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border2);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--muted2);background:rgba(255,255,255,.02);}
.wh-chip b{font-family:'Space Grotesk',sans-serif;color:var(--white);font-weight:700;}
.wh-chip--accent{border-color:rgba(226,50,50,.4);color:var(--red2);background:rgba(226,50,50,.08);font-weight:600;}
.wh-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.wh-hero-actions .btn-red,.wh-hero-actions .btn-ghost{text-decoration:none;}

/* ── Page-hero aside (right column: stats / info / quote / links) ── */
.ph-aside{min-width:0;display:grid;gap:14px;}
.ph-aside > *{animation:phin .7s cubic-bezier(.23,1,.32,1) both;}
.ph-aside > :nth-child(2){animation-delay:.1s;}
@keyframes phin{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.ph-panel{border:1px solid var(--border2);border-radius:var(--r-xl);padding:22px;background:rgba(255,255,255,.03);}
.ph-panel-t{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ph-stat{border:1px solid var(--border);border-radius:14px;padding:16px 16px 15px;background:rgba(255,255,255,.02);transition:transform .35s cubic-bezier(.23,1,.32,1),border-color .35s;}
.ph-stat:hover{transform:translateY(-3px);border-color:rgba(226,50,50,.4);}
.ph-stat-v{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ph-stat-l{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.35;}
.ph-info{display:grid;gap:0;}
.ph-info-row{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--border);color:var(--muted2);text-decoration:none;font-size:14px;line-height:1.4;transition:color .2s;word-break:break-word;}
.ph-info-row:last-child{border-bottom:none;}
a.ph-info-row:hover{color:var(--white);}
.ph-ico{width:34px;height:34px;flex-shrink:0;border-radius:9px;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--red2);}
.ph-ico svg{width:16px;height:16px;}
.ph-quote-q{font-size:14.5px;line-height:1.62;color:var(--muted2);font-style:italic;margin:0;}
.ph-quote-foot{display:flex;align-items:center;gap:10px;margin-top:16px;}
.ph-quote-ava{width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;}
.ph-quote-ava img{width:100%;height:100%;object-fit:cover;}
.ph-quote-name{font-size:13px;font-weight:600;color:var(--white);}
.ph-quote-role{font-size:11.5px;color:var(--muted);}
.ph-links{display:flex;flex-wrap:wrap;gap:9px;}
.ph-link{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border2);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--muted2);background:rgba(255,255,255,.02);text-decoration:none;transition:color .2s,border-color .2s,transform .2s;}
.ph-link:hover{color:var(--white);border-color:rgba(226,50,50,.45);transform:translateY(-2px);}
.ph-link--accent{border-color:rgba(226,50,50,.4);color:var(--red2);background:rgba(226,50,50,.08);}
@media(max-width:1024px){.page-hero{grid-template-columns:1fr;gap:34px;}.page-hero::before{width:360px;height:360px;}}
@media(prefers-reduced-motion:reduce){.ph-aside > *{animation:none;}}
/* ── Contacts hero: text + big contact links (left), form panel (right) ── */
/* Contacts hero: full-width head, then a balanced 2-col body (form | contacts) */
.cn-hero{display:block;}
.cn-hero-head{max-width:720px;margin:0 auto 34px 0;}
.cn-hero-head .wh-chips{margin-top:22px;}
.cn-hero-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:stretch;}
.cn-hero-side{display:grid;grid-auto-rows:1fr;gap:14px;min-width:0;}
.cn-contact{display:flex;align-items:center;gap:16px;padding:22px 24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;transition:border-color .25s,transform .25s,background .25s,box-shadow .3s;}
.cn-contact:hover{border-color:rgba(var(--red-rgb),.45);transform:translateY(-3px);background:var(--surface-2);box-shadow:var(--shadow-1);}
.cn-contact .ph-ico{width:44px;height:44px;}
.cn-contact-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cn-contact-l{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);}
.cn-contact-v{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;color:var(--white);word-break:break-word;}
.cn-contact-hint{font-size:12.5px;color:var(--muted);margin-top:3px;}
@media(max-width:900px){.cn-hero-body{grid-template-columns:1fr;max-width:none;}.cn-hero-side{grid-auto-rows:auto;}}
.cn-form-panel{padding:26px;}
.cn-form-panel .ph-panel-t{margin-bottom:18px;}
.cn-form-panel .form-group{margin-bottom:12px;}
.cn-submit{width:100%;font-size:14px;padding:14px;text-decoration:none;}
.cn-form-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5;}

/* ── Contacts: "our office" invite card ── */
.cn-office{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--navy2);}
.cn-office--noimg{grid-template-columns:1fr;}
.cn-office-media{position:relative;min-height:340px;overflow:hidden;}
.cn-office-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.23,1,.32,1);}
.cn-office:hover .cn-office-media img{transform:scale(1.04);}
.cn-office-body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;}
.cn-office-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-1px;line-height:1.12;margin:12px 0 14px;}
.cn-office-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.cn-office-text{font-size:15px;line-height:1.75;color:var(--muted2);font-weight:300;margin:0 0 24px;max-width:480px;}
.cn-office-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.cn-office-actions .btn-red{text-decoration:none;}
.cn-office-addr{font-size:13px;color:var(--muted);line-height:1.4;text-decoration:none;transition:color .2s;}
a.cn-office-addr:hover{color:var(--white);text-decoration:underline;text-underline-offset:2px;}
@media(max-width:820px){.cn-office{grid-template-columns:1fr;}.cn-office-media{min-height:240px;}.cn-office-body{padding:32px 26px;}}
@media(prefers-reduced-motion:reduce){.cn-office:hover .cn-office-media img{transform:none;}}

.em-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;}
.em-card{display:flex;flex-direction:column;align-items:flex-start;gap:13px;background:var(--navy3);border:1px solid var(--border);border-radius:16px;padding:30px 26px;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.23,1,.32,1),border-color .3s,box-shadow .4s;}
.em-card:hover{transform:translateY(-5px);border-color:rgba(226,50,50,.35);box-shadow:0 22px 55px -16px rgba(0,0,0,.6);}
.em-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(226,50,50,.18),rgba(99,102,241,.18));border:1px solid var(--border2);}
.em-icon .ic-svg{width:24px;height:24px;color:#fff;}
.em-title{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.3px;}
.em-desc{font-size:14px;color:var(--muted2);line-height:1.6;flex:1;}
.em-link{color:var(--red2);font-size:13px;font-weight:500;}
@media(max-width:900px){.em-grid{grid-template-columns:1fr;}}

/* ══════════════ SERVICES (cards) ══════════════ */
.svc2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.svc2-card{display:flex;flex-direction:column;gap:13px;background:var(--navy2);border:1px solid var(--border);border-radius:var(--r-xl);padding:30px 28px;transition:transform .35s cubic-bezier(.23,1,.32,1),border-color .3s,box-shadow .4s;}
.svc2-card:hover{transform:translateY(-5px);border-color:rgba(226,50,50,.3);box-shadow:0 22px 55px -18px rgba(0,0,0,.6);}
.svc2-head{display:flex;align-items:center;gap:14px;}
.svc2-icon{width:50px;height:50px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(226,50,50,.16),rgba(99,102,241,.16));border:1px solid var(--border2);}
.svc2-icon .ic-svg{width:24px;height:24px;color:#fff;}
.svc2-num{margin-left:auto;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:1px;}
.svc2-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.3px;}
.svc2-desc{font-size:14px;color:var(--muted2);line-height:1.6;}
.svc2-points{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.svc2-point{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--muted2);line-height:1.5;}
.svc2-point svg{width:15px;height:15px;color:var(--red2);flex-shrink:0;margin-top:2px;}
.svc2-link{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:var(--red2);text-decoration:none;transition:transform .2s,color .2s;width:max-content;}
.svc2-card:hover .svc2-link{color:var(--red);transform:translateX(3px);}
@media(max-width:980px){.svc2-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:768px){.svc2-grid{grid-template-columns:1fr;}}

/* ══════════════ CLIENTS (rich cards) ══════════════ */
.cl2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cl2-card{display:flex;flex-direction:column;background:var(--navy2);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.23,1,.32,1),border-color .3s,box-shadow .4s;}
.cl2-card:hover{transform:translateY(-5px);border-color:rgba(226,50,50,.32);box-shadow:0 22px 55px -18px rgba(0,0,0,.6);}
.cl2-media{position:relative;height:170px;background:var(--navy3);border-bottom:1px solid var(--border);overflow:hidden;}
.cl2-shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s cubic-bezier(.23,1,.32,1);}
.cl2-card:hover .cl2-shot{transform:scale(1.04);}
.cl2-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--navy3),var(--navy4));}
.cl2-ph::after{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);}
.cl2-ph span{position:relative;z-index:1;font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.5px;color:rgba(255,255,255,.28);text-align:center;padding:0 18px;}
.cl2-body{display:flex;flex-direction:column;gap:12px;padding:20px 22px;flex:1;}
.cl2-top{display:flex;align-items:center;gap:12px;}
.cl2-logo{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;background:#fff;border-radius:10px;padding:6px;}
.cl2-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.cl2-logo--mono{background:var(--grad);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;padding:0;}
.cl2-name{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.3px;}
.cl2-country{font-size:11px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-top:3px;}
.cl2-desc{font-size:13.5px;color:var(--muted2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cl2-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);}
.cl2-type{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600;}
.cl2-more{font-size:13px;font-weight:600;color:var(--red2);transition:transform .2s;}
.cl2-card:hover .cl2-more{transform:translateX(3px);}
html.light .cl2-ph span{color:rgba(15,23,42,.22);}
@media(max-width:980px){.cl2-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.cl2-grid{grid-template-columns:1fr;}}

/* ══════════════ BLOG (rich listing) ══════════════ */
.bf-card{display:grid;grid-template-columns:1.15fr 1fr;background:var(--navy2);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;text-decoration:none;color:inherit;margin-bottom:28px;transition:transform .35s cubic-bezier(.23,1,.32,1),border-color .3s,box-shadow .4s;}
.bf-card:hover{transform:translateY(-4px);border-color:rgba(226,50,50,.3);box-shadow:0 24px 60px -20px rgba(0,0,0,.6);}
.bf-media{position:relative;min-height:280px;background:var(--navy3);overflow:hidden;}
.bf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s cubic-bezier(.23,1,.32,1);}
.bf-card:hover .bf-media img{transform:scale(1.04);}
.bf-ph{position:absolute;inset:0;background:linear-gradient(140deg,var(--navy3),var(--navy4));}
.bf-ph::after{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);}
.bf-body{display:flex;flex-direction:column;gap:14px;padding:34px 36px;}
.bf-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bf-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.5px;line-height:1.2;}
.bf-excerpt{font-size:14.5px;color:var(--muted2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bf-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--border);}
.blog-cover{position:relative;height:180px;background:var(--navy3);border-bottom:1px solid var(--border);overflow:hidden;}
.blog-cover img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s cubic-bezier(.23,1,.32,1);}
.blog-card:hover .blog-cover img{transform:scale(1.05);}
.blog-cover-ph,.blog-cover--ph::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,var(--navy3),var(--navy4));}
.blog-cat--over{position:absolute;top:12px;left:12px;z-index:1;background:rgba(15,16,18,.72);backdrop-filter:blur(6px);}
.blog-body{display:flex;flex-direction:column;}
.blog-foot{margin-top:12px;}
.blog-more{font-size:13px;font-weight:600;color:var(--red2);display:inline-flex;align-items:center;gap:5px;}
.blog-more::after{content:'→';transition:transform var(--dur-2) var(--ease);}
.blog-card:hover .blog-more::after{transform:translateX(4px);}
.blog-pagenav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:44px;}
.blog-page-btn{text-decoration:none;}
.blog-page-btn.is-off{opacity:.35;pointer-events:none;}
.blog-page-info{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--muted2);}
.bp-cover{max-width:1080px;margin:0 auto;padding:40px 48px 0;}
.bp-cover img{width:100%;max-height:440px;object-fit:cover;object-position:center top;border-radius:var(--r-xl);border:1px solid var(--border2);display:block;}
@media(max-width:900px){.bf-card{grid-template-columns:1fr;}.bf-media{min-height:200px;}.bf-body{padding:24px;}.bp-cover{padding:24px 20px 0;}}

/* ══════════════════════════════════════════════════════════
   MODERN REFRESH LAYER (2026)
   Appended so it wins by source order — nothing above is deleted.
   Crisper type · frosted glass · tokenised spring motion ·
   soft layered elevation · focus rings · clean light theme.
   ══════════════════════════════════════════════════════════ */

/* Light-theme depth tokens — soft, not muddy */
html.light{
  --glass:rgba(255,255,255,.72);
  --surface:#ffffff; --surface-2:#ffffff;
  --shadow-1:0 1px 2px rgba(15,23,42,.06),0 4px 12px -4px rgba(15,23,42,.10);
  --shadow-2:0 6px 16px -6px rgba(15,23,42,.10),0 20px 44px -16px rgba(15,23,42,.16);
  --shadow-3:0 10px 26px -8px rgba(15,23,42,.12),0 34px 70px -22px rgba(15,23,42,.20);
}

/* Typography polish — true 800 weight now loads; balance long headings */
body{letter-spacing:-.011em;font-optical-sizing:auto;}
.hero-title,.s-title,.page-hero-title,.proj-title,.cta-title,.why-page-title,.bf-title,.nf-title{text-wrap:balance;}
.hero-title{letter-spacing:-.03em;line-height:1.02;}
.page-hero-title,.proj-title{letter-spacing:-.025em;}
.s-title,.cta-title{letter-spacing:-.02em;}

/* Frosted glass nav (both themes) */
nav{background:var(--glass);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);box-shadow:inset 0 -1px 0 rgba(255,255,255,.05);}
html.light nav{background:var(--glass);box-shadow:inset 0 -1px 0 rgba(0,0,0,.05),0 1px 16px rgba(15,23,42,.05);}

/* Buttons — tokenised spring motion, physical press, softer radius */
.btn-red,.btn-ghost,.nav-cta{border-radius:var(--r-sm);transition:transform var(--dur-2) var(--ease),background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),filter var(--dur-1) var(--ease);}
.btn-red:active,.nav-cta:active{transform:translateY(0) scale(.97);}
.btn-ghost:active{transform:scale(.98);}

/* Accessible keyboard focus rings */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:2px;}

/* Cards — unified spring motion, rounder, soft layered lift on hover */
.cc,.pj-card,.blog-card,.em-card,.svc2-card,.cl2-card{border-radius:var(--r-lg);}
.cc,.pj-card,.blog-card,.sv-card,.news-card,.news-featured,.em-card,.svc2-card,.cl2-card,.bf-card,.ph-stat{transition:transform var(--dur-3) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-3) var(--ease),background var(--dur-2) var(--ease);}
.cc:hover,.pj-card:hover,.blog-card:hover,.news-featured:hover,.em-card:hover,.svc2-card:hover,.cl2-card:hover,.bf-card:hover{box-shadow:var(--shadow-3),0 0 0 1px rgba(var(--red-rgb),.18);}

/* Form fields — focus ring + light fill */
.form-input{border-radius:var(--r-sm);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease);}
.form-input:focus{border-color:rgba(var(--red-rgb),.55);box-shadow:0 0 0 3px rgba(var(--red-rgb),.14);}
html.light .form-input{background-color:#ffffff;}

/* Light-theme surface fixes — white-lift overlays that would vanish on white */
html.light .ph-panel,html.light .cn-form-panel{background:#ffffff;border-color:rgba(0,0,0,.07);box-shadow:var(--shadow-1);}
html.light .cn-office{box-shadow:var(--shadow-2);}
html.light .wh-chip,html.light .ph-link,html.light .hero-diff span,html.light .hbc-since,html.light .cn-contact,html.light .ph-stat{background:var(--navy2);border-color:rgba(0,0,0,.10);}
html.light .cn-contact:hover{background:#ffffff;}
html.light .wh-chip--accent,html.light .ph-link--accent{color:var(--red);}

/* Featured news card sits on a permanently-dark overlay — keep its text light in both themes */
html.light .news-featured .nf-title{color:#f3f2f0;}
html.light .news-featured .nf-excerpt{color:rgba(255,255,255,.72);}
html.light .news-featured .nf-cat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.62);}
html.light .news-featured .nf-date{color:rgba(255,255,255,.5);}

/* Icon-chip glyphs are white on a tint gradient — go red in light so they stay visible */
html.light .sv-icon .ic-svg,html.light .svc2-icon .ic-svg,html.light .em-icon .ic-svg,html.light .why-pg-icon .ic-svg{color:var(--red);}

/* ── Light theme: soft RESTING elevation so free-standing cards read as finished, not flat/empty on white ──
   (dark theme keeps its flat-on-dark look; these only add a resting lift under html.light) */
html.light .cc,
html.light .aud-card,
html.light .hw-step,
html.light .review,
html.light .news-card,
html.light .ph-stat,
html.light .techlogo,
html.light .sv-grid,
html.light .method-grid,
html.light .num-grid,
html.light .pj-card,
html.light .blog-card,
html.light .svc2-card,
html.light .em-card,
html.light .cl2-card,
html.light .bf-card,
html.light .proj-meta-card{
  box-shadow:0 1px 3px rgba(15,23,42,.06),0 12px 26px -12px rgba(15,23,42,.15);
  border-color:rgba(15,23,42,.10);
}
/* Numbers band sits on a tinted section — lift its cells to white so the block doesn't blend in */
html.light .num-cell{background:#ffffff;}
/* Firmer section dividers → clearer vertical rhythm between blocks in light */
html.light .section,html.light .section-sm{border-bottom-color:rgba(15,23,42,.09);}

/* ── Apple-grade polish v2: pills, rounder geometry, airier rhythm ── */
:root{--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;}

/* Pill buttons — the signature move */
.btn-red,.btn-ghost,.nav-cta{border-radius:var(--r-pill);}
.btn-red,.btn-ghost{padding:12px 26px;}
.qf-submit{padding:15px;}
.cn-submit{padding:14px;}

/* Rounder fields & panels */
.form-input{border-radius:var(--r-md);}
.ph-panel,.cn-form-panel,.cn-office,.news-featured,.bf-card{border-radius:var(--r-xl);}
.cc,.pj-card,.blog-card,.em-card,.svc2-card,.cl2-card{border-radius:var(--r-xl);}
.news-card{border-radius:var(--r-md);}

/* SVG brand covers are decorative wordmarks — crop them from the center,
   unlike real page screenshots which stay top-anchored */
.pj-shot[src*=".svg"],.cc-shot[src*=".svg"],.proj-reel-img[src*=".svg"]{object-position:center;}

/* ── Portfolio grid CTA placeholder ("your project could be here") ── */
.pj-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  padding:36px 28px;border:1.5px dashed rgba(var(--red-rgb),.45);border-radius:var(--r-xl);
  background:linear-gradient(135deg,rgba(var(--red-rgb),.07),rgba(var(--accent-rgb),.07));
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform var(--dur-3) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-3) var(--ease);}
.pj-cta::before{content:'';position:absolute;top:-40%;right:-20%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--red-rgb),.14),transparent 65%);pointer-events:none;}
.pj-cta:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.8);box-shadow:var(--shadow-2);}
.pj-cta--wide{grid-column:span 2;}
.pj-cta-plus{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:#fff;background:var(--grad);
  box-shadow:0 8px 22px -6px rgba(var(--red-rgb),.5);margin-bottom:10px;transition:transform var(--dur-3) var(--ease);}
.pj-cta:hover .pj-cta-plus{transform:rotate(90deg) scale(1.08);}
.pj-cta-title{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--white);}
.pj-cta-text{font-size:13.5px;line-height:1.65;color:var(--muted2);max-width:340px;margin:0;}
.pj-cta-btn{margin-top:12px;font-size:13px;font-weight:600;color:var(--red2);}
@media(max-width:768px){.pj-cta--wide{grid-column:auto;}}

/* ── Pride wall (projects page): brand tiles like the old-site portfolio ── */
.pride-sub{font-size:14px;color:var(--muted);margin:-20px 0 28px;}
.pride-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.pride-cell{aspect-ratio:5/3;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(18px,1.9vw,27px);letter-spacing:2px;line-height:1.25;color:#f3f2f0;border:1px solid rgba(255,255,255,.08);transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);}
.pride-cell:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
.pb-pumb{background:#43181c;font-family:Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:5px;}
.pb-intertop{background:#4e5a54;font-weight:500;letter-spacing:8px;font-size:clamp(15px,1.5vw,22px);}
.pb-vk{background:#3f2338;font-size:clamp(15px,1.5vw,22px);}
.pb-trust{background:#1b1e24;}
.pb-technodom{background:#24262b;font-size:clamp(16px,1.6vw,24px);}
.pb-technodom em{font-style:normal;color:#f5b70a;}
.pb-sven{background:#14355e;font-weight:800;letter-spacing:7px;}
.pb-novus{background:#1c4a22;font-weight:800;letter-spacing:3px;}
.pb-furshet{background:#471a1e;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:600;}
@media(max-width:900px){.pride-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}

/* Compact vertical rhythm — desktop only, mobile keeps its own spacing */
@media(min-width:769px){
  .section{padding:56px 48px;}
  .section-sm{padding:44px 48px;}
  .s-title{margin-bottom:36px;}
  .faq-aside-title{margin-bottom:16px;} /* keep the FAQ aside heading attached to its text */
  .page-hero{padding:48px 48px 52px;}
  .proj-hero{padding:56px 48px;}
  .cta-block{padding:64px 48px;}
}

/* Calmer, more deliberate sub-headline reading */
.page-hero-sub,.hbc-desc{line-height:1.75;}

/* ── Red accents get a soft glow (dark theme only — subtle on graphite) ── */
html:not(.light) .logo-red{text-shadow:0 0 18px rgba(var(--red-rgb),.55);}
html:not(.light) .s-eye{text-shadow:0 0 16px rgba(var(--red-rgb),.4);}
html:not(.light) .hero-title em,html:not(.light) .s-title em,html:not(.light) .page-hero-title em,
html:not(.light) .proj-title em,html:not(.light) .cta-title em,html:not(.light) .why-title em,
html:not(.light) .why-page-title em,html:not(.light) .sub-title em,html:not(.light) .cn-office-title em{
  filter:drop-shadow(0 0 18px rgba(var(--red-rgb),.32));
}
html:not(.light) .pj-arrow,html:not(.light) .blog-more,html:not(.light) .nc-arrow{text-shadow:0 0 12px rgba(var(--red-rgb),.4);}

/* Complete reduced-motion coverage (badge pulse, floating icons, glow, hovers) */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ── Contacts hero: keep the first block within the desktop viewport ──
   The stacked head + form/contacts block ran ~170px past the fold on ~720px-tall
   laptops. Tighten the desktop-only vertical rhythm so it fits above the fold.
   Scoped to .cn-hero / .cn-form-panel and guarded by min-width:769px, so the
   mobile layout and every other page are untouched (measured: hero 829→658px
   at 1280×720, now fits below the 64px sticky nav). */
@media(min-width:769px){
  .cn-hero{padding-top:26px;padding-bottom:28px;}
  .cn-hero-head{margin-bottom:16px;}
  .cn-hero .page-hero-title{font-size:clamp(32px,2.8vw,38px);margin-bottom:8px;}
  .cn-hero-head .wh-chips{margin-top:13px;}
  .cn-form-panel{padding:20px 22px;}
  .cn-form-panel .ph-panel-t{margin-bottom:11px;}
  .cn-form-panel .form-group{margin-bottom:8px;}
  .cn-form-panel textarea.form-input{min-height:70px;}
  .cn-submit{padding:13px;}
  .cn-form-note{margin-top:8px;}
}

/* ═══════════════════════════════════════════════════════════════
   SLIDE-OUT "START A PROJECT" PANEL (site-wide, Wezom-style)
═══════════════════════════════════════════════════════════════ */
.soc-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:250;
  display:flex;align-items:center;gap:9px;border:0;cursor:pointer;
  padding:15px 12px;border-radius:12px 0 0 12px;
  background:var(--grad);color:#fff;
  box-shadow:0 10px 30px -8px rgba(var(--red-rgb),.6);
  writing-mode:vertical-rl;transform-origin:center;
  transition:transform .4s var(--ease),box-shadow .3s,padding .3s,opacity .25s;}
.soc-tab:hover{padding-right:16px;box-shadow:0 14px 36px -8px rgba(var(--red-rgb),.75);}
.soc-tab.hidden{transform:translateY(-50%) translateX(130%);opacity:0;pointer-events:none;}
.soc-tab-txt{transform:rotate(180deg);font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.04em;white-space:nowrap;}
.soc-tab-dot{width:8px;height:8px;border-radius:50%;background:#fff;
  transform:rotate(180deg);animation:pulse 2s infinite;box-shadow:0 0 0 0 rgba(255,255,255,.6);}
@media(max-width:768px){
  .soc-tab{padding:12px 9px;border-radius:10px 0 0 10px;}
  .soc-tab-txt{font-size:12px;}
}

.soc-backdrop{position:fixed;inset:0;z-index:330;background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:socFade .3s ease;}
@keyframes socFade{from{opacity:0}to{opacity:1}}

.soc-panel{position:fixed;top:0;right:0;height:100%;width:min(430px,92vw);z-index:340;
  background:var(--navy2);border-left:1px solid var(--border2);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.7);
  transform:translateX(100%);transition:transform .42s var(--ease);
  overflow:hidden;display:flex;flex-direction:column;}
.soc-panel.open{transform:translateX(0);}
.soc-inner{padding:56px 34px 34px;overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch;}
.soc-close{position:absolute;top:16px;right:18px;width:40px;height:40px;z-index:2;
  border:1px solid var(--border2);border-radius:10px;background:transparent;color:var(--muted2);
  font-size:16px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s,transform .2s;}
.soc-close:hover{color:var(--white);border-color:rgba(255,255,255,.3);transform:rotate(90deg);}
.soc-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.4vw,28px);font-weight:800;
  letter-spacing:-.5px;line-height:1.1;margin:10px 0 10px;}
.soc-title em{font-style:normal;color:var(--red);}
.soc-sub{font-size:14px;line-height:1.6;color:var(--muted2);margin:0 0 22px;font-weight:300;}
.soc-form{gap:12px;}
.soc-ok{margin-top:14px;padding:12px 16px;border-radius:12px;border:1px solid rgba(63,185,80,.4);
  background:rgba(63,185,80,.12);color:#7ee38a;font-size:14px;}
.soc-contacts{margin-top:26px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;}
.soc-contacts a{color:var(--muted2);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s;}
.soc-contacts a:hover{color:var(--red2);}
html.light .soc-panel{background:#fff;}
html.light .soc-close{color:var(--muted);}
@media(prefers-reduced-motion:reduce){
  .soc-tab,.soc-panel{transition:none;}
  .soc-tab-dot{animation:none;}
}

/* ═══ HOME: audience cards — icon head (professional refresh) ═══ */
.aud-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.aud-ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(226,50,50,.16),rgba(99,102,241,.16));border:1px solid var(--border);}
.aud-ic .ic-svg{width:23px;height:23px;color:var(--red);}
.aud-head .aud-tag{margin-bottom:0;}
.aud-card--b2c .aud-ic{background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(99,102,241,.16));}
.aud-card--b2c .aud-ic .ic-svg{color:#38bdf8;}

/* ═══ HOME: technologies block — official brand marks (small squares) ═══ */
.techlogos{position:relative;}
/* ambient brand wash behind the grid — gives the section depth instead of flat graphite */
.techlogos::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 46% at 22% 22%,rgba(var(--accent-rgb),.16),transparent 70%),
             radial-gradient(38% 42% at 82% 34%,rgba(var(--red-rgb),.11),transparent 72%);}
.techlogos .s-title{margin-bottom:14px;}
.techlogos-sub{font-size:15px;line-height:1.65;color:var(--muted2);max-width:580px;margin:0 0 30px;font-weight:300;}
/* Two-column module: the logo grid on the LEFT (order:1), intro + figures on the RIGHT (order:2).
   Column count + tile size are balanced by JS (home.blade.php @push('scripts')) so rows stay even,
   the last row is CENTERED (flex justify-center) and never a lone tile. --tl-size is the JS knob. */
.techlogos-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:56px;align-items:start;position:relative;z-index:1;}
.techlogos-intro{order:2;position:sticky;top:96px;}
.techlogos-intro .s-title{margin-bottom:16px;}
.techlogos-intro .techlogos-sub{margin:0 0 26px;}
.techlogos-stats{margin:0 0 28px;}
.techlogos-cta{display:inline-block;text-decoration:none;}
.techlogos-grid{order:1;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.techlogos-layout .techlogos-grid{max-width:none;}
.techlogo{width:var(--tl-size,120px);aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:12px;
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);text-decoration:none;color:inherit;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .32s var(--ease),border-color .3s var(--ease),box-shadow .32s var(--ease);}
/* soft brand halo behind the icon — faint at rest, blooms on hover (color-mix with plain fallback) */
.techlogo::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:.28;
  background:radial-gradient(94% 86% at 50% 26%,rgba(var(--accent-rgb),.12),transparent 70%);
  background:radial-gradient(94% 86% at 50% 26%,color-mix(in srgb,var(--bc) 26%,transparent),transparent 70%);
  transition:opacity .34s var(--ease);}
.techlogo:hover{transform:translateY(-6px);
  border-color:var(--bc);border-color:color-mix(in srgb,var(--bc) 62%,var(--border));
  box-shadow:0 18px 32px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09);
  box-shadow:0 20px 38px -22px color-mix(in srgb,var(--bc) 72%,#000),inset 0 1px 0 rgba(255,255,255,.09);}
.techlogo:hover::before{opacity:1;}
.techlogo-mark{width:38px;height:38px;
  background:var(--muted2);background:color-mix(in srgb,var(--bc) 46%,var(--muted2));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;transition:background .28s var(--ease),transform .32s var(--ease);}
.techlogo:hover .techlogo-mark{background:var(--bc);transform:scale(1.07);}
.techlogo-name{font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--muted2);text-align:center;line-height:1.2;transition:color .25s;}
.techlogo:hover .techlogo-name{color:var(--white);}
html.light .techlogo{background:linear-gradient(180deg,#ffffff,#f4f7fa);}
html.light .techlogo-mark{background:var(--muted);background:color-mix(in srgb,var(--bc) 60%,var(--muted));}
html.light .techlogo:hover{box-shadow:0 16px 26px -20px rgba(15,23,42,.28);box-shadow:0 18px 30px -20px color-mix(in srgb,var(--bc) 40%,rgba(15,23,42,.3));}
@media(max-width:900px){
  .techlogos-layout{grid-template-columns:1fr;gap:36px;}
  .techlogos-intro{order:0;position:static;top:auto;}   /* heading back on top when stacked */
  .techlogos-grid{order:1;}
  .techlogos-intro .techlogos-sub{max-width:560px;}
  .techlogos-stats{max-width:520px;}
}
@media(max-width:600px){
  .techlogos-grid{gap:10px;}
  .techlogo{gap:8px;padding:10px;border-radius:13px;}
  .techlogo-mark{width:30px;height:30px;}
  .techlogo-name{font-size:10px;}
}

/* Home services — prominent "all services" button below the curated 9 */
.sv-all-wrap{margin-top:40px;display:flex;justify-content:center;}
.sv-all-btn{font-size:15px;font-weight:600;padding:16px 46px;border-radius:var(--r-pill);text-decoration:none;letter-spacing:.2px;box-shadow:0 14px 34px -14px rgba(var(--red-rgb),.7);}
.sv-all-btn:hover{transform:translateY(-2px);}

/* Skip-to-content link (WCAG 2.4.1 Bypass Blocks) — first focusable element,
   hidden off-screen until keyboard-focused, then slides in from the top-left. */
.skip-link{position:fixed;top:-64px;left:12px;z-index:2000;background:var(--red);color:#fff;padding:10px 16px;border-radius:0 0 12px 12px;font-weight:600;font-size:14px;text-decoration:none;transition:top .16s var(--ease,ease);}
.skip-link:focus{top:0;outline:2px solid #fff;outline-offset:2px;}

/* Screen-reader-only text. Used for the section <h2>s on listing pages whose design
   has no visible title: the heading outline stays complete for crawlers and assistive
   tech without adding a title the layout was never designed to show. NOT display:none
   — that would remove it from the accessibility tree and from the outline entirely. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}
#main-content:focus{outline:none;}
/* Typographic guard emitted by @nb / Typography::nb() — keeps a hyphenated term
   ("e-commerce", "SEO-оптимізація") and a numeric pair ("24/7", "2008–2026") on
   one line: no CSS property stops a browser breaking after a hyphen, so the
   nowrap has to sit on a wrapper around the term itself. */
.nb{white-space:nowrap;}


/* ══════════════════════════════════════════════════════════
   2026 FINAL POLISH — cohesion sweep (appended: wins by order)
   Micro-interactions · press states · entrance motion ·
   editorial rhythm · light-theme parity. Reduced-motion is
   already handled globally by the blanket rule above.
   ══════════════════════════════════════════════════════════ */

/* ── Card hover-affordance vocabulary: grounded lift + sliding red arrow ── */
.pf-btn:hover{transform:translateY(-1px);}
.review{transition:border-color var(--dur-2) var(--ease);}
.review:hover{border-color:rgba(var(--red-rgb),.28);}
.proj-back{transition:color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease);}
.proj-back:hover{transform:translateX(-3px);}

/* ── Physical press feedback on every control (buttons already have it) ── */
.pf-btn:active,.pf-page:active,.blog-page-num:active,.lb:active,.theme-toggle:active,
.reviews-arrow:active,.reviews-dot:active,.vt-btn:active,.lang-dd-item:active{transform:scale(.96);}

/* ── Anchored entrances for opening chrome ── */
@keyframes searchIn{from{opacity:0;transform:translateY(-8px) scale(.98);}to{opacity:1;transform:none;}}
.search-panel:not([hidden]){animation:searchIn var(--dur-2) var(--ease);transform-origin:top right;}
@keyframes menuDrop{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
.mob-menu.open{animation:menuDrop var(--dur-2) var(--ease);}

/* ── Reviews page: breathing room + one restrained brand quote glyph ── */
/* .review carries flex:0 0 clamp(..) — a WIDTH in the home carousel's row, but
   .reviews-list is a column, where it becomes a forced ~410px height (big empty
   gap under short quotes). Let the page cards size to their content. */
.reviews-list .review--full{flex:0 0 auto;}
.review--full{position:relative;}
.review--full .review-author{margin-top:26px;}
/* ═══ REVIEWS REFRESH (2026): aligned carousel cards + logo-wrap review page ═══ */
/* Shared brand header (home carousel): brand logo chip OR wordmark + a quote glyph */
.review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;}
.review-brand{display:inline-flex;align-items:center;min-height:34px;}
.review-brand-chip{display:inline-flex;align-items:center;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:8px 12px;box-shadow:0 4px 14px -10px rgba(0,0,0,.3);}
.review-brand-chip img{height:24px;max-width:132px;width:auto;object-fit:contain;display:block;}
.review-brand-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.4px;color:var(--muted2);white-space:nowrap;}
.review-qmark{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:46px;line-height:.7;color:rgba(var(--red-rgb),.18);pointer-events:none;-webkit-user-select:none;user-select:none;flex-shrink:0;}

/* Home carousel cards: normalized height + hover lift; foot ends in a round arrow */
.reviews-track .review{position:relative;min-height:312px;padding:26px 28px 24px;transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease);}
.reviews-track .review:hover{transform:translateY(-5px);border-color:rgba(var(--red-rgb),.3);box-shadow:var(--shadow-2);}
.reviews-track .review-quote{margin-bottom:20px;-webkit-line-clamp:4;line-clamp:4;min-height:calc(1.75em * 4);}
.reviews-track .review-foot{align-items:center;gap:14px;flex-wrap:nowrap;margin-top:auto;}
.reviews-track .review-name{font-size:14.5px;}
.reviews-track .review-role{font-size:12px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.review-arrow{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--border2);display:inline-flex;align-items:center;justify-content:center;color:var(--muted2);font-size:16px;text-decoration:none;transition:transform .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);}
.review-arrow:hover{color:#fff;background:var(--red);border-color:var(--red);transform:translateX(3px);}
@media(max-width:768px){.reviews-track .review{min-height:0;}}

/* Reviews page: a floated brand logo the review text wraps around, with a hover tilt */
.reviews-list{max-width:900px;}
.review--full{background:var(--navy2);border:1px solid var(--border);border-radius:var(--r-xl);padding:34px 38px 30px;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);}
.review--full:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.28);box-shadow:var(--shadow-2);}
.review--full::before{content:none;}
.rf-logo{float:left;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:18px 22px;margin:4px 26px 14px 0;box-shadow:0 8px 24px -14px rgba(0,0,0,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.rf-logo img{height:52px;max-width:190px;width:auto;object-fit:contain;display:block;}
.review--full:hover .rf-logo{transform:scale(1.05) rotate(-1.5deg);box-shadow:0 14px 34px -14px rgba(0,0,0,.5);}
.rf-mono{float:left;width:88px;height:88px;border-radius:16px;margin:4px 26px 10px 0;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:28px;letter-spacing:1px;box-shadow:0 10px 26px -12px rgba(var(--red-rgb),.6);transition:transform .35s var(--ease);}
.review--full:hover .rf-mono{transform:scale(1.05) rotate(-1.5deg);}
.review--full .review-quote{font-size:clamp(15px,1.35vw,17px);line-height:1.8;}
.review--full .review-author{clear:both;margin-top:24px;padding-top:22px;border-top:1px solid var(--border);}
@media(max-width:560px){
  .review--full{padding:26px 22px 24px;}
  .rf-logo{padding:14px 16px;margin:0 18px 12px 0;}
  .rf-logo img{height:40px;max-width:140px;}
  .rf-mono{width:66px;height:66px;font-size:22px;margin:0 18px 10px 0;}
}
@media(prefers-reduced-motion:reduce){
  .reviews-track .review,.review--full,.rf-logo,.rf-mono,.review-arrow{transition:none;}
  .review--full:hover .rf-logo,.review--full:hover .rf-mono{transform:none;}
}

/* ── Blog grid: lock the "read more" baseline + clamp excerpts across a row ── */
.blog-card{display:flex;flex-direction:column;}
.blog-body{flex:1;}
.blog-foot{margin-top:auto;}
.blog-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ── Light-theme parity: white-lift / frozen-colour surfaces that never got remapped ── */
html.light .mc-tag.g{color:#4f46e5;}
html.light .mc-tag.b{color:#0e7490;}
html.light .qf-success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#15803d;}
html.light .soc-ok{color:#15803d;}
html.light select.form-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}

/* ── Detail-page hero: inset to the same column as the breadcrumbs ───────────
   `1fr 380px` at full bleed parked the meta card against the right padding while
   the copy stops at its own max-width — ~900px of dead centre on a 1920 first
   screen. Centering a fixed pair fixed the gap but gave the page a second left
   edge, so instead the hero CONTENT is inset to the 1084px column the .crumbs
   above already use (max() keeps the 48px gutter on narrower screens). The card
   lands on the column's right edge and every text block shares one left edge.
   The section itself stays full width, so its border-bottom still bleeds.
   --page-col is the single source of truth for that column; page-scoped styles
   (service, process) inset their own sections to it too. */
:root{--page-col:1084px;--page-inset:max(48px,calc((100% - 1084px) / 2));}
.proj-hero{grid-template-columns:minmax(0,1fr) 380px;gap:48px;
  padding-left:var(--page-inset);padding-right:var(--page-inset);}
.proj-desc{max-width:640px;}
@media(max-width:768px){
  .proj-hero{padding-left:20px;padding-right:20px;}
}

/* ── Case page: "about the client's business" block ────────────────────────── */
.case-biz{padding:72px 48px;border-bottom:1px solid var(--border);}
.cb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:start;max-width:1180px;margin:0 auto;}
.cb-title{margin-bottom:18px;}
.cb-text{font-size:16px;line-height:1.8;color:var(--muted2);font-weight:300;margin:0;max-width:680px;}
.cb-points{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.cb-point{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;font-size:14px;line-height:1.5;color:var(--white);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);}
.cb-point svg{flex:0 0 auto;width:17px;height:17px;margin-top:1px;color:var(--red);}
@media(max-width:1024px){.cb-grid{grid-template-columns:1fr;gap:30px;}}
@media(max-width:768px){.case-biz{padding:48px 20px;}}

/* ── /services cards now link out to the per-service landing pages ─────────── */
.svc2-actions{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
.svc2-actions .svc2-link{margin-top:0;padding-top:0;}
.svc2-link--alt{color:var(--muted2);}
.svc2-card:hover .svc2-link--alt{color:var(--white);}
.svc2-name-link{color:inherit;text-decoration:none;}
.svc2-card:hover .svc2-name-link{color:var(--red);}
/* Home service tiles are links now — keep the card's own typography. */
a.sv-card{text-decoration:none;color:inherit;}

/* ── "How we work" → link to the full /process breakdown ───────────────────── */
.how-more{margin-top:34px;}
.how-more .btn-ghost{text-decoration:none;}

/* ── Logo wall: portrait / icon marks (e.g. KAN's diamond) ──────────────────
   The shared 38px cap is tuned for wide wordmarks; a tall mark scaled to the same
   height reads visually half the size of its neighbours. Give those a taller cap —
   .lw-item stretches to the tallest tile, so the row stays uniform. */
.lw-item img.lw-tall{max-height:48px;}

/* ── Mail-link fallback panel (components/mail-link.blade.php) ──────────────
   Shown only when a mailto: click found no handler on the visitor's machine.
   Fixed, with left/top set from the link's rect in JS: the component sits in
   four different wrappers (footer, home CTA, contacts, slide-out) and none of
   them is guaranteed to be a positioned, non-clipping ancestor.
   Background is --navy2, not --surface: a floating panel has to be opaque, and
   --surface is rgba(255,255,255,.03) in the dark theme. */
.ml-pop{position:fixed;z-index:1200;min-width:230px;max-width:min(300px,calc(100vw - 16px));padding:8px;
  display:flex;flex-direction:column;gap:2px;text-align:left;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--navy2);
  box-shadow:0 18px 40px rgba(0,0,0,.28);font-size:13px;}
.ml-pop-head{display:flex;align-items:flex-start;gap:10px;padding:4px 6px 8px;
  font-size:12px;line-height:1.4;font-weight:600;color:var(--muted2);}
.ml-pop-x{margin-left:auto;flex:0 0 auto;width:20px;height:20px;padding:0;line-height:18px;
  border:0;border-radius:6px;background:none;color:var(--muted);font-size:17px;cursor:pointer;}
.ml-pop-x:hover{background:var(--navy3);color:var(--white);}
.ml-pop-row{display:block;width:100%;padding:8px 10px;border:0;border-radius:8px;
  background:none;color:var(--white);font:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s;}
.ml-pop-row:hover{background:var(--navy3);color:var(--red);}
.ml-pop-addr{padding:8px 10px 4px;font-size:12px;color:var(--muted2);word-break:break-all;}
.ml-pop-copy.is-done{color:var(--muted2);}