:root {
  --black: #111111;
  --black2: #161616;
  --card-dark: #1b1b1d;
  --border: rgba(255,255,255,0.075);
  --accent: #F05138; /* Swift Orange */
  --accent-light: rgba(240, 81, 56, 0.15);
  --white: #e5e5e5; /* Softer off-white */
  --off-white: #d4d4d4;
  --gray: #a1a1aa;
  --gray2: #71717a;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sidebar-w: 340px;
  --nav-h: 68px;
  --focus: 0 0 0 3px rgba(240, 81, 56, 0.35);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body {
  font-family:var(--font); color:var(--white);
  background:
    linear-gradient(130deg, rgba(255,255,255,0.035), transparent 32%),
    radial-gradient(circle at 85% 12%, rgba(240,81,56,0.08), transparent 28%),
    var(--black);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.035) 18%, transparent 36%),
    radial-gradient(circle at 14% 18%, rgba(240,81,56,0.055), transparent 24%);
  opacity:0.95;
  animation:bgDrift 16s ease-in-out infinite alternate;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button, input, textarea { font:inherit; }
section[id] { scroll-margin-top:96px; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon {
  width:1.08em;
  height:1.08em;
  display:inline-block;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon use { pointer-events:none; }
.skip-link {
  position:fixed; top:12px; left:12px; z-index:2000;
  padding:10px 14px; border-radius:10px;
  background:#fff; color:#111; font-weight:800;
  transform:translateY(-180%); transition:transform 0.2s ease;
}
.skip-link:focus { transform:translateY(0); outline:none; box-shadow:var(--focus); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:none; box-shadow:var(--focus);
}

/* ===== NAV PILL ===== */
.nav-pill {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  background:rgba(22,22,22,0.82); backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid var(--border); border-radius:14px;
  padding:10px 16px; display:flex; gap:4px;
  z-index:1000; box-shadow:0 10px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  animation:navDrop 0.75s cubic-bezier(0.2,0.9,0.2,1) both;
}
.nav-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gray); font-size:1rem; transition:all 0.2s;
}
.nav-icon:hover { color:var(--white); background:rgba(255,255,255,0.075); transform:translateY(-1px); }
.nav-icon.active { color:var(--accent); background:var(--accent-light); box-shadow:inset 0 0 0 1px rgba(240,81,56,0.18), 0 10px 24px rgba(240,81,56,0.12); }

/* ===== PAGE WRAP ===== */
.page-wrap {
  display:flex; min-height:100vh;
  max-width:1380px; margin:0 auto; padding:32px 32px 32px 32px;
  gap:40px; align-items:flex-start;
}

/* ===== SIDEBAR ===== */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  position:sticky; top:32px;
}
.profile-card {
  background:
    radial-gradient(circle at 22% 0%, rgba(240,81,56,0.18), transparent 34%),
    linear-gradient(160deg, rgba(31,31,31,0.98), rgba(12,12,12,0.98) 58%, rgba(25,18,16,0.98));
  border:1px solid rgba(255,255,255,0.09);
  border-radius:28px;
  padding:16px; color:var(--white);
  position:relative; overflow:hidden;
  box-shadow:
    0 34px 90px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation:sidebarRise 0.85s cubic-bezier(0.2,0.9,0.2,1) both 0.08s;
}
.profile-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 28%),
    radial-gradient(circle at 78% 16%, rgba(255,255,255,0.08), transparent 20%);
  mix-blend-mode:screen;
}
.profile-card::before {
  content:''; position:absolute; inset:-60% -70%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.12) 50%, transparent 58%);
  transform:translateX(-35%) rotate(6deg);
  animation:cardSheen 7s ease-in-out infinite;
  pointer-events:none;
}
.profile-card > * { position:relative; z-index:1; }

/* Decorative arc */
.deco-arc {
  position:absolute; top:-104px; right:-96px;
  width:260px; height:260px; border-radius:50%;
  border:1px solid rgba(240,81,56,0.18); pointer-events:none;
}
.deco-arc::before {
  content:''; position:absolute; top:42px; left:42px;
  right:42px; bottom:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.07);
}

