html { scroll-behavior: smooth; }

/* Hero: first screen fills viewport (mobile + tablet + desktop without zoom override below). */
#home > section.min-h-screen {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
}

/* Why Choose Us: full-bleed bg on section; bottom spacing lives on #reviews-root so padding is not “empty” band of this bg image above About. */
#reviews-section {
  overflow: hidden;
  background-color: #0a0a0a;
  background-image: url('../assets/images/vecteezy_dark-background-with-dynamic-shapes_26187355.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
#reviews-section #reviews-root {
  position: relative;
  min-height: 110vh;
  min-height: 110dvh;
  min-height: 110svh;
  overflow: visible;
  background-color: #f0f4f8;
}

/* Desktop only: match how the site looked at ~80% browser zoom while users stay at 100%. */
@media (min-width: 1024px) {
  html {
    zoom: 0.8;
  }
  /* Root zoom shrinks painted height; extend hero min-height so first screen still fills the viewport. */
  #home > section.min-h-screen {
    min-height: calc(100vh / 0.8);
    min-height: calc(100dvh / 0.8);
    min-height: calc(100svh / 0.8);
  }
  /* SERVICES row: same layout as reference at 100% zoom; compensate root zoom (was lg:h-[68vh] in HTML). */
  #services-container {
    height: calc(68vh / 0.8) !important;
    min-height: calc(68vh / 0.8);
    height: calc(68dvh / 0.8) !important;
    min-height: calc(68dvh / 0.8);
  }
  /* Why Choose Us: zoom-compensated min-height + room for orbit / Leave Feedback (was colliding with HOW WE WORK). */
  #reviews-section #reviews-root {
    min-height: calc(100vh * 1.1 / 0.8);
    min-height: calc(100dvh * 1.1 / 0.8);
    min-height: calc(100svh * 1.1 / 0.8);
  }
  /* Hero: headline + CTAs + right column sit at bottom of first screen */
  #home .hero-mobile-fill {
    justify-content: flex-end !important;
  }
}

