/* Equal optical inset above, below and to the left of each green indicator. */
.hero-highlights .hero-pill { gap: 9px !important; padding-left: 13px !important; line-height: 1.2; }
.nav .nav-brand { gap:11px !important; }
.nav { --nav-fit-padding:48px; padding-inline:var(--nav-fit-padding) !important; }
@media (max-width:768px) { .nav { --nav-fit-padding:22px; } }
.nav .nav-links { gap:clamp(16px,1.875vw,36px) !important; }
.nav .nav-links a { font-size:13px !important; letter-spacing:.5px !important; }
.nav .nav-brand-dot { width:8px; height:8px; }
.nav .nav-brand-studio { font-size:13px !important; letter-spacing:2px !important; }
.nav .lang-toggle { padding:3px !important; gap:0; }
.nav .lang-toggle span { padding:4px 11px !important; font-size:11px !important; letter-spacing:1px !important; }
.nav .nav-brand-status {
  font-size:12px !important; letter-spacing:2.2px !important;
  line-height:1.25 !important; white-space:nowrap; flex-shrink:0;
}
/* Header mode is a content-fit decision, independent of scroll/device mode. */
html body.nav-is-compact .nav,
html body.nav-is-compact .nav.scrolled {
  position:absolute !important; inset:0 0 auto !important;
  background:transparent !important; border-color:transparent !important;
  box-shadow:none !important; backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
  min-height:calc(72px + env(safe-area-inset-top,0px));
}
html body.nav-is-compact .nav .nav-brand {
  display:flex !important; opacity:1 !important; visibility:visible !important;
  pointer-events:auto !important; transform:none !important;
  position:absolute !important; top:19px !important; left:31px !important; min-height:48px;
  align-items:center; flex-shrink:0;
}
html body.nav-is-compact .nav .nav-brand-status { display:inline !important; }
html body.nav-is-compact .nav .nav-brand-studio { display:none !important; }
html body.nav-is-compact .nav .nav-links {
  display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}
html body.nav-is-compact #hamburger { top:20px !important; }
@media (max-width:768px) {
  html body.nav-is-compact .nav .nav-brand { top:calc(11px + env(safe-area-inset-top,0px)) !important; left:23px !important; }
  html body.nav-is-compact #hamburger { top:calc(12px + env(safe-area-inset-top,0px)) !important; }
}
html body.nav-is-compact .nav > .lumina-layer { display:none !important; }
@media (max-width:768px) and (orientation:portrait) {
  #crt-frame {
    /* Fade the bounded scene into the page rather than showing a hard edge. */
    -webkit-mask-image:linear-gradient(#000 0%,#000 86%,transparent 100%);
    mask-image:linear-gradient(#000 0%,#000 86%,transparent 100%);
  }
}
html body.nav-is-wide .nav { position:fixed !important; }
html body.nav-is-wide .nav .nav-links {
  display:flex !important; opacity:1 !important; visibility:visible !important;
  pointer-events:auto !important; transform:none !important;
}
html body.nav-is-wide #hamburger {
  visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}
html body.nav-is-wide .nav.scrolled .nav-brand-status { display:none !important; }
html body.nav-is-wide .nav.scrolled .nav-brand-studio { display:inline !important; }
/* Illuminate the complete segmented control, without moving its geometry. */
#demo-modal .demo-viewport-controls,
#demo-modal .demo-viewport-controls:hover,
#demo-modal .demo-viewport-controls:focus-within,
#demo-modal .demo-viewport-button,
#demo-modal .demo-viewport-button:hover,
#demo-modal .demo-viewport-button:focus-visible {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  transition: color .24s ease !important;
}
.demo-window .demo-viewport-controls > .lumina-layer { inset: -1px; border-radius: inherit; }
@media (max-width:768px) {
  .hero-content .hero-highlights {
    position: absolute;
    top: calc(88px + env(safe-area-inset-top));
    left: 24px;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px !important;
    width: max-content;
    max-width: calc(100% - 48px);
    margin: 0;
  }
  .hero-highlights .hero-pill { gap: 8px !important; }
  .nav-brand { gap: 10px; }
  /* Keep the offer legible without letting two paragraphs dominate the phone. */
  .hero-content .hero-h1 { --hero-copy-gap: 28px; margin-bottom: 0; }
  .hero-h1 .hero-offer-row .thin {
    font-size: clamp(29px, 8.4vw, 35px);
    line-height: 1.08;
    letter-spacing: -.3px;
  }
  .hero-content .hero-mobile-copy { margin-top: 24px; }
  .hero-mobile-copy .hero-sub {
    font-size: 14px;
    line-height: 1.5;
    max-width: 36ch;
  }
  .hero-mobile-copy .hero-actions { margin-top: 24px; }
}

