:root{
    --bg: #020203;
    --bg-2: #070708;
    --panel: rgba(255,255,255,0.035);
    --panel-solid: #141416;
    --line: rgba(232,232,236,0.10);
    --accent: #E9A23D;
    --accent-soft: rgba(233,162,61,0.14);
    --mint: #B9BAC2;
    --amber: #F4C877;
    --red: #86828C;
    --ink: #EDEDEF;
    --muted: #9C9CA3;
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'IBM Plex 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(--accent) 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 560px 420px at 4% 80%, rgba(237,237,239,0.03), transparent 65%),
      radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.7) 100%);
  }
  body::after{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }
  ::-webkit-scrollbar{width:9px;}
  ::-webkit-scrollbar-track{background:var(--bg-2);}
  ::-webkit-scrollbar-thumb{background:var(--accent); 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(--accent); 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(--amber);}

  .section-tag{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font-body); font-weight:600; font-size:0.95rem;
    color:var(--muted); margin-bottom:14px;
  }
  .section-tag .tag-phase{
    position:relative; width:13px; height:13px; border-radius:50%;
    background:var(--amber); flex:none; --p:50%;
  }
  .section-tag .tag-phase::before{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:var(--bg); clip-path:inset(0 0 0 var(--p));
  }
  .section-tag .tag-phase::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    box-shadow:0 0 7px 1px rgba(244,200,119,0.45);
  }
  .section-title{font-size:clamp(1.9rem, 3.6vw, 3rem); letter-spacing:-0.015em; line-height:1.14; 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:999px; 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:transparent; border-color:var(--accent); color:var(--accent);}
  .btn-primary:hover{background:var(--accent-soft); box-shadow:0 0 28px rgba(233,162,61,0.28); transform:translateY(-2px);}
  .btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--accent); background:var(--accent-soft); transform:translateY(-3px);}

  .btn-link{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 4px; font-weight:600; color:var(--ink);
    border-bottom:1px solid var(--accent); border-radius:0;
    transition:border-color 0.2s ease, gap 0.2s ease, color 0.2s ease;
  }
  .btn-link::after{content:"↗"; font-size:0.85em; color:var(--muted); transition:transform 0.2s ease, color 0.2s ease;}
  .btn-link:hover{border-color:var(--amber); color:var(--amber); gap:11px;}
  .btn-link:hover::after{color:var(--amber); transform:translate(1px,-1px);}
  .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;
    transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.2s ease, color 0.2s ease;
  }
  .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-moon{
    position:relative; width:54px; height:54px; border-radius:50%;
    background:var(--ink); margin:0 auto 16px; overflow:hidden;
    box-shadow:0 0 24px rgba(233,162,61,0.35);
  }
  .preloader-moon::before{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:var(--bg); transform:translateX(0%);
    animation:moonFill 1.3s cubic-bezier(.65,0,.35,1) infinite;
  }
  @keyframes moonFill{
    0%{transform:translateX(0%);}
    45%,55%{transform:translateX(100%);}
    100%{transform:translateX(0%);}
  }
  .preloader-word{font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--muted);}

  /* CURSOR */
  .has-custom-cursor, .has-custom-cursor *{cursor:none;}
  #cursor{display:none; opacity:1; transition:opacity 0.25s ease;}
  #cursor.is-hidden{opacity:0;}
  .cursor-dot, .cursor-ring, .cursor-label{
    position:fixed; top:0; left:0; pointer-events:none; z-index:200; will-change:transform;
  }

  .cursor-dot{
    width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:0.9;
    transition:opacity 0.2s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
  }

  .cursor-ring{
    width:16px; height:16px; border-radius:50%;
    border:1px solid var(--accent-soft); background:transparent;
    transition:
      width 0.25s cubic-bezier(0.2,0.8,0.2,1),
      height 0.25s cubic-bezier(0.2,0.8,0.2,1),
      border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
  }

  .cursor-label{
    font-family:var(--font-mono); font-size:0.62rem; font-weight:600; letter-spacing:0.04em;
    color:var(--bg); background:var(--accent); padding:7px 13px; border-radius:999px;
    white-space:nowrap; opacity:0;
    box-shadow:0 8px 20px rgba(244,200,119,0.08);
    transition:opacity 0.18s ease;
  }

  .cursor-dot[data-state="lock"]{width:6px; height:6px;}
  .cursor-ring[data-state="lock"]{
    width:11px; height:11px; border-color:var(--amber); background:var(--accent-soft);
    box-shadow:0 0 10px 1px rgba(244,200,119,0.08);
  }

  .cursor-dot[data-state="focus"]{opacity:0.5;}
  .cursor-ring[data-state="focus"]{
    width:30px; height:30px; border-color:var(--amber); background:var(--accent-soft);
    box-shadow:0 0 16px 2px rgba(244,200,119,0.08);
  }

  .cursor-dot[data-state="hero"]{opacity:0;}
  .cursor-ring[data-state="hero"]{
    width:26px; height:26px; border-color:transparent; border-radius:50%;
    background:var(--ink); box-shadow:0 0 18px 3px rgba(244,200,119,0.08);
    opacity:0.6; overflow:hidden;
  }
  .cursor-ring[data-state="hero"]::before{
    content:""; position:absolute; top:-15%; left:-32%; width:100%; height:100%;
    border-radius:50%; background:var(--bg);
  }

  .cursor-dot[data-state="pill"], .cursor-ring[data-state="pill"]{opacity:0;}
  .cursor-label[data-state="pill"]{opacity:1;}

  /* 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(2,2,3,0.75); backdrop-filter:blur(14px); border-color:var(--line);}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; max-width:1600px; padding:20px clamp(24px,5.5vw,96px);}
  .logo{display:flex; align-items:center; gap:13px; font-size:1.02rem; font-weight:700; letter-spacing:0.28em; text-transform:none;}
  
  .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(--accent); 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(2,2,3,0.98); backdrop-filter:blur(14px);
    padding:0 24px; max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height 0.35s ease, padding 0.35s ease, visibility 0s linear 0.35s;
  }
  .mobile-menu.open{
    max-height:min(400px, calc(100vh - 70px)); max-height:min(400px, calc(100svh - 70px));
    padding:10px 24px 20px; overflow-y:auto; visibility:visible;
    box-shadow:inset 0 1px 0 var(--line);
    transition:max-height 0.35s ease, padding 0.35s ease, visibility 0s;
  }
  .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; padding:13px; margin-right:-13px;}
    .mobile-menu{display:flex;}
    .nav-inner{padding-top:12px; padding-bottom:12px;}
  }

  /* HERO */
  .hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden;}
  .hero::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 1000px 760px at 66% -4%, rgba(233,162,61,0.09), transparent 58%);
    -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
  }
  #hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1;}
  .hero-content{position:relative; z-index:2; width:100%; padding:130px clamp(24px,5.5vw,96px) 110px;}
  .hero-content > *{max-width:min(38rem,100%);}
  .hero-role{display:flex; align-items:center; gap:11px; font-size:0.92rem; color:var(--accent); margin-bottom:24px;}
  .role-crescent{width:11px; height:11px; border-radius:50%; box-shadow:inset -3.5px -1px 0 0 var(--accent);}
  .hero-title{font-size:clamp(2.3rem,4.4vw,4.2rem); line-height:1.1; letter-spacing:-0.015em; margin-bottom:26px;}
  .hero-sub{font-size:1.2rem; line-height:1.6; color:var(--muted); max-width:30em; margin-bottom:38px;}
  .hero-actions{display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
  .hero-rail, .hero-place{position:absolute; right:clamp(24px,5.5vw,96px); z-index:2; padding-left:22px; border-left:1px solid var(--line);}
  .hero-rail{top:30%; display:flex; flex-direction:column; gap:13px;}
  .hero-rail a{font-size:0.82rem; letter-spacing:0.14em; color:var(--muted); transition:color 0.2s ease;}
  .hero-rail a:hover{color:var(--accent);}
  .hero-place{top:60%; display:flex; flex-direction:column; gap:7px; font-size:0.8rem; color:var(--muted);}
  .place-row{display:flex; align-items:center; gap:9px;}
  .place-time{font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.04em; color:var(--ink);}
  .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;}}
  .scroll-indicator{
    position:absolute; bottom:34px; left:clamp(24px,5.5vw,96px); z-index:2;
    display:flex; align-items:flex-end; gap:14px; font-size:0.74rem; letter-spacing:0.16em; color:var(--muted);
  }
  .scroll-indicator span{width:1px; height:46px; background:linear-gradient(var(--accent), transparent); animation:scrollLine 1.8s ease-in-out infinite;}
  @keyframes scrollLine{0%{opacity:0.2;} 50%{opacity:1;} 100%{opacity:0.2;}}
  @media (max-width:900px){
    .hero-rail, .hero-place{display:none;}
    .hero{align-items:flex-end;}
    .hero-content{padding-bottom:96px;}
  }

  /* 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;} }

  /* CONSTELLATION */
  .portfolio-constellation{
    position:absolute; top:0; right:0; width:42%; height:100%;
    pointer-events:none; z-index:1; opacity:0.9; transition:opacity 0.6s ease;
  }
  .portfolio-constellation.is-empty{display:none;}
  .constellation-label{
    position:absolute; top:30px; right:35px; display:flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:9px; letter-spacing:0.16em;
    color:rgba(255,255,255,0.28); white-space:nowrap;
  }
  .constellation-label-dot{
    width:4px; height:4px; border-radius:50%;
    background:rgba(244,200,119,0.75); box-shadow:0 0 8px rgba(244,200,119,0.35);
  }
  .constellation-canvas{position:absolute; top:70px; right:0; width:100%; height:calc(100% - 130px);}


  .constellation-layer{position:absolute; inset:0; transition:transform 0.2s ease-out;}
  .constellation-layer--far{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  }

  /* lines */
  .constellation-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
  .pc-stop-a{stop-color:var(--accent); stop-opacity:0.55;}
  .pc-stop-b{stop-color:var(--accent); stop-opacity:0.05;}
  .constellation-line{
    fill:none; stroke:url(#pc-line-grad); stroke-width:1;
    vector-effect:non-scaling-stroke; opacity:0.7;
  }

  .constellation-line.is-drawing{transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1);}
  .constellation-line.is-flowing{stroke-dasharray:3 9 !important; animation:constellation-dash 18s linear infinite;}


  .constellation-glow-svg{will-change:transform;}
  .constellation-glow{
    fill:none; stroke:url(#pc-line-grad); stroke-width:1;
    vector-effect:non-scaling-stroke; opacity:0.7; filter:url(#pc-glow-only);
  }
  .constellation-glow.is-drawing{transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1);}
  .constellation-glow.is-flowing{stroke-dasharray:none !important; opacity:0.175;}

  .portfolio-constellation.is-offscreen .constellation-line,
  .portfolio-constellation.is-offscreen .constellation-star,
  .portfolio-constellation.is-offscreen .node-ring,
  .portfolio-constellation.is-offscreen .node-halo{animation-play-state:paused;}

  .constellation-line-secondary{stroke:rgba(255,255,255,0.07); stroke-dasharray:2 12; animation-duration:25s;}
  @keyframes constellation-dash{from{stroke-dashoffset:0;} to{stroke-dashoffset:-120;}}

  /* nodes */
  .constellation-node{
    position:absolute; width:12px; height:12px; pointer-events:auto;
    transform:translate(-50%,-50%);
    transition:transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
  }

  .node-core{
    position:absolute; left:50%; top:50%; width:5px; height:5px;
    transform:translate(-50%,-50%); border-radius:50%;
    background:var(--amber); box-shadow:0 0 8px rgba(244,200,119,0.08);
    transition:width 0.35s ease, height 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  }
  .node-ring{
    position:absolute; left:50%; top:50%; width:14px; height:14px;
    transform:translate(-50%,-50%); border:1px solid var(--amber); border-radius:50%;
    transition:width 0.4s ease, height 0.4s ease, border-color 0.4s ease;
  }
  .node-halo{
    position:absolute; left:50%; top:50%; width:30px; height:30px;
    transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(circle, var(--accent-soft) 0%, transparent 72%);
    filter:blur(2px); opacity:0; transition:opacity 0.4s ease;
  }
  .node-number{
    position:absolute; left:16px; top:-4px;
    font-family:var(--font-mono); font-size:8px; letter-spacing:0.1em;
    color:rgba(255,255,255,0.16); transition:color 0.4s ease;
  }

  .constellation-node.is-active .node-halo{opacity:0.5; animation:node-pulse 2.4s ease-in-out infinite;}
  .constellation-node.is-active .node-core{
    width:7px; height:7px; background:var(--amber);
    box-shadow:0 0 7px rgba(244,200,119,0.65), 0 0 18px rgba(244,200,119,0.2);
  }
  .constellation-node.is-active .node-ring{
    width:22px; height:22px; border-color:rgba(244,200,119,0.38);
    animation:node-pulse 2.4s ease-in-out infinite;
  }
  .constellation-node.is-active .node-number{color:rgba(244,200,119,0.7);}
  @keyframes node-pulse{
    0%, 100%{opacity:0.35; transform:translate(-50%,-50%) scale(0.9);}
    50%{opacity:1; transform:translate(-50%,-50%) scale(1.15);}
  }

  .constellation-node.is-hovered{transform:translate(-50%,-50%) scale(1.25);}
  .constellation-node.is-hovered .node-core{background:rgba(244,200,119,0.75); box-shadow:0 0 10px rgba(244,200,119,0.65), 0 0 25px rgba(244,200,119,0.2);}

  /* ambient stars */
  .constellation-star{
    position:absolute; width:2px; height:2px; border-radius:50%;
    background:rgba(255,255,255,0.3); opacity:0.35;
    animation:star-flicker 4s ease-in-out infinite;
  }
  @keyframes star-flicker{
    0%, 100%{opacity:0.15; transform:scale(0.8);}
    50%{opacity:0.55; transform:scale(1.4);}
  }

  /* status readout */
  .constellation-status{
    position:absolute; right:35px; bottom:25px; display:flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:8px; letter-spacing:0.12em;
    color:rgba(255,255,255,0.2);
  }
  .status-line{width:18px; height:1px; background:rgba(244,200,119,0.35);}
  #constellation-status-text.is-online{color:var(--accent);}

  @media (max-width:900px){ .portfolio-constellation{display:none;} }

  @media (prefers-reduced-motion:reduce){
    .constellation-line,
    .constellation-node.is-active .node-ring,
    .constellation-node.is-active .node-halo,
    .constellation-star{animation:none;}
    .constellation-layer{transition:none;}
  }

  /* INDEX LIST (skills, services, work) =====
     A spine line runs behind the rows and draws in when the list enters view.
     Each row's node fills on hover. */
  .index-list{position:relative; margin-top:40px;}
  .index-line{position:absolute; left:14px; top:0; bottom:0; width:1px; background:var(--line);}
  .index-line-fill{
    position:absolute; left:14px; top:0; width:1px; height:0%;
    background:var(--accent); opacity:0.55;
    transition:height 1.3s cubic-bezier(.16,.74,.24,1);
  }
  .index-list.in-view .index-line-fill{height:100%;}
  @media (prefers-reduced-motion:reduce){ .index-line-fill{transition:none; height:100% !important;} }

  .index-row{position:relative; display:flex; gap:26px; padding:28px 0;}
  .index-row:not(:first-child){border-top:1px solid rgba(255,255,255,0.05);}
  .index-row.reveal{transform:translateX(-14px);}
  .index-row.reveal.in-view{transform:translateX(0);}

  .index-node{flex:0 0 30px; display:flex; justify-content:center; padding-top:9px;}
  .index-node::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background:var(--bg); border:1.5px solid var(--line);
    transition:background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .index-row:hover .index-node::before{
    background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(233,162,61,0.14);
  }

  .index-body{flex:1; min-width:0;}
  .index-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-bottom:6px;}
  .index-num{display:none;}
  .index-title{font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--ink);}

  /* SKILLS */
  .skills-section{padding:0 0 100px;}

  /* SERVICES */
  .services-section{padding:0 0 100px;}
  .service-icon-inline{
    width:17px; height:17px; color:var(--accent); flex-shrink:0; display:flex; align-items:center;
  }
  .service-icon-inline svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  .service-desc{color:var(--muted); font-size:0.93rem; max-width:64ch;}

  /* WORK */
  .work-section{position:relative; padding:0 0 100px;}
  .work-status{
    display:inline-block; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.07em;
    color:var(--mint); border:1px solid rgba(185,186,194,0.35); padding:2px 9px; border-radius:999px;
  }
  .work-status-discontinued{
    display:inline-block; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.07em;
    color:var(--red); border:1px solid rgba(134,130,140,0.35); padding:2px 9px; border-radius:999px;
    text-decoration:line-through; text-decoration-color:rgba(134,130,140,0.5);
  }
  .work-desc{color:var(--muted); font-size:0.93rem; margin:2px 0 4px; max-width:64ch;}
  .tech-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:10px 0 16px;
    font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); letter-spacing:0.01em;
  }
  .tech-row span:not(:last-child)::after{content:"/"; margin-left:7px; color:var(--line);}

  @media (max-width:600px){
    .index-row{gap:16px; padding:22px 0;}
    .index-node{flex-basis:20px; padding-top:8px;}
    .index-line, .index-line-fill{left:9px;}
  }

  /* 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(--accent);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:0.85rem; color:var(--accent); 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-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; margin-top:44px;}
  .contact-sub{color:var(--muted); font-size:1rem; max-width:46ch;}
  .contact-sub + .contact-sub{margin-top:14px;}

  .contact-direct{display:flex; flex-direction:column; gap:2px; margin-top:32px;}
  .contact-direct .contact-link{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    width:100%; padding:14px 2px; border-left:none; border-bottom:1px solid var(--line);
  }
  .contact-direct .contact-link:last-child{border-bottom:none;}
  .contact-direct .contact-link:hover{padding-left:8px;}
  .contact-k{font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.02em; color:var(--accent);}
  .contact-v{font-family:var(--font-mono); font-size:0.92rem; color:var(--ink); transition:color 0.2s ease;}
  .contact-link:hover .contact-v{color:var(--accent);}

  /* brief builder card */
  .brief-card{
    background:var(--panel-solid); border:1px solid var(--line); border-radius:22px;
    padding:clamp(22px,3vw,32px); box-shadow:0 30px 60px -30px rgba(0,0,0,0.55);
  }
  .brief-field + .brief-field{margin-top:25px;}
  .brief-label{
    display:block; margin-bottom:12px; font-family:var(--font-mono); font-size:0.82rem;
    letter-spacing:0.02em; color:var(--accent);
  }
  .brief-opts{display:flex; flex-wrap:wrap; gap:8px;}
  .brief-opt{
    font-family:var(--font-mono); font-size:0.8rem; color:var(--muted);
    border:1px solid var(--line); background:rgba(255,255,255,0.02);
    padding:9px 15px; border-radius:9px;
    transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }
  .brief-opt:hover{border-color:rgba(255,255,255,0.22); color:var(--ink); transform:translateY(-1px);}
  .brief-opt[aria-pressed="true"]{
    border-color:var(--accent); color:var(--accent); background:var(--accent-soft);
  }
  .brief-textarea{
    width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
    padding:13px 15px; color:var(--ink); font-family:var(--font-body); font-size:0.93rem;
    resize:vertical; min-height:96px; transition:border-color 0.2s ease;
  }
  .brief-textarea::placeholder{color:var(--muted);}
  .brief-textarea:focus{outline:none; border-color:var(--accent);}
  .brief-preview{
    margin-top:25px; border:1px dashed var(--line); border-radius:10px;
    padding:15px; background:var(--bg-2);
  }
  .brief-preview pre{
    margin:0; font-family:var(--font-mono); font-size:0.74rem; line-height:1.8;
    color:var(--muted); white-space:pre-wrap; word-break:break-word;
  }
  .brief-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:22px;}
  .brief-said{font-family:var(--font-mono); font-size:0.78rem; color:var(--mint); opacity:0; transition:opacity 0.25s ease;}
  .brief-said.on{opacity:1;}

  @media (max-width:860px){
    .contact-grid{grid-template-columns:1fr; gap:40px;}
  }
  @media (max-width:560px){
    .brief-actions{flex-direction:column; align-items:stretch;}
    .brief-actions .btn{width:100%;}
  }

  /* 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(--accent);}
  .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(7,7,8,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(--accent); color:var(--accent);}

  /* REVEAL */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in-view{opacity:1; transform:translateY(0);}

  /* Section headings wipe in horizontally. */
  .reveal-mask-inner{
    clip-path:inset(0 100% 0 0);
    transition:clip-path 0.85s cubic-bezier(.22,1,.36,1);
  }
  .reveal-mask.in-view .reveal-mask-inner{clip-path:inset(0 0 0 0);}

  /* Stats bar: scales in */
  .reveal-scale{opacity:0; transform:scale(0.94); transition:opacity 0.6s ease, transform 0.6s cubic-bezier(.22,1,.36,1);}
  .reveal-scale.in-view{opacity:1; transform:scale(1);}

  /* Process steps: settle in place */
  .reveal-settle{opacity:0; transform:translateY(10px) scale(0.98); transition:opacity 0.55s ease, transform 0.55s ease;}
  .reveal-settle.in-view{opacity:1; transform:translateY(0) scale(1);}

  @media (prefers-reduced-motion:reduce){
    .reveal, .reveal-mask, .reveal-scale, .reveal-settle{opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;}
    #cursor{display:none !important;}
  }

/* GITHUB STATS */
.gh-section{padding:0 0 100px;}
.gh-section[hidden]{display:none;}
.gh-stats{display:flex; flex-wrap:wrap; gap:18px 64px; margin:36px 0 34px;}
.gh-stat-num{font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.1; color:var(--ink);}
.gh-stat-label{font-family:var(--font-mono); font-size:0.76rem; color:var(--muted); margin-top:4px;}
.gh-heat{overflow-x:auto; padding:26px 0 8px; border-top:1px solid var(--line);}
.gh-heat svg{display:block; max-width:none; width:100%; min-width:640px; height:auto;}
.gh-heat text{fill:var(--muted); font:10px var(--font-mono);}
.gh-heat .l0{fill:rgba(255,255,255,0.05);}
.gh-heat .l1{fill:rgba(233,162,61,0.25);}
.gh-heat .l2{fill:rgba(233,162,61,0.45);}
.gh-heat .l3{fill:rgba(233,162,61,0.7);}
.gh-heat .l4{fill:var(--accent);}
.gh-langbar{display:flex; gap:2px; height:8px; margin-top:34px; border-radius:999px; overflow:hidden;}
.gh-langbar span{display:block; min-width:3px; background:var(--c);}
.gh-legend{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; font-family:var(--font-mono); font-size:0.78rem; color:var(--muted);}
.gh-legend i{display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--c);}
.gh-repos{display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; margin-top:34px;}
.gh-repo{display:block; padding:20px 0; border-top:1px solid rgba(255,255,255,0.05);}
.gh-repo-name{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); transition:color 0.2s ease;}
.gh-repo:hover .gh-repo-name{color:var(--amber);}
.gh-repo-desc{color:var(--muted); font-size:0.93rem; margin:4px 0 8px; max-width:56ch;}
.gh-repo-meta{font-family:var(--font-mono); font-size:0.76rem; color:var(--muted);}
.gh-foot{margin-top:22px; font-family:var(--font-mono); font-size:0.72rem; color:var(--muted);}
@media (max-width:700px){ .gh-repos{grid-template-columns:1fr;} .gh-section{padding-bottom:80px;} }

/* MOBILE / TOUCH */

html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
a, button, .brief-opt{-webkit-tap-highlight-color:transparent;}

#site-nav.menu-open{background:rgba(2,2,3,0.92); backdrop-filter:blur(14px); border-color:var(--line);}
.mobile-menu .nav-link.active{color:var(--accent);}
.mobile-menu .nav-link.active::after{display:none;}

@media (max-width:699px), (max-width:900px) and (orientation:portrait){
  .hero-content{padding-top:clamp(250px, 34svh, 360px); padding-bottom:56px;}
  .scroll-indicator{display:none;}
}

@media (max-width:600px){
  .hero-title{font-size:clamp(1.85rem, 8.2vw, 2.3rem); margin-bottom:20px;}
  .hero-sub{font-size:1.02rem; margin-bottom:28px;}
  .hero-role{margin-bottom:18px;}

  .about-section{padding-top:72px; padding-bottom:64px;}
  .skills-section, .services-section, .work-section, .process-section, .gh-section{padding-bottom:72px;}
  .contact-section{padding-bottom:96px;}
  .stats-bar{padding:44px 0;}
  .index-list{margin-top:30px;}
  .process-steps{margin-top:36px;}
  .btn-outline-dashed{display:inline-block; margin:0 8px 8px 0; padding:12px 16px;}

  /* contact + brief builder */
  .contact-direct{margin-top:24px;}
  .contact-direct .contact-link{padding:16px 2px;}
  .contact-k{flex:none;}
  .contact-v{min-width:0; overflow-wrap:anywhere; text-align:right;}
  .brief-card{padding:20px; border-radius:18px;}
  .brief-opt{padding:11px 14px;}
  .brief-textarea{font-size:16px;} /* stops browsers zooming in when the field is focused */

  #back-to-top{bottom:18px; right:18px;}
  .footer-inner{padding-left:24px; padding-right:24px;}
}


