:root {
  --black:      #0d0d0d;
  --surface:    #141414;
  --surface2:   #1c1c1c;
  --border:     rgba(255,255,255,0.07);
  --amber:      #ff6532;
  --amber-b:    #ffb400;
  --amber-glow: rgba(255,101,50,0.12);
  --amber-dim:  rgba(255,101,50,0.5);
  --white:      #f5f0e8;
  --muted:      #6b6560;
  --muted2:     #3d3835;
  --sans:       'Inter', sans-serif;
  --mono:       'JetBrains Mono', monospace;
  --nav-h:      64px;
  --r:          8px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
}


/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); display:flex; align-items:center; padding:0 2rem;
  background:rgba(13,13,13,0.88); backdrop-filter:blur(24px) saturate(120%);
  border-bottom:1px solid var(--border); transition:border-color 0.3s;
}
nav.scrolled { border-bottom-color: rgba(255,101,50,0.2); }
.nav-inner { width:100%; max-width:1300px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:0.65rem; text-decoration:none; cursor:pointer; }
.nav-logo img { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1.5px solid var(--amber-dim); }
.nav-logo-name { font-size:0.8rem; font-weight:700; letter-spacing:0.02em; color:var(--white); }
.nav-links { list-style:none; display:flex; gap:0.15rem; }
.nav-links a { font-size:0.72rem; font-weight:500; letter-spacing:0.01em; color:var(--muted); text-decoration:none; padding:0.45rem 0.85rem; border-radius:6px; transition:color 0.2s, background 0.2s; }
.nav-links a:hover { color:var(--white); background:rgba(255,255,255,0.06); }
.nav-links a.active { color:var(--amber); }
.nav-cta { font-size:0.72rem; font-weight:600; color:var(--black); background:var(--amber); padding:0.5rem 1.1rem; border-radius:6px; text-decoration:none; transition:opacity 0.2s, transform 0.2s; }
.nav-cta:hover { opacity:0.85; transform:translateY(-1px); }
@media(max-width:860px){ .nav-cta{display:none;} .nav-links a{font-size:0.65rem; padding:0.35rem 0.55rem;} }

/* HAMBURGER */
.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:1px solid var(--border); border-radius:6px; cursor:pointer; padding:0.45rem 0.5rem; width:36px; height:36px; flex-shrink:0; }
.nav-hamburger span { display:block; width:16px; height:1.5px; background:var(--white); border-radius:2px; transition:transform 0.25s, opacity 0.25s; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

@media(max-width:620px){
  nav { padding:0 1rem; padding-top:env(safe-area-inset-top); height:calc(var(--nav-h) + env(safe-area-inset-top)); }
  .nav-hamburger { display:flex; }
  .nav-links { display:none; flex-direction:column; gap:0.25rem; position:absolute; top:100%; left:0; right:0; background:rgba(13,13,13,0.97); backdrop-filter:blur(24px) saturate(120%); border-bottom:1px solid var(--border); padding:0.75rem 1rem 1rem; }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:0.9rem !important; padding:0.7rem 1rem !important; border-radius:8px; }
  .page { padding-top:calc(var(--nav-h) + env(safe-area-inset-top)) !important; }
}

/* PAGES */
.page { display:none; min-height:100vh; padding-top:var(--nav-h); }
.page.active { display:block; }

