/* ================= BASE ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",Arial,sans-serif
}
body{background:#fff;color:#333}
.container{width:90%;max-width:1200px;margin:auto}

/* ================= HEADER ================= */
.header{
    position:sticky;
    top:0;
    z-index:999;
    background:#fff;
    padding:15px 0;
    box-shadow:0 2px 10px rgba(0,0,0,.15)
}
.header-flex{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.logo{height:55px}
.nav a{
    color:#000;
    text-decoration:none;
    margin-left:25px
}

/* ================= HERO ================= */
.hero{
    background:linear-gradient(135deg,#0a2540,#1d4ed8);
    color:#fff;
    padding:100px 0;
    text-align:center
}
.hero h2{font-size:42px;margin-bottom:15px}
.hero p{
    max-width:750px;
    margin:auto;
    font-size:18px;
    opacity:.9
}
.btn{
    display:inline-block;
    margin-top:30px;
    padding:14px 32px;
    background:#38bdf8;
    color:#0a2540;
    text-decoration:none;
    border-radius:30px;
    font-weight:600
}

/* ================= SECTION HEAD ================= */
.section-head{margin-bottom:50px}
.section-head.center{text-align:center}
.section-head.big{max-width:900px;margin:0 auto 60px}
.section-tag{
    display:inline-block;
    padding:15px 28px;
    background:#eef2ff;
    color:#4f46e5;
    border-radius:40px;
    font-size:18px;
    font-weight:600;
    margin-bottom:18px
}
.section-title{
    font-size:28px;
    font-weight:800;
    color:#0f172a;
    line-height:1.2
}
.section-title .highlight{color:#4f46e5}
.section-subtitle{
    margin-top:20px;
    font-size:16px;
    color:#6b7280;
    line-height:1.6
}

/* ================= SERVICES ================= */
.services{padding:80px 0;background:#f8fafc}
.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px
}
.service-box{
    background:#fff;
    padding:30px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s
}
.service-box:hover{transform:translateY(-8px)}
.service-box .icon{font-size:42px;margin-bottom:15px}

.web{border-top:5px solid #2563eb}
.android{border-top:5px solid #22c55e}
.flutter{border-top:5px solid #38bdf8}
.ios{border-top:5px solid #111827}
.unity{border-top:5px solid #9333ea}
.uiux{border-top:5px solid #f59e0b}
.seo{border-top:5px solid #ef4444}
.php{border-top:5px solid #6366f1}

/* ================= PLATFORMS ================= */
.platforms{padding:80px 0}
.platforms.pro{background:#f8fafc}
.platform-grid-pro{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px
}
.platform-pill{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border-radius:18px;
    font-size:18px;
    font-weight:600;
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
    transition:.3s
}
.platform-pill:hover{transform:translateY(-6px)}
.platform-pill i{font-size:22px}

.platform-pill.wp{background:linear-gradient(135deg,#21759b,#3b82f6)}
.platform-pill.woo{background:linear-gradient(135deg,#7f54b3,#a855f7)}
.platform-pill.shopify{background:linear-gradient(135deg,#16a34a,#22c55e)}
.platform-pill.magento{background:linear-gradient(135deg,#f97316,#fb923c)}
.platform-pill.opencart{background:linear-gradient(135deg,#dc2626,#ef4444)}
.platform-pill.html{background:linear-gradient(135deg,#e34f26,#f97316)}
.platform-pill.css{background:linear-gradient(135deg,#1572b6,#38bdf8)}
.platform-pill.js{background:linear-gradient(135deg,#f7df1e,#eab308);color:#111}
.platform-pill.php{background:linear-gradient(135deg,#777bb3,#6366f1)}
.platform-pill.dotnet{background:linear-gradient(135deg,#512bd4,#7c3aed)}

/* ================= WHY STATS ================= */
.why-stats{
    padding:50px 0;
    background:linear-gradient(180deg,#fff,#f8faff)
}
.why-stats-grid{
    margin-top:70px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px
}
.why-stat{
    background:#fff;
    border-radius:20px;
    padding:40px 20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(79,70,229,.08);
    transition:.3s
}
.why-stat:hover{transform:translateY(-8px)}
.why-stat h3{
    font-size:42px;
    font-weight:800;
    color:#4f46e5;
    margin-bottom:10px
}
.why-stat p{font-size:15px;color:#475569}

/* ================= ABOUT ================= */
.about{padding:90px 0}
.about-flex{
    display:flex;
    gap:60px;
    flex-wrap:wrap;
    align-items:center
}
.about-img{flex:1}
.about-img img{width:100%;border-radius:18px}
.about-content{flex:1}
.about-text{
    margin-bottom:30px;
    padding-left:15px;
    border-left:3px solid #4f46e5;
    line-height:1.7
}
.about-call{
    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none
}
.about-call i{
    width:50px;
    height:50px;
    border-radius:50%;
    border:2px solid #e5e7eb;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#4f46e5
}
.about-call strong{font-size:18px}

/* ================= FOOTER ================= */
.footer{
    background:#000d32;
    color:#cbd5f5;
    padding:60px 0 0
}
.footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:40px
}
.footer h4{color:#fff;margin-bottom:10px}
.footer-bottom{
    margin-top:40px;
    padding:20px;
    text-align:center;
    background:#01092a
}

/* ================= RESPONSIVE ================= */

/* Large */
@media(min-width:1400px){
    .hero h2{font-size:48px}
    .section-title{font-size:34px}
}

/* Tablet */
@media(max-width:1024px){
    .hero{padding:80px 0}
    .hero h2{font-size:36px}
    .about-flex{flex-direction:column}
    .footer-grid{grid-template-columns:1fr 1fr}
}



/* Mobile */
@media(max-width:768px){
    .header-flex{flex-direction:column;gap:15px}
    .nav a{margin:0 10px;font-size:14px}
    .hero{padding:70px 0}
    .hero h2{font-size:28px}
    .hero p{font-size:15px}
    .section-title{font-size:22px}
    .section-tag{font-size:14px;padding:10px 20px}
    .service-grid{grid-template-columns:1fr}
    .platform-grid-pro{grid-template-columns:1fr 1fr}
    .why-stats-grid{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr;}
}

/* Small Mobile */
@media(max-width:480px){
    .hero h2{font-size:24px}
    .btn{padding:12px 24px;font-size:14px}
    .platform-grid-pro,
    .why-stats-grid{grid-template-columns:1fr}
    .logo{height:45px}
}