/* =========================================================
   HIREME.AI - PREMIUM PORTFOLIO THEMES
   Loaded after style.css; overrides the base .pf styles.
   4 themes: Aurora (dark), Modern (violet), Minimal, Sunset.
   ========================================================= */

/* ---------- shared shell ---------- */
.pf { position: relative; overflow: hidden; container-type: inline-size; font-family: Inter, system-ui, sans-serif; min-height: 100%; }
.pf * { box-sizing: border-box; }

/* entrance animation for every section */
@keyframes pfUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.pf-hero, .pf-stats, .pf-card { animation: pfUp .6s cubic-bezier(.2,.7,.2,1) both; }
.pf-stats { animation-delay: .08s; }
.pf-main .pf-card:nth-child(1) { animation-delay: .12s; }
.pf-main .pf-card:nth-child(2) { animation-delay: .18s; }
.pf-main .pf-card:nth-child(3) { animation-delay: .24s; }
.pf-side .pf-card:nth-child(1) { animation-delay: .16s; }
.pf-side .pf-card:nth-child(2) { animation-delay: .22s; }
.pf-side .pf-card:nth-child(3) { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .pf-hero, .pf-stats, .pf-card { animation: none; } }

/* ---------- HERO ---------- */
.pf-hero { position: relative; z-index: 1; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; padding: 60px 44px 50px; }
.pf-ava {
  position: relative; z-index: 2; flex: none; width: 132px; height: 132px;
  border-radius: 26px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#7c3aed,#4c1d95);
}
.pf-ava img { width: 100%; height: 100%; object-fit: cover; }
.pf-hid { flex: 1 1 280px; min-width: 240px; position: relative; z-index: 2; }
.pf-eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.pf-hid h1 { font-size: clamp(2.1rem, 6cqw, 3.4rem); line-height: 1.02; margin: 0 0 8px; letter-spacing: -1.5px; font-weight: 900; }
.pf-role { font-size: clamp(1rem, 2.4cqw, 1.3rem); font-weight: 700; margin: 0 0 16px; }
.pf-contacts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .85rem; align-items: center; margin-bottom: 20px; }
.pf-contacts .pf-c { text-decoration: none; color: inherit; opacity: .9; display: inline-flex; align-items: center; gap: 5px; }
.pf-cta { display: flex; flex-wrap: wrap; gap: 11px; }
.pf-cta a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .85rem; padding: 11px 20px; border-radius: 12px; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.pf-cta a:hover { transform: translateY(-2px); }

/* ---------- STATS ---------- */
.pf-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; padding: 0 44px 8px; margin-top: -8px; }
.pf-stat { flex: 1 1 120px; border-radius: 16px; padding: 18px 20px; }
.pf-stat b { display: block; font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.pf-stat span { display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; opacity: .7; }

/* ---------- BODY GRID ---------- */
.pf-body { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 20px; padding: 26px 44px 30px; }
@container (min-width: 640px) { .pf-body { grid-template-columns: 1.7fr 1fr; align-items: start; } }
.pf-main, .pf-side { display: flex; flex-direction: column; gap: 20px; }
.pf-card { border-radius: 20px; padding: 26px; position: relative; }
.pf-card h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 18px; font-weight: 800; position: relative; padding-left: 16px; }
.pf-card h2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 16px; border-radius: 3px; background: currentColor; }
.pf-about { line-height: 1.75; margin: 0; font-size: .95rem; }

/* ---------- PROJECTS (equal-height cards, tech pinned bottom) ---------- */
.pf-projects { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@container (min-width: 560px) { .pf-projects { grid-template-columns: 1fr 1fr; } }
.pf-proj { border-radius: 16px; padding: 22px; transition: transform .18s ease, box-shadow .25s ease; display: flex; flex-direction: column; height: 100%; }
.pf-proj:hover { transform: translateY(-4px); }
.pf-proj-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pf-proj-num { font-size: 1.5rem; font-weight: 900; opacity: .22; letter-spacing: -1px; }
.pf-proj-ico { font-size: 1.2rem; }
.pf-proj b { display: block; font-size: 1.04rem; line-height: 1.3; margin-bottom: 9px; }
.pf-proj p { margin: 0 0 16px; font-size: .87rem; line-height: 1.6; opacity: .82; }
.pf-ptech { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.pf-ptech span { font-size: .68rem; font-weight: 700; padding: 5px 11px; border-radius: 7px; }

/* ---------- SKILLS / LANGUAGES chips ---------- */
.pf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pf-chips span { font-weight: 600; font-size: .82rem; padding: 8px 14px; border-radius: 10px; transition: transform .14s ease; cursor: default; }
.pf-chips span:hover { transform: translateY(-3px) scale(1.05); }

/* ---------- TIMELINE (single column, with bullets) ---------- */
.pf-timeline { position: relative; padding: 4px 0 4px 4px; }
.pf-timeline::before { content: ""; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; }
.pf-tl-item { position: relative; padding: 0 0 18px 38px; }
.pf-tl-item:last-child { padding-bottom: 0; }
.pf-tl-dot { position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; z-index: 2; }
.pf-tl-card { padding: 15px 18px; border-radius: 13px; transition: transform .15s ease, box-shadow .2s ease; }
.pf-tl-card:hover { transform: translateX(4px); }
.pf-tl-head { display: flex; align-items: flex-start; gap: 13px; }
.pf-tl-meta { min-width: 0; }
.pf-tl-ico { font-size: 1.15rem; flex: none; line-height: 1.4; }
.pf-tl-card b { display: block; font-size: 1rem; line-height: 1.3; margin-bottom: 4px; }
.pf-tl-co { display: block; font-size: .9rem; font-weight: 700; opacity: .9; }
.pf-tl-loc { display: block; font-size: .8rem; font-weight: 500; opacity: .7; margin-top: 3px; }
.pf-tl-period { display: block; font-size: .76rem; font-weight: 600; opacity: .6; margin-top: 5px; letter-spacing: .02em; }
.pf-tl-bullets { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(128,128,128,.14); list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pf-tl-bullets li { position: relative; padding-left: 18px; font-size: .85rem; line-height: 1.55; opacity: .88; }
.pf-tl-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg); background: currentColor; opacity: .55; }

/* ---------- TREE TIMELINE (alternating, full-width section) ---------- */
.pf-tree { position: relative; padding: 10px 0; }
.pf-tree::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.pf-tree .pf-tl-item { width: 50%; padding: 0 0 26px 0; }
.pf-tree .pf-tl-item.left { left: 0; padding-right: 38px; text-align: right; }
.pf-tree .pf-tl-item.right { left: 50%; padding-left: 38px; }
.pf-tree .pf-tl-dot { left: auto; top: 16px; }
.pf-tree .pf-tl-item.left .pf-tl-dot { right: -9px; left: auto; }
.pf-tree .pf-tl-item.right .pf-tl-dot { left: -9px; }
.pf-tree .pf-tl-item.left .pf-tl-head { flex-direction: row-reverse; }
.pf-tree .pf-tl-item.left .pf-tl-bullets { text-align: left; }
.pf-tree .pf-tl-card:hover { transform: translateY(-3px); }
@container (max-width: 620px) {
  .pf-tree::before { left: 11px; }
  .pf-tree .pf-tl-item, .pf-tree .pf-tl-item.left, .pf-tree .pf-tl-item.right { width: 100%; left: 0; padding: 0 0 18px 38px; text-align: left; }
  .pf-tree .pf-tl-item .pf-tl-dot { left: 4px; right: auto; top: 16px; }
  .pf-tree .pf-tl-item.left .pf-tl-head { flex-direction: row; }
}

/* ---------- EDUCATION / item ---------- */
.pf-item { padding: 12px 0; }
.pf-item:first-child { padding-top: 0; }
.pf-item:last-child { padding-bottom: 0; }
.pf-item + .pf-item { border-top: 1px solid rgba(128,128,128,.18); }
.pf-item b { display: block; font-size: .95rem; line-height: 1.3; }
.pf-item span { display: block; font-size: .85rem; margin-top: 4px; opacity: .75; }
.pf-bullets { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pf-bullets li { position: relative; padding-left: 16px; font-size: .85rem; line-height: 1.55; opacity: .9; }
.pf-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg); background: currentColor; opacity: .6; }

/* ---------- TREE TIMELINE WRAP (bottom section) ---------- */
.pf-tree-wrap { position: relative; z-index: 1; padding: 14px 44px 30px; }
.pf-tree-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; text-align: center; margin: 0 0 26px; }
@container (max-width: 560px) { .pf-tree-wrap { padding: 10px 24px 24px; } }

/* ---------- FOOTER ---------- */
.pf-foot2 { position: relative; z-index: 1; text-align: center; padding: 22px; font-size: .82rem; opacity: .6; }
.pf-foot2 b { font-weight: 800; }

/* ---------- BACKGROUND GRAPHICS ---------- */
.pf-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pf-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pf-orb { position: absolute; border-radius: 50%; filter: blur(46px); will-change: transform; }
.pf-orb.o1 { width: 320px; height: 320px; top: -120px; left: -80px; animation: pfFloat 9s ease-in-out infinite; }
.pf-orb.o2 { width: 240px; height: 240px; top: -40px; right: -60px; animation: pfFloat 12s ease-in-out infinite reverse; }
.pf-orb.o3 { width: 260px; height: 260px; bottom: -120px; left: 38%; animation: pfDrift 14s ease-in-out infinite; }
.pf-grid { position: absolute; inset: 0; background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 70% 22%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 70% 22%, #000, transparent 70%); }
@keyframes pfFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-22px) scale(1.08); } }
@keyframes pfDrift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-26px,16px); } }
@media (prefers-reduced-motion: reduce) { .pf-orb { animation: none; } }

/* =========================================================
   THEME · AURORA (dark, glassy, electric blue)
   ========================================================= */
