/* ===================================
   GOOGLE FONT
=================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');

/* ===================================
   RESET
=================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scrollbar-gutter: stable;
}
body{
    font-family:'Inter', sans-serif;
    color:#222;
    background:#fff;
    overflow-x:hidden;
    /* FIX 1: Pushes content downward so the fixed navbar doesn't cover top headings */
    padding-top: 82px; 
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

/* ===================================
   CONTAINER
=================================== */
.container{
    width:min(1200px, 90%);
    margin:auto;
}

/* ===================================
   NAVBAR
=================================== */
.navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:82px;
    background:#fff;
    display:grid;
    grid-template-columns:180px 1fr auto;
    align-items:center;
    padding:0 50px;
    border-bottom:1px solid #ededed;
    z-index:999;
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, height 0.3s ease;
}

/* Morph transition properties applied when user scrolls down */
.navbar.scrolled{
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 0 4%; 
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    height: 70px; 
}

/* Logo */
.logo img {
    height: 45px; 
    width: auto;
    transition: height 0.3s ease;
}

.navbar.scrolled .logo img {
    height: 38px; /* Slightly shrinks logo along with bar compression */
}

/* Navigation */
.nav-links{
    display:flex;
    justify-content:center;
    gap:42px;
}

.nav-links > a{
    color:#222;
    font-size:16px;
    font-weight:500;
    position:relative;
    transition:.3s;
}

.nav-links > a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:#0587ca;
    transition:.3s;
}

.nav-links > a:hover{
    color:#0587ca;
}

.nav-links > a:hover::after{
    width:100%;
}

/* ===================================
   INDUSTRIES DROPDOWN (desktop mega-menu)
=================================== */
.nav-item--dropdown{
    position:relative;
    display:inline-block;
}

.nav-item--dropdown > button{
    display:flex;
    align-items:center;
    gap:6px;
    background:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-size:16px;
    font-weight:500;
    color:#222;
    padding:0;
    transition:.3s;
}

.nav-item--dropdown > button:hover{
    color:#0587ca;
}

.nav-item--dropdown > button .chevron{
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform .2s ease;
    margin-top:-2px;
    display:inline-block;
}

.nav-item--dropdown.open > button .chevron{
    transform:rotate(225deg);
    margin-top:2px;
}

.mega-menu{
    position:absolute;
    top:calc(100% + 26px); /* clears the 82px navbar height + a gap */
    left:50%;
    transform:translateX(-50%);
    display:none;
    width:680px;
    background:#fff;
    border-radius:12px;
    border:1px solid #ededed;
    box-shadow:0 20px 50px rgba(15, 23, 42, 0.08);
    overflow:hidden;
    z-index:998; /* sits just under .navbar's z-index: 999 */
    transition:top 0.3s ease; /* keeps pace with .navbar.scrolled shrinking */
}

.navbar.scrolled .mega-menu{
    top:calc(100% + 18px); /* matches the shrunk 70px navbar */
}

.nav-item--dropdown.open .mega-menu{
    display:flex;
}

.mega-menu__intro{
    flex:0 0 220px;
    background:linear-gradient(160deg, #132338 0%, #0c1a29 100%);
    color:#fff;
    padding:32px 28px;
}

.mega-menu__intro h4{
    font-family:'Poppins', sans-serif;
    font-size:18px;
    margin-bottom:10px;
    color:#fff;
}

.mega-menu__intro p{
    font-size:14px;
    line-height:1.6;
    color:rgba(255,255,255,.75);
}

.mega-menu__links{
    flex:1;
    padding:28px 32px;
}

.mega-menu__links .eyebrow{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:#132338;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:18px;
}

.mega-menu__links .eyebrow::before{
    content:"";
    width:8px;
    height:8px;
    background:#0587ca;
    display:inline-block;
    border-radius:50%;
}

.mega-menu__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 32px;
}

.mega-menu__grid a{
    color:#1a1a1a;
    text-decoration:none;
    font-size:15px;
    transition:color .15s ease;
}