:root {
  --text: #444444;
  --text_light: #999999;
  --accent: #000000;
  --border: #DDDDDD;
  --background: #FFFFFF;
  --background_light: #F5F5F5;
  --font-text: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --service-detail-duration: 0.52s;
  --service-detail-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body, button, input, textarea {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  background-color: var(--background);
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.cranez-heading {
  margin: 0 0 0.54em;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-accent);
  font-style: normal;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1, .cranez-h1 { font-size: clamp(99px, 6.875vmax, 132px); line-height: 1.05; }
h2, .cranez-h2 { font-size: clamp(79.2px, 6.05vmax, 110px); line-height: 1.06; }
h3, .cranez-h3 { font-size: clamp(66px, 5.5vmax, 88px); line-height: 1.075; }
h4, .cranez-h4 { font-size: clamp(52.8px, 4.95vmax, 70.4px); line-height: 1.09375; }
h5, .cranez-h5 { font-size: clamp(39.6px, 4.4vmax, 52.8px); line-height: 1.125; }
h6, .cranez-h6 { font-size: 30.8px; line-height: 1.2142857143; }
.cranez-body { font-size: 16px; line-height: 1.625; font-family: var(--font-text); color: var(--text); }
.cranez-body-sm { font-size: 14px; line-height: 1.5714285714; }
.cranez-label { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.cranez-nav { font-size: 15px; font-family: var(--font-accent); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.cranez-btn { font-size: 14px; font-weight: 400; letter-spacing: 0.05em; text-transform: none; font-family: "Inter", sans-serif; padding: 12px 26px; min-width: 140px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 25px; }
.text-outline-dark { -webkit-text-stroke: 1px #333; color: transparent; }
.text-gradient-accent { background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 20s linear infinite; }
.trusted-section .animate-marquee { animation-duration: 25s; }
/* Mobile menu: full-width panel from the right, dim backdrop */
.mobile-menu-root { z-index: 9999 !important; }
.mobile-menu-backdrop { -webkit-tap-highlight-color: transparent; }
.mobile-menu-panel {
  position: fixed;
  right: 0;
  left: auto;
  top: 0;
  z-index: 2;
  transform: translateX(100%);
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-menu-inner {
  -webkit-overflow-scrolling: touch;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.mobile-menu-root.mobile-menu-open { pointer-events: auto; }
.mobile-menu-root.mobile-menu-open .mobile-menu-backdrop { opacity: 1 !important; pointer-events: auto; }
.mobile-menu-root.mobile-menu-open .mobile-menu-panel { transform: translateX(0); }
/* Drawer „Menu” cím: mint a Get in touch panel fejléc (#get-started-modal-title) */
.mobile-menu-panel-title {
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #475569;
  line-height: 1.15;
}
@media (min-width: 640px) {
  .mobile-menu-panel-title { font-size: 0.82rem; }
}
/* Hamburger → X (motion/react MenuIcon geometria, CSS spring-szerű easing) */
.hamburger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.hamburger-icon { display: block; }
.hamburger-icon .hamburger-line {
  transform-origin: 12px 12px;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.hamburger-btn.hamburger-btn--open .hamburger-line--top {
  transform: translateY(6px) rotate(45deg);
}
.hamburger-btn.hamburger-btn--open .hamburger-line--mid {
  opacity: 0;
}
.hamburger-btn.hamburger-btn--open .hamburger-line--bot {
  transform: translateY(-6px) rotate(-45deg);
}
@media (hover: hover) {
  .hamburger-btn:not(.hamburger-btn--open):hover .hamburger-line--top {
    transform: translateY(6px) rotate(45deg);
  }
  .hamburger-btn:not(.hamburger-btn--open):hover .hamburger-line--mid {
    opacity: 0;
  }
  .hamburger-btn:not(.hamburger-btn--open):hover .hamburger-line--bot {
    transform: translateY(-6px) rotate(-45deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hamburger-icon .hamburger-line {
    transition-duration: 0.01ms;
  }
}
/* ur-style footer container */
.container-custom {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container-custom { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .container-custom { padding-left: 2rem; padding-right: 2rem; }
}
footer[role="contentinfo"] .icon-svg { display: block; }
/* HE/App.tsx Footer — back-to-top visible (global rule hides .back-to-top-btn) */
footer#contact.site-footer-he .site-footer-he-backtop.back-to-top-btn {
  display: flex !important;
}
footer#contact.site-footer-he p {
  font-family: "Inter", sans-serif;
}
body.mobile-menu-body-lock { overflow: hidden; position: fixed; width: 100%; }
/* Quote video: show full frame (no blend/crop) */
.quote-video-wrap { margin: 0; }
.quote-video-wrap .quote-side-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  object-fit: contain;
  object-position: center;
}
.mobile-menu-nav { gap: 0.25rem; }
.mobile-menu-footer { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mobile-menu-footer p { flex-shrink: 0; }
/* Mobil drawer: nav + HU — mint a nyitólap hero .btn-cta (14px, Inter, letter-spacing) */
@media (max-width: 1023px) {
  .mobile-menu-nav .mobile-menu-link,
  .mobile-menu-footer .mobile-menu-lang-hu {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    padding: 12px 0 !important;
  }
  .mobile-menu-nav .mobile-menu-link { display: block; }
  /* Alsó CTA-k: ugyanaz a méret/tipográfia, mint a hero mobil gombok */
  .mobile-menu-footer-cta {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: none;
    padding: 12px 26px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 25px;
    min-height: calc(12px + 12px + 1.2em);
  }
  .mobile-menu-footer-cta--dark {
    border-width: 1.5px;
    border-style: solid;
    border-color: #0a0a0a;
    background: #0a0a0a !important;
    color: #fff !important;
  }
  .mobile-menu-footer-cta--dark:hover {
    background: #fff !important;
    color: #0a0a0a !important;
  }
  .mobile-menu-footer-cta--light {
    border: 1.5px solid #e5e7eb;
    background: #fff !important;
    color: #0a0a0a !important;
  }
  .mobile-menu-footer-cta--light:hover {
    border-color: #0a0a0a;
    background: #fafafa !important;
  }
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes spin_10s { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-\[spin_10s_linear_infinite\] { animation: spin_10s 10s linear infinite; }
::selection { background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%); color: white; }
.btn-cta {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 12px 26px;
  min-width: 140px;
  border-radius: 25px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.btn-gradient {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #0a0a0a;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.btn-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0a0a0a;
  z-index: 0;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-gradient:hover {
  background: #fff;
  border-color: #0a0a0a;
}
.btn-gradient:hover::before {
  clip-path: inset(0 0 0 100%);
}
.btn-gradient:hover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta .btn-cta-text {
  position: relative;
  z-index: 1;
  transition: transform 0.35s ease;
  text-transform: none;
}

/* Pricing cards: CTA label uppercase ("GET STARTED") */
#pricing-plan-section #pricing-plan-cards .btn-cta .btn-cta-text {
  text-transform: uppercase;
}

.btn-cta:hover .btn-cta-text {
  transform: scale(0.96);
}
.btn-cta-stroke {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border: 0.5px solid currentColor;
  color: inherit;
}
.btn-cta-stroke::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #fff;
  z-index: 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: inherit;
}
.btn-cta-stroke:hover {
  filter: none;
  border-color: transparent;
  color: #0a0a0a;
}
.btn-cta-stroke:hover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-stroke:hover::before {
  width: 100%;
}
.btn-cta-stroke .btn-cta-text,
.btn-cta-stroke > * {
  position: relative;
  z-index: 1;
}
.btn-cta-stroke:hover .btn-cta-text {
  transform: scale(0.96);
}
.btn-cta-about.btn-gradient:hover { border-color: #0a0a0a; }
.btn-cta-about.btn-gradient:hover .btn-cta-text { color: #0a0a0a !important; }
.get-started-submit-btn:hover { border-color: #0a0a0a; }
.add-user-btn-plus { transition: transform 0.2s ease; color: #fff; }
.add-user-btn.btn-gradient::before { clip-path: inset(0 0 0 0); transition: background 0.35s ease; background: #0a0a0a; }
.add-user-btn.btn-gradient:hover::before { clip-path: inset(0 0 0 0); background: #fff; }
.add-user-btn.btn-gradient:hover { border-color: #0a0a0a; }
.add-user-btn.btn-gradient:hover .add-user-btn-plus { color: #0a0a0a !important; }
.add-user-btn.btn-gradient:hover .add-user-btn-plus [data-lucide] { color: #0a0a0a !important; stroke: #0a0a0a !important; }
/* White-on-dark CTA: default white bg black text, hover white border + white text */
.btn-cta-white-on-dark {
  background: #fff !important;
  border: 1.5px solid #fff;
  color: #0a0a0a !important;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-white-on-dark .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-white-on-dark:hover {
  background: transparent !important;
  border-color: #fff;
  color: #fff !important;
}
.btn-cta-white-on-dark:hover .btn-cta-text { color: #fff !important; }
/* Hero CTA with arrow (Explore Works): arrow-right motion; JS --in / --out */
.hero-cta-arrow-link .hero-cta-arrow-icon {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}
.hero-cta-arrow-link .hero-explore-arrow-svg .hero-explore-arrow-right-line {
  transform-box: fill-box;
  transform-origin: 0% 50%;
}
.hero-cta-arrow-link.hero-explore-arrow--in .hero-explore-arrow-right-line {
  animation: hero-explore-arrow-line-pulse 0.35s ease forwards;
}
.hero-cta-arrow-link.hero-explore-arrow--in .hero-explore-arrow-right-head {
  animation: hero-explore-arrow-head-pulse 0.35s ease forwards;
}
.hero-cta-arrow-link.hero-explore-arrow--out .hero-explore-arrow-right-line {
  animation: hero-explore-arrow-line-pulse 0.35s ease reverse forwards;
}
.hero-cta-arrow-link.hero-explore-arrow--out .hero-explore-arrow-right-head {
  animation: hero-explore-arrow-head-pulse 0.35s ease reverse forwards;
}
@keyframes hero-explore-arrow-line-pulse {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(calc(9 / 14)); }
  100% { transform: scaleX(1); }
}
@keyframes hero-explore-arrow-head-pulse {
  0% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta-arrow-link.hero-explore-arrow--in .hero-explore-arrow-right-line,
  .hero-cta-arrow-link.hero-explore-arrow--in .hero-explore-arrow-right-head,
  .hero-cta-arrow-link.hero-explore-arrow--out .hero-explore-arrow-right-line,
  .hero-cta-arrow-link.hero-explore-arrow--out .hero-explore-arrow-right-head {
    animation: none !important;
  }
}
/* Get in touch: default white border + white text, hover white fill + black text */
.btn-cta-get-in-touch {
  background: transparent !important;
  border: 1.5px solid #fff;
  color: #fff !important;
  transition: background 0.35s ease, color 0.35s ease;
}
.btn-cta-get-in-touch .btn-cta-text { color: #fff !important; }
.btn-cta-get-in-touch:hover {
  background: #fff !important;
  border-color: #fff;
  color: #0a0a0a !important;
}
.btn-cta-get-in-touch:hover .btn-cta-text { color: #0a0a0a !important; }
/* Hero Discover products: same look as (previous) navbar Get in touch – white bg + black text, hover white border + white text */
.btn-cta-hero-discover {
  background: #fff !important;
  border: 1.5px solid #fff;
  color: #0a0a0a !important;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-hero-discover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-hero-discover:hover {
  background: transparent !important;
  border-color: #fff;
  color: #fff !important;
}
.btn-cta-hero-discover:hover .btn-cta-text { color: #fff !important; }
/* Mobile menu only: Discover products – default white bg + black text, hover white border + white text */
.btn-cta-mobile-discover {
  background: #fff !important;
  border: 1.5px solid #fff;
  color: #0a0a0a !important;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-mobile-discover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-mobile-discover:hover {
  background: transparent !important;
  border-color: #fff;
  color: #fff !important;
}
.btn-cta-mobile-discover:hover .btn-cta-text { color: #fff !important; }
/* Learn more: default black bg + white text, hover black border + black text */
.btn-cta-learn-more {
  background: #0a0a0a !important;
  border: 1.5px solid #0a0a0a;
  color: #fff !important;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-learn-more .btn-cta-text { color: #fff !important; }
.btn-cta-learn-more:hover {
  background: #fff !important;
  border-color: #0a0a0a;
  color: #0a0a0a !important;
}
.btn-cta-learn-more:hover .btn-cta-text { color: #0a0a0a !important; }
.add-user-btn.btn-cta-learn-more {
  background: #0a0a0a !important;
  border-width: 2px;
  border-color: #fff;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.add-user-btn.btn-cta-learn-more:hover {
  background: #171717 !important;
  border-color: #fff;
  transform: none;
}
.add-user-btn.btn-cta-learn-more .add-user-btn-plus,
.add-user-btn.btn-cta-learn-more i {
  color: #fff !important;
  stroke: #fff !important;
  transition: transform 0.25s ease, color 0.25s ease;
}
.add-user-btn.btn-cta-learn-more:hover .add-user-btn-plus,
.add-user-btn.btn-cta-learn-more:hover i {
  color: #fff !important;
  stroke: #fff !important;
  transform: scale(1.15);
}
/* Visit our store: fill-from-bottom hover (white fills from bottom, both sides) */
.btn-cta-visit-store {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border: 1.5px solid #fff;
  color: #fff !important;
  transition: border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-visit-store::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: #fff;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.btn-cta-visit-store:hover::before { height: 100%; }
.btn-cta-visit-store .btn-cta-text,
.btn-cta-visit-store span { position: relative; z-index: 1; transition: color 0.3s ease 0.05s; }
.btn-cta-visit-store:hover .btn-cta-text { color: #0a0a0a !important; }
/* Send message: same switch effect as Get in touch (smooth bg + color transition, no clip-path) */
.btn-cta-send-message.btn-gradient {
  background: #0a0a0a !important;
  border-color: #0a0a0a;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-send-message.btn-gradient::before { display: none; }
.btn-cta-send-message.btn-gradient .btn-cta-text { color: #fff !important; }
.btn-cta-send-message.btn-gradient:hover {
  background: #fff !important;
  border-color: #0a0a0a;
}
.btn-cta-send-message.btn-gradient:hover .btn-cta-text { color: #0a0a0a !important; }
/* Read details / How it works: no underline, arrows blue by default; hover: text blue, arrow moves */
.read-details-arrow-link {
  color: #171717;
  text-decoration: none;
  transition: color 0.25s ease;
}
.read-details-arrow-link svg { color: #00D4FF; transition: color 0.25s ease, transform 0.25s ease; }
.read-details-arrow-link:hover { color: #00D4FF; }
.read-details-arrow-link:hover svg { color: #00D4FF; transform: translateX(4px); }
.section-headline-72 { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 40px; line-height: 1.1; }
@media (min-width: 640px) { .section-headline-72 { font-size: 52px; } }
@media (min-width: 1024px) { .section-headline-72 { font-size: 72px; } }
.section-headline-shop { font-size: 36px !important; }
@media (min-width: 640px) { .section-headline-shop { font-size: 48px !important; } }
@media (min-width: 1024px) { .section-headline-shop { font-size: 68px !important; } }
.section-headline-aeonik { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 40px; line-height: 1.1; text-transform: none; }
@media (min-width: 640px) { .section-headline-aeonik { font-size: 52px; } }
@media (min-width: 1024px) { .section-headline-aeonik { font-size: 72px; } }
.section-headline-aeonik-uppercase { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 36px; line-height: 1.1; text-transform: uppercase; }
@media (min-width: 640px) { .section-headline-aeonik-uppercase { font-size: 48px; } }
@media (min-width: 1024px) { .section-headline-aeonik-uppercase { font-size: 68px; } }
#services-container { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 1024px) {
  #services-container { flex-direction: row; gap: 0.5rem; }
  #services-container .service-pane { flex: 1; transition: flex 0.5s ease; min-width: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
  #services-container .service-pane:hover, #services-container .service-pane.service-pane-open { flex: 2.125; }
}
@media (max-width: 1023px) {
  #services-container { gap: 0.9rem; align-items: center; }
  #services-container .service-pane { border: 1px solid rgba(255,255,255,0.45); border-radius: 24px; overflow: hidden; min-height: 349px; width: 95%; max-width: 95%; }
  #services-container .service-pane .service-pane-img { filter: brightness(0.56) grayscale(1); }
  #services-container .service-pane:hover .service-pane-img,
  #services-container .service-pane.service-pane-open .service-pane-img { filter: brightness(0.56) grayscale(0); }
#services-container .service-pane .service-pane-title-row { flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; }
  #services-container .service-pane .service-pane-title { color: #fff !important; font-size: 22px !important; }
  #services-container .service-pane .service-pane-icon-wrap { transform: scale(0.8); width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; background: #00D4FF !important; color: #0a0a0a !important; }
  #services-container .service-pane .service-pane-icon-wrap i,
  #services-container .service-pane .service-pane-icon-wrap svg { width: 1.5rem !important; height: 1.5rem !important; color: inherit; stroke: currentColor; }
  #services-container .service-pane:hover .service-pane-icon-wrap,
  #services-container .service-pane.service-pane-open .service-pane-icon-wrap { transform: scale(0.8); background: #00D4FF !important; color: #0a0a0a !important; }
  #services-container .service-pane .service-pane-desc { max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; }
  #services-container .service-pane:hover .service-pane-desc,
  #services-container .service-pane.service-pane-open .service-pane-desc { max-height: 0 !important; opacity: 0 !important; }
  #services-container .service-pane .service-pane-label { opacity: 0 !important; visibility: hidden !important; }
  #services-container .service-pane .service-pane-price-wrap { opacity: 1 !important; pointer-events: auto !important; }
  #services-container .service-pane:hover .service-pane-price-wrap,
  #services-container .service-pane.service-pane-open .service-pane-price-wrap { opacity: 1 !important; }
  #services-container .service-pane .service-pane-cta-cell { order: 0 !important; margin-left: auto !important; }
  #services-container .service-pane .service-pane-cta-wrap { opacity: 1 !important; pointer-events: auto !important; font-size: 10px !important; }
}
.service-pane .service-pane-img { opacity: 0.6; transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease; }
@media (min-width: 1024px) {
  .service-pane .service-pane-img { filter: grayscale(1); }
  .service-pane:hover .service-pane-img, .service-pane.service-pane-open .service-pane-img { filter: grayscale(0); transform: scale(1.1); opacity: 1; }
}
@media (max-width: 1023px) {
  .service-pane:hover .service-pane-img, .service-pane.service-pane-open .service-pane-img { opacity: 1; transform: scale(1.05); }
}
.service-pane .service-pane-icon-wrap { background: rgba(255,255,255,0.1); color: #00D4FF; transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease; }
.service-pane:hover .service-pane-icon-wrap, .service-pane.service-pane-open .service-pane-icon-wrap { background: #00D4FF; color: #0a0a0a; transform: scale(1.1); }
.service-pane .service-pane-title { color: #fff; transition: color 0.35s ease; white-space: nowrap; }
.service-pane:hover .service-pane-title, .service-pane.service-pane-open .service-pane-title { color: #00D4FF; }
.service-pane .service-pane-price-wrap { opacity: 0; flex-shrink: 0; text-align: left; transition: opacity 0s ease; pointer-events: none; }
.service-pane:hover .service-pane-price-wrap, .service-pane.service-pane-open .service-pane-price-wrap { opacity: 1; pointer-events: auto; transition: opacity 0.35s ease; }
.service-pane .service-pane-title-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; transition: flex-direction 0.35s ease, gap 0.35s ease; }
.service-pane:hover .service-pane-title-row, .service-pane.service-pane-open .service-pane-title-row { flex-direction: row; align-items: center; gap: 0.75rem; }
.service-pane .service-pane-desc { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.35s ease; }
.service-pane:hover .service-pane-desc, .service-pane.service-pane-open .service-pane-desc { max-height: 10rem; opacity: 1; }
.service-pane .service-pane-line { border-top: 1px solid rgba(255,255,255,0.2); margin-top: 0.75rem; }
.service-pane .service-pane-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; width: 100%; min-height: 2.5rem; }
.service-pane .service-pane-bottom-left { display: flex; align-items: center; gap: 1rem; margin-right: auto; position: relative; justify-content: flex-start; }
.service-pane .service-pane-label { display: inline; color: #00D4FF; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-family: 'Inter', sans-serif; transition: opacity 0.35s ease; pointer-events: none; user-select: none; white-space: nowrap; }
.service-pane:hover .service-pane-label, .service-pane.service-pane-open .service-pane-label { opacity: 0; pointer-events: none; visibility: hidden; }
.service-pane .service-pane-cta-cell { order: -1; margin-left: 0; min-width: 110px; display: flex; justify-content: flex-start; align-items: center; flex-shrink: 0; transition: margin 0.35s ease; }
.service-pane:hover .service-pane-cta-cell, .service-pane.service-pane-open .service-pane-cta-cell { order: 0; margin-left: auto; }
.service-pane .service-pane-cta-wrap { display: inline-flex; align-items: center; gap: 0.5rem; color: #00D4FF; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; background: none; border: 0; cursor: pointer; padding: 0; font-family: 'Inter', sans-serif; transition: opacity 0.35s ease; opacity: 1; pointer-events: auto; }
.service-pane .service-pane-cta-wrap .service-pane-cta-arrow { transition: transform 0.25s ease; }
.service-pane .service-pane-cta-wrap:hover .service-pane-cta-arrow { transform: translateX(4px); }
.service-pane:focus, .service-pane:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 1023px) { .service-pane .service-pane-desc { display: block; } }
@media (max-width: 767px) {
  #portfolio-section-filter button { padding-bottom: 0.25rem !important; margin-bottom: -1px !important; }
  /* SERVICES: főcím melletti ikonok ne foglaljanak helyet mobilon */
  #services-container .service-pane .service-pane-icon-wrap {
    display: none !important;
  }
}
/* WORKS: középre zárt, szélesebb kétoszlopos kártyasáv */
#portfolio .portfolio-works-grid-shell {
  margin-left: auto;
  margin-right: auto;
}
/* Portfolio tabs: 1px; aktív fül – kék szöveg + kék alsó vonal (a korábbi Tailwind-ütközések nélkül) */
#portfolio-section-filter button {
  border-bottom-width: 1px;
}
#portfolio-section-filter .portfolio-filter-tab--active {
  color: #00d4ff !important;
  border-bottom-color: #00d4ff !important;
  position: relative;
  z-index: 1;
}
@media (max-width: 1023px) {
  #portfolio-section-filter { border-bottom-color: transparent !important; }
}
#portfolio.bg-white #portfolio-section-filter button.border-transparent:hover {
  border-color: rgba(0,0,0,0.2) !important;
}
/* Portfólió modal: fekete LIVE, 1px aláhúzás; hover: vonal jobbról összehúzódik (ugyanaz a 1px mint a szűrőknél) */
.portfolio-modal-live-und-link {
  position: relative;
  display: inline-block;
  color: #0a0a0a !important;
  padding-bottom: 2px;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.portfolio-modal-live-und-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #0a0a0a;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.35s ease;
  pointer-events: none;
}
.portfolio-modal-live-und-link:hover {
  color: #0a0a0a !important;
  opacity: 0.9;
}
/* Jobbról balra tűnik: bal rögzített, scaleX(0) a jobb szélt húzza balra */
.portfolio-modal-live-und-link:hover::after {
  transform: scaleX(0);
}
button.portfolio-modal-live-und-link {
  -webkit-appearance: none;
  appearance: none;
}
#service-detail-panel .portfolio-modal-hero-link {
  display: block;
  -webkit-tap-highlight-color: transparent;
}
#service-detail-panel .portfolio-modal-hero-link img {
  display: block;
  width: 100%;
  transform-origin: center;
}
.hero-headline-aeonik { font-family: "Manrope", sans-serif; font-weight: 500; text-transform: none; }
.hero-headline-text { font-size: 39px; }
@media (max-width: 767px) { .hero-headline-text { font-size: 40px; } }
@media (max-width: 767px) { .hero-headline-line3 { white-space: nowrap; } }
@media (min-width: 640px) { .hero-headline-text { font-size: 70px; } }
@media (min-width: 640px) and (max-width: 767px) {
  .hero-headline-text { font-size: 40px; }
}
@media (min-width: 1024px) { .hero-headline-text { font-size: 84px; } }
@media (min-width: 1024px) {
  .hero-headline-text .hero-headline-line1,
  .hero-headline-text .hero-headline-line2,
  .hero-headline-text .hero-headline-line3,
  .hero-headline-text .hero-headline-line2-wrap,
  .hero-headline-text .hero-headline-into {
    white-space: nowrap;
  }
}
.hero-headline-line1,
.hero-headline-line2,
.hero-headline-line3 {
  white-space: nowrap;
}
@media (max-width: 767px) { .hero-intro-text { font-size: 17px !important; } }
.hero-play-bg-img { display: block; pointer-events: none; }
.hero-play-btn { position: relative; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
.hero-play-btn .hero-play-icon-wrap,
.hero-play-btn .hero-play-label-wrap { isolation: isolate; position: absolute; inset: 0; z-index: 10; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; }
.hero-play-btn .hero-play-svg,
.hero-play-btn .hero-pause-svg { fill: #fff !important; stroke: #fff !important; color: #fff !important; }
.hero-play-btn .hero-play-label { color: #fff !important; }
.hero-play-btn .hero-play-icon { fill: #fff !important; stroke: #fff !important; color: #fff !important; }
.hero-play-svg,
.hero-pause-svg { fill: #fff !important; stroke: #fff !important; }
.hero-play-label { color: #fff !important; }
/* Play/Pause label: fit inside button, no overflow on any viewport */
.hero-play-label-wrap { overflow: hidden; }
.hero-play-label {
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .hero-play-label { font-size: 9px !important; letter-spacing: 0.08em !important; }
}
@media (min-width: 1024px) {
  .hero-play-label { font-size: 10px !important; letter-spacing: 0.1em !important; }
}
@media (max-width: 767px) {
  .hero-play-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
  .hero-play-btn .hero-play-icon { width: 10px !important; height: 10px !important; }
}
@media (min-width: 640px) {
  .hero-play-btn { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; }
  .hero-play-btn .hero-play-icon { width: 14px !important; height: 14px !important; }
}
.hero-headline-into { padding-left: 48px; }
@media (max-width: 767px) { .hero-headline-into { padding-left: 40px; } }
@media (min-width: 640px) { .hero-headline-into { padding-left: 68px; } }
@media (min-width: 1024px) { .hero-headline-into { padding-left: 0; } }
@media (max-width: 767px) {
  .hero-play-btn:hover { transform: translateY(-50%) scale(1); }
  .hero-play-btn .group-hover\:scale-110 { transform: none; }
  .hero-play-icon-wrap { opacity: 1 !important; }
  .hero-play-icon-wrap.group-hover\:opacity-0 { opacity: 1 !important; }
  .hero-play-label-wrap { display: none !important; }
}
/* Mobile headline play: no hover effect — static border, play/pause icons only */
@media (max-width: 1023px) {
  #hero-play-btn-mobile:hover {
    transform: translateY(-50%) scale(1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
}

/* Hero music: navbar + floating = same audio-lines SVG (SMIL + pauseAnimations); float uses accent blue */
.hero-music-indicator-btn { position: relative; }
.hero-music-indicator .hero-nav-audio-lines-svg {
  display: block;
  color: #ffffff;
}
.hero-music-indicator .hero-nav-audio-lines-svg path {
  stroke: currentColor !important;
  color: #ffffff !important;
}
/* Floating control (md+): same waveform as navbar, brand accent blue */
.hero-music-float .hero-nav-audio-lines-svg,
.hero-music-float .hero-music-float-audio-svg {
  display: block;
  color: #00d4ff;
}
.hero-music-float .hero-nav-audio-lines-svg path,
.hero-music-float .hero-music-float-audio-svg path {
  stroke: currentColor !important;
  color: #00d4ff !important;
}
@media (max-width: 767px) {
  .hero-music-indicator .hero-nav-audio-lines-svg {
    width: 1.625rem !important;
    height: 1.625rem !important;
  }
}
@media (min-width: 1024px) {
  .hero-music-indicator .hero-nav-audio-lines-svg,
  .hero-music-float .hero-nav-audio-lines-svg {
    width: 20px;
    height: 20px;
  }
}
#home .nav-home-actions #hero-music-indicator {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Mobile: keep music in the nav row, directly beside the hamburger (not fixed / overlapping) */
@media (max-width: 767px) {
  #home .nav-home-actions #hero-music-indicator.hero-music-indicator {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    margin: 0 !important;
  }
  #home .nav-home-actions {
    gap: 0.5rem !important;
    flex-wrap: nowrap;
  }
  #home .nav-home-actions > div.flex.shrink-0:first-of-type {
    display: contents;
  }
}
/* md+: floating duplicate fades in while scrolling, hides after viewport center passes page mid */
.hero-music-float {
  transition: opacity 0.35s ease;
}
.hero-music-float.hero-music-float--visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Navbar HU: same size as before nav links; no underline — hover only dims to gray */
#home .nav-home-actions a.nav-lang-hu {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff !important;
  text-decoration: none !important;
  padding-bottom: 3px;
  transform: translateY(2px);
  transition: color 0.2s ease;
}
#home .nav-home-actions a.nav-lang-hu::after {
  display: none !important;
  content: none !important;
}
#home .nav-home-actions a.nav-lang-hu:hover,
#home .nav-home-actions a.nav-lang-hu:focus-visible {
  color: #a3a3a3 !important;
}
@media (max-width: 767px) {
  .hero-play-label-wrap { display: none !important; }
}
/* Store: push bullet list slightly down toward "Join 50+..." */
.shop-managed-list { margin-top: 1.25rem; }
@media (min-width: 640px) { .shop-managed-list { margin-top: 1.5rem; } }

/* Store card description text 2px smaller */
.store-card-desc-sm { font-size: 14px; }
@media (min-width: 640px) { .store-card-desc-sm { font-size: 16px; } }

/* Read details modal: list closer to title, icons black, icon bg = services blue (#00D4FF), Close button spacing */
.read-details-list { margin-top: 0; }
.read-details-panel .read-details-icon { color: #111 !important; stroke: #111 !important; }
.read-details-panel .read-details-icon-bg { background: #00D4FF !important; }

/* Read details modal – mobile: vertical/portrait layout, same structure as desktop (list stacked) */
@media (max-width: 639px) {
  .read-details-list.read-details-list-vertical {
    display: block;
  }
  .read-details-list .read-details-li {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .read-details-list .read-details-item-title {
    text-transform: uppercase;
  }
}

/* .hero-lower-block: no global margin — spacing from Tailwind mt-* on each block */
@media (max-width: 1023px) {
  .hero-headline-aeonik, .hero-headline-text, .hero-headline-into, .hero-headline-aeonik .hero-headline-text span { color: #fff !important; }
}
@media (max-width: 1023px) {
  .hero-award-logo { display: none !important; }
  .hero-right-col { align-items: flex-start !important; text-align: left !important; }
  .hero-projects-row { justify-content: flex-start !important; margin-top: 1.5rem !important; }
}
@media (max-width: 767px) {
  #home .hero-mobile-fill {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 1.25rem;
    padding-bottom: 0;
  }
  #home .hero-mobile-fill .hero-mobile-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
  #home .hero-mobile-inner .hero-trusted-mobile-slot {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    flex: 0 0 auto;
    margin-top: 1.75rem;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    text-align: left;
  }
  #home .hero-mobile-inner .hero-intro-phone-only {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin-top: 0.5rem !important;
    text-align: left;
  }
  #home .hero-mobile-inner .hero-headline-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding-top: 2.35rem;
    padding-bottom: 0;
    text-align: left;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-headline-text {
    align-items: flex-start;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-headline-text .hero-headline-mobile-stack .hero-headline-mobile-line1,
  #home .hero-mobile-inner .hero-headline-col .hero-headline-text .hero-headline-mobile-stack .hero-headline-mobile-line2 {
    white-space: nowrap;
    font-size: clamp(30px, 8.2vw, 44px);
    line-height: 0.95;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-lower-block {
    margin-top: auto !important;
    width: 100%;
    max-width: 100%;
    text-align: left;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-intro-text {
    font-size: 15px !important;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-intro-phone-only {
    margin-left: 0;
    margin-right: 0;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-cta-buttons {
    margin-top: 0.625rem !important;
    margin-bottom: 1.85rem;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 0.5rem;
    flex: 0 0 auto;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-cta-buttons .btn-cta {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    max-width: none;
    box-sizing: border-box;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-cta-buttons .hero-cta-discover .hero-cta-arrow-icon {
    display: none !important;
  }
  #home .hero-mobile-inner .hero-headline-col .hero-cta-buttons .hero-cta-discover {
    gap: 0 !important;
  }
  #home .hero-mobile-inner .hero-trusted-mobile-slot .hero-right-col {
    align-items: flex-start !important;
    text-align: left !important;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #home .hero-mobile-inner .hero-trusted-mobile-slot .hero-projects-row {
    justify-content: flex-start !important;
    align-self: flex-start;
    width: 100%;
    margin-top: 0 !important;
    gap: 0.75rem;
  }
  #home .hero-mobile-inner .hero-trusted-mobile-slot .hero-projects-row > span.ml-4 {
    margin-left: 0 !important;
  }
  .hero-right-col { align-items: flex-start !important; }
  .hero-projects-row { margin-top: 0 !important; justify-content: flex-start !important; }
}
.section-label { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; color: #00D4FF; text-transform: uppercase; }
.section-label .section-label-dot { background: #00D4FF !important; }
.section-label-dot { width: 5px; height: 5px; border-radius: 50%; background: #00D4FF; flex-shrink: 0; }

/* No box-shadow: with html zoom / stacking, large blurs often read as a square plate behind the circle. */
.reviews-feedback-btn {
  box-shadow: none;
}
.reviews-avatar:hover { transform: scale(1.15); }
.reviews-avatar-pulse {
  animation: reviews-pulse 0.45s ease-in-out;
}
@keyframes reviews-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.25); filter: brightness(1.2); }
}
#reviews-section .font-display { font-family: "Manrope", "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; }
#reviews-section .font-body { font-family: "Inter", sans-serif; }
#reviews-modal-review.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) {
  #reviews-section .reviews-section-subtitle { font-size: 16px; }
}
#how-we-work-section .font-display { font-family: "Manrope", sans-serif; font-weight: 500; }
#how-we-work-section .team-step-arrow {
  background: rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.4);
  transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
#how-we-work-section .team-step-arrow i,
#how-we-work-section .team-step-arrow [data-lucide] {
  color: #00D4FF;
  transition: color 0.35s ease;
}
#how-we-work-section .group:hover .team-step-arrow {
  transform: translateY(-3px);
}
#how-we-work-section .about-team-circle {
  width: 166px; height: 166px; border-radius: 50%;
  background: rgba(0, 212, 255, 0.2);
  padding: 4px; border: 2px solid rgba(0, 212, 255, 0.5);
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
#how-we-work-section .about-team-circle:hover {
  transform: scale(1.05);
  border-color: rgba(0, 212, 255, 0.9);
}
#how-we-work-section .about-team-circle img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  transition: filter 0.35s ease;
}
#how-we-work-section .about-team-circle:hover img {
  filter: brightness(0.45) blur(4px);
}
#how-we-work-section .about-team-circle .about-team-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.35s ease;
  border-radius: 50%;
}
#how-we-work-section .about-team-circle:hover .about-team-overlay {
  opacity: 1;
}
#how-we-work-section .about-team-circle .about-team-overlay i {
  color: #00D4FF;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
#how-we-work-section .about-process-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}
#how-we-work-section .about-process-card:hover {
  border-color: rgba(0, 212, 255, 0.4);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 212, 255, 0.15);
}
/* About us: taller section + parallax (fixed bg on ::before; all viewports; reduced-motion: scroll). */
#how-we-work-section {
  background-color: #0a0a0a;
  isolation: isolate;
  min-height: 80vh;
  min-height: 80dvh;
  min-height: 80svh;
}
@media (min-width: 640px) {
  #how-we-work-section {
    min-height: 88vh;
    min-height: 88dvh;
    min-height: 88svh;
  }
}
@media (min-width: 1024px) {
  #how-we-work-section {
    min-height: calc(92vh / 0.8);
    min-height: calc(92dvh / 0.8);
    min-height: calc(92svh / 0.8);
  }
}
#how-we-work-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../assets/images/vecteezy_dark-background-with-dynamic-shapes_26187355.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce) {
  #how-we-work-section::before {
    background-attachment: scroll;
  }
}
/* About us: extra darkening over parallax background (cumulative with sm:bg-black/40) */
@media (max-width: 639px) {
  #how-we-work-section .how-we-work-bg-overlay {
    background-color: rgba(0, 0, 0, 0.4);
  }
}

/* Pricing plans: looping video background + overlay (no ::before image). */
#pricing-plan-section {
  background-color: #0a0a0a;
  isolation: isolate;
}
#pricing-plan-section .pricing-plan-bg-video {
  object-fit: cover;
  object-position: center center;
}
@media (prefers-reduced-motion: reduce) {
  #pricing-plan-section .pricing-plan-bg-video {
    display: none;
  }
}
@media (max-width: 639px) {
  #pricing-plan-section .pricing-plan-bg-overlay {
    background-color: rgba(0, 0, 0, 0.4);
  }
}
@media (max-width: 768px) {
  #how-we-work-section .about-team-ul li { width: auto; min-width: 88px; max-width: 160px; }
  #how-we-work-section .about-team-circle { width: 88px; height: 88px; padding: 3px; }
  #how-we-work-section .about-team-circle .about-team-overlay .about-team-icon-wrap { width: 40px; height: 40px; }
  #how-we-work-section .about-team-circle .about-team-overlay i { width: 1.25rem; height: 1.25rem; }
  #how-we-work-section .about-team-circle + p { font-size: 12px; }
  #how-we-work-section .about-team-circle + p + span + span { font-size: 12px; }
  .about-team-role { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  }
.cranez-label, .about-trust-line, .body-inter { font-family: "Inter", sans-serif; }
.group:hover .group-hover\:btn-gradient { background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%); border-color: #CC00FF; }
#portfolio-section-grid .portfolio-card-arrow {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
#portfolio-section-grid .portfolio-card-arrow i,
#portfolio-section-grid .portfolio-card-arrow [data-lucide] {
  color: white;
  transition: color 0.35s ease, transform 0.35s ease;
}
#portfolio-section-grid .group:hover .portfolio-card-arrow {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translate(6px, -6px);
}
#portfolio-section-grid .group:hover .portfolio-card-arrow i,
#portfolio-section-grid .group:hover .portfolio-card-arrow [data-lucide] {
  color: #00D4FF;
  transform: rotate(-45deg);
}

#portfolio-section-grid .portfolio-card-light .portfolio-card-arrow--light {
  background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.35);
}
#portfolio-section-grid .portfolio-card-light .portfolio-card-arrow--light i,
#portfolio-section-grid .portfolio-card-light .portfolio-card-arrow--light [data-lucide] {
  color: #fff;
  transition: color 0.35s ease, transform 0.35s ease;
}
#portfolio-section-grid .portfolio-card-light.group:hover .portfolio-card-arrow--light {
  background: #00D4FF;
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.45);
  transform: translate(6px, -6px);
}
#portfolio-section-grid .portfolio-card-light.group:hover .portfolio-card-arrow--light i,
#portfolio-section-grid .portfolio-card-light.group:hover .portfolio-card-arrow--light [data-lucide] {
  transform: rotate(-45deg);
}
#portfolio-section-grid .portfolio-card-light .portfolio-card-arrow--light {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hero-video-dark {
  filter: brightness(0.8);
}
@media (max-width: 767px) {
  #home > section:first-of-type {
    min-height: 100vh;
    min-height: 100dvh;
  }
  #hero-video {
    object-fit: contain;
    object-position: center;
  }
}
/* About us: bwstd logo below team, white; desktop: very slight shift left */
.about-bwstd-logo { filter: brightness(0) invert(1); }
@media (min-width: 1024px) {
  .about-bwstd-logo-wrap { transform: translateX(-12%); }
}
.about-fan-card { transition: transform 0.25s ease; }
.about-card-shadow { box-shadow: 0 10px 24px -8px rgba(0,0,0,0.18); }
.about-card-front { box-shadow: 0 24px 48px -12px rgba(0,0,0,0.28), 0 12px 24px -8px rgba(0,0,0,0.2); }
#about-cursor-area { perspective: 1000px; }
#about-move-wrap {
  transform-style: preserve-3d;
  will-change: transform;
}
.about-section-bg { position: relative; background: #ffffff; }

/* About tagline: per-character gray → black (JS toggles .is-filled), scroll-driven t */
.about-tagline-reveal .about-tagline-reveal-chars {
  display: block;
}
.about-tagline-reveal .about-reveal-char {
  display: inline;
  color: #a3a3a3;
}
.about-tagline-reveal .about-reveal-char.is-filled {
  color: #0a0a0a;
}
.about-partner-logos img { filter: brightness(0) opacity(0.75); }
.about-partner-logos img:hover { filter: brightness(0) opacity(1); }
.about-trust-line { font-size: 1.3em; line-height: 1.5; font-family: "Inter", sans-serif; }
.about-tagline { font-size: clamp(36.8px, calc(4.95vmax - 16px), 54.4px) !important; }
.about-tagline-smaller { font-size: clamp(36.8px, calc(4.95vmax - 16px), 54.4px) !important; }
@media (max-width: 1023px) {
  .about-tagline-mobile { font-size: clamp(28px, calc(4.95vmax - 26px), 44px) !important; }
}
@media (min-width: 1024px) {
  #shop .shop-managed-card > div:first-child > h3.store-card-title,
  #shop .shop-unlock-card h3.store-card-title {
    font-size: calc(2.875rem - 4px) !important;
  }
}
.cranez-btn { font-size: 13.7px; }
.nav-link-bar { font-size: 18px; font-weight: 500; line-height: 1.2; }
.nav-menu-link { font-weight: 500; font-size: 15px; font-family: "Inter", sans-serif; text-transform: none; position: relative; display: inline-block; padding-bottom: 4px; color: white !important; }
.nav-menu-link:hover { color: white !important; }
.nav-menu-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: #00D4FF; transform: scaleX(0); transform-origin: center; transition: transform 0.28s ease-out; }
.nav-menu-link:hover::after { transform: scaleX(1); transform-origin: center; }
.nav-menu-link.text-primary { color: white !important; }
.nav-menu-link.text-primary::after { transform: scaleX(1); }
/* Brand wordmark link: no underline, no color/transition change on hover */
.navbar-outer .navbar-brand-link,
.navbar-outer .navbar-brand-link:hover,
.navbar-outer .navbar-brand-link:focus,
.navbar-outer .navbar-brand-link:focus-visible {
  text-decoration: none !important;
  color: #fff !important;
  transition: none !important;
}
.navbar-outer .navbar-brand-link::after { display: none; content: none; }
.navbar-outer .navbar-brand-link .navbar-brand-wordmark {
  color: inherit !important;
  transition: none !important;
}
@media (max-width: 1023px) {
  #mobile-menu .mobile-menu-nav a.text-primary { color: #00d4ff !important; }
  #mobile-menu .mobile-menu-nav a.text-primary::after { display: none; }
}
@media (min-width: 1024px) {
  .hero-cta-buttons .hero-cta-services { order: 2; }
  .hero-cta-buttons .hero-cta-discover { order: 1; }
}
@media (max-width: 1023px) {
  .hero-cta-buttons .hero-cta-services { order: 2; }
  .hero-cta-buttons .hero-cta-discover { order: 1; }
}
.font-nav-brand { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 12px; }
@media (min-width: 1024px) { .font-nav-brand { font-size: 18px; } }
@media (max-width: 1023px) { .navbar-brand-text { font-size: 17px; text-transform: uppercase; } }
@media (max-width: 1023px) {
  .navbar-outer {
    margin: 10px 20px 0;
    width: calc(100% - 40px);
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.22);
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    overflow: hidden;
  }
  .navbar-outer nav {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .navbar-outer .logo-nav-size { height: 1.75rem; }
  .navbar-outer .navbar-brand-text { font-size: 15px; }
}
@media (min-width: 1024px) {
  .navbar-outer {
    margin: 16px auto 0;
    width: calc(100% - 48px);
    max-width: 1498px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(10,10,10,0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    overflow: visible;
  }
  .navbar-outer nav {
    max-width: 1498px;
  }
  .navbar-outer .navbar-brand-text { text-transform: uppercase; }
}
/* Homepage navbar: capsule width aligned to hero shell; lg: menu links centred in bar (1fr | auto | 1fr) */
@media (max-width: 1023px) {
  #home .nav-shell-hero-headline-width .navbar-outer {
    margin: 10px 0 0;
    width: 100%;
    max-width: none;
  }
}
@media (min-width: 1024px) {
  #home .nav-shell-hero-headline-width .navbar-outer {
    margin: 16px 0 0;
    width: 100%;
    max-width: none;
  }
  #home .nav-shell-hero-headline-width .navbar-outer nav.nav-home-topnav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(0.75rem, 2vw, 1.75rem);
    max-width: none;
  }
  #home .nav-shell-hero-headline-width .navbar-outer .nav-home-brand {
    justify-self: start;
    min-width: 0;
  }
  #home .nav-shell-hero-headline-width .navbar-outer .nav-home-links {
    justify-self: center;
  }
  #home .nav-shell-hero-headline-width .navbar-outer .nav-home-actions {
    justify-self: end;
  }
}
.navbar-outer { position: relative; z-index: 50; }
/* Homepage nav: logo 2px under default .logo-nav-size / .navbar-outer .logo-nav-size */
.navbar-outer .navbar-brand-logo.logo-nav-size {
  height: calc(2.125rem - 2px);
}
@media (max-width: 1023px) {
  .navbar-outer .navbar-brand-logo.logo-nav-size {
    height: calc(1.75rem - 2px);
  }
}
/* Homepage nav: wordmark typography */
.navbar-outer .navbar-brand-wordmark {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  font-size: calc(2.125rem - 10px);
}
@media (max-width: 1023px) {
  .navbar-outer .navbar-brand-wordmark {
    font-size: calc(1.75rem - 10px);
  }
}
.boabo-mega-trigger {
  position: static;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  margin-top: -1.25rem;
  margin-bottom: -1.25rem;
}
.boabo-mega-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.boabo-mega-chevron {
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.boabo-mega-trigger:hover .boabo-mega-chevron,
.boabo-mega-trigger.is-open .boabo-mega-chevron { transform: rotate(180deg); }
.boabo-mega-trigger:hover > a,
.boabo-mega-trigger.is-open > a { color: #00D4FF; }

.boabo-mega-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: rgba(28, 28, 34, 0.97);
  backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  border-radius: 24px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 999;
  pointer-events: none;
}
.boabo-mega-panel::before {
  content: '';
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
  height: 25px;
}
.boabo-mega-trigger:hover .boabo-mega-panel,
.boabo-mega-trigger.is-open .boabo-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.boabo-mega-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.boabo-mega-card:hover {
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(255,255,255,0.13);
  transform: translateY(-3px);
}
.boabo-mega-card-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.boabo-mega-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.55);
  transition: transform 0.5s ease, filter 0.5s ease;
}
.boabo-mega-card:hover .boabo-mega-card-img img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(0.95);
}
.boabo-mega-card-body {
  position: static;
  padding: 12px 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.boabo-mega-card-icon-wrap {
  width: 2.4rem;
  height: 2.4rem;
  min-width: 2.4rem;
  min-height: 2.4rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  color: #00D4FF;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.boabo-mega-card-icon {
  width: 16px;
  height: 16px;
  color: #00D4FF;
  flex-shrink: 0;
}
.boabo-mega-card-label {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.boabo-mega-card:hover .boabo-mega-card-icon-wrap {
  background: #00D4FF;
  color: #000;
  transform: scale(1.05);
}
.boabo-mega-card:hover .boabo-mega-card-icon {
  color: #000;
}
.boabo-mega-card:hover .boabo-mega-card-label {
  color: #00D4FF;
}
.shop-stat-block {
  margin-top: -1.25rem;
}
@media (min-width: 1024px) {
  .shop-stat-block { margin-top: -2rem; }
}
.shop-trusted-avatar,
.shop-trusted-btn {
  transition: transform 0.25s ease;
  cursor: default;
}
@media (max-width: 1023px) {
  .shop-trusted-avatar-mobile { width: 50px !important; min-width: 50px; height: 50px !important; }
  .shop-trusted-btn-mobile { width: 50px !important; min-width: 50px; height: 50px !important; }
  .shop-trusted-plus-mobile { width: 0.75rem !important; height: 0.75rem !important; }
}
@media (max-width: 767px) {
  .shop-managed-card .shop-managed-curated-wrap { margin-top: 1.75rem; }
  .shop-managed-card .shop-trusted-avatar-mobile { width: 42px !important; min-width: 42px; height: 42px !important; }
  .shop-managed-card .shop-trusted-btn-mobile { width: 42px !important; min-width: 42px; height: 42px !important; }
  .shop-managed-card .shop-trusted-plus-mobile { width: 0.65rem !important; height: 0.65rem !important; }
  .shop-managed-card { min-height: 420px; padding-bottom: 1.75rem; }
}
@media (min-width: 1024px) {
  .shop-managed-card .shop-trusted-avatar,
  .shop-managed-card .shop-trusted-btn { width: 52px !important; min-width: 52px; height: 52px !important; }
}
.shop-trusted-avatar:hover {
  transform: none;
}
.shop-trusted-btn:hover {
  transform: scale(1.08);
}
.shop-trusted-btn.btn-cta-learn-more:hover {
  transform: none;
}
.shop-trusted-btn:hover .add-user-btn-plus {
  transform: none;
}
.shop-trusted-btn.btn-cta-learn-more:hover .add-user-btn-plus {
  transform: scale(1.15);
}
/* Join 50+ plus: opens store modal; subtle lift on hover (black circle nudges) */
.add-user-btn.shop-trusted-btn.store-coming-soon-trigger.btn-cta-learn-more {
  transition:
    transform 0.28s cubic-bezier(0.34, 1.02, 0.64, 1),
    background 0.35s ease,
    border-color 0.35s ease;
}
.add-user-btn.shop-trusted-btn.store-coming-soon-trigger.btn-cta-learn-more:hover {
  transform: translateY(-1px);
}
.shop-trusted-row .shop-trusted-btn.store-coming-soon-trigger {
  cursor: pointer;
}
.add-user-btn-plus {
  transition: transform 0.2s ease;
}
.store-coming-soon-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.store-coming-soon-overlay.is-open .store-coming-soon-panel {
  transform: scale(1);
}
.store-coming-soon-panel {
  font-family: "Manrope", "Inter", sans-serif;
}
.store-coming-soon-close-btn:not(.btn-cta-learn-more) {
  transition: transform 0.2s ease;
}
.store-coming-soon-close-btn:not(.btn-cta-learn-more):hover {
  transform: translateY(-3px);
  border-color: transparent !important;
}
.store-coming-soon-close-btn:not(.btn-cta-learn-more):hover::before {
  clip-path: inset(0 0 0 0) !important;
}
.store-coming-soon-close-btn:not(.btn-cta-learn-more):hover .btn-cta-text {
  transform: none;
}
/* Got it: ugyanaz, mint a Discover our projects (btn-cta-learn-more) – fekete kitöltés, hover: fehér + fekete keret + fekete szöveg */
.store-coming-soon-close-btn.btn-cta-learn-more {
  background: #0a0a0a !important;
  border: 1.5px solid #0a0a0a !important;
  color: #fff !important;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.store-coming-soon-close-btn.btn-cta-learn-more .btn-cta-text {
  color: #fff !important;
}
.store-coming-soon-close-btn.btn-cta-learn-more:hover {
  background: #fff !important;
  border-color: #0a0a0a !important;
  color: #0a0a0a !important;
  transform: none;
}
.store-coming-soon-close-btn.btn-cta-learn-more:hover .btn-cta-text {
  color: #0a0a0a !important;
}

@media (max-width: 1023.98px) {
  .boabo-mega-panel { display: none !important; }
}
.nav-services-open .nav-dropdown-panel,
.nav-portfolio-open .nav-dropdown-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.nav-services-open > a .nav-dropdown-arrow,
.nav-portfolio-open > a .nav-dropdown-arrow {
  transform: rotate(180deg);
}
.nav-services-open > a,
.nav-portfolio-open > a {
  color: #00D4FF;
}
.logo-nav-size { height: 2.125rem; display: block; }
@media (min-width: 1024px) { .logo-nav-size { height: 2.125rem; } }
.nav-brand-text { font-size: 1.224rem; font-weight: 700; }
.hero-headline-sm { font-weight: 700; font-size: clamp(69.3px, 4.8125vmax, 92.4px); line-height: 1.05; }
.get-started-nav { background: white !important; color: #1a1a1a !important; }
.get-started-nav { position: relative; overflow: hidden; }
.get-started-nav::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%);
  transition: width 0.35s ease;
  z-index: 0;
  border-radius: inherit;
}
.get-started-nav:hover::after { width: 100%; }
.bg-gradient-accent { background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%); }
.get-started-nav:hover { color: white !important; filter: none; }
.get-started-nav > * { position: relative; z-index: 1; }
.get-started-nav:hover .btn-arrow { color: white !important; }
.hero-avatar-sm { width: 2.5rem; height: 2.5rem; }
@media (min-width: 1024px) { .hero-avatar-sm { width: 2.75rem; height: 2.75rem; } }
.get-started-nav .btn-arrow { color: #1a1a1a; transition: color 0.2s; }
.cranez-btn [data-lucide="arrow-right"], [data-lucide="arrow-right"].btn-arrow { width: 0.85rem; height: 0.85rem; transition: transform 0.39s ease; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.cranez-btn [data-lucide="arrow-right"] svg, [data-lucide="arrow-right"].btn-arrow svg { display: block; }
.cranez-btn:hover [data-lucide="arrow-right"], a:hover [data-lucide="arrow-right"].btn-arrow { transform: translateX(4px); }
.discover-more-btn { position: relative; overflow: hidden; transition: filter 0.3s ease; }
.discover-more-btn::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: white;
  transition: width 0.35s ease;
  z-index: 0;
  border-radius: inherit;
}
.discover-more-btn:hover::after { width: 100%; }
.discover-more-btn .discover-more-text,
.discover-more-btn .discover-more-arrow { position: relative; z-index: 1; transition: color 0.3s ease, background 0.3s ease, -webkit-background-clip 0.3s ease, background-clip 0.3s ease, transform 0.39s ease; }
.discover-more-btn:hover [data-lucide="arrow-right"] { transform: translateX(4px); }
.discover-more-btn:hover .discover-more-text {
  color: #111;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #111;
}
.discover-more-btn:hover .discover-more-arrow { color: #111; }
.carousel-padding { padding-left: 1rem; }
@media (min-width: 640px) { .carousel-padding { padding-left: 1.5rem; } }
@media (min-width: 1024px) { .carousel-padding { padding-left: 2rem; } }
@media (min-width: 1440px) { .carousel-padding { padding-left: calc((100vw - 1440px) / 2 + 2rem); } }
#modal-content { opacity: 0; transform: scale(0.8) translateY(40px); transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.4s; }
#modal-content.active { opacity: 1; transform: scale(1) translateY(0); }
.modal-inner-transition { transition: opacity 0.2s ease, transform 0.2s ease; }
.modal-inner-transition.fade-out { opacity: 0; transform: translateY(-10px); }
.modal-inner-transition.fade-in { opacity: 0; transform: translateY(10px); }
.fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }
#gallery-section .gallery-badge-logo { filter: none; }
@media (max-width: 767px) {
  #gallery-section .gallery-badge-inner { transform: scale(0.8); transform-origin: center center; }
}
#gallery-section .gallery-card:hover .gallery-card-img { filter: blur(6px); }
#gallery-section .gallery-card:hover .gallery-card-overlay { opacity: 1; }
#gallery-section .gallery-card-overlay-icon { color: #fff; stroke: currentColor; transform: scale(0.7); }
@media (max-width: 767px) {
  #gallery-section .gallery-card-overlay-icon { transform: scale(0.5); }
}
#showcase-marquee-section { font-family: "Inter", sans-serif; }
#showcase-marquee-section #rb-carousel-track { overflow: hidden; padding-bottom: 1rem; cursor: grab; user-select: none; }
#showcase-marquee-section #rb-carousel-track.rb-active-drag { cursor: grabbing; }
#showcase-marquee-section #rb-inner-track { display: flex; white-space: nowrap; will-change: transform; }
#showcase-marquee-section .rb-blog-card { width: 75vw; min-width: 75vw; height: 340px; transition: transform .3s ease, box-shadow .3s ease; }
#showcase-marquee-section .rb-blog-card:not(:last-child) { margin-right: .5rem; }
@media (max-width: 767px) {
  #showcase-marquee-section .rb-blog-card { width: 72vw; min-width: 72vw; height: 200px; min-height: 200px; }
  #showcase-marquee-section #rb-wrapper { min-height: 22vh; }
  #showcase-marquee-section #rb-wrapper > div { min-height: 22vh; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  #showcase-marquee-section #rb-carousel-track { padding-bottom: 0.5rem; }
  #showcase-marquee-section { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}
@media (min-width: 640px) {
  #showcase-marquee-section .rb-blog-card { width: 45vw; min-width: 45vw; height: 400px; }
}
@media (min-width: 1024px) {
  #showcase-marquee-section .rb-blog-card { width: 380px; min-width: 380px; height: 400px; }
}
#showcase-marquee-section .rb-card-image { filter: brightness(0.77); }
#showcase-marquee-section .group:hover .rb-card-image { filter: blur(6px) brightness(.7); transform: scale(1.05); }
#showcase-marquee-section .group:hover .rb-overlay-content { opacity: 1; transform: translateY(0); }
#showcase-marquee-section .rb-blog-hover-link [data-lucide] { color: #00D4FF; }
#showcase-marquee-section .rb-blog-hover-link:hover .rb-blog-icon-circle {
  transform: scale(1.08);
  animation: rb-icon-pulse 1.2s ease-in-out infinite;
}
@keyframes rb-icon-pulse {
  0%, 100% { transform: scale(1.08); }
  50% { transform: scale(1.14); }
}
#showcase-marquee-section .rb-gradient-button {
  background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%);
  color: white !important;
  box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
  transition: all .3s ease;
}
#showcase-marquee-section .rb-gradient-button:hover { box-shadow: none; transform: translateY(-2px); opacity: 1; }
#showcase-marquee-section .rb-gradient-tag {
  background: linear-gradient(90deg, rgba(31,41,55,.8) 0%, rgba(55,65,81,.6) 100%);
  color: #00D4FF;
  border: 1px solid rgba(0, 212, 255, 0.2);
  backdrop-filter: blur(4px);
}
#showcase-marquee-section .rb-gradient-ring {
  padding: 1.5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00D4FF, #CC00FF);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  cursor: pointer;
  transition: transform 0.3s ease;
}
#showcase-marquee-section .rb-gradient-ring a {
  background: rgb(10, 10, 10);
  backdrop-filter: none;
  transition: all .3s ease;
  display: flex;
  padding: 0.35rem;
  border-radius: 9999px;
  cursor: pointer;
}
#showcase-marquee-section .rb-gradient-ring a svg { width: 16px; height: 16px; }
#showcase-marquee-section .rb-caption-link { cursor: pointer; transition: transform 0.3s ease; }
#showcase-marquee-section .rb-blog-link-btn {
  width: 2.4rem;
  height: 2.4rem;
  min-width: 2.4rem;
  min-height: 2.4rem;
  background: linear-gradient(transparent, transparent) padding-box, linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
  transition: transform 0.3s ease;
}
#showcase-marquee-section .rb-blog-link-btn:hover i,
#showcase-marquee-section .rb-blog-link-btn:hover [data-lucide] { animation: rb-icon-pulse 0.6s ease-in-out; }
@keyframes rb-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
#showcase-marquee-section .rb-blog-link-btn,
#showcase-marquee-section .rb-blog-link-btn i,
#showcase-marquee-section .rb-blog-link-btn [data-lucide] { color: white; }
#showcase-marquee-section .rb-blog-card h3 { font-family: "Manrope", sans-serif; }