/* HERO */
.hero { position:relative; min-height:calc(100vh - var(--nav-h)); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
@media(max-width:768px){ .hero{grid-template-columns:1fr;} }
.hero-left { padding:4rem 3rem 4rem 4rem; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
@media(max-width:768px){ .hero-left{padding:2.5rem 1.5rem;} }
.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--mono); font-size:0.63rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); background:rgba(255,101,50,0.08); border:1px solid rgba(255,101,50,0.25); border-radius:100px; padding:0.3rem 0.85rem; margin-bottom:1.75rem; width:fit-content; animation:fadeUp 0.7s 0.1s both; }
.hero-badge-dot { width:5px; height:5px; border-radius:50%; background:var(--amber); animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero-h1 { font-size:clamp(3rem,7vw,6.5rem); font-weight:900; line-height:1; letter-spacing:-0.04em; color:var(--white); margin-bottom:1.25rem; animation:fadeUp 0.7s 0.2s both; }
.hero-h1 .accent { color:var(--amber); display:block; }
.hero-desc { font-size:1rem; font-weight:400; color:var(--muted); line-height:1.7; max-width:400px; margin-bottom:2.25rem; animation:fadeUp 0.7s 0.3s both; }
.hero-actions { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:2.75rem; animation:fadeUp 0.7s 0.4s both; }
.hero-stats { display:flex; gap:2rem; animation:fadeUp 0.7s 0.5s both; border-top:1px solid var(--border); padding-top:1.75rem; }
.stat-num { font-size:1.8rem; font-weight:900; color:var(--white); letter-spacing:-0.05em; line-height:1; }
.stat-label { font-size:0.68rem; font-weight:500; color:var(--muted); letter-spacing:0.04em; margin-top:0.2rem; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

.hero-right { position:relative; overflow:hidden; }
@media(max-width:768px){ .hero-right{height:55vw;min-height:240px;} }
.hero-img-main { position:absolute; inset:0; background:url('images/GCG-188.jpg') center/cover no-repeat; }
.hero-img-main::after { content:''; position:absolute; inset:0; background:linear-gradient(to right, var(--black) 0%, var(--black) 1%, transparent 100%), linear-gradient(to top, rgba(13,13,13,0.55) 0%, transparent 50%); }
.hero-img-overlay { position:absolute; bottom:2rem; right:2rem; width:130px; height:130px; border-radius:12px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.5); z-index:2; animation:fadeUp 0.9s 0.6s both; }
.hero-img-overlay img { width:100%; height:100%; object-fit:cover; }
.hero-caption { position:absolute; bottom:2.2rem; left:2rem; font-family:var(--mono); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(245,240,232,0.4); z-index:3; animation:fadeUp 0.8s 0.7s both; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.8rem; font-weight:600; letter-spacing:0.01em; padding:0.75rem 1.4rem; border-radius:8px; text-decoration:none; transition:all 0.2s; cursor:pointer; border:none; }
.btn-primary { background:var(--amber); color:var(--black); }
.btn-primary:hover { background:#ff7a4d; transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,101,50,0.35); }
.btn-outline { background:transparent; color:var(--white); border:1px solid var(--border); }
.btn-outline:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); }
.btn-ghost { background:transparent; color:var(--amber); border:1px solid rgba(255,101,50,0.3); font-size:0.75rem; padding:0.6rem 1.1rem; }
.btn-ghost:hover { background:var(--amber-glow); }

/* LAYOUT */
.section { padding:5rem 2rem; max-width:1300px; margin:0 auto; }
.label { font-family:var(--mono); font-size:0.62rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:0.7rem; margin-bottom:1.25rem; }
.label::before { content:''; width:18px; height:1.5px; background:var(--amber); border-radius:2px; }
.section-title { font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-0.04em; line-height:1.05; color:var(--white); margin-bottom:1rem; }
.section-title em { font-style:normal; color:var(--amber); }
hr.div { border:none; border-top:1px solid var(--border); margin:3.5rem 0; }

