/* CYNAPSE enterprise public-site polish. High-contrast, interactive, public marketing pages only. */
:root {
    --ce-deep: #06271f;
    --ce-deeper: #031913;
    --ce-ink: #102820;
    --ce-body: #263b33;
    --ce-muted: #465b52;
    --ce-gold: #17352B;
    --ce-gold-dark: #0d2019;
    --ce-cream: #f7f7ef;
    --ce-soft: #eef4ea;
    --ce-line: rgba(16, 40, 32, .14);
    --ce-shadow: 0 24px 70px rgba(3, 25, 19, .13);
}
html, body {
    font-family: "Cairo", "Segoe UI", Arial, sans-serif !important;
    font-weight: 360 !important;
    color: var(--ce-ink) !important;
    background: #f7f7ef !important;
    text-rendering: geometricPrecision;
}
body:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6,39,31,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(6,39,31,.03) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .72;
}
h1, h2, h3, h4, .section-head h2, .hero h1, .pricing-hero h1 {
    color: inherit;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}
p, li, dd, dt, a, button, input, select, textarea, small, span { font-weight: 360; }
strong, b { font-weight: 600; }

/* Global contrast fix: light surfaces must never have pale text. */
.main, main, .section, .wrap,
.capability-card, .plan-card, .academy-card, .community-card, .knowledge-card,
.course-card, .post-card, .light-panel, .decision-panel, .form-panel,
.visual-card, .story-image, .pricing-hero__panel,
.table-panel, .content-card, .feature-card, .resource-card {
    color: var(--ce-ink) !important;
}
.capability-card p, .plan-card p, .academy-card p, .community-card p, .knowledge-card p,
.course-card p, .post-card p, .light-panel p, .decision-panel p, .form-panel p,
.visual-card p, .story-image p, .pricing-hero__panel p,
.section-head p, .decision p, .feature-card p, .resource-card p,
.capability-card li, .plan-card li, .academy-card li, .community-card li, .knowledge-card li,
.course-card li, .post-card li, .tax-note, .pricing-tax-note, .addons-tax-note {
    color: var(--ce-muted) !important;
}
.capability-card h3, .plan-card h3, .academy-card h3, .community-card h3, .knowledge-card h3,
.course-card h3, .post-card h3, .light-panel h2, .light-panel h3, .decision-panel h2, .decision-panel h3,
.visual-card h2, .visual-card h3, .pricing-hero__panel h2, .pricing-hero__panel h3 {
    color: var(--ce-ink) !important;
}

/* Dark surfaces: force readable white text. */
.hero, .hero--about, .pricing-hero, .cy-hero, .academy-hero, .community-hero, .knowledge-hero,
.dark-panel, .industry-stage, .cta-band, .visual-caption, .footer {
    color: #ffffff !important;
}
.hero h1, .hero h2, .hero h3, .hero p, .hero span, .hero li,
.hero--about h1, .hero--about h2, .hero--about h3, .hero--about p, .hero--about span, .hero--about li,
.pricing-hero h1, .pricing-hero h2, .pricing-hero h3, .pricing-hero p, .pricing-hero span, .pricing-hero li,
.dark-panel h1, .dark-panel h2, .dark-panel h3, .dark-panel p, .dark-panel span, .dark-panel li,
.industry-stage h1, .industry-stage h2, .industry-stage h3, .industry-stage p, .industry-stage span, .industry-stage li,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band p, .cta-band span, .cta-band li,
.visual-caption h1, .visual-caption h2, .visual-caption h3, .visual-caption p, .visual-caption span, .visual-caption li {
    color: inherit !important;
}
.hero p, .hero .intro, .pricing-hero p, .dark-panel p, .industry-stage p, .cta-band p, .visual-caption p {
    color: rgba(255,255,255,.82) !important;
}

