:root{
    --bg: #06070D;
    --bg-2: #0B0E1B;
    --panel: rgba(255,255,255,0.035);
    --panel-solid: #0E1120;
    --line: rgba(255,255,255,0.09);
    --violet: #7C6CFF;
    --violet-soft: rgba(124,108,255,0.16);
    --mint: #45E0B0;
    --amber: #FFB454;
    --red: #DC143C;
    --ink: #F3F4FA;
    --muted: #8991AC;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 14px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scrollbar-color: var(--violet) var(--bg-2); scrollbar-width:thin;}
  body{
    background: var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.65;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 700px 500px at 10% -5%, rgba(124,108,255,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 95% 15%, rgba(255,180,84,0.06), transparent 60%),
      radial-gradient(ellipse 800px 600px at 50% 100%, rgba(69,224,176,0.06), transparent 60%);
  }
  ::-webkit-scrollbar{width:9px;}
  ::-webkit-scrollbar-track{background:var(--bg-2);}
  ::-webkit-scrollbar-thumb{background:var(--violet); border-radius:10px;}

  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer;}

  :focus-visible{outline:2px solid var(--violet); outline-offset:3px; border-radius:4px;}

  .container{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}

  h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; color:var(--ink); letter-spacing:-0.01em;}
  .accent-text{color:var(--violet);}

  .section-eyebrow{
    font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--amber); margin-bottom:14px; display:block;
  }
  .section-title{font-size:clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.18; margin-bottom:8px;}

  section{scroll-margin-top:88px; position:relative; z-index:1;}

  /* ===== BUTTONS ===== */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:0.95rem;
    padding:14px 28px; border-radius:10px; border:1px solid transparent;
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--violet); color:#06070D;}
  .btn-primary:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(124,108,255,0.35);}
  .btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--violet); background:var(--violet-soft); transform:translateY(-3px);}
  .btn-small{padding:9px 18px; font-size:0.82rem;}
  .btn-large{padding:17px 34px; font-size:1.02rem;}
  .btn-outline-dashed{
    border:1px dashed var(--line); color:var(--muted);
    font-family:var(--font-mono); font-size:0.78rem; padding:10px 16px; border-radius:8px;
  }
  .btn-outline-dashed:hover{border-color:var(--amber); color:var(--amber); border-style:solid;}

  .chip{
    font-family:var(--font-mono); font-size:0.76rem; color:var(--muted);
    border:1px solid var(--line); padding:6px 12px; border-radius:7px;
    background:rgba(255,255,255,0.02); white-space:nowrap;
  }
  .chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}

  /* ===== PRELOADER ===== */
  #preloader{
    position:fixed; inset:0; z-index:999; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    animation:preloaderHide 0.6s ease forwards; animation-delay:1.6s;
  }
  #preloader.done{animation-duration:0.5s; animation-delay:0s;}
  @keyframes preloaderHide{ to{opacity:0; visibility:hidden; pointer-events:none;} }
  @media (prefers-reduced-motion:reduce){ #preloader{animation-duration:0.01s; animation-delay:0s;} }
  .preloader-inner{text-align:center;}
  .preloader-mark{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--violet); letter-spacing:0.05em;}
  .preloader-bar{width:140px; height:2px; background:var(--line); margin:18px auto 0; overflow:hidden; border-radius:2px;}
  .preloader-bar-fill{width:40%; height:100%; background:linear-gradient(90deg, transparent, var(--violet), transparent); animation:sweep 1.1s ease-in-out infinite;}
  @keyframes sweep{ 0%{transform:translateX(-120%);} 100%{transform:translateX(340%);} }

