:root {
  --blue:#2545ef;
  --ink:#17203b;
  --muted:#59637a;
  --line:#dde2ed;
  --paper:#fff;
  --soft:#f3f5fa;
  font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
a, summary, select {
  touch-action:manipulation
}
a:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:6px
}
p {
  line-height:1.7
}
img {
  display:block;
  max-width:100%;
  height:auto
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.skip {
  position:absolute;
  left:20px;
  top:-80px;
  background:white;
  padding:15px;
  z-index:10
}
.skip:focus {
  top:15px
}
header {
  height:88px;
  border-bottom:1px solid var(--line);
  background:white
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  white-space:nowrap;
  font-size:21px;
  letter-spacing:-.7px
}
.brand img {
  width:43px;
  height:43px;
  border-radius:9px
}
.brand span {
  font-weight:400
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:29px;
  font-size:14px
}
.desktop-nav a:hover,.language:hover {
  color:var(--blue)
}
.language {
  font-size:14px;
  border-left:1px solid var(--line);
  padding-left:24px
}
.mobile-nav {
  display:none
}
.hero {
  padding:76px 0 80px
}
.hero-grid {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  align-items:center;
  gap:40px
}
.eyebrow {
  color:var(--blue);
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin:0 0 26px
}
.hero h1 {
  font-size:clamp(46px,5.2vw,74px);
  line-height:1.07;
  letter-spacing:-3.8px;
  margin:0 0 27px;
  font-weight:600
}
.hero h1 span {
  color:var(--blue)
}
.hero-copy {
  font-size:19px;
  line-height:1.7;
  max-width:590px;
  color:var(--muted);
  margin:0 0 33px
}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:51px;
  padding:14px 22px;
  background:var(--blue);
  color:#fff;
  font-size:15px;
  border-radius:7px;
  white-space:nowrap;
  border:1px solid var(--blue);
  transition:background .2s
}
.button:hover {
  background:#1935cd
}
.button.secondary {
  color:var(--ink);
  background:#fff;
  border-color:var(--line)
}
.button.secondary:hover {
  background:var(--soft)
}
.brand-art {
  margin:0;
  position:relative
}
.brand-art img {
  width:100%;
  aspect-ratio:1;
  border-radius:26% 26% 26% 7%;
  box-shadow:0 22px 60px #2545ef14
}
.intro {
  border-top:1px solid var(--line);
  padding:34px 0 0;
  margin-top:70px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px
}
.intro strong {
  font-size:15px;
  line-height:1.7;
  font-weight:500;
  color:var(--muted)
}
.intro p {
  margin:0;
  font-size:23px;
  line-height:1.6;
  letter-spacing:-.5px;
  max-width:760px
}
.section {
  padding:88px 0
}
.section h2 {
  font-size:clamp(34px,4vw,52px);
  line-height:1.15;
  letter-spacing:-1.8px;
  margin:0 0 20px;
  font-weight:500
}
.lead {
  font-size:18px;
  max-width:680px;
  color:var(--muted);
  margin:0 0 45px
}
.ecosystem {
  border-top:1px solid var(--line)
}
.layer {
  display:grid;
  grid-template-columns:70px 1fr 1.15fr;
  gap:30px;
  align-items:start;
  padding:30px 0;
  border-bottom:1px solid var(--line)
}
.layer-no {
  font-size:15px;
  color:var(--blue);
  padding-top:7px
}
.layer h3 {
  font-size:28px;
  letter-spacing:-.7px;
  font-weight:500;
  margin:0
}
.layer small {
  display:block;
  font-size:14px;
  color:var(--muted);
  margin-top:9px
}
.layer p {
  font-size:16px;
  color:var(--muted);
  margin:0;
  max-width:490px
}
.products {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:24px;
  margin-top:40px
}
.product {
  border:1px solid var(--line);
  padding:44px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  min-height:350px;
  background:var(--soft)
}
.product:nth-child(2) {
  background:#fff
}
.product .type {
  font-size:14px;
  color:var(--blue);
  margin:0 0 42px
}
.product h3 {
  font-size:40px;
  letter-spacing:-1.4px;
  margin:0 0 18px;
  font-weight:500
}
.product p {
  font-size:17px;
  color:var(--muted);
  margin:0 0 24px;
  max-width:430px
}
.product .features {
  margin-top:auto;
  font-size:14px;
  color:var(--ink)
}
.note {
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin-top:22px
}
.roadmap {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:45px
}
.milestone {
  border-top:3px solid var(--line);
  padding-top:24px
}
.milestone:first-child {
  border-color:var(--blue)
}
.milestone .period {
  font-size:14px;
  color:var(--blue);
  margin:0 0 22px
}
.milestone h3 {
  font-size:24px;
  font-weight:500;
  letter-spacing:-.5px;
  margin:0 0 17px
}
.milestone p {
  font-size:16px;
  color:var(--muted);
  margin:0
}
.documents {
  border:1px solid var(--line);
  border-radius:14px;
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.documents h2 {
  font-size:40px
}
.documents p {
  color:var(--muted);
  font-size:17px;
  max-width:400px;
  margin-bottom:0
}
.document-links {
  display:flex;
  flex-direction:column;
  justify-content:center
}
.document-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  font-size:20px
}
.document-link:hover {
  color:var(--blue)
}
.document-link small {
  color:var(--muted);
  font-size:13px
}
.community {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:35px
}
.community a {
  color:var(--blue);
  font-size:16px;
  text-decoration:underline;
  text-underline-offset:5px
}
footer {
  padding:35px 0;
  border-top:1px solid var(--line);
  margin-top:30px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}
