:root{--bg:#fff;--alt:#f5f7fb;--ink:#0f172a;--mute:#5b6478;--line:#e3e8f0;--brand:#2f5bea;--brand-d:#2347c4;--radius:14px}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
nav{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:5}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.3px}
.logo span{color:var(--brand)}
/* Responsive logo image */
nav .logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
nav .logo img{display:block;height:40px;width:auto;max-width:100%;object-fit:contain}
nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:15px;color:var(--mute)}
.btn{display:inline-block;padding:11px 20px;border-radius:8px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer}
.btn-p{background:var(--brand);color:#fff}.btn-p:hover{background:var(--brand-d)}
.btn-b{border-color:var(--brand);background:#fff;color:var(--brand)}.btn-b:hover{border-color:var(--brand-d);background:var(--brand-d);color:#fff}
.hero{padding:80px 0 56px;text-align:center}
.hero h1{font-size:clamp(34px,5.5vw,56px);line-height:1.1;letter-spacing:-1.2px;margin:0 auto 18px;max-width:780px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{font-size:19px;color:var(--mute);max-width:620px;margin:0 auto 28px}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero small{display:block;margin-top:14px;color:var(--mute);font-size:13px}
.shot{margin:48px auto 0;max-width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--alt);box-shadow:0 20px 50px rgba(15,23,42,.10);overflow:hidden}
.shot a{display:block;cursor:zoom-in}
.shot img{display:block;width:100%;height:auto}
.shot-note{margin-top:12px;font-size:13px;color:var(--mute)}
@media(min-width:1200px){.shot{width:1160px;max-width:none;margin-left:0;margin-right:0;position:relative;left:50%;transform:translateX(-50%)}}
.strip{padding:28px 0;border-block:1px solid var(--line);background:var(--alt);text-align:center;color:var(--mute);font-size:15px}
.strip b{color:var(--ink)}
section{padding:80px 0}
.alt{background:var(--alt)}
h2{font-size:clamp(26px,3.5vw,38px);letter-spacing:-.6px;line-height:1.2;margin:0 0 12px;text-align:center}
.sub{text-align:center;color:var(--mute);max-width:600px;margin:0 auto 44px;font-size:17px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card .ic{width:42px;height:42px;border-radius:10px;background:#e8eeff;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:var(--mute);font-size:15px}
.steps{counter-reset:s}
.steps .card{position:relative;padding-top:48px}
.steps .card::before{counter-increment:s;content:counter(s);position:absolute;top:16px;left:26px;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.price{align-items:stretch}
.price .card{display:flex;flex-direction:column}
.price .hot{border:2px solid var(--brand);position:relative}
.price .hot::after{content:"Most popular";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:99px}
.amt{font-size:38px;font-weight:800;letter-spacing:-1px;margin:8px 0 2px}
.amt small{font-size:15px;font-weight:500;color:var(--mute)}
.price ul{list-style:none;padding:0;margin:18px 0 24px;color:var(--mute);font-size:15px;flex:1}
.price li{padding:5px 0 5px 24px;position:relative}
.price li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.price .btn{text-align:center}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:12px;max-width:760px;margin-inline:auto}
summary{font-weight:600;cursor:pointer}
details p{color:var(--mute);margin:10px 0 0}
.final{background:var(--ink);color:#fff;text-align:center;border-radius:20px;padding:56px 24px}
.final h2{color:#fff}
.final p{color:#b9c2d6;max-width:520px;margin:0 auto 24px}
footer{background:var(--alt);border-top:1px solid var(--line);padding:64px 0 28px;color:var(--mute);font-size:15px}
.fgrid{display:grid;gap:36px;grid-template-columns:1.6fr repeat(4,1fr)}
.fbrand p{margin:12px 0 0;max-width:280px;font-size:14px}
footer h4{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer li a:hover{color:var(--brand)}
.fbottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px}
.fbottom a:hover{color:var(--brand)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media(max-width:720px){nav ul{display:none}.hero{padding-top:52px}section{padding:56px 0}nav .logo img{height:34px}}
@media(max-width:480px){nav .wrap{height:56px}nav .logo img{height:28px}nav .btn{padding:9px 14px;font-size:14px;white-space:nowrap}}
/* Responsive footer logo */
.fbrand .logo{display:inline-block;max-width:100%}
.fbrand .logo img{display:block;height:36px;width:auto;max-width:100%;object-fit:contain}
@media(max-width:480px){.fbrand .logo img{height:30px}.fgrid{gap:28px}.fbottom{flex-direction:column;gap:8px}}
:root {
    --feature-primary: #4169e1;
    --feature-primary-light: #edf2ff;
    --feature-dark: #172033;
    --feature-text: #596579;
    --feature-bg: #ffffff;
    --feature-section-bg: #f7f9fc;
    --feature-border: #e7ebf2;
}

* {
    box-sizing: border-box;
}

.feature-page {
    width: 100%;
    color: var(--feature-dark);
    font-family: Arial, sans-serif;
}

.feature-page .feature-wrap {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* HERO */

.feature-page .hero {
    padding: 85px 20px;
    text-align: center;
    background: linear-gradient(180deg, #f5f8ff, #ffffff);
}

.feature-page .hero-label {
    display: inline-block;
    padding: 8px 17px;
    border-radius: 30px;
    background: var(--feature-primary-light);
    color: var(--feature-primary);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 22px;
}

.feature-page .hero h1 {
    max-width: 800px;
    margin: 0 auto;
    font-size: clamp(35px, 5vw, 52px);
    line-height: 1.2;
    font-weight: 750;
}

.feature-page .hero h1 span {
    color: var(--feature-primary);
}

.feature-page .hero p {
    max-width: 650px;
    margin: 22px auto 30px;
    color: var(--feature-text);
    font-size: 17px;
    line-height: 1.8;
}

.feature-page .feature-button {
    display: inline-block;
    padding: 13px 25px;
    border-radius: 7px;
    background: var(--feature-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.feature-page .feature-button:hover {
    background: #3154c5;
}

/* GENERAL SECTIONS */

.feature-page .feature-section {
    padding: 85px 0;
}

.feature-page .feature-section.alt {
    background: var(--feature-section-bg);
}

.feature-page .section-heading {
    max-width: 680px;
    margin: 0 auto 50px;
    text-align: center;
}

.feature-page .small-title {
    color: var(--feature-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.feature-page .section-heading h2,
.feature-page .showcase-content h2 {
    margin: 13px 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
}

.feature-page .section-heading p,
.feature-page .showcase-content p {
    color: var(--feature-text);
    line-height: 1.8;
}

/* FEATURE GRID */

.feature-page .feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.feature-page .feature-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-page .feature-card {
    height: 100%;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--feature-border);
    border-radius: 12px;
    transition: 0.3s ease;
}

.feature-page .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(30, 50, 90, 0.08);
    border-color: #d4dfff;
}

.feature-page .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 12px;
    background: var(--feature-primary-light);
    color: var(--feature-primary);
    font-size: 23px;
}

.feature-page .feature-card h3 {
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 700;
}

.feature-page .feature-card p {
    margin: 0;
    color: var(--feature-text);
    font-size: 14px;
    line-height: 1.8;
}

/* SHOWCASE */

.feature-page .showcase {
    display: flex;
    align-items: center;
    gap: 60px;
}

.feature-page .showcase-content,
.feature-page .showcase-visual {
    flex: 1;
    min-width: 0;
}

.feature-page .showcase-visual {
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    border-radius: 18px;
    background: var(--feature-primary-light);
}

.feature-page .dashboard {
    width: 100%;
    max-width: 390px;
    padding: 25px;
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 10px 35px rgba(20, 40, 80, 0.09);
}

.feature-page .dashboard-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    font-weight: 700;
}

.feature-page .dashboard-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--feature-border);
}

.feature-page .dashboard-row:last-child {
    border-bottom: none;
}

.feature-page .dashboard-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--feature-primary-light);
    color: var(--feature-primary);
}

.feature-page .dashboard-row small {
    color: var(--feature-text);
}

/* FEATURE LIST */

.feature-page .feature-list {
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

.feature-page .feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--feature-text);
}

.feature-page .check-icon {
    color: var(--feature-primary);
    font-size: 18px;
}

/* SUPPORT CHANNELS */

.feature-page .channel-card {
    height: 100%;
    padding: 25px;
    background: #fff;
    border: 1px solid var(--feature-border);
    border-radius: 12px;
    transition: 0.3s;
}

.feature-page .channel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(30, 50, 90, 0.07);
}

.feature-page .channel-icon {
    display: block;
    margin-bottom: 17px;
    color: var(--feature-primary);
    font-size: 27px;
}

.feature-page .channel-card h3 {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
}

.feature-page .channel-card p {
    margin: 0;
    color: var(--feature-text);
    font-size: 14px;
    line-height: 1.7;
}

/* REPORTS */

.feature-page .report-highlight {
    padding: 18px;
    margin-bottom: 22px;
    border-radius: 10px;
    background: var(--feature-primary-light);
}

.feature-page .report-highlight small {
    color: var(--feature-text);
}

.feature-page .report-highlight h2 {
    margin: 5px 0 0;
    color: var(--feature-dark);
    font-size: 32px;
}

.feature-page .report-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    font-size: 13px;
}

.feature-page .progress-track {
    height: 9px;
    margin-bottom: 22px;
    overflow: hidden;
    border-radius: 20px;
    background: #e8edf5;
}

.feature-page .progress-fill {
    height: 100%;
    border-radius: 20px;
    background: var(--feature-primary);
}

/* RESPONSIVE */

@media (max-width: 992px) {
    .feature-page .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-page .feature-grid.three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-page .showcase {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .feature-page .hero {
        padding: 65px 15px;
    }

    .feature-page .feature-section {
        padding: 60px 0;
    }

    .feature-page .section-heading h2,
    .feature-page .showcase-content h2 {
        font-size: 28px;
    }

    .feature-page .showcase {
        flex-direction: column;
    }

    .feature-page .showcase-content,
    .feature-page .showcase-visual {
        width: 100%;
    }

    .feature-page .showcase-visual {
        min-height: 280px;
    }
}

@media (max-width: 520px) {
    .feature-page .feature-grid,
    .feature-page .feature-grid.three {
        grid-template-columns: 1fr;
    }

    .feature-page .feature-card,
    .feature-page .channel-card {
        padding: 24px;
    }

    .feature-page .feature-wrap {
        width: 92%;
    }
}
:root {
    --price-primary: #4169e1;
    --price-light: #edf2ff;
    --price-dark: #172033;
    --price-text: #596579;
    --price-bg: #ffffff;
    --price-section: #f7f9fc;
    --price-border: #e7ebf2;
}

.pricing-page,
.pricing-page * {
    box-sizing: border-box;
}

.pricing-page {
    font-family: Arial, sans-serif;
    color: var(--price-dark);
    background: var(--price-bg);
}

.pricing-page .pricing-wrap {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* HERO */

.pricing-page .pricing-hero {
    padding: 80px 20px 55px;
    text-align: center;
    background: linear-gradient(180deg, #f5f8ff, #fff);
}

.pricing-page .pricing-label {
    display: inline-block;
    padding: 8px 17px;
    border-radius: 30px;
    background: var(--price-light);
    color: var(--price-primary);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

.pricing-page .pricing-hero h1 {
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.2;
    margin: 0 auto 18px;
    max-width: 750px;
}

.pricing-page .pricing-hero h1 span {
    color: var(--price-primary);
}

.pricing-page .pricing-hero p {
    max-width: 650px;
    margin: auto;
    color: var(--price-text);
    font-size: 16px;
    line-height: 1.8;
}

/* BILLING TOGGLE */

.pricing-page .billing-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 35px 0 50px;
}

.pricing-page .billing-option {
    color: var(--price-text);
    font-size: 14px;
    font-weight: 600;
}

.pricing-page .billing-option.active {
    color: var(--price-primary);
}

.pricing-page .billing-switch {
    width: 52px;
    height: 28px;
    padding: 3px;
    border: none;
    border-radius: 30px;
    background: var(--price-primary);
    cursor: pointer;
}

.pricing-page .switch-circle {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transition: transform .25s;
}

.pricing-page .billing-switch.yearly .switch-circle {
    transform: translateX(24px);
}

.pricing-page .save-label {
    color: #16845b;
    font-size: 12px;
    font-weight: 700;
}

/* PRICING CARDS */

.pricing-page .plans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
    padding-bottom: 85px;
}

.pricing-page .plan-card {
    position: relative;
    padding: 32px 27px;
    border: 1px solid var(--price-border);
    border-radius: 15px;
    background: #fff;
    transition: .3s ease;
}

.pricing-page .plan-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(30, 50, 90, .09);
}

.pricing-page .plan-card.popular {
    border: 2px solid var(--price-primary);
    box-shadow: 0 12px 35px rgba(65, 105, 225, .10);
}

.pricing-page .popular-label {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 18px;
    border-radius: 30px;
    background: var(--price-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.pricing-page .plan-name {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 12px;
}

.pricing-page .plan-description {
    min-height: 48px;
    color: var(--price-text);
    font-size: 14px;
    line-height: 1.7;
}

.pricing-page .plan-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 25px 0 8px;
}

.pricing-page .currency {
    font-size: 20px;
    font-weight: 700;
}

.pricing-page .amount {
    font-size: 42px;
    font-weight: 750;
    letter-spacing: -1.5px;
}

.pricing-page .period {
    color: var(--price-text);
    font-size: 14px;
}

.pricing-page .yearly-note {
    min-height: 20px;
    color: var(--price-text);
    font-size: 12px;
}

.pricing-page .plan-button {
    display: block;
    width: 100%;
    margin: 25px 0;
    padding: 13px 15px;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--price-primary);
    border-radius: 7px;
    background: #fff;
    color: var(--price-primary);
    font-size: 14px;
    font-weight: 700;
    transition: .3s;
}

.pricing-page .plan-button:hover,
.pricing-page .plan-card.popular .plan-button {
    background: var(--price-primary);
    color: #fff;
}

.pricing-page .plan-card.popular .plan-button:hover {
    background: #3154c5;
}

.pricing-page .plan-divider {
    height: 1px;
    margin: 25px 0;
    background: var(--price-border);
}

.pricing-page .included-title {
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
}

.pricing-page .plan-features {
    padding: 0;
    margin: 0;
    list-style: none;
}

.pricing-page .plan-features li {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--price-text);
    font-size: 13px;
    line-height: 1.6;
}

.pricing-page .feature-check {
    color: var(--price-primary);
    font-weight: 700;
}

/* COMPARISON */

.pricing-page .comparison-section {
    padding: 80px 0;
    background: var(--price-section);
}

.pricing-page .section-heading {
    max-width: 650px;
    margin: 0 auto 45px;
    text-align: center;
}

.pricing-page .section-heading h2 {
    margin: 12px 0;
    font-size: 32px;
}

.pricing-page .section-heading p {
    color: var(--price-text);
    line-height: 1.7;
}

.pricing-page .comparison-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--price-border);
    border-radius: 12px;
}

.pricing-page .comparison-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    text-align: center;
}

