/* ============================================================
   AVERQION V37 — DEFI PAGE
   Isolated page system: indigo / electric blue / violet with a
   soft pink editorial surface. No global styles are modified.
   ============================================================ */

.defi-page {
  background: #10072E !important;
  color: #fff;
}
.defi-page main.defi-main {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(ellipse 44% 24% at 8% 34%, rgba(30, 91, 255, .13), transparent 76%),
    radial-gradient(ellipse 42% 28% at 94% 73%, rgba(132, 62, 255, .13), transparent 78%),
    #10072E;
}
.defi-page .defi-section-inner,
.defi-page .defi-hero-inner {
  position: relative;
  z-index: 2;
}
.defi-page .defi-section-kicker {
  margin: 0 0 18px;
  color: #BFCBFF;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .27em;
  line-height: 1.4;
  text-transform: uppercase;
}
.defi-page .defi-section-heading {
  max-width: 850px;
  margin: 0 auto clamp(38px, 5vw, 62px);
  text-align: center;
}
.defi-page .defi-section-heading h2 {
  margin: 0 auto 17px;
  max-width: 850px;
  color: #fff;
  font-size: clamp(36px, 5vw, 61px);
  font-weight: 630;
  line-height: 1.055;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.defi-page .defi-section-heading > p:last-child {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(219, 226, 255, .74);
  font-size: 15px;
  line-height: 1.8;
}
.defi-page .defi-section-heading-light .defi-section-kicker {
  color: #D8D5FF;
}
.defi-page .defi-section-heading-light > p:last-child {
  color: rgba(219, 226, 255, .72);
}

/* 01 — Hero */
.defi-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 690px;
  padding: 170px 0 122px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 54% 76% at 7% 48%, rgba(43, 91, 255, .35), transparent 73%),
    radial-gradient(ellipse 48% 68% at 93% 28%, rgba(137, 61, 255, .28), transparent 74%),
    radial-gradient(ellipse 44% 44% at 51% 100%, rgba(32, 111, 255, .18), transparent 78%),
    linear-gradient(118deg, #110B3A 0%, #10072E 52%, #0D1244 100%);
}
.defi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(177, 193, 255, .15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 193, 255, .15) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 91%);
}
.defi-hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(82px);
  pointer-events: none;
}
.defi-hero-glow-a {
  width: 390px;
  height: 390px;
  left: -190px;
  bottom: -170px;
  background: rgba(29, 122, 255, .29);
}
.defi-hero-glow-b {
  width: 430px;
  height: 430px;
  right: -210px;
  top: 45px;
  background: rgba(139, 65, 255, .24);
}
.defi-hero-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(184, 206, 255, .7) 1px, transparent 1.8px),
    radial-gradient(circle at 76% 32%, rgba(209, 180, 255, .58) 1px, transparent 1.8px),
    radial-gradient(circle at 63% 78%, rgba(139, 180, 255, .52) 1px, transparent 1.8px);
  background-size: 173px 151px, 211px 197px, 239px 223px;
}
.defi-hero-inner {
  max-width: 1040px;
  text-align: center;
}
.defi-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 27px;
  color: #E0DCFF;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .34em;
}
.defi-eyebrow span {
  width: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9DB6FF);
  box-shadow: 0 0 12px rgba(105, 153, 255, .62);
}
.defi-eyebrow span:last-child {
  transform: rotate(180deg);
}
.defi-hero h1 {
  max-width: 980px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(43px, 6.15vw, 78px);
  font-weight: 650;
  line-height: 1.035;
  letter-spacing: -.064em;
  text-wrap: balance;
  text-shadow: 0 8px 42px rgba(4, 7, 40, .24);
}
.defi-hero-lede {
  max-width: 790px;
  margin: 30px auto 0;
  color: rgba(232, 235, 255, .86);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
  letter-spacing: -.025em;
}
.defi-hero-description {
  max-width: 760px;
  margin: 15px auto 0;
  color: rgba(199, 209, 244, .76);
  font-size: 14px;
  line-height: 1.8;
}
.defi-hero-orbit-mark {
  position: absolute;
  right: 7.5%;
  bottom: 8%;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(164, 185, 255, .2);
  border-radius: 50%;
  color: rgba(255, 255, 255, .38);
  box-shadow: 0 0 35px rgba(65, 103, 255, .12), inset 0 0 25px rgba(111, 96, 255, .08);
  pointer-events: none;
  opacity: .48;
}
.defi-hero-orbit-mark span {
  font-size: 34px;
  font-weight: 780;
  letter-spacing: -.08em;
}
.defi-hero-orbit-mark i,
.defi-hero-orbit-mark b {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(159, 181, 255, .18);
  border-radius: 50%;
}
.defi-hero-orbit-mark b {
  inset: -9px;
  border-style: dashed;
  animation: defi-hero-ring 42s linear infinite;
}

