* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    background: #f7f9fc;
    color: #172033;
}

a {
    text-decoration: none;
}

.navbar {
    background: #07172d;
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav-inner {
    max-width: 1180px;
    margin: auto;
    padding: 17px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.brand {
    color: white;
    font-size: 24px;
    font-weight: 800;
}

.brand span {
    color: #4da3ff;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-links a {
    color: #dce8f7;
    font-weight: 600;
    font-size: 14px;
}

.btn {
    display: inline-block;
    border-radius: 9px;
    padding: 13px 21px;
    font-weight: 700;
    transition: .2s ease;
}

.btn-primary {
    background: #1473e6;
    color: white !important;
}

.btn-primary:hover {
    background: #0d63ca;
    transform: translateY(-1px);
}

.btn-outline {
    color: white;
    border: 1px solid rgba(255,255,255,.35);
}

.hero {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(30,112,220,.32),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061426,
            #0c2749
        );

    color: white;
    padding: 100px 24px 95px;
}

.hero-inner {
    max-width: 1180px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 65px;
    align-items: center;
}

.eyebrow {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 30px;
    background: rgba(56,139,253,.15);
    border: 1px solid rgba(100,170,255,.25);
    color: #8dc5ff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 22px;
}

.hero h1 {
    font-size: 57px;
    line-height: 1.06;
    margin: 0 0 22px;
    letter-spacing: -1.8px;
}

.hero h1 span {
    color: #5faeff;
}

.hero-text {
    color: #c9d8ea;
    font-size: 19px;
    line-height: 1.7;
    max-width: 650px;
}

.hero-buttons {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.hero-note {
    color: #93a9c1;
    font-size: 13px;
    margin-top: 16px;
}

.demo-window {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.13);
    padding: 18px;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.3);
}