/* Shared outer-card geometry; smaller nested images retain an inset radius. */
:root { --studio-card-radius: 24px; }
/* Material polish 236: one small step darker, never a filter on content. */
body:not(.light) { --surface: #141416; --surface-raised: #1d1d20; --control: #222224; }
html body:not(.light) :is(#why-us,#services,#stack,#education,#projects,#contact) :is(.outcome-card,.sales-package,.sales-addon,.project-card,.diploma-card,.contact-form,.why-panel) {
  background: linear-gradient(145deg,#171719 0%,#111113 58%,#141416 100%) !important;
}
html body:not(.light) .contact-form :is(.form-input,.message-composer) {
  background: linear-gradient(145deg,#171719,#0e0e10 60%,#131315) !important;
}
html body:not(.light) :is(.btn-primary,.project-details,.project-demo,.sales-package-cta,.sales-addon-cta,.sales-addon-price-toggle,.sales-package-toggle,.package-compare-open,.projects-view-toggle,.form-file-trigger,.diploma-thumb-btn,.faq-telegram,.mobile-scroll-top,.demo-newtab,.demo-refresh,.demo-close,.demo-zoom-button,.case-modal-close,.gallery-close,.package-compare-close):not(:hover):not(:focus-visible) {
  background: #1d1d20 !important;
}
html body:not(.light) :is(.hero-pill,.project-tag,.sales-package-time) {
  background: rgba(255,255,255,.025) !important;
}
/* Dark frosted backing protects labels from the moving hero particles. */
html body:not(.light) #home .hero-highlights .hero-pill {
  background: rgba(20,21,24,.88) !important;
  -webkit-backdrop-filter: blur(18px) saturate(80%) !important;
  backdrop-filter: blur(18px) saturate(80%) !important;
}
html body:not(.light) #home .hero-actions .btn-secondary { background: #ebebe8 !important; }
html body:not(.light) #mobile-sticky-cta { background: #ebebe8 !important; color: #111 !important; }

@media (max-width:768px) {
  #why-us .why-comparison .why-marker {
    flex: 0 0 24px; width: 24px; height: 28px; margin-top: 0;
  }
  #why-us .why-comparison .why-marker svg {
    flex: none; width: 28px; height: 28px; stroke-width: 1.7;
  }
  #why-us .why-comparison :is(.why-problem,.why-solution) { gap: 7px; }
  #why-us .why-comparison .why-problem p { text-decoration: none !important; }
}
html body :is(.outcome-card,.sales-package,.sales-addon,.sales-process-step,.project-card,.diploma-card,.contact-form,.why-panel) {
  border-radius: var(--studio-card-radius) !important;
}
html body #education :is(.diploma-thumb,.diploma-thumb-inner) {
  border-radius: 14px !important;
}

/* One selected card; its lift and scale animate together, never on hover. */
html body #projects.section-projects .projects-grid:not(.is-expanded) .project-card,
html body #projects.section-projects .projects-grid:not(.is-expanded) .project-card:hover {
  transform: perspective(1600px) translateY(18px) rotateY(var(--orbit-angle,8deg)) scale(.88) !important;
  translate: none !important;
  scale: 1 !important;
  transition: transform .32s cubic-bezier(.22,1,.36,1) !important;
}
html body #projects.section-projects .projects-grid:not(.is-expanded) .project-card.is-carousel-active,
html body #projects.section-projects .projects-grid:not(.is-expanded) .project-card.is-carousel-active:hover {
  transform: perspective(1400px) translate3d(0,var(--project-hover-lift,0px),var(--project-hover-depth,0px)) rotateX(var(--project-corner-x,0deg)) rotateY(var(--project-corner-y,0deg)) scale(1.045) !important;
}
/* Pointer pose is composed in CSS, never captured as an inline layout matrix. */
html body #projects.section-projects .projects-grid.is-expanded .project-card {
  transform: perspective(1400px) translate3d(0,var(--project-hover-lift,0px),var(--project-hover-depth,0px)) rotateX(var(--project-corner-x,0deg)) rotateY(var(--project-corner-y,0deg)) !important;
  translate: 0 var(--project-reveal-y,0px) !important;
  scale: 1 !important;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity 1.25s cubic-bezier(.22,.68,.3,1), translate 1.25s cubic-bezier(.22,.68,.3,1) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body #projects.section-projects .projects-grid:not(.is-layout-transitioning) .project-card:is(.is-card-corner-flying,.is-card-corner-settling) {
    transition: transform 720ms cubic-bezier(.22,1,.36,1), opacity 1.25s cubic-bezier(.22,.68,.3,1), translate 1.25s cubic-bezier(.22,.68,.3,1) !important;
  }
}
html body #projects.section-projects .projects-grid.is-layout-transitioning .project-card:is(:hover,:not(:hover)) {
  transition: none !important;
}

