/* Compiled Website CSS */

/* --- Global Styles --- */

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        

        html { scroll-behavior: smooth; }
        body {
            font-family: 'Inter', sans-serif;
            color: var(--text);
            background: var(--white);
            -webkit-font-smoothing: antialiased;
            display: flex; flex-direction: column; min-height: 100vh;
        }
        [x-cloak] { display: none !important; }

        /* ── CONTAINER ── */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; }
        /* Tüm section içeriklerini aynı hizaya çek */
        .page-section { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

        /* ── BUTTONS ── */
        .btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; font-size:14px; font-weight:600; border-radius:var(--radius); text-decoration:none; transition:all .22s ease; cursor:pointer; border:none; white-space:nowrap; }
        .btn-primary { background:var(--accent); color:#fff; }
        .btn-primary:hover { background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
        .btn-outline { background:transparent; color:var(--text-mid); border:1.5px solid var(--border); }
        .btn-outline:hover { border-color:var(--accent); color:var(--accent); }
        .btn-white { background:#fff; color:var(--accent); }
        .btn-white:hover { background:var(--bg-light); transform:translateY(-1px); }
        .btn-ghost-white { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.25); }
        .btn-ghost-white:hover { background:rgba(255,255,255,.22); }
        .btn-sm { padding:8px 16px; font-size:13px; }
        .btn-lg { padding:14px 30px; font-size:16px; }

        /* ── BADGE ── */
        .badge { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:40px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
        .badge-accent { background:var(--accent-light); color:var(--accent); }

        /* ── SECTION ── */
        .section { padding: 96px 0; }
        .section-sm { padding: 64px 0; }
        .section-title { text-align:center; margin-bottom:64px; }
        .section-title .badge { margin-bottom:14px; }
        .section-title h2 { font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; line-height:1.2; margin-bottom:14px; }
        .section-title p { max-width:540px; margin:0 auto; font-size:16px; color:var(--text-soft); line-height:1.7; }
        .divider { width:44px; height:3px; background:var(--accent); border-radius:2px; margin:14px auto 0; }
        .divider-left { margin:14px 0 0; }

        /* ── PAGE HERO (inner pages) ── */
        .page-hero {
            position: relative;
            background: linear-gradient(135deg, #f0f4ff 0%, #fdf4f2 55%, #f5f0ff 100%);
            padding: 52px 0 36px;
            overflow: hidden;
        }
        /* Particle canvas */
        .hero-particles {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }
        /* Animated background blobs */
        .page-hero::before,
        .page-hero::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: .35;
            animation: heroBlob 8s ease-in-out infinite alternate;
        }
        .page-hero::before {
            width: 320px; height: 320px;
            background: var(--accent-light);
            top: -80px; right: 8%;
        }
        .page-hero::after {
            width: 220px; height: 220px;
            background: #dde8ff;
            bottom: -60px; left: 5%;
            animation-delay: -3s;
        }
        @keyframes heroBlob {
            0%   { transform: scale(1)   translate(0,0); }
            100% { transform: scale(1.2) translate(20px,-15px); }
        }

        /* Subtle dot grid overlay */
        .page-hero .container {
            position: relative;
            z-index: 2;
        }

        .page-hero h1 {
            font-size: clamp(1.5rem, 3.5vw, 2.2rem);
            font-weight: 800;
            color: var(--text);
            margin-bottom: 8px;
            animation: heroSlideUp .5s .1s both ease-out;
        }
        /* Auto accent bar above every page-hero h1 */
        .page-hero h1::before {
            content: '';
            display: block;
            width: 36px; height: 3px;
            background: var(--accent);
            border-radius: 2px;
            margin-bottom: 12px;
            animation: heroBarGrow .5s both ease-out;
            transform-origin: left;
        }
        .page-hero p {
            font-size: 15px;
            color: var(--text-soft);
            animation: heroSlideUp .5s .2s both ease-out;
        }
        .page-hero .breadcrumb-nav {
            display: flex; align-items: center; gap: 8px;
            font-size: 12.5px; color: var(--text-xsoft);
            margin-bottom: 16px;
            animation: heroSlideUp .45s both ease-out;
        }
        .page-hero .breadcrumb-nav a {
            color: var(--text-soft);
            text-decoration: none;
            transition: color .15s;
        }
        .page-hero .breadcrumb-nav a:hover { color: var(--accent); }
        .page-hero .breadcrumb-nav .sep { font-size: 10px; color: var(--text-xsoft); }


        @keyframes heroSlideUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes heroBarGrow {
            from { transform: scaleX(0); opacity: 0; }
            to   { transform: scaleX(1); opacity: 1; }
        }

        /* ── CARD ── */
        .card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-sm); transition:all .25s ease; }
        .card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }

        /* ── SCROLL ANIMATE ── */
        .sa { opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
        .sa.visible { opacity:1; transform:translateY(0); }

        /* ══════════════════════
           TOP BAR
        ══════════════════════ */
        #top-bar {
            background: #f8f8f8;
            border-bottom: 1px solid #e8e8e8;
            font-size: 12.5px;
            color: #555;
            height: 36px;
            display: flex;
            align-items: center;
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1001;
            overflow: hidden;
        }
        #top-bar .tb-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 16px;
        }
        #top-bar .tb-left  { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
        #top-bar .tb-right { display:flex; align-items:center; gap:16px; flex-shrink:0; }
        #top-bar a {
            color: #444;
            text-decoration: none;
            font-weight: 600;
            transition: color .15s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        #top-bar a:hover { color: var(--accent); }
        #top-bar .tb-accent { color: var(--accent); }
        #top-bar .tb-sep { color: #ccc; }
        #top-bar .tb-region { font-size:11px; font-weight:400; color:#888; margin-left:2px; }
        @media(max-width:768px) { #top-bar { display:none; } }

        /* ══════════════════════
           HEADER
        ══════════════════════ */
        #site-header {
            position:fixed; top:36px; left:0; right:0; z-index:1000;
            height:65px; display:flex; align-items:center;
            background:#fff; border-bottom:1px solid var(--border);
            transition:box-shadow .3s ease, top .3s ease;
        }
        #site-header.scrolled { box-shadow:0 2px 16px rgba(0,0,0,.08); top:0; }
        body.tb-hidden #site-header { top:0; }

        .nav-inner { display:flex; align-items:center; justify-content:space-between; width:100%; height:100%; }

        .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; height:100%; }
        .nav-logo-icon { width:36px; height:36px; background:var(--accent); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
        .nav-logo-name { font-size:16px; font-weight:800; color:var(--text); letter-spacing:-.01em; display:block; }
        .nav-logo-sub  { font-size:10px; font-weight:600; color:var(--text-xsoft); text-transform:uppercase; letter-spacing:.08em; display:block; }

        .nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
        .nav-links a { display:block; padding:8px 13px; font-size:13.5px; font-weight:500; color:var(--text-mid); text-decoration:none; border-radius:6px; transition:all .18s; }
        .nav-links a:hover, .nav-links a.active { color:var(--accent); background:var(--accent-light); }

        .nav-actions { display:flex; align-items:center; gap:10px; }

        .nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; }
        .nav-burger span { display:block; width:22px; height:2px; background:var(--text-mid); border-radius:2px; transition:all .3s; }

        .nav-mobile { display:none; position:fixed; top:101px; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); padding:12px 20px 20px; z-index:999; }
        .nav-mobile.open { display:block; }
        .nav-mobile a { display:block; padding:10px 14px; font-size:14.5px; font-weight:500; color:var(--text-mid); text-decoration:none; border-radius:var(--radius); transition:.15s; }
        .nav-mobile a:hover { background:var(--bg-light); color:var(--accent); }
        .nav-mobile .btn { width:100%; justify-content:center; margin-top:10px; }

        main { flex:1; padding-top:101px; }
        @media(max-width:768px) { main { padding-top:65px; } }

        /* ══════════════════════
           FOOTER
        ══════════════════════ */
        #site-footer { background:var(--navy); color:rgba(255,255,255,.6); }
        .footer-top { padding:64px 0 48px; border-bottom:1px solid rgba(255,255,255,.07); }
        .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:48px; }

        .footer-logo { display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:14px; }
        .footer-logo-icon { width:36px; height:36px; background:var(--accent); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
        .footer-logo-name { font-size:16px; font-weight:800; color:#fff; display:block; }
        .footer-logo-sub  { font-size:10px; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.08em; display:block; }

        .footer-desc { font-size:13.5px; color:rgba(255,255,255,.4); line-height:1.75; max-width:260px; margin-bottom:20px; }

        .footer-col-title { font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.07em; margin-bottom:16px; }
        .footer-links { list-style:none; display:flex; flex-direction:column; gap:9px; }
        .footer-links a { font-size:13.5px; color:rgba(255,255,255,.45); text-decoration:none; transition:.15s; }
        .footer-links a:hover { color:#fff; }

        .footer-contact-item { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:rgba(255,255,255,.45); margin-bottom:10px; }
        .footer-contact-item i, .footer-contact-item svg { width:14px; height:14px; flex-shrink:0; color:var(--accent); margin-top:2px; }
        .footer-contact-item a { color:rgba(255,255,255,.45); text-decoration:none; transition:.15s; }
        .footer-contact-item a:hover { color:#fff; }

        .social-links { display:flex; gap:8px; }
        .social-link { width:32px; height:32px; border-radius:6px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); transition:.2s; text-decoration:none; }
        .social-link:hover { background:var(--accent); color:#fff; }

        .footer-bottom { padding:20px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
        .footer-bottom p { font-size:12.5px; color:rgba(255,255,255,.3); }
        .footer-bottom a { font-size:12.5px; color:rgba(255,255,255,.3); text-decoration:none; transition:.15s; }
        .footer-bottom a:hover { color:rgba(255,255,255,.7); }

        /* ── RESPONSIVE ── */
        @media (max-width:1024px) { .footer-grid { grid-template-columns:1fr 1fr; gap:36px; } }
        @media (max-width:768px) {
            .nav-links, .nav-actions .btn-outline { display:none; }
            .nav-burger { display:flex; }
            .section { padding:64px 0; }
            .footer-grid { grid-template-columns:1fr; gap:28px; }
            .footer-desc { max-width:100%; }
        }
        @media (max-width:480px) { .container { padding:0 16px; } }
    

/* ══════ FLOATING ACTION BUTTONS ══════ */
.fab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px 0 0;
    height: 50px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.22);
    transition: transform .22s ease, box-shadow .22s ease, max-width .35s ease;
    overflow: hidden;
    max-width: 50px;
    white-space: nowrap;
    cursor: pointer;
}
.fab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    max-width: 220px;
}
.fab-btn .fab-icon {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fab-call { background: linear-gradient(135deg,#D13B2A,#e84a37); }
.fab-call .fab-icon { background: rgba(0,0,0,.15); }
.fab-wa   { background: linear-gradient(135deg,#25D366,#1da851); }
.fab-wa   .fab-icon { background: rgba(0,0,0,.12); }

/* Pulse ring on WhatsApp */
.fab-pulse-wrap { position:relative; }
.fab-pulse-wrap::before {
    content:'';
    position:absolute;
    inset:-5px;
    border-radius:50px;
    background: rgba(37,211,102,.35);
    animation: fabPulse 2.2s ease-out infinite;
}
@keyframes fabPulse {
    0%   { transform:scale(1);   opacity:.8; }
    70%  { transform:scale(1.35);opacity:0; }
    100% { transform:scale(1.35);opacity:0; }
}

/* Entrance animation */
#fab-wrap { animation: fabSlideIn .5s .3s both ease-out; }
@keyframes fabSlideIn {
    from { opacity:0; transform:translateX(-30px); }
    to   { opacity:1; transform:translateX(0); }
}

@media(max-width:480px){
    #fab-wrap { bottom:18px; left:14px; }
    .fab-btn { height:46px; font-size:12.5px; }
    .fab-btn .fab-icon { width:46px; height:46px; }
}


/* --- Home Page Styles --- */

/* ══════ HERO ══════ */
.hero {
    background: #fff;
    padding: 80px 0 0px;
    position: relative;
    overflow: hidden;
}
/* Subtle decorative blobs */
.hero::before {
    content: '';
    position: absolute;
    right: -120px; top: -100px;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(209,59,42,.07) 0%, transparent 65%);
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    left: -80px; bottom: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(59,130,246,.05) 0%, transparent 65%);
    pointer-events: none;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(209,59,42,.09);
    color: var(--accent);
    padding: 5px 14px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 24px;
    border: 1px solid rgba(209,59,42,.15);
}
.hero-eyebrow::before {
    content: '';
    display: block;
    width: 7px; height: 7px;
    background: var(--accent);
    border-radius: 50%;
}
.hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin-bottom: 20px;
}
.hero h1 span { color: var(--accent); }
.hero-desc {
    font-size: 17px;
    color: var(--text-soft);
    max-width: 480px;
    margin-bottom: 36px;
    line-height: 1.75;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-soft);
}
.hero-trust-item svg { color: var(--accent); flex-shrink: 0; }


.hero-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.hero-widget-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.status-dot {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #059669; font-weight: 600;
}
.status-dot::before {
    content: '';
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.18);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
    50%       { box-shadow: 0 0 0 6px rgba(16,185,129,.06); }
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.stat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: all .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.stat-card:hover {
    border-color: rgba(209,59,42,.25);
    box-shadow: 0 4px 16px rgba(209,59,42,.08);
    transform: translateY(-2px);
}
.stat-num {
    font-size: 2rem; font-weight: 800;
    color: var(--text); line-height: 1; margin-bottom: 6px;
}
.stat-label {
    font-size: 12px; font-weight: 600;
    color: var(--text-xsoft);
    text-transform: uppercase; letter-spacing: .05em;
}
.stat-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}

/* ══════ SERVICES ══════ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.service-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.service-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: #E0E0E0;
}
.service-card:hover::before { transform: scaleX(1); }
.service-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.service-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.service-card p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-soft);
}
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: gap .2s ease;
}
.service-link:hover { gap: 8px; }

/* ══════ BRANDS ══════ */
.brands-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.brand-pill {
    padding: 12px 28px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-soft);
    background: var(--white);
    transition: all .22s ease;
    letter-spacing: -.01em;
}
.brand-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

/* ══════ STATS BAND ══════ */
.stats-band {
    background: var(--accent);
    padding: 72px 0;
}
.stats-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border-radius: 14px;
    overflow: hidden;
}
.stat-band-item {
    background: rgba(255,255,255,.03);
    padding: 40px 32px;
    text-align: center;
    transition: background .2s;
}
.stat-band-item:hover { background: rgba(255,255,255,.07); }
.stat-band-num {
    font-size: 3rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    letter-spacing: -.02em;
}
.stat-band-num span { color: var(--accent); }
.stat-band-label {
    font-size: 14px;
    color: rgba(255,255,255,.45);
    margin-top: 8px;
    font-weight: 500;
}