.mega-menu__grid a:hover{
    color:#0587ca;
}

/* Rich icon + description items (Services / Industries) */
.mega-menu__grid--single{
    grid-template-columns:1fr;
}

.mega-menu__item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:10px;
    margin:-10px;
    border-radius:10px;
    transition:background .18s ease;
}

.mega-menu__item:hover{
    background:#f4f9fd;
}

.mega-menu__item-icon{
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#e3f2fa;
    color:#0587ca;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}

.mega-menu__item:hover .mega-menu__item-icon{
    background:#0587ca;
    color:#fff;
    transform:scale(1.06);
}

.mega-menu__item-text{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.mega-menu__item-text strong{
    font-family:'Inter', sans-serif;
    font-size:14.5px;
    font-weight:600;
    color:#1a1a1a;
    transition:color .15s ease;
}

.mega-menu__item:hover .mega-menu__item-text strong{
    color:#0587ca;
}

.mega-menu__item-text span{
    font-size:12.5px;
    color:#7a828e;
    line-height:1.4;
}

@media (max-width: 900px){
    .mega-menu{ width:600px; }
}

/* ===================================
   MOBILE ACCORDION (Industries, inside .mobile-menu)
=================================== */
.mobile-accordion{
    border-bottom:1px solid #f8fafc;
}

.mobile-accordion__toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-size:18px;
    font-weight:500;
    color:#222;
    padding:8px 0;
    text-align:left;
    transition:color .2s;
}

.mobile-accordion__toggle:hover{
    color:#0587ca;
}

.mobile-accordion__toggle .chevron{
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform .2s ease;
    margin-top:-2px;
    display:inline-block;
    flex-shrink:0;
}

.mobile-accordion.open .mobile-accordion__toggle .chevron{
    transform:rotate(225deg);
    margin-top:2px;
}

.mobile-accordion__panel{
    max-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:max-height .25s ease;
}

.mobile-accordion__panel a{
    padding:10px 0 10px 16px !important;
    font-size:15px !important;
    border-bottom:none !important;
    border-left:2px solid #0587ca;
    margin-left:2px;
    color:#555;
    display:flex;
    align-items:center;
    gap:10px;
}

.mobile-accordion__panel a i{
    width:16px;
    text-align:center;
    color:#0587ca;
    font-size:14px;
}

/* ===================================
   PRODUCTS MEGA MENU (featured project card)
=================================== */
.mega-menu--product{
    width:760px;
}

.mega-menu--product .mega-menu__intro{
    display:flex;
    flex-direction:column;
}

.mega-menu__viewall{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#fff;
    font-size:13.5px;
    font-weight:600;
    text-decoration:none;
    padding-top:18px;
    transition:gap .2s ease, opacity .2s ease;
    opacity:.9;
}

.mega-menu__viewall:hover{
    gap:10px;
    opacity:1;
}

.mega-menu__viewall span{
    transition:transform .2s ease;
}

.mega-menu__viewall:hover span{
    transform:translateX(2px);
}

.mega-menu--product .mega-menu__links{
    flex:0 0 240px;
    border-right:1px solid #f0f0f0;
}

.mega-menu__featured{
    flex:0 0 260px;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    padding:20px;
}

.mega-menu__featured-eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#0587ca;
    margin-bottom:10px;
}

.mega-menu__featured-img{
    width:100%;
    height:110px;
    object-fit:cover;
    object-position:top;
    border-radius:10px;
    background:#f2f6fa;
    transition:transform .3s ease;
}

.mega-menu__featured:hover .mega-menu__featured-img{
    transform:scale(1.03);
}

.mega-menu__featured-body{
    padding-top:12px;
}

.mega-menu__featured-body h5{
    font-family:'Poppins', sans-serif;
    font-size:14.5px;
    color:#132338;
    margin:0 0 8px;
    line-height:1.4;
    transition:color .15s ease;
}

.mega-menu__featured:hover .mega-menu__featured-body h5{
    color:#0587ca;
}

