html { scroll-behavior: smooth; }
: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;
}
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-overlay { overflow: hidden; -webkit-overflow-scrolling: touch; z-index: 9999 !important; transform: translateX(100%); transition: transform 0.3s ease-out; background: #0a0a0a !important; }
.mobile-menu-overlay::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse 80% 120% at 100% 50%, rgba(204, 0, 255, 0.06) 0%, transparent 45%), radial-gradient(ellipse 80% 100% at 0% 100%, rgba(0, 212, 255, 0.05) 0%, transparent 40%); pointer-events: none; }
.mobile-menu-overlay.mobile-menu-open { opacity: 1; pointer-events: auto; transform: translateX(0); }
body.mobile-menu-body-lock { overflow: hidden; position: fixed; width: 100%; }
.mobile-menu-inner { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
.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; }
.mobile-menu-nav .mobile-menu-link { font-size: 19px !important; }
@media (max-width: 1023px) {
  .mobile-menu-nav .mobile-menu-link { font-size: 17px !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;
}
.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; }
/* 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: -2px !important; }
}
@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;
}
.hero-headline-aeonik { font-family: "Manrope", sans-serif; font-weight: 500; text-transform: none; }
.hero-headline-text { font-size: 38px; }
@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: 69px; } }
@media (min-width: 1024px) { .hero-headline-text { font-size: 95px; } }
@media (max-width: 767px) { .hero-intro-text { font-size: 15px !important; } }
@media (max-width: 767px) { .hero-projects-count { font-size: 14px !important; } }

@media (min-width: 768px) { .hero-projects-count { font-size: 16px !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; }
}
@media (min-width: 1024px) {
  /* Desktop play by subtitle: square side = two-line block of .hero-intro-text (20px × 1.6 line-height × 2) */
  #hero-play-btn.hero-play-btn-desktop-subtitle {
    font-size: 20px;
    line-height: 1.6;
    /* Same math as Tailwind leading-[1.6] + two lines (explicit <br>) */
    width: calc(2 * 1.6 * 1em) !important;
    height: calc(2 * 1.6 * 1em) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
  #hero-play-btn.hero-play-btn-desktop-subtitle .hero-play-icon {
    width: 23% !important;
    height: 23% !important;
    max-width: 28px;
    max-height: 28px;
  }
}
.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 indicator: blue icons */
.hero-music-indicator .hero-music-indicator-audio-lines svg,
.hero-music-indicator .hero-music-play-icon { color: #00D4FF !important; stroke: #00D4FF !important; fill: #00D4FF !important; }
.hero-music-indicator[data-revealed="1"] { opacity: 1; pointer-events: auto; }
@media (max-width: 767px) {
  .hero-music-indicator .hero-music-indicator-audio-lines svg { width: 1.625rem !important; height: 1.625rem !important; }
  .hero-play-label-wrap { display: none !important; }
}
.hero-music-indicator-playing:not(.hidden) .hero-music-indicator-audio-lines svg {
  animation: hero-music-breathe 4s ease-in-out infinite;
}
@keyframes hero-music-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}
.hero-music-indicator-paused.hidden { display: none !important; }
.hero-music-indicator-paused:not(.hidden) { display: flex !important; }
.hero-music-indicator-playing.hidden { 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 { margin-top: 15vh; }
@media (max-width: 639px) { .hero-lower-block { margin-top: 10vh; } }
@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 section.min-h-screen { min-height: auto; }
  .hero-mobile-fill {
    padding-top: 8vh !important;
    padding-bottom: 2rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: none;
  }
  .hero-mobile-fill .hero-mobile-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
  }
  .hero-right-col { align-items: flex-start !important; }
  .hero-projects-row { margin-top: 1.5rem !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; }

.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);
}
#how-we-work-section .about-section-parallax {
  background-attachment: fixed;
  background-position: center center;
}
@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) {
  #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; }
.about-section-bg { position: relative; background: #ffffff; }
.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; }
}
.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: 13px; 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); }
@media (max-width: 1023px) {
  #mobile-menu .mobile-menu-nav a.text-primary { color: #fff !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 .navbar-brand-text { text-transform: uppercase; }
}
.navbar-outer { position: relative; z-index: 50; }
.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 {
  transition: transform 0.2s ease;
}
.store-coming-soon-close-btn:hover {
  transform: translateY(-3px);
  border-color: transparent !important;
}
.store-coming-soon-close-btn:hover::before {
  clip-path: inset(0 0 0 0) !important;
}
.store-coming-soon-close-btn:hover .btn-cta-text {
  transform: none;
}

