/* =========================================================
   INTELLIFY PRODUCT PAGE
   Premium SaaS/product presentation layer.
   Palette follows the supplied Intellify UI:
   deep navy + electric blue + violet + green + orange.
========================================================= */

/* ---------------------------------------------------------
   1. PRODUCT TOKENS — DARK
--------------------------------------------------------- */
.intellify-page {
    --intel-navy: #071226;
    --intel-navy-2: #0a1730;
    --intel-surface: #101d34;
    --intel-surface-2: #172640;
    --intel-surface-3: #1d2e4c;
    --intel-text: #f3f7ff;
    --intel-text-soft: #aab8cd;
    --intel-text-muted: #71819b;
    --intel-border: rgba(132, 165, 215, .16);
    --intel-border-strong: rgba(62, 159, 255, .34);
    --intel-blue: #2498f3;
    --intel-blue-bright: #48b1ff;
    --intel-blue-soft: rgba(36, 152, 243, .12);
    --intel-purple: #a72bc3;
    --intel-purple-bright: #c34edd;
    --intel-purple-soft: rgba(167, 43, 195, .12);
    --intel-green: #61c85c;
    --intel-green-soft: rgba(97, 200, 92, .12);
    --intel-orange: #ffad0a;
    --intel-orange-soft: rgba(255, 173, 10, .12);
    --intel-shadow: 0 28px 90px rgba(2, 12, 28, .26);
    --intel-shadow-deep: 0 45px 130px rgba(0, 0, 0, .36);
    --intel-glow: rgba(36, 152, 243, .16);
    --intel-section-alt: rgba(36, 152, 243, .035);
    --cyan: #39d9ff;
    --purple: var(--intel-purple);

    --primary: var(--intel-blue);
    --primary-light: var(--intel-blue-bright);
    --primary-soft: var(--intel-blue-soft);
    --text: var(--intel-text);
    --text-soft: var(--intel-text-soft);
    --text-muted: var(--intel-text-muted);
    --border: var(--intel-border);
    --border-strong: var(--intel-border-strong);
    --bg: var(--intel-navy);
    --bg-soft: var(--intel-navy-2);
    --bg-card: rgba(16, 29, 52, .78);
    --bg-card-solid: var(--intel-surface);
    --bg-card-hover: #152844;
    --header-bg: rgba(7, 18, 38, .76);
}

/* ---------------------------------------------------------
   2. PRODUCT TOKENS — LIGHT
   Keep the exact brand hues, but convert surfaces into a
   layered cool-white / blue-gray system so contrast remains
   intentional instead of simply inverting dark cards.
--------------------------------------------------------- */
[data-theme="light"] body.intellify-page {
    --intel-navy: #eef3f9;
    --intel-navy-2: #e6edf6;
    --intel-surface: #ffffff;
    --intel-surface-2: #f6f9fd;
    --intel-surface-3: #edf3fa;
    --intel-text: #0b1a31;
    --intel-text-soft: #55657d;
    --intel-text-muted: #718198;
    --intel-border: rgba(17, 49, 91, .11);
    --intel-border-strong: rgba(36, 152, 243, .26);
    --intel-blue-soft: rgba(36, 152, 243, .10);
    --intel-purple-soft: rgba(167, 43, 195, .09);
    --intel-green-soft: rgba(97, 200, 92, .10);
    --intel-orange-soft: rgba(255, 173, 10, .11);
    --intel-shadow: 0 24px 65px rgba(30, 63, 101, .10);
    --intel-shadow-deep: 0 34px 90px rgba(30, 63, 101, .16);
    --intel-glow: rgba(36, 152, 243, .12);
    --intel-section-alt: rgba(36, 152, 243, .055);

    --text: var(--intel-text);
    --text-soft: var(--intel-text-soft);
    --text-muted: var(--intel-text-muted);
    --border: var(--intel-border);
    --border-strong: var(--intel-border-strong);
    --bg: var(--intel-navy);
    --bg-soft: var(--intel-navy-2);
    --bg-card: rgba(255, 255, 255, .84);
    --bg-card-solid: #ffffff;
    --bg-card-hover: #f8fbff;
    --header-bg: rgba(238, 243, 249, .82);
}

/* ---------------------------------------------------------
   3. PAGE / BACKGROUND
--------------------------------------------------------- */
body.intellify-page {
    background: var(--bg);
    color: var(--text);
    color-scheme: dark;
    overflow-x: hidden;
}

[data-theme="light"] body.intellify-page {
    color-scheme: light;
}

.intellify-page::selection {
    background: rgba(36, 152, 243, .25);
    color: var(--text);
}

.intellify-background .background-orb-1 {
    background: #1a965f;
    opacity: .13;
}

.intellify-background .background-orb-2 {
    background: #2368ff;
    opacity: .13;
}

[data-theme="light"] .intellify-background .background-orb-1 {
    opacity: .075;
}

[data-theme="light"] .intellify-background .background-orb-2 {
    opacity: .08;
}

.intellify-background .background-grid {
    opacity: .82;
}

/* Give the product page a slight cool-white canvas in light mode. */
[data-theme="light"] .intellify-background {
    background:
        radial-gradient(circle at 15% 15%, rgba(36,152,243,.05), transparent 28%),
        radial-gradient(circle at 85% 12%, rgba(167,43,195,.035), transparent 26%);
}