@media (hover:none){
  .btn:hover{transform:none;}
  .btn-primary:hover{background:transparent; box-shadow:none;}
  .btn-ghost:hover{background:transparent; border-color:var(--line);}
  .btn-link:hover{border-color:var(--accent); color:var(--ink); gap:8px;}
  .btn-link:hover::after{color:var(--muted); transform:none;}
  .btn-outline-dashed:hover{border-color:var(--line); border-style:dashed; color:var(--muted);}
  .brief-opt:not([aria-pressed="true"]):hover{border-color:var(--line); color:var(--muted); transform:none;}
  .contact-direct .contact-link:hover{padding-left:2px;}
  .contact-link:hover .contact-v{color:var(--ink);}
  .index-row:hover .index-node::before{background:var(--bg); border-color:var(--line); box-shadow:none;}
  .gh-repo:hover .gh-repo-name{color:var(--ink);}
  #back-to-top:hover{border-color:var(--line); color:var(--ink);}

  .btn:active{transform:scale(0.97);}
  .btn-outline-dashed:active{border-color:var(--amber); color:var(--amber);}
  .brief-opt:active{border-color:var(--accent); color:var(--accent);}
  .contact-link:active .contact-v{color:var(--accent);}

  /* the grain overlay is invisible at phone density but costs a full-screen layer */
  body::after{display:none;}
}

