:root{
  --green:#2fb34a;
  --green-dark:#1f8f34;
  --nav-bg:#071024;
  --dark:#0b1220;
  --muted:#9aa6b2;
  --glass: rgba(255,255,255,0.06);
  --radius:14px;
  --max-width:1200px;
}
*{box-sizing:border-box}
html,body{height:100%;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;color:#0b1220}
body{background:linear-gradient(180deg,#f6fbf7 0%, #ffffff 50%);-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(90deg, rgba(7,16,36,0.95), rgba(7,16,36,0.9));backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(4,10,20,0.4)}
.nav-wrap{display:flex;align-items:center;gap:20px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-text .product{font-weight:700;color:#fff;font-size:18px}
.brand-text .tag{display:block;color:var(--muted);font-size:12px}
.main-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.main-nav a{color:rgba(255,255,255,0.9);text-decoration:none;font-weight:600}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.phone{color:rgba(255,255,255,0.8);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--green);color:#fff}
.btn-outline{border:1px solid rgba(255,255,255,0.12);color:#fff;background:transparent}
.btn-ghost{background:#eaf7ee;color:var(--green);border-radius:999px;padding:12px 20px}
.hamburger{display:none;background:none;border:0;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

/* HERO */
.hero {
    position: relative;
    width: 100%;
    min-height: 650px;
    padding: 0;
    overflow: hidden;
}

.hero-visual {
    width: 100%;
}

.hero-content h1 span {
    color: #39c95a;
}

.hero-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-content {
    position: absolute;
    top: 40%;
    left: 6%;
    transform: translateY(-50%);
    width: 42%;
    z-index: 10;
    color: white;
}

.hero-buttons {
    margin-top: 10%;
}

.btn-secondary {
    background: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.hero-image {
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.hero-image img {
     width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.custom-feature-section {
    padding: 90px 6%;
    background: #f5faf6;
    text-align: center;
}

.custom-feature-content {
    max-width: 1100px;
    margin: auto;
}

.custom-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 30px;
    background: #e2f6e5;
    color: #39b54a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.custom-feature-section h2 {
    font-size: 42px;
    line-height: 1.15;
    margin: 0 0 18px;
    color: #07151d;
}

.custom-feature-section h2 span {
    color: #39b54a;
}

.custom-feature-intro {
    max-width: 650px;
    margin: 0 auto 45px;
    color: #66737a;
    font-size: 17px;
    line-height: 1.7;
}

.custom-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 50px;
}

.custom-feature-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e1ebe3;
    border-radius: 14px;
    text-align: left;
    transition: 0.3s ease;
}

.custom-feature-card i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f8e9;
    color: #39b54a;
    font-size: 18px;
}

.custom-feature-card span {
    color: #07151d;
    font-weight: 600;
}

.custom-feature-card:hover {
    transform: translateY(-4px);
    border-color: #39b54a;
}

.custom-feature-special {
    border: 1px dashed #39b54a;
    background: #f0fbf2;
}

.custom-feature-bottom {
    padding: 35px;
    border-radius: 20px;
    background: #07151d;
}

.custom-feature-bottom h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 27px;
}

.custom-feature-bottom h3 span {
    color: #4ade5a;
}

.custom-feature-bottom p {
    color: #b9c6cb;
    margin: 0 0 22px;
}

.custom-feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 25px;
    border-radius: 30px;
    background: #39b54a;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.custom-feature-btn:hover {
    transform: translateY(-2px);
}

.overlay-card {
    position: absolute;
    right: 2%;
    bottom: 2%;
    width: 50%;
    padding: 18px 20px;
    background: rgba(0, 0, 0, 0.20);
    opacity: 0.7;
    border-radius: 12px;
    color: #ffffff;
    z-index: 2;
}

.quote-mark {
    color: #2baf4a;
    font-size: 70px;
    font-weight: 900;
    display: block;
    line-height: 0;
    height: 10px;
}

.overlay-card h4 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
}

.transform-section {
    position: relative;
    min-height: 260px;
    background: #42b83b;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px 180px;
    text-align: center;
}

.transform-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.transform-content h2 {
    color: #ffffff;
    font-size: 32px;
    margin: 0 0 12px;
    font-weight: 800;
}

.transform-content p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto 25px;
}

.transform-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.transform-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.transform-btn.primary {
    background: #07151d;
    color: #ffffff;
}

.transform-btn.secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.7);
}

.transform-btn:hover {
    transform: translateY(-2px);
}

.transform-illustration {
    position: absolute;
    bottom: 0;
    z-index: 1;
}


.transform-illustration img {
    width: 190px;
    height: auto;
    display: block;
}

.transform-left img {
    width: 280px;
    height: auto;
}

.transform-left {
    left: 35px;
    bottom: 30%;
    
}

.transform-right {
    right: 35px;
    bottom: 30%;
}

.hero-benefits .benefit {
    color: #ffffff;
}

.hero-benefits .benefit i {
    color: #39c95a;
}

.hero-grid{display:grid;grid-template-columns:1fr 560px;gap:36px;align-items:center}
.display{font-size:44px;line-height:1.02;margin:6px 0 14px;font-weight:800;color:#071024}
.accent{color:var(--green)}
.lead{color:var(--muted);max-width:520px}
.trust-list{display:flex;gap:18px;margin:16px 0 22px;padding:0;list-style:none}
.trust-list li{background:#fff;padding:8px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(43,74,48,0.06);color:#2b3c2e;font-weight:600}
.trust-list i{margin-right:8px;color:var(--green)}
.hero-ctas{display:flex;gap:12px;margin-top:6px}




.hero-right{display:flex;justify-content:flex-end}
.device-mockups{position:relative;width:100%;max-width:560px}
.laptop-mockup{width:100%;height:360px;border-radius:18px;box-shadow:0 30px 60px rgba(11,18,32,0.14);overflow:hidden;background:linear-gradient(180deg,#fff,#f6fbf7)}
.laptop-mockup .screen{display:flex;height:100%}
.sidebar{width:160px;background:linear-gradient(180deg,var(--green) 0%, #0ea04a 100%);color:#fff;padding:16px}
.sidebar .sb-logo{font-weight:800;margin-bottom:12px}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:8px;margin-bottom:6px;opacity:0.95}
.sidebar li.active{background:rgba(255,255,255,0.06)}
.dash-body{flex:1;padding:18px;display:flex;flex-direction:column;gap:12px}
.dash-row{display:flex;gap:12px}
.stat-card{flex:1;background:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 18px rgba(10,20,30,0.06)}
.stat-card .num{font-weight:800;color:#0b1220}
.stat-card .label{color:var(--muted);font-size:13px}
.card{background:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 18px rgba(10,20,30,0.06);flex:1}
.card-head{font-weight:700;margin-bottom:8px}
.chart-placeholder{height:64px;background:linear-gradient(90deg,#f5faf5,#ffffff);border-radius:8px;padding:8px}
.activities ul,.events ul{margin:0;padding:0;list-style:none;font-size:14px;color:var(--muted)}

.phone-mockup{position:absolute;right:-30px;bottom:-18px;width:110px;height:220px;border-radius:22px;background:linear-gradient(180deg,#fff,#f3fff3);box-shadow:0 18px 40px rgba(7,16,36,0.12);display:flex;align-items:center;justify-content:center}
.p-screen{width:88%;height:92%;background:linear-gradient(180deg,#fff,#f7fff7);border-radius:16px;padding:10px;display:flex;flex-direction:column}
.p-row{display:flex;justify-content:space-between;padding:6px 0;font-weight:700}
.p-actions button{margin-right:8px;padding:6px 8px;border-radius:8px;border:0;background:var(--green);color:#fff}

/* Features Grid */
.section{padding:64px 0}
.section-head{margin-bottom:28px}
.section-head.small{font-size:14px}
.center{text-align:center}
.muted{color:var(--muted)}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{background:linear-gradient(180deg,#fff,#fbfffb);padding:18px;border-radius:14px;box-shadow:0 12px 30px rgba(11,18,32,0.06);transition:transform .28s ease,box-shadow .28s ease}
.feature-card .icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,var(--green),var(--green-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(11,18,32,0.12)}

/* Why */
.two-col{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start}
.checks{list-style:none;padding:0;margin:12px 0}
.checks li{padding:10px 0;font-weight:600;color:#2b3c2e}
.checks li i{color:var(--green);margin-right:10px}
.promo-card{background:#071024;color:#fff;padding:18px;border-radius:12px;margin-top:18px;box-shadow:0 12px 30px rgba(7,16,36,0.3)}
.hero-image{height:320px;background:linear-gradient(180deg,#eaf7ee,#f3fff6);border-radius:12px;position:relative;overflow:hidden}
.overlay-card{position:absolute;right:18px;bottom:18px;background:#0b1220;color:#fff;padding:18px;border-radius:10px;width:70%}
.stats-strip{display:flex;gap:12px;margin-top:14px}
.stats-strip .stat{background:#fff;padding:12px;border-radius:10px;flex:1;text-align:center}

/* Modules */
.modules-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.module-card{background:#fff;padding:18px;border-radius:14px;text-align:center;box-shadow:0 12px 28px rgba(11,18,32,0.06);transition:transform .22s ease}
.module-card i{font-size:22px;color:var(--green);margin-bottom:8px}
.module-card:hover{transform:translateY(-8px)}

/* How it works */
.steps{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.step{background:#fff;padding:20px;border-radius:12px;flex:1;text-align:center;box-shadow:0 12px 28px rgba(11,18,32,0.06)}
.step-num{font-weight:800;color:var(--green);font-size:20px}
.connector{height:4px;background:linear-gradient(90deg,var(--green),#c9f5d0);flex-basis:60px;border-radius:6px}

/* CTA */
.cta{position:relative;padding-top:0;margin-top:40px}
.cta .wave{display:block;width:100%;height:80px}
.cta-inner{display:flex;align-items:center;gap:20px;padding:40px 0;background:var(--green-dark);color:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.cta-content h2{font-size:28px;margin:0}
.cta-actions{margin-top:12px;display:flex;gap:10px}
.cta-visual .book{width:120px;height:80px;background:linear-gradient(180deg,#fff,#eaf7ee);border-radius:8px;box-shadow:0 12px 28px rgba(11,18,32,0.08)}

/* Footer */
.site-footer{background:linear-gradient(180deg,#061227,#04101c);color:#fff;padding:40px 0 12px}
.footer-grid{display:grid;grid-template-columns:280px 1fr 1fr 320px;gap:20px}
.footer-grid h4{margin-top:0}
.socials a{color:#fff;margin-right:8px}
.newsletter{display:flex;gap:8px;margin-top:8px}
.newsletter input{flex:1;padding:10px;border-radius:10px;border:0}
.bottom{padding:18px 0;text-align:center;color:rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.02);margin-top:18px}

/* Free school tool */
.free-tools-page {
    min-height: 100vh;
    padding: 80px 6%;
    background: #f7faf8;
}

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

.tools-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 30px;
    background: #e5f7e8;
    color: #39b54a;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.tools-header h1 {
    margin: 0;
    color: #07151d;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800;
}

.tools-header h1 span {
    color: #39b54a;
}

.tools-header p {
    margin: 20px auto 0;
    max-width: 620px;
    color: #657278;
    font-size: 17px;
    line-height: 1.7;
}


.tools-grid {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.tool-card {
    background: #ffffff;
    border: 1px solid #e1ebe4;
    border-radius: 20px;
    padding: 30px;
    transition: 0.3s ease;
    box-shadow: 0 8px 30px rgba(7, 21, 29, 0.05);
}

.tool-card:hover {
    transform: translateY(-7px);
    border-color: #39b54a;
    box-shadow: 0 15px 40px rgba(7, 21, 29, 0.10);
}


.tool-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #e7f8e9;
    color: #39b54a;

    border-radius: 16px;
    font-size: 25px;

    margin-bottom: 25px;
}


.tool-label {
    color: #39b54a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}


.tool-content h2 {
    margin: 8px 0 12px;
    color: #07151d;
    font-size: 23px;
}


.tool-content p {
    color: #68757b;
    line-height: 1.65;
    min-height: 78px;
}


.tool-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 18px;

    padding: 12px 20px;

    border-radius: 25px;

    background: #07151d;
    color: #ffffff;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

    transition: 0.3s ease;
}

.tool-button:hover {
    background: #39b54a;
    transform: translateX(3px);
}


.tools-bottom {
    max-width: 800px;
    margin: 65px auto 0;

    padding: 40px;

    text-align: center;

    background: #07151d;
    border-radius: 22px;
}

.tools-bottom h2 {
    margin: 0 0 10px;
    color: #ffffff;
}

.tools-bottom p {
    color: #b9c6cb;
    line-height: 1.6;
    margin-bottom: 25px;
}

.tools-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 25px;

    background: #39b54a;
    color: #ffffff;

    border-radius: 30px;

    text-decoration: none;
    font-weight: 600;
}

/* =====================================
   PRICING PAGE
===================================== */

.pricing-page {
    padding: 90px 6%;
    background: #f7faf8;
}


/* =====================================
   HEADER
===================================== */

.pricing-header {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.pricing-badge,
.custom-pricing-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 30px;
    background: #e5f7e8;
    color: #39b54a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}

.pricing-header h1 {
    margin: 18px 0 15px;
    color: #07151d;
    font-size: 44px;
    line-height: 1.2;
}

.pricing-header h1 span {
    color: #39b54a;
}

.pricing-header p {
    color: #66747a;
    font-size: 17px;
    line-height: 1.6;
}


/* =====================================
   PRICING CARDS
===================================== */

.pricing-grid {
    max-width: 1200px;
    margin: auto;

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

    align-items: stretch;
}

.pricing-card {
    position: relative;

    background: #ffffff;
    border: 1px solid #e0e9e3;
    border-radius: 22px;

    padding: 32px;

    transition: .3s ease;

    /* Keep all cards equal height */
    display: flex;
    flex-direction: column;
}

.pricing-card .pricing-btn {
    margin-top: auto;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(7,21,29,.09);
}


/* BUSINESS */

.pricing-card.popular {
    border: 2px solid #39b54a;
    box-shadow: 0 12px 35px rgba(57,181,74,.12);
}

.popular-badge {
    position: absolute;

    top: -13px;
    left: 50%;

    transform: translateX(-50%);

    background: #39b54a;
    color: #ffffff;

    padding: 6px 18px;
    border-radius: 20px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}


/* PLAN */

.plan-label {
    color: #39b54a;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.pricing-card h2 {
    margin: 8px 0;

    color: #07151d;
    font-size: 24px;
    line-height: 1.25;
}

.plan-description {
    color: #68757b;
    line-height: 1.6;

    min-height: 78px;
}


/* =====================================
   SETUP PRICE
===================================== */

.setup-price {
    padding: 20px 0;

    border-top: 1px solid #edf1ee;
    border-bottom: 1px solid #edf1ee;
}

.setup-price small {
    display: block;

    color: #89959a;
    font-size: 12px;
}

.setup-price strong {
    display: inline-block;

    color: #07151d;
    font-size: 32px;

    margin: 4px 5px 0 0;
}

.setup-price span {
    color: #89959a;
    font-size: 12px;
}


/* =====================================
   HOSTING
===================================== */

.hosting-info,
.plan-detail {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px 0;

    border-bottom: 1px solid #edf1ee;
}

.hosting-info i,
.plan-detail i {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #e7f8e9;
    color: #39b54a;
}

.hosting-info strong,
.hosting-info span,
.plan-detail strong,
.plan-detail span {
    display: block;
}

.hosting-info strong,
.plan-detail strong {
    color: #07151d;
    font-size: 13px;
}

.hosting-info span,
.plan-detail span {
    color: #89959a;
    font-size: 11px;

    margin-top: 3px;
}


/* PREMIUM SOURCE CODE */

.source-owned i {
    background: #dff7e3;
}

.source-owned strong {
    color: #269c38;
}

/* =====================================
   PREMIUM SUPPORT
===================================== */

.premium-support {
    margin-top: 18px;
    margin-bottom: 18px;

    padding: 16px;

    background: #f6faf7;

    border: 1px solid #dce9df;

    border-radius: 12px;
}

.support-title {

    display: flex;
    align-items: center;
    gap: 8px;

    color: #07151d;

    font-size: 12px;
    font-weight: 700;

    margin-bottom: 8px;
}

.support-title i {
    color: #39b54a;
}

.support-price {

    color: #07151d;

    font-size: 20px;
    font-weight: 800;

    margin-bottom: 5px;
}

.support-price span {

    color: #89959a;

    font-size: 11px;
    font-weight: 400;
}

.premium-support p {

    margin: 0 0 7px;

    color: #68757b;

    font-size: 11px;

    line-height: 1.5;
}

.premium-support small {

    color: #39b54a;

    font-size: 10px;
    font-weight: 600;
}


/* PREMIUM BUTTON */

.premium-btn {
    background: #07151d;
}

.premium-btn:hover {
    background: #39b54a;
}


/* =====================================
   MAINTENANCE PRICE
===================================== */

.maintenance-price {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 0;

    margin-bottom: 18px;
}

.maintenance-price small {
    display: block;

    color: #89959a;
    font-size: 11px;
}

.maintenance-price strong {
    color: #07151d;
    font-size: 21px;
}

.maintenance-price span {
    color: #89959a;
    font-size: 11px;
}

.or-line {
    color: #39b54a;

    font-size: 10px;
    font-weight: 800;
}


/* =====================================
   BUTTON
===================================== */

.pricing-btn {

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 13px 20px;

    border-radius: 28px;

    background: #07151d;
    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s ease;
}

.pricing-btn:hover {
    background: #39b54a;
}

.pricing-btn.primary {
    background: #39b54a;
}

.pricing-btn.primary:hover {
    background: #07151d;
}


/* =====================================
   COMPARISON
===================================== */

.comparison-section {

    max-width: 1100px;

    margin: 80px auto 0;

    text-align: center;
}

.comparison-section h2 {
    color: #07151d;
    margin-bottom: 8px;
}

.comparison-intro {
    color: #68757b;
    margin-bottom: 30px;
}

.comparison-table {

    background: #ffffff;

    border: 1px solid #e1ebe4;

    border-radius: 18px;

    overflow: hidden;

    text-align: left;
}

.comparison-row {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    border-bottom: 1px solid #edf1ee;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-row > div {
    padding: 16px 20px;

    color: #59676d;

    font-size: 14px;

    border-right: 1px solid #edf1ee;
}

.comparison-row > div:last-child {
    border-right: none;
}

.comparison-heading {
    background: #07151d;
}

.comparison-heading > div {
    color: #ffffff;
    font-weight: 700;
}

.comparison-row > div:first-child {
    color: #07151d;
    font-weight: 600;
}

.comparison-row .owned {
    color: #269c38;
    font-weight: 700;
}


/* =====================================
   COMMON FEATURES
===================================== */

.pricing-includes {

    max-width: 1100px;

    margin: 75px auto 0;

    text-align: center;
}

.pricing-includes h2 {
    color: #07151d;

    margin-bottom: 30px;
}

.included-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.included-grid > div {

    padding: 22px;

    background: #ffffff;

    border-radius: 15px;

    border: 1px solid #e1ebe4;

    text-align: left;
}

.included-grid i {

    display: block;

    color: #39b54a;

    font-size: 20px;

    margin-bottom: 12px;
}

.included-grid span,
.included-grid small {
    display: block;
}

.included-grid span {

    color: #07151d;

    font-weight: 700;
}

.included-grid small {

    color: #7a878c;

    margin-top: 5px;
}


/* =====================================
   MAINTENANCE
===================================== */

.maintenance-section {

    max-width: 1000px;

    margin: 50px auto 0;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 30px;

    background: #07151d;

    border-radius: 20px;
}

.maintenance-icon {

    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #18333f;

    color: #4ade5a;

    border-radius: 14px;

    font-size: 22px;
}

.maintenance-section h2 {

    color: #ffffff;

    margin: 0 0 6px;

    font-size: 21px;
}

.maintenance-section p {

    color: #b9c6cb;

    margin: 0;

    line-height: 1.5;
}


/* =====================================
   CUSTOM DEVELOPMENT PRICING
===================================== */

.custom-pricing-section {
    max-width: 1100px;
    margin: 75px auto 0;

    padding: 45px;

    background: #ffffff;

    border: 1px solid #dfeae2;

    border-radius: 22px;
}


/* HEADER */

.custom-pricing-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 35px;
}

.custom-pricing-header h2 {
    color: #07151d;

    font-size: 32px;

    line-height: 1.2;

    margin: 15px 0 10px;
}

.custom-pricing-header h2 span {
    color: #39b54a;
}

.custom-pricing-header p {
    color: #68757b;

    margin: 0;

    line-height: 1.6;
}


/* CONTENT */

.custom-pricing-content {

    display: grid;

    grid-template-columns: 1.3fr .7fr;

    gap: 35px;

    align-items: stretch;
}


/* LEFT */

.custom-pricing-info {

    padding: 25px;

    background: #f7faf8;

    border-radius: 16px;
}

.custom-pricing-info h3 {

    color: #07151d;

    margin: 0 0 10px;

    font-size: 21px;
}

.custom-pricing-info p {

    color: #68757b;

    line-height: 1.6;

    margin: 0 0 20px;
}


.custom-examples {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.custom-examples div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #07151d;

    font-size: 13px;

    font-weight: 600;
}

.custom-examples i {

    color: #39b54a;
}


/* RIGHT PRICE BOX */

.custom-price-box {

    padding: 28px;

    background: #07151d;

    border-radius: 16px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.custom-price-box > span {

    color: #4ade5a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}

.custom-price-box h3 {

    color: #ffffff;

    font-size: 25px;

    margin: 10px 0;
}

.custom-price-box p {

    color: #b9c6cb;

    font-size: 13px;

    line-height: 1.6;

    margin: 0 0 22px;
}

.custom-pricing-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 18px;

    border-radius: 25px;

    background: #39b54a;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: .3s ease;
}

.custom-pricing-btn:hover {

    background: #45c956;

    transform: translateY(-2px);
}


/* =====================================
   DELIVERY
===================================== */

.delivery-note {

    margin: 30px auto 0;

    text-align: center;

    color: #07151d;
}

.delivery-note i {

    color: #39b54a;

    margin-right: 8px;
}

/* =====================================
   ABOUT PAGE
===================================== */

.about-hero {
    min-height: 620px;
    padding: 90px 8%;
    background: #07151d;

    display: grid;
    grid-template-columns: 1fr 420px;
    align-items: center;
    gap: 70px;
}

.about-hero-content {
    max-width: 650px;
}

.about-badge,
.section-label {
    color: #39b54a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.about-hero h1 {
    margin: 18px 0;
    color: #ffffff;
    font-size: 58px;
    line-height: 1.08;
}

.about-hero h1 span {
    color: #39c95a;
}

.about-hero p {
    max-width: 600px;
    color: #b9c6cb;
    font-size: 18px;
    line-height: 1.7;
}

.about-hero-buttons {
    display: flex;
    gap: 14px;
    margin-top: 30px;
}

.about-btn-primary,
.about-btn-secondary {
    padding: 13px 22px;
    border-radius: 28px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.about-btn-primary {
    background: #39b54a;
    color: #ffffff;
}

.about-btn-secondary {
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.3);
}


/* HERO VISUAL */

.about-hero-visual {
    height: 390px;
    position: relative;
    border-radius: 30px;
    background:
        radial-gradient(circle at center,
        rgba(57,181,74,.25),
        transparent 60%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-main-icon {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #39b54a;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 65px;

    box-shadow: 0 25px 70px rgba(57,181,74,.3);
}

.about-visual-card {
    position: absolute;

    padding: 13px 18px;

    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);

    border-radius: 14px;

    color: #ffffff;

    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 13px;
    font-weight: 600;
}

.about-visual-card i {
    color: #4ade5a;
}

.card-one {
    top: 45px;
    left: 5px;
}

.card-two {
    top: 125px;
    right: 0;
}

.card-three {
    bottom: 45px;
    left: 40px;
}


/* STORY */

.about-story {
    padding: 100px 8%;

    display: grid;
    grid-template-columns: .8fr 1.2fr;

    gap: 80px;
    align-items: center;
}

.about-story-image {
    min-height: 400px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #dff5e3,
            #f6fbf7
        );

    display: flex;
    align-items: center;
    justify-content: center;
}

.story-icon {
    width: 160px;
    height: 160px;

    border-radius: 50%;

    background: #39b54a;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 60px;
}

.about-story-content h2,
.about-section-heading h2,
.build-content h2,
.edugenz-about-content h2 {
    color: #07151d;
    font-size: 42px;
    line-height: 1.2;
    margin: 15px 0 20px;
}

.about-story-content h2 span,
.about-section-heading h2 span,
.build-content h2 span,
.edugenz-about-content h2 span {
    color: #39b54a;
}

.about-story-content p {
    color: #68757b;
    line-height: 1.75;
    font-size: 16px;
}


/* BELIEFS */

.about-beliefs {
    padding: 100px 8%;
    background: #f5faf6;
}

.about-section-heading {
    max-width: 700px;
    margin: auto;
    text-align: center;
}

.about-section-heading p {
    color: #68757b;
    line-height: 1.7;
}

.belief-grid {
    max-width: 1100px;
    margin: 50px auto 0;

    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 18px;
}

.belief-card {
    padding: 28px;

    background: #ffffff;
    border: 1px solid #e1ebe4;

    border-radius: 18px;

    transition: .3s ease;
}

.belief-card:hover {
    transform: translateY(-6px);
    border-color: #39b54a;
}

.belief-icon {
    width: 50px;
    height: 50px;

    border-radius: 12px;

    background: #e7f8e9;
    color: #39b54a;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
}

.belief-card h3 {
    color: #07151d;
    margin: 18px 0 8px;
}

.belief-card p {
    color: #68757b;
    font-size: 14px;
    line-height: 1.6;
}


/* WHAT WE BUILD */

.what-we-build {
    padding: 100px 8%;

    display: grid;
    grid-template-columns: 1.2fr .8fr;

    gap: 70px;

    align-items: center;
}

.build-content p {
    color: #68757b;
    line-height: 1.7;
    max-width: 650px;
}

.build-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 30px;
}

.build-points div {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #07151d;
    font-weight: 600;
}

.build-points i {
    color: #39b54a;
}

.build-highlight {
    padding: 38px;

    border-radius: 24px;

    background: #07151d;
}

.build-highlight-icon {
    width: 55px;
    height: 55px;

    border-radius: 14px;

    background: #18333f;
    color: #4ade5a;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
}

.build-highlight h3 {
    color: #ffffff;
    font-size: 27px;
}

.build-highlight h3 span {
    color: #4ade5a;
}

.build-highlight p {
    color: #b9c6cb;
    line-height: 1.6;
}

.build-highlight a {
    display: inline-flex;
    gap: 8px;
    color: #4ade5a;
    text-decoration: none;
    font-weight: 600;
}


/* EDUGENZ */

.edugenz-about {
    padding: 90px 8%;

    background: #f5faf6;

    display: grid;
    grid-template-columns: .7fr 1.3fr;

    gap: 80px;
    align-items: center;
}

.edugenz-about-visual {
    display: flex;
    justify-content: center;
}

.edugenz-logo-circle {
    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: #39b54a;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 85px;

    box-shadow: 0 25px 60px rgba(57,181,74,.25);
}

.edugenz-about-content p {
    color: #68757b;
    line-height: 1.7;
    max-width: 650px;
}

.edugenz-features {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin: 25px 0;
}

.edugenz-features div {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #07151d;
    font-weight: 600;
}

.edugenz-features i {
    color: #39b54a;
}

.edugenz-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 13px 23px;

    border-radius: 28px;

    background: #07151d;
    color: #ffffff;

    text-decoration: none;
    font-weight: 600;
}


/* APPROACH */

.our-approach {
    padding: 100px 8%;
}

.approach-grid {
    max-width: 1100px;
    margin: 50px auto 0;

    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 18px;
}

.approach-card {
    position: relative;

    padding: 30px;

    border: 1px solid #e1ebe4;
    border-radius: 18px;

    background: #ffffff;
}

.approach-number {
    position: absolute;
    top: 18px;
    right: 20px;

    color: #dceee0;
    font-size: 28px;
    font-weight: 800;
}

.approach-card > i {
    color: #39b54a;
    font-size: 25px;
}

.approach-card h3 {
    color: #07151d;
}

.approach-card p {
    color: #68757b;
    line-height: 1.6;
    font-size: 14px;
}


/* CTA */

.about-cta {
    margin: 0 6% 70px;

    padding: 65px 8%;

    border-radius: 28px;

    background: #07151d;

    text-align: center;
}

.about-cta span {
    color: #39b54a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.about-cta h2 {
    color: #ffffff;
    font-size: 40px;
    max-width: 700px;
    margin: 15px auto;
}

.about-cta h2 strong {
    color: #4ade5a;
}

.about-cta p {
    max-width: 650px;
    margin: auto;

    color: #b9c6cb;
    line-height: 1.7;
}

.about-cta-buttons {
    margin-top: 28px;

    display: flex;
    justify-content: center;
    gap: 14px;
}

.about-cta-primary,
.about-cta-secondary {
    padding: 13px 23px;

    border-radius: 28px;

    text-decoration: none;
    font-weight: 600;
}

.about-cta-primary {
    background: #39b54a;
    color: #ffffff;
}

.about-cta-secondary {
    border: 1px solid rgba(255,255,255,.3);
    color: #ffffff;
}


/* RESPONSIVE */

@media(max-width:900px) {

    .about-hero,
    .about-story,
    .what-we-build,
    .edugenz-about {
        grid-template-columns: 1fr;
    }

    .belief-grid,
    .approach-grid {
        grid-template-columns: 1fr 1fr;
    }

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

}

@media(max-width:600px) {

    .about-hero {
        padding: 70px 6%;
    }

    .belief-grid,
    .approach-grid,
    .build-points,
    .edugenz-features {
        grid-template-columns: 1fr;
    }

    .about-story,
    .what-we-build,
    .edugenz-about,
    .about-beliefs,
    .our-approach {
        padding: 70px 6%;
    }

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

    .about-story-content h2,
    .about-section-heading h2,
    .build-content h2,
    .edugenz-about-content h2 {
        font-size: 32px;
    }

    .about-cta {
        margin: 0 4% 40px;
        padding: 45px 6%;
    }

    .about-cta h2 {
        font-size: 30px;
    }

}

/* Responsive */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr 420px}
  .features-grid{grid-template-columns:repeat(3,1fr)}
  .modules-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-right{order:2}
  .hero-left{order:1}
  .main-nav{display:none}
  .hamburger{display:block}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .modules-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:480px){
  .display{font-size:32px}
  .features-grid{grid-template-columns:1fr}
  .modules-grid{grid-template-columns:1fr}
  .nav-wrap{padding:12px}
  .brand-text .product{font-size:16px}
}

/* reveal animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* =========================================================
   MOBILE & TABLET RESPONSIVE FIXES
   Add this at the VERY END of style.css
========================================================= */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
}

img {
    max-width: 100%;
}

/* Prevent long text from creating horizontal overflow */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span {
    overflow-wrap: break-word;
}


/* =========================================================
   HEADER
========================================================= */

@media (max-width: 1100px) {

    .nav-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    .main-nav ul {
        gap: 12px;
    }

    .main-nav a {
        font-size: 14px;
    }

    .phone {
        font-size: 13px;
    }

}


/* =========================================================
   TABLET HEADER
========================================================= */

@media (max-width: 900px) {

    .main-nav {
        display: none;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }

    .nav-actions {
        margin-left: auto;
    }

}


/* =========================================================
   MOBILE HEADER
========================================================= */

@media (max-width: 600px) {

    .site-header {
        position: sticky;
        top: 0;
    }

    .nav-wrap {
        min-height: 68px;
        padding: 10px 16px;
        gap: 10px;
    }

    .brand {
        gap: 8px;
        min-width: 0;
    }

    .logo-mark svg {
        width: 34px;
        height: 34px;
    }

    .brand-text {
        min-width: 0;
    }

    .brand-text .product {
        font-size: 16px;
    }

    .brand-text .tag {
        font-size: 10px;
        white-space: nowrap;
    }

    .nav-actions {
        gap: 7px;
    }

    /* Hide phone number on small screens */
    .nav-actions .phone {
        display: none;
    }

    /* Make demo button compact */
    .nav-actions .btn-primary {
        padding: 8px 11px;
        font-size: 12px;
        white-space: nowrap;
    }

    .hamburger {
        padding: 6px;
    }

    .hamburger span {
        width: 21px;
    }

}


/* =========================================================
   MOBILE MENU
   ========================================================= */

/*
   This works with a JS menu that adds the "active"
   class to .main-nav.

   If your current script uses a different class,
   send me script.js and I'll match it exactly.
*/

@media (max-width: 900px) {

    .main-nav.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        background: #071024;

        padding: 15px 20px 20px;

        box-shadow: 0 15px 30px rgba(0,0,0,.25);
    }

    .main-nav.active ul {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .main-nav.active li {
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .main-nav.active li:last-child {
        border-bottom: none;
    }

    .main-nav.active a {
        display: block;
        padding: 13px 5px;
        font-size: 15px;
    }

}


/* =========================================================
   HERO — IMPORTANT FIX
========================================================= */

/*
   Your current hero is NOT using .hero-grid.
   It uses:
   .hero
   .hero-visual
   .hero-content

   Therefore the old responsive rules don't affect it.
*/


@media (max-width: 900px) {

    .hero {
        min-height: auto;
        display: flex;
        flex-direction: column;

        background: #07151d;
    }

    .hero-visual {
        width: 100%;
        order: 1;
    }

    .hero-visual img {
        width: 100%;
        height: auto;
        min-height: 260px;
        object-fit: cover;
        display: block;
    }

    .hero-content {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        order: 2;

        width: 100%;

        padding: 45px 30px 50px;

        background: #07151d;
    }

    .hero-content h1 {
        font-size: 42px;
        line-height: 1.1;
        margin: 0 0 18px;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.6;
        margin: 0;
        max-width: 650px;
    }

    .hero-benefits {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 18px;
        margin-top: 25px;
    }

    .hero-benefits .benefit {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 14px;
    }

    .hero-buttons {
        margin-top: 28px;

        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero-buttons .btn {
        margin: 0;
    }

}


@media (max-width: 600px) {

    .hero-visual img {
        min-height: 220px;
        object-fit: cover;
    }

    .hero-content {
        padding: 35px 20px 40px;
    }

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

    .hero-description {
        font-size: 15px;
    }

    .hero-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

}


/* =========================================================
   SECTIONS / CONTAINER
========================================================= */

@media (max-width: 600px) {

    .container {
        width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .section {
        padding: 50px 0;
    }

    .section-head {
        margin-bottom: 25px;
    }

    .section-head h2 {
        font-size: 28px;
        line-height: 1.2;
    }

}


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

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

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

    .feature-card {
        padding: 20px;
    }

}


/* =========================================================
   CUSTOM FEATURE SECTION
========================================================= */

@media (max-width: 900px) {

    .custom-feature-section {
        padding: 70px 5%;
    }

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

}


@media (max-width: 600px) {

    .custom-feature-section {
        padding: 55px 18px;
    }

    .custom-feature-section h2 {
        font-size: 31px;
    }

    .custom-feature-intro {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .custom-feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 30px;
    }

    .custom-feature-card {
        padding: 17px;
    }

    .custom-feature-bottom {
        padding: 25px 18px;
    }

    .custom-feature-bottom h3 {
        font-size: 22px;
    }

    .custom-feature-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

}


/* =========================================================
   WHY EDUGENZ
========================================================= */

@media (max-width: 900px) {

    .two-col {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .two-col {
        gap: 35px;
    }

    .why .left h2 {
        font-size: 29px;
        line-height: 1.2;
    }

    .checks li {
        font-size: 14px;
        line-height: 1.5;
    }

    .promo-card {
        padding: 20px;
    }

    .hero-image {
        height: auto;
        min-height: 260px;
    }

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

    .overlay-card {
        right: 12px;
        bottom: 12px;

        width: calc(100% - 24px);

        padding: 15px;
    }

    .overlay-card h4 {
        font-size: 14px;
    }

    .quote-mark {
        font-size: 50px;
    }

}


/* =========================================================
   MODULES
========================================================= */

@media (max-width: 1100px) {

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

}


@media (max-width: 700px) {

    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

}


@media (max-width: 480px) {

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

}


/* =========================================================
   HOW IT WORKS
========================================================= */

@media (max-width: 700px) {

    .steps {
        flex-direction: column;
        gap: 12px;
    }

    .step {
        width: 100%;
    }

    .connector {
        width: 4px;
        height: 30px;
        flex-basis: auto;
    }

}


/* =========================================================
   GREEN CTA / TRANSFORM SECTION
========================================================= */

@media (max-width: 1000px) {

    .transform-section {
        padding: 50px 80px;
    }

    .transform-illustration img {
        width: 130px;
    }

    .transform-left img {
        width: 190px;
    }

}


@media (max-width: 700px) {

    .transform-section {
        min-height: auto;

        padding: 55px 20px;

        display: block;

        text-align: center;
    }

    .transform-content {
        max-width: 100%;
    }

    .transform-content h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .transform-content p {
        font-size: 15px;
    }

    .transform-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .transform-btn {
        width: 100%;
        justify-content: center;
    }

    /* Decorative images become smaller */
    .transform-illustration {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;

        margin: 20px auto 0;
    }

    .transform-left {
        display: none;
    }

    .transform-right {
        display: block;
    }

    .transform-right img {
        width: 120px;
        margin: auto;
    }

}


/* =========================================================
   FOOTER
========================================================= */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .site-footer {
        padding-top: 45px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-grid .f-col {
        width: 100%;
    }

    .footer-grid h4 {
        margin-bottom: 12px;
    }

    .contact-col p {
        word-break: break-word;
    }

    .bottom {
        font-size: 12px;
        padding: 15px 18px;
    }

}


/* =========================================================
   FREE SCHOOL TOOLS
========================================================= */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .free-tools-page {
        padding: 55px 18px;
    }

    .tools-header {
        margin-bottom: 35px;
    }

    .tools-header h1 {
        font-size: 34px;
    }

    .tools-header p {
        font-size: 15px;
    }

    .tools-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tool-card {
        padding: 22px;
    }

    .tool-content p {
        min-height: auto;
    }

    .tools-bottom {
        margin-top: 40px;
        padding: 28px 20px;
    }

    .tools-contact {
        width: 100%;
        justify-content: center;
    }

}


/* =========================================================
   PRICING PAGE
========================================================= */

@media (max-width: 1000px) {

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

    .pricing-card.popular {
        grid-column: span 2;
    }

}


@media (max-width: 650px) {

    .pricing-page {
        padding: 55px 18px;
    }

    .pricing-header {
        margin-bottom: 40px;
    }

    .pricing-header h1 {
        font-size: 34px;
    }

    .pricing-header p {
        font-size: 15px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pricing-card.popular {
        grid-column: auto;
    }

    .pricing-card {
        padding: 24px 20px;
    }

}


/* =========================================================
   COMPARISON TABLE
========================================================= */

/*
   The old 4-column table causes horizontal overflow.
   On mobile, turn each row into a stacked card.
*/

@media (max-width: 700px) {

    .comparison-section {
        margin-top: 50px;
    }

    .comparison-table {
        border-radius: 14px;
        overflow: hidden;
    }

    .comparison-row {
        display: block;
        border-bottom: 1px solid #edf1ee;
        padding: 10px 0;
    }

    .comparison-row > div {
        border-right: none;
        border-bottom: none;
        padding: 8px 16px;
    }

    .comparison-heading {
        display: none;
    }

    .comparison-row > div:first-child {
        background: #f5faf6;
        font-weight: 800;
        padding-top: 12px;
    }

}


/* =========================================================
   INCLUDED FEATURES
========================================================= */

@media (max-width: 800px) {

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

}


@media (max-width: 600px) {

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

    .pricing-includes {
        margin-top: 50px;
    }

}


/* =========================================================
   MAINTENANCE
========================================================= */

@media (max-width: 650px) {

    .maintenance-section {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px 20px;
    }

}


/* =========================================================
   CUSTOM DEVELOPMENT PRICING
========================================================= */

@media (max-width: 800px) {

    .custom-pricing-section {
        padding: 30px 22px;
        margin-left: 18px;
        margin-right: 18px;
    }

    .custom-pricing-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


@media (max-width: 600px) {

    .custom-pricing-header h2 {
        font-size: 28px;
    }

    .custom-pricing-info {
        padding: 20px;
    }

    .custom-examples {
        grid-template-columns: 1fr;
    }

    .custom-price-box {
        padding: 24px 20px;
    }

}


/* =========================================================
   ABOUT PAGE
========================================================= */

@media (max-width: 900px) {

    .about-hero {
        min-height: auto;
        padding: 70px 6%;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-hero-visual {
        height: 330px;
    }

    .about-story,
    .what-we-build,
    .edugenz-about {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .belief-grid,
    .approach-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 600px) {

    .about-hero {
        padding: 55px 20px;
    }

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

    .about-hero p {
        font-size: 15px;
    }

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

    .about-btn-primary,
    .about-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .about-hero-visual {
        height: 270px;
    }

    .about-main-icon {
        width: 130px;
        height: 130px;
        font-size: 45px;
    }

    .about-visual-card {
        font-size: 11px;
        padding: 10px 12px;
    }

    .card-one {
        top: 15px;
        left: 0;
    }

    .card-two {
        top: 80px;
        right: 0;
    }

    .card-three {
        bottom: 15px;
        left: 10px;
    }

    .about-story,
    .what-we-build,
    .edugenz-about,
    .about-beliefs,
    .our-approach {
        padding: 55px 20px;
    }

    .belief-grid,
    .approach-grid,
    .build-points,
    .edugenz-features {
        grid-template-columns: 1fr;
    }

    .about-story-content h2,
    .about-section-heading h2,
    .build-content h2,
    .edugenz-about-content h2 {
        font-size: 30px;
    }

    .edugenz-logo-circle {
        width: 180px;
        height: 180px;
        font-size: 60px;
    }

    .about-cta {
        margin: 0 18px 40px;
        padding: 40px 20px;
    }

    .about-cta h2 {
        font-size: 29px;
    }

    .about-cta-buttons {
        flex-direction: column;
    }

    .about-cta-primary,
    .about-cta-secondary {
        width: 100%;
        display: flex;
        justify-content: center;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .nav-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .brand-text .tag {
        display: none;
    }

    .nav-actions .btn-primary {
        padding: 8px 9px;
        font-size: 11px;
    }

    .hero-content h1 {
        font-size: 30px;
    }

    .custom-feature-section h2 {
        font-size: 28px;
    }

    .transform-content h2 {
        font-size: 25px;
    }

}

/* =========================================================
   COMPACT FEATURE CARDS — MOBILE
========================================================= */

@media (max-width: 600px) {

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .feature-card {
        padding: 15px 13px;
        border-radius: 12px;
    }

    .feature-card .icon {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        font-size: 16px;
        margin-bottom: 9px;
    }

    .feature-card h3 {
        font-size: 14px;
        line-height: 1.3;
        margin: 0 0 7px;
    }

    .feature-card p {
        font-size: 11.5px;
        line-height: 1.45;
        margin: 0;
    }

}

/* =========================================================
   CUSTOM FEATURE CARDS — MOBILE 2 COLUMNS
========================================================= */

@media (max-width: 600px) {

    .custom-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .custom-feature-card {
        padding: 15px 12px;
        min-height: 70px;
        gap: 10px;
        border-radius: 12px;
    }

    .custom-feature-card i {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 8px;
        font-size: 14px;
    }

    .custom-feature-card span {
        font-size: 12px;
        line-height: 1.3;
    }

}

/* =========================================
   WHY SCHOOLS LOVE - MOBILE OPTIMIZATION
========================================= */

@media (max-width: 600px) {

    .two-col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 6%;
    }

    .two-col .left h2 {
        font-size: 28px;
        line-height: 1.2;
        margin: 0 0 18px;
    }

    .checks {
        margin: 0;
        padding: 0;
    }

    .checks li {
        display: flex;
        align-items: flex-start;
        gap: 9px;

        padding: 7px 0;

        font-size: 14px;
        line-height: 1.45;
    }

    .checks li i {
        flex-shrink: 0;
        margin: 3px 0 0;
        font-size: 15px;
    }

    /* Free tools promo */
    .promo-card {
        margin-top: 18px;
        padding: 20px;
        border-radius: 14px;
    }

    .promo-card h3 {
        font-size: 19px;
        line-height: 1.3;
        margin: 0 0 8px;
    }

    .promo-card p {
        font-size: 13px;
        line-height: 1.5;
        margin: 0 0 15px;
    }

    .promo-card .btn {
        padding: 9px 15px;
        font-size: 13px;
    }

    /* Image */
    .two-col .hero-image {
        height: 230px;
        border-radius: 16px;
    }

    .two-col .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Quote overlay */
    .two-col .overlay-card {
        right: 10px;
        bottom: 10px;

        width: calc(100% - 20px);

        padding: 12px 14px;
        border-radius: 10px;
    }

    .two-col .quote-mark {
        font-size: 42px;
        height: 7px;
    }

    .two-col .overlay-card h4 {
        font-size: 13px;
        line-height: 1.4;
        margin: 0;
    }

    /* Stats */
    .stats-strip {
        gap: 8px;
        margin-top: 10px;
    }

    .stats-strip .stat {
        padding: 9px 6px;
        border-radius: 8px;
        font-size: 12px;
    }
}

/* =========================================
   MODULES GRID
========================================= */

.modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 25px;
}

.module-card {
    background: #ffffff;
    padding: 20px 16px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(11,18,32,0.06);
    border: 1px solid #edf1ee;
    transition: transform .22s ease, box-shadow .22s ease;
}

.module-card i {
    display: block;
    font-size: 22px;
    color: var(--green);
    margin-bottom: 10px;
}

.module-card h4 {
    margin: 0 0 6px;
    color: #07151d;
    font-size: 16px;
}

.module-card p {
    margin: 0;
    color: #68757b;
    font-size: 13px;
    line-height: 1.5;
}

.module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(11,18,32,0.10);
    border-color: #39b54a;
}

/* =========================================
   HOW IT WORKS - COMPACT MOBILE
========================================= */

@media (max-width: 550px) {

    .steps {
        flex-direction: column;
        gap: 6px;
        margin-top: 18px;
    }

    .step {
        width: 100%;
        padding: 14px 16px;
        border-radius: 10px;

        /* Make card content compact */
        display: grid;
        grid-template-columns: 38px 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px;
        text-align: left;
        align-items: center;
    }

    .step-num {
        grid-row: 1 / 3;

        width: 34px;
        height: 34px;

        margin: 0;

        font-size: 12px;
    }

    .step h4 {
        margin: 0 0 3px;
        font-size: 15px;
        line-height: 1.2;
    }

    .step p {
        margin: 0;
        font-size: 11.5px;
        line-height: 1.4;
    }

    /* Smaller vertical connector */
    .connector {
        width: 2px;
        height: 12px;

        flex: 0 0 12px;

        align-self: center;
    }
}
/* =========================================================
   MOBILE HAMBURGER NAVIGATION
   ========================================================= */

@media (max-width: 820px) {

    /* Header */
    .site-header {
        position: relative;
        z-index: 9999;
    }

    .nav-wrap {
        position: relative;
    }

    /* Hide desktop navigation */
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        background: #07151d;

        padding: 15px 20px 20px;

        box-shadow: 0 12px 25px rgba(0,0,0,0.15);

        z-index: 9999;
    }


    /* SHOW NAVIGATION WHEN HAMBURGER IS CLICKED */
    .main-nav.open {
        display: block;
    }


    /* Navigation list */
    .main-nav ul {
        display: flex;
        flex-direction: column;

        width: 100%;

        margin: 0;
        padding: 0;

        list-style: none;

        gap: 0;
    }


    /* Navigation items */
    .main-nav li {
        width: 100%;
    }


    /* Navigation links */
    .main-nav a {
        display: block;

        width: 100%;

        padding: 14px 10px;

        color: #ffffff;

        text-decoration: none;

        border-bottom: 1px solid rgba(255,255,255,0.08);

        font-size: 15px;
    }


    .main-nav a:hover {
        color: #39c95a;
        background: rgba(255,255,255,0.04);
    }


    /* Hamburger */
    .hamburger {
        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        width: 42px;
        height: 42px;

        padding: 8px;

        margin: 0;

        background: transparent;

        border: none;

        cursor: pointer;

        z-index: 10000;
    }


    /* Hamburger lines */
    .hamburger span {
        display: block;

        width: 24px;
        height: 2px;

        margin: 3px 0;

        background: #ffffff;

        border-radius: 3px;

        transition:
            transform 0.3s ease,
            opacity 0.2s ease;
    }


    /* =========================
       HAMBURGER ? X
       ========================= */

    .hamburger.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* =========================
       MOBILE NAV ACTIONS
       ========================= */

    .nav-actions {
        margin-left: auto;

        display: flex;

        align-items: center;

        gap: 8px;
    }


    /* Hide phone on smaller screens */
    .phone {
        display: none;
    }


    /* Make demo button smaller */
    .nav-actions .btn-primary {
        padding: 9px 12px;

        font-size: 13px;

        white-space: nowrap;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .nav-actions .btn-primary {
        display: none;
    }

    .hamburger {
        width: 40px;
        height: 40px;
    }

    .main-nav {
        padding: 12px 15px 18px;
    }

    .main-nav a {
        padding: 13px 8px;
        font-size: 15px;
    }

}