/* ---------------------------------------------------------
   4. HEADER / GLOBAL CONTROLS
--------------------------------------------------------- */
.intellify-page .site-header {
    border-bottom-color: transparent;
}

.intellify-page .site-header.scrolled {
    background: var(--header-bg);
    border-bottom-color: var(--border);
    box-shadow: 0 12px 40px rgba(4, 17, 39, .08);
}

.intellify-page .brand-logo-placeholder {
    background: linear-gradient(135deg, rgba(36,152,243,.16), rgba(167,43,195,.12));
    border-color: rgba(36,152,243,.26);
    box-shadow: 0 12px 30px rgba(36,152,243,.10);
}

[data-theme="light"] .intellify-page .brand-logo-placeholder {
    background: linear-gradient(135deg, #e5f1ff, #f7effb);
    border-color: rgba(36,152,243,.18);
}

.intellify-page .main-nav .nav-link:hover,
.intellify-page .main-nav .nav-link.active {
    color: var(--intel-blue);
}

.intellify-page .theme-toggle {
    border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(36,152,243,.06);
}

.intellify-page .header-cta,
.intellify-primary {
    background: linear-gradient(135deg, #2498f3, #2d73df);
    box-shadow: 0 14px 34px rgba(36,152,243,.22);
}

.intellify-page .header-cta:hover,
.intellify-primary:hover {
    box-shadow: 0 18px 44px rgba(36,152,243,.30);
}

/* ---------------------------------------------------------
   5. LOADER
--------------------------------------------------------- */
.intellify-page .page-loader {
    background:
        radial-gradient(circle at 50% 35%, rgba(36,152,243,.09), transparent 28%),
        var(--intel-navy);
}

[data-theme="light"] .intellify-page .page-loader {
    background:
        radial-gradient(circle at 50% 35%, rgba(36,152,243,.09), transparent 30%),
        #eef3f9;
}

.intellify-loader-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    background: linear-gradient(135deg, #2498f3, #a72bc3);
    box-shadow: 0 0 45px rgba(36,152,243,.22);
    animation: intelLoaderFloat 2.2s ease-in-out infinite;
}

@keyframes intelLoaderFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.035); }
}

/* ---------------------------------------------------------
   6. HERO
--------------------------------------------------------- */
.intellify-hero {
    min-height: 780px;
    display: grid;
    align-items: center;
    padding-top: 155px;
    overflow: clip;
    position: relative;
}

.intellify-hero::before {
    content: "";
    position: absolute;
    width: 780px;
    height: 780px;
    border-radius: 50%;
    inset-inline-end: -300px;
    top: 70px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(36,152,243,.16), rgba(36,152,243,.035) 42%, transparent 72%);
    filter: blur(4px);
    animation: heroAura 9s ease-in-out infinite;
}

@keyframes heroAura {
    0%, 100% { transform: scale(1); opacity: .86; }
    50% { transform: scale(1.06); opacity: 1; }
}

.intellify-hero-grid {
    display: grid;
    grid-template-columns: .94fr 1.06fr;
    gap: 70px;
    align-items: center;
}

.intellify-hero-copy {
    position: relative;
    z-index: 3;
}

.product-eyebrow,
.product-logo-placeholder {
    display: inline-flex;
    align-items: center;
}

.product-eyebrow {
    gap: 10px;
    color: var(--intel-blue-bright);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    margin-bottom: 18px;
}

[data-theme="light"] .product-eyebrow {
    color: #1879ca;
}

.product-eyebrow .eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--intel-blue);
    box-shadow: 0 0 0 6px rgba(36,152,243,.10), 0 0 20px rgba(36,152,243,.55);
}