.mega-menu__featured-badge{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    color:#046ba3;
    background:#e3f2fa;
    padding:4px 10px;
    border-radius:20px;
}

@media (max-width: 900px){
    .mega-menu--product{ width:640px; }
    .mega-menu__featured{ display:none; }
}

/* Right Side */
.nav-right{
    display:flex;
    align-items:center;
    gap:18px;
}

/* Sign In */
.signin{
    color:#222;
    font-weight:600;
    transition:.3s;
}

.signin:hover{
    color:#0587ca;
}

/* Sign Up */
.signup{
    border:2px solid #0587ca;
    color:#0587ca;
    padding:10px 22px;
    border-radius:7px;
    font-weight:600;
    transition:.3s;
}

.signup:hover{
    background:#0587ca;
    color:#fff;
}

/* Mobile Button */
.menu-btn{
    display:none; /* Hidden on desktop screens */
    background:none;
    border:none;
    cursor:pointer;
    font-size:26px;
    color:#222;
    padding:5px;
    z-index: 1000; /* FIX 2: Ensures the button stays clickable on top of any layered elements */
}

.menu-btn i{
    pointer-events:none;
}

/* ===================================
   MOBILE MENU
=================================== */
.mobile-menu{
    position:fixed;
    top:82px; 
    left:0;
    right:0;
    background:#fff;
    display:none;
    flex-direction:column;
    border-bottom:1px solid #eee;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
    transform:translateY(-10px);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease, top 0.3s ease;
    z-index: 998;
    max-height: calc(100vh - 82px);
    max-height: calc(100dvh - 82px);
}

.mobile-menu.active{
    display: flex !important;
    transform:translateY(0);
    opacity: 1;
}

.mobile-menu-links{
    overflow-y: auto;
     min-height: 0;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:30px 50px 12px;
}

.mobile-menu a{
    color:#222;
    font-size:18px;
    font-weight:500;
    padding:8px 0;
    border-bottom: 1px solid #f8fafc;
    transition: color 0.2s;
}

.mobile-menu a:hover{
    color:#0587ca;
}

.mobile-signup{
    background: #0587ca;
    color: #fff;
    text-align:center;
    padding:14px;
    border-radius:8px;
    font-weight:700;
    font-size: 16px;
    letter-spacing: 0.3px;
    margin: 16px 24px calc(24px + env(safe-area-inset-bottom));
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgb(248, 244, 244);
    transition: all 0.2s;
}

.mobile-signup:hover,
.mobile-signup:active {
    background: #046ba3;
    box-shadow: 0 2px 8px rgba(5, 135, 202, 0.4);
}

/* ===================================
   HERO
=================================== */
.hero{
    min-height:88vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:80px 20px;
    background: radial-gradient(circle at top,#f7f7f7 0%,#ffffff 70%);
}

.hero-content{
    max-width:900px;
}

.hero h1{
    font-family:'Poppins',sans-serif;
    font-size:clamp(2.8rem,6vw,4.7rem);
    line-height:1.1;
    margin-bottom:25px;
}

.hero p{
    max-width:700px;
    margin:auto;
    font-size:1.2rem;
    color:#666;
    margin-bottom:40px;
}

.hero-btn{
    display:inline-block;
    padding:16px 40px;
    background:#0587ca;
    color:#fff;
    border-radius:8px;
    font-weight:600;
    transition:.3s;
}

.hero-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(5, 135, 202,.25);
}

/* ===================================
   PRODUCTS
=================================== */
.products{
    padding:100px 8%;
}