.pricing-page .comparison-table th,
.pricing-page .comparison-table td {
    padding: 19px 20px;
    border-bottom: 1px solid var(--price-border);
    font-size: 14px;
}

.pricing-page .comparison-table th {
    color: var(--price-dark);
    background: #f9faff;
}

.pricing-page .comparison-table th:first-child,
.pricing-page .comparison-table td:first-child {
    text-align: left;
}

.pricing-page .comparison-table td:first-child {
    color: var(--price-text);
}

.pricing-page .comparison-table tr:last-child td {
    border-bottom: none;
}

.pricing-page .table-check {
    color: var(--price-primary);
    font-size: 18px;
    font-weight: 700;
}

.pricing-page .table-no {
    color: #aab1bd;
}

/* FAQ */

.pricing-page .faq-section {
    padding: 85px 0;
}

.pricing-page .faq-list {
    max-width: 800px;
    margin: auto;
}

.pricing-page .faq-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--price-border);
}

.pricing-page .faq-item h3 {
    margin: 0 10px 10px;
    font-size: 17px;
}

.pricing-page .faq-item p {
    margin: 0 10px;
    color: var(--price-text);
    font-size: 14px;
    line-height: 1.8;
}

/* RESPONSIVE */

@media(max-width: 900px) {
    .pricing-page .plans-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-page .plan-card:last-child {
        grid-column: 1 / -1;
    }
}

