/* Shared visual refinement: quiet ink, warm brass, soft grid and restrained motion. */
:root {
  --bg: #10191d;
  --surface: #172328;
  --surface-2: #1b292e;
  --text: #eef2ef;
  --text-muted: #aebbb7;
  --border: rgba(221, 235, 227, .11);
  --border-strong: rgba(221, 235, 227, .19);
  --accent: #d7b783;
  --accent-strong: #e4c897;
  --accent-soft: rgba(215, 183, 131, .13);
  --maxw: 1200px;
}
[data-theme="light"] { --bg:#f5f6f3; --surface:#fff; --surface-2:#ecefeb; --text:#172328; --text-muted:#54635e; --border:rgba(23,35,40,.12); --border-strong:rgba(23,35,40,.2); --shadow:rgba(23,35,40,.1); --accent:#8b6a37; --accent-strong:#72552c; --accent-soft:rgba(139,106,55,.1); }
html { scroll-padding-top: 92px; }
body { background-image: radial-gradient(ellipse at 75% 0%, rgba(91,119,107,.11), transparent 42%), linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px); background-size:auto, 52px 52px, 52px 52px; }
.wrap { width:min(var(--maxw), calc(100% - 48px)); }
.navbar { backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.navbar.is-scrolled { background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color:var(--border); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.nav-links a { position:relative; }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); }
.hero { isolation:isolate; overflow:hidden; }
.hero::before { background:radial-gradient(ellipse at 78% 38%, rgba(117,144,128,.16), transparent 48%), radial-gradient(ellipse at 16% 55%, var(--accent-soft), transparent 44%); animation:ambient 16s ease-in-out infinite alternate; }
@keyframes ambient { to { transform:translate3d(0,-10px,0) scale(1.025); opacity:.78; } }
.hero h1 { max-width:760px; font-size:clamp(42px,6.2vw,76px); line-height:1.08; letter-spacing:-.055em; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero-desc,.page-hero p { max-width:640px; line-height:1.8; }
.btn { transition:transform .22s var(--ease), box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.project-card,.service-card,.service-card-lg,.edu-card,.skill-group { transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.project-card:hover,.service-card:hover,.service-card-lg:hover,.edu-card:hover,.skill-group:hover { transform:translateY(-5px); box-shadow:0 22px 48px rgba(0,0,0,.16); }
.project-thumb img,.project-case-image { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.project-card:hover .project-thumb img { transform:scale(1.035); }
.project-thumb-link { display:block; color:inherit; }
.project-body h3 a { color:inherit; text-decoration:none; }
.project-body h3 a:hover { color:var(--accent); }
.project-placeholder { height:100%; min-height:220px; display:grid; align-content:center; justify-items:center; gap:10px; color:var(--text-muted); background:radial-gradient(ellipse at 70% 25%, var(--accent-soft), transparent 55%), linear-gradient(145deg,var(--surface-2),var(--surface)); }
.project-placeholder span { font:600 18px var(--font-display); color:var(--text); }
.project-placeholder small { font:12px var(--font-mono); }
.project-case-image { display:block; max-height:520px; border-radius:var(--radius-lg); border:1px solid var(--border); }
.project-detail-links { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.case-grid--single { grid-template-columns:1fr; }
.case-tech-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.case-tech-tags span { padding:8px 13px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; font:12px var(--font-mono); }
.live-project-section { margin-top:42px; padding-top:36px; border-top:1px solid var(--border); }
.live-project-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.live-project-heading h2,.live-project-section > h2 { margin-top:8px; font:600 clamp(26px,4vw,36px)/1.2 var(--font-display); }
.live-project-note { max-width:72ch; margin:14px 0 20px; color:var(--text-muted); line-height:1.7; }
.live-project-fallback { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-top:20px; padding:24px; border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--surface-2),var(--surface)); }
.live-project-fallback p { color:var(--text-muted); line-height:1.65; max-width:60ch; }
.live-project-wrapper { width:100%; overflow:hidden; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.18); }
.live-project-frame { display:block; width:100%; height:min(980px,88vh); min-height:800px; border:0; background:#fff; }
.profile-photo-card { border:1px solid var(--border-strong); box-shadow:0 30px 80px rgba(0,0,0,.25); }
.credentials-section { background:var(--surface-2); }
.credential-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.credential-card { display:flex; flex-direction:column; align-items:flex-start; min-height:250px; padding:28px; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); transition:transform .3s var(--ease),border-color .3s ease; }
.credential-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.credential-index { color:var(--accent); font:11px var(--font-mono); letter-spacing:.1em; }
.credential-card h3 { color:var(--text); font:600 21px/1.3 var(--font-display); }
.credential-card p { color:var(--text-muted); }
.credential-meta,.credential-note { color:var(--text-muted); font-size:13px; }
.credential-card .btn { margin-top:auto; }
.credential-note { margin-top:18px; }
.certificate-dialog { width:min(900px,calc(100% - 28px)); height:min(85vh,760px); margin:auto; padding:0; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:18px; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.certificate-dialog::backdrop { background:rgba(4,10,12,.78); backdrop-filter:blur(6px); }
.certificate-dialog-head { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 20px; border-bottom:1px solid var(--border); }
.certificate-dialog-head h2 { font:600 16px var(--font-display); }
.certificate-close { width:38px; height:38px; border:1px solid var(--border); border-radius:50%; font-size:25px; }
.certificate-dialog iframe { display:block; width:100%; height:calc(100% - 116px); border:0; background:#fff; }
.certificate-help { padding:10px 20px; color:var(--text-muted); font-size:12px; }
.cursor-dot,.cursor-ring { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate3d(-100px,-100px,0); }
.cursor-dot { width:5px; height:5px; margin:-2.5px; background:var(--accent); }
.cursor-ring { width:34px; height:34px; margin:-17px; border:1px solid color-mix(in srgb,var(--accent) 65%,transparent); transition:transform .14s ease-out,width .2s ease,height .2s ease,margin .2s ease,background .2s ease; }
.cursor-hover .cursor-ring { width:48px; height:48px; margin:-24px; background:var(--accent-soft); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (max-width:700px) { .wrap { width:min(var(--maxw),calc(100% - 36px)); } .credential-grid { grid-template-columns:1fr; } .hero h1 { font-size:clamp(39px,11vw,58px); } .live-project-heading { align-items:flex-start; } .live-project-frame { height:780px; min-height:780px; } }
@media (hover:none),(pointer:coarse) { .cursor-dot,.cursor-ring { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }