:root {
  color-scheme: dark;
  --bg: #080b0d;
  --surface: #101517;
  --surface-2: #151b1d;
  --surface-3: #1b2224;
  --line: rgba(240, 204, 115, .18);
  --line-soft: rgba(221, 235, 232, .1);
  --gold: #e5b947;
  --gold-light: #f8dfa0;
  --text: #f1f3ef;
  --muted: #9da8a8;
  --teal: #40d4b6;
  --danger: #ea7b85;
  --radius: 22px;
  font-family: "Cairo", system-ui, sans-serif;
  background: var(--bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 78% 3%, rgba(118, 92, 31, .14), transparent 22rem), var(--bg); color: var(--text); font-size: 15px; line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
html[lang="en"] body { font-family: "Plus Jakarta Sans", "Cairo", system-ui, sans-serif; line-height: 1.65; }
.language-button { width: auto !important; min-width: 42px; padding-inline: 8px; color: var(--gold-light); font-size: 10px; font-weight: 800; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell { width: min(100%, 620px); min-height: 100dvh; margin: 0 auto; position: relative; overflow: hidden; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.topbar { min-height: 74px; display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; position: sticky; top: 0; z-index: 20; background: rgba(8, 11, 13, .84); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.03); }
.brand { display: inline-flex; align-items: center; gap: 9px; direction: ltr; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(229, 185, 71, .45); border-radius: 10px; background: linear-gradient(140deg, rgba(229,185,71,.16), rgba(229,185,71,.03)); box-shadow: 0 0 25px rgba(229,185,71,.1); }
.brand-mark svg { width: 28px; height: 28px; }
.brand-mark { overflow: hidden; border-radius: 50%; padding: 0; background: #080808; }
.brand-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.brand-copy { display: grid; grid-template-columns: auto; line-height: .9; letter-spacing: .17em; }
.brand-copy strong { font: 800 17px/1 "Plus Jakarta Sans", sans-serif; color: var(--gold-light); }
.brand-copy small { font: 600 7px/1 "Plus Jakarta Sans", sans-serif; color: var(--gold); letter-spacing: .57em; margin: 4px 0 0 4px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); color: var(--muted); width: 39px; height: 39px; border-radius: 13px; display: grid; place-items: center; position: relative; }
.icon-button:hover { color: var(--gold-light); border-color: var(--line); }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.notification-dot { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; position: absolute; right: 10px; top: 8px; box-shadow: 0 0 8px var(--gold); }

.page-padding { padding-left: 20px; padding-right: 20px; }
.view { display: none; animation: viewIn .32s ease both; }
.view.is-active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-section { position: relative; min-height: 458px; display: flex; align-items: center; isolation: isolate; overflow: hidden; padding-top: 34px; padding-bottom: 38px; }
.hero-section::before { content: ""; position: absolute; inset: 24px 12px auto; height: 300px; border: 1px solid rgba(229, 185, 71, .1); border-radius: 50%; transform: rotate(-14deg); z-index: -1; }
.hero-content { position: relative; z-index: 3; width: 70%; }
.eyebrow, .section-kicker { color: var(--gold); font-weight: 700; letter-spacing: .04em; font-size: 11px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(229,185,71,.24); padding: 5px 10px; border-radius: 99px; background: rgba(229,185,71,.05); }
.eyebrow-star { font-size: 13px; color: var(--gold-light); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.04em; line-height: 1.22; }
.hero-content h1 { font-size: clamp(38px, 10vw, 60px); margin: 18px 0 14px; font-weight: 800; }
h1 em, h2 em { font-style: normal; color: var(--gold-light); }
.hero-description { color: var(--muted); max-width: 300px; font-size: 13px; line-height: 1.9; margin-bottom: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.primary-button, .secondary-button, .ghost-button { border-radius: 13px; border: 1px solid transparent; min-height: 47px; padding: 10px 18px; color: var(--bg); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; transition: .2s ease; }
.primary-button { background: linear-gradient(135deg, #f6d77e, #ca942c); box-shadow: 0 12px 25px rgba(202,148,44,.16); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(202,148,44,.25); }
.primary-button span, .secondary-button span, .ghost-button span, .text-button span { font-size: 18px; line-height: 1; direction: ltr; }
.ghost-button { background: transparent; color: var(--gold-light); border-color: rgba(229,185,71,.24); }
.ghost-button:hover, .secondary-button:hover { background: rgba(229,185,71,.08); border-color: var(--line); }
.secondary-button { color: var(--gold-light); border-color: rgba(229,185,71,.4); background: rgba(229,185,71,.05); }
.full-width { width: 100%; }
.hero-trust { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; margin-top: 27px; white-space: nowrap; }
.avatars { display: inline-flex; direction: ltr; }
.avatars i { font-style: normal; width: 22px; height: 22px; border: 2px solid var(--bg); border-radius: 50%; display: grid; place-items: center; color: #15110a; background: #d8b454; margin-left: -6px; font-size: 9px; font-weight: 800; }
.avatars i:nth-child(2) { background: #c38c62; }.avatars i:nth-child(3) { background: #839e92; }
.trust-stars { color: var(--gold); letter-spacing: 1px; margin-right: auto; }
.hero-orbit { position: absolute; width: 370px; height: 370px; right: -160px; top: 50px; z-index: 1; opacity: .95; }
.orbit-ring { position: absolute; border: 1px solid rgba(229,185,71,.19); border-radius: 50%; transform: rotate(30deg) skewX(-5deg); }
.ring-one { width: 310px; height: 180px; top: 88px; right: 0; }.ring-two { width: 280px; height: 280px; top: 30px; right: 25px; border-color: rgba(255,255,255,.07); transform: rotate(-25deg); }
.hero-emblem { width: 156px; height: 190px; position: absolute; top: 97px; right: 75px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(155deg, rgba(29,31,26,.95), rgba(10,13,14,.65)); border: 1px solid rgba(229,185,71,.28); box-shadow: inset 0 0 45px rgba(229,185,71,.08), 0 0 60px rgba(229,185,71,.08); clip-path: polygon(50% 0, 100% 18%, 88% 100%, 12% 100%, 0 18%); }
.hero-emblem span { color: var(--gold-light); font-size: 21px; }.hero-emblem strong { color: #eabf58; font: 800 104px/.83 "Plus Jakarta Sans", sans-serif; text-shadow: 0 0 26px rgba(245,205,106,.25); }.hero-emblem small { color: rgba(245,223,160,.75); font: 600 7px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .22em; text-align: center; }
.float-chip { position: absolute; border: 1px solid rgba(229,185,71,.3); background: rgba(8,11,13,.7); padding: 4px 7px; border-radius: 5px; color: var(--gold-light); font: 600 8px "Plus Jakarta Sans", sans-serif; letter-spacing: .18em; }.chip-one { right: 28px; top: 55px; }.chip-two { left: 12px; bottom: 58px; }
.glow-one, .glow-two { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; z-index: -2; }.glow-one { width: 110px; height: 110px; background: rgba(215,161,51,.16); right: 80px; top: 125px; }.glow-two { width: 80px; height: 80px; background: rgba(64,212,182,.1); left: -35px; bottom: 60px; }

.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding-top: 17px; padding-bottom: 17px; }
.stats-strip div { text-align: center; border-left: 1px solid var(--line-soft); }.stats-strip div:last-child { border-left: 0; }.stats-strip strong { display: block; color: var(--gold-light); font: 800 21px/1.2 "Plus Jakarta Sans", sans-serif; }.stats-strip span { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.section-block, .process-section { padding-top: 54px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 22px; }.section-heading h2 { font-size: 28px; margin: 7px 0 0; }.text-button { background: none; border: 0; padding: 2px 0; color: var(--gold-light); font-size: 11px; font-weight: 700; white-space: nowrap; }.text-button span { margin-right: 5px; }
.featured-services { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.service-card { min-height: 180px; border: 1px solid var(--line-soft); border-radius: 18px; padding: 17px 15px; position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(27,35,36,.95), rgba(12,16,17,.95)); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }.service-card::after { content: ""; position: absolute; width: 100px; height: 100px; border: 1px solid rgba(229,185,71,.15); border-radius: 50%; top: -48px; right: -25px; }.service-card.featured { background: linear-gradient(150deg, rgba(41,34,20,.95), rgba(16,18,17,.95)); border-color: rgba(229,185,71,.3); }.service-card.large { grid-column: span 2; min-height: 145px; }.service-card-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(229,185,71,.35); background: rgba(229,185,71,.07); color: var(--gold-light); font-size: 17px; position: relative; z-index: 1; }.service-card h3 { font-size: 16px; margin: 12px 0 3px; }.service-card p { color: var(--muted); font-size: 11px; line-height: 1.75; margin: 0; }.service-link { color: var(--gold-light); font-size: 10px; font-weight: 700; margin-top: 14px; }.service-link span { font-size: 15px; vertical-align: -1px; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.process-grid article { border-top: 1px solid var(--line); padding-top: 12px; position: relative; }.process-grid article > span { color: var(--gold); font: 700 10px "Plus Jakarta Sans", sans-serif; }.process-icon { color: var(--gold-light); font-size: 25px; margin: 16px 0 10px; }.process-grid h3 { font-size: 15px; margin: 0 0 5px; }.process-grid p { color: var(--muted); font-size: 10px; line-height: 1.8; margin: 0; }
.cta-banner { margin: 54px 20px 15px; padding: 25px 20px; border: 1px solid rgba(229,185,71,.24); border-radius: 22px; background: radial-gradient(circle at 20% 10%, rgba(229,185,71,.16), transparent 42%), linear-gradient(145deg, #1a1912, #111617); display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }.cta-banner h2 { font-size: 26px; margin: 7px 0 0; }.cta-banner .primary-button { white-space: nowrap; padding: 10px 13px; font-size: 11px; }

.page-title { padding-top: 32px; padding-bottom: 25px; }.page-title h1 { font-size: 34px; margin: 9px 0 10px; }.page-title p { color: var(--muted); max-width: 360px; font-size: 12px; margin: 0; }.page-title.compact { padding-bottom: 26px; }
.filter-row { display: flex; gap: 8px; overflow: auto; padding-bottom: 16px; scrollbar-width: none; }.filter-row::-webkit-scrollbar { display: none; }.filter-button { flex: 0 0 auto; color: var(--muted); background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); padding: 7px 15px; border-radius: 99px; font-size: 11px; }.filter-button.is-selected { color: var(--bg); border-color: var(--gold); background: var(--gold); font-weight: 800; }
.services-list { display: grid; gap: 11px; padding-bottom: 25px; }.services-list .service-card { min-height: 170px; }.services-list .service-card h3 { font-size: 17px; }.services-list .service-card p { max-width: 90%; font-size: 12px; }.service-meta { color: var(--teal); font-size: 9px; border: 1px solid rgba(64,212,182,.24); border-radius: 99px; padding: 2px 7px; position: absolute; left: 15px; top: 17px; }
.orders-empty { padding: 40px 20px; text-align: center; border: 1px dashed rgba(229,185,71,.28); border-radius: var(--radius); background: rgba(229,185,71,.03); margin-bottom: 16px; }.empty-icon { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 20px; color: var(--gold-light); font-size: 28px; background: rgba(229,185,71,.1); }.orders-empty h3 { font-size: 18px; margin-bottom: 5px; }.orders-empty p { color: var(--muted); font-size: 12px; margin: 0; }.order-list { display: grid; gap: 10px; margin-bottom: 18px; }.order-item { padding: 16px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; }.order-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.order-item strong { font-size: 14px; }.order-status { font-size: 9px; color: var(--teal); border: 1px solid rgba(64,212,182,.3); border-radius: 99px; padding: 3px 8px; }.order-item small { display: block; color: var(--muted); font-size: 10px; margin-top: 7px; }.order-item p { color: #c0c8c6; font-size: 11px; margin: 9px 0 0; }
.contact-card { display: flex; align-items: center; gap: 15px; background: radial-gradient(circle at 10% 20%, rgba(229,185,71,.14), transparent 40%), var(--surface); border: 1px solid var(--line-soft); padding: 18px 15px; border-radius: 20px; margin-bottom: 14px; }.contact-orb { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); color: var(--gold-light); border-radius: 18px; font-size: 26px; background: rgba(229,185,71,.08); }.contact-card h3 { font-size: 16px; margin: 4px 0 3px; }.contact-card p { color: var(--muted); font-size: 10px; margin: 0; }.contact-options { display: grid; gap: 8px; margin-bottom: 16px; }.contact-options a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); border-radius: 14px; }.contact-options a > span:last-child { margin-right: auto; color: var(--gold); font-size: 18px; }.contact-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--gold-light); background: rgba(229,185,71,.1); }.contact-icon.whatsapp { color: #57e1a3; background: rgba(87,225,163,.08); }.contact-options strong, .contact-options small { display: block; }.contact-options strong { font-size: 12px; }.contact-options small { color: var(--muted); font-size: 10px; }

.bottom-nav { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 620px); padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: rgba(12, 16, 17, .9); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(20px); }.nav-item { color: #788383; background: none; border: 0; border-radius: 13px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 9px; position: relative; }.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; line-height: 1; }.nav-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }.nav-item.is-active { color: var(--gold-light); background: rgba(229,185,71,.09); }.order-badge { position: absolute; top: 1px; margin-right: 22px; min-width: 14px; height: 14px; padding: 0 3px; display: grid; place-items: center; border-radius: 99px; color: var(--bg); background: var(--gold); font: 800 8px "Plus Jakarta Sans", sans-serif; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.68); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }.modal-sheet { width: min(100%, 620px); max-height: 90dvh; overflow: auto; background: linear-gradient(160deg, #1a2020, #0d1113); border: 1px solid var(--line); border-bottom: 0; border-radius: 27px 27px 0 0; padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); transform: translateY(30px); transition: transform .3s ease; position: relative; }.modal-backdrop.is-open .modal-sheet { transform: translateY(0); }.close-button { position: absolute; top: 16px; left: 17px; border: 0; color: var(--muted); background: rgba(255,255,255,.06); width: 31px; height: 31px; border-radius: 50%; font-size: 22px; line-height: 1; }.modal-service-icon { width: 53px; height: 53px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--gold-light); background: rgba(229,185,71,.1); border-radius: 16px; font-size: 24px; margin: 0 0 17px; }.modal-sheet h2 { font-size: 27px; margin: 7px 0 8px; }.modal-sheet > p { color: var(--muted); font-size: 12px; margin-bottom: 20px; }.detail-list { display: grid; gap: 10px; margin-bottom: 23px; }.detail-list div { color: #cbd1cc; font-size: 11px; display: flex; align-items: center; gap: 8px; }.detail-list div::before { content: "✓"; color: var(--teal); font-weight: 800; }.order-sheet form { display: grid; gap: 13px; margin-top: 21px; }.order-sheet label { color: #d5dcd7; font-size: 11px; font-weight: 700; }.order-sheet input, .order-sheet select, .order-sheet textarea { display: block; width: 100%; resize: vertical; margin-top: 6px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(6,9,10,.55); color: var(--text); padding: 11px 12px; outline: 0; font-size: 12px; }.order-sheet input:focus, .order-sheet select:focus, .order-sheet textarea:focus { border-color: rgba(229,185,71,.7); box-shadow: 0 0 0 3px rgba(229,185,71,.08); }.order-sheet select { appearance: none; }.toast { position: fixed; z-index: 70; bottom: calc(91px + env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: calc(100% - 40px); padding: 11px 17px; border: 1px solid rgba(64,212,182,.35); border-radius: 99px; color: #d8fff4; background: #132321; box-shadow: 0 12px 28px rgba(0,0,0,.3); transform: translate(-50%, 15px); opacity: 0; pointer-events: none; transition: .25s ease; font-size: 11px; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) { body { padding: 20px 0; }.app-shell { border: 1px solid rgba(255,255,255,.07); border-radius: 32px; box-shadow: 0 25px 80px rgba(0,0,0,.45); }.topbar { border-radius: 32px 32px 0 0; }.bottom-nav { position: absolute; bottom: 0; }.hero-section { min-height: 520px; }.hero-content { width: 62%; }.hero-orbit { right: -110px; }.modal-backdrop { padding-bottom: 20px; align-items: center; }.modal-sheet { border-bottom: 1px solid var(--line); border-radius: 27px; max-width: 510px; } }

/* NAXO mobile storefront skin */
:root { --gold: #e6b84a; --gold-light: #ffe39a; --bg: #080808; --surface: #11100d; --surface-2: #1a1710; --surface-3: #241d11; --line: rgba(231,190,86,.25); --line-soft: rgba(232,204,139,.12); }
body { background: #080808; }
.app-shell { background: radial-gradient(ellipse at 50% 0, rgba(158,111,24,.12), transparent 330px), #080808; }
.topbar { min-height: 63px; padding: 11px 16px; display: flex; gap: 10px; background: rgba(8,8,8,.96); border-bottom-color: rgba(231,190,86,.11); }
.menu-button { order: 0; width: 34px; height: 34px; border: 0; background: transparent; color: var(--gold-light); font-size: 14px; }
.brand { margin-inline: auto; gap: 6px; }.brand-mark { width: 30px; height: 30px; border-radius: 9px; }.brand-mark svg { width: 24px; }.brand-copy strong { font-size: 15px; }.brand-copy small { font-size: 6px; }
.topbar-actions { order: 2; }.topbar-actions .icon-button { width: 34px; height: 34px; border-radius: 10px; }.topbar-actions #installButton { display: none !important; }
.search-bar { height: 43px; margin: 10px 16px 1px; padding: 0 11px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: #171615; color: var(--muted); }
.search-symbol { font-size: 23px; line-height: 1; color: var(--gold); }.search-bar input { flex: 1; min-width: 0; color: var(--text); background: none; border: 0; outline: 0; font-size: 11px; }.search-bar input::placeholder { color: #90908a; }.search-bar input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.8); }.search-bar button { color: #17120a; background: linear-gradient(135deg,#f7d981,#c6902b); border: 0; border-radius: 8px; padding: 4px 11px; font-size: 10px; font-weight: 800; }
.home-intro { padding-top: 18px; padding-bottom: 11px; }.home-intro .section-kicker { font-size: 9px; letter-spacing: .09em; }.home-intro h1 { font-size: 25px; margin: 4px 0 0; line-height: 1.35; }
.stats-strip, .process-section, .cta-banner { display: none; }
.category-section { padding-top: 8px; }.mini-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 12px; }.mini-section-heading h2 { font-size: 16px; margin: 3px 0 0; }.mini-section-heading .section-kicker { font-size: 9px; }.mini-section-heading .text-button { font-size: 10px; }
.category-rail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 9px; padding-bottom: 4px; }.category-tile { display: flex; flex-direction: column; gap: 5px; align-items: center; color: #ddd5c2; background: none; border: 0; padding: 0 1px; font-size: 10px; line-height: 1.4; white-space: normal; text-align: center; }.category-icon { width: 53px; height: 53px; border-radius: 17px; display: grid; place-items: center; color: var(--gold-light); border: 1px solid rgba(231,190,86,.23); background: linear-gradient(145deg,rgba(230,184,74,.13),rgba(255,255,255,.025)); font-size: 22px; transition: .2s ease; }.category-tile:active .category-icon, .category-tile:hover .category-icon { background: linear-gradient(145deg,#efd079,#9d6b18); color: #100d07; transform: translateY(-2px); }
.logo-banner-section { padding-top: 16px; }.logo-banner { height: 156px; position: relative; overflow: hidden; border-radius: 19px; border: 1px solid rgba(231,190,86,.4); background: #100d07; box-shadow: 0 10px 28px rgba(0,0,0,.35); }.logo-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,5,5,.94),rgba(5,5,5,.08) 68%),linear-gradient(90deg,rgba(5,5,5,.25),transparent 65%); pointer-events: none; }.logo-banner img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 48%; }.banner-caption { position: absolute; right: 14px; bottom: 11px; z-index: 1; display: grid; line-height: 1.45; }.banner-caption span { color: var(--gold-light); font-size: 9px; }.banner-caption strong { color: white; font-size: 15px; }.banner-action { position: absolute; z-index: 2; left: 13px; bottom: 13px; width: 34px; height: 34px; border: 1px solid rgba(255,227,154,.55); border-radius: 11px; color: #161007; background: linear-gradient(135deg,#f7dd8d,#c8952d); font-size: 19px; }
.section-block { padding-top: 23px; }.section-block .mini-section-heading { margin-bottom: 11px; }
.featured-services, .services-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.service-card { min-width: 0; min-height: 0; padding: 9px; border-radius: 16px; border-color: rgba(231,190,86,.15); background: linear-gradient(155deg,#191713,#100f0d 72%); box-shadow: 0 6px 16px rgba(0,0,0,.18); justify-content: flex-start; gap: 0; }.service-card.featured { background: linear-gradient(155deg,#211b10,#100f0d 75%); border-color: rgba(231,190,86,.25); }.service-card::after { display: none; }.service-card.large { grid-column: auto; min-height: 0; }
.service-visual { height: 86px; width: 100%; position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 48%,rgba(235,192,90,.28),transparent 40%),linear-gradient(140deg,#332713,#17130b 55%,#101212); }.service-visual::before, .service-visual::after { content: ""; position: absolute; border: 1px solid rgba(245,211,132,.17); border-radius: 50%; transform: rotate(-25deg); }.service-visual::before { width: 130px; height: 54px; }.service-visual::after { width: 85px; height: 85px; border-color: rgba(255,255,255,.08); }.service-card:nth-child(3n+2) .service-visual { background: radial-gradient(circle at 60% 40%,rgba(208,157,50,.25),transparent 35%),linear-gradient(140deg,#282522,#15120b); }.service-card:nth-child(3n) .service-visual { background: radial-gradient(circle at 40% 45%,rgba(241,207,124,.23),transparent 37%),linear-gradient(140deg,#262016,#111313); }.service-card-icon { width: 46px; height: 46px; position: relative; z-index: 1; display: grid; place-items: center; border: 1px solid rgba(255,222,143,.42); border-radius: 15px; background: rgba(14,12,9,.62); color: var(--gold-light); font-size: 23px; box-shadow: 0 5px 18px rgba(0,0,0,.3); }.visual-orbit { position: absolute; width: 7px; height: 7px; top: 22px; left: 28%; border-radius: 50%; background: #f3d27d; box-shadow: 0 0 12px #f3d27d; }
.favorite-button { position: absolute; z-index: 2; top: 15px; left: 15px; width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: #eee7d8; background: rgba(8,8,8,.72); font-size: 16px; line-height: 1; }.favorite-button.is-favorite { color: #f2c95f; border-color: rgba(242,201,95,.55); }.service-copy { min-height: 78px; padding: 9px 2px 2px; }.service-card h3 { font-size: 12px; line-height: 1.5; margin: 0 0 4px; }.service-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #aaa69d; font-size: 9px; line-height: 1.7; margin: 0; }.service-link { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 5px; padding: 7px 7px 1px; border: 0; border-top: 1px solid rgba(255,255,255,.08); color: var(--gold-light); background: none; text-align: right; font-size: 9px; }.service-link span { font-size: 14px; }.service-meta { z-index: 1; color: var(--gold-light); border-color: rgba(231,190,86,.4); background: rgba(8,8,8,.65); }
.section-heading { align-items: center; }.section-heading h2 { font-size: 22px; }.page-title { padding-top: 23px; }.page-title h1 { font-size: 29px; }.page-title p { font-size: 11px; }
.filter-row { gap: 7px; padding-bottom: 13px; }.filter-button { border-radius: 11px; padding: 7px 13px; background: #171615; }.services-list { padding-bottom: 20px; }.search-empty { grid-column: 1 / -1; }
.bottom-nav { grid-template-columns: repeat(5,1fr); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: rgba(12,11,10,.97); border-top-color: rgba(231,190,86,.16); }.nav-item { min-width: 0; gap: 2px; padding: 5px 1px; font-size: 8px; }.nav-icon { font-size: 18px; }.nav-item.is-active { background: transparent; color: var(--gold-light); }.nav-item.is-active .nav-icon { width: 35px; height: 27px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg,rgba(240,204,115,.22),rgba(174,122,29,.09)); }.order-badge, .favorite-badge { position: absolute; top: 0; right: calc(50% - 20px); min-width: 13px; height: 13px; padding: 0 3px; display: grid; place-items: center; border-radius: 99px; color: #100d07; background: var(--gold); font: 800 8px "Plus Jakarta Sans",sans-serif; }.favorite-badge { background: #f1d080; }
.orders-empty { border-color: rgba(231,190,86,.28); background: rgba(231,190,86,.035); }.order-status { color: var(--gold-light); border-color: rgba(231,190,86,.3); }.detail-list div::before { color: var(--gold); }.contact-icon.whatsapp { color: var(--gold-light); background: rgba(229,185,71,.1); }.toast { border-color: rgba(231,190,86,.45); color: #fff1c9; background: #211a0d; }
.order-badge[hidden], .favorite-badge[hidden], #favoritesEmpty[hidden] { display: none; }
@media (min-width: 700px) { .app-shell { max-width: 440px; border-color: rgba(231,190,86,.14); border-radius: 34px; }.topbar { border-radius: 34px 34px 0 0; }.bottom-nav { position: absolute; bottom: 0; }.modal-backdrop { padding-bottom: 20px; align-items: center; }.modal-sheet { border-bottom: 1px solid var(--line); border-radius: 27px; max-width: 510px; } }
@media (max-width: 360px) { .category-icon { width: 46px; height: 46px; }.service-visual { height: 76px; }.service-copy { min-height: 82px; }.service-card h3 { font-size: 11px; } }
.intro-copy { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 4px 0 0; }
.response-promise, .print-assurance { display: flex; align-items: center; gap: 11px; margin: 14px 20px 28px; padding: 12px 13px; border: 1px solid rgba(231,190,86,.3); border-radius: 15px; background: linear-gradient(110deg,rgba(231,190,86,.13),rgba(231,190,86,.035)); }.promise-icon, .print-assurance > span { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: var(--gold-light); background: rgba(231,190,86,.15); font-size: 19px; }.response-promise div, .print-assurance div { flex: 1; }.response-promise strong, .response-promise small, .print-assurance strong, .print-assurance small { display: block; }.response-promise strong, .print-assurance strong { color: var(--gold-light); font-size: 11px; }.response-promise small, .print-assurance small { color: var(--muted); font-size: 9px; line-height: 1.5; margin-top: 2px; }.promise-arrow { color: var(--gold); }
.print-assurance { margin: -3px 0 13px; }.print-filter-row { margin-inline: -1px; }.custom-print-button { margin: 0 0 22px; }.custom-print-button span { font-size: 18px; }
.favorite-shortcut { position: relative; font-size: 18px; }.favorite-shortcut .favorite-badge { top: -4px; right: -4px; min-width: 13px; height: 13px; }
.topbar-actions #installButton:not([hidden]) { display: grid !important; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.field-grid label { min-width: 0; }.payment-note { padding: 8px 10px; margin: -5px 0 0 !important; border-right: 2px solid var(--gold); color: #d1c298 !important; background: rgba(231,190,86,.06); font-size: 9px !important; }.prototype-notice { padding: 9px 10px; border: 1px solid rgba(241,190,95,.25); border-radius: 10px; color: #dfd0a6; background: rgba(241,190,95,.06); font-size: 9px; line-height: 1.7; }.response-note { display: block; color: var(--gold-light); text-align: center; font-size: 10px; }.order-payment { color: #ddc276 !important; }.order-status { text-align: center; }.order-item { overflow-wrap: anywhere; }.print-card .service-visual { background: radial-gradient(circle at 50% 45%,rgba(239,207,128,.29),transparent 38%),linear-gradient(140deg,#342b1a,#14110b 65%,#101212); }
.services-list .orders-empty { grid-column: 1 / -1; }
@media (max-width: 360px) { .field-grid { grid-template-columns: 1fr; } }
#dynamicOrderFields { display: grid; gap: 12px; }.platform-field { min-width: 0; margin: 0; padding: 9px; border: 1px solid var(--line-soft); border-radius: 12px; }.platform-field legend { padding: 0 5px; color: #d5dcd7; font-size: 11px; font-weight: 700; }.platform-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }.platform-grid label { display: flex; align-items: center; gap: 7px; margin: 0; padding: 6px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; color: #e1d7bd; background: rgba(255,255,255,.025); font-size: 10px !important; }.platform-grid input { width: auto !important; margin: 0 !important; accent-color: var(--gold); }

/* Calm motion, with accessibility support for reduced-motion preferences. */
.service-card-icon svg, .modal-service-icon svg { width: 24px; height: 24px; }
.modal-service-icon svg { width: 29px; height: 29px; }
.service-card { animation: card-enter .42s both; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.services-list .service-card:nth-child(3n + 2), .featured-services .service-card:nth-child(2) { animation-delay: 45ms; }
.services-list .service-card:nth-child(3n), .featured-services .service-card:nth-child(3) { animation-delay: 90ms; }
.service-card:hover { transform: translateY(-3px); border-color: rgba(231,190,86,.42); box-shadow: 0 12px 28px rgba(0,0,0,.27); }
.service-card-icon svg { animation: icon-drift 4.5s ease-in-out infinite; }
.service-card:nth-child(even) .service-card-icon svg { animation-delay: -1.7s; }
.social-link { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.social-link:hover, .social-link:focus-visible { transform: translateY(-2px); border-color: rgba(231,190,86,.48); background: rgba(231,190,86,.08); }
.social-icon svg { transition: transform .22s ease; }
.social-link:hover .social-icon svg { transform: scale(1.1); }
.icon-button, .filter-button, .primary-button, .secondary-button, .category-tile { transition: transform .18s ease, background-color .18s ease, border-color .18s ease; }
.icon-button:active, .filter-button:active, .primary-button:active, .secondary-button:active, .category-tile:active { transform: scale(.97); }
@keyframes card-enter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes icon-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.app-footer { margin: 26px 18px 104px; padding: 16px 13px; border-top: 1px solid rgba(231,190,86,.2); color: var(--muted); text-align: center; }
.app-footer strong { color: var(--gold-light); font: 700 11px "Plus Jakarta Sans", sans-serif; letter-spacing: .18em; }
.app-footer p { margin: 8px 0 5px; font-size: 9px; line-height: 1.7; }
.app-footer small { display: block; color: #8e8a80; font-size: 8px; line-height: 1.6; }
.category-icon svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.social-links { display: grid; gap: 10px; margin: 20px 0 18px; }
.social-link { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid rgba(231,190,86,.18); border-radius: 15px; color: var(--text); background: linear-gradient(110deg,rgba(231,190,86,.07),rgba(255,255,255,.018)); text-decoration: none; }
.social-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(231,190,86,.24); border-radius: 13px; color: var(--gold-light); background: rgba(231,190,86,.08); }
.social-icon svg { display: block; width: 21px; height: 21px; }
.facebook-icon svg { fill: currentColor; }
.instagram-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.instagram-icon .social-dot { fill: currentColor; stroke: none; }
.whatsapp-icon svg { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.social-link > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.social-link strong { direction: ltr; justify-self: start; color: var(--text); font: 700 12px "Plus Jakarta Sans", "Cairo", sans-serif; }
.social-link small { direction: auto; display: block; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* NAXO atmosphere: slow ambient gold light, never competing with the content. */
body { position: relative; isolation: isolate; background: #080b0d; line-height: 1.82; }
body::before, body::after { content: ""; position: fixed; inset: -18%; z-index: -1; pointer-events: none; }
body::before { background: radial-gradient(ellipse at 18% 24%, rgba(201,151,48,.12), transparent 30%), radial-gradient(ellipse at 82% 66%, rgba(212,169,77,.09), transparent 28%), radial-gradient(ellipse at 58% 8%, rgba(255,226,157,.055), transparent 22%); filter: blur(13px); animation: naxo-gold-drift 24s ease-in-out infinite alternate; }
body::after { inset: 0; opacity: .14; background-image: radial-gradient(circle, rgba(247,215,137,.5) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(247,215,137,.25) 0 .7px, transparent 1.4px); background-size: 137px 151px, 211px 193px; background-position: 16px 28px, 73px 91px; animation: naxo-stars-drift 38s linear infinite; }
.app-shell { z-index: 1; background: transparent; }
@keyframes naxo-gold-drift { from { transform: translate3d(-1.2%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1.2%, 0) scale(1.04); } }
@keyframes naxo-stars-drift { to { background-position: 153px 178px, 4px 28px; } }

/* Give Arabic and English equal breathing room on narrow phone screens. */
.page-padding { padding-inline: 24px; }
.section-block, .process-section { padding-top: 62px; }
.section-heading { gap: 18px; margin-bottom: 25px; }
.section-heading h2 { line-height: 1.4; text-wrap: pretty; }
.page-title { padding-top: 30px; padding-bottom: 6px; }
.page-title h1, .hero-content h1 { line-height: 1.38; text-wrap: pretty; }
.page-title p, .hero-description, .section-heading > p, .contact-intro { line-height: 2; text-wrap: pretty; }
.service-card { padding: 18px 17px; }
.service-copy { display: grid; gap: 7px; padding-top: 12px; line-height: 1.9; }
.service-card h3 { line-height: 1.7; text-wrap: pretty; overflow-wrap: anywhere; }
.service-card p { line-height: 1.9; }
.social-links { gap: 14px; margin-block: 24px 20px; }
.social-link { gap: 15px; padding: 15px; }
.social-link > span:nth-child(2) { gap: 6px; line-height: 1.75; }
.social-link small { line-height: 1.75; }
.contact-methods { gap: 14px; }
.order-sheet { padding: 27px 23px calc(24px + env(safe-area-inset-bottom)); }
#orderForm { display: grid; gap: 14px; }
#orderForm > label { display: grid; gap: 7px; line-height: 1.8; }
#orderForm input, #orderForm select, #orderForm textarea { min-height: 48px; padding: 12px 14px; line-height: 1.7; }
#orderForm textarea { min-height: 96px; }
.payment-note, .prototype-notice, .response-note { line-height: 1.9; padding: 12px 13px; }
.bottom-nav { padding-top: 10px; }
html[lang="en"] body { line-height: 1.78; }
html[lang="en"] .service-card h3, html[lang="en"] .page-title h1 { line-height: 1.45; }
/* Phone-first polish: respect notches, keep controls reachable, and prevent cramped copy. */
html { min-height: 100%; min-height: 100dvh; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.app-shell { width: min(100%, 620px); min-height: 100vh; min-height: 100dvh; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.topbar { padding-top: max(13px, env(safe-area-inset-top, 0px)); padding-inline: clamp(14px, 4vw, 24px); gap: 9px; }
.topbar-actions { gap: clamp(5px, 2vw, 9px); }
.page-padding { padding-inline: clamp(18px, 5.5vw, 30px); }
.home-intro { padding-top: clamp(25px, 7vw, 42px); padding-bottom: 18px; }
.home-intro .section-kicker { display: inline-block; font-size: clamp(9px, 2.8vw, 11px); line-height: 1.8; }
.home-intro h1 { font-size: clamp(30px, 9vw, 43px); line-height: 1.4; margin: 12px 0 10px; overflow-wrap: anywhere; }
.intro-copy { max-width: 38ch; font-size: clamp(14px, 3.8vw, 16px); line-height: 2; text-wrap: pretty; }
.category-section { padding-top: 16px; }
.mini-section-heading { align-items: center; gap: 12px; margin-bottom: 18px; }
.mini-section-heading h2 { max-width: 65%; font-size: clamp(18px, 5vw, 22px); line-height: 1.55; text-wrap: pretty; }
.mini-section-heading .text-button { white-space: normal; text-align: end; line-height: 1.7; }
.category-rail { gap: 15px 10px; }
.category-tile { min-width: 0; min-height: 78px; font-size: clamp(10px, 3vw, 12px); line-height: 1.6; }
.category-icon { width: clamp(48px, 15vw, 58px); height: clamp(48px, 15vw, 58px); }
.logo-banner-section { padding-top: clamp(18px, 5vw, 28px); }
.logo-banner { height: clamp(150px, 47vw, 210px); }
.banner-caption { right: clamp(12px, 4vw, 20px); bottom: 13px; max-width: calc(100% - 76px); }
.banner-caption span { font-size: clamp(9px, 2.8vw, 11px); line-height: 1.8; }
.banner-caption strong { font-size: clamp(15px, 4.8vw, 19px); line-height: 1.5; }
.section-block, .process-section { padding-top: clamp(48px, 13vw, 66px); }
.featured-services { gap: 12px; }
.featured-services .service-card { min-width: 0; min-height: 190px; }
.service-card h3 { overflow-wrap: anywhere; }
.bottom-nav { padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); padding-bottom: max(9px, env(safe-area-inset-bottom, 0px)); }
.nav-item { min-width: 0; min-height: 53px; justify-content: center; font-size: clamp(9px, 2.6vw, 10px); }
.modal-backdrop { padding-top: env(safe-area-inset-top, 0px); }
.modal-sheet { max-height: calc(92dvh - env(safe-area-inset-top, 0px)); overscroll-behavior: contain; }
.modal-sheet input, .modal-sheet select, .modal-sheet textarea { font-size: 16px; }
html[lang="en"] .home-intro h1 { font-size: clamp(29px, 8vw, 40px); line-height: 1.28; }
html[lang="en"] .intro-copy, html[lang="en"] .page-title p, html[lang="en"] .service-card p { line-height: 1.8; }
@media (max-width: 360px) {
  .topbar { padding-inline: 11px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .icon-button { width: 32px; height: 34px; }
  .brand { gap: 6px; }
  .brand-copy strong { font-size: 15px; }
  .mini-section-heading h2 { max-width: 62%; }
  .featured-services { grid-template-columns: 1fr; }
  .featured-services .service-card { min-height: 165px; }
  .bottom-nav { gap: 2px; padding-inline: 6px; }
  .nav-item { font-size: 8px; }
}
@media (min-width: 700px) {
  .app-shell { min-height: min(920px, 100dvh); }
  .bottom-nav { padding-bottom: 10px; }
}
@media (max-width: 380px) {
  .page-padding { padding-inline: 20px; }
  .section-block, .process-section { padding-top: 54px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .social-link { grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; padding: 12px; }
  .service-card { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
}
.admin-app-button { min-width: 58px; padding: 0 9px; border-color: rgba(229,185,71,.38); color: var(--gold-light); font-size: 11px; font-weight: 800; }
.admin-app-view { padding-bottom: 36px; }
.admin-source-note { margin: 0 0 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; color: var(--gold-light); background: linear-gradient(115deg,rgba(229,185,71,.12),rgba(255,255,255,.02)); line-height: 1.9; }
.catalog-service-form { display: grid; gap: 15px; padding: 18px; border: 1px solid var(--line-soft); border-radius: 20px; background: linear-gradient(145deg,rgba(25,30,29,.94),rgba(12,15,16,.95)); }
.catalog-service-form label { display: grid; min-width: 0; gap: 7px; color: #ded8c9; font-size: 12px; line-height: 1.8; }
.catalog-service-form input, .catalog-service-form select, .catalog-service-form textarea { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 11px 13px; color: var(--text); background: #111516; line-height: 1.7; }
.catalog-service-form textarea { resize: vertical; }
.catalog-service-form .field-grid { gap: 12px; }
.catalog-service-form .admin-active-toggle { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 12px; }
.catalog-service-form .admin-active-toggle input { width: 20px; height: 20px; accent-color: var(--gold); }
.admin-list-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 27px 0 13px; }
.admin-list-heading h2 { margin: 0; font-size: 20px; }
.catalog-admin-list { display: grid; gap: 10px; margin-bottom: 20px; }
.catalog-admin-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255,255,255,.025); }
.catalog-admin-row > div { min-width: 0; display: grid; gap: 5px; }
.catalog-admin-row small { color: var(--muted); overflow-wrap: anywhere; line-height: 1.6; }
.catalog-admin-row .secondary-button { min-height: 38px; padding: 7px 12px; }
.app-admin-view > a { margin-top: 18px; }
.manager-signin-note { line-height: 2; }
.manager-signin-note a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.social-link-arrow { color: var(--gold-light); font-size: 18px; }
html[lang="en"] .text-button span, html[lang="en"] .service-link span, html[lang="en"] .primary-button span:last-child, html[lang="en"] .secondary-button span:last-child, html[lang="en"] .promise-arrow { transform: rotate(180deg); }

.studio-view { padding-top:20px; padding-bottom:40px; }
.studio-jump-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:24px 0 34px; }
.studio-jump { display:grid; grid-template-columns:31px minmax(0,1fr) 18px; align-items:center; gap:8px; min-height:58px; padding:9px 11px; border:1px solid var(--line-soft); border-radius:15px; background:rgba(255,255,255,.025); color:var(--text); text-decoration:none; }
.studio-jump > span { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:var(--gold-light); background:rgba(229,185,71,.09); }
.studio-jump b { font-size:11px; line-height:1.55; }
.studio-jump i { color:var(--gold-light); font-style:normal; }
.studio-section-label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:31px 0 15px; padding-top:14px; border-top:1px solid var(--line); color:var(--gold-light); font-size:13px; font-weight:800; }
.studio-section-label i { color:var(--muted); font:600 10px "Plus Jakarta Sans",sans-serif; }
.studio-panel { margin:0 0 15px; padding:17px; border:1px solid var(--line-soft); border-radius:20px; background:linear-gradient(150deg,rgba(25,29,28,.92),rgba(13,16,17,.96)); scroll-margin-top:18px; }
.studio-panel-head { display:flex; align-items:center; gap:13px; margin-bottom:15px; }
.studio-panel-head > span { display:grid; place-items:center; flex:0 0 45px; height:45px; border:1px solid rgba(229,185,71,.3); border-radius:14px; color:var(--gold-light); font-size:21px; }
.studio-panel-head small { color:var(--gold); font:700 9px "Plus Jakarta Sans",sans-serif; letter-spacing:.12em; }
.studio-panel-head h2 { margin:3px 0 0; font-size:18px; line-height:1.6; }
.studio-subtitle { margin:0 0 10px; color:var(--muted); font-size:11px; }
.studio-branches { display:grid; gap:8px; }
.studio-branch { overflow:hidden; border:1px solid rgba(255,255,255,.075); border-radius:13px; background:rgba(255,255,255,.018); }
.studio-branch summary { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px; padding:10px 12px; cursor:pointer; list-style:none; color:var(--text); font-size:12px; font-weight:700; line-height:1.7; }
.studio-branch summary::-webkit-details-marker { display:none; }
.studio-branch summary::after { content:"＋"; color:var(--gold-light); font-size:15px; }
.studio-branch[open] summary::after { content:"−"; }
.studio-branch summary b { margin-inline-start:auto; color:var(--gold); font:600 10px "Plus Jakarta Sans",sans-serif; }
.studio-branch ul { display:grid; gap:7px; margin:0; padding:2px 30px 14px 14px; color:#c6c5c0; font-size:11px; line-height:1.8; }
html[dir="ltr"] .studio-branch ul { padding:2px 14px 14px 30px; }
.studio-request { width:100%; margin-top:13px; }
.studio-feature-panel { border-color:rgba(229,185,71,.32); background:radial-gradient(ellipse at 100% 0,rgba(193,143,35,.1),transparent 48%),linear-gradient(150deg,rgba(25,27,23,.96),rgba(13,16,17,.98)); }
.pos-highlight { margin:5px 0 16px; padding:14px; border-inline-start:2px solid var(--gold); border-radius:0 13px 13px 0; background:rgba(229,185,71,.055); }
.pos-highlight strong { color:var(--gold-light); font-size:12px; }
.pos-highlight p,.studio-feature-panel > p { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.9; }
.studio-info-list { display:grid; gap:0; }
.studio-info-list section { padding:13px 0; border-top:1px solid rgba(255,255,255,.075); }
.studio-info-list h3,.studio-feature-panel > h3 { margin:0; color:var(--gold-light); font-size:13px; line-height:1.7; }
.studio-info-list p { margin:5px 0 0; color:#c9c8c2; font-size:12px; line-height:2; }
.studio-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.studio-pills span { padding:7px 10px; border:1px solid rgba(229,185,71,.24); border-radius:99px; color:var(--gold-light); background:rgba(229,185,71,.05); font-size:10px; }
.studio-contact-card { display:grid; justify-items:start; gap:10px; margin-top:22px; padding:20px; border:1px solid rgba(229,185,71,.32); border-radius:20px; background:linear-gradient(120deg,rgba(229,185,71,.08),rgba(255,255,255,.02)); }
.studio-contact-card h2 { margin:0; font-size:20px; line-height:1.6; }
.studio-contact-card p { margin:0 0 5px; color:var(--muted); font-size:12px; line-height:1.9; }
.studio-contact-card .primary-button,.studio-contact-card .secondary-button { width:100%; text-align:center; text-decoration:none; }
.studio-calculator { display:grid; gap:11px; margin-top:13px; }
.studio-calculator label { display:grid; gap:6px; color:#ded8c9; font-size:11px; line-height:1.7; }
.studio-calculator input,.studio-calculator select { width:100%; min-height:44px; padding:9px 11px; border:1px solid rgba(255,255,255,.12); border-radius:11px; color:var(--text); background:#111516; font:inherit; }
.planner-result { display:block; grid-column:1/-1; padding:12px; border-radius:12px; color:var(--gold-light); background:rgba(229,185,71,.06); font-size:11px; line-height:1.9; }
.file-upload-field input[type="file"] { width:100%; min-height:45px; padding:8px; border:1px dashed rgba(229,185,71,.32); border-radius:11px; color:var(--muted); background:rgba(229,185,71,.035); font-size:12px; }
.file-upload-field small { color:var(--muted); line-height:1.7; }
.email-icon { display:grid!important; place-items:center; color:var(--gold-light); font-size:19px; }
@media (min-width:700px) { .studio-jump-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.studio-panel { padding:21px; }.studio-info-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; } }

/* Clear service hierarchy: category first, its sub-services on a focused detail screen. */
.service-category-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:22px 0 30px; }
.service-category-card { display:grid; grid-template-columns:48px minmax(0,1fr) 20px; align-items:center; gap:13px; width:100%; min-height:104px; padding:16px; border:1px solid rgba(255,255,255,.09); border-radius:18px; color:var(--text); background:linear-gradient(145deg,rgba(27,30,28,.96),rgba(13,16,17,.98)); text-align:start; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.service-category-card:active { transform:scale(.985); }
.service-category-card:hover,.service-category-card:focus-visible { border-color:rgba(229,185,71,.48); outline:none; }
.service-category-card.is-featured { border-color:rgba(229,185,71,.35); background:radial-gradient(ellipse at 100% 0,rgba(193,143,35,.13),transparent 52%),linear-gradient(145deg,rgba(27,30,25,.98),rgba(13,16,17,.98)); }
.service-category-icon { display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(229,185,71,.34); border-radius:15px; color:var(--gold-light); background:rgba(229,185,71,.075); font-size:21px; }
.service-category-copy { display:grid; min-width:0; gap:5px; }
.service-category-copy strong { font-size:14px; line-height:1.65; }
.service-category-copy small { color:var(--muted); font-size:11px; line-height:1.8; unicode-bidi:plaintext; }
.service-category-copy i { color:var(--gold-light); font-size:10px; font-style:normal; line-height:1.6; }
.service-category-arrow { color:var(--gold-light); font-size:18px; }
.service-detail-page { margin:18px 0 32px; animation:service-detail-in .24s ease both; }
.service-back { margin:0 0 18px; padding:8px 0; border:0; color:var(--gold-light); background:transparent; font:700 12px inherit; cursor:pointer; }
.service-detail-heading { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:start; gap:13px; padding:17px 0 20px; border-bottom:1px solid var(--line); }
.service-detail-heading h2 { margin:2px 0 4px; font-size:21px; line-height:1.55; }
.service-detail-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.9; unicode-bidi:plaintext; }
.service-detail-intro { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:20px 0 12px; }
.service-detail-intro span { font-size:13px; font-weight:800; }
.service-detail-intro small { color:var(--muted); font-size:10px; }
.service-detail-cta { margin-top:18px; }
.service-empty { padding:20px; color:var(--muted); text-align:center; }
.studio-branch li { unicode-bidi:plaintext; }
.studio-info-list p,.studio-feature-panel > p,.pos-highlight p { unicode-bidi:plaintext; }
.studio-pills { direction:ltr; justify-content:flex-start; }
.studio-pills span { unicode-bidi:isolate; }
.studio-pills-caption { display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.8; }
.field-grid.studio-calculator { grid-template-columns:minmax(0,1fr); width:100%; }
.studio-calculator label { grid-column:1/-1; width:100%; min-width:0; }
.studio-calculator input,.studio-calculator select { display:block; box-sizing:border-box; min-width:0; }
html[lang="en"] .studio-section-label,html[lang="en"] .service-detail-intro { direction:ltr; }
@keyframes service-detail-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:560px) { .service-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.service-category-card { align-content:start; min-height:146px; grid-template-columns:42px minmax(0,1fr); }.service-category-arrow { grid-column:2; justify-self:end; margin-top:-24px; } }
@media (prefers-reduced-motion:reduce) { .service-detail-page,.service-category-card { animation:none; transition:none; } }

/* Account hub, service cart and profile preferences */
.cart-add-button { position:absolute; z-index:3; top:14px; right:14px; display:grid; place-items:center; width:29px; height:29px; padding:0; border:1px solid rgba(229,185,71,.34); border-radius:9px; color:var(--gold-light); background:rgba(8,8,8,.78); font-size:19px; line-height:1; cursor:pointer; }
.cart-add-button.is-added { color:#10100c; background:var(--gold-light); }
.account-view { padding-top:20px; padding-bottom:120px; }
.account-panel { margin:0 0 15px; padding:17px; border:1px solid var(--line-soft); border-radius:20px; background:linear-gradient(150deg,rgba(25,29,28,.94),rgba(13,16,17,.97)); }
.account-panel-heading { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:7px; }
.account-panel-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(229,185,71,.32); border-radius:14px; color:var(--gold-light); background:rgba(229,185,71,.07); font-size:20px; }
.account-panel-heading .section-kicker { font-size:9px; }
.account-panel-heading h2 { margin:2px 0 0; font-size:17px; line-height:1.55; }
.account-panel > p { margin:0 0 13px; color:var(--muted); font-size:12px; line-height:1.85; }
.account-count { display:grid; place-items:center; min-width:26px; height:26px; padding:0 7px; border-radius:99px; color:#15120a; background:var(--gold-light); font:800 11px "Plus Jakarta Sans",sans-serif; }
.cart-list { display:grid; gap:9px; }
.cart-item { display:grid; grid-template-columns:39px minmax(0,1fr); gap:11px; align-items:center; padding:11px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:rgba(255,255,255,.025); }
.cart-item-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(229,185,71,.28); border-radius:12px; color:var(--gold-light); }
.cart-item-icon svg { width:21px; height:21px; }
.cart-item-copy { display:grid; gap:4px; min-width:0; }
.cart-item-copy strong { font-size:13px; line-height:1.6; }
.cart-item-copy small { color:var(--muted); font-size:10px; line-height:1.7; }
.cart-item-actions { grid-column:1/-1; display:flex; align-items:center; gap:8px; }
.cart-item-actions .secondary-button { min-height:36px; flex:1; padding:7px 10px; }
.cart-remove { width:36px; height:36px; border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#f0c8a8; background:rgba(255,255,255,.035); font-size:20px; }
.account-panel .orders-empty { margin:0; padding:16px 10px 7px; }
.account-panel .orders-empty .empty-icon { margin-inline:auto; }
.account-panel .orders-empty p { line-height:1.8; }
.profile-form { display:grid; gap:12px; }
.profile-form label { display:grid; gap:6px; color:#ded8c9; font-size:11px; font-weight:700; }
.profile-form input { width:100%; min-height:45px; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:11px; color:var(--text); background:#111516; font:inherit; }
.profile-form input:focus { border-color:rgba(229,185,71,.65); outline:2px solid rgba(229,185,71,.12); }
.account-note { display:block; color:var(--muted); font-size:10px; line-height:1.8; }
.account-action { margin-top:10px; text-decoration:none; }
.account-action.primary-button { display:flex; align-items:center; justify-content:center; gap:8px; }
.account-panel .help-item { padding:11px 0; border-top:1px solid rgba(255,255,255,.075); }
.help-item summary { cursor:pointer; color:var(--text); font-size:12px; font-weight:700; line-height:1.7; }
.help-item p { margin:8px 0 0; color:#c9c8c2; font-size:11px; line-height:1.95; }
.account-panel .help-item + .account-action { margin-top:13px; }
@media (max-width:360px) { .account-panel { padding:14px; }.account-panel-heading { grid-template-columns:39px minmax(0,1fr) auto; gap:9px; }.account-panel-icon { width:38px;height:38px; }.cart-item { padding:9px; } }

/* Readable cards in the app's fixed-width phone frame on desktop and mobile. */
.studio-jump-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.studio-jump { grid-template-columns:36px minmax(0,1fr) 14px; gap:9px; min-height:68px; padding:10px 12px; }
.studio-jump > span { width:36px; height:36px; border-radius:12px; font-size:19px; line-height:1; }
.studio-jump b { font-size:13px; line-height:1.6; text-wrap:balance; }
.studio-jump i { font-size:14px; }
.studio-branch summary { font-size:13px; line-height:1.65; }
.studio-branch ul { font-size:12px; line-height:1.85; }
.studio-info-list p { font-size:13px; line-height:1.9; }
.service-category-grid { grid-template-columns:minmax(0,1fr); gap:11px; }
.service-category-card { grid-template-columns:56px minmax(0,1fr) 20px; align-items:center; min-height:112px; padding:16px; gap:14px; }
.service-category-icon { width:54px; height:54px; border-radius:17px; font-size:24px; }
.service-category-copy { gap:6px; }
.service-category-copy strong { font-size:16px; line-height:1.55; }
.service-category-copy small { font-size:12px; line-height:1.75; }
.service-category-copy i { font-size:11px; line-height:1.65; }
.service-category-arrow { font-size:20px; }
.website-icon { font-size:20px; font-weight:800; }
.service-detail-heading { grid-template-columns:56px minmax(0,1fr); gap:14px; }
.service-detail-heading h2 { font-size:23px; line-height:1.5; }
.service-detail-heading p { font-size:13px; line-height:1.8; }

/* A softer, slow-moving gold atmosphere stays behind every view while browsing. */
body::before {
  background:
    radial-gradient(ellipse at 14% 25%, rgba(201,151,48,.17), transparent 32%),
    radial-gradient(ellipse at 86% 64%, rgba(212,169,77,.13), transparent 30%),
    radial-gradient(ellipse at 54% 9%, rgba(255,226,157,.085), transparent 24%),
    radial-gradient(ellipse at 45% 92%, rgba(177,126,35,.07), transparent 27%);
  animation-duration: 28s;
}
body::after { opacity: .2; animation-duration: 46s; }
.service-card, .service-category-card, .studio-panel, .process-grid article {
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .service-card:hover, .service-category-card:hover, .studio-panel:hover, .process-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(231,190,86,.28);
    box-shadow: 0 18px 42px rgba(0,0,0,.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .home-intro::after { animation: none !important; }
}

/* Request progress, concept portfolio, accessible FAQ and quick contact. */
.order-tracker { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin:17px 0 12px; padding:0 0 5px; }
.order-track-line { position:absolute; z-index:0; inset-inline:9% 9%; top:10px; height:2px; background:rgba(255,255,255,.09); }
.order-track-line i { display:block; width:var(--track-progress,0%); height:100%; margin-inline-end:auto; background:linear-gradient(90deg,#9b7021,var(--gold-light)); transition:width .4s ease; }
.order-track-step { position:relative; z-index:1; display:grid; justify-items:center; align-content:start; gap:6px; min-width:0; color:#7f8582; text-align:center; }
.order-track-step > i { display:grid; place-items:center; width:20px; height:20px; border:1px solid rgba(255,255,255,.16); border-radius:50%; color:#929793; background:#111414; font:600 9px "Plus Jakarta Sans",sans-serif; font-style:normal; }
.order-track-step b { max-width:100%; font-size:8px; line-height:1.5; font-weight:500; }
.order-track-step.is-done,.order-track-step.is-current { color:var(--gold-light); }
.order-track-step.is-done > i,.order-track-step.is-current > i { border-color:var(--gold); color:#151109; background:var(--gold-light); }
.order-track-step.is-current b { font-weight:800; }
.order-tracker-note { display:block; margin:0 0 10px; color:#f3d68c !important; }
.order-tracker.is-closed .order-track-line i { background:#806d49; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 12px; }
.portfolio-filters .filter-button { min-height:35px; padding:7px 11px; font-size:10px; }
.portfolio-concepts { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:12px; }
.portfolio-concept { min-width:0; padding:10px; border:1px solid var(--line-soft); border-radius:16px; background:rgba(255,255,255,.025); animation:service-detail-in .32s ease both; }
.portfolio-concept[hidden] { display:none; }
.portfolio-concept > small { display:block; margin:10px 2px 4px; color:var(--gold-light); font-size:9px; line-height:1.7; }
.portfolio-concept h3 { margin:0 2px 3px; font-size:12px; line-height:1.7; }
.concept-art { position:relative; display:grid; align-content:end; overflow:hidden; min-height:152px; padding:15px; border:1px solid rgba(231,190,86,.18); border-radius:12px; color:#fff1c9; background:#0c0d0d; }
.concept-art::before,.concept-art::after { position:absolute; content:""; pointer-events:none; }
.concept-identity { justify-items:center; align-content:center; background:radial-gradient(circle at 50% 38%,rgba(221,174,72,.3),transparent 42%),linear-gradient(140deg,#161511,#090a0a); }
.concept-identity::before { inset:15% 25%; border:1px solid rgba(239,201,111,.4); border-radius:50%; box-shadow:0 0 45px rgba(220,166,55,.14); }
.concept-identity > span { z-index:1; color:#f0c76e; font:800 54px Georgia,serif; text-shadow:0 0 20px rgba(231,190,86,.4); }
.concept-identity > i { position:absolute; top:26px; right:31px; color:#ffe6a3; font-style:normal; }
.concept-identity > b { z-index:1; margin-top:3px; font:600 9px "Plus Jakarta Sans",sans-serif; letter-spacing:.3em; text-align:center; }
.concept-social { gap:8px; background:radial-gradient(ellipse at 85% 15%,rgba(229,185,71,.22),transparent 40%),linear-gradient(145deg,#262119,#111314 66%); }
.concept-social::before { width:85px; height:85px; top:-27px; left:-25px; border:1px solid rgba(241,207,126,.34); border-radius:50%; }
.concept-social > span,.concept-social > b,.concept-social > i { z-index:1; }
.concept-social > span { color:var(--gold-light); font-size:10px; }
.concept-social > b { max-width:170px; font-size:20px; line-height:1.35; }
.concept-social > i { color:#b5a57d; font:9px "Plus Jakarta Sans",sans-serif; font-style:normal; letter-spacing:.18em; }
.concept-print { min-height:152px; background:linear-gradient(135deg,#33302a,#171716 55%,#080909); }
.concept-print::before { inset:17px 24px 22px; border:1px solid rgba(239,201,111,.34); transform:rotate(-5deg); }
.concept-print > span { color:#f0c76e; font:800 23px "Plus Jakarta Sans",sans-serif; letter-spacing:.1em; }
.concept-print > b { margin-top:5px; color:#c9c5b8; font:9px "Plus Jakarta Sans",sans-serif; letter-spacing:.18em; }
.concept-print > i { position:absolute; width:50px; height:2px; right:18px; bottom:23px; background:var(--gold); }
.portfolio-integrity { margin:12px 0 0 !important; padding:9px 11px; border-right:2px solid var(--gold); border-radius:5px; color:#c8c3b5 !important; background:rgba(231,190,86,.045); font-size:10px !important; }
.faq-accordion { display:grid; gap:8px; }
.faq-row { padding:0 13px; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(255,255,255,.025); }
.faq-row[open] { border-color:rgba(231,190,86,.25); background:rgba(231,190,86,.035); }
.faq-row summary { position:relative; padding:12px 0; cursor:pointer; color:#f1e6c9; font-size:12px; font-weight:700; line-height:1.8; list-style:none; }
.faq-row summary::-webkit-details-marker { display:none; }
.faq-row summary::after { content:"+"; float:inline-end; margin-inline-start:10px; color:var(--gold); font:600 18px "Plus Jakarta Sans",sans-serif; }
.faq-row[open] summary::after { content:"−"; }
.faq-row p { margin:0; padding:0 0 12px; color:var(--muted); font-size:11px; line-height:1.9; }
.whatsapp-float { position:fixed; z-index:25; inset-inline-end:max(14px,calc((100vw - 590px)/2 + 14px)); bottom:calc(78px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:8px; min-height:42px; padding:7px 13px 7px 10px; border:1px solid rgba(87,225,163,.3); border-radius:99px; color:#dfffee; background:rgba(14,29,23,.95); box-shadow:0 8px 26px rgba(0,0,0,.35); text-decoration:none; backdrop-filter:blur(16px); transition:transform .2s ease,border-color .2s ease; }
.whatsapp-float > span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#102117; background:#75e7a6; font-size:19px; line-height:1; }
.whatsapp-float b { font-size:10px; }
.whatsapp-float:hover { transform:translateY(-2px); border-color:rgba(87,225,163,.65); }
@media (min-width:900px) { .whatsapp-float { inset-inline-end:30px; bottom:26px; } }
html[lang="en"] .order-track-line i { margin-inline-end:0; margin-inline-start:auto; }
@media (max-width:380px) { .order-tracker { gap:1px; }.order-track-step b { font-size:7px; }.portfolio-concepts { grid-template-columns:1fr; }.concept-art { min-height:135px; } }
@media (prefers-reduced-motion:reduce) { .order-track-line i,.portfolio-concept,.whatsapp-float { transition:none; animation:none; } }

/* Project discovery, honest concept studies and scope comparison. */
.portfolio-concept { overflow:hidden; transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.portfolio-concept:hover { transform:translateY(-3px); border-color:rgba(229,185,71,.34); box-shadow:0 14px 34px rgba(0,0,0,.22); }
.case-study { margin:10px 2px 0; border-top:1px solid var(--line-soft); }
.case-study summary { padding:10px 0 2px; color:var(--gold-light); font-size:10px; font-weight:700; cursor:pointer; }
.case-study-body { padding:8px 0 2px; }
.case-study-body p { color:var(--muted); font-size:10px; line-height:1.9; }
.case-study-body .secondary-button { min-height:38px; padding:8px 12px; font-size:10px; }
.case-before-after { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:7px; padding:10px; border:1px solid rgba(229,185,71,.18); border-radius:12px; background:linear-gradient(110deg,rgba(255,255,255,.025),rgba(229,185,71,.07)); }
.case-before-after span { color:var(--text); font-size:9px; line-height:1.65; }
.case-before-after span:first-child { color:var(--muted); }
.case-before-after b { color:var(--gold); }
.package-compare { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:15px; }
.package-option { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:15px 13px; border:1px solid var(--line-soft); border-radius:16px; background:rgba(255,255,255,.025); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.package-option:hover,.package-option.is-selected { transform:translateY(-2px); border-color:rgba(229,185,71,.55); background:rgba(229,185,71,.055); }
.package-option-featured { border-color:rgba(229,185,71,.34); background:linear-gradient(155deg,rgba(229,185,71,.09),rgba(255,255,255,.02) 68%); }
.package-level { color:var(--gold-light); font-size:9px; font-weight:800; letter-spacing:.12em; }
.package-option h4 { margin:10px 0 4px; color:var(--text); font-size:13px; }
.package-option p,.package-option li { color:var(--muted); font-size:10px; line-height:1.8; }
.package-option p { margin:3px 0 8px; }
.package-option ul { display:grid; gap:3px; margin:0 0 12px; padding-inline-start:16px; }
.package-option button { width:100%; min-height:39px; margin-top:auto; padding:8px; font-size:10px; }
.package-option button.is-selected { box-shadow:0 0 0 2px rgba(229,185,71,.2); }
.studio-journey { border-color:rgba(229,185,71,.25); background:radial-gradient(ellipse at 100% 0,rgba(193,143,35,.09),transparent 48%),linear-gradient(150deg,rgba(25,27,23,.9),rgba(13,16,17,.97)); }
.journey-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0; }
.journey-steps article { position:relative; min-width:0; padding:12px 10px; border:1px solid var(--line-soft); border-radius:13px; background:rgba(0,0,0,.16); }
.journey-steps article > b { color:var(--gold); font-size:10px; letter-spacing:.1em; }
.journey-steps h3 { margin:8px 0 2px; color:var(--text); font-size:12px; }
.journey-steps p { margin:0; color:var(--muted); font-size:9px; line-height:1.8; }
.studio-journey > .secondary-button { min-height:40px; padding:8px 14px; font-size:10px; }
.planner-build { min-height:45px; }
.planner-result { display:grid; gap:10px; }
.planner-result p { margin:0; }
.planner-result .primary-button { justify-self:start; min-height:42px; padding:9px 14px; font-size:11px; }
@media (max-width:620px) { .package-compare { grid-template-columns:1fr; }.package-option { padding:14px; }.journey-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:360px) { .journey-steps { grid-template-columns:1fr; }.case-before-after { grid-template-columns:1fr auto 1fr; gap:4px; }.case-before-after span { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { .portfolio-concept,.package-option { transition:none; }.portfolio-concept:hover,.package-option:hover { transform:none; } }

/* A concept card for every service department, plus a readable team directory. */
.portfolio-filters { flex-wrap:nowrap; overflow-x:auto; padding:2px 0 8px; scrollbar-width:thin; scrollbar-color:rgba(229,185,71,.34) transparent; }
.portfolio-filters .filter-button { flex:0 0 auto; }
.portfolio-concepts { grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr)); gap:15px; }
.portfolio-concept { padding:11px; border-radius:19px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); }
.concept-art { min-height:175px; padding:16px; gap:7px; }
.concept-art .concept-symbol { z-index:1; display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(239,201,111,.38); border-radius:12px; color:#ffdf91; background:rgba(9,10,10,.38); font-size:20px; }
.concept-art > small { z-index:1; color:#e5c777; font:700 8px "Plus Jakarta Sans",sans-serif; letter-spacing:.11em; }
.concept-art > b { z-index:1; max-width:240px; color:#fff4d8; font-size:17px; line-height:1.5; }
.concept-art > i { z-index:1; color:rgba(242,219,165,.68); font:700 8px "Plus Jakarta Sans",sans-serif; font-style:normal; letter-spacing:.12em; }
.concept-identity { background:radial-gradient(circle at 50% 42%,rgba(221,174,72,.3),transparent 43%),linear-gradient(140deg,#161511,#090a0a); }
.concept-social { background:radial-gradient(ellipse at 90% 0,rgba(81,139,119,.2),transparent 50%),linear-gradient(145deg,#20251f,#101312); }
.concept-ads { background:radial-gradient(ellipse at 100% 90%,rgba(194,125,45,.23),transparent 47%),linear-gradient(135deg,#292015,#101111 68%); }
.concept-content { background:radial-gradient(ellipse at 70% 0,rgba(149,93,169,.18),transparent 52%),linear-gradient(145deg,#211b25,#101111 74%); }
.concept-photo { background:radial-gradient(ellipse at 10% 10%,rgba(105,146,168,.22),transparent 47%),linear-gradient(145deg,#1d2528,#101111 72%); }
.concept-digital { background:radial-gradient(ellipse at 88% 18%,rgba(75,156,153,.2),transparent 48%),linear-gradient(145deg,#182526,#101111 73%); }
.concept-print { background:linear-gradient(135deg,#363029,#171716 55%,#080909); }
.concept-pos { background:radial-gradient(ellipse at 95% 5%,rgba(197,162,69,.23),transparent 46%),linear-gradient(145deg,#27251b,#111312 70%); }
.team-section { grid-column:1/-1; padding:17px 0 4px!important; }
.team-section > p { max-width:680px; margin-bottom:15px; }
.team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.team-card { display:flex; align-items:center; gap:11px; min-width:0; min-height:73px; padding:12px; border:1px solid rgba(229,185,71,.17); border-radius:15px; background:linear-gradient(135deg,rgba(229,185,71,.065),rgba(255,255,255,.018)); }
.team-card-mark { display:grid; flex:0 0 34px; place-items:center; width:34px; height:34px; border:1px solid rgba(229,185,71,.3); border-radius:11px; color:var(--gold-light); background:rgba(229,185,71,.06); }
.team-card > div { min-width:0; }
.team-card small { display:block; margin-bottom:4px; color:var(--muted); font-size:9px; line-height:1.5; }
.team-card h4 { margin:0; color:#f4e9ca; font-family:"Plus Jakarta Sans",sans-serif; font-size:11px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
html[lang="en"] .team-card { text-align:left; }
@media (min-width:740px) { .team-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.team-card { min-height:82px; padding:14px; }.team-card h4 { font-size:12px; }.portfolio-concepts { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:390px) { .team-grid { grid-template-columns:1fr; }.concept-art { min-height:160px; }.portfolio-concepts { grid-template-columns:1fr; } }

/* NAXO v32 Client Workspace */
.client-dashboard .page-title{margin-bottom:18px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}.dashboard-card,.workspace-card{border:1px solid var(--line-soft);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018));border-radius:20px;padding:16px;box-shadow:0 14px 34px rgba(0,0,0,.16)}.dashboard-primary{border-color:rgba(229,185,71,.28);background:radial-gradient(circle at 85% 10%,rgba(229,185,71,.13),transparent 45%),rgba(255,255,255,.025)}.dashboard-card strong{display:block;font:800 34px/1.1 "Plus Jakarta Sans",sans-serif;color:var(--gold-light);margin:8px 0 2px}.dashboard-card h3{margin:8px 0 4px}.dashboard-card p{color:var(--muted);font-size:11px;margin:0 0 12px}.dashboard-card .secondary-button,.dashboard-card .primary-button{min-height:38px;font-size:11px}.dashboard-grid .dashboard-card:last-child{grid-column:1/-1}.workspace-card{margin-top:12px}.workspace-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.workspace-head h2{margin:3px 0 0;font-size:18px}.text-button{background:none;border:0;color:var(--gold-light);font-weight:700;font-size:11px}.dashboard-recent-list{display:grid;gap:7px}.dashboard-order-row{display:grid;grid-template-columns:32px 1fr auto;align-items:center;text-align:start;gap:9px;width:100%;padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:rgba(255,255,255,.02);color:var(--text)}.dashboard-order-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(229,185,71,.09);color:var(--gold)}.dashboard-order-row b,.dashboard-order-row small{display:block}.dashboard-order-row small{color:var(--muted);font-size:9px;margin-top:2px}.dashboard-empty{padding:18px;text-align:center;color:var(--muted);font-size:11px;border:1px dashed rgba(255,255,255,.1);border-radius:13px}.ai-beta{font-size:9px;color:var(--gold);border:1px solid rgba(229,185,71,.3);padding:3px 7px;border-radius:999px}.file-dropzone{border:1px dashed rgba(229,185,71,.3);border-radius:16px;padding:18px;text-align:center;background:rgba(229,185,71,.035)}.file-dropzone>span{display:block;font-size:28px;color:var(--gold)}.file-dropzone strong,.file-dropzone small{display:block}.file-dropzone small{color:var(--muted);font-size:9px;margin:3px 0 12px}.client-files-list{display:grid;gap:7px;margin-top:10px}.client-file-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:9px;border:1px solid rgba(255,255,255,.06);border-radius:12px}.client-file-row>span{color:var(--gold)}.client-file-row b,.client-file-row small{display:block}.client-file-row small{color:var(--muted);font-size:9px}.client-file-row button{border:0;background:none;color:var(--danger);font-size:18px}.client-dashboard .section-kicker{font-size:8px}
@media(min-width:700px){.dashboard-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid .dashboard-card:last-child{grid-column:auto}}

/* v32.1 workspace / checkout polish */
.ai-prompt-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:16px}
.ai-prompt-row input{min-width:0;width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:inherit;border-radius:14px;padding:13px 15px;font:inherit;outline:none}
.ai-prompt-row input:focus{border-color:rgba(211,174,82,.65);box-shadow:0 0 0 3px rgba(211,174,82,.08)}
.checkout-summary{display:flex;justify-content:space-between;gap:18px;margin:4px 0 16px;padding:14px 15px;border:1px solid rgba(211,174,82,.22);background:linear-gradient(135deg,rgba(211,174,82,.08),rgba(255,255,255,.025));border-radius:16px}
.checkout-summary div{display:flex;flex-direction:column;gap:4px;min-width:0}.checkout-summary span{font-size:10px;letter-spacing:.14em;opacity:.58}.checkout-summary strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:520px){.ai-prompt-row{grid-template-columns:1fr}.checkout-summary{flex-direction:column;gap:10px}}

/* Complete service-directory cards: specific visual language per discipline. */
.portfolio-service-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr)); align-items:stretch; gap:16px; }
.portfolio-service-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(224,178,69,.22); border-radius:20px; background:linear-gradient(155deg,rgba(27,25,19,.96),rgba(9,11,11,.98) 62%); box-shadow:0 12px 30px rgba(0,0,0,.18); transition:transform .32s cubic-bezier(.2,.75,.2,1),border-color .3s ease,box-shadow .3s ease; }
.portfolio-service-card:hover { transform:translateY(-5px); border-color:rgba(245,207,119,.58); box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 25px rgba(210,159,50,.1); }
.portfolio-service-visual { position:relative; min-height:165px; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; border-bottom:1px solid rgba(228,187,93,.15); background:radial-gradient(ellipse at 50% 85%,rgba(192,133,34,.22),transparent 57%),linear-gradient(145deg,#211b0f,#0c0e0d 72%); }
.portfolio-service-visual::before,.portfolio-service-visual::after { content:""; position:absolute; z-index:-1; pointer-events:none; }
.portfolio-service-visual::before { width:200px; height:120px; border:1px solid rgba(235,192,87,.35); border-radius:50%; transform:rotate(-18deg) translateY(25px); box-shadow:0 0 25px rgba(213,165,55,.12),inset 0 0 22px rgba(213,165,55,.07); }
.portfolio-service-visual::after { inset:0; opacity:.24; background:linear-gradient(135deg,transparent 42%,rgba(243,201,98,.24) 42.2%,transparent 42.6%,transparent 68%,rgba(243,201,98,.16) 68.2%,transparent 68.6%); }
.portfolio-service-icon { display:grid; place-items:center; width:74px; height:74px; border:1px solid rgba(244,205,105,.6); border-radius:23px; color:#f6d47c; background:linear-gradient(145deg,rgba(63,48,19,.85),rgba(11,13,12,.9)); box-shadow:0 0 38px rgba(211,161,51,.18),inset 0 1px rgba(255,240,196,.2); transform:rotate(-5deg); transition:transform .4s ease,box-shadow .4s ease; }
.portfolio-service-icon svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.portfolio-service-card:hover .portfolio-service-icon { transform:rotate(0) scale(1.06); box-shadow:0 0 48px rgba(211,161,51,.28),inset 0 1px rgba(255,240,196,.2); }
.portfolio-service-index { position:absolute; top:13px; inset-inline-start:13px; min-width:37px; height:34px; display:grid; place-items:center; border:1px solid rgba(239,195,82,.42); border-radius:11px; color:#f5d17a; background:rgba(9,10,10,.72); font:700 12px "Plus Jakarta Sans",sans-serif; }
.portfolio-service-area { position:absolute; bottom:12px; inset-inline-end:13px; padding:5px 8px; border:1px solid rgba(227,183,77,.26); border-radius:99px; color:#e6ca86; background:rgba(9,10,10,.78); font-size:10px; }
.portfolio-service-copy { flex:1; display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:17px; }
.portfolio-service-copy h3 { margin:0; color:#f7f1e5; font-size:clamp(16px,1.15vw,19px); line-height:1.55; }
.portfolio-service-copy>p { min-height:3.3em; margin:0; color:#bcb7ac; font-size:12px; line-height:1.8; }
.portfolio-service-details { margin-top:auto; border-top:1px solid rgba(225,183,85,.14); color:#dbd1bb; }
.portfolio-service-details summary { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0 4px; color:#f0d17e; cursor:pointer; font-size:12px; font-weight:700; list-style:none; }
.portfolio-service-details summary::-webkit-details-marker { display:none; }
.portfolio-service-details summary::after { content:"＋"; display:grid; place-items:center; width:23px; height:23px; flex:none; border:1px solid rgba(222,177,72,.32); border-radius:8px; }
.portfolio-service-details[open] summary::after { content:"−"; }
.portfolio-service-body { display:grid; gap:10px; padding:7px 0 0; animation:serviceDetailIn .24s ease both; }
.portfolio-service-body p { margin:0; color:#c1bdae; font-size:11px; line-height:1.85; }
.portfolio-service-body ul { display:grid; gap:6px; margin:0; padding-inline-start:18px; color:#cfc5ad; font-size:11px; line-height:1.7; }
.portfolio-service-body li::marker { color:#d6a83c; }
.portfolio-service-body button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:44px; border:1px solid rgba(235,190,83,.35); border-radius:12px; color:#f3d485; background:rgba(181,128,28,.1); font:inherit; font-size:12px; font-weight:700; padding:9px 12px; }
.portfolio-service-body button:hover { background:rgba(181,128,28,.2); border-color:#d6aa4d; }
.portfolio-directory-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 0 12px; color:#d7cba9; font-size:12px; }
.portfolio-integrity { color:#aaa497; font-size:11px; line-height:1.8; }
.tone-social .portfolio-service-visual { background:radial-gradient(ellipse at 50% 80%,rgba(47,128,106,.24),transparent 58%),linear-gradient(145deg,#14241e,#0b0e0d 72%); }
.tone-content .portfolio-service-visual { background:radial-gradient(ellipse at 50% 80%,rgba(127,86,147,.22),transparent 58%),linear-gradient(145deg,#201829,#0b0e0d 72%); }
.tone-photo .portfolio-service-visual { background:radial-gradient(ellipse at 50% 80%,rgba(153,91,55,.26),transparent 58%),linear-gradient(145deg,#271b15,#0b0e0d 72%); }
.tone-ads .portfolio-service-visual { background:radial-gradient(ellipse at 50% 80%,rgba(63,111,171,.25),transparent 58%),linear-gradient(145deg,#15202b,#0b0e0d 72%); }
.tone-digital .portfolio-service-visual { background:radial-gradient(ellipse at 50% 80%,rgba(65,111,137,.26),transparent 58%),linear-gradient(145deg,#142129,#0b0e0d 72%); }
.tone-print .portfolio-service-visual { background:radial-gradient(ellipse at 50% 80%,rgba(167,104,51,.26),transparent 58%),linear-gradient(145deg,#291c14,#0b0e0d 72%); }
.tone-supplies .portfolio-service-visual { background:radial-gradient(ellipse at 50% 80%,rgba(101,125,80,.24),transparent 58%),linear-gradient(145deg,#1b2115,#0b0e0d 72%); }
.tone-pos .portfolio-service-visual { background:radial-gradient(ellipse at 50% 80%,rgba(202,136,28,.34),transparent 58%),linear-gradient(145deg,#291d0c,#0b0e0d 72%); }
@keyframes serviceDetailIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:620px) { .portfolio-service-grid { grid-template-columns:1fr; gap:12px; }.portfolio-service-visual { min-height:145px; }.portfolio-service-copy { padding:15px; }.portfolio-service-copy>p { min-height:0; } }
@media (prefers-reduced-motion:reduce) { .portfolio-service-card,.portfolio-service-icon,.portfolio-service-body { transition:none!important; animation:none!important; } }