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

body{

font-family:Arial, Helvetica, sans-serif;

background:#F5F7FA;

color:#1E293B;

line-height:1.6;

}

section{

padding:100px 10%;

}

h1,h2,h3{

font-weight:700;

}

a{

text-decoration:none;

}

/* ---------- NAVIGATION ---------- */

.navbar{

position:fixed;

top:0;

left:0;

right:0;

height:80px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 8%;

box-shadow:0 5px 25px rgba(0,0,0,.08);

z-index:1000;

}

.logo{

font-size:32px;

font-weight:bold;

}

.logo span{

color:#69C33D;

}

nav{

display:flex;

gap:35px;

}

nav a{

color:#1E293B;

font-weight:600;

}

.nav-button{

background:#69C33D;

padding:14px 24px;

border-radius:8px;

color:white;

font-weight:bold;

}

/* ---------- HERO ---------- */

#hero{

min-height:100vh;

display:flex;

align-items:center;

background:linear-gradient(135deg,#0D1B2A,#102A43);

color:white;

padding-top:140px;

}

.hero-content{

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

width:100%;

}

.hero-left{

flex:1;

}

.hero-right{

flex:1;

display:flex;

justify-content:center;

}

.badge{

display:inline-block;

padding:10px 20px;

background:rgba(255,255,255,.1);

border-radius:50px;

margin-bottom:30px;

}

.hero-left h1{

font-size:68px;

line-height:1.1;

margin-bottom:25px;

}

.hero-left p{

font-size:22px;

line-height:1.8;

margin-bottom:35px;

max-width:700px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

}

.primary-button{

background:#69C33D;

padding:18px 34px;

border-radius:10px;

color:white;

font-weight:bold;

}

.secondary-button{

border:2px solid white;

padding:18px 34px;

border-radius:10px;

color:white;

}

.stats{

display:flex;

gap:50px;

}

.stats h2{

font-size:36px;

}

.mock-card{

background:white;

color:#1E293B;

padding:45px;

border-radius:20px;

box-shadow:0 30px 60px rgba(0,0,0,.3);

width:420px;

}

.mock-card h1{

font-size:64px;

color:#69C33D;

margin:20px 0;

}

.mock-card hr{

margin:25px 0;

}

/* ---------- SHARED SECTIONS ---------- */

.light-section {
    background: #f4f6f8;
}

