:root {
  --bg: #07090a;
  --surface: #0e1112;
  --surface-2: #121617;
  --surface-3: #191d1e;
  --gold: #d9a846;
  --gold-light: #f4d68e;
  --muted: #a3a5a2;
  --line: rgba(219, 172, 83, .25);
  --line-soft: rgba(239, 232, 214, .11);
  --radius: 20px;
}

html { background: #07090a; }
body {
  padding: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 8% 9%, rgba(115, 73, 24, .14), transparent 34rem),
    radial-gradient(ellipse at 91% 24%, rgba(46, 47, 39, .12), transparent 34rem),
    #07090a;
}
body::before { opacity: .13; }
.app-shell {
  width: min(100%, 1500px);
  max-width: 1500px;
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding: 0 0 28px;
  overflow: clip;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(118px, auto) minmax(290px, 1fr) auto;
  grid-template-areas: "brand nav actions" "search search search";
  align-items: center;
  gap: 9px 28px;
  min-height: 92px;
  padding: 13px clamp(20px, 5vw, 72px) 12px;
  background: rgba(7, 9, 10, .86);
  border-bottom: 1px solid rgba(222, 174, 83, .16);
  border-radius: 0;
  backdrop-filter: blur(22px);
}
.menu-button { display: none; }
.brand { grid-area: brand; gap: 11px; justify-self: start; }
.brand-mark { width: 46px; height: 46px; padding: 0; border: 1px solid rgba(231,190,86,.24); border-radius: 12px; background: #08090a; box-shadow: 0 0 25px rgba(200,148,50,.12); transition: transform .24s ease, border-color .24s ease; }
.brand-mark img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.brand:hover .brand-mark { transform: translateY(-1px); border-color: rgba(241,212,143,.52); }
.brand-copy strong { font-size: 18px; letter-spacing: .2em; }
.brand-copy small { font-size: 7px; }
.site-nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(11px, 2.4vw, 34px);
  min-width: 0;
}
.site-nav button {
  position: relative;
  padding: 8px 1px;
  border: 0;
  color: #c6c4bd;
  background: none;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .2s ease;
}
.site-nav button:hover, .site-nav button.is-active { color: var(--gold-light); }
.site-nav button.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.search-bar {
  grid-area: search;
  justify-self: center;
  width: min(100%, 410px);
  height: 39px;
  margin: 0;
  padding: 0 13px;
  gap: 10px;
  border-radius: 12px;
  border-color: rgba(232, 218, 183, .14);
  background: rgba(255,255,255,.035);
}
.search-bar:focus-within { border-color: rgba(226, 179, 78, .55); box-shadow: 0 0 0 3px rgba(214, 167, 71, .08); }
.search-symbol { color: var(--gold-light); font-size: 20px; line-height: 1; }
.search-bar input { min-width: 0; color: #eee9dd; font-size: 11px; }
.search-bar input::placeholder { color: #898a86; }
.search-bar button { color: var(--gold-light); background: none; font-weight: 700; }
.topbar-actions { grid-area: actions; gap: 8px; }
.topbar-actions .icon-button { width: 37px; height: 37px; border-radius: 12px; border-color: rgba(234, 221, 189, .14); color: #c9c4b8; }
.topbar-actions .language-button { min-width: 43px; width: auto; color: var(--gold-light); }
.cart-shortcut { font-size: 17px; color: var(--gold-light) !important; }

.page-padding { width: min(100%, 1420px); margin-inline: auto; padding-inline: clamp(20px, 5.7vw, 82px); }
.view {
  background-color: transparent;
  background-image:
    linear-gradient(132deg, transparent 0 22.8%, rgba(231,190,86,.11) 22.88%, transparent 23.02%),
    linear-gradient(48deg, transparent 0 76.5%, rgba(231,190,86,.075) 76.58%, transparent 76.72%),
    url("assets/naxo-background-lines.svg");
  background-size: 100% 100%, 100% 100%, 100% 960px;
  background-position: center, center, center top;
  background-repeat: no-repeat, no-repeat, repeat-y;
}
.home-intro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: calc(100% - clamp(28px, 4vw, 64px));
  max-width: 1436px;
  min-height: clamp(530px, 50vw, 740px);
  margin: 25px auto 43px;
  padding: clamp(35px, 6.5vw, 88px) clamp(30px, 6.5vw, 94px);
  overflow: hidden;
  border: 1px solid rgba(231, 190, 86, .24);
  border-radius: 27px;
  background-color: #090b0c;
  background-image:
    linear-gradient(270deg, rgba(5,7,8,.91) 0%, rgba(5,7,8,.74) 27%, rgba(5,7,8,.24) 62%, rgba(5,7,8,.12) 100%),
    linear-gradient(0deg, rgba(5,7,8,.60), transparent 48%),
    url("assets/naxo-home-background.webp?v=1");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  box-shadow: 0 28px 95px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.04);
}
.home-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20px;
  border: 1px solid rgba(238, 204, 129, .09);
  border-radius: 19px;
  pointer-events: none;
  animation: heroFrameGlow 7s ease-in-out infinite alternate;
}
.home-intro > * { position: relative; z-index: 1; }
.home-intro .section-kicker { color: #e7bf68; font-size: 12px; letter-spacing: .08em; }
.home-intro h1 {
  max-width: 600px;
  margin: 17px 0 15px;
  color: #f6f3eb;
  font-size: clamp(43px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.055em;
  text-shadow: 0 3px 18px rgba(0,0,0,.78);
  text-wrap: balance;
}
.home-intro .section-kicker,
.home-intro h1,
.home-intro .intro-copy,
.home-intro .hero-actions,
.home-intro .hero-points { animation: heroCopyIn .72s cubic-bezier(.2,.75,.25,1) both; }
.home-intro h1 { animation-delay: .08s; }
.home-intro .intro-copy { animation-delay: .16s; }
.home-intro .hero-actions { animation-delay: .24s; }
.home-intro .hero-points { animation-delay: .32s; }
.home-intro h1 em, .portfolio-heading h1 em { color: #f1d48f; text-shadow: 0 2px 12px rgba(0,0,0,.85),0 0 24px rgba(213,165,72,.14); }
.intro-copy {
  max-width: 470px;
  margin: 0;
  color: #c3c2bd;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 2;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.hero-actions .primary-button, .portfolio-cta .primary-button { min-width: 174px; min-height: 48px; justify-content: center; padding-inline: 20px; }
.hero-secondary {
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid rgba(239, 225, 190, .38);
  border-radius: 12px;
  color: #f3ebd9;
  background: rgba(8,9,10,.55);
  font-size: 12px;
  font-weight: 700;
}
.hero-secondary:hover { background: rgba(255,255,255,.08); border-color: var(--gold-light); }
.hero-points { display: flex; align-items: center; gap: 12px; margin-top: 33px; color: #d4cdbd; font-size: 11px; }
.hero-points i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.category-section { padding-top: 10px; }
.mini-section-heading { margin-bottom: 20px; }
.mini-section-heading h2, .section-heading h2 { margin: 4px 0 0; color: #f0eee7; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.5; }
.mini-section-heading .section-kicker, .section-heading .section-kicker { color: #d5a746; }
.category-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding-bottom: 8px; }
.category-tile {
  min-height: 108px;
  padding: 14px 8px 12px;
  border: 1px solid rgba(223, 207, 170, .1);
  border-radius: 15px;
  color: #ddd7ca;
  background: linear-gradient(145deg, rgba(24,25,23,.78), rgba(11,13,14,.83));
  font-size: 11px;
  font-weight: 650;
  animation: card-enter .5s ease both;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.category-tile:nth-child(2) { animation-delay: 45ms; }
.category-tile:nth-child(3) { animation-delay: 90ms; }
.category-tile:nth-child(4) { animation-delay: 135ms; }
.category-tile:nth-child(5) { animation-delay: 180ms; }
.category-tile:nth-child(6) { animation-delay: 225ms; }
.category-tile:hover { transform: translateY(-3px); border-color: rgba(231,190,86,.42); background: linear-gradient(145deg,rgba(46,38,22,.68),rgba(12,14,14,.9)); }
.category-icon { width: 44px; height: 44px; margin-bottom: 4px; border-radius: 13px; border-color: rgba(228, 186, 93, .28); background: rgba(225, 174, 70, .06); }
.category-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.category-icon svg { animation: icon-drift 4.8s ease-in-out infinite; }
.category-tile:nth-child(even) .category-icon svg { animation-delay: -1.6s; }

.logo-banner-section { padding-top: 35px; }
.logo-banner {
  height: clamp(185px, 23vw, 285px);
  border-color: rgba(231,190,86,.24);
  border-radius: 21px;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(197,135,38,.24), transparent 37%),
    linear-gradient(110deg, #101314 2%, #21190e 55%, #090b0c 100%);
}
.logo-banner::after { background: linear-gradient(270deg,rgba(5,5,5,.9),rgba(5,5,5,.07) 77%), linear-gradient(0deg,rgba(5,5,5,.67),transparent 60%); }
.banner-visual { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 42% 70%, rgba(211,166,82,.18), transparent 37%); }
.banner-visual::before, .banner-visual::after { content: ""; position: absolute; width: 75%; height: 175%; left: 5%; top: -35%; border: 1px solid rgba(232,190,101,.24); border-radius: 50%; transform: rotate(-15deg); box-shadow: 0 0 40px rgba(223,163,62,.05); }
.banner-visual::after { width: 59%; left: 14%; top: -24%; border-color: rgba(231,190,86,.12); transform: rotate(12deg); }
.banner-frame { position: absolute; top: 21%; height: 56%; border: 1px solid rgba(240,205,129,.42); border-radius: 13px; background: linear-gradient(145deg,rgba(26,23,19,.88),rgba(8,10,11,.92)); box-shadow: 0 18px 34px rgba(0,0,0,.55), inset 0 0 28px rgba(211,164,77,.06); }
.banner-frame-one { left: 38%; width: 20%; transform: rotate(-9deg); }
.banner-frame-two { left: 59%; width: 12%; height: 43%; top: 27%; transform: rotate(9deg); }
.banner-light { position: absolute; left: 11%; top: 63%; width: 56%; height: 2px; transform: rotate(-12deg); background: linear-gradient(90deg,transparent,#e7b852,transparent); filter: drop-shadow(0 0 12px #e7b852); animation: bannerGlow 6s ease-in-out infinite alternate; }
.banner-wordmark { position: absolute; left: 46%; top: 49%; transform: translate(-50%,-50%) rotate(-9deg); color: #f4daa0; font: 800 clamp(22px,4vw,48px)/.9 "Plus Jakarta Sans",sans-serif; letter-spacing: .12em; text-shadow: 0 4px 24px rgba(0,0,0,.7); }
.banner-wordmark small { display: block; margin-top: 8px; color: #d4ac58; font: 600 8px "Plus Jakarta Sans",sans-serif; letter-spacing: .6em; text-align: center; }
.banner-caption { right: clamp(22px,5vw,70px); bottom: 50%; transform: translateY(50%); max-width: 35%; }
.banner-caption span { font-size: 11px; }
.banner-caption strong { font-size: clamp(18px,2vw,25px); }
.banner-action { left: 22px; bottom: 20px; width: 41px; height: 41px; border-radius: 12px; }

.section-block, .process-section { padding-top: clamp(54px, 7vw, 92px); }
.mini-section-heading { align-items: flex-end; }
.featured-services { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.featured-services .service-card { min-height: 295px; }
.service-card {
  padding: 15px;
  border-color: rgba(224,198,142,.14);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(26,28,27,.96), rgba(10,12,13,.98));
  box-shadow: 0 16px 35px rgba(0,0,0,.2);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.service-card:hover { transform: translateY(-5px); border-color: rgba(222,177,81,.42); box-shadow: 0 23px 42px rgba(0,0,0,.3); }
.service-visual { height: 142px; margin: -1px -1px 13px; border: 1px solid rgba(231,190,86,.15); border-radius: 13px; background: radial-gradient(ellipse at 50% 30%, rgba(189,129,41,.27), transparent 47%), linear-gradient(145deg,#262016,#111516 62%,#0b0d0e); }
.visual-orbit { width: 76px; height: 76px; border-color: rgba(229,185,71,.34); box-shadow: 0 0 35px rgba(215,168,69,.13); }
.visual-orbit::before { border-color: rgba(229,185,71,.22); }
.service-card-icon { border-radius: 11px; background: rgba(7,9,10,.75); }
.favorite-button { top: 19px; right: 19px; }
.cart-add-button { top: 53px; right: 19px; }
.service-copy { min-height: 82px; }
.service-card h3 { margin-top: 0; color: #f2ede2; font-size: 14px; line-height: 1.55; }
.service-card p { color: #a8aaa6; font-size: 10px; line-height: 1.8; }
.service-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); color: #e9c56e; font-size: 10px; }
.service-card.featured { border-color: rgba(220,174,79,.25); background: linear-gradient(145deg,rgba(39,31,17,.95),rgba(11,13,13,.98) 76%); }
.service-card.featured .service-visual { background: radial-gradient(ellipse at 55% 40%,rgba(204,144,47,.35),transparent 53%),linear-gradient(145deg,#342515,#111515 70%); }
.response-promise, .print-assurance { margin: 24px auto; width: min(calc(100% - 40px), 1260px); padding: 15px 18px; border-radius: 15px; background: linear-gradient(100deg,rgba(195,144,49,.12),rgba(255,255,255,.02)); }
.response-promise strong, .print-assurance strong { font-size: 12px; }
.response-promise small, .print-assurance small { font-size: 10px; }
.process-grid { gap: 17px; }
.process-grid article { padding: 20px; border: 1px solid rgba(224,198,142,.12); border-radius: 17px; background: linear-gradient(145deg,rgba(20,23,23,.88),rgba(10,12,13,.8)); }
.process-grid article > span { color: #c99e4a; }
.process-icon { margin: 22px 0 12px; color: #efd48e; }
.process-grid h3 { font-size: 17px; }
.process-grid p { max-width: 31ch; color: #a9aba7; font-size: 11px; }
.portfolio-teaser { padding-top: clamp(58px,7vw,90px); }
.portfolio-teaser .section-heading { margin-bottom: 24px; }
.portfolio-teaser .section-heading h2 { font-size: clamp(28px,3.6vw,48px); }
.teaser-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 13px; }
.teaser-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(190px,21vw,300px); padding: 18px; overflow: hidden; border: 1px solid rgba(232,208,162,.17); border-radius: 17px; isolation: isolate; }
.teaser-tile::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 35% 45%,rgba(231,183,97,.26),transparent 34%), linear-gradient(135deg,#30271c,#111516 70%); transition: transform .5s ease; }
.teaser-tile:hover::before { transform: scale(1.06); }
.teaser-tile span { color: #e4bd69; font: 700 9px "Plus Jakarta Sans",sans-serif; letter-spacing: .16em; }
.teaser-tile strong { color: #f1e9d9; font-size: clamp(18px,2vw,26px); line-height: 1.6; }
.teaser-tile-brand::before { background: radial-gradient(circle at 67% 43%,#c8873a 0 8%,transparent 8.5%), radial-gradient(ellipse at 66% 60%,rgba(243,202,125,.35),transparent 29%), linear-gradient(145deg,#302417,#141717 68%); }
.teaser-tile-campaign::before { background: radial-gradient(ellipse at 68% 37%,rgba(34,125,159,.74),transparent 30%), radial-gradient(ellipse at 42% 64%,rgba(205,116,48,.55),transparent 24%), linear-gradient(140deg,#131d25,#111111 75%); }
.teaser-tile-product::before { background: radial-gradient(ellipse at 60% 48%,rgba(202,144,76,.42),transparent 33%), linear-gradient(150deg,#33251d,#111314 75%); }
.cta-banner { width: min(calc(100% - 40px),1260px); margin: 65px auto 20px; padding: clamp(22px,3vw,40px); border-color: rgba(224,180,80,.24); border-radius: 20px; background: radial-gradient(ellipse at 10% 50%,rgba(181,129,43,.2),transparent 44%),linear-gradient(120deg,#19160f,#0e1111 64%); }
.cta-banner h2 { font-size: clamp(23px,3vw,36px); }

.page-title { padding-top: clamp(30px, 5vw, 64px); padding-bottom: clamp(24px, 3vw, 38px); }
.page-title h1 { font-size: clamp(35px, 5vw, 60px); line-height: 1.35; }
.page-title p { max-width: 660px; font-size: 14px; line-height: 2; }
.page-title.compact { padding-bottom: 28px; }
.filter-row { gap: 9px; padding-block: 6px 19px; }
.filter-button { padding: 9px 17px; border-radius: 99px; font-size: 11px; }
.filter-button.is-selected { color: #171208; }
.service-category-grid { gap: 13px; }
.service-category-card { border-radius: 16px; background: linear-gradient(145deg,rgba(25,27,27,.95),rgba(10,12,13,.98)); }
.services-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding-bottom: 42px; }
.services-list .service-card { min-height: 275px; }
.services-list .service-card h3 { font-size: 15px; }
.services-list .service-card p { font-size: 11px; }
.service-meta { top: 17px; left: 16px; }

.portfolio-view { padding-bottom: 40px; }
.portfolio-heading { position: relative; max-width: none; padding-block: clamp(40px,7vw,90px) 29px; }
.portfolio-heading::before { content: ""; position: absolute; inset: 0 -10vw 4px; z-index: -1; background: radial-gradient(ellipse at 80% 5%,rgba(162,115,41,.21),transparent 34%),linear-gradient(180deg,rgba(20,18,14,.54),transparent); }
.portfolio-heading h1 { margin: 12px 0; font-size: clamp(42px,6vw,76px); }
.portfolio-heading p { max-width: 630px; }
.portfolio-filters { display: flex; align-items: center; gap: 8px; margin: 19px 0 23px; overflow-x: auto; scrollbar-width: none; }
.portfolio-filters::-webkit-scrollbar { display: none; }
.portfolio-filters > span { margin-inline-end: auto; color: #999a96; font-size: 11px; white-space: nowrap; }
.portfolio-filters button { flex: 0 0 auto; padding: 8px 15px; border: 1px solid rgba(237,222,190,.13); border-radius: 99px; color: #c8c3b8; background: rgba(255,255,255,.025); font-size: 10px; }
.portfolio-filters button:hover, .portfolio-filters button.is-active { border-color: #d9ae56; color: #17130a; background: linear-gradient(135deg,#f3d68b,#c38c2f); }
.work-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; }
.work-card { grid-column: span 4; min-width: 0; overflow: hidden; border: 1px solid rgba(231,218,185,.13); border-radius: 17px; background: linear-gradient(155deg,#161919,#0d1011); transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.work-card:hover { transform: translateY(-4px); border-color: rgba(226,178,78,.4); box-shadow: 0 20px 48px rgba(0,0,0,.32); }
.work-card-wide { grid-column: span 6; }
.work-card[hidden] { display: none; }
.work-art { position: relative; display: block; aspect-ratio: 1.26; overflow: hidden; isolation: isolate; background-color: #171714; }
.work-art::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,.08),transparent 48%,rgba(0,0,0,.35)); }
.work-art-note { position: absolute; z-index: 5; top: 14px; right: 15px; color: rgba(255,243,218,.74); font: 600 8px "Plus Jakarta Sans",sans-serif; letter-spacing: .14em; }
.work-art-caption { position: absolute; z-index: 5; right: 18px; bottom: 15px; color: #fff1d0; font-size: clamp(13px,1.7vw,19px); font-weight: 700; }
.work-card-copy { padding: 17px 18px 18px; }
.work-type { color: #d7ad5d; font-size: 9px; font-weight: 700; }
.work-card-copy h2 { margin: 6px 0 5px; color: #f1eee5; font-size: 17px; line-height: 1.55; }
.work-card-copy p { min-height: 43px; margin: 0; color: #a4a7a3; font-size: 10px; line-height: 1.9; }
.work-card-copy button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 13px; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.09); color: #e9c774; background: none; font-size: 10px; font-weight: 700; text-align: start; }
.work-card-copy button span { font-size: 17px; }
.work-art-beauty { background: radial-gradient(ellipse at 49% 82%,rgba(243,196,147,.38),transparent 36%),linear-gradient(130deg,#39271e,#b48663 47%,#281b16); }
.beauty-sun { position: absolute; width: 59%; aspect-ratio: 1; top: 2%; left: 18%; border: 1px solid rgba(255,235,201,.27); border-radius: 50%; background: radial-gradient(circle at 40% 36%,rgba(247,213,174,.62),rgba(195,136,97,.12) 60%,transparent 61%); box-shadow: 0 0 70px rgba(247,199,146,.2); }
.beauty-bottle { position: absolute; z-index: 2; bottom: 11%; width: 19%; height: 51%; border: 1px solid rgba(249,231,206,.55); border-radius: 17px 17px 9px 9px; background: linear-gradient(110deg,rgba(239,213,185,.85),rgba(151,99,72,.83)); box-shadow: 12px 21px 28px rgba(22,13,9,.33),inset 6px 0 14px rgba(255,255,255,.25); }
.beauty-bottle i { position: absolute; width: 37%; height: 12%; top: -12%; left: 31%; border-radius: 4px 4px 0 0; background: #c4a575; }
.beauty-bottle b { position: absolute; top: 48%; left: 0; right: 0; color: #55412e; font: 600 clamp(6px,.8vw,10px) "Plus Jakarta Sans",sans-serif; letter-spacing: .1em; text-align: center; }
.bottle-one { left: 38%; transform: rotate(-7deg); }.bottle-two { left: 57%; bottom: 17%; height: 40%; transform: rotate(7deg); background: linear-gradient(100deg,#3f3025,#a9825d); }
.work-art-coffee { background: radial-gradient(ellipse at 66% 78%,rgba(206,131,54,.64),transparent 37%),linear-gradient(130deg,#111c21,#21414b 44%,#141414); }
.coffee-orb { position: absolute; width: 49%; aspect-ratio: 1; top: 5%; right: 15%; border-radius: 50%; background: radial-gradient(circle at 42% 39%,#f3d092,#b77a35 53%,rgba(52,31,19,.1) 54%); filter: drop-shadow(0 0 32px rgba(221,166,83,.27)); }
.coffee-cup { position: absolute; z-index: 2; bottom: 7%; left: 38%; width: 25%; height: 41%; border-radius: 9px 9px 24px 24px; background: linear-gradient(100deg,#a86e32,#f3d6a0 47%,#a16c36); box-shadow: 19px 20px 28px rgba(0,0,0,.4); transform: rotate(6deg); }
.coffee-cup::before { content: ""; position: absolute; width: 36%; height: 38%; right: -31%; top: 20%; border: 5px solid #d2a768; border-left: 0; border-radius: 0 50% 50% 0; }
.coffee-cup i { position: absolute; top: -6px; left: 0; width: 100%; height: 13px; border-radius: 50%; background: #332116; }
.coffee-stamp { position: absolute; z-index: 3; top: 19%; left: 10%; color: #f1e0c4; font-size: clamp(9px,1vw,14px); line-height: 1.7; }
.work-art-fragrance { background: radial-gradient(ellipse at 51% 57%,rgba(214,143,70,.46),transparent 42%),linear-gradient(135deg,#1a1110,#39291e 51%,#090d0f); }
.fragrance-panel { position: absolute; inset: 10% 14%; padding: 19px; border: 1px solid rgba(235,196,126,.25); background: linear-gradient(155deg,rgba(194,142,89,.22),rgba(14,15,15,.42)); color: #f1d4a1; }
.fragrance-panel span { font: 600 8px/1.7 "Plus Jakarta Sans",sans-serif; letter-spacing: .16em; }
.fragrance-panel b { position: absolute; top: 32%; left: 12%; color: rgba(247,225,189,.68); font: 500 clamp(15px,2vw,25px)/1.35 "Plus Jakarta Sans",sans-serif; letter-spacing: .09em; }
.fragrance-panel i { position: absolute; bottom: 12%; left: 12%; font: 500 6px "Plus Jakarta Sans",sans-serif; letter-spacing: .2em; }
.fragrance-bottle { position: absolute; z-index: 2; right: 25%; bottom: 10%; width: 27%; height: 40%; border: 1px solid rgba(249,222,166,.57); border-radius: 8px 8px 15px 15px; background: linear-gradient(95deg,rgba(179,118,56,.56),rgba(244,199,124,.47),rgba(126,77,39,.75)); box-shadow: 13px 18px 25px rgba(0,0,0,.44),inset 5px 0 13px rgba(255,255,255,.17); }
.fragrance-bottle::before { content: ""; position: absolute; width: 30%; height: 18%; top: -18%; left: 35%; background: linear-gradient(90deg,#7b542e,#e4bc73,#684223); }
.work-art-motion { background: radial-gradient(ellipse at 72% 33%,rgba(36,176,219,.52),transparent 28%),radial-gradient(ellipse at 42% 65%,rgba(217,89,37,.58),transparent 31%),linear-gradient(135deg,#07151e,#090c12); }
.motion-splash { position: absolute; width: 76%; height: 86%; left: 11%; top: 8%; border: 1px solid rgba(94,213,234,.38); border-radius: 47% 53% 60% 40%; transform: rotate(-25deg); background: linear-gradient(135deg,rgba(18,135,176,.34),rgba(223,99,47,.16)); box-shadow: 0 0 47px rgba(49,170,204,.2); }
.motion-word { position: absolute; z-index: 2; top: 16%; left: 13%; color: #f2f5ed; font: 800 clamp(21px,3vw,36px)/.92 "Plus Jakarta Sans",sans-serif; letter-spacing: -.04em; text-shadow: 0 4px 20px #071019; }
.motion-label { position: absolute; z-index: 2; bottom: 13%; right: 12%; color: #8bd4df; font: 600 7px "Plus Jakarta Sans",sans-serif; letter-spacing: .17em; }
.motion-mark { position: absolute; right: 13%; top: 19%; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(240,236,221,.65); border-radius: 50%; color: white; font-size: 11px; }
.work-art-packaging { background: radial-gradient(ellipse at 48% 65%,rgba(221,179,104,.22),transparent 38%),linear-gradient(140deg,#222017,#3c3021 48%,#141716); }
.package-box { position: absolute; top: 25%; left: 35%; width: 35%; height: 47%; background: linear-gradient(135deg,#eee0bd,#b3a17c); box-shadow: 17px 19px 28px rgba(0,0,0,.36); }
.package-box::before { content: ""; position: absolute; top: -16%; left: 9%; width: 100%; height: 16%; transform: skewY(-19deg); transform-origin: bottom; background: #f5e8ca; }
.package-box::after { content: ""; position: absolute; top: 0; right: -19%; width: 19%; height: 100%; transform: skewY(-34deg); transform-origin: left; background: #9b8966; }
.package-main strong { position: absolute; top: 34%; left: 0; width: 100%; color: #372c1d; font: 800 clamp(17px,2vw,25px) "Cairo",sans-serif; text-align: center; }
.package-main small { position: absolute; bottom: 18%; left: 0; width: 100%; color: #63533a; font: 500 5px "Plus Jakarta Sans",sans-serif; text-align: center; letter-spacing: .08em; }
.package-side { top: 35%; left: 67%; width: 21%; height: 35%; transform: rotate(4deg) scale(.75); background: linear-gradient(125deg,#d4c29a,#827253); }
.package-seal { position: absolute; z-index: 2; top: 24%; left: 40%; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #ede0c0; background: #604b2a; font-size: 13px; }
.package-bottomline { position: absolute; right: 15%; bottom: 13%; color: #f3e5ca; font-size: clamp(10px,1vw,14px); }
.work-art-editorial { background: radial-gradient(ellipse at 43% 47%,rgba(174,134,81,.31),transparent 36%),linear-gradient(125deg,#383127,#151716 64%,#0d1011); }
.editorial-phone { position: absolute; left: 36%; top: 9%; width: 32%; height: 83%; padding: 7px; border: 1px solid rgba(234,211,164,.57); border-radius: 17px; background: #111314; transform: rotate(-8deg); box-shadow: 14px 23px 36px rgba(0,0,0,.5); }
.editorial-screen { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 12px 10px; overflow: hidden; border-radius: 11px; background: linear-gradient(160deg,#bba480,#514b3d 55%,#262a28); }
.editorial-screen::before { content: ""; position: absolute; inset: 28% -20% 18%; background: radial-gradient(ellipse at 50% 50%,rgba(243,222,176,.58),transparent 50%); }
.editorial-screen span, .editorial-screen b { position: relative; z-index: 1; color: #2b2b26; font: 600 6px/1.4 "Plus Jakarta Sans",sans-serif; letter-spacing: .08em; }
.editorial-screen b { font-size: clamp(11px,1.45vw,18px); line-height: 1.08; }
.editorial-screen i { position: absolute; right: 18%; bottom: 16%; width: 35%; height: 29%; border-radius: 48% 48% 35% 35%; background: linear-gradient(95deg,#332b21,#cfb78f,#433523); box-shadow: 9px 11px 14px rgba(0,0,0,.32); }
.editorial-glow { position: absolute; width: 58%; height: 1px; left: 21%; top: 76%; transform: rotate(-15deg); background: #e7c986; box-shadow: 0 0 16px #e7c986; }
.portfolio-cta { display: grid; justify-items: center; margin-top: clamp(48px,7vw,84px); padding: clamp(28px,5vw,58px) 20px; border: 1px solid rgba(221,174,77,.21); border-radius: 20px; text-align: center; background: radial-gradient(ellipse at 50% 0,rgba(193,143,35,.16),transparent 55%),linear-gradient(150deg,#151613,#0c0f10); }
.portfolio-cta h2 { margin: 9px 0 20px; color: #f3ecdc; font-size: clamp(26px,4vw,44px); line-height: 1.4; }
.portfolio-cta h2 em { color: var(--gold-light); font-style: normal; }

.studio-view, .account-view, .client-dashboard, .orders-view, #ordersView { padding-bottom: 45px; }
.studio-contact-card, .account-panel, .workspace-card, .dashboard-card, .contact-card, .order-item { border-color: rgba(226,210,175,.13); background: linear-gradient(145deg,rgba(22,25,25,.97),rgba(11,13,14,.98)); }
.dashboard-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.dashboard-card { border-radius: 17px; }
.dashboard-card strong { color: #f1d48f; }
.workspace-card { margin-top: 15px; padding: 20px; border-radius: 17px; }
.workspace-head h2 { font-size: 19px; }
.dashboard-order-row { min-height: 61px; }
.account-panel { padding: 22px; border-radius: 17px; }
.account-panel-heading h2 { font-size: 18px; }
.cart-list { gap: 11px; }
.cart-item { grid-template-columns: 46px minmax(0,1fr) auto; padding: 13px; border-color: rgba(226,210,175,.11); }
.cart-item-actions { grid-column: auto; min-width: 150px; }
.cart-item-actions .secondary-button { flex: initial; }
.profile-form { max-width: 660px; }
.order-item { padding: 20px; border-radius: 17px; }
.app-footer { width: min(calc(100% - 40px),1260px); margin: 52px auto 0; padding-top: 22px; border-top-color: rgba(224,198,142,.12); text-align: center; }
.app-footer > strong { color: #e4bf6c; letter-spacing: .13em; }
.app-footer p, .app-footer small { max-width: 670px; margin-inline: auto; }
.bottom-nav { width: min(100% - 32px, 480px); border: 1px solid rgba(230,210,166,.16); border-radius: 18px; }
.bottom-nav { display: none; }
.primary-button { color: #161108; background: linear-gradient(135deg,#f4d992,#c69132); box-shadow: 0 9px 26px rgba(188,137,42,.16); }
.primary-button:hover { filter: brightness(1.07); box-shadow: 0 10px 30px rgba(188,137,42,.27); }
.secondary-button { border-color: rgba(221,174,77,.3); }
.modal-sheet { border-color: rgba(221,174,77,.3); background: linear-gradient(160deg,#171918,#0a0c0d 80%); }
.whatsapp-float { background: linear-gradient(135deg,#f0d187,#c69335); color: #1b1408; box-shadow: 0 10px 30px rgba(0,0,0,.4),0 0 28px rgba(211,163,67,.13); }

@keyframes bannerGlow { from { transform: translateX(-4%) rotate(-12deg); opacity:.55; } to { transform: translateX(8%) rotate(-12deg); opacity:1; } }
@keyframes heroCopyIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroFrameGlow { from { border-color: rgba(238,204,129,.075); box-shadow: inset 0 0 0 rgba(230,184,74,0); } to { border-color: rgba(238,204,129,.19); box-shadow: inset 0 0 32px rgba(230,184,74,.035); } }
@media (min-width: 1200px) {
  .topbar { grid-template-columns: minmax(130px,auto) minmax(320px,1fr) minmax(185px,235px) auto; grid-template-areas: "brand nav search actions"; column-gap: 25px; }
  .site-nav { justify-content: center; }
  .search-bar { position: static; grid-area: search; width: 100%; height: 36px; }
  .topbar-actions { margin: 0; }
}
@media (min-width: 1500px) {
  .home-intro { min-height: 740px; }
  .home-intro h1 { font-size: 58px; }
}
@media (max-width: 1199px) and (min-width: 851px) {
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "brand nav actions" "search search search"; column-gap: 19px; }
  .site-nav { gap: 17px; }
  .topbar-actions { margin: 0; }
  .search-bar { position: static; grid-area: search; }
  .home-intro { min-height: clamp(510px,58vw,670px); background-position: center,center,47% center; }
  .home-intro h1 { max-width: 520px; font-size: clamp(43px,4.8vw,58px); }
  .services-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .featured-services { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .work-card { grid-column: span 6; }
  .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 850px) {
  .app-shell { padding-bottom: calc(86px + env(safe-area-inset-bottom,0px)); }
  .topbar { display: flex; flex-wrap: wrap; gap: 8px 11px; min-height: 0; padding: max(10px,env(safe-area-inset-top,0px)) clamp(14px,4vw,24px) 11px; }
  .menu-button { display: grid; order: 0; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 11px; }
  .brand { order: 1; margin-inline-end: auto; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-copy strong { font-size: 16px; }
  .site-nav { display: none; }
  .topbar-actions { order: 2; gap: 5px; }
  .topbar-actions .icon-button { width: 33px; height: 34px; border-radius: 10px; }
  .search-bar { order: 3; width: 100%; height: 40px; margin: 2px 0 0; }
  .topbar-actions #installButton { display: none !important; }
  .page-padding { padding-inline: clamp(18px,5vw,34px); }
  .home-intro { width: calc(100% - 28px); min-height: 490px; margin: 13px auto 30px; padding: 44px clamp(22px,6vw,45px); border-radius: 22px; background-position: center,center,42% center; }
  .home-intro::before { inset: 10px; border-radius: 15px; }
  .home-intro h1 { max-width: 550px; font-size: clamp(37px,8vw,59px); }
  .intro-copy { max-width: 430px; font-size: 13px; }
  .hero-points { margin-top: 24px; font-size: 9px; }
  .category-rail { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .category-tile { min-height: 91px; font-size: 10px; }
  .category-icon { width: 41px; height: 41px; }
  .logo-banner-section { padding-top: 24px; }
  .featured-services { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .featured-services .service-card { min-height: 255px; }
  .service-visual { height: 120px; }
  .services-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .services-list .service-card { min-height: 250px; }
  .teaser-grid { gap: 9px; }
  .teaser-tile { min-height: 185px; padding: 13px; }
  .teaser-tile strong { font-size: 17px; }
  .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-card:last-child { grid-column: 1/-1; }
  .work-grid { gap: 11px; }
  .work-card { grid-column: span 6; }
  .work-card-copy { padding: 13px; }
  .work-card-copy h2 { font-size: 14px; }
  .work-card-copy p { min-height: 54px; }
  .work-art { aspect-ratio: 1.15; }
  .portfolio-heading { padding-top: 36px; }
  .bottom-nav { width: 100%; max-width: 650px; border-radius: 17px 17px 0 0; border-bottom: 0; }
  .bottom-nav { display: grid; }
  .bottom-nav [data-view="contact"] { display: none; }
}
@media (max-width: 560px) {
  .home-intro { min-height: 470px; padding: 34px 23px 31px; background-image: linear-gradient(270deg,rgba(5,7,8,.97) 0%,rgba(5,7,8,.93) 32%,rgba(5,7,8,.8) 64%,rgba(5,7,8,.66) 100%),linear-gradient(0deg,rgba(5,7,8,.72),transparent 57%),url("assets/naxo-home-background.webp?v=1"); background-position: center,center,43% center; }
  .home-intro .section-kicker { font-size: 9px; }
  .home-intro h1 { max-width: 430px; margin: 14px 0 10px; font-size: clamp(31px,8.2vw,39px); line-height: 1.34; }
  .intro-copy { max-width: 34ch; font-size: 12px; line-height: 1.9; }
  .hero-actions { gap: 8px; margin-top: 21px; }
  .hero-actions .primary-button,.hero-secondary { min-height: 42px; padding: 8px 13px; font-size: 10px; }
  .hero-actions .primary-button { min-width: 142px; }
  .hero-points { flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: 8px; }
  .mini-section-heading h2, .section-heading h2 { font-size: 20px; }
  .mini-section-heading .text-button { max-width: 104px; font-size: 9px; }
  .category-section { padding-top: 0; }
  .category-tile { min-height: 83px; font-size: 9px; }
  .category-icon { width: 38px; height: 38px; }
  .logo-banner { height: 170px; }
  .banner-caption { max-width: 48%; right: 14px; }
  .banner-caption span { font-size: 8px; }
  .banner-caption strong { font-size: 14px; }
  .banner-frame-one { left: 34%; width: 25%; }
  .banner-frame-two { left: 61%; width: 16%; }
  .banner-wordmark { left: 46%; font-size: 23px; }
  .featured-services { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .featured-services .service-card { min-height: 228px; padding: 9px; }
  .service-visual { height: 98px; margin-bottom: 10px; }
  .service-card h3 { font-size: 12px; }
  .service-card p { font-size: 9px; }
  .service-copy { min-height: 74px; }
  .services-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .services-list .service-card { min-height: 240px; padding: 9px; }
  .services-list .service-card h3 { font-size: 12px; }
  .services-list .service-card p { max-width: 100%; font-size: 9px; }
  .favorite-button { top: 13px; right: 13px; }
  .cart-add-button { top: 46px; right: 13px; }
  .teaser-grid { grid-template-columns: 1fr 1fr; }
  .teaser-tile { min-height: 162px; }
  .teaser-tile:first-child { grid-row: span 2; min-height: 333px; }
  .teaser-tile strong { font-size: 15px; }
  .process-grid { grid-template-columns: 1fr; gap: 8px; }
  .process-grid article { display: grid; grid-template-columns: 38px 40px 1fr; align-items: center; gap: 7px; min-height: 72px; padding: 10px 12px; }
  .process-icon { grid-row: span 2; margin: 0; }
  .process-grid article h3 { align-self: end; margin: 0; font-size: 13px; }
  .process-grid article p { align-self: start; grid-column: 3; font-size: 9px; }
  .cta-banner { align-items: flex-start; flex-direction: column; gap: 15px; }
  .cta-banner .primary-button { width: 100%; justify-content: center; }
  .page-title h1 { font-size: 34px; }
  .page-title p { font-size: 12px; }
  .portfolio-heading { padding-top: 27px; }
  .portfolio-heading h1 { font-size: clamp(35px,10vw,48px); }
  .portfolio-filters { margin-top: 11px; }
  .portfolio-filters > span { display: none; }
  .portfolio-filters button { padding: 7px 12px; }
  .work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .work-card, .work-card-wide { grid-column: span 1; border-radius: 13px; }
  .work-card-wide .work-art { aspect-ratio: .94; }
  .work-art { aspect-ratio: .94; }
  .work-art-note { top: 9px; right: 9px; font-size: 6px; }
  .work-art-caption { right: 10px; bottom: 9px; font-size: 12px; }
  .work-card-copy { padding: 10px; }
  .work-type { font-size: 7px; }
  .work-card-copy h2 { margin: 5px 0; font-size: 12px; }
  .work-card-copy p { min-height: 65px; font-size: 8px; }
  .work-card-copy button { margin-top: 8px; padding-top: 8px; font-size: 8px; }
  .work-card-copy button span { font-size: 13px; }
  .beauty-bottle b { font-size: 5px; }
  .fragrance-panel { padding: 10px; }
  .package-seal { width: 17px; height: 17px; font-size: 9px; }
  .package-bottomline { right: 8%; font-size: 8px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-card:last-child { grid-column: auto; }
  .cart-item { grid-template-columns: 39px minmax(0,1fr); }
  .cart-item-actions { grid-column: 1/-1; }
  .account-panel { padding: 14px; }
  .portfolio-cta { padding: 28px 16px; }
  .portfolio-cta .primary-button { width: 100%; }
  .bottom-nav { gap: 1px; padding-inline: 7px; }
  .bottom-nav .nav-item { font-size: 8px; }
}

/* Keep the hero copy over the dark side of the artwork in both language directions. */
html[lang="en"] .home-intro {
  background-image:
    linear-gradient(90deg, rgba(5,7,8,.92) 0%, rgba(5,7,8,.9) 38%, rgba(5,7,8,.72) 66%, rgba(5,7,8,.16) 100%),
    linear-gradient(0deg, rgba(5,7,8,.66), transparent 57%),
    url("assets/naxo-home-background.webp?v=1");
}
@media (max-width: 560px) {
  html[lang="en"] .home-intro {
    background-image:
      linear-gradient(90deg, rgba(5,7,8,.97) 0%, rgba(5,7,8,.93) 32%, rgba(5,7,8,.8) 64%, rgba(5,7,8,.66) 100%),
      linear-gradient(0deg, rgba(5,7,8,.72), transparent 57%),
      url("assets/naxo-home-background.webp?v=1");
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Shared category cards: balanced rows on desktop, touch-friendly cards on phones. */
.category-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.category-tile { min-height: 116px; border-color: rgba(230, 184, 83, .2); box-shadow: inset 0 1px rgba(251, 215, 141, .055), 0 10px 24px rgba(0,0,0,.14); }
.category-tile:nth-child(7) { animation-delay: 270ms; }
.category-tile:nth-child(8) { animation-delay: 315ms; }
.category-tile::before, .service-card::before, .service-category-card::before, .work-card::before, .studio-jump::before, .teaser-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 24%, rgba(243,194,87,.1) 48%, transparent 67%);
  transform: translateX(-115%); transition: transform .8s ease, opacity .24s ease;
}
.category-tile, .service-card, .service-category-card, .work-card, .studio-jump, .teaser-tile { isolation: isolate; }
.category-tile > *, .service-card > *, .service-category-card > *, .work-card > *, .studio-jump > *, .teaser-tile > * { position: relative; z-index: 1; }
.category-tile:hover::before, .service-card:hover::before, .service-category-card:hover::before, .work-card:hover::before, .studio-jump:hover::before, .teaser-tile:hover::before { opacity: 1; transform: translateX(115%); }
.category-icon { box-shadow: 0 0 0 4px rgba(228,186,93,.025), 0 7px 20px rgba(218,159,53,.08); }
.service-cards-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 7px 0 18px; }
.service-cards-heading h2 { margin: 5px 0 0; color: #f0eee7; font-size: clamp(20px, 2.2vw, 29px); line-height: 1.4; }
#serviceCardsMode .filter-row { margin-bottom: 18px; }
#serviceCardsMode .services-list { padding-bottom: 16px; }
.service-category-card { position: relative; overflow: hidden; border-color: rgba(230,184,83,.2); box-shadow: inset 0 1px rgba(251,215,141,.055), 0 10px 24px rgba(0,0,0,.14); transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.service-category-card:hover { transform: translateY(-4px); border-color: rgba(238,191,93,.56); box-shadow: 0 18px 34px rgba(0,0,0,.3),0 0 22px rgba(219,167,63,.08); }
.service-card { border-color: rgba(230,184,83,.2); box-shadow: inset 0 1px rgba(251,215,141,.045), 0 10px 25px rgba(0,0,0,.2); }
.service-card:hover { border-color: rgba(238,191,93,.56); box-shadow: 0 20px 38px rgba(0,0,0,.34),0 0 22px rgba(219,167,63,.08); }
.service-card::before, .service-category-card::before { border-radius: inherit; }

.platform-stats { display: block; padding-top: clamp(34px, 5vw, 64px); padding-bottom: clamp(34px, 5vw, 64px); }
.platform-stats .section-heading { align-items: end; }
.platform-stats .section-heading h2 { max-width: 18ch; }
.stats-live { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid rgba(224,184,91,.2); border-radius: 999px; color: #cfbf9b; background: rgba(16,17,16,.68); font-size: 10px; white-space: nowrap; }
.stats-live i { width: 7px; height: 7px; border-radius: 50%; background: #dcba66; box-shadow: 0 0 0 4px rgba(220,186,102,.1),0 0 12px rgba(220,186,102,.45); animation: stats-dot-pulse 2.5s ease-in-out infinite; }
.stats-live.is-offline i { animation: none; opacity: .52; box-shadow: 0 0 0 4px rgba(220,186,102,.055); }
.stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 21px; }
.stat-card { position: relative; overflow: hidden; min-height: 166px; padding: 20px 21px; border: 1px solid rgba(230,184,83,.19); border-radius: 17px; background: linear-gradient(145deg,rgba(30,27,21,.86),rgba(10,13,14,.97) 72%); box-shadow: inset 0 1px rgba(252,219,145,.055),0 12px 30px rgba(0,0,0,.18); }
.stat-card::after { content: ""; position: absolute; inset: auto -24px -34px auto; width: 116px; height: 116px; border: 1px solid rgba(228,183,78,.17); border-radius: 50%; box-shadow: 0 0 30px rgba(213,163,58,.07); }
.stat-icon { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 14px; border: 1px solid rgba(230,184,83,.3); border-radius: 12px; color: #f0cb74; background: rgba(212,159,57,.075); font-size: 17px; }
.stat-value { display: block; color: #f3ce79; font: 800 clamp(27px,3.1vw,39px)/1.1 "Plus Jakarta Sans",sans-serif; letter-spacing: -.04em; }
.stat-card h3 { margin: 7px 0 3px; color: #eee8da; font-size: 13px; }
.stat-card p { margin: 0; color: #9e9d95; font-size: 10px; line-height: 1.75; }
.growth-targets { display: grid; grid-template-columns: minmax(180px,.74fr) repeat(2,minmax(0,1fr)); align-items: stretch; gap: 12px; margin-top: 14px; }
.growth-targets-heading { align-self: center; padding: 8px 12px; }
.growth-targets-heading h3 { margin: 5px 0; color: #eee8da; font-size: 17px; }
.growth-targets-heading p { margin: 0; color: #9e9d95; font-size: 10px; line-height: 1.7; }
.growth-target-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px; border: 1px solid rgba(230,184,83,.15); border-radius: 15px; background: linear-gradient(145deg,rgba(19,21,20,.88),rgba(9,12,13,.96)); }
.growth-target-icon { display: grid; place-items: center; flex: 0 0 35px; width: 35px; height: 35px; border: 1px solid rgba(230,184,83,.24); border-radius: 11px; color: #e6c373; background: rgba(212,159,57,.06); }
.growth-target-value { color: #f0ca75; font: 750 clamp(16px,1.9vw,23px)/1.2 "Plus Jakarta Sans",sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.growth-target-card h4 { margin: 4px 0 2px; color: #e6e1d6; font-size: 11px; }
.growth-target-card p { margin: 0; color: #92938e; font-size: 9px; }
.growth-target-tag { align-self: flex-start; margin-inline-start: auto; padding: 5px 7px; border: 1px solid rgba(230,184,83,.16); border-radius: 999px; color: #c7ab6b; font-size: 8px; white-space: nowrap; }
@keyframes stats-dot-pulse { 50% { box-shadow: 0 0 0 7px rgba(220,186,102,.035),0 0 17px rgba(220,186,102,.68); opacity: .78; } }

.naxo-reveal { opacity: 0; transform: translateY(17px); transition: opacity .62s ease, transform .62s cubic-bezier(.2,.7,.2,1); transition-delay: var(--naxo-delay,0ms); }
.naxo-reveal.naxo-visible { opacity: 1; transform: translateY(0); }
.stats-grid .stat-card, .growth-target-card, .studio-jump { transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .62s ease; }
.stats-grid .stat-card:hover, .growth-target-card:hover, .studio-jump:hover { transform: translateY(-3px); border-color: rgba(232,187,87,.38); box-shadow: 0 15px 30px rgba(0,0,0,.24),0 0 20px rgba(221,170,63,.06); }

@media (max-width: 900px) {
  .category-rail { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
  .category-tile { min-height: 101px; }
  .growth-targets { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .growth-targets-heading { grid-column: 1/-1; padding: 2px 1px; }
}
@media (max-width: 620px) {
  .category-rail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .category-tile { min-height: 88px; padding: 11px 7px 10px; }
  .category-icon { width: 39px; height: 39px; }
  .service-cards-heading { align-items: start; flex-direction: column; gap: 8px; }
  .service-cards-heading .text-button { align-self: flex-start; }
  .stats-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 16px; }
  .stat-card { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; column-gap: 12px; min-height: 88px; padding: 13px; }
  .stat-icon { grid-row: span 2; margin: 0; }
  .stat-value { align-self: end; font-size: 26px; }
  .stat-card h3 { margin: 2px 0 0; font-size: 12px; }
  .stat-card p { grid-column: 2; }
  .growth-targets { grid-template-columns: 1fr; gap: 8px; }
  .growth-target-card { min-height: 71px; }
  .growth-targets-heading h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .naxo-reveal, .naxo-reveal.naxo-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .stats-live i { animation: none !important; }
}

/* Cinematic NAXO home hero */
.home-intro {
  --hero-parallax-x: 0px;
  --hero-parallax-y: 0px;
  width: 100%;
  max-width: none;
  min-height: clamp(560px, 51vw, 760px);
  margin: 0 auto 48px;
  padding: clamp(48px, 7.5vw, 112px) clamp(26px, 7.2vw, 124px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #08090b;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 28px 95px rgba(0,0,0,.38);
}
.home-intro::before {
  z-index: 2;
  inset: 18px;
  border-color: rgba(238,204,129,.12);
  border-radius: 3px;
  box-shadow: inset 0 0 32px rgba(230,184,74,.025);
}
.home-intro > .hero-art {
  position: absolute;
  z-index: 0;
  inset: -17px;
  overflow: hidden;
  pointer-events: none;
  background: #090a0c url("assets/naxo-hero-cinematic.webp?v=1") 50% 49% / cover no-repeat;
  transform: translate3d(var(--hero-parallax-x), var(--hero-parallax-y), 0) scale(1.035);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.hero-art::before,
.hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero-art::before { background: linear-gradient(270deg,rgba(5,7,8,.98) 0%,rgba(5,7,8,.9) 23%,rgba(5,7,8,.48) 48%,rgba(5,7,8,.06) 76%); }
.hero-art::after {
  inset: -40% -60%;
  background: linear-gradient(112deg,transparent 43%,rgba(255,225,158,.015) 47%,rgba(255,232,179,.09) 50%,rgba(255,217,133,.02) 53%,transparent 58%);
  mix-blend-mode: screen;
  transform: translate3d(-48%,0,0) rotate(8deg);
  animation: heroReflection 15s cubic-bezier(.42,0,.58,1) infinite;
}
.home-intro > :not(.hero-art) { position: relative; z-index: 3; }
.home-intro .section-kicker,
.home-intro h1,
.home-intro .intro-copy,
.home-intro .hero-actions,
.home-intro .hero-points { animation: none; }
.hero-orbit {
  position: absolute;
  display: block;
  border: 1px solid rgba(240,196,103,.17);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(231,179,73,.045);
  opacity: .64;
  animation: heroOrbitDrift 20s ease-in-out infinite alternate;
}
.hero-orbit-one { top: -53%; left: 10%; width: 37%; height: 165%; transform: rotate(-24deg); border-right-color: rgba(255,220,137,.33); }
.hero-orbit-two { top: -43%; left: 48%; width: 48%; height: 152%; transform: rotate(24deg); border-left-color: transparent; animation-delay: -9s; opacity: .46; }
.hero-ribbon {
  position: absolute;
  display: block;
  width: 82%;
  height: 19%;
  border-top: 1px solid rgba(255,221,142,.5);
  border-radius: 50%;
  filter: drop-shadow(0 0 7px rgba(244,188,74,.19));
  animation: heroRibbonTravel 16s ease-in-out infinite alternate;
}
.hero-ribbon-one { top: 53%; left: -9%; transform: rotate(-9deg); }
.hero-ribbon-two { top: 67%; left: 25%; width: 74%; height: 14%; transform: rotate(-4deg); opacity: .58; animation-delay: -8s; }
.hero-particle {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f5d287;
  box-shadow: 0 0 9px 2px rgba(236,181,74,.44);
  opacity: .54;
  animation: heroParticleFloat 8s ease-in-out infinite alternate;
}
.hero-particle-one { top: 24%; left: 18%; }
.hero-particle-two { top: 39%; left: 73%; animation-delay: -3s; }
.hero-particle-three { top: 76%; left: 17%; width: 2px; height: 2px; animation-delay: -5s; }
.hero-particle-four { top: 21%; left: 87%; width: 2px; height: 2px; animation-delay: -2s; }
.hero-particle-five { top: 84%; left: 64%; animation-delay: -6s; }
.hero-particle-six { top: 13%; left: 55%; width: 2px; height: 2px; animation-delay: -4s; }
.brand-mark { position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 9px 22px rgba(0,0,0,.35), inset 0 1px rgba(255,230,171,.13); }
.brand-mark img { position: relative; z-index: 1; }
.brand-mark::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -70% -30%;
  pointer-events: none;
  background: linear-gradient(112deg,transparent 44%,rgba(255,239,193,.08) 49%,rgba(255,250,229,.48) 51%,rgba(243,197,98,.09) 54%,transparent 60%);
  transform: translateX(-115%);
  animation: heroReflection 13s ease-in-out infinite;
}
.brand-copy strong { color: #efd28d; background: linear-gradient(100deg,#c99a3d 0%,#fff0bd 24%,#d0a346 49%,#fae4a7 70%,#bd8731 100%); background-size: 180% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 5px rgba(0,0,0,.65)); animation: brandGoldShift 9s ease-in-out infinite alternate; }
@keyframes heroReflection {
  0%, 18% { transform: translate3d(-48%,0,0) rotate(8deg); }
  62%, 100% { transform: translate3d(48%,0,0) rotate(8deg); }
}
@keyframes heroOrbitDrift { from { translate: 0 -3px; } to { translate: 0 8px; } }
@keyframes heroRibbonTravel { from { translate: -1% 2px; opacity: .42; } to { translate: 1% -5px; opacity: .72; } }
@keyframes heroParticleFloat { from { translate: 0 0; opacity: .28; } to { translate: 3px -10px; opacity: .65; } }
@keyframes brandGoldShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

html[dir="ltr"] .hero-art::before { background: linear-gradient(90deg,rgba(5,7,8,.98) 0%,rgba(5,7,8,.9) 23%,rgba(5,7,8,.48) 48%,rgba(5,7,8,.06) 76%); }
html[lang="en"] .home-intro { background-image: none; background-color: #08090b; }
html[dir="ltr"] .home-intro > .hero-art { background-position: 24% 49%; }
html[dir="rtl"] .home-intro > .hero-art { background-position: 76% 49%; }
@media (max-width: 850px) {
  .home-intro { min-height: 540px; margin: 10px auto 32px; padding: 40px clamp(22px,6vw,48px); border-radius: 18px; width: calc(100% - 20px); }
  .home-intro::before { inset: 9px; border-radius: 12px; }
  .home-intro > .hero-art { transform: scale(1.035); }
  .hero-ribbon { opacity: .28; animation-duration: 24s; }
  .hero-ribbon-two { opacity: .2; }
  .hero-orbit { opacity: .35; }
  .hero-particle { opacity: .26; }
  html[dir="rtl"] .hero-art::before { background: linear-gradient(270deg,rgba(5,7,8,.99) 0%,rgba(5,7,8,.95) 37%,rgba(5,7,8,.78) 68%,rgba(5,7,8,.48) 100%),linear-gradient(0deg,rgba(5,7,8,.46),transparent 66%); }
  html[dir="ltr"] .hero-art::before { background: linear-gradient(90deg,rgba(5,7,8,.99) 0%,rgba(5,7,8,.95) 37%,rgba(5,7,8,.78) 68%,rgba(5,7,8,.48) 100%),linear-gradient(0deg,rgba(5,7,8,.46),transparent 66%); }
  html[dir="ltr"] .home-intro > .hero-art { background-position: 36% 50%; }
  html[dir="rtl"] .home-intro > .hero-art { background-position: 64% 50%; }
}
@media (max-width: 560px) {
  .home-intro { min-height: 500px; padding: 34px 23px 31px; background-image: none; }
  .home-intro .section-kicker { font-size: 9px; }
  .home-intro h1 { max-width: 430px; margin: 14px 0 10px; font-size: clamp(31px,8.2vw,39px); line-height: 1.34; }
  .intro-copy { max-width: 34ch; font-size: 12px; line-height: 1.9; }
  .hero-actions { gap: 8px; margin-top: 21px; }
  .hero-actions .primary-button,.hero-secondary { min-height: 42px; padding: 8px 13px; font-size: 10px; }
  .hero-actions .primary-button { min-width: 142px; }
  .hero-points { flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: 8px; }
}
@media (max-width: 850px) and (prefers-reduced-motion: no-preference) {
  .hero-orbit, .hero-ribbon, .hero-particle { animation-duration: 26s; }
}
@media (prefers-reduced-motion: reduce) {
  .home-intro > .hero-art { transform: none !important; transition: none !important; will-change: auto; }
  .hero-art::after, .hero-orbit, .hero-ribbon, .hero-particle, .brand-mark::after, .brand-copy strong { animation: none !important; }
}