/* ---------- Variables & Reset ---------- */
    :root{
      --bg:#0f0f1a;
      --card:#0f1724;
      --muted:#9aa4b2;
      --accent1:#ff6b6b; /* coral */
      --accent2:#6b8bff; /* blue */
      --accent3:#9bff6b; /* lime */
      --glass: rgba(255,255,255,0.04);
      --radius:16px;
      --gap:20px;
      color-scheme: dark;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;font-size:16px;background:linear-gradient(180deg,#081025 0%, #071018 60%);color:#e6eef8}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}
    .container{max-width:1150px;margin:0 auto;padding:40px}

    /* Header */
    header{position:sticky;top:0;backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(10,10,15,0.6), rgba(10,10,15,0.35));border-bottom:1px solid rgba(255,255,255,0.03);z-index:20}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px}
    .logo{display:flex;gap:12px;align-items:center;font-weight:700}
    .logo-mark{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:#081018;font-weight:700}
    nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
    .cta{padding:10px 16px;border-radius:12px;background:linear-gradient(90deg,var(--accent2),var(--accent1));font-weight:700}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 480px;gap:32px;align-items:center;padding:80px 0}
    .hero h1{font-size:44px;line-height:1.02;margin:0 0 14px}
    .hero p{color:var(--muted);margin:0 0 20px}
    .hero .buttons{display:flex;gap:12px}
    .btn{padding:12px 18px;border-radius:12px;font-weight:700;border:0;cursor:pointer}
    .btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));}
    .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

    /* Card grid for services */
    .services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);transition:transform .28s ease, box-shadow .28s ease}
    .card:hover{transform:translateY(-10px);box-shadow:0 12px 40px rgba(0,0,0,0.6)}
    .card .icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:12px}

    /* Portfolio carousel */
    .portfolio{margin:40px 0}
    .carousel{position:relative;overflow:hidden;border-radius:14px}
    .slides{display:flex;gap:12px;transition:transform .5s cubic-bezier(.2,.9,.2,1)}
    .slide{min-width:360px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:12px}
    .slide img{border-radius:10px}
    .carousel-controls{display:flex;gap:8px;position:absolute;right:12px;top:12px}

    /* Testimonials */
    .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0}
    .testimonial{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}

    /* Blog */
    .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0}
    .post{border-radius:12px;overflow:hidden}

    /* Contact */
    .contact{display:grid;grid-template-columns:1fr 360px;gap:24px;margin:40px 0}
    .form input,.form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;margin-bottom:12px}
    .form button{padding:12px 16px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent2),var(--accent1));font-weight:700}

    footer{padding:28px 0;margin-top:40px;border-top:1px solid rgba(255,255,255,0.03)}

    /* Responsive */
    @media (max-width:1000px){
      .hero{grid-template-columns:1fr;}
      .services{grid-template-columns:repeat(2,1fr)}
      .testimonials{grid-template-columns:1fr}
      .blog-grid{grid-template-columns:1fr}
      .contact{grid-template-columns:1fr}
      nav ul{display:none}
    }
    @media (max-width:600px){
      .services{grid-template-columns:1fr}
    }

    /* Small utility */
    .muted{color:var(--muted)}
    .small{font-size:.92rem}