.products h2{
    text-align:center;
    font-size:2.7rem;
    margin-bottom:60px;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.card{
    background:#fff;
    padding:35px;
    border-radius:15px;
    border:1px solid #ececec;
    transition:.35s;
    text-align:center;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.icon{
    width:70px;
    height:70px;
    background:#e3f2fa;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto auto 25px;
    color:#0587ca;
    font-size:30px;
}

.card h3{
    margin-bottom:15px;
    font-size:24px;
}

.card p{
    color:#666;
    line-height:1.8;
}

/* ===================================
   ABOUT US ENGINE
=================================== */
.container-m {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
.text-center { text-align: center; }

.about-hero {
    padding: 100px 0 60px 0;
    text-align: center;
    background-color: #fafafa;
}
.about-hero .badge {
    background: #e1f5fe;
    color: #0288d1;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: 1px;
}
.about-hero h1 {
    font-size: 42px;
    color: #111;
    max-width: 800px;
    margin: 20px auto;
    line-height: 1.3;
}
.about-hero .subtitle {
    font-size: 18px;
    color: #555;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

.stats-section {
    padding: 50px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    text-align: center;
}
.stat-card h2 {
    font-size: 48px;
    color: #0066cc;
    margin-bottom: 5px;
}
.stat-card p {
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.values-section { padding: 80px 0; background: #fff; }
.section-title { margin-bottom: 60px; }
.section-title h2 { font-size: 32px; color: #111; margin-bottom: 10px;}
.section-title p { color: #666; font-size: 16px; }

.value-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}
.value-row.reverse { flex-direction: row-reverse; }
.value-text { flex: 1; }
.value-text h3 { font-size: 26px; color: #111; margin-bottom: 15px; }
.value-text p { color: #444; line-height: 1.7; font-size: 16px; }

.value-visual {
    flex: 1;
    background: #fdfdfd;
    padding: 50px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.border-decor { border-top: 4px solid #00c853; }
.border-decor.variant-color { border-top: 4px solid #ff6d00; }
.value-visual h4 { font-size: 22px; margin-bottom: 10px; color: #111; }
.value-visual p { color: #666; font-size: 14px; }

.value-row .value-text {
    opacity: 0;
    transform: translateX(-50px); 
    transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.value-row .value-visual {
    opacity: 0;
    transform: translateX(50px); 
    transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.value-row.reverse .value-text { transform: translateX(50px); }
.value-row.reverse .value-visual { transform: translateX(-50px); }

.value-row.revealed .value-text,
.value-row.revealed .value-visual {
    opacity: 1;
    transform: translateX(0);
}

.stats-grid .stat-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.stats-grid.revealed .stat-card {
    opacity: 1;
    transform: translateY(0);
}
.stats-grid.revealed .stat-card:nth-child(1) { transition-delay: 0.1s; }
.stats-grid.revealed .stat-card:nth-child(2) { transition-delay: 0.2s; }
.stats-grid.revealed .stat-card:nth-child(3) { transition-delay: 0.3s; }
.stats-grid.revealed .stat-card:nth-child(4) { transition-delay: 0.4s; }

/* ===================================
   NOTE: The old "About Us" styles that used to live here have been
   removed — that page is now fully styled by
   /public/css/about-animations.css (linked from views/about.ejs).
   Keeping both was causing conflicting rules (different font sizes,
   paddings, and container widths) on the About page.
=================================== */

/* ===================================
   FOOTER
=================================== */
.footer {
    background: #132338;
    font-family: 'Inter', sans-serif;
}

.footer-inner {
    width: min(1200px, 90%);
    margin: auto;
    padding: 56px 0 0;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-logo-wrap {
    margin-bottom: 20px;
}

.footer-logo {
    width: 80px;
}

.footer-tagline {
    font-size: 14.5px;
    line-height: 1.8;
    color: #ffffff;
    margin-bottom: 24px;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14.5px;
    color: #ffffff;
}

.footer-contact li i {
    color: #4dc9a0;
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-col-heading {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
    margin-bottom: 18px;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 11px;
}

.footer-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14.5px;
    transition: color 0.18s;
}

.footer-nav a::before {
    content: '';
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.18s;
}

.footer-nav a:hover {
    color: #4dc9a0;
}

.footer-nav a:hover::before {
    background: #4dc9a0;
}

.footer-cert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-cert {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.4px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 0;
}

.footer-bottom p {
    font-size: 14px;
    color: #ffffff;
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

.footer-legal a {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.18s;
}

.footer-legal a:hover {
    color: #4dc9a0;
}

/* ===================================
   UNIFIED RESPONSIVE MEDIA SYSTEM
=================================== */

/* Tablet & Smaller Media Displays */
@media (max-width: 1200px) {
    body {
        padding-top: 75px; 
    }

    .navbar {
        grid-template-columns: 1fr auto; 
        padding: 0 24px;
        height: 75px;
    }
    
    .navbar.scrolled {
        height: 70px;
    }

    .navbar.scrolled + .mobile-menu {
        top: 70px; 
    }

    .nav-links, 
    .nav-right .signin, 
    .nav-right .signup {
        display: none !important; 
    }

    /* .nav-item--dropdown lives inside .nav-links, so it's already
       hidden by the rule above — this is just an explicit safety net. */
    .mega-menu {
        display: none !important;
    }

    .menu-btn {
        display: flex !important; /* Forces the hamburger button to override display:none */
        align-items: center;
        justify-content: center;
    }

    .mobile-menu {
        top: 75px;
        max-height: calc(100vh - 75px);
        max-height: calc(100dvh - 75px);
    }

    .mobile-menu-links {
        padding: 24px 24px 12px;
    }

  .mobile-signup {
        margin: 16px 24px calc(24px + env(safe-area-inset-bottom));
    }

    .logo img {
        height: 38px;
    }

    /* Sections */
    .hero {
        min-height: 80vh;
        padding: 60px 20px;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .products {
        padding: 70px 20px;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

/* Small Phones Viewports */
@media (max-width: 560px) {
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .hero-btn {
        width: 100%;
        max-width: 260px;
    }

    .card {
        padding: 25px;
    }

    .products h2 {
        font-size: 2rem;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 12px;
    }
}


/* ===================================
   LEGAL PAGES (Privacy / Terms / Cookies)
=================================== */

.legal-hero {
    padding: 130px 0 60px;
    text-align: center;
    background: linear-gradient(160deg, #132338 0%, #1c3a5e 100%);
    color: #fff;
}

.legal-hero .legal-badge {
    display: inline-block;
    background: rgba(5, 135, 202, 0.15);
    border: 1px solid rgba(5, 135, 202, 0.4);
    color: #5ec2f0;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    border-radius: 20px;
    margin-bottom: 18px;
}

.legal-hero h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.6rem;
    margin-bottom: 10px;
}

.legal-hero .legal-effective-date {
    color: rgba(255,255,255,0.65);
    font-size: 14px;
}

.legal-page {
    padding: 60px 0 100px;
}

.legal-page .container-m {
    max-width: 880px;
}

.legal-page .legal-intro {
    font-size: 17px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 10px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.legal-page h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    color: #111;
    margin-top: 44px;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 4px solid #0587ca;
}

.legal-page p {
    color: #444;
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-page ul {
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
}

.legal-page ul li {
    position: relative;
    padding: 6px 0 6px 28px;
    color: #444;
    line-height: 1.7;
}

.legal-page ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0587ca;
}

.legal-page ul li strong {
    color: #111;
}

.legal-page .legal-contact {
    background: #132338;
    border-radius: 14px;
    padding: 30px 34px;
    margin-top: 16px;
    box-shadow: 0 12px 30px rgba(19, 35, 56, 0.15);
}

.legal-page .legal-contact li {
    color: #e8edf3;
    padding-left: 28px;
}

.legal-page .legal-contact li::before {
    background: #4dc9a0;
}

.legal-page .legal-contact li strong {
    color: #fff;
}

@media (max-width: 1200px) {
    .legal-hero {
        padding: 95px 20px 45px;
    }
    .legal-hero h1 {
        font-size: 1.9rem;
    }
    .legal-page {
        padding: 45px 20px 70px;
    }
    .legal-page .legal-contact {
        padding: 24px 22px;
    }
}