#rocket-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 180px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }
  .bg-rocket {
    position: absolute;
    font-size: 32px;
    filter: drop-shadow(0 0 12px #39ff14);
    user-select: none;
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 0.85;
  }
  #star-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  }
  .bg-star {
    position: absolute;
    font-size: 12px;
    color: #fffbe6;
    opacity: 0.7;
    filter: drop-shadow(0 0 4px #fffbe6);
    user-select: none;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .bg-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fffbe6;
    opacity: 0.45;
    box-shadow: 0 0 6px #fffbe6;
    user-select: none;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  #penguin-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .bg-penguin {
    position: absolute;
    font-size: 44px;
    opacity: 0.55;
    filter: drop-shadow(0 2px 8px #39ff14);
    user-select: none;
    pointer-events: none;
    transition: opacity 0.3s;
  }
    :root {
      --bg: #0a1020;
      --panel: #0e1630;
      --muted: #94a3b8;
      --text: #e6eef7;
      --brand: #10c6e8;
      --brand-2: #38bdf8;
      --ring: rgba(56,189,248,.35);
      --card: #0e1729;
      --shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
      --radius: 22px;
      --surface: #0c1326;
      --success: #22c55e;
      --danger: #ef4444;
    }

    body.light-theme {
      --bg: #eaf6fb;
      --panel: #f8fbff;
      --muted: #5c6e7c;
      --text: #18324b;
      --brand: #2196f3;
      --brand-2: #38bdf8;
      --ring: rgba(33,150,243,.18);
      --card: #f4faff;
      --surface: #ffffff;
      --shadow: 0 6px 18px rgba(33,150,243,.08), inset 0 1px 0 rgba(33,150,243,.02);
      --accent: #2196f3;
    }
    *{box-sizing:border-box}
  html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(1200px 520px at 70% -120px, rgba(56,189,248,.12), transparent 60%), linear-gradient(180deg,var(--bg) 0%, var(--panel) 100%);}    
  body.light-theme {
    background: radial-gradient(1200px 520px at 70% -120px, rgba(33,150,243,.10), transparent 60%), linear-gradient(180deg,#eaf6fb 0%, #f8fbff 100%);
  }
  html{scroll-behavior:smooth}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
  :focus{outline:none}
  :focus-visible{box-shadow:0 0 0 4px var(--ring);border-radius:12px}

  /* Skip link */
  .skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
  .skip-link:focus{left:10px;top:10px;width:auto;height:auto;z-index:1000;background:#0b1326;color:#eaf6ff;padding:10px 14px;border-radius:10px}

    /* Container */
    .container{max-width:1100px;margin:0 auto;padding:0 20px}
    /* Responsive styles for mobile */
    @media (max-width:700px) {
      .container {
        margin:18px 6px;
        padding:16px 6px;
        border-radius:18px;
      }
      .card {
        margin-bottom:16px;
        border-radius:16px;
        padding:16px;
      }
      .cta {
        margin:18px 0;
        border-radius:16px;
        padding:16px;
      }
      .contact-wrap {
        border-radius:14px;
        padding:10px;
      }
      .columns {
        border-radius:14px;
        padding:10px;
        margin:0;
      }
      .grid {
        grid-template-columns:1fr;
        gap:12px;
      }
      .card h4 {
        font-size:16px;
      }
      .card .icon {
        height:32px;
        width:32px;
      }
      .card ul {
        padding-left:10px;
      }
      .btn {
        padding:10px 14px;
        font-size:14px;
      }
      .section-title {
        font-size:24px;
      }
      .eyebrow {
        font-size:10px;
        margin:10px auto 8px;
      }
    }
    body.light-theme .container {
      background: linear-gradient(135deg, #f8fbff 60%, #e3f0fc 100%);
      box-shadow: 0 2px 12px var(--shadow);
      border-radius: 24px;
    }

    /* Header */
  header{position:sticky;top:0;z-index:50;background:rgba(8,12,24,.7);border-bottom:1px solid rgba(255,255,255,.06);transition:background .25s ease, transform .25s ease}
  header.scrolled{background:rgba(8,12,24,.8)}
  body.light-theme header {
    background: linear-gradient(90deg, #e3f0fc 60%, #f8fbff 100%);
    border-bottom: 2px solid #b6e0fe;
    box-shadow: 0 2px 12px #b6e0fe;
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px;transition:height .25s ease}
  header.scrolled .nav{height:60px}
    .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
    .logo i{color:var(--brand)}
    .nav ul{list-style:none;display:flex;gap:22px;padding:0;margin:0}
    .nav a{font-weight:500;color:#dce6f5;opacity:.9}
    .nav a:hover{color:white}
    .cta-btn{padding:10px 16px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 8px 24px rgba(16,198,232,.3);color:#07121f;font-weight:700}
    .menu-toggle{display:none;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text);border-radius:10px;height:40px;width:44px}

    @media(max-width:860px){
      .nav ul{display:none;position:absolute;top:68px;left:0;right:0;background:#0c1326;padding:16px 20px;flex-direction:column;border-bottom:1px solid rgba(255,255,255,.06)}
      .nav ul.open{display:flex}
      .menu-toggle{display:inline-grid;place-items:center}
    }

    /* Hero */
  .hero{padding:96px 0 64px;background:radial-gradient(800px 300px at 20% 0%, rgba(16,198,232,.18), transparent 60%)}
  .hero .title{font-size:56px;line-height:1.06;margin:10px 0 14px;font-weight:800;letter-spacing:-0.02em}
    .hero .subtitle{max-width:780px;color:var(--muted)}
    .hero-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
  .badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#9bdcf4;font-size:12px}
  body.light-theme .badge {
    background: linear-gradient(90deg, #e3f0fc 60%, #cbeafe 100%);
    color: #2196f3;
    border: 1.5px solid #b6e0fe;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33,150,243,.08);
  }
  .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#eaf6ff;transition:transform .15s ease, box-shadow .15s ease}
    .btn i{opacity:.9}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
  .btn.primary{border:none;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#07121f;font-weight:800;box-shadow:0 8px 28px rgba(16,198,232,.3)}
  .btn.primary:hover{box-shadow:0 12px 34px rgba(16,198,232,.35)}

    /* Stats */
    .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0 0}
  .stat{padding:22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow);text-align:center;transition:transform .2s ease}
  body.light-theme .stat {
    background: linear-gradient(135deg, #f8fbff 60%, #e3f0fc 100%);
    border: 1.5px solid #b6e0fe;
    box-shadow: 0 2px 8px #b6e0fe;
  }
  .stat:hover{transform:translateY(-4px)}
    .stat h3{margin:0;font-size:32px;color:#9ae6ff}
    body.light-theme .counter {
      color: #2196f3;
      text-shadow: 0 2px 8px #b6e0fe;
    }
    .stat p{margin:8px 0 0;color:var(--muted);font-size:13px}
    @media(max-width:700px){.stats{grid-template-columns:1fr}}

    /* Section titles */
    .eyebrow{display:block;text-transform:uppercase;letter-spacing:.25em;font-size:11px;color:#7dd3fc;margin:12px auto 10px;width:max-content}
    body.light-theme .eyebrow {
      color: #2196f3;
      text-shadow: 0 2px 8px #b6e0fe;
    }
    .section-title{font-size:34px;text-align:center;margin:0}
    .accent{color:#6ee7ff}

    /* Services */
    section{padding:70px 0}
    .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    @media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:620px){.grid{grid-template-columns:1fr}}
  .card{background:var(--card);border:1.5px solid rgba(33,150,243,.22);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .15s ease, border-color .15s ease}
  body.light-theme .card {
    background: linear-gradient(135deg, #f8fbff 60%, #e3f0fc 100%, #eaf6fb 0%);
    border: 1.5px solid #b6e0fe;
    box-shadow: 0 2px 12px #b6e0fe;
    color: #18324b;
  }
  .card:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.35)}
    .card h4{margin:6px 0 6px;font-size:18px}
    .card .icon{height:40px;width:40px;border-radius:12px;display:grid;place-items:center;background:rgba(16,198,232,.12);color:#8be9ff}
    .card ul{margin:10px 0 0;padding-left:18px;color:#c3d2e8}
    .card ul li{margin:6px 0}

  /* Portfolio */
  .filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 8px}
  .filter-btn{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#cfe9fb;font-size:13px;cursor:pointer;transition:all .2s ease}
  .filter-btn:hover{background:rgba(255,255,255,.07)}
  .filter-btn.active{border-color:rgba(56,189,248,.45);box-shadow:0 0 0 4px var(--ring)}
  body.light-theme .filter-btn {
    background: linear-gradient(90deg, #e3f0fc 60%, #f8fbff 100%);
    color: #2196f3;
    border: 1.5px solid #b6e0fe;
    font-weight: 600;
    box-shadow: 0 2px 8px #b6e0fe;
  }
  body.light-theme .filter-btn.active {
    background: linear-gradient(90deg, #b6e0fe 60%, #e3f0fc 100%);
    color: #1565c0;
    border-color: #2196f3;
    box-shadow: 0 0 0 4px #b6e0fe;
  }
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
  @media(max-width:980px){.work-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.work-grid{grid-template-columns:1fr}}
  .work-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0a0f1d;box-shadow:var(--shadow)}
  .work-card .thumb{aspect-ratio:16/10;background:#0e1729;background-size:cover;background-position:center;filter:saturate(1.1);position:relative}
  .work-card .thumb::after{content:'';position:absolute;inset:0;background:rgba(10,18,32,0.32);pointer-events:none;border-radius:inherit}
  .work-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,14,25,0) 40%, rgba(7,14,25,.85));opacity:0;transition:opacity .2s ease}
  .work-card:hover .overlay{opacity:1}
  .work-card .meta{position:absolute;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
  .work-card .title{font-weight:700}
  .tag{font-size:11px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
  .work-card .actions{position:absolute;top:12px;right:12px;display:flex;gap:8px}
  .icon-btn{height:36px;width:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#e6f6ff;transition:transform .15s ease}
  .icon-btn:hover{transform:translateY(-2px)}

    /* CTA */
    .cta{background:var(--panel);border:1.5px solid rgba(33,150,243,.22);border-radius:26px;padding:26px;display:grid;gap:16px;place-items:center;box-shadow:var(--shadow)}
    body.light-theme .cta {
      background: linear-gradient(135deg, #f8fbff 60%, #e3f0fc 100%, #eaf6fb 0%);
      border: 1.5px solid #b6e0fe;
      box-shadow: 0 2px 12px #b6e0fe;
      color: #18324b;
    }
    .cta .actions{display:flex;gap:12px;flex-wrap:wrap}

    /* Contact */
  .contact-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;background:var(--panel);border-radius:18px;box-shadow:0 2px 12px var(--shadow);padding:18px;border:1.5px solid rgba(33,150,243,.22);}
    @media(max-width:980px){.contact-wrap{grid-template-columns:1fr}}
    .info-list{display:grid;gap:14px}
    .info-item{display:flex;gap:12px;align-items:flex-start}
    .info-item .bubble{height:40px;width:40px;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center}
    .info-item .label{font-weight:600}

  .form{background:var(--card);border:1.5px solid rgba(33,150,243,.22);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
    .field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
    .field label{font-size:13px;color:#c3d2e8}
    body.light-theme .field label {
      color: #1565c0;
    }
    .input, select, textarea{background:#0b1326;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;color:var(--text);outline:none}
    .input:focus, select:focus, textarea:focus{box-shadow:0 0 0 6px var(--ring)}
    textarea{min-height:120px;resize:vertical}

    /* Footer */
    footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0;color:#c6d3e8}
    .columns{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}
    @media(max-width:920px){.columns{grid-template-columns:1fr 1fr}} 
    @media(max-width:560px){.columns{grid-template-columns:1fr}}
  .mini{font-size:13px;color:#9fb2cc}
  body.light-theme .mini{color:#4b5c6b;}
    .linklist{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}

    /* Utilities */
    .center{text-align:center}
    .mt-4{margin-top:1rem}
    .mt-6{margin-top:1.5rem}
    .mb-2{margin-bottom:.5rem}
    .mb-3{margin-bottom:.75rem}
    .mb-4{margin-bottom:1rem}
    .hidden{display:none}

    /* Scroll reveal */
    .sr{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .7s cubic-bezier(.4,2,.3,1), transform .7s cubic-bezier(.4,2,.3,1)}
    .sr.in{opacity:1;transform:none;animation:fadeInUp .7s cubic-bezier(.4,2,.3,1)}

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(40px) scale(.98); }
      to { opacity: 1; transform: none; }
    }

    /* Card hover animation */
    .card {
      transition: transform .25s cubic-bezier(.4,2,.3,1), box-shadow .25s cubic-bezier(.4,2,.3,1);
    }
    .card:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 16px 48px rgba(56,189,248,.18);
    }

    /* Button animation */
    .btn {
      transition: transform .18s cubic-bezier(.4,2,.3,1), box-shadow .18s cubic-bezier(.4,2,.3,1);
    }
    .btn:hover {
      transform: translateY(-4px) scale(1.04);
      box-shadow: 0 12px 32px rgba(56,189,248,.18);
    }

    /* Back to top */
  .to-top{position:fixed;right:16px;bottom:16px;height:46px;width:46px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);display:grid;place-items:center;color:#e6f6ff;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s ease, transform .2s ease}
  section{scroll-margin-top:80px}
    .to-top.show{opacity:1;pointer-events:auto;transform:none}

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
    }

    /* Light Theme Fixes */
body.light-theme header {
  background: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
body.light-theme .nav a {
  color: var(--text);
}
body.light-theme .nav a:hover {
  color: var(--accent);
}

/* Cards */
body.light-theme .card {
  background: var(--card);
  border: 1.5px solid rgba(33,150,243,.15);
  color: var(--text);
}
body.light-theme .card ul,
body.light-theme .card p {
  color: var(--muted);
}

/* Portfolio cards */
body.light-theme .work-card {
  background: #fff;
  border: 1px solid rgba(33,150,243,.12);
}
body.light-theme .work-card .thumb::after {
  background: rgba(255,255,255,0.15);
}
body.light-theme .work-card .overlay {
  background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.85));
}
body.light-theme .icon-btn {
  background: rgba(33,150,243,.08);
  border-color: rgba(33,150,243,.15);
  color: var(--accent);
}

/* Buttons */
body.light-theme .btn {
  background: rgba(33,150,243,.06);
  border: 1px solid rgba(33,150,243,.15);
  color: var(--text);
}
body.light-theme .btn:hover {
  box-shadow: 0 8px 20px rgba(33,150,243,.15);
}
body.light-theme .btn.primary {
  background: linear-gradient(90deg,var(--brand),var(--brand-2));
  color: #fff;
}

/* Form inputs */
body.light-theme .input,
body.light-theme select,
body.light-theme textarea {
  background: #fff;
  border: 1px solid rgba(33,150,243,.2);
  color: var(--text);
}

/* Footer */
body.light-theme footer {
  border-top: 1px solid rgba(0,0,0,.08);
  color: #4b5c6b;
}

  /* Custom animated cursor */
  #cursor-tail {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--brand-2) 30%, transparent 100%);
    opacity: 0.22;
    z-index: 9998;
    transition: background 0.18s;
    will-change: transform, background;
    mix-blend-mode: lighten;
  }
  body.light-theme #cursor-tail {
    background: radial-gradient(circle at 50% 50%, var(--brand) 30%, transparent 100%);
    mix-blend-mode: multiply;
  }
  @media (max-width: 700px) {
    #cursor-tail { display: none !important; }
  }
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--brand-2) 60%, transparent 100%);
    box-shadow: 0 0 18px 6px var(--brand-2), 0 0 0 2px var(--brand);
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.18s cubic-bezier(.4,2,.3,1), background 0.18s;
    z-index: 9999;
    mix-blend-mode: lighten;
    will-change: transform, background;
  }
  .custom-cursor.active {
    transform: translate(-50%, -50%) scale(1.4);
    background: radial-gradient(circle at 50% 50%, var(--brand) 80%, transparent 100%);
    box-shadow: 0 0 32px 12px var(--brand), 0 0 0 3px var(--brand-2);
  }
  body.light-theme .custom-cursor {
    background: radial-gradient(circle at 30% 30%, var(--brand) 60%, transparent 100%);
    box-shadow: 0 0 18px 6px var(--brand), 0 0 0 2px var(--brand-2);
    mix-blend-mode: multiply;
  }
  body.light-theme .custom-cursor.active {
    background: radial-gradient(circle at 50% 50%, var(--brand-2) 80%, transparent 100%);
    box-shadow: 0 0 32px 12px var(--brand-2), 0 0 0 3px var(--brand);
  }
  @media (max-width: 700px) {
    .custom-cursor { display: none !important; }
  }
  
  @media (max-width: 700px) {
  #chatbot-container {
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    width: 100vw !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    pointer-events: none !important;
  }
  #chatbot-toggle {
    position: fixed !important;
    right: 8px !important;
    bottom: 64px !important;
    z-index: 99999 !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    pointer-events: auto !important;
  }
  .to-top {
    bottom: 8px !important;
    right: 64px !important;
    z-index: 99998 !important;
  }
  #chatbot-panel {
    width: 92vw !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    border-radius: 16px !important;
    padding: 0 0 10px 0 !important;
  }
  #chatbot-messages {
    margin: 10px 6px 8px 6px !important;
    height: 140px !important;
    font-size: 13px !important;
  }
  #chatbot-form {
    padding: 0 6px !important;
    gap: 5px !important;
  }
  #chatbot-input {
    font-size: 13px !important;
    padding: 7px 8px !important;
  }
}