/* 02 — Overview editorial panel */
.defi-overview-section {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(76px, 9vw, 116px);
  background: linear-gradient(180deg, #10072E 0%, #10072E 30px, transparent 30px);
}
.defi-overview-card {
  position: relative;
  padding: clamp(34px, 5.2vw, 70px);
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 23px;
  background:
    radial-gradient(ellipse 42% 55% at 100% 0%, rgba(227, 195, 255, .38), transparent 78%),
    linear-gradient(132deg, #FFF9FF 0%, #F7ECFC 54%, #F0E8FF 100%);
  color: #190D45;
  box-shadow: 0 28px 90px rgba(3, 2, 20, .25), inset 0 1px 0 rgba(255, 255, 255, .82);
}
.defi-overview-top {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(390px, .97fr);
  align-items: center;
  gap: clamp(38px, 5.6vw, 78px);
}
.defi-overview-copy {
  min-width: 0;
  max-width: 620px;
}
.defi-overview-copy .defi-section-kicker {
  margin-bottom: 26px;
  color: #71439A;
}
.defi-overview-copy h2 {
  margin: 0 0 27px;
  color: #1B103E;
  font-size: clamp(36px, 4.25vw, 56px);
  font-weight: 630;
  line-height: 1.06;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.defi-overview-copy h2 span {
  color: #60418D;
}
.defi-overview-copy > p:not(.defi-section-kicker) {
  max-width: 590px;
  margin: 0 0 17px;
  color: #71677D;
  font-size: 14px;
  line-height: 1.82;
}
.defi-overview-copy > p:last-child {
  margin-bottom: 0;
}

/* 02A — six-node AVERQION orbit */
.defi-orbit-scene {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(142, 158, 255, .34);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 58% 58% at 48% 48%, rgba(61, 91, 231, .34), transparent 72%),
    radial-gradient(ellipse 70% 70% at 52% 48%, rgba(133, 66, 220, .23), transparent 74%),
    radial-gradient(ellipse 90% 90% at 50% 50%, rgba(25, 71, 190, .24), transparent 78%),
    linear-gradient(145deg, #111044 0%, #111C5B 48%, #21104D 100%);
  box-shadow: 0 22px 54px rgba(31, 19, 81, .24), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.defi-orbit-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(rgba(181, 195, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 195, 255, .12) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, #000 12%, transparent 86%);
}
.defi-orbit-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(5, 7, 39, .22) 100%);
}
.defi-orbit-ambient {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(42px);
  pointer-events: none;
}
.defi-orbit-ambient-a {
  width: 66%;
  height: 66%;
  left: 17%;
  top: 17%;
  background: rgba(43, 111, 255, .35);
  animation: defi-ambient-pulse 8s ease-in-out infinite alternate;
}
.defi-orbit-ambient-b {
  width: 42%;
  height: 42%;
  left: 30%;
  top: 32%;
  background: rgba(170, 91, 255, .26);
  animation: defi-ambient-pulse 10s ease-in-out infinite alternate-reverse;
}
.defi-orbit-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.defi-star {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #EAF2FF;
  box-shadow: 0 0 5px 1px rgba(150, 185, 255, .72), 0 0 11px rgba(120, 145, 255, .44);
  opacity: .28;
  animation: defi-star-twinkle 3.6s ease-in-out var(--delay, 0s) infinite alternate;
}
.defi-star-01{left:12%;top:19%;--delay:-.7s}.defi-star-02{left:23%;top:11%;--delay:-2.1s}
.defi-star-03{left:39%;top:16%;--delay:-1.3s}.defi-star-04{left:63%;top:12%;--delay:-2.8s}
.defi-star-05{left:83%;top:22%;--delay:-.3s}.defi-star-06{left:91%;top:42%;--delay:-1.8s}
.defi-star-07{left:86%;top:72%;--delay:-2.4s}.defi-star-08{left:71%;top:88%;--delay:-.9s}
.defi-star-09{left:52%;top:93%;--delay:-3.1s}.defi-star-10{left:29%;top:86%;--delay:-1.1s}
.defi-star-11{left:11%;top:73%;--delay:-2.6s}.defi-star-12{left:7%;top:47%;--delay:-.4s}
.defi-star-13{left:25%;top:34%;--delay:-1.7s}.defi-star-14{left:36%;top:27%;--delay:-2.3s}
.defi-star-15{left:65%;top:29%;--delay:-.8s}.defi-star-16{left:76%;top:49%;--delay:-3s}
.defi-star-17{left:65%;top:70%;--delay:-1.4s}.defi-star-18{left:35%;top:73%;--delay:-2.7s}
.defi-star-19{left:47%;top:8%;--delay:-1.9s}.defi-star-20{left:17%;top:57%;--delay:-.5s}
.defi-star-21{left:80%;top:59%;--delay:-2.2s}.defi-star-22{left:55%;top:82%;--delay:-1.2s}
.defi-star-23{left:43%;top:49%;--delay:-3.3s}.defi-star-24{left:58%;top:39%;--delay:-.2s}
.defi-star:nth-child(3n){width:3px;height:3px}
.defi-star:nth-child(4n){background:#DCCBFF;box-shadow:0 0 6px rgba(190, 160, 255, .8)}
.defi-star:nth-child(5n){width:1.5px;height:1.5px}
.defi-orbit-guide {
  position: absolute;
  inset: 3.5%;
  z-index: 1;
  width: 93%;
  height: 93%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(95, 145, 255, .25));
  animation: defi-guide-drift 90s linear infinite;
}
.defi-orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 29%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(218, 228, 255, .82);
  border-radius: 28%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(145deg, rgba(101, 144, 255, .25), rgba(32, 28, 105, .35));
  box-shadow: 0 0 20px rgba(95, 147, 255, .52), 0 0 52px rgba(105, 75, 255, .28), inset 0 0 25px rgba(168, 187, 255, .17);
}
.defi-orbit-core span {
  transform: rotate(-45deg);
  color: #fff;
  font-size: clamp(58px, 7.8vw, 100px);
  font-weight: 790;
  line-height: 1;
  letter-spacing: -.09em;
  text-shadow: 0 0 18px rgba(133, 174, 255, .82), 0 0 42px rgba(154, 112, 255, .58);
}
.defi-orbit-core i {
  position: absolute;
  inset: -14%;
  border: 1px solid rgba(151, 186, 255, .36);
  border-radius: 34%;
  animation: defi-core-pulse 4.2s ease-in-out infinite;
}
.defi-orbit-track {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  animation: defi-orbit-spin 38s linear infinite;
  will-change: transform;
}
.defi-orbit-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(50px, 9.5vw, 76px);
  height: clamp(50px, 9.5vw, 76px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(188, 207, 255, .86);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, rgba(123, 166, 255, .42), rgba(26, 34, 113, .9) 72%);
  box-shadow: 0 0 0 5px rgba(90, 130, 255, .07), 0 0 25px rgba(78, 128, 255, .44), inset 0 0 18px rgba(166, 190, 255, .23);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.defi-orbit-node::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 218, 255, .2);
  border-radius: 50%;
}
.defi-orbit-node::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(133, 175, 255, .27);
  border-radius: 50%;
  animation: defi-node-halo 3.8s ease-out infinite;
}
.defi-node-inner {
  position: relative;
  z-index: 1;
  width: 43%;
  height: 43%;
  display: grid;
  place-items: center;
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(145, 184, 255, .82));
  animation: defi-orbit-counter 38s linear infinite;
}
.defi-node-inner svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.defi-node-1{transform:translate(-50%,-50%);left:50%;top:14%}
.defi-node-2{transform:translate(-50%,-50%);left:81.2%;top:32%}
.defi-node-3{transform:translate(-50%,-50%);left:81.2%;top:68%}
.defi-node-4{transform:translate(-50%,-50%);left:50%;top:86%}
.defi-node-5{transform:translate(-50%,-50%);left:18.8%;top:68%}
.defi-node-6{transform:translate(-50%,-50%);left:18.8%;top:32%}
.defi-orbit-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  color: rgba(206, 218, 255, .72);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .2em;
}
.defi-orbit-caption span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8DB6FF;
  box-shadow: 0 0 10px #79A7FF;
}