/* Enterprise hero language */
.hero, .hero--about, .pricing-hero, .cy-hero, .academy-hero, .community-hero, .knowledge-hero {
    position: relative;
    background:
        radial-gradient(circle at 16% 20%, rgba(79,147,77,.20), transparent 28%),
        radial-gradient(circle at 84% 22%, rgba(79,147,77,.15), transparent 28%),
        linear-gradient(135deg, #031913 0%, #06271f 52%, #0f3b2f 100%) !important;
    overflow: hidden;
}
.hero:before, .hero--about:before, .pricing-hero:before, .cy-hero:before, .academy-hero:before, .community-hero:before, .knowledge-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, black, transparent 84%);
    opacity: .58;
}
.hero:after, .hero--about:after, .pricing-hero:after {
    content: "";
    position: absolute;
    right: max(28px, calc((100vw - 1540px) / 2));
    top: 148px;
    width: min(42vw, 560px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(79,147,77,.28) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 35%, rgba(255,255,255,.28) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 66%, rgba(255,255,255,.22) 0 2px, transparent 3px),
        conic-gradient(from 20deg, transparent, rgba(79,147,77,.20), transparent 34%, rgba(255,255,255,.12), transparent 70%);
    border: 1px solid rgba(255,255,255,.12);
    opacity: .48;
    animation: cynapseFabricSpin 24s linear infinite;
}
@keyframes cynapseFabricSpin { to { transform: rotate(360deg); } }
.hero__inner, .pricing-hero__inner, .cy-hero__inner, .academy-hero__inner, .community-hero__inner, .knowledge-hero__inner,
.wrap, .footer__inner { width: min(1540px, calc(100% - 64px)) !important; }
.hero__inner, .pricing-hero__inner {
    position: relative;
    min-height: 640px;
    align-items: center !important;
    padding-top: 74px !important;
    padding-bottom: 76px !important;
    z-index: 1;
}
.hero h1, .pricing-hero h1 {
    max-width: 920px;
    font-size: clamp(50px, 5.4vw, 86px) !important;
    line-height: .98 !important;
}
.intro, .hero .intro, .pricing-hero p {
    max-width: 780px;
    font-size: 18px !important;
    line-height: 1.82 !important;
}
.kicker, .eyebrow { font-weight: 580 !important; letter-spacing: .14em !important; }
.kicker {
    border-color: rgba(255,255,255,.20) !important;
    background: rgba(255,255,255,.09) !important;
    color: #ffe2a3 !important;
}
.visual-card, .story-image, .pricing-hero__panel {
    border-radius: 24px !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.28) !important;
}
.visual-caption { border-radius: 17px !important; background: linear-gradient(135deg, #031913, #0f3b2f) !important; }

/* Buttons: confident and obvious. */
.cy-btn, .button, .pricing-button, .btn, .community-btn, .academy-btn {
    border-radius: 10px !important;
    min-height: 46px;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.cy-btn:hover, .button:hover, .pricing-button:hover, .btn:hover, .community-btn:hover, .academy-btn:hover {
    transform: translateY(-2px);
}
.cy-btn--ghost, .button--accent, .pricing-button--accent {
    background: #17352B !important;
    color: #f7f7ef !important;
    border-color: #17352B !important;
    box-shadow: 0 16px 34px rgba(79,147,77,.25) !important;
}
.cy-btn--line, .button--outline {
    background: transparent !important;
    color: var(--ce-ink) !important;
    border-color: rgba(16,40,32,.22) !important;
}
.hero .cy-btn--line, .hero--about .cy-btn--line, .pricing-hero .cy-btn--line,
.dark-panel .cy-btn--line, .industry-stage .cy-btn--line, .cta-band .cy-btn--line,
.hero .button--outline, .hero--about .button--outline, .pricing-hero .button--outline,
.dark-panel .button--outline, .industry-stage .button--outline, .cta-band .button--outline {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.36) !important;
}
.main, main { background: linear-gradient(180deg, #f7f7ef 0%, #ffffff 52%, #f7f7ef 100%) !important; }
.section { padding-top: 92px !important; padding-bottom: 92px !important; }
.section-head {
    align-items: end !important;
    border-bottom: 1px solid rgba(18,42,34,.12);
    padding-bottom: 24px;
}
.section-head h2 { color: var(--ce-ink) !important; font-size: clamp(34px, 3.5vw, 56px) !important; line-height: 1.05 !important; }
.capability-grid, .plans-grid, .academy-grid, .community-grid, .knowledge-grid { gap: 22px !important; }
.capability-card, .plan-card, .academy-card, .community-card, .knowledge-card, .course-card, .post-card, .light-panel, .decision-panel, .form-panel {
    position: relative;
    border-radius: 18px !important;
    border: 1px solid rgba(18,42,34,.13) !important;
    background: #ffffff !important;
    box-shadow: 0 18px 54px rgba(3,25,19,.08) !important;
    overflow: hidden;
}
.capability-card:before, .plan-card:before, .academy-card:before, .community-card:before, .knowledge-card:before, .course-card:before, .post-card:before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #06271f, #17352B, #4f934d);
    transform: scaleX(.18);
    transform-origin: left;
    transition: transform .22s ease;
}
.capability-card:hover:before, .plan-card:hover:before, .academy-card:hover:before, .community-card:hover:before, .knowledge-card:hover:before, .course-card:hover:before, .post-card:hover:before { transform: scaleX(1); }
.capability-card:hover, .plan-card:hover, .academy-card:hover, .community-card:hover, .knowledge-card:hover, .course-card:hover, .post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 82px rgba(3,25,19,.15) !important;
}
.capability-card, .plan-card, .academy-card, .community-card, .knowledge-card, .course-card, .post-card { transition: transform .2s ease, box-shadow .2s ease; }
.capability-icon, .plan-icon { border-radius: 13px !important; background: #06271f !important; color: #4f934d !important; }
.industry-stage, .dark-panel, .cta-band {
    border-radius: 22px !important;
    background: radial-gradient(circle at 18% 14%, rgba(79,147,77,.17), transparent 30%), linear-gradient(135deg, #031913, #0d392d) !important;
    box-shadow: var(--ce-shadow) !important;
}
.decision, .feature-row, .metric-card {
    border-radius: 14px !important;
    border: 1px solid rgba(18,42,34,.11) !important;
    background: #f9fbf6 !important;
}
.decision h3, .feature-row h3, .metric-card h3 { color: var(--ce-ink) !important; }
.decision p, .feature-row p, .metric-card p { color: var(--ce-muted) !important; }

/* Pricing page: boardroom-grade clarity. */
.pricing-hero { padding-top: 0 !important; }
.plan-card--featured { border-color: rgba(79,147,77,.58) !important; box-shadow: 0 28px 86px rgba(79,147,77,.16), 0 18px 54px rgba(3,25,19,.10) !important; }
.price-value { font-weight: 650 !important; color: #06271f !important; }
.price-block { background: #f2f5ec !important; border-radius: 16px !important; color: var(--ce-ink) !important; }
.price-block * { color: inherit !important; }

/* Professional feed feel. */
.community-feed, .feed-list, .posts-feed { display: grid; gap: 16px; }
.community-card, .post-card { padding: 22px !important; }
.community-card header, .post-card header { border-bottom: 1px solid rgba(18,42,34,.11); padding-bottom: 14px; margin-bottom: 14px; }

/* Reveal interaction */
[data-cyn-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
[data-cyn-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-cyn-tilt] { transform-style: preserve-3d; }

.footer { background: #031913 !important; color: #ffffff !important; border-top: 1px solid rgba(255,255,255,.10); }
.footer nav a { color: rgba(255,255,255,.74) !important; }
.footer img { max-width: 220px !important; object-fit: contain !important; }

@media (max-width: 980px) {
    .hero__inner, .pricing-hero__inner { min-height: auto; padding-top: 46px !important; }
    .hero h1, .pricing-hero h1 { font-size: 42px !important; }
    .hero__inner, .pricing-hero__inner, .section-head { grid-template-columns: 1fr !important; }
    .wrap, .hero__inner, .pricing-hero__inner, .footer__inner { width: min(100% - 30px, 1540px) !important; }
    .section { padding-top: 62px !important; padding-bottom: 62px !important; }
    .hero:after, .hero--about:after, .pricing-hero:after { display: none; }
}
@media (max-width: 620px) {
    .hero h1, .pricing-hero h1 { font-size: 36px !important; }
    .intro, .hero .intro, .pricing-hero p { font-size: 16px !important; }
}