.pf.tpl-aurora { background: radial-gradient(130% 90% at 12% -10%, #1b2b52 0%, #0d1228 50%, #070a16 100%); color: #e8edf7; }
.pf.tpl-aurora .pf-orb.o1 { background: #7c3aed; opacity: .55; }
.pf.tpl-aurora .pf-orb.o2 { background: #2563eb; opacity: .5; }
.pf.tpl-aurora .pf-orb.o3 { background: #db2777; opacity: .4; }
.pf.tpl-aurora .pf-grid { background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); }
.pf.tpl-aurora .pf-ava { border-radius: 26px; background: #131c34; border: 1px solid rgba(120,160,255,.25); box-shadow: 0 0 0 1px rgba(59,130,246,.3), 0 0 50px rgba(59,130,246,.45); animation: pfGlow 4s ease-in-out infinite; }
@keyframes pfGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(59,130,246,.3), 0 0 35px rgba(59,130,246,.35); } 50% { box-shadow: 0 0 0 1px rgba(59,130,246,.6), 0 0 60px rgba(59,130,246,.65); } }
.pf.tpl-aurora .pf-eyebrow { background: rgba(59,130,246,.16); color: #8fbaff; border: 1px solid rgba(59,130,246,.3); }
.pf.tpl-aurora .pf-hid h1 { color: #fff; background: linear-gradient(120deg,#fff 30%,#8fbaff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf.tpl-aurora .pf-role { color: #5b9dff; }
.pf.tpl-aurora .pf-cta a { background: rgba(255,255,255,.07); color: #dfe7f5; border: 1px solid rgba(255,255,255,.14); }
.pf.tpl-aurora .pf-cta a.primary { background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; border: 0; box-shadow: 0 10px 26px rgba(37,99,235,.45); }
.pf.tpl-aurora .pf-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.pf.tpl-aurora .pf-stat b { background: linear-gradient(120deg,#fff,#7cb0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf.tpl-aurora .pf-card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(6px); }
.pf.tpl-aurora .pf-card h2 { color: #5b9dff; }
.pf.tpl-aurora .pf-about { color: #c4cee2; }
.pf.tpl-aurora .pf-proj { background: rgba(13,20,40,.6); border: 1px solid rgba(120,160,255,.16); }
.pf.tpl-aurora .pf-proj:hover { box-shadow: 0 16px 40px rgba(37,99,235,.28); border-color: rgba(120,160,255,.4); }
.pf.tpl-aurora .pf-ptech span { background: rgba(59,130,246,.16); color: #9cc2ff; }
.pf.tpl-aurora .pf-chips span { background: rgba(59,130,246,.14); color: #9cc2ff; border: 1px solid rgba(59,130,246,.3); }
.pf.tpl-aurora .pf-timeline::before { background: linear-gradient(rgba(59,130,246,.5),rgba(219,39,119,.4)); }
.pf.tpl-aurora .pf-tl-dot { background: #3b82f6; border: 3px solid #0d1228; box-shadow: 0 0 0 2px rgba(59,130,246,.5); }
.pf.tpl-aurora .pf-tl-card { background: rgba(255,255,255,.045); border: 1px solid rgba(120,160,255,.16); }
.pf.tpl-aurora .pf-tl-card b { color: #fff; }
.pf.tpl-aurora .pf-item b { color: #fff; }

/* =========================================================
   THEME · MODERN (violet gradient hero)
   ========================================================= */
.pf.tpl-modern { background: #faf9fe; color: #1a1430; }
.pf.tpl-modern .pf-hero { background: linear-gradient(135deg,#7c3aed,#6d28d9 45%,#4c1d95); color: #fff; border-radius: 0 0 36px 36px; }
.pf.tpl-modern .pf-orb.o1 { background: #a855f7; opacity: .4; } .pf.tpl-modern .pf-orb.o2 { background: #22d3ee; opacity: .25; } .pf.tpl-modern .pf-orb.o3 { background: #ec4899; opacity: .3; }
.pf.tpl-modern .pf-grid { background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); }
.pf.tpl-modern .pf-ava { border-radius: 26px; background: #fff; color: #6d28d9; border: 4px solid rgba(255,255,255,.55); box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.pf.tpl-modern .pf-eyebrow { background: rgba(255,255,255,.2); color: #fff; }
.pf.tpl-modern .pf-hid h1 { color: #fff; }
.pf.tpl-modern .pf-role { color: #e9d5ff; }
.pf.tpl-modern .pf-contacts { color: #efe9ff; }
.pf.tpl-modern .pf-cta a { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.pf.tpl-modern .pf-cta a.primary { background: #fff; color: #6d28d9; border: 0; box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.pf.tpl-modern .pf-stats { margin-top: -32px; }
.pf.tpl-modern .pf-stat { background: #fff; border: 1px solid #ece7fb; box-shadow: 0 10px 28px rgba(76,29,149,.1); }
.pf.tpl-modern .pf-stat b { color: #6d28d9; }
.pf.tpl-modern .pf-card { background: #fff; border: 1px solid #ece7fb; box-shadow: 0 8px 24px rgba(28,16,64,.05); }
.pf.tpl-modern .pf-card h2 { color: #7c3aed; }
.pf.tpl-modern .pf-proj { background: #faf8ff; border: 1px solid #ece7fb; }
.pf.tpl-modern .pf-proj:hover { box-shadow: 0 16px 38px rgba(124,58,237,.16); }
.pf.tpl-modern .pf-ptech span { background: #f0ecfd; color: #6d28d9; }
.pf.tpl-modern .pf-chips span { background: #f0ecfd; color: #5b21b6; }
.pf.tpl-modern .pf-timeline::before { background: linear-gradient(#7c3aed,#c4b5fd); }
.pf.tpl-modern .pf-tl-dot { background: #7c3aed; border: 3px solid #faf9fe; box-shadow: 0 0 0 2px rgba(124,58,237,.35); }
.pf.tpl-modern .pf-tl-card { background: #faf8ff; border: 1px solid #ece7fb; }

/* =========================================================
   THEME · MINIMAL (clean, monochrome, editorial)
   ========================================================= */
.pf.tpl-minimal { background: #fff; color: #18181b; }
.pf.tpl-minimal .pf-orb { display: none; }
.pf.tpl-minimal .pf-grid { background-image: linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px); }
.pf.tpl-minimal .pf-hero { border-bottom: 1px solid #ececf0; padding-bottom: 40px; }
.pf.tpl-minimal .pf-ava { border-radius: 50%; background: #18181b; color: #fff; box-shadow: none; }
.pf.tpl-minimal .pf-ava img { border-radius: 50%; }
.pf.tpl-minimal .pf-eyebrow { background: #f4f4f5; color: #52525b; border: 1px solid #e4e4e7; }
.pf.tpl-minimal .pf-hid h1 { color: #18181b; }
.pf.tpl-minimal .pf-role { color: #52525b; }
.pf.tpl-minimal .pf-cta a { background: #f4f4f5; color: #18181b; border: 1px solid #e4e4e7; }
.pf.tpl-minimal .pf-cta a.primary { background: #18181b; color: #fff; border: 0; }
.pf.tpl-minimal .pf-stat { background: #fafafa; border: 1px solid #ececf0; }
.pf.tpl-minimal .pf-stat b { color: #18181b; }
.pf.tpl-minimal .pf-card { background: #fff; border: 1px solid #ececf0; }
.pf.tpl-minimal .pf-card h2 { color: #18181b; }
.pf.tpl-minimal .pf-proj { background: #fafafa; border: 1px solid #ececf0; }
.pf.tpl-minimal .pf-proj:hover { box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.pf.tpl-minimal .pf-ptech span { background: #f4f4f5; color: #3f3f46; }
.pf.tpl-minimal .pf-chips span { background: #f4f4f5; color: #27272a; }
.pf.tpl-minimal .pf-timeline::before { background: #d4d4d8; }
.pf.tpl-minimal .pf-tl-dot { background: #18181b; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
.pf.tpl-minimal .pf-tl-card { background: #fafafa; border: 1px solid #ececf0; }

/* =========================================================
   THEME · SUNSET (warm orange→pink, energetic)
   ========================================================= */
.pf.tpl-sunset { background: #fff7f3; color: #3a2218; }
.pf.tpl-sunset .pf-hero { background: linear-gradient(135deg,#fb923c,#f97316 45%,#db2777); color: #fff; border-radius: 0 0 36px 36px; }
.pf.tpl-sunset .pf-orb.o1 { background: #fbbf24; opacity: .4; } .pf.tpl-sunset .pf-orb.o2 { background: #fb7185; opacity: .35; } .pf.tpl-sunset .pf-orb.o3 { background: #f97316; opacity: .3; }
.pf.tpl-sunset .pf-grid { background-image: linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); }
.pf.tpl-sunset .pf-ava { border-radius: 28px; background: #fff; color: #db2777; border: 4px solid rgba(255,255,255,.55); box-shadow: 0 16px 40px rgba(219,39,119,.3); }
.pf.tpl-sunset .pf-eyebrow { background: rgba(255,255,255,.22); color: #fff; }
.pf.tpl-sunset .pf-hid h1 { color: #fff; }
.pf.tpl-sunset .pf-role { color: #ffe4d6; }
.pf.tpl-sunset .pf-contacts { color: #ffe9df; }
.pf.tpl-sunset .pf-cta a { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.32); }
.pf.tpl-sunset .pf-cta a.primary { background: #fff; color: #db2777; border: 0; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.pf.tpl-sunset .pf-stats { margin-top: -32px; }
.pf.tpl-sunset .pf-stat { background: #fff; border: 1px solid #fde0d2; box-shadow: 0 10px 28px rgba(219,39,119,.12); }
.pf.tpl-sunset .pf-stat b { color: #db2777; }
.pf.tpl-sunset .pf-card { background: #fff; border: 1px solid #fde0d2; box-shadow: 0 8px 24px rgba(219,39,119,.07); }
.pf.tpl-sunset .pf-card h2 { color: #db2777; }
.pf.tpl-sunset .pf-proj { background: #fff8f4; border: 1px solid #fde0d2; }
.pf.tpl-sunset .pf-proj:hover { box-shadow: 0 16px 38px rgba(219,39,119,.16); }
.pf.tpl-sunset .pf-ptech span { background: #fdeee6; color: #c2410c; }
.pf.tpl-sunset .pf-chips span { background: #fdeee6; color: #c2410c; }
.pf.tpl-sunset .pf-timeline::before { background: linear-gradient(#f97316,#db2777); }
.pf.tpl-sunset .pf-tl-dot { background: #db2777; border: 3px solid #fff7f3; box-shadow: 0 0 0 2px rgba(219,39,119,.35); }
.pf.tpl-sunset .pf-tl-card { background: #fff8f4; border: 1px solid #fde0d2; }

/* ---------- responsive ---------- */
@container (max-width: 560px) {
  .pf-hero { padding: 40px 24px 34px; gap: 20px; }
  .pf-stats, .pf-body { padding-left: 24px; padding-right: 24px; }
}

/* tree heading + line colors per theme */
.pf.tpl-aurora .pf-tree-h { color: #5b9dff; }
.pf.tpl-aurora .pf-tree::before { background: linear-gradient(rgba(59,130,246,.5),rgba(219,39,119,.4)); }
.pf.tpl-modern .pf-tree-h { color: #7c3aed; }
.pf.tpl-modern .pf-tree::before { background: linear-gradient(#7c3aed,#c4b5fd); }
.pf.tpl-minimal .pf-tree-h { color: #18181b; }
.pf.tpl-minimal .pf-tree::before { background: #d4d4d8; }
.pf.tpl-sunset .pf-tree-h { color: #db2777; }
.pf.tpl-sunset .pf-tree::before { background: linear-gradient(#f97316,#db2777); }

/* =========================================================
   THEME · NEURAL (AI - dark teal, node-network graphic)
   ========================================================= */
.pf.tpl-neural { background: radial-gradient(130% 90% at 12% -10%, #0c2b2a 0%, #07201f 50%, #04100f 100%); color: #d6f5ee; }
.pf.tpl-neural .pf-orb.o1 { background: #14b8a6; opacity: .5; }
.pf.tpl-neural .pf-orb.o2 { background: #22d3ee; opacity: .45; }
.pf.tpl-neural .pf-orb.o3 { background: #10b981; opacity: .4; }
/* node-dot "neural network" pattern instead of grid lines */
.pf.tpl-neural .pf-grid {
  background-image: radial-gradient(rgba(45,212,191,.28) 1.4px, transparent 1.6px),
                    radial-gradient(rgba(34,211,238,.18) 1.4px, transparent 1.6px);
  background-size: 26px 26px, 52px 52px;
  background-position: 0 0, 13px 13px;
}
.pf.tpl-neural .pf-ava { border-radius: 22px; background: #0a1f1e; border: 1px solid rgba(45,212,191,.3); box-shadow: 0 0 0 1px rgba(45,212,191,.35), 0 0 50px rgba(45,212,191,.4); animation: pfGlowN 4s ease-in-out infinite; }
@keyframes pfGlowN { 0%,100% { box-shadow: 0 0 0 1px rgba(45,212,191,.3), 0 0 30px rgba(45,212,191,.35); } 50% { box-shadow: 0 0 0 1px rgba(45,212,191,.65), 0 0 58px rgba(45,212,191,.6); } }
.pf.tpl-neural .pf-eyebrow { background: rgba(45,212,191,.15); color: #5eead4; border: 1px solid rgba(45,212,191,.3); }
.pf.tpl-neural .pf-hid h1 { color: #fff; background: linear-gradient(120deg,#fff 30%,#5eead4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf.tpl-neural .pf-role { color: #2dd4bf; }
.pf.tpl-neural .pf-cta a { background: rgba(255,255,255,.06); color: #d6f5ee; border: 1px solid rgba(255,255,255,.14); }
.pf.tpl-neural .pf-cta a.primary { background: linear-gradient(135deg,#14b8a6,#0d9488); color: #04100f; border: 0; box-shadow: 0 10px 26px rgba(20,184,166,.45); }
.pf.tpl-neural .pf-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(45,212,191,.18); }
.pf.tpl-neural .pf-stat b { background: linear-gradient(120deg,#fff,#5eead4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf.tpl-neural .pf-card { background: rgba(255,255,255,.04); border: 1px solid rgba(45,212,191,.16); backdrop-filter: blur(6px); }
.pf.tpl-neural .pf-card h2 { color: #2dd4bf; }
.pf.tpl-neural .pf-about { color: #b8e6dd; }
.pf.tpl-neural .pf-proj { background: rgba(8,32,31,.6); border: 1px solid rgba(45,212,191,.16); }
.pf.tpl-neural .pf-proj:hover { box-shadow: 0 16px 40px rgba(20,184,166,.28); border-color: rgba(45,212,191,.4); }
.pf.tpl-neural .pf-ptech span { background: rgba(45,212,191,.16); color: #7defd4; }
.pf.tpl-neural .pf-chips span { background: rgba(45,212,191,.13); color: #7defd4; border: 1px solid rgba(45,212,191,.3); }
.pf.tpl-neural .pf-timeline::before, .pf.tpl-neural .pf-tree::before { background: linear-gradient(#2dd4bf,#22d3ee); }
.pf.tpl-neural .pf-tl-dot { background: #2dd4bf; border: 3px solid #07201f; box-shadow: 0 0 0 2px rgba(45,212,191,.5); }
.pf.tpl-neural .pf-tl-card { background: rgba(255,255,255,.04); border: 1px solid rgba(45,212,191,.16); }
.pf.tpl-neural .pf-tl-card b, .pf.tpl-neural .pf-item b { color: #fff; }
.pf.tpl-neural .pf-tree-h { color: #2dd4bf; }

/* =========================================================
   THEME · CYBER (AI - neon violet/magenta, grid + scanline)
   ========================================================= */
.pf.tpl-cyber { background: radial-gradient(130% 90% at 85% -10%, #2a1052 0%, #160a2e 50%, #0a0518 100%); color: #ecdcff; }
.pf.tpl-cyber .pf-orb.o1 { background: #a855f7; opacity: .55; }
.pf.tpl-cyber .pf-orb.o2 { background: #ec4899; opacity: .45; }
.pf.tpl-cyber .pf-orb.o3 { background: #6366f1; opacity: .4; }
.pf.tpl-cyber .pf-grid {
  background-image: linear-gradient(rgba(168,85,247,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(236,72,153,.12) 1px, transparent 1px);
  background-size: 30px 30px;
}
.pf.tpl-cyber .pf-ava { border-radius: 20px; background: #1a0d33; border: 1px solid rgba(168,85,247,.35); box-shadow: 0 0 0 1px rgba(236,72,153,.35), 0 0 50px rgba(168,85,247,.45); animation: pfGlowC 4s ease-in-out infinite; }
@keyframes pfGlowC { 0%,100% { box-shadow: 0 0 0 1px rgba(236,72,153,.3), 0 0 30px rgba(168,85,247,.35); } 50% { box-shadow: 0 0 0 1px rgba(236,72,153,.6), 0 0 58px rgba(168,85,247,.6); } }
.pf.tpl-cyber .pf-eyebrow { background: rgba(168,85,247,.16); color: #d8b4fe; border: 1px solid rgba(168,85,247,.34); }
.pf.tpl-cyber .pf-hid h1 { color: #fff; background: linear-gradient(120deg,#fff 20%,#f0abfc,#a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf.tpl-cyber .pf-role { color: #e879f9; }
.pf.tpl-cyber .pf-cta a { background: rgba(255,255,255,.06); color: #ecdcff; border: 1px solid rgba(255,255,255,.14); }
.pf.tpl-cyber .pf-cta a.primary { background: linear-gradient(135deg,#a855f7,#ec4899); color: #fff; border: 0; box-shadow: 0 10px 26px rgba(168,85,247,.45); }
.pf.tpl-cyber .pf-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(168,85,247,.2); }
.pf.tpl-cyber .pf-stat b { background: linear-gradient(120deg,#fff,#e879f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf.tpl-cyber .pf-card { background: rgba(255,255,255,.04); border: 1px solid rgba(168,85,247,.18); backdrop-filter: blur(6px); }
.pf.tpl-cyber .pf-card h2 { color: #e879f9; }
.pf.tpl-cyber .pf-about { color: #d9c4f0; }
.pf.tpl-cyber .pf-proj { background: rgba(22,10,46,.6); border: 1px solid rgba(168,85,247,.18); }
.pf.tpl-cyber .pf-proj:hover { box-shadow: 0 16px 40px rgba(168,85,247,.3); border-color: rgba(236,72,153,.45); }
.pf.tpl-cyber .pf-ptech span { background: rgba(168,85,247,.16); color: #e9b8ff; }
.pf.tpl-cyber .pf-chips span { background: rgba(168,85,247,.14); color: #e9b8ff; border: 1px solid rgba(168,85,247,.32); }
.pf.tpl-cyber .pf-timeline::before, .pf.tpl-cyber .pf-tree::before { background: linear-gradient(#a855f7,#ec4899); }
.pf.tpl-cyber .pf-tl-dot { background: #d946ef; border: 3px solid #160a2e; box-shadow: 0 0 0 2px rgba(168,85,247,.5); }
.pf.tpl-cyber .pf-tl-card { background: rgba(255,255,255,.04); border: 1px solid rgba(168,85,247,.18); }
.pf.tpl-cyber .pf-tl-card b, .pf.tpl-cyber .pf-item b { color: #fff; }
.pf.tpl-cyber .pf-tree-h { color: #e879f9; }

/* =========================================================
   THEME · ROYAL (deep navy + gold - premium, executive)
   ========================================================= */
.pf.tpl-royal { background: radial-gradient(130% 90% at 50% -10%, #16244f 0%, #0d1733 50%, #070c1f 100%); color: #e8ecf7; }
.pf.tpl-royal .pf-orb.o1 { background: #fbbf24; opacity: .28; }
.pf.tpl-royal .pf-orb.o2 { background: #3b5bdb; opacity: .4; }
.pf.tpl-royal .pf-orb.o3 { background: #d4af37; opacity: .3; }
.pf.tpl-royal .pf-grid { background-image: linear-gradient(rgba(212,175,55,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,.08) 1px, transparent 1px); background-size: 32px 32px; }
.pf.tpl-royal .pf-ava { border-radius: 18px; background: #101a3a; border: 1px solid rgba(212,175,55,.45); box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 0 46px rgba(212,175,55,.3); color: #fbbf24; }
.pf.tpl-royal .pf-eyebrow { background: rgba(212,175,55,.14); color: #f5d77a; border: 1px solid rgba(212,175,55,.4); }
.pf.tpl-royal .pf-hid h1 { color: #fff; background: linear-gradient(120deg,#fff 35%,#f5d77a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf.tpl-royal .pf-role { color: #f5d77a; }
.pf.tpl-royal .pf-cta a { background: rgba(255,255,255,.06); color: #e8ecf7; border: 1px solid rgba(255,255,255,.14); }
.pf.tpl-royal .pf-cta a.primary { background: linear-gradient(135deg,#fbbf24,#d4af37); color: #1a1430; border: 0; box-shadow: 0 10px 26px rgba(212,175,55,.4); }
.pf.tpl-royal .pf-stat { background: rgba(255,255,255,.045); border: 1px solid rgba(212,175,55,.2); }
.pf.tpl-royal .pf-stat b { background: linear-gradient(120deg,#fff,#f5d77a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf.tpl-royal .pf-card { background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.16); backdrop-filter: blur(6px); }
.pf.tpl-royal .pf-card h2 { color: #f5d77a; }
.pf.tpl-royal .pf-about { color: #c7cfe4; }
.pf.tpl-royal .pf-proj { background: rgba(13,23,51,.6); border: 1px solid rgba(212,175,55,.16); }
.pf.tpl-royal .pf-proj:hover { box-shadow: 0 16px 40px rgba(212,175,55,.22); border-color: rgba(212,175,55,.4); }
.pf.tpl-royal .pf-ptech span { background: rgba(212,175,55,.14); color: #f0d488; }
.pf.tpl-royal .pf-chips span { background: rgba(212,175,55,.12); color: #f0d488; border: 1px solid rgba(212,175,55,.3); }
.pf.tpl-royal .pf-timeline::before, .pf.tpl-royal .pf-tree::before { background: linear-gradient(#fbbf24,#3b5bdb); }
.pf.tpl-royal .pf-tl-dot { background: #fbbf24; border: 3px solid #0d1733; box-shadow: 0 0 0 2px rgba(212,175,55,.5); }
.pf.tpl-royal .pf-tl-card { background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.16); }
.pf.tpl-royal .pf-tl-card b, .pf.tpl-royal .pf-item b { color: #fff; }
.pf.tpl-royal .pf-tree-h { color: #f5d77a; }

/* =========================================================
   PER-THEME PERSONALITY - distinct fonts, hero shapes,
   card geometry & decorative accents (not just colors)
   ========================================================= */

/* ---- AURORA: editorial Sora, centered hero, pill cards ---- */
.pf.tpl-aurora { font-family: 'Sora', Inter, sans-serif; }
.pf.tpl-aurora .pf-hero { flex-direction: column; text-align: center; align-items: center; padding-top: 70px; }
.pf.tpl-aurora .pf-hid { flex: none; }
.pf.tpl-aurora .pf-contacts, .pf.tpl-aurora .pf-cta { justify-content: center; }
.pf.tpl-aurora .pf-ava { width: 116px; height: 116px; border-radius: 50%; }
.pf.tpl-aurora .pf-card { border-radius: 22px; }
.pf.tpl-aurora .pf-proj { border-radius: 22px; }
.pf.tpl-aurora .pf-chips span { border-radius: 999px; }
.pf.tpl-aurora .pf-ptech span { border-radius: 999px; }

/* ---- NEURAL: Space Grotesk, side hero, hexagon-ish avatar, dotted dividers ---- */
.pf.tpl-neural { font-family: 'Space Grotesk', Inter, sans-serif; }
.pf.tpl-neural .pf-hid h1 { letter-spacing: -2px; }
.pf.tpl-neural .pf-ava { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.pf.tpl-neural .pf-card { border-radius: 14px; border-left: 3px solid #2dd4bf; }
.pf.tpl-neural .pf-card h2::before { display: none; }
.pf.tpl-neural .pf-card h2 { padding-left: 0; }
.pf.tpl-neural .pf-proj { border-radius: 14px; border-left: 3px solid rgba(45,212,191,.5); }
.pf.tpl-neural .pf-chips span, .pf.tpl-neural .pf-ptech span { border-radius: 6px; }
.pf.tpl-neural .pf-proj-num { font-family: 'JetBrains Mono', monospace; }

/* ---- CYBER: JetBrains Mono headings, terminal vibe, sharp corners, scanline ---- */
.pf.tpl-cyber .pf-eyebrow, .pf.tpl-cyber .pf-hid h1, .pf.tpl-cyber .pf-role,
.pf.tpl-cyber .pf-card h2, .pf.tpl-cyber .pf-proj-num, .pf.tpl-cyber .pf-stat b,
.pf.tpl-cyber .pf-tree-h { font-family: 'JetBrains Mono', monospace; }
.pf.tpl-cyber .pf-hid h1 { letter-spacing: -1px; }
.pf.tpl-cyber .pf-eyebrow::before { content: "> "; }
.pf.tpl-cyber .pf-ava { border-radius: 6px; }
.pf.tpl-cyber .pf-card, .pf.tpl-cyber .pf-proj, .pf.tpl-cyber .pf-stat,
.pf.tpl-cyber .pf-tl-card { border-radius: 4px; }
.pf.tpl-cyber .pf-chips span, .pf.tpl-cyber .pf-ptech span { border-radius: 3px; font-family: 'JetBrains Mono', monospace; }
.pf.tpl-cyber .pf-card h2::before { width: 8px; height: 8px; border-radius: 0; }
/* animated scanline overlay */
.pf.tpl-cyber .pf-bg::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(168,85,247,.05) 0 2px, transparent 2px 4px); }

/* ---- ROYAL: Playfair serif headings, gold hairline frames, centered crest hero ---- */
.pf.tpl-royal .pf-hid h1, .pf.tpl-royal .pf-card h2, .pf.tpl-royal .pf-tree-h,
.pf.tpl-royal .pf-proj b, .pf.tpl-royal .pf-tl-card b { font-family: 'Playfair Display', Georgia, serif; }
.pf.tpl-royal .pf-hero { flex-direction: column; text-align: center; align-items: center; padding-top: 66px; }
.pf.tpl-royal .pf-hid { flex: none; }
.pf.tpl-royal .pf-contacts, .pf.tpl-royal .pf-cta { justify-content: center; }
.pf.tpl-royal .pf-hid h1 { font-weight: 800; letter-spacing: 0; }
.pf.tpl-royal .pf-eyebrow { letter-spacing: .3em; border-radius: 0; border-left: 0; border-right: 0; background: transparent; border-top: 1px solid rgba(212,175,55,.5); border-bottom: 1px solid rgba(212,175,55,.5); padding: 6px 16px; }
.pf.tpl-royal .pf-ava { border-radius: 50%; border: 2px solid #d4af37; }
.pf.tpl-royal .pf-card { border-radius: 6px; border: 1px solid rgba(212,175,55,.28); }
.pf.tpl-royal .pf-card h2 { padding-left: 0; letter-spacing: .15em; }
.pf.tpl-royal .pf-card h2::before { display: none; }
.pf.tpl-royal .pf-card h2 { border-bottom: 1px solid rgba(212,175,55,.25); padding-bottom: 12px; }
.pf.tpl-royal .pf-proj { border-radius: 6px; }
.pf.tpl-royal .pf-chips span, .pf.tpl-royal .pf-ptech span { border-radius: 3px; }

/* ---- MODERN: big rounded violet hero, soft shadows, rounded cards ---- */
.pf.tpl-modern .pf-hid h1 { letter-spacing: -1.5px; }
.pf.tpl-modern .pf-ava { border-radius: 24px; }
.pf.tpl-modern .pf-card, .pf.tpl-modern .pf-proj { border-radius: 22px; }
.pf.tpl-modern .pf-chips span, .pf.tpl-modern .pf-ptech span { border-radius: 999px; }

/* ---- MINIMAL: serif-free, hairline dividers, no card fills, lots of white ---- */
.pf.tpl-minimal { font-family: 'Inter', sans-serif; }
.pf.tpl-minimal .pf-hero { flex-direction: column; align-items: flex-start; text-align: left; padding-bottom: 32px; }
.pf.tpl-minimal .pf-hid h1 { font-weight: 800; letter-spacing: -2px; font-size: clamp(2.4rem,7cqw,3.8rem); }
.pf.tpl-minimal .pf-card { background: transparent !important; border: 0 !important; border-top: 1px solid #ececf0 !important; border-radius: 0; padding: 24px 0; box-shadow: none !important; }
.pf.tpl-minimal .pf-side .pf-card, .pf.tpl-minimal .pf-main .pf-card { padding-left: 0; padding-right: 0; }
.pf.tpl-minimal .pf-card h2::before { display: none; }
.pf.tpl-minimal .pf-card h2 { padding-left: 0; }
.pf.tpl-minimal .pf-proj { border-radius: 0; border: 0; border-top: 2px solid #18181b; background: transparent; padding: 18px 0; }
.pf.tpl-minimal .pf-proj:hover { transform: none; opacity: .75; }
.pf.tpl-minimal .pf-stat { background: transparent; border: 0; border-left: 2px solid #18181b; border-radius: 0; padding: 4px 0 4px 16px; }
.pf.tpl-minimal .pf-chips span, .pf.tpl-minimal .pf-ptech span { border-radius: 0; background: transparent; border: 1px solid #d4d4d8; }
.pf.tpl-minimal .pf-tl-card { background: transparent; border: 0; border-left: 2px solid #ececf0; border-radius: 0; }

/* ---- SUNSET: Space Grotesk, bold gradient hero, big rounded cards, playful ---- */
.pf.tpl-sunset { font-family: 'Space Grotesk', Inter, sans-serif; }
.pf.tpl-sunset .pf-hero { flex-direction: column; text-align: center; align-items: center; }
.pf.tpl-sunset .pf-hid { flex: none; }
.pf.tpl-sunset .pf-contacts, .pf.tpl-sunset .pf-cta { justify-content: center; }
.pf.tpl-sunset .pf-hid h1 { letter-spacing: -1.5px; }
.pf.tpl-sunset .pf-ava { border-radius: 28px; }
.pf.tpl-sunset .pf-card, .pf.tpl-sunset .pf-proj { border-radius: 24px; }
.pf.tpl-sunset .pf-chips span, .pf.tpl-sunset .pf-ptech span { border-radius: 999px; }

/* ---- inline contact/meta icons (always render, theme-colored) ---- */
.pf-ico { flex: none; vertical-align: -2px; margin-right: 5px; opacity: .85; }
.pf-contacts .pf-c { display: inline-flex; align-items: center; }
.pf-tl-loc { display: inline-flex !important; align-items: center; }

/* ---- experience header: never let bullets sit beside the heading ---- */
.pf-tl-card { display: block !important; }
.pf-tl-head { display: flex !important; align-items: flex-start; gap: 13px; }
.pf-tl-meta { min-width: 0; flex: 1; }
.pf-tl-card b { white-space: normal; word-break: break-word; }

/* =========================================================
   ANIMATED BACKGROUND - drifting aurora beams + floating particles
   ========================================================= */
.pf-bg { z-index: 0; }
.pf-bg::before { animation: pfBeam 16s ease-in-out infinite alternate !important; }
.pf-bg::after  { animation: pfBeam2 20s ease-in-out infinite alternate !important; }
@keyframes pfBeam  { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(60px,40px) rotate(25deg); } }
@keyframes pfBeam2 { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(-50px,-30px) rotate(-20deg); } }

/* floating particles layer */
.pf-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, currentColor 1.5px, transparent 2px),
    radial-gradient(circle, currentColor 1px, transparent 1.5px);
  background-size: 70px 70px, 110px 110px;
  background-position: 0 0, 35px 35px;
  opacity: .05;
  animation: pfParticles 22s linear infinite;
}
@keyframes pfParticles { from { background-position: 0 0, 35px 35px; } to { background-position: 70px 140px, 145px 215px; } }
@media (prefers-reduced-motion: reduce) {
  .pf-bg::before, .pf-bg::after, .pf-hero::after { animation: none !important; }
}

/* ===== Pricing + order form ===== */
.pb-price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: 0 auto; align-items: start; }
@media (max-width: 720px) { .pb-price-wrap { grid-template-columns: 1fr; } }
.pb-price-card { position: relative; background: var(--grad-brand); color: #fff; border-radius: 22px; padding: 30px 28px; box-shadow: 0 18px 44px rgba(76,29,149,.28); }
.pb-price-tag { display: inline-block; background: rgba(255,255,255,.2); color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.pb-price-card h3 { color: #fff; margin: 0 0 8px; font-size: 1.2rem; }
.pb-price { font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: 18px; }
.pb-price .cur { font-size: 1.4rem; vertical-align: super; }
.pb-price .per { font-size: .85rem; font-weight: 600; opacity: .85; margin-left: 8px; }
.pb-price-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pb-price-list li { font-size: .92rem; opacity: .95; }
.pb-order { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: 0 10px 30px rgba(28,16,64,.07); }
.pb-order h4 { margin: 0 0 4px; font-size: 1.1rem; }

/* ===== UPI order QR + retrieve box ===== */
.ord-qr { text-align: center; margin: 8px 0 12px; }
.ord-qr img { width: 200px; height: 200px; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 8px; }
.ord-upi { text-align: center; font-size: .92rem; background: #faf9fe; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.ord-upi b { color: var(--violet-600); }
.ord-retrieve { max-width: 560px; margin: 26px auto 0; background: #fff; border: 1px dashed var(--line); border-radius: 18px; padding: 24px; }
.ord-retrieve h4 { margin: 0 0 4px; }

/* ===== Finalize: lead capture box ===== */
.pb-lead { background: linear-gradient(135deg,#f4f0ff,#faf9fe); border: 1.5px solid #e3d9fb; border-radius: 16px; padding: 18px; }
.pb-actions .btn { flex: 1; justify-content: center; min-width: 180px; }

/* =========================================================
   NEW PREMIUM THEMES - glass · mono · forest · mocha · coral
   Each = distinct palette + layout + typography (not recolors)
   ========================================================= */

/* ---- GLASS: light frosted glassmorphism, indigo+cyan, centered ---- */
.pf.tpl-glass { background: linear-gradient(150deg,#eef2ff 0%,#f4f0ff 38%,#e8fbff 100%); color: #27305b; font-family: 'Sora', Inter, sans-serif; }
.pf.tpl-glass .pf-orb.o1 { background:#818cf8; opacity:.34 } .pf.tpl-glass .pf-orb.o2 { background:#22d3ee; opacity:.3 } .pf.tpl-glass .pf-orb.o3 { background:#c084fc; opacity:.3 }
.pf.tpl-glass .pf-grid { background-image:linear-gradient(rgba(99,102,241,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.05) 1px,transparent 1px); }
.pf.tpl-glass .pf-hero { flex-direction:column; text-align:center; align-items:center; padding-top:66px; }
.pf.tpl-glass .pf-hid { flex:none } .pf.tpl-glass .pf-contacts,.pf.tpl-glass .pf-cta { justify-content:center }
.pf.tpl-glass .pf-ava { width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.6); color:#6366f1; border:1px solid rgba(255,255,255,.85); backdrop-filter:blur(8px); box-shadow:0 12px 40px rgba(99,102,241,.28); }
.pf.tpl-glass .pf-eyebrow { background:rgba(255,255,255,.55); color:#4f46e5; border:1px solid rgba(255,255,255,.85); backdrop-filter:blur(6px); }
.pf.tpl-glass .pf-hid h1 { color:#1e2350; background:linear-gradient(120deg,#4f46e5,#06b6d4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pf.tpl-glass .pf-role { color:#6366f1 }
.pf.tpl-glass .pf-cta a { background:rgba(255,255,255,.5); color:#3730a3; border:1px solid rgba(255,255,255,.85); backdrop-filter:blur(6px); }
.pf.tpl-glass .pf-cta a.primary { background:linear-gradient(135deg,#6366f1,#06b6d4); color:#fff; border:0; box-shadow:0 10px 26px rgba(99,102,241,.4); }
.pf.tpl-glass .pf-stat { background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(8px); border-radius:18px; }
.pf.tpl-glass .pf-stat b { color:#4f46e5 }
.pf.tpl-glass .pf-card { background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(12px); border-radius:22px; box-shadow:0 10px 36px rgba(99,102,241,.1); }
.pf.tpl-glass .pf-card h2 { color:#4f46e5 } .pf.tpl-glass .pf-about { color:#3b4374 }
.pf.tpl-glass .pf-proj { background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.7); border-radius:18px; }
.pf.tpl-glass .pf-proj:hover { box-shadow:0 16px 40px rgba(99,102,241,.2) }
.pf.tpl-glass .pf-ptech span { background:rgba(99,102,241,.12); color:#4338ca; border-radius:999px; }
.pf.tpl-glass .pf-chips span { background:rgba(255,255,255,.55); color:#3730a3; border:1px solid rgba(255,255,255,.85); border-radius:999px; }
.pf.tpl-glass .pf-timeline::before,.pf.tpl-glass .pf-tree::before { background:linear-gradient(#6366f1,#06b6d4) }
.pf.tpl-glass .pf-tl-dot { background:#6366f1; border:3px solid #eef2ff; box-shadow:0 0 0 2px rgba(99,102,241,.35) }
.pf.tpl-glass .pf-tl-card { background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.8); border-radius:14px; backdrop-filter:blur(8px); }
.pf.tpl-glass .pf-tl-card b,.pf.tpl-glass .pf-item b { color:#1e2350 }
.pf.tpl-glass .pf-tree-h { color:#4f46e5 }

/* ---- MONO: neo-brutalist black/white + electric blue, hard offset shadows ---- */
.pf.tpl-mono { background:#f4f4f0; color:#0a0a0a; font-family:Inter,sans-serif; }
.pf.tpl-mono .pf-orb { display:none }
.pf.tpl-mono .pf-grid { background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px); background-size:26px 26px; }
.pf.tpl-mono .pf-hero { flex-direction:column; align-items:flex-start; text-align:left; padding-bottom:34px; border-bottom:3px solid #0a0a0a; }
.pf.tpl-mono .pf-ava { border-radius:0; background:#0a0a0a; color:#fff; border:3px solid #0a0a0a; box-shadow:7px 7px 0 #2563eb; }
.pf.tpl-mono .pf-eyebrow { background:#2563eb; color:#fff; border:2px solid #0a0a0a; border-radius:0; box-shadow:3px 3px 0 #0a0a0a; font-family:'JetBrains Mono',monospace; }
.pf.tpl-mono .pf-hid h1 { color:#0a0a0a; font-weight:900; letter-spacing:-2px; }
.pf.tpl-mono .pf-role { color:#2563eb; font-weight:800 }
.pf.tpl-mono .pf-cta a { background:#fff; color:#0a0a0a; border:2px solid #0a0a0a; border-radius:0; box-shadow:4px 4px 0 #0a0a0a; font-weight:800; }
.pf.tpl-mono .pf-cta a:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #0a0a0a; }
.pf.tpl-mono .pf-cta a.primary { background:#2563eb; color:#fff; }
.pf.tpl-mono .pf-stat { background:#fff; border:2px solid #0a0a0a; border-radius:0; box-shadow:5px 5px 0 #0a0a0a; }
.pf.tpl-mono .pf-stat b { color:#0a0a0a } .pf.tpl-mono .pf-stat span { font-family:'JetBrains Mono',monospace }
.pf.tpl-mono .pf-card { background:#fff; border:2px solid #0a0a0a; border-radius:0; box-shadow:6px 6px 0 #0a0a0a; }
.pf.tpl-mono .pf-card h2 { color:#0a0a0a; font-family:'JetBrains Mono',monospace; } .pf.tpl-mono .pf-card h2::before { background:#2563eb; border-radius:0; }
.pf.tpl-mono .pf-about { color:#27272a }
.pf.tpl-mono .pf-proj { background:#fff; border:2px solid #0a0a0a; border-radius:0; box-shadow:5px 5px 0 #0a0a0a; }
.pf.tpl-mono .pf-proj:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 #2563eb; }
.pf.tpl-mono .pf-proj-num { font-family:'JetBrains Mono',monospace; opacity:.3 }
.pf.tpl-mono .pf-ptech span { background:#0a0a0a; color:#fff; border-radius:0; font-family:'JetBrains Mono',monospace; }
.pf.tpl-mono .pf-chips span { background:#fff; color:#0a0a0a; border:2px solid #0a0a0a; border-radius:0; }
.pf.tpl-mono .pf-timeline::before,.pf.tpl-mono .pf-tree::before { background:#0a0a0a; width:3px }
.pf.tpl-mono .pf-tl-dot { background:#2563eb; border:3px solid #0a0a0a; border-radius:0 }
.pf.tpl-mono .pf-tl-card { background:#fff; border:2px solid #0a0a0a; border-radius:0; box-shadow:4px 4px 0 #0a0a0a; }
.pf.tpl-mono .pf-tl-card b,.pf.tpl-mono .pf-item b { color:#0a0a0a }
.pf.tpl-mono .pf-tree-h { color:#0a0a0a; font-family:'JetBrains Mono',monospace }

/* ---- FOREST: botanical cream + sage/emerald, Playfair serif, centered ---- */
.pf.tpl-forest { background:#f6f4ec; color:#26352b; font-family:Inter,sans-serif; }
.pf.tpl-forest .pf-orb.o1 { background:#4d7c5a; opacity:.22 } .pf.tpl-forest .pf-orb.o2 { background:#a3b18a; opacity:.3 } .pf.tpl-forest .pf-orb.o3 { background:#6b9080; opacity:.22 }
.pf.tpl-forest .pf-grid { background-image:linear-gradient(rgba(77,124,90,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(77,124,90,.06) 1px,transparent 1px); }
.pf.tpl-forest .pf-hero { flex-direction:column; text-align:center; align-items:center; padding-top:64px; }
.pf.tpl-forest .pf-hid { flex:none } .pf.tpl-forest .pf-contacts,.pf.tpl-forest .pf-cta { justify-content:center }
.pf.tpl-forest .pf-ava { border-radius:50%; background:#2f5740; color:#eaf2ec; border:3px solid #cdd9c4; box-shadow:0 14px 36px rgba(47,87,64,.25); }
.pf.tpl-forest .pf-eyebrow { background:transparent; color:#3a6b4c; border-radius:0; border-top:1px solid rgba(58,107,76,.5); border-bottom:1px solid rgba(58,107,76,.5); letter-spacing:.28em; }
.pf.tpl-forest .pf-hid h1 { color:#26352b; font-family:'Playfair Display',Georgia,serif; font-weight:800; letter-spacing:0; }
.pf.tpl-forest .pf-role { color:#3a6b4c; font-style:italic }
.pf.tpl-forest .pf-cta a { background:#eef1e7; color:#2f5740; border:1px solid #d2dcc8; }
.pf.tpl-forest .pf-cta a.primary { background:linear-gradient(135deg,#3a6b4c,#2f5740); color:#fff; border:0; box-shadow:0 10px 26px rgba(47,87,64,.3); }
.pf.tpl-forest .pf-stat { background:#fbfaf5; border:1px solid #e0e4d4; }
.pf.tpl-forest .pf-stat b { color:#2f5740; font-family:'Playfair Display',serif }
.pf.tpl-forest .pf-card { background:#fbfaf5; border:1px solid #e0e4d4; border-radius:14px; box-shadow:0 8px 24px rgba(38,53,43,.05); }
.pf.tpl-forest .pf-card h2 { color:#3a6b4c; font-family:'Playfair Display',serif; padding-left:0; border-bottom:1px solid #e0e4d4; padding-bottom:10px; } .pf.tpl-forest .pf-card h2::before { display:none }
.pf.tpl-forest .pf-about { color:#3d4d42 }
.pf.tpl-forest .pf-proj { background:#fff; border:1px solid #e0e4d4; border-radius:12px; }
.pf.tpl-forest .pf-proj:hover { box-shadow:0 16px 36px rgba(47,87,64,.14) }
.pf.tpl-forest .pf-proj b { font-family:'Playfair Display',serif }
.pf.tpl-forest .pf-ptech span { background:#e7efe2; color:#2f5740 }
.pf.tpl-forest .pf-chips span { background:#e7efe2; color:#2f5740; border:1px solid #d2dcc8 }
.pf.tpl-forest .pf-timeline::before,.pf.tpl-forest .pf-tree::before { background:linear-gradient(#3a6b4c,#a3b18a) }
.pf.tpl-forest .pf-tl-dot { background:#3a6b4c; border:3px solid #f6f4ec; box-shadow:0 0 0 2px rgba(58,107,76,.3) }
.pf.tpl-forest .pf-tl-card { background:#fbfaf5; border:1px solid #e0e4d4; border-radius:12px }
.pf.tpl-forest .pf-tl-card b { font-family:'Playfair Display',serif } .pf.tpl-forest .pf-item b { color:#26352b }
.pf.tpl-forest .pf-tree-h { color:#3a6b4c; font-family:'Playfair Display',serif }

/* ---- MOCHA: warm taupe + espresso/bronze, Playfair serif, editorial left ---- */
.pf.tpl-mocha { background:#f2ece4; color:#3b2f28; font-family:Inter,sans-serif; }
.pf.tpl-mocha .pf-orb.o1 { background:#b08d57; opacity:.26 } .pf.tpl-mocha .pf-orb.o2 { background:#c9a987; opacity:.3 } .pf.tpl-mocha .pf-orb.o3 { background:#8c6a4f; opacity:.22 }
.pf.tpl-mocha .pf-grid { background-image:linear-gradient(rgba(176,141,87,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(176,141,87,.07) 1px,transparent 1px); }
.pf.tpl-mocha .pf-hero { flex-direction:column; align-items:flex-start; text-align:left; }
.pf.tpl-mocha .pf-ava { border-radius:16px; background:#3b2f28; color:#e9c79b; border:3px solid #d8c4ad; box-shadow:0 14px 36px rgba(59,47,40,.25); }
.pf.tpl-mocha .pf-eyebrow { background:rgba(176,141,87,.16); color:#8a6a44; border:1px solid rgba(176,141,87,.4); letter-spacing:.24em; }
.pf.tpl-mocha .pf-hid h1 { color:#2c241f; font-family:'Playfair Display',Georgia,serif; font-weight:800; letter-spacing:-.5px; }
.pf.tpl-mocha .pf-role { color:#a07a4a; font-style:italic }
.pf.tpl-mocha .pf-cta a { background:#ece2d5; color:#5a463a; border:1px solid #ddccb8; }
.pf.tpl-mocha .pf-cta a.primary { background:linear-gradient(135deg,#b08d57,#8c6a4f); color:#fff; border:0; box-shadow:0 10px 26px rgba(140,106,79,.32); }
.pf.tpl-mocha .pf-stat { background:#faf6f0; border:1px solid #e6dac9; }
.pf.tpl-mocha .pf-stat b { color:#8c6a4f; font-family:'Playfair Display',serif }
.pf.tpl-mocha .pf-card { background:#faf6f0; border:1px solid #e6dac9; border-radius:10px; box-shadow:0 8px 24px rgba(59,47,40,.05); }
.pf.tpl-mocha .pf-card h2 { color:#8c6a4f; font-family:'Playfair Display',serif; padding-left:0; letter-spacing:.12em; } .pf.tpl-mocha .pf-card h2::before { display:none }
.pf.tpl-mocha .pf-about { color:#54453b }
.pf.tpl-mocha .pf-proj { background:#fff; border:1px solid #e6dac9; border-radius:10px }
.pf.tpl-mocha .pf-proj:hover { box-shadow:0 16px 36px rgba(140,106,79,.16) }
.pf.tpl-mocha .pf-proj b { font-family:'Playfair Display',serif }
.pf.tpl-mocha .pf-ptech span { background:#efe6d8; color:#8a6a44 }
.pf.tpl-mocha .pf-chips span { background:#efe6d8; color:#7a5d3e; border:1px solid #ddccb8 }
.pf.tpl-mocha .pf-timeline::before,.pf.tpl-mocha .pf-tree::before { background:linear-gradient(#b08d57,#8c6a4f) }
.pf.tpl-mocha .pf-tl-dot { background:#b08d57; border:3px solid #f2ece4; box-shadow:0 0 0 2px rgba(176,141,87,.3) }
.pf.tpl-mocha .pf-tl-card { background:#faf6f0; border:1px solid #e6dac9; border-radius:10px }
.pf.tpl-mocha .pf-tl-card b { font-family:'Playfair Display',serif } .pf.tpl-mocha .pf-item b { color:#2c241f }
.pf.tpl-mocha .pf-tree-h { color:#8c6a4f; font-family:'Playfair Display',serif }

/* ---- CORAL: playful light peach + coral->indigo hero, Space Grotesk, rounded ---- */
.pf.tpl-coral { background:#fff5f1; color:#3a2530; font-family:'Space Grotesk',Inter,sans-serif; }
.pf.tpl-coral .pf-hero { background:linear-gradient(135deg,#ff7a59,#ff5a8a 55%,#7c5cff); color:#fff; border-radius:0 0 40px 40px; flex-direction:column; text-align:center; align-items:center; }
.pf.tpl-coral .pf-orb.o1 { background:#ffd6a5; opacity:.4 } .pf.tpl-coral .pf-orb.o2 { background:#a5b4ff; opacity:.3 } .pf.tpl-coral .pf-orb.o3 { background:#ff8fab; opacity:.3 }
.pf.tpl-coral .pf-grid { background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); }
.pf.tpl-coral .pf-hid { flex:none } .pf.tpl-coral .pf-contacts,.pf.tpl-coral .pf-cta { justify-content:center; color:#fff }
.pf.tpl-coral .pf-ava { border-radius:28px; background:#fff; color:#ff5a7a; border:4px solid rgba(255,255,255,.6); box-shadow:0 16px 40px rgba(124,92,255,.3); }
.pf.tpl-coral .pf-eyebrow { background:rgba(255,255,255,.24); color:#fff }
.pf.tpl-coral .pf-hid h1 { color:#fff; letter-spacing:-1.5px } .pf.tpl-coral .pf-role { color:#ffe3d6 }
.pf.tpl-coral .pf-cta a { background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.34) }
.pf.tpl-coral .pf-cta a.primary { background:#fff; color:#ff5a7a; border:0; box-shadow:0 10px 26px rgba(0,0,0,.18) }
.pf.tpl-coral .pf-stats { margin-top:-32px }
.pf.tpl-coral .pf-stat { background:#fff; border:1px solid #ffe0d4; border-radius:20px; box-shadow:0 10px 28px rgba(255,90,122,.12) }
.pf.tpl-coral .pf-stat b { color:#ff5a7a }
.pf.tpl-coral .pf-card { background:#fff; border:1px solid #ffe0d4; border-radius:24px; box-shadow:0 8px 24px rgba(124,92,255,.06) }
.pf.tpl-coral .pf-card h2 { color:#ff5a7a }
.pf.tpl-coral .pf-about { color:#5a4550 }
.pf.tpl-coral .pf-proj { background:#fff8f5; border:1px solid #ffe0d4; border-radius:22px }
.pf.tpl-coral .pf-proj:hover { box-shadow:0 16px 38px rgba(124,92,255,.16) }
.pf.tpl-coral .pf-ptech span { background:#ffe9e0; color:#e0466a; border-radius:999px }
.pf.tpl-coral .pf-chips span { background:#efe9ff; color:#5b46c9; border-radius:999px }
.pf.tpl-coral .pf-timeline::before,.pf.tpl-coral .pf-tree::before { background:linear-gradient(#ff5a8a,#7c5cff) }
.pf.tpl-coral .pf-tl-dot { background:#ff5a7a; border:3px solid #fff5f1; box-shadow:0 0 0 2px rgba(255,90,122,.3) }
.pf.tpl-coral .pf-tl-card { background:#fff8f5; border:1px solid #ffe0d4; border-radius:18px }
.pf.tpl-coral .pf-tl-card b,.pf.tpl-coral .pf-item b { color:#3a2530 }
.pf.tpl-coral .pf-tree-h { color:#ff5a7a }

/* ---- picker swatches for the new themes ---- */
.sw-glass { background:linear-gradient(135deg,#818cf8,#22d3ee) }
.sw-mono { background:linear-gradient(135deg,#0a0a0a 50%,#2563eb 50%) }
.sw-forest { background:linear-gradient(135deg,#3a6b4c,#a3b18a) }
.sw-mocha { background:linear-gradient(135deg,#b08d57,#3b2f28) }
.sw-coral { background:linear-gradient(135deg,#ff7a59,#7c5cff) }

/* =========================================================
   PREMIUM ALTERNATING CAREER TIMELINE
   connectors into cards · glowing pulse nodes · spine year-pills
   ========================================================= */
.pf-tree { padding: 22px 0 10px; }
.pf-tree .pf-tl-item { padding-bottom: 42px; }
.pf-tree .pf-tl-period { display: none; }            /* shown as a spine pill instead */
.pf-tree .pf-tl-card { position: relative; animation: pfUp .6s cubic-bezier(.2,.7,.2,1) both; transition: transform .22s ease, box-shadow .28s ease; }
.pf-tree .pf-tl-card:hover { transform: translateY(-5px); }

/* glowing node + animated pulse ring */
.pf-tree .pf-tl-dot { top: 34px; width: 16px; height: 16px; z-index: 4; }
.pf-tree .pf-tl-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: pfRing 2.8s ease-out infinite; }
@keyframes pfRing { 0% { transform: scale(.55); opacity: .45; } 100% { transform: scale(1.9); opacity: 0; } }

/* year pill centered on the spine */
.pf-tree .pf-tl-year { position: absolute; top: 2px; z-index: 5; white-space: nowrap; font-size: .7rem; font-weight: 800; letter-spacing: .03em; padding: 5px 13px; border-radius: 999px; background: rgba(127,127,127,.14); border: 1px solid rgba(127,127,127,.28); backdrop-filter: blur(4px); }
.pf-tree .pf-tl-item.left .pf-tl-year { right: 0; transform: translateX(50%); }
.pf-tree .pf-tl-item.right .pf-tl-year { left: 0; transform: translateX(-50%); }

/* connector line from spine into each card */
.pf-tree .pf-tl-card::after { content: ""; position: absolute; top: 38px; width: 30px; height: 2px; background: currentColor; opacity: .35; }
.pf-tree .pf-tl-item.left .pf-tl-card::after { right: -38px; }
.pf-tree .pf-tl-item.right .pf-tl-card::after { left: -38px; }

@container (max-width: 620px) {
  .pf-tree .pf-tl-year { position: static !important; transform: none !important; display: inline-block; margin: 0 0 9px; }
  .pf-tree .pf-tl-card::after { display: none; }
  .pf-tree .pf-tl-dot { top: 30px; }
}

/* =========================================================
   3D-ANIMATED THEME · HOLO (holographic neon + perspective grid floor)
   ========================================================= */
.pf.tpl-holo { background: radial-gradient(120% 80% at 50% -10%, #2a1a55 0%, #140d2e 45%, #08040f 100%); color: #e9e3ff; font-family: 'Space Grotesk', Inter, sans-serif; }
.pf.tpl-holo .pf-orb.o1 { background:#ff5edb; opacity:.4 } .pf.tpl-holo .pf-orb.o2 { background:#5ee7ff; opacity:.38 } .pf.tpl-holo .pf-orb.o3 { background:#a855f7; opacity:.4 }
.pf.tpl-holo .pf-grid {
  background-image: linear-gradient(rgba(120,200,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,110,220,.3) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(transparent 42%, #000 100%); mask-image: linear-gradient(transparent 42%, #000 100%);
  transform: perspective(420px) rotateX(62deg) scale(2.2); transform-origin: 50% 100%;
  animation: pfGridFloor 6s linear infinite;
}
@keyframes pfGridFloor { from { background-position: 0 0; } to { background-position: 0 44px; } }
.pf.tpl-holo .pf-ava { border-radius: 20px; background:#1a1140; border:1px solid rgba(190,140,255,.4); box-shadow: 0 0 0 1px rgba(94,231,255,.4), 0 0 50px rgba(168,85,247,.5); }
.pf.tpl-holo .pf-eyebrow { background: rgba(168,85,247,.16); color:#d8b4fe; border:1px solid rgba(168,85,247,.4); }
.pf.tpl-holo .pf-hid h1 { background: linear-gradient(90deg,#ff8ae2,#8ab4ff,#6ffcff,#ff8ae2); background-size: 300% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation: pfHueShift 5s linear infinite; }
@keyframes pfHueShift { to { background-position: 300% center; } }
.pf.tpl-holo .pf-role { color:#6ffcff }
.pf.tpl-holo .pf-cta a { background: rgba(255,255,255,.06); color:#e9e3ff; border:1px solid rgba(255,255,255,.16); }
.pf.tpl-holo .pf-cta a.primary { background: linear-gradient(135deg,#ff5edb,#a855f7,#5ee7ff); background-size:200% auto; color:#fff; border:0; box-shadow:0 10px 30px rgba(168,85,247,.5); animation: pfHueShift 5s linear infinite; }
.pf.tpl-holo .pf-stat { background: rgba(255,255,255,.05); border:1px solid rgba(190,140,255,.22); }
.pf.tpl-holo .pf-stat b { background: linear-gradient(120deg,#ff8ae2,#6ffcff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pf.tpl-holo .pf-card { background: rgba(22,14,48,.55); border:1px solid rgba(190,140,255,.22); backdrop-filter: blur(8px); border-radius:16px; }
.pf.tpl-holo .pf-card h2 { color:#6ffcff }
.pf.tpl-holo .pf-about { color:#d6cdf5 }
.pf.tpl-holo .pf-proj { background: rgba(12,8,30,.55); border:1px solid rgba(190,140,255,.22); border-radius:14px; }
.pf.tpl-holo .pf-proj:hover { box-shadow:0 16px 44px rgba(168,85,247,.4); border-color:rgba(94,231,255,.5); }
.pf.tpl-holo .pf-ptech span { background: rgba(94,231,255,.14); color:#aef0ff; }
.pf.tpl-holo .pf-chips span { background: rgba(168,85,247,.16); color:#e3c8ff; border:1px solid rgba(168,85,247,.34); }
.pf.tpl-holo .pf-timeline::before, .pf.tpl-holo .pf-tree::before { background: linear-gradient(#ff5edb,#5ee7ff); }
.pf.tpl-holo .pf-tl-dot { background:#5ee7ff; border:3px solid #140d2e; box-shadow:0 0 0 2px rgba(255,94,219,.5); }
.pf.tpl-holo .pf-tl-card { background: rgba(22,14,48,.55); border:1px solid rgba(190,140,255,.22); }
.pf.tpl-holo .pf-tl-card b, .pf.tpl-holo .pf-item b { color:#fff }
.pf.tpl-holo .pf-tree-h { color:#6ffcff }

/* =========================================================
   3D-ANIMATED THEME · DEPTH (frosted glass, 3D tilt on hover)
   ========================================================= */
.pf.tpl-depth { background: linear-gradient(160deg,#eaf0fb 0%,#eef1f8 50%,#e7ecf6 100%); color:#1f2a44; font-family:'Sora', Inter, sans-serif; }
.pf.tpl-depth .pf-orb.o1 { background:#7aa2ff; opacity:.28 } .pf.tpl-depth .pf-orb.o2 { background:#9d7aff; opacity:.26 } .pf.tpl-depth .pf-orb.o3 { background:#6fd6ff; opacity:.24 }
.pf.tpl-depth .pf-grid { background-image: linear-gradient(rgba(80,110,180,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(80,110,180,.05) 1px,transparent 1px); }
.pf.tpl-depth .pf-hero { flex-direction:column; text-align:center; align-items:center; padding-top:64px; }
.pf.tpl-depth .pf-hid { flex:none } .pf.tpl-depth .pf-contacts, .pf.tpl-depth .pf-cta { justify-content:center }
.pf.tpl-depth .pf-ava { width:124px; height:124px; border-radius:28px; background: rgba(255,255,255,.7); color:#4f6bd8; border:1px solid rgba(255,255,255,.9); backdrop-filter: blur(10px); box-shadow:0 20px 50px rgba(79,107,216,.3), 0 4px 12px rgba(0,0,0,.06); }
.pf.tpl-depth .pf-eyebrow { background: rgba(255,255,255,.65); color:#4f6bd8; border:1px solid rgba(255,255,255,.9); backdrop-filter: blur(6px); }
.pf.tpl-depth .pf-hid h1 { color:#1f2a44 } .pf.tpl-depth .pf-role { color:#4f6bd8 }
.pf.tpl-depth .pf-cta a { background: rgba(255,255,255,.6); color:#2e3a5c; border:1px solid rgba(255,255,255,.9); backdrop-filter: blur(6px); box-shadow:0 6px 18px rgba(79,107,216,.14); }
.pf.tpl-depth .pf-cta a.primary { background: linear-gradient(135deg,#5a7bff,#7c5cff); color:#fff; border:0; box-shadow:0 12px 30px rgba(90,123,255,.42); }
.pf.tpl-depth .pf-stat { background: rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9); backdrop-filter: blur(10px); border-radius:18px; box-shadow:0 12px 30px rgba(79,107,216,.12); }
.pf.tpl-depth .pf-stat b { color:#4f6bd8 }
.pf.tpl-depth .pf-body, .pf.tpl-depth .pf-projects { perspective: 1100px; }
.pf.tpl-depth .pf-card { background: rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.92); backdrop-filter: blur(14px); border-radius:20px; box-shadow:0 18px 44px rgba(50,70,130,.13), 0 3px 10px rgba(0,0,0,.05); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; transform-style: preserve-3d; }
.pf.tpl-depth .pf-card:hover { transform: translateY(-6px) rotateX(3deg); box-shadow:0 30px 60px rgba(50,70,130,.2); }
.pf.tpl-depth .pf-card h2 { color:#4f6bd8 } .pf.tpl-depth .pf-about { color:#3a4663 }
.pf.tpl-depth .pf-proj { background: rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); border-radius:16px; box-shadow:0 10px 26px rgba(50,70,130,.1); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.pf.tpl-depth .pf-proj:hover { transform: perspective(800px) translateY(-5px) rotateX(5deg); box-shadow:0 24px 50px rgba(90,123,255,.22); }
.pf.tpl-depth .pf-ptech span { background: rgba(90,123,255,.12); color:#3f51b5; }
.pf.tpl-depth .pf-chips span { background: rgba(255,255,255,.65); color:#3949ab; border:1px solid rgba(255,255,255,.9); }
.pf.tpl-depth .pf-timeline::before, .pf.tpl-depth .pf-tree::before { background: linear-gradient(#5a7bff,#7c5cff); }
.pf.tpl-depth .pf-tl-dot { background:#5a7bff; border:3px solid #eef1f8; box-shadow:0 0 0 2px rgba(90,123,255,.35); }
.pf.tpl-depth .pf-tl-card { background: rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9); border-radius:16px; backdrop-filter: blur(10px); }
.pf.tpl-depth .pf-tl-card b, .pf.tpl-depth .pf-item b { color:#1f2a44 }
.pf.tpl-depth .pf-tree-h { color:#4f6bd8 }

/* =========================================================
   3D-ANIMATED THEME · GEO (floating geometry, dark space)
   ========================================================= */
.pf.tpl-geo { background: radial-gradient(120% 80% at 80% -10%, #102a3a 0%, #0a1626 48%, #050a14 100%); color:#d8e6f5; font-family:'Space Grotesk', Inter, sans-serif; }
.pf.tpl-geo .pf-orb.o1 { background:#22d3ee; opacity:.4 } .pf.tpl-geo .pf-orb.o2 { background:#818cf8; opacity:.38 } .pf.tpl-geo .pf-orb.o3 { background:#2dd4bf; opacity:.34 }
.pf.tpl-geo .pf-grid { background-image: linear-gradient(rgba(94,231,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(129,140,248,.06) 1px,transparent 1px); background-size:38px 38px; }
.pf.tpl-geo .pf-fx::before { content:""; position:absolute; top:12%; right:9%; width:120px; height:120px; border:2px solid rgba(94,231,255,.35); border-radius:24px; box-shadow:0 0 30px rgba(94,231,255,.18) inset; animation: pfGeoA 16s ease-in-out infinite; }
.pf.tpl-geo .pf-fx::after { content:""; position:absolute; bottom:16%; left:8%; width:92px; height:92px; border:2px solid rgba(168,85,247,.4); border-radius:50%; box-shadow:0 0 26px rgba(168,85,247,.2) inset; animation: pfGeoB 20s ease-in-out infinite; }
@keyframes pfGeoA { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-28px) rotate(180deg); } }
@keyframes pfGeoB { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(24px) rotate(-150deg); } }
.pf.tpl-geo .pf-ava { border-radius:18px; background:#0d2030; border:1px solid rgba(94,231,255,.4); box-shadow:0 0 0 1px rgba(129,140,248,.35), 0 0 46px rgba(34,211,238,.4); }
.pf.tpl-geo .pf-eyebrow { background: rgba(34,211,238,.14); color:#7fe7f5; border:1px solid rgba(34,211,238,.34); }
.pf.tpl-geo .pf-hid h1 { color:#fff; background: linear-gradient(120deg,#fff 30%,#7fe7f5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pf.tpl-geo .pf-role { color:#818cf8 }
.pf.tpl-geo .pf-cta a { background: rgba(255,255,255,.06); color:#d8e6f5; border:1px solid rgba(255,255,255,.15); }
.pf.tpl-geo .pf-cta a.primary { background: linear-gradient(135deg,#22d3ee,#6366f1); color:#04121a; border:0; box-shadow:0 10px 28px rgba(34,211,238,.4); }
.pf.tpl-geo .pf-stat { background: rgba(255,255,255,.05); border:1px solid rgba(94,231,255,.2); }
.pf.tpl-geo .pf-stat b { background: linear-gradient(120deg,#fff,#7fe7f5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pf.tpl-geo .pf-card { background: rgba(10,22,38,.55); border:1px solid rgba(94,231,255,.18); backdrop-filter: blur(7px); border-radius:16px; }
.pf.tpl-geo .pf-card h2 { color:#7fe7f5 } .pf.tpl-geo .pf-about { color:#b9cde2 }
.pf.tpl-geo .pf-proj { background: rgba(8,18,32,.55); border:1px solid rgba(94,231,255,.18); border-radius:14px; transition: transform .25s ease, box-shadow .25s ease; }
.pf.tpl-geo .pf-proj:hover { transform: translateY(-5px) rotate(-1deg); box-shadow:0 18px 44px rgba(34,211,238,.3); border-color:rgba(129,140,248,.5); }
.pf.tpl-geo .pf-ptech span { background: rgba(34,211,238,.14); color:#9af0ff; }
.pf.tpl-geo .pf-chips span { background: rgba(129,140,248,.16); color:#c4c9ff; border:1px solid rgba(129,140,248,.34); }
.pf.tpl-geo .pf-timeline::before, .pf.tpl-geo .pf-tree::before { background: linear-gradient(#22d3ee,#6366f1); }
.pf.tpl-geo .pf-tl-dot { background:#22d3ee; border:3px solid #0a1626; box-shadow:0 0 0 2px rgba(129,140,248,.5); }
.pf.tpl-geo .pf-tl-card { background: rgba(10,22,38,.55); border:1px solid rgba(94,231,255,.18); }
.pf.tpl-geo .pf-tl-card b, .pf.tpl-geo .pf-item b { color:#fff }
.pf.tpl-geo .pf-tree-h { color:#7fe7f5 }

/* swatches */
.sw-holo { background: linear-gradient(135deg,#ff5edb,#5ee7ff) }
.sw-depth { background: linear-gradient(135deg,#5a7bff,#7c5cff) }
.sw-geo { background: linear-gradient(135deg,#22d3ee,#6366f1) }
.sw-nova { background: radial-gradient(circle at 30% 30%, #22d3ee, #8b5cf6 60%, #05060f); box-shadow: 0 0 6px rgba(34,211,238,.9) }

/* ===== per-theme accent for the timeline year-pills ===== */
.pf.tpl-aurora  .pf-tl-year { background:rgba(59,130,246,.16); color:#9cc2ff; border-color:rgba(59,130,246,.4) }
.pf.tpl-modern  .pf-tl-year { background:#f0ecfd; color:#6d28d9; border-color:#d8c9f7 }
.pf.tpl-minimal .pf-tl-year { background:#f4f4f5; color:#18181b; border-color:#d4d4d8 }
.pf.tpl-sunset  .pf-tl-year { background:#fde6ef; color:#db2777; border-color:#f6b8d2 }
.pf.tpl-neural  .pf-tl-year { background:rgba(45,212,191,.16); color:#7defd4; border-color:rgba(45,212,191,.4) }
.pf.tpl-cyber   .pf-tl-year { background:rgba(168,85,247,.18); color:#e9b8ff; border-color:rgba(168,85,247,.4) }
.pf.tpl-royal   .pf-tl-year { background:rgba(212,175,55,.16); color:#f0d488; border-color:rgba(212,175,55,.4) }
.pf.tpl-glass   .pf-tl-year { background:rgba(99,102,241,.14); color:#4338ca; border-color:rgba(99,102,241,.35) }
.pf.tpl-mono    .pf-tl-year { background:#2563eb; color:#fff; border:2px solid #0a0a0a; border-radius:0; box-shadow:3px 3px 0 #0a0a0a }
.pf.tpl-forest  .pf-tl-year { background:#e7efe2; color:#2f5740; border-color:#cdd9c4 }
.pf.tpl-mocha   .pf-tl-year { background:#efe6d8; color:#8a6a44; border-color:#ddccb8 }
.pf.tpl-coral   .pf-tl-year { background:#ffe9e0; color:#e0466a; border-color:#ffcdbb }
.pf.tpl-holo    .pf-tl-year { background:rgba(94,231,255,.15); color:#aef0ff; border-color:rgba(94,231,255,.4) }
.pf.tpl-depth   .pf-tl-year { background:rgba(90,123,255,.14); color:#3f51b5; border-color:rgba(90,123,255,.32) }
.pf.tpl-geo     .pf-tl-year { background:rgba(34,211,238,.15); color:#9af0ff; border-color:rgba(34,211,238,.4) }

/* =========================================================
   NOVA - a FULL CUSTOM LAYOUT (its own structure, not a recolour).
   Sticky nav / hero with typed role + circled word / work / lab /
   about band / contact. Classes are pfx-* so the downloader picks
   them up (it grabs every rule starting with ".pf").
   ========================================================= */
.pfx { font-family:'Poppins',Inter,system-ui,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
.pfx *, .pfx *::before, .pfx *::after { box-sizing:border-box }
.pfx a { color:inherit; text-decoration:none }
.pfx img { max-width:100%; display:block }
.pfx-wrap { width:100%; max-width:1080px; margin:0 auto; padding:0 34px }
.pfx-dim { color:#8d81a6; font-size:.82rem }

.pfx-nova { background:#110720; color:#fff; overflow-x:hidden }

/* --- sticky nav --- */
.pfx-nova .pfx-nav { position:sticky; top:0; z-index:50; background:rgba(17,7,32,.85); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.09) }
.pfx-nova .pfx-nav .pfx-wrap { display:flex; align-items:center; gap:20px; height:68px }
.pfx-brand { font-weight:600; font-size:1.05rem; letter-spacing:-.01em }
.pfx-brand i { color:#a855f7; font-style:normal }
.pfx-navlinks { margin-left:auto; display:flex; gap:26px }
.pfx-navlinks a { font-size:.9rem; color:#b3a8c9; transition:color .2s }
.pfx-navlinks a:hover { color:#fff }

/* --- hero --- */
.pfx-nova .pfx-hero { padding:80px 0 62px; position:relative; overflow:hidden }
.pfx-nova .pfx-hero::before { content:""; position:absolute; top:-230px; left:50%; transform:translateX(-50%); width:780px; height:560px; background:radial-gradient(circle,rgba(124,58,237,.34),transparent 62%); filter:blur(14px); pointer-events:none }
.pfx-hgrid { position:relative; display:grid; grid-template-columns:236px 1fr; gap:54px; align-items:center }
.pfx-orb { width:208px; height:208px; margin:0 auto; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:4.2rem; font-weight:600; color:#fff; background:radial-gradient(circle at 50% 38%,#5b21b6,#1b0f31 72%); box-shadow:0 0 0 1px rgba(168,85,247,.35), 0 0 90px 10px rgba(124,58,237,.45) }
.pfx-orb img { width:100%; height:100%; object-fit:cover }
.pfx-hi { color:#b3a8c9; font-size:1rem; margin:0 0 12px }
.pfx-hi b { color:#a855f7; font-weight:600 }
.pfx-nova h1 { font-size:clamp(2.1rem,4.6vw,3.7rem); line-height:1.08; font-weight:600; letter-spacing:-.02em; margin:0 0 14px; color:#fff }
.pfx-mark { position:relative; color:#a855f7; white-space:nowrap }
.pfx-mark::after { content:""; position:absolute; inset:-12% -8%; border:2px solid rgba(168,85,247,.75); border-radius:50%; transform:rotate(-3deg) }
.pfx-typed { font-size:1.02rem; color:#b3a8c9; min-height:1.7em; margin:0 0 16px; font-family:'JetBrains Mono',monospace }
.pfx-cur { display:inline-block; width:2px; height:1.05em; background:#a855f7; vertical-align:-2px; margin-left:3px; animation:pfxBlink 1s step-end infinite }
@keyframes pfxBlink { 50%{ opacity:0 } }
.pfx-lede { color:#b3a8c9; max-width:58ch; margin:0 0 24px; font-size:.96rem }
.pfx-cta { display:flex; gap:12px; flex-wrap:wrap }
.pfx-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px; font-size:.92rem; font-weight:500; transition:transform .16s, box-shadow .16s, border-color .16s, color .16s }
.pfx-btn.p { background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; box-shadow:0 10px 30px rgba(124,58,237,.4) }
.pfx-btn.p:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(124,58,237,.58) }
.pfx-btn.g { border:1px solid rgba(255,255,255,.11); color:#b3a8c9 }
.pfx-btn.g:hover { border-color:#a855f7; color:#fff }

/* --- stat pills --- */
.pfx-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px }
.pfx-pill { border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:9px 20px; font-size:.85rem; color:#b3a8c9; background:rgba(255,255,255,.02) }
.pfx-pill b { color:#fff; font-weight:600 }

/* --- sections --- */
.pfx-sec { padding:76px 0 }
.pfx-h2 { text-align:center; font-size:clamp(1.8rem,3.3vw,2.6rem); font-weight:600; letter-spacing:-.02em; margin:0 0 10px; color:#fff }
.pfx-sub { text-align:center; color:#8d81a6; margin:0 auto 42px; max-width:56ch; font-size:.94rem }

/* --- cards: bloom into violet under a lit top edge --- */
.pfx-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px }
.pfx-card { position:relative; border-radius:18px; padding:26px; overflow:hidden; background:linear-gradient(158deg,#1a0f2e 0%,#1d1036 46%,#3b1a72 100%); border:1px solid rgba(255,255,255,.09); transition:transform .2s ease, box-shadow .2s ease }
.pfx-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#a855f7,#7c3aed) }
.pfx-card:hover { transform:translateY(-3px); box-shadow:0 22px 50px rgba(60,20,120,.45) }
.pfx-card h3 { margin:0 0 4px; font-size:1.12rem; font-weight:600; letter-spacing:-.01em; color:#fff }
.pfx-meta { color:#a855f7; font-size:.81rem; font-weight:500; margin:0 0 12px }
.pfx-card ul { margin:0; padding-left:18px; color:#b3a8c9; font-size:.88rem }
.pfx-card li { margin:6px 0 }
.pfx-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.pfx-chip { font-size:.73rem; color:#b3a8c9; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:3px 11px; transition:border-color .2s, color .2s }
.pfx-chip:hover { border-color:rgba(168,85,247,.65); color:#fff }

/* --- about band --- */
.pfx-band { background:#170a2b; border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09) }
.pfx-bio { color:#b3a8c9; max-width:74ch; margin:0 auto 30px; text-align:center; font-size:.95rem }
.pfx-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.pfx-skillgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:24px }
.pfx-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px }
.pfx-full { grid-column:1/-1 }
.pfx-box.sk h4 { text-transform:none; letter-spacing:0; font-size:.93rem; color:#fff }
.pfx-box { border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:20px 22px; background:rgba(255,255,255,.02) }
.pfx-box h4 { margin:0 0 12px; font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:#8d81a6; font-weight:600 }
.pfx-box ul { margin:0; padding-left:17px; color:#b3a8c9; font-size:.88rem }
.pfx-box li { margin:5px 0 }
.pfx-box .pfx-chips { margin-top:0 }

/* --- contact + footer --- */
.pfx-contact { text-align:center }
.pfx-big { font-size:clamp(1.5rem,2.9vw,2.1rem); font-weight:600; letter-spacing:-.02em; margin:0 auto 28px; max-width:22ch; line-height:1.25; color:#fff }
.pfx-big em { font-style:normal; color:#a855f7 }
.pfx-links2 { display:flex; justify-content:center; gap:12px; flex-wrap:wrap }
.pfx-foot { border-top:1px solid rgba(255,255,255,.09); padding:24px 0; color:#8d81a6; font-size:.82rem; text-align:center }

/* --- scroll reveal --- */
.pfx .rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
.pfx .rv.in { opacity:1; transform:none }

@media (max-width:900px){
  .pfx-hgrid { grid-template-columns:1fr; gap:32px; text-align:center }
  .pfx-lede { margin-left:auto; margin-right:auto }
  .pfx-cta, .pfx-stats { justify-content:center }
  .pfx-cards, .pfx-grid2, .pfx-skillgrid, .pfx-facts { grid-template-columns:1fr }
  .pfx-navlinks { gap:14px }
  .pfx-navlinks a { font-size:.8rem }
  .pfx-wrap { padding:0 20px }
}
@media (prefers-reduced-motion:reduce){
  .pfx .rv { opacity:1; transform:none }
  .pfx-card:hover { transform:none }
}