/* Overview — connected principles */
.defi-principles {
  margin-top: clamp(48px, 6.8vw, 84px);
  border-top: 1px solid rgba(87, 66, 116, .23);
}
.defi-principle-row {
  display: grid;
  grid-template-columns: minmax(190px, .9fr) minmax(140px, .5fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(20px, 3vw, 42px);
  padding: 24px 0;
  border-bottom: 1px solid rgba(87, 66, 116, .2);
}
.defi-principle-name h3 {
  margin: 0 0 5px;
  color: #20123F;
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 630;
  letter-spacing: -.045em;
}
.defi-principle-name p {
  margin: 0;
  color: #756985;
  font-size: 13px;
}
.defi-principle-word {
  color: #47336D;
  font-size: clamp(20px, 2.6vw, 31px);
  font-weight: 760;
  letter-spacing: -.055em;
  text-align: center;
}
.defi-principle-detail {
  margin: 0;
  color: #71677D;
  font-size: 13px;
  line-height: 1.72;
}

/* 03 — Market dimensions */
.defi-stats {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(84px, 10vw, 138px) 0 clamp(92px, 10vw, 142px);
  background:
    radial-gradient(ellipse 44% 62% at 8% 48%, rgba(27, 96, 255, .24), transparent 76%),
    radial-gradient(ellipse 44% 55% at 93% 22%, rgba(127, 60, 255, .23), transparent 78%),
    linear-gradient(118deg, #100A36 0%, #10072E 54%, #0D1242 100%);
}
.defi-stats::before,
.defi-framework::before,
.defi-ecosystem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .10;
  background-image:
    linear-gradient(rgba(174, 191, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 191, 255, .12) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.defi-stats-glow {
  position: absolute;
  z-index: -1;
  width: 440px;
  height: 440px;
  left: -240px;
  bottom: -240px;
  border-radius: 50%;
  background: rgba(31, 109, 255, .25);
  filter: blur(90px);
  pointer-events: none;
}
.defi-metrics-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(170px, auto) minmax(190px, auto);
  gap: 14px;
}
.defi-metric-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  min-height: 190px;
  overflow: hidden;
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid rgba(151, 174, 255, .14);
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 18%, rgba(136, 157, 255, .12) 1px, transparent 1.8px),
    linear-gradient(135deg, rgba(30, 39, 116, .66), rgba(25, 21, 83, .78));
  background-size: 28px 28px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.defi-metric-card:hover {
  transform: translateY(-4px);
  border-color: rgba(173, 191, 255, .42);
  box-shadow: 0 18px 38px rgba(3, 7, 38, .22), 0 0 28px rgba(83, 113, 231, .12);
}
.defi-metric-featured {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  min-height: 390px;
  color: #20113F;
  border-color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(circle at 82% 18%, rgba(174, 126, 215, .16) 1px, transparent 1.8px),
    linear-gradient(145deg, #FBE9FF 0%, #F4DFF9 52%, #EDE6FF 100%);
  background-size: 28px 28px, auto;
}
.defi-metric-wide {
  grid-column: 5 / span 8;
  grid-row: 1;
}
.defi-metric-card:nth-child(3) {
  grid-column: 5 / span 4;
  grid-row: 2;
}
.defi-metric-card:nth-child(4) {
  grid-column: 9 / span 4;
  grid-row: 2;
}
.defi-metric-label {
  display: block;
  max-width: 280px;
  color: #DCE4FF;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.55;
  letter-spacing: .13em;
}
.defi-metric-featured .defi-metric-label {
  color: #4B3766;
}
.defi-metric-card strong {
  display: block;
  margin: auto 0 9px;
  color: #F4E9FF;
  font-size: clamp(35px, 4.3vw, 59px);
  font-weight: 690;
  line-height: .98;
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
}
.defi-metric-featured strong {
  color: #1C123B;
  font-size: clamp(43px, 5vw, 68px);
}
.defi-metric-card p {
  max-width: 480px;
  margin: 0;
  color: rgba(218, 226, 255, .7);
  font-size: 12px;
  line-height: 1.68;
}
.defi-metric-featured p {
  color: #71627F;
}
.defi-metric-index {
  position: absolute;
  right: 24px;
  bottom: 22px;
  color: rgba(220, 228, 255, .44);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}
.defi-metric-featured .defi-metric-index {
  color: rgba(66, 47, 92, .42);
}

/* 04 — Three capability pillars */
.defi-capabilities {
  position: relative;
  padding: clamp(86px, 10vw, 136px) 0 clamp(92px, 10vw, 142px);
  background:
    radial-gradient(ellipse 48% 55% at 3% 55%, rgba(29, 91, 255, .17), transparent 76%),
    linear-gradient(180deg, #10072E 0%, #111044 100%);
}
.defi-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.defi-capability-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 430px;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(151, 174, 255, .2);
  border-radius: 15px;
  background:
    radial-gradient(ellipse 85% 55% at 100% 0%, rgba(100, 93, 255, .16), transparent 75%),
    linear-gradient(145deg, rgba(27, 36, 111, .74), rgba(20, 17, 72, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.defi-capability-card::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  z-index: -1;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(91, 116, 255, .12);
  filter: blur(55px);
  opacity: .5;
  transition: opacity .28s ease;
}
.defi-capability-card:hover {
  transform: translateY(-5px);
  border-color: rgba(170, 193, 255, .5);
  box-shadow: 0 18px 38px rgba(3, 7, 38, .22), 0 0 25px rgba(83, 113, 231, .11);
}
.defi-capability-card:hover::after { opacity: 1; }
.defi-card-index {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #B8C9FF;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
}
.defi-card-index i {
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, #76B2FF, #B68AFF);
  box-shadow: 0 0 10px rgba(117, 156, 255, .48);
}
.defi-capability-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 28px 0 19px;
  border: 1px solid rgba(173, 192, 255, .28);
  border-radius: 13px;
  color: #E6ECFF;
  background: linear-gradient(145deg, rgba(95, 119, 224, .22), rgba(106, 66, 180, .14));
  box-shadow: 0 0 22px rgba(83, 111, 255, .1);
}
.defi-capability-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.defi-capability-card h3 {
  max-width: 340px;
  margin: 0 0 13px;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 630;
  line-height: 1.13;
  letter-spacing: -.045em;
}
.defi-capability-card > p {
  margin: 0 0 23px;
  color: rgba(218, 226, 255, .73);
  font-size: 13px;
  line-height: 1.75;
}
.defi-capability-card ul {
  display: grid;
  gap: 11px;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(174, 191, 255, .16);
  list-style: none;
}
.defi-capability-card li {
  position: relative;
  padding-left: 17px;
  color: rgba(236, 239, 255, .88);
  font-size: 12px;
  line-height: 1.55;
}
.defi-capability-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .57em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9FB8FF;
  box-shadow: 0 0 8px rgba(115, 157, 255, .65);
}

/* 05 — Detailed operating framework */
.defi-framework {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 10vw, 138px) 0 clamp(94px, 10vw, 144px);
  background:
    radial-gradient(ellipse 42% 62% at 94% 40%, rgba(125, 57, 255, .2), transparent 76%),
    radial-gradient(ellipse 40% 55% at 0% 80%, rgba(27, 99, 255, .17), transparent 76%),
    linear-gradient(118deg, #0F0A35 0%, #10072E 55%, #0C1240 100%);
}
.defi-framework-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.defi-framework-card {
  min-width: 0;
  padding: clamp(23px, 2.7vw, 32px);
  border: 1px solid rgba(151, 174, 255, .18);
  border-radius: 15px;
  background:
    radial-gradient(ellipse 80% 40% at 100% 0%, rgba(96, 104, 238, .12), transparent 78%),
    linear-gradient(145deg, rgba(28, 36, 108, .64), rgba(20, 17, 70, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.defi-framework-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(173, 190, 255, .16);
  color: #B9C9FF;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .15em;
}
.defi-framework-top i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(173, 192, 255, .25);
  border-radius: 9px;
  color: #E7E9FF;
  font-size: 15px;
  font-style: normal;
  background: rgba(96, 112, 226, .14);
}
.defi-framework-card h3 {
  margin: 22px 0 10px;
  color: #fff;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 630;
  line-height: 1.14;
  letter-spacing: -.045em;
}
.defi-framework-lede {
  min-height: 76px;
  margin: 0 0 22px;
  color: rgba(218, 226, 255, .7);
  font-size: 12px;
  line-height: 1.72;
}
.defi-framework-item {
  padding: 17px 0 0;
  margin-top: 16px;
  border-top: 1px solid rgba(173, 190, 255, .13);
}
.defi-framework-item strong {
  display: block;
  margin-bottom: 7px;
  color: #F0EDFF;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}
.defi-framework-item p {
  margin: 0;
  color: rgba(208, 218, 250, .67);
  font-size: 11px;
  line-height: 1.72;
}

/* 06 — Ecosystem landscape */
.defi-ecosystem {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 10vw, 140px) 0 clamp(98px, 11vw, 150px);
  background:
    radial-gradient(ellipse 47% 60% at 8% 56%, rgba(29, 104, 255, .22), transparent 76%),
    radial-gradient(ellipse 44% 56% at 92% 18%, rgba(135, 64, 255, .2), transparent 77%),
    linear-gradient(118deg, #100A36 0%, #10072E 54%, #0D1242 100%);
}
.defi-ecosystem-glow {
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  right: -230px;
  bottom: -220px;
  border-radius: 50%;
  background: rgba(90, 68, 255, .25);
  filter: blur(95px);
  pointer-events: none;
}
.defi-ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(118, 146, 255, .32);
  border-radius: 18px;
  background: rgba(15, 17, 67, .52);
  box-shadow: 0 24px 60px rgba(4, 5, 35, .18);
}
.defi-ecosystem-tile {
  position: relative;
  min-height: 205px;
  padding: 26px 28px 25px;
  border-right: 1px solid rgba(118, 146, 255, .22);
  border-bottom: 1px solid rgba(118, 146, 255, .22);
  background: linear-gradient(145deg, rgba(33, 42, 126, .38), rgba(20, 18, 76, .28));
  transition: background .25s ease, box-shadow .25s ease;
}
.defi-ecosystem-tile:nth-child(3n) { border-right: 0; }
.defi-ecosystem-tile:nth-last-child(-n+3) { border-bottom: 0; }
.defi-ecosystem-tile:hover {
  background: linear-gradient(145deg, rgba(50, 64, 157, .52), rgba(38, 27, 111, .48));
  box-shadow: inset 0 0 36px rgba(99, 126, 255, .09);
}
.defi-ecosystem-no {
  position: absolute;
  top: 23px;
  right: 25px;
  color: rgba(190, 204, 255, .42);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}
.defi-ecosystem-tile svg {
  display: block;
  width: 32px;
  height: 32px;
  margin: 2px 0 20px;
  fill: none;
  stroke: #DDE7FF;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(128, 164, 255, .28));
}
.defi-ecosystem-tile h3 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 17px;
  font-weight: 630;
  letter-spacing: -.025em;
}
.defi-ecosystem-tile p {
  max-width: 290px;
  margin: 0;
  color: rgba(213, 223, 255, .66);
  font-size: 11px;
  line-height: 1.68;
}

/* 07 — Closing brand statement */
.defi-close {
  position: relative;
  padding: 0 0 clamp(78px, 9vw, 118px);
  background: linear-gradient(180deg, #0D1242 0%, #10072E 100%);
}
.defi-close-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(45px, 6vw, 76px) clamp(25px, 6vw, 78px);
  border: 1px solid rgba(173, 187, 255, .23);
  border-radius: 20px;
  text-align: center;
  background:
    radial-gradient(ellipse 48% 120% at 50% 0%, rgba(131, 72, 255, .24), transparent 74%),
    radial-gradient(ellipse 50% 100% at 10% 100%, rgba(35, 106, 255, .16), transparent 76%),
    linear-gradient(115deg, rgba(25, 34, 108, .76), rgba(29, 20, 87, .82));
  box-shadow: 0 24px 60px rgba(4, 5, 35, .22);
}
.defi-close-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .11;
  background-image: radial-gradient(rgba(194, 208, 255, .9) .8px, transparent 1.2px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 76%);
}
.defi-close-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 0 25px;
  border: 1px solid rgba(191, 207, 255, .48);
  border-radius: 21px;
  transform: rotate(45deg);
  background: linear-gradient(145deg, rgba(100, 143, 255, .22), rgba(88, 58, 184, .22));
  box-shadow: 0 0 24px rgba(95, 147, 255, .2), inset 0 0 20px rgba(168, 187, 255, .12);
}
.defi-close-mark span {
  transform: rotate(-45deg);
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.08em;
}
.defi-close-mark i {
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(151, 186, 255, .2);
  border-radius: 26px;
  animation: defi-core-pulse 4.5s ease-in-out infinite;
}
.defi-close-panel .defi-section-kicker {
  margin-bottom: 17px;
}
.defi-close-panel h2 {
  max-width: 900px;
  margin: 0 auto 16px;
  color: #fff;
  font-size: clamp(31px, 4.7vw, 55px);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.defi-close-panel > p:last-child {
  max-width: 650px;
  margin: 0;
  color: rgba(218, 225, 255, .72);
  font-size: 14px;
  line-height: 1.75;
}

/* Motion system */
@keyframes defi-orbit-spin { to { transform: rotate(360deg); } }
@keyframes defi-orbit-counter { to { transform: rotate(-360deg); } }
@keyframes defi-guide-drift { to { transform: rotate(-360deg); } }
@keyframes defi-hero-ring { to { transform: rotate(360deg); } }
@keyframes defi-ambient-pulse {
  0% { opacity: .58; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1.08); }
}
@keyframes defi-core-pulse {
  0%, 100% { opacity: .45; transform: scale(.98); }
  50% { opacity: .95; transform: scale(1.06); }
}
@keyframes defi-node-halo {
  0% { opacity: .56; transform: scale(.92); }
  75%, 100% { opacity: 0; transform: scale(1.22); }
}
@keyframes defi-star-twinkle {
  0% { opacity: .12; transform: scale(.72); }
  45% { opacity: .82; transform: scale(1.28); }
  100% { opacity: .22; transform: scale(.86); }
}