/* Avatar */
.avatar-frame {
  position:relative; width:100%; height:356px;
  margin:0 0 22px; border-radius:22px; overflow:hidden;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,0.42));
  animation:portraitFloat 6s ease-in-out infinite;
}
.avatar-frame::before {
  content:''; position:absolute; inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.72)),
    linear-gradient(135deg, rgba(240,81,56,0.18), transparent 44%);
  pointer-events:none;
}
.avatar-frame::after {
  content:'iOS'; position:absolute; left:16px; bottom:16px; z-index:3;
  border-radius:999px; padding:7px 11px;
  background:rgba(17,17,17,0.66);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff; font-size:0.68rem; font-weight:900; letter-spacing:0.14em;
  backdrop-filter:blur(14px);
}
.avatar-img {
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.12);
}
.avatar-ring {
  position:absolute; inset:10px; z-index:3; border-radius:18px;
  border:1px solid rgba(255,255,255,0.2); opacity:1; pointer-events:none;
  animation:ringBreath 4.5s ease-in-out infinite;
}
.avatar-ring::after {
  content:''; position:absolute; right:10px; bottom:10px;
  width:14px; height:14px; border-radius:50%;
  background:#22c55e;
  border:3px solid #111;
  box-shadow:0 0 0 6px rgba(34,197,94,0.12);
  animation:statusGlow 2.8s ease-in-out infinite;
}

.sidebar-name {
  font-size:2rem; font-weight:900; letter-spacing:-0.04em;
  color:#fff; text-align:left; line-height:1.02; margin:0 8px 16px;
}

.sidebar-divider {
  display:none;
}
.accent-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.divider-line { flex:1; max-width:74px; height:1px; background:linear-gradient(90deg, transparent, rgba(17,17,17,0.16), transparent); }

.sidebar-role {
  width:max-content;
  text-align:left; font-size:0.72rem; font-weight:900; letter-spacing:0.12em;
  text-transform:uppercase; color:#fff; margin:0 8px 14px;
  padding:7px 10px; border-radius:999px;
  background:rgba(240,81,56,0.16);
  border:1px solid rgba(240,81,56,0.24);
}
.sidebar-bio {
  text-align:left; font-size:0.9rem; color:#b8b8b8; line-height:1.65; margin:0 8px 22px;
}

/* Sidebar stats */
.sidebar-stats {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px; padding:8px; margin:0 0 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 34px rgba(0,0,0,0.18);
}
.sstat {
  min-width:0; text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.045));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:13px;
  padding:14px 10px 12px;
  box-shadow:0 12px 22px rgba(0,0,0,0.18);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sstat:hover {
  transform:translateY(-3px);
  border-color:rgba(240,81,56,0.28);
  box-shadow:0 16px 30px rgba(0,0,0,0.26);
}
.sstat strong {
  display:block; font-size:1.55rem; font-weight:900; color:#fff;
  letter-spacing:-0.04em; line-height:1;
}
.sstat span {
  display:block; margin-top:8px;
  font-size:0.62rem; color:#8f8f8f; text-transform:uppercase;
  letter-spacing:0.1em; font-weight:800;
}
.sstat-div { display:none; }

/* Sidebar CTA buttons */
.sidebar-links { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.sidebar-link-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 16px; border-radius:14px;
  font-size:0.88rem; font-weight:700; transition:opacity 0.2s, transform 0.2s;
  background:var(--accent); color:#fff;
  box-shadow:0 14px 28px rgba(240,81,56,0.24);
}
.sidebar-link-btn:hover { opacity:0.85; transform:translateY(-1px); }
.sidebar-link-btn.resume {
  background:#fff;
  color:#111;
  box-shadow:0 16px 34px rgba(255,255,255,0.1);
}
.sidebar-link-btn.outline {
  background:rgba(255,255,255,0.055); border:1.5px solid rgba(255,255,255,0.09); color:#e8e8e8;
  box-shadow:none;
}
.sidebar-link-btn.outline:hover { border-color:var(--accent); color:var(--accent); }

