/* =========================================================
   DITSS theme
   Loaded after every other stylesheet. It restyles the shared
   building blocks (hero banners, sections, cards, steps, CTA
   banners, header, footer, forms) so every page shares one look:
   dark, calm and photo-led, with lime as the single accent.
   Colours and fonts are set once in :root below.
   ========================================================= */

:root {
   --t-bg: #0c0a13;
   --t-bg-2: #12101b;
   --t-bg-3: #171523;
   --t-card: #15131f;
   --t-card-hover: #1a1826;
   --t-border: rgba(255, 255, 255, 0.08);
   --t-border-2: rgba(255, 255, 255, 0.14);
   --t-text: #d9d7e0;
   --t-muted: #a19fae;
   --t-head: #ffffff;
   --t-accent: #d7fe03;
   --t-accent-hover: #e6ff4d;
   --t-ink: #111019;
   --t-purple: #6d3fd1;
   --t-radius: 12px;
   --t-radius-sm: 8px;
   --t-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
   --t-font-head: 'Poppins', 'Nunito', system-ui, sans-serif;
   --t-font-body: 'Inter', 'DM Sans', system-ui, sans-serif;
   --t-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
   background: var(--t-bg);
   color: var(--t-text);
   font-family: var(--t-font-body);
   -webkit-font-smoothing: antialiased;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
   font-family: var(--t-font-head);
   color: var(--t-head);
   letter-spacing: -0.01em;
}
body p { color: var(--t-muted); }
::selection { background: var(--t-accent); color: var(--t-ink); }
body a { transition: color 0.2s ease; }

/* Highlighted words in headings: plain lime */
body .ve-section-header h2 span,
body .ve-whyus-content h2 span,
body .ve-page-hero h1 span,
body .ve-cta-content h2 span,
body .ditss-left h2 span,
body .ve-highlight,
body .ve-section h2 span {
   color: var(--t-accent);
   -webkit-text-fill-color: currentColor;
   background: none;
}

/* Small label above headings: text with a short line in front */
body .ve-section-tag,
body .ditss-left .tag {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: none;
   border: 0;
   padding: 0;
   color: var(--t-accent);
   font-family: var(--t-font-body);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   border-radius: 0;
}
body .ve-section-tag::before,
body .ditss-left .tag::before {
   content: "";
   width: 28px;
   height: 2px;
   background: var(--t-accent);
}
body .text-center .ve-section-tag::after,
body .ve-section-header.text-center .ve-section-tag::after {
   content: "";
   width: 28px;
   height: 2px;
   background: var(--t-accent);
}
body .db-cat {
   display: inline-block;
   background: rgba(215, 254, 3, 0.1);
   color: var(--t-accent);
   border: 0;
   border-radius: 4px;
   padding: 4px 10px;
   font-family: var(--t-font-body);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.08em;
}

/* ---------- Buttons ---------- */
body .ve-btn-primary,
body .ve-btn-white,
body .ve-cta-btn,
body .da-submit,
body .db-callout-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: var(--t-accent);
   color: var(--t-ink) !important;
   border: 0;
   border-radius: var(--t-radius-sm);
   padding: 13px 26px;
   font-family: var(--t-font-head);
   font-weight: 600;
   font-size: 15px;
   box-shadow: none;
   transition: background 0.2s, transform 0.2s;
}
body .ve-btn-primary:hover,
body .ve-btn-white:hover,
body .ve-cta-btn:hover,
body .da-submit:hover,
body .db-callout-btn:hover {
   background: var(--t-accent-hover);
   color: var(--t-ink) !important;
   transform: translateY(-1px);
   box-shadow: none;
}
body .ve-btn-ghost {
   border-radius: var(--t-radius-sm);
   border: 1px solid var(--t-border-2);
   background: transparent;
   color: #fff;
   font-family: var(--t-font-head);
   font-weight: 500;
}
body .ve-btn-ghost:hover { border-color: var(--t-accent); color: var(--t-accent); background: transparent; }
body .ve-card-link {
   color: var(--t-accent);
   font-family: var(--t-font-head);
   font-weight: 500;
   font-size: 14px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}
