/* v5: violet accent (no more orange), larger hero, circuit-board certifications, video-style project cards,
   centred project window, night-time contact, icons. Loads last. */
:root{--acc:#6f56f2;--acc2:#b9a8ff;--sun:#b9a8ff;--coral:#b9a8ff;--dark:#090a12}
html{scrollbar-gutter:stable}
body.drawer-open{overflow:hidden}

/* ---------- icons ---------- */
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.btn{gap:10px}
.btn .i{transition:transform .25s}
.btn:hover .i{transform:translateX(3px)}
.arrow .i{width:20px;height:20px}
.arrow:hover .i{transform:none}
.socials a .i{width:20px;height:20px}
.d-close .i{width:18px;height:18px}
.more .i{width:16px;height:16px}
.d-links a{display:inline-flex;align-items:center;gap:8px}
.d-links a .i{width:16px;height:16px}

/* ---------- accent recolour ---------- */
.btn.primary{background:var(--acc);color:#fff}
.btn.primary:hover{background:#8670ff}
.cursor-glow{background:radial-gradient(circle,rgba(150,130,255,.12),transparent 65%)}
.big .acc,.role,.name span:nth-child(3){color:#cdbcff}
.big .caret{background:#cdbcff}
.pill .pdot,.eyebrow i{background:var(--acc2)}
.brand-dot{background:var(--acc2)}
.projects{background:radial-gradient(90% 70% at 10% 100%,rgba(111,86,242,.2),transparent 60%),var(--dark)}
.o3{--orb:rgba(111,86,242,.3)}
.o4{--orb:rgba(62,200,190,.2)}
.proj-bar i{background:linear-gradient(90deg,#6f56f2,#b9a8ff)}
.arrow:hover{background:#fff;color:#15161c}
.c-card .ic{background:rgba(111,86,242,.2);color:var(--acc2)}
h2 em{color:var(--acc2)}

/* ---------- hero: larger ---------- */
@media (min-width:901px),(min-width:701px) and (max-width:900px) and (orientation:landscape){
  .hero{--W:min(46vw,66vh)}
  .ring{width:200%}
  .big{font-size:clamp(2.8rem,7.4vw,6.4rem)}
}

/* ---------- certifications: pixel circuit board ---------- */
.certs{--acc:#1fb5a8;--acc2:#5ee6d4;background:#071118}
.certs .circuit{opacity:.95;object-position:50% 50%;-webkit-mask-image:radial-gradient(85% 80% at 50% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(85% 80% at 50% 50%,#000 35%,transparent 100%)}
.certs::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 45%,rgba(7,17,24,.78),transparent 75%);pointer-events:none}
.certs-inner{z-index:2}
.certs h2 em{color:#5ee6d4}
.certs .btn.primary:hover{background:#2fd0c2}
.cert-in::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(63,214,200,.16),transparent 60%)}
.cert-in{background:linear-gradient(160deg,rgba(14,32,42,.78),rgba(8,20,28,.62));border-color:rgba(94,230,212,.16)}
.cert .yr{background:rgba(94,230,212,.1);color:#9ff0e4}

/* ---------- projects: video-style cards ---------- */
.card{width:clamp(250px,22vw,330px);height:clamp(380px,62vh,520px)}
.card:nth-child(even){height:clamp(350px,56vh,480px)}
.card-art .em{font-size:clamp(5rem,10vw,8rem);color:rgba(255,255,255,.16);margin-top:-22%}
.card-body{padding:20px 20px 22px}
.bigno{display:block;font:800 clamp(3.6rem,6.2vw,5rem)/.88 var(--body);letter-spacing:-.06em;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.card h3{font:700 clamp(1.15rem,1.7vw,1.4rem) var(--body);letter-spacing:-.02em;margin:10px 0 14px}
.card p,.card-tag{display:none}
.more{margin-top:0;gap:8px;display:inline-flex;align-items:center}
.more:hover{background:var(--acc);color:#fff}

/* ---------- project window (centred, blurred page behind) ---------- */
.scrim{position:fixed;inset:0;z-index:69;background:rgba(6,6,20,.5);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.open{opacity:1;pointer-events:auto}
body.drawer-open .projects-main{transform:none;filter:none}
.drawer.modal{top:50%;left:50%;right:auto;bottom:auto;width:min(920px,92vw);height:min(78vh,640px);display:grid;grid-template-columns:38% 62%;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:rgba(17,15,42,.985);box-shadow:0 60px 120px -30px rgba(0,0,0,.85);transform:translate(-50%,-46%) scale(.96);opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .3s,visibility 0s .45s}
.drawer.modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .3s,visibility 0s}
.drawer.modal .d-art{height:auto;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:26px;filter:saturate(.8) brightness(.9)}
.d-art .dno{font:800 clamp(4.4rem,9vw,7.5rem)/.82 var(--body);letter-spacing:-.07em;color:#fff;animation:none;filter:none}
.d-art .dmono{position:absolute;top:18px;left:24px;font:800 1.6rem var(--body);letter-spacing:-.03em;color:rgba(255,255,255,.4);animation:none;filter:none}
.drawer.modal .d-body{overflow-y:auto;padding:34px 36px 38px}
.drawer.modal .d-close{right:16px;top:16px}
@media (max-width:700px){
  .drawer.modal{width:94vw;height:84vh;grid-template-columns:1fr;grid-template-rows:130px 1fr;border-radius:22px}
  .drawer.modal .d-art{flex-direction:row;align-items:flex-end;padding:18px 20px}
  .d-art .dno{font-size:4rem}
  .d-art .dmono{top:14px;left:auto;right:64px}
  .drawer.modal .d-body{padding:22px 22px 30px}
}

/* ---------- contact: the first scene at night ---------- */
.contact{background:#070a1c}
.night{position:absolute;inset:0;z-index:0;pointer-events:none}
.contact-inner,footer{position:relative;z-index:2}
.contact .c-card{background:rgba(9,11,34,.62);border-color:rgba(185,168,255,.16)}
.contact .socials a{background:rgba(9,11,34,.6)}
footer{background:rgba(4,5,16,.92);border-top:1px solid rgba(185,168,255,.12)}
.contact-left .sub{color:#e4e0ff;text-shadow:0 1px 14px rgba(5,6,20,.95),0 0 3px rgba(5,6,20,.8)}
.contact h2,.contact .eyebrow{text-shadow:0 2px 18px rgba(5,6,20,.7)}
@media (max-width:700px),(max-width:900px) and (orientation:portrait){
  .name span:nth-child(3){color:#fdf0dc}
  .hero-right,.hero-left{text-shadow:0 1px 3px rgba(18,22,54,.8),0 0 14px rgba(18,22,54,.7)}
}

/* ---------- v40: contrasting hero text, sea background ---------- */
.hero-left .big,.big{color:#12153a;text-shadow:0 0 18px rgba(255,255,255,.35)}
.big .acc{color:#fff;background:#5b3df5;padding:0 .14em .03em;border-radius:.14em;text-shadow:none;box-shadow:0 12px 28px -12px rgba(40,20,140,.7)}
.big .caret{background:#fff}
.name,.name span,.name span:nth-child(3){color:#12153a;text-shadow:0 0 14px rgba(255,255,255,.4)}
.role{display:inline-block;background:#5b3df5;color:#fff;padding:5px 12px;border-radius:99px;font-size:.78rem;text-shadow:none;margin-top:12px}
.certs .sea{opacity:1;-webkit-mask-image:none;mask-image:none}
.certs::after{background:radial-gradient(60% 50% at 50% 45%,rgba(4,19,34,.6),transparent 75%)}
@media (max-width:700px),(max-width:900px) and (orientation:portrait){
  .name span:nth-child(3){color:#12153a}
  .hero-right,.hero-left{text-shadow:0 0 16px rgba(255,255,255,.45)}
  .role{margin-top:8px}
}

/* ---------- v50: abyss for projects + dive transition ---------- */
.projects{background:#02060f}
.projects .abyss{opacity:1}
.projects::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(2,8,16,.55),transparent 80%);pointer-events:none}
.projects-main{z-index:2}
.certs,.projects{will-change:transform}
.shutters{display:none}
.dive-bubbles{position:absolute;inset:0;z-index:9;pointer-events:none;visibility:hidden;will-change:transform,opacity}
.card{background:rgba(8,18,32,.92);border-color:rgba(94,230,212,.16)}
.proj-bar i{background:linear-gradient(90deg,#2ab3a8,#9b8cff)}

/* ---------- soft hand-off from the abyss to the night sky (static, no animation) ---------- */
.bridge{position:relative;height:42vh;min-height:240px;margin-top:-1px;background:linear-gradient(180deg,#01070d 0%,#02081a 30%,#040b24 62%,#050816 100%)}
.bridge::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 62%,rgba(207,214,255,.7),transparent),radial-gradient(1px 1px at 27% 74%,rgba(207,214,255,.6),transparent),radial-gradient(1.5px 1.5px at 41% 58%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 55% 80%,rgba(207,214,255,.55),transparent),radial-gradient(1.5px 1.5px at 69% 66%,rgba(255,255,255,.65),transparent),radial-gradient(1px 1px at 82% 78%,rgba(207,214,255,.6),transparent),radial-gradient(1.5px 1.5px at 91% 60%,rgba(207,214,255,.7),transparent);-webkit-mask-image:linear-gradient(180deg,transparent 15%,#000 100%);mask-image:linear-gradient(180deg,transparent 15%,#000 100%)}

/* ---------- v71: shorter hand-off, with the bottom of the abyss blurring into it ---------- */
.bridge{height:42vh;min-height:230px;margin-top:-16vh;z-index:1;background:linear-gradient(180deg,rgba(1,7,13,0) 0%,rgba(1,7,13,.82) 20%,#01070d 38%,#02081a 58%,#040b24 80%,#050816 100%)}
.bridge::after{content:"";position:absolute;left:0;right:0;top:0;height:20vh;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 65%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 65%,transparent 100%);pointer-events:none}
.bridge::before{-webkit-mask-image:linear-gradient(180deg,transparent 45%,#000 100%);mask-image:linear-gradient(180deg,transparent 45%,#000 100%)}

/* ---------- real certifications ---------- */
.cert-grid.n-1,.cert-grid.n-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-inline:auto}
.cert-grid.n-1{grid-template-columns:minmax(0,520px)}
.cert-in{text-decoration:none;color:inherit}
.cert .view{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0 8px;font:600 .8rem var(--body);color:var(--acc2)}
.cert .view .i{width:14px;height:14px}
.cert-in:hover .view{text-decoration:underline}
.cert .badge{font-size:clamp(1rem,1.6vw,1.3rem)}
@media (max-width:700px){.cert-grid.n-2{grid-template-columns:1fr}}

/* ---------- v96: no visible edge between the abyss and the night sky ---------- */
.bridge{background:linear-gradient(180deg,rgba(1,7,13,0) 0%,rgba(1,7,13,.5) 12%,rgba(1,7,13,.9) 28%,#01070d 38%,#02081a 52%,#030b20 64%,#040a1f 78%,#050816 90%,#050816 100%)}
.contact{background:linear-gradient(180deg,#050816 0%,#070a1c 40%)}
.night{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 8%,#000 26%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 8%,#000 26%)}