/* Responsive layouts */
@media (max-width: 1080px) {
  .defi-overview-top { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 34px; }
  .defi-principle-row { grid-template-columns: minmax(160px, .85fr) minmax(115px, .5fr) minmax(0, 1.2fr); gap: 20px; }
  .defi-framework-lede { min-height: 92px; }
  .defi-ecosystem-tile { min-height: 195px; }
}
@media (max-width: 900px) {
  .defi-hero { min-height: 630px; padding: 154px 0 104px; }
  .defi-overview-top { grid-template-columns: 1fr; gap: 38px; }
  .defi-overview-copy { max-width: 760px; }
  .defi-orbit-scene { width: min(100%, 530px); }
  .defi-principle-row { grid-template-columns: minmax(0, .9fr) minmax(120px, .5fr) minmax(0, 1.2fr); }
  .defi-capability-grid,
  .defi-framework-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .defi-capability-card:last-child,
  .defi-framework-card:last-child { grid-column: 1 / -1; }
  .defi-capability-card { min-height: 400px; }
  .defi-framework-lede { min-height: 0; }
}
@media (max-width: 680px) {
  .defi-hero { min-height: 590px; padding: 138px 0 90px; }
  .defi-hero-inner { width: calc(100% - 38px); }
  .defi-eyebrow { font-size: 9px; letter-spacing: .25em; }
  .defi-hero h1 { font-size: clamp(38px, 9.8vw, 54px); line-height: 1.07; }
  .defi-hero-lede { margin-top: 23px; font-size: 16px; }
  .defi-hero-description { max-width: 560px; font-size: 12px; line-height: 1.75; }
  .defi-hero-orbit-mark { right: 5%; bottom: 3%; width: 64px; height: 64px; opacity: .3; }
  .defi-hero-orbit-mark span { font-size: 25px; }
  .defi-overview-section { padding-bottom: 72px; }
  .defi-overview-card { width: calc(100% - 24px); padding: 34px 24px 32px; border-radius: 17px; }
  .defi-overview-copy .defi-section-kicker { margin-bottom: 19px; }
  .defi-overview-copy h2 { font-size: clamp(34px, 8.6vw, 45px); margin-bottom: 20px; }
  .defi-overview-copy > p:not(.defi-section-kicker) { font-size: 13px; line-height: 1.75; }
  .defi-orbit-scene { width: 100%; max-width: 460px; border-radius: 16px; }
  .defi-orbit-node { width: clamp(46px, 12vw, 58px); height: clamp(46px, 12vw, 58px); }
  .defi-orbit-core { width: 30%; }
  .defi-orbit-core span { font-size: clamp(55px, 17vw, 74px); }
  .defi-orbit-caption { bottom: 13px; font-size: 7px; }
  .defi-principles { margin-top: 38px; }
  .defi-principle-row { grid-template-columns: 1fr auto; gap: 8px 15px; padding: 19px 0; }
  .defi-principle-name h3 { font-size: 20px; }
  .defi-principle-name p { font-size: 11px; }
  .defi-principle-word { grid-column: 2; grid-row: 1; font-size: 16px; }
  .defi-principle-detail { grid-column: 1 / -1; font-size: 12px; }
  .defi-stats,
  .defi-capabilities,
  .defi-framework,
  .defi-ecosystem { padding: 76px 0 82px; }
  .defi-page .defi-section-heading { margin-bottom: 32px; }
  .defi-page .defi-section-heading h2 { font-size: clamp(33px, 8.4vw, 43px); }
  .defi-page .defi-section-heading > p:last-child { font-size: 13px; line-height: 1.7; }
  .defi-metrics-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 10px; }
  .defi-metric-card,
  .defi-metric-featured,
  .defi-metric-wide,
  .defi-metric-card:nth-child(3),
  .defi-metric-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
    min-height: 210px;
    padding: 19px 17px;
  }
  .defi-metric-featured { grid-column: 1 / -1; min-height: 230px; }
  .defi-metric-label { font-size: 8px; }
  .defi-metric-card strong { font-size: clamp(27px, 7vw, 38px); }
  .defi-metric-featured strong { font-size: clamp(39px, 10vw, 53px); }
  .defi-metric-card p { font-size: 10px; line-height: 1.55; }
  .defi-metric-index { right: 14px; bottom: 13px; font-size: 7px; }
  .defi-capability-grid,
  .defi-framework-grid { grid-template-columns: 1fr; gap: 11px; }
  .defi-capability-card,
  .defi-framework-card,
  .defi-capability-card:last-child,
  .defi-framework-card:last-child {
    grid-column: auto;
    min-height: 0;
    padding: 23px 21px;
  }
  .defi-capability-icon { width: 42px; height: 42px; margin: 20px 0 15px; }
  .defi-capability-card h3 { font-size: 23px; }
  .defi-capability-card > p { font-size: 12px; }
  .defi-capability-card ul { margin-top: 12px; }
  .defi-capability-card li { font-size: 11px; }
  .defi-framework-card h3 { font-size: 23px; }
  .defi-framework-lede { margin-bottom: 15px; font-size: 11px; }
  .defi-framework-item { margin-top: 13px; padding-top: 13px; }
  .defi-framework-item p { font-size: 10px; }
  .defi-ecosystem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; }
  .defi-ecosystem-tile { min-height: 180px; padding: 20px 17px; }
  .defi-ecosystem-tile:nth-child(3n) { border-right: 1px solid rgba(118, 146, 255, .22); }
  .defi-ecosystem-tile:nth-child(2n) { border-right: 0; }
  .defi-ecosystem-tile:nth-last-child(-n+3) { border-bottom: 1px solid rgba(118, 146, 255, .22); }
  .defi-ecosystem-tile:nth-last-child(-n+1) { border-bottom: 0; }
  .defi-ecosystem-tile svg { width: 28px; height: 28px; margin-bottom: 16px; }
  .defi-ecosystem-tile h3 { font-size: 14px; }
  .defi-ecosystem-tile p { font-size: 10px; }
  .defi-ecosystem-no { top: 17px; right: 16px; font-size: 8px; }
  .defi-close { padding-bottom: 68px; }
  .defi-close-panel { width: calc(100% - 24px); padding: 36px 22px; border-radius: 16px; }
  .defi-close-panel h2 { font-size: clamp(29px, 8vw, 37px); }
  .defi-close-panel > p:last-child { font-size: 12px; }
}
@media (max-width: 390px) {
  .defi-metrics-grid { grid-template-columns: 1fr; }
  .defi-metric-featured,
  .defi-metric-card,
  .defi-metric-wide,
  .defi-metric-card:nth-child(3),
  .defi-metric-card:nth-child(4) { grid-column: 1; min-height: 175px; }
  .defi-ecosystem-grid { grid-template-columns: 1fr; }
  .defi-ecosystem-tile,
  .defi-ecosystem-tile:nth-child(3n),
  .defi-ecosystem-tile:nth-child(2n),
  .defi-ecosystem-tile:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid rgba(118, 146, 255, .22); }
  .defi-ecosystem-tile:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .defi-hero-orbit-mark b,
  .defi-orbit-ambient-a,
  .defi-orbit-ambient-b,
  .defi-orbit-guide,
  .defi-orbit-core i,
  .defi-orbit-track,
  .defi-node-inner,
  .defi-orbit-node::after,
  .defi-star,
  .defi-close-mark i {
    animation: none !important;
  }
  .defi-metric-card,
  .defi-capability-card,
  .defi-ecosystem-tile {
    transition: none !important;
  }
}