/* =============================================================
   Milestone AI Ventures — Premium Dark AI/Tech VC Design
   ============================================================= */

:root {
    --black:        #0a0e1a;
    --black-mid:    #0d1220;
    --card-bg:      #12162a;
    --card-hover:   #161b32;
    --purple:       #7b5ea7;
    --purple-bright:#9b7ecb;
    --purple-dim:   rgba(123,94,167,0.18);
    --purple-border:rgba(123,94,167,0.4);
    --cyan:         #00d4ff;
    --cyan-dim:     rgba(0,212,255,0.12);
    --white:        #ffffff;
    --off-white:    #e8eaf0;
    --text-sub:     #8892aa;
    --text-muted:   #5a6478;
    --border:       rgba(123,94,167,0.22);
    --border-light: rgba(255,255,255,0.07);
    --grad-purple:  linear-gradient(135deg,#7b5ea7,#4c3680);
    --grad-cta:     linear-gradient(135deg,#7b5ea7 0%,#4c3680 60%,#2d1f6e 100%);
}

/* ----------------------------------------------------------------
   BASE
---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--black);
    color: var(--off-white);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--purple-bright); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cyan); }

img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------
   NAV — fixed, logo-left, links-right
---------------------------------------------------------------- */
nav#nav,
#nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 2.5em !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4em !important;
    z-index: 99999 !important;
    background-color: var(--black) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.5) !important;
}

#nav #logo,
nav#nav div#logo {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    position: static !important;
    text-align: left !important;
}

#nav #logo img,
nav#nav div#logo img {
    height: 38px !important;
    width: auto !important;
    display: block !important;
}

#nav #logo h1 { margin:0 !important; padding:0 !important; font-size:1em !important; }

nav#nav > ul,
#nav > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    order: 2 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

nav#nav > ul > li,
#nav > ul > li {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    float: none !important;
}

nav#nav > ul > li > a,
#nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    height: 4em !important;
    padding: 0 1.1em !important;
    color: rgba(255,255,255,.65) !important;
    font-size: .72em !important;
    letter-spacing: .17em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    transition: color .2s !important;
}

nav#nav > ul > li > a:hover,
nav#nav > ul > li.current > a,
#nav > ul > li > a:hover,
#nav > ul > li.current > a {
    color: #fff !important;
    background: transparent !important;
}

#page-wrapper { padding-top: 4em !important; }

@media screen and (max-width:980px) {
    nav#nav > ul, #nav > ul { display: none !important; }
}

/* ----------------------------------------------------------------
   HERO — full-height, grid overlay, animated gradient headline
---------------------------------------------------------------- */
#hero {
    position: relative;
    min-height: 100vh;
    background-color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 6em 2em;
}

/* Subtle grid */
#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(123,94,167,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123,94,167,.07) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
}

/* Radial glow */
#hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(123,94,167,.14) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.hero-eyebrow {
    font-size: .75em;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--purple-bright);
    margin-bottom: 1.4em;
    display: block;
}