/* BRIEF BUILDER: moon stepper + ticket */
.bb-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.brief-moon .tag-phase{width:30px; height:30px;}
.brief-moon .tag-phase::before{background:var(--panel-solid); transition:clip-path 0.55s cubic-bezier(.22,1,.36,1);}
.bb-step{font-family:var(--font-mono); font-size:0.78rem; color:var(--muted);}
.bb-q{font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:6px; outline:none;}
.bb-hint{color:var(--muted); font-size:0.9rem; margin-bottom:4px;}
.bb-stage .brief-opts{margin-top:16px;}
.bb-input{min-height:0; margin:16px 0 12px; resize:none;}
.bb-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px;}
.bb-nav .btn[disabled]{opacity:0.35; pointer-events:none;}
.bb-ticket{border:1px dashed var(--line); border-radius:14px; padding:18px 20px; background:var(--bg-2); margin-top:16px;}
.bb-ticket-h{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:0.8rem; color:var(--accent); padding-bottom:12px; margin-bottom:10px; border-bottom:1px dashed var(--line);}
.bb-row{display:flex; gap:14px; padding:5px 0; font-size:0.92rem;}
.bb-row span:first-child{flex:0 0 78px; font-family:var(--font-mono); font-size:0.76rem; color:var(--muted); padding-top:3px;}
.bb-row span:last-child{min-width:0; color:var(--ink); overflow-wrap:anywhere; white-space:pre-wrap;}