@media(max-width: 600px) {
    .pricing-page .pricing-hero {
        padding: 60px 15px 35px;
    }

    .pricing-page .plans-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pricing-page .plan-card:last-child {
        grid-column: auto;
    }

    .pricing-page .plan-card {
        padding: 28px 23px;
    }

    .pricing-page .section-heading h2 {
        font-size: 27px;
    }

    .pricing-page .comparison-section,
    .pricing-page .faq-section {
        padding: 60px 0;
    }

    .pricing-page .billing-area {
        gap: 10px;
    }
}

/* =================================
   FEATURES PAGE
================================= */

.feature-page {
    font-family: Arial, Helvetica, sans-serif;
    color: #202b3c;
    background: #fff;
}

.feature-page * {
    box-sizing: border-box;
}

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


/* HERO */

.features-hero {
    text-align: center;
    padding: 115px 20px 105px;
    background: #f5f8fc;
}

.features-label,
.features-cta span {
    display: inline-block;
    color: #2463eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 22px;
}

.features-hero h1 {
    max-width: 850px;
    margin: 0 auto 22px;
    font-size: 52px;
    line-height: 1.2;
    font-weight: 700;
    color: #17243a;
}

.features-hero h1 span {
    display: block;
    color: #2870ed;
}

.features-hero p {
    max-width: 690px;
    margin: 0 auto 30px;
    font-size: 16px;
    line-height: 1.9;
    color: #667085;
}

.features-btn {
    display: inline-block;
    padding: 15px 28px;
    border-radius: 5px;
    background: #2868e8;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
}

.features-btn:hover {
    background: #174ebc;
    color: #fff;
}


/* CONTENT SECTIONS */

.features-content {
    padding: 100px 0;
    background: #fff;
}

.features-alternate {
    background: #f7f9fc;
}

.features-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 75px;
}

.reverse-layout {
    grid-template-columns: 1fr 1.1fr;
}

.reverse-layout .features-details {
    order: 1;
}

.reverse-layout .features-visual {
    order: 2;
}


/* FEATURE TEXT */

.features-number {
    display: block;
    margin-bottom: 20px;
    color: #2870ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.features-details h2,
.features-heading h2 {
    margin: 0 0 20px;
    color: #17243a;
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
}

.features-description,
.features-heading p {
    color: #687487;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 28px;
}

.feature-item {
    padding: 15px 0;
    border-bottom: 1px solid #e9edf3;
}

.feature-item:last-child {
    border-bottom: 0;
}

.feature-item h3 {
    margin: 0 0 7px;
    font-size: 17px;
    color: #26354b;
}

.feature-item p {
    margin: 0;
    color: #758195;
    font-size: 14px;
    line-height: 1.7;
}


/* APPLICATION PREVIEW */

.features-visual {
    min-width: 0;
}

.app-preview,
.activity-preview,
.collaboration-preview,
.report-preview {
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    box-shadow: 0 15px 45px rgba(31, 50, 80, .09);
    overflow: hidden;
}

.app-header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #edf0f5;
}

.app-header strong {
    color: #2463d9;
    font-size: 18px;
}

.app-header span {
    font-size: 12px;
    color: #8a94a6;
}

.app-body {
    display: grid;
    grid-template-columns: 115px 1fr;
    min-height: 320px;
}

.app-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 10px;
    background: #f7f9fc;
}

.app-sidebar span {
    padding: 10px 7px;
    font-size: 11px;
    color: #687487;
}

.app-sidebar .active {
    background: #e8efff;
    color: #2868e8;
    border-radius: 5px;
}

.app-main {
    padding: 20px 15px;
    min-width: 0;
}

.app-main h3 {
    margin: 0 0 18px;
    font-size: 18px;
}

.ticket-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.ticket-stats div {
    background: #f5f8fc;
    padding: 12px 7px;
    border-radius: 5px;
}

.ticket-stats small,
.ticket-stats strong {
    display: block;
}

.ticket-stats small {
    font-size: 10px;
    color: #7d899b;
}

.ticket-stats strong {
    margin-top: 5px;
    font-size: 20px;
    color: #26354b;
}

.ticket-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f5;
    font-size: 10px;
}

.ticket-row span {
    color: #7d899b;
}

.ticket-row strong {
    font-size: 11px;
}

.ticket-row small {
    font-size: 9px;
    padding: 5px 6px;
    border-radius: 4px;
}

.status-open {
    background: #e8efff;
    color: #2868e8;
}

.status-pending {
    background: #fff3df;
    color: #d58b17;
}

.status-resolved {
    background: #e6f7ee;
    color: #218453;
}


/* ACTIVITY PREVIEW */

.activity-preview {
    padding: 28px;
}

.activity-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.activity-heading small,
.report-header small {
    color: #2868e8;
    font-size: 10px;
    letter-spacing: 1px;
}

.activity-heading h3,
.report-header h3 {
    margin: 7px 0 0;
    font-size: 21px;
}

.activity-heading > span {
    color: #8994a5;
}

.activity-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 0;
    border-bottom: 1px solid #edf0f5;
}

.activity-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #edf3ff;
    color: #2868e8;
    font-size: 18px;
}

.activity-card strong {
    font-size: 14px;
}

.activity-card p {
    margin: 6px 0;
    font-size: 12px;
    color: #687487;
}

.activity-card small {
    color: #9aa3b1;
    font-size: 11px;
}


/* COLLABORATION PREVIEW */

.collaboration-preview {
    padding: 25px;
}

.collab-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf0f5;
    font-weight: 600;
    font-size: 14px;
}

.collab-header small {
    color: #2868e8;
}

.collab-message {
    display: flex;
    gap: 14px;
    padding: 22px 0;
}

.avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e6efff;
    color: #2868e8;
    font-size: 12px;
    font-weight: 700;
}

.avatar.second {
    background: #e4f5ed;
    color: #258357;
}

.collab-message strong,
.collab-message small {
    display: block;
}

.collab-message strong {
    font-size: 13px;
}

.collab-message small {
    margin-top: 4px;
    color: #929cac;
    font-size: 11px;
}

.collab-message p {
    margin: 9px 0 0;
    color: #687487;
    font-size: 12px;
    line-height: 1.7;
}

.internal-note {
    padding: 17px;
    background: #fff8e9;
    border-radius: 6px;
}

.internal-note span {
    color: #bc851e;
    font-size: 10px;
    font-weight: 700;
}

.internal-note p {
    margin: 8px 0 0;
    color: #80652d;
    font-size: 12px;
    line-height: 1.7;
}

.collab-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid #edf0f5;
    color: #9aa3b1;
    font-size: 12px;
}

.collab-footer button {
    border: none;
    border-radius: 4px;
    padding: 9px 17px;
    background: #2868e8;
    color: white;
}


/* SUPPORT CHANNELS */

.features-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.features-heading h2 {
    font-size: 37px;
}

.channels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 55px;
}

.channel-item {
    padding: 15px 0;
}

.channel-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #edf3ff;
    color: #2868e8;
    font-size: 22px;
}

.channel-item h3 {
    margin: 0 0 10px;
    color: #26354b;
    font-size: 18px;
}

.channel-item p {
    margin: 0;
    color: #758195;
    font-size: 14px;
    line-height: 1.8;
}


/* REPORTS PREVIEW */

.report-preview {
    padding: 28px;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-header > span {
    padding: 8px 12px;
    background: #f2f5fa;
    color: #687487;
    font-size: 11px;
    border-radius: 4px;
}

.report-total {
    margin: 25px 0;
    padding: 22px;
    background: #f5f8ff;
    border-radius: 8px;
}

.report-total small {
    color: #687487;
    font-size: 12px;
}

.report-total h2 {
    margin: 10px 0;
    font-size: 38px;
    color: #1f3556;
}

.report-total span {
    font-size: 11px;
    color: #929cac;
}

.report-progress {
    margin: 22px 0;
}

.report-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.report-progress strong {
    color: #2868e8;
}

.progress-line {
    height: 9px;
    margin-top: 12px;
    border-radius: 20px;
    background: #edf0f5;
    overflow: hidden;
}

.progress-line span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: #2868e8;
}