.hero-headline {
    font-size: clamp(2.4em, 5.5vw, 4.2em);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 0 0 .7em;
    background: linear-gradient(90deg, #ffffff 0%, #c4a8f0 30%, #00d4ff 60%, #ffffff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroGradient 6s ease-in-out infinite;
}

@keyframes heroGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-tagline {
    font-size: 1.15em;
    color: var(--text-sub);
    max-width: 620px;
    margin: 0 auto 2.5em;
    line-height: 1.8;
    font-weight: 300;
}

.hero-actions {
    display: flex;
    gap: 1em;
    justify-content: center;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   BUTTONS
---------------------------------------------------------------- */
.btn-primary,
a.btn-primary,
.button.style1,
a.button.style1 {
    display: inline-block;
    background: var(--grad-purple) !important;
    color: #fff !important;
    border: none !important;
    padding: .85em 2.2em !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: .88em !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    transition: all .25s ease !important;
    box-shadow: 0 4px 18px rgba(123,94,167,.35) !important;
    text-decoration: none !important;
}

.btn-primary:hover,
a.btn-primary:hover,
.button.style1:hover,
a.button.style1:hover {
    background: linear-gradient(135deg,#9b7ecb,#7b5ea7) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(123,94,167,.45) !important;
    color: #fff !important;
}

.btn-secondary,
a.btn-secondary,
.button.style2,
a.button.style2 {
    display: inline-block;
    background: transparent !important;
    color: rgba(255,255,255,.85) !important;
    border: 1.5px solid rgba(255,255,255,.25) !important;
    padding: .85em 2.2em !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: .88em !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    transition: all .25s ease !important;
    text-decoration: none !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
.button.style2:hover,
a.button.style2:hover {
    border-color: var(--purple-bright) !important;
    color: #fff !important;
    background: rgba(123,94,167,.12) !important;
}

.button.style3, a.button.style3,
.btn-cta, a.btn-cta {
    display: inline-block;
    background: #fff !important;
    color: var(--purple) !important;
    border: none !important;
    padding: .9em 2.5em !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: .9em !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    transition: all .25s ease !important;
    text-decoration: none !important;
}

.button.style3:hover, a.button.style3:hover,
.btn-cta:hover, a.btn-cta:hover {
    background: var(--off-white) !important;
    transform: translateY(-2px) !important;
    color: var(--purple) !important;
}

/* form submit / reset */
input[type="submit"].style1 {
    background: var(--grad-purple) !important;
    color: #fff !important; border: none !important;
    border-radius: 6px !important; padding: .85em 2.2em !important;
    font-weight: 700 !important; font-size: .88em !important;
    cursor: pointer !important; text-transform: uppercase !important;
    letter-spacing: .1em !important; transition: all .25s ease !important;
}
input[type="submit"].style1:hover {
    background: linear-gradient(135deg,#9b7ecb,#7b5ea7) !important;
    transform: translateY(-2px) !important;
}
input[type="reset"].style2 {
    background: transparent !important; color: var(--text-sub) !important;
    border: 1px solid var(--border) !important; border-radius: 6px !important;
    padding: .85em 2.2em !important; font-weight: 500 !important;
    font-size: .88em !important; cursor: pointer !important;
    text-transform: uppercase !important; letter-spacing: .08em !important;
    transition: all .25s ease !important;
}

/* ----------------------------------------------------------------
   SHARED SECTION CHROME
---------------------------------------------------------------- */
.section-label {
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--purple-bright);
    margin-bottom: .8em;
    display: block;
}

.section-heading {
    font-size: clamp(1.8em, 3vw, 2.6em);
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--white);
    margin: 0 0 .5em;
    line-height: 1.15;
}

.section-sub {
    font-size: 1.05em;
    color: var(--text-sub);
    max-width: 580px;
    line-height: 1.8;
    font-weight: 300;
}

/* .title used by base template sections */
.title, .wrapper .title {
    color: var(--purple-bright) !important;
    font-size: .76em !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
}
.title::before, .title::after {
    background: var(--purple) !important;
}

header.style1 h2 {
    color: var(--white);
    font-size: clamp(1.5em, 2.8vw, 2.2em);
    font-weight: 900;
    letter-spacing: -.02em;
    margin-bottom: .4em;
}
header.style1 p {
    color: var(--text-sub);
    font-size: 1.05em;
    line-height: 1.75;
}

/* ----------------------------------------------------------------
   THESIS SECTION
---------------------------------------------------------------- */
#thesis {
    background-color: var(--black-mid);
    padding: 6em 2em;
    position: relative;
}

#thesis .container,
.ms-container {
    max-width: 1180px;
    margin: 0 auto;
}

.thesis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8em;
    margin-top: 3em;
}

.thesis-card {
    background: var(--card-bg);
    border-left: 3px solid var(--purple);
    border-radius: 0 10px 10px 0;
    padding: 2.2em 2em;
    transition: background .25s, transform .25s, border-color .25s;
}

.thesis-card:hover {
    background: var(--card-hover);
    transform: translateY(-3px);
    border-left-color: var(--cyan);
}

.thesis-icon {
    font-size: 1.8em;
    color: var(--purple-bright);
    margin-bottom: .75em;
    display: block;
}

.thesis-card h3 {
    font-size: 1.05em;
    font-weight: 800;
    color: var(--white);
    margin-bottom: .5em;
    letter-spacing: .01em;
}

.thesis-card p {
    font-size: .9em;
    color: var(--text-sub);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) { .thesis-grid { grid-template-columns: 1fr; } }
@media (min-width:769px) and (max-width:1024px) { .thesis-grid { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------
   PORTFOLIO CARDS
---------------------------------------------------------------- */
#portfolio-highlights,
#insights {
    background-color: var(--black);
    padding: 6em 2em;
}

.pf-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5em;
    margin-top: 3em;
}

.pf-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    border-radius: 0 10px 10px 0;
    overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

.pf-card:hover {
    border-color: var(--purple-bright);
    border-left-color: var(--cyan);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(123,94,167,.2);
}

.pf-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.pf-card-body {
    padding: 1.5em;
}

.pf-card-body h3 {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--white);
    margin-bottom: .35em;
}

