:root {
    --bg: #050a14;
    --bg2: #080f1e;
    --navy: #0a1628;
    --blue: #0ea5e9;
    --cyan: #22d3ee;
    --glow: #0ea5e9;
    --teal: #14b8a6;
    --text: #e2e8f0;
    --muted: #64748b;
    --glass: rgba(14,165,233,0.07);
    --glass-border: rgba(14,165,233,0.18);
    --card: rgba(8,15,30,0.8);
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; overflow-x: hidden; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
    cursor: none;
  }

  /* CUSTOM CURSOR */
  #cursor { position: fixed; width:12px; height:12px; background:var(--cyan); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .1s, width .2s, height .2s, opacity .2s; mix-blend-mode:screen; }
  #cursor-ring { position:fixed; width:36px; height:36px; border:1.5px solid var(--blue); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform .18s ease, width .2s, height .2s; }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width:4px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--blue); border-radius:4px; }

  /* NAV */
  nav {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; justify-content:space-between; align-items:center;
    padding: 1.2rem 4rem;
    backdrop-filter: blur(20px);
    background: rgba(5,10,20,0.7);
    border-bottom: 1px solid rgba(14,165,233,0.08);
    transition: padding .3s;
  }
  nav.scrolled { padding:.8rem 4rem; }
  .nav-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:1.2rem; color:var(--cyan); letter-spacing:-.02em; }
  .nav-links { display:flex; gap:2.5rem; list-style:none; }
  .nav-links a { text-decoration:none; color:var(--muted); font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; font-family:'Space Mono',monospace; transition:color .2s; }
  .nav-links a:hover { color:var(--cyan); }
  .nav-cta { padding:.5rem 1.4rem; border:1px solid var(--blue); color:var(--blue); border-radius:4px; font-size:.82rem; text-decoration:none; font-family:'Space Mono',monospace; transition: all .2s; }
  .nav-cta:hover { background:var(--blue); color:#000; box-shadow:0 0 20px rgba(14,165,233,.4); }

  /* ======================== HERO ======================== */
  #hero {
    position:relative; height:100vh; display:flex; align-items:center; justify-content:center;
    overflow:visible; perspective:1000px;
  }
  #particles-canvas { position:absolute; inset:0; z-index:0; }

  /* 3D AI VISUAL */
  .hero-3d-scene {
    position:absolute; right:-2%; top:50%; transform:translateY(-50%);
    width:52%; height:90vh; z-index:1; perspective:800px;
  }
  .neural-orb {
    position:absolute; width:420px; height:420px;
    top:50%; left:50%; transform:translate(-50%,-50%);
    animation: orbFloat 6s ease-in-out infinite;
  }
  .orb-core {
    position:absolute; inset:0; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, rgba(34,211,238,.25), rgba(14,165,233,.12) 50%, transparent 75%);
    border: 1px solid rgba(34,211,238,.2);
    box-shadow: 0 0 80px rgba(14,165,233,.15), inset 0 0 60px rgba(14,165,233,.08);
    animation: orbPulse 4s ease-in-out infinite;
  }
  .orb-ring {
    position:absolute; border-radius:50%; border:1px solid rgba(14,165,233,.15);
    animation: ringRotate 12s linear infinite;
  }
  .orb-ring:nth-child(2) { inset:-30px; animation-duration:16s; animation-direction:reverse; border-color:rgba(34,211,238,.1); }
  .orb-ring:nth-child(3) { inset:-65px; animation-duration:20s; border-color:rgba(20,184,166,.08); }
  .orb-ring:nth-child(4) { inset:-100px; animation-duration:28s; animation-direction:reverse; border-color:rgba(14,165,233,.06); }

  /* Neural network nodes */
  .neural-nodes { position:absolute; inset:-120px; }
  .node { position:absolute; border-radius:50%; background:var(--cyan); }
  .node-line { position:absolute; background: linear-gradient(90deg, transparent, rgba(14,165,233,.3), transparent); height:1px; transform-origin:left center; }

  /* Floating data cards */
  .data-card {
    position:absolute; padding:.6rem 1rem; border-radius:8px;
    backdrop-filter:blur(12px); background:rgba(8,15,30,.85);
    border:1px solid rgba(14,165,233,.2);
    font-family:'Space Mono',monospace; font-size:.68rem; color:var(--cyan);
    box-shadow:0 0 20px rgba(14,165,233,.1);
    animation: cardFloat 5s ease-in-out infinite;
    white-space:nowrap;
  }
  .data-card::before { content:''; position:absolute; inset:-1px; border-radius:8px; background:linear-gradient(135deg,rgba(14,165,233,.15),transparent); z-index:-1; }
  .dc1 { top:8%; left:5%; animation-delay:0s; }
  .dc2 { top:22%; right:2%; animation-delay:1.2s; }
  .dc3 { bottom:28%; left:2%; animation-delay:2.4s; }
  .dc4 { bottom:12%; right:5%; animation-delay:.8s; }
  .dc-label { color:var(--muted); font-size:.6rem; margin-bottom:.15rem; }
  .dc-value { color:var(--cyan); font-size:.78rem; font-weight:700; }
  .dc-bar { height:3px; background:rgba(14,165,233,.2); border-radius:2px; margin-top:.3rem; overflow:hidden; }
  .dc-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--cyan)); animation: barFill 2s ease forwards; }

  /* Hero content */
  .hero-content {
    position:relative; z-index:2; max-width:900px;
    padding-left: 8rem; padding-right:2rem;
    overflow: visible;
  }
  .hero-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.4rem 1rem; border-radius:100px; margin-bottom:1.8rem;
    background: rgba(14,165,233,.08); border:1px solid rgba(14,165,233,.2);
    font-family:'Space Mono',monospace; font-size:.72rem; color:var(--cyan);
    letter-spacing:.05em;
  }
  .badge-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:blink 2s infinite; }
  .hero-name {
    font-family:'Syne',sans-serif; font-weight:800;
    font-size: clamp(3.2rem,6vw,5.2rem); line-height:1;
    letter-spacing:-.04em; margin-bottom:.4rem;
    background: linear-gradient(135deg, #fff 20%, var(--cyan) 60%, var(--blue) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    animation: slideLeft 3s ease-in-out infinite;
  }
  .hero-title {
    font-family:'Space Mono',monospace; font-size:clamp(.9rem,2vw,1.15rem);
    color:var(--blue); margin-bottom:1.5rem; letter-spacing:.06em;
  }
  .hero-title span { color:var(--muted); }
  .hero-tagline { font-size:1.05rem; color:var(--muted); line-height:1.75; max-width:460px; margin-bottom:2.5rem; font-weight:300; }
  .hero-tagline em { color:var(--text); font-style:normal; font-weight:500; }
  .hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
  .btn-primary {
    padding:.85rem 2rem; border-radius:6px; font-family:'Syne',sans-serif; font-weight:700;
    font-size:.92rem; text-decoration:none; letter-spacing:.02em;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    color:#000; transition:all .25s;
    box-shadow:0 0 30px rgba(14,165,233,.3);
    position:relative; overflow:hidden;
  }
  .btn-primary::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); opacity:0; transition:opacity .2s; }
  .btn-primary:hover { box-shadow:0 0 50px rgba(14,165,233,.6); transform:translateY(-2px); }
  .btn-primary:hover::after { opacity:1; }
  .btn-ghost {
    padding:.85rem 2rem; border-radius:6px; font-family:'Syne',sans-serif; font-weight:700;
    font-size:.92rem; text-decoration:none; letter-spacing:.02em;
    background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.2);
    transition:all .25s;
  }
  .btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 20px rgba(14,165,233,.15); transform:translateY(-2px); }

  .hero-scroll {
    position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    color:var(--muted); font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.1em;
    z-index:3; animation:scrollBounce 2s ease-in-out infinite;
  }
  .scroll-line { width:1px; height:50px; background:linear-gradient(to bottom, var(--blue), transparent); }

  /* ======================== SECTIONS GENERAL ======================== */
  section { padding:7rem 0; position:relative; }
  .container { max-width:1180px; margin:0 auto; padding:0 2rem; }
  .section-label {
    font-family:'Space Mono',monospace; font-size:.72rem; color:var(--blue);
    letter-spacing:.18em; text-transform:uppercase; margin-bottom:1rem;
    display:flex; align-items:center; gap:.8rem;
  }
  .section-label::before { content:''; display:inline-block; width:24px; height:1px; background:var(--blue); }
  .section-title {
    font-family:'Syne',sans-serif; font-weight:800;
    font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.03em; line-height:1.05;
    margin-bottom:3.5rem;
  }

  /* REVEAL ANIMATION */
  .reveal { opacity:0; transform:translateY(40px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.visible { opacity:1; transform:translateY(0); }
  .reveal-left { opacity:0; transform:translateX(-50px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal-left.visible { opacity:1; transform:translateX(0); }
  .reveal-right { opacity:0; transform:translateX(50px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal-right.visible { opacity:1; transform:translateX(0); }

  /* ======================== ABOUT ======================== */
  #about { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
  .about-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:5rem; align-items:center; }
  .about-visual { position:relative; }
  .photo-frame {
    width:100%; aspect-ratio:4/5; border-radius:16px;
    background: linear-gradient(135deg, rgba(14,165,233,.1), rgba(34,211,238,.05));
    border:1px solid var(--glass-border); overflow:hidden; position:relative;
    backdrop-filter:blur(8px);
  }
  .photo-frame::before {
    content:''; position:absolute; top:-40%; left:-40%; width:80%; height:80%;
    background: radial-gradient(ellipse, rgba(14,165,233,.15), transparent 70%);
    animation: rotate 8s linear infinite;
  }
  .photo-placeholder {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1rem;
  }
  .avatar-ring {
    width:120px; height:120px; border-radius:50%; border:2px solid rgba(14,165,233,.3);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    background: radial-gradient(circle, rgba(14,165,233,.15), rgba(8,15,30,.8));
  }
  .avatar-initials { font-family:'Syne',sans-serif; font-size:2.5rem; font-weight:800; color:var(--cyan); }
  .photo-name { font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:700; color:var(--text); }
  .photo-role { font-family:'Space Mono',monospace; font-size:.72rem; color:var(--blue); }
  .about-corner { position:absolute; width:40px; height:40px; border-color:var(--cyan); border-style:solid; opacity:.5; }
  .ac-tl { top:-8px; left:-8px; border-width:2px 0 0 2px; border-radius:4px 0 0 0; }
  .ac-br { bottom:-8px; right:-8px; border-width:0 2px 2px 0; border-radius:0 0 4px 0; }

  .about-text h2 { font-family:'Syne',sans-serif; font-size:2.4rem; font-weight:800; letter-spacing:-.03em; margin-bottom:1.5rem; }
  .about-text p { color:var(--muted); line-height:1.85; margin-bottom:1.2rem; font-size:1.02rem; }
  .about-text p strong { color:var(--text); font-weight:500; }
  .about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; }
  .stat-card {
    padding:1.2rem; border-radius:10px; text-align:center;
    background:var(--glass); border:1px solid var(--glass-border);
    backdrop-filter:blur(12px); transition: all .25s;
  }
  .stat-card:hover { border-color:rgba(14,165,233,.4); box-shadow:0 0 20px rgba(14,165,233,.1); }
  .stat-num { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:800; color:var(--cyan); display:block; }
  .stat-label { font-size:.75rem; color:var(--muted); margin-top:.2rem; font-family:'Space Mono',monospace; }
  .info-pills { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
  .pill { padding:.4rem 1rem; border-radius:100px; font-size:.78rem; background:rgba(14,165,233,.07); border:1px solid rgba(14,165,233,.15); color:var(--text); font-family:'Space Mono',monospace; display:flex; align-items:center; gap:.4rem; }
  .pill-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); }

  /* ======================== SKILLS ======================== */
  #skills { background:var(--bg); }
  .skills-wrapper { display:grid; gap:2.5rem; }
  .skill-group-title { font-family:'Space Mono',monospace; font-size:.75rem; color:var(--blue); letter-spacing:.15em; text-transform:uppercase; margin-bottom:1.2rem; }
  .skill-grid { display:flex; flex-wrap:wrap; gap:.7rem; }
  .skill-badge {
    display:flex; align-items:center; gap:.6rem;
    padding:.6rem 1.2rem; border-radius:8px;
    background:var(--glass); border:1px solid var(--glass-border);
    backdrop-filter:blur(12px); font-size:.84rem; font-weight:500;
    transition:all .25s cubic-bezier(.16,1,.3,1); cursor:default; position:relative; overflow:hidden;
  }
  .skill-badge::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(14,165,233,.12),transparent); opacity:0; transition:opacity .25s; }
  .skill-badge:hover { transform:translateY(-3px) scale(1.03); border-color:rgba(14,165,233,.5); box-shadow:0 0 25px rgba(14,165,233,.2), 0 8px 30px rgba(0,0,0,.3); }
  .skill-badge:hover::before { opacity:1; }
  .skill-icon { font-size:1.1rem; }
  .skill-level { position:absolute; bottom:0; left:0; height:2px; background:linear-gradient(90deg,var(--blue),var(--cyan)); border-radius:0 0 8px 8px; transition:width .5s ease; }

  .skills-categories { display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem; }
  .skill-cat { padding:1.8rem 2rem; border-radius:14px; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(16px); }

  /* ======================== PROJECTS ======================== */
  #projects { background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
  .projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .project-card {
    border-radius:14px; position:relative; perspective:1000px;
    height:380px; cursor:pointer;
  }
  .card-inner {
    position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.16,1,.3,1);
    transform-style:preserve-3d;
  }
  .project-card:hover .card-inner { transform:rotateY(180deg); }
  .card-front, .card-back {
    position:absolute; inset:0; border-radius:14px; backface-visibility:hidden;
    padding:1.8rem; background:var(--card); border:1px solid var(--glass-border);
    backdrop-filter:blur(16px); display:flex; flex-direction:column;
  }
  .card-back { transform:rotateY(180deg); background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(34,211,238,.06)); border-color:rgba(14,165,233,.3); justify-content:space-between; }
  .project-num { font-family:'Space Mono',monospace; font-size:.68rem; color:var(--blue); margin-bottom:.8rem; opacity:.7; }
  .project-icon-area { width:48px; height:48px; border-radius:10px; background:rgba(14,165,233,.1); border:1px solid rgba(14,165,233,.2); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.2rem; }
  .project-title { font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:700; margin-bottom:.6rem; }
  .project-desc { color:var(--muted); font-size:.88rem; line-height:1.7; flex:1; }
  .tech-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
  .tech-tag { padding:.25rem .65rem; border-radius:4px; font-size:.7rem; font-family:'Space Mono',monospace; background:rgba(14,165,233,.08); border:1px solid rgba(14,165,233,.15); color:var(--cyan); }
  .card-back-title { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; color:var(--cyan); margin-bottom:.8rem; }
  .card-back-detail { color:var(--muted); font-size:.85rem; line-height:1.7; flex:1; }
  .card-links { display:flex; gap:.8rem; margin-top:1rem; }
  .card-link { padding:.5rem 1.2rem; border-radius:6px; font-size:.78rem; text-decoration:none; font-family:'Space Mono',monospace; transition:all .2s; }
  .link-gh { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text); }
  .link-gh:hover { border-color:var(--cyan); color:var(--cyan); }
  .link-link { background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#000; font-weight:700; }
  .link-link:hover { box-shadow:0 0 20px rgba(14,165,233,.4); }
  .flip-hint { position:absolute; bottom:1.2rem; right:1.4rem; font-size:.65rem; color:var(--muted); font-family:'Space Mono',monospace; opacity:.5; }

  /* ======================== TIMELINE ======================== */
  #experience { background:var(--bg); }
  .timeline { position:relative; padding-left:3rem; }
  .timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(to bottom, transparent, var(--blue) 20%, var(--blue) 80%, transparent); }
  .timeline-item { position:relative; margin-bottom:3rem; padding:1.8rem 2rem; border-radius:12px; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(16px); transition:all .3s; }
  .timeline-item:hover { border-color:rgba(14,165,233,.35); box-shadow:0 0 30px rgba(14,165,233,.08); }
  .timeline-dot { position:absolute; left:-3.44rem; top:1.8rem; width:14px; height:14px; border-radius:50%; background:var(--cyan); border:3px solid var(--bg); box-shadow:0 0 12px var(--cyan); }
  .tl-period { font-family:'Space Mono',monospace; font-size:.68rem; color:var(--blue); margin-bottom:.5rem; }
  .tl-role { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:700; margin-bottom:.3rem; }
  .tl-org { color:var(--cyan); font-size:.88rem; margin-bottom:.8rem; }
  .tl-desc { color:var(--muted); font-size:.88rem; line-height:1.75; }
  .tl-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
  .tl-tag { padding:.2rem .65rem; border-radius:4px; font-size:.68rem; font-family:'Space Mono',monospace; background:rgba(14,165,233,.07); border:1px solid rgba(14,165,233,.12); color:var(--muted); }

  /* ======================== CONTACT ======================== */
  #contact { background:linear-gradient(180deg, var(--bg) 0%, #030710 100%); }
  .contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
  .contact-info h3 { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:800; margin-bottom:1rem; }
  .contact-info p { color:var(--muted); line-height:1.8; margin-bottom:2rem; }
  .social-links { display:flex; flex-direction:column; gap:.8rem; }
  .social-link {
    display:flex; align-items:center; gap:1rem; padding:.9rem 1.2rem;
    border-radius:10px; text-decoration:none; background:var(--glass);
    border:1px solid var(--glass-border); color:var(--text); font-size:.9rem;
    transition:all .25s; backdrop-filter:blur(12px);
  }
  .social-link:hover { border-color:rgba(14,165,233,.4); color:var(--cyan); box-shadow:0 0 20px rgba(14,165,233,.1); transform:translateX(4px); }
  .social-icon { width:36px; height:36px; border-radius:8px; background:rgba(14,165,233,.1); display:flex; align-items:center; justify-content:center; font-size:1rem; }
  .contact-form { display:flex; flex-direction:column; gap:1.2rem; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .form-group { display:flex; flex-direction:column; gap:.4rem; }
  .form-group label { font-size:.78rem; color:var(--muted); font-family:'Space Mono',monospace; letter-spacing:.06em; }
  .form-group input, .form-group textarea {
    padding:.85rem 1.1rem; border-radius:8px; background:rgba(8,15,30,.8);
    border:1px solid rgba(255,255,255,.08); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.92rem;
    outline:none; transition:border-color .2s, box-shadow .2s; resize:none;
  }
  .form-group input:focus, .form-group textarea:focus { border-color:rgba(14,165,233,.4); box-shadow:0 0 15px rgba(14,165,233,.08); }
  .form-group input::placeholder, .form-group textarea::placeholder { color:rgba(100,116,139,.5); }
  .btn-send { align-self:flex-start; padding:.9rem 2.2rem; border-radius:8px; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#000; font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem; border:none; cursor:pointer; transition:all .25s; box-shadow:0 0 30px rgba(14,165,233,.25); }
  .btn-send:hover { box-shadow:0 0 50px rgba(14,165,233,.5); transform:translateY(-2px); }

  /* ======================== FOOTER ======================== */
  footer { padding:2rem; text-align:center; border-top:1px solid rgba(14,165,233,.08); }
  footer p { color:var(--muted); font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.06em; }
  footer span { color:var(--blue); }

  /* ======================== HORIZONTAL SCROLL STRIP ======================== */
  .marquee-strip { overflow:hidden; border-top:1px solid rgba(14,165,233,.08); border-bottom:1px solid rgba(14,165,233,.08); padding:.8rem 0; background:rgba(14,165,233,.03); }
  .marquee-inner { display:flex; animation:marquee 25s linear infinite; width:max-content; }
  .marquee-item { padding:0 2.5rem; font-family:'Space Mono',monospace; font-size:.75rem; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:.8rem; }
  .marquee-item::after { content:'◆'; color:rgba(14,165,233,.3); }

  /* ======================== KEYFRAMES ======================== */
  @keyframes orbFloat { 0%,100%{transform:translate(-50%,-50%) translateY(0px) rotateX(5deg)} 50%{transform:translate(-50%,-50%) translateY(-20px) rotateX(-5deg)} }
  @keyframes orbPulse { 0%,100%{box-shadow:0 0 80px rgba(14,165,233,.15),inset 0 0 60px rgba(14,165,233,.08)} 50%{box-shadow:0 0 120px rgba(14,165,233,.3),inset 0 0 80px rgba(14,165,233,.15)} }
  @keyframes ringRotate { from{transform:rotateX(70deg) rotateZ(0deg)} to{transform:rotateX(70deg) rotateZ(360deg)} }
  @keyframes cardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
  @keyframes barFill { from{width:0} to{width:var(--w,70%)} }
  @keyframes rotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
  @keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
  @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  @keyframes slideLeft {0%   { transform: translateX(0); }50%  { transform: translateX(-30px); }100% { transform: translateX(0); }}
  /* RESPONSIVE */
  @media(max-width:1024px){
    .hero-3d-scene{width:45%;}
    .hero-content{padding-left:4rem;}
    .projects-grid{grid-template-columns:repeat(2,1fr);}
    .skills-categories{grid-template-columns:1fr;}
  }
  @media(max-width:768px){
    nav{padding:1rem 1.5rem;}
    .nav-links{display:none;}
    .hero-3d-scene{display:none;}
    .hero-content{padding:2rem;}
    .about-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .projects-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .about-stats{grid-template-columns:repeat(3,1fr);}
  }