/* TICKER */
.ticker { overflow:hidden; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:0.85rem 0; }
.ticker-track { display:flex; gap:0; width:max-content; animation:tick 30s linear infinite; }
.ticker-item { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted2); white-space:nowrap; padding:0 2.5rem; display:flex; align-items:center; gap:2rem; }
.ticker-item .dot { color:var(--amber); }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SPEC GRID */
.spec-grid { display:flex; flex-direction:column; margin-top:2rem; border-top:1px solid var(--border); }
.spec-item { display:grid; grid-template-columns:80px 220px 1fr; align-items:center; gap:2.5rem; padding:2rem 0.5rem; border-bottom:1px solid var(--border); position:relative; transition:background 0.2s; cursor:default; }
.spec-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--amber); transform:scaleY(0); transform-origin:top; transition:transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.spec-item:hover::before { transform:scaleY(1); }
.spec-item:hover { background:rgba(255,101,50,0.025); }
.spec-num { font-family:var(--mono); font-size:2rem; font-weight:500; color:var(--muted2); letter-spacing:-0.04em; line-height:1; transition:color 0.25s; }
.spec-item:hover .spec-num { color:var(--amber); }
.spec-item h3 { font-size:1.15rem; font-weight:700; color:var(--white); letter-spacing:-0.02em; }
.spec-item p { font-size:0.875rem; color:var(--muted); line-height:1.7; max-width:480px; }
@media(max-width:720px){ .spec-item{grid-template-columns:50px 1fr;gap:1.25rem;} .spec-item p{grid-column:1/3;margin-top:-0.5rem;} }

/* PROJECT BANNER */
.project-banner { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1.5rem 2rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden; }
.project-banner::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(to bottom, var(--amber), var(--amber-b)); }
.pb-label { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber); white-space:nowrap; }
.pb-inner { flex:1; }
.pb-title { font-size:0.98rem; font-weight:700; color:var(--white); }
.pb-desc { font-size:0.8rem; color:var(--muted); margin-top:0.2rem; }

/* PAGE HEADER */
.page-header { padding:3.5rem 2rem 3rem; max-width:1300px; margin:0 auto; border-bottom:1px solid var(--border); }
.page-header h1 { font-size:clamp(2.5rem,6vw,5rem); font-weight:900; letter-spacing:-0.04em; color:var(--white); line-height:0.93; margin-top:0.75rem; }
.page-header h1 em { font-style:normal; color:var(--amber); }

/* ABOUT SPLIT */
.about-split { display:grid; grid-template-columns:1fr 0.65fr; gap:3.5rem; align-items:start; }
@media(max-width:860px){ .about-split{grid-template-columns:1fr;} }
.about-text p { color:var(--muted); font-size:0.95rem; line-height:1.8; margin-bottom:1.2rem; }

/* PHOTO STRIP */
.photo-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin-top:2.5rem; }
.photo-strip-item { aspect-ratio:4/3; overflow:hidden; border-radius:10px; }
.photo-strip-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.photo-strip-item:hover img { transform:scale(1.05); }
@media(max-width:560px){ .photo-strip{grid-template-columns:1fr 1fr;} .photo-strip-item:last-child{display:none;} }

/* PORTFOLIO CARDS */
.pf-card { border-radius:10px; overflow:hidden; position:relative; background:var(--surface2); cursor:pointer; }
.pf-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.55s cubic-bezier(0.22,1,0.36,1), filter 0.4s; }
.pf-card:hover img { transform:scale(1.06); filter:brightness(0.7); }
.pf-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.pf-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,13,13,0.9) 0%, transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem; }
.pf-overlay-role { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber); margin-bottom:0.3rem; }
.pf-overlay-title { font-size:0.95rem; font-weight:700; color:var(--white); }

/* TIMELINE */
.timeline { margin-top:0; }
.t-item { display:grid; grid-template-columns:120px 1fr; gap:2rem; padding:1.75rem 0; border-bottom:1px solid var(--border); }
.t-item:first-child { padding-top:0; }
.t-item:last-child { border-bottom:none; }
.t-date { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.05em; color:var(--muted); padding-top:0.2rem; line-height:1.6; }
.t-content { border-left:2px solid var(--surface2); padding-left:1.5rem; position:relative; }
.t-content::before { content:''; position:absolute; left:-5px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--black); border:2px solid var(--amber-dim); }
.t-content h3 { font-size:0.98rem; font-weight:700; color:var(--white); margin-bottom:0.5rem; }
.t-content p, .t-content li { font-size:0.87rem; color:var(--muted); line-height:1.7; }
.t-content ul { padding-left:1.1rem; margin-top:0.4rem; }
.t-content ul li { margin-bottom:0.2rem; }
@media(max-width:560px){ .t-item{grid-template-columns:1fr;gap:0.4rem;} }

/* CARDS */
.card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.75rem; transition:border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.card:hover { border-color:rgba(255,101,50,0.25); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,0.3); }
.card h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:0.6rem; }
.card p { font-size:0.87rem; color:var(--muted); line-height:1.7; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; margin-top:1.5rem; }

/* TAGS */
.tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.25rem; }
.tag { font-family:var(--mono); font-size:0.65rem; letter-spacing:0.05em; padding:0.35rem 0.8rem; border:1px solid var(--surface2); border-radius:6px; color:var(--muted); background:var(--surface); transition:all 0.2s; }
.tag:hover { border-color:rgba(255,101,50,0.4); color:var(--amber); }

/* PERF CARDS */
.perf-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.5rem; transition:all 0.25s; }
.perf-card:hover { border-color:rgba(255,101,50,0.25); transform:translateY(-3px); box-shadow:0 10px 35px rgba(0,0,0,0.3); }
.perf-card .role { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); margin-bottom:0.45rem; }
.perf-card h3 { font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:0.35rem; }
.perf-card .meta { font-size:0.82rem; color:var(--muted); }

/* NODA */
.noda-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem; margin-top:2rem; }
.noda-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.75rem; position:relative; transition:all 0.25s; overflow:hidden; }
.noda-card:hover { border-color:rgba(255,101,50,0.25); transform:translateY(-3px); box-shadow:0 10px 35px rgba(0,0,0,0.3); }
.noda-card::after { content:'\201C'; position:absolute; top:0.25rem; right:1.25rem; font-size:5rem; line-height:1; color:var(--amber); opacity:0.055; font-family:Georgia,serif; pointer-events:none; user-select:none; }
.noda-meta { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.noda-role { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); background:var(--amber-glow); border:1px solid rgba(255,101,50,0.2); border-radius:6px; padding:0.25rem 0.65rem; }
.noda-date { font-family:var(--mono); font-size:0.62rem; color:var(--muted); }
.noda-card h3 { font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:0.2rem; }
.noda-venue { font-family:var(--mono); font-size:0.62rem; color:var(--muted); margin-bottom:1rem; }
.noda-quote { border-left:2px solid rgba(255,101,50,0.3); padding-left:1rem; font-size:0.88rem; font-style:italic; color:#8a8278; line-height:1.75; margin-bottom:1.25rem; }
.noda-quote strong { color:var(--amber); font-style:normal; font-weight:600; }
.noda-link { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border); padding-bottom:0.1rem; transition:color 0.2s, border-color 0.2s; }
.noda-link:hover { color:var(--amber); border-color:rgba(255,101,50,0.4); }
.noda-badge { display:inline-flex; align-items:center; gap:0.35rem; font-family:var(--mono); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); background:var(--amber-glow); border:1px solid rgba(255,101,50,0.2); border-radius:6px; padding:0.2rem 0.55rem; margin-bottom:0.75rem; }

/* CONTACT */
.contact-split { display:grid; grid-template-columns:1fr 1.1fr; gap:5rem; align-items:start; }
@media(max-width:820px){ .contact-split{grid-template-columns:1fr;gap:3rem;} }
.contact-status { display:inline-flex; align-items:center; gap:0.55rem; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:#5ecb7a; background:rgba(94,203,122,0.06); border:1px solid rgba(94,203,122,0.22); border-radius:100px; padding:0.3rem 0.8rem; margin-bottom:2rem; }
.contact-status::before { content:''; width:5px; height:5px; border-radius:50%; background:#5ecb7a; box-shadow:0 0 8px rgba(94,203,122,0.7); animation:pulse-dot 2s infinite; }
.contact-email { font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:900; letter-spacing:-0.04em; color:var(--amber); text-decoration:none; line-height:1.1; display:block; margin:0.5rem 0 2.5rem; transition:opacity 0.2s; }
.contact-email:hover { opacity:0.75; }
.contact-label { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:0.35rem; }
.contact-value { font-size:0.9rem; color:var(--white); line-height:1.65; margin-bottom:1.75rem; }
.socials { display:flex; gap:0.6rem; margin-top:2rem; }
.socials a { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border); border-radius:8px; color:var(--muted); text-decoration:none; transition:all 0.2s; }
.socials a:hover { border-color:var(--amber); color:var(--amber); background:var(--amber-glow); transform:translateY(-2px); }
.insta-panel { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.insta-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.insta-title { display:flex; align-items:center; gap:0.5rem; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.insta-link { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em; color:var(--amber); text-decoration:none; transition:opacity 0.2s; }
.insta-link:hover { opacity:0.7; }
.insta-body { padding:1.25rem; }

/* CERT */
.cert-img { width:100%; max-width:440px; border-radius:10px; border:1px solid var(--border); margin-top:1rem; filter:brightness(0.9) contrast(1.05); height:auto; }

/* FOOTER */
footer { border-top:1px solid var(--border); padding:2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); max-width:1300px; margin:0 auto; }
.footer-dot { color:var(--amber); }

/* PROJECT DETAIL PAGE */
.pd-hero { position:relative; height:55vh; min-height:320px; overflow:hidden; }
.pd-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.3) 60%, transparent 100%); display:flex; flex-direction:column; justify-content:space-between; padding:1.5rem 2rem 2.5rem; }
.pd-back { background:rgba(13,13,13,0.72); border:1px solid var(--border); color:var(--muted); font-family:var(--mono); font-size:0.63rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.45rem 1rem; border-radius:6px; cursor:pointer; backdrop-filter:blur(8px); transition:all 0.2s; align-self:flex-start; }
.pd-back:hover { color:var(--white); border-color:rgba(255,255,255,0.2); background:rgba(13,13,13,0.9); }
.pd-hero-role { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber); margin-bottom:0.5rem; }
.pd-hero-title { font-size:clamp(2rem,5vw,4rem); font-weight:900; letter-spacing:-0.04em; color:var(--white); line-height:1; }
.pd-meta-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:2.5rem; }
.pd-meta-item { padding:1.25rem 1.5rem; border-right:1px solid var(--border); }
.pd-meta-item:last-child { border-right:none; }
.pd-meta-label { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); margin-bottom:0.4rem; }
.pd-meta-value { font-size:0.9rem; font-weight:600; color:var(--white); line-height:1.4; }
@media(max-width:640px){ .pd-meta-strip{grid-template-columns:1fr 1fr;} .pd-meta-item{border-bottom:1px solid var(--border);} }
.pf-card--no-img { background:linear-gradient(145deg, var(--surface2) 0%, #1a1a1a 100%); }
.pd-hero--bare { background:var(--surface); }
.pd-hero--bare img { display:none; }
.pd-desc { font-size:0.95rem; color:var(--muted); line-height:1.85; max-width:680px; margin-bottom:3rem; }
.pd-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0.75rem; }
.pd-gallery-img { aspect-ratio:4/3; overflow:hidden; border-radius:10px; }
.pd-gallery-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.pd-gallery-img:hover img { transform:scale(1.04); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity:1; transform:none; }

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--surface2); border-radius:2px; }

/* SKIP LINK */
.skip-link { position:absolute; top:-48px; left:0; background:var(--amber); color:var(--black); padding:0.6rem 1.2rem; font-size:0.875rem; font-weight:700; z-index:20000; transition:top 0.2s; text-decoration:none; border-radius:0 0 8px 0; }
.skip-link:focus { top:0; }

/* 3D CARD SHINE */
.pf-shine { position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:10px; opacity:0; transition:opacity 0.4s; }
.pf-card { will-change:transform; }

/* WAVEFORM */
#waveform { display:block; width:100%; height:60px; margin-top:1.75rem; opacity:0.85; }