.dark-section {
    background: #0d1b2a;
    color: white;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading span,
.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: #7ed321;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.section-heading h2,
.why-copy h2 {
    margin-bottom: 20px;
    font-size: 48px;
    line-height: 1.15;
}

.section-heading p {
    color: #64748b;
    font-size: 18px;
}

/* ---------- SERVICES ---------- */

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

.service-card {
    padding: 32px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

.service-icon {
    display: flex;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(126, 211, 33, 0.14);
    color: #68ad18;
    font-size: 26px;
    font-weight: 800;
}

.service-card h3 {
    margin-bottom: 12px;
    font-size: 23px;
    color: #0d1b2a;
}

.service-card p {
    color: #64748b;
}

/* ---------- WHY US ---------- */

.why-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.why-copy h2 {
    font-size: 52px;
}

.why-copy p {
    max-width: 620px;
    margin-bottom: 20px;
    color: #cbd5e1;
    font-size: 18px;
}

.why-copy .primary-button {
    display: inline-block;
    margin-top: 18px;
}

.benefit-list {
    display: grid;
    gap: 18px;
}

.benefit-item {
    display: flex;
    gap: 20px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

.benefit-item > span {
    color: #7ed321;
    font-size: 16px;
    font-weight: 800;
}

.benefit-item h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.benefit-item p {
    color: #cbd5e1;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
    nav {
        display: none;
    }

    .hero-content,
    .why-layout {
        grid-template-columns: 1fr;
        display: grid;
    }

    .hero-left h1 {
        font-size: 48px;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats {
        flex-wrap: wrap;
    }
}

@media (max-width: 620px) {
    section {
        padding: 75px 7%;
    }

    .navbar {
        padding: 0 5%;
    }

    .logo {
        font-size: 23px;
    }

    .nav-button {
        padding: 10px 14px;
        font-size: 13px;
    }

    .hero-left h1 {
        font-size: 40px;
    }

    .hero-left p {
        font-size: 18px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        text-align: center;
    }

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

    .section-heading h2,
    .why-copy h2 {
        font-size: 36px;
    }

    .mock-card {
        width: 100%;
    }
}
/* ---------- SOFTWARE SHOWCASE ---------- */

.software-section {
    background: white;
}

.software-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
    align-items: center;
}

.software-preview {
    overflow: hidden;
    border: 1px solid #dbe2ea;
    border-radius: 22px;
    background: #f8fafc;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.16);
}

.preview-topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 17px 20px;
    background: #0d1b2a;
    color: white;
}

.preview-topbar p {
    font-size: 14px;
    font-weight: 700;
}

.preview-dots {
    display: flex;
    gap: 7px;
}

.preview-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b;
}

.preview-dots span:first-child {
    background: #ef4444;
}

.preview-dots span:nth-child(2) {
    background: #f59e0b;
}

.preview-dots span:nth-child(3) {
    background: #7ed321;
}

.preview-content {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 28px;
    padding: 34px;
}

.score-panel {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #0d1b2a;
    color: white;
    text-align: center;
}

.score-panel p {
    margin-bottom: 8px;
    color: #cbd5e1;
}

.score-panel strong {
    color: #7ed321;
    font-size: 78px;
    line-height: 1;
}

.score-panel span {
    color: #94a3b8;
}

.preview-metrics {
    display: grid;
    gap: 20px;
}

.preview-metrics > div {
    padding: 16px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.07);
}

.preview-metrics span {
    display: inline-block;
    margin-bottom: 8px;
    color: #475569;
    font-size: 14px;
}

.preview-metrics strong {
    float: right;
    color: #0d1b2a;
}

.metric-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.metric-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #68ad18, #9be443);
}

.software-copy h2 {
    margin-bottom: 22px;
    color: #0d1b2a;
    font-size: 44px;
    line-height: 1.15;
}

.software-copy > p {
    margin-bottom: 24px;
    color: #64748b;
    font-size: 18px;
}

.feature-list {
    display: grid;
    gap: 14px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.feature-list li {
    position: relative;
    padding-left: 30px;
    color: #334155;
    font-weight: 600;
}

.feature-list li::before {
    position: absolute;
    left: 0;
    color: #68ad18;
    content: "✓";
    font-weight: 900;
}

/* ---------- CONTACT ---------- */

.contact-section {
    background:
        radial-gradient(circle at top right, rgba(126, 211, 33, 0.16), transparent 34%),
        #eef3f8;
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 70px;
    align-items: center;
}

.contact-copy h2 {
    margin-bottom: 22px;
    color: #0d1b2a;
    font-size: 48px;
    line-height: 1.15;
}

.contact-copy > p {
    margin-bottom: 22px;
    color: #64748b;
    font-size: 18px;
}

.contact-points {
    display: grid;
    gap: 10px;
    margin: 28px 0;
    color: #334155;
    font-weight: 700;
}

.contact-email a {
    color: #4d9413;
    font-weight: 800;
}

.report-form {
    padding: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 20px;
    background: white;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.12);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    margin-bottom: 19px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 14px 15px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #68ad18;
    box-shadow: 0 0 0 3px rgba(104, 173, 24, 0.14);
}

.form-button {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 16px;
    background: #69c33d;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
}

.form-button:hover {
    background: #58aa30;
}