/* Pricing: outer section — mobilra függőlegesen ne vágjunk (banner + hosszú kártya); vízszintesen igen */
.pricing-plan-section-root {
  overflow-x: clip;
  overflow-y: visible;
}
@media (min-width: 768px) {
  .pricing-plan-section-root {
    overflow: hidden;
  }
}
.pricing-plan-inner {
  overflow: visible;
}
.safe-area-pb {
  padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
}

/* Pricing: WEBSITES/DMS swap animation — mobilon nem használjuk (kihagyva JS-ben); itt nullázzuk a maradék osztályokat */
#pricing-plan-anim {
  transform: translateX(0);
  opacity: 1;
  filter: blur(0);
  transition: none;
  will-change: transform, opacity, filter;
}
@media (max-width: 767px) {
  #pricing-plan-anim {
    will-change: auto;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}
#pricing-plan-anim.pricing-cards-exit {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease, filter 240ms ease;
}
#pricing-plan-anim[data-swap-dir="right"].pricing-cards-exit-active {
  transform: translateX(-22px);
  opacity: 0;
  filter: blur(1.5px);
}
#pricing-plan-anim[data-swap-dir="left"].pricing-cards-exit-active {
  transform: translateX(22px);
  opacity: 0;
  filter: blur(1.5px);
}
#pricing-plan-anim.pricing-cards-enter {
  transition: none;
}
#pricing-plan-anim[data-swap-dir="right"].pricing-cards-enter {
  transform: translateX(22px);
  opacity: 0;
  filter: blur(1.5px);
}
#pricing-plan-anim[data-swap-dir="left"].pricing-cards-enter {
  transform: translateX(-22px);
  opacity: 0;
  filter: blur(1.5px);
}
#pricing-plan-anim.pricing-cards-enter-active {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease, filter 280ms ease;
  transform: translateX(0);
  opacity: 1;
  filter: blur(0);
}

