* { margin:0; padding:0; box-sizing:border-box; }
  :root { --yellow:#FFD400; --neon:#00E5FF; --ink:#050505; }
  html { scroll-behavior:smooth; }
  body { background:var(--ink); color:#fff; font-family:"Helvetica Neue", Inter, system-ui, sans-serif; overflow-x:hidden; }
  .glow { position:fixed; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none; }
  .glow.a { width:55vw; height:55vw; background:radial-gradient(circle, rgba(255,212,0,0.13), transparent 65%); animation:driftA 26s ease-in-out infinite alternate; }
  .glow.b { width:48vw; height:48vw; background:radial-gradient(circle, rgba(0,229,255,0.08), transparent 65%); animation:driftB 32s ease-in-out infinite alternate; }
  @keyframes driftA { 0%{transform:translate(-15vw,-10vh)} 100%{transform:translate(50vw,55vh) scale(1.2)} }
  @keyframes driftB { 0%{transform:translate(70vw,60vh)} 100%{transform:translate(5vw,5vh) scale(0.9)} }
  .grid-overlay { position:fixed; inset:0; z-index:1; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size:80px 80px; }
  nav { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:20px 40px; background:rgba(5,5,5,0.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,0.07); }
  .logo { font-size:22px; font-weight:700; letter-spacing:-0.04em; text-decoration:none; color:#fff; }
  .logo b { color:var(--yellow); }
  .menu { display:flex; gap:32px; position:absolute; left:50%; transform:translateX(-50%); }
  .menu a { font-size:13px; color:rgba(255,255,255,0.65); text-decoration:none; letter-spacing:0.06em; }
  .menu a:hover, .menu a.on { color:var(--yellow); }
  nav a.wa { font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,0.35); padding:10px 20px; border-radius:100px; }
  nav a.wa:hover { border-color:var(--yellow); color:var(--yellow); }
  main { position:relative; z-index:5; }
  .wrap { max-width:1220px; margin:0 auto; padding:0 40px; }
  .fig { font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:14px; font-family:"SF Mono", Menlo, monospace; }
  .fig i { font-style:normal; color:var(--neon); text-shadow:0 0 8px rgba(0,229,255,0.6); }
  .kick { font-size:12px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; }
  .yellow { color:var(--yellow); }
  h1 { font-size:clamp(44px,6vw,84px); font-weight:700; letter-spacing:-0.045em; line-height:1.0; }
  h2.big { font-size:clamp(28px,3.4vw,46px); font-weight:700; letter-spacing:-0.035em; line-height:1.14; margin-top:6px; }
  p.body { font-size:16px; line-height:1.85; color:rgba(255,255,255,0.62); margin-top:20px; max-width:760px; }
  .hero { padding:170px 0 60px; }
  .hero p.lead { margin-top:24px; font-size:17px; line-height:1.75; color:rgba(255,255,255,0.65); max-width:680px; }
  .chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:44px; margin-bottom:8px; }
  .chip { font-size:12px; padding:9px 18px; border:1px solid rgba(255,255,255,0.2); border-radius:100px; color:rgba(255,255,255,0.6); text-decoration:none; transition:all .2s; }
  .chip:hover, .chip.on { background:var(--yellow); color:#000; border-color:var(--yellow); font-weight:600; }
  .secthead { padding:90px 0 14px; }

  /* ===== PROJECT CARDS ===== */
  .plist { display:flex; flex-direction:column; gap:34px; padding:40px 0 30px; }
  .pcard { position:relative; border:1px solid rgba(255,255,255,0.1); border-radius:24px; background:rgba(255,255,255,0.015); transition:border-color .3s, box-shadow .3s; overflow:hidden; }
  .pcard:hover { border-color:var(--acc); box-shadow:0 0 60px -20px var(--acc); }
  .ghost { position:absolute; top:-24px; right:18px; font-size:150px; font-weight:700; letter-spacing:-0.06em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.07); pointer-events:none; font-family:"Helvetica Neue",sans-serif; }
  .phead { display:grid; grid-template-columns:1.1fr 1fr; gap:30px; padding:36px 38px 32px; align-items:center; }
  .pinfo h3 { font-size:30px; font-weight:700; letter-spacing:-0.02em; }
  .ptag { display:inline-block; margin-top:10px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--acc); border:1px solid var(--acc); border-radius:100px; padding:5px 13px; opacity:0.9; }
  .pinfo p { margin-top:14px; font-size:14px; line-height:1.7; color:rgba(255,255,255,0.55); max-width:520px; }
  .btn-toggle { display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:13px 26px; border:1px solid var(--acc); background:transparent; border-radius:100px; color:var(--acc); font-size:13px; font-weight:600; cursor:pointer; transition:all .25s; font-family:inherit; }
  .btn-toggle:hover { background:var(--acc); color:#000; }
  .btn-toggle span { transition:transform .3s; display:inline-block; }
  .btn-toggle.open span { transform:rotate(180deg); }
  /* preview filmstrip — uncropped minis */
  .pstrip { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; cursor:pointer; }
  .pstrip img { width:100%; height:auto; display:block; border-radius:10px; border:1px solid rgba(255,255,255,0.1); transition:transform .35s, border-color .3s; }
  .pstrip:hover img { border-color:var(--acc); }
  .pstrip img:hover { transform:scale(1.03); }
  /* single-product cards: fixed 3:2 frame so tall pouches don't blow up */
  .pstrip.solo { grid-template-columns:1fr; }
  .pstrip.solo img { aspect-ratio:3/2; height:auto; object-fit:contain; background:#0a0a0a; }
  /* social media card square highlight cover */
  .soccover { aspect-ratio:6/5; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); cursor:pointer; align-self:center; transition:border-color .3s, box-shadow .3s; }
  .soccover:hover { border-color:var(--acc); box-shadow:0 0 50px -22px var(--acc); }
  .soccover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
  .soccover:hover img { transform:scale(1.04); }
  /* ===== WEBSITE DESIGN SHOWCASE ===== */
  .webgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; padding:30px 0 20px; }
  .webcard { border:1px solid rgba(255,255,255,0.1); border-radius:18px; overflow:hidden; background:rgba(255,255,255,0.015); transition:border-color .3s,box-shadow .3s,transform .3s; }
  .webcard:hover { border-color:var(--acc); box-shadow:0 0 60px -22px var(--acc); transform:translateY(-4px); }
  .webcover { position:relative; height:240px; overflow:hidden; background:#0a0a0a; cursor:pointer; }
  .webcover img { width:100%; display:block; }
  .webcover::after { content:"Click to experience"; position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; background:linear-gradient(to top,rgba(5,5,5,0.92),rgba(5,5,5,0.1) 45%,transparent 70%); opacity:0; transition:opacity .3s; }
  .webcard:hover .webcover::after { opacity:1; }
  .webbody { padding:17px 20px 19px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .webbody h3 { font-size:18px; font-weight:700; letter-spacing:-0.01em; }
  .webbody .wtag { font-size:12px; color:rgba(255,255,255,0.5); margin-top:3px; }
  .webview { flex:0 0 auto; font-size:12px; font-weight:600; padding:9px 17px; border:1px solid var(--acc); color:var(--acc); border-radius:100px; background:transparent; cursor:pointer; transition:.25s; font-family:inherit; }
  .webview:hover { background:var(--acc); color:#000; }
  /* site-preview modal (mock browser) */
  #sitemodal { position:fixed; inset:0; z-index:120; background:rgba(5,5,5,0.92); display:none; align-items:center; justify-content:center; padding:20px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
  #sitemodal.on { display:flex; }
  .browser { width:100%; max-width:900px; height:88vh; background:#111; border:1px solid rgba(255,255,255,0.14); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 90px rgba(0,0,0,0.65); }
  .bbar { display:flex; align-items:center; gap:12px; padding:12px 15px; background:#1b1b1b; border-bottom:1px solid rgba(255,255,255,0.08); flex:0 0 auto; }
  .bdots { display:flex; gap:7px; }
  .bdots i { width:11px; height:11px; border-radius:50%; display:block; }
  .burl { flex:1; background:#0a0a0a; border-radius:8px; padding:8px 14px; font-size:12px; color:rgba(255,255,255,0.6); font-family:"SF Mono",Menlo,monospace; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bclose { background:none; border:none; color:rgba(255,255,255,0.55); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
  .bclose:hover { color:var(--yellow); }
  .bscroll { flex:1; overflow-y:auto; overflow-x:hidden; background:#fff; }
  .bscroll img { width:100%; display:block; }
  @media (max-width:900px){ .browser { height:90vh; } }

  /* ===== MASONRY COLLAGE — natural aspect, nothing cropped ===== */
  .collage { columns:3; column-gap:12px; padding:0 38px; max-height:0; overflow:hidden; opacity:0; transition:max-height .8s cubic-bezier(.22,1,.36,1), opacity .5s, padding-bottom .4s; }
  .collage.open { max-height:9000px; opacity:1; padding-bottom:38px; }
  .collage .t { break-inside:avoid; margin-bottom:12px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); background:#0a0a0a; }
  .collage .t img { width:100%; height:auto; display:block; cursor:zoom-in; transition:transform .4s; image-rendering:auto; }
  .collage .t img:hover { transform:scale(1.025); }


  .collage.socgrid { columns:unset; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .collage.socgrid.one { grid-template-columns:minmax(0,720px); justify-content:center; }
  .collage.socgrid .g { border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
  .collage.socgrid .g img { width:100%; height:auto; display:block; cursor:zoom-in; }
  @media (max-width:900px){ .collage.socgrid { grid-template-columns:1fr; } }
  #lightbox { position:fixed; inset:0; z-index:100; background:rgba(5,5,5,0.96); display:none; align-items:center; justify-content:center; cursor:zoom-out; padding:32px; }
  #lightbox.on { display:flex; }
  #lightbox img { max-width:96vw; max-height:94vh; border-radius:8px; box-shadow:0 20px 80px rgba(0,0,0,0.7); }

  .catblock { padding:56px 0; border-top:1px solid rgba(255,255,255,0.07); }
  .cathead { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
  .btn-view { display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border:1px solid rgba(255,212,0,0.5); border-radius:100px; color:var(--yellow); font-size:13px; font-weight:600; text-decoration:none; transition:all .25s; white-space:nowrap; }
  .btn-view:hover { background:var(--yellow); color:#000; }
  .phstrip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
  .ph { aspect-ratio:4/3; border:1px dashed rgba(255,255,255,0.18); border-radius:14px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:"SF Mono", Menlo, monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.25); line-height:1.8; }
  /* AI Video embeds — streamed from YouTube (zero server load) */
  .vgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:28px; }
  .vembed { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); background:#000; transition:border-color .25s, box-shadow .25s; }
  .vembed:hover { border-color:var(--yellow); box-shadow:0 0 50px -20px rgba(255,212,0,0.55); }
  .vembed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
  .vshorts { display:flex; flex-wrap:wrap; gap:20px; margin-top:22px; }
  .vshort { width:300px; max-width:100%; }
  .vshort .vembed { aspect-ratio:9/16; }
  .closing { padding:110px 0 130px; text-align:center; }
  .closing h2 { font-size:clamp(34px,4.6vw,64px); font-weight:700; letter-spacing:-0.04em; line-height:1.05; }
  .closing p { margin:22px auto 0; max-width:600px; font-size:16px; line-height:1.75; color:rgba(255,255,255,0.6); }
  .btn-y { display:inline-block; margin-top:36px; background:var(--yellow); color:#000; font-weight:700; font-size:14px; padding:16px 34px; border-radius:100px; text-decoration:none; }
  footer { position:relative; z-index:5; padding:60px 40px; display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,0.08); font-size:12px; color:rgba(255,255,255,0.35); flex-wrap:wrap; gap:10px; }
  .rv { opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
  .rv.in { opacity:1; transform:none; }
  .waf { position:fixed; bottom:22px; right:22px; z-index:50; width:54px; height:54px; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(0,0,0,0.5); }
  @media (max-width:900px) {
    .menu { display:none; }
    .hero { padding-top:120px; padding-bottom:10px; }
    .secthead { padding:56px 0 10px; }
    h1 { font-size:clamp(36px,9vw,48px); }
    h2.big { font-size:clamp(24px,6.6vw,32px); line-height:1.2; }
    p.body { font-size:15px; line-height:1.85; }
    .pinfo h3 { font-size:24px; }
    .fig { line-height:1.9; }
    .phead { grid-template-columns:1fr; padding:26px 22px 22px; }
    .collage { columns:2; padding:0 20px; }
    .ghost { font-size:90px; }
    .phstrip { grid-template-columns:repeat(2,1fr); }
    .wrap { padding:0 24px; }
  }
  @media (max-width:900px){
    nav { padding:14px 18px; }
    nav a.wa { display:none; }
    .hero { padding-top:130px; }
  }
  .burger { display:none; width:44px; height:44px; border:1px solid rgba(255,255,255,0.3); border-radius:12px; background:rgba(5,5,5,0.5); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; margin-left:12px; }
  .burger span { display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }
  .burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity:0; }
  .burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .mnav { position:fixed; inset:0; z-index:90; background:rgba(5,5,5,0.97); display:flex; flex-direction:column; justify-content:center; padding:40px 34px; opacity:0; pointer-events:none; transition:opacity .35s; }
  .mnav.open { opacity:1; pointer-events:auto; }
  .mnav a { font-size:32px; font-weight:700; letter-spacing:-0.03em; color:#fff; text-decoration:none; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
  .mnav a.on, .mnav a:active { color:#FFD400; }
  .mnav .mwa { margin-top:30px; text-align:center; background:#FFD400; color:#000; font-size:15px; font-weight:700; border-radius:100px; padding:16px; border:none; letter-spacing:0.1em; text-transform:uppercase; }
  @media (max-width:900px) { .burger { display:flex; } }

  /* ===== PROJECTS HUB CARDS ===== */
  .hubgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; padding:34px 0 20px; }
  .hcard { display:flex; flex-direction:column; border:1px solid rgba(255,255,255,0.1); border-radius:22px; overflow:hidden; background:rgba(255,255,255,0.015); text-decoration:none; color:#fff; transition:border-color .3s, box-shadow .3s, transform .3s; }
  .hcard:hover { border-color:var(--acc); box-shadow:0 0 60px -22px var(--acc); transform:translateY(-4px); }
  .hc-img { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0a0a0a; }
  .hc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
  .hcard:hover .hc-img img { transform:scale(1.05); }
  .hc-img::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,5,0.94) 3%, rgba(5,5,5,0.45) 40%, rgba(5,5,5,0) 72%); pointer-events:none; }
  .hc-tag { position:absolute; left:22px; bottom:16px; z-index:2; font-size:23px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.55); padding-left:13px; border-left:3px solid var(--acc); }
  .hc-body { padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
  .hc-body h3 { font-size:22px; font-weight:700; letter-spacing:-0.02em; line-height:1.2; margin-top:2px; }
  .hc-body p { margin-top:12px; font-size:14px; line-height:1.7; color:rgba(255,255,255,0.55); flex:1; }
  .hc-meta { margin-top:20px; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--acc); display:inline-flex; align-items:center; gap:8px; }
  .hc-meta span { transition:transform .3s; display:inline-block; }
  .hcard:hover .hc-meta span { transform:translateX(5px); }
  @media (max-width:900px){ .hubgrid { gap:18px; } }