/* FINAL CTA */

.features-cta {
    padding: 85px 20px;
    text-align: center;
    background: #f1f5fc;
}

.features-cta h2 {
    max-width: 700px;
    margin: 0 auto 18px;
    color: #17243a;
    font-size: 36px;
}

.features-cta p {
    margin-bottom: 28px;
    color: #687487;
    font-size: 15px;
}


/* RESPONSIVE DESIGN */

@media (max-width: 900px) {

    .features-layout,
    .reverse-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .reverse-layout .features-details,
    .reverse-layout .features-visual {
        order: initial;
    }

    .features-visual {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }

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

    .features-hero h1 {
        font-size: 42px;
    }
}


@media (max-width: 600px) {

    .features-container {
        width: 92%;
    }

    .features-hero {
        padding: 80px 15px;
    }

    .features-hero h1 {
        font-size: 34px;
    }

    .features-hero p {
        font-size: 14px;
    }

    .features-content {
        padding: 65px 0;
    }

    .features-details h2,
    .features-heading h2 {
        font-size: 28px;
    }

    .channels-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .activity-preview,
    .collaboration-preview,
    .report-preview {
        padding: 18px;
    }

    .app-body {
        grid-template-columns: 85px 1fr;
    }

    .app-sidebar span {
        font-size: 10px;
    }

    .ticket-row {
        grid-template-columns: 55px 1fr;
    }

    .ticket-row small {
        grid-column: 2;
        width: fit-content;
    }

    .features-cta h2 {
        font-size: 28px;
    }
}

/* CONTACT PAGE */

.contact-page {
    font-family: Arial, Helvetica, sans-serif;
    color: #202b3c;
    background: #fff;
}

.contact-page * {
    box-sizing: border-box;
}

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


/* HERO */

.contact-hero {
    background: #f5f8fc;
    text-align: center;
    padding: 110px 20px 100px;
}

.contact-label {
    color: #2868e8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 18px;
}

.contact-hero h1 {
    font-size: 52px;
    line-height: 1.2;
    color: #17243a;
    margin: 0 0 20px;
}

.contact-hero h1 span {
    display: block;
    color: #2868e8;
}

.contact-hero p {
    max-width: 650px;
    margin: 0 auto 28px;
    font-size: 16px;
    line-height: 1.8;
    color: #687487;
}

.contact-btn {
    display: inline-block;
    padding: 15px 27px;
    background: #2868e8;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
}

.contact-btn:hover {
    background: #174ebc;
    color: #fff;
}


/* MAIN CONTACT SECTION */

.contact-main {
    padding: 100px 0;
}

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

.contact-heading h2 {
    font-size: 36px;
    color: #17243a;
    margin: 0 0 15px;
}

.contact-heading p {
    color: #758195;
    font-size: 15px;
    line-height: 1.8;
}

.contact-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 65px;
    align-items: start;
}


/* CONTACT INFORMATION */

.contact-info {
    padding: 15px 0;
}

.contact-info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
}

.contact-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #edf3ff;
    color: #2868e8;
    font-size: 22px;
}

.contact-info-item h3 {
    font-size: 17px;
    margin: 0 0 9px;
    color: #26354b;
}

.contact-info-item p {
    font-size: 13px;
    line-height: 1.7;
    color: #758195;
    margin: 0 0 8px;
}

.contact-info-item a,
.contact-info-item span {
    font-size: 13px;
    color: #2868e8;
    text-decoration: none;
}

.contact-social {
    padding-top: 20px;
    border-top: 1px solid #e9edf3;
}

.contact-social h3 {
    font-size: 17px;
    margin-bottom: 10px;
}

.contact-social p {
    font-size: 13px;
    color: #758195;
    line-height: 1.7;
}

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-links a {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: #edf3ff;
    color: #2868e8;
    text-decoration: none;
    font-weight: 700;
}

.social-links a:hover {
    background: #2868e8;
    color: #fff;
}


/* CONTACT FORM */

.contact-form-box {
    padding: 38px;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(31, 50, 80, .07);
}

.form-heading h2 {
    margin: 0 0 10px;
    font-size: 25px;
    color: #17243a;
}

.form-heading p {
    margin-bottom: 28px;
    font-size: 13px;
    color: #758195;
}

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

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

.form-group label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #dce2eb;
    border-radius: 5px;
    outline: none;
    background: #fff;
    color: #26354b;
    font-family: inherit;
    font-size: 13px;
    transition: .2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #2868e8;
    box-shadow: 0 0 0 3px rgba(40, 104, 232, .09);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-submit {
    width: 100%;
    border: none;
    padding: 15px;
    background: #2868e8;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.contact-submit:hover {
    background: #174ebc;
}

.form-note {
    display: block;
    margin-top: 15px;
    text-align: center;
    color: #929cac;
    font-size: 11px;
}


/* FAQ */

.contact-faq {
    padding: 90px 0;
    background: #f7f9fc;
}

.faq-list {
    max-width: 850px;
    margin: auto;
}

.faq-item {
    background: #fff;
    margin-bottom: 12px;
    padding: 20px 23px;
    border: 1px solid #e7ebf2;
    border-radius: 6px;
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    cursor: pointer;
    color: #26354b;
    font-size: 15px;
    font-weight: 600;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary span {
    color: #2868e8;
    font-size: 22px;
}

.faq-item[open] summary span {
    transform: rotate(45deg);
}

.faq-item p {
    margin: 15px 0 0;
    color: #758195;
    font-size: 13px;
    line-height: 1.8;
}


/* FINAL CTA */

.contact-cta {
    padding: 85px 20px;
    background: #edf3ff;
    text-align: center;
}

.contact-cta h2 {
    font-size: 34px;
    color: #17243a;
    margin: 0 0 15px;
}

.contact-cta p {
    font-size: 14px;
    color: #758195;
    margin-bottom: 25px;
}


/* RESPONSIVE */

@media(max-width: 850px) {

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .contact-info {
        max-width: 600px;
    }

    .contact-form-box {
        width: 100%;
    }
}

@media(max-width: 600px) {

    .contact-container {
        width: 92%;
    }

    .contact-hero {
        padding: 75px 15px;
    }

    .contact-hero h1 {
        font-size: 35px;
    }

    .contact-hero p {
        font-size: 14px;
    }

    .contact-main,
    .contact-faq {
        padding: 65px 0;
    }

    .contact-heading h2 {
        font-size: 28px;
    }

    .contact-form-box {
        padding: 22px 17px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-cta h2 {
        font-size: 27px;
    }
}

/* CAREERS PAGE */

.careers-page {
    font-family: Arial, Helvetica, sans-serif;
    color: #202b3c;
    background: #fff;
}

.careers-page * {
    box-sizing: border-box;
}

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


/* HERO */

.careers-hero {
    padding: 110px 20px 115px;
    text-align: center;
    background: #f5f8fc;
}

.careers-label {
    display: inline-block;
    color: #2868e8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 22px;
}

.careers-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 25px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #e8efff;
    color: #2868e8;
    font-size: 32px;
}

.careers-hero h1 {
    max-width: 800px;
    margin: 0 auto 22px;
    font-size: 50px;
    line-height: 1.25;
    color: #17243a;
}

.careers-hero h1 span {
    display: block;
    color: #2868e8;
}

.careers-hero p {
    max-width: 650px;
    margin: 0 auto 25px;
    font-size: 15px;
    line-height: 1.9;
    color: #687487;
}


/* STATUS */

.careers-status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-bottom: 28px;
    color: #53647a;
    font-size: 13px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22a06b;
}


/* BUTTON */

.careers-btn {
    display: inline-block;
    padding: 15px 28px;
    border-radius: 5px;
    background: #2868e8;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

.careers-btn:hover {
    background: #174ebc;
    color: #fff;
}


/* CONTENT */

.careers-content {
    padding: 95px 0;
    text-align: center;
}

.careers-content h2 {
    max-width: 700px;
    margin: 0 auto 18px;
    color: #17243a;
    font-size: 36px;
}

.careers-content > .careers-container > p {
    max-width: 700px;
    margin: 0 auto;
    color: #758195;
    font-size: 15px;
    line-height: 1.9;
}


/* CAREER FEATURES */

.careers-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
    margin-top: 65px;
    text-align: left;
}