body .ve-card-link i { transition: transform 0.2s ease; }
body .ve-card-link:hover { color: #fff; }
body .ve-card-link:hover i { transform: translateX(3px); }

/* ---------- Header ---------- */
body .ve-header {
   background: rgba(12, 10, 19, 0.94);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--t-border);
}
body .ve-header.scrolled,
body .ve-header.header-small { background: rgba(12, 10, 19, 0.97); }
body .ve-nav > ul > li > a {
   font-family: var(--t-font-head);
   font-weight: 500;
   color: #dcdae4;
   position: relative;
}
body .ve-nav > ul > li > a:hover,
body .ve-nav > ul > li > a.active { color: var(--t-accent); }
body .ve-nav > ul > li > a,
body .ve-cta-btn { white-space: nowrap; }
@media (max-width: 1440px) {
   body .ve-nav > ul { gap: 2px; }
   body .ve-nav > ul > li > a { padding: 8px 10px; font-size: 14px; }
   body .ve-cta-btn { padding: 11px 20px; }
}
/* eight menu items need room: below 1200px use the compact (mobile-style) menu */
@media (max-width: 1199px) {
   body .ve-nav,
   body .ve-nav-cta { display: none; }
   body .ve-toggler { display: flex; }
}
body .ve-nav > ul > li > a.active::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -8px;
   height: 2px;
   background: var(--t-accent);
}
body .ve-mega-full {
   background: #100e18;
   border: 0;
   border-top: 1px solid var(--t-border);
   border-bottom: 1px solid var(--t-border);
   box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
body .ve-mega-full .mega-col h5,
body .ve-mega-full .mega-col h6 {
   font-family: var(--t-font-body);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--t-accent);
}
body .ve-mega-full .mega-col a { color: var(--t-muted); }
body .ve-mega-full .mega-col a:hover { color: #fff; }
body .ve-dropdown {
   background: #100e18;
   border: 1px solid var(--t-border);
   border-radius: var(--t-radius-sm);
   box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9);
}
body .ve-dropdown li a { color: var(--t-muted); }
body .ve-dropdown li a:hover { color: var(--t-accent); background: rgba(255, 255, 255, 0.03); }
body .ve-mobile-menu { background: #0e0c16; border-top: 1px solid var(--t-border); }
body .ve-mobile-menu ul li a { color: #e5e3ec; border-color: var(--t-border); font-family: var(--t-font-head); }
body .ve-mobile-menu ul li a:hover { color: var(--t-accent); }
body .ve-mobile-menu .mobile-sub-title { color: var(--t-accent); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
body .ve-toggler span { background: #fff; }

/* ---------- Page hero (top banner on inner pages) ---------- */
body .ve-page-hero { border-bottom: 1px solid var(--t-border); background-color: var(--t-bg); }
body .ve-page-hero-overlay {
   background: linear-gradient(90deg, rgba(12, 10, 19, 0.95) 0%, rgba(12, 10, 19, 0.82) 50%, rgba(12, 10, 19, 0.55) 100%);
}
body .ve-page-hero-content { position: relative; z-index: 1; }
body .ve-page-hero h1 {
   font-size: clamp(30px, 4vw, 50px);
   font-weight: 700;
   line-height: 1.12;
   color: #fff;
   max-width: 820px;
}
body .ve-page-hero p { color: #cfcdd8; font-size: 16px; line-height: 1.7; }
body .ve-breadcrumb { margin-top: 8px; }
body .ve-breadcrumb li { font-size: 14px; color: var(--t-muted); }
body .ve-breadcrumb li a { color: var(--t-accent); }
body .ve-breadcrumb li.active { color: #fff; }

/* ---------- Sections (alternating solid tones) ---------- */
body .ve-section,
body .ve-mvv-section { background: var(--t-bg); }
body .ve-process-section,
body .ve-counter-section,
body .ve-contact-cards-section { background: var(--t-bg-2); }
body .ve-process-section { border-top: 1px solid var(--t-border); border-bottom: 1px solid var(--t-border); }
body .ve-section-header h2,
body .ve-mvv-section .ve-section-header h2 {
   font-size: clamp(26px, 3vw, 40px);
   font-weight: 700;
   line-height: 1.18;
   color: #fff;
}
body .ve-section-header p,
body .ve-mvv-section .ve-section-header p { color: var(--t-muted); font-size: 16px; line-height: 1.7; }

/* ---------- Intro block with image ("why us") ---------- */
body .ve-whyus-content h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.2; color: #fff; }
body .ve-whyus-content > p,
body .ve-whyus-content p { color: var(--t-muted); font-size: 15.5px; line-height: 1.8; }
body .ve-whyus-img-main { border-radius: 14px; box-shadow: var(--t-shadow); }
body .ve-check-item > i { color: var(--t-accent); }
body .ve-check-item strong { color: #fff; font-family: var(--t-font-head); font-weight: 500; }
body .ve-check-item p { color: var(--t-muted); }

/* ---------- Cards ---------- */
body .ve-service-card,
body .ve-mvv-card,
body .card-box,
body .ve-process-step,
body .ve-testi-card,
body .ve-insight-card,
body .ve-contact-info-card,
body .ve-counter-item,
body .changeboxstyle,
body .changeboxstyle2,
body .changeboxstyle3 {
   background: var(--t-card) !important;
   border: 1px solid var(--t-border) !important;
   border-radius: var(--t-radius) !important;
   box-shadow: none;
   backdrop-filter: none;
   transition: transform 0.25s var(--t-ease), border-color 0.25s, background 0.25s;
}
body .ve-service-card:hover,
body .ve-mvv-card:hover,
body .card-box:hover,
body .ve-process-step:hover,
body .ve-testi-card:hover,
body .ve-insight-card:hover,
body .ve-contact-info-card:hover,
body .changeboxstyle:hover,
body .changeboxstyle2:hover,
body .changeboxstyle3:hover {
   transform: translateY(-3px);
   border-color: rgba(215, 254, 3, 0.3) !important;
   background: var(--t-card-hover) !important;
   box-shadow: none;
}
body .ve-service-card::before { background: var(--t-accent); }
body .ve-service-card h4,
body .ve-mvv-card h4,
body .card-box h5,
body .ve-process-step h5,
body .ve-insight-card h5,
body .ve-insight-card h4,
body .ve-contact-info-card h5 { color: #fff; font-weight: 600; }
body .ve-service-card p,
body .ve-mvv-card p,
body .card-box p,
body .card-box li,
body .ve-process-step p,
body .ve-insight-card p,
body .ve-contact-info-card p { color: var(--t-muted) !important; }
body .card-box ul li::marker { color: var(--t-accent); }
body .card-box img { border-radius: 10px; }

/* icon tiles */
body .ve-service-icon,
body .ve-mvv-icon,
body .ve-ci-icon {
   width: 52px;
   height: 52px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(215, 254, 3, 0.1);
   border: 0;
   box-shadow: none;
   color: var(--t-accent);
}
body .ve-service-icon i,
body .ve-mvv-icon i,
body .ve-ci-icon i { color: var(--t-accent); font-size: 22px; }
body .ve-mvv-icon { margin-left: auto; margin-right: auto; }

/* process steps */
body .ve-process-grid { gap: 14px; }
body .ve-process-num {
   width: 44px;
   height: 44px;
   margin: 4px auto 16px;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   background: var(--t-accent);
   color: var(--t-ink);
   font-family: var(--t-font-head);
   font-size: 16px;
   font-weight: 600;
   box-shadow: none;
}
body .ve-process-arrow { color: rgba(255, 255, 255, 0.3); padding: 0 4px; }

/* ---------- Image-backed feature section ---------- */
body .ditss-unique-section::before { background: linear-gradient(180deg, rgba(12, 10, 19, 0.93), rgba(12, 10, 19, 0.88)); }
body .ditss-left h2 { font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; }
body .ditss-left p { color: var(--t-muted); font-size: 15.5px; line-height: 1.8; }

/* ---------- CTA banner ---------- */
body .ve-cta-banner { border-top: 1px solid var(--t-border); border-bottom: 1px solid var(--t-border); }
body .ve-cta-overlay { background: linear-gradient(90deg, rgba(12, 10, 19, 0.94) 0%, rgba(12, 10, 19, 0.82) 55%, rgba(48, 22, 102, 0.75) 100%); }
body .ve-cta-content h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; line-height: 1.2; color: #fff; }
body .ve-cta-content p { color: #cfcdd8; }

/* ---------- Home page ---------- */
body .ve-hero { background: var(--t-bg); }
body .hero-main-titel { font-family: var(--t-font-head); letter-spacing: -0.02em; }
body .ve-float-card {
   background: var(--t-card) !important;
   border: 1px solid var(--t-border-2);
   backdrop-filter: none;
   box-shadow: var(--t-shadow);
}
body .ve-float-card strong { color: #fff; font-family: var(--t-font-head); }
body .ve-float-card span { color: var(--t-muted); }
body .ve-float-card i { color: var(--t-accent); }
body .ve-trust-bar { background: var(--t-bg-2); border-top: 1px solid var(--t-border); border-bottom: 1px solid var(--t-border); }
body .ve-trust-bar span { color: #cfcdd8; font-family: var(--t-font-head); font-weight: 500; }
body .ve-trust-bar i { color: var(--t-accent); }
body .ve-counter-logo { background: #fff; border-radius: 10px; padding: 10px 16px; }
body .ve-counter-grid { gap: 16px; }
body .ve-counter-item strong { font-family: var(--t-font-head); font-weight: 700; }
body .ve-counter-item p { color: var(--t-muted); font-size: 13px; letter-spacing: 0.06em; }
body .ve-testi-card > p { color: #cfcdd8; font-style: normal; }
body .ve-testi-stars { color: #fbbf24; }
body .ve-testi-author h6,
body .ve-testi-author strong { color: #fff; }
body .ve-testi-author span { color: var(--t-muted); }
body .ve-insight-card { overflow: hidden; }
body .ve-insight-body { background: transparent; }
body .ve-insight-cat { color: var(--t-accent); }
body .ve-insight-meta { color: var(--t-muted); }
body .ve-insight-body h5 a,
body .ve-insight-body h4 a { color: #fff; font-family: var(--t-font-head); font-weight: 600; }
body .ve-insight-body h5 a:hover,
body .ve-insight-body h4 a:hover { color: var(--t-accent); }
body .ve-insight-meta a { color: var(--t-accent); font-family: var(--t-font-head); font-weight: 500; }
body .ve-insight-meta a:hover { color: #fff; }

/* ---------- Contact page & forms ---------- */
body .ve-contact-form-wrap {
   background: var(--t-card);
   border: 1px solid var(--t-border);
   border-radius: var(--t-radius);
   box-shadow: none;
}
body .ve-contact-form-wrap h2,
body .ve-contact-form-wrap h3 { color: #fff; }
body .ve-form-group label { color: #e5e3ec; font-family: var(--t-font-head); font-weight: 500; }
body .ve-form-group input,
body .ve-form-group select,
body .ve-form-group textarea,
body .da-field input[type="text"],
body .da-field input[type="tel"],
body .da-field input[type="email"],
body .da-field select,
body .da-field textarea {
   background: #0f0d17 !important;
   border: 1px solid var(--t-border-2) !important;
   color: #fff !important;
   border-radius: var(--t-radius-sm) !important;
}
body .ve-form-group select option,
body .da-field select option,
body .da-field select optgroup { background: #15131f; color: #fff; }
body .ve-form-group input::placeholder,
body .ve-form-group textarea::placeholder,
body .da-field textarea::placeholder { color: #7d7a8a; }
body .ve-form-group input:focus,
body .ve-form-group select:focus,
body .ve-form-group textarea:focus,
body .da-field input:focus,
body .da-field select:focus,
body .da-field textarea:focus {
   outline: none;
   border-color: var(--t-accent) !important;
   box-shadow: 0 0 0 3px rgba(215, 254, 3, 0.12) !important;
}
body .ve-contact-sent h4 { color: #fff; }
body .ve-contact-sent > i { color: var(--t-accent); }

/* ---------- Blog page ---------- */
body .db { background: var(--t-bg); }
body .db-filter {
   background: transparent;
   border: 1px solid var(--t-border-2);
   color: var(--t-text);
   border-radius: var(--t-radius-sm);
   font-family: var(--t-font-head);
   font-weight: 500;
}
body .db-filter:hover { border-color: var(--t-accent); color: var(--t-accent); }
body .db-filter.is-active { background: var(--t-accent); color: var(--t-ink); border-color: var(--t-accent); }
body .db-card,
body .db-article { background: var(--t-card); border: 1px solid var(--t-border); box-shadow: none; border-radius: var(--t-radius); }
body .db-card:hover { border-color: rgba(215, 254, 3, 0.3); box-shadow: none; }
body .db-card-body h3,
body .db-article h2 { color: #fff; font-weight: 600; }
body .db-article h4 { color: #fff; font-weight: 600; }
body .db-card-body p,
body .db-article p,
body .db-article li { color: var(--t-muted); }
body .db-article strong { color: #fff; }
body .db-meta { color: #7d7a8a; }
body .db-article a:not(.db-back):not(.db-callout-btn) { color: var(--t-accent); }
body .db-article code { background: rgba(255, 255, 255, 0.07); color: #fff; }
body .db-callout { background: var(--t-bg-3); border: 1px solid var(--t-border-2); }
body .db-back { color: var(--t-accent); }

/* ---------- Admission page ---------- */
body .da { background: var(--t-bg); }
body .da-side { background: var(--t-bg-3); border: 1px solid var(--t-border); }
body .da-card { background: var(--t-card); border: 1px solid var(--t-border); box-shadow: none; }
body .da-field label,
body .da-label { color: #e5e3ec; font-family: var(--t-font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; }
body .da-radios label { color: var(--t-text); font-family: var(--t-font-body); font-size: 15px; letter-spacing: 0; }
body .da-radios input { accent-color: var(--t-accent); }
body .da-success h3 { color: #fff; }
body .da-success > i { color: var(--t-accent); }

/* ---------- OSINT field manual: same layout, dark palette ---------- */
body .om {
   --ink: #ecebf2;
   --ink-soft: #b5b3c2;
   --ink-faint: #8b889a;
   --paper: var(--t-bg);
   --paper-raised: #15131f;
   --paper-card: #12101b;
   --line: rgba(255, 255, 255, 0.08);
   --line-strong: rgba(255, 255, 255, 0.18);
   --accent: #d7fe03;
   --accent-soft: rgba(215, 254, 3, 0.1);
   --tag: #7dd3fc;
   --tag-soft: rgba(125, 211, 252, 0.12);
   --code-bg: rgba(255, 255, 255, 0.07);
}
body .om h2,
body .om h3 { color: #fff; }

/* ---------- Footer ---------- */
body .ve-footer { background: #0a0911; border-top: 1px solid var(--t-border); }
body .ve-footer-title {
   color: #fff;
   font-family: var(--t-font-head);
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
}
body .ve-footer-links a,
body .ve-footer-contact li { color: var(--t-muted); }
body .ve-footer-links a:hover { color: var(--t-accent); }
body .ve-footer-contact li i { color: var(--t-accent); }
body .ve-social a { background: rgba(255, 255, 255, 0.06); border: 0; color: #fff; transition: background 0.2s, color 0.2s; }
body .ve-social a:hover { background: var(--t-accent); color: var(--t-ink); }
body .ve-footer-bottom { border-top: 1px solid var(--t-border); }
body .ve-footer-bottom p,
body .ve-footer-bottom a { color: var(--t-muted); }
body .ve-footer-bottom a:hover { color: var(--t-accent); }

/* ---------- Team slider ---------- */
body .ve-team-card { background: var(--t-card); border: 1px solid var(--t-border); border-radius: var(--t-radius); box-shadow: none; }
body .ve-team-card:hover { border-color: rgba(215, 254, 3, 0.3); box-shadow: none; }
body .ve-team-info h5 { color: #fff; }

/* ---------- Scroll reveal (set up by src/components/Reveal.jsx) ---------- */
html.reveal-ready .wow:not(.is-in) { opacity: 0; transform: translateY(14px); }
html.reveal-ready .wow { transition: opacity 0.6s ease, transform 0.6s ease; }
html.reveal-ready .wow.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
   html.reveal-ready .wow:not(.is-in) { opacity: 1; transform: none; }
   html { scroll-behavior: auto; }
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
   body .ve-page-hero h1 { font-size: 28px; }
   body .ve-process-arrow { display: none; }
}