.sidebar-available {
  display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:0.8rem; color:#cfcfcf; font-weight:700;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(34,197,94,0.22);
  border-radius:999px;
  width:max-content;
  margin:0 auto;
  padding:8px 13px;
}
.avail-dot { width:8px; height:8px; background:#22c55e; border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.5);} }

/* ===== MAIN SCROLL ===== */
.main-scroll { flex:1; min-width:0; padding-top:0; }

/* ===== HERO ===== */
.hero-section { padding:80px 0 64px; border-bottom:1px solid var(--border); margin-bottom:0; }
.hero-label {
  display:inline-block; font-size:0.75rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:28px;
  animation:fadeLift 0.7s ease both 0.16s;
}
.hero-heading { margin-bottom:28px; }
.line-white  { display:block; font-size:clamp(3.5rem,7vw,6rem); font-weight:900; color:var(--white); line-height:0.92; letter-spacing:-0.03em; animation:fadeLift 0.8s ease both 0.24s; }
.line-outline { display:block; font-size:clamp(3.5rem,7vw,6rem); font-weight:900; line-height:0.92; letter-spacing:-0.03em;
  -webkit-text-stroke:2px var(--white); color:transparent; animation:fadeLift 0.8s ease both 0.34s; }
.line-accent  { display:block; font-size:clamp(3.5rem,7vw,6rem); font-weight:900; color:var(--accent); line-height:0.92; letter-spacing:-0.03em; animation:fadeLift 0.8s ease both 0.44s; }
.hero-desc { color:var(--gray); font-size:1.05rem; max-width:560px; line-height:1.7; margin-bottom:22px; animation:fadeLift 0.7s ease both 0.54s; }
.hero-highlights {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 34px;
  animation:fadeLift 0.7s ease both 0.58s;
}
.hero-highlights span {
  color:#d8d8d8;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:8px 12px;
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; animation:fadeLift 0.7s ease both 0.64s; }

/* Buttons */
.btn-accent {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff; padding:13px 28px;
  border-radius:12px; font-weight:700; font-size:0.95rem;
  transition:opacity 0.2s, transform 0.2s, box-shadow 0.2s; border:none; cursor:pointer;
  box-shadow:0 10px 28px rgba(240,81,56,0.24);
}
.btn-accent:hover { opacity:0.95; transform:translateY(-2px); box-shadow:0 14px 34px rgba(240,81,56,0.32); }
.btn-accent.full { width:100%; justify-content:center; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--white); padding:13px 28px;
  border-radius:12px; font-weight:700; font-size:0.95rem;
  border:1.5px solid var(--border); transition:border-color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color:var(--accent); background:var(--accent-light); transform:translateY(-2px); }

/* ===== CONTENT SECTIONS ===== */
.content-section { padding:72px 0; border-bottom:1px solid var(--border); }
.content-section:last-of-type { border-bottom:none; }
.section-tag {
  display:inline-block; background:var(--accent-light); border:1px solid var(--accent-light);
  color:var(--accent); padding:5px 14px; border-radius:20px;
  font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:16px;
  position:relative; overflow:hidden;
}
.section-tag::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
  transform:translateX(-120%);
  animation:tagSweep 4.8s ease-in-out infinite;
}
.section-heading { font-size:clamp(2rem,3.5vw,2.6rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:40px; }
.text-accent { color:var(--accent); }

/* ===== PROJECTS ===== */
.projects-list { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.project-card {
  display:flex; flex-direction:column; gap:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 34%),
    var(--card-dark);
  border:1px solid var(--border);
  border-radius:22px; overflow:hidden;
  transition:border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
  min-height:100%;
  will-change:transform;
  position:relative;
}
.project-card:hover { border-color:rgba(240,81,56,0.45); transform:translateY(-6px); box-shadow:0 24px 70px rgba(240, 81, 56, 0.14), 0 18px 45px rgba(0,0,0,0.25); background:#1d1d1d; }
.project-card::after, .skill-block::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.08), transparent 32%);
  transition:opacity 0.25s ease;
}
.project-card.is-tilting, .skill-block.is-tilting {
  transform:translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.project-card.is-tilting::after, .skill-block.is-tilting::after { opacity:1; }

.pc-thumb {
  position:relative; overflow:hidden;
  aspect-ratio:4/3; width:100%;
}
.pc-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s, filter 0.5s; }
.project-card:hover .pc-thumb img { transform:scale(1.05); }
.pc-overlay {
  position:absolute; inset:0; background:rgba(240, 81, 56, 0.85);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.9rem; color:#fff; gap:8px;
  opacity:0; transition:opacity 0.3s;
}
.project-card:hover .pc-overlay { opacity:1; }

.pc-body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pc-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.company-pill {
  font-size:0.72rem; font-weight:700; padding:4px 12px;
  border-radius:6px; letter-spacing:0.05em;
}
.company-pill.accent { background:var(--accent-light); color:var(--accent); }
.company-pill.white { background:rgba(255,255,255,0.08); color:var(--white); }
.pc-year { font-size:0.8rem; color:var(--gray); }
.pc-stars { font-size:0.8rem; color:#f59e0b; margin-left:auto; }
.pc-stars span { color:var(--gray); margin-left:4px; }
.pc-title { font-size:1.15rem; font-weight:800; letter-spacing:-0.01em; }
.pc-desc { color:var(--gray); font-size:0.88rem; line-height:1.6; flex:1; }
.pc-detail {
  color:#c9c9c9;
  font-size:0.82rem;
  line-height:1.65;
  margin-top:2px;
}
.project-screens {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin:10px 0 4px;
  padding:10px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border:1px solid rgba(255,255,255,0.07);
  overflow:hidden;
}
.project-screens img {
  width:100%;
  aspect-ratio:9/19.5;
  object-fit:cover;
  object-position:top center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 12px 26px rgba(0,0,0,0.24);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover .project-screens img { box-shadow:0 16px 34px rgba(0,0,0,0.3); }
.project-screens img:hover { transform:translateY(-4px) scale(1.03); }
.pc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.pc-tags span { background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--gray); padding:4px 10px; border-radius:6px; font-size:0.72rem; font-weight:500; }

/* ===== SKILLS ===== */
.skills-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.skill-block {
  background:var(--card-dark); border:1px solid var(--border);
  border-radius:18px; padding:28px;
  transition:border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position:relative; overflow:hidden;
}
.skill-block:hover { border-color:var(--accent-light); transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,0.22); }
.skill-block h3 { font-size:0.9rem; font-weight:700; margin-bottom:22px; display:flex; align-items:center; gap:10px; color:var(--white); }
.skill-block h3 .icon { color:var(--accent); font-size:1.05rem; }
.skill-bars { display:flex; flex-direction:column; gap:18px; }
.sbar-item {}
.sbar-top { display:flex; justify-content:space-between; font-size:0.85rem; font-weight:500; margin-bottom:8px; }
.sbar-top span:last-child { color:var(--gray); }
.sbar-track { height:5px; background:rgba(255,255,255,0.06); border-radius:10px; overflow:hidden; }
.sbar-fill { height:100%; background:var(--accent); border-radius:10px; width:0; transition:width 1.2s cubic-bezier(0.4,0,0.2,1); }
.skill-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.skill-cloud span { background:var(--accent-light); border:1px solid rgba(240, 81, 56, 0.2); color:var(--gray); padding:6px 14px; border-radius:8px; font-size:0.8rem; font-weight:500; transition:color 0.2s, border-color 0.2s; cursor:default; }
.skill-cloud span:hover { color:var(--accent); border-color:var(--accent); }

/* ===== TIMELINE ===== */
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:''; position:absolute; left:6px; top:8px; bottom:0; width:2px; background:linear-gradient(to bottom, var(--accent), transparent); }
.tl-item { position:relative; margin-bottom:40px; }
.tl-item:last-child { margin-bottom:0; }
.tl-dot { position:absolute; left:-28px; top:6px; width:14px; height:14px; background:var(--accent); border-radius:50%; border:3px solid var(--black); box-shadow:0 0 0 3px var(--accent-light); }
.tl-card { background:var(--card-dark); border:1px solid var(--border); border-radius:18px; padding:28px; transition:border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.tl-card:hover { border-color:var(--accent-light); transform:translateX(3px); }
.tl-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.tl-company { font-size:1.2rem; font-weight:800; letter-spacing:-0.01em; }
.tl-role { color:var(--accent); font-weight:600; font-size:0.88rem; margin-top:4px; }
.tl-period { background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--gray); padding:5px 14px; border-radius:8px; font-size:0.8rem; font-weight:600; white-space:nowrap; }
.tl-period.current { background:rgba(34,197,94,0.08); border-color:rgba(34,197,94,0.2); color:#22c55e; }
.tl-bullets { padding-left:16px; display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.tl-bullets li { color:var(--gray); font-size:0.9rem; line-height:1.6; position:relative; }
.tl-bullets li::before { content:'▸'; position:absolute; left:-16px; color:var(--accent); }
.tl-bullets strong { color:var(--white); }
.tl-tags { display:flex; flex-wrap:wrap; gap:8px; }
.tl-tags span { background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--gray2); padding:4px 12px; border-radius:6px; font-size:0.76rem; }

/* ===== CONTACT ===== */
.contact-sub { color:var(--gray); font-size:1rem; margin-bottom:36px; margin-top:-24px; }
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:32px; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:16px; }
.cinfo-card {
  display:flex; align-items:center; gap:16px;
  background:var(--card-dark); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px;
  transition:border-color 0.2s, transform 0.2s;
}
.cinfo-card:hover { border-color:var(--accent); transform:translateX(4px); }
.cinfo-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.email-icon { background:rgba(34,197,94,0.12); color:#22c55e; }
.resume-icon { background:rgba(255,255,255,0.1); color:var(--white); }
.cinfo-label { display:block; font-size:0.72rem; color:var(--gray); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:2px; }
.cinfo-val { display:block; font-weight:700; font-size:0.95rem; }
.cinfo-arrow { margin-left:auto; color:var(--gray); font-size:0.9rem; }

.contact-form { background:var(--card-dark); border:1px solid var(--border); border-radius:20px; padding:32px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.fg { margin-bottom:16px; }
.fg:last-of-type { margin-bottom:20px; }
.fg label { display:block; font-size:0.78rem; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.fg input, .fg textarea {
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px; color:var(--white);
  font-family:var(--font); font-size:0.92rem; outline:none;
  transition:border-color 0.2s; resize:vertical;
}
.fg input:focus, .fg textarea:focus { border-color:var(--accent); }
.fg input::placeholder, .fg textarea::placeholder { color:rgba(136,136,136,0.5); }
.form-ok { display:none; align-items:center; gap:10px; color:#22c55e; font-weight:600; font-size:0.9rem; margin-top:16px; }
.form-ok.show { display:flex; }

/* ===== FAB ===== */
.fab-stack { position:fixed; bottom:28px; right:32px; display:flex; flex-direction:column; gap:10px; z-index:100; }
.fab-btn {
  padding:11px 22px; border-radius:10px; font-weight:700; font-size:0.88rem;
  display:flex; align-items:center; gap:8px;
  transition:opacity 0.2s, transform 0.2s; box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.fab-btn:hover { opacity:0.85; transform:translateY(-2px); }
.fab-btn.accent { background:var(--accent); color:#fff; }
.fab-btn.white { background:#fff; color:#111; }

/* ===== FOOTER ===== */
.footer { padding:32px 0; text-align:center; }
.footer p { color:var(--gray2); font-size:0.83rem; }

/* ===== REVEAL ===== */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

@keyframes navDrop {
  from { opacity:0; transform:translate(-50%, -18px) scale(0.96); }
  to { opacity:1; transform:translate(-50%, 0) scale(1); }
}
@keyframes sidebarRise {
  from { opacity:0; transform:translateY(18px) scale(0.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes fadeLift {
  from { opacity:0; transform:translateY(18px); filter:blur(8px); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes portraitFloat {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
@keyframes ringBreath {
  0%, 100% { opacity:0.82; transform:scale(1); }
  50% { opacity:1; transform:scale(1.018); }
}
@keyframes statusGlow {
  0%, 100% { box-shadow:0 0 0 6px rgba(34,197,94,0.12); }
  50% { box-shadow:0 0 0 10px rgba(34,197,94,0.04); }
}
@keyframes cardSheen {
  0%, 68% { transform:translateX(-45%) rotate(6deg); opacity:0; }
  78% { opacity:0.55; }
  100% { transform:translateX(45%) rotate(6deg); opacity:0; }
}
@keyframes tagSweep {
  0%, 62% { transform:translateX(-120%); }
  100% { transform:translateX(120%); }
}
@keyframes bgDrift {
  from { transform:translate3d(-1%, -1%, 0) scale(1); }
  to { transform:translate3d(1%, 1%, 0) scale(1.04); }
}

/* ===== ORION AI CSS THUMB ===== */
.orion-thumb { background:#040d1a; min-height:220px; position:relative; overflow:hidden; }
.orion-art { position:absolute; inset:0; }
.orion-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,120,255,0.35) 0%, transparent 70%);
  animation:orionPulse 3s ease-in-out infinite;
}
@keyframes orionPulse { 0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.3);} }
.orion-star {
  position:absolute; border-radius:50%;
  background:#fff; box-shadow:0 0 8px 2px rgba(100,180,255,0.8);
}
.s1 { width:10px; height:10px; top:30%; left:25%; }
.s2 { width:8px;  height:8px;  top:22%; left:55%; }
.s3 { width:12px; height:12px; top:45%; left:65%; }
.s4 { width:7px;  height:7px;  top:62%; left:40%; }
.s5 { width:9px;  height:9px;  top:55%; left:20%; }
.orion-line {
  position:absolute; background:linear-gradient(90deg, transparent, rgba(100,180,255,0.4), transparent);
  height:1px; transform-origin:left center;
}
.l1 { top:calc(30% + 5px); left:calc(25% + 10px); width:120px; transform:rotate(12deg); }
.l2 { top:calc(45% + 6px); left:calc(55% + 8px); width:90px;  transform:rotate(35deg); }
.orion-label {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-family:var(--font); font-size:1.1rem; font-weight:900;
  letter-spacing:0.2em; color:#fff;
  text-shadow:0 0 20px rgba(100,180,255,0.9), 0 0 40px rgba(0,100,255,0.5);
}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px) {
  :root { --sidebar-w:280px; }
  .line-white, .line-outline, .line-accent { font-size:4.5rem; }
  .page-wrap { gap:28px; padding-left:24px; padding-right:24px; }
  .avatar-frame { height:310px; }
  .sidebar-name { font-size:1.62rem; }
}
@media (max-width:900px) {
  .page-wrap { flex-direction:column; padding:80px 20px 20px; }
  .sidebar { width:100%; position:relative; top:0; }
  .profile-card { display:block; max-width:420px; margin:0 auto; padding:18px; }
  .avatar-frame { width:min(100%, 340px); height:360px; margin:0 auto 22px; }
  .avatar-img { object-position:center 20%; }
  .sidebar-name { font-size:1.75rem; text-align:left; margin-top:0; }
  .sidebar-role, .sidebar-bio { text-align:left; }
  .sidebar-stats { margin-bottom:16px; }
  .fab-stack { display:none; }
  .skills-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .projects-list { grid-template-columns:1fr; }
  .pc-thumb { min-height:200px; aspect-ratio:16/9; }
  .hero-section { padding:48px 0 56px; }
  .content-section { padding:56px 0; }
}
@media (max-width:600px) {
  .line-white, .line-outline, .line-accent { font-size:3rem; }
  .nav-pill { top:12px; width:auto; max-width:calc(100% - 32px); justify-content:center; gap:3px; padding:8px 12px; border-radius:13px; }
  .nav-icon { width:36px; height:36px; }
  .page-wrap { padding-left:16px; padding-right:16px; }
  .hero-label { line-height:1.6; }
  .hero-highlights { gap:8px; margin-bottom:28px; }
  .hero-highlights span { width:100%; text-align:center; padding:8px 10px; }
  .hero-btns, .btn-accent, .btn-ghost { width:100%; justify-content:center; }
  .section-heading { margin-bottom:28px; }
  .form-row { grid-template-columns:1fr; }
  .tl-head { flex-direction:column; }
  .profile-card { grid-template-columns:1fr; }
  .avatar-frame { width:min(100%, 320px); height:350px; margin:0 auto 20px; }
  .avatar-img { object-position:center 18%; }
  .sidebar-name { font-size:1.85rem; }
  .sidebar-name, .sidebar-role, .sidebar-bio { text-align:left; }
  .sidebar-stats { padding:14px 4px; }
  .contact-form, .tl-card, .skill-block, .pc-body { padding:22px; }
  .project-screens { gap:6px; padding:8px; }
  .cinfo-card { align-items:flex-start; }
  .cinfo-val { word-break:break-word; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:0.01ms !important;
  }
}