/* =========================================================
   Unlock Meta — Homepage Professional Redesign
   Visual-only layer: no content, links or button behavior changed.
   ========================================================= */

.home-page {
    --home-navy: #0b1930;
    --home-navy-2: #102544;
    --home-blue: #1769e0;
    --home-ink: #172033;
    --home-muted: #657188;
    --home-line: #e4e9f1;
    --home-surface: #ffffff;
    --home-soft: #f5f7fa;
    background: #f7f9fc;
    color: var(--home-ink);
}

/* Header: restrained corporate appearance */
.home-page #main-header {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #e7ebf2;
    box-shadow: 0 2px 16px rgba(19,34,58,.05);
}
.home-page #main-header .navbar {
    min-height: 76px;
}
.home-page .brand-icon {
    border-radius: 11px;
    box-shadow: 0 5px 16px rgba(23,105,224,.20);
}
.home-page .navbar-nav .nav-link {
    font-weight: 600;
    color: #526078 !important;
}
.home-page .navbar-nav .nav-link:hover,
.home-page .navbar-nav .nav-link.active {
    background: #f0f5fc;
    color: var(--home-blue) !important;
}

/* Hero */
.home-page .hero-section {
    min-height: 700px;
    padding: 105px 0 92px;
    background:
        radial-gradient(circle at 85% 15%, rgba(58,125,219,.20), transparent 34%),
        radial-gradient(circle at 8% 85%, rgba(23,105,224,.12), transparent 28%),
        linear-gradient(135deg, #09172b 0%, #0d213d 55%, #122e52 100%);
}
.home-page .hero-grid {
    opacity: .45;
    background-size: 72px 72px;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}
.home-page .hero-gradient-1,
.home-page .hero-gradient-2 {
    opacity: .55;
    animation: none;
}
.home-page .hero-content {
    max-width: 650px;
}
.home-page .hero-badge {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    color: #dce8f8;
    padding: 8px 16px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}
.home-page .hero-title {
    font-size: clamp(2.35rem, 5vw, 4rem);
    line-height: 1.18;
    letter-spacing: -.8px;
    margin-bottom: 22px;
}
.home-page .hero-title .highlight {
    background: linear-gradient(135deg, #8fc0ff, #d7e8ff);
    -webkit-background-clip: text;
    background-clip: text;
}
.home-page .hero-desc {
    color: rgba(255,255,255,.73);
    max-width: 590px;
    line-height: 1.95;
    margin-bottom: 34px;
}
.home-page .hero-actions {
    margin-bottom: 40px;
}
.home-page .hero-actions .btn {
    box-shadow: none;
}
.home-page .hero-actions .btn-primary {
    background: var(--home-blue);
}
.home-page .hero-actions .btn-primary:hover {
    background: #0f5bc4;
}
.home-page .hero-stats {
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.13);
    padding-top: 24px;
}
.home-page .hero-stat-item {
    padding: 0 30px;
    border-inline-start: 1px solid rgba(255,255,255,.12);
}
.home-page .hero-stat-item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}
.home-page .hero-stat-number {
    font-size: 1.55rem;
}
.home-page .hero-stat-label {
    color: rgba(255,255,255,.58);
    margin-top: 5px;
}

/* Hero visual — clean dashboard panel */
.home-page .hero-visual {
    padding: 24px 10px;
}
.home-page .hero-card-main {
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
}
.home-page .hero-card-main::before {
    background: var(--home-blue);
}
.home-page .mockup-header {
    padding-bottom: 15px;
    margin-bottom: 17px;
    border-bottom: 1px solid #e9edf3;
}
.home-page .mockup-title {
    color: #67758a;
    font-weight: 700;
}
.home-page .mockup-service-item {
    background: #f8fafc;
    border: 1px solid #e7ebf1;
    padding: 13px;
}
.home-page .mockup-service-item:hover {
    background: #f2f6fb;
    border-color: #d9e4f4;
    transform: none;
}
.home-page .mockup-service-name {
    color: #1d2939;
}
.home-page .mockup-service-price {
    color: #7a8799;
}
.home-page .floating-card {
    background: rgba(255,255,255,.98);
    border: 1px solid #e6ebf2;
    box-shadow: 0 14px 35px rgba(7,20,39,.16);
}
.home-page .card-success { transform: translate(10px,-18px); }
.home-page .card-users { transform: translate(-8px,18px); }