/* Entrance is independent of corner tilt/FLIP, using opacity and translate. */
html body #projects.section-projects .projects-grid.is-expanded .project-card.reveal {
  opacity:0 !important;
  --project-reveal-y:26px;
}
html body #projects.section-projects .projects-grid.is-expanded .project-card.reveal.visible {
  opacity:1 !important;
  --project-reveal-y:0px;
}
html body #projects.section-projects .projects-grid:not(.is-expanded) .project-card {
  opacity:1 !important;
}
html body #projects.section-projects .projects-grid.portfolio-reveal:not(.is-expanded) {
  opacity:0;
  translate:0 26px;
  transition:opacity 1.25s cubic-bezier(.22,.68,.3,1), translate 1.25s cubic-bezier(.22,.68,.3,1);
}
html body #projects.section-projects .projects-grid.portfolio-reveal.visible:not(.is-expanded) {
  opacity:1;
  translate:0 0;
}
html body #home .hero-actions :is(.btn-primary,.btn-secondary) {
  border-radius:18px !important;
  font-size:15px !important;
}

/* Square desktop diploma action; the glyph follows the control's contrast. */
@media (min-width:1041px) {
  html body #education .diploma-card .diploma-thumb-btn {
    top:auto !important;
    bottom:12px !important;
    right:12px !important;
    transform:none !important;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:14px !important;
    background:var(--control,#202023) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    color:#eee !important;
  }
  html body #education .diploma-card .diploma-thumb-btn::before,
  html body #education .diploma-card .diploma-thumb-btn::after { display:none !important; }
  html body #education .diploma-card .diploma-thumb-btn svg {
    color:inherit !important;
    stroke:currentColor !important;
    fill:none !important;
    filter:none !important;
  }
  html body #education .diploma-card .diploma-thumb-btn:is(:hover,:focus-visible) {
    background:#f3f3f1 !important;
    border-color:#f3f3f1 !important;
    color:#111 !important;
  }
  html body #education .diploma-card .diploma-thumb-btn:is(:hover,:focus-visible) svg {
    color:#111 !important;
    stroke:#111 !important;
  }
}

/* Text-only statistics and mobile process rows are not painted cards. */
html body #education .about-numbers .number-card,
html body #education .about-numbers .number-card:hover,
html body #education .about-numbers .number-card::before,
html body #education .about-numbers .number-card::after {
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}
@media (min-width:769px) {
  html body:not(.light) #stack .sales-process-step {
    background:linear-gradient(145deg,#171719 0%,#111113 58%,#141416 100%) !important;
  }
}
@media (max-width:768px) {
  html body #stack .sales-process-step,
  html body #stack .sales-process-step:hover,
  html body #stack .sales-process-step::before,
  html body #stack .sales-process-step::after {
    background:transparent !important; box-shadow:none !important;
  }
  html body #stack .sales-process-step > .lumina-layer { display:none !important; }
}

/* In a vertical list, centre the file glyph and its divider as one control. */
@media (max-width:1040px) {
  html body #education .diploma-card .diploma-thumb-btn,
  html body #education .diploma-card .diploma-thumb-btn:is(:hover,:focus-visible,:active) {
    top:50% !important; bottom:auto !important; right:12px !important;
    width:48px !important; min-width:48px !important; height:48px !important;
    padding:0 0 0 12px !important; display:flex !important;
    align-items:center !important; justify-content:center !important;
    transform:translateY(-50%) !important; translate:none !important; border:0 !important;
    border-radius:0 !important; background:transparent !important;
    box-shadow:none !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important; color:#eee !important;
  }
  html body #education .diploma-card .diploma-thumb-btn::before {
    content:""; display:block !important; position:absolute !important;
    left:0 !important; top:2px !important; bottom:2px !important;
    width:1px !important; height:44px !important;
    background:rgba(255,255,255,.15) !important;
  }
  html body #education .diploma-card .diploma-thumb-btn > .lumina-layer,
  html body #education .diploma-card .diploma-thumb-btn::after { display:none !important; }
  html body #education .diploma-card .diploma-thumb-btn svg {
    position:static !important; width:18px !important; height:18px !important;
    margin:0 !important; transform:none !important; color:inherit !important;
    stroke:currentColor !important;
  }
}