/* ══════ WHY US ══════ */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.why-features { display: flex; flex-direction: column; gap: 28px; }
.why-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.why-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.why-feature h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
.why-feature p { font-size: 14px; line-height: 1.65; }

.why-visual {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px;
}
.why-visual-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.why-visual-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.progress-list { display: flex; flex-direction: column; gap: 20px; }
.progress-item {}
.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
}
.progress-bar {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 1.2s ease;
}

/* ══════ CTA BANNER ══════ */
.cta-banner {
    background: var(--accent);
    padding: 80px 0;
}
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.cta-text h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 10px;
}
.cta-text p {
    color: rgba(255,255,255,.75);
    font-size: 16px;
    max-width: 520px;
}
.cta-actions { display: flex; gap: 14px; flex-shrink: 0; }


/* ══════ RESPONSIVE ══════ */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-widget { display: none; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .stats-band-grid { grid-template-columns: 1fr 1fr; }
    .cta-inner { flex-direction: column; text-align: center; }
    .cta-actions { justify-content: center; }
}
@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; }
    .stats-band-grid { grid-template-columns: 1fr 1fr; }
    .hero h1 { font-size: 2rem; }
}

/* ══════ HERO GRID ══════ */
.hero-grid {
    display: grid;
    gap: 20px;
    align-items: center;
    /* Mobile Default */
    grid-template-columns: 1fr;
    grid-template-areas: 
        "hero-top"
        "hero-right"
        "hero-bot";
    text-align: center;
}