@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%); }
#contact .footer-brand-name { font-size: 1rem; }
.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); }
}
#blog-section { font-family: "Inter", sans-serif; }
#blog-section #rb-carousel-track { overflow: hidden; padding-bottom: 1rem; cursor: grab; user-select: none; }
#blog-section #rb-carousel-track.rb-active-drag { cursor: grabbing; }
#blog-section #rb-inner-track { display: flex; white-space: nowrap; will-change: transform; }
#blog-section .rb-blog-card { width: 75vw; min-width: 75vw; height: 340px; transition: transform .3s ease, box-shadow .3s ease; }
#blog-section .rb-blog-card:not(:last-child) { margin-right: .5rem; }
@media (max-width: 767px) {
  #blog-section .rb-blog-card { width: 72vw; min-width: 72vw; height: 200px; min-height: 200px; }
  #blog-section #rb-wrapper { min-height: 22vh; }
  #blog-section #rb-wrapper > div { min-height: 22vh; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  #blog-section #rb-carousel-track { padding-bottom: 0.5rem; }
  #blog-section { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}
@media (min-width: 640px) {
  #blog-section .rb-blog-card { width: 45vw; min-width: 45vw; height: 400px; }
}
@media (min-width: 1024px) {
  #blog-section .rb-blog-card { width: 380px; min-width: 380px; height: 400px; }
}
#blog-section .rb-card-image { filter: brightness(0.77); }
#blog-section .group:hover .rb-card-image { filter: blur(6px) brightness(.7); transform: scale(1.05); }
#blog-section .group:hover .rb-overlay-content { opacity: 1; transform: translateY(0); }
#blog-section .rb-blog-hover-link [data-lucide] { color: #00D4FF; }
#blog-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); }
}
#blog-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;
}
#blog-section .rb-gradient-button:hover { box-shadow: none; transform: translateY(-2px); opacity: 1; }
#blog-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);
}
#blog-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;
}
#blog-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;
}
#blog-section .rb-gradient-ring a svg { width: 16px; height: 16px; }
#blog-section .rb-caption-link { cursor: pointer; transition: transform 0.3s ease; }
#blog-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;
}
#blog-section .rb-blog-link-btn:hover i,
#blog-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); }
}
#blog-section .rb-blog-link-btn,
#blog-section .rb-blog-link-btn i,
#blog-section .rb-blog-link-btn [data-lucide] { color: white; }
#blog-section .rb-blog-card h3 { font-family: "Manrope", sans-serif; }
.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: same modal shell as portfolio (dark frame + blurred project/service image behind panel) */
#service-detail-modal { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
#service-detail-modal.active { opacity: 1; pointer-events: auto; }
#service-detail-panel { transform: scale(0.96) translateY(20px); transition: transform 0.35s ease; }
#service-detail-modal.active #service-detail-panel { transform: scale(1) translateY(0); }
#service-detail-panel .service-modal-hero-wrap { border-radius: 16px 16px 0 0; overflow: hidden; }
/* Service modal: full-viewport sheet on mobile/tablet (no radius, no frame padding) */
@media (max-width: 1023.98px) {
  .service-detail-modal-root {
    min-height: 100dvh;
    min-height: 100svh;
  }
  #service-detail-panel,
  #service-detail-modal.active #service-detail-panel {
    transform: none !important;
  }
  #service-detail-panel .service-modal-hero-wrap {
    border-radius: 0 !important;
  }
  .service-detail-panel-scroll {
    border-radius: 0 !important;
  }
  #service-detail-close-btn {
    top: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
    right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
  }
  #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; }
}
/* Mobile: no translucent circle around X */
@media (max-width: 1023px) {
  #service-detail-close-btn { background: transparent !important; backdrop-filter: none !important; }
  #service-detail-close-btn:hover { background: rgba(0,0,0,0.15) !important; }
}
#service-detail-panel .service-overview-carousel-slide { transition: opacity 0.4s ease; }
/* Service detail panel: scrollbar rounded top/bottom */
.service-detail-panel-scroll { scrollbar-gutter: stable; border-radius: 1rem; }
.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;
}
.get-started-overlay { transition: opacity 0.3s ease; }
.get-started-panel { will-change: transform; }
/* 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; }
@media (min-width: 768px) {
  .get-started-panel { max-width: 28rem; }
}
.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); }