/* Content-fit controls: full label, short label, then a whole new row. */
html body #services .sales-package-mobile-row {
  display:flex !important; flex-wrap:nowrap !important; align-items:center !important;
  gap:14px !important; min-width:0; padding:0;
}
html body #services .sales-package-price {
  flex:0 0 auto !important; width:max-content; max-width:none !important;
  white-space:nowrap !important; overflow-wrap:normal !important; word-break:normal !important;
}
html body #services .sales-package-mobile-row .sales-package-cta {
  display:inline-flex !important; flex:0 0 auto !important; width:auto !important;
  min-width:0 !important; margin:0 0 0 auto !important; min-height:46px !important;
  padding:11px 16px !important; font-size:var(--type-ui) !important;
  line-height:1.3 !important; white-space:nowrap !important;
  justify-content:center !important; align-items:center !important; text-align:center !important;
}
html body #services .sales-package-cta > :is(.package-cta-long,.package-cta-short) {
  flex:none !important; margin:0 !important; line-height:1.3 !important;
  translate:0 0 !important;
}
html body #services .sales-package-mobile-row .package-cta-long { display:inline !important; }
html body #services .sales-package-mobile-row .package-cta-short { display:none !important; }
html body #services .sales-package-mobile-row.is-compact-action .package-cta-long { display:none !important; }
html body #services .sales-package-mobile-row.is-compact-action .package-cta-short { display:inline !important; }
html body #services .sales-package-mobile-row.is-stacked-action { flex-wrap:wrap !important; }
html body #services .sales-package-mobile-row.is-stacked-action .sales-package-cta {
  flex-basis:100% !important; width:100% !important; margin-left:0 !important;
}
html body #services .sales-package-mobile-row .sales-package-toggle { margin-left:auto !important; }
html body #services .sales-addon-action { gap:16px !important; justify-content:flex-end !important; }
html body #services .sales-addon-action :is(.sales-addon-cta,.sales-addon-price-toggle) {
  white-space:nowrap !important; flex:0 0 auto !important;
}
html body #services .sales-addon-action.is-compact-action .sales-addon-cta { display:none !important; }
html body #services .sales-addon-action .sales-addon-price-toggle { margin-left:0 !important; }
/* Both translated labels share one control box; toggling copy never resizes it. */
html body #services .sales-addon-action .sales-addon-price-toggle {
  box-sizing:border-box !important;
  width:132px !important; min-width:132px !important; max-width:132px !important;
  height:48px !important; min-height:48px !important; max-height:48px !important;
  padding-block:10px !important; line-height:1.3 !important;
  align-items:center !important; justify-content:center !important;
}
html body #services .sales-addon { --direct-edge-inset:26px; }
html body #services .sales-addon .sales-addon-icon.desktop-fixed {
  inset:var(--direct-edge-inset) var(--direct-edge-inset) auto auto !important;
}
@media (max-width:768px) {
  html body #services .sales-addon { --direct-edge-inset:18px; }
  html body #services .sales-addon-action .sales-addon-price-toggle {
    width:120px !important; min-width:120px !important; max-width:120px !important;
  }
  /* Keep the last text lines beside the action, not above an empty extra row. */
  html body #services .sales-addon-body p { margin-top:8px !important; margin-bottom:0 !important; }
  html body #services .sales-addon-action { margin-top:0 !important; align-self:end !important; }
}

/* Short mobile service copy and a single composition action beside the price. */
#services .direct-copy-mobile { display:none; }
@media (max-width:768px) {
  html body #services .sales-package .sales-package-mobile-row .sales-package-cta { display:none !important; }
  html body #services .sales-package .sales-package-mobile-row { flex-wrap:nowrap !important; }
  #services .direct-copy-desktop { display:none; }
  #services .direct-copy-mobile { display:inline; }
  html body #services .sales-addon-body h3 { margin-top:22px !important; }
  #services .sales-addon-body h3 .direct-copy-mobile { white-space:pre-line; }
  #contact-form .form-label { padding-left:8px; }
}