.career-item {
    padding: 25px 0;
    border-top: 2px solid #2868e8;
}

.career-item > span {
    color: #2868e8;
    font-size: 13px;
    font-weight: 700;
}

.career-item h3 {
    margin: 18px 0 10px;
    color: #26354b;
    font-size: 19px;
}

.career-item p {
    color: #758195;
    font-size: 14px;
    line-height: 1.8;
}


/* FINAL CTA */

.careers-cta {
    padding: 85px 20px;
    text-align: center;
    background: #f1f5fc;
}

.careers-cta h2 {
    margin: 0 0 17px;
    color: #17243a;
    font-size: 35px;
}

.careers-cta p {
    margin-bottom: 28px;
    color: #758195;
    font-size: 15px;
}


/* RESPONSIVE */

@media(max-width: 768px) {

    .careers-hero h1 {
        font-size: 39px;
    }

    .careers-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .careers-content h2,
    .careers-cta h2 {
        font-size: 29px;
    }
}

@media(max-width: 480px) {

    .careers-container {
        width: 92%;
    }

    .careers-hero {
        padding: 80px 15px;
    }

    .careers-hero h1 {
        font-size: 32px;
    }

    .careers-hero p {
        font-size: 14px;
    }

    .careers-content {
        padding: 65px 0;
    }
}

.about-page {
    --primary: #4169e1;
    --dark: #172033;
    --text: #596579;
    --light: #f5f7fb;
    --border: #e7ebf2;
    font-family: Arial, sans-serif;
    color: var(--dark);
    background: #fff;
}

.about-page * {
    box-sizing: border-box;
}

.about-container {
    width: min(1120px, 90%);
    margin: auto;
}

/* ABOUT HERO */

.about-hero {
    text-align: center;
    padding: 95px 20px 90px;
    background: #f5f7fc;
}

.about-hero h1 {
    font-size: 48px;
    margin: 0 0 20px;
    font-weight: 700;
}

.about-hero p {
    max-width: 760px;
    margin: auto;
    color: var(--text);
    font-size: 17px;
    line-height: 1.8;
}

/* COMMON SECTIONS */

.about-section {
    padding: 75px 0;
}

.about-section h2 {
    font-size: 32px;
    margin: 0 0 22px;
}

.about-section p {
    color: var(--text);
    font-size: 15px;
    line-height: 1.9;
    margin: 0 0 17px;
}

/* SOFTWARE CRAFT */

.about-craft {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.about-craft-image {
    height: 350px;
    border-radius: 12px;
    overflow: hidden;
    background: #e8efff;
}

.about-craft-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-quote {
    background: var(--light);
    border-left: 4px solid var(--primary);
    padding: 25px 30px;
    margin-top: 35px;
    border-radius: 0 8px 8px 0;
}

.about-quote blockquote {
    font-size: 17px;
    font-style: italic;
    line-height: 1.8;
    margin: 0 0 12px;
    color: var(--dark);
}

.about-quote span {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

/* CUSTOMIZE */

.about-customize {
    background: var(--light);
}

.about-customize-heading {
    max-width: 780px;
    margin-bottom: 40px;
}

.about-customize-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.about-customize-card {
    background: #fff;
    border: 1px solid var(--border);
    padding: 35px;
    border-radius: 12px;
}

.about-customize-card h3 {
    font-size: 22px;
    margin: 0 0 17px;
}

.about-customize-card p {
    margin-bottom: 20px;
}

.about-text-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.about-text-link:hover {
    text-decoration: underline;
}

/* CONTACT */

.about-contact {
    padding: 80px 0;
}

.about-contact-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 65px;
    align-items: start;
}

.about-contact-info h2 {
    font-size: 34px;
    margin: 0 0 18px;
}

.about-contact-info p {
    color: var(--text);
    font-size: 15px;
    line-height: 1.9;
}

.about-contact-detail {
    margin-top: 30px;
    padding: 20px;
    background: var(--light);
    border-radius: 10px;
}

.about-contact-detail strong {
    display: block;
    margin-bottom: 8px;
}

.about-contact-detail a {
    color: var(--primary);
    text-decoration: none;
}

.about-contact-form {
    border: 1px solid var(--border);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 40, 80, .05);
}

.about-contact-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 9px;
}

.about-contact-form input,
.about-contact-form textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #dfe4ed;
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    margin-bottom: 20px;
}

.about-contact-form input:focus,
.about-contact-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(65, 105, 225, .1);
}

.about-contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.about-submit {
    border: none;
    padding: 14px 28px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
}

.about-submit:hover {
    background: #3155c4;
}

/* CAREERS */

.about-careers {
    padding: 65px 20px;
    background: #f2f5fc;
    text-align: center;
}

.about-careers h2 {
    font-size: 30px;
    margin: 0 0 15px;
}

.about-careers p {
    max-width: 650px;
    margin: 0 auto 22px;
    color: var(--text);
    line-height: 1.8;
    font-size: 15px;
}

.about-careers a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

@media(max-width: 768px) {
    .about-hero {
        padding: 65px 20px;
    }

    .about-hero h1 {
        font-size: 36px;
    }

    .about-section {
        padding: 55px 0;
    }

    .about-craft,
    .about-customize-grid,
    .about-contact-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-craft-image {
        height: 280px;
    }

    .about-section h2 {
        font-size: 27px;
    }

    .about-customize-card,
    .about-contact-form {
        padding: 25px;
    }
}
.cookies-page {
    background: #f5f8fc;
    padding: 90px 20px;
    font-family: Arial, sans-serif;
    text-align: center;
}

.cookies-container {
    max-width: 750px;
    margin: auto;
    padding: 65px 45px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.cookies-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    background: #edf3ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.cookies-label {
    color: #2868e8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cookies-container h1 {
    color: #17243b;
    font-size: 36px;
    line-height: 1.3;
    margin: 20px 0;
}

.cookies-description {
    max-width: 550px;
    margin: 0 auto;
    color: #68758a;
    font-size: 16px;
    line-height: 1.8;
}

.cookies-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
    padding: 10px 18px;
    background: #f0f5ff;
    border-radius: 30px;
    color: #2868e8;
    font-size: 14px;
    font-weight: 600;
}

.cookies-dot {
    width: 8px;
    height: 8px;
    background: #2868e8;
    border-radius: 50%;
}

.cookies-divider {
    width: 55px;
    height: 3px;
    background: #2868e8;
    margin: 30px auto;
    border-radius: 5px;
}

.cookies-note {
    color: #68758a;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 28px;
}

.cookies-button {
    display: inline-block;
    background: #2868e8;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
}

.cookies-button:hover {
    background: #1854c7;
}

@media (max-width: 600px) {
    .cookies-page {
        padding: 50px 15px;
    }

    .cookies-container {
        padding: 45px 22px;
    }

    .cookies-container h1 {
        font-size: 28px;
    }
}
.privacy-page {
    background: #f5f8fc;
    padding: 70px 20px;
}

