:root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted: #94a3b8;
      --accent:#2dd4bf;
      --accent-2:#60a5fa;
      --glass: rgba(255,255,255,0.03);
      --maxw:1100px;
    }

    /* Reset & basic */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, var(--bg) 0%, #071027 100%);
      color:#e6eef6;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    /* Layout */
    .wrap{max-width:var(--maxw);margin:0 auto;padding:48px 20px;position:relative}
    nav{position:fixed;right:28px;top:28px;z-index:40}
    nav a{
      display:inline-block;
      margin-left:10px;
      padding:8px 12px;
      border-radius:10px;
      background:transparent;
      color:var(--muted);
      font-size:14px;
      transition:all .18s ease;
      border:1px solid transparent;
    }
    nav a:hover{color:#fff;background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.04)}

    /* Hero (big spaced typography) */
    .hero{
      padding:90px 0 60px;
      display:flex;
      gap:40px;
      align-items:center;
      justify-content:space-between;
    }
    .hero-left{flex:1;min-width:260px}
    .eyebrow{font-weight:300;color:var(--muted);letter-spacing:2px;font-size:13px;margin-bottom:14px}
    .title{
      font-family: "Playfair Display", serif;
      font-weight:700;
      font-size:48px;
      margin:0 0 16px;
      letter-spacing:8px;
      line-height:1;
      color:#fff;
      text-transform:uppercase;
    }
    .subtitle{
      font-size:20px;color:var(--muted);max-width:70%;
      margin-bottom:22px;
      font-weight:300;
    }
    .cta-row{display:flex;gap:12px;align-items:center}
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
      color:#042027;
      padding:12px 18px;border-radius:10px;font-weight:600;
      box-shadow:0 6px 24px rgba(45,212,191,0.12),0 2px 6px rgba(0,0,0,0.35);
      transition:transform .18s ease,box-shadow .18s ease;
    }
    .btn:hover{transform:translateY(-4px);box-shadow:0 10px 36px rgba(45,212,191,0.16)}

    /* Right hero image / badge */
    .hero-right{width:430px;flex-shrink:0}
    .profile-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.04);
      display:flex;gap:12px;align-items:center;
      backdrop-filter: blur(6px);
    }
    .profile-card img{width:120px;height:120px;border-radius:12px;object-fit:cover;border:2px solid rgba(255,255,255,0.06)}
    .pc-info h4{margin:0;font-size:16px}
    .pc-info p{margin:4px 0 0;color:var(--muted);font-size:13px}

    /* Services / grid */
    .section{padding:64px 0}
    .section h3{font-size:18px;letter-spacing:3px;color:var(--muted);margin:0 0 18px}
    .services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
    .service{
      background:var(--card);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);
      transition:transform .18s ease,box-shadow .18s ease;
    }
    .service:hover{transform:translateY(-8px);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
    .service i{font-size:20px;color:var(--accent);display:inline-block;width:46px;height:46px;border-radius:10px;background:rgba(45,212,191,0.06);text-align:center;line-height:46px;margin-bottom:12px}
    .service h4{margin:0 0 8px;font-size:16px}
    .service p{margin:0;color:var(--muted);font-size:14px}

    /* Portfolio */
    .portfolio{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
    .work{
      position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);
      background:var(--glass);min-height:170px;
      display:flex;align-items:center;justify-content:center;
      transition:transform .24s ease,box-shadow .24s ease;
    }
    .work img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.08) contrast(.9)}
    .work-overlay{
      position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.0), rgba(2,6,23,0.55));
      opacity:0;transition:opacity .22s ease;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;
    }
    .work:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(2,6,23,0.6)}
    .work:hover .work-overlay{opacity:1}
    .work-overlay h5{margin:0;font-size:16px}
    .work-overlay p{margin:6px 0 0;color:var(--muted);font-size:13px}

    /* Quotes carousel */
    .quotes{display:flex;gap:12px;overflow:hidden;padding:6px;border-radius:12px}
    .quote{
      min-width:100%;
      padding:22px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
      border-radius:12px;border:1px solid rgba(255,255,255,0.03);
    }
    .quote p{margin:0;color:var(--muted);font-size:15px}
    .quote small{display:block;margin-top:12px;color:#cfeef1;font-weight:600}

    /* CTA footer */
    .cta-footer{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      background:linear-gradient(180deg, rgba(96,165,250,0.06), rgba(45,212,191,0.03));
      padding:26px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);
    }
    .cta-footer h4{margin:0;font-size:18px}
    .contact-icons a{margin-left:12px;color:var(--muted)}

    /* Small screens */
    @media (max-width:880px){
      .hero{flex-direction:column;align-items:flex-start}
      .hero-right{width:100%}
      .title{font-size:34px;letter-spacing:6px}
      nav{position:static;text-align:center;margin:14px 0}
      .wrap{padding:22px}
    }