:root {
  --ink: #161224;
  --muted: #706a7e;
  --line: #e9e5ef;
  --paper: #ffffff;
  --soft: #f7f5fa;
  --purple: #7048e8;
  --purple-dark: #5631c6;
  --purple-pale: #eee9ff;
  --coral: #ff6b6b;
  --green: #1bad73;
  --amber: #f29d38;
  --night: #0c0919;
  --shadow: 0 24px 70px rgba(41, 26, 79, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Tahoma, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.section-shell { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }

.site-header { position: sticky; z-index: 30; top: 0; min-height: 78px; padding: 0 max(1.25rem, calc((100% - 1180px) / 2)); display: flex; align-items: center; gap: 2.5rem; border-bottom: 1px solid rgba(233, 229, 239, .8); background: rgba(255, 255, 255, .88); backdrop-filter: blur(18px); }
.site-brand { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.site-brand > span:last-child { display: grid; gap: .15rem; }
.site-brand strong { font-size: 1.08rem; }
.site-brand small { color: var(--muted); font-size: .65rem; }
.brand-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px 13px 5px 13px; color: #fff; background: linear-gradient(145deg, #8d68f2, #5a32d0); font: 900 1.35rem/1 "Segoe UI", sans-serif; box-shadow: 0 10px 25px rgba(112, 72, 232, .25); }
.desktop-nav { display: flex; align-items: center; gap: 1.7rem; margin-inline: auto; color: #514b5d; font-size: .82rem; }
.desktop-nav a { transition: .2s; }
.desktop-nav a:hover { color: var(--purple); }
.header-actions { display: flex; gap: .55rem; }
.button { min-height: 44px; padding: .7rem 1.15rem; display: inline-flex; justify-content: center; align-items: center; gap: .55rem; border: 1px solid transparent; border-radius: 12px; font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-1px); }
.button.small { min-height: 39px; padding: .55rem 1rem; font-size: .78rem; }
.button.large { min-height: 52px; padding-inline: 1.45rem; }
.button.primary { color: #fff; background: linear-gradient(135deg, #7952e9, #6338db); box-shadow: 0 12px 28px rgba(112, 72, 232, .25); }
.button.primary:hover { background: linear-gradient(135deg, #865ff0, #7047e8); box-shadow: 0 16px 34px rgba(112, 72, 232, .32); }
.button.ghost { color: var(--ink); border-color: var(--line); background: #fff; }
.button.soft { color: var(--purple); background: var(--purple-pale); }
.button.white { color: var(--purple-dark); background: #fff; box-shadow: 0 14px 32px rgba(26, 13, 67, .16); }
.button.wide { width: 100%; }

.hero { min-height: 620px; padding-block: 68px 62px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.hero-copy { position: relative; z-index: 2; }
.kicker { margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; color: var(--purple); font-size: .75rem; font-weight: 800; }
.kicker > span { width: 22px; height: 2px; display: inline-block; background: currentColor; }
.hero h1 { max-width: 620px; margin: 0; font-size: clamp(2.05rem, 3.4vw, 3.25rem); line-height: 1.4; letter-spacing: -.035em; }
.hero h1 em { position: relative; color: var(--purple); font-style: normal; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; right: 0; left: 0; bottom: -5px; height: 8px; border-radius: 50%; background: rgba(255, 107, 107, .28); transform: rotate(-2deg); }
.hero-lead { max-width: 620px; margin: 1.35rem 0; color: var(--muted); font-size: .9rem; line-height: 2.05; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-points { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1.2rem; color: #686274; font-size: .72rem; }
.hero-points span { display: flex; align-items: center; gap: .4rem; }
.hero-points i { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: #e7f8f0; font-style: normal; font-weight: 900; }
.hero-visual { position: relative; min-height: 510px; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; inset: 9% 3% 5% 8%; border-radius: 45% 55% 48% 52% / 54% 42% 58% 46%; background: linear-gradient(150deg, #ebe4ff, #fff1f4); transform: rotate(4deg); }
.glow-orb { position: absolute; width: 200px; height: 200px; left: -40px; top: 30px; border-radius: 50%; background: rgba(255, 174, 103, .24); filter: blur(4px); }
.preview-window { position: relative; z-index: 2; width: min(100%, 480px); padding: 1rem; border: 1px solid rgba(255, 255, 255, .9); border-radius: 25px; background: rgba(255, 255, 255, .92); box-shadow: 0 40px 90px rgba(63, 40, 112, .18); transform: rotate(-1.5deg); }
.preview-head { display: flex; justify-content: space-between; align-items: center; padding: .2rem .2rem 1rem; }
.preview-brand, .preview-user { display: flex; align-items: center; gap: .5rem; }
.mini-symbol { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--purple); font-weight: 900; }
.preview-brand b { font-size: .75rem; }
.preview-user { color: var(--muted); font-size: .6rem; }
.preview-user > span { width: 7px; height: 7px; border-radius: 50%; background: #31c487; box-shadow: 0 0 0 4px #e2f8ef; }
.preview-balance { position: relative; overflow: hidden; min-height: 135px; padding: 1.2rem; display: grid; align-content: center; border-radius: 18px; color: #fff; background: linear-gradient(130deg, #7347e8, #9c72f1); }
.preview-balance::after { content: ""; position: absolute; width: 150px; height: 150px; left: -25px; bottom: -85px; border: 24px solid rgba(255, 255, 255, .09); border-radius: 50%; }
.preview-balance small { opacity: .75; font-size: .6rem; }
.preview-balance strong { margin-top: .5rem; font: 800 1.6rem/1.2 "Segoe UI", sans-serif; }
.preview-balance strong span { font: 500 .65rem Tahoma; }
.preview-balance button { position: absolute; left: 1rem; top: 1rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 9px; padding: .45rem .6rem; color: #fff; background: rgba(255, 255, 255, .14); font-size: .55rem; pointer-events: none; }
.preview-order { margin-top: .8rem; padding: .9rem; border-radius: 17px; background: #faf9fc; }
.preview-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; font-size: .62rem; }
.preview-title span { color: var(--purple); font-size: .52rem; }
.preview-row { padding: .62rem 0; display: flex; align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); }
.preview-row:nth-child(3) { border-bottom: 0; }
.social { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; font-style: normal; font-weight: 800; }
.social.instagram { color: #d44c81; background: #fde8f0; }
.social.telegram { color: #3b8ccc; background: #e4f3ff; }
.social img, .service-icon img, .public-service-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.preview-row div { display: grid; gap: .2rem; margin-left: auto; }
.preview-row b { font-size: .57rem; }
.preview-row small { color: var(--muted); font-size: .49rem; }
.status { padding: .3rem .45rem; border-radius: 99px; font-size: .48rem; }
.status.processing { color: #b46e10; background: #fff2db; }
.status.completed { color: #168358; background: #e3f8ef; }
.progress-track { height: 4px; margin-top: .7rem; border-radius: 9px; background: #e9e5ef; }
.progress-track span { width: 68%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--purple), #a985f6); }
.floating-card { position: absolute; z-index: 4; padding: .7rem .85rem; display: flex; align-items: center; gap: .55rem; border: 1px solid rgba(255, 255, 255, .9); border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 44px rgba(61, 38, 110, .16); }
.floating-card > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--purple); background: var(--purple-pale); }
.floating-card div { display: grid; gap: .2rem; }
.floating-card b { font-size: .58rem; }
.floating-card small { color: var(--muted); font-size: .48rem; }
.floating-one { left: -3%; top: 11%; animation: float 5s ease-in-out infinite; }
.floating-two { right: -5%; bottom: 7%; animation: float 5s 1.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-9px); } }

.trust-strip { min-height: 118px; padding-inline: max(1.25rem, calc((100% - 1180px) / 2)); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; color: #fff; background: var(--night); }
.trust-strip > div { min-height: 52px; padding: .4rem 2rem; display: grid; align-content: center; gap: .35rem; border-left: 1px solid rgba(255, 255, 255, .1); }
.trust-strip > div:last-child { border-left: 0; }
.trust-strip strong { color: #bda9ff; font: 800 1.35rem "Segoe UI", sans-serif; }
.trust-strip span { color: #aaa4b6; font-size: .68rem; }

.content-section { padding-block: 105px; }
.section-heading { margin-bottom: 2.6rem; }
.section-heading.centered { text-align: center; }
.section-heading.centered .kicker { justify-content: center; }
.section-heading h2, .why-copy > h2, .api-copy h2, .final-cta h2, .landing-section-title { margin: 0; font-size: clamp(1.65rem, 2.6vw, 2.3rem); font-weight: 900; line-height: 1.5; letter-spacing: -.025em; }
.section-heading > p:last-child, .why-copy > p { color: var(--muted); line-height: 2; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.service-card { position: relative; min-height: 285px; padding: 1.4rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.service-card:hover { transform: translateY(-6px); border-color: #dcd2fa; box-shadow: var(--shadow); }
.service-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 15px; font: 800 1.35rem "Segoe UI"; }
.service-icon img { border-radius: 15px; }
.instagram-card .service-icon { color: #ce3771; background: #fde8f1; }
.telegram-card .service-icon { color: #238bc9; background: #e5f5ff; }
.youtube-card .service-icon { color: #e63946; background: #ffe8e9; }
.tiktok-card .service-icon { color: #27202f; background: #efedf2; }
.service-tag { position: absolute; left: 1.2rem; top: 1.2rem; padding: .3rem .55rem; border-radius: 99px; color: var(--purple); background: var(--purple-pale); font-size: .55rem; }
.service-card h3 { margin: 1.15rem 0 .55rem; font-size: 1.02rem; }
.service-card p { min-height: 76px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 2; }
.service-card button { margin-top: .9rem; padding: 0; border: 0; color: var(--purple); background: none; font-size: .7rem; font-weight: 800; }

.why-section { padding-block: 105px; background: var(--soft); }
.why-layout { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.why-copy > p { max-width: 590px; }
.feature-list { margin-top: 2rem; display: grid; gap: 1.2rem; }
.feature-list article { display: flex; gap: 1rem; }
.feature-list article > span { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--purple); background: var(--purple-pale); font: 800 .72rem "Segoe UI"; }
.feature-list h3 { margin: 0 0 .35rem; font-size: .92rem; }
.feature-list p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.9; }
.why-panel { position: relative; min-height: 390px; padding: 1.5rem; border: 1px solid #ebe6f3; border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
.why-panel::before { content: ""; position: absolute; z-index: -1; width: 82%; height: 85%; left: -8%; bottom: -7%; border-radius: 25px; background: #dfd4ff; transform: rotate(-5deg); }
.why-panel-head { display: flex; justify-content: space-between; align-items: center; }
.why-panel-head span { font-weight: 800; }
.why-panel-head b { padding: .4rem .6rem; border-radius: 9px; color: var(--muted); background: var(--soft); font-size: .62rem; }
.chart-bars { height: 215px; margin-top: 2.4rem; padding: 0 .6rem; display: flex; align-items: end; justify-content: space-between; gap: .65rem; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 52px, #f1eef4 53px 54px); }
.chart-bars i { width: 9%; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(to top, #7148e8, #ae91f6); }
.chart-bars i:nth-child(2n) { background: linear-gradient(to top, #ff7b79, #ffb0a5); }
.chart-bars .bar-42 { --h: 42%; }.chart-bars .bar-54 { --h: 54%; }.chart-bars .bar-64 { --h: 64%; }.chart-bars .bar-68 { --h: 68%; }
.chart-bars .bar-76 { --h: 76%; }.chart-bars .bar-82 { --h: 82%; }.chart-bars .bar-92 { --h: 92%; }
.chart-foot { margin-top: 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.chart-foot div { display: grid; gap: .35rem; }
.chart-foot small { color: var(--muted); font-size: .62rem; }
.chart-foot strong { font: 800 1.25rem "Segoe UI"; }
.online-text { color: var(--green); font-family: Tahoma !important; font-size: .9rem !important; }

.steps-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.steps-grid::before { content: ""; position: absolute; top: 52px; right: 17%; left: 17%; border-top: 2px dashed #ded7eb; }
.steps-grid article { position: relative; z-index: 2; padding: 0 1.5rem; text-align: center; }
.step-number { position: absolute; right: calc(50% + 30px); top: -4px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--coral); font-size: .58rem; font-weight: 800; }
.step-icon { width: 78px; height: 78px; margin: 12px auto 1.3rem; display: grid; place-items: center; border: 9px solid #fff; border-radius: 24px; color: var(--purple); background: var(--purple-pale); box-shadow: 0 0 0 1px var(--line), 0 14px 35px rgba(82, 55, 139, .1); font-size: 1.5rem; }
.steps-grid h3, .steps-grid .landing-card-title { margin: 0 0 .6rem; font-size: 1rem; font-weight: 900; }
.steps-grid p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 2; }

.api-banner { position: relative; overflow: hidden; min-height: 360px; padding: 3.5rem clamp(2rem, 5vw, 5rem); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4rem; border-radius: 30px; color: #fff; background: linear-gradient(125deg, #6f44e4, #4f2abb); box-shadow: 0 30px 75px rgba(78, 42, 185, .25); }
.api-banner::before, .api-banner::after { content: ""; position: absolute; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .05); }
.api-banner::before { width: 280px; height: 280px; right: -140px; top: -150px; }
.api-banner::after { width: 180px; height: 180px; left: 30%; bottom: -170px; }
.api-copy { position: relative; z-index: 2; }
.kicker.light { color: #d9ceff; }
.api-copy p:not(.kicker) { max-width: 590px; margin: 1rem 0 1.7rem; color: #ddd4f7; line-height: 2; }
.code-card { position: relative; z-index: 2; padding: 1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: #151024; box-shadow: 0 25px 60px rgba(25, 10, 72, .32); }
.code-card > div { display: flex; align-items: center; gap: .35rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.code-card i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; }
.code-card i:nth-child(2) { background: #ffc857; }.code-card i:nth-child(3) { background: #4fd18b; }
.code-card div span { margin-left: auto; color: #9188a8; font-size: .62rem; }
.code-card pre { margin: 1rem 0; color: #d8d1e7; font: .78rem/2 "Consolas", monospace; }
.code-card code b { color: #b59afa; font-weight: 500; }
.code-success { color: #58db9a; font: .6rem "Consolas", monospace; }

.faq-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 5rem; }
.faq-list { display: grid; gap: .7rem; }
.faq-list details { border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.faq-list summary { padding: 1.1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; font-size: .8rem; font-weight: 800; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--purple); font-size: 1rem; transition: .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 1.2rem 1.2rem; color: var(--muted); font-size: .72rem; line-height: 2; }
.final-cta { min-height: 235px; margin-bottom: 90px; padding: 2.8rem clamp(2rem, 5vw, 4.5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-radius: 27px; color: #fff; background: linear-gradient(125deg, #141024, #2c1f55); }
.final-cta > div { position: relative; }
.final-cta p { margin-bottom: 0; color: #aaa2ba; }
.cta-spark { position: absolute; right: -2.2rem; top: -2rem; color: #f3c56a; font-size: 1.3rem; }

.site-footer { padding-top: 65px; color: #c5bfcd; background: var(--night); }
.footer-grid { padding-bottom: 55px; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 3rem; }
.site-footer .site-brand strong { color: #fff; }
.site-footer .site-brand small { color: #8f889b; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.footer-grid > div:first-child p { max-width: 280px; color: #8f8999; font-size: .7rem; line-height: 2; }
.footer-grid b { margin-bottom: .5rem; color: #fff; font-size: .8rem; }
.footer-grid a, .footer-grid button, .footer-grid p { margin: 0; padding: 0; border: 0; color: #918a9f; background: none; font-size: .68rem; text-align: right; }
.footer-grid a:hover, .footer-grid button:hover { color: #cbbcff; }
.online-badge { display: flex; align-items: center; gap: .4rem; color: #a8a1b3; font-size: .62rem; }
.online-badge i { width: 7px; height: 7px; border-radius: 50%; background: #35c685; box-shadow: 0 0 0 4px rgba(53, 198, 133, .12); }
.footer-bottom { min-height: 70px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, .08); color: #777080; font-size: .62rem; }

dialog { padding: 0; border: 0; color: var(--ink); background: transparent; }
dialog::backdrop { background: rgba(12, 8, 25, .72); backdrop-filter: blur(7px); }
.auth-dialog { width: min(920px, calc(100% - 2rem)); border-radius: 25px; background: #fff; box-shadow: 0 40px 100px rgba(9, 5, 23, .35); }
.auth-layout { min-height: 570px; display: grid; grid-template-columns: .85fr 1.15fr; direction: ltr; }
.auth-layout > * { direction: rtl; }
.auth-layout aside { position: relative; overflow: hidden; padding: 3rem; display: flex; align-items: center; color: #fff; background: linear-gradient(145deg, #6e42e4, #402095); }
.auth-layout aside::before, .auth-layout aside::after { content: ""; position: absolute; border: 32px solid rgba(255, 255, 255, .06); border-radius: 50%; }
.auth-layout aside::before { width: 260px; height: 260px; right: -150px; top: -140px; }
.auth-layout aside::after { width: 190px; height: 190px; left: -120px; bottom: -120px; }
.auth-side-content { position: relative; z-index: 2; }
.large-symbol { width: 54px; height: 54px; margin-bottom: 1.5rem; background: rgba(255, 255, 255, .17); box-shadow: none; }
.auth-side-content h2, .auth-side-content .ui-h2 { margin: 0; font-size: 1.65rem; }
.auth-side-content > p { margin: .8rem 0 2rem; color: #dcd2f7; font-size: .76rem; line-height: 2; }
.auth-side-content > div { margin-top: 1rem; display: flex; align-items: center; gap: .6rem; color: #eee9ff; font-size: .7rem; }
.auth-side-content > div span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.auth-layout > section { position: relative; padding: 2rem clamp(1.5rem, 5vw, 4rem); }
.dialog-close { position: absolute; z-index: 3; left: 1rem; top: 1rem; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fff; font-size: 1.25rem; }
.light-close { display: none; color: #fff; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: .25rem; border-radius: 12px; background: var(--soft); }
.auth-tabs button { min-height: 39px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 800; }
.auth-tabs button.active { color: var(--purple); background: #fff; box-shadow: 0 4px 14px rgba(44, 28, 82, .08); }
.auth-form { margin-top: 1.7rem; display: grid; gap: .9rem; }
.auth-heading { margin-bottom: .2rem; }
.auth-heading h2, .auth-heading .ui-h2 { margin: 0; font-size: 1.35rem; }
.auth-heading p { margin: .4rem 0 0; color: var(--muted); font-size: .7rem; }
label { display: grid; gap: .45rem; color: #514b5c; font-size: .7rem; font-weight: 700; }
input, select { width: 100%; min-height: 46px; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; outline: none; }
input:focus, select:focus { border-color: #a98af5; box-shadow: 0 0 0 3px #f0ebff; }
.agreement { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.agreement input { width: 16px; min-height: 16px; accent-color: var(--purple); }
.auth-message { min-height: 18px; margin: 0; color: #d53949; font-size: .65rem; line-height: 1.7; }
.forgot-button { justify-self: center; border: 0; color: var(--purple); background: none; font-size: .68rem; }

.customer-app { min-height: 100vh; color: #1b1727; background: #f6f5f9; }
.customer-sidebar { position: fixed; z-index: 25; top: 0; right: 0; bottom: 0; width: 250px; padding: 1.4rem 1rem; display: flex; flex-direction: column; border-left: 1px solid #e7e3ec; background: #fff; }
.dashboard-brand { padding: .2rem .5rem 1.7rem; }
.customer-sidebar nav { display: grid; gap: .35rem; }
.customer-nav { min-height: 46px; padding: .65rem .85rem; display: flex; align-items: center; gap: .7rem; border: 0; border-radius: 11px; color: #746e7f; background: transparent; text-align: right; font-size: .73rem; }
.customer-nav span { width: 25px; color: #8a8297; font: 1rem "Segoe UI"; text-align: center; }
.customer-nav:hover, .customer-nav.active { color: var(--purple-dark); background: var(--purple-pale); }
.customer-nav.active { font-weight: 800; }
.customer-nav.active span { color: var(--purple); }
.sidebar-help { margin-top: auto; padding: 1.1rem; display: grid; gap: .5rem; border-radius: 15px; background: linear-gradient(145deg, #f0ebff, #faf8ff); }
.sidebar-help > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--purple); font-weight: 800; }
.sidebar-help b { font-size: .7rem; }
.sidebar-help small { color: var(--muted); font-size: .58rem; line-height: 1.8; }
.logout-link { margin-top: .9rem; padding: .65rem; border: 0; color: #d44d5b; background: none; text-align: right; font-size: .7rem; }
.customer-workspace { min-height: 100vh; margin-right: 250px; }
.customer-topbar { min-height: 88px; padding: 1rem clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7e3ec; background: rgba(255, 255, 255, .88); backdrop-filter: blur(15px); }
.customer-topbar p { margin: 0 0 .25rem; color: var(--muted); font-size: .62rem; }
.customer-topbar h2, .customer-topbar .ui-h2 { margin: 0; font-size: 1.25rem; }
.customer-profile { display: flex; align-items: center; gap: .75rem; }
.customer-profile > div { display: grid; gap: .2rem; direction: ltr; text-align: right; }
.customer-profile b { font-size: .68rem; }
.customer-profile small { color: var(--muted); font-size: .55rem; }
.customer-profile > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--purple); background: var(--purple-pale); }
.menu-button { display: none; }
.customer-workspace main { padding: 1.7rem clamp(1rem, 3vw, 2.5rem) 3rem; }
.customer-page { display: none; animation: fadeUp .24s ease; }
.customer-page.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } }
.dashboard-metrics { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1rem; }
.dashboard-metrics article { min-height: 126px; padding: 1.2rem; display: flex; align-items: center; gap: .9rem; border: 1px solid #e8e4ee; border-radius: 16px; background: #fff; }
.dashboard-metrics article:not(.balance-metric) div { display: grid; gap: .5rem; }
.dashboard-metrics small { color: var(--muted); font-size: .62rem; }
.dashboard-metrics strong { font: 800 1.45rem "Segoe UI"; }
.dashboard-metrics .balance-metric { position: relative; overflow: hidden; display: flex; justify-content: space-between; color: #fff; border: 0; background: linear-gradient(130deg, #7048e8, #8d66ed); }
.balance-metric::after { content: ""; position: absolute; width: 130px; height: 130px; left: -60px; bottom: -70px; border: 22px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.balance-metric div { display: grid; gap: .6rem; }
.balance-metric span { color: #dbd2f6; font-size: .65rem; }
.balance-metric strong { font-size: 1.3rem; }
.balance-metric button { position: relative; z-index: 2; padding: .45rem .65rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 9px; color: #fff; background: rgba(255, 255, 255, .13); font-size: .58rem; }
.metric-icon { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; font-size: 1.05rem; }
.metric-icon.purple { color: var(--purple); background: var(--purple-pale); }
.metric-icon.amber { color: #bd741c; background: #fff1dc; }
.metric-icon.green { color: var(--green); background: #e5f8f0; }
.quick-order-banner { margin: 1rem 0; min-height: 105px; padding: 1.25rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 17px; color: #fff; background: #161126; }
.quick-order-banner > div { display: flex; align-items: center; gap: 1rem; }
.quick-order-banner > div > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #f6c86d; background: rgba(255, 255, 255, .08); font-size: 1.15rem; }
.quick-order-banner h2, .quick-order-banner .ui-h2 { margin: 0 0 .3rem; font-size: .95rem; }
.quick-order-banner p { margin: 0; color: #a9a2b5; font-size: .64rem; }
.dashboard-panel { border: 1px solid #e8e4ee; border-radius: 17px; background: #fff; }
.panel-heading { min-height: 76px; padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eeeaf2; }
.panel-heading h2, .panel-heading .ui-h2 { margin: 0; font-size: .9rem; }
.panel-heading p { margin: .3rem 0 0; color: var(--muted); font-size: .58rem; }
.text-link { border: 0; color: var(--purple); background: none; font-size: .62rem; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: .9rem 1.1rem; border-bottom: 1px solid #f0edf3; text-align: right; font-size: .65rem; }
th { color: #898292; background: #fbfafc; font-weight: 500; }
tbody tr:last-child td { border-bottom: 0; }
.table-service { display: grid; gap: .25rem; }
.table-service small, .table-date, .table-link { color: var(--muted); font-size: .55rem; }
.table-link { max-width: 180px; overflow: hidden; display: block; direction: ltr; text-overflow: ellipsis; white-space: nowrap; }
.order-badge { display: inline-flex; padding: .32rem .55rem; border-radius: 99px; font-size: .55rem; }
.order-badge.completed { color: #168358; background: #e3f8ef; }
.order-badge.processing, .order-badge.pending, .order-badge.submitting { color: #a46513; background: #fff1d9; }
.order-badge.failed, .order-badge.canceled { color: #c54552; background: #ffe8ea; }
.order-badge.partial, .order-badge.manual_review { color: #6640c6; background: #eee9ff; }
.customer-empty { min-height: 220px; padding: 2rem; display: grid; place-items: center; align-content: center; gap: .5rem; text-align: center; }
.customer-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--purple); background: var(--purple-pale); font-size: 1.25rem; }
.customer-empty b { font-size: .78rem; }.customer-empty p { margin: 0; color: var(--muted); font-size: .62rem; }
.page-intro { min-height: 70px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.page-intro h2, .page-intro .ui-h2 { margin: 0; font-size: 1.15rem; }.page-intro p { margin: .35rem 0 0; color: var(--muted); font-size: .63rem; }
.services-page-intro { margin-bottom: 1.35rem; }
.page-eyebrow { display: block; margin-bottom: .45rem; color: var(--purple); font-size: .58rem; font-weight: 800; }
.services-browser-layout { display: grid; grid-template-columns: minmax(0, 1fr) 238px; grid-template-areas: "results categories"; align-items: start; gap: 1rem; }
.service-category-panel { grid-area: categories; position: sticky; top: 94px; overflow: hidden; max-height: calc(100vh - 116px); border: 1px solid #e4e6ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgba(39, 41, 74, .045); }
.service-category-heading { min-height: 82px; padding: 1rem; display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid #eceef5; background: linear-gradient(145deg, #fbfaff, #f5f2ff); }
.service-category-heading > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--social-gradient); box-shadow: 0 8px 20px rgba(104, 84, 237, .22); }
.service-category-heading h3 { margin: 0; font-size: .78rem; }.service-category-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .52rem; }
.service-category-list { max-height: calc(100vh - 200px); padding: .55rem; display: grid; gap: .2rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9d4ed transparent; }
.service-category-list button { width: 100%; min-height: 42px; padding: .55rem .65rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 0; border-radius: 10px; color: #686d80; background: transparent; text-align: right; font-size: .58rem; font-weight: 700; transition: color .18s, background .18s, transform .18s; }
.service-category-list button:hover { color: #5141bd; background: #f6f3ff; transform: translateX(-2px); }
.service-category-list button.active { color: #fff; background: var(--social-gradient); box-shadow: 0 9px 22px rgba(104, 84, 237, .2); }
.service-category-list .category-arrow { font-style: normal; font-size: .85rem; opacity: .65; }
.service-category-mobile { display: none; }
.service-results-column { grid-area: results; min-width: 0; }
.service-results-toolbar { min-height: 66px; margin-bottom: 1rem; padding: .65rem .75rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: 1px solid #e4e6ef; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(39, 41, 74, .035); }
.service-search-box { width: min(100%, 520px); position: relative; display: block; }
.service-search-box > span { position: absolute; top: 50%; right: .85rem; color: #8d91a2; font-size: 1rem; transform: translateY(-50%); pointer-events: none; }
.service-search-box input { width: 100%; min-height: 44px; padding-right: 2.5rem; border-color: transparent; background: #f6f7fb; font-size: .65rem; }
.service-search-box input:focus { border-color: #cfc7fb; background: #fff; box-shadow: 0 0 0 3px rgba(104, 84, 237, .08); }
.service-results-summary { min-width: 112px; display: grid; gap: .15rem; text-align: left; }.service-results-summary strong { color: var(--ink); font-size: .66rem; }.service-results-summary span { color: var(--muted); font-size: .5rem; }
.customer-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.services-preview-note { margin: 0 0 1rem; padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem; border: 1px solid #e3dcff; border-radius: 14px; color: #504378; background: linear-gradient(120deg, #faf8ff, #f1edff); }
.services-preview-note > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: var(--purple); background: #e6e0ff; }
.services-preview-note b { font-size: .7rem; }.services-preview-note p { margin: .2rem 0 0; color: var(--muted); font-size: .58rem; line-height: 1.8; }
.customer-service-card { min-height: 245px; padding: 1.15rem; display: grid; grid-template-rows: 1fr auto auto; gap: .85rem; border: 1px solid #e8e4ee; border-radius: 18px; background: #fff; }
.customer-service-card.unavailable { border-color: #ebe8f3; background: linear-gradient(145deg, #fff, #fbfaff); }
.customer-service-card:hover { border-color: #d4c8f5; box-shadow: 0 14px 35px rgba(61, 39, 110, .08); }
.customer-service-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.customer-service-head h3, .customer-service-head .customer-service-title { margin: 0; font-size: .73rem; font-weight: 700; line-height: 1.95; }
.customer-service-badges { flex: 0 0 auto; display: grid; justify-items: end; gap: .3rem; }
.customer-service-head span { padding: .25rem .45rem; border-radius: 99px; color: var(--purple); background: var(--purple-pale); font-size: .5rem; }
.customer-service-head .preview-badge { color: #72687f; background: #efedf3; }
.customer-service-info { padding: .7rem .75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; border-radius: 12px; background: #f8f8fc; }
.customer-service-info div { display: grid; gap: .25rem; }
.customer-service-info small { color: var(--muted); font-size: .52rem; }
.customer-service-info b { font-size: .68rem; }
.customer-service-card button { min-height: 44px; border: 0; border-radius: 12px; color: #fff; background: var(--purple); font-size: .64rem; font-weight: 800; box-shadow: 0 9px 20px rgba(104, 84, 237, .18); transition: transform .18s, box-shadow .18s; }
.customer-service-card button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(104, 84, 237, .27); }
.customer-service-card button:disabled { cursor: not-allowed; color: #777184; background: #e9e6ee; box-shadow: none; }
.customer-pagination { min-height: 65px; display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--muted); font-size: .6rem; }
.customer-pagination button { min-height: 35px; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 9px; color: #5e576a; background: #fff; font-size: .6rem; }
.customer-pagination button:disabled { opacity: .4; cursor: not-allowed; }
.wallet-hero { min-height: 180px; margin-bottom: 1rem; padding: 2rem; display: flex; justify-content: space-between; align-items: center; border-radius: 20px; color: #fff; background: linear-gradient(125deg, #6840da, #9470ef); }
.wallet-hero > div { display: grid; gap: .55rem; }.wallet-hero small, .wallet-hero span { color: #dfd7f7; font-size: .62rem; }.wallet-hero strong { font: 800 2rem "Segoe UI"; }
.transaction-amount { direction: ltr; text-align: right; font-weight: 800; }.transaction-amount.positive { color: var(--green); }.transaction-amount.negative { color: #d44d5b; }
.account-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 1rem; }
.account-card { min-height: 320px; padding: 2rem; display: grid; place-items: center; align-content: center; text-align: center; }
.account-avatar { width: 75px; height: 75px; display: grid; place-items: center; border-radius: 24px; color: var(--purple); background: var(--purple-pale); font-size: 2rem; }
.account-card h3, .account-card .ui-h3 { margin: 1rem 0 .3rem; direction: ltr; }.account-card p { margin: 0; color: var(--muted); font-size: .68rem; }.account-status { margin-top: 1rem; display: flex; align-items: center; gap: .4rem; color: var(--green); font-size: .62rem; }.account-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.account-details { padding: 1.5rem; display: grid; gap: 1rem; }.account-details h3, .account-details .ui-h3 { margin: 0 0 .5rem; font-size: .9rem; }.account-details input { background: #f9f8fa; color: #6c6577; }
.notice-box { margin: .5rem 0 0; padding: .9rem; border-radius: 11px; color: #6c5a35; background: #fff6e5; font-size: .62rem; line-height: 1.8; }

.order-dialog { width: min(520px, calc(100% - 2rem)); border-radius: 21px; background: #fff; box-shadow: 0 35px 90px rgba(10, 5, 24, .3); }
.order-dialog form { padding: 1.5rem; display: grid; gap: 1rem; }
.reset-dialog-body { padding: 1.5rem; display: grid; gap: 1rem; }
.reset-dialog-body .reset-step { padding: 0; }
.reset-help { margin: 0; color: var(--muted); font-size: .68rem; line-height: 2; }
.order-dialog-head { position: relative; padding-left: 2.5rem; }.order-dialog-head p { margin: 0 0 .3rem; color: var(--purple); font-size: .6rem; }.order-dialog-head h2, .order-dialog-head .ui-h2 { margin: 0; font-size: .95rem; line-height: 1.7; }
.order-service-meta { padding: .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; border-radius: 12px; background: var(--soft); }.order-service-meta span { color: var(--muted); font-size: .55rem; }.order-service-meta strong { text-align: left; font-size: .62rem; }
.order-total { padding: .9rem 1rem; display: flex; justify-content: space-between; align-items: center; border: 1px dashed #cfc2f4; border-radius: 12px; background: #faf8ff; }.order-total span { color: var(--muted); font-size: .62rem; }.order-total strong { color: var(--purple); font-size: .9rem; }
.site-toast { position: fixed; z-index: 100; left: 1.2rem; bottom: 1.2rem; max-width: min(360px, calc(100% - 2.4rem)); padding: .85rem 1rem; border-radius: 12px; color: #fff; background: #211936; box-shadow: 0 20px 50px rgba(18, 10, 38, .25); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .25s; font-size: .68rem; line-height: 1.7; }
.site-toast.show { opacity: 1; transform: none; }.site-toast.error { background: #842f3b; }

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .site-header { justify-content: space-between; }
  .hero { gap: 2rem; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
  .customer-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .hero { padding-top: 55px; grid-template-columns: 1fr; text-align: center; }
  .hero-copy { display: grid; justify-items: center; }.hero-actions, .hero-points { justify-content: center; }
  .hero-visual { min-height: 500px; width: min(100%, 560px); margin-inline: auto; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); padding-block: 1rem; }.trust-strip > div:nth-child(2) { border-left: 0; }
  .why-layout, .api-banner, .faq-section { grid-template-columns: 1fr; }
  .api-banner { gap: 2rem; }.faq-section { gap: 1rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-sidebar { width: 230px; transform: translateX(100%); transition: .25s; box-shadow: -20px 0 50px rgba(25, 16, 45, .13); }.customer-sidebar.open { transform: none; }
  .customer-workspace { margin-right: 0; }.menu-button { width: 35px; height: 35px; margin-left: .6rem; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.customer-topbar > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; }.customer-topbar p { grid-column: 2; }.customer-topbar h2, .customer-topbar .ui-h2 { grid-column: 2; }
  .account-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .section-shell { width: min(100% - 1.5rem, 1180px); }
  .site-header { min-height: 67px; padding-inline: .75rem; }.site-brand small { display: none; }.brand-symbol { width: 37px; height: 37px; }.header-actions { gap: .35rem; }.button.small { padding-inline: .7rem; }
  .hero { min-height: auto; padding-block: 45px; }.hero h1 { font-size: 2.5rem; }.hero-lead { font-size: .84rem; }.hero-visual { min-height: 410px; }.preview-window { transform: none; }.floating-card { display: none; }
  .trust-strip { padding-inline: .75rem; }.trust-strip > div { padding: .5rem 1rem; }
  .content-section, .why-section { padding-block: 70px; }.service-grid { grid-template-columns: 1fr; }.service-card { min-height: 250px; }.service-card p { min-height: auto; }
  .why-panel { min-height: 330px; }.chart-bars { height: 170px; }
  .steps-grid { grid-template-columns: 1fr; gap: 2.5rem; }.steps-grid::before { top: 8%; bottom: 8%; right: 50%; left: auto; height: auto; border-top: 0; border-right: 2px dashed #ded7eb; }.steps-grid article { background: #fff; }
  .api-banner { width: calc(100% - 1.5rem); padding: 2rem 1.2rem; border-radius: 21px; }.code-card pre { font-size: .65rem; }
  .final-cta { margin-bottom: 60px; padding: 2rem 1.2rem; flex-direction: column; align-items: flex-start; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }.footer-grid > div:first-child { grid-column: 1 / -1; }.footer-bottom { gap: 1rem; flex-direction: column; justify-content: center; text-align: center; }
  .auth-layout { grid-template-columns: 1fr; }.auth-layout aside { display: none; }.auth-layout > section { min-height: 560px; padding: 1.2rem; }.auth-tabs { margin-left: 2.8rem; }
  .customer-topbar { min-height: 75px; padding: .7rem .8rem; }.customer-profile > div { display: none; }.customer-workspace main { padding: 1rem .75rem 2rem; }.dashboard-metrics { grid-template-columns: 1fr 1fr; gap: .7rem; }.dashboard-metrics article { min-height: 105px; padding: .9rem; }.dashboard-metrics .balance-metric { grid-column: 1 / -1; }.quick-order-banner { align-items: stretch; flex-direction: column; }.quick-order-banner > div > span { display: none; }.page-intro { align-items: stretch; flex-direction: column; }.service-filters { grid-template-columns: 1fr; }.customer-services-grid { grid-template-columns: 1fr; }.wallet-hero { min-height: 200px; align-items: flex-start; flex-direction: column; }.wallet-hero strong { font-size: 1.7rem; }
}

/* Right-side navigation and category browser */
@media (min-width: 821px) {
  .customer-sidebar { top: 0; right: 0; bottom: 0; left: auto; width: 250px; height: auto; padding: 1.25rem 1rem; align-items: stretch; flex-direction: column; border-left: 0; border-bottom: 0; color: #d7d9e8; background: radial-gradient(circle at 15% 8%, rgba(151, 55, 238, .3), transparent 28%), linear-gradient(180deg, #15122f, #0c0e22); box-shadow: -18px 0 55px rgba(15, 17, 44, .1); backdrop-filter: none; }
  .customer-sidebar .dashboard-brand { display: flex; }
  .customer-sidebar .dashboard-brand strong { color: #fff; }
  .customer-sidebar .dashboard-brand small { color: #aaa7bd; }
  .customer-sidebar nav { display: grid; gap: .38rem; }
  .customer-nav { min-height: 52px; padding: .75rem .9rem; color: #aaa9bd; border-radius: 14px; font-size: .68rem; }
  .customer-nav:hover, .customer-nav.active { color: #fff; background: linear-gradient(100deg, rgba(150, 55, 238, .55), rgba(237, 36, 155, .24)); }
  .customer-nav.active { box-shadow: inset -3px 0 #e955c5; }
  .customer-sidebar .sidebar-help { margin-top: auto; display: grid; }
  .customer-sidebar .logout-link { display: block; }
  .customer-profile .mobile-logout-button { display: none; }
  .customer-workspace { margin-right: 250px; }
  .customer-workspace main { padding: 1.8rem clamp(1rem, 2.3vw, 2rem) 3rem; }
  .customer-topbar { position: sticky; z-index: 20; top: 0; }
}

/* Final public hero overrides */
#public-site .hero { padding-top: 62px; }
#public-site .hero-copy { width: min(100%, 840px); }
#public-site .hero h1 { max-width: 820px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.48; }
#public-site .hero-lead { max-width: 735px; margin-top: .9rem; }
#public-site .hero-actions { margin-top: 1.45rem; }
#public-site .hero-points { margin-top: 1.2rem; }
#public-site .hero-visual { width: min(100%, 860px); min-height: 390px; margin-top: 2.15rem; }
#public-site .hero-visual::before { inset: 7% 3% 0; }
#public-site .preview-window { width: min(calc(100% - 2rem), 780px); padding: 1rem; background: #fff; box-shadow: 0 25px 65px rgba(72, 39, 91, .14); }
#public-site .preview-balance { min-height: 125px; color: #4b225d; background: linear-gradient(115deg, #f4e5ff, #ffe7f4); box-shadow: inset 0 0 0 1px rgba(183, 108, 221, .08); }
#public-site .preview-balance small { color: #795b83; opacity: 1; }
#public-site .preview-balance strong { color: #8b2ddd; }
#public-site .preview-balance button { color: #6d397e; border-color: #ddc4e8; background: rgba(255,255,255,.72); }
#public-site .preview-order { background: #fbf9fc; }
#public-site .floating-card { width: auto; max-width: 190px; padding: .62rem .75rem; background: rgba(255,255,255,.98); }
#public-site .floating-one { right: -1rem; left: auto; top: 11%; }
#public-site .floating-two { right: auto; left: -.8rem; bottom: 8%; }

@media (max-width: 700px) {
  #public-site .hero { padding-top: 42px; }
  #public-site .hero h1 { font-size: clamp(1.75rem, 8.2vw, 2.25rem); line-height: 1.55; }
  #public-site .hero-visual { min-height: 350px; margin-top: 1.6rem; }
  #public-site .preview-window { width: 100%; }
}

/* Hero polish: compact composition and non-stretched floating notices */
#public-site .hero { padding-top: 62px; }
#public-site .hero-copy { width: min(100%, 840px); }
#public-site .hero h1 { max-width: 820px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.48; }
#public-site .hero-lead { max-width: 735px; margin-top: .9rem; }
#public-site .hero-actions { margin-top: 1.45rem; }
#public-site .hero-points { margin-top: 1.2rem; }
#public-site .hero-visual { width: min(100%, 860px); min-height: 390px; margin-top: 2.15rem; }
#public-site .hero-visual::before { inset: 7% 3% 0; }
#public-site .preview-window { width: min(calc(100% - 2rem), 780px); padding: 1rem; background: #fff; box-shadow: 0 25px 65px rgba(72, 39, 91, .14); }
#public-site .preview-balance { min-height: 125px; color: #4b225d; background: linear-gradient(115deg, #f4e5ff, #ffe7f4); box-shadow: inset 0 0 0 1px rgba(183, 108, 221, .08); }
#public-site .preview-balance small { color: #795b83; opacity: 1; }
#public-site .preview-balance strong { color: #8b2ddd; }
#public-site .preview-balance button { color: #6d397e; border-color: #ddc4e8; background: rgba(255,255,255,.72); }
#public-site .preview-order { background: #fbf9fc; }
#public-site .floating-card { width: auto; max-width: 190px; padding: .62rem .75rem; background: rgba(255,255,255,.98); }
#public-site .floating-one { right: -1rem; left: auto; top: 11%; }
#public-site .floating-two { right: auto; left: -.8rem; bottom: 8%; }

@media (max-width: 700px) {
  #public-site .hero { padding-top: 42px; }
  #public-site .hero h1 { font-size: clamp(1.75rem, 8.2vw, 2.25rem); line-height: 1.55; }
  #public-site .hero-visual { min-height: 350px; margin-top: 1.6rem; }
  #public-site .preview-window { width: 100%; }
}

/* 2026 public landing — aligned with the dashboard design language */
#public-site { --landing-purple: #8d35ee; --landing-pink: #ed249b; --landing-ink: #211827; background: #fcfbfd; }
#public-site .site-header { min-height: 76px; padding-inline: max(1rem, calc((100% - 1180px) / 2)); gap: 2rem; border-bottom-color: #eee8f2; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 30px rgba(75, 41, 98, .035); }
#public-site .brand-symbol { border-radius: 15px; background: linear-gradient(135deg, var(--landing-purple), var(--landing-pink)); box-shadow: 0 10px 24px rgba(156, 49, 220, .2); }
#public-site .desktop-nav { margin-inline: auto; gap: 1.7rem; }
#public-site .desktop-nav a { color: #625967; font-size: .67rem; }
#public-site .desktop-nav a:hover { color: #9b31df; }
#public-site .header-actions { gap: .55rem; }
#public-site .header-actions .button { min-height: 42px; border-radius: 13px; }
#public-site .header-actions .primary { padding-inline: 1.25rem; background: linear-gradient(110deg, var(--landing-purple), var(--landing-pink)); box-shadow: 0 9px 24px rgba(213, 40, 164, .18); }

#public-site .hero { min-height: 610px; padding: 54px 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); text-align: right; }
#public-site .hero::before { content: ""; position: absolute; z-index: -1; top: 0; right: 50%; width: 900px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 189, 255, .32), rgba(252, 228, 246, .15) 48%, transparent 72%); transform: translateX(50%); pointer-events: none; }
#public-site .hero-copy { width: 100%; display: grid; justify-items: start; }
#public-site .hero .kicker { padding: .42rem .72rem; border: 1px solid #eadff1; border-radius: 999px; color: #8f3bd3; background: rgba(255,255,255,.8); box-shadow: 0 6px 20px rgba(98, 58, 122, .05); }
#public-site .hero .kicker > span { width: auto; height: auto; color: #bc43d9; background: none; }
#public-site .hero h1 { max-width: 570px; font-size: clamp(1.9rem, 3vw, 2.55rem); line-height: 1.55; letter-spacing: -.03em; }
#public-site .hero h1 em { white-space: normal; }
#public-site .hero h1 em::after { display: none; }
#public-site .hero-lead { max-width: 570px; margin: 1rem 0 0; font-size: .78rem; line-height: 2.15; }
#public-site .hero-actions { margin-top: 1.4rem; justify-content: flex-start; }
#public-site .hero-actions .button { min-width: 180px; min-height: 54px; border-radius: 17px; }
#public-site .hero-actions .primary { background: linear-gradient(110deg, var(--landing-purple), var(--landing-pink)); box-shadow: 0 13px 32px rgba(211, 39, 165, .2); }
#public-site .hero-actions .soft { color: #302537; border: 1px solid #e7dfea; background: #fff; box-shadow: 0 10px 28px rgba(67, 38, 84, .07); }
#public-site .hero-points { margin-top: 1.15rem; justify-content: flex-start; }
#public-site .hero-points i { color: #22a976; background: #e6f8ef; }
#public-site .hero-visual { width: 100%; min-height: 475px; margin: 0; }
#public-site .hero-visual::before { inset: 6% 1% 3% 5%; border: 1px solid rgba(229, 205, 240, .55); border-radius: 38px; background: linear-gradient(145deg, rgba(248, 229, 255, .9), rgba(255, 237, 248, .8)); transform: rotate(-1.5deg); }
#public-site .glow-orb { width: 540px; height: 280px; background: rgba(183, 105, 244, .13); filter: blur(12px); }
#public-site .preview-window { width: min(calc(100% - 1.5rem), 500px); padding: 1rem; border-color: #ede4f1; border-radius: 23px; background: #fff; box-shadow: 0 25px 65px rgba(72, 39, 91, .14); transform: none; }
#public-site .preview-head { padding-inline: .3rem; }
#public-site .preview-balance { min-height: 125px; padding: 1.15rem 1.25rem; border-radius: 18px; color: #4b225d; background: linear-gradient(115deg, #f4e5ff, #ffe7f4); box-shadow: inset 0 0 0 1px rgba(183, 108, 221, .08); }
#public-site .preview-balance small { color: #795b83; opacity: 1; }
#public-site .preview-balance strong { color: #8e2fe1; }
#public-site .preview-balance button { color: #6d397e; border-color: #ddc4e8; background: rgba(255,255,255,.72); }
#public-site .preview-order { padding: 1rem 1.15rem; }
#public-site .floating-card { width: auto; max-width: 190px; padding: .62rem .75rem; border: 1px solid #eee5f1; border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 15px 36px rgba(71, 42, 87, .1); }
#public-site .floating-one { top: 10%; right: auto; left: -1rem; }
#public-site .floating-two { right: -.8rem; left: auto; bottom: 7%; }

#public-site .trust-strip { width: min(calc(100% - 2rem), 1180px); min-height: 105px; margin: 0 auto; padding: 0 1rem; border: 1px solid #e7dff0; border-radius: 24px; color: var(--landing-ink); background: #fff; box-shadow: 0 15px 42px rgba(70, 40, 90, .06); }
#public-site .trust-strip > div { border-left-color: #eee7f1; }
#public-site .trust-strip strong { color: #9534e2; }
#public-site .trust-strip span { color: #746b7b; }

#public-site .content-section, #public-site .why-section { padding-block: 95px; }
#public-site .section-heading { margin-bottom: 2.2rem; }
#public-site .section-heading h2, #public-site .api-copy h2, #public-site .final-cta h2, #public-site .landing-section-title { color: var(--landing-ink); font-size: clamp(1.65rem, 2.5vw, 2.25rem); }
#public-site .section-heading > p:last-child { max-width: 690px; margin-inline: auto; }
#public-site .service-grid { gap: 1rem; }
#public-site .service-card { min-height: 360px; padding: 1.35rem; display: flex; flex-direction: column; border-color: #e8e1ec; border-radius: 24px; box-shadow: 0 10px 30px rgba(74, 43, 92, .045); }
#public-site .service-card:hover { transform: translateY(-5px); border-color: #ddcbea; box-shadow: 0 20px 45px rgba(84, 45, 108, .1); }
#public-site .service-icon, #public-site .service-icon img { width: 52px; height: 52px; border-radius: 16px; }
#public-site .service-card h3 { margin-top: 1rem; }
#public-site .service-card p { min-height: 66px; }
#public-site .service-card ul { margin: .1rem 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; }
#public-site .service-card li { padding: .3rem .52rem; border-radius: 999px; color: #756b7b; background: #f7f2f9; font-size: .5rem; }
#public-site .service-card button { width: 100%; min-height: 43px; margin-top: auto; border-radius: 13px; color: #fff; background: linear-gradient(110deg, var(--landing-purple), var(--landing-pink)); }

#public-site .live-catalog-section { padding-block: 95px; background: radial-gradient(circle at 85% 5%, rgba(180, 113, 242, .12), transparent 30%), #f8f4fb; }
#public-site .catalog-heading { align-items: flex-end; }
#public-site .catalog-heading .button { border-radius: 15px; background: linear-gradient(110deg, var(--landing-purple), var(--landing-pink)); }
#public-site .catalog-chips { padding-bottom: .4rem; }
#public-site .catalog-chips button { border-color: #e5dce9; border-radius: 999px; background: #fff; }
#public-site .catalog-chips button.active { color: #fff; border-color: transparent; background: linear-gradient(110deg, var(--landing-purple), var(--landing-pink)); }
#public-site .public-service-card { border-color: #e6deea; border-radius: 22px; box-shadow: 0 10px 30px rgba(75, 42, 95, .045); }
#public-site .public-service-card > button { border-radius: 14px; background: linear-gradient(110deg, var(--landing-purple), var(--landing-pink)); }

#public-site .seo-copy-section { gap: 1rem; }
#public-site .seo-copy-main, #public-site .seo-note-card { border: 1px solid #e8e0ec; border-radius: 24px; background: #fff; box-shadow: 0 12px 34px rgba(76, 43, 94, .05); }
#public-site .seo-copy-main { padding: 1.7rem; }
#public-site .seo-note-card { background: linear-gradient(145deg, #211634, #391c57); }

#public-site .why-section { background: #fff; }
#public-site .why-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
#public-site .why-feature-grid article { min-height: 190px; padding: 1.35rem; border: 1px solid #e8e1ec; border-radius: 22px; background: #fcfafd; box-shadow: 0 9px 27px rgba(73, 42, 90, .035); }
#public-site .why-feature-grid article > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #9234df; background: #f5e9fc; font: 800 .75rem "Segoe UI", sans-serif; }
#public-site .why-feature-grid article > span svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#public-site .why-feature-grid h3, #public-site .why-feature-grid .landing-card-title { margin: .85rem 0 .35rem; font-size: .85rem; font-weight: 900; }
#public-site .why-feature-grid p { margin: 0; color: #746b7b; font-size: .63rem; line-height: 2; }

#public-site .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
#public-site .steps-grid::before { right: 12%; left: 12%; border-color: #e1d6e8; }
#public-site .steps-grid article { min-height: 235px; padding: 1.3rem 1rem; border: 1px solid #e8e1ec; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(73, 41, 91, .04); }
#public-site .steps-grid .step-number { top: 1rem; right: 1rem; color: #a238df; background: #f5e9fc; }
#public-site .step-icon { margin-top: .7rem; color: #fff; background: linear-gradient(135deg, var(--landing-purple), var(--landing-pink)); box-shadow: 0 11px 25px rgba(178, 47, 207, .18); }
#public-site .step-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

#public-site .api-banner { border-radius: 28px; background: radial-gradient(circle at 10% 10%, rgba(237, 36, 155, .25), transparent 30%), linear-gradient(125deg, #6b2cdd, #3d1b71); }
#public-site .api-copy .landing-section-title { color: #fff; }
#public-site .faq-section { gap: 3rem; }
#public-site .faq-list details { border-color: #e7dfea; border-radius: 17px; box-shadow: 0 8px 24px rgba(73, 41, 91, .035); }
#public-site .final-cta { border-radius: 28px; background: radial-gradient(circle at 85% 10%, rgba(224, 58, 180, .28), transparent 30%), linear-gradient(120deg, #29143d, #4d1d68); }
#public-site .final-cta h2, #public-site .final-cta .landing-section-title { color: #fff; }
#public-site .site-footer { background: #15101e; }

@media (max-width: 1020px) {
  #public-site .desktop-nav { display: none; }
  #public-site .site-menu-toggle { display: grid; margin-right: auto; }
  #public-site .hero { min-height: 0; padding: 60px 0 0; display: flex; align-items: center; flex-direction: column; gap: 0; text-align: center; }
  #public-site .hero-copy { width: min(100%, 760px); justify-items: center; }
  #public-site .hero h1, #public-site .hero-lead { max-width: 720px; }
  #public-site .hero-lead { margin-inline: auto; }
  #public-site .hero-actions, #public-site .hero-points { justify-content: center; }
  #public-site .hero-visual { width: min(100%, 760px); min-height: 390px; margin-top: 2rem; }
  #public-site .preview-window { width: min(calc(100% - 2rem), 680px); }
  #public-site .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #public-site .why-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #public-site .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #public-site .steps-grid::before { display: none; }
}

@media (max-width: 700px) {
  #public-site .site-header { min-height: 70px; gap: .55rem; }
  #public-site .site-brand small { display: none; }
  #public-site .header-actions .ghost { display: none; }
  #public-site .header-actions .primary { min-height: 40px; padding-inline: .85rem; }
  #public-site .hero { padding: 42px .85rem 0; }
  #public-site .hero h1 { font-size: clamp(1.75rem, 8.2vw, 2.25rem); line-height: 1.55; }
  #public-site .hero-lead { font-size: .7rem; }
  #public-site .hero-actions { width: 100%; grid-template-columns: 1fr; }
  #public-site .hero-actions .button { width: 100%; }
  #public-site .hero-points { gap: .65rem; }
  #public-site .hero-points span { font-size: .52rem; }
  #public-site .hero-visual { min-height: 350px; margin-top: 1.6rem; }
  #public-site .hero-visual::before { inset-inline: -.5rem; border-radius: 28px 28px 0 0; }
  #public-site .preview-window { width: 100%; padding: .7rem; border-radius: 19px; }
  #public-site .preview-balance { padding: .85rem; }
  #public-site .preview-order { padding: .7rem; }
  #public-site .floating-card { display: none; }
  #public-site .trust-strip { grid-template-columns: repeat(2, 1fr); padding-block: .6rem; }
  #public-site .trust-strip > div { min-height: 65px; padding: .5rem; }
  #public-site .trust-strip > div:nth-child(2) { border-left: 0; }
  #public-site .service-grid, #public-site .why-feature-grid, #public-site .steps-grid { grid-template-columns: 1fr; }
  #public-site .service-card { min-height: 325px; }
  #public-site .why-feature-grid article { min-height: 170px; }
  #public-site .steps-grid article { min-height: 210px; }
  #public-site .catalog-heading { align-items: stretch; }
}

.service-catalog-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); grid-template-areas: "category catalog"; align-items: start; gap: 1rem; }
.service-catalog-main { min-width: 0; grid-area: catalog; }
.service-category-panel { position: sticky; top: 106px; grid-area: category; max-height: calc(100vh - 126px); padding: .9rem; overflow: hidden; border: 1px solid #e6dfec; border-radius: 21px; background: rgba(255, 255, 255, .98); box-shadow: 0 12px 32px rgba(69, 43, 91, .05); }
.category-panel-heading { padding: .2rem .15rem .85rem; display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid #eee8f2; }
.category-panel-heading > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--dash-purple), var(--dash-pink)); }
.category-panel-heading > div { display: grid; gap: .12rem; }
.category-panel-heading b { font-size: .7rem; }
.category-panel-heading small { color: #847b8b; font-size: .5rem; }
.service-category-mobile { display: none; }
.service-category-list { max-height: calc(100vh - 225px); padding: .65rem .15rem .15rem; display: grid; gap: .25rem; overflow-y: auto; scrollbar-width: thin; }
.service-category-list button { width: 100%; min-height: 40px; padding: .5rem .65rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 0; border-radius: 11px; color: #6f6775; background: transparent; text-align: right; font-size: .55rem; font-weight: 700; }
.service-category-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-category-list button:hover { color: #842bd0; background: #f8effd; }
.service-category-list button.active { color: #fff; background: linear-gradient(110deg, var(--dash-purple), var(--dash-pink)); box-shadow: 0 8px 18px rgba(177, 43, 211, .16); }
.service-category-list .category-arrow { flex: 0 0 auto; font: 800 .9rem "Segoe UI"; }

@media (max-width: 1180px) and (min-width: 821px) {
  .service-catalog-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .customer-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .service-catalog-layout { display: flex; flex-direction: column; }
  .service-category-panel { position: static; width: 100%; max-height: none; padding: .75rem; }
  .category-panel-heading, .service-category-list { display: none; }
  .service-category-mobile { display: grid; gap: .4rem; color: #706778; font-size: .56rem; }
  .service-category-mobile select { width: 100%; min-height: 48px; padding: .55rem .75rem; border: 1px solid #e3dbea; border-radius: 14px; color: #302738; background: #faf7fc; font: inherit; }
  .service-catalog-main { width: 100%; }
}

/* 2026 premium social-commerce refresh */
:root {
  --ink: #12152b;
  --muted: #687086;
  --line: #e7e9f2;
  --soft: #f6f7fb;
  --purple: #6854ed;
  --purple-dark: #4d3ac8;
  --purple-pale: #eeecff;
  --night: #0d1025;
  --social-gradient: linear-gradient(135deg, #6b54ed 0%, #8b5cf6 45%, #ec4899 100%);
  --social-shadow: 0 22px 55px rgba(83, 63, 190, .2);
}

html { scroll-padding-top: 92px; }
html, body { overflow-x: clip; }
body { background: #fff; text-rendering: optimizeLegibility; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(104, 84, 237, .28);
  outline-offset: 3px;
}
.site-header {
  min-height: 82px;
  border-bottom-color: rgba(221, 224, 238, .72);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 35px rgba(24, 25, 56, .04);
}
.brand-symbol { background: var(--social-gradient); box-shadow: 0 12px 30px rgba(104, 84, 237, .3); }
.desktop-nav a { position: relative; padding-block: .8rem; font-weight: 700; }
.desktop-nav a::after { content: ""; position: absolute; right: 50%; left: 50%; bottom: .35rem; height: 2px; border-radius: 2px; background: var(--social-gradient); transition: .2s; }
.desktop-nav a:hover::after { right: 0; left: 0; }
.button.primary { background: var(--social-gradient); box-shadow: var(--social-shadow); }
.button.primary:hover { background: linear-gradient(135deg, #755cf3, #925df7 48%, #ef5aa3); }
.site-menu-toggle { width: 42px; height: 42px; padding: 10px; display: none; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.site-menu-toggle span { height: 2px; border-radius: 3px; background: var(--ink); transition: .2s; }
.site-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-site-nav { position: absolute; z-index: 31; top: calc(100% + 10px); right: max(1rem, calc((100% - 1180px) / 2)); left: max(1rem, calc((100% - 1180px) / 2)); padding: .75rem; display: none; grid-template-columns: repeat(2, 1fr); gap: .45rem; border: 1px solid rgba(225, 227, 238, .9); border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: 0 25px 70px rgba(24, 22, 54, .16); backdrop-filter: blur(20px); }
.mobile-site-nav.open { display: grid; }
.mobile-site-nav a { padding: .85rem; border-radius: 11px; color: #4e5368; background: #f8f8fc; font-size: .75rem; font-weight: 700; }
.mobile-site-nav a:hover { color: var(--purple); background: var(--purple-pale); }

.hero { position: relative; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; right: -420px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(107, 84, 237, .13), transparent 68%); }
.hero h1 { letter-spacing: -.045em; }
.hero h1 em { background: linear-gradient(100deg, #5c47dc, #9a5af4 55%, #e84d97); -webkit-background-clip: text; background-clip: text; color: transparent; }
.preview-window { border-color: rgba(255, 255, 255, .94); box-shadow: 0 45px 110px rgba(67, 49, 133, .2); }
.preview-balance { background: var(--social-gradient); }
.trust-strip { background: radial-gradient(circle at 20% 10%, #24204f, transparent 36%), linear-gradient(120deg, #0d1025, #151834); }
.trust-strip strong { color: #c7bfff; }

.live-catalog-section { padding-block: 100px; background: radial-gradient(circle at 90% 0, rgba(104, 84, 237, .12), transparent 30%), #f7f8fc; }
.catalog-heading { margin-bottom: 1.6rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.catalog-heading h2 { margin: 0; font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.5; letter-spacing: -.025em; }
.catalog-heading p:last-child { max-width: 700px; margin: .75rem 0 0; color: var(--muted); line-height: 2; font-size: .82rem; }
.catalog-chips { margin-bottom: 1.2rem; display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; }
.catalog-chips::-webkit-scrollbar { display: none; }
.catalog-chips button { flex: 0 0 auto; min-height: 38px; padding: .45rem .85rem; border: 1px solid #e1e3ed; border-radius: 999px; color: #656b7e; background: #fff; font-size: .68rem; font-weight: 700; }
.catalog-chips button.active { color: #fff; border-color: transparent; background: var(--social-gradient); box-shadow: 0 10px 25px rgba(104, 84, 237, .2); }
.public-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.public-service-card { position: relative; overflow: hidden; min-height: 245px; padding: 1.2rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: .85rem; border: 1px solid #e3e5ef; border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 45px rgba(41, 43, 78, .06); transition: transform .25s, box-shadow .25s, border-color .25s; }
.public-service-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--social-gradient); }
.public-service-card.telegram::before { background: linear-gradient(90deg, #229ed9, #53c5f5); }
.public-service-card.youtube::before { background: linear-gradient(90deg, #ff2f49, #ff765f); }
.public-service-card.tiktok::before { background: linear-gradient(90deg, #19e7db, #151522 48%, #ff3d79); }
.public-service-card:hover { transform: translateY(-5px); border-color: #d6d0fb; box-shadow: 0 24px 60px rgba(59, 49, 119, .13); }
.public-service-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.public-service-head small { max-width: 70%; overflow: hidden; padding: .32rem .58rem; border-radius: 999px; color: #6c638f; background: #f1effc; text-overflow: ellipsis; white-space: nowrap; font-size: .55rem; }
.public-service-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--social-gradient); font: 800 1rem "Segoe UI"; }
.public-service-icon img { border-radius: 13px; }
.telegram .public-service-icon { background: linear-gradient(135deg, #229ed9, #66ccf4); }
.youtube .public-service-icon { background: linear-gradient(135deg, #ff2e46, #ff795f); }
.tiktok .public-service-icon { background: linear-gradient(135deg, #181828, #ff3d79); }
.public-service-card h3 { margin: 0; min-height: 48px; font-size: .82rem; line-height: 1.9; }
.public-service-details { padding: .75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; border-radius: 13px; background: #f7f7fb; }
.public-service-details div { display: grid; gap: .32rem; }
.public-service-details small { color: var(--muted); font-size: .53rem; }
.public-service-details strong { font-size: .68rem; }
.public-service-card > button { min-height: 40px; border: 0; border-radius: 11px; color: #fff; background: var(--social-gradient); font-size: .65rem; font-weight: 900; text-shadow: 0 1px 1px rgba(42, 13, 72, .22); }
.public-service-card > button:hover { color: #fff; filter: brightness(.94); }
.public-service-card.unavailable { background: linear-gradient(145deg, #fff, #fafafe); }
.public-service-card.unavailable::after { content: "پیش‌نمایش"; position: absolute; left: .9rem; top: .9rem; padding: .25rem .45rem; border-radius: 999px; color: #7a708f; background: #f0eef5; font-size: .5rem; font-weight: 800; }
.public-service-card.unavailable .public-service-details strong { color: #7a718b; font-size: .61rem; }
.catalog-skeleton { min-height: 245px; border-radius: 20px; background: linear-gradient(100deg, #eceef5 20%, #f8f9fc 40%, #eceef5 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position-x: -200%; } }
.catalog-status { margin: 1.2rem 0 0; color: var(--muted); text-align: center; font-size: .72rem; }

.seo-copy-section { padding-block: 105px; display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: clamp(2rem, 7vw, 6rem); }
.seo-copy-main h2 { max-width: 760px; margin: 0; font-size: clamp(1.65rem, 2.6vw, 2.25rem); line-height: 1.6; letter-spacing: -.025em; }
.seo-copy-main > p:not(.kicker) { margin: 1rem 0 0; color: var(--muted); line-height: 2.25; font-size: .82rem; }
.seo-note-card { position: relative; overflow: hidden; padding: 1.6rem; border: 1px solid #e4e0fa; border-radius: 24px; background: linear-gradient(145deg, #faf9ff, #f0edff); box-shadow: var(--social-shadow); }
.seo-note-card::after { content: ""; position: absolute; width: 130px; height: 130px; left: -55px; top: -60px; border: 23px solid rgba(104, 84, 237, .07); border-radius: 50%; }
.seo-note-card > span { color: var(--purple); font-size: .68rem; font-weight: 900; }
.seo-note-card h3 { margin: .55rem 0 1rem; font-size: 1rem; line-height: 1.8; }
.seo-note-card ul { margin: 0 0 1.2rem; padding: 0; display: grid; gap: .75rem; list-style: none; }
.seo-note-card li { position: relative; padding-right: 1.25rem; color: #5f6579; font-size: .7rem; }
.seo-note-card li::before { content: "✓"; position: absolute; right: 0; color: var(--green); font-weight: 900; }

.customer-app { background: #f3f5fa; }
.customer-sidebar { color: #d7d9e8; border-left: 0; background: radial-gradient(circle at 15% 8%, rgba(111, 84, 237, .28), transparent 28%), linear-gradient(180deg, #11142f, #0b0e21); box-shadow: -18px 0 55px rgba(15, 17, 44, .08); }
.customer-sidebar .site-brand strong { color: #fff; }
.customer-sidebar .site-brand small { color: #969bb7; }
.customer-nav { color: #969bb1; }
.customer-nav span { color: #737994; }
.customer-nav:hover, .customer-nav.active { color: #fff; background: linear-gradient(100deg, rgba(111, 84, 237, .35), rgba(236, 72, 153, .13)); }
.customer-nav.active { box-shadow: inset -3px 0 #9e7aff; }
.customer-nav.active span { color: #c7bbff; }
.sidebar-help { border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .05); }
.sidebar-help > span { background: var(--social-gradient); }
.sidebar-help b { color: #fff; }
.sidebar-help small { color: #9297ad; }
.logout-link { color: #ff929d; }
.customer-topbar { position: sticky; z-index: 20; top: 0; border-bottom-color: #e5e7f0; background: rgba(255, 255, 255, .86); box-shadow: 0 8px 30px rgba(39, 41, 74, .035); }
.customer-profile > span { color: #fff; background: var(--social-gradient); box-shadow: 0 8px 22px rgba(104, 84, 237, .22); }
.mobile-logout-button { display: none; }
.dashboard-metrics article, .dashboard-panel, .customer-service-card { border-color: #e4e6ef; box-shadow: 0 12px 35px rgba(39, 41, 74, .045); }
.dashboard-metrics article { position: relative; overflow: hidden; }
.dashboard-metrics article:not(.balance-metric)::after { content: ""; position: absolute; width: 70px; height: 70px; left: -38px; bottom: -40px; border: 14px solid rgba(104, 84, 237, .04); border-radius: 50%; }
.dashboard-metrics .balance-metric, .wallet-hero { background: var(--social-gradient); box-shadow: 0 18px 45px rgba(104, 84, 237, .2); }
.quick-order-banner { background: radial-gradient(circle at 10% 20%, rgba(236, 72, 153, .22), transparent 28%), linear-gradient(120deg, #11142f, #242756); box-shadow: 0 18px 45px rgba(20, 22, 52, .16); }
.customer-service-card { position: relative; overflow: hidden; transition: transform .22s, box-shadow .22s; }
.customer-service-card::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--social-gradient); }
.customer-service-card:hover { transform: translateY(-3px); box-shadow: 0 20px 45px rgba(59, 49, 119, .1); }
.customer-service-card button { background: var(--social-gradient); }
.account-avatar { color: #fff; background: var(--social-gradient); box-shadow: 0 15px 35px rgba(104, 84, 237, .2); }
.auth-layout aside { background: radial-gradient(circle at 20% 15%, rgba(236, 72, 153, .35), transparent 30%), linear-gradient(145deg, #5b45d5, #342079); }
.auth-dialog, .order-dialog { overflow: hidden; }
.payment-dialog { width: min(92vw, 510px); }
.payment-dialog form { display: grid; gap: 1rem; }
.payment-help { margin: 0; color: var(--muted); font-size: .7rem; line-height: 2; }
.payment-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.payment-presets button { min-height: 38px; border: 1px solid #ddd9f5; border-radius: 10px; color: var(--purple-dark); background: #f6f4ff; font-size: .6rem; font-weight: 800; }
.payment-presets button:hover { color: #fff; background: var(--social-gradient); }

@media (max-width: 1050px) {
  .site-menu-toggle { display: grid; margin-right: auto; }
  .public-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-browser-layout { grid-template-columns: minmax(0, 1fr) 205px; }
}

@media (max-width: 820px) {
  .catalog-heading, .seo-copy-section { align-items: stretch; grid-template-columns: 1fr; }
  .catalog-heading { flex-direction: column; }
  .catalog-heading .button { align-self: flex-start; }
  .customer-sidebar { top: auto; right: 0; left: 0; bottom: 0; width: 100%; height: 76px; padding: .45rem; transform: none; border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 -12px 35px rgba(12, 14, 33, .18); }
  .customer-sidebar .dashboard-brand, .customer-sidebar .sidebar-help, .customer-sidebar .logout-link { display: none; }
  .customer-sidebar nav { height: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .2rem; }
  .customer-nav { min-height: 0; padding: .3rem .15rem; justify-content: center; flex-direction: column; gap: .12rem; border-radius: 10px; text-align: center; font-size: .54rem; }
  .customer-nav span { width: auto; font-size: .92rem; }
  .customer-nav.active { box-shadow: inset 0 -2px #a68bff; }
  .customer-workspace main { padding-bottom: 96px; }
  .menu-button { display: none; }
  .mobile-logout-button { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #f0dfe2; border-radius: 11px; color: #d95061; background: #fff3f4; }
  .services-browser-layout { grid-template-columns: 1fr; grid-template-areas: "categories" "results"; }
  .service-category-panel { position: static; max-height: none; }
  .service-category-heading { min-height: 68px; border-bottom: 0; }
  .service-category-list { display: none; }
  .service-category-mobile { padding: 0 1rem 1rem; display: grid; gap: .4rem; }
  .service-category-mobile span { color: var(--muted); font-size: .53rem; }
  .service-category-mobile select { min-height: 43px; background: #fff; font-size: .62rem; }
}

@media (max-width: 620px) {
  html { scroll-behavior: auto; }
  body:has(dialog[open]) { overflow: hidden; }
  .site-header { min-height: 70px; }
  .site-menu-toggle { width: 38px; height: 38px; margin-right: auto; }
  .site-header .header-actions .primary { display: none; }
  .mobile-site-nav { grid-template-columns: 1fr; max-height: calc(100vh - 92px); overflow-y: auto; }
  .hero { padding-top: 38px; }
  .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.35rem); line-height: 1.45; }
  .hero-lead { line-height: 2; }
  .hero-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 380px; }
  .hero-visual .glow-orb { left: 0; }
  .cta-spark { right: 0; }
  .live-catalog-section, .seo-copy-section { padding-block: 70px; }
  .public-services-grid { grid-template-columns: 1fr; }
  .public-service-card { min-height: 225px; }
  .catalog-heading .button { width: 100%; }
  .public-service-details { grid-template-columns: 1fr 1fr; }
  .customer-topbar { min-height: 72px; }
  .dashboard-metrics article { border-radius: 15px; }
  .dashboard-metrics article:not(.balance-metric) { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .quick-order-banner { border-radius: 16px; }
  .panel-heading { padding-inline: .9rem; }
  .service-results-toolbar { align-items: stretch; flex-direction: column; }
  .service-search-box { width: 100%; }
  .service-results-summary { min-width: 0; padding-inline: .2rem; display: flex; align-items: center; justify-content: space-between; text-align: right; }
  .customer-services-grid { grid-template-columns: 1fr; }
  .customer-service-card { min-height: 225px; }
  .auth-dialog, .order-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); margin: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .payment-presets { grid-template-columns: repeat(2, 1fr); }
  .auth-layout { min-height: 0; }
  .auth-layout > section { min-height: 0; padding: 1rem; }
  .auth-form { margin-top: 1.15rem; gap: .75rem; }
  .auth-dialog input:not([type="checkbox"]), .order-dialog input:not([type="hidden"]) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 2026 customer dashboard redesign — Lovable-inspired, production data */
.customer-app { --dash-purple: #9637ee; --dash-pink: #ed249b; --dash-soft: #f8f2fc; background: radial-gradient(circle at 15% 12%, rgba(202, 166, 255, .12), transparent 25%), #faf9fd; }
.customer-workspace { margin-right: 0; }
.customer-topbar { min-height: 88px; padding: .8rem clamp(1rem, 3vw, 2.2rem); border-bottom: 1px solid #ece7f2; background: rgba(255, 255, 255, .94); }
.customer-heading { display: flex; align-items: center; gap: .7rem; }
.customer-heading > div { display: grid; }
.customer-topbar h2, .customer-topbar .ui-h2 { font-size: 1.2rem; }
.customer-profile { gap: .65rem; }
.top-wallet-card { min-width: 165px; padding: .5rem .65rem; display: flex; align-items: center; gap: .65rem; border: 0; border-radius: 18px; color: #20172b; background: linear-gradient(135deg, #fbf0ff, #fff0fa); text-align: right; }
.top-wallet-card > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--dash-purple), var(--dash-pink)); font-size: .7rem; font-weight: 900; }
.top-wallet-card > span:last-child { display: grid; gap: .15rem; }
.top-wallet-card small { color: #62596e; font-size: .53rem; }
.top-wallet-card strong { color: #8e2ce2; direction: rtl; font-size: .64rem; }
.top-account-data { display: none !important; }

.customer-sidebar { position: fixed; z-index: 24; top: 88px; right: 0; bottom: auto; left: 0; width: auto; height: 62px; padding: .45rem clamp(1rem, 3vw, 2.2rem); display: flex; align-items: center; border: 0; border-bottom: 1px solid #eee9f4; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 25px rgba(69, 43, 91, .035); backdrop-filter: blur(15px); }
.customer-sidebar .dashboard-brand, .customer-sidebar .sidebar-help { display: none; }
.customer-sidebar nav { display: flex; gap: .35rem; }
.customer-nav { min-height: 42px; padding: .5rem .8rem; border-radius: 12px; font-size: .64rem; }
.customer-nav:hover, .customer-nav.active { color: #8128cd; background: #f7edff; }
.customer-nav.active { box-shadow: inset 0 0 0 1px #ead6fc; }
.customer-nav span { width: 20px; font-size: .9rem; }
.customer-sidebar .logout-link { display: none; }
.customer-profile .mobile-logout-button { display: grid; }
.customer-workspace main { width: min(100%, 1500px); margin: 0 auto; padding: 5.4rem clamp(1rem, 2.3vw, 2rem) 3rem; }

.service-benefits { margin-bottom: 1.35rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.service-benefits article { min-height: 74px; padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem; border: 1px solid #e8e1ee; border-radius: 19px; background: rgba(255, 255, 255, .96); box-shadow: 0 9px 28px rgba(82, 50, 105, .045); }
.service-benefits article > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: #9d32e8; background: #fbecff; font: 800 1rem "Segoe UI"; }
.service-benefits article > div { display: grid; gap: .2rem; }
.service-benefits b { font-size: .69rem; }
.service-benefits small { color: #777080; font-size: .53rem; line-height: 1.7; }

.service-control-center { margin-bottom: 1.35rem; padding: 1rem; border: 1px solid #e6dfec; border-radius: 22px; background: rgba(255, 255, 255, .98); box-shadow: 0 12px 32px rgba(69, 43, 91, .05); }
.premium-search { width: 100%; }
.premium-search input { min-height: 56px; padding-right: 3rem; border: 0; border-radius: 17px; background: #f7f3fa; font-size: .68rem; }
.premium-search > span { right: 1.15rem; font-size: 1.25rem; }
.platform-filter-row { padding: .85rem 0 1rem; display: flex; align-items: center; gap: .45rem; overflow-x: auto; scrollbar-width: thin; }
.platform-filter-row button { min-height: 39px; padding: .45rem .8rem; display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; border: 0; border-radius: 999px; color: #696171; background: #f5f1f8; font-size: .58rem; font-weight: 800; white-space: nowrap; }
.platform-filter-row button img { width: 19px; height: 19px; border-radius: 6px; }
.platform-filter-row button:hover { color: #7c2bc6; background: #f3e8fb; }
.platform-filter-row button.active { color: #fff; background: linear-gradient(110deg, var(--dash-purple), var(--dash-pink)); box-shadow: 0 8px 20px rgba(213, 40, 164, .18); }
.service-controls-footer { padding-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #eee8f2; }
.service-results-summary { min-width: 120px; text-align: right; }
.service-sort-controls { display: flex; align-items: center; gap: .25rem; padding: .25rem; border-radius: 12px; background: #f6f2f8; }
.service-sort-controls > span { padding-inline: .45rem; color: #8a818f; font-size: .53rem; }
.service-sort-controls button { min-height: 32px; padding: .35rem .62rem; border: 0; border-radius: 9px; color: #706879; background: transparent; font-size: .54rem; font-weight: 700; }
.service-sort-controls button.active { color: #8d2bdd; background: #fff; box-shadow: 0 3px 10px rgba(75, 42, 99, .08); }

.customer-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.customer-service-card.premium-service-card { min-height: 286px; padding: 1rem; grid-template-rows: auto auto 1fr auto; gap: .8rem; border-color: #e5dfe9; border-radius: 21px; box-shadow: 0 8px 25px rgba(79, 48, 99, .045); }
.customer-service-card.premium-service-card::before { right: auto; left: 0; width: 3px; background: linear-gradient(180deg, var(--dash-pink), var(--dash-purple)); }
.customer-service-card.premium-service-card:hover { transform: translateY(-4px); border-color: #d9c8e8; box-shadow: 0 18px 40px rgba(91, 50, 120, .1); }
.premium-service-card .customer-service-head { align-items: flex-start; }
.service-title-wrap { min-width: 0; display: flex; align-items: flex-start; gap: .6rem; }
.customer-platform-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #8d31dc; background: #f6eaff; font-weight: 900; }
.customer-platform-icon img { width: 34px; height: 34px; display: block; border-radius: 11px; }
.premium-service-card .customer-service-head h3, .premium-service-card .customer-service-head .customer-service-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .73rem; line-height: 1.9; }
.premium-service-card .active-service-badge, .premium-service-card .preview-badge { flex: 0 0 auto; padding: .26rem .5rem; color: #169467; background: #e5f8ef; font-size: .49rem; font-weight: 800; }
.premium-service-card .preview-badge { color: #776b7e; background: #f0edf2; }
.service-meta-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.service-meta-pills span { max-width: 72%; overflow: hidden; padding: .3rem .52rem; border-radius: 999px; color: #6d6474; background: #f6f2f8; text-overflow: ellipsis; white-space: nowrap; font-size: .49rem; }
.service-meta-pills span:last-child { max-width: none; direction: ltr; }
.premium-service-card .customer-service-info { align-self: end; padding: .8rem; border-radius: 16px; background: linear-gradient(135deg, #fbf1ff, #fff0fa); }
.premium-service-card .customer-service-info b { font-size: .7rem; }
.premium-service-card > button { min-height: 47px; border-radius: 15px; background: linear-gradient(110deg, var(--dash-purple), var(--dash-pink)); font-size: .68rem; }

.premium-order-dialog { width: min(520px, calc(100% - 1rem)); max-height: calc(100dvh - 1.5rem); padding: 0; overflow-y: auto; border: 1px solid rgba(255,255,255,.55); border-radius: 23px; }
.premium-order-dialog form { padding: 0; gap: 0; }
.premium-order-head { position: relative; min-height: 102px; padding: 1.2rem 1.35rem 1.15rem 3rem; display: flex; align-items: center; color: #fff; background: linear-gradient(110deg, #8b35ef, #ed269c); }
.premium-order-head p { margin: 0 0 .35rem; color: rgba(255,255,255,.75); font-size: .55rem; }
.premium-order-head h2, .premium-order-head .ui-h2 { margin: 0; font-size: .88rem; line-height: 1.8; }
.premium-order-head small { color: rgba(255,255,255,.78); font-size: .53rem; }
.premium-order-head .dialog-close { top: 1rem; left: 1rem; color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); }
.premium-order-body { padding: 1.15rem 1.35rem 1.25rem; display: grid; gap: .9rem; }
.order-step { position: relative; gap: .5rem; }
.order-step > span:not(.step-number) { padding-right: 1.8rem; color: #29202f; font-size: .66rem; }
.step-number { position: absolute; top: -.12rem; right: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--dash-purple), var(--dash-pink)); font-size: .53rem; }
.order-input-wrap { position: relative; }
.order-input-wrap input, .order-step > input[type="number"] { min-height: 49px; border-radius: 16px; background: #fff; }
.order-input-wrap input { padding-left: 2.5rem; direction: ltr; text-align: left; }
.order-input-wrap i { position: absolute; top: 50%; left: .9rem; color: #817987; font-style: normal; transform: translateY(-50%); }
#order-quantity { text-align: center; font-weight: 800; }
#order-quantity-range { min-height: 12px; padding: 0; border: 0; accent-color: var(--dash-purple); box-shadow: none; }
.quantity-presets { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.quantity-presets button { min-height: 33px; min-width: 54px; padding: .3rem .55rem; border: 1px solid #e5dce9; border-radius: 999px; color: #6c6372; background: #f8f5fa; font-size: .52rem; }
.quantity-presets button.active { color: #fff; border-color: transparent; background: linear-gradient(110deg, var(--dash-purple), var(--dash-pink)); }
.premium-price-summary { padding: .95rem 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; border-radius: 17px; background: linear-gradient(135deg, #fcf2ff, #fff0f9); }
.premium-price-summary > div { display: grid; gap: .3rem; }
.premium-price-summary > div:nth-child(2) { text-align: left; }
.premium-price-summary span, .premium-price-summary small { color: #756b7c; font-size: .53rem; }
.premium-price-summary strong { font-size: .75rem; }
.premium-price-summary > div:nth-child(2) strong { color: #9130de; font-size: .9rem; }
.premium-price-summary > small { grid-column: 1 / -1; padding-top: .45rem; border-top: 1px solid rgba(154, 90, 180, .12); }
.premium-price-summary .order-balance-note { color: #4e4455; }
.premium-submit { min-height: 52px; border-radius: 16px; background: linear-gradient(110deg, var(--dash-purple), var(--dash-pink)); }
.order-privacy { margin: -.15rem 0 0; color: #8a818f; text-align: center; font-size: .49rem; line-height: 1.8; }

@media (max-width: 1120px) {
  .customer-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .customer-sidebar { top: auto; right: 0; left: 0; bottom: 0; width: 100%; height: 76px; padding: .45rem; transform: none; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 0; background: linear-gradient(180deg, #17142a, #0d0b1b); box-shadow: 0 -12px 35px rgba(12, 14, 33, .18); }
  .customer-sidebar nav { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .2rem; }
  .customer-sidebar .logout-link { display: none; }
  .customer-workspace main { padding: 1rem .85rem 96px; }
  .customer-nav { min-height: 0; padding: .3rem .1rem; justify-content: center; flex-direction: column; gap: .12rem; color: #aaa8b8; border-radius: 10px; font-size: .51rem; }
  .customer-nav.active { color: #fff; background: rgba(150,55,238,.22); box-shadow: inset 0 -2px #dc4acf; }
  .customer-nav span { width: auto; }
  .service-benefits { grid-template-columns: 1fr; }
  .service-benefits article { min-height: 68px; }
  .customer-topbar { min-height: 76px; }
  .customer-heading > div { display: grid; }
  .menu-button { display: none; }
  .top-wallet-card { min-width: 145px; }
  .mobile-logout-button { display: grid; }
}

@media (max-width: 620px) {
  .customer-topbar { padding: .65rem .75rem; }
  .customer-topbar h2, .customer-topbar .ui-h2 { font-size: .95rem; }
  .customer-topbar p { font-size: .5rem; }
  .top-wallet-card { min-width: 128px; padding: .4rem .48rem; border-radius: 15px; }
  .top-wallet-card > span:first-child { width: 32px; height: 32px; }
  .top-wallet-card small { font-size: .45rem; }
  .top-wallet-card strong { font-size: .53rem; }
  .mobile-logout-button { display: none; }
  .service-benefits { grid-template-columns: 1fr; gap: .55rem; }
  .service-benefits article { padding: .7rem .8rem; }
  .service-control-center { padding: .75rem; border-radius: 18px; }
  .premium-search input { min-height: 50px; }
  .service-controls-footer { align-items: stretch; flex-direction: column; }
  .service-results-summary { display: flex; justify-content: space-between; }
  .service-sort-controls { overflow-x: auto; }
  .service-sort-controls > span { display: none; }
  .service-sort-controls button { flex: 1 0 auto; }
  .customer-services-grid { grid-template-columns: 1fr; }
  .customer-service-card.premium-service-card { min-height: 270px; }
  .premium-order-body { padding: 1rem; }
  .premium-price-summary { grid-template-columns: 1fr; }
  .premium-price-summary > div:nth-child(2) { text-align: right; }
  .premium-price-summary > small { grid-column: 1; }
}

@media (min-width: 821px) {
  .customer-sidebar { top: 0; right: 0; bottom: 0; left: auto; width: 250px; height: auto; padding: 1.25rem 1rem; align-items: stretch; flex-direction: column; border: 0; color: #d7d9e8; background: radial-gradient(circle at 15% 8%, rgba(151, 55, 238, .3), transparent 28%), linear-gradient(180deg, #15122f, #0c0e22); box-shadow: -18px 0 55px rgba(15, 17, 44, .1); backdrop-filter: none; }
  .customer-sidebar .dashboard-brand { display: flex; }
  .customer-sidebar .dashboard-brand strong { color: #fff; }
  .customer-sidebar .dashboard-brand small { color: #aaa7bd; }
  .customer-sidebar nav { display: grid; gap: .38rem; }
  .customer-nav { min-height: 52px; padding: .75rem .9rem; color: #aaa9bd; border-radius: 14px; font-size: .68rem; }
  .customer-nav:hover, .customer-nav.active { color: #fff; background: linear-gradient(100deg, rgba(150, 55, 238, .55), rgba(237, 36, 155, .24)); }
  .customer-nav.active { box-shadow: inset -3px 0 #e955c5; }
  .customer-sidebar .sidebar-help { margin-top: auto; display: grid; }
  .customer-sidebar .logout-link { display: block; }
  .customer-profile .mobile-logout-button { display: none; }
  .customer-workspace { margin-right: 250px; }
  .customer-workspace main { padding: 1.8rem clamp(1rem, 2.3vw, 2rem) 3rem; }
  .customer-topbar { position: sticky; z-index: 20; top: 0; }
}

/* Final accessible dashboard navigation icons */
.customer-nav .customer-nav-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: currentColor;
  background: rgba(122, 101, 210, .09);
}
.customer-nav .customer-nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.customer-nav .customer-nav-label {
  width: auto;
  min-width: 0;
  flex: 1;
  color: inherit;
  font-size: inherit;
}

@media (max-width: 820px) {
  .customer-nav .customer-nav-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: #ddd8ef;
    background: rgba(255, 255, 255, .08);
  }
  .customer-nav .customer-nav-icon svg { width: 19px; height: 19px; stroke-width: 2; }
  .customer-nav .customer-nav-label {
    width: auto;
    flex: 0 1 auto;
    color: #bbb6cb;
    font-size: .52rem;
    line-height: 1.35;
  }
  .customer-nav.active .customer-nav-icon {
    color: #fff;
    background: linear-gradient(135deg, #8e43ef, #e22aa7);
    box-shadow: 0 5px 14px rgba(190, 43, 193, .34);
  }
  .customer-nav.active .customer-nav-label { color: #fff; }
}

/* Brand and trust seal */
.ui-heading { display: block; font-weight: 700; }
.brand-symbol { overflow: hidden; }
.brand-symbol img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.enamad-footer { margin-top: .85rem; }
.enamad-page-link { min-height: 40px; padding: .6rem .75rem; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px; color: #e7e2ee; background: rgba(255, 255, 255, .07); font-size: .58rem; font-weight: 700; }
.enamad-page-link:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.enamad-page-link span { color: #c7a6ff; font-size: .8rem; }
.footer-social-links { margin-top: .25rem; display: grid; gap: .5rem; }
.footer-social-links a { min-height: 38px; padding: .45rem .65rem; display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; direction: ltr; color: #d6cfdf; background: rgba(255, 255, 255, .045); font-size: .61rem; font-weight: 700; }
.footer-social-links a:hover { color: #fff; border-color: rgba(203, 166, 255, .42); background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.footer-social-links img { width: 22px; height: 22px; display: block; flex: 0 0 22px; border-radius: 7px; }
.telegram-support-fab { position: fixed; z-index: 65; left: 20px; bottom: 22px; min-height: 52px; padding: 8px 10px 8px 15px; display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; direction: rtl; color: #fff; background: linear-gradient(135deg, #229ed9, #1677b8); box-shadow: 0 12px 32px rgba(17, 114, 170, .32); font-size: .65rem; font-weight: 900; transition: transform .2s ease, box-shadow .2s ease; }
.telegram-support-fab:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 38px rgba(17, 114, 170, .42); }
.telegram-support-fab img { width: 34px; height: 34px; display: block; flex: 0 0 34px; border-radius: 50%; }
.telegram-support-fab:focus-visible { outline: 3px solid rgba(74, 184, 235, .38); outline-offset: 3px; }

@media (max-width: 700px) {
  .enamad-footer { text-align: center; }
  .telegram-support-fab { left: 12px; bottom: 14px; min-width: 50px; min-height: 50px; padding: 7px; justify-content: center; }
  .telegram-support-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .telegram-support-fab img { width: 34px; height: 34px; }
}