.pf-card-body h3 a {
    color: var(--white) !important;
    text-decoration: none !important;
}
.pf-card-body h3 a:hover { color: var(--cyan) !important; }

.pf-card-body p {
    font-size: .88em;
    color: var(--text-sub);
    line-height: 1.65;
    margin-bottom: .9em;
}

.sector-tag {
    display: inline-block;
    background: var(--cyan-dim);
    border: 1px solid rgba(0,212,255,.3);
    color: var(--cyan);
    padding: .25em .85em;
    border-radius: 20px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.pf-actions { padding: .5em 1.5em 1.5em; }

@media (max-width:768px) { .pf-grid { grid-template-columns: 1fr; } }
@media (min-width:769px) and (max-width:1024px) { .pf-grid { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------
   BLOG CARDS
---------------------------------------------------------------- */
.blog-grid-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5em;
    margin-top: 3em;
}

.blog-card-dark {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
    display: flex;
    flex-direction: column;
}

.blog-card-dark:hover {
    border-color: var(--purple-bright);
    transform: translateY(-3px);
}

.blog-card-dark img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.blog-card-dark .bc-body {
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-dark .bc-meta {
    font-size: .75em;
    color: var(--text-muted);
    margin-bottom: .7em;
    letter-spacing: .04em;
}

.blog-card-dark h3 {
    font-size: .98em;
    font-weight: 800;
    color: var(--white);
    line-height: 1.4;
    margin-bottom: .6em;
    flex: 1;
}

.blog-card-dark h3 a {
    color: var(--white) !important;
    text-decoration: none !important;
}
.blog-card-dark h3 a:hover { color: var(--purple-bright) !important; }

.blog-card-dark p {
    font-size: .86em;
    color: var(--text-sub);
    line-height: 1.65;
    margin-bottom: 1em;
}

.blog-card-dark .bc-link {
    color: var(--purple-bright);
    font-size: .82em;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: color .2s;
}
.blog-card-dark .bc-link:hover { color: var(--cyan); }

@media (max-width:768px) { .blog-grid-3 { grid-template-columns: 1fr; } }
@media (min-width:769px) and (max-width:1024px) { .blog-grid-3 { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------
   ORIGINAL HIGHLIGHT / FEATURE CARDS (subpages)
---------------------------------------------------------------- */
#highlights {
    background: var(--black);
    padding: 5em 0;
}

.highlight {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    border-radius: 0 10px 10px 0;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
    height: 100%;
}
.highlight:hover {
    border-color: var(--purple-bright);
    border-left-color: var(--cyan);
    transform: translateY(-4px);
}
.highlight h3 a { color: var(--white) !important; text-decoration: none !important; font-weight: 700; }
.highlight h3 a:hover { color: var(--cyan) !important; }
.highlight p { color: var(--text-sub); font-size: .9em; line-height: 1.7; padding: 0 1.5em; }
.highlight .actions { padding: 0 1.5em 1.5em; }
.highlight .image.featured img { width:100%; height:200px; object-fit:cover; display:block; }

.feature-list section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    border-radius: 0 10px 10px 0;
    padding: 2em;
    margin-bottom: 1.5em;
    transition: border-color .25s, transform .25s;
}
.feature-list section:hover {
    border-left-color: var(--cyan);
    transform: translateY(-3px);
}
.feature-list section h3 {
    color: var(--white);
    font-size: 1em;
    font-weight: 700;
    margin-bottom: .6em;
}
.feature-list section h3::before { color: var(--purple-bright) !important; }
.feature-list section p { color: var(--text-sub); font-size: .9em; line-height: 1.7; }

/* ----------------------------------------------------------------
   CTA STRIP
---------------------------------------------------------------- */
#cta-strip {
    background: var(--grad-cta);
    padding: 5em 2em;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
#cta-strip .strip-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}
#cta-strip h2 {
    font-size: clamp(1.8em, 3.5vw, 2.8em);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -.02em;
    margin-bottom: .6em;
    line-height: 1.15;
}
#cta-strip p {
    font-size: 1.1em;
    color: rgba(255,255,255,.75);
    margin-bottom: 2em;
    line-height: 1.7;
}

/* ----------------------------------------------------------------
   WRAPPER SECTIONS (subpages compatibility)
---------------------------------------------------------------- */
.wrapper.style1 { background: var(--black); }
.wrapper.style2 { background: var(--black-mid); }
.wrapper.style3 { background: var(--black); }

#main { background: var(--black-mid); }
#main .title { color: var(--purple-bright) !important; }

/* ----------------------------------------------------------------
   STATS BAR (subpages)
---------------------------------------------------------------- */
.stats-bar {
    background: linear-gradient(135deg, var(--black-mid), var(--card-bg));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 3.5em 0;
}
.stats-bar .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2em;
}
.stat-item {
    text-align: center;
    padding: 1em;
}
.stat-item .number {
    font-size: 2.8em;
    font-weight: 900;
    color: var(--cyan);
    line-height: 1;
    display: block;
    margin-bottom: .25em;
}
.stat-item .label {
    font-size: .8em;
    color: var(--text-sub);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: block;
}

/* ----------------------------------------------------------------
   PAGE BANNER (interior pages)
---------------------------------------------------------------- */
.page-banner {
    background: linear-gradient(135deg, var(--black) 0%, var(--black-mid) 60%, #0d1230 100%);
    padding: 5em 2em 4em;
    border-bottom: 1px solid var(--border);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(123,94,167,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123,94,167,.06) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}
.page-banner .subtitle {
    color: var(--purple-bright);
    font-size: .75em;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: .75em;
    display: block;
    position: relative;
}
.page-banner h1 {
    color: var(--white);
    font-size: clamp(2em, 4vw, 3em);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: .75em;
    position: relative;
}
.page-banner p {
    color: var(--text-sub);
    font-size: 1.1em;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.75;
    position: relative;
}

/* ----------------------------------------------------------------
   TEAM CARDS
---------------------------------------------------------------- */
.team-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    border-radius: 0 10px 10px 0;
    padding: 2.2em 1.8em;
    text-align: center;
    transition: border-color .25s, transform .25s;
    height: 100%;
}
.team-card:hover {
    border-left-color: var(--cyan);
    transform: translateY(-4px);
}
.team-card .avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 1.2em;
    border: 2px solid var(--purple);
    object-fit: cover;
    display: block;
}
.team-card h3 { color: var(--white); font-size: 1.1em; font-weight: 800; margin-bottom: .3em; }
.team-card .role {
    color: var(--cyan);
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1em;
    display: block;
}
.team-card p { color: var(--text-sub); font-size: .87em; line-height: 1.7; margin: 0; }

/* ----------------------------------------------------------------
   PORTFOLIO CARDS (subpages — old class)
---------------------------------------------------------------- */
.portfolio-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    border-radius: 0 10px 10px 0;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
}
.portfolio-card:hover {
    border-left-color: var(--cyan);
    transform: translateY(-4px);
}
.portfolio-card .image-wrap { height: 180px; overflow: hidden; }
.portfolio-card .image-wrap img { width:100%; height:100%; object-fit:cover; }
.portfolio-card .content { padding: 1.5em; }
.portfolio-card h3 { color: var(--white); font-size: 1.1em; font-weight: 800; margin-bottom: .4em; }
.portfolio-card p { color: var(--text-sub); font-size: .88em; line-height: 1.7; margin: 0; }

.stage-badge {
    display: inline-block;
    background: var(--purple-dim);
    border: 1px solid var(--purple-border);
    color: var(--purple-bright);
    padding: .25em .8em;
    border-radius: 20px;
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .8em;
}
.sector-badge {
    display: inline-block;
    background: var(--cyan-dim);
    border: 1px solid rgba(0,212,255,.3);
    color: var(--cyan);
    padding: .25em .8em;
    border-radius: 20px;
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 .3em .8em 0;
}