/* Counters */
.home-page .stats-strip {
    background: #fff;
    padding: 38px 0;
    border-bottom: 1px solid var(--home-line);
    border-top: 1px solid rgba(255,255,255,.15);
}
.home-page .stats-strip::before {
    display: none;
}
.home-page .stat-item::after {
    background: #e3e8ef;
}
.home-page .stat-number {
    color: #18263b;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
}
.home-page .stat-label {
    color: #758197;
}

/* Sections */
.home-page .section {
    padding: 92px 0;
}
.home-page .services-section,
.home-page .contact-section {
    background: #f7f9fc;
}
.home-page .section-header {
    margin-bottom: 48px;
}
.home-page .section-tag {
    background: #eef4fb;
    border-color: #dce8f6;
    color: #2568b7;
    font-weight: 700;
}
.home-page .section-title {
    color: #152238;
    font-size: clamp(1.9rem, 3.4vw, 2.65rem);
    letter-spacing: -.5px;
}
.home-page .section-desc {
    color: #6d798c;
}

/* Service cards */
.home-page .service-card {
    border-radius: 16px;
    border: 1px solid #e1e7ef;
    box-shadow: 0 5px 20px rgba(28,44,70,.045);
}
.home-page .service-card:hover {
    transform: translateY(-4px);
    border-color: #cbd9eb;
    box-shadow: 0 16px 35px rgba(28,44,70,.10);
}
.home-page .service-card::after {
    display: none;
}
.home-page .service-image {
    height: 185px;
    background: #eef3f8;
}
.home-page .service-body {
    padding: 2px 0 0;
}
.home-page .service-name {
    font-size: 1.08rem;
}
.home-page .service-desc {
    color: #6d798c;
}
.home-page .service-meta {
    border-top: 1px solid #edf0f4;
    padding-top: 15px;
}
.home-page .service-card .btn {
    box-shadow: none;
}

/* Articles */
.home-page section.bg-light {
    background: #fff !important;
}
.home-page section.bg-light article {
    border: 1px solid #e1e7ef !important;
    box-shadow: 0 5px 20px rgba(28,44,70,.045) !important;
    border-radius: 16px !important;
}
.home-page section.bg-light article:hover {
    box-shadow: 0 14px 30px rgba(28,44,70,.09) !important;
}

/* Why us */
.home-page .why-us-section {
    background: #fff;
}
.home-page .why-card {
    border-radius: 16px;
    padding: 30px 25px;
    border-color: #e1e7ef;
    box-shadow: 0 4px 16px rgba(28,44,70,.035);
}
.home-page .why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(28,44,70,.09);
}
.home-page .why-card::before {
    background: var(--home-blue);
}
.home-page .why-icon {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: #eef4fb;
    color: #2369b9;
}
.home-page .why-card:hover .why-icon {
    transform: none;
    background: #e7f0fc;
    color: var(--home-blue);
}

/* How it works / FAQ */
.home-page .steps-section {
    background: #f7f9fc;
}
.home-page .step-num {
    background: var(--home-blue);
    box-shadow: 0 7px 18px rgba(23,105,224,.20);
}
.home-page .step-item::before {
    background: #dbe5f1;
}
.home-page .faq-section {
    background: #fff;
}
.home-page .faq-accordion .accordion-item {
    border-color: #e2e7ee;
    box-shadow: 0 3px 14px rgba(28,44,70,.035);
}
.home-page .faq-accordion .accordion-button:not(.collapsed) {
    background: #f4f7fb;
}

/* Contact */
.home-page .contact-card {
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(28,44,70,.045);
    border-color: #e1e7ef;
}
.home-page .contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(28,44,70,.09);
}

/* Footer separation */
.home-page footer {
    border-top: 1px solid rgba(255,255,255,.07);
}

/* Accessibility / reduced motion */
@media (prefers-reduced-motion: reduce) {
    .home-page *,
    .home-page *::before,
    .home-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Mobile */
@media (max-width: 991.98px) {
    .home-page .hero-section {
        min-height: auto;
        padding: 72px 0 70px;
    }
    .home-page .hero-content {
        text-align: center;
        margin-inline: auto;
    }
    .home-page .hero-desc {
        margin-inline: auto;
    }
    .home-page .hero-actions,
    .home-page .hero-stats {
        justify-content: center;
    }
    .home-page .hero-visual {
        max-width: 680px;
        margin: 15px auto 0;
    }
}
@media (max-width: 575.98px) {
    .home-page .hero-section {
        padding: 52px 0 58px;
    }
    .home-page .hero-title {
        font-size: 2rem;
    }
    .home-page .hero-desc {
        font-size: .95rem;
    }
    .home-page .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }
    .home-page .hero-stat-item {
        padding: 0 8px;
        text-align: center;
    }
    .home-page .hero-stat-number {
        font-size: 1.2rem;
    }
    .home-page .hero-stat-label {
        font-size: .68rem;
    }
    .home-page .hero-card-main {
        padding: 17px;
        border-radius: 14px;
    }
    .home-page .floating-card {
        display: none;
    }
    .home-page .section {
        padding: 68px 0;
    }
}

