/* Professional light storefront — based on the approved editorial reference. */
.professional-home {
  --pro-ink: #0b0f0d;
  --pro-muted: #59635e;
  --pro-line: #dce2dc;
  --pro-soft: #f3f6f1;
  --pro-green: #2cc982;
  --pro-green-dark: #128a58;
  --pro-blue: #3155e7;
  background: #fbfcfa;
  color: var(--pro-ink);
}

.professional-home .container { width: min(1240px, calc(100% - 48px)); }
.professional-home .section-kicker { color: var(--pro-green-dark); font-size: 0.7rem; font-weight: 850; letter-spacing: .13em; }
.professional-home .section-title { max-width: 760px; color: var(--pro-ink); font-size: clamp(2.1rem, 4vw, 4.35rem); line-height: .98; letter-spacing: -.065em; }
.professional-home .section-copy { max-width: 680px; color: var(--pro-muted); font-size: 1.04rem; line-height: 1.7; }

.professional-hero {
  min-height: 720px;
  border-bottom: 1px solid var(--pro-line);
  background: #fbfcfa !important;
  color: var(--pro-ink) !important;
}

.professional-hero .hero-art { inset: 0 0 0 auto; width: min(68%, 1120px); height: 100%; opacity: .82; object-fit: cover; object-position: right center; filter: saturate(.86) contrast(.98); }
.professional-hero::before { background: linear-gradient(90deg, #fbfcfa 0%, #fbfcfa 40%, rgb(251 252 250 / .9) 56%, rgb(251 252 250 / .22) 82%, transparent 100%) !important; }
.professional-hero::after { opacity: .2 !important; background-image: linear-gradient(rgb(23 62 44 / .12) 1px, transparent 1px), linear-gradient(90deg, rgb(23 62 44 / .12) 1px, transparent 1px) !important; background-size: 64px 64px !important; mask-image: linear-gradient(90deg, #000, transparent 64%); }
.professional-hero .hero-layout { min-height: 720px; grid-template-columns: minmax(0, .96fr) minmax(420px, .74fr); gap: clamp(56px, 8vw, 116px); align-items: center; padding-block: 86px; }
.professional-hero .hero-content { max-width: 650px; }
.professional-hero .hero .eyebrow,
.professional-hero .eyebrow { margin-bottom: 22px; color: #173c2a; }
.professional-hero h1 { max-width: 720px; color: var(--pro-ink) !important; font-size: clamp(3.4rem, 6.7vw, 6.65rem) !important; line-height: .88 !important; letter-spacing: -.078em !important; text-wrap: balance; }
.professional-hero .hero-copy { max-width: 610px; margin-top: 30px; color: #4b5650 !important; font-size: clamp(1.03rem, 1.25vw, 1.2rem); line-height: 1.65; }
.professional-hero .hero-actions { margin-top: 30px; }
.professional-hero .btn { min-height: 50px; border-radius: 999px; padding-inline: 22px; }
.professional-hero .btn-accent { border-color: #0c120f; background: #0c120f; box-shadow: 0 14px 28px rgb(12 18 15 / .13); }
.professional-hero .btn-accent:hover { border-color: #1b2a22; background: #1b2a22; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; color: #536058; font-size: .78rem; font-weight: 700; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof i { color: var(--pro-green-dark); font-size: 1rem; }

.core-console { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgb(188 199 191 / .85); border-radius: 20px; background: rgb(255 255 255 / .88); box-shadow: 0 30px 80px rgb(29 46 37 / .16); backdrop-filter: blur(18px); }
.core-console::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--pro-green), #3155e7 60%, transparent); }
.core-console-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid #e4e8e4; }
.core-console-brand { display: flex; align-items: center; gap: 11px; }
.core-console-brand img { width: 34px; height: 34px; border-radius: 10px; }
.core-console-brand strong { display: grid; color: #111713; font-size: .88rem; line-height: 1.2; }
.core-console-brand small { margin-top: 3px; color: #77817b; font-size: .66rem; font-weight: 600; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #cde9da; border-radius: 999px; background: #edf9f2; padding: 6px 9px; color: #176b48; font-size: .66rem; font-weight: 800; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #22b876; box-shadow: 0 0 0 4px rgb(34 184 118 / .1); }
.core-console-grid { padding: 7px 20px 10px; }
.core-console-grid article { min-height: 72px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 12px; border-bottom: 1px solid #e8ece8; }
.core-console-grid article:last-child { border-bottom: 0; }
.core-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #edf3ef; color: #184e35; font-size: 1.1rem; }
.core-console-grid article div { display: grid; gap: 2px; }
.core-console-grid small { color: #818b85; font-size: .68rem; }
.core-console-grid strong { color: #18201b; font-size: .83rem; }
.core-console-grid article > i { color: #22a76c; }
.core-console-foot { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 20px; background: #0d1310; color: #c7d2cb; font-size: .7rem; }
.core-console-foot span, .core-console-foot a { display: inline-flex; align-items: center; gap: 7px; }
.core-console-foot a { color: #fff; font-weight: 800; }

.asset-rail { overflow: hidden; border-bottom: 1px solid var(--pro-line); background: #fff; padding: 40px 0 30px; }
.asset-rail-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.asset-rail-head > div { display: grid; gap: 6px; }
.asset-rail-head h2 { color: var(--pro-ink); font-size: clamp(1.4rem, 2.3vw, 2.05rem); letter-spacing: -.04em; }
.asset-rail-head > a { display: inline-flex; align-items: center; gap: 8px; color: #18211c; font-size: .82rem; font-weight: 800; }
.asset-carousel { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.asset-carousel-track { width: max-content; display: flex; animation: asset-loop 58s linear infinite; }
.asset-carousel:hover .asset-carousel-track { animation-play-state: paused; }
.asset-carousel-group { display: flex; flex-shrink: 0; gap: 12px; padding-right: 12px; }
.asset-chip { min-width: max-content; display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; border: 1px solid #dde3de; border-radius: 13px; background: #fbfcfb; padding: 10px 14px 10px 10px; box-shadow: 0 3px 10px rgb(21 38 28 / .025); }
.asset-chip img, .token-mark { grid-row: 1 / 3; width: 36px; height: 36px; object-fit: contain; border-radius: 50%; }
.token-mark { display: grid; place-items: center; color: #fff; font-size: 1.05rem; font-weight: 900; }
.token-mark.eth { background: #627eea; }
.token-mark.usdt { background: #26a17b; }
.token-mark.usdc { background: #2775ca; }
.token-mark.pol { background: #8247e5; }
.asset-chip strong { align-self: end; color: #111713; font-size: .79rem; line-height: 1.1; }
.asset-chip small { align-self: start; color: #849089; font-size: .62rem; line-height: 1.1; }
@keyframes asset-loop { to { transform: translateX(-50%); } }

.capabilities-section { background: #f5f7f3 !important; padding-block: clamp(88px, 11vw, 150px) !important; }
.professional-section-head { display: grid; gap: 19px; max-width: 830px; margin-bottom: 48px; }
.capability-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.capability-card { position: relative; min-height: 280px; grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #dbe1db; border-radius: 16px; background: #fff; padding: 28px; box-shadow: 0 8px 24px rgb(23 39 29 / .035); }
.capability-card-wide { grid-column: span 3; }
.capability-card:last-child { min-height: 230px; grid-column: 1 / -1; }
.capability-card .mini-icon { width: 46px; height: 46px; margin-bottom: auto; border-color: #dce6df; border-radius: 13px; background: #edf4ef; color: #17764e; font-size: 1.25rem; }
.capability-card h3 { margin-top: 34px; color: #101512; font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -.035em; }
.capability-card p { margin-top: 10px; color: #647068; line-height: 1.6; }
.capability-card a { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; color: #135f40; font-size: .8rem; font-weight: 800; }
.capability-index { position: absolute; top: 28px; right: 28px; color: #9aa49e; font: 700 .67rem/1 var(--font-mono); }
.mini-flow { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #526059; font-size: .7rem; font-weight: 750; }
.mini-flow span { border: 1px solid #dbe4dd; border-radius: 999px; background: #f7faf7; padding: 6px 9px; }
.mini-flow i { color: #1b9b65; }

.architecture-section { background: #0b100d !important; color: #fff; padding-block: clamp(88px, 11vw, 148px) !important; }
.architecture-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(460px, 1.15fr); gap: clamp(60px, 9vw, 130px); align-items: center; }
.architecture-section .section-title { color: #fff !important; }
.architecture-section .section-copy { color: #aab6ae !important; }
.architecture-copy { display: grid; gap: 22px; }
.feature-list { display: grid; gap: 20px; margin: 10px 0 0; padding: 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.feature-list li > i { margin-top: 2px; color: #32d38c; font-size: 1.2rem; }
.feature-list span { display: grid; gap: 4px; }
.feature-list strong { color: #f6faf7; font-size: .92rem; }
.feature-list small { color: #8f9c94; line-height: 1.5; }
.architecture-map { position: relative; display: grid; justify-items: center; padding: 30px; border: 1px solid #243028; border-radius: 22px; background: radial-gradient(circle at 50% 32%, rgb(35 199 127 / .12), transparent 42%), #0e1511; }
.map-node { width: min(100%, 280px); display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; border: 1px solid #2b3930; border-radius: 15px; background: #141d17; padding: 17px; box-shadow: 0 14px 36px rgb(0 0 0 / .2); }
.map-node img, .map-icon { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #1f2d24; color: #4cdb9b; font-size: 1.2rem; }
.map-node strong { color: #f7faf8; font-size: .88rem; }
.map-node small { color: #819087; font-size: .7rem; }
.map-core { border-color: #28684a; box-shadow: 0 0 0 4px rgb(44 201 130 / .06), 0 18px 40px rgb(0 0 0 / .28); }
.map-line { min-height: 76px; display: grid; place-items: center; color: #627069; font-size: .62rem; }
.map-line i { rotate: 90deg; color: #35c987; font-size: 1.15rem; }
.map-branches { width: 75%; height: 58px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #2b4f3a; }
.map-branches span { justify-self: center; width: 1px; height: 100%; background: #2b4f3a; }
.map-networks { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.map-networks span { display: grid; place-items: center; gap: 8px; min-height: 82px; border: 1px solid #26332b; border-radius: 12px; background: #121a15; color: #a8b5ad; font-size: .65rem; font-weight: 700; }
.map-networks img { width: 25px; height: 25px; }

.developer-section { background: #f6f8f5 !important; padding-block: clamp(88px, 11vw, 145px) !important; }
.developer-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); gap: clamp(60px, 9vw, 120px); align-items: center; }
.developer-layout > div:first-child { display: grid; gap: 20px; }
.developer-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.developer-tags span { border: 1px solid #d8dfd9; border-radius: 999px; background: #fff; padding: 7px 10px; color: #59655d; font: 650 .69rem/1 var(--font-mono); }
.api-card { overflow: hidden; border: 1px solid #202a24; border-radius: 17px; background: #0d120f; box-shadow: 0 26px 70px rgb(15 31 22 / .2); }
.api-card-head { min-height: 54px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; border-bottom: 1px solid #222d26; padding: 0 18px; color: #8f9a93; font: 600 .66rem/1 var(--font-mono); }
.api-card-head > span { display: flex; gap: 5px; }
.api-card-head i { width: 8px; height: 8px; border-radius: 50%; background: #354039; }
.api-card-head i:first-child { background: #30ca86; }
.api-card-head strong { color: #bdc8c1; font-size: .7rem; }
.api-card pre { margin: 0; padding: 26px; color: #9ae6bd; font: 500 clamp(.72rem, 1.2vw, .87rem)/1.75 var(--font-mono); white-space: pre-wrap; }
.api-card a { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #222d26; padding: 16px 20px; color: #f4f7f5; font-size: .75rem; font-weight: 750; }

.security-section { background: #fff !important; padding-block: clamp(84px, 10vw, 130px) !important; }
.security-grid-public { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #dfe4df; border-bottom: 1px solid #dfe4df; }
.security-grid-public article { min-height: 230px; padding: 27px; border-right: 1px solid #dfe4df; }
.security-grid-public article:last-child { border-right: 0; }
.security-grid-public article > i { color: #128a58; font-size: 1.5rem; }
.security-grid-public h3 { margin-top: 44px; color: #121713; font-size: 1rem; }
.security-grid-public p { margin-top: 10px; color: #68736c; font-size: .81rem; line-height: 1.6; }

.cta-section { background: #fff; padding: 0 0 80px; }
.cta-panel { min-height: 290px; display: flex; align-items: end; justify-content: space-between; gap: 46px; border-radius: 24px; background: radial-gradient(circle at 85% 20%, rgb(52 213 144 / .23), transparent 28%), #0b100d; padding: clamp(34px, 6vw, 70px); color: #fff; }
.cta-panel > div:first-child { display: grid; gap: 15px; max-width: 710px; }
.cta-panel h2 { color: #fff; font-size: clamp(2rem, 4vw, 4rem); line-height: .98; letter-spacing: -.06em; }
.cta-panel p:not(.section-kicker) { color: #9ca9a1; }
.cta-panel .btn { border-radius: 999px; }
.cta-panel .btn-accent { border-color: #39d993; background: #39d993; color: #07110b; }
.cta-panel .btn-secondary { border-color: #3a463f; background: #161e19; color: #fff; }

.professional-footer { border-top: 1px solid #dce2dd; background: #f5f7f4; padding: 58px 0 22px; }
.professional-footer .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 50px; }
.professional-footer .footer-col { display: grid; align-content: start; gap: 11px; }
.professional-footer .brand-logo { width: 168px; }
.professional-footer strong { color: #18201b; font-size: .74rem; }
.professional-footer a, .professional-footer p { color: #68746c; font-size: .76rem; line-height: 1.6; }
.professional-footer a:hover { color: #0e5f3d; }
.professional-footer .footer-brand p { max-width: 310px; }
.professional-footer .footer-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; border-top: 1px solid #dce2dd; padding-top: 19px; }

@media (max-width: 1050px) {
  .professional-hero .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(350px, .75fr); gap: 38px; }
  .professional-hero h1 { font-size: clamp(3rem, 6vw, 5.2rem) !important; }
  .capability-card, .capability-card-wide { grid-column: span 3; }
  .capability-card:last-child { grid-column: 1 / -1; }
  .architecture-layout, .developer-layout { grid-template-columns: 1fr; }
  .architecture-map, .api-card { width: min(100%, 700px); }
  .security-grid-public { grid-template-columns: 1fr 1fr; }
  .security-grid-public article:nth-child(2) { border-right: 0; }
  .security-grid-public article:nth-child(-n + 2) { border-bottom: 1px solid #dfe4df; }
}

@media (max-width: 820px) {
  .professional-home .container { width: min(100% - 32px, 1240px); }
  .professional-hero { min-height: auto; }
  .professional-hero .hero-art { width: 100%; opacity: .28; object-position: 72% center; }
  .professional-hero::before { background: linear-gradient(180deg, #fbfcfa 0%, rgb(251 252 250 / .95) 58%, rgb(251 252 250 / .72) 100%) !important; }
  .professional-hero .hero-layout { min-height: auto; grid-template-columns: 1fr; padding-block: 70px 58px; }
  .professional-hero .hero-content { max-width: 700px; }
  .professional-hero h1 { font-size: clamp(3rem, 13vw, 5.2rem) !important; }
  .core-console { width: min(100%, 620px); }
  .asset-rail-head { align-items: start; flex-direction: column; }
  .cta-panel { align-items: flex-start; flex-direction: column; }
  .professional-footer .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .professional-footer .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .professional-home .container { width: min(100% - 24px, 1240px); }
  .professional-hero .hero-layout { padding-block: 54px 42px; }
  .professional-hero h1 { font-size: clamp(2.75rem, 14.5vw, 4.2rem) !important; line-height: .9 !important; }
  .professional-hero .hero-copy { margin-top: 22px; font-size: .98rem; }
  .professional-hero .hero-actions { align-items: stretch; flex-direction: column; }
  .professional-hero .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-proof { display: grid; grid-template-columns: 1fr 1fr; }
  .core-console-head { align-items: flex-start; }
  .live-pill { font-size: 0; padding: 9px; }
  .live-pill i { margin: 0; }
  .core-console-foot { align-items: flex-start; flex-direction: column; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card, .capability-card-wide { min-height: 245px; grid-column: auto; }
  .capability-card:last-child { grid-column: auto; }
  .mini-flow { max-width: 100%; gap: 6px; }
  .mini-flow span { padding-inline: 7px; font-size: .62rem; }
  .architecture-map { padding: 20px 12px; }
  .map-networks { grid-template-columns: 1fr 1fr; }
  .map-branches { display: none; }
  .map-networks { margin-top: 22px; }
  .developer-layout { gap: 40px; }
  .api-card pre { padding: 19px 16px; font-size: .68rem; }
  .security-grid-public { grid-template-columns: 1fr; }
  .security-grid-public article { min-height: 205px; border-right: 0; border-bottom: 1px solid #dfe4df; }
  .security-grid-public article:last-child { border-bottom: 0; }
  .cta-section { padding-bottom: 24px; }
  .cta-panel { border-radius: 17px; padding: 30px 22px; }
  .cta-panel .cluster { width: 100%; align-items: stretch; flex-direction: column; }
  .cta-panel .btn { justify-content: center; }
  .professional-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .professional-footer .footer-brand { grid-column: 1 / -1; }
  .professional-footer .footer-meta { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .asset-carousel-track { animation: none; }
}