.bb-price{margin-top:22px; padding:12px 14px; border:1px dashed var(--line); border-radius:10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;}
.bb-price[hidden]{display:none;}
.bb-price-k{font-size:0.84rem; color:var(--muted);}
.bb-price-v{font-family:var(--font-display); font-size:1.3rem; color:var(--amber); display:inline-block;}
.bb-price-v.bump{animation:bbBump 0.35s ease;}
.bb-price-n{flex-basis:100%; font-family:var(--font-mono); font-size:0.7rem; color:var(--muted);}
@keyframes bbBump{40%{transform:scale(1.12);}}
@media (prefers-reduced-motion:reduce){ .bb-price-v.bump{animation:none;} .brief-moon .tag-phase::before{transition:none;} }

/* BRIEF CARD COLOURS */
.brief-card{
  background-color:#0b0a09;
  background-image:radial-gradient(ellipse 85% 55% at 50% -12%, rgba(233,162,61,0.09), transparent 70%);
  border-color:rgba(233,162,61,0.17);
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(244,200,119,0.06);
}
.brief-moon .tag-phase::before{background:#0b0a09;}
.brief-moon .tag-phase{box-shadow:0 0 0 1px rgba(233,162,61,0.28);}
.bb-ticket{background:rgba(255,255,255,0.025); border-color:rgba(233,162,61,0.22);}
.bb-ticket-h{border-bottom-color:rgba(233,162,61,0.22);}

/* ticket: multi-project rows, sent state, mail note */
.bb-sub{margin-top:20px;}
.bb-row span:first-child{flex-basis:104px;}
.bb-ticket.is-sent{border-style:solid;}
.bb-ticket.is-sent .bb-ticket-h span:last-child{color:var(--mint);}
.bb-done{margin-top:18px;}
.bb-done-t{font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--ink); margin-bottom:4px;}
.bb-note{margin-top:14px; font-size:0.85rem; color:var(--muted); overflow-wrap:anywhere;}
.bb-note[hidden]{display:none;}