:root {
  --naxo-ink: #07090a;
  --naxo-surface: #101211;
  --naxo-panel: #121311;
  --naxo-gold: #d9a943;
  --naxo-gold-bright: #f5d586;
  --naxo-gold-line: rgba(220, 174, 82, .24);
  --naxo-copy: #eee9df;
  --naxo-muted: #aaa79e;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { background-color: var(--naxo-ink); color: var(--naxo-copy); }
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background:
    linear-gradient(151deg, transparent 0 31.4%, rgba(223, 172, 67, .10) 31.48%, transparent 31.62%),
    linear-gradient(27deg, transparent 0 74.1%, rgba(223, 172, 67, .07) 74.18%, transparent 74.32%),
    radial-gradient(ellipse at 8% 30%, rgba(185, 119, 28, .09), transparent 28%),
    radial-gradient(ellipse at 90% 63%, rgba(185, 119, 28, .065), transparent 27%);
}
.app-shell { isolation: isolate; width: min(100%, 1600px); max-width: 1600px; }
.topbar { border-bottom-color: rgba(232, 184, 82, .23); }
.site-nav #siteNavWorkspace {
  padding: 9px 15px;
  border: 1px solid rgba(244, 204, 118, .48);
  border-radius: 999px;
  color: #18130a;
  background: linear-gradient(135deg, #ffe29a, #d5a13a);
  box-shadow: 0 7px 22px rgba(198, 142, 34, .15);
}
.site-nav #siteNavWorkspace::after { display: none; }
.site-nav #siteNavWorkspace:hover { color: #0d0b07; filter: brightness(1.06); }
.site-nav #siteNavContact { color: #ded8ca; }
button, a { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--naxo-gold-bright);
  outline-offset: 3px;
}
.view {
  background-image:
    linear-gradient(132deg, transparent 0 22.8%, rgba(231,190,86,.09) 22.88%, transparent 23.02%),
    linear-gradient(48deg, transparent 0 76.5%, rgba(231,190,86,.07) 76.58%, transparent 76.72%),
    url("assets/naxo-background-lines.svg");
  background-size: 100% 100%, 100% 100%, 100% 1050px;
}
.view.is-active { animation-duration: .25s; }
.page-title h1 em, .section-heading h2 em, .mini-section-heading h2 em,
.why-naxo-section h2 em, .academy-preview h2 em, .cta-banner h2 em {
  color: var(--naxo-gold-bright);
  font-style: normal;
  background: linear-gradient(105deg, #d5a03d 0%, #fff0bd 48%, #dda942 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Homepage hero: the supplied NAXO montage stays intact beside editable copy. */
.home-intro {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(330px, .83fr) minmax(0, 1.17fr);
  grid-template-rows: repeat(5, auto);
  align-content: center;
  align-items: center;
  column-gap: clamp(18px, 3vw, 48px);
  min-height: clamp(530px, 45vw, 680px);
  padding: clamp(28px, 4vw, 64px) clamp(27px, 5vw, 76px);
  background:
    radial-gradient(ellipse at 79% 48%, rgba(179, 113, 24, .10), transparent 39%),
    linear-gradient(135deg, #090b0c 4%, #080a0a 49%, #100d08 100%);
  border-color: rgba(226, 177, 79, .39);
}
.home-intro::before { display: none; }
.home-intro > :not(.hero-art) {
  grid-column: 1;
  justify-self: stretch;
  width: min(100%, 560px);
  direction: rtl;
  text-align: right;
}
.home-intro > .section-kicker { grid-row: 1; align-self: end; margin-bottom: 5px; color: #f0c86d; }
.home-intro > h1 { grid-row: 2; margin: 7px 0 8px; font-size: clamp(39px, 4vw, 61px); line-height: 1.34; letter-spacing: -.045em; }
.home-intro > .intro-copy { grid-row: 3; max-width: 49ch; font-size: clamp(14px, 1.2vw, 17px); }
.home-intro > .hero-actions { grid-row: 4; direction: rtl; justify-content: flex-start; margin-top: 22px; }
.home-intro > .hero-points { grid-row: 5; direction: rtl; justify-content: flex-start; flex-wrap: wrap; margin-top: 19px; gap: 10px; }
.hero-art {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-column: 2;
  grid-row: 1 / 6;
  align-self: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.69;
  overflow: hidden;
  border: 1px solid rgba(233, 187, 91, .26);
  border-radius: 23px;
  background: radial-gradient(ellipse at 48% 55%, #17130d, #060809 69%);
  box-shadow: 0 22px 54px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,231,170,.045);
  transform: translate3d(var(--hero-parallax-x, 0px), var(--hero-parallax-y, 0px), 0);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.hero-feature-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) contrast(1.03);
}
.hero-art::before {
  z-index: 1;
  background: linear-gradient(0deg, rgba(3,5,6,.23), transparent 26%, transparent 82%, rgba(3,5,6,.18));
}
.hero-art::after { z-index: 2; opacity: .66; }
.hero-art > span { z-index: 3; }
.home-intro:hover .hero-art { border-color: rgba(246, 207, 119, .44); box-shadow: 0 27px 66px rgba(0,0,0,.48), 0 0 28px rgba(216,164,61,.08); }
.hero-actions .primary-button, .hero-secondary { min-height: 48px; border-radius: 12px; }
.hero-actions .primary-button { order: 1; box-shadow: 0 10px 25px rgba(201,148,44,.16); }
.hero-secondary { order: 2; }
.hero-points { color: #d7d0c2; }
.hero-points i { flex: 0 0 4px; }
html[dir="ltr"] .home-intro > :not(.hero-art) { direction: ltr; text-align: left; }
html[dir="ltr"] .home-intro > .hero-actions { direction: ltr; }
html[dir="ltr"] .home-intro > .hero-points { direction: ltr; }
html[dir="ltr"] .service-showcase-card { direction: ltr; }
html[dir="ltr"] .service-showcase-number { inset-inline-start: auto; inset-inline-end: 10px; }
html[dir="ltr"] .service-showcase-icon { inset-inline-end: auto; inset-inline-start: 10px; }

.platform-stats { padding-top: 24px; padding-bottom: 10px; }
.platform-stats .section-heading { align-items: end; margin-bottom: 12px; }
.platform-stats .section-heading h2 { font-size: clamp(19px, 2vw, 27px); }
.platform-stats .section-heading h2 br { display: none; }
.stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 0; }
.stat-card { display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; min-height: 92px; padding: 14px 17px; border-radius: 15px; }
.stat-card .stat-icon { grid-column: 1; grid-row: 1 / 3; }
.stat-card .stat-value { grid-column: 2; grid-row: 1; font-size: 23px; }
.stat-card h3 { grid-column: 2; grid-row: 2; margin: 0; font-size: 12px; }
.stat-card p { display: none; }
.stat-card[hidden] { display: none !important; }
.stats-live.is-offline { color: #8f8b81; }
.stats-live.is-offline i { background: #887b5b; box-shadow: none; }

.category-section { padding-top: 24px; }
.category-rail { grid-template-columns: repeat(8, minmax(0,1fr)); gap: 10px; }
.category-tile { min-height: 98px; border-color: rgba(225,190,117,.16); }
.category-tile:hover, .category-tile:focus-visible { transform: translateY(-3px); border-color: rgba(245,207,119,.5); box-shadow: 0 10px 25px rgba(0,0,0,.25), 0 0 17px rgba(208,157,53,.07); }

#servicesSection { padding-top: clamp(42px, 5vw, 70px); }
#servicesSection .mini-section-heading { align-items: end; margin-bottom: 21px; }
#servicesSection .mini-section-heading h2 { font-size: clamp(25px, 3vw, 38px); }
#featuredServices { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 13px; align-items: stretch; }
#featuredServices .service-showcase-card { min-height: 390px; }
#featuredServices .service-showcase-art { aspect-ratio: 1.7; }
#featuredServices .service-showcase-copy h2 { font-size: clamp(14px, 1.1vw, 17px); }
#featuredServices .service-showcase-copy p { font-size: 11px; }
#featuredServices .service-showcase-tags { gap: 5px; }
#featuredServices .service-showcase-tags li { font-size: 9px; }
#featuredServices .service-showcase-tools { display: flex; justify-content: flex-start; gap: 7px; margin-top: 10px; }
.service-showcase-tool { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(224,186,106,.28); border-radius: 10px; color: #ded7c6; background: rgba(0,0,0,.35); font-size: 15px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.service-showcase-tool:hover, .service-showcase-tool.is-selected { border-color: rgba(244,204,111,.63); color: #f5d586; background: rgba(218,166,57,.12); }
#featuredServices .service-showcase-action { margin-top: auto; }
.response-promise { margin-top: 20px; border-color: rgba(231,190,86,.2); background: linear-gradient(100deg, rgba(26,22,14,.85), rgba(11,13,13,.86)); }

.portfolio-teaser { padding-top: clamp(55px, 7vw, 92px); }
.portfolio-concept-note { margin: 15px 0 0; color: #9e998e; font-size: 11px; line-height: 1.8; }
.logo-banner-section { padding-top: clamp(42px, 6vw, 76px); }
.logo-banner {
  height: clamp(205px, 24vw, 330px);
  border-color: rgba(227,180,79,.38);
  background: #090909 url("assets/naxo-hero-cinematic.webp") 76% 48% / cover no-repeat;
  box-shadow: 0 20px 55px rgba(0,0,0,.36), inset 0 1px rgba(255,240,194,.07);
}
.logo-banner::after { background: linear-gradient(90deg, rgba(5,7,8,.92), rgba(5,7,8,.65) 40%, rgba(5,7,8,.12) 82%), linear-gradient(0deg, rgba(5,5,5,.54), transparent 70%); }
.banner-visual { display: none; }
.banner-caption { inset-inline-start: clamp(22px, 5vw, 60px); inset-inline-end: auto; bottom: 50%; transform: translateY(50%); max-width: min(52%, 520px); gap: 7px; }
.banner-caption span { font-size: 11px; }
.banner-caption strong { font-size: clamp(22px, 3vw, 37px); line-height: 1.5; }
.banner-action { bottom: 22px; inset-inline-start: clamp(22px, 5vw, 60px); inset-inline-end: auto; }

.home-process-section { padding-top: clamp(54px, 7vw, 94px); }
.why-naxo-section { padding-top: clamp(52px, 7vw, 86px); }
.why-naxo-section .section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.why-naxo-section .section-heading > p { max-width: 42ch; margin: 0; color: var(--naxo-muted); font-size: 13px; line-height: 1.9; }
.why-naxo-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.why-naxo-card { min-width: 0; min-height: 182px; padding: 18px; border: 1px solid rgba(226,186,103,.2); border-radius: 17px; background: linear-gradient(145deg, rgba(29,25,17,.76), rgba(10,12,12,.96) 72%); box-shadow: inset 0 1px rgba(255,239,199,.035); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.why-naxo-card > span { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(231,190,86,.37); border-radius: 12px; color: var(--naxo-gold-bright); background: rgba(221,172,67,.07); font-size: 18px; }
.why-naxo-card h3 { margin: 17px 0 5px; color: #f2ead7; font-size: 14px; line-height: 1.7; }
.why-naxo-card p { margin: 0; color: var(--naxo-muted); font-size: 11px; line-height: 1.85; }
.why-naxo-card:hover { transform: translateY(-4px); border-color: rgba(245,207,119,.5); box-shadow: 0 17px 32px rgba(0,0,0,.25), 0 0 22px rgba(203,150,46,.08); }

.academy-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); gap: clamp(22px, 5vw, 70px); align-items: center; margin-top: clamp(52px, 7vw, 85px); padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); border: 1px solid rgba(224,178,78,.23); border-radius: 22px; background: radial-gradient(ellipse at 0 100%, rgba(196,138,36,.12), transparent 50%), linear-gradient(120deg, rgba(18,18,15,.96), rgba(9,11,12,.97)); }
.academy-preview-copy h2 { margin: 9px 0 8px; font-size: clamp(25px, 3vw, 36px); line-height: 1.5; }
.academy-preview-copy p { max-width: 55ch; margin: 0; color: var(--naxo-muted); font-size: 12px; line-height: 2; }
.academy-preview-copy .secondary-button { margin-top: 19px; min-height: 44px; }
.academy-track-list { display: grid; gap: 9px; }
.academy-track-list article { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 10px 13px; border: 1px solid rgba(219,190,131,.15); border-radius: 13px; background: rgba(0,0,0,.28); }
.academy-track-list article > span:first-child { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(221,174,74,.39); border-radius: 11px; color: #f5d586; font-size: 12px; font-weight: 800; }
.academy-track-list b { font-size: 12px; font-weight: 700; }
.academy-track-list small { color: #c6a557; font-size: 9px; white-space: nowrap; }
.cta-banner { background: radial-gradient(ellipse at 8% 60%, rgba(178,122,34,.2), transparent 42%), linear-gradient(118deg,#19160f,#0d1010 65%); }

/* Shared interior views keep a common surface and type rhythm. */
.studio-view, #servicesView, #printingView, .portfolio-view, #favoritesView, #ordersView, #contactView, .client-dashboard, .account-view { min-height: 70vh; }
.studio-view .page-title, #servicesView .page-title, #printingView .page-title, .portfolio-view .page-title, #favoritesView .page-title, #ordersView .page-title, #contactView .page-title, .client-dashboard .page-title, .account-view .page-title { margin-bottom: clamp(24px, 4vw, 48px); }
.work-card, .dashboard-card, .workspace-card, .account-panel, .studio-panel, .orders-empty, .contact-card, .service-card {
  border-color: rgba(224,187,112,.19);
  box-shadow: inset 0 1px rgba(255,238,194,.035), 0 13px 30px rgba(0,0,0,.19);
}
.work-card:hover, .dashboard-card:hover, .account-panel:hover { border-color: rgba(238,195,100,.38); }
.primary-button, .services-contact-button, .service-showcase-action { transition: transform .22s ease, filter .22s ease, border-color .22s ease, box-shadow .22s ease; }
.primary-button:hover, .services-contact-button:hover, .service-showcase-action:hover { filter: brightness(1.07); }
.app-footer { max-width: 1480px; margin: clamp(54px, 8vw, 104px) auto 0; padding: 0 clamp(20px, 5vw, 68px) 23px; border-top: 1px solid rgba(229,187,95,.2); text-align: start; }
.footer-main { display: grid; grid-template-columns: 1.35fr .8fr .9fr 1fr; gap: clamp(22px, 4vw, 56px); padding: 32px 0 28px; }
.footer-brand-link { display: inline-flex; align-items: center; gap: 12px; color: var(--naxo-copy); text-decoration: none; }
.footer-brand-link img { width: 44px; height: 44px; border: 1px solid rgba(230,183,78,.3); border-radius: 12px; object-fit: cover; }
.footer-brand-link span { display: grid; gap: 4px; }
.footer-brand-link strong { color: #f2d58d; font: 800 14px "Plus Jakarta Sans", sans-serif; letter-spacing: .15em; }
.footer-brand-link small, .footer-brand-block > p { color: #aaa69b; font-size: 10px; line-height: 1.8; }
.footer-brand-block > p { max-width: 42ch; margin: 13px 0 0; }
.footer-links-block, .footer-contact-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-links-block > strong, .footer-contact-block > strong { margin-bottom: 4px; color: #e9c36d; font-size: 12px; }
.footer-links-block a, .footer-links-block button, .footer-contact-block > a { padding: 0; border: 0; color: #bbb7ad; background: none; text-decoration: none; font: inherit; font-size: 10px; text-align: start; transition: color .18s ease; }
.footer-links-block a:hover, .footer-links-block button:hover, .footer-contact-block > a:hover { color: #f3d587; }
.footer-socials { display: flex; gap: 8px; margin-top: 6px; }
.footer-socials a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(227,185,93,.25); border-radius: 10px; color: #e8c777; text-decoration: none; font-size: 13px; transition: background .18s ease, border-color .18s ease; }
.footer-socials a:hover { border-color: rgba(245,210,127,.62); background: rgba(214,163,56,.1); }
.footer-bottom { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-top: 17px; border-top: 1px solid rgba(226,194,129,.1); }
.footer-bottom p, .footer-bottom small { max-width: 76ch; margin: 0; color: #837f75; font-size: 9px; line-height: 1.8; }

@media (min-width: 1181px) {
  .topbar { grid-template-columns: minmax(112px,auto) minmax(320px,1fr) minmax(190px,250px) auto; grid-template-areas: "brand nav search actions"; gap: 12px clamp(12px, 1.5vw, 24px); min-height: 78px; padding-block: 10px; }
  .search-bar { justify-self: stretch; width: 100%; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .icon-button { width: 34px; height: 34px; }
  .site-nav { gap: clamp(9px, 1.35vw, 21px); }
  .site-nav button { font-size: 11px; }
}
@media (max-width: 1180px) and (min-width: 851px) {
  .home-intro { grid-template-columns: minmax(285px,.82fr) minmax(0,1.18fr); min-height: 510px; }
  .home-intro > h1 { font-size: clamp(36px,4vw,48px); }
  .category-rail { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #featuredServices { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #featuredServices .service-showcase-card { min-height: 375px; }
}
@media (max-width: 850px) {
  html { scroll-padding-top: 74px; }
  .home-intro { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: repeat(5,auto); min-height: 510px; padding: 30px clamp(20px,4vw,36px); column-gap: 12px; }
  .home-intro > h1 { font-size: clamp(32px,5.5vw,43px); }
  .home-intro > .intro-copy { font-size: 12px; }
  .hero-art { aspect-ratio: 1.1; border-radius: 17px; }
  .category-rail { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #featuredServices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #featuredServices .service-showcase-card { min-height: 365px; }
  .why-naxo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .academy-preview { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; }
  .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .home-intro { display: flex; flex-direction: column; align-items: stretch; min-height: 0; width: calc(100% - 20px); margin: 12px auto 25px; padding: 24px 20px 16px; gap: 0; border-radius: 19px; }
  .home-intro > :not(.hero-art) { width: 100%; }
  .home-intro > .section-kicker { order: 1; margin-bottom: 4px; font-size: 9px; }
  .home-intro > h1 { order: 2; margin: 9px 0 7px; font-size: clamp(30px,8vw,39px); line-height: 1.4; }
  .home-intro > .intro-copy { order: 3; font-size: 12px; line-height: 1.9; }
  .home-intro > .hero-actions { order: 4; direction: rtl; justify-content: flex-start; gap: 8px; margin-top: 15px; }
  .home-intro > .hero-points { order: 5; margin-top: 13px; font-size: 8px; }
  .hero-art { order: 6; width: 100%; aspect-ratio: 1.76; min-height: 0; margin-top: 18px; border-radius: 14px; transform: none; }
  .hero-feature-visual { object-fit: cover; object-position: 50% 50%; }
  .hero-actions .primary-button, .hero-secondary { min-height: 42px; padding-inline: 13px; font-size: 10px; }
  .platform-stats { padding-top: 18px; }
  .platform-stats .section-heading { align-items: start; }
  .platform-stats .section-heading h2 { font-size: 18px; }
  .stats-live { font-size: 8px; }
  .stats-grid { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .stat-card { min-height: 65px; padding: 8px 12px; grid-template-columns: 35px minmax(0,1fr); }
  .stat-card .stat-icon { width: 30px; height: 30px; font-size: 14px; }
  .stat-card .stat-value { font-size: 18px; }
  .stat-card h3 { font-size: 10px; }
  .category-section { padding-top: 18px; }
  .category-rail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .category-tile { min-height: 74px; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; }
  .category-icon { width: 37px; height: 37px; flex: 0 0 37px; }
  #servicesSection { padding-top: 38px; }
  #servicesSection .mini-section-heading { align-items: start; }
  #featuredServices { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #featuredServices .service-showcase-card { min-height: 0; }
  .response-promise { margin-top: 15px; }
  .portfolio-teaser { padding-top: 48px; }
  .portfolio-teaser .section-heading { align-items: start; }
  .portfolio-teaser .section-heading h2 { font-size: 25px; }
  .teaser-grid { grid-template-columns: 1fr; gap: 9px; }
  .teaser-tile { min-height: 130px; }
  .logo-banner-section { padding-top: 38px; }
  .logo-banner { height: 205px; background-position: 68% center; }
  .logo-banner::after { background: linear-gradient(90deg, rgba(5,7,8,.92), rgba(5,7,8,.7) 60%, rgba(5,7,8,.28)), linear-gradient(0deg, rgba(5,5,5,.48), transparent 72%); }
  .banner-caption { max-width: 76%; inset-inline-start: 17px; }
  .banner-caption strong { font-size: 20px; }
  .banner-action { inset-inline-start: 17px; bottom: 14px; }
  .why-naxo-section { padding-top: 46px; }
  .why-naxo-section .section-heading { display: block; }
  .why-naxo-section .section-heading > p { margin-top: 8px; font-size: 11px; }
  .why-naxo-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .why-naxo-card { min-height: 0; display: grid; grid-template-columns: 39px minmax(0,1fr); gap: 0 10px; padding: 12px; }
  .why-naxo-card > span { grid-column: 1; grid-row: 1 / 3; }
  .why-naxo-card h3 { grid-column: 2; margin: 0 0 2px; font-size: 11px; }
  .why-naxo-card p { grid-column: 2; font-size: 9px; }
  .academy-preview { display: grid; grid-template-columns: minmax(0,1fr); gap: 19px; margin-top: 42px; padding: 19px; border-radius: 17px; }
  .academy-preview-copy h2 { font-size: 25px; }
  .academy-preview-copy p { font-size: 10px; }
  .academy-track-list article { min-height: 54px; grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; padding: 8px; }
  .academy-track-list article > span:first-child { width: 31px; height: 31px; }
  .academy-track-list b { font-size: 10px; }
  .academy-track-list small { font-size: 8px; }
  .cta-banner { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; margin-top: 40px; }
  .cta-banner .primary-button { width: 100%; justify-content: center; }
  .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 17px; padding: 25px 0; }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 5px; }
  .app-footer { margin-top: 42px; padding-inline: 16px; }
}
@media (max-width: 560px) {
  html[dir="ltr"] .home-intro > .hero-actions { direction: ltr; }
  html[dir="ltr"] .home-intro > .hero-points { direction: ltr; }
}
@media (max-width: 360px) {
  .home-intro { padding-inline: 14px; }
  .home-intro > h1 { font-size: 28px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .primary-button, .hero-secondary { width: 100%; justify-content: center; }
  .category-tile { padding-inline: 8px; font-size: 9px; }
  .category-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .footer-main { gap: 21px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art, .hero-feature-visual, .why-naxo-card, .academy-track-list article,
  .category-tile, .primary-button, .service-showcase-action, .footer-socials a,
  .footer-links-block a, .footer-links-block button { transition: none !important; transform: none !important; }
  .hero-art::after, .hero-orbit, .hero-ribbon, .hero-particle { animation: none !important; }
}

/* Complete portfolio taxonomy: each live service category has its own work filter. */
.teaser-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.teaser-tile { min-width: 0; min-height: clamp(170px, 16vw, 245px); padding: clamp(12px,1.25vw,18px); }
.teaser-tile strong { max-width: 18ch; font-size: clamp(14px,1.25vw,19px); line-height: 1.55; text-wrap: balance; }
.teaser-tile-digital::before {
  background: linear-gradient(0deg,rgba(5,7,8,.82),rgba(5,7,8,.05) 68%),url("assets/teaser-digital.webp") center 48% / cover no-repeat;
}
.teaser-tile-production::before {
  background: linear-gradient(0deg,rgba(5,7,8,.82),rgba(5,7,8,.04) 68%),url("assets/naxo-hero-cinematic.webp") center 48% / cover no-repeat;
}
.teaser-tile-social::before {
  background: linear-gradient(0deg,rgba(5,7,8,.84),rgba(5,7,8,.03) 68%),url("assets/teaser-social.webp") center 48% / cover no-repeat;
}
.teaser-tile-printing::before {
  background: linear-gradient(0deg,rgba(5,7,8,.84),rgba(5,7,8,.03) 68%),url("assets/teaser-brand.webp") center 48% / cover no-repeat;
}
.teaser-tile-supplies::before {
  background: linear-gradient(0deg,rgba(5,7,8,.84),rgba(5,7,8,.03) 68%),url("assets/teaser-supplies.webp") center 48% / cover no-repeat;
}
.portfolio-view .portfolio-heading { max-width: 100%; }
.portfolio-view .portfolio-heading p { max-width: 70ch; }
.portfolio-filters { flex-wrap: wrap; overflow: visible; justify-content: flex-start; row-gap: 9px; }
.portfolio-filters > span { flex: 1 0 100%; margin: 0 0 2px; }
.portfolio-filters button { min-height: 38px; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; }
.portfolio-filters button:hover { transform: translateY(-1px); }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.work-card, .work-card-wide { grid-column: span 1; display: flex; min-width: 0; flex-direction: column; }
.work-card-copy { display: flex; flex: 1; flex-direction: column; align-items: stretch; padding: 15px 16px 16px; }
.work-card-copy h2 { font-size: clamp(14px,1.1vw,17px); }
.work-card-copy p { min-height: 62px; font-size: 10px; }
.work-card-copy button { min-height: 38px; margin-top: auto; }
.work-art { flex: 0 0 auto; aspect-ratio: 1.25; }
.work-art-note { right: 12px; }
.work-art-social {
  background: linear-gradient(135deg,rgba(8,11,12,.24),rgba(8,7,5,.4)),url("assets/teaser-social.webp") center 45% / cover no-repeat;
}
.work-art-video {
  background: linear-gradient(135deg,rgba(8,11,12,.28),rgba(4,5,6,.52)),url("assets/naxo-hero-cinematic.webp") center 43% / cover no-repeat;
}
.work-art-photo {
  background: linear-gradient(140deg,rgba(9,9,8,.26),rgba(8,5,4,.42)),url("assets/teaser-brand.webp") center 50% / cover no-repeat;
}
.work-art-ads {
  background: linear-gradient(135deg,rgba(7,10,10,.34),rgba(10,7,4,.48)),url("assets/teaser-campaign.webp") center 45% / cover no-repeat;
}
.work-art-web {
  background: linear-gradient(145deg,rgba(6,10,12,.34),rgba(4,7,9,.56)),url("assets/teaser-digital.webp") center 50% / cover no-repeat;
}
.work-art-dashboard {
  background: linear-gradient(145deg,rgba(7,11,13,.32),rgba(4,6,8,.56)),url("assets/teaser-supplies.webp") center 48% / cover no-repeat;
}
.work-art-print {
  background: linear-gradient(135deg,rgba(8,7,5,.26),rgba(10,8,5,.48)),url("assets/teaser-printing.webp") center 50% / cover no-repeat;
}
.work-art-stationery {
  background: linear-gradient(135deg,rgba(8,8,7,.28),rgba(5,6,6,.53)),url("assets/teaser-campaign.webp") center 51% / cover no-repeat;
}
.work-art-supplies {
  background: radial-gradient(ellipse at 50% 60%,rgba(220,164,66,.2),transparent 43%),linear-gradient(145deg,#272015,#111516 78%);
}
.work-art-equipment {
  background: linear-gradient(135deg,rgba(6,8,8,.28),rgba(5,7,8,.55)),url("assets/teaser-social.webp") center 48% / cover no-repeat;
}
.social-post-stack, .video-frame, .photo-product, .ads-chart, .web-window,
.dashboard-mock, .print-menu, .stationery-set, .supply-kit, .equipment-set {
  position: absolute;
  z-index: 5;
  box-shadow: 0 16px 38px rgba(0,0,0,.34), inset 0 1px rgba(255,239,204,.1);
}
.social-post-stack { inset: 18% 18% 17% 21%; display: flex; flex-direction: column; justify-content: space-between; padding: 13px; border: 1px solid rgba(245,205,112,.5); border-radius: 14px; background: linear-gradient(145deg,rgba(15,18,18,.78),rgba(7,9,9,.91)); transform: rotate(-4deg); }
.social-post-stack span, .video-frame > span, .print-menu > span, .stationery-set > span, .supply-kit > span { color: #f2cb70; font: 700 7px "Plus Jakarta Sans",sans-serif; letter-spacing: .14em; }
.social-post-stack b { color: #fff3d2; font: 800 clamp(14px,1.4vw,20px)/1.1 "Plus Jakarta Sans",sans-serif; letter-spacing: -.035em; }
.social-post-stack i { width: 48%; height: 3px; border-radius: 5px; background: #e5b853; box-shadow: 0 0 16px rgba(239,190,76,.65); }
.video-frame { inset: 17% 19%; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; border: 1px solid rgba(241,199,110,.6); border-radius: 14px; background: linear-gradient(145deg,rgba(5,9,12,.8),rgba(4,6,7,.91)); transform: rotate(3deg); }
.video-frame b { color: #fff4d9; font: 800 clamp(18px,2vw,27px)/.97 "Plus Jakarta Sans",sans-serif; }
.video-frame i { align-self: flex-end; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #17120a; background: linear-gradient(140deg,#ffe399,#c99134); font-size: 11px; font-style: normal; }
.photo-product { inset: 18% 25% 16%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(247,214,153,.45); border-radius: 12px; background: linear-gradient(145deg,rgba(45,31,19,.8),rgba(10,10,9,.88)); }
.photo-product span { color: #e8c884; font: 600 7px "Plus Jakarta Sans",sans-serif; letter-spacing: .18em; }
.photo-product b { color: #fff2d5; font: 700 clamp(15px,1.6vw,21px)/1.08 "Plus Jakarta Sans",sans-serif; text-align: center; }
.ads-chart { inset: 19% 19% 18%; padding: 12px 13px; border: 1px solid rgba(241,199,103,.48); border-radius: 13px; background: linear-gradient(145deg,rgba(11,14,14,.82),rgba(6,8,8,.94)); }
.ads-chart > span, .dashboard-mock > span { color: #d8c59a; font: 600 7px "Plus Jakarta Sans",sans-serif; letter-spacing: .15em; }
.ads-chart > b { display: block; margin: 7px 0 8px; color: #f2d17f; font: 700 21px "Plus Jakarta Sans",sans-serif; }
.ads-chart > b i { font-size: 15px; font-style: normal; }
.ads-chart > div { display: flex; align-items: end; height: 40%; gap: 6px; border-bottom: 1px solid rgba(242,209,127,.25); }
.ads-chart > div i { flex: 1; height: 34%; border-radius: 4px 4px 0 0; background: linear-gradient(#f1ce76,#916420); }
.ads-chart > div i:nth-child(2) { height: 55%; }.ads-chart > div i:nth-child(3) { height: 42%; }.ads-chart > div i:nth-child(4) { height: 74%; }.ads-chart > div i:nth-child(5) { height: 100%; }
.web-window { inset: 16% 15% 16%; padding: 11px 13px; border: 1px solid rgba(241,199,103,.49); border-radius: 12px; background: linear-gradient(145deg,rgba(8,12,13,.84),rgba(4,6,7,.95)); transform: rotate(-2deg); }
.web-window > i { display: inline-block; width: 5px; height: 5px; margin-inline-end: 3px; border-radius: 50%; background: #e6b955; }
.web-window > b { display: block; margin: 18px 0 10px; color: #f5ead2; font: 800 clamp(15px,1.7vw,23px)/1.02 "Plus Jakarta Sans",sans-serif; }
.web-window > b em { color: #f2ca70; font-style: normal; }
.web-window > span { color: #d5bb7a; font: 600 6px "Plus Jakarta Sans",sans-serif; letter-spacing: .13em; }
.web-window > span b { display: inline; color: #ffdc8c; font-size: 10px; }
.dashboard-mock { inset: 19% 16% 16%; padding: 10px 12px; border: 1px solid rgba(239,194,96,.42); border-radius: 12px; background: linear-gradient(145deg,rgba(8,12,13,.87),rgba(4,6,7,.95)); }
.dashboard-mock > div:first-child { display: flex; gap: 4px; margin-bottom: 12px; }
.dashboard-mock > div:first-child i { width: 5px; height: 5px; border-radius: 50%; background: #ddb14e; }
.dashboard-mock > b { display: block; margin-top: 5px; color: #ffda83; font: 700 clamp(17px,1.8vw,24px) "Plus Jakarta Sans",sans-serif; }
.dashboard-mock > small { color: #aaa28e; font: 500 6px "Plus Jakarta Sans",sans-serif; letter-spacing: .08em; }
.dashboard-bars { display: flex; align-items: end; height: 26%; gap: 5px; margin-top: 9px; border-bottom: 1px solid rgba(239,194,96,.24); }
.dashboard-bars i { flex: 1; height: 42%; background: linear-gradient(#f1d280,#94702b); border-radius: 3px 3px 0 0; }
.dashboard-bars i:nth-child(2) { height: 76%; }.dashboard-bars i:nth-child(3) { height: 55%; }.dashboard-bars i:nth-child(4) { height: 94%; }.dashboard-bars i:nth-child(5) { height: 66%; }.dashboard-bars i:nth-child(6) { height: 82%; }.dashboard-bars i:nth-child(7) { height: 100%; }
.print-menu { inset: 14% 25% 13%; display: flex; flex-direction: column; justify-content: space-between; padding: 13px 12px; border: 1px solid rgba(240,211,158,.66); background: linear-gradient(145deg,#d5bd8c,#8e7548 72%,#675337); color: #292113; transform: rotate(3deg); }
.print-menu > span { color: #584322; font-size: 6px; }
.print-menu > b { font: 700 clamp(16px,1.8vw,23px)/.99 "Plus Jakarta Sans",sans-serif; letter-spacing: -.03em; }
.print-menu > i { color: #4d3d24; font: 600 5px "Plus Jakarta Sans",sans-serif; letter-spacing: .11em; font-style: normal; }
.stationery-set { inset: 20% 16% 17%; padding: 13px; border: 1px solid rgba(239,198,113,.51); border-radius: 11px; background: linear-gradient(145deg,rgba(19,20,17,.86),rgba(7,9,9,.95)); transform: rotate(-3deg); }
.stationery-set > b { display: block; margin-top: 19px; color: #f4e6c8; font: 800 clamp(16px,1.8vw,24px)/1.02 "Plus Jakarta Sans",sans-serif; }
.stationery-set > i { display: block; margin-top: 11px; color: #d8ac4e; font: 600 7px "Plus Jakarta Sans",sans-serif; font-style: normal; letter-spacing: .1em; }
.supply-kit { inset: 18% 21% 16%; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 8px; padding: 13px; border: 1px solid rgba(238,193,95,.48); border-radius: 13px; background: linear-gradient(145deg,rgba(23,21,15,.91),rgba(7,9,9,.95)); transform: rotate(2deg); }
.supply-kit > span, .supply-kit > small { grid-column: 1 / -1; }
.supply-kit > b { grid-column: 1 / -1; color: #f4ce77; font: 700 27px "Plus Jakarta Sans",sans-serif; }
.supply-kit > i { height: 17px; border: 1px solid rgba(240,199,110,.45); border-radius: 5px; background: linear-gradient(110deg,rgba(231,177,69,.3),rgba(22,24,23,.6)); }
.supply-kit > small { color: #b7aa8e; font: 500 5px "Plus Jakarta Sans",sans-serif; letter-spacing: .12em; }
.equipment-set { inset: 17% 19% 16%; padding: 13px; border: 1px solid rgba(237,193,99,.49); border-radius: 12px; background: linear-gradient(145deg,rgba(11,14,14,.88),rgba(5,7,8,.95)); transform: rotate(-3deg); }
.equipment-set > span { color: #d0b16b; font: 600 6px/1.5 "Plus Jakarta Sans",sans-serif; letter-spacing: .12em; }
.equipment-set > i { position: absolute; top: 18%; right: 12%; width: 30px; height: 36px; border: 1px solid rgba(239,197,104,.75); border-radius: 7px; background: linear-gradient(130deg,#d6ac54,#5a411b); box-shadow: 0 5px 15px rgba(0,0,0,.5); }
.equipment-set > b { display: block; margin-top: 21px; color: #f1e5ca; font: 800 clamp(14px,1.5vw,19px)/1.05 "Plus Jakarta Sans",sans-serif; }
@media (max-width: 1180px) {
  .teaser-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .work-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 850px) {
  .teaser-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .work-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .portfolio-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .portfolio-filters > span { flex: 0 0 auto; margin-inline-end: 12px; }
  .work-card-copy { padding: 13px; }
}
@media (max-width: 560px) {
  .teaser-grid { grid-template-columns: minmax(0,1fr); }
  .work-grid { grid-template-columns: minmax(0,1fr); gap: 11px; }
  .work-art { aspect-ratio: 1.5; }
  .work-card-copy h2 { font-size: 16px; }
  .work-card-copy p { min-height: 0; font-size: 11px; }
  .portfolio-filters { margin-inline: -2px; }
  .portfolio-filters > span { display: block; }
}

/* Homepage header, metric cards, and the complete eight-part service overview. */
.brand { min-width: 0; gap: 0; }
.brand-lockup { display: block; flex: 0 0 78px; width: 78px; height: 78px; overflow: visible; border: 0; border-radius: 0; background: transparent; filter: drop-shadow(0 7px 14px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(225,174,62,.1)); transition: transform .24s ease, filter .24s ease; }
.brand-lockup img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand-lockup { transform: translateY(-2px) scale(1.025); filter: drop-shadow(0 9px 17px rgba(0,0,0,.45)) drop-shadow(0 0 17px rgba(230,180,69,.22)); }
.topbar-actions .icon-button svg, .menu-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.topbar-actions .icon-button:hover svg, .menu-button:hover svg { stroke: #f4d68e; }
.topbar-actions .favorite-shortcut svg { fill: none; }
.topbar-actions .favorite-shortcut[aria-current="page"] svg { fill: rgba(227,173,65,.2); }
.search-symbol { display: grid; place-items: center; flex: 0 0 20px; }
.search-symbol svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hero-secondary > span { display: grid; place-items: center; width: 20px; height: 20px; }
.hero-secondary > span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1181px) {
  .topbar { min-height: 91px; }
  .brand-lockup { flex-basis: 86px; width: 86px; height: 86px; }
}

.platform-stats { position: relative; margin-top: 8px; padding-top: clamp(34px,4vw,58px); padding-bottom: clamp(28px,3vw,42px); border: 1px solid rgba(224,178,78,.24); border-radius: 24px; background: radial-gradient(ellipse at 6% 100%,rgba(189,126,31,.1),transparent 38%),linear-gradient(120deg,rgba(20,19,16,.82),rgba(8,11,12,.92)); box-shadow: inset 0 1px rgba(255,241,207,.045),0 16px 38px rgba(0,0,0,.15); }
.platform-stats .section-heading { align-items: end; margin-bottom: 15px; }
.platform-stats .section-heading h2 { font-size: clamp(23px,2.7vw,36px); }
.stats-live { color: #e7d7ad; border-color: rgba(231,190,86,.24); background: rgba(12,13,12,.68); }
.stats-live.is-offline { color: #e7d7ad; }
.stats-live.is-offline i { background: #d9ad55; box-shadow: 0 0 0 4px rgba(220,186,102,.09),0 0 12px rgba(220,186,102,.35); opacity: .9; }
.stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 0; }
.stat-card { display: grid; grid-template-columns: 50px minmax(0,1fr); grid-template-rows: auto auto auto; align-items: center; column-gap: 15px; min-height: 132px; padding: 19px 20px; border-color: rgba(226,185,94,.25); border-radius: 17px; background: linear-gradient(140deg,rgba(35,29,19,.83),rgba(10,13,14,.96) 70%); }
.stat-card::after { width: 142px; height: 142px; border-color: rgba(228,183,78,.2); }
.stat-card .stat-icon { display: grid; grid-column: 1; grid-row: 1 / 4; place-items: center; width: 46px; height: 46px; margin: 0; border-radius: 14px; }
.stat-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stat-card .stat-value { grid-column: 2; grid-row: 1; align-self: end; color: #f5d582; font-size: clamp(24px,2.4vw,34px); font-variant-numeric: tabular-nums; }
.stat-card h3 { grid-column: 2; grid-row: 2; margin: 3px 0 0; font-size: 13px; }
.stat-card p { display: block; grid-column: 2; grid-row: 3; margin: 3px 0 0; color: #a79e89; font-size: 9px; line-height: 1.55; }
.stat-card[hidden] { display: none !important; }
.stat-card[data-stat-card="users"] .stat-icon { color: #f2cf7a; }
.stat-card[data-stat-card="completed"] .stat-icon { color: #f2cf7a; }
.stat-card[data-stat-card="clients"] .stat-icon { color: #f2cf7a; }
#featuredServices { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
#serviceShowcaseCards { grid-template-columns: repeat(4,minmax(0,1fr)); }
#featuredServices .service-showcase-card { min-height: 378px; }
#featuredServices .service-showcase-art { aspect-ratio: 1.72; }
#featuredServices .service-showcase-tools { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; width: 100%; margin-top: 10px; }
#featuredServices .service-showcase-tools, #serviceShowcaseCards .service-showcase-tools { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 7px; width: 100%; margin-top: 10px; }
#serviceShowcaseCards .service-showcase-tools .service-showcase-tool { flex: 0 0 34px; }
#featuredServices .service-showcase-tool { flex: 0 0 34px; }
#featuredServices .service-showcase-action { min-height: 46px; }
.service-showcase-card:focus-within { outline: 2px solid rgba(244,214,142,.85); outline-offset: 3px; }
#featuredServices .service-showcase-tool svg, #serviceShowcaseCards .service-showcase-tool svg,
.favorite-button svg, .cart-add-button svg { display: block; width: 18px; height: 18px; }
@media (max-width: 1180px) {
  #featuredServices { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #serviceShowcaseCards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #featuredServices .service-showcase-card { min-height: 385px; }
}
@media (max-width: 850px) {
  .brand-lockup { flex-basis: 64px; width: 64px; height: 64px; }
  #featuredServices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  #serviceShowcaseCards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #featuredServices .service-showcase-card { min-height: 0; }
  .platform-stats { border-radius: 18px; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 118px; padding: 13px; grid-template-columns: 40px minmax(0,1fr); column-gap: 10px; }
  .stat-card .stat-icon { width: 38px; height: 38px; }
  .stat-card .stat-value { font-size: clamp(22px,4vw,29px); }
  .stat-card h3 { font-size: 11px; }
  .stat-card p { font-size: 8px; }
}
@media (max-width: 560px) {
  .brand-lockup { flex-basis: 58px; width: 58px; height: 58px; }
  .stats-live { padding: 7px 9px; font-size: 8px; }
  .platform-stats .section-heading { gap: 9px; }
  .platform-stats .section-heading h2 { font-size: 20px; }
  .stats-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .stat-card { grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto auto; min-height: 84px; padding: 11px 13px; }
  .stat-card .stat-icon { grid-row: 1 / 4; width: 36px; height: 36px; }
  .stat-card .stat-value { font-size: 21px; }
  .stat-card h3 { font-size: 10px; }
  .stat-card p { font-size: 8px; }
  #featuredServices { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #serviceShowcaseCards { grid-template-columns: minmax(0,1fr); }
  #featuredServices .service-showcase-card { display: flex; min-height: 0; }
  #featuredServices .service-showcase-art { aspect-ratio: 1.8; }
  #featuredServices .service-showcase-copy { padding: 12px 6px 9px; }
  #featuredServices .service-showcase-copy h2 { font-size: 14px; }
  #featuredServices .service-showcase-copy p { font-size: 10px; }
  #featuredServices .service-showcase-tools { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-lockup, .brand:hover .brand-lockup, .topbar-actions .icon-button svg { transition: none !important; transform: none !important; }
  .stats-live i { animation: none !important; }
}

/* Keep the home headline inside its copy column and give active navigation a clear, quiet cue. */
.home-intro { grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); column-gap: clamp(20px,3.5vw,56px); }
.home-intro > :not(.hero-art) { width: min(100%,620px); min-width: 0; }
.home-intro > h1 { max-width: 100%; font-size: clamp(38px,3.35vw,56px); line-height: 1.3; text-wrap: balance; }
.site-nav button::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; opacity: 0; transform: scaleX(.32); transform-origin: center; transition: opacity .22s ease,transform .32s cubic-bezier(.2,.7,.2,1); background: linear-gradient(90deg,transparent,var(--naxo-gold),transparent); }
.site-nav button.is-active::after { opacity: 1; transform: scaleX(1); }
.nav-item { transition: color .22s ease,background-color .22s ease,transform .22s ease; }
.nav-item .nav-icon { transition: transform .28s cubic-bezier(.2,.7,.2,1),background-color .22s ease; }
.nav-item.is-active .nav-icon { animation: nav-icon-select .32s cubic-bezier(.2,.7,.2,1) both; }
.nav-item.is-active > span:not(.nav-icon) { animation: nav-label-select .28s ease both; }
@keyframes nav-icon-select { from { opacity: .55; transform: translateY(3px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes nav-label-select { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.platform-stats { width: min(calc(100% - 32px),1560px); max-width: 1560px; min-width: 0; margin-inline: auto; padding-inline: clamp(16px,3.5vw,48px); overflow: hidden; }
.platform-stats .section-heading, .stats-grid, .stat-card { min-width: 0; }
.stats-grid { width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); }
.stat-card { grid-template-columns: 44px minmax(0,1fr); column-gap: clamp(9px,1vw,14px); }
.stat-card .stat-value, .stat-card h3, .stat-card p { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.stat-card .stat-value { white-space: nowrap; letter-spacing: 0; }
.stat-value-tick { animation: stat-value-tick .55s ease-out; }
@keyframes stat-value-tick { 35% { color: #fff0bd; text-shadow: 0 0 17px rgba(245,213,134,.46); } }

@media (max-width: 850px) {
  .home-intro > h1 { font-size: clamp(32px,5.2vw,43px); }
  .platform-stats { width: calc(100% - 24px); padding-inline: 18px; }
  .stat-card { grid-template-columns: 40px minmax(0,1fr); column-gap: 10px; }
}
@media (max-width: 560px) {
  .home-intro > h1 { font-size: clamp(30px,8vw,39px); }
  .platform-stats { width: calc(100% - 20px); padding-inline: 14px; }
  .stat-card { grid-template-columns: 42px minmax(0,1fr); }
}
@media (max-width: 360px) { .home-intro > h1 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .site-nav button::after, .nav-item, .nav-item .nav-icon { transition: none !important; }
  .nav-item.is-active .nav-icon, .nav-item.is-active > span:not(.nav-icon), .stat-value-tick { animation: none !important; }
}


/* Brand mark, real gallery photography, and clearer account tools. */
.brand { display:inline-flex; align-items:center; gap:10px; min-width:0; direction:ltr; text-decoration:none; }
.brand-lockup { display:grid; flex:0 0 46px; place-items:center; width:46px; height:46px; overflow:hidden; border:1px solid rgba(232,190,94,.38); border-radius:13px; background:radial-gradient(circle at 50% 40%,rgba(220,171,71,.15),rgba(6,7,8,.96) 72%); box-shadow:0 0 20px rgba(216,167,58,.12),inset 0 1px rgba(255,245,218,.12); transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.brand-lockup img { display:block; width:100%; height:100%; object-fit:cover; }
.brand-wordmark { display:grid; gap:3px; color:#f1d58e; line-height:1; letter-spacing:.16em; }
.brand-wordmark strong { font:800 16px/1 "Plus Jakarta Sans",sans-serif; }
.brand-wordmark small { margin-inline-start:2px; color:#c69a47; font:700 8px/1 "Plus Jakarta Sans",sans-serif; letter-spacing:.42em; }
.brand:hover .brand-lockup { transform:translateY(-1px); border-color:rgba(255,220,137,.75); box-shadow:0 0 24px rgba(216,167,58,.22),inset 0 1px rgba(255,245,218,.18); }
.brand:focus-visible { outline:2px solid #f1d58e; outline-offset:4px; border-radius:12px; }
@media (min-width:1181px) { .brand-lockup { flex-basis:46px; width:46px; height:46px; } .topbar { min-height:80px; } }
@media (max-width:850px) { .brand-lockup { flex-basis:39px; width:39px; height:39px; border-radius:11px; } .brand-wordmark strong { font-size:14px; } .brand-wordmark small { font-size:7px; } }
@media (max-width:360px) { .brand { gap:7px; } .brand-lockup { flex-basis:35px; width:35px; height:35px; } .brand-wordmark strong { font-size:12px; } }

/* Separate photo direction for every homepage gallery tile. */
.teaser-tile { overflow:hidden; }
.teaser-tile::before { background-size:cover; background-position:center; }
.teaser-tile-brand::before { background-image:linear-gradient(0deg,rgba(5,7,8,.88),rgba(5,7,8,.05) 75%),url("assets/teaser-brand.webp"); }
.teaser-tile-campaign::before { background-image:linear-gradient(0deg,rgba(5,7,8,.88),rgba(5,7,8,.05) 75%),url("assets/teaser-campaign.webp"); }
.teaser-tile-product::before { background-image:linear-gradient(0deg,rgba(5,7,8,.88),rgba(5,7,8,.05) 75%),url("assets/teaser-product.webp"); }
.teaser-tile-digital::before { background-image:linear-gradient(0deg,rgba(5,7,8,.88),rgba(5,7,8,.05) 75%),url("assets/teaser-digital.webp"); }
.teaser-tile-production::before { background-image:linear-gradient(0deg,rgba(5,7,8,.88),rgba(5,7,8,.05) 75%),url("assets/teaser-production.webp"); }
.teaser-tile-social::before { background-image:linear-gradient(0deg,rgba(5,7,8,.88),rgba(5,7,8,.05) 75%),url("assets/teaser-social.webp"); }
.teaser-tile-printing::before { background-image:linear-gradient(0deg,rgba(5,7,8,.88),rgba(5,7,8,.05) 75%),url("assets/teaser-printing.webp"); }
.teaser-tile-supplies::before { background-image:linear-gradient(0deg,rgba(5,7,8,.88),rgba(5,7,8,.05) 75%),url("assets/teaser-supplies.webp"); }
.teaser-tile-pos::before { background-image:linear-gradient(0deg,rgba(5,7,8,.9),rgba(5,7,8,.04) 75%),url("assets/teaser-pos.svg"); }
.teaser-tile:hover::before { transform:scale(1.045); }
.teaser-tile > span,.teaser-tile > strong { text-shadow:0 2px 14px rgba(0,0,0,.85); }

/* Photo cards carry NAXO's own studio mark rather than CSS-only mockups. */
.work-art { position:relative; overflow:hidden; isolation:isolate; background:#11100d; }
.work-art-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.82) contrast(1.05); transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .4s ease; }
.work-card:hover .work-art-image { transform:scale(1.045); filter:saturate(.98) contrast(1.05); }
.work-art::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(7,8,9,.24),transparent 42%,rgba(7,8,9,.25)); }
.work-art-note { z-index:2; top:12px; left:auto; right:auto; width:max-content; max-width:calc(100% - 24px); inset-inline-start:12px; inset-inline-end:auto; padding:6px 8px; border:1px solid rgba(231,190,86,.33); border-radius:8px; color:#f1d58e; background:rgba(8,9,9,.7); letter-spacing:.08em; backdrop-filter:blur(7px); }
.work-art-watermark { position:absolute; z-index:3; inset-inline-start:11px; bottom:10px; display:flex; align-items:center; gap:6px; min-height:31px; padding:4px 8px 4px 4px; border:1px solid rgba(231,190,86,.38); border-radius:9px; color:#f1d58e; background:rgba(5,6,7,.77); box-shadow:0 4px 15px rgba(0,0,0,.3); backdrop-filter:blur(8px); direction:ltr; }
.work-art-watermark img { display:block; width:23px; height:23px; border-radius:6px; object-fit:cover; }
.work-art-watermark span { display:grid; gap:2px; line-height:1; }
.work-art-watermark strong { font:800 8px/1 "Plus Jakarta Sans",sans-serif; letter-spacing:.16em; }
.work-art-watermark small { color:#c69a47; font:700 5px/1 "Plus Jakarta Sans",sans-serif; letter-spacing:.35em; }
.work-card-copy h2 { line-height:1.55; text-wrap:pretty; }
.work-card-copy p { min-height:0; flex:1 0 auto; line-height:1.8; }
.work-card-copy button { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; padding:8px 12px; line-height:1.5; white-space:normal; text-align:start; }
.work-card-copy button span { flex:0 0 auto; }
.work-card[hidden] { display:none !important; }
@media (max-width:1100px) { .work-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .work-card-copy { padding:12px 11px 13px; } .work-card-copy p { font-size:11px; } }
@media (max-width:500px) { .work-grid { grid-template-columns:minmax(0,1fr); gap:12px; } .work-art { aspect-ratio:1.45; } .work-card-copy h2 { font-size:16px; } }

/* Account settings include clear usage steps, with comfortable touch targets. */
.view.account-view.is-active { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:15px; }
.account-view > .page-title,.account-view .account-help-panel,.account-view .account-settings-panel { grid-column:1/-1; }
.account-view .account-panel { width:100%; max-width:none; min-width:0; margin:0; padding:clamp(15px,2vw,23px); border-color:rgba(220,176,76,.22); background:radial-gradient(ellipse at 100% 0,rgba(214,166,58,.085),transparent 45%),linear-gradient(145deg,rgba(26,23,17,.94),rgba(9,12,13,.98)); }
.account-view .account-panel-heading { margin-bottom:12px; }
.account-view .account-panel-heading h2 { line-height:1.55; }
.account-settings-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.account-settings-actions .account-action { display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; min-width:0; min-height:52px; margin:0; padding:9px 11px; color:#eee4cf; font-weight:700; font-size:12px; line-height:1.55; text-align:start; white-space:normal; }
.account-settings-actions .account-action > span:first-child { display:grid; flex:0 0 30px; place-items:center; width:30px; height:30px; border:1px solid rgba(226,181,78,.26); border-radius:9px; color:#efca72; background:rgba(213,163,59,.08); font:700 14px/1 sans-serif; }
.account-settings-actions .account-action > .setting-label { min-width:0; }
.account-view .account-note { margin:11px 0 0; font-size:11px; }
.account-help-intro { margin:-1px 0 13px; color:#bcb5a7; font-size:13px; line-height:1.8; }
.platform-guide { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 15px; }
.platform-guide-card { display:flex; min-width:0; gap:10px; padding:13px; border:1px solid rgba(224,178,78,.18); border-radius:13px; background:linear-gradient(145deg,rgba(41,34,21,.6),rgba(11,13,14,.88)); }
.platform-guide-card > span { display:grid; flex:0 0 30px; place-items:center; width:30px; height:30px; border:1px solid rgba(231,190,86,.3); border-radius:9px; color:#f1d58e; background:rgba(207,158,54,.08); font:700 10px/1 "Plus Jakarta Sans",sans-serif; }
.platform-guide-card strong { display:block; color:#eee5d2; font-size:12px; line-height:1.65; }
.platform-guide-card p { margin:5px 0 0; color:#aaa59a; font-size:10px; line-height:1.75; }
.account-help-panel .account-action { min-height:46px; margin-top:14px; }
@media (max-width:900px) { .account-settings-actions { grid-template-columns:minmax(0,1fr); } .platform-guide { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .view.account-view.is-active { grid-template-columns:minmax(0,1fr); gap:11px; } .account-view > .page-title,.account-view .account-help-panel { grid-column:auto; } .account-settings-actions { grid-template-columns:minmax(0,1fr); } .platform-guide { grid-template-columns:minmax(0,1fr); } .platform-guide-card { padding:11px; } }

/* Text remains legible and centered inside every primary action. */
button,.primary-button,.secondary-button,.text-button,.service-link,.service-showcase-action { font-family:inherit; }
.primary-button,.secondary-button,.service-link,.service-showcase-action,.work-card-copy button { line-height:1.5; overflow-wrap:anywhere; }
.primary-button,.secondary-button { gap:9px; min-width:0; max-width:100%; min-height:44px; white-space:normal; text-align:center; justify-content:center; overflow-wrap:anywhere; }
.service-link,.service-showcase-action { align-items:center; }
button:focus-visible,a:focus-visible { outline:2px solid rgba(246,211,129,.9); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .work-card:hover .work-art-image,.teaser-tile:hover::before,.brand:hover .brand-lockup { transform:none !important; } }

.service-showcase-art-shade { background:linear-gradient(180deg,rgba(6,7,8,.26),rgba(6,7,8,.06) 35%,rgba(6,7,8,.32)),linear-gradient(125deg,rgba(175,116,27,.12),transparent 62%); }

@media (min-width:1450px) { #serviceShowcaseCards { grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* Full-bleed homepage artwork: remove the inset band and keep the image/text as one hero. */
.home-intro { isolation: isolate; }
.home-intro::before { display: none; }
.home-intro > .hero-art {
  inset: 0;
  border: 0;
  border-radius: 0;
  background: #08090b;
  box-shadow: none;
  transform: translate3d(var(--hero-parallax-x,0px),var(--hero-parallax-y,0px),0);
}
.hero-feature-visual { object-fit: cover; object-position: center 50%; }
.hero-art::before {
  background: linear-gradient(90deg,rgba(5,7,8,.9) 0%,rgba(5,7,8,.78) 34%,rgba(5,7,8,.42) 61%,rgba(5,7,8,.13) 84%,rgba(5,7,8,.06) 100%);
}
@media (max-width:850px) {
  .home-intro > .hero-art { transform: none; }
}
@media (max-width:560px) {
  .home-intro > .hero-art {
    position:relative;
    inset:auto;
    order:6;
    z-index:0;
    width:100%;
    aspect-ratio:1.76;
    min-height:0;
    margin-top:18px;
    border:0;
    border-radius:12px;
  }
  .hero-art::before { background:linear-gradient(0deg,rgba(5,7,8,.28),transparent 45%); }
}

/* A single gold indicator glides under the selected desktop navigation item. */
.site-nav { position:relative; }
.site-nav::before { content:""; position:absolute; z-index:1; bottom:0; left:0; width:var(--nav-indicator-width,0px); height:2px; opacity:var(--nav-indicator-opacity,0); transform:translateX(var(--nav-indicator-x,0px)); transform-origin:left center; border-radius:99px; background:linear-gradient(90deg,transparent,#b98731 16%,#ffdc82 50%,#b98731 84%,transparent); box-shadow:0 0 12px rgba(231,182,68,.34); transition:transform .48s cubic-bezier(.2,.75,.2,1),width .35s ease,opacity .18s ease; pointer-events:none; }
.site-nav button::after,.site-nav button.is-active::after { opacity:0; transform:scaleX(.2); }
.site-nav button { transition:color .22s ease,transform .25s ease,background-color .22s ease; }
.site-nav button:hover,.site-nav button:focus-visible { transform:translateY(-2px); }
.site-nav button.is-active { color:#f1d58e; }
@media (max-width:850px) { .site-nav::before { display:none; } }
@media (prefers-reduced-motion:reduce) { .site-nav::before,.site-nav button { transition:none !important; } .site-nav button:hover,.site-nav button:focus-visible { transform:none; } }