/* =========================================================
   Unlock Meta — Signature / Premium Homepage Layer
   Design-only enhancement. Content, URLs, buttons and data untouched.
   ========================================================= */
.home-page {
    --sig-ink:#0b1220;
    --sig-muted:#68758a;
    --sig-blue:#1677ff;
    --sig-cyan:#22b8ff;
    --sig-border:rgba(15,35,65,.09);
    --sig-shadow:0 18px 55px rgba(20,42,75,.10);
    overflow-x:hidden;
    background:
      radial-gradient(circle at 10% 15%, rgba(22,119,255,.045), transparent 24%),
      radial-gradient(circle at 90% 45%, rgba(34,184,255,.035), transparent 22%),
      #f7f9fc;
}

/* premium header depth */
.home-page #main-header {
    position:relative;
    z-index:50;
    box-shadow:0 8px 35px rgba(11,25,48,.055);
}
.home-page #main-header::after {
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(22,119,255,.28),transparent);
}

/* Hero becomes a cinematic product showcase */
.home-page .hero-section {
    isolation:isolate;
    min-height:760px;
    padding:125px 0 105px;
    background:
      radial-gradient(circle at 76% 28%, rgba(40,156,255,.25), transparent 25%),
      radial-gradient(circle at 94% 78%, rgba(0,196,255,.16), transparent 25%),
      radial-gradient(circle at 15% 80%, rgba(37,104,224,.12), transparent 30%),
      linear-gradient(132deg,#061224 0%,#0a1d37 45%,#0d2b50 100%);
}
.home-page .hero-section::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(115deg,transparent 20%,rgba(255,255,255,.035) 50%,transparent 80%);
    opacity:.9;
}
.home-page .hero-section::after {
    content:"";
    position:absolute;
    width:520px;height:520px;
    left:-260px;bottom:-330px;
    border:1px solid rgba(96,178,255,.12);
    border-radius:50%;
    box-shadow:0 0 0 80px rgba(96,178,255,.025),0 0 0 160px rgba(96,178,255,.018);
    pointer-events:none;
}
.home-page .hero-grid {
    opacity:.32;
    background-size:54px 54px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 90%);
}
.home-page .hero-content { max-width:690px; position:relative; z-index:2; }
.home-page .hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    padding:9px 15px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 25px rgba(0,0,0,.10);
}
.home-page .hero-title {
    font-weight:850;
    letter-spacing:-1.5px;
    text-wrap:balance;
    text-shadow:0 8px 35px rgba(0,0,0,.20);
}
.home-page .hero-title .highlight {
    background:linear-gradient(100deg,#69c7ff 5%,#fff 48%,#9edcff 95%);
    -webkit-background-clip:text;background-clip:text;
    filter:drop-shadow(0 5px 18px rgba(57,168,255,.15));
}
.home-page .hero-desc { max-width:625px; font-size:1.04rem; }
.home-page .hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.home-page .hero-actions .btn { position:relative; z-index:1; }

/* stats are glass separators rather than ordinary counters */
.home-page .hero-stats {
    display:flex;
    width:min(100%,620px);
    padding:18px 0 0;
    margin-top:5px;
    border-top:1px solid rgba(255,255,255,.12);
}
.home-page .hero-stat-item { min-width:135px; }
.home-page .hero-stat-number { font-weight:850; letter-spacing:-.5px; }

/* Dashboard glass frame */
.home-page .hero-visual {
    position:relative;
    min-height:530px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1400px;
}
.home-page .hero-visual::before {
    content:"";
    position:absolute;
    width:430px;height:430px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(53,165,255,.25),rgba(53,165,255,0) 68%);
    filter:blur(5px);
}
.home-page .hero-card-main {
    position:relative;
    width:min(100%,555px);
    padding:22px;
    border-radius:24px;
    background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,247,253,.96));
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 42px 100px rgba(0,0,0,.34),0 0 0 1px rgba(84,166,255,.08);
    transform:rotateY(-4deg) rotateX(2deg);
    transition:transform .45s ease,box-shadow .45s ease;
}
.home-page .hero-card-main:hover {
    transform:rotateY(0) rotateX(0) translateY(-5px);
    box-shadow:0 50px 110px rgba(0,0,0,.38),0 0 0 1px rgba(84,166,255,.12);
}
.home-page .hero-card-main::before {
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,#1267e8,#27c5ff,#1267e8);
}
.home-page .mockup-service-item {
    border-radius:14px;
    padding:14px;
    box-shadow:0 5px 16px rgba(18,48,80,.035);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.home-page .mockup-service-item:hover {
    transform:translateX(-3px);
    box-shadow:0 12px 25px rgba(18,48,80,.08);
}
.home-page .floating-card {
    z-index:4;
    border-radius:16px;
    padding:13px 15px;
    box-shadow:0 20px 45px rgba(4,18,40,.24);
    backdrop-filter:blur(16px);
}
.home-page .card-success { transform:translate(18px,-30px); }
.home-page .card-users { transform:translate(-18px,28px); }

/* clean section transitions */
.home-page .section { position:relative; }
.home-page .section::before {
    content:"";
    position:absolute;
    top:0;left:50%;width:min(92%,1100px);height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(22,119,255,.10),transparent);
}
.home-page .section-header { position:relative; }
.home-page .section-tag {
    border-radius:999px;
    padding:7px 13px;
    box-shadow:0 5px 16px rgba(22,119,255,.05);
}
.home-page .section-title { font-weight:850; letter-spacing:-.8px; }
.home-page .section-desc { max-width:720px; }