/* Pricing: card title — mobil: arányos; tablet+: eredeti skála */
#pricing-plan-section .pricing-card-title {
  font-size: calc(clamp(1.0625rem, 4.25vw, 1.35rem) + 4px);
  line-height: 1.2;
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  #pricing-plan-section .pricing-card-title {
    font-size: calc(1.5rem - 4px);
    line-height: 1.15;
  }
}
@media (min-width: 1024px) {
  #pricing-plan-section .pricing-card-title {
    font-size: calc(1.875rem - 4px);
  }
}

/* Pricing: main price numerals — clamp <1024 (a régi calc(3rem-42px) ~6px lett); lg+ eredeti nagy méret */
#pricing-plan-section .pricing-card-price {
  font-size: calc(clamp(2rem, 6.5vw, 2.85rem) + 4px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Pricing: bottom price (moved above CTA) — +14px vs default */
#pricing-plan-section .pricing-card-price--bottom {
  font-size: calc(clamp(2rem, 6.5vw, 2.85rem) + 18px);
}
@media (min-width: 1024px) {
  #pricing-plan-section .pricing-card-price {
    font-size: calc(4rem - 36px);
    letter-spacing: -0.025em;
  }
  #pricing-plan-section .pricing-card-price--bottom {
    font-size: calc(4rem - 22px);
  }
}