.window-top {
    display: flex;
    gap: 7px;
    margin-bottom: 15px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7890aa;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.person {
    min-height: 180px;
    background: linear-gradient(145deg,#173a63,#0d213b);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #cfe4fa;
}

.avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #2d78c8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    margin-bottom: 12px;
}

.controls {
    margin-top: 12px;
    background: #09192c;
    padding: 13px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.control {
    background: #183554;
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 13px;
}

.control.record {
    background: #a51d3d;
}

.section {
    padding: 85px 24px;
}

.section-white {
    background: white;
}

.section-dark {
    background: #08182d;
    color: white;
}

.container {
    max-width: 1180px;
    margin: auto;
}

.section-title {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.section-title h2 {
    font-size: 38px;
    margin: 0 0 14px;
    letter-spacing: -.8px;
}

.section-title p {
    color: #64748b;
    line-height: 1.7;
    font-size: 17px;
}

.section-dark .section-title p {
    color: #9eb3ca;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.feature {
    background: white;
    border: 1px solid #e6ebf2;
    padding: 27px;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(15,40,70,.04);
}

.feature-icon {
    width: 47px;
    height: 47px;
    background: #eaf3ff;
    color: #176bd1;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}

.feature h3 {
    margin: 0 0 9px;
    font-size: 19px;
}

.feature p {
    margin: 0;
    color: #64748b;
    line-height: 1.65;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.step {
    text-align: center;
    padding: 20px;
}

.step-number {
    width: 48px;
    height: 48px;
    margin: 0 auto 17px;
    border-radius: 50%;
    background: #1473e6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.step h3 {
    margin-bottom: 8px;
}

.step p {
    color: #64748b;
    line-height: 1.6;
}

.use-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.use-card {
    background: #102844;
    padding: 25px;
    border-radius: 13px;
    border: 1px solid #1c3b5d;
}

.use-card h3 {
    margin-top: 0;
}

.use-card p {
    color: #a9bdd2;
    line-height: 1.6;
}

.cta {
    background: linear-gradient(135deg,#126bd3,#164fa3);
    color: white;
    border-radius: 22px;
    padding: 55px 45px;
    text-align: center;
}

.cta h2 {
    font-size: 36px;
    margin: 0 0 12px;
}

.cta p {
    color: #d9e9ff;
    font-size: 17px;
}

.cta .btn {
    margin-top: 18px;
    background: white;
    color: #145eb9 !important;
}

.footer {
    background: #05111f;
    color: #8fa6bd;
    padding: 35px 24px;
}

.footer-inner {
    max-width: 1180px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.footer strong {
    color: white;
}

@media(max-width:900px) {

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 44px;
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .steps,
    .use-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:600px) {

    .nav-links a:not(.btn) {
        display: none;
    }

    .hero {
        padding-top: 65px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .feature-grid,
    .steps,
    .use-grid {
        grid-template-columns: 1fr;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
    }
}

/* =========================================================
   MeetsApp.io Product Refresh
   ========================================================= */
.meetsapp-product{background:#f8faff;color:#172033}
.navbar-light{background:rgba(255,255,255,.97);color:#172033;border-bottom:1px solid #e7ebf3;box-shadow:0 2px 12px rgba(30,45,80,.03)}
.navbar-light .nav-links a{color:#172033}
.brand-logo-link{display:flex;align-items:center;min-width:235px}
.brand-logo-img{display:block;width:285px;max-width:100%;height:48px;object-fit:contain;object-position:left center}
.btn-warm{background:linear-gradient(90deg,#ff791e,#f12643);color:#fff!important;box-shadow:0 8px 22px rgba(240,65,46,.18)}
.btn-warm:hover{transform:translateY(-1px);filter:brightness(.97)}
.btn-outline-dark{border:1px solid #e04d30;color:#d9422a;background:white}
.btn-outline-blue{border:1px solid #2563eb;color:#135fcd;background:white}
.meetsapp-hero{background:radial-gradient(circle at 82% 20%,rgba(109,102,255,.16),transparent 34%),radial-gradient(circle at 2% 35%,rgba(241,31,138,.10),transparent 26%),linear-gradient(135deg,#fff,#f4f5ff);padding:70px 24px 65px;border-bottom:1px solid #e9edf5;overflow:hidden}
.meetsapp-hero .hero-inner{color:#172033}
.eyebrow-warm{background:#fff1e9;border:1px solid #ffd9c7;color:#e7542b}
.meetsapp-hero h1{font-size:55px;color:#18233c;line-height:1.05;margin:0 0 20px}
.meetsapp-hero h1 span{background:linear-gradient(90deg,#ff751c,#ef1756,#8f2ce8);-webkit-background-clip:text;background-clip:text;color:transparent}
.dark-text{color:#53627a!important}
.hero-tagline{font-size:22px;font-weight:800;color:#1d2940;margin:20px 0 0}
.hero-visual{display:flex;align-items:center;justify-content:center;position:relative}
.hero-product-mark{width:min(620px,100%);filter:drop-shadow(0 22px 35px rgba(34,44,85,.16));mix-blend-mode:multiply}
.mini-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:30px;max-width:590px}
.mini-benefits>div{text-align:center;border-right:1px solid #dfe5ef;padding:2px 8px;color:#27344d;font-size:13px}.mini-benefits>div:last-child{border-right:0}.mini-benefits span{display:flex;width:46px;height:46px;margin:0 auto 8px;border-radius:50%;align-items:center;justify-content:center;background:white;box-shadow:0 5px 16px rgba(35,48,89,.09);font-size:20px}.mini-benefits strong{font-weight:700;line-height:1.25}.trust-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;color:#42506a;font-size:13px}.plans-preview{padding:70px 24px 75px;background:#fff}.compact-title{margin-bottom:34px}.landing-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}.landing-plan{position:relative;background:#fff;border:1px solid #dfe6f1;border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(28,43,76,.06)}.landing-plan-popular{border:2px solid #ff5433;transform:translateY(-8px)}.warm-badge{background:linear-gradient(90deg,#ff7a1f,#ef174b)}.landing-plan h3{margin:0;color:#173b88}.landing-plan-popular h3{color:#ee482a}.landing-plan-desc{color:#65738a;min-height:42px}.landing-price{margin:20px 0 5px}.landing-price strong{font-size:38px}.landing-price span{color:#6a7689;margin-left:4px}.landing-plan ul{list-style:none;padding:0;margin:23px 0}.landing-plan li{padding:8px 0;color:#435169;border-bottom:1px solid #eef2f7}.landing-plan li:before{content:'✓';color:#16a34a;font-weight:800;margin-right:8px}.plan-cta{width:100%;text-align:center}.regional-link{text-align:center;margin-top:28px}.regional-link a{font-weight:800;color:#1769d5}.light-use-grid .light-use-card{background:white;border:1px solid #e4eaf3;color:#172033;box-shadow:0 6px 22px rgba(28,43,76,.05)}.light-use-grid .light-use-card p{color:#65738a}.demo-strip{padding:42px 24px;background:#101e3e;color:white}.demo-strip-inner{display:flex;justify-content:space-between;align-items:center;gap:28px}.demo-strip h2{margin:0 0 8px;font-size:30px}.demo-strip p{margin:0;color:#c7d2e5;max-width:800px;line-height:1.6}.footer-light-brand{background:#07142c;color:#9fb0c8}.footer-light-brand strong{color:#fff}
@media(max-width:900px){.navbar-light .nav-inner{align-items:flex-start}.brand-logo-img{width:230px}.meetsapp-hero h1{font-size:44px}.mini-benefits{grid-template-columns:1fr 1fr}.landing-pricing-grid{grid-template-columns:1fr}.landing-plan-popular{transform:none}.demo-strip-inner{flex-direction:column;align-items:flex-start}.nav-links{flex-wrap:wrap;gap:12px}}
@media(max-width:620px){.brand-logo-link{min-width:auto}.brand-logo-img{width:190px;height:42px}.meetsapp-hero{padding-top:45px}.meetsapp-hero h1{font-size:38px}.hero-tagline{font-size:18px}.mini-benefits{grid-template-columns:1fr 1fr}.nav-inner{padding:13px 16px}.nav-links .btn{display:none}}