/* Mobile specific overrides */
@media (max-width: 900px) {
    .hero-actions { justify-content: center; margin-top:20px; }
    .hero-trust { justify-content: center; margin-top:20px; }
    .hero-widget { justify-content: center; width: 100%; margin: 20px 0; }
}

/* Desktop Adjustment */
@media (min-width: 901px) { 
    .hero-grid { 
        grid-template-columns: 1fr 1.15fr !important;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "hero-top hero-right"
            "hero-bot hero-right";
        text-align: left;
    }
}

/* Particles fix for hero widget */
.hero-widget { position: relative; overflow: hidden; z-index: 1; min-height:430px; }
.hero-widget .stats-grid { position: relative; z-index: 2; width:100%; }

/* Grid equal items */
.stats-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 12px !important; 
}

/* ══════ HS2 SECTION ══════ */
.hs2-section{width:100%;background:#f5f5f5;padding:48px 0;}
.hs2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box;}
.hs2-card{display:flex;flex-direction:column;text-decoration:none;border:0.5px solid rgba(0,0,0,0.12);background:#fff;transition:box-shadow .2s;}
.hs2-card:hover{box-shadow:0 4px 24px rgba(0,0,0,.10);}
.hs2-img{width:100%;aspect-ratio:4/3;overflow:hidden;}
.hs2-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.hs2-card:hover .hs2-img img{transform:scale(1.04);}
.hs2-body{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;border-top:0.5px solid rgba(0,0,0,.08);}
.hs2-body h3{font-size:14px;font-weight:700;color:#1a1a1a;margin:0;}
.hs2-arrow{font-size:16px;color:#1a1a1a;opacity:0.5;transition:opacity .2s,transform .2s;}
.hs2-card:hover .hs2-arrow{opacity:1;transform:translateX(4px);}
@media(max-width:900px){.hs2-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.hs2-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}


/* ══════ NEWSLETTER ══════ */
.newsletter-form-wrap { flex-shrink:0; width:100%; max-width:420px; }
.newsletter-input-group { display:flex; gap:0; border-radius:6px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.2); }
.newsletter-input-group input { flex:1; padding:14px 18px; border:none; font-size:14px; outline:none; min-width:0; }
.newsletter-input-group button { padding:14px 22px; background:var(--navy); color:#fff; border:none; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .2s; }
.newsletter-input-group button:hover { background:#000; }
.newsletter-msg { margin-top:10px; font-size:13px; font-weight:600; padding:8px 12px; border-radius:4px; }
.newsletter-msg.success { background:rgba(255,255,255,.15); color:#fff; }
.newsletter-msg.error { background:rgba(0,0,0,.2); color:#fff; }
.newsletter-note { font-size:12px; color:rgba(255,255,255,.55); margin-top:10px; }
@media(max-width:768px){ .newsletter-form-wrap { max-width:100%; } .newsletter-input-group { flex-direction:column; } .newsletter-input-group button { border-radius:0; } }

/* ══════ STATS BAND ══════ */
.stats-band {
    background: var(--accent); /* User requested red background */
    padding: 72px 0;
}
.stats-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
}
.stat-band-item {
    background: rgba(255,255,255,.03);
    padding: 40px 32px;
    text-align: center;
    transition: background .2s;
}
.stat-band-item:hover { background: rgba(255,255,255,.07); }
.stat-band-num {
    font-size: 3rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    letter-spacing: -.02em;
}
.stat-band-num span { color: var(--navy); }
.stat-band-label {
    font-size: 14px;
    color: var(--white); /* User requested white text */
    margin-top: 8px;
    font-weight: 500;
}

/* ══════ WHY US ══════ */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.why-features { display: flex; flex-direction: column; gap: 28px; }
.why-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.why-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.why-feature h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
.why-feature p { font-size: 14px; line-height: 1.65; }

.why-visual {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,.06);
}
.why-visual-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.why-visual-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.icon-box {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-box-accent {
    background: var(--accent-light);
    color: var(--accent);
}
.progress-list { display: flex; flex-direction: column; gap: 20px; }
.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
}
.progress-bar {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 1.2s ease;
}
@media (max-width: 900px) {
    .why-grid { grid-template-columns: 1fr; gap:40px; }
    .stats-band-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .stats-band-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════ CTA BANNER ══════ */
.cta-banner {
    background: var(--accent);
    padding: 80px 0;
}
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.cta-text h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 10px;
}
.cta-text p {
    color: rgba(255,255,255,.75);
    font-size: 16px;
    max-width: 520px;
}
.cta-actions { display: flex; gap: 14px; flex-shrink: 0; }