/* Pricing: middle (Most Popular) CTA — primary blue, black label (default + hover) */
#pricing-plan-section .btn-cta-white-on-dark {
  background: #00d4ff !important;
  border: 1.5px solid #00d4ff;
  color: #0a0a0a !important;
}
#pricing-plan-section .btn-cta-white-on-dark .btn-cta-text {
  color: #0a0a0a !important;
}
#pricing-plan-section .btn-cta-white-on-dark:hover {
  background: #00a8cc !important;
  border-color: #00a8cc;
  color: #0a0a0a !important;
}
#pricing-plan-section .btn-cta-white-on-dark:hover .btn-cta-text {
  color: #0a0a0a !important;
}

/* Pricing: side CTAs — hover matches global white fill (no cyan override) */
#pricing-plan-section .btn-cta-get-in-touch:hover {
  background: #fff !important;
  border-color: #fff;
  color: #0a0a0a !important;
}
#pricing-plan-section .btn-cta-get-in-touch:hover .btn-cta-text {
  color: #0a0a0a !important;
}

/* Pricing: modern category dropdown (custom, single pill) */
#pricing-plan-section .pricing-type-dropdown {
  width: min(320px, calc(100vw - 2rem));
}

/* Pricing perks row under section title (icons + short text) */
#pricing-plan-section .pricing-perks-row {
  margin-top: 0.25rem;
}
#pricing-plan-section .pricing-perk-item {
  white-space: nowrap;
}
#pricing-plan-section .pricing-type-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  padding-left: 1.2rem;
  border-radius: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, border-color 0.25s ease, background 0.25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#pricing-plan-section .pricing-type-trigger:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}
