:root{
    --bg:#171717;
    --card:#1e1e1e;
    --card-2:#1e1e1e00;
    --panel:#262626;
    --ink:#f2f4f2;
    --muted:#9a9f99;
    --blue:#21F0A8;
    --blue-2:#12c98a;
    --cyan:#5df5c4;
    --line:rgba(33,240,168,.14);
    --glow:rgba(33,240,168,.5);
    --r:16px;
    --maxw:1120px;
    --disp:'Bricolage Grotesque',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--ink);
    font-family:var(--body);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;position:relative;
  }
  /* 3D three.js canvas background — pinned behind all content */
  #bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;display:block}
  /* electric background layer: grid + glows */
  .bgfx{position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
      radial-gradient(60% 50% at 82% 8%, rgba(33,240,168,.18), transparent 60%),
      radial-gradient(50% 45% at 12% 30%, rgba(93,245,196,.12), transparent 60%),
      radial-gradient(60% 60% at 50% 110%, rgba(18,201,138,.16), transparent 60%);
  }
  .bgfx::before{content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(33,240,168,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(33,240,168,.05) 1px,transparent 1px);
    background-size:46px 46px;mask-image:radial-gradient(circle at 50% 20%,#000 30%,transparent 78%)}
  /* cursor light */
  .cursor-glow{position:fixed;width:520px;height:520px;left:0;top:0;z-index:-1;pointer-events:none;border-radius:50%;
    background:radial-gradient(circle,rgba(33,240,168,.16),transparent 60%);
    transform:translate(-50%,-50%);transition:opacity .3s;opacity:0;mix-blend-mode:screen}

  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:9px}
  .eyebrow::before{content:"";width:22px;height:1.5px;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 8px var(--cyan)}

  /* header */
  header{position:sticky;top:0;z-index:50;background:rgba(23,23,23,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:66px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em}
  .brand .tile{width:30px;height:30px;border-radius:9px;background:#171717;border:1.5px solid rgba(33,240,168,.55);display:grid;place-items:center;color:var(--blue);box-shadow:0 0 18px -2px var(--glow)}
  .brand .tile svg{width:16px;height:16px}
  .navlinks{display:flex;align-items:center;gap:30px}
  .navlinks a{font-size:14.5px;color:var(--muted);font-weight:500;transition:color .18s}
  .navlinks a:hover{color:var(--ink)}
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:10px;cursor:pointer;transition:transform .18s ease,box-shadow .22s ease,background .18s;border:0}
  .btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#0a1410;box-shadow:0 0 0 1px rgba(33,240,168,.3) inset,0 8px 22px -10px var(--glow)}
  .btn-blue:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(93,245,196,.55) inset,0 12px 30px -8px var(--glow),0 0 24px -4px var(--glow)}
  .btn-blue svg{color:#0a1410}
  .navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
  .navtoggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;transition:.25s}

  /* hero */
  .hero{position:relative;padding:clamp(28px,5vw,60px) 0 clamp(48px,7vw,88px)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8ff5d0;background:rgba(33,240,168,.1);border:1px solid rgba(33,240,168,.3);padding:6px 12px;border-radius:100px}
  .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(93,245,196,.2),0 0 10px var(--cyan)}
  h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,6.4vw,66px);line-height:1.02;letter-spacing:-.03em;margin:22px 0 0}
  h1 .hl{background:linear-gradient(120deg,var(--blue) 10%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 34px rgba(33,240,168,.35)}
  .hero p.lead{margin:22px 0 0;font-size:clamp(16px,2vw,19px);color:#b5bab4;max-width:460px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
  .btn-lg{padding:15px 26px;font-size:15.5px;border-radius:12px}
  .btn-ghost{background:rgba(255,255,255,.02);border:1.5px solid var(--line);color:var(--ink)}
  .btn-ghost:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 0 20px -6px var(--glow)}
  .hero-meta{display:flex;gap:28px;margin-top:38px;flex-wrap:wrap}
  .hero-meta div{display:flex;flex-direction:column}
  .hero-meta b{font-family:var(--disp);font-weight:700;font-size:22px;background:linear-gradient(120deg,#fff,#8ff5d0);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero-meta span{font-size:12.5px;color:var(--muted)}

  /* mockup */
  .mock{position:relative}
  .glow-orb{position:absolute;inset:-16% -10% -16% -10%;z-index:0;border-radius:50%;
    background:radial-gradient(circle,rgba(33,240,168,.35),rgba(93,245,196,.12) 45%,transparent 68%);
    filter:blur(14px);animation:pulse 6s ease-in-out infinite}
  .frame{position:relative;z-index:1;padding:1.5px;border-radius:19px;background:linear-gradient(135deg,var(--blue),var(--cyan) 55%,rgba(33,240,168,.25));box-shadow:0 0 40px -14px var(--glow);animation:floaty 7s ease-in-out infinite}
  .browser{background:var(--card);border-radius:18px;overflow:hidden}
  .browser-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);background:#111111}
  .browser-bar i{width:11px;height:11px;border-radius:50%;display:block}
  .browser-bar i:nth-child(1){background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}
  .browser-url{margin-left:10px;flex:1;font-family:var(--mono);font-size:11px;color:var(--muted);background:#0d0d0d;padding:5px 12px;border-radius:7px;border:1px solid var(--line)}
  .screen{padding:20px;background:linear-gradient(180deg,#1e1e1e,#171717)}
  .s-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .s-logo{width:64px;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
  .s-links{display:flex;gap:9px}
  .s-links span{width:26px;height:8px;border-radius:4px;background:var(--panel)}
  .s-hero{background:linear-gradient(135deg,var(--blue),var(--cyan));border-radius:12px;padding:22px 20px;box-shadow:0 0 30px -12px var(--glow)}
  .s-hero .l1{width:78%;height:15px;border-radius:5px;background:rgba(10,20,16,.9);margin-bottom:9px}
  .s-hero .l2{width:55%;height:15px;border-radius:5px;background:rgba(10,20,16,.6);margin-bottom:16px}
  .s-hero .pill{width:96px;height:26px;border-radius:8px;background:#0d0d0d}
  .s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:16px}
  .s-cards div{height:62px;border-radius:10px;background:var(--panel);position:relative;overflow:hidden;border:1px solid var(--line)}
  .s-cards div::after{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:7px;border-radius:4px;background:#333333}
  .s-cards div::before{content:"";position:absolute;left:10px;top:10px;width:22px;height:22px;border-radius:6px;background:rgba(33,240,168,.35)}
  .chip{position:absolute;right:-14px;bottom:34px;z-index:2;background:#1e1e1e;border:1px solid rgba(33,240,168,.35);border-radius:12px;box-shadow:0 0 30px -10px var(--glow);padding:11px 14px;display:flex;align-items:center;gap:10px;animation:floaty 6s ease-in-out .5s infinite}
  .chip .ic{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#0a1410;display:grid;place-items:center;font-family:var(--disp);font-weight:800}
  .chip b{font-family:var(--disp);font-size:13px;display:block;line-height:1.2}
  .chip small{font-size:10.5px;color:var(--muted)}
  .chip .ic{font-family:var(--mono);font-size:15px;font-weight:700}

  /* dev-vibe profile card */
  .devcard{background:var(--card);border-radius:18px;overflow:hidden}
  .devcard-body{display:flex;gap:18px;padding:20px;background:linear-gradient(180deg,#1e1e1e,#171717)}
  .devphoto{position:relative;width:150px;height:190px;flex:none;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,var(--blue),var(--blue-2))}
  .devphoto img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.12) contrast(1.04) brightness(.98)}
  .devphoto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(155deg,rgba(33,240,168,.30),transparent 52%),repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 2px,transparent 2px 4px);
    mix-blend-mode:overlay}
  .devphoto .avatar-fallback{position:absolute;inset:0;z-index:0;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:44px;color:#0a1410;letter-spacing:.02em}
  .devcode{margin:0;min-width:0;flex:1;align-self:center;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--ink);white-space:pre;overflow-x:auto}
  .devcode .ln{display:block}
  .devcode em{color:var(--cyan);font-style:normal}
  .devcode b{color:#fff;font-weight:500}
  .devcode s{color:#8ff5d0;text-decoration:none}
  .devcode u{color:var(--blue);text-decoration:none}

  /* sections */
  section.blk{padding:clamp(60px,8vw,96px) 0;position:relative}
  .sec-head{max-width:620px;margin-bottom:44px}
  .sec-head h2{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;line-height:1.08;margin-top:16px}
  .sec-head p{color:var(--muted);margin-top:14px;font-size:16px}

  .services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 30px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s;position:relative}
  .svc:hover{transform:translateY(-5px);border-color:rgba(33,240,168,.5);box-shadow:0 0 34px -12px var(--glow)}
  .svc .num{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:.1em}
  .svc h3{font-family:var(--disp);font-weight:700;font-size:21px;margin:16px 0 10px;letter-spacing:-.01em}
  .svc p{font-size:14.5px;color:var(--muted);line-height:1.62}
  .svc .arrow{margin-top:18px;color:var(--cyan);font-weight:600;font-size:14px;display:inline-flex;gap:6px;transition:gap .2s}
  .svc:hover .arrow{gap:12px}

  .why{position:relative;background:linear-gradient(180deg,#1e1e1e,#171717);border:1px solid var(--line);border-radius:26px;padding:clamp(38px,5vw,58px) clamp(28px,4vw,52px);overflow:hidden}
  .why::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan)}
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:34px}
  .why-item h4{font-family:var(--disp);font-weight:700;font-size:18px;margin-bottom:9px;display:flex;align-items:center;gap:9px}
  .why-item h4 .d{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
  .why-item p{font-size:14px;color:#a5aaa4;line-height:1.6}

  .work{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .proj{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:transform .22s,box-shadow .22s,border-color .22s;position:relative;overflow:hidden}
  .proj:hover{transform:translateY(-5px);border-color:rgba(33,240,168,.5);box-shadow:0 0 34px -12px var(--glow)}
  .proj .pk{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.1em}
  .proj h3{font-family:var(--disp);font-weight:700;font-size:19px;margin:12px 0 9px}
  .proj p{font-size:13.8px;color:var(--muted);line-height:1.6;min-height:66px}
  .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
  .tags span{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:#8ff5d0;background:rgba(33,240,168,.1);border:1px solid var(--line);padding:5px 9px;border-radius:7px}
  .work-note{margin-top:22px;font-size:14px;color:var(--muted)}
  .work-note b{color:var(--ink)}

  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .about-head{display:flex;align-items:center;gap:20px;margin:18px 0 22px}
  .about-title{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.6vw,38px);letter-spacing:-.02em;line-height:1.1;margin:0}
  .avatar{position:relative;width:108px;height:108px;flex:none;border-radius:22px;overflow:hidden;border:2px solid rgba(33,240,168,.6);box-shadow:0 0 30px -6px var(--glow);background:linear-gradient(135deg,var(--blue),var(--blue-2))}
  .avatar img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
  .avatar-fallback{position:absolute;inset:0;z-index:0;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:36px;color:#0a1410;letter-spacing:.02em}
  @media (max-width:520px){.about-head{flex-direction:column;align-items:flex-start;gap:16px}}
  .about p{color:#b5bab4;font-size:16.5px;margin-bottom:16px}
  .about p:first-of-type{font-size:19px;color:var(--ink)}
  .stacklab{margin:26px 0 12px}
  .stack{display:flex;flex-wrap:wrap;gap:9px}
  .stack span{font-family:var(--mono);font-size:12px;color:#8ff5d0;background:var(--card);border:1px solid var(--line);padding:8px 13px;border-radius:9px;transition:.2s}
  .stack span:hover{border-color:var(--blue);box-shadow:0 0 16px -6px var(--glow);color:#fff}
  .steps{display:flex;flex-direction:column;gap:2px}
  .step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .step .n{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--cyan);width:30px;flex:none;padding-top:2px;text-shadow:0 0 12px rgba(93,245,196,.5)}
  .step h4{font-family:var(--disp);font-weight:700;font-size:17px;margin-bottom:3px}
  .step p{font-size:14px;color:var(--muted)}

  .cta{position:relative;text-align:center;background:linear-gradient(180deg,#1e1e1e,#141414);border:1px solid var(--line);border-radius:26px;padding:clamp(44px,6vw,72px) 24px;overflow:hidden}
  .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 0%,rgba(33,240,168,.18),transparent 60%);pointer-events:none}
  .cta h2{position:relative;font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.6vw,50px);letter-spacing:-.025em;line-height:1.05;max-width:640px;margin:16px auto 0}
  .cta p{position:relative;color:var(--muted);max-width:440px;margin:18px auto 0}
  .cta-btns{position:relative;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
  .btn-mail{background:rgba(255,255,255,.02);border:1.5px solid var(--line);color:var(--ink)}
  .btn-mail:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 0 20px -6px var(--glow)}

  footer{border-top:1px solid var(--line);padding:40px 0 46px;margin-top:20px}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
  .foot .fb{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800}
  .foot small{color:var(--muted);font-size:13px}
  .foot .fl{display:flex;gap:20px}
  .foot .fl a{font-size:13.5px;color:var(--muted)}
  .foot .fl a:hover{color:var(--cyan)}

  .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .rv.in{opacity:1;transform:none}

  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  @keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

  @media (max-width:940px){
    .hero-grid{grid-template-columns:1fr;gap:44px}
    .mock{max-width:440px;margin:0 auto}
    .why-grid{grid-template-columns:repeat(2,1fr);gap:26px}
    .services,.work{grid-template-columns:1fr 1fr}
    .about-grid{grid-template-columns:1fr;gap:38px}
  }
  @media (max-width:680px){
    .navlinks{position:fixed;inset:66px 0 auto 0;background:var(--bg);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);transform:translateY(-150%);transition:transform .3s ease;height:auto}
    .navlinks.open{transform:none}
    .navlinks a{padding:13px 0;width:100%;border-bottom:1px solid var(--line);font-size:16px}
    .navlinks .btn{margin-top:12px;width:100%;justify-content:center}
    .navtoggle{display:block}
    .services,.work{grid-template-columns:1fr}
    .why-grid{grid-template-columns:1fr}
    .hero-meta{gap:22px}
    .chip{display:none}
    .devcard-body{flex-direction:column;align-items:stretch}
    .devphoto{width:100%;height:210px}
    .devcode{align-self:stretch;font-size:12px}
  }
  @media (prefers-reduced-motion:reduce){
    .frame,.chip,.glow-orb{animation:none}
    .cursor-glow{display:none}
    .rv{transition:none;opacity:1;transform:none}
    html{scroll-behavior:auto}
  }