/* ── RESET ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ── TOKENS ─────────────────────────────────────── */
    :root {
      --bg:          #0a0a0a;
      --bg-2:        #0f0f0f;
      --bg-3:        #141414;
      --card:        rgba(255,255,255,0.032);
      --card-hov:    rgba(255,255,255,0.055);
      --border:      rgba(255,255,255,0.07);
      --border-mid:  rgba(255,255,255,0.11);
      --accent:      #e87040;
      --accent-lt:   #f09468;
      --accent-dim:  rgba(232,112,64,0.14);
      --text:        #f0ede8;
      --text-2:      #b8b2ab;
      --text-3:      #6b6560;
      --text-4:      #2e2b28;
      --display:     'Syne', sans-serif;
      --body:        'Space Grotesk', sans-serif;
      --r:           12px;
      --r-lg:        20px;
      --ease:        cubic-bezier(.4,0,.2,1);
    }

    /* ── BASE ───────────────────────────────────────── */
    body {
      background: var(--bg); color: var(--text);
      font-family: var(--body); line-height: 1.6;
      overflow-x: hidden; -webkit-font-smoothing: antialiased;
    }

    /* ── GRID TEXTURE ────────────────────────────────── */
    /* Subtle graph-paper grid that fades toward edges & bottom */
    .grid-bg {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 0%, rgba(0,0,0,.45) 45%, transparent 78%);
      mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 0%, rgba(0,0,0,.45) 45%, transparent 78%);
    }
    ::selection { background: var(--accent-dim); color: var(--accent-lt); }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(232,112,64,.8), 0 0 18px rgba(232,112,64,.4);
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent-lt);
      box-shadow: 0 0 14px rgba(232,112,64,1), 0 0 36px rgba(232,112,64,.9), 0 0 70px rgba(232,112,64,.55), 0 0 120px rgba(232,112,64,.25);
    }
    /* Moving glow that follows the scrollbar thumb */
    .scroll-light {
      position: fixed; right: 0; pointer-events: none; z-index: 98;
      width: 90px; height: 220px; transform: translateY(-50%);
      background: radial-gradient(ellipse at 100% 50%, rgba(232,112,64,.22) 0%, rgba(232,112,64,.07) 38%, transparent 68%);
      will-change: top; transition: width .25s ease, height .25s ease, background .25s ease;
    }
    .scroll-light.lit {
      width: 150px; height: 300px;
      background: radial-gradient(ellipse at 100% 50%, rgba(232,112,64,.32) 0%, rgba(232,112,64,.14) 35%, rgba(232,112,64,.05) 58%, transparent 72%);
    }

    /* ── LAYOUT ─────────────────────────────────────── */
    .wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
    .sec  { padding: 108px 0; }

    /* ── TYPE ───────────────────────────────────────── */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
      text-transform: uppercase; color: var(--accent);
    }
    .eyebrow::before { content:''; display:block; width:18px; height:1px; background:var(--accent); }

    .h2 {
      font-family: var(--display);
      font-size: clamp(1.9rem, 3.6vw, 2.85rem);
      font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
      margin: 10px 0;
    }
    .muted { font-size: .94rem; color: var(--text-3); line-height: 1.75; max-width: 480px; }

    /* ── BUTTONS ─────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 11px 22px; border-radius: 10px;
      font-family: var(--body); font-size: .88rem; font-weight: 600;
      border: 1px solid transparent; white-space: nowrap;
      transition: all .22s var(--ease); cursor: pointer;
    }
    .btn-fill  { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn-fill:hover  { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,112,64,.28); }
    .btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-mid); }
    .btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); transform: translateY(-1px); }

    /* ── REVEAL ─────────────────────────────────────── */
    .rev { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
    .rev.in { opacity: 1; transform: none; }

    /* ══════════════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════════════ */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      padding: 18px 0; border-bottom: 1px solid transparent;
      transition: background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
    }
    .nav.stuck {
      background: rgba(10,10,10,.88);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border-bottom-color: var(--border);
      padding: 13px 0;
    }
    .nav-row { display: flex; align-items: center; justify-content: space-between; }

    .nav-logo { font-family: var(--display); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; display: flex; flex-direction: column; line-height: 1; gap: 3px; }
    .nav-logo em { font-style: normal; color: var(--accent); }
    .nav-logo-sub { font-family: var(--body); font-size: .58rem; font-weight: 400; color: var(--text-3); letter-spacing: .03em; text-transform: none; }

    /* Links + CTA grouped on the right, center stays clear for lamp */
    .nav-right { display: flex; align-items: center; gap: 28px; }
    .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
    .nav-links a { font-size: .85rem; color: var(--text-3); font-weight: 500; transition: color .22s, text-shadow .22s; }
    .nav-links a:hover { color: var(--accent-lt); text-shadow: 0 0 16px rgba(232,112,64,.5); }

    .nav-cta {
      background: var(--accent); color: #fff; padding: 8px 17px; border-radius: 8px;
      font-family: var(--body); font-size: .82rem; font-weight: 700;
      border: none; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
    }
    .nav-cta:hover { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 0 18px rgba(232,112,64,.4); }

    .ham { display: none; flex-direction: column; gap: 4.5px; cursor: pointer; padding: 4px; }
    .ham span { display: block; width: 21px; height: 1.5px; background: var(--text-2); border-radius: 2px; }

    .mob-menu {
      display: none; position: fixed; inset: 0;
      background: rgba(10,10,10,.97); backdrop-filter: blur(20px);
      z-index: 201; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
    }
    .mob-menu.open { display: flex; }
    .mob-menu a { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--text-2); transition: color .2s; }
    .mob-menu a:hover { color: var(--accent); }
    .mob-close { position: absolute; top: 20px; right: 28px; font-size: 1.5rem; color: var(--text-3); background: none; border: none; cursor: pointer; }

    /* ══════════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════════ */
    .hero {
      min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
      padding-top: 72px; position: relative; overflow: hidden;
    }
    /* Amber spotlight — originates from lamp bulb at top center */
    .hero::before {
      content: '';
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 920px; height: 720px; pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 58% 62% at 50% 9%, rgba(232,112,64,.28) 0%, transparent 68%),
        radial-gradient(ellipse 24% 18% at 50% 7%, rgba(255,215,160,.18) 0%, transparent 52%);
    }

    /* ── LAMP ───────────────────────────────────────── */
    .lamp {
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      z-index: 3; pointer-events: none; width: 60px;
    }
    .lamp-inner {
      transform-origin: 50% 4%;   /* pivot at cord mount */
      transition: transform 0.45s cubic-bezier(.22,.8,.2,1);
    }
    .lamp svg {
      filter:
        drop-shadow(0 2px 10px rgba(232,112,64,.5))
        drop-shadow(0 0 3px rgba(255,230,170,.25));
    }

    .hero-content { position: relative; z-index: 1; text-align: center; padding: 52px 0 40px; }

    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent-dim); border: 1px solid rgba(232,112,64,.22);
      border-radius: 100px; padding: 5px 14px 5px 8px;
      font-size: .75rem; font-weight: 600; color: var(--accent-lt);
      margin-bottom: 28px; letter-spacing: .03em;
    }
    .bdot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: blink 2s infinite; }
    @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

    /* REPLACE: name — put surname/key word in .o for orange color */
    .hero-name {
      font-family: var(--display);
      font-size: clamp(3.8rem, 11vw, 9rem);
      font-weight: 800; line-height: .9; letter-spacing: -.045em; color: var(--text);
      margin-bottom: 22px;
    }
    .hero-name .o { color: var(--accent); }

    /* REPLACE: tagline */
    .hero-sub { font-size: clamp(.95rem, 1.8vw, 1.15rem); color: var(--text-3); max-width: 470px; margin: 0 auto 34px; line-height: 1.7; }

    .hero-btns { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

    /* Code window ─────────────── */
    .cw-wrap { position: relative; z-index: 1; max-width: 740px; margin: 52px auto 0; padding: 0 28px 60px; }

    .cw {
      background: rgba(13,13,13,.96); border: 1px solid var(--border); border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: 0 50px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.04);
      transform: perspective(1400px) rotateX(7deg); transform-origin: top center;
    }
    .cw-bar {
      display: flex; align-items: center; gap: 7px; padding: 11px 16px;
      background: rgba(255,255,255,.025); border-bottom: 1px solid var(--border);
    }
    .wd { width: 10px; height: 10px; border-radius: 50%; }
    .wd-r { background: #ff5f57; } .wd-y { background: #febc2e; } .wd-g { background: #28c840; }
    .cw-title { margin-left: 6px; font-size: .75rem; color: var(--text-3); font-weight: 500; }
    .cw-body { padding: 18px 24px 22px; font-family: 'Fira Code','Cascadia Code','Courier New',monospace; font-size: .8rem; line-height: 1.85; }
    .cl  { display: flex; gap: 16px; }
    .ln  { color: var(--text-4); user-select: none; min-width: 16px; text-align: right; flex-shrink: 0; }
    .kw  { color: #cf8f6f; } .vr { color: #e8c07a; } .st { color: #98c379; }
    .pr  { color: #9fb1d8; } .cm { color: var(--text-3); font-style: italic; }
    .br  { color: var(--text-2); } .nm { color: #d19a66; } .bl { color: #56b6c2; }
    .ind { display: inline-block; width: 20px; }

    /* ══════════════════════════════════════════════════
       PARTNERS
    ══════════════════════════════════════════════════ */
    .partners { padding: 44px 0; background: #0e0c0a; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09); }
    .p-lbl { text-align: center; font-size: .76rem; color: var(--text-3); letter-spacing: .13em; text-transform: uppercase; font-weight: 600; margin-bottom: 26px; }
    .p-row { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }

    /* Partner logos — transparent-bg PNGs, grayscale default, colour on hover */
    .pl {
      display: flex; align-items: center; position: relative;
      padding: 4px 10px; border-radius: 10px;
      transition: background .3s var(--ease), box-shadow .3s var(--ease);
    }
    .pl img {
      height: 100px; width: auto; max-width: 240px; object-fit: contain; display: block;
      filter: grayscale(1) brightness(1.5) opacity(0.5);
      transition: filter .3s var(--ease), opacity .3s var(--ease);
    }
    .pl:hover img { filter: grayscale(0) brightness(1) opacity(1); }
    /* Hover-swap variant: shown on hover, hidden by default */
    .pl-hover {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      opacity: 0; filter: none !important;
    }
    .pl:hover .pl-hover { opacity: 1; }
    .pl:has(.pl-hover):hover img:not(.pl-hover) { opacity: 0; }

    /* ══════════════════════════════════════════════════
       ABOUT
    ══════════════════════════════════════════════════ */
    .about-grid { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: center; }
    .about-p { font-size: .92rem; color: var(--text-3); line-height: 1.78; margin-top: 13px; }

    .stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
    .stat {
      background: var(--card); border: 1px solid var(--border); border-radius: 100px;
      padding: 7px 15px; display: flex; align-items: center; gap: 7px;
      font-size: .81rem; color: var(--text-2);
    }
    .stat strong { color: var(--text); font-weight: 700; }

    .photo-wrap { position: relative; }
    .photo-frame {
      width: 100%; aspect-ratio: 3/4; background: var(--card);
      border-radius: var(--r-lg); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
    }
    .photo-frame::after {
      content: ''; position: absolute; inset: 0; border-radius: var(--r-lg);
      background: linear-gradient(135deg, rgba(232,112,64,.2) 0%, transparent 45%); pointer-events: none;
    }

    .a-float {
      position: absolute; bottom: -14px; left: -18px;
      background: var(--bg-3); border: 1px solid var(--border-mid); border-radius: 12px;
      padding: 10px 14px; display: flex; align-items: center; gap: 10px;
      box-shadow: 0 16px 36px rgba(0,0,0,.45); min-width: 165px;
    }
    .a-float-ico { width: 33px; height: 33px; background: var(--accent-dim); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
    .a-float-lbl { font-size: .66rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
    /* REPLACE: your status */
    .a-float-val { font-family: var(--display); font-size: .88rem; font-weight: 700; }

    /* ══════════════════════════════════════════════════
       SKILLS GRAPH
    ══════════════════════════════════════════════════ */
    .skills-head { text-align: center; margin-bottom: 36px; }
    .skills-head .muted { margin: 0 auto; }
    .graph-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #skill-graph { display: block; min-width: 580px; cursor: default; }

    /* ══════════════════════════════════════════════════
       PROJECTS
    ══════════════════════════════════════════════════ */
    .proj-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 14px; }
    .proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

    .pc {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 26px; display: flex; flex-direction: column; gap: 14px;
      transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .pc:hover { background: var(--card-hov); border-color: rgba(232,112,64,.2); transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0,0,0,.28); }
    .pc.feat { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 28px; }
    .pc.feat .pc-main { flex: 1; display: flex; flex-direction: column; gap: 14px; }
    .pc.feat .pc-vis {
      width: 175px; flex-shrink: 0; align-self: stretch;
      background: var(--accent-dim); border: 1px solid rgba(232,112,64,.2);
      border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
    }

    .pc-top { display: flex; align-items: center; justify-content: space-between; }
    .pc-num { font-family: var(--display); font-size: .7rem; font-weight: 700; color: var(--accent); letter-spacing: .1em; }
    .pc-ico { width: 33px; height: 33px; background: var(--accent-dim); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--accent); }
    .pc-title { font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
    .pc-desc { font-size: .85rem; color: var(--text-3); line-height: 1.72; flex: 1; }

    .pc-tech { display: flex; flex-wrap: wrap; gap: 5px; }
    .tt { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; font-size: .71rem; color: var(--text-3); font-family: 'Fira Code',monospace; }

    .pc-link { display: inline-flex; align-items: center; gap: 5px; font-size: .83rem; font-weight: 600; color: var(--accent); transition: gap .2s, opacity .2s; }
    .pc-link:hover { gap: 9px; opacity: .8; }

    /* ══════════════════════════════════════════════════
       SERVICES
    ══════════════════════════════════════════════════ */
    .services-head { margin-bottom: 60px; }
    .services-note { font-size: .84rem; color: var(--text-3); max-width: 480px; line-height: 1.7; margin-top: 10px; }

    .pkg-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .pkg {
      position: relative;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 32px 28px 28px;
      display: flex;
      flex-direction: column;
      gap: 0;
      transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      overflow: hidden;
    }
    .pkg::before {
      content: '';
      position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
      background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,112,64,.06) 0%, transparent 65%);
      opacity: 0; transition: opacity .35s var(--ease);
    }
    .pkg:hover { border-color: rgba(232,112,64,.35); background: var(--card-hov); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.4); }
    .pkg:hover::before { opacity: 1; }

    .pkg-popular {
      border-color: rgba(232,112,64,.4);
      background: rgba(232,112,64,.04);
    }
    .pkg-popular::after {
      content: 'Most Popular';
      position: absolute; top: 16px; right: 16px;
      background: var(--accent); color: #fff;
      font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      padding: 3px 10px; border-radius: 100px;
    }
    .pkg-popular:hover { border-color: rgba(232,112,64,.65); box-shadow: 0 16px 48px rgba(232,112,64,.15); }

    .pkg-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: var(--accent-dim); border: 1px solid rgba(232,112,64,.2);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px; color: var(--accent);
    }

    .pkg-name {
      font-family: var(--display); font-size: 1.35rem; font-weight: 700;
      letter-spacing: -.02em; margin-bottom: 4px;
    }
    .pkg-tagline { font-size: .82rem; color: var(--text-3); margin-bottom: 20px; }

    .pkg-divider { height: 1px; background: var(--border); margin: 0 0 20px; }

    .pkg-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
    .pkg-amt {
      font-family: var(--body); font-size: 2.6rem; font-weight: 700;
      letter-spacing: -.02em; color: var(--text);
    }
    .pkg-currency { font-size: 1.1rem; font-weight: 600; color: var(--text-2); align-self: flex-start; margin-top: 6px; }
    .pkg-period { font-size: .8rem; color: var(--text-3); }
    .pkg-flex-note { font-size: .76rem; color: var(--accent); font-weight: 600; margin-bottom: 24px; }

    .pkg-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 28px; }
    .pkg-feat {
      display: flex; align-items: flex-start; gap: 9px;
      font-size: .84rem; color: var(--text-2); line-height: 1.45;
    }
    .pkg-feat-icon {
      flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
      color: var(--accent);
    }
    .pkg-feat.dim { color: var(--text-3); }
    .pkg-feat.dim .pkg-feat-icon { color: var(--text-4); }

    .pkg-cta {
      display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: 12px 20px; border-radius: 10px;
      font-family: var(--body); font-size: .86rem; font-weight: 600;
      border: 1px solid var(--border-mid); color: var(--text-2);
      background: transparent; cursor: pointer;
      transition: all .22s var(--ease); text-decoration: none; white-space: nowrap;
    }
    .pkg-cta:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }
    .pkg-cta-fill { background: var(--accent); color: #fff; border-color: var(--accent); }
    .pkg-cta-fill:hover { background: var(--accent-lt); border-color: var(--accent-lt); box-shadow: 0 8px 24px rgba(232,112,64,.3); }

    .pkg-addons {
      margin-top: 56px; background: var(--card); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 28px 32px;
    }
    .pkg-addons-title { font-family: var(--display); font-size: 1rem; font-weight: 700; margin-bottom: 18px; color: var(--text-2); }
    .addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
    .addon {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      background: var(--bg-3); border: 1px solid var(--border); border-radius: 9px;
      padding: 11px 15px; font-size: .82rem;
    }
    .addon-name { color: var(--text-2); }
    .addon-price { color: var(--accent); font-weight: 600; white-space: nowrap; }

    @media (max-width: 860px) {
      .pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
      .services-head { flex-direction: column; gap: 12px; }
    }

    /* ══════════════════════════════════════════════════
       CONTACT
    ══════════════════════════════════════════════════ */
    .contact { position: relative; overflow: hidden; }
    .contact::before {
      content: ''; position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%);
      width: 1200px; height: 1000px; pointer-events: none;
      background: radial-gradient(ellipse 68% 62% at 50% 80%, rgba(232,112,64,.24) 0%, rgba(232,112,64,.08) 50%, transparent 72%);
    }
    .contact-in { position: relative; z-index: 1; text-align: center; max-width: 620px; margin: 0 auto; }
    .contact-h { font-family: var(--display); font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; margin: 10px 0 18px; }
    .contact-h span { color: var(--accent); }
    .contact-email { font-size: .98rem; color: var(--text-3); margin-bottom: 32px; }
    .contact-email a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 4px; transition: color .2s; }
    .contact-email a:hover { color: var(--accent-lt); }

    .socials { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
    .soc {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--card); border: 1px solid var(--border); border-radius: 9px;
      padding: 9px 16px; font-size: .84rem; font-weight: 500; color: var(--text-3);
      transition: all .22s var(--ease);
    }
    .soc:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }

    /* ── EMAIL BUTTON SPINNING BORDER ──────────────────── */
    .email-btn-wrap {
      position: relative; display: inline-flex;
      border-radius: 12px; padding: 1.5px; overflow: hidden; isolation: isolate;
    }
    .email-btn-wrap::before {
      content: '';
      position: absolute; top: 50%; left: 50%;
      width: 300%; height: 300%;
      background: conic-gradient(
        from 0deg,
        transparent 0%, transparent 70%,
        rgba(232,112,64,.75) 74%,
        rgba(255,200,130,1)  78%,
        rgba(232,112,64,.75) 82%,
        transparent 86%
      );
      animation: email-border-spin 2.4s linear infinite;
      transform: translate(-50%, -50%) rotate(0deg);
      transition: opacity .2s ease;
    }
    .email-btn-wrap:hover::before { opacity: 0; }
    .email-btn-wrap .btn-fill { position: relative; z-index: 1; }
    .email-btn-wrap:hover .btn-fill {
      background: var(--accent-lt);
      box-shadow: 0 0 6px rgba(232,112,64,1), 0 0 18px rgba(232,112,64,.9), 0 0 40px rgba(232,112,64,.6), 0 0 80px rgba(232,112,64,.25);
      transform: translateY(-1px);
    }
    @keyframes email-border-spin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* ── VIGIWORKS STUDIO PLUG (class names kept as "forge-*") ── */
    .forge-plug {
      display: flex; flex-direction: column; align-items: center; gap: 16px;
      margin-top: 44px;
    }
    .forge-divider {
      width: 48px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--border-mid), transparent);
      margin-bottom: 4px;
    }
    .forge-teaser {
      font-size: .9rem; color: var(--text-3); line-height: 1.65;
      max-width: 340px;
    }
    .forge-btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: .88rem !important; padding: 10px 22px !important;
      border-radius: 10px !important;
    }
    .forge-btn:hover { color: var(--accent-lt) !important; border-color: var(--accent) !important; }
    .forge-btn svg { flex-shrink: 0; opacity: .7; transition: transform .2s; }
    .forge-btn:hover svg { transform: translate(2px, -2px); opacity: 1; }

    /* ══════════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════════ */
    .footer { padding: 26px 0; border-top: 1px solid var(--border); }
    .foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--text-3); }
    .foot-brand { display: flex; flex-direction: column; line-height: 1; gap: 3px; cursor: default; }
    .foot-mha { font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--text-2); letter-spacing: -.02em; transition: color .22s var(--ease), text-shadow .22s var(--ease); }
    .foot-brand:hover .foot-mha { color: var(--accent-lt); text-shadow: 0 0 18px rgba(232,112,64,.65), 0 0 40px rgba(232,112,64,.3); }
    .foot-mha em { font-style: normal; color: var(--accent); }
    .foot-sub { font-family: var(--body); font-size: .62rem; color: var(--text-3); letter-spacing: .02em; }
    .foot-dot { color: var(--accent); }
    .foot-links { display: flex; align-items: center; gap: 18px; }
    .foot-link {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--text-3); font-size: .76rem; font-weight: 500;
      transition: color .22s var(--ease), text-shadow .22s var(--ease);
    }
    .foot-link:hover { color: var(--accent-lt); text-shadow: 0 0 12px rgba(232,112,64,.45); }

    /* ══════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════ */
    @media (max-width: 960px) {
      .about-grid { grid-template-columns: 1fr; gap: 52px; }
      .photo-wrap { max-width: 300px; margin: 0 auto; padding-bottom: 24px; }
      .proj-grid { grid-template-columns: repeat(2,1fr); }
      .pc.feat { grid-column: span 2; flex-direction: column; }
      .pc.feat .pc-vis { width: 100%; height: 110px; }
    }
    @media (max-width: 640px) {
      .wrap { padding: 0 18px; }
      .sec { padding: 64px 0; }
      .nav-right { display: none; }
      .ham { display: flex; padding: 8px; margin-right: -8px; }
      .hero-content { padding: 28px 0 20px; }
      .hero-name { font-size: min(10vw, 3.4rem); letter-spacing: -.025em; }
      .hero-sub { font-size: min(3.8vw, .95rem); max-width: 100%; }
      .proj-grid { grid-template-columns: 1fr; }
      .pc.feat { grid-column: span 1; }
      .pl img { height: 60px; max-width: 180px; }
      .pl-hover { height: 60px; max-width: 180px; }
      .p-row { gap: 16px; }
      .cw { transform: none; overflow-x: auto; }
      .cw-wrap { padding: 0 0 40px; }
      .cw-body { white-space: nowrap; font-size: .72rem; padding-left: 14px; padding-right: 14px; }
      .photo-wrap { max-width: 260px; }
      .a-float { left: 0; }
      .services-head { margin-bottom: 40px; }
      .foot-row { justify-content: center; text-align: center; }
      .foot-links { flex-wrap: wrap; justify-content: center; }
    }