/* =====================================================================
   v2: restyled after the reference video (ring hero, image trail, tilt
   cards, numbered work slider, split contact). Loads after styles.css.
   ===================================================================== */
:root{--acc:#e8603f;--acc2:#ff8a5c;--sun:#ff7a45;--dark:#0b0c11}
.hero{--W:min(40vw,470px);--bot:clamp(8px,4.5vh,50px)}
.sun{background:#ffc857;right:auto;left:21%;top:40%}
.btn.primary{background:var(--acc);color:#fff;border-color:var(--ink)}
.btn.white{background:#fff;color:var(--ink);padding:14px 28px}
.btn span{display:inline-block;transition:transform .25s}
.btn:hover span{transform:translateX(4px)}

/* nav pill */
.nav-cta{background:none;border:0}
.avail{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink)!important;text-shadow:none!important;border:2px solid var(--ink);font-weight:700;font-size:.85rem}
.avail i{width:9px;height:9px;border-radius:50%;background:#2fd47a;box-shadow:0 0 0 0 rgba(47,212,122,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(47,212,122,0)}100%{box-shadow:0 0 0 0 rgba(47,212,122,0)}}
.nav nav a.avail:hover{background:#fff;transform:translateY(-2px)}

/* hero: centred character, ring behind, text either side */
.hero-text{display:none}
.me-wrap{justify-content:center;padding-right:0;padding-bottom:var(--bot)}
.me{width:var(--W)}
.ring-layer{position:absolute;inset:0;pointer-events:none}
.ring-box{position:absolute;left:calc(50% - var(--W)/2);bottom:var(--bot);width:var(--W);height:calc(var(--W)*430/520)}
.ring{position:absolute;left:50%;top:31%;width:150%;aspect-ratio:1;translate:-50% -50%;transform-origin:50% 50%;will-change:transform}
.hero-left{position:absolute;left:clamp(18px,5vw,84px);top:clamp(96px,18vh,200px);z-index:6;will-change:transform,opacity}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:#fff;border:2px solid var(--ink);font:700 .72rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.big{font:800 clamp(2.8rem,8.6vw,7.4rem)/.9 var(--body);letter-spacing:-.045em;color:var(--ink);margin-top:14px}
.big .acc{color:var(--acc);display:inline-block;min-height:.95em;text-shadow:0 5px 0 rgba(29,27,58,.18)}
.big .caret{background:var(--acc);height:.8em}
.hero-right{position:absolute;right:clamp(18px,5vw,84px);top:clamp(96px,18vh,200px);z-index:6;text-align:right;max-width:min(300px,30vw);will-change:transform,opacity}
.name{font:800 clamp(1.5rem,3.2vw,2.6rem)/1.02 var(--body);letter-spacing:-.035em;color:var(--ink);-webkit-text-stroke:0;text-shadow:none;margin:0}
.name span{display:block}
.name span:nth-child(3){color:var(--ink)}
.role{margin-top:12px;font:700 1rem var(--body);color:var(--acc);text-transform:uppercase;letter-spacing:.12em;min-height:0}
.blurb{margin-top:10px;color:#2d2a5c;font-size:.95rem;font-weight:500;background:rgba(255,255,255,.55);padding:8px 12px;border-radius:14px}
.hire{position:absolute;left:50%;bottom:clamp(14px,4vh,40px);transform:translateX(-50%);z-index:8;will-change:transform,opacity}
.scroll-cue{left:clamp(18px,5vw,84px);bottom:clamp(14px,4vh,40px);transform:none;align-items:flex-start}

/* dark sections: near-black with terracotta glow */
.certs{background:radial-gradient(90% 70% at 85% 0%,rgba(232,96,63,.16),transparent 60%),var(--dark)}
.projects{background:radial-gradient(90% 70% at 10% 100%,rgba(232,96,63,.16),transparent 60%),var(--dark)}
.o1,.o3{background:#e8603f;opacity:.18}
.o2,.o4{background:#5b4bff;opacity:.16}
h2{font:800 clamp(2.3rem,5.6vw,4.4rem)/1.02 var(--body);letter-spacing:-.04em}
h2 em{font-style:normal;color:var(--acc)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#e9e7ff;font:600 .72rem var(--body);letter-spacing:.2em;text-transform:uppercase}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.section-head h2{margin:12px 0 10px}
.section-head .btn{margin-top:16px}
.certs-inner{align-items:center;text-align:center;z-index:2}
.section-head{display:flex;flex-direction:column;align-items:center}
.section-head .sub{margin:0 auto}

/* image trail */
.trail{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.trail-card{position:absolute;width:86px;height:112px;margin:-56px 0 0 -43px;border-radius:14px;border:3px solid #fff;display:grid;place-items:center;font-size:2.2rem;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 14px 30px rgba(0,0,0,.45);animation:trailPop 1.15s cubic-bezier(.2,.7,.2,1) forwards;will-change:transform,opacity}
@keyframes trailPop{
  0%{opacity:0;transform:translate(0,0) rotate(var(--r)) scale(.3)}
  18%{opacity:1;transform:translate(0,0) rotate(var(--r)) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),70px) rotate(calc(var(--r) * 2.2)) scale(.7)}
}

/* cert cards: glowing border that follows the cursor */
.cert-grid{width:100%;max-width:1100px;text-align:left}
.cert-in{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:rgba(255,255,255,.1)}
.cert-in::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--acc),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.cert-in:hover::after{opacity:1}
.cert-in::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(232,96,63,.2),transparent 60%)}

/* work slider: tall numbered cards, staggered heights */
.track{align-items:flex-start;padding-top:8px;padding-bottom:40px}
.card{position:relative;width:clamp(240px,21vw,320px);height:clamp(360px,60vh,500px);background:#14151c;border-radius:24px;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px rgba(0,0,0,.5);display:block;overflow:hidden}
.card:nth-child(even){margin-top:clamp(18px,5vh,44px);height:clamp(340px,56vh,470px)}
.card-art{position:absolute;inset:0;height:auto;border:0}
.card-art .em{font-size:clamp(4rem,8vw,6rem);margin-top:-14%}
.card-art .no{left:14px;right:auto;top:14px;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.35);color:#fff;font-size:.8rem}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,8,14,.92) 82%);pointer-events:none}
.card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px}
.card h3{font:700 1.4rem var(--body);letter-spacing:-.02em}
.card p{font-size:.88rem;-webkit-line-clamp:2}
.card-tag{color:var(--acc2)}
.more{margin-top:10px;background:#fff;box-shadow:0 3px 0 var(--ink);font-family:var(--body);font-weight:700;font-size:.85rem;padding:8px 16px}
.proj-bar i{background:var(--acc)}
.arrow:hover{background:var(--acc);color:#fff}

/* contact: split layout */
.contact{background:linear-gradient(180deg,var(--dark) 0%,#10132b 70%,#1c2350 100%);justify-content:flex-end;padding:110px clamp(18px,7vw,110px) 0}
.contact-inner{max-width:1200px;width:100%;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding-bottom:70px}
.contact h2{max-width:none;font-size:clamp(2.4rem,5.6vw,4.6rem)}
.contact-left .sub{margin-top:8px}
.contact-left .email-row{margin:24px 0 0}
.contact-right{display:grid;gap:14px}
.c-card{flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
.c-card .ic{margin:0;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:rgba(232,96,63,.16);font-size:1.3rem;flex:none}
.c-card small{display:block;font:600 .7rem var(--body);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.c-card b{font:600 1.05rem var(--body);word-break:break-all}
.socials{display:flex;gap:10px}
.socials a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.05);font:700 .85rem var(--mono);text-transform:uppercase;transition:.25s}
.socials a:hover{background:var(--acc);border-color:var(--acc);transform:translateY(-4px)}
footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 calc(-1 * clamp(18px,7vw,110px));padding:20px clamp(18px,7vw,110px);background:#07080c;border-top:1px solid var(--line)}
.f-links{display:flex;gap:20px}
.f-links a:hover{color:var(--acc2)}

@media (max-width:900px){
  .hero{--W:min(78vw,430px)}
  .hero-left{top:84px}
  .hero-right{top:auto;bottom:clamp(70px,12vh,110px);right:18px;max-width:46vw}
  .blurb{display:none}
  .hire{left:18px;transform:none}
  .scroll-cue{display:none}
  .contact-inner{grid-template-columns:1fr}
}
@media (max-width:600px){
  .big{font-size:clamp(2.6rem,14vw,4rem)}
  .nav .avail{padding:6px 10px;font-size:.75rem}
  .f-links{display:none}
  footer{justify-content:center}
}