.privacy-container {
    max-width: 900px;
    margin: auto;
    padding: 45px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.privacy-container h1 {
    color: #1d2b45;
    font-size: 36px;
    margin-bottom: 30px;
}

.privacy-container p {
    color: #596579;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

@media (max-width: 600px) {
    .privacy-container {
        padding: 25px 20px;
    }

    .privacy-container h1 {
        font-size: 28px;
    }
}
.security-page {
    background: #f5f8fc;
    padding: 60px 20px;
    font-family: Arial, sans-serif;
}

.security-container {
    max-width: 900px;
    margin: auto;
    background: #fff;
    padding: 45px;
    border-radius: 12px;
}

.security-container h1 {
    color: #17243b;
    font-size: 36px;
    margin-bottom: 20px;
}

.security-container h2 {
    color: #2868e8;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.security-container p {
    color: #68758a;
    font-size: 15px;
    line-height: 1.8;
}

.security-container a {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 25px;
    background: #2868e8;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
}

.security-container a:hover {
    background: #1854c7;
}

@media (max-width: 600px) {
    .security-container {
        padding: 25px 20px;
    }

    .security-container h1 {
        font-size: 28px;
    }
}
.terms-page {
    background: #f5f8fc;
    padding: 65px 20px;
    font-family: Arial, sans-serif;
}

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

.terms-header {
    background: #ffffff;
    padding: 55px;
    border-radius: 15px;
    margin-bottom: 25px;
}

.terms-label {
    color: #2868e8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.terms-header h1 {
    font-size: 42px;
    color: #17243b;
    margin: 15px 0;
}

.terms-header > p {
    color: #68758a;
    line-height: 1.8;
}

.terms-line {
    width: 55px;
    height: 4px;
    background: #2868e8;
    margin: 25px 0;
    border-radius: 5px;
}

.terms-header .terms-intro {
    font-size: 16px;
    max-width: 750px;
}

.terms-content {
    background: #ffffff;
    padding: 45px 55px;
    border-radius: 15px;
}

.terms-content section {
    padding: 25px 0;
    border-bottom: 1px solid #e9edf4;
}

.terms-content section:first-child {
    padding-top: 0;
}

.terms-content section:last-child {
    border-bottom: none;
}

.terms-content h2 {
    font-size: 20px;
    color: #1c2d49;
    margin-bottom: 15px;
}

.terms-content p {
    color: #657187;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 12px;
}

.terms-footer {
    text-align: center;
    background: #ffffff;
    padding: 40px 20px;
    margin-top: 25px;
    border-radius: 15px;
}

.terms-footer h3 {
    color: #17243b;
    font-size: 24px;
    margin-bottom: 10px;
}

.terms-footer p {
    color: #68758a;
    margin-bottom: 25px;
}

.terms-footer a {
    display: inline-block;
    background: #2868e8;
    color: #ffffff;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 7px;
    font-weight: 600;
}

.terms-footer a:hover {
    background: #1854c7;
}

@media (max-width: 768px) {
    .terms-page {
        padding: 35px 15px;
    }

    .terms-header,
    .terms-content {
        padding: 30px 22px;
    }

    .terms-header h1 {
        font-size: 32px;
    }

    .terms-content h2 {
        font-size: 18px;
    }
}
.api-page {
    background: #f5f8fc;
    padding: 60px 20px;
    font-family: Arial, sans-serif;
}

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

/* Header */
.api-header {
    background: #ffffff;
    padding: 55px 45px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 25px;
}

.api-label {
    display: inline-block;
    color: #2868e8;
    background: #edf3ff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.api-header h1 {
    color: #17243b;
    font-size: 40px;
    margin: 20px 0 12px;
}

.api-header h2 {
    color: #2868e8;
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 18px;
}

.api-header p,
.api-section p,
.api-form-section p,
.api-note p {
    color: #68758a;
    font-size: 15px;
    line-height: 1.8;
}

/* Getting Started */
.api-section {
    background: #ffffff;
    padding: 35px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.api-section h2,
.api-form-section h2 {
    color: #17243b;
    font-size: 25px;
    margin-bottom: 15px;
}

/* Form */
.api-form-section {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
}

.api-form {
    margin-top: 30px;
}

.api-form-group {
    margin-bottom: 22px;
}

.api-form-group label {
    display: block;
    color: #26344a;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 9px;
}

.api-form-group input,
.api-form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid #dce3ed;
    border-radius: 7px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    outline: none;
    background: #ffffff;
}

.api-form-group input:focus,
.api-form-group textarea:focus {
    border-color: #2868e8;
    box-shadow: 0 0 0 3px rgba(40, 104, 232, 0.10);
}

.api-form-group textarea {
    resize: vertical;
}

.api-form button {
    background: #2868e8;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 7px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.api-form button:hover {
    background: #1854c7;
}

/* Contact Note */
.api-note {
    text-align: center;
    padding: 35px 20px;
}

.api-note h3 {
    color: #17243b;
    font-size: 22px;
    margin-bottom: 10px;
}

.api-note a {
    display: inline-block;
    margin-top: 12px;
    color: #2868e8;
    text-decoration: none;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 600px) {
    .api-page {
        padding: 30px 15px;
    }

    .api-header,
    .api-section,
    .api-form-section {
        padding: 25px 20px;
    }

    .api-header h1 {
        font-size: 32px;
    }

    .api-header h2 {
        font-size: 19px;
    }
}
.help-page {
    background: #f5f8fc;
    padding: 60px 20px;
    font-family: Arial, sans-serif;
}

.help-container {
    max-width: 900px;
    margin: auto;
    background: #ffffff;
    padding: 45px;
    border-radius: 12px;
}

.help-container h1 {
    color: #17243b;
    font-size: 36px;
    margin-bottom: 20px;
}

.help-container h2 {
    color: #2868e8;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.help-container p {
    color: #68758a;
    font-size: 15px;
    line-height: 1.8;
}

.help-container a {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 25px;
    background: #2868e8;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
}

.help-container a:hover {
    background: #1854c7;
}

@media (max-width: 600px) {
    .help-container {
        padding: 25px 20px;
    }

    .help-container h1 {
        font-size: 28px;
    }
}
.status-page {
    background: #f5f8fc;
    padding: 60px 20px;
    font-family: Arial, sans-serif;
}

.status-container {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.status-icon {
    width: 65px;
    height: 65px;
    line-height: 65px;
    margin: 0 auto 20px;
    background: #e5f7ed;
    color: #20a45b;
    border-radius: 50%;
    font-size: 35px;
    font-weight: bold;
}

.status-container h1 {
    color: #17243b;
    font-size: 34px;
    margin-bottom: 15px;
}

.status-description {
    color: #68758a;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 35px;
}

.status-card,
.status-section {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: left;
}

.status-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.status-card h3 {
    color: #17243b;
    font-size: 18px;
    margin-bottom: 7px;
}

.status-card p {
    color: #68758a;
    font-size: 14px;
    margin: 0;
}

.status-badge,
.status-running {
    color: #16864b;
    background: #e5f7ed;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.status-section h2 {
    color: #17243b;
    font-size: 21px;
    margin-bottom: 20px;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid #edf0f5;
    color: #46546a;
    font-size: 14px;
}

.status-item:last-child {
    border-bottom: none;
}

.status-footer {
    color: #68758a;
    font-size: 14px;
    margin: 25px 0 15px;
}

.status-container > a {
    display: inline-block;
    background: #2868e8;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 6px;
}

.status-container > a:hover {
    background: #1854c7;
}

@media (max-width: 600px) {
    .status-page {
        padding: 35px 15px;
    }

    .status-card,
    .status-section {
        padding: 20px;
    }

    .status-container h1 {
        font-size: 27px;
    }

    .status-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-item {
        align-items: flex-start;
        flex-direction: column;
    }
}
.faq-page {
    background: #f5f8fc;
    padding: 60px 20px;
    font-family: Arial, sans-serif;
}

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

.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-label {
    display: inline-block;
    color: #2868e8;
    background: #edf3ff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.faq-header h1 {
    color: #17243b;
    font-size: 36px;
    margin: 20px 0 12px;
}

.faq-header p {
    color: #68758a;
    font-size: 15px;
    line-height: 1.8;
    max-width: 650px;
    margin: auto;
}

.faq-content {
    background: #ffffff;
    padding: 35px;
    border-radius: 12px;
}

.faq-content h2 {
    color: #2868e8;
    font-size: 20px;
    margin: 28px 0 16px;
}

.faq-content h2:first-child {
    margin-top: 0;
}

.faq-item {
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 18px 20px;
    background: #ffffff;
}

.faq-item summary {
    color: #17243b;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 25px;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: -3px;
    color: #2868e8;
    font-size: 22px;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item p {
    color: #68758a;
    font-size: 14px;
    line-height: 1.8;
    margin: 15px 0 0;
}

.faq-contact {
    text-align: center;
    padding: 45px 20px;
}

.faq-contact h2 {
    color: #17243b;
    font-size: 24px;
    margin-bottom: 12px;
}

.faq-contact p {
    color: #68758a;
    font-size: 14px;
}

.faq-contact a {
    display: inline-block;
    margin-top: 15px;
    padding: 13px 26px;
    background: #2868e8;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
}

.faq-contact a:hover {
    background: #1854c7;
}

@media (max-width: 600px) {
    .faq-page {
        padding: 35px 15px;
    }

    .faq-header h1 {
        font-size: 28px;
    }

    .faq-content {
        padding: 22px 16px;
    }

    .faq-item {
        padding: 15px;
    }
}

/* CLIENTS SECTION */
.clients-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.clients-section .wrap {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* HEADING */
.clients-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.section-tag {
    display: inline-block;
    padding: 8px 18px;
    background: #e8efff;
    color: #4169e1;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.clients-heading h2 {
    font-size: 42px;
    font-weight: 750;
    color: #17243c;
    line-height: 1.2;
    margin-bottom: 18px;
}

.clients-heading h2 span {
    color: #4169e1;
}

.clients-heading p {
    color: #718096;
    font-size: 16px;
    line-height: 1.8;
}

/* GRID */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* CARDS */
.client-card {
    background: #ffffff;
    padding: 32px;
    border-radius: 18px;
    border: 1px solid #e9edf5;
    box-shadow: 0 8px 30px rgba(32, 55, 100, 0.05);
    transition: all 0.35s ease;
    position: relative;
}

.client-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(32, 55, 100, 0.12);
    border-color: #cbd8ff;
}

/* ICON ROW */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.client-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 27px;
    transition: transform 0.3s ease;
}

.client-card:hover .client-icon {
    transform: scale(1.1) rotate(-5deg);
}

.business-icon {
    background: #eaf1ff;
    color: #4169e1;
}

.support-icon {
    background: #e5f8f2;
    color: #16a67a;
}

.service-icon {
    background: #fff2e7;
    color: #f08a35;
}

.card-number {
    color: #c5ccda;
    font-size: 14px;
    font-weight: 700;
}

/* CARD CONTENT */
.client-card h3 {
    color: #17243c;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 15px;
}

.client-card p {
    color: #778397;
    font-size: 14px;
    line-height: 1.9;
    min-height: 105px;
    margin-bottom: 25px;
}

/* FOOTER */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #edf0f5;
    color: #4169e1;
    font-size: 13px;
    font-weight: 700;
}

.card-footer i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.client-card:hover .card-footer i {
    transform: translate(4px, -4px);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clients-heading h2 {
        font-size: 34px;
    }
}

@media (max-width: 576px) {
    .clients-section {
        padding: 65px 0;
    }

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

    .clients-heading h2 {
        font-size: 29px;
    }

    .client-card {
        padding: 25px;
    }
}
/* ICON DEFAULT STATE */
.client-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 27px;

    background: transparent;
    color: #a0a8b8;

    transition: all 0.35s ease;
}

/* ICON COLORS ON HOVER */
.client-card:hover .business-icon {
    background: #eaf1ff;
    color: #4169e1;
}

.client-card:hover .support-icon {
    background: #e5f8f2;
    color: #16a67a;
}

.client-card:hover .service-icon {
    background: #fff2e7;
    color: #f08a35;
}

/* ICON HOVER ANIMATION */
.client-card:hover .client-icon {
    transform: scale(1.1);
}
#why-choose {
    --primary-blue: #2563eb;
    --primary-blue-light: #eff6ff;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --bg-surface: #ffffff;
    --border-color: #2563eb; /* Matches the blue stroke in reference image */
    --border-inactive: #e2e8f0;
    --radius-card: 14px;
    --shadow-soft: 0 4px 20px -2px rgba(37, 99, 235, 0.06);
    --shadow-hover: 0 12px 28px -4px rgba(37, 99, 235, 0.12);
    
    background-color: #ffffff;
    padding: 80px 24px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  #why-choose .wrap {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Section Header */
  #why-choose .section-header {
    margin-bottom: 48px;
    text-align: left;
  }

  #why-choose .badge {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--primary-blue-light);
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #why-choose h2 {
    color: var(--text-dark);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
  }

  #why-choose p.sub {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.6;
    max-width: 680px;
    margin: 0;
  }

  /* 3x2 Responsive Grid */
  #why-choose .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* Individual Feature Card */
  #why-choose .card {
    background-color: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 32px 28px;
    box-shadow: var(--shadow-soft);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
  }

  #why-choose .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: #1d4ed8;
  }

  /* Icon Container (Optional for visual hierarchy) */
  #why-choose .card-icon {
    font-size: 24px;
    margin-bottom: 16px;
    width: 44px;
    height: 44px;
    background: var(--primary-blue-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #why-choose .card h3 {
    color: var(--text-dark);
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.3;
  }

  #why-choose .card p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
  }

  /* Responsive Breakpoints */
  @media (max-width: 992px) {
    #why-choose .grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  }

  @media (max-width: 640px) {
    #why-choose {
      padding: 50px 16px;
    }

    #why-choose h2 {
      font-size: 28px;
    }

    #why-choose .grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    #why-choose .card {
      padding: 24px 20px;
    }
  }



  
  /* Testimonial Section Theme */
  #testimonial {
    --bg-light: #f4f6fa;
    --card-bg: #ffffff;
    --primary-blue: #2563eb;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border-frame: #cbd5e1;
    --radius-lg: 20px;

    background-color: var(--bg-light);
    padding: 80px 24px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  #testimonial .wrap {
    max-width: 1000px;
    margin: 0 auto;
  }

  /* Section Header */
  #testimonial .section-header {
    margin-bottom: 40px;
  }

  #testimonial h2 {
    color: var(--text-dark);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
  }

  /* Testimonial Box with Outline Frame */
  #testimonial .testimonial-card {
    background-color: var(--card-bg);
    border: 2px solid var(--border-frame);
    border-radius: var(--radius-lg);
    padding: 48px 56px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  }

  /* Quote Styling */
  #testimonial .quote-icon {
    font-size: 64px;
    color: var(--primary-blue);
    line-height: 0.6;
    margin-bottom: 16px;
    font-family: Georgia, serif;
  }

  #testimonial .quote-text {
    color: #334155;
    font-size: 17px;
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 36px 0;
  }

  /* Footer layout inside card (Author & Logo) */
  #testimonial .testimonial-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #e2e8f0;
    padding-top: 24px;
  }

  #testimonial .author-name {
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px 0;
  }

  #testimonial .author-title {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
  }

  /* Company Logo Placeholder */
  #testimonial .company-logo {
    display: flex;
    align-items: center;
  }

  #testimonial .logo-text {
    font-size: 16px;
    color: var(--text-dark);
    letter-spacing: -0.01em;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    #testimonial {
      padding: 50px 16px;
    }

    #testimonial .testimonial-card {
      padding: 28px 20px;
    }

    #testimonial h2 {
      font-size: 26px;
    }

    #testimonial .testimonial-footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
  }
  
