:root{
      --acc: #2563EB;
      --acc2:#2563EB;
      --b:   #111111;
      --bg:  #FAFAF8;
      --bg2: #F2F0EB;
      --muted:#888880;
      --f-serif:'Instrument Serif',serif;
      --f-sans:'Bricolage Grotesque',sans-serif;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--b);font-family:var(--f-sans);overflow-x:hidden;cursor:none}

    .exp-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.exp-toggle {
  background: none; border: none; cursor: none;
  color: var(--muted); font-size: 1.1rem;
  transition: transform .3s, color .3s;
  padding: .25rem;
  align-self: center;
}
.exp-toggle[aria-expanded="true"] { transform: rotate(90deg); color: var(--acc); }
.exp-details {
  display: none;
  grid-column: 2 / -1;
  font-size: .82rem; color: var(--muted);
  line-height: 1.75;
  padding: .75rem 0 .25rem;
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: .5rem;
}
.exp-details.open { display: block; }
    /* ── CURSOR ── */
    #cur{
      position:fixed;width:14px;height:14px;border-radius:50%;
      background:var(--acc);pointer-events:none;z-index:9999;
      transform:translate(-50%,-50%);
      transition:width .3s,height .3s,background .3s;
      mix-blend-mode:multiply;
    }
    #cur.big{width:50px;height:50px;background:var(--acc2)}
    @media(max-width:560px){#cur{display:none}body{cursor:auto}}

    /* ── SKIP ── */
    .skip{position:fixed;top:1rem;left:1rem;background:var(--acc);color:#fff;
      padding:.5rem 1rem;z-index:10000;transform:translateY(-200%);
      transition:transform .2s;font-size:.8rem;font-weight:700}
    .skip:focus{transform:translateY(0)}

    /* ── NAV ── */
    nav{
      position:fixed;top:0;left:0;right:0;z-index:100;
      display:flex;align-items:center;justify-content:space-between;
      padding:1.2rem clamp(1.5rem,5vw,4rem);
      background:rgba(250,250,248,.92);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .nav-logo{
      font-family:Bricolage Grotesque;font-size:1.3rem;font-style:italic;
      text-decoration:none;color:var(--b);
    }
    .nav-logo span{color:var(--acc)}
    .nav-pill{
      display:flex;align-items:center;gap:.3rem;
      background:var(--b);color:#fff;
      padding:.5rem 1.4rem;border-radius:99px;
      font-size:.75rem;font-weight:700;letter-spacing:.05em;
      text-decoration:none;
      transition:background .25s,transform .25s;
    }
    .nav-pill:hover{background:var(--acc);transform:scale(1.04)}
    .nav-links{display:flex;gap:2rem;list-style:none}
    .nav-links a{
      font-size:.8rem;font-weight:600;letter-spacing:.04em;
      text-decoration:none;color:var(--muted);
      transition:color .2s;
    }
    .nav-links a:hover{color:var(--b)}
    .hbg{display:none;background:none;border:none;cursor:none;
      flex-direction:column;gap:5px;padding:4px}
    .hbg span{display:block;width:22px;height:2px;background:var(--b);
      transition:all .3s;border-radius:2px}
    .hbg[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .hbg[aria-expanded="true"] span:nth-child(2){opacity:0}
    .hbg[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .mob{position:fixed;inset:0;background:var(--bg);z-index:99;
      display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;transition:opacity .35s}
    .mob.open{opacity:1;pointer-events:all}
    .mob ul{list-style:none;display:flex;flex-direction:column;gap:2rem;text-align:center}
    .mob a{font-family:Bricolage Grotesque;font-style:italic;font-size:clamp(2rem,8vw,3.5rem);
      color:var(--b);text-decoration:none;transition:color .2s}
    .mob a:hover{color:var(--acc)}

    /* ── HERO ── */
    #hero{
      min-height:100svh;
      padding:8rem clamp(1.5rem,5vw,4rem) 0;
      display:grid;
      grid-template-columns:1fr auto;
      gap:2rem;
      align-items:end;
      position:relative;
      overflow:hidden;
    }

    .hero-left{
      display:flex;flex-direction:column;
      justify-content:center;
      padding-bottom:clamp(3rem,6vh,5rem);
      z-index:2;
    }

    .hero-wave{
      display:inline-flex;align-items:center;gap:.5rem;
      background:#fff;border:1.5px solid rgba(0,0,0,.08);
      padding:.45rem 1.1rem;border-radius:99px;
      font-size:.78rem;font-weight:600;
      color:var(--muted);
      width:fit-content;margin-bottom:1.8rem;
      box-shadow:0 2px 12px rgba(0,0,0,.06);
      opacity:0;transform:translateY(16px);
      animation:fu .7s cubic-bezier(.16,1,.3,1) .2s forwards;
    }
    .hero-wave .dot{width:8px;height:8px;border-radius:50%;background:red;
      animation:pulse 2s ease infinite}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

    h1.htitle{
      font-family:var(--f-sans);
      font-size:clamp(2.6rem,6.5vw,6rem);
      font-weight:800;line-height:1.05;
      letter-spacing:-.03em;
      margin-bottom:1.8rem;
      opacity:0;transform:translateY(20px);
      animation:fu .8s cubic-bezier(.16,1,.3,1) .4s forwards;
    }
    h1.htitle .name-acc{
      font-family:Bricolage Grotesque;
      font-style:italic;font-weight:400;
      color:var(--acc);
    }
    h1.htitle .wave-emoji{
      display:inline-block;
      animation:wave-hand .8s ease infinite alternate;
      transform-origin:70% 70%;
    }
    @keyframes wave-hand{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}

    .hero-sub{
      font-size:clamp(.85rem,1.4vw,1rem);
      color:var(--muted);line-height:1.75;max-width:460px;
      margin-bottom:2rem;
      opacity:0;transform:translateY(16px);
      animation:fu .8s cubic-bezier(.16,1,.3,1) .6s forwards;
    }

    .hero-btns{
      display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
      opacity:0;
      animation:fu .8s cubic-bezier(.16,1,.3,1) .8s forwards;
    }
    .btn-main{
      display:inline-flex;align-items:center;gap:.5rem;
      background:var(--b);color:#fff;
      padding:.85rem 2rem;border-radius:99px;
      font-weight:700;font-size:.85rem;letter-spacing:.03em;
      text-decoration:none;border:none;cursor:none;
      transition:background .25s,transform .25s,box-shadow .25s;
      box-shadow:0 4px 20px rgba(0,0,0,.15);
    }
    .btn-main:hover{background:var(--acc);transform:translateY(-2px);
      box-shadow:0 8px 28px rgba(232,112,58,.35)}
    .btn-sec{
      display:inline-flex;align-items:center;gap:.5rem;
      background:transparent;color:var(--b);
      padding:.85rem 2rem;border-radius:99px;
      font-weight:700;font-size:.85rem;letter-spacing:.03em;
      text-decoration:none;border:2px solid rgba(0,0,0,.12);cursor:none;
      transition:border-color .25s,background .25s,transform .25s;
    }
    .btn-sec:hover{border-color:var(--b);background:rgba(0,0,0,.04);transform:translateY(-2px)}

    /* ── HERO PHOTO ── */
    .hero-right{
      align-self:flex-end;
      position:relative;
      width:clamp(220px,28vw,400px);
      flex-shrink:0;
      z-index:2;
    }
    .hero-blob{
      position:absolute;
      bottom:0;left:50%;
      transform:translateX(-50%);
      width:90%;
      height:88%;
      background:linear-gradient(160deg,#F5E6D8,#FDDAB0);
      border-radius:60% 60% 0 0 / 70% 70% 0 0;
      z-index:0;
    }
    .hero-photo{
      position:relative;z-index:1;
      width:100%;
      display:block;
      /* photo en bas, coupée au niveau de la taille → object-fit cover */
    }
    .hero-photo img{
      width:100%;
      display:block;
      object-fit:cover;
      object-position:top center;
      /* si pas de photo : placeholder */
    }
    /* Placeholder si pas de photo */
    .hero-photo .ph{
      width:100%;
      aspect-ratio:3/4;
      background:linear-gradient(160deg,#e8d5c4,#c9a87a);
      border-radius:8px 8px 0 0;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:.75rem;color:rgba(255,255,255,.7);font-size:.8rem;font-weight:600;
      letter-spacing:.08em;text-align:center;padding:1rem;
    }
    .hero-photo .ph svg{opacity:.5}

    /* floating tags */
    .ftag{
      position:absolute;z-index:3;
      background:#fff;
      border:1.5px solid rgba(0,0,0,.08);
      box-shadow:0 4px 16px rgba(0,0,0,.1);
      border-radius:99px;
      padding:.45rem 1rem;
      font-size:.78rem;font-weight:700;
      display:inline-flex;align-items:center;gap:.4rem;
      white-space:nowrap;
      animation:float 4s ease-in-out infinite alternate;
    }
    .ftag:nth-child(2){animation-delay:.5s}
    .ftag:nth-child(3){animation-delay:1s}
    .ftag:nth-child(4){animation-delay:1.5s}
    @keyframes float{
      from{transform:translateY(0)}
      to{transform:translateY(-8px)}
    }
    .ftag .ti{font-size:1rem}
    .tag-1{top:18%;left:-30%}
    .tag-2{top:38%;right:-10%}
    .tag-3{top:58%;left:-25%}
    .tag-4{top:75%;right:-5%}

    /* stats bubble */
    .stat-bubble{
      position:absolute;top:12%;right:-12%;z-index:3;
      background:var(--b);color:#fff;
      border-radius:16px;
      padding:1rem 1.4rem;
      text-align:center;
      box-shadow:0 8px 32px rgba(0,0,0,.2);
      animation:float 5s ease-in-out infinite alternate;
      animation-delay:.8s;
    }
    .stat-bubble .sn{
      font-family:Bricolage Grotesque;font-style:italic;
      font-size:1.9rem;color:var(--acc2);line-height:1;
    }
    .stat-bubble .sl{font-size:.68rem;color:rgba(255,255,255,.6);line-height:1.4;margin-top:.2rem}

    @keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

    /* ── STATS BAR ── */
    .stats-bar{
      display:flex;align-items:center;
      background:var(--b);color:#fff;
      padding:1.4rem clamp(1.5rem,5vw,4rem);
      gap:clamp(2rem,5vw,5rem);
      flex-wrap:wrap;
      border-top:1px solid rgba(255,255,255,.05);
    }
    .stat-item{display:flex;flex-direction:column;gap:.1rem}
    .stat-n{
      font-family:Bricolage Grotesque;font-style:italic;
      font-size:clamp(1.6rem,4vw,2.8rem);
      color:var(--acc2);line-height:1;
    }
    .stat-l{font-size:.72rem;color:rgba(255,255,255,.5);letter-spacing:.05em}

    /* ── MARQUEE ── */
    .mq-wrap{
      overflow:hidden;background:var(--acc);
      padding:.8rem 0;
      border-top:2px solid rgba(0,0,0,.08);
      border-bottom:2px solid rgba(0,0,0,.08);
    }
    .mq-track{display:flex;width:max-content;animation:mq 16s linear infinite}
    .mq-item{
      display:flex;align-items:center;gap:1.2rem;padding:0 1.2rem;
      font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
      color:#fff;white-space:nowrap;
    }
    .mq-item .sep{opacity:.5}
    @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

    /* ── SECTION ── */
    .sec{padding:clamp(4rem,8vh,7rem) clamp(1.5rem,5vw,4rem)}
    .sec-label{
      font-size:.72rem;font-weight:700;letter-spacing:.15em;
      text-transform:uppercase;color:var(--acc);
      margin-bottom:.6rem;
    }
    h2.stitle{
      font-family:var(--f-sans);font-size:clamp(2rem,5vw,4rem);
      font-weight:800;letter-spacing:-.03em;line-height:1;
      margin-bottom:clamp(2rem,4vw,3.5rem);
    }
    h2.stitle em{font-family:Bricolage Grotesque;font-style:italic;font-weight:400}

    /* reveal */
    .rv{opacity:0;transform:translateY(28px);
      transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
    .rv.in{opacity:1;transform:none}
    .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}
    .rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.45s}

    /* ── ABOUT ── */
    #about{background:var(--bg)}
    .about-grid{
      display:grid;grid-template-columns:1fr 1fr;
      gap:clamp(2rem,6vw,6rem);align-items:start;
    }
    .about-photo{
      border-radius:20px;overflow:hidden;
      aspect-ratio:4/5;
      background:linear-gradient(160deg,#e8d5c4,#c9a87a);
      position:relative;
    }
    .about-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
    .about-photo .ph2{
      width:100%;height:100%;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:.75rem;color:rgba(255,255,255,.7);font-size:.8rem;font-weight:600;
      letter-spacing:.08em;text-align:center;
    }
    .about-photo-badge{
      position:absolute;bottom:1.5rem;left:1.5rem;
      background:#fff;border-radius:12px;
      padding:.75rem 1.1rem;
      box-shadow:0 4px 20px rgba(0,0,0,.12);
      display:flex;align-items:center;gap:.6rem;
    }
    .about-photo-badge .emo{font-size:1.4rem}
    .about-photo-badge .txt{font-size:.72rem;font-weight:700;line-height:1.4}
    .about-photo-badge .txt span{color:var(--acc);display:block}

    .about-content{}
    .about-text{
      font-size:clamp(.95rem,1.5vw,1.05rem);
      line-height:1.8;color:#444;margin-bottom:2rem;
    }
    .about-text strong{color:var(--b);font-weight:700}
    .about-text a{color:var(--acc);font-weight:600;text-underline-offset:3px}

    .val-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}
    .val-item{
      display:flex;align-items:flex-start;gap:1rem;
      padding:1rem 1.2rem;
      background:var(--bg2);border-radius:12px;
      transition:background .25s,transform .25s;
    }
    .val-item:hover{background:#fff;transform:translateX(4px);
      box-shadow:0 4px 20px rgba(0,0,0,.07)}
    .val-emo{font-size:1.3rem;flex-shrink:0;margin-top:.1rem}
    .val-text h3{font-size:.88rem;font-weight:700;margin-bottom:.2rem}
    .val-text p{font-size:.8rem;color:var(--muted);line-height:1.6}

    /* ── EXPERIENCES ── */
    #exp{background:var(--bg2)}

    .exp-grid{display:flex;flex-direction:column;gap:1rem}
    .exp-card{
      display:grid;
      grid-template-columns:56px 1fr auto;
      gap:1rem 1.5rem;
      align-items:center;
      background:#fff;border-radius:16px;
      padding:1.4rem 1.6rem;
      border:1.5px solid rgba(0,0,0,.06);
      transition:box-shadow .3s,transform .3s,border-color .3s;
    }
    .exp-card:hover{
      box-shadow:0 8px 32px rgba(0,0,0,.1);
      transform:translateY(-2px);
      border-color:var(--acc);
    }
    .exp-logo{
      width:48px;height:48px;border-radius:12px;
      background:var(--bg2);
      display:flex;align-items:center;justify-content:center;
      font-size:1.4rem;flex-shrink:0;
      border:1.5px solid rgba(0,0,0,.06);
    }
    .exp-info{}
    .exp-co{font-size:.7rem;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;color:var(--acc);margin-bottom:.2rem}
    .exp-role{font-size:.95rem;font-weight:700;color:var(--b);line-height:1.2;margin-bottom:.25rem}
    .exp-desc{font-size:.78rem;color:var(--muted);line-height:1.6}
    .exp-right{text-align:right;flex-shrink:0}
    .exp-date{font-size:.72rem;color:var(--muted);white-space:nowrap;margin-bottom:.4rem}
    .exp-tag{
      display:inline-block;font-size:.65rem;font-weight:700;
      letter-spacing:.06em;text-transform:uppercase;
      padding:.3rem .75rem;border-radius:99px;
      background:rgba(232,112,58,.1);color:var(--acc);
    }
    .exp-tag.green{background:rgba(0,168,82,.1);color:#00a852}
    .exp-tag.blue{background:rgba(26,53,255,.1);color:#1A35FF}

    /* ── SKILLS ── */
    #skills{background:var(--bg)}
    .skills-2col{
      display:grid;grid-template-columns:1fr 1fr;
      gap:clamp(2rem,6vw,5rem);align-items:start;
    }

    .pill-cloud{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
    .pill{
      display:inline-flex;align-items:center;gap:.4rem;
      padding:.55rem 1.1rem;border-radius:99px;
      border:1.5px solid rgba(0,0,0,.1);
      font-size:.8rem;font-weight:600;
      background:#fff;
      transition:background .25s,border-color .25s,color .25s,transform .2s;
    }
    .pill:hover{background:var(--acc);color:#fff;border-color:var(--acc);transform:scale(1.04)}

    .bars{display:flex;flex-direction:column;gap:1.4rem}
    .bar-row .bar-top{
      display:flex;justify-content:space-between;
      font-size:.82rem;font-weight:700;margin-bottom:.5rem;
    }
    .bar-pct{color:var(--acc)}
    .bar-track{
      height:6px;background:var(--bg2);border-radius:99px;overflow:hidden;
    }
    .bar-fill{
      height:100%;background:linear-gradient(to right,var(--acc),var(--acc2));
      border-radius:99px;transform:scaleX(0);transform-origin:left;
      transition:transform 1.2s cubic-bezier(.16,1,.3,1);
    }
    .bar-fill.an{transform:scaleX(1)}

    /* ── VISION ── */
    #vision{
      background:var(--b);color:#fff;
    }
    #vision .sec-label{color:var(--acc2)}
    #vision h2.stitle{color:#fff}
    #vision h2.stitle em{color:var(--acc2)}

    .vision-q{
      font-family:Bricolage Grotesque;font-style:italic;
      font-size:clamp(1.3rem,2.8vw,2.2rem);
      font-weight:400;line-height:1.55;color:rgba(255,255,255,.85);
      max-width:700px;margin:0 auto 3.5rem;text-align:center;
    }
    .vision-q mark{background:var(--acc);color:#fff;padding:0 .2em;font-style:normal}

    .vc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
    .vc{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;padding:2rem 1.6rem;
      transition:background .3s,transform .3s;
    }
    .vc:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
    .vc-ico{font-size:2rem;display:block;margin-bottom:1rem}
    .vc h3{font-size:.95rem;font-weight:700;margin-bottom:.5rem}
    .vc p{font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.55)}

#contact { background: var(--bg); }

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.contact-btns { display: flex; flex-direction: column; gap: .75rem; }

.cbtn {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.5rem; border-radius: 14px;
  border: 1.5px solid rgba(0,0,0,.08);
  text-decoration: none; color: var(--b); background: #fff;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.cbtn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.cbtn-main { padding: 1.6rem 1.5rem; }
.cbtn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cbtn-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--bg2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cbtn-logo img { width: 100%; height: 100%; object-fit: contain; }
.cbtn-text { display: flex; flex-direction: column; flex: 1; }
.cbtn-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cbtn-val { font-size: .9rem; font-weight: 600; }
.cbtn-arr { color: var(--muted); font-size: 1.1rem; transition: transform .25s, color .25s; }
.cbtn:hover .cbtn-arr { transform: translateX(4px); }
.cbtn-linkedin { border-color: rgba(10,102,194,.2); }
.cbtn-linkedin:hover { border-color: #0A66C2; box-shadow: 0 6px 20px rgba(10,102,194,.2); }
.cbtn-linkedin:hover .cbtn-arr { color: #0A66C2; }
.cbtn-instagram { border-style: solid; border-width: 1.5px; border-image: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) 1; }
.cbtn-instagram:hover { box-shadow: 0 6px 24px rgba(220,39,67,.25); }
.cbtn-instagram:hover .cbtn-arr { color: #dc2743; }

@media(max-width:860px){ .contact-wrap { grid-template-columns: 1fr; } }
@media(max-width:560px){ .cbtn-row { grid-template-columns: 1fr; } }
    .contact-info{}
    .contact-sub{
      font-size:clamp(.95rem,1.5vw,1.1rem);
      line-height:1.75;color:var(--muted);margin-bottom:2rem;
    }
    .contact-sub strong{color:var(--b)}

    .clinks{display:flex;flex-direction:column;gap:.75rem}
    .clink{
      display:flex;align-items:center;gap:1rem;
      padding:1rem 1.2rem;border-radius:12px;
      border:1.5px solid rgba(0,0,0,.08);
      text-decoration:none;color:var(--b);
      background:#fff;
      transition:border-color .25s,transform .25s,box-shadow .25s;
    }
    .clink:hover{border-color:var(--acc);transform:translateY(-2px);
      box-shadow:0 6px 20px rgba(232,112,58,.15)}
    .clink-ico{
      width:40px;height:40px;border-radius:10px;
      background:var(--bg2);
      display:flex;align-items:center;justify-content:center;
      font-size:1.1rem;flex-shrink:0;
    }
    .clink-text{flex:1}
    .clink-text .ct{font-size:.7rem;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
    .clink-text .cv{font-size:.88rem;font-weight:600}
    .clink-arr{color:var(--muted);font-size:1rem;transition:transform .25s}
    .clink:hover .clink-arr{transform:translateX(4px);color:var(--acc)}

    .cform{display:flex;flex-direction:column;gap:1rem}
    .fg label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
      text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
    .fg input,.fg textarea{
      width:100%;background:#fff;
      border:1.5px solid rgba(0,0,0,.1);border-radius:10px;
      color:var(--b);font-family:var(--f-sans);font-size:.88rem;
      padding:.85rem 1rem;outline:none;resize:none;
      transition:border-color .25s,box-shadow .25s;
    }
    .fg input:focus,.fg textarea:focus{
      border-color:var(--acc);
      box-shadow:0 0 0 3px rgba(232,112,58,.12);
    }
    .fg textarea{height:120px}

    .btn-submit{
      display:inline-flex;align-items:center;gap:.6rem;
      background:var(--b);color:#fff;border:none;
      font-family:var(--f-sans);font-weight:700;font-size:.85rem;
      letter-spacing:.03em;
      padding:.9rem 2rem;border-radius:99px;cursor:none;
      box-shadow:0 4px 20px rgba(0,0,0,.15);
      transition:background .25s,transform .25s,box-shadow .25s;
    }
    .btn-submit:hover{background:var(--acc);transform:translateY(-2px);
      box-shadow:0 8px 28px rgba(232,112,58,.35)}

    /* ── FOOTER ── */
    footer{
      background:var(--b);color:rgba(255,255,255,.4);
      display:flex;justify-content:space-between;align-items:center;
      flex-wrap:wrap;gap:1rem;
      padding:1.5rem clamp(1.5rem,5vw,4rem);
      font-size:.78rem;
    }
    footer a{color:var(--acc2);text-decoration:none}

    /* ── RESPONSIVE ── */
    @media(max-width:900px){
      #hero{grid-template-columns:1fr;align-items:start}
      .hero-right{width:clamp(200px,60vw,320px);margin:0 auto}
      .about-grid,.skills-2col,.contact-wrap{grid-template-columns:1fr}
      .vc-grid{grid-template-columns:1fr 1fr}
      .exp-card{grid-template-columns:48px 1fr;gap:.75rem}
      .exp-right{display:none}
      .nav-links{display:none}.hbg{display:flex}
    }
    @media(max-width:560px){
      .vc-grid{grid-template-columns:1fr}
      .stats-bar{gap:1.5rem}
      .hero-right{display:none}
    }
    :focus-visible{outline:2px solid var(--acc);outline-offset:4px}