/* Trivedha overrides for the Digix SaaS landing (index-eleven) */

html { scroll-padding-top: 90px; }

:root { --trv-primary: #615EFC; --trv-dark: #050D20; --trv-muted: #6D6D6D; --trv-line: #EAF0FF; }

/* ---------- logo & header ---------- */
.trv-logo { display: inline-flex !important; flex-wrap: nowrap; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.header-saas .logo-area { flex-shrink: 0; }
.trv-logo img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; }
.trv-logo span { font-family: var(--font-primary); font-weight: 700; font-size: 26px; line-height: 1; color: #fff; letter-spacing: -0.5px; }
#side-bar .trv-logo span { color: var(--trv-dark); }

.header-saas .trv-signin { color: #fff; font-weight: 500; margin-right: 22px; white-space: nowrap; }
.header-saas .trv-signin:hover { color: #fff; opacity: .8; }
@media (max-width: 1199px) { .header-saas .trv-signin { display: none; } }
@media (max-width: 575px) {
    .header-saas .button-wrapper-flex .rts-btn { display: none; }
    .trv-logo span { font-size: 22px; }
}

.trv-mobile-cta .rts-btn { width: 100%; justify-content: center; }

/* section pre-label icons */
.saas-onepage .title-left-wrapper span.pre i,
.saas-onepage .title-center-wrapper span.pre i { color: var(--trv-primary); margin-right: 10px; font-size: 16px; }
.rts-keyfeature-area.saas-landing .title-center-wrapper .pre i { color: #fff; }
.rts-banner-saas-landing .banner-content-two-style .pre i { color: #fff; }

/* ---------- banner ---------- */
.trv-banner-buttons { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 30px; flex-wrap: wrap; }
.rts-banner-saas-landing .banner-content-two-style .trv-banner-buttons .rts-btn { margin: 0; }
.trv-banner-link { color: #fff; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.trv-banner-link:hover { color: #fff; opacity: .85; }

.trv-chips .trv-chip { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--trv-dark); font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 40px; box-shadow: 0 12px 30px rgba(12, 16, 24, .18); }
.trv-chips .trv-chip i { color: var(--trv-primary); }
.trv-chips .trv-chip.one { top: 26%; left: 7%; }
.trv-chips .trv-chip.two { top: 38%; right: 8%; }
.trv-chips .trv-chip.three { top: 52%; left: 4%; }
@media (max-width: 1599px) { .trv-chips .trv-chip.three { display: none; } }
@media (max-width: 1399px) { .trv-chips { display: none; } }

/* app mockup frame */
.trv-app { max-width: 1070px; margin: 0 auto; display: flex; text-align: left; background: #fff; border: 12px solid #EEF0FF; border-radius: 18px; box-shadow: 0 30px 80px rgba(12, 16, 24, .18); overflow: hidden; font-family: var(--font-primary); }
.trv-app h5, .trv-app h6, .trv-app p { margin: 0; }
.trv-app-side { width: 210px; flex-shrink: 0; background: #F8F9FF; border-right: 1px solid var(--trv-line); padding: 20px 14px; }
.trv-app-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--trv-dark); margin-bottom: 22px; }
.trv-app-brand img { width: 28px; height: 28px; border-radius: 7px; }
.trv-app-label { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #9A9AB0; margin: 14px 0 8px 8px; }
.trv-app-side ul { list-style: none; padding: 0; margin: 0; }
.trv-app-side li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #5D5D72; padding: 8px 10px; border-radius: 6px; margin: 2px 0; }
.trv-app-side li i { width: 14px; text-align: center; }
.trv-app-side li.active { background: var(--trv-primary); color: #fff; }
.trv-app-main { flex: 1; min-width: 0; padding: 20px 22px; background: #F6F7FB; }
.trv-app-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.trv-app-top h6 { font-size: 17px; color: var(--trv-dark); }
.trv-app-top span { font-size: 12px; color: #7A7A90; }
.trv-live { display: inline-flex; align-items: center; gap: 6px; background: #FFECEC; color: #E5484D !important; font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: 20px; }
.trv-live i { width: 7px; height: 7px; border-radius: 50%; background: #E5484D; animation: trvPulse 1.4s infinite; }
@keyframes trvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.trv-app-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.trv-room { position: relative; border-radius: 12px; overflow: hidden; min-height: 280px; background: #1B1D2E; }
.trv-room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.trv-room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 13, 32, 0) 40%, rgba(5, 13, 32, .75) 100%); }
.trv-room-tag { position: absolute; z-index: 1; top: 12px; left: 12px; background: rgba(5, 13, 32, .6); color: #fff; font-size: 12px; padding: 5px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; }
.trv-room-tag i { color: #3DD68C; font-size: 7px; }
.trv-wave { position: absolute; z-index: 1; top: 14px; right: 14px; display: flex; align-items: center; gap: 3px; height: 20px; }
.trv-wave i { width: 3px; background: #fff; border-radius: 2px; animation: trvWave 1s ease-in-out infinite; }
.trv-wave i:nth-child(1) { height: 30%; animation-delay: 0s; }
.trv-wave i:nth-child(2) { height: 70%; animation-delay: .1s; }
.trv-wave i:nth-child(3) { height: 100%; animation-delay: .2s; }
.trv-wave i:nth-child(4) { height: 60%; animation-delay: .3s; }
.trv-wave i:nth-child(5) { height: 90%; animation-delay: .4s; }
.trv-wave i:nth-child(6) { height: 50%; animation-delay: .5s; }
.trv-wave i:nth-child(7) { height: 30%; animation-delay: .6s; }
@keyframes trvWave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.trv-bubble { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; background: rgba(255, 255, 255, .95); border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.45; color: var(--trv-dark); }
.trv-bubble b { display: block; font-size: 11px; color: var(--trv-primary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }

.trv-eval { background: #fff; border-radius: 12px; padding: 16px; border: 1px solid var(--trv-line); }
.trv-eval h6 { font-size: 14px; color: var(--trv-dark); margin-bottom: 10px; }

.trv-ring { --p: 75; width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: conic-gradient(var(--trv-primary) calc(var(--p) * 1%), #E9E9FF 0); }
.trv-ring > span { width: 80%; height: 80%; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 24px; color: var(--trv-dark); line-height: 1; }
.trv-ring > span small { font-size: 11px; color: #8A8AA0; font-weight: 500; display: block; text-align: center; }
.trv-ring.small { width: 64px; height: 64px; margin: 0; }
.trv-ring.small > span { font-size: 15px; color: var(--trv-primary); }

.trv-bars > div { margin-bottom: 9px; }
.trv-bars > div:last-child { margin-bottom: 0; }
.trv-bars p { display: flex; justify-content: space-between; font-size: 12px; color: #5D5D72; margin: 0 0 4px; line-height: 1.2; }
.trv-bars p b { color: var(--trv-dark); }
.trv-bars span { display: block; height: 6px; border-radius: 6px; background: #ECECFF; position: relative; overflow: hidden; }
.trv-bars span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #8B89FF, var(--trv-primary)); border-radius: 6px; }

.trv-app-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.trv-app-stats > div { background: #fff; border: 1px solid var(--trv-line); border-radius: 12px; padding: 12px 16px; }
.trv-app-stats span { font-size: 12px; color: #7A7A90; }
.trv-app-stats h5 { font-size: 24px; color: var(--trv-dark); margin: 2px 0; }
.trv-app-stats h5 small { font-size: 13px; color: #8A8AA0; }
.trv-app-stats em, .trv-up { font-style: normal; font-size: 12px; color: #12A150; font-weight: 500; }

@media (max-width: 991px) {
    .trv-app-side { display: none; }
}
@media (max-width: 767px) {
    .trv-app { border-width: 8px; }
    .trv-app-main { padding: 14px; }
    .trv-app-grid { grid-template-columns: 1fr; }
    .trv-room { min-height: 240px; }
    .trv-app-stats { grid-template-columns: 1fr; gap: 10px; }
    .trv-app-stats > div { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* ---------- brand strip ---------- */
.trv-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 19px; white-space: nowrap; }
.trv-brand img { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 7px; padding: 4px; }
.rts-trusted-brand-area.saas-landing .single-image { display: flex; justify-content: center; }

/* ---------- shared card mockups ---------- */
.trv-frame { background: #EEF0FF; border-radius: 16px; padding: 12px; display: flex; gap: 12px; font-family: var(--font-primary); }
.trv-frame h4, .trv-frame h5, .trv-frame h6, .trv-frame p { margin: 0; }
.trv-card { background: #fff; border-radius: 12px; padding: 18px; }
.trv-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.trv-card-head h6 { font-size: 16px; color: var(--trv-dark); }
.trv-card-head span { font-size: 12px; color: #7A7A90; }
.trv-overall { font-size: 30px; font-weight: 700; color: var(--trv-primary); line-height: 1; }
.trv-overall small { font-size: 13px; color: #8A8AA0; font-weight: 500; }
.trv-mini { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--trv-line); }
.trv-mini span { font-size: 12px; color: #7A7A90; }
.trv-mini h5 { font-size: 22px; color: var(--trv-dark); }
.trv-mini h5.ok { color: #12A150; font-size: 18px; }

.trv-report-main { flex: 1.7; }
.trv-report-main .trv-bars > div { margin-bottom: 12px; }
.trv-report-side { flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px; }
.trv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.trv-tags span { font-size: 12px; padding: 5px 10px; border-radius: 20px; display: inline-flex; gap: 6px; align-items: center; }
.trv-tags .good { background: #E8F8EF; color: #12A150; }
.trv-tags .improve { background: #FFF4E5; color: #C2410C; }

.trv-week { flex: 1.5; }
.trv-week h4 { font-size: 28px; color: var(--trv-dark); margin: -6px 0 10px; }
.trv-week h4 small { font-size: 13px; color: #8A8AA0; font-weight: 500; }
.trv-columns { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.trv-columns > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.trv-columns span { width: 100%; max-width: 26px; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #8B89FF, var(--trv-primary)); }
.trv-columns p { font-size: 11px; color: #8A8AA0; line-height: 1; }
.trv-columns.small { height: 92px; margin-top: 12px; }
.trv-practice-side { flex: 1; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.trv-readiness { align-items: flex-start; gap: 10px; }

@media (max-width: 575px) {
    .trv-frame { flex-direction: column; }
    .trv-report-side { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
    .trv-practice-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}

/* ---------- features ---------- */
.single-feature-area-five .icon i { font-size: 44px; color: var(--trv-primary); line-height: 1; }

/* ---------- pricing ---------- */
.rts-pricing-area .pricing-wrapper-four { height: 100%; }
.rts-pricing-area .pricing-wrapper-four .pricing-top-area .top .icon i { font-size: 20px; color: #614CE1; }
.rts-pricing-area .pricing-wrapper-four .dollar-area .title { white-space: nowrap; }
.rts-pricing-area .pricing-wrapper-four .dollar-area .time { white-space: nowrap; }
.rts-pricing-area .pricing-wrapper-four.active { position: relative; overflow: visible; }
.rts-pricing-area .tab-content { padding-top: 14px; overflow: visible; }
.trv-popular { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--trv-primary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; padding: 7px 14px; border-radius: 20px; white-space: nowrap; box-shadow: 0 6px 16px rgba(97, 94, 252, .35); }
.rts-pricing-area .pricing-wrapper-four .pricing-top-area .bottom p { min-height: 48px; }
.rts-pricing-area .pricing-wrapper-four .pricing-top-area .bottom .rts-btn { width: 100%; justify-content: center; }
.trv-pricing-note { text-align: center; margin: 40px auto 0; max-width: 720px; color: var(--trv-muted); }
.trv-pricing-note a { color: var(--trv-primary); font-weight: 600; }
@media (min-width: 1200px) and (max-width: 1399px) {
    .rts-pricing-area .pricing-wrapper-four .dollar-area .title { font-size: 34px; }
}

/* ---------- platform (dark) ---------- */
.rts-keyfeature-area.saas-landing .section-inner .content-area { align-items: stretch; }
.thumbnail-feature-cyber { flex: 0 0 38%; }
.cyber-security-feature-right { flex: 1; min-width: 0; }
.cyber-security-feature-right .top-thumbnail-area,
.cyber-security-feature-right .bottom-thumbnail-area { flex: 1; align-items: stretch !important; }
.cyber-security-feature-right .thumbnail-single { flex: 1; min-width: 0; }
.trv-glass { height: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 14px; font-family: var(--font-primary); }
.trv-glass h3, .trv-glass h4, .trv-glass h6, .trv-glass p { margin: 0; }
.trv-glass-lg { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 18px; }
.trv-modes h6 { font-size: 16px; color: var(--trv-dark); margin-bottom: 10px; }
.trv-modes ul { list-style: none; padding: 0; margin: 0; }
.trv-modes li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--trv-dark); padding: 9px 0; border-bottom: 1px solid #F0F0F7; margin: 0; }
.trv-modes li:last-child { border-bottom: 0; }
.trv-modes li i { width: 32px; height: 32px; border-radius: 8px; background: #EEEEFF; color: var(--trv-primary); display: grid; place-items: center; font-size: 14px; }
.trv-modes li span { margin-left: auto; font-size: 11px; color: #7A7A90; background: #F4F5FA; padding: 3px 8px; border-radius: 20px; }
.trv-glass-text { padding: 0 6px 6px; }
.trv-roles { display: flex; margin-bottom: 14px; }
.trv-roles span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--trv-primary); border: 2px solid #3A3896; margin-left: -8px; font-size: 15px; }
.trv-roles span:first-child { margin-left: 0; }
.trv-roles span.plus { background: var(--trv-primary); color: #fff; font-weight: 600; font-size: 18px; }
.trv-glass-text h4 { color: #fff; font-size: 22px; line-height: 1.3; margin-bottom: 10px; }
.trv-glass-text p { color: rgba(255, 255, 255, .75); font-size: 15px; }

.trv-tile { height: 100%; display: flex; flex-direction: column; }
.trv-tile h6 { font-size: 15px; color: var(--trv-dark); }
.trv-tile > span { font-size: 12px; color: #7A7A90; }
.trv-tile-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 8px; }
.trv-tile-row h3 { font-size: 32px; color: var(--trv-dark); line-height: 1; }
.trv-tile-row h3 small { font-size: 13px; color: #8A8AA0; font-weight: 500; }
.trv-tile-icon { font-size: 28px; color: var(--trv-primary); }
.trv-tile .trv-ring.small > span i { font-size: 18px; }
.trv-progress { height: 8px; border-radius: 8px; background: #ECECFF; overflow: hidden; margin-top: auto; }
.trv-progress span { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #8B89FF, var(--trv-primary)); }
.trv-line { width: 100%; height: 90px; margin-top: auto; display: block; }

@media (max-width: 1199px) {
    .rts-keyfeature-area.saas-landing .section-inner .content-area { flex-direction: column; }
    .thumbnail-feature-cyber { flex: none; width: 100%; }
    .cyber-security-feature-right { width: 100%; }
    .cyber-security-feature-right .top-thumbnail-area,
    .cyber-security-feature-right .bottom-thumbnail-area { flex-direction: row !important; }
}
@media (max-width: 767px) {
    .cyber-security-feature-right .top-thumbnail-area,
    .cyber-security-feature-right .bottom-thumbnail-area { flex-direction: column !important; }
}

/* ---------- use cases ---------- */
.trv-avatar { width: 56px; height: 56px; border-radius: 50%; background: #EEEEFF; color: var(--trv-primary); display: grid !important; place-items: center; font-size: 22px; }

/* ---------- get started card ---------- */
.trv-start-card .title { margin-bottom: 26px; }
.trv-cta-steps { list-style: none; padding: 0; margin: 0 0 32px; }
.trv-cta-steps li { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; color: var(--trv-dark); font-weight: 500; }
.trv-cta-steps li span { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #EEEEFF; color: var(--trv-primary); display: grid; place-items: center; font-weight: 700; }
.trv-cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.trv-cta-buttons .rts-btn.btn-border { background: transparent; color: var(--trv-primary); border: 1px solid var(--trv-primary); }
.trv-cta-buttons .rts-btn.btn-border:hover { background: var(--trv-primary); color: #fff; }

/* ---------- footer ---------- */
.rts-footer-one .left-wiget .trv-logo { margin-bottom: 20px; }
.rts-footer-one .left-wiget .rts-btn { margin-top: 24px; color: #fff; }