/* VYNTRONA Home + Docs — color alignment with approved Login/Register.
   Color-only theme layer. Layout, content, IDs, animation and JS behavior remain unchanged. */
:root{
  --violet:#8067E8;
  --purple:#A88AF4;
  --lav:#C7B7FA;
  --soft:#E7E0FF;
  --ultra:#F2EEFF;
  --ice:#F8F9FD;
  --white:#fff;
  --ink:#17152B;
  --muted:#746D85;
  --line:#DDD5F7;
  --border:#DDD5F7;
  --blue:#8067E8;
  --cyan:#A88AF4;
  --navy:#17152B;
  --midnight:#211C37;
  --shadow:0 24px 70px rgba(105,79,190,.11);
}
body{background:radial-gradient(circle at 12% 18%,rgba(168,138,244,.12),transparent 22%),linear-gradient(180deg,#FBFAFF 0,#F8F9FD 34%,#F4F0FF 100%);color:var(--ink)}
::selection{background:#E7E0FF;color:#302947}
.site-header,.docs-header{border-color:rgba(128,103,232,.13);background:rgba(255,255,255,.82);box-shadow:0 10px 35px rgba(105,79,190,.06)}
.site-header.scrolled{box-shadow:0 14px 38px rgba(105,79,190,.10)}
.brand-mark{background:linear-gradient(145deg,#B69CF7,#8067E8);box-shadow:0 8px 18px rgba(105,79,190,.15)}
.nav{color:#625B78}.nav a:hover,.nav a.active{color:#8067E8}.nav-docs{color:#625B78}
.btn-primary{background:linear-gradient(135deg,#A88AF4,#8067E8);box-shadow:0 12px 28px rgba(105,79,190,.19)}
.btn-primary:hover{box-shadow:0 15px 32px rgba(105,79,190,.24)}
.btn-ghost{background:rgba(255,255,255,.76);border-color:#DDD5F7;color:#302947}.btn-dark{background:#211C37}.btn-outline-light{border-color:rgba(231,224,255,.28)}
.eyebrow,.section-intro h2 span,.hero h1 span{color:#8067E8}.section-intro.light .eyebrow{color:#C7B7FA}.section-intro.light p{color:#B8AEC9}
.dark-section{background:linear-gradient(145deg,#211C37,#17152B);color:#fff}
.ambient-a{background:rgba(168,138,244,.18)!important}.ambient-b{background:rgba(199,183,250,.22)!important}
.hero{background:radial-gradient(circle at 78% 26%,rgba(168,138,244,.20),transparent 28%),radial-gradient(circle at 18% 72%,rgba(199,183,250,.24),transparent 26%),linear-gradient(135deg,#FBFAFF,#F3EFFF 48%,#E8DFFF)!important}
.core-glow{background:rgba(168,138,244,.22)!important}.core,.protocol-core{border-color:rgba(128,103,232,.20)!important;box-shadow:0 24px 70px rgba(105,79,190,.15)!important}.orbit{border-color:rgba(128,103,232,.20)!important}.orbit-node{background:#A88AF4!important;box-shadow:0 0 0 6px rgba(168,138,244,.10),0 0 24px rgba(128,103,232,.25)!important}
.protocol-section,.rewards-section,.roadmap-section{background:linear-gradient(180deg,#FBFAFF,#F6F2FF)!important}.mechanics,.token-section,.cap-section,.network-section{background:linear-gradient(145deg,#211C37,#17152B)!important}.transparency{background:#F8F9FD!important}
.protocol-strip,.protocol-card,.reward-card,.roadmap-card,.cap-card,.flow-card,.dao-card,.network-card,.token-card,.glass-card,.info-card{border-color:rgba(128,103,232,.13)!important;box-shadow:0 18px 50px rgba(105,79,190,.07)}
.footer{background:#17152B}.footer-grid p{color:#9F96B1}.footer-grid>div:not(:first-child){color:#AFA6BF}.footer-bottom{border-color:#332C4A;color:#9187A7}

/* Docs */
.docs-body{background:linear-gradient(180deg,#FBFAFF,#F7F4FF 52%,#F8F9FD)}
.docs-header-label{color:#625B78}.docs-search-wrap,.docs-search input{border-color:#DDD5F7!important;background:#FBFAFF!important;color:#302947!important}.docs-search-wrap:focus-within{border-color:#A88AF4!important;box-shadow:0 0 0 4px rgba(128,103,232,.07)}
.docs-sidebar{border-color:#E4DDF5!important}.side-title,.docs-group{color:#958AA9!important}.docs-sidebar a{color:#746D85!important}.docs-sidebar a:hover{color:#4E3C91!important;background:#F2EEFF!important}.docs-sidebar a.active,.docs-sidebar a[aria-current=page]{color:#6C53C9!important;background:#F0EBFF!important;border-color:#8067E8!important}
.side-foot{border-color:#E4DDF5!important;color:#817991!important}.docs-content,.doc-article{color:#302947}.doc-article strong{color:#211C37!important}.doc-article code{color:#6C53C9!important}
.doc-callout{border-color:rgba(128,103,232,.20)!important;border-left-color:#8067E8!important;background:linear-gradient(115deg,#F4F0FF,#FBFAFF)!important}.doc-cards a,.doc-flow span,.doc-product,.doc-pagination a{border-color:#DDD5F7!important;background:#FBFAFF!important;box-shadow:0 8px 24px rgba(105,79,190,.04)}.doc-cards a:hover,.doc-pagination a:hover{border-color:#A88AF4!important}.doc-flow span,.doc-bottom a,.docs-footer>a{color:#6C53C9!important}.doc-product{background:linear-gradient(135deg,#FBFAFF,#F2EEFF)!important}.doc-product>span{color:#8067E8!important}.doc-bottom,.docs-footer{border-color:#E4DDF5!important}.docs-footer{background:#FBFAFF;color:#746D85}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}


/* ============================================================
   VYNTRONA PURPLE FAMILY V2
   Section-specific cleanup requested after visual review.
   No HTML structure, IDs, content, JS or motion logic changed.
   ============================================================ */
:root{
  --vyn-plum:#302451;
  --vyn-deep-purple:#3B2B68;
  --vyn-deep-purple-2:#241A43;
  --vyn-purple:#8067E8;
  --vyn-purple-2:#A88AF4;
  --vyn-lavender:#C7B7FA;
  --vyn-lavender-2:#DDD3FF;
  --vyn-pale:#F2EEFF;
  --vyn-pale-2:#F8F6FF;
  --vyn-purple-line:#DCD3F7;
}

/* 1. THE PROTOCOL — remove remaining navy/black visual language */
.protocol-section{
  background:linear-gradient(180deg,#FBFAFF 0%,#F6F2FF 100%)!important;
}
.protocol-map .map-core{
  background:
    radial-gradient(circle at 32% 24%,#A88AF4 0%,#8067E8 45%,#5E46B5 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.32)!important;
  box-shadow:0 28px 65px rgba(105,79,190,.22)!important;
}
.protocol-map .map-core small{color:#E7E0FF!important}
.protocol-map .map-ring{border-color:#D8CEF7!important}
.protocol-map .ring-two{border-color:#C9B9F2!important}
.protocol-map .module{
  background:linear-gradient(145deg,#FFFFFF,#F5F1FF)!important;
  border-color:#DCD3F7!important;
  box-shadow:0 12px 34px rgba(105,79,190,.08)!important;
}
.protocol-map .module:hover{
  border-color:#A88AF4!important;
  box-shadow:0 16px 40px rgba(105,79,190,.13)!important;
}
.protocol-map .module b{color:#302451!important}
.protocol-map .module span{color:#7B718F!important}

/* 2. CAPITAL FLOW — thicker, stronger and fully purple-family */
#flow.dark-section{
  background:
    radial-gradient(circle at 12% 22%,rgba(199,183,250,.20),transparent 28%),
    radial-gradient(circle at 88% 70%,rgba(168,138,244,.18),transparent 30%),
    linear-gradient(135deg,#3B2B68 0%,#2D214F 52%,#241A43 100%)!important;
}
#flow .section-intro.light .eyebrow{color:#D8CCFF!important}
#flow .section-intro.light p{color:#C9C0D8!important}
#flow .flow-line{
  gap:12px!important;
  align-items:stretch!important;
}
#flow .flow-step{
  width:auto!important;
  flex:1!important;
  min-width:0!important;
  padding:22px 15px 20px!important;
  border:1px solid rgba(231,224,255,.17)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(199,183,250,.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(24,14,50,.12)!important;
}
#flow .flow-step em{color:#BEB0DF!important;font-weight:800!important}
#flow .flow-icon{
  width:64px!important;height:64px!important;
  border:1px solid rgba(231,224,255,.25)!important;
  background:linear-gradient(145deg,#8F73EC,#684FC7)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(19,10,45,.18),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
#flow .flow-step strong{color:#fff!important;font-size:15px!important}
#flow .flow-step span{color:#C8BED9!important;font-size:10px!important}
#flow .flow-line>i{
  align-self:center!important;
  color:#C7B7FA!important;
  font-size:20px!important;
  font-weight:800!important;
}
#flow .fact-grid{
  border-color:rgba(231,224,255,.18)!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:0 14px 34px rgba(24,14,50,.10)!important;
}
#flow .fact-grid div{border-color:rgba(231,224,255,.14)!important}
#flow .fact-grid span{color:#BEB3D1!important}
#flow .fact-grid strong{color:#fff!important}

/* 3. TOKEN MECHANICS — light lavender, no navy */
.mechanics{
  background:linear-gradient(180deg,#F8F6FF 0%,#F0EBFF 100%)!important;
}
.mechanic-stage article{
  background:linear-gradient(145deg,#FFFFFF,#F8F5FF)!important;
  border-color:#DCD3F7!important;
  box-shadow:0 18px 45px rgba(105,79,190,.07)!important;
}
.mechanic-number{color:#8D80A5!important}
.mechanic-art b{
  color:#6D54CF!important;
  background:linear-gradient(145deg,#F7F3FF,#DDD2FF)!important;
  box-shadow:0 18px 42px rgba(105,79,190,.13)!important;
}
.mechanic-art span,.grow-art i{background:#A88AF4!important}
.mechanic-art span{box-shadow:70px -35px 0 #8067E8,-80px 40px 0 #C7B7FA,80px 55px 0 #9D86EE!important}
.burn-art i{background:#8067E8!important}
.grow-art i{box-shadow:0 0 0 5px #ECE6FF!important}

/* 4. PAYOUT CAP — restore light purple presentation */
.cap-section{
  background:
    radial-gradient(circle at 18% 55%,rgba(168,138,244,.13),transparent 28%),
    linear-gradient(135deg,#FBFAFF,#F0EBFF)!important;
  color:var(--ink)!important;
}
.cap-section .section-intro h2{color:#17152B!important}
.cap-section .section-intro>p{color:#746D85!important}
.cap-ring{
  background:conic-gradient(#8067E8 0 68%,#DED5F8 68%)!important;
  box-shadow:0 28px 65px rgba(105,79,190,.15)!important;
}
.cap-ring>div{background:linear-gradient(145deg,#FFFFFF,#F4F0FF)!important}
.cap-ring small{color:#817592!important}
.cap-ring strong{color:#302451!important}
.cap-badge{
  background:linear-gradient(135deg,#A88AF4,#8067E8)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(105,79,190,.20)!important;
}
.cap-badge span{color:#F0EBFF!important}

/* 5. DAO — deep purple rather than navy/black */
.dao-section.dark-section{
  background:
    radial-gradient(circle at 72% 40%,rgba(168,138,244,.17),transparent 30%),
    linear-gradient(145deg,#3A2A64,#261C46)!important;
}
.dao-stat{border-left-color:#A88AF4!important}
.dao-stat span{color:#C2B8D3!important}
.pool{
  background:radial-gradient(circle at 34% 24%,#9C82EE,#6F55D1 55%,#4C3797)!important;
  border-color:#B8A5F3!important;
  box-shadow:0 0 75px rgba(168,138,244,.24)!important;
}
.pool span{color:#fff!important}
.pool small{color:#E7E0FF!important}
.dao-network svg{stroke:#8067E8!important;stroke-opacity:.48!important}
.dn{
  background:#5C45AD!important;
  border-color:#C7B7FA!important;
  box-shadow:0 0 0 5px rgba(199,183,250,.08)!important;
}

/* 6. TOKEN ECONOMICS — purple-white premium */
.token-section{
  background:linear-gradient(180deg,#FFFFFF,#F7F4FF)!important;
  color:var(--ink)!important;
}
.token-disc{
  background:linear-gradient(145deg,#FFFFFF,#E9E1FF)!important;
  border-color:#E2D8FC!important;
  box-shadow:0 32px 72px rgba(105,79,190,.15),inset -18px -18px 45px rgba(128,103,232,.07)!important;
}
.token-disc span{
  color:#8067E8!important;
  text-shadow:18px 12px 0 rgba(168,138,244,.15)!important;
}
.token-symbol small{color:#817592!important}
.token-specs{border-color:#DDD5F7!important}
.token-specs div{border-color:#DDD5F7!important}
.token-specs span{color:#8D82A0!important}
.token-specs strong{color:#302451!important}

/* 7. NETWORK — lavender network map */
.network-section{
  background:linear-gradient(145deg,#F8F6FF,#EEE8FF)!important;
  color:var(--ink)!important;
}
.network-section .section-intro h2{color:#17152B!important}
.network-section .section-intro>p{color:#746D85!important}
.big-number{color:#8067E8!important}
.big-number small{color:#897E9B!important}
.person{
  background:linear-gradient(145deg,#A88AF4,#8067E8)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(105,79,190,.20)!important;
}
.network-layer i{
  background:#F7F3FF!important;
  border-color:#A88AF4!important;
  box-shadow:0 0 0 5px rgba(168,138,244,.08)!important;
}
.network-visual svg{stroke:#B6A4E8!important;stroke-width:1.3!important}
.fade-label{color:#897E9B!important}

/* 8. ROADMAP — purple-family dark section with stronger timeline */
.roadmap-section.dark-section{
  background:
    radial-gradient(circle at 15% 20%,rgba(199,183,250,.16),transparent 28%),
    linear-gradient(135deg,#3B2B68,#261C46)!important;
  color:#fff!important;
}
.roadmap-section .section-intro.light p{color:#C7BDD7!important}
.road-line{
  height:2px!important;
  background:linear-gradient(90deg,rgba(199,183,250,.12),#A88AF4,#8067E8,#C7B7FA,rgba(199,183,250,.12))!important;
}
.roadmap article>span{
  width:34px!important;height:34px!important;
  background:linear-gradient(145deg,#9B81EE,#6D53CE)!important;
  border-color:#C7B7FA!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(20,10,45,.18)!important;
}
.roadmap h3{color:#fff!important}
.roadmap p{color:#BEB3D1!important}

/* 9. FOOTER — purple, not black */
.footer{
  background:
    radial-gradient(circle at 10% 10%,rgba(168,138,244,.12),transparent 25%),
    linear-gradient(145deg,#302451,#211839)!important;
  color:#fff!important;
}
.footer .brand-mark{background:linear-gradient(145deg,#B69CF7,#8067E8)!important}
.footer-grid p{color:#BEB4CE!important}
.footer-grid>div:not(:first-child){color:#C9C0D7!important}
.footer-grid b{color:#fff!important}
.footer-grid a:hover{color:#D8CCFF!important}
.footer-bottom{
  border-color:rgba(231,224,255,.13)!important;
  color:#AFA5BF!important;
}

/* Final CTA / code window also remove remaining navy visual contamination */
.final-cta.dark-section{
  background:linear-gradient(145deg,#3B2B68,#241A43)!important;
}
.final-cta .giant-v{color:rgba(199,183,250,.06)!important}
.final-inner p{color:#C3B8D2!important}
.code-window{
  background:linear-gradient(145deg,#35275C,#241A43)!important;
  box-shadow:0 28px 65px rgba(59,43,104,.18)!important;
}
.code-top{border-color:rgba(231,224,255,.12)!important;color:#B4A9C5!important}
.code-top i{background:#8067E8!important}
.code-window pre{color:#C9C0D8!important}
.code-window code b{color:#D8CCFF!important}
.code-window code span{color:#A88AF4!important}

/* Responsive capital-flow cards stay substantial instead of thin. */
@media(max-width:1050px){
  #flow .flow-line{gap:16px!important}
  #flow .flow-step{min-height:170px!important}
}
@media(max-width:720px){
  #flow .flow-step{min-height:155px!important;padding:18px 14px!important}
  #flow .fact-grid div:nth-child(-n+2){border-bottom-color:rgba(231,224,255,.14)!important}
}


/* ============================================================
   DOCS PURPLE FAMILY V3 — authoritative docs cleanup
   Removes legacy cyan/blue/navy visual accents from documentation.
   ============================================================ */
.docs-page{
  --bg:#F8F6FF!important;
  --panel:#FFFFFF!important;
  --panel-2:#F3EFFF!important;
  --white:#17152B!important;
  --text:#746D85!important;
  --border:#DDD5F7!important;
  --cyan:#8067E8!important;
  --violet:#A88AF4!important;
  --navy:#302451!important;
  background:
    radial-gradient(circle at 8% 10%,rgba(168,138,244,.12),transparent 22%),
    linear-gradient(180deg,#FBFAFF,#F6F2FF)!important;
  color:#17152B!important;
}
.docs-page .site-header{
  background:rgba(248,246,255,.90)!important;
  border-bottom-color:#E1D9F5!important;
  box-shadow:0 7px 25px rgba(105,79,190,.05)!important;
}
.docs-page .brand,.docs-page .site-header nav a{color:#4C4262!important}
.docs-page .site-header nav a:hover,.docs-page .site-header nav a.active{color:#6D54CF!important}
.docs-page .site-header nav a:after{background:#8067E8!important}
.docs-page .button{
  background:linear-gradient(135deg,#A88AF4,#8067E8)!important;
  border-color:#9B83EC!important;color:#fff!important;
  box-shadow:0 8px 22px rgba(105,79,190,.15)!important
}
.docs-page .docs-sidebar{
  border-right-color:#E0D8F4!important;
}
.docs-page .docs-sidebar a{color:#746D85!important}
.docs-page .docs-sidebar a:hover,.docs-page .docs-sidebar a.active{
  color:#6048B8!important;background:#F0EBFF!important
}
.docs-page .docs-sidebar a.active{border-color:#8067E8!important}
.docs-page .docs-search input{
  background:#fff!important;color:#302451!important;
  border-color:#DCD3F7!important;
  box-shadow:inset 0 1px 0 #fff!important
}
.docs-page .docs-search input:focus-visible{outline-color:#A88AF4!important}
.docs-page .docs-search input::placeholder{color:#948AA5!important}
.docs-page .sidebar-note{border-color:#E1D9F5!important;color:#746D85!important}
.docs-page .status-dot{background:#8067E8!important}

/* Article text */
.docs-page .doc-article h1,
.docs-page .doc-article h2,
.docs-page .doc-article h3,
.docs-page .doc-article strong{color:#241A43!important}
.docs-page .doc-article>p,
.docs-page .doc-article>ol,
.docs-page .doc-article>ul{color:#746D85!important}
.docs-page .doc-article>.eyebrow{color:#8067E8!important}

/* Callouts, cards, flow chips */
.docs-page .doc-callout{
  border-color:#D7CCF7!important;
  border-left-color:#8067E8!important;
  background:linear-gradient(115deg,#F1ECFF,#FBFAFF)!important;
  box-shadow:0 9px 24px rgba(105,79,190,.045)!important
}
.docs-page .doc-callout strong{color:#5F47B7!important}
.docs-page .doc-cards a{
  background:linear-gradient(145deg,#fff,#F8F5FF)!important;
  border-color:#DDD5F7!important;
  box-shadow:0 8px 24px rgba(105,79,190,.045)!important
}
.docs-page .doc-cards a:hover{border-color:#A88AF4!important}
.docs-page .doc-cards b{color:#302451!important}
.docs-page .doc-cards span{color:#746D85!important}
.docs-page .doc-flow span{
  color:#674EC4!important;
  border-color:#D8CDF7!important;
  background:#F4F0FF!important
}

/* Product / ROI / payout blocks: remove legacy blue/navy */
.docs-page .doc-product{
  border-color:#D4C8F4!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(168,138,244,.16),transparent 30%),
    linear-gradient(135deg,#F7F3FF,#ECE5FF)!important;
  box-shadow:0 12px 32px rgba(105,79,190,.07)!important
}
.docs-page .doc-product>span{color:#7659D2!important}
.docs-page .doc-product h2,.docs-page .doc-product h3{color:#302451!important}
.docs-page .doc-product p,.docs-page .doc-product li{color:#6F6681!important}

/* Explicitly clean common ROI / payout presentation selectors */
.docs-page [class*="roi"],
.docs-page [class*="payout"]{
  --cyan:#8067E8!important;
  --blue:#8067E8!important;
}
.docs-page [class*="roi"] .icon-box,
.docs-page [class*="payout"] .icon-box,
.docs-page .icon-box{
  color:#7659D2!important;
  border-color:#D4C8F4!important;
  background:linear-gradient(145deg,#F2EDFF,#E5DCFF)!important
}
.docs-page .icon-box.violet{color:#684FC7!important;border-color:#C9B9F2!important;background:#EEE8FF!important}

/* Roadmap / phase cards in docs */
.docs-page .phase-card{
  background:linear-gradient(145deg,#FFFFFF,#F7F3FF)!important;
  border-color:#DDD5F7!important;
  box-shadow:0 12px 30px rgba(105,79,190,.055)!important
}
.docs-page .phase-card h3{color:#302451!important}
.docs-page .phase-card li{color:#746D85!important}
.docs-page .phase-marker,.docs-page .phase-dot{
  background:linear-gradient(145deg,#A88AF4,#8067E8)!important;
  border-color:#C7B7FA!important
}
.docs-page .phase-timeline:before{background:#D8CDF7!important}

/* Links/code/pagination/footer */
.docs-page a,.docs-page .inline-link{color:inherit}
.docs-page .doc-article a:not(.doc-cards a):not(.doc-pagination a){color:#6D54CF!important}
.docs-page .doc-article code{
  color:#684FC7!important;background:#F1ECFF!important;
  border-color:#DDD3FA!important
}
.docs-page .doc-bottom{border-color:#DDD5F7!important;color:#8C829C!important}
.docs-page .doc-bottom a{color:#6D54CF!important}
.docs-page .doc-pagination a{
  color:#5F5471!important;background:#fff!important;border-color:#DDD5F7!important
}
.docs-page .doc-pagination a:hover{
  color:#6048B8!important;background:#F4F0FF!important;border-color:#A88AF4!important
}
.docs-page .docs-footer{
  color:#746D85!important;
  border-color:#DDD5F7!important;
  background:linear-gradient(180deg,#F8F6FF,#EEE8FF)!important
}
.docs-page .docs-footer>span{color:#302451!important}
.docs-page .docs-footer>a{color:#6D54CF!important}

/* Generic legacy colors inside docs only */
.docs-page .pill{
  color:#655A77!important;border-color:#D8CDF7!important;background:#F8F5FF!important
}
.docs-page hr{border-color:#E0D8F4!important}
.docs-page ::selection{background:#D8CCFF!important;color:#302451!important}