/* portfolio grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: 1.5em;
    margin-top: 2em;
}

/* ----------------------------------------------------------------
   BLOG CARDS (subpages / blog.html)
---------------------------------------------------------------- */
.blog-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
    display: flex;
    flex-direction: column;
}
.blog-card:hover { border-color: var(--purple-bright); transform: translateY(-3px); }
.blog-card .image-wrap { overflow: hidden; height: 200px; }
.blog-card .image-wrap img { width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.blog-card:hover .image-wrap img { transform: scale(1.04); }
.blog-card .content { padding: 1.5em; flex: 1; display: flex; flex-direction: column; }
.blog-card .category {
    display: inline-block;
    background: var(--purple-dim); border: 1px solid var(--purple-border);
    color: var(--purple-bright); padding: .25em .85em; border-radius: 20px;
    font-size: .72em; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; margin-bottom: .85em;
}
.blog-card h3 { color: var(--white); font-size: 1.05em; font-weight: 800; line-height: 1.4; margin-bottom: .6em; }
.blog-card h3 a { color: var(--white) !important; text-decoration: none !important; }
.blog-card h3 a:hover { color: var(--cyan) !important; }
.blog-card .meta { color: var(--text-muted); font-size: .78em; margin-bottom: .85em; display:flex; gap:1em; }
.blog-card .excerpt { color: var(--text-sub); font-size: .88em; line-height: 1.65; flex:1; margin-bottom: 1em; }
.blog-card .read-more {
    color: var(--purple-bright); font-size: .82em; font-weight: 700;
    text-decoration: none; letter-spacing: .05em; text-transform: uppercase;
}
.blog-card .read-more:hover { color: var(--cyan); }

/* blog article */
.blog-article-header {
    background: linear-gradient(135deg, var(--black), var(--black-mid));
    padding: 5em 2em 4em;
    border-bottom: 1px solid var(--border);
}
.blog-article-header .category-badge {
    display: inline-block; background: var(--purple-dim); border: 1px solid var(--purple-border);
    color: var(--purple-bright); padding: .3em 1em; border-radius: 20px;
    font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1.2em;
}
.blog-article-header h1 { color: var(--white); font-size: 2.4em; font-weight: 900; line-height: 1.18; letter-spacing: -.02em; margin-bottom: 1em; }
.blog-article-header .meta { color: var(--text-muted); font-size: .88em; display:flex; gap:1.5em; flex-wrap:wrap; }
.blog-article-header .meta span { color: var(--text-sub); }

.article-body { background: var(--black-mid); padding: 4em 2em; }
.article-body .container { max-width: 800px; margin: 0 auto; }
.article-body p { color: var(--text-sub); font-size: 1.02em; line-height: 1.85; margin-bottom: 1.5em; }
.article-body h2 { color: var(--white); font-size: 1.55em; font-weight: 800; margin: 2.5em 0 1em; padding-top: 1em; border-top: 1px solid var(--border); }
.article-body h3 { color: var(--off-white); font-size: 1.2em; font-weight: 700; margin: 1.8em 0 .7em; }
.article-body ul, .article-body ol { color: var(--text-sub); font-size: 1em; line-height: 1.85; margin-bottom: 1.5em; padding-left: 1.5em; }
.article-body li { margin-bottom: .5em; }
.article-body .featured-image { width:100%; border-radius: 10px; margin-bottom: 3em; border: 1px solid var(--border); }
.article-nav { background: var(--black); border-top: 1px solid var(--border); padding: 2em 0; }
.article-nav a { color: var(--text-sub) !important; font-size: .9em; display:inline-flex; align-items:center; gap:.4em; transition: color .2s; }
.article-nav a:hover { color: var(--purple-bright) !important; }

/* ----------------------------------------------------------------
   CONTACT FORM
---------------------------------------------------------------- */
input[type="text"], input[type="email"], textarea, select {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--off-white) !important;
    border-radius: 6px !important;
    padding: .85em 1em !important;
    font-size: .95em !important;
    transition: border-color .2s !important;
    width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--purple) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(123,94,167,.15) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

/* ----------------------------------------------------------------
   LEGAL PAGES
---------------------------------------------------------------- */
.legal-content { background: var(--black-mid); padding: 4em 0; }
.legal-content .container { max-width: 900px; margin: 0 auto; padding: 0 2em; }
.legal-content h1 { color: var(--white); font-size: 2.2em; font-weight: 900; margin-bottom: .5em; }
.legal-content .last-updated { color: var(--text-muted); font-size: .88em; margin-bottom: 3em; padding-bottom: 2em; border-bottom: 1px solid var(--border); }
.legal-content h2 { color: var(--white); font-size: 1.3em; font-weight: 800; margin: 2.5em 0 1em; padding-bottom: .4em; border-bottom: 1px solid var(--border); }
.legal-content h3 { color: var(--off-white); font-size: 1.08em; font-weight: 700; margin: 1.8em 0 .7em; }
.legal-content p, .legal-content li { color: var(--text-sub); font-size: .95em; line-height: 1.85; margin-bottom: 1em; }
.legal-content ul, .legal-content ol { padding-left: 1.5em; margin-bottom: 1.5em; }
.legal-content a { color: var(--purple-bright); text-decoration: underline; }
.legal-content a:hover { color: var(--cyan); }
.legal-content table { width:100%; border-collapse:collapse; margin-bottom:2em; font-size:.9em; }
.legal-content table th { background: var(--card-bg); color: var(--white); font-weight: 700; padding: .85em 1em; text-align: left; border: 1px solid var(--border); }
.legal-content table td { color: var(--text-sub); padding: .85em 1em; border: 1px solid var(--border); vertical-align: top; }
.legal-content .toc { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.5em 2em; margin-bottom: 2.5em; }
.legal-content .toc h3 { color: var(--white) !important; font-size: 1em; font-weight: 700; margin-bottom: .8em; }
.legal-content .toc a { color: var(--purple-bright) !important; font-size: .9em; text-decoration: none; }
.legal-content .toc a:hover { color: var(--cyan) !important; }