#pricing-plan-section .pricing-type-trigger.is-open {
  border-color: rgba(255, 255, 255, 0.42);
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 16px 50px rgba(0, 0, 0, 0.35);
}
#pricing-plan-section .pricing-type-value {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
}
#pricing-plan-section .pricing-type-chevron {
  transition: transform 0.2s ease;
}
#pricing-plan-section .pricing-type-trigger.is-open .pricing-type-chevron {
  transform: rotate(180deg);
}
#pricing-plan-section .pricing-type-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  padding: 0.5rem;
  border-radius: 18px;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  transform-origin: top center;
  transform: translateY(-6px) scale(0.98);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
}
#pricing-plan-section .pricing-type-menu.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#pricing-plan-section .pricing-type-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-align: left;
}
#pricing-plan-section .pricing-type-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
#pricing-plan-section .pricing-type-option[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
#pricing-plan-section .pricing-type-option-check {
  opacity: 0;
  transform: scale(0.9);
  color: rgba(255, 255, 255, 0.75);
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
#pricing-plan-section .pricing-type-option[aria-selected="true"] .pricing-type-option-check {
  opacity: 1;
  transform: scale(1);
}

/* Pricing: card body / feature box — desktop padding (mobil felülírás alább) */
#pricing-plan-section .pricing-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: stretch;
  padding: 2.5rem 2rem 2.5rem;
  box-sizing: border-box;
}
#pricing-plan-section .pricing-card-features {
  padding: 0;
  box-sizing: border-box;
}

/* Pricing: @P pixelpontos implementáció — premium card banner */
/* Grid padding-top: 46px hogy a -top-[46px] banner kilógjon felfelé */
@media (min-width: 768px) {
  #pricing-plan-section #pricing-plan-cards {
    padding-top: 46px;
    align-items: stretch;
  }
}

/* Pricing: mobile — one card, swipe + dots (transform on #pricing-plan-cards only) */
@media (max-width: 767px) {
  .pricing-carousel-viewport {
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    touch-action: pan-y pinch-zoom;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
  #pricing-plan-cards {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: none;
    grid-template-columns: none !important;
    /* Top space for premium “Most Popular” banner (parity with desktop px) */
    padding-top: 48px !important;
    padding-bottom: 1rem;
    transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
    backface-visibility: hidden;
  }
  #pricing-plan-cards > * {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    height: auto;
  }
  /* „Lélegzet” a kártya és a képszél között + halvány mélység; tartalom középen a dobozban */
  #pricing-plan-section #pricing-plan-cards > .group {
    padding: 3px;
    text-align: center;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
  }
  #pricing-plan-dots.pricing-plan-dots-row {
    flex-shrink: 0;
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-top: 1.35rem;
  }
  #pricing-plan-section .pricing-type-menu {
    max-height: min(58vh, 280px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Kártya belseje: középre zárt hierarchia + egyértelmű függőleges ritmus */
  #pricing-plan-section .pricing-plan-title-row {
    justify-content: center;
    text-align: center;
    margin-bottom: 0.625rem;
  }
  #pricing-plan-section .pricing-plan-title-stack {
    justify-content: center;
    gap: 0.4rem;
  }
  #pricing-plan-section .pricing-plan-title-stack .pricing-card-title {
    text-align: center;
    text-wrap: balance;
  }
  #pricing-plan-section .pricing-card-desc {
    text-align: center;
    margin-bottom: 0.875rem !important;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }
  #pricing-plan-section .pricing-card-price-row {
    justify-content: center;
    margin-bottom: 1.125rem !important;
    gap: 0.125rem;
  }
  #pricing-plan-section .pricing-card-inner {
    padding: 1.45rem 1.15rem 1.55rem;
  }
  #pricing-plan-section .pricing-card--premium .pricing-card-inner {
    padding-top: 1.6rem;
  }
  #pricing-plan-section .pricing-card-features {
    padding: 1rem 1rem;
    margin-bottom: 1.125rem !important;
    border-radius: 14px;
  }
  #pricing-plan-section .pricing-features-heading {
    text-align: center;
    margin-bottom: 0.75rem !important;
  }
  #pricing-plan-section .pricing-card-features ul {
    text-align: left;
  }
  #pricing-plan-section .pricing-card-features li span {
    text-align: left;
  }
  #pricing-plan-dots {
    -webkit-tap-highlight-color: transparent;
  }
  .pricing-dot-btn {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: width 0.3s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    cursor: pointer;
  }
  .pricing-dot-btn[aria-selected="true"] {
    width: 1.35rem;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  }
  .pricing-dot-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 3px;
  }
}

/* Pricing plan info: same slide-over timing as Services (#service-detail-modal) */
#pricing-plan-info-modal.service-detail-slide-root {
  pointer-events: none;
  opacity: 1;
}
#pricing-plan-info-modal.service-detail-slide-root.active {
  pointer-events: auto;
}
#pricing-plan-info-backdrop.service-detail-background-dim {
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity var(--service-detail-duration) var(--service-detail-ease);
}
#pricing-plan-info-modal.service-detail-slide-root.active #pricing-plan-info-backdrop.service-detail-background-dim {
  opacity: 1;
}
#pricing-plan-info-panel.service-detail-panel--motion {
  transform: translate3d(calc(100% + 0.75rem + 2px), 0, 0) !important;
  transition: transform var(--service-detail-duration) var(--service-detail-ease);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#pricing-plan-info-modal.service-detail-slide-root.active #pricing-plan-info-panel.service-detail-panel--motion {
  transform: translate3d(0, 0, 0) !important;
}
#pricing-plan-info-body p {
  margin: 0 0 1rem;
}
#pricing-plan-info-body p:last-child {
  margin-bottom: 0;
}
/* Grid: mobilon közép (felülírás a mobil blokkban); tablet+: balra igazított kártya olvasás */
@media (min-width: 768px) {
  #pricing-plan-section #pricing-plan-cards > .group {
    text-align: left;
  }
  #pricing-plan-section .pricing-plan-title-row {
    justify-content: flex-start;
    text-align: left;
  }
  #pricing-plan-section .pricing-plan-title-stack {
    justify-content: flex-start;
  }
  #pricing-plan-section .pricing-plan-title-stack .pricing-card-title {
    text-align: left;
    text-wrap: unset;
  }
}
#pricing-plan-section .pricing-plan-title-row {
  width: 100%;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
}
#pricing-plan-section .pricing-plan-title-stack {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}
#pricing-plan-section .pricing-plan-title-stack .pricing-card-title {
  margin: 0;
  min-width: 0;
}
#pricing-plan-section .pricing-plan-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0.125rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
#pricing-plan-section .pricing-plan-info-btn:hover {
  color: #00d4ff;
  background: transparent;
  box-shadow: none;
}
#pricing-plan-section .pricing-plan-info-btn:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.6);
  outline-offset: 2px;
}