/* premium service cards */
.home-page .service-card {
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:rgba(255,255,255,.96);
    box-shadow:0 7px 28px rgba(22,42,70,.055);
    transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}
.home-page .service-card::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:3px;
    background:linear-gradient(90deg,#1669e8,#26baff);
    transform:scaleX(.15);
    transform-origin:center;
    transition:transform .35s ease;
    z-index:2;
}
.home-page .service-card:hover {
    transform:translateY(-8px);
    box-shadow:0 24px 50px rgba(19,43,76,.13);
}
.home-page .service-card:hover::before { transform:scaleX(1); }
.home-page .service-image {
    position:relative;
    overflow:hidden;
}
.home-page .service-image::after {
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(5,19,38,.18));
    pointer-events:none;
}
.home-page .service-body { padding:4px 22px 22px; }
.home-page .service-name { font-weight:800; }
.home-page .service-meta { margin-top:18px; }

/* Why us / steps / FAQ / contact receive a consistent editorial system */
.home-page .why-us-section .feature-card,
.home-page .why-us-section .why-card,
.home-page .steps-section .step-card,
.home-page .contact-card,
.home-page .faq-accordion .accordion-item {
    border:1px solid var(--sig-border);
    box-shadow:0 8px 30px rgba(20,42,75,.055);
    border-radius:18px;
    background:rgba(255,255,255,.90);
}
.home-page .contact-card { transition:transform .28s ease,box-shadow .28s ease; }
.home-page .contact-card:hover { transform:translateY(-6px); box-shadow:var(--sig-shadow); }
.home-page .contact-icon-wrap {
    box-shadow:0 10px 25px rgba(22,119,255,.12);
}
.home-page .faq-accordion .accordion-item { overflow:hidden; }

/* articles */
.home-page section.bg-light article {
    border-radius:20px !important;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(20,42,75,.055) !important;
    transition:transform .28s ease,box-shadow .28s ease;
}
.home-page section.bg-light article:hover {
    transform:translateY(-7px);
    box-shadow:0 22px 45px rgba(20,42,75,.12) !important;
}

/* wide screen composition */
@media (min-width:1200px) {
    .home-page .hero-section .container { max-width:1220px; }
    .home-page .hero-content { padding-inline-end:24px; }
    .home-page .hero-visual { transform:translateX(8px); }
}

/* tablet/mobile */
@media (max-width:991.98px) {
    .home-page .hero-section { padding:90px 0 80px; }
    .home-page .hero-visual { min-height:460px; }
    .home-page .hero-card-main { transform:none; }
    .home-page .hero-card-main:hover { transform:translateY(-3px); }
}
@media (max-width:575.98px) {
    .home-page .hero-section { padding:58px 0 64px; }
    .home-page .hero-title { letter-spacing:-.8px; }
    .home-page .hero-actions { justify-content:center; }
    .home-page .hero-actions .btn { width:100%; }
    .home-page .hero-stats { gap:0; }
    .home-page .hero-stat-item { min-width:0; }
    .home-page .hero-visual { min-height:355px; padding:12px 0; }
    .home-page .hero-card-main { padding:14px; border-radius:18px; }
    .home-page .mockup-service-item { padding:10px; }
    .home-page .mockup-service-price { font-size:.72rem; }
    .home-page .section { padding:70px 0; }
}