/* Same cursor renderer and restrained material as the other inset surfaces. */
#contact-form {
  --contact-form-inset:30px;
  padding-inline:var(--contact-form-inset) !important;
  padding-block-end:var(--contact-form-inset) !important;
  --contact-field-inline:16px;
  --contact-field-block:14px;
}
#contact-form > button[type="submit"] { margin-bottom:0 !important; }
@media (max-width:768px) {
  #contact-form { --contact-form-inset:18px; }
  #contact-form { --contact-field-inline:14px; --contact-field-block:13px; }
}
#contact-form :is(.form-input-shell,.message-composer) {
  position:relative; border-radius:13px; isolation:isolate;
  background:rgba(0,0,0,.16) !important;
}
#contact-form .form-input-shell > .form-input { display:block; width:100%; background:transparent !important; }
#contact-form :is(.form-input-shell,.message-composer) > .form-field-error {
  position:absolute !important; top:12px; z-index:4 !important;
}
@media (hover:hover) and (pointer:fine) and (min-width:769px) {
  #contact-form .lumina-target--field > .lumina-layer {
    display:block !important; position:absolute !important; inset:0 !important;
    z-index:2 !important; border-radius:inherit !important; pointer-events:none;
    opacity:var(--lumina-strength,0); transition:opacity .34s ease;
  }
  #contact-form .lumina-target--field > .lumina-layer::before {
    background:radial-gradient(400px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.105),rgba(255,255,255,.041) 38%,rgba(255,255,255,.008) 70%,transparent 88%);
  }
  #contact-form .lumina-target--field > .lumina-layer::after {
    padding:1px; background:radial-gradient(250px circle at var(--lumina-x,50%) var(--lumina-y,50%),rgba(255,255,255,.48),rgba(255,255,255,.20) 42%,rgba(255,255,255,.034) 73%,transparent 91%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
}
#case-modal .case-modal-tech-list { width:100%; min-width:0; }
/* Every cover keeps its complete frame in both portfolio layouts. Do not
   inherit old per-project cover crops or scale the image on hover. */
html body #projects .project-card .project-thumb {
  height:auto !important; min-height:0 !important; max-height:none !important;
  /* Let the actual image establish height. WebKit can resolve a flex item's
     aspect-ratio before its negative full-bleed margins stretch its width. */
  aspect-ratio:auto !important; flex-shrink:0; align-self:stretch;
  background:#101012 !important;
}
html body #projects .project-card .project-thumb img {
  position:relative !important; inset:auto !important;
  display:block !important; width:100% !important; height:auto !important;
  min-height:0 !important; max-height:none !important;
  aspect-ratio:16/9; margin:0 !important;
  object-fit:contain !important; object-position:center !important;
  transform:none !important;
}
/* Only the textarea owns layout. Styling ::placeholder like a second box
   duplicates padding in WebKit and moves the hint away from the text origin. */
html body #contact-form textarea#cf-msg {
  position:absolute !important; inset:0 !important;
  display:block !important; box-sizing:border-box !important;
  width:100% !important; height:100% !important;
  min-height:0 !important; max-height:none !important;
  margin:0 !important; padding:var(--contact-field-block) var(--contact-field-inline) !important;
  border:0 !important; text-align:left !important; text-indent:0 !important;
  line-height:1.55 !important; resize:none;
}
html body #contact-form textarea#cf-msg::placeholder {
  display:inline !important; position:static !important;
  width:auto !important; height:auto !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  text-align:left !important; text-indent:0 !important;
}
#case-modal .case-modal-tech-list.is-balanced-tech {
  display:flex !important; flex-wrap:wrap !important;
}
#case-modal .case-modal-tech-list,
.section-projects .project-tags {
  gap:6px !important; justify-content:flex-start !important; align-content:flex-start;
}
#case-modal .case-modal-tech-list > span,
.section-projects .project-tags > .project-tag {
  flex:0 0 auto; margin-inline-start:0 !important;
  margin-inline-end:var(--tech-row-rest,0px) !important;
}
@media (min-width:769px) {
  .section-projects .project-tags.is-balanced-tech {
    display:flex !important; flex-wrap:wrap !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #projects.section-projects .projects-grid:not(.is-layout-transitioning) .project-card:is(:hover,:not(:hover)) {
    transition: none !important;
  }
  html body #projects.section-projects .projects-grid.is-expanded .project-card.reveal,
  html body #projects.section-projects .projects-grid.portfolio-reveal:not(.is-expanded) {
    opacity:1 !important;
    translate:none !important;
    transition:none !important;
  }
}