.page-hero {
  position: relative;
  width: 100%;
  min-height: 50vh;
  overflow: hidden;
  background-color: #0a0a0a;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1;
}
.page-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%);
  z-index: 2;
  pointer-events: none;
}
.page-hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
  color: white;
}
.page-hero-title {
  font-family: var(--font-accent);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.page-hero-subtitle {
  font-family: var(--font-text);
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 400;
  opacity: 0.9;
  margin: 0;
  max-width: 560px;
}

#portfolio-detail-modal { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
#portfolio-detail-modal.active { opacity: 1; pointer-events: auto; }
#portfolio-detail-panel { transform: scale(0.96) translateY(20px); transition: transform 0.35s ease; }
#portfolio-detail-modal.active #portfolio-detail-panel { transform: scale(1) translateY(0); }
.portfolio-detail-panel-scroll {
  scrollbar-gutter: stable;
  border-radius: 1rem;
}
.portfolio-detail-panel-scroll::-webkit-scrollbar { width: 10px; }
.portfolio-detail-panel-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0 1rem 1rem 0; }
.portfolio-detail-panel-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00D4FF 0%, #CC00FF 100%); border-radius: 10px; }
.portfolio-detail-panel-scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00b8e6 0%, #b300e6 100%); }
.portfolio-pill-1 { background: rgba(0, 212, 255, 0.35); color: #fff; }
.portfolio-pill-2 { background: rgba(204, 0, 255, 0.35); color: #fff; }
.portfolio-pill-3 { background: rgba(0, 180, 120, 0.5); color: #fff; }
@supports (scrollbar-color: #00D4FF #f1f1f1) {
  .portfolio-detail-panel-scroll { scrollbar-color: #00D4FF #f1f1f1; scrollbar-width: thin; }
}
.portfolio-detail-gallery img { scroll-snap-align: start; min-width: 140px; width: 140px; }
@media (min-width: 640px) {
  .portfolio-detail-gallery img { min-width: 180px; width: 180px; }
}
.portfolio-detail-gallery-auto {
  width: 100%;
  max-width: 596px;
  overflow: hidden;
  min-height: 8rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .portfolio-detail-gallery-auto { max-width: 756px; min-height: 10rem; }
}
.portfolio-detail-gallery-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: portfolio-gallery-scroll 28s linear infinite;
}
.portfolio-detail-gallery-slide {
  width: 140px;
  min-width: 140px;
  height: 8rem;
  object-fit: cover;
  border-radius: 0.75rem;
  flex-shrink: 0;
  display: block;
}
@media (min-width: 640px) {
  .portfolio-detail-gallery-slide { width: 180px; min-width: 180px; height: 10rem; }
}
@keyframes portfolio-gallery-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Service detail: panel + enyhe háttérsötétítés (blur nélkül) */
#service-detail-modal.service-detail-slide-root,
#get-started-contact-modal.service-detail-slide-root {
  /* Root does not fade; backdrop + panel animate in parallel. */
  pointer-events: none;
  opacity: 1;
}
#service-detail-modal.service-detail-slide-root.active,
#get-started-contact-modal.service-detail-slide-root.active {
  pointer-events: auto;
}
#service-detail-backdrop.service-detail-background-dim,
#get-started-backdrop.service-detail-background-dim {
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity var(--service-detail-duration) var(--service-detail-ease);
}
#service-detail-modal.service-detail-slide-root.active #service-detail-backdrop.service-detail-background-dim,
#get-started-contact-modal.service-detail-slide-root.active #get-started-backdrop.service-detail-background-dim {
  opacity: 1;
}
/* Teljesen a viewporton kívül, beleértve a right-3 hézagot (ne látszódjon sáv / árnyék) */
#service-detail-panel.service-detail-panel--motion,
#get-started-panel.service-detail-panel--motion {
  transform: translate3d(calc(100% + 0.75rem + 2px), 0, 0) !important;
  transition: transform var(--service-detail-duration) var(--service-detail-ease);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#service-detail-modal.service-detail-slide-root.active #service-detail-panel.service-detail-panel--motion,
#get-started-contact-modal.service-detail-slide-root.active #get-started-panel.service-detail-panel--motion {
  transform: translate3d(0, 0, 0) !important;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --service-detail-duration: 0s;
  }
}
#service-detail-panel .service-modal-hero-wrap { border-radius: 24px 0 0 0; overflow: hidden; }
#service-detail-panel .service-modal-hero-wd {
  border-radius: 24px 0 0 24px;
  overflow: hidden;
}
/* WORKS slide-over: same width as SERVICES (#service-detail-panel default / Tailwind). */
#service-detail-panel.is-portfolio-panel-wide {
  width: min(608px, calc((100vw - 1.5rem) * 0.8)) !important;
  max-width: 608px !important;
}
#service-detail-panel.is-portfolio-panel-wide .service-modal-wd-gutter {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  max-width: 100%;
}
@media (min-width: 640px) {
  #service-detail-panel.is-portfolio-panel-wide .service-modal-wd-gutter {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}
/* Egységes szolgáltatás-modál: cím a görgetett tartalomban; a fejlécsor csak a bezáró, absolute */
#service-detail-panel.is-service-modal-unified .service-detail-header {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  min-height: 3rem;
  height: 3rem;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.375rem 0.75rem 0.375rem 0;
  pointer-events: none;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 640px) {
  #service-detail-panel.is-service-modal-unified .service-detail-header {
    height: 3.5rem;
    min-height: 3.5rem;
    padding: 0.5rem 1rem 0.5rem 0;
  }
}
#service-detail-panel.is-service-modal-unified .service-detail-header .service-detail-close-btn {
  pointer-events: auto;
  flex-shrink: 0;
}
#service-detail-panel.is-service-modal-unified .service-detail-header h2,
#service-detail-panel.is-service-modal-unified .service-detail-header .service-detail-header-title {
  display: none !important;
}
#service-detail-panel.is-service-modal-unified .service-modal-wd-top-title-row {
  padding-top: 0.5rem;
}
/* Szolgáltatás-modál: gutter a Services / X bal széléhez igazítva */
#service-detail-panel.is-service-modal-unified .service-modal-wd-gutter {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 0.75rem; /* = service-detail-header pl-3, egy vonal a W-vel / Services */
  /* Jobbra: fejléc pr-3 (0.75) + w-10 (2.5) — szöveg az X bal széléig */
  padding-right: 3.25rem;
}
@media (min-width: 640px) {
  #service-detail-panel.is-service-modal-unified .service-modal-wd-gutter {
    padding-left: 1.25rem; /* sm:pl-5 */
    padding-right: 3.5rem; /* fejléc pr-4 (1rem) + w-10 (2.5) */
  }
}
/* Service modal: respect safe area; hero top radius matches panel (24px) */
@media (max-width: 1023.98px) {
  .service-detail-modal-root {
    min-height: 100dvh;
    min-height: 100svh;
  }
  .service-detail-panel.service-detail-panel-scroll {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
#service-detail-panel .service-hero-subtitle-card-style {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255,255,255,0.95);
  max-width: 32em;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35;
  text-align: center;
}
#service-detail-panel .boabo-page-hero-title--plain { font-size: clamp(30px, 5.5vw, 72px); }
.service-hero-meta-capsule {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.service-hero-meta-capsule__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.25rem;
  min-width: 0;
}
.service-hero-meta-capsule__label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.35rem;
}
.service-hero-meta-capsule__value {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.service-hero-meta-capsule__divider {
  width: 1px;
  align-self: stretch;
  min-height: 2.75rem;
  background: rgba(255, 255, 255, 0.28);
  margin: 0 0.25rem;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  #service-detail-panel .boabo-page-hero-title--plain { font-size: clamp(20px, 5vw, 40px); }
  .service-hero-meta-capsule {
    flex-direction: column;
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 22rem;
  }
  .service-hero-meta-capsule__col { padding: 0.5rem 0.25rem; }
  .service-hero-meta-capsule__divider {
    width: 100%;
    height: 1px;
    min-height: 0;
    margin: 0.25rem 0;
  }
}
/* Mobile: main titles subtext 2px smaller */
@media (max-width: 1023px) {
  #service-detail-panel .service-modal-body-p { font-size: 15px !important; }
}
/* Service detail close: ugyanaz, mint a MARKET IS CLOSED / store modál (bg-gray-100, hover, Lucide w-5) */
#service-detail-close-btn {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
#service-detail-close-btn:focus,
#service-detail-close-btn:focus-visible,
#service-detail-close-btn:hover {
  outline: none;
  box-shadow: none;
}
#service-detail-close-btn:active {
  transform: none;
  box-shadow: none;
  outline: none;
}
#service-detail-close-btn svg,
#service-detail-close-btn i,
#service-detail-close-btn [data-lucide] {
  pointer-events: none;
  outline: none;
}
.service-detail-header-title { word-wrap: break-word; overflow-wrap: break-word; }
@media (min-width: 480px) {
  .service-detail-header-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
}
#service-detail-panel .service-overview-carousel-slide { transition: opacity 0.4s ease; }
/* Lucide check / circle-check felsorolások: vékony elválasztó sorok */
#service-detail-panel .service-modal-lucide-list > li {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#service-detail-panel .service-modal-lucide-list > li:first-child {
  padding-top: 0;
}
#service-detail-panel .service-modal-lucide-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/* Portfolio Details: ugyanaz a vékony elválasztó + Inter, mint a Results listánál */
#service-detail-panel .portfolio-detail-list {
  font-family: 'Inter', sans-serif;
}
#service-detail-panel .portfolio-detail-list > .portfolio-detail-line {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#service-detail-panel .portfolio-detail-list > .portfolio-detail-line:first-child {
  padding-top: 0;
}
#service-detail-panel .portfolio-detail-list > .portfolio-detail-line:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/* Service modal WD template: auto crossfade gallery (no controls) */
#service-detail-panel .service-modal-auto-gallery {
  position: relative;
  width: 100%;
  max-height: min(420px, 55vh);
  aspect-ratio: 21 / 10;
  background: #f3f4f6;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 24px;
  overflow: hidden;
}
#service-detail-panel .service-modal-auto-gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  /* Long, even crossfade – avoids strobe; GPU layer reduces flicker */
  transition: opacity 1.7s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
#service-detail-panel .service-modal-auto-gallery__img--visible {
  opacity: 1;
  z-index: 2;
}
/* Service detail panel: scrollbar; bal alsó sarok lekerekítve, jobb éles */
.service-detail-panel-scroll { scrollbar-gutter: stable; border-radius: 0 0 0 24px; }
/* Get in touch: fehér lap, teljes saroklekerekítés */
#get-started-panel.get-started-contact-sheet {
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 32px rgba(15, 23, 42, 0.1), 0 16px 48px rgba(15, 23, 42, 0.06);
}
#get-started-panel .get-started-sheet-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px 24px 0 0;
}
#get-started-panel .get-started-close-btn {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#get-started-panel .get-started-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.1);
}
#get-started-panel .get-started-panel-scroll {
  border-radius: 0 0 24px 24px !important;
  background: #ffffff;
}
#get-started-panel .get-started-panel-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
  margin: 10px 0;
}
#get-started-panel .get-started-panel-scroll::-webkit-scrollbar-thumb {
  border: 2px solid #f1f5f9;
}
/* Get in touch: Pricing-szerű egyedi legördülő (világos téma) */
#get-started-panel .gs-type-dropdown {
  width: 100%;
  max-width: min(100%, 400px);
}
#get-started-panel .gs-type-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem 0.8rem 1.15rem;
  border-radius: 18px;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#get-started-panel .gs-type-trigger:hover {
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
}
#get-started-panel .gs-type-trigger.is-open {
  border-color: rgba(0, 212, 255, 0.45);
  border-width: 2px;
  padding: calc(0.8rem - 1px) calc(1rem - 1px) calc(0.8rem - 1px) calc(1.15rem - 1px);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12), 0 8px 28px rgba(15, 23, 42, 0.08);
  background: #ffffff;
}
#get-started-panel .gs-type-value {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: left;
}
#get-started-panel .gs-type-chevron {
  transition: transform 0.2s ease;
}
#get-started-panel .gs-type-trigger.is-open .gs-type-chevron {
  transform: rotate(180deg);
}
#get-started-panel .gs-type-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  padding: 0.45rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform-origin: top center;
  transform: translateY(-6px) scale(0.98);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 20;
}
#get-started-panel .gs-type-menu.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#get-started-panel .gs-type-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.85rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: #1e293b;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  text-align: left;
}
#get-started-panel .gs-type-option:hover {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.06);
}
#get-started-panel .gs-type-option[aria-selected="true"] {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.25);
  color: #0f172a;
}
#get-started-panel .gs-type-option-check {
  opacity: 0;
  transform: scale(0.9);
  color: #00b8e6;
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
#get-started-panel .gs-type-option[aria-selected="true"] .gs-type-option-check {
  opacity: 1;
  transform: scale(1);
}
/* Költségvetés kapszulák */
#get-started-panel .get-started-budget-pill {
  position: relative;
  cursor: pointer;
  margin: 0;
}
#get-started-panel .get-started-budget-pill-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.1rem;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #334155;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.1);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
#get-started-panel .get-started-budget-pill:hover .get-started-budget-pill-inner {
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
}
#get-started-panel .get-started-budget-input:focus-visible + .get-started-budget-pill-inner {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
}
#get-started-panel .get-started-budget-input:checked + .get-started-budget-pill-inner {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.5);
  color: #0f172a;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
}
#get-started-panel .get-started-form-modern .get-started-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}
#get-started-panel .get-started-field {
  border-radius: 14px;
  padding: 0.8rem 1rem;
  font-size: 15px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
