:root{
    --bg:#060503;
    --bg-soft:#0c0a07;
    --ink:#f6edd9;
    --muted:#a2926f;
    --faint:#6a5c41;
    --gold:#e0a92e;
    --gold-bright:#f8d878;
    --gold-deep:#8a5a16;
    --glass:rgba(28,22,12,0.42);
    --glass-line:rgba(224,169,46,0.18);
    --maxw:1140px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Space Grotesk",system-ui,sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}

  /* ---- live golden background ---- */
  #weave{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-2;
    display:block;
  }
  .vignette{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(120% 90% at 50% 35%, transparent 30%, rgba(6,5,3,0.55) 100%);
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  .mono{font-family:"JetBrains Mono",monospace}
  .eyebrow{
    font-family:"JetBrains Mono",monospace;
    font-size:12px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--gold);
  }

  /* ---- nav ---- */
  header{
    position:sticky;top:0;z-index:20;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    background:linear-gradient(to bottom, rgba(6,5,3,0.72), rgba(6,5,3,0));
    border-bottom:1px solid rgba(224,169,46,0.07);
  }
  nav{
    max-width:var(--maxw);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;
  }
  .brand{
    font-weight:700;font-size:19px;letter-spacing:.02em;
    display:flex;align-items:center;gap:10px;
  }
  .brand .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--gold-bright);
    box-shadow:0 0 14px 2px rgba(248,216,120,.7);
  }
  .nav-links{display:flex;gap:30px;font-size:14px}
  .nav-links a{color:var(--muted);transition:color .2s}
  .nav-links a:hover{color:var(--ink)}

  /* ---- hero ---- */
  .hero{
    min-height:92vh;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;gap:40px;
    padding:110px 0 80px;
  }
  .hero-text{display:flex;flex-direction:column;justify-content:center}
  .hero .eyebrow{margin-bottom:26px}

  /* ---- hero figure / skin ---- */
  .hero-figure{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    min-height:480px;
  }
  .figure-glow{
    position:absolute;
    width:78%;height:70%;
    left:50%;top:46%;transform:translate(-50%,-50%);
    background:radial-gradient(closest-side, rgba(224,169,46,.30), rgba(224,169,46,.06) 55%, transparent 72%);
    filter:blur(14px);
    z-index:0;
    pointer-events:none;
    animation:glowpulse 5.5s ease-in-out infinite;
  }
  @keyframes glowpulse{
    0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  }
  .hero-figure .render{
    position:relative;z-index:1;
    max-width:100%;max-height:520px;
    width:auto;height:auto;
    /* мягко растворяем края картинки в фоне */
    -webkit-mask-image:radial-gradient(120% 120% at 50% 48%, #000 60%, transparent 92%);
    mask-image:radial-gradient(120% 120% at 50% 48%, #000 60%, transparent 92%);
    filter:drop-shadow(0 24px 50px rgba(0,0,0,.6));
  }
  #skin_view{
    position:relative;z-index:2;
    cursor:pointer;touch-action:none;
    max-width:100%;
  }
  #skin_view:active{cursor:grabbing}
  .skin-hint{
    position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
    z-index:3;
    font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;
    color:var(--faint);text-transform:uppercase;
    opacity:.7;transition:opacity .3s;pointer-events:none;text-align:center;
  }
  .name{
    font-weight:700;
    font-size:clamp(64px,14vw,184px);
    line-height:.92;
    letter-spacing:-.03em;
    background:linear-gradient(96deg,#fff4d9 0%,var(--gold-bright) 38%,var(--gold) 62%,var(--gold-deep) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    filter:drop-shadow(0 4px 40px rgba(224,169,46,.18));
  }
  .lede{
    margin-top:30px;
    max-width:540px;
    font-size:clamp(17px,2.2vw,21px);
    color:var(--ink);
    opacity:.92;
  }
  .lede b{color:var(--gold-bright);font-weight:600}
  .cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
  .btn{
    font-family:"JetBrains Mono",monospace;
    font-size:14px;letter-spacing:.02em;
    padding:14px 26px;border-radius:2px;
    transition:transform .15s ease, box-shadow .2s ease, background .2s;
    cursor:pointer;
  }
  .btn-primary{
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));
    color:#1a1205;font-weight:700;
    box-shadow:0 6px 30px rgba(224,169,46,.28);
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 38px rgba(224,169,46,.42)}
  .btn-ghost{
    border:1px solid var(--glass-line);
    color:var(--ink);
    background:var(--glass);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright)}

  /* ---- section frame ---- */
  section{padding:96px 0}
  .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:48px;flex-wrap:wrap}
  .sec-head h2{
    font-size:clamp(28px,4.4vw,46px);
    font-weight:600;letter-spacing:-.02em;
  }
  .sec-num{
    font-family:"JetBrains Mono",monospace;
    color:var(--faint);font-size:14px;letter-spacing:.1em;
  }

  /* ---- craft cards ---- */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{
    background:var(--glass);
    border:1px solid rgba(224,169,46,0.12);
    border-radius:6px;
    padding:30px 28px 34px;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    position:relative;overflow:hidden;
    transition:border-color .25s, transform .25s;
  }
  .card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg, rgba(248,216,120,.06), transparent 45%);
    pointer-events:none;
  }
  .card:hover{border-color:var(--gold);transform:translateY(-4px)}
  .card .ic{
    font-family:"JetBrains Mono",monospace;
    color:var(--gold);font-size:13px;letter-spacing:.2em;margin-bottom:18px;
  }
  .card h3{font-size:21px;font-weight:600;margin-bottom:10px}
  .card p{color:var(--muted);font-size:15px}

  /* ---- projects ---- */
  .projects{display:flex;flex-direction:column;gap:1px;background:rgba(224,169,46,0.10)}
  .proj{
    display:grid;grid-template-columns:64px 1fr auto;
    align-items:center;gap:24px;
    padding:28px 8px;
    background:var(--bg);
    transition:background .25s,padding-left .25s;
  }
  .proj:hover{background:var(--bg-soft);padding-left:18px}
  .proj .idx{font-family:"JetBrains Mono",monospace;color:var(--faint);font-size:14px}
  .proj .info h3{font-size:20px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .tag{
    font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;
    color:var(--gold);border:1px solid var(--glass-line);
    padding:2px 9px;border-radius:99px;
  }
  .proj .info p{color:var(--muted);font-size:14px;margin-top:5px}
  .proj .arrow{color:var(--faint);font-size:20px;transition:color .25s,transform .25s}
  .proj:hover .arrow{color:var(--gold-bright);transform:translate(4px,-4px)}

  /* ---- contact ---- */
  .contact-card{
    border:1px solid var(--glass-line);
    background:var(--glass);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-radius:8px;
    padding:clamp(34px,6vw,68px);
    text-align:center;
    position:relative;overflow:hidden;
  }
  .contact-card h2{font-size:clamp(30px,5vw,52px);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
  .contact-card h2 span{
    background:linear-gradient(96deg,var(--gold-bright),var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .contact-card p{color:var(--muted);max-width:440px;margin:0 auto 34px}
  .links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .link-pill{
    font-family:"JetBrains Mono",monospace;font-size:14px;
    padding:12px 22px;border-radius:99px;
    border:1px solid var(--glass-line);
    color:var(--ink);transition:.2s;
    display:flex;align-items:center;gap:8px;
  }
  .link-pill:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(224,169,46,.06)}

  footer{
    padding:40px 0 56px;
    border-top:1px solid rgba(224,169,46,0.08);
    color:var(--faint);font-size:13px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    font-family:"JetBrains Mono",monospace;
  }

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

  @media (max-width:880px){
    .hero{grid-template-columns:1fr;text-align:left;padding:96px 0 60px}
    .hero-figure{min-height:380px;order:-1;margin-bottom:8px}
    .hero-figure .render{max-height:380px}
  }
  @media (max-width:820px){
    .grid-3{grid-template-columns:1fr}
    .nav-links{display:none}
    .proj{grid-template-columns:40px 1fr auto;gap:14px}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{transition:none;opacity:1;transform:none}
    *{scroll-behavior:auto}
  }