.form-note {
    margin-top: 13px;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

/* ---------- FOOTER ---------- */

.site-footer {
    margin: 0;
    padding: 65px 8% 25px;
    background: #08131f;
    color: white;
    text-align: left;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.7fr 1fr 0.8fr;
    gap: 50px;
    padding-bottom: 45px;
}

.footer-logo {
    margin-bottom: 16px;
    font-size: 28px;
    font-weight: 900;
}

.footer-logo span {
    color: #7ed321;
}

.footer-grid p {
    max-width: 380px;
    color: #94a3b8;
}

.footer-grid h3 {
    margin-bottom: 14px;
    font-size: 16px;
}

.footer-grid a {
    display: block;
    margin-bottom: 10px;
    color: #cbd5e1;
}

.footer-grid a:hover {
    color: #7ed321;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    font-size: 13px;
}

/* ---------- EXTRA RESPONSIVE ---------- */

@media (max-width: 900px) {
    .software-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .preview-content,
    .form-row,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .software-copy h2,
    .contact-copy h2 {
        font-size: 36px;
    }

    .report-form {
        padding: 24px;
    }

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

/* ---------- LEGAL PAGES ---------- */

.legal-page {
    min-height: 100vh;
    padding-top: 80px;
    background: #f4f6f8;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 90px 24px;
}

.legal-content h1 {
    margin-bottom: 8px;
    color: #0d1b2a;
    font-size: 54px;
    line-height: 1.1;
}

.legal-updated {
    margin-bottom: 50px;
    color: #64748b;
}

.legal-content h2 {
    margin: 38px 0 13px;
    color: #0d1b2a;
    font-size: 25px;
}

.legal-content p {
    margin-bottom: 15px;
    color: #475569;
    font-size: 17px;
}

.legal-content ul {
    display: grid;
    gap: 9px;
    margin: 12px 0 22px 25px;
    color: #475569;
}

.legal-content a {
    color: #4d9413;
    font-weight: 700;
}

.legal-note {
    margin-top: 45px;
    padding: 18px;
    border-left: 4px solid #7ed321;
    background: white;
    border-radius: 5px;
}

.site-footer .footer-bottom a {
    display: inline;
    color: #cbd5e1;
}

@media (max-width: 620px) {
    .legal-content {
        padding: 65px 7%;
    }

    .legal-content h1 {
        font-size: 40px;
    }
}

/* ---------- TRUST STRIP ---------- */

.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    padding: 0;
    background: #dbe2ea;
}

.trust-stat {
    padding: 34px 20px;
    background: white;
    text-align: center;
}

.trust-stat strong {
    display: block;
    margin-bottom: 5px;
    color: #0d1b2a;
    font-size: 20px;
}

.trust-stat span {
    color: #64748b;
    font-size: 14px;
}

@media (max-width: 900px) {
    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .trust-strip {
        grid-template-columns: 1fr;
    }
}

.service-grid-three {
    grid-template-columns: repeat(3, 1fr);
}

.featured-service {
    border-top: 4px solid #7ed321;
}

.service-points {
    display: grid;
    gap: 8px;
    margin-top: 22px;
    padding: 0;
    list-style: none;
}

.service-points li {
    position: relative;
    padding-left: 24px;
    color: #475569;
    font-size: 14px;
}

.service-points li::before {
    position: absolute;
    left: 0;
    color: #68ad18;
    content: "✓";
    font-weight: 900;
}

@media (max-width: 900px) {
    .service-grid-three {
        grid-template-columns: 1fr;
    }
}

/* ---------- COMPARISON ---------- */

.comparison-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
}

.comparison-column {
    padding: 34px;
}

.comparison-column h3 {
    margin-bottom: 22px;
    font-size: 23px;
}

.comparison-column p {
    margin-bottom: 14px;
}

.comparison-other {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
}

.comparison-us {
    background: rgba(126, 211, 33, 0.12);
    color: white;
}

.comparison-us h3 {
    color: #9be443;
}

@media (max-width: 620px) {
    .comparison-panel {
        grid-template-columns: 1fr;
    }
}