.copyright {
  font-size:13px;
  color:var(--muted)
}
.disclaimer {
  max-width:950px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  margin:24px 0 0
}
html:lang(zh) .hero h1 {
  font-size:clamp(42px,5vw,68px);
  letter-spacing:-2px;
  line-height:1.2
}
html:lang(zh) h2 {
  letter-spacing:-1px
}
html:lang(zh) .hero-copy {
  font-size:19px
}
html:lang(zh) .intro p {
  font-size:22px
}
@media(min-width:1000px) {
  .brand-art {
  animation:enter .8s ease both
}
.hero-text {
  animation:enter .65s ease both
}
@keyframes enter {
  from {
  opacity:0;
  transform:translateY(12px)
}
to {
  opacity:1;
  transform:translateY(0)
}

}

}
@media(max-width:1000px) {
  .wrap {
  width:calc(100% - 56px)
}
.desktop-nav {
  gap:17px
}
.hero-grid {
  gap:24px;
  grid-template-columns:1.6fr 1fr
}
.hero h1 {
  font-size:53px;
  letter-spacing:-2.5px
}
.roadmap {
  grid-template-columns:repeat(2,1fr);
  row-gap:40px
}
.product {
  padding:30px
}
.documents {
  gap:35px;
  padding:35px
}
.hero {
  padding-top:55px
}

}
@media(max-width:700px) {
  .wrap {
  width:calc(100% - 40px)
}
header {
  height:76px
}
.brand {
  font-size:19px
}
.brand img {
  width:37px;
  height:37px
}
.desktop-nav {
  display:none
}
.language {
  margin-left:auto;
  padding-left:0;
  border:0
}
.mobile-nav {
  display:block
}
.mobile-nav summary {
  font-size:14px;
  cursor:pointer;
  list-style:none
}
.mobile-nav summary::-webkit-details-marker {
  display:none
}
.mobile-nav[open] nav {
  position:absolute;
  z-index:5;
  top:76px;
  left:0;
  right:0;
  background:white;
  padding:16px 20px;
  box-shadow:0 14px 20px #17203b0d;
  display:grid;
  gap:0;
  border-bottom:1px solid var(--line)
}
.mobile-nav nav a {
  padding:15px 0
}
.header-inner {
  gap:20px
}
.hero {
  padding:47px 0 35px
}
.hero-grid {
  grid-template-columns:1fr;
  gap:35px
}
.hero h1 {
  font-size:clamp(35px,8.7vw,58px);
  letter-spacing:-1.7px
}
.hero-copy {
  font-size:17px;
  margin-bottom:25px
}
.eyebrow {
  font-size:12px;
  margin-bottom:24px;
  letter-spacing:1.1px
}
.brand-art {
  max-width:300px;
  width:65%;
  justify-self:end
}
.intro {
  grid-template-columns:1fr;
  gap:14px;
  margin-top:40px;
  padding-top:28px
}
.intro p {
  font-size:20px
}
.section {
  padding:53px 0
}
.section h2 {
  font-size:35px;
  letter-spacing:-1px
}
.lead {
  font-size:17px;
  margin-bottom:30px
}
.layer {
  grid-template-columns:35px 1fr;
  gap:13px;
  padding:25px 0
}
.layer h3 {
  font-size:26px
}
.layer p {
  grid-column:2
}
.layer small {
  margin-top:5px
}
.products {
  grid-template-columns:1fr;
  gap:18px;
  margin-top:28px
}
.product {
  padding:28px;
  min-height:290px
}
.product .type {
  margin-bottom:30px
}
.product h3 {
  font-size:34px
}
.roadmap {
  grid-template-columns:1fr;
  gap:30px;
  margin-top:30px
}
.milestone .period {
  margin-bottom:12px
}
.milestone h3 {
  margin-bottom:12px
}
.documents {
  grid-template-columns:1fr;
  padding:27px;
  gap:15px
}
.documents h2 {
  font-size:34px
}
.documents p {
  font-size:16px
}
.document-link {
  font-size:18px
}
.footer-top {
  align-items:flex-start;
  flex-direction:column;
  gap:12px
}
.disclaimer {
  font-size:13px
}
html:lang(zh) .hero h1 {
  font-size:clamp(36px,9vw,55px)
}
html:lang(zh) .hero-copy {
  font-size:17px
}
html:lang(zh) .intro p {
  font-size:20px
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*::before,*::after {
  animation:none!important;
  transition:none!important
}

}


/* Revision 2: retain the approved light/cobalt identity;
   diversify the narrative. */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.language-picker {
  flex-shrink:0
}
.language-picker select {
  font:inherit;
  font-size:14px;
  color:var(--ink);
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:7px;
  padding:11px 30px 11px 12px;
  cursor:pointer;
  min-height:43px;
  max-width:150px
}
.language-picker select:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:3px
}
.desktop-nav {
  gap:23px
}
.hero-text,.brand-art {
  animation:none
}
.section {
  padding:80px 0
}
.architecture {
  background:var(--soft);
  padding:34px;
  border-radius:12px;
  margin:40px 0 28px
}
.architecture-flow {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0;
  padding:0;
  gap:30px
}
.architecture-flow li {
  position:relative;
  padding:22px;
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  min-height:116px
}
.architecture-flow li:not(:last-child):after {
  content:'→';
  position:absolute;
  right:-25px;
  top:44%;
  color:var(--blue);
  font-size:21px
}
.architecture-flow span {
  display:block;
  font-size:12px;
  color:var(--blue);
  margin-bottom:17px
}
.architecture-flow strong {
  font-size:18px;
  font-weight:500;
  line-height:1.4
}
.architecture>p {
  font-size:15px;
  color:var(--muted);
  margin:26px 0 0;
  text-align:center
}
.ecosystem {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 60px;
  border:0
}
.layer {
  grid-template-columns:35px 1fr;
  gap:12px;
  padding:28px 0
}
.layer p {
  grid-column:2;
  max-width:490px
}
.layer h3 {
  font-size:25px
}
.layer-no {
  font-size:13px
}
.product {
  min-height:340px;
  position:relative;
  overflow:hidden
}
.product:first-child {
  background:#eef1ff;
  border-color:#d6defe
}
.product .type {
  font-weight:600;
  letter-spacing:1px;
  font-size:12px
}
.product h3 {
  font-size:48px;
  margin-bottom:22px
}
.feature-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:15px
}
.feature-tags span {
  font-size:13px;
  line-height:1.5;
  border-bottom:2px solid #c4cefd;
  padding:6px 0;
  margin-right:12px
}
.workflow-section {
  background:var(--soft);
  margin:35px 0
}
.workflow {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  list-style:none;
  gap:26px;
  padding:0;
  margin:45px 0 10px
}
.workflow li {
  border-top:1px solid #bac5ef;
  padding-top:22px;
  position:relative
}
.step-no {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #bcc8f4;
  border-radius:50%;
  color:var(--blue);
  font-size:12px;
  background:white
}
.workflow h3 {
  font-size:19px;
  font-weight:500;
  margin:25px 0 12px
}
.workflow p {
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  margin:0
}
.infrastructure-image {
  margin:38px 0 0
}
.infrastructure-image img {
  width:100%;
  aspect-ratio:3/1;
  object-fit:cover;
  border-radius:12px
}
.infrastructure-image figcaption {
  font-size:12px;
  color:var(--muted);
  margin-top:12px;
  line-height:1.6
}
.locations {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:0 55px;
  margin-top:38px
}
.location {
  padding:25px 0;
  border-bottom:1px solid var(--line)
}
.location:first-child {
  grid-row:span 2;
  border:0;
  padding:35px;
  background:var(--soft);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.location .location-name {
  font-size:13px;
  letter-spacing:1px;
  color:var(--blue);
  margin:0 0 14px;
  font-weight:600
}
.location h3 {
  font-size:25px;
  margin:0 0 15px;
  letter-spacing:-.5px;
  font-weight:500
}
.location:first-child h3 {
  font-size:37px
}
.location p {
  font-size:16px;
  margin:0;
  max-width:430px;
  color:var(--muted)
}
.rwa {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.rwa-mark {
  font-size:100px;
  line-height:1.15;
  letter-spacing:-6px;
  color:#d8dfff;
  font-weight:700
}
.rwa-steps {
  list-style:none;
  padding:0;
  margin:0
}
.rwa-steps li {
  display:flex;
  gap:22px;
  padding:23px 0;
  border-bottom:1px solid var(--line)
}
.rwa-steps li:first-child {
  padding-top:0
}
.rwa-steps li>span {
  color:var(--blue);
  font-size:13px;
  padding-top:6px
}
.rwa-steps h3 {
  font-size:23px;
  margin:0 0 10px;
  font-weight:500
}
.rwa-steps p {
  font-size:16px;
  color:var(--muted);
  margin:0
}
.growth {
  border:1px solid var(--line);
  border-radius:12px;
  padding:45px;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:60px
}
.growth h2 {
  font-size:42px
}
.growth .lead {
  font-size:17px;
  margin-bottom:0
}
.growth-items {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px
}
.growth-items h3 {
  font-size:19px;
  font-weight:500;
  color:var(--blue);
  margin:0 0 12px
}
.growth-items p {
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  margin:0
}
.milestone:first-child {
  border-color:var(--line)
}
.milestone {
  border-top:2px solid #c4cefd
}
.faq {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px
}
.faq details {
  border-bottom:1px solid var(--line)
}
.faq details:first-child {
  border-top:1px solid var(--line)
}
.faq summary {
  cursor:pointer;
  list-style:none;
  font-size:18px;
  font-weight:500;
  padding:25px 38px 25px 0;
  position:relative;
  line-height:1.5
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary:after {
  content:'+';
  position:absolute;
  right:4px;
  top:24px;
  font-weight:400;
  font-size:23px;
  color:var(--blue)
}
.faq details[open] summary:after {
  content:'−'
}
.faq details p {
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  margin:0 30px 25px 0
}
.documents {
  grid-template-columns:.8fr 1.2fr;
  padding:0;
  border:0;
  gap:80px;
  align-items:center
}
.document-cover {
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:10px;
  padding:36px;
  box-shadow:inset 7px 0 0 #d7dfff;
  min-height:365px;
  display:flex;
  flex-direction:column
}
.document-cover>span {
  font-size:12px;
  letter-spacing:1.4px;
  color:var(--blue)
}
.document-cover>strong {
  font-size:58px;
  line-height:.95;
  letter-spacing:-2px;
  margin:38px 0 25px;
  color:var(--blue)
}
.document-cover strong span {
  font-size:36px;
  letter-spacing:-1px;
  font-weight:400
}
.document-cover p {
  font-size:14px;
  margin:0 0 24px
}
.document-cover small {
  font-size:13px;
  margin-top:auto;
  color:var(--muted)
}
.documents .document-links {
  margin-top:28px
}
.section:target h2 {
  color:var(--ink)
}

@media(min-width:851px) and (max-width:1150px) {
  .desktop-nav {
  gap:14px;
  font-size:12px
}
.header-inner {
  gap:15px
}
.brand {
  font-size:18px
}
.brand img {
  width:35px;
  height:35px
}
.language-picker select {
  font-size:13px;
  max-width:120px
}
.workflow {
  grid-template-columns:repeat(3,1fr);
  gap:35px
}
.rwa {
  gap:50px
}
.growth {
  gap:30px;
  padding:35px
}

}

@media(max-width:850px) {
  .header-inner {
  display:flex;
  gap:20px
}
.language-picker {
  margin-left:auto
}
.mobile-nav {
  display:block
}
.workflow {
  grid-template-columns:repeat(3,1fr);
  gap:32px
}
.architecture-flow {
  gap:22px
}
.architecture-flow li {
  padding:16px
}
.architecture-flow li:not(:last-child):after {
  right:-21px
}
.architecture-flow strong {
  font-size:16px
}
.rwa,.faq {
  gap:40px
}
.growth {
  grid-template-columns:1fr;
  gap:35px
}
.documents {
  gap:35px
}
.ecosystem {
  gap:0 30px
}

}

@media(max-width:700px) {
  header {
  height:78px
}
.header-inner {
  padding:0;
  gap:12px
}
.brand {
  font-size:16px;
  gap:8px
}
.brand img {
  width:33px;
  height:33px
}
.language-picker select {
  min-height:40px;
  font-size:12px;
  padding:9px 16px 9px 8px;
  width:100px
}
.mobile-nav summary {
  font-size:12px
}
.mobile-nav[open] nav {
  top:78px
}
.hero {
  padding-top:40px
}
.section {
  padding:55px 0
}
.architecture {
  padding:22px;
  margin-top:30px
}
.architecture-flow {
  grid-template-columns:1fr 1fr;
  gap:22px
}
.architecture-flow li {
  min-height:102px;
  padding:16px
}
.architecture-flow li:not(:last-child):after {
  display:none
}
.architecture-flow>li:first-child:after,.architecture-flow>li:nth-child(3):after {
  display:block
}
.architecture-flow span {
  margin-bottom:10px
}
.architecture>p {
  text-align:left;
  font-size:14px
}
.ecosystem {
  grid-template-columns:1fr
}
.layer {
  padding:23px 0
}
.layer p {
  font-size:16px
}
.product {
  padding:27px;
  min-height:320px
}
.product h3 {
  font-size:39px
}
.workflow-section {
  margin:10px 0
}
.workflow {
  grid-template-columns:1fr 1fr;
  gap:30px 25px;
  margin-top:30px
}
.workflow h3 {
  margin-top:18px;
  font-size:19px
}
.workflow p {
  font-size:15px
}
.infrastructure-image img {
  aspect-ratio:1.5;
  object-position:50% 50%
}
.locations {
  grid-template-columns:1fr;
  margin-top:24px;
  gap:0
}
.location:first-child {
  grid-row:auto;
  padding:25px
}
.location:first-child h3 {
  font-size:29px
}
.location {
  padding:25px 0
}
.rwa {
  grid-template-columns:1fr;
  gap:25px
}
.rwa .lead {
  margin-bottom:0
}
.rwa-mark {
  display:none
}
.rwa-steps li:first-child {
  padding-top:20px
}
.growth {
  padding:26px;
  gap:30px
}
.growth h2 {
  font-size:33px
}
.growth-items {
  grid-template-columns:1fr;
  gap:25px
}
.growth-items article {
  border-top:1px solid var(--line);
  padding-top:22px
}
.growth-items p {
  font-size:16px
}
.faq {
  grid-template-columns:1fr;
  gap:12px
}
.faq summary {
  font-size:17px;
  padding-top:22px;
  padding-bottom:22px
}
.faq details p {
  margin-right:0
}
.documents {
  grid-template-columns:1fr;
  gap:35px
}
.document-cover {
  min-height:320px;
  padding:30px
}
.document-cover>strong {
  font-size:55px;
  margin-top:30px
}
.document-cover>strong span {
  font-size:34px
}

}


@media(max-width:700px) {
  .infrastructure-image img {
  aspect-ratio:3/1;
  object-fit:contain
}

}

/* Prominent official social links for the local client demo. */
.header-social,.footer-social,.mobile-social {
  display:flex;
  align-items:center;
  gap:17px
}
.header-social {
  flex-shrink:0;
  border-left:1px solid var(--line);
  padding-left:20px
}
.header-social a,.footer-social a {
  font-size:14px;
  color:var(--blue);
  white-space:nowrap
}
.header-social a:hover,.footer-social a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.footer-top {
  flex-wrap:wrap
}
.footer-social {
  margin-left:auto
}
.copyright {
  width:100%;
  margin-top:10px
}
.mobile-social {
  border-top:1px solid var(--line);
  margin-top:8px
}
.mobile-social a {
  color:var(--blue)
}
@media(max-width:1200px) {
  .header-social {
  display:none
}

}
@media(max-width:700px) {
  .footer-top {
  flex-direction:row;
  align-items:center
}
.footer-social {
  gap:14px
}
.footer-social a {
  font-size:13px
}
.copyright {
  margin-top:4px
}

}


/* Shared responsive and keyboard-accessible controls. */
:root  {
   color-scheme: light;
   
}

:focus-visible  {
   outline: 3px solid var(--blue);
   outline-offset: 4px;
   
}

header  {
   position: relative;
   z-index: 5;
   
}

.header-inner  {
   gap: 20px;
   
}

.hero-grid > *, .ecosystem > *, .products > *, .rwa > *, .growth > *, .documents > *, .faq > *  {
   min-width: 0;
   
}

h1, h2, h3  {
   overflow-wrap: anywhere;
   
}

.language-picker select  {
   font-size: 16px;
   min-height: 44px;
   width: 140px;
   max-width: 140px;
   padding: 10px 8px;
   
}

.header-social a, .footer-social a, .community a  {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   
}

.mobile-nav summary  {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   min-height: 44px;
   cursor: pointer;
   list-style: none;
   
}

.mobile-nav summary::-webkit-details-marker  {
   display: none;
   
}

.language-fallback  {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 20px;
   padding: 12px;
   
}

.language-fallback a  {
   text-decoration: underline;
   padding: 8px;
   
}

@media (max-width: 1100px)  {
  
 .desktop-nav, .header-social  {
   display: none;
   
}

 .mobile-nav  {
   display: block;
   
}

 .language-picker  {
   margin-left: auto;
   
}

 .mobile-nav[open] nav  {
   position: absolute;
   z-index: 6;
   top: 100%;
   left: 0;
   right: 0;
   background: white;
   display: grid;
   padding: 12px 28px;
   border-bottom: 1px solid var(--line);
   box-shadow: 0 16px 24px #17203b12;
   max-height: calc(100dvh - 88px);
   overflow-y: auto;
   overscroll-behavior: contain;
   
}

 .mobile-nav nav a  {
   display: flex;
   align-items: center;
   min-height: 48px;
   padding: 12px 0;
   
}

 .workflow  {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   
}

 .hero h1  {
   font-size: clamp(44px, 5.3vw, 58px);
   
}

 .growth  {
   grid-template-columns: 1fr;
   gap: 32px;
   
}

 .architecture-flow  {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   
}

 .architecture-flow li::after  {
   display: none;
   
}

 .architecture-flow li:nth-child(odd)::after  {
   display: block;
   
}

 .rwa, .faq  {
   gap: 40px;
   
}


}

@media (max-width: 700px)  {
  
 .header-inner  {
   gap: 8px;
   
}

 .brand  {
   font-size: 16px;
   gap: 7px;
   
}

 .brand img  {
   width: 32px;
   height: 32px;
   
}

 .language-picker select  {
   width: 116px;
   max-width: 116px;
   
}

 .mobile-nav summary  {
   font-size: 13px;
   
}

 .mobile-nav[open] nav  {
   padding-inline: 20px;
   
}

 .hero h1  {
   font-size: clamp(35px, 8.7vw, 58px);
   
}

 .brand-art  {
   width: 55%;
   max-width: 240px;
   
}

 .workflow  {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   
}

 .architecture  {
   padding: 18px;
   
}

 .architecture-flow  {
   gap: 18px;
   
}

 .architecture-flow li  {
   padding: 12px;
   
}

 .architecture-flow li:nth-child(odd)::after  {
   right: -18px;
   
}

 .architecture-flow strong  {
   font-size: 16px;
   
}

 .product h3  {
   font-size: clamp(30px, 8vw, 39px);
   
}

 .rwa, .faq  {
   gap: 25px;
   
}

 .document-link  {
   flex-wrap: wrap;
   gap: 8px;
   
}

 .footer-social  {
   margin-left: 0;
   
}

 .footer-top  {
   gap: 10px 24px;
   
}


}

@media (max-width: 374px)  {
  
 .header-inner .brand span  {
   display: none;
   
}

 .section h2  {
   font-size: 31px;
   
}

 .actions  {
   flex-direction: column;
   align-items: stretch;
   
}

 .product  {
   padding: 22px;
   
}


}

@media (prefers-reduced-motion: reduce)  {
   html  {
   scroll-behavior: auto;
   
}
 
}


/* Replaceable project photography: energy overview and two location stories. */
.locations { display: block; margin-top: 48px; }
.location-name { color: var(--blue); font-size: 13px; font-weight: 600; letter-spacing: 1px; margin: 0 0 16px; }
.energy-location { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 30px 0; border-block: 1px solid var(--line); }
.energy-location h3 { font-size: 25px; font-weight: 500; margin: 0 0 12px; }
.energy-location p:not(.location-name) { color: var(--muted); margin: 0; }
.facility { padding-top: 54px; }
.facility-copy { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 56px; align-items: start; margin-bottom: 26px; }
.facility-copy .location-name { grid-column: 1; }
.facility-copy h3 { grid-column: 1; font-size: 32px; font-weight: 500; margin: 0; letter-spacing: -.7px; }
.facility-copy > p:last-child { grid-column: 2; grid-row: 1 / 3; font-size: 17px; color: var(--muted); margin: 0; }
.facility figure { margin: 0; }
.facility-gallery { display: grid; overflow: hidden; border-radius: 12px; background: var(--soft); }
.facility-gallery.paired { grid-template-columns: 1.3fr 1fr; gap: 12px; }
.facility-gallery img { width: 100%; height: 420px; object-fit: cover; }
.facility figcaption { color: var(--muted); font-size: 12px; margin-top: 12px; line-height: 1.6; }
@media (max-width: 1000px) { .facility-gallery img { height: 310px; } .facility-copy { gap: 0 32px; } }
@media (max-width: 700px) {
 .locations { margin-top: 30px; }
 .energy-location { grid-template-columns: 1fr; gap: 8px; }
 .facility { padding-top: 38px; }
 .facility-copy { display: block; margin-bottom: 22px; }
 .facility-copy h3 { font-size: 28px; margin-bottom: 16px; }
 .facility-copy > p:last-child { font-size: 16px; }
 .facility-gallery.paired { grid-template-columns: 1fr; gap: 10px; }
 .facility-gallery img { height: auto; aspect-ratio: 3 / 2; }
}

/* Light photographic presentation, aligned with the cobalt/white identity. */
.facility { padding-top: 48px; }
.facility + .facility { margin-top: 48px; border-top: 1px solid var(--line); }
.facility figure { padding: 10px; background: #f3f6ff; border: 1px solid #e1e7f5; border-radius: 16px; }
.facility-gallery { border-radius: 9px; background: #f3f6ff; }
.facility-gallery.paired { grid-template-columns: 1.35fr 1fr; gap: 10px; }
.facility-gallery img { height: 390px; object-fit: cover; }
.facility-gallery:not(.paired) img { height: auto; aspect-ratio: 2.5 / 1; object-position: center 58%; }
@media (max-width: 1000px) {
 .facility-gallery img { height: 300px; }
 .facility-gallery:not(.paired) img { aspect-ratio: 2 / 1; }
}
@media (max-width: 700px) {
 .facility { padding-top: 32px; }
 .facility + .facility { margin-top: 32px; }
 .facility figure { padding: 6px; border-radius: 12px; }
 .facility-gallery { border-radius: 7px; }
 .facility-gallery.paired { grid-template-columns: 1fr; gap: 6px; }
 .facility-gallery img, .facility-gallery:not(.paired) img { height: auto; aspect-ratio: 3 / 2; }
}