:root{
    --bg:#0a0f1f;
    --bg-2:#121a33;
    --panel:rgba(255,255,255,.06);
    --line:rgba(255,255,255,.12);
    --text:#eef2ff;
    --muted:#b7c0df;
    --primary:#7c3aed;
    --secondary:#22d3ee;
    --ok:#34d399;
    --radius:18px;
    --shadow:0 20px 60px rgba(0,0,0,.35);
    --max:1120px;
    --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:var(--font);
    color:var(--text);
    background:
      radial-gradient(900px 600px at 12% 8%, rgba(124,58,237,.35), transparent 55%),
      radial-gradient(800px 500px at 90% 15%, rgba(34,211,238,.2), transparent 60%),
      linear-gradient(180deg, #060a15, var(--bg));
    line-height:1.6;
    overflow-x:hidden;
  }

  .container{width:min(var(--max), calc(100% - 48px));margin:0 auto}

  header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(12px);
    background:rgba(8,12,24,.7);
    border-bottom:1px solid var(--line);
  }

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    gap:16px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    letter-spacing:.2px;
    white-space:nowrap;
  }

  .brand-link{
    color:var(--text);
    text-decoration:none;
  }

  .brand-link:hover{opacity:.92}

  .logo{
    width:34px;
    height:34px;
    border-radius:11px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    box-shadow:0 10px 30px rgba(124,58,237,.35);
  }

  nav ul{
    list-style:none;
    display:flex;
    gap:10px;
    padding:0;
    margin:0;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
.btn.service-link{
  margin-top: 10px;
}
  nav a{
    display:inline-flex;
    align-items:center;
    padding:5px;
    border-radius:12px;
    color:var(--muted);
    text-decoration:none;
    border:1px solid transparent;
    transition:.2s ease;
    font-size:14px;
  }
  .white-nodecor{color:var(--text);text-decoration:none}

  nav a:hover{
    color:var(--text);
    border-color:var(--line);
    background:rgba(255,255,255,.05);
  }

  .hero{padding:76px 0 38px}
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:20px;
    align-items:stretch;
  }

  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:var(--muted);
    padding:8px 12px;
    font-size:14px;
  }

  .dot{
    width:8px;
    height:8px;
    border-radius:99px;
    background:var(--ok);
    box-shadow:0 0 0 6px rgba(52,211,153,.15);
  }

  h1{
    font-size:clamp(34px,4.6vw,56px);
    line-height:1.06;
    margin:16px 0 12px;
    letter-spacing:-.03em;
  }

  .lead{
    margin:0 0 24px;
    max-width:60ch;
    color:var(--muted);
    font-size:clamp(16px,1.3vw,19px);
  }

  .actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    border-radius:14px;
    padding: 13px 22px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    color:var(--text);
    font-weight:600;
    transition:.2s ease;
  }

  .btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1)}

  .btn.primary{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    border-color:rgba(255,255,255,.26);
  }

  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
  }

  .stack-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:12px;
  }

  .chip{
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.05);
    padding:10px 12px;
    font-weight:600;
    text-align:center;
  }

  .chip-link{
    text-decoration:none;
    color:var(--text);
    transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }

  .chip-link:hover{
    transform:translateY(-1px);
    border-color:rgba(34,211,238,.45);
    background:linear-gradient(135deg, rgba(124,58,237,.2), rgba(34,211,238,.15));
    box-shadow:0 10px 22px rgba(10,15,31,.28);
  }

  section{padding:44px 0}

  .section-title{margin:0 0 16px}
  .section-title h2{margin:0 0 6px;font-size:26px;letter-spacing:-.02em}
  .section-title p{margin:0;color:var(--muted)}

  .grid-3{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .service h3,
  .project h3{margin:0 0 8px;font-size:18px}
  .service p,
  .project p{margin:0;color:var(--muted)}

  .service .service-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding:11px 16px;
    border-radius:999px;
    border-color:rgba(124,58,237,.42);
    background:linear-gradient(135deg, rgba(124,58,237,.24), rgba(34,211,238,.2));
    box-shadow:0 12px 28px rgba(10,15,31,.35);
    font-size:14px;
    font-weight:700;
  }

  .service .service-link::after{
    content:'->';
    font-size:13px;
    opacity:.9;
    transition:transform .2s ease;
  }

  .service .service-link:hover{
    border-color:rgba(34,211,238,.62);
    box-shadow:0 16px 36px rgba(34,211,238,.2);
  }

  .service .service-link:hover::after{
    transform:translateX(2px);
  }

  .service,
  .project{
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
  }

  .project .tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
  }

  .project .tag{
    font-size:12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    padding:6px 10px;
    color:var(--muted);
  }

  .contact-box{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:center;
    background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,211,238,.16));
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
  }

  .contact-box p{margin:0;color:#dce5ff}

  footer{
    border-top:1px solid var(--line);
    color:var(--muted);
    padding:24px 0 30px;
    font-size:14px;
  }

  @media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr 1fr}
  }

  @media (max-width: 680px){
    .container{width:min(var(--max), calc(100% - 28px))}
    nav ul{gap:6px}
    .grid-3{grid-template-columns:1fr}
    .contact-box{grid-template-columns:1fr}
    .btn{width:100%;justify-content:center}
  }

  .service-detail{
    max-width:1240px;
    margin:0 auto;
  }

  .service-detail .card{padding:24px}

  .service-extra{
    margin:-4px 0 22px;
    color:var(--muted);
    max-width:70ch;
  }

  .service-detail ul{
    margin:16px 0 0;
    padding-left:20px;
    color:var(--muted);
  }

  .service-detail li{margin:8px 0}