.contact-page {
    --contact-primary: #5146e5;
    --contact-dark: #171d3b;
    --contact-muted: #737b91;
    background: #fff;
    color: var(--contact-dark);
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.contact-container {
    width: 90%;
    max-width: 1160px;
    margin: auto;
}

/* HERO */

.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0 80px;
    text-align: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(120,110,255,.15), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(80,150,255,.13), transparent 30%),
        linear-gradient(135deg, #f7f7ff, #f0f1ff);
}

.contact-hero .contact-container {
    position: relative;
    z-index: 2;
}

.contact-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--contact-primary);
    background: #ecebff;
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.contact-hero h1 {
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -2px;
    margin: 24px 0 17px;
}

.contact-hero h1 span {
    display: block;
    color: var(--contact-primary);
}

.contact-hero p {
    max-width: 620px;
    margin: 0 auto 27px;
    color: var(--contact-muted);
    font-size: 15px;
    line-height: 1.8;
}

.contact-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 25px;
    background: var(--contact-primary);
    color: #fff;
    border-radius: 9px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .25s;
}

.contact-btn:hover {
    background: #3930b9;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(81,70,229,.2);
}

.hero-trust {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 35px;
}

.hero-trust span {
    font-size: 12px;
    color: #68718b;
}

.hero-trust i {
    color: #5146e5;
    margin-right: 5px;
}

.hero-decoration {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(81,70,229,.10);
}

.hero-decoration-one {
    width: 230px;
    height: 230px;
    top: -100px;
    left: -80px;
}