.product-logo-placeholder {
    min-width: 190px;
    min-height: 54px;
    padding: 8px 18px;
    margin-bottom: 18px;
    border: 1px dashed rgba(36,152,243,.44);
    border-radius: 16px;
    color: #eef7ff;
    background: linear-gradient(135deg, rgba(36,152,243,.13), rgba(167,43,195,.09));
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

[data-theme="light"] .product-logo-placeholder {
    color: #0e1f38;
    background: linear-gradient(135deg, #eaf5ff, #f7eefb);
    border-color: rgba(36,152,243,.28);
    box-shadow: 0 12px 26px rgba(37, 78, 127, .08);
}

.intellify-hero h1 {
    margin: 0;
    max-width: 680px;
    font-size: clamp(3rem, 5.4vw, 5.8rem);
    line-height: 1.18;
    letter-spacing: -.055em;
    font-weight: 900;
}

.intellify-hero h1 span,
.section-title span,
.project-showcase h2 span,
.intellify-cta-card h2 span {
    background: linear-gradient(100deg, #37a8ff 5%, #a72bc3 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 160% 100%;
    animation: intelGradientShift 8s ease-in-out infinite;
}

[data-theme="light"] .intellify-hero h1 span,
[data-theme="light"] .section-title span,
[data-theme="light"] .project-showcase h2 span,
[data-theme="light"] .intellify-cta-card h2 span {
    background-image: linear-gradient(100deg, #147fd1 6%, #8e279f 82%);
}

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

.hero-lead {
    max-width: 650px;
    margin: 28px 0 0;
    color: var(--intel-text-soft);
    font-size: 1.1rem;
    line-height: 2.05;
}

.intellify-trust {
    margin-top: 34px;
}

.intellify-page .hero-trust-item {
    transition: transform .35s ease, color .35s ease;
}

.intellify-page .hero-trust-item:hover {
    transform: translateY(-2px);
    color: var(--intel-text);
}

.intellify-page .hero-trust-item i {
    color: var(--intel-green);
}

/* ---------------------------------------------------------
   7. HERO DASHBOARD — interactive glass mockup
--------------------------------------------------------- */
.hero-visual {
    position: relative;
    min-width: 0;
    perspective: 1600px;
    z-index: 2;
    --mx: 0px;
    --my: 0px;
    --rx: 4deg;
    --ry: -4deg;
}

.dashboard-frame {
    position: relative;
    border: 1px solid rgba(100,151,220,.28);
    border-radius: 28px;
    background: rgba(10,22,43,.88);
    box-shadow: var(--intel-shadow-deep), 0 0 90px rgba(36,152,243,.08);
    overflow: hidden;
    transform: translate3d(var(--mx), var(--my), 0) perspective(1600px) rotateY(var(--ry)) rotateX(var(--rx));
    transform-style: preserve-3d;
    transition: transform .18s ease-out, box-shadow .55s ease, border-color .4s ease;
    will-change: transform;
}

.dashboard-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.08) 50%, transparent 68%);
    transform: translateX(-120%);
    animation: dashboardSweep 7s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes dashboardSweep {
    0%, 55% { transform: translateX(-120%); }
    70%, 100% { transform: translateX(120%); }
}

.hero-visual.is-hovering .dashboard-frame {
    border-color: rgba(36,152,243,.42);
    box-shadow: 0 46px 125px rgba(0,0,0,.42), 0 0 100px rgba(36,152,243,.13);
}

[data-theme="light"] .dashboard-frame {
    background: linear-gradient(145deg, #ffffff, #eaf2fc);
    border-color: rgba(36,152,243,.20);
    box-shadow: var(--intel-shadow-deep), 0 0 80px rgba(36,152,243,.055);
}

.dashboard-topbar {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    background: #151d31;
    border-bottom: 1px solid rgba(143,174,224,.10);
}

[data-theme="light"] .dashboard-topbar {
    background: #dfe8f3;
    border-bottom-color: rgba(30,69,112,.09);
}

.dashboard-topbar .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dashboard-topbar .red { background: #ff6258; }
.dashboard-topbar .yellow { background: #ffbd2e; }
.dashboard-topbar .green { background: #28c840; }

.frame-title {
    margin-inline: auto;
    color: #9caac1;
    font-size: .72rem;
    font-weight: 700;
}

[data-theme="light"] .frame-title { color: #60718a; }

.dashboard-content {
    display: grid;
    grid-template-columns: 58px 1fr;
    min-height: 420px;
}

.dash-sidebar {
    padding: 24px 17px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    background: #101a30;
    border-inline-end: 1px solid rgba(143,174,224,.08);
}

[data-theme="light"] .dash-sidebar {
    background: #e8eff7;
    border-inline-end-color: rgba(31,73,115,.08);
}

.dash-sidebar span {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(132,163,211,.18);
    transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.dash-sidebar span:hover,
.dashboard-frame[data-active-index="0"] .dash-sidebar span:nth-child(1),
.dashboard-frame[data-active-index="1"] .dash-sidebar span:nth-child(2),
.dashboard-frame[data-active-index="2"] .dash-sidebar span:nth-child(3),
.dashboard-frame[data-active-index="3"] .dash-sidebar span:nth-child(4) {
    transform: scale(1.05);
    background: rgba(36,152,243,.18);
    border-color: rgba(36,152,243,.34);
}

.dash-main {
    padding: 34px;
    background: radial-gradient(circle at 70% 15%, rgba(36,152,243,.08), transparent 35%), #0a162c;
}

[data-theme="light"] .dash-main {
    background: radial-gradient(circle at 70% 15%, rgba(36,152,243,.08), transparent 35%), #f4f8fd;
}

.dash-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.dash-heading small {
    display: block;
    color: #6e819f;
    font-size: .62rem;
    letter-spacing: .13em;
}

.dash-heading strong {
    color: #f1f6ff;
    font-size: 1.55rem;
}

[data-theme="light"] .dash-heading strong { color: #10233f; }

.dash-chip {
    padding: 7px 10px;
    border-radius: 20px;
    color: #78c4ff;
    background: rgba(36,152,243,.10);
    font-size: .65rem;
}

[data-theme="light"] .dash-chip { color: #147bc8; background: rgba(36,152,243,.09); }

.dash-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.dash-card {
    min-height: 130px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(116,152,205,.20);
    border-radius: 17px;
    background: rgba(24,35,61,.84);
    transform: translateZ(0);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.dash-card:hover,
.dash-card.is-hot {
    transform: translateY(-5px);
    border-color: rgba(36,152,243,.38);
    box-shadow: 0 20px 40px rgba(0,0,0,.16), 0 0 35px rgba(36,152,243,.08);
}

[data-theme="light"] .dash-card {
    background: rgba(255,255,255,.82);
    border-color: rgba(31,73,115,.11);
    box-shadow: 0 12px 30px rgba(30,63,101,.06);
}

[data-theme="light"] .dash-card:hover,
[data-theme="light"] .dash-card.is-hot {
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(30,63,101,.10), 0 0 35px rgba(36,152,243,.07);
}

.dash-card i { font-size: 1.35rem; }
.dash-card b { font-size: 1rem; color: #eef5ff; }
.dash-card small { color: #71809b; }
[data-theme="light"] .dash-card b { color: #122742; }
.dash-card.blue i { color: #2fa7ff; }
.dash-card.purple i { color: #ad2ecb; }
.dash-card.orange i { color: #ffad0a; }
.dash-card.green i { color: #61c85c; }

.dash-feed {
    margin-top: 14px;
    padding: 18px;
    border-radius: 17px;
    border: 1px solid rgba(116,152,205,.14);
    background: #121e36;
    display: grid;
    gap: 12px;
}

[data-theme="light"] .dash-feed {
    background: #e9f0f8;
    border-color: rgba(31,73,115,.08);
}

.dash-feed span {
    display: block;
    height: 9px;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(95,134,190,.30), rgba(95,134,190,.05));
    transform-origin: right center;
    animation: feedPulse 3.2s ease-in-out infinite;
}

[data-theme="light"] .dash-feed span {
    background: linear-gradient(90deg, rgba(36,152,243,.18), rgba(95,134,190,.04));
}

.dash-feed span:nth-child(1) { width: 82%; animation-delay: 0s; }
.dash-feed span:nth-child(2) { width: 65%; animation-delay: .3s; }
.dash-feed span:nth-child(3) { width: 91%; animation-delay: .6s; }
.dash-feed span:nth-child(4) { width: 54%; animation-delay: .9s; }

@keyframes feedPulse {
    0%, 100% { opacity: .72; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(.94); }
}

.visual-orbit {
    position: absolute;
    border: 1px solid rgba(36,152,243,.15);
    border-radius: 50%;
    pointer-events: none;
    animation: orbitFloat 10s linear infinite;
}

.orbit-one { width: 520px; height: 520px; inset: -110px -170px auto auto; }
.orbit-two { width: 760px; height: 760px; inset: -230px -290px auto auto; border-color: rgba(167,43,195,.10); animation-duration: 15s; animation-direction: reverse; }

@keyframes orbitFloat {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.02); }
    to { transform: rotate(360deg) scale(1); }
}

/* ---------------------------------------------------------
   8. SIGNAL PIPELINE
--------------------------------------------------------- */
.intellify-story {
    position: relative;
    background: linear-gradient(180deg, transparent, var(--intel-section-alt), transparent);
}

.pipeline-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.pipeline-grid::before {
    content: "";
    position: absolute;
    top: 55px;
    inset-inline: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(36,152,243,.24), rgba(167,43,195,.18), rgba(97,200,92,.20), transparent);
    pointer-events: none;
}

.pipeline-card {
    position: relative;
    z-index: 1;
    min-height: 260px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(18,34,59,.84), rgba(11,25,47,.78));
    box-shadow: 0 14px 40px rgba(0,0,0,.10);
    overflow: hidden;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .45s ease;
    isolation: isolate;
}

.pipeline-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    inset: -90px auto auto -70px;
    background: radial-gradient(circle, rgba(36,152,243,.12), transparent 70%);
    z-index: -1;
    transition: transform .7s ease, opacity .45s ease;
}

.pipeline-card:nth-child(2)::before { background: radial-gradient(circle, rgba(255,173,10,.12), transparent 70%); }
.pipeline-card:nth-child(3)::before { background: radial-gradient(circle, rgba(167,43,195,.13), transparent 70%); }
.pipeline-card:nth-child(4)::before { background: radial-gradient(circle, rgba(97,200,92,.12), transparent 70%); }

[data-theme="light"] .pipeline-card {
    background: linear-gradient(145deg, #ffffff, #f5f8fc);
    box-shadow: 0 14px 36px rgba(30,63,101,.07);
}

.pipeline-card:hover,
.pipeline-card.is-active {
    transform: translateY(-8px);
    border-color: rgba(36,152,243,.34);
    box-shadow: 0 24px 60px rgba(30,63,101,.14), 0 0 0 1px rgba(36,152,243,.04);
}

.pipeline-card:hover::before,
.pipeline-card.is-active::before { transform: scale(1.45); }

.pipeline-card > span {
    position: absolute;
    top: 20px;
    inset-inline-end: 22px;
    color: #50627f;
    font-size: .7rem;
    font-weight: 900;
}

.pipeline-card i {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--intel-blue-soft);
    color: #35a8ff;
    font-size: 1.25rem;
    margin-bottom: 30px;
    transition: transform .35s ease, box-shadow .35s ease;
}

.pipeline-card:hover i,
.pipeline-card.is-active i {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 26px rgba(36,152,243,.12);
}

.pipeline-card:nth-child(2) i { background: var(--intel-orange-soft); color: var(--intel-orange); }
.pipeline-card:nth-child(3) i { background: var(--intel-purple-soft); color: #c347db; }
.pipeline-card:nth-child(4) i { background: var(--intel-green-soft); color: var(--intel-green); }
.pipeline-card h3 { margin: 0 0 9px; font-size: 1.2rem; }
.pipeline-card p { margin: 0; color: var(--intel-text-soft); font-size: .9rem; line-height: 1.95; }

/* ---------------------------------------------------------
   9. CAPABILITIES / WORKSPACES
--------------------------------------------------------- */
.intellify-capabilities {
    position: relative;
    background: linear-gradient(180deg, #071226, #08172d);
    overflow: hidden;
}

.intellify-capabilities::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 20%, rgba(36,152,243,.10), transparent 25%),
        radial-gradient(circle at 88% 78%, rgba(167,43,195,.09), transparent 24%);
}

[data-theme="light"] .intellify-capabilities {
    background: linear-gradient(180deg, #e9f0f8, #f4f7fb);
}

.desk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}

.desk-card {
    position: relative;
    min-height: 380px;
    padding: 42px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, rgba(17,31,56,.95), rgba(23,38,64,.88));
    box-shadow: 0 25px 80px rgba(0,0,0,.20);
    transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .45s ease;
}

.desk-card::before {
    content: "";
    position: absolute;
    inset: auto -90px -120px auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36,152,243,.18), transparent 68%);
    filter: blur(7px);
    transition: transform .8s ease;
}

.desk-ai::before { background: radial-gradient(circle, rgba(167,43,195,.19), transparent 68%); }

[data-theme="light"] .desk-card {
    background: linear-gradient(145deg, #ffffff, #f2f6fb);
    box-shadow: 0 22px 60px rgba(29,61,99,.10);
}

[data-theme="light"] .desk-card::before { opacity: .65; }

.desk-card:hover,
.desk-card.is-hovered {
    transform: translateY(-8px);
    border-color: rgba(36,152,243,.32);
    box-shadow: 0 32px 85px rgba(24,55,91,.18);
}

.desk-card:hover::before,
.desk-card.is-hovered::before { transform: scale(1.3); }

.desk-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: var(--intel-blue-soft);
    color: #38a9ff;
    margin-bottom: 26px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .35s ease;
}

.desk-card:hover .desk-icon { transform: translateY(-4px) rotate(-2deg); }
.desk-ai .desk-icon { background: var(--intel-purple-soft); color: #c447dc; }
.desk-meta { color: #68809f; font-size: .68rem; font-weight: 900; letter-spacing: .13em; margin-bottom: 7px; }
.desk-card h3 { margin: 0; font-size: 2rem; }
.desk-card > p { margin: 13px 0 24px; color: var(--intel-text-soft); line-height: 1.95; max-width: 650px; }
.desk-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.desk-card li { position: relative; padding-inline-start: 20px; color: #bcc9db; font-size: .82rem; line-height: 1.7; }
[data-theme="light"] .desk-card li { color: #53657e; }
.desk-card li::before { content: ""; position: absolute; inset-inline-start: 0; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: #2498f3; box-shadow: 0 0 14px rgba(36,152,243,.5); }
.desk-ai li::before { background: #a72bc3; box-shadow: 0 0 14px rgba(167,43,195,.5); }

/* ---------------------------------------------------------
   10. PROJECT ARCHITECTURE
--------------------------------------------------------- */
.intellify-projects {
    padding-top: 80px;
}

.project-showcase {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 50px;
    align-items: center;
    padding: 70px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 34px;
    background: radial-gradient(circle at 80% 20%, rgba(36,152,243,.12), transparent 32%), linear-gradient(145deg, var(--intel-surface), var(--intel-surface-2));
    box-shadow: var(--intel-shadow);
}

.project-showcase::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    inset: -160px auto auto 18%;
    background: radial-gradient(circle, rgba(167,43,195,.10), transparent 70%);
    pointer-events: none;
}

.project-showcase h2 { position: relative; z-index: 1; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.25; margin: 0; }
.project-showcase p { position: relative; z-index: 1; max-width: 650px; color: var(--intel-text-soft); line-height: 2; margin: 22px 0; }
.project-pills { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.project-pills span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 30px; background: var(--intel-surface-2); color: var(--intel-text-soft); font-size: .78rem; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.project-pills span:hover { transform: translateY(-3px); border-color: rgba(36,152,243,.28); background: var(--bg-card-hover); }
.project-pills i { color: #35a8ff; }

.project-map {
    position: relative;
    aspect-ratio: 1;
    width: min(100%, 410px);
    margin-inline: auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36,152,243,.14), transparent 55%);
    border: 1px dashed rgba(75,139,216,.24);
    animation: mapBreath 6s ease-in-out infinite;
}

.project-map::before,
.project-map::after {
    content: "";
    position: absolute;
    inset: 13%;
    border: 1px solid rgba(36,152,243,.12);
    border-radius: 50%;
}

.project-map::after { inset: 29%; border-color: rgba(167,43,195,.10); }

@keyframes mapBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.018); }
}

.map-center {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
    width: 105px;
    height: 105px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--intel-surface-3);
    border: 1px solid rgba(36,152,243,.36);
    color: #6ec0ff;
    font-size: .7rem;
    font-weight: 900;
    box-shadow: 0 0 45px rgba(36,152,243,.15);
    animation: centerPulse 3s ease-in-out infinite;
}

@keyframes centerPulse {
    0%, 100% { box-shadow: 0 0 32px rgba(36,152,243,.10); }
    50% { box-shadow: 0 0 60px rgba(36,152,243,.22); }
}

.map-node {
    position: absolute;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--intel-surface-2);
    border: 1px solid var(--border);
    color: var(--intel-text-soft);
    font-size: .7rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    transition: transform .45s ease, border-color .35s ease, color .35s ease;
}

.map-node:hover { transform: translateY(-4px); border-color: rgba(36,152,243,.34); color: var(--intel-text); }
.node-a { top: 10%; left: 16%; }
.node-b { top: 18%; right: 9%; }
.node-c { bottom: 18%; right: 10%; }
.node-d { bottom: 9%; left: 23%; }
.node-e { top: 46%; left: 4%; }

/* ---------------------------------------------------------
   11. SCREENSHOT PLACEHOLDERS
--------------------------------------------------------- */
.intellify-screens { overflow: hidden; }
.screens-grid { display: grid; grid-template-columns: 1.3fr 1fr .58fr; gap: 22px; align-items: end; }
.screen-placeholder { min-height: 330px; border: 1px solid var(--border); border-radius: 24px; background: var(--intel-surface); box-shadow: var(--intel-shadow); overflow: hidden; transition: transform .45s ease, box-shadow .45s ease, border-color .35s ease; }
.screen-placeholder:hover { transform: translateY(-7px); border-color: rgba(36,152,243,.30); box-shadow: 0 28px 70px rgba(30,63,101,.16); }
.screen-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; background: var(--intel-surface-2); border-bottom: 1px solid var(--border); color: var(--intel-text-soft); font-size: .72rem; }
.screen-toolbar small { color: var(--intel-text-muted); }
.screen-art { height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(circle at 50% 45%, rgba(36,152,243,.10), transparent 40%), #0a162c; color: #8ea2bf; }
[data-theme="light"] .screen-art { background: radial-gradient(circle at 50% 45%, rgba(36,152,243,.10), transparent 42%), #eef4fa; color: #6d809a; }
.screen-art i { font-size: 2.5rem; color: #2fa7ff; }
.screen-art strong { color: #d8e4f4; }
[data-theme="light"] .screen-art strong { color: #18304e; }
.screen-art span { font-size: .7rem; }
.screen-web .screen-art i { color: #a72bc3; }
.screen-mobile { min-height: 390px; padding: 14px; background: transparent; border: 0; box-shadow: none; }
.screen-mobile:hover { transform: none; box-shadow: none; border-color: transparent; }
.mobile-device { height: 390px; width: min(220px,100%); margin: auto; padding: 12px 8px 10px; border: 1px solid rgba(130,165,215,.32); border-radius: 34px; background: #111c31; box-shadow: 0 30px 60px rgba(0,0,0,.30); transition: transform .5s ease, box-shadow .5s ease; }
.screen-mobile:hover .mobile-device { transform: translateY(-7px) rotate(-1deg); box-shadow: 0 38px 80px rgba(30,63,101,.20); }
[data-theme="light"] .mobile-device { background: #dfe8f2; border-color: rgba(31,73,115,.12); box-shadow: 0 25px 55px rgba(30,63,101,.14); }
.mobile-notch { width: 70px; height: 20px; border-radius: 20px; background: #080f1e; margin: 0 auto 7px; }
[data-theme="light"] .mobile-notch { background: #182940; }
.mobile-device .screen-art { height: calc(100% - 27px); border-radius: 24px; background: #0b172b; }
[data-theme="light"] .mobile-device .screen-art { background: #f4f8fc; }
.mobile-device .screen-art i { font-size: 2rem; color: #61c85c; }

/* ---------------------------------------------------------
   12. PRICING
--------------------------------------------------------- */
.intellify-pricing {
    background: linear-gradient(180deg, var(--intel-section-alt), transparent);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: stretch;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 23px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(23,35,61,.88), rgba(13,28,51,.84));
    box-shadow: 0 20px 55px rgba(0,0,0,.13);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .45s ease, background .35s ease;
    isolation: isolate;
    overflow: hidden;
}

.price-card::before {
    content: "";
    position: absolute;
    inset: auto -80px -110px auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36,152,243,.10), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.price-card:hover,
.price-card.is-hovered {
    transform: translateY(-8px);
    border-color: rgba(36,152,243,.30);
    box-shadow: 0 30px 75px rgba(30,63,101,.16);
}

[data-theme="light"] .price-card {
    background: linear-gradient(145deg, #ffffff, #f6f9fd);
    box-shadow: 0 18px 45px rgba(30,63,101,.07);
}

[data-theme="light"] .price-card:hover,
[data-theme="light"] .price-card.is-hovered {
    background: #ffffff;
    box-shadow: 0 30px 72px rgba(30,63,101,.12);
}

.price-card.featured {
    border-color: rgba(36,152,243,.50);
    box-shadow: 0 28px 80px rgba(36,152,243,.12);
}

.price-card.featured::before { background: radial-gradient(circle, rgba(36,152,243,.16), transparent 70%); }
.price-card.org { border-color: rgba(167,43,195,.28); }
.price-card.org::before { background: radial-gradient(circle, rgba(167,43,195,.14), transparent 70%); }

.popular-badge { position: absolute; top: 14px; inset-inline-end: 14px; padding: 5px 9px; border-radius: 20px; background: rgba(36,152,243,.12); color: #66bdff; font-size: .6rem; font-weight: 800; }
[data-theme="light"] .popular-badge { color: #1576bf; background: rgba(36,152,243,.09); }
.price-label { color: var(--intel-text-muted); font-size: .67rem; font-weight: 800; }
.price-card h3 { margin: 6px 0 17px; font-size: 1.35rem; }
.price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 12px; }
.price strong { font-size: 2rem; color: var(--intel-text); }
.price span { color: var(--intel-text-muted); font-size: .62rem; }
.custom-price { font-size: 1.65rem; font-weight: 900; color: #c248d6; min-height: 47px; }
.price-card p { min-height: 56px; margin: 0; color: var(--intel-text-soft); font-size: .78rem; line-height: 1.8; }
.price-card ul { list-style: none; padding: 18px 0 0; margin: 0; display: grid; gap: 10px; flex: 1; }
.price-card li { position: relative; padding-inline-start: 20px; color: #b7c6da; font-size: .76rem; }
[data-theme="light"] .price-card li { color: #566982; }
.price-card li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #61c85c; font-weight: 900; }
.price-button { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 24px; border-radius: 12px; background: var(--intel-surface-3); color: var(--intel-text); font-size: .78rem; font-weight: 800; border: 1px solid var(--border); transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.price-button:hover { background: var(--bg-card-hover); border-color: rgba(36,152,243,.32); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(36,152,243,.08); }
.featured .price-button { background: linear-gradient(135deg,#1e91ec,#256fe0); color: #fff; border-color: transparent; }
.org .price-button { background: rgba(167,43,195,.10); border-color: rgba(167,43,195,.23); color: #d982e6; }

/* ---------------------------------------------------------
   13. FEATURE REFERENCE
--------------------------------------------------------- */
.intellify-features { padding-top: 100px; }
.feature-list { max-width: 900px; margin: auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.feature-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 17px 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--bg-card);
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
    overflow: hidden;
}

.feature-item::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    inset: -65px auto auto -55px;
    background: radial-gradient(circle, rgba(36,152,243,.08), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease;
}

.feature-item:hover {
    transform: translateY(-4px);
    border-color: rgba(36,152,243,.26);
    background: var(--bg-card-hover);
    box-shadow: 0 18px 42px rgba(30,63,101,.08);
}

.feature-item:hover::before { opacity: 1; }

.feature-item > i {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--intel-blue-soft);
    color: #38a9ff;
    font-size: .9rem;
}

.feature-item:nth-child(3n) > i { background: var(--intel-purple-soft); color: #bd3fd3; }
.feature-item:nth-child(4n) > i { background: var(--intel-orange-soft); color: #ffb319; }
.feature-item div { position: relative; z-index: 1; display: grid; gap: 3px; }
.feature-item strong { font-size: .86rem; }
.feature-item span { color: var(--intel-text-muted); font-size: .72rem; line-height: 1.75; }

.extra-feature { display: none; }
.feature-list.expanded .extra-feature { display: flex; animation: featureIn .48s both; }
.feature-list.expanded .extra-feature:nth-child(11) { animation-delay: .02s; }
.feature-list.expanded .extra-feature:nth-child(12) { animation-delay: .05s; }
.feature-list.expanded .extra-feature:nth-child(13) { animation-delay: .08s; }
.feature-list.expanded .extra-feature:nth-child(14) { animation-delay: .11s; }
.feature-list.expanded .extra-feature:nth-child(15) { animation-delay: .14s; }
.feature-list.expanded .extra-feature:nth-child(16) { animation-delay: .17s; }
.feature-list.expanded .extra-feature:nth-child(17) { animation-delay: .20s; }
.feature-list.expanded .extra-feature:nth-child(18) { animation-delay: .23s; }
.feature-list.expanded .extra-feature:nth-child(19) { animation-delay: .26s; }

@keyframes featureIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.show-more-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(260px,100%);
    margin: 25px auto 0;
    padding: 12px 18px;
    border: 1px solid rgba(36,152,243,.25);
    border-radius: 13px;
    background: rgba(36,152,243,.08);
    color: var(--intel-blue-bright);
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

[data-theme="light"] .show-more-features { color: #147bc8; background: rgba(36,152,243,.07); }
.show-more-features:hover { background: rgba(36,152,243,.14); transform: translateY(-3px); border-color: rgba(36,152,243,.34); }
.show-more-features i { transition: transform .35s ease; }
.show-more-features.expanded i { transform: rotate(180deg); }

/* ---------------------------------------------------------
   14. FINAL CTA
--------------------------------------------------------- */
.intellify-cta { padding-top: 60px; }
.intellify-cta-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 65px;
    border: 1px solid rgba(36,152,243,.25);
    border-radius: 32px;
    overflow: hidden;
    background: radial-gradient(circle at 78% 20%, rgba(167,43,195,.14), transparent 30%), radial-gradient(circle at 20% 80%, rgba(36,152,243,.13), transparent 35%), var(--intel-surface);
    box-shadow: var(--intel-shadow);
}

.intellify-cta-card::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    inset: auto -170px -210px auto;
    border: 1px solid rgba(36,152,243,.10);
    animation: ctaRing 9s linear infinite;
}

@keyframes ctaRing {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.04); }
    to { transform: rotate(360deg) scale(1); }
}

.intellify-cta-card > * { position: relative; z-index: 1; }
.intellify-cta-card h2 { font-size: clamp(2rem,4vw,3.6rem); margin: 0; line-height: 1.25; }
.intellify-cta-card p { max-width: 680px; margin: 18px 0 0; color: var(--intel-text-soft); line-height: 2; }

/* ---------------------------------------------------------
   15. PRODUCT FOOTER
--------------------------------------------------------- */
.intellify-page .site-footer {
    background: linear-gradient(180deg, transparent, rgba(36,152,243,.025));
}

/* ---------------------------------------------------------
   16. THEME TRANSITION
--------------------------------------------------------- */
html.intellify-theme-transition,
html.intellify-theme-transition body,
html.intellify-theme-transition .site-header,
html.intellify-theme-transition .project-showcase,
html.intellify-theme-transition .desk-card,
html.intellify-theme-transition .price-card,
html.intellify-theme-transition .feature-item,
html.intellify-theme-transition .screen-placeholder,
html.intellify-theme-transition .pipeline-card,
html.intellify-theme-transition .intellify-cta-card,
html.intellify-theme-transition .dashboard-frame,
html.intellify-theme-transition .button-secondary {
    transition-property: background, background-color, border-color, color, box-shadow;
    transition-duration: .42s;
    transition-timing-function: cubic-bezier(.2,.8,.2,1);
}


/* Stagger used by the fifth pricing card. */
.reveal-delay-4 { transition-delay: .4s; }

/* ---------------------------------------------------------
   17. RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1100px) {
    .intellify-hero-grid { grid-template-columns: 1fr; gap: 45px; }
    .hero-visual { max-width: 850px; margin: auto; width: 100%; }
    .pipeline-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .price-card.org { grid-column: span 2; }
    .screens-grid { grid-template-columns: 1fr 1fr; }
    .screen-mobile { grid-column: span 2; }
    .feature-list { max-width: 100%; }
    .desk-card { padding: 32px; }
    .project-showcase { padding: 50px; }
    .pipeline-grid::before { display: none; }
}

@media (max-width: 760px) {
    .intellify-hero { min-height: auto; padding-top: 120px; }
    .intellify-hero h1 { font-size: clamp(2.6rem, 11vw, 4.1rem); }
    .hero-lead { font-size: .98rem; }
    .dashboard-content { min-height: 340px; }
    .dash-main { padding: 22px; }
    .dash-cards { grid-template-columns: 1fr 1fr; }
    .dash-card { min-height: 105px; padding: 16px; }
    .dash-card b { font-size: .86rem; }
    .pipeline-grid,
    .desk-grid,
    .feature-list,
    .screens-grid { grid-template-columns: 1fr; }
    .pipeline-card { min-height: auto; }
    .project-showcase { grid-template-columns: 1fr; padding: 32px 24px; }
    .project-map { width: 100%; max-width: 330px; }
    .screen-mobile { grid-column: auto; }
    .pricing-grid { grid-template-columns: 1fr; }
    .price-card.org { grid-column: auto; }
    .intellify-cta-card { flex-direction: column; align-items: stretch; padding: 40px 25px; }
    .intellify-cta-card .button { width: 100%; }
    .product-logo-placeholder { min-width: 160px; }
    .section { padding: 90px 0; }
    .visual-orbit { display: none; }
}

@media (max-width: 480px) {
    .container { width: min(var(--container), calc(100% - 30px)); }
    .dashboard-frame { border-radius: 19px; }
    .dashboard-topbar { height: 44px; }
    .dash-sidebar { display: none; }
    .dashboard-content { grid-template-columns: 1fr; }
    .dash-main { padding: 17px; }
    .dash-cards { gap: 9px; }
    .dash-card { min-height: 92px; padding: 13px; }
    .dash-card i { font-size: 1rem; }
    .dash-card small { font-size: .65rem; }
    .dash-feed { display: none; }
    .intellify-trust { flex-wrap: wrap; gap: 12px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .button { width: 100%; }
    .desk-card { padding: 26px; }
    .project-pills { display: grid; grid-template-columns: 1fr 1fr; }
    .feature-item { padding: 14px; }
    .feature-item span { font-size: .68rem; }
    .price-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }

    .dashboard-frame,
    .hero-visual:hover .dashboard-frame,
    .pipeline-card,
    .feature-item,
    .desk-card,
    .price-card,
    .screen-placeholder,
    .mobile-device,
    .project-map,
    .intellify-cta-card {
        transform: none !important;
    }
}


/* =========================================================
   MULTILINGUAL PRODUCT LAYER
========================================================= */
.product-logo-placeholder { padding: 8px 14px; overflow: hidden; }
.product-logo-image { width: 120px; height: 38px; display: block; object-fit: contain; }
.screen-placeholder-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.screen-art:has(.screen-placeholder-image) { padding: 0; overflow: hidden; }
html[dir="ltr"] .intellify-hero h1,
html[dir="ltr"] .section-title,
html[dir="ltr"] .project-showcase h2,
html[dir="ltr"] .intellify-cta-card h2 { letter-spacing: -0.035em; }
html[dir="ltr"] body.intellify-page { font-family: Inter, system-ui, sans-serif; }
html[lang="fa"] body.intellify-page,
html[lang="ar"] body.intellify-page { font-family: Vazirmatn, "Noto Sans Arabic", system-ui, sans-serif; }
html[lang="zh"] body.intellify-page { font-family: "Noto Sans SC", Inter, system-ui, sans-serif; }
html[dir="rtl"] .language-menu { inset-inline-end: 0; inset-inline-start: auto; }
html[dir="ltr"] .language-menu { inset-inline-start: 0; inset-inline-end: auto; }
@media (max-width: 760px) { .product-logo-image { width: 104px; height: 34px; } }