/* ===== NAV ===== */
  #site-nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:transparent; border-bottom:1px solid transparent;
    transition:background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  }
  #site-nav.scrolled{background:rgba(6,7,13,0.75); backdrop-filter:blur(14px); border-color:var(--line);}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 24px;}
  .logo{font-family:var(--font-display); font-size:1.2rem; font-weight:700; letter-spacing:0.02em;}
  .logo span{color:var(--violet);}
  .nav-links{display:flex; gap:30px;}
  .nav-link{font-size:0.9rem; color:var(--muted); font-weight:500; position:relative; padding:4px 0; transition:color 0.2s ease;}
  .nav-link:hover, .nav-link.active{color:var(--ink);}
  .nav-link.active::after{
    content:""; position:absolute; bottom:-4px; left:0; right:0; height:2px;
    background:var(--violet); border-radius:2px;
  }
  .nav-cta{display:inline-flex;}
  .hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; z-index:110;}
  .hamburger span{width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform 0.3s ease, opacity 0.3s ease;}
  .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.active span:nth-child(2){opacity:0;}
  .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-menu{
    display:none; flex-direction:column; gap:2px; background:rgba(6,7,13,0.98); backdrop-filter:blur(14px);
    border-top:1px solid var(--line); padding:10px 24px 20px;
    max-height:0; overflow:hidden; transition:max-height 0.35s ease;
  }
  .mobile-menu.open{max-height:400px;}
  .mobile-menu .nav-link{padding:13px 0; border-bottom:1px solid var(--line); font-size:1rem;}

  @media (max-width:860px){
    .nav-links, .nav-cta{display:none;}
    .hamburger{display:flex;}
    .mobile-menu{display:flex;}
  }

  /* ===== HERO ===== */
  .hero{
    position:relative; min-height:100vh; min-height:100svh;
    display:flex; align-items:center; overflow:hidden;
  }
  #hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1;}
  .hero-glow{
    position:absolute; inset:-10%; z-index:0; pointer-events:none;
    background:
      radial-gradient(circle at 18% 28%, rgba(124,108,255,0.22), transparent 42%),
      radial-gradient(circle at 82% 74%, rgba(255,180,84,0.13), transparent 42%);
    filter:blur(60px);
  }
  .hero-content{position:relative; z-index:2; padding:140px 24px 100px; max-width:760px;}
  .availability-pill{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font-mono); font-size:0.76rem; color:var(--mint);
    border:1px solid rgba(69,224,176,0.35); background:rgba(69,224,176,0.06);
    padding:7px 14px; border-radius:999px; margin-bottom:26px;
  }
  .pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}
  .eyebrow{font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--violet); margin-bottom:16px;}
  .hero-title{font-size:clamp(2.3rem, 5.4vw, 4rem); line-height:1.1; margin-bottom:22px;}
  .hero-sub{font-size:1.1rem; color:var(--muted); max-width:560px; margin-bottom:34px;}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
  .scroll-indicator{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; color:var(--muted);
  }
  .scroll-indicator span{
    width:1px; height:34px; background:linear-gradient(var(--violet), transparent);
    animation:scrollLine 1.8s ease-in-out infinite;
  }
  @keyframes scrollLine{0%{opacity:0.2;} 50%{opacity:1;} 100%{opacity:0.2;}}

  /* ===== STATS ===== */
  .stats-bar{padding:70px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,0.015);}
  .stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center;}
  .stat-num, .stat-num-static{font-family:var(--font-display); font-size:2.4rem; color:var(--ink); font-weight:700;}
  .stat-label{font-size:0.88rem; color:var(--muted); margin-top:8px;}
  @media (max-width:700px){ .stats-grid{grid-template-columns:1fr; gap:36px;} }

  /* ===== ABOUT ===== */
  .about-section{padding:120px 0;}
  .about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start;}
  .about-text{color:var(--muted); font-size:1.03rem; margin-bottom:16px;}
  @media (max-width:820px){ .about-grid{grid-template-columns:1fr; gap:24px;} }

  /* ===== SKILLS ===== */
  .skills-section{padding:0 0 120px;}
  .skills-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; margin-top:44px;}
  .skill-card, .service-card, .work-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; transition:border-color 0.3s ease, background 0.3s ease;
  }
  .skill-card:hover, .service-card:hover, .work-card:hover{border-color:rgba(124,108,255,0.4); background:rgba(124,108,255,0.045);}
  .skill-card-head{
    display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1rem; font-weight:700;
  }
  .skill-dot{width:9px; height:9px; border-radius:50%; background:var(--dot); box-shadow:0 0 8px var(--dot); flex-shrink:0;}

  /* ===== SERVICES ===== */
  .services-section{padding:0 0 120px;}
  .services-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px; margin-top:44px;}
  .service-icon{
    width:44px; height:44px; border-radius:11px; background:var(--violet-soft);
    display:flex; align-items:center; justify-content:center; color:var(--violet); margin-bottom:18px;
  }
  .service-icon svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .service-card h3{font-size:1.05rem; margin-bottom:10px;}
  .service-card p{color:var(--muted); font-size:0.93rem;}

  /* ===== WORK ===== */
  .work-section{padding:0 0 120px;}
  .work-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:18px; margin-top:44px;}
  .work-status{
    display:inline-block; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em;
    color:var(--mint); border:1px solid rgba(69,224,176,0.35); padding:3px 10px; border-radius:999px; margin-bottom:14px;
  }
  .work-status-discontinued{
    display:inline-block; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em;
    color:var(--red); border:1px solid rgba(255, 0, 0, 0.35); padding:3px 10px; border-radius:999px; margin-bottom:14px;
  }
  .work-card h3{font-size:1.12rem; margin-bottom:10px;}
  .work-card p{color:var(--muted); font-size:0.93rem; margin-bottom:6px;}
  .tech-row{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px;}

  /* ===== PROCESS ===== */
  .process-section{padding:0 0 120px;}
  .process-steps{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:54px; position:relative;
  }
  .process-steps::before{
    content:""; position:absolute; top:23px; left:0; right:0; height:1px; background:var(--line); z-index:0;
  }
  .process-step{position:relative; z-index:1;}
  .process-num{
    width:46px; height:46px; border-radius:50%; background:var(--bg); border:1px solid var(--violet);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:0.85rem; color:var(--violet); margin-bottom:18px;
  }
  .process-step h3{font-size:1rem; margin-bottom:8px;}
  .process-step p{color:var(--muted); font-size:0.9rem;}
  @media (max-width:820px){
    .process-steps{grid-template-columns:1fr; gap:34px;}
    .process-steps::before{display:none;}
  }

  /* ===== CONTACT ===== */
  .contact-section{padding:0 0 130px;}
  .contact-head{text-align:center; max-width:600px; margin:0 auto 54px;}
  .contact-sub{color:var(--muted); margin:14px 0 30px;}
  .contact-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; max-width:760px; margin:0 auto;}
  .contact-card{
    border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; background:var(--panel);
    text-align:center; transition:border-color 0.3s ease;
  }
  .contact-card:hover{border-color:rgba(124,108,255,0.4);}
  .contact-k{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; color:var(--amber); margin-bottom:8px; text-transform:uppercase;}
  .contact-v{font-family:var(--font-mono); font-size:0.92rem;}
  .contact-v.placeholder{color:var(--muted); font-style:italic;}

  /* ===== FOOTER ===== */
  .site-footer{border-top:1px solid var(--line); padding:44px 0; text-align:center;}
  .footer-brand{font-family:var(--font-display); font-size:1.1rem; font-weight:700;}
  .footer-brand span{color:var(--violet);}
  .footer-tagline{color:var(--muted); font-size:0.88rem; margin:10px 0 14px;}
  .footer-copy{color:var(--line); font-family:var(--font-mono); font-size:0.75rem;}

  /* ===== BACK TO TOP ===== */
  #back-to-top{
    position:fixed; bottom:26px; right:26px; z-index:60;
    width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
    background:rgba(14,17,32,0.85); backdrop-filter:blur(8px); color:var(--ink);
    font-size:1.1rem; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transform:translateY(10px);
    transition:opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  }
  #back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
  #back-to-top:hover{border-color:var(--violet); color:var(--violet);}

  /* ===== REVEAL ===== */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
    #cursor-glow{display:none !important;}
  }

  @media (max-width:600px){
    .hero-content{padding-top:120px;}
    .about-section, .skills-section, .services-section, .work-section, .process-section{padding-bottom:80px;}
    .stats-bar{padding:50px 0;}
  }