:root { --bg-color:#f5f5f2; --text-dark:#202423; --text-gray:#626a67; --accent-color:#314c43; --accent-hover:#162b23; --card-bg:#fff; --border-color:#dedfd9; --font-head:'Plus Jakarta Sans',sans-serif; --font-body:'Inter',sans-serif; --footer-bg:#202624; --primary-orange:#506d61; --nav-dark:#202624; }
body.dark-mode { --bg-color:#181d1b; --text-dark:#f1f3ed; --text-gray:#adb7b1; --accent-color:#bad0c1; --accent-hover:#dfede3; --card-bg:#242c28; --border-color:#39463e; --footer-bg:#101613; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:40px; }
body { background:var(--bg-color); color:var(--text-dark); font-family:var(--font-body); line-height:1.6; padding-bottom:100px; }
a { color:inherit; } button { font:inherit; cursor:pointer; } img { max-width:100%; } [hidden] { display:none !important; }
::selection { background:#c6d4ca; color:#1b2a22; }
:focus-visible { outline:2px solid var(--accent-color); outline-offset:5px; }
.skip-link { position:fixed; top:-100px; left:24px; padding:12px 20px; z-index:30000; background:var(--card-bg); color:var(--text-dark); border-radius:10px; }
.skip-link:focus { top:20px; }
#progress-container { position:fixed; inset:0 0 auto; height:2px; z-index:10001; } #progress-bar { background:var(--accent-color); height:100%; width:0; }
/* Compact icon dock, following the reference navigation. */
.custom-navbar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9999; display:flex; align-items:center; gap:10px; width:max-content; max-width:calc(100% - 20px); padding:10px 12px; border:1px solid #ffffff24; border-radius:22px; background:rgba(27,33,30,.93); color:#e1e7e1; box-shadow:0 10px 40px #0004; backdrop-filter:blur(20px); }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a { position:relative; display:flex; align-items:center; justify-content:center; width:43px; height:43px; color:#b6c1b8; border:1px solid transparent; border-radius:13px; text-decoration:none; font-size:1rem; transition:background .2s,color .2s,transform .2s; }
.nav-links a:hover,.nav-links a.active { color:#fff; background:#ffffff14; border-color:#ffffff12; }
.nav-links a:hover { transform:translateY(-2px); }
.dock-label { position:absolute; left:50%; bottom:calc(100% + 20px); transform:translate(-50%,5px); padding:6px 10px; border-radius:6px; background:#202624; color:white; font-size:.7rem; font-weight:500; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; }
.nav-links a:hover .dock-label,.nav-links a:focus-visible .dock-label { opacity:1; transform:translate(-50%,0); }
.logo { position:relative; width:43px; height:43px; flex-shrink:0; border-radius:50%; background:#c0ccc1; overflow:hidden; border:2px solid #ffffff38; }
.logo img { width:100%; height:100%; object-fit:cover; object-position:top; padding-top:3px; }
.dock-brand { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#theme-toggle { display:flex; align-items:center; justify-content:center; width:43px; height:43px; background:none; border:0; color:#b6c1b8; font-size:1rem; border-radius:13px; }
#theme-toggle:hover { background:#ffffff14; color:#fff; }
#menu-toggle,#mobile-nav { display:none; }
/* Monochrome portrait and oversized editorial headline. */
.hero-section { padding:24px 24px 0; }
.hero-stage { position:relative; min-height:620px; height:min(760px,87svh); overflow:hidden; border-radius:26px; background:#a5aca9; background-image:radial-gradient(ellipse at 50% 65%,#c5cac5,transparent 60%); }
body.dark-mode .hero-stage { background-color:#68756d; background-image:radial-gradient(ellipse at 50% 65%,#859388,transparent 60%); }
.main-title { margin:0; font-family:var(--font-head); font-weight:500; }
.hero-name { position:absolute; top:34px; left:36px; color:#fff; font-size:.9rem; line-height:1.4; letter-spacing:-.2px; z-index:4; }
.hero-name .orange-text { color:inherit; font-weight:600; }
.hello-badge { position:absolute; top:71px; left:36px; padding:5px 12px; border:1px solid #ffffff60; color:#fff; border-radius:20px; font-size:.7rem; z-index:4; }
.hero-role-line { position:absolute; bottom:47px; left:0; width:100%; z-index:3; text-align:center; color:#f7f8f4; font-size:clamp(56px,7.6vw,132px); line-height:1.06; letter-spacing:-.065em; font-weight:500; white-space:nowrap; }
.txt-type { border-right:2px solid #ffffff70; padding-right:6px; }
.hero-center-wrapper { position:static; }
.image-wrapper { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(51%,580px); height:83%; display:flex; align-items:flex-end; justify-content:center; z-index:2; }
.profile-img { display:block; width:auto; height:100%; max-width:none; object-fit:contain; filter:grayscale(1); }
.orange-bg-circle { display:none; }
.left-stat { position:absolute; top:30px; right:35px; width:290px; z-index:3; color:#f8faf5; text-align:right; }
.left-stat p { font-size:.8rem; line-height:1.55; }
.left-stat p br { display:none; }
.right-stat { position:absolute; right:7%; top:48%; z-index:4; text-align:left; color:#fff; }
.right-stat .stars { font-size:.65rem; letter-spacing:2px; margin-bottom:12px; }
.right-stat h3 { font-family:var(--font-head); font-size:2.5rem; line-height:1.1; letter-spacing:-1px; margin-bottom:7px; font-weight:500; }
.right-stat p { font-size:.7rem; line-height:1.4; }
.hero-bottom { max-width:1280px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 10px 38px; }
.hero-actions-new { display:flex; align-items:center; gap:24px; }
.hero-socials { display:flex; gap:10px; }
.hero-socials a { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--border-color); border-radius:50%; text-decoration:none; background:var(--card-bg); font-size:1.05rem; }
.hero-socials a:hover { background:var(--text-dark); color:var(--bg-color); }
.btn-download-cv { display:inline-flex; align-items:center; gap:13px; text-decoration:none; border-bottom:1px solid var(--text-gray); padding:9px 0; font-size:.8rem; font-weight:500; }
.action-buttons { display:flex; gap:12px; align-items:center; }
.btn-portfolio,.btn-hire { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:12px 24px; border-radius:30px; text-decoration:none; font-size:.8rem; font-weight:500; }
.btn-portfolio { background:var(--text-dark); color:var(--bg-color); border:1px solid var(--text-dark); }
.btn-hire { border:1px solid var(--border-color); }
.btn-hire:hover { border-color:var(--text-dark); }
.stats-section { display:grid; grid-template-columns:repeat(4,1fr); padding:45px max(28px,calc((100% - 1160px)/2)); border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); gap:24px; }
.stat-box { text-align:center; border-right:1px solid var(--border-color); }.stat-box:last-child { border:0; }
.stat-box h2 { font:500 clamp(1.8rem,3vw,2.8rem)/1.2 var(--font-head); letter-spacing:-1px; margin-bottom:10px; }
.stat-box p { color:var(--text-gray); font-size:.7rem; text-transform:uppercase; letter-spacing:1px; }
.section,.skills-section { padding:105px max(28px,calc((100% - 1180px)/2)); }
.section[data-kicker]::before,.skills-section[data-kicker]::before { content:attr(data-kicker); display:block; color:var(--text-gray); font-size:.65rem; letter-spacing:2px; font-weight:500; margin-bottom:25px; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:45px; }
.section-header h2,.skills-section h2 { font:500 clamp(2rem,4.5vw,4rem)/1.12 var(--font-head); letter-spacing:-2px; }
.section-header p { color:var(--text-gray); font-size:.9rem; line-height:1.6; max-width:330px; }
.skills-section { padding-top:85px; padding-bottom:85px; }
.skills-section h2 { margin-bottom:35px; }.premium-emoji { font-size:1.5rem; vertical-align:middle; }
.title-line { display:none; }
.skills-track { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.skills-repeat { display:none; }
.skill-card { display:flex; align-items:center; gap:12px; border:1px solid var(--border-color); border-radius:12px; min-height:75px; padding:16px; background:var(--card-bg); }
.skill-card i { font-size:1.7rem; filter:grayscale(.4); }.skill-card span { font-size:.8rem; font-weight:500; }
#services { background:var(--footer-bg); color:#edf0ea; border-radius:26px; margin:0 24px; padding-left:max(30px,calc((100% - 1180px)/2 - 24px)); padding-right:max(30px,calc((100% - 1180px)/2 - 24px)); }
#services::before,#services .section-header p { color:#a9b9b0; }
.grid-container { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.card { min-width:0; }
#services .card { padding:32px; border:1px solid #ffffff22; border-radius:18px; background:#ffffff04; }
.card-icon { margin-bottom:40px; font-size:1.7rem; color:#b8c9bd; }
.card h3 { font:500 1.4rem/1.25 var(--font-head); margin-bottom:16px; letter-spacing:-.5px; }
.card p { font-size:.88rem; line-height:1.75; margin-bottom:25px; color:var(--text-gray); }
#services .card p { color:#b5c1b8; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:23px; }
.tags span { display:inline-block; font-size:.65rem; line-height:1.5; font-weight:500; padding:5px 10px; border-radius:20px; background:var(--bg-color); border:1px solid var(--border-color); color:var(--text-gray); }
#services .tags { margin-bottom:0; }#services .tags span { background:#ffffff08; color:#d0dcd2; border-color:#ffffff22; }
#gallery .grid-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 26px; }
.project-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--border-color); padding:0 0 28px; }
.project-card::before { content:attr(data-project-number); position:absolute; top:16px; left:16px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#202624cf; color:#fff; font-size:.6rem; z-index:2; }
.img-wrapper { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:18px; margin-bottom:25px; background:#e8e9e3; border:1px solid var(--border-color); }
body.dark-mode .img-wrapper { background:#303b33; }
.img-wrapper img { width:100%; height:100%; object-fit:contain; padding:15px; transition:transform .4s; }
.project-card:hover .img-wrapper img { transform:scale(1.02); }
.project-card h3 { font-size:1.55rem; }
.project-title-link { text-decoration:none; }
.project-title-link:hover { color:var(--accent-color); }
a.img-wrapper { display:block; }
.project-detail-link { display:inline-flex; align-items:center; justify-content:space-between; gap:35px; margin:0 0 20px; padding:12px 18px; border:1px solid var(--border-color); border-radius:30px; background:var(--text-dark); color:var(--bg-color); text-decoration:none; font-size:.8rem; font-weight:500; }
.project-detail-link:hover { box-shadow:0 4px 15px #0002; }
.project-card p { font-size:.86rem; line-height:1.8; }
.project-card .tags { margin-top:auto; }
.link-arrow { display:inline-flex; align-items:center; gap:8px; color:var(--accent-color); font-size:.8rem; line-height:1.5; font-weight:600; text-decoration:none; border-bottom:1px solid var(--border-color); padding-bottom:4px; }
.link-arrow:hover { border-color:var(--accent-color); }
.slideshow-wrapper img.slide { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.slideshow-wrapper img.slide.active { opacity:1; }.slideshow-wrapper img.slide:first-child { position:relative; }
.premium-footer { background:var(--footer-bg); color:#eff4eb; margin:0 24px; border-radius:26px; padding:80px max(30px,calc((100% - 1180px)/2 - 24px)) 38px; }
.contact-callout { position:relative; margin-bottom:65px; }
.section-kicker { font-size:.65rem; letter-spacing:2px; color:#a9b9b0; margin-bottom:24px; }
.contact-callout h2 { font:500 clamp(3rem,7vw,6.5rem)/1.05 var(--font-head); letter-spacing:-4px; margin-bottom:30px; }
.contact-callout h2 span { color:#b7c7bb; }
.contact-email { display:inline-flex; align-items:center; gap:20px; font-size:clamp(.9rem,1.4vw,1.1rem); text-decoration:none; border-bottom:1px solid #ffffff35; padding-bottom:10px; overflow-wrap:anywhere; }
.contact-email span { font-size:1.4rem; }
.footer-top,.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:25px; }
.footer-brand { display:flex; align-items:center; gap:12px; }.brand-icon { font-size:1.7rem; }
.footer-brand h3 { font:500 1.3rem var(--font-head); margin-bottom:7px; }.footer-brand p { color:#a9b9b0; font-size:.75rem; }
.footer-nav { display:flex; flex-wrap:wrap; gap:23px; }.footer-nav a { color:#bdcbc0; font-size:.75rem; text-decoration:none; padding:8px 0; }
.footer-nav a:hover { color:white; }
.footer-divider { height:1px; background:#ffffff20; margin:30px 0; }
.footer-bottom p { color:#a9b9b0; font-size:.7rem; }
.footer-socials { display:flex; gap:10px; }.footer-socials a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #ffffff25; border-radius:50%; text-decoration:none; color:#eff4eb; }
.design-credit { font-size:.6rem; color:#a2b0a7; margin-top:25px; }.design-credit a { text-underline-offset:3px; }
.float-wa,.to-top { position:fixed; right:25px; width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; z-index:100; box-shadow:0 5px 20px #0001; }
.float-wa { bottom:27px; background:var(--text-dark); color:var(--bg-color); font-size:1.35rem; }
.to-top { bottom:85px; border:1px solid var(--border-color); background:var(--card-bg); color:var(--text-dark); opacity:0; visibility:hidden; pointer-events:none; }
.to-top.active { opacity:1; visibility:visible; pointer-events:auto; }
.reveal { position:relative; }.js-reveal .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s,transform .6s; }.js-reveal .reveal.active { opacity:1; transform:none; }
@media(max-width:1100px) { .hero-stage { min-height:560px; height:75svh; }.hero-role-line { font-size:7.5vw; }.image-wrapper { width:57%; height:80%; }.right-stat { right:5%; }.section,.skills-section { padding-left:40px; padding-right:40px; }.skills-track { grid-template-columns:repeat(5,minmax(0,1fr)); }.skill-card { flex-direction:column; text-align:center; padding:16px 8px; }.section-header h2,.skills-section h2 { letter-spacing:-1.5px; }#services,.premium-footer { padding-left:35px; padding-right:35px; }#services .card { padding:25px; } }
@media(max-width:768px) { .hero-section { padding:14px 14px 0; }.hero-stage { border-radius:20px; min-height:570px; height:80svh; }.hero-name { top:25px; left:24px; font-size:.75rem; }.hello-badge { top:58px; left:24px; }.left-stat { top:25px; right:24px; width:200px; }.left-stat p { font-size:.65rem; }.image-wrapper { width:76%; height:76%; }.hero-role-line { font-size:7.8vw; bottom:40px; }.right-stat { right:6%; top:43%; }.right-stat h3 { font-size:1.9rem; }.right-stat p { max-width:90px; }.hero-bottom { padding:22px 7px 30px; }.hero-actions-new { gap:16px; }.hero-socials { gap:7px; }.hero-socials a { width:36px; height:36px; }.btn-download-cv { font-size:.7rem; }.btn-portfolio,.btn-hire { padding:10px 15px; font-size:.75rem; }.action-buttons { gap:8px; }.section,.skills-section { padding:65px 28px; }.skills-track { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }.skill-card span { font-size:.7rem; }.section-header { gap:20px; flex-direction:column; align-items:flex-start; margin-bottom:30px; }.section-header h2,.skills-section h2 { font-size:2.6rem; }.grid-container { grid-template-columns:1fr; }#services { margin:0 14px; padding:65px 28px; }.card-icon { margin-bottom:25px; }#gallery .grid-container { gap:30px 20px; }.project-card h3 { font-size:1.3rem; }.project-card p { font-size:.8rem; }.tags span { font-size:.6rem; padding:4px 8px; }.img-wrapper img { padding:8px; }.premium-footer { margin:0 14px; padding:65px 28px 30px; }.contact-callout h2 { font-size:4rem; letter-spacing:-2.5px; }.footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; }.footer-nav { gap:20px; }.float-wa,.to-top { right:17px; width:40px; height:40px; }.float-wa { bottom:105px; }.to-top { bottom:155px; } }
@media(max-width:540px) { .hero-stage { min-height:600px; height:78svh; }.hero-name { top:24px; left:22px; }.left-stat { top:108px; left:22px; right:auto; text-align:left; width:220px; }.left-stat p { font-size:.72rem; }.left-stat p br { display:initial; }.image-wrapper { height:65%; width:92%; }.profile-img { max-width:130%; height:100%; }.hero-role-line { white-space:normal; left:12px; width:calc(100% - 24px); font-size:clamp(35px,10vw,55px); bottom:25px; line-height:1.12; letter-spacing:-.055em; }.right-stat { top:35%; right:22px; }.right-stat .stars { font-size:.5rem; margin-bottom:7px; }.right-stat h3 { font-size:1.7rem; }.right-stat p { font-size:.6rem; }.hero-bottom { flex-direction:column; align-items:stretch; gap:20px; }.hero-actions-new { justify-content:space-between; }.action-buttons { justify-content:space-between; }.btn-portfolio,.btn-hire { flex:1; padding:11px 18px; }.stats-section { grid-template-columns:repeat(2,minmax(0,1fr)); padding:28px 20px; gap:25px 15px; }.stat-box:nth-child(2) { border:0; }.stat-box p { font-size:.58rem; }.skills-track { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.skill-card { min-height:85px; }.section,.skills-section { padding:55px 22px; }.section-header h2,.skills-section h2 { font-size:2.3rem; }.section-header p { font-size:.8rem; }.premium-emoji { font-size:1.3rem; }#services { padding:55px 22px; }#gallery .grid-container { grid-template-columns:1fr; gap:35px; }.img-wrapper { aspect-ratio:16/11; }.project-card h3 { font-size:1.45rem; }.project-card p { font-size:.84rem; }.tags span { font-size:.65rem; }.custom-navbar { bottom:18px; gap:5px; padding:8px; border-radius:18px; }.nav-links { gap:3px; }.nav-links a,#theme-toggle { width:35px; height:35px; font-size:.85rem; border-radius:10px; }.logo { width:35px; height:35px; }.contact-callout h2 { font-size:3.5rem; }.premium-footer { padding:55px 22px 28px; }.contact-email { gap:10px; font-size:.76rem; }.footer-nav { gap:15px; }.design-credit { line-height:1.7; } }
@media(max-width:360px) { .custom-navbar .logo { display:none; }.hero-name { font-size:.68rem; }.hero-role-line { font-size:10vw; }.section-header h2,.skills-section h2 { font-size:2rem; }.hero-socials a { width:33px; height:33px; }.hero-actions-new { gap:10px; }.contact-callout h2 { font-size:3rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; }.js-reveal .reveal { opacity:1; transform:none; } }
@media print { .custom-navbar,.float-wa,.to-top,#progress-container,#enter-screen { display:none !important; }.js-reveal .reveal { opacity:1; transform:none; }.hero-stage { height:450px; min-height:450px; }.project-card { break-inside:avoid; } }
/* Responsive welcome poster with separate header, portrait, and action rows. */
body.intro-open { overflow-y:hidden; }
#enter-screen { position:fixed; inset:0; z-index:20000; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto; background:#f4f3ef; opacity:1; transition:opacity .32s ease; }
.intro-content { position:relative; isolation:isolate; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:14px; width:min(1200px,100%); height:min(800px,calc(100svh - 48px)); min-height:360px; padding:32px 48px 22px; overflow:hidden; border-radius:24px; color:#fff; background:#073493; box-shadow:0 25px 80px #05235225; transition:transform .32s ease,opacity .32s ease; }
.intro-glow { position:absolute; inset:-30%; z-index:-1; background:radial-gradient(ellipse at 55% 55%,#2265d9 0%,#0c3ea2 37%,#061c61 75%); animation:intro-atmosphere 14s ease-in-out infinite alternate; }
.intro-grid { position:absolute; inset:0; z-index:-1; background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(transparent,#000 40%,transparent); }
.intro-heading { position:relative; z-index:4; text-align:center; }
.intro-eyebrow { margin-bottom:8px; font-size:.65rem; line-height:1.3; letter-spacing:2px; font-weight:600; text-transform:uppercase; color:#dae5ff; }
#intro-title { font:800 clamp(24px,3.3vw,42px)/1.15 var(--font-head); letter-spacing:-1.3px; }
#intro-title span { color:#ffdc40; }
.intro-edition { position:absolute; right:24px; top:32px; font-size:.5rem; letter-spacing:1.5px; color:#b1c6ee; writing-mode:vertical-rl; }
.intro-stage { position:relative; min-height:0; }
.intro-lettering { position:absolute; top:0; left:0; width:100%; height:auto; max-height:70%; overflow:visible; font-family:Impact,'Arial Narrow',sans-serif; font-size:215px; font-weight:800; pointer-events:none; }
.intro-outline { fill:transparent; stroke:#93b8ff42; stroke-width:1; }
.intro-solid { fill:#f9fbff; }
.intro-portrait { position:absolute; inset:0; display:flex; justify-content:center; padding-top:35px; z-index:3; pointer-events:none; }
.intro-portrait img { display:block; max-width:74%; width:auto; height:100%; object-fit:contain; filter:drop-shadow(0 15px 24px #00164040); animation:intro-float 7s ease-in-out infinite; }
.intro-arrow { position:absolute; width:130px; stroke:#ffdc40; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:6 6; opacity:.9; pointer-events:none; }
.intro-arrow path { animation:intro-dash 18s linear infinite; }
.intro-arrow-top { top:0; left:0; transform:rotate(12deg); }
.intro-arrow-bottom { right:0; bottom:0; transform:rotate(-15deg); }
.intro-chip { position:absolute; z-index:4; border:1px solid #ffffff32; padding:9px 14px; border-radius:30px; background:#083082d9; backdrop-filter:blur(12px); color:#e6efff; font-size:.66rem; animation:intro-chip-drift 8s ease-in-out infinite; }
.intro-chip span { color:#ffdc40; margin-right:8px; font-size:.9rem; }
.intro-chip-cloud { left:3%; bottom:25%; transform:rotate(-5deg); }
.intro-chip-security { right:3%; bottom:35%; transform:rotate(5deg); animation-delay:-4s; }
.intro-footer { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:8px; border-top:1px solid #ffffff20; }
.intro-copy { max-width:300px; }
.intro-label { display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size:.6rem; font-weight:600; color:#ffdc40; }
.intro-label span { width:5px; height:5px; background:#ffdc40; border-radius:50%; box-shadow:0 0 12px #ffdc40; }
#intro-description { font-size:.78rem; line-height:1.65; color:#d7e5ff; }
#enter-btn { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:22px; min-height:52px; padding:13px 25px; background:#ffdc40; border:1px solid #ffe979; border-radius:50px; color:#10254c; font-family:var(--font-head); font-size:.9rem; font-weight:800; box-shadow:0 0 28px #ffdc4038,0 8px 25px #00174740; transition:transform .2s,box-shadow .2s; }
#enter-btn span { font-size:1.3rem; line-height:1; }
#enter-btn:hover { transform:translateY(-3px); box-shadow:0 0 40px #ffdc4060,0 12px 28px #00174740; }
#enter-btn:focus-visible { outline:2px solid #fff; outline-offset:5px; }
#enter-btn:disabled { cursor:default; }
.intro-coordinate { position:relative; font-size:.47rem; letter-spacing:1.4px; color:#b4c8ee; z-index:4; text-align:center; }
#enter-screen.is-leaving { opacity:0; pointer-events:none; }
#enter-screen.is-leaving .intro-content { opacity:0; transform:translateY(-12px) scale(.98); }
#enter-screen[hidden] * { animation-play-state:paused; }
.main-title:focus { outline:none; }
@keyframes intro-atmosphere { to { transform:translate(4%,-3%) scale(1.08); } }
@keyframes intro-float { 50% { transform:translateY(-5px); } }
@keyframes intro-chip-drift { 50% { translate:0 -5px; } }
@keyframes intro-dash { to { stroke-dashoffset:-120; } }
@media(max-width:800px) {
 #enter-screen { padding:16px; }
 .intro-content { height:calc(100svh - 32px); padding:28px 28px 18px; border-radius:20px; }
 .intro-portrait { padding-top:55px; }
 .intro-portrait img { max-width:90%; }
 .intro-arrow { width:90px; }
 .intro-chip-cloud { left:0; bottom:20%; }
 .intro-chip-security { right:0; bottom:35%; }
 .intro-edition { right:12px; }
}
@media(max-width:540px) {
 #enter-screen { padding:10px; }
 .intro-content { height:calc(100svh - 20px); min-height:420px; padding:24px 16px 16px; gap:12px; border-radius:18px; }
 #intro-title { font-size:clamp(23px,6.5vw,34px); letter-spacing:-1px; }
 .intro-eyebrow { font-size:.57rem; margin-bottom:6px; }
 .intro-edition { display:none; }
 .intro-lettering { top:0; max-height:40%; }
 .intro-portrait { padding-top:65px; }
 .intro-portrait img { max-width:100%; }
 .intro-arrow-top { width:60px; top:22%; }
 .intro-arrow-bottom { width:60px; }
 .intro-chip { padding:6px 9px; font-size:.5rem; }
 .intro-chip span { margin-right:5px; font-size:.7rem; }
 .intro-chip-cloud { bottom:14%; }
 .intro-chip-security { bottom:36%; }
 .intro-footer { flex-direction:column; gap:14px; text-align:center; padding-top:12px; }
 .intro-copy { max-width:none; }
 .intro-label { display:none; }
 #intro-description { font-size:.72rem; }
 #enter-btn { min-height:48px; padding:12px 24px; font-size:.8rem; }
 .intro-coordinate { font-size:.37rem; letter-spacing:.8px; }
}
@media(max-height:650px) and (max-width:540px) {
 .intro-content { padding-top:18px; gap:8px; }
 .intro-portrait { padding-top:45px; }
 .intro-chip { display:none; }
 .intro-footer { gap:10px; padding-top:8px; }
 #intro-description { font-size:.65rem; }
}
@media(max-height:540px) and (min-width:541px) {
 #enter-screen { padding:10px; }
 .intro-content { height:calc(100svh - 20px); min-height:280px; padding:16px 30px 12px; gap:8px; }
 .intro-heading { text-align:left; }
 #intro-title { font-size:26px; }
 .intro-eyebrow { font-size:.5rem; margin-bottom:3px; }
 .intro-portrait { padding-top:0; }
 .intro-lettering { max-height:95%; }
 .intro-chip,.intro-arrow-top,.intro-label,.intro-edition { display:none; }
 .intro-footer { padding-top:8px; }
 #intro-description { font-size:.65rem; }
 #enter-btn { min-height:42px; padding:8px 20px; font-size:.75rem; }
 .intro-coordinate { font-size:.4rem; }
}

.left-stat p br { display:initial; }
/* Keep the heading measurable and hero actions clear of floating controls. */
.main-title { position:absolute; inset:0; pointer-events:none; }
.home-visible .float-wa { opacity:0; visibility:hidden; pointer-events:none; }
.hero-bottom a { scroll-margin-bottom:110px; }
@media(max-width:540px) { .hero-stage { min-height:550px; height:70svh; } }


/* Requested hero text treatment. */
.left-stat { color:#111; }
.hero-name { color:#111; animation:hero-name-monochrome 10s ease-in-out infinite; }
@keyframes hero-name-monochrome { 0%,15%,85%,100% { color:#111; } 40%,60% { color:#fff; } }

/* Edge-to-edge entry with a visible, gently animated touch invitation. */
#enter-screen { padding:0; background:#073493; }
.intro-content { width:100%; height:100svh; height:100dvh; min-height:0; border-radius:0; box-shadow:none; padding:clamp(24px,4vh,48px) clamp(24px,5vw,100px) max(20px,env(safe-area-inset-bottom)); }
.intro-action { display:flex; flex-direction:column; align-items:center; flex-shrink:0; gap:12px; padding:8px; }
#enter-btn { position:relative; min-width:230px; min-height:58px; animation:intro-button-arrive .7s cubic-bezier(.2,.8,.3,1.2) both,intro-button-invite 5s 1s ease-in-out infinite; }
#enter-btn::after { content:''; position:absolute; inset:-7px; border:1px solid #ffdc4070; border-radius:inherit; pointer-events:none; animation:intro-button-ring 3s 1s ease-out infinite; }
#enter-btn:hover { animation-play-state:paused; }
#enter-btn:disabled,#enter-btn:disabled::after { animation:none; }
#intro-touch-hint { color:#d7e5ff; font-size:.62rem; letter-spacing:.8px; }
#intro-touch-hint span { color:#ffdc40; margin:0 5px; }
@keyframes intro-button-arrive { from { opacity:0; transform:translateY(20px) scale(.82); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes intro-button-invite { 0%,70%,100% { transform:translateX(0) rotate(0); } 76% { transform:translateX(-3px) rotate(-1.5deg); } 80% { transform:translateX(3px) rotate(1.5deg); } 84% { transform:translateX(-2px) rotate(-1deg); } 88% { transform:translateX(2px) rotate(1deg); } 92% { transform:translateX(0) rotate(0); } }
@keyframes intro-button-ring { 0% { opacity:.65; transform:scale(1); } 70%,100% { opacity:0; transform:scale(1.12,1.3); } }
@media(min-width:1100px) { .intro-portrait img { max-width:65%; } #intro-title { font-size:clamp(36px,3vw,56px); } .intro-edition { right:32px; } }
@media(max-width:540px) {
 .intro-content { padding:max(24px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom)); }
 .intro-action { gap:10px; padding:6px; }
 #enter-btn { min-width:230px; min-height:54px; }
 #intro-touch-hint { font-size:.55rem; letter-spacing:.4px; }
}
@media(max-height:650px) and (max-width:540px) { .intro-content { padding-top:16px; padding-bottom:12px; } .intro-action { gap:7px; } #enter-btn { min-height:48px; } }
@media(max-height:540px) and (min-width:541px) { .intro-content { padding:14px 30px 10px; } .intro-action { gap:7px; padding:4px; } #enter-btn { min-width:200px; min-height:44px; } #intro-touch-hint { font-size:.5rem; } }

/* One cinematic landing, followed by the quieter touch invitation. */
.intro-portrait img { mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%); }
.intro-action { position:relative; isolation:isolate; perspective:900px; }
#enter-btn { animation:intro-button-invite 5s 1.6s ease-in-out infinite; z-index:2; }
#enter-screen.is-arriving #enter-btn { animation:button-impact-landing .82s cubic-bezier(.35,.02,.75,.45) both; }
#enter-screen.is-arriving #enter-btn:hover { animation-play-state:running; }
#enter-screen.impact-landed .intro-stage { animation:poster-impact .28s ease-out; }
.impact-dust { position:absolute; top:35px; left:50%; width:1px; height:1px; z-index:1; pointer-events:none; }
.impact-dust span { position:absolute; top:-26px; left:-26px; width:52px; height:52px; border-radius:50%; opacity:0; background:radial-gradient(circle,#e4edffb3 0%,#bdceeb66 35%,transparent 72%); filter:blur(4px); }
.impact-dust::before { content:''; position:absolute; left:-110px; top:-25px; width:220px; height:50px; border:2px solid #ffe481; border-radius:50%; opacity:0; }
.impact-landed .impact-dust span { animation:impact-smoke .95s ease-out both; }
.impact-landed .impact-dust::before { animation:impact-shockwave .65s ease-out both; }
@keyframes button-impact-landing {
 0% { opacity:0; transform:translateY(-65vh) translateZ(400px) rotate(-14deg) scale(2.2); filter:blur(5px); }
 20% { opacity:1; }
 76% { transform:translateY(-10px) translateZ(0) rotate(1deg) scale(1.05); filter:blur(0); }
 86% { transform:translateY(4px) rotate(0) scale(1.12,.83); }
 94% { transform:translateY(-5px) scale(.97,1.04); }
 100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes poster-impact { 0%,100% { translate:0 0; } 20% { translate:0 3px; } 40% { translate:-2px -2px; } 60% { translate:2px 1px; } 80% { translate:-1px 0; } }
@keyframes impact-smoke { 0% { opacity:0; transform:translate(0,0) scale(.3); } 18% { opacity:.8; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(2.4); } }
@keyframes impact-shockwave { 0% { opacity:.75; transform:scale(.6); } 100% { opacity:0; transform:scale(1.65,2.5); } }
@media(max-width:540px) { .impact-dust span { width:40px; height:40px; } }
@media(prefers-reduced-motion:reduce) { .impact-dust { display:none; } }

#enter-screen { overflow:hidden; }
@media(min-width:801px) {
 .intro-footer { display:grid; grid-template-columns:1fr auto 1fr; }
 .intro-copy { grid-column:1; }
 .intro-action { grid-column:2; }
}

.intro-portrait img { width:min(100%,calc((100dvh - 260px)*1.014)); height:auto; max-height:100%; align-self:center; }

/* Profile and experience content in the portfolio's existing neutral palette. */
.about-layout { display:grid; grid-template-columns:1.3fr 1fr; gap:70px; align-items:stretch; }
.profile-kicker { display:block; font-size:.62rem; letter-spacing:1.4px; color:var(--text-gray); margin-bottom:20px; }
.about-story p { color:var(--text-gray); font-size:.9rem; line-height:1.9; margin-bottom:25px; max-width:580px; }
.about-story .about-lead { font:500 clamp(1.3rem,2.2vw,1.8rem)/1.5 var(--font-head); color:var(--text-dark); letter-spacing:-.5px; }
.about-story .profile-kicker { font-size:.62rem; }
.profile-links { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.education-card { padding:32px; border:1px solid var(--border-color); background:var(--card-bg); border-radius:20px; display:flex; flex-direction:column; align-items:flex-start; }
.education-card i { font-size:2rem; color:var(--accent-color); margin:5px 0 24px; }
.education-card h3 { font:500 1.7rem/1.35 var(--font-head); letter-spacing:-.5px; margin-bottom:18px; }
.education-card p { font-size:.9rem; margin-bottom:28px; }
.education-note { margin-top:auto; color:var(--text-gray); font-size:.75rem; }
.journey-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.journey-card { padding:30px 24px; border-top:2px solid var(--accent-color); border-radius:0 0 14px 14px; background:var(--card-bg); }
.journey-card h3 { font:500 1.15rem/1.5 var(--font-head); margin-bottom:20px; letter-spacing:-.4px; }
.journey-card p { color:var(--text-gray); font-size:.8rem; line-height:1.8; }
.journey-card .journey-org { color:var(--text-dark); font-weight:600; margin-bottom:14px; }
.journey-source { margin-top:28px; }
.project-card .project-contribution { font-size:.72rem; color:var(--accent-color); border-left:2px solid var(--accent-color); padding-left:12px; }
@media(max-width:800px) { .about-layout { gap:30px; }.journey-grid { grid-template-columns:1fr; }.journey-card { padding:26px; } }
@media(max-width:540px) { .about-layout { grid-template-columns:1fr; gap:25px; }.education-card { padding:26px; }.project-identity { padding:24px; }.project-identity .identity-kicker { font-size:.46rem; letter-spacing:1px; } }

.journey-affiliation { color:var(--text-gray); font-size:.8rem; line-height:1.7; margin:-15px 0 30px; }

.section-jump-links { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 26px; padding:0 24px 30px; }
.section-jump-links a { color:var(--text-gray); font-size:.75rem; text-decoration:none; padding:6px 0; }
.section-jump-links a:hover { color:var(--accent-color); }
.skill-filters { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0; }
.skill-filters button { padding:9px 16px; border:1px solid var(--border-color); border-radius:25px; color:var(--text-gray); background:var(--card-bg); font-size:.75rem; }
.skill-filters button[aria-pressed="true"] { color:var(--bg-color); background:var(--text-dark); border-color:var(--text-dark); }
.skill-card i { color:var(--accent-color); }
.skill-context { color:var(--text-gray); font-size:.75rem; margin-top:24px; }
.project-details { width:100%; margin-top:18px; padding-top:14px; border-top:1px solid var(--border-color); }
.project-details summary { cursor:pointer; list-style:none; display:flex; gap:12px; justify-content:space-between; font-size:.78rem; color:var(--text-dark); }
.project-details summary::-webkit-details-marker { display:none; }
.project-details summary span { font-size:1rem; transition:transform .2s; }
.project-details[open] summary span { transform:rotate(45deg); }
.project-details dl { margin:20px 0; display:grid; gap:15px; }
.project-details dt { color:var(--text-dark); font-size:.68rem; font-weight:600; margin-bottom:5px; }
.project-details dd { color:var(--text-gray); font-size:.78rem; line-height:1.8; }
.contact-form { border-top:1px solid #ffffff25; border-bottom:1px solid #ffffff25; padding:32px 0; margin-bottom:45px; }
.contact-form-heading h3 { font:500 1.6rem var(--font-head); margin-bottom:10px; }
.contact-form-heading p { color:#b5c1b8; font-size:.76rem; margin-bottom:28px; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:850px; }
.contact-fields label { display:flex; flex-direction:column; gap:9px; font-size:.72rem; color:#dce6df; }
.contact-fields .field-wide { grid-column:1/-1; }
.contact-fields input,.contact-fields textarea { width:100%; min-width:0; padding:13px 15px; border:1px solid #ffffff30; border-radius:10px; background:#ffffff06; color:#fff; font:inherit; font-size:.9rem; }
.contact-fields textarea { resize:vertical; }
.contact-form button { display:inline-flex; align-items:center; gap:25px; padding:13px 22px; border-radius:30px; margin-top:22px; border:1px solid #c3d2c8; background:#d7e5dc; color:#202624; font-size:.8rem; font-weight:600; }
.contact-form :focus-visible { outline-color:#c3d2c8; }
#contact-form-status { margin-top:12px; font-size:.72rem; color:#b5c1b8; }
@media(max-width:540px) { .contact-fields { grid-template-columns:1fr; }.skill-filters button { padding:8px 12px; font-size:.68rem; }.section-jump-links { gap:8px 16px; }.section-jump-links a { font-size:.68rem; } }

.spm-project .img-wrapper img { padding:0; object-fit:cover; object-position:center 48%; }