.hero-decoration-two {
    width: 300px;
    height: 300px;
    bottom: -180px;
    right: -100px;
}

/* CONTACT CARDS */

.contact-main {
    padding: 85px 0;
}

.contact-heading {
    text-align: center;
    margin-bottom: 45px;
}

.contact-heading h2 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 16px 0 10px;
}

.contact-heading p {
    color: var(--contact-muted);
    font-size: 14px;
    line-height: 1.7;
    max-width: 560px;
    margin: auto;
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.contact-card {
    padding: 30px 25px;
    background: #fff;
    border: 1px solid #e9eaf3;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(30,40,90,.035);
    transition: .3s;
}

.contact-card:hover {
    transform: translateY(-6px);
    border-color: #c9c5ff;
    box-shadow: 0 18px 40px rgba(81,70,229,.09);
}

.contact-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 23px;
    margin-bottom: 22px;
}

.email-icon {
    color: #5146e5;
    background: #eeedff;
}

.phone-icon {
    color: #078cbb;
    background: #e8f7ff;
}

.hours-icon {
    color: #15976b;
    background: #e6f8ef;
}

.card-tag {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--contact-primary);
    margin-bottom: 10px;
}

.contact-card h3 {
    font-size: 20px;
    font-weight: 750;
    margin-bottom: 12px;
}

.contact-card p {
    color: var(--contact-muted);
    font-size: 13px;
    line-height: 1.8;
    min-height: 70px;
    margin-bottom: 18px;
}

.contact-card > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--contact-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.contact-card > a:hover {
    color: #3730a3;
}

.contact-time {
    display: block;
    color: #59627a;
    font-size: 12px;
    margin-top: 9px;
}

.contact-time i {
    color: var(--contact-primary);
    margin-right: 7px;
}

/* SUPPORT NOTE */

.support-note {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 23px 27px;
    margin-top: 30px;
    border: 1px solid #e7e6ff;
    background: #f8f8ff;
    border-radius: 13px;
}

.support-note-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #e9e7ff;
    color: var(--contact-primary);
    font-size: 23px;
    border-radius: 12px;
}

.support-note h4 {
    font-size: 15px;
    font-weight: 750;
    margin-bottom: 5px;
}

.support-note p {
    font-size: 12px;
    color: var(--contact-muted);
    margin: 0;
}

.support-note > a {
    margin-left: auto;
    white-space: nowrap;
    color: var(--contact-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

/* FAQ */

.contact-faq {
    padding: 80px 0 90px;
    background: #f8f9fd;
}

.faq-list {
    max-width: 800px;
    margin: auto;
}

.faq-item {
    background: #fff;
    border: 1px solid #e9eaf2;
    border-radius: 11px;
    margin-bottom: 13px;
    padding: 0 22px;
    transition: .2s;
}

.faq-item[open] {
    border-color: #c9c5ff;
    box-shadow: 0 7px 20px rgba(81,70,229,.05);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 19px 0;
    font-size: 14px;
    font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-plus {
    font-size: 23px;
    font-weight: 400;
    color: var(--contact-primary);
    transition: .2s;
}

.faq-item[open] .faq-plus {
    transform: rotate(45deg);
}

.faq-item p {
    color: var(--contact-muted);
    font-size: 13px;
    line-height: 1.8;
    padding: 0 25px 17px 0;
    margin: 0;
}

/* FINAL CTA */

.contact-cta {
    padding: 75px 0;
    text-align: center;
    background:
        radial-gradient(circle at 90% 10%, rgba(120,110,255,.25), transparent 30%),
        linear-gradient(135deg, #171d3b, #29246a);
    color: #fff;
}

.cta-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    background: rgba(255,255,255,.12);
    color: #c5c0ff;
    border-radius: 15px;
    font-size: 25px;
}

.contact-cta h2 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 13px;
}

.contact-cta p {
    color: #c1c5dc;
    font-size: 14px;
    margin-bottom: 25px;
}

.contact-cta .contact-btn {
    background: #fff;
    color: var(--contact-primary);
}

.contact-cta .contact-btn:hover {
    background: #eeedff;
}

/* RESPONSIVE */

@media(max-width: 991px) {
    .contact-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-card:last-child {
        grid-column: span 2;
    }
}

@media(max-width: 600px) {
    .contact-hero {
        padding: 65px 0;
    }

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

    .hero-trust {
        gap: 13px;
        flex-direction: column;
    }

    .contact-main,
    .contact-faq {
        padding: 60px 0;
    }

    .contact-heading h2,
    .contact-cta h2 {
        font-size: 27px;
    }

    .contact-cards {
        grid-template-columns: 1fr;
    }

    .contact-card:last-child {
        grid-column: auto;
    }

    .contact-card p {
        min-height: auto;
    }

    .support-note {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .support-note > a {
        margin-left: 68px;
    }

    .contact-cta {
        padding: 60px 0;
    }
}
.demo-form-area {
    max-width: 700px;
    margin: 40px auto;
    padding: 40px;
    background: #e7eaf3;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(23, 36, 59, 0.07);
    font-family: Arial, sans-serif;
}

.demo-form-area h2 {
    color: #17243b;
    font-size: 25px;
    margin-bottom: 10px;
}

.demo-form-area > p {
    color: #68758a;
    font-size: 14px;
    margin-bottom: 28px;
}

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

.demo-field {
    margin-bottom: 20px;
}

.demo-field label {
    display: block;
    color: #26344a;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 9px;
}

.demo-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #dce3ed;
    border-radius: 7px;
    outline: none;
    font-size: 14px;
}

.demo-field input:focus {
    border-color: #2868e8;
    box-shadow: 0 0 0 3px rgba(40, 104, 232, 0.09);
}

.demo-submit {
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 14px 20px;
    font-size: 14px;
}

.demo-form small {
    display: block;
    text-align: center;
    color: #8792a3;
    font-size: 11px;
    line-height: 1.6;
    margin-top: 16px;
}

@media (max-width: 480px) {
    .demo-form-area {
        padding: 25px 20px;
    }

    .demo-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #f7f8fc;
    color: #172033;
    min-height: 100vh;
}

/* HEADER */

.error-header {
    padding: 25px 7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 25px;
    font-weight: 800;
    color: #172033;
    text-decoration: none;
}

.logo span {
    color: #8061e9;
}

.header-link {
    text-decoration: none;
    color: #4d566b;
    font-size: 14px;
    font-weight: 600;
}

/* ERROR SECTION */

.error-section {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 70px;
    text-align: center;
}

.error-content {
    max-width: 650px;
    width: 100%;
}

/* 404 NUMBER */

.error-number {
    font-size: clamp(110px, 22vw, 200px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -12px;
    background: linear-gradient(135deg, #3b0bd9, #205abe, #5132bd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

/* BADGE */

.error-badge {
    display: inline-block;
    padding: 9px 18px;
    background: #eee9ff;
    color: #4510e3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 30px;
    margin-bottom: 22px;
}

.error-content h1 {
    font-size: clamp(27px, 5vw, 38px);
    font-weight: 800;
    margin-bottom: 15px;
}

.error-content p {
    font-size: 15px;
    color: #7b8497;
    line-height: 1.8;
    max-width: 480px;
    margin: 0 auto 30px;
}

/* BUTTONS */

.error-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-home {
    background: #3f0de4;
    color: #fff;
    padding: 14px 27px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-home:hover {
    background: #6847d2;
    color: #fff;
    transform: translateY(-3px);
}

.btn-back {
    background: #fff;
    color: #263047;
    border: 1px solid #e4e6ee;
    padding: 14px 27px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-back:hover {
    border-color: #8061e9;
    color: #8061e9;
}

/* FOOTER */

.error-footer {
    margin-top: 55px;
    color: #a0a6b4;
    font-size: 12px;
}

.error-footer a {
    color: #8061e9;
    text-decoration: none;
    font-weight: 600;
}

@media(max-width: 576px) {
    .error-header {
        padding: 20px;
    }

    .error-number {
        letter-spacing: -7px;
    }

    .error-content p {
        font-size: 14px;
    }

    .error-actions {
        flex-direction: column;
        padding: 0 25px;
    }
}