/* RGB GLITCH */
@keyframes rgb-glitch {
  0%,100% { filter:none; transform:none; }
  8%  { filter:drop-shadow(3px 0 0 rgba(255,0,60,0.9)) drop-shadow(-3px 0 0 rgba(0,210,255,0.9)); transform:translateX(2px) skewX(-1.5deg); }
  16% { filter:drop-shadow(-4px 0 0 rgba(255,0,60,0.8)) drop-shadow(4px 0 0 rgba(0,210,255,0.8)); transform:translateX(-3px); }
  24% { filter:drop-shadow(2px 0 0 rgba(255,0,60,0.6)) drop-shadow(-2px 0 0 rgba(0,210,255,0.6)); transform:translateX(1px) skewX(1deg); }
  32% { filter:none; transform:translateX(-2px); }
  40% { filter:drop-shadow(5px 0 0 rgba(255,0,60,0.4)) drop-shadow(-5px 0 0 rgba(0,210,255,0.4)); transform:skewX(-0.5deg); }
  48% { filter:none; transform:none; }
}
.hero-h1.glitching { animation:rgb-glitch 0.4s steps(1) both; }

/* FLOWING GRADIENT ACCENT */
#scramble-2 { padding-bottom:0.1em; }

/* TIMELINE DRAW-IN */
.t-content::before { transform:scale(0); transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.2s; }
.t-item.t-in .t-content::before { transform:scale(1); }
.t-line-fill { position:absolute; left:-2px; top:0; width:2px; height:0; background:linear-gradient(to bottom,var(--amber),var(--amber-dim)); transition:height 0.7s cubic-bezier(0.22,1,0.36,1); border-radius:2px; z-index:1; }
.t-item.t-in .t-line-fill { height:100%; }

/* HORIZONTAL PORTFOLIO TRACK */
.pf-scroll-outer { position:relative; overflow:hidden; padding:2rem 0 0; }
.pf-scroll-outer::after { content:''; position:absolute; right:0; top:0; bottom:20px; width:120px; background:linear-gradient(to left, var(--black), transparent); pointer-events:none; z-index:4; }
.pf-track { display:flex; gap:0.75rem; cursor:grab; user-select:none; will-change:transform; padding:0 2rem 0.5rem; }
.pf-track.dragging { cursor:grabbing; }
.pf-track .pf-card { flex:0 0 320px; height:clamp(280px,46vh,420px); }
@media(max-width:768px){ .pf-track .pf-card { flex:0 0 260px; height:280px; } }
.pf-progress { height:2px; background:var(--surface2); margin:1rem 2rem 2rem; border-radius:2px; overflow:hidden; }
#pf-bar { height:100%; background:linear-gradient(to right,var(--amber),var(--amber-b)); border-radius:2px; width:0; }

/* EXTERNAL LINK MODAL */
.ext-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,0.75); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:1rem; }
.ext-modal[hidden] { display:none; }
.ext-modal-box { background:var(--surface); border:1px solid rgba(255,101,50,0.25); border-radius:14px; padding:2.5rem 2rem; max-width:400px; width:100%; text-align:center; animation:fadeUp 0.25s both; }
.ext-modal-icon { font-size:2rem; color:var(--amber); margin-bottom:1rem; line-height:1; }
.ext-modal-label { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber); margin-bottom:0.6rem; }
.ext-modal-title { font-size:1.35rem; font-weight:800; color:var(--white); letter-spacing:-0.03em; margin-bottom:0.5rem; }
.ext-modal-desc { font-size:0.88rem; color:var(--muted); line-height:1.65; margin-bottom:1rem; }
.ext-modal-url { font-family:var(--mono); font-size:0.68rem; color:var(--muted); background:var(--black); border:1px solid var(--border); border-radius:6px; padding:0.5rem 0.85rem; margin-bottom:1.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; display:block; }
.ext-modal-actions { display:flex; gap:0.75rem; justify-content:center; }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ticker-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}