/* ===== Reset & defaults ===== */
  :root{
    --bg-1:#f6fbff;
    --bg-2:#eaf4ff;
    --primary-600:#1e3a8a;
    --primary-500:#2563eb;
    --muted:#64748b;
  }
  *{ box-sizing: border-box; margin:0; padding:0; }
  html,body{ height:100%; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg,var(--bg-1),var(--bg-2)); color:#0f172a; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

  /* ===== Page layout ===== */
  .page { min-height:100vh; display:flex; flex-direction:column; }
  header.site-header {
    position:sticky; top:0; z-index:120;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(15,23,42,0.04);
  }
  .nav {
    max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
  }
  .brand { display:flex; align-items:center; gap:12px; }
  .logo-badge { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--primary-500),var(--primary-600)); display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:0.95rem; box-shadow:0 6px 18px rgba(37,99,235,0.12); }
  .brand h1{ font-size:1rem; font-weight:700; color:var(--primary-600); letter-spacing:0.2px; }
  .nav-links { display:flex; gap:18px; align-items:center; }
  .nav-links button { background:none; border:none; color:var(--muted); font-weight:600; cursor:pointer; padding:8px 10px; border-radius:8px; transition: all .16s ease; }
  .nav-links button:hover{ color:var(--primary-600); transform:translateY(-2px); background: rgba(37,99,235,0.04); }

  /* ===== Hero ===== */
  main { flex:1; }
  .hero {
    max-width:1100px; margin:40px auto 0; padding:30px 20px; display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start;
  }

  .hero-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,255,0.95));
    border-radius:14px; padding:28px; box-shadow:0 12px 40px rgba(2,6,23,0.06);
  }
  .hero h2{ font-size:1.9rem; color:var(--primary-600); margin-bottom:8px; font-weight:800; }
  .hero p.lead{ color:var(--muted); line-height:1.6; margin-bottom:18px; }

  .hero-cta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px; }
  .btn-primary { background:linear-gradient(90deg,var(--primary-500),var(--primary-600)); color:white; border:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; box-shadow:0 10px 30px rgba(37,99,235,0.14); }
  .btn-ghost { background:transparent; border:1px solid rgba(15,23,42,0.06); color:var(--primary-600); padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:700; }

  /* ===== Deploy panel (right column) ===== */
  .panel {
    background: rgba(255,255,255,0.95);
    padding:18px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,0.06);
    display:flex; flex-direction:column; gap:10px;
  }
  .panel h3{ margin:0; color:var(--primary-600); font-weight:800; font-size:1.05rem; }
  .field { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
  .field input[type="text"], .field input[type="file"]{
    padding:10px 12px; border-radius:8px; border:1px solid #e6eefc; font-size:0.98rem; outline:none;
  }
  .field input[type="text"]::placeholder{ color:#94a3b8; }
  .panel .btn { margin-top:6px; }

  .result { margin-top:12px; padding:10px 12px; border-radius:10px; font-weight:700; display:none; color:#fff; }
  .result.loading { display:block; background:linear-gradient(90deg,#60a5fa,#3b82f6); }
  .result.success { display:block; background:linear-gradient(90deg,#10b981,#059669); }
  .result.error { display:block; background:linear-gradient(90deg,#ef4444,#dc2626); }

  /* ===== Section: projects & about ===== */
  .sections { max-width:1100px; margin:26px auto 0; padding:0 20px; display:grid; gap:18px; }
  .about, .projects { background:rgba(255,255,255,0.95); border-radius:12px; padding:20px; box-shadow:0 8px 30px rgba(2,6,23,0.05); color:#0f172a; }
  .about h3, .projects h3 { color:var(--primary-600); margin-bottom:8px; font-weight:800; }
  .projects-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px; }
  .project-card { background:#fff; border-radius:10px; padding:12px; border:1px solid #e6eefc; display:flex; flex-direction:column; gap:8px; }
  .project-card p{ color:#374151; font-size:0.95rem; }

  /* ===== Footer ===== */
  footer.site-footer { margin-top:28px; background:transparent; padding:22px 20px; text-align:center; color:#0f172a; }
  .footer-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; gap:12px; align-items:center; }

  .footer-glow { height:4px; width:100%; background:linear-gradient(90deg, transparent, rgba(37,99,235,0.18), transparent); border-radius:6px; animation: slideGlow 6s linear infinite; opacity:0.9; }
  @keyframes slideGlow { 0%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }

  /* ===== Particles (subtle) ===== */
  #particles { position:fixed; inset:0; pointer-events:none; z-index:5; }
  .particle { position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.5); animation: floatUp linear infinite; }
  @keyframes floatUp { 0%{ transform: translateY(110vh); opacity:0;} 25%{ opacity:1;} 100%{ transform: translateY(-10vh); opacity:0; } }

  /* ===== Modal tutorial (glass) ===== */
  .modal {
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(2,6,23,0.45); z-index:200; opacity:0; pointer-events:none; transition:all .18s ease;
  }
  .modal.show { opacity:1; pointer-events:auto; }
  .modal-card { width:90%; max-width:520px; background: linear-gradient(180deg, rgba(255,255,255,0.98), #fff); border-radius:12px; padding:22px; box-shadow: 0 20px 50px rgba(2,6,23,0.12); color:#0f172a; transform: translateY(10px); transition: transform .18s ease; }
  .modal.show .modal-card{ transform: translateY(0); }

  /* ===== Responsive ===== */
  @media (max-width:980px){
    .hero { grid-template-columns: 1fr; }
    .projects-grid { grid-template-columns: repeat(2,1fr); }
  }
  @media (max-width:640px){
    .nav { padding:12px; }
    .brand h1{ font-size:0.95rem; }
    .projects-grid { grid-template-columns: 1fr; }
    .hero { padding:16px; gap:16px; }
    .panel { order:2; }
  }