#get-started-panel .get-started-field::placeholder {
  color: #94a3b8;
}
#get-started-panel .get-started-field:hover {
  border-color: rgba(15, 23, 42, 0.18);
  background: #fafafa;
}
#get-started-panel .get-started-field:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.55);
  box-shadow:
    0 0 0 3px rgba(0, 212, 255, 0.18),
    0 1px 0 rgba(255, 255, 255, 1) inset;
  background: #ffffff;
}
#get-started-panel .get-started-form-title {
  font-weight: 600;
}
#get-started-panel .get-started-submit-btn-modern {
  border-radius: 9999px !important;
}
.service-detail-panel-scroll::-webkit-scrollbar { width: 10px; }
.service-detail-panel-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; margin: 8px 0; }
.service-detail-panel-scroll::-webkit-scrollbar-thumb { background: #00D4FF; border-radius: 10px; min-height: 40px; border: 2px solid #f1f1f1; box-sizing: border-box; }
.service-detail-panel-scroll::-webkit-scrollbar-thumb:hover { background: #00b8e6; }
@supports (scrollbar-gutter: stable) {
  .service-detail-panel-scroll { padding-right: 2px; }
}
#get-started-trigger {
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid #fff;
}
#get-started-trigger:hover {
  border-color: #fff;
}
/* GDPR checkboxes: blue when checked (both get-started and quote form) */
#get-started-gdpr:checked,
#quote-gdpr:checked { accent-color: #00D4FF; }
@media (min-width: 640px) {
  .join-growing-text { font-size: 16px; }
}
/* Quote section: jellyfish image, no black background */
.quote-jellyfish-wrap { background: transparent !important; }
.quote-jellyfish-wrap .quote-jellyfish-img { margin-top: 14%; mix-blend-mode: lighten; }
.nav-menu-link.text-primary { position: relative; }
.boabo-page-hero {
  width: 100%;
  min-height: 480px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.boabo-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.boabo-page-hero-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-accent);
  font-size: clamp(38px, 6vw, 80px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fff;
  background-color: #00D4FF;
  padding: 8px 28px;
  margin: 0;
  text-align: center;
}
.boabo-page-hero-title--plain {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.boabo-page-breadcrumb {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  padding: 11px 28px;
  border-radius: 50px;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
}
.boabo-page-breadcrumb a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}
.boabo-page-breadcrumb a:hover { color: #fff; }
.boabo-page-breadcrumb .current { color: #fff; font-weight: 600; }
.boabo-page-breadcrumb svg { width: 10px; height: 10px; }
@media (max-width: 639px) {
  .boabo-page-hero { min-height: 280px; border-radius: 0; }
  .boabo-page-hero-title { font-size: clamp(28px, 5vw, 48px); padding: 6px 20px; }
}
.boabo-page-hero--full-bleed {
  border-radius: 0;
  min-height: 60vh;
  width: 100%;
  margin: 0;
}
.boabo-page-hero--full-bleed::before {
  background: rgba(0,0,0,0.55);
}
.boabo-page-hero-subtitle {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.9);
  margin: 0.25rem 0 0;
}
.boabo-page-hero-env-label {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.9);
  margin: 1.5rem 0 0;
}
.boabo-page-hero-env-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.75rem;
  position: relative;
  z-index: 2;
}
.boabo-page-hero-env-logos a,
.boabo-page-hero-env-logos span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.boabo-page-hero-env-logos a:hover { color: #fff; }
.boabo-page-hero-env-logos img { width: 28px; height: 28px; opacity: 0.9; object-fit: contain; }
.service-our-services-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 1300px;
  margin: -4rem auto 0;
  padding: 1.5rem 2rem;
  position: relative;
  z-index: 20;
  background: #f5f5f5;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
.service-our-services-bar-wrap { padding: 0 1rem; max-width: 1320px; margin: 0 auto; }
@media (min-width: 1024px) {
  .service-our-services-bar { flex-wrap: nowrap; padding: 1.5rem 2.5rem; }
}
.service-our-services-bar .bar-item { display: flex; flex-direction: column; gap: 0.25rem; }
.service-our-services-bar .bar-item label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #666; }
.service-our-services-bar .bar-item .bar-value { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: #111; }
.service-our-services-bar select {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 0.5rem 2rem 0.5rem 1rem;
  min-width: 200px;
  cursor: pointer;
}
.service-our-services-bar .btn-faq {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 24px;
  border-radius: 25px;
  border: 1.5px solid #111;
  background: transparent;
  color: #111;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.service-our-services-bar .btn-faq:hover { background: #111; color: #fff; }
.service-project-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; max-width: 1300px; margin: 0 auto 4rem; padding: 0 20px; background: #fff; }
@media (max-width: 992px) { .service-project-overview { grid-template-columns: 1fr; } }
.service-project-overview .overview-image { border-radius: 12px; overflow: hidden; }
.service-project-overview .overview-image img { width: 100%; height: auto; display: block; }
.service-project-overview .overview-content { text-align: right; }
.service-project-overview .overview-content h2 { text-align: right; }
@media (max-width: 992px) { .service-project-overview .overview-content { text-align: left; } .service-project-overview .overview-content h2 { text-align: left; } }
.service-project-overview .overview-steps { margin-top: 1.5rem; text-align: right; }
@media (max-width: 992px) { .service-project-overview .overview-steps { text-align: left; } }
.service-overview-step { margin-bottom: 1.25rem; }
.service-overview-step .step-num { font-size: 13px; font-weight: 700; color: #CC00FF; letter-spacing: 0.05em; }
.service-overview-step .step-title { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; color: #111; text-transform: uppercase; margin: 0.25rem 0; }
.service-overview-step .step-desc { font-size: 14px; color: #666; line-height: 1.5; margin: 0; }
.service-why-section { max-width: 1300px; margin: 0 auto 4rem; padding: 0 20px; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.service-why-section h2 { margin-top: 0; }
@media (max-width: 992px) { .service-why-section { grid-template-columns: 1fr; } }
.overview-steps-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .overview-steps-grid { grid-template-columns: repeat(3, 1fr); } }
.service-faq-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.service-faq-modal.is-open { opacity: 1; visibility: visible; }
.service-faq-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  cursor: pointer;
}
.service-faq-modal-panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}
.service-faq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
  flex-shrink: 0;
}
.service-faq-modal-close {
  width: 40px;
  height: 40px;
  border: none;
  background: #f0f0f0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #111;
  transition: background 0.2s;
}
.service-faq-modal-close:hover { background: #e0e0e0; }
.service-faq-modal-body {
  padding: 1rem 1.5rem 1.5rem;
  overflow-y: auto;
}
.back-to-top-btn { display: none !important; }
.env-tech-icon { width: 28px; height: 28px; }
.env-tech-icon-white { filter: brightness(0) invert(1); }
@media (max-width: 767px) {
  .env-tech-grid { grid-template-columns: repeat(6, 1fr); width: 100%; max-width: 280px; }
  .env-tech-icon { width: 19px; height: 19px; }
}
.footer-social-icon { width: 16.8px; height: 16.8px; }
.footer-sign-logo { filter: brightness(0) invert(1); }

/* Contact section (ur reference): dark + glass form */
@media (max-width: 1023px) {
  #quote-request .contact-detail-heading { font-size: calc(1.25rem - 2px); }
}
.quote-form-ur-input::placeholder { color: rgba(156, 163, 175, 0.9); }

/* Form submit feedback modal (ur reference) */
.form-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
@media (min-width: 768px) {
  .form-feedback-modal { padding: 2rem; }
}
.form-feedback-modal.is-open { display: flex; }
.form-feedback-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.form-feedback-panel {
  position: relative;
  width: 100%;
  max-width: 28rem;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #0a0a0a;
  padding: 1.5rem;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.065), 0 24px 60px rgba(0, 0, 0, 0.55);
}
@media (min-width: 640px) {
  .form-feedback-panel { padding: 2.5rem; }
}
.form-feedback-inner { position: relative; text-align: center; }
.form-feedback-icon-wrap {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.12);
  color: #00d4ff;
}
@media (min-width: 640px) {
  .form-feedback-icon-wrap { margin-bottom: 1.75rem; height: 4rem; width: 4rem; }
}
.form-feedback-icon-wrap.is-error {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #e57373;
}
.form-feedback-icon-wrap svg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
@media (min-width: 640px) {
  .form-feedback-icon-wrap svg { width: 2rem; height: 2rem; }
}
.form-feedback-title {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #fff;
}
@media (min-width: 640px) {
  .form-feedback-title { font-size: 1.5rem; }
}
.form-feedback-message {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.625;
  color: #9ca3af;
  white-space: pre-wrap;
  font-family: "Inter", sans-serif;
}
@media (min-width: 640px) {
  .form-feedback-message { font-size: 1rem; }
}
.form-feedback-close-btn {
  margin-top: 2rem;
  width: 100%;
  border-radius: 9999px;
  background-color: #fff;
  color: #0a0a0a;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-family: "Inter", sans-serif;
}
.form-feedback-close-btn:hover {
  background-color: #00d4ff;
  color: #0a0a0a;
}

/* Mobile: Services modal + Works (portfolio) lightbox — full viewport (Get in touch külön, lekerekített lap alább) */
@media (max-width: 1023.98px) {
  #service-detail-panel.service-detail-panel--motion {
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    transform: translate3d(100%, 0, 0) !important;
  }
  #get-started-panel.service-detail-panel--motion.get-started-contact-sheet {
    right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    top: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(92dvh, calc(100% - 1.5rem)) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    transform: translate3d(calc(100% + 0.75rem + 2px), 0, 0) !important;
  }
  #service-detail-modal.service-detail-slide-root.active #service-detail-panel.service-detail-panel--motion,
  #get-started-contact-modal.service-detail-slide-root.active #get-started-panel.service-detail-panel--motion {
    transform: translate3d(0, 0, 0) !important;
  }
  #pricing-plan-info-panel.service-detail-panel--motion {
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    transform: translate3d(100%, 0, 0) !important;
  }
  #pricing-plan-info-modal.service-detail-slide-root.active #pricing-plan-info-panel.service-detail-panel--motion {
    transform: translate3d(0, 0, 0) !important;
  }
  #pricing-plan-info-panel .service-detail-panel-scroll { border-radius: 0 !important; }
  #service-detail-panel .service-detail-panel-scroll { border-radius: 0 !important; }
  #get-started-panel .get-started-panel-scroll.service-detail-panel-scroll {
    border-radius: 0 0 22px 22px !important;
  }
  #portfolio-lightbox { padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; }
  #portfolio-lightbox > .flex-1 { flex: 1 1 auto !important; min-height: 0 !important; max-width: 100% !important; width: 100% !important; }
  #portfolio-lightbox .max-w-5xl { max-width: 100% !important; }
  #portfolio-lightbox-img {
    max-width: 100% !important;
    max-height: min(85dvh, 100%) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }
  #portfolio-lightbox-close { top: max(0.75rem, env(safe-area-inset-top, 0px)) !important; right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; }
  #portfolio-lightbox-prev { left: max(0.5rem, env(safe-area-inset-left, 0px)) !important; }
  #portfolio-lightbox-next { right: max(0.5rem, env(safe-area-inset-right, 0px)) !important; }
}