/* ----------------------------------------------------------------
   FOOTER
---------------------------------------------------------------- */
#footer, section#footer {
    background: #060810;
    border-top: 1px solid var(--border);
    padding: 4em 0 2em;
}
#footer .title { color: var(--purple-bright) !important; }
#footer .title::before, #footer .title::after { background: var(--purple) !important; }
#footer header.style1 h2 { color: var(--white); }
#footer header.style1 p { color: var(--text-sub); }
#footer .feature-list.small section h3 {
    color: var(--white);
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    margin-bottom: .7em;
}
#footer .feature-list.small section h3::before { color: var(--purple-bright) !important; }
#footer .feature-list.small section p,
#footer .feature-list.small section p a {
    color: var(--text-sub);
    font-size: .88em;
    line-height: 1.8;
    text-decoration: none;
}
#footer .feature-list.small section p a:hover { color: var(--purple-bright); }
#copyright {
    margin-top: 3em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(255,255,255,.05);
}
#copyright ul li { color: var(--text-muted); font-size: .8em; }
#copyright ul li a { color: var(--text-muted); }
#copyright ul li a:hover { color: var(--purple-bright); }

/* ----------------------------------------------------------------
   INTRO (hero section for older template wrapper)
---------------------------------------------------------------- */
#intro {
    background: var(--black) !important;
    padding: 6em 2em 5em !important;
    position: relative;
    overflow: hidden;
}
#intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(123,94,167,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123,94,167,.06) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}
#intro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(123,94,167,.12) 0%, transparent 70%);
    pointer-events: none;
}
#intro .title { position: relative; z-index: 1; }
#intro .container { position: relative; z-index: 1; }
#intro p.style1 {
    font-size: .82em;
    color: var(--purple-bright);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}
#intro p.style2 {
    font-size: clamp(2em, 4.5vw, 3.8em);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.03em;
    margin-bottom: .5em;
    background: linear-gradient(90deg, #fff 0%, #c4a8f0 35%, #00d4ff 65%, #fff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroGradient 6s ease-in-out infinite;
}
#intro p.style3 {
    font-size: 1.1em;
    color: var(--text-sub);
    max-width: 600px;
    margin: 0 auto 2.5em;
    line-height: 1.8;
    font-weight: 300;
}

/* ----------------------------------------------------------------
   BLOCKQUOTE
---------------------------------------------------------------- */
blockquote {
    border-left: 3px solid var(--purple);
    padding: 1em 1.5em;
    margin: 2em 0;
    background: rgba(123,94,167,.07);
    border-radius: 0 6px 6px 0;
}
blockquote p { color: var(--off-white) !important; font-style: italic; margin: 0 !important; }

/* ----------------------------------------------------------------
   UTILITIES
---------------------------------------------------------------- */
.text-cyan    { color: var(--cyan) !important; }
.text-purple  { color: var(--purple-bright) !important; }
.text-white   { color: var(--white) !important; }
.text-muted   { color: var(--text-muted) !important; }
.section-divider { border: none; border-top: 1px solid var(--border); margin: 3em 0; }
.investment-tag { display: inline-block; background: var(--purple-dim); border: 1px solid var(--purple-border); color: var(--purple-bright); padding: .3em 1em; border-radius: 20px; font-size: .78em; font-weight: 600; letter-spacing: .05em; margin: .3em; }

/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width:768px) {
    .page-banner h1 { font-size: 2em; }
    .stat-item .number { font-size: 2em; }
    .blog-article-header h1 { font-size: 1.7em; }
    #hero { min-height: 85vh; }
    .hero-headline { font-size: 2.2em; }
}


/* ---------------------------------------------------------------
   FIX: Flex grid horizontal overflow (negative-margin .row containment)
--------------------------------------------------------------- */
.wrapper,
.content-section {
    overflow-x: hidden;
}