/* =========================================================
   JUSTIN KAMIONKA — PORTFOLIO
   Liquid Glass Design System
========================================================= */
:root {
  --primary: #ff3347;
  --primary-dim: rgba(255,51,71,0.75);
  --primary-glass: rgba(255,51,71,0.16);
  --primary-glow: 0 8px 40px rgba(255,51,71,0.42);
  --primary-glow-strong: 0 20px 64px rgba(255,51,71,0.62);
  --accent2: #6c63ff;
  --accent2-glass: rgba(108,99,255,0.16);
  --glass-4: rgba(255,255,255,0.04);
  --glass-8: rgba(255,255,255,0.08);
  --glass-12: rgba(255,255,255,0.12);
  --border-glass: rgba(255,255,255,0.09);
  --border-mid: rgba(255,255,255,0.15);
  --border-strong: rgba(255,255,255,0.22);
  --border-red: rgba(255,51,71,0.35);
  --blur-sm: blur(16px) saturate(160%);
  --blur-md: blur(32px) saturate(180%);
  --blur-lg: blur(56px) saturate(200%);
  --specular: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.12);
  --text: rgba(255,255,255,0.93);
  --text-2: rgba(255,255,255,0.55);
  --text-3: rgba(255,255,255,0.28);
  --success: #30d158;
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 44px;
  --shadow: 0 24px 72px rgba(0,0,0,0.55), var(--specular);
  --shadow-hover: 0 40px 100px rgba(0,0,0,0.65), var(--specular);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
html { scroll-behavior:smooth; }

body {
  font-family: -apple-system,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(ellipse 85% 65% at 5% -15%, rgba(180,0,50,0.5) 0%, transparent 50%),
    radial-gradient(ellipse 65% 55% at 96% 5%, rgba(60,30,200,0.5) 0%, transparent 48%),
    radial-gradient(ellipse 75% 55% at 50% 115%, rgba(4,6,36,0.8) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(108,99,255,0.18) 0%, transparent 50%),
    linear-gradient(168deg, #0d0f22 0%, #07080d 100%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── BG LAYER ── */
.bg-layer { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bg-orb { position:absolute; border-radius:50%; filter:blur(90px); animation:orb-float ease-in-out infinite; will-change:transform; }
.o1 { width:600px;height:600px; background:radial-gradient(circle,rgba(255,51,71,0.6),transparent 70%); top:-180px;left:-120px; animation-duration:26s; opacity:.25; }
.o2 { width:500px;height:500px; background:radial-gradient(circle,rgba(108,99,255,0.55),transparent 70%); top:5%;right:-120px; animation-duration:34s;animation-delay:-10s; opacity:.2; }
.o3 { width:400px;height:400px; background:radial-gradient(circle,rgba(255,51,71,0.45),transparent 70%); bottom:20%;left:5%; animation-duration:22s;animation-delay:-6s; opacity:.22; }
.o4 { width:320px;height:320px; background:radial-gradient(circle,rgba(108,99,255,0.4),transparent 70%); bottom:-60px;right:18%; animation-duration:30s;animation-delay:-14s; opacity:.18; }
@keyframes orb-float {
  0%  { transform:translate(0,0) scale(1); }
  25% { transform:translate(44px,-60px) scale(1.1); }
  50% { transform:translate(-36px,55px) scale(0.92); }
  75% { transform:translate(58px,28px) scale(1.06); }
  100%{ transform:translate(0,0) scale(1); }
}

/* Particles */
.particles { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ptc { position:absolute; border-radius:50%; background:rgba(255,51,71,0.5); animation:ptc-rise linear infinite; }
@keyframes ptc-rise { 0%{transform:translateY(0) rotate(0);opacity:0} 8%{opacity:1} 92%{opacity:.3} 100%{transform:translateY(-105vh) rotate(400deg);opacity:0} }

/* Progress bar */
#scroll-prog { position:fixed; top:0; left:0; height:2px; width:0%; z-index:1000; background:linear-gradient(90deg,var(--primary),#a78bfa,var(--primary)); background-size:200%; animation:prog-shimmer 3s linear infinite; box-shadow:0 0 10px rgba(255,51,71,0.5); }
@keyframes prog-shimmer { 0%{background-position:0%} 100%{background-position:200%} }

/* ── NAVBAR ── */
.pf-nav { position:fixed; top:0; left:0; right:0; z-index:500; height:70px; padding:0 44px; display:flex; align-items:center; justify-content:space-between; background:rgba(8,9,20,0.55); backdrop-filter:var(--blur-md); -webkit-backdrop-filter:var(--blur-md); border-bottom:1px solid var(--border-glass); transition:background .4s,box-shadow .4s; }
.pf-nav.scrolled { background:rgba(8,9,20,0.92); box-shadow:0 8px 48px rgba(0,0,0,0.5); }

.pf-nav-brand { display:flex; align-items:center; gap:10px; }
.pf-av { width:38px; height:38px; border-radius:10px; background:var(--primary-glass); border:1px solid var(--border-red); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900; color:var(--primary); transition:transform .25s,box-shadow .25s; }
.pf-nav-brand:hover .pf-av { transform:scale(1.08); box-shadow:0 0 18px rgba(255,51,71,.3); }
.pf-nav-name { font-size:16px; font-weight:800; letter-spacing:-.02em; }
.pf-nav-name span { color:var(--primary); }

.pf-nav-links { display:flex; align-items:center; gap:4px; }
.pf-link { padding:8px 16px; border-radius:var(--r-md); font-size:13px; font-weight:600; color:var(--text-2); transition:color .2s,background .2s; }
.pf-link:hover { color:var(--text); background:var(--glass-8); }
.pf-cta { padding:9px 22px; background:var(--primary); color:#fff; border-radius:var(--r-md); font-size:13px; font-weight:800; box-shadow:var(--primary-glow); transition:transform .22s,box-shadow .22s; }
.pf-cta:hover { transform:translateY(-2px) scale(1.03); box-shadow:var(--primary-glow-strong); }

/* ── REVEAL ENGINE ── */
[data-reveal] { transition:opacity .72s ease,transform .72s ease,filter .72s ease; }
[data-reveal="up"]    { opacity:0; transform:translateY(48px); }
[data-reveal="left"]  { opacity:0; transform:translateX(-56px); }
[data-reveal="right"] { opacity:0; transform:translateX(56px); }
[data-reveal="scale"] { opacity:0; transform:scale(0.85); }
[data-reveal="blur"]  { opacity:0; filter:blur(16px); transform:scale(0.97); }
[data-reveal="flip"]  { opacity:0; transform:perspective(700px) rotateX(20deg) translateY(32px); }
[data-reveal].in      { opacity:1; transform:none; filter:none; }
[data-d="1"]{transition-delay:.1s}[data-d="2"]{transition-delay:.2s}[data-d="3"]{transition-delay:.32s}
[data-d="4"]{transition-delay:.44s}[data-d="5"]{transition-delay:.56s}[data-d="6"]{transition-delay:.7s}
[data-d="7"]{transition-delay:.85s}[data-d="8"]{transition-delay:1s}[data-d="9"]{transition-delay:1.15s}

/* Section line */
.s-line { width:0; height:2px; background:linear-gradient(90deg,var(--primary),#a78bfa,transparent); border-radius:999px; margin:0 auto 28px; box-shadow:0 0 14px rgba(255,51,71,0.4); transition:width 1s ease; }
.s-line.drawn { width:80px; }

/* ── HERO ── */
.pf-hero { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:130px 40px 80px; gap:24px; }

.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 20px; border-radius:999px; background:rgba(108,99,255,0.12); border:1px solid rgba(108,99,255,0.28); font-size:13px; font-weight:700; color:#a78bfa; letter-spacing:.04em; backdrop-filter:var(--blur-sm); animation:badge-pop .6s ease both; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#a78bfa; box-shadow:0 0 10px #a78bfa; animation:dot-pulse 2.5s ease infinite; }
@keyframes badge-pop { from{opacity:0;transform:translateY(-10px) scale(.88)} to{opacity:1;transform:none} }
@keyframes dot-pulse { 0%,100%{transform:scale(1);box-shadow:0 0 10px #a78bfa} 50%{transform:scale(1.4);box-shadow:0 0 24px #a78bfa,0 0 44px rgba(108,99,255,.4)} }

.hero-name { font-size:clamp(52px,9vw,108px); font-weight:900; line-height:1; letter-spacing:-.045em; animation:hero-in .8s .1s ease both; }
@keyframes hero-in { from{opacity:0;transform:translateY(30px);filter:blur(12px)} to{opacity:1;transform:none;filter:none} }

.hero-name .grad-red { background:linear-gradient(135deg,#ff3347 0%,#ff8c99 40%,#ff3347 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:300%; animation:grad-pan 5s ease infinite; }
@keyframes grad-pan { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.hero-role { font-size:clamp(18px,2.5vw,28px); font-weight:700; color:var(--text-2); letter-spacing:-.01em; animation:hero-in .8s .18s ease both; }
.hero-role .type-cursor { display:inline-block; width:2px; height:1.1em; background:var(--primary); border-radius:1px; margin-left:3px; vertical-align:middle; animation:blink 1s ease infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-desc { font-size:clamp(15px,2vw,19px); color:var(--text-2); max-width:580px; line-height:1.72; animation:hero-in .8s .26s ease both; }

.hero-chips { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; animation:hero-in .8s .34s ease both; }
.chip { display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px; background:var(--glass-8); border:1px solid var(--border-mid); font-size:13px; font-weight:700; color:var(--text-2); backdrop-filter:var(--blur-sm); transition:color .2s,border-color .2s,background .2s,transform .2s,box-shadow .2s; }
.chip:hover { color:var(--text); border-color:var(--border-red); background:var(--primary-glass); transform:translateY(-3px); box-shadow:0 8px 24px rgba(255,51,71,.12); }
.chip-dot { width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px var(--primary); }

.hero-actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; animation:hero-in .8s .42s ease both; }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex; align-items:center; gap:9px; padding:15px 36px; background:var(--primary); color:#fff; border-radius:var(--r-lg); font-size:15px; font-weight:800; letter-spacing:.01em; box-shadow:var(--primary-glow); position:relative; overflow:hidden; cursor:pointer; transition:transform .25s,box-shadow .25s,background .25s; }
.btn-primary::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,transparent 55%); pointer-events:none; }
.btn-primary:hover { transform:translateY(-4px) scale(1.02); box-shadow:var(--primary-glow-strong); background:#e8001a; }
.btn-ghost { display:inline-flex; align-items:center; gap:9px; padding:15px 36px; background:var(--glass-8); color:var(--text); border-radius:var(--r-lg); font-size:15px; font-weight:700; border:1px solid var(--border-mid); backdrop-filter:var(--blur-sm); box-shadow:var(--specular); cursor:pointer; transition:transform .25s,background .25s,border-color .25s; }
.btn-ghost:hover { transform:translateY(-4px); background:var(--glass-12); border-color:var(--border-strong); }

/* ── ABOUT ── */
.section { position:relative; z-index:1; padding:110px 40px; max-width:1200px; margin:0 auto; }
.section-head { text-align:center; margin-bottom:64px; }
.s-tag { display:inline-flex; align-items:center; gap:7px; padding:6px 18px; border-radius:999px; background:var(--primary-glass); border:1px solid var(--border-red); font-size:11px; font-weight:800; color:var(--primary); letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.s-title { font-size:clamp(30px,4.5vw,52px); font-weight:900; letter-spacing:-.03em; line-height:1.08; margin-bottom:18px; }
.s-desc { font-size:17px; color:var(--text-2); max-width:560px; margin:0 auto; line-height:1.72; }

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }

.about-card { padding:36px; background:var(--glass-8); border:1px solid var(--border-mid); border-radius:var(--r-xl); backdrop-filter:var(--blur-md); box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform .3s ease,box-shadow .3s ease; }
.about-card::before { content:""; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); }
.about-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }

.about-avatar-wrap { display:flex; align-items:center; gap:20px; margin-bottom:28px; }
.about-avatar { width:80px; height:80px; border-radius:var(--r-xl); background:linear-gradient(135deg,rgba(255,51,71,.25),rgba(108,99,255,.25)); border:2px solid var(--border-red); display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:900; color:var(--primary); flex-shrink:0; box-shadow:0 0 32px rgba(255,51,71,.2),var(--specular); transition:transform .3s,box-shadow .3s; }
.about-card:hover .about-avatar { transform:scale(1.06) rotate(-3deg); box-shadow:0 0 48px rgba(255,51,71,.3),var(--specular); }
.about-av-info {}
.about-av-name { font-size:22px; font-weight:900; letter-spacing:-.02em; margin-bottom:4px; }
.about-av-title { font-size:14px; color:var(--primary); font-weight:700; }

.about-bio { font-size:15px; color:var(--text-2); line-height:1.78; margin-bottom:24px; }

.about-facts { display:flex; flex-direction:column; gap:10px; }
.about-fact { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--glass-4); border:1px solid var(--border-glass); border-radius:var(--r-md); font-size:14px; }
.fact-icon { font-size:18px; flex-shrink:0; }
.fact-label { color:var(--text-3); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.fact-val { font-weight:700; font-size:14px; }

/* ── SKILLS ── */
.skills-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.skill-card { padding:28px; background:var(--glass-8); border:1px solid var(--border-mid); border-radius:var(--r-xl); backdrop-filter:var(--blur-sm); box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s; }
.skill-card::before { content:""; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); }
.skill-card:hover { transform:translateY(-6px) scale(1.01); box-shadow:var(--shadow-hover),0 0 44px rgba(255,51,71,.07); border-color:var(--border-red); }

.skill-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.skill-icon { width:48px; height:48px; border-radius:var(--r-md); background:var(--glass-8); border:1px solid var(--border-mid); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:var(--specular); flex-shrink:0; transition:transform .3s; }
.skill-card:hover .skill-icon { transform:scale(1.15) rotate(-5deg); }
.skill-title { font-size:16px; font-weight:800; letter-spacing:-.01em; }
.skill-sub { font-size:12px; color:var(--text-2); margin-top:3px; }

.skill-tags { display:flex; flex-wrap:wrap; gap:8px; }
.stag { padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; background:var(--glass-4); border:1px solid var(--border-glass); color:var(--text-2); transition:color .2s,border-color .2s,background .2s; }
.skill-card:hover .stag { color:var(--text); border-color:var(--border-mid); background:var(--glass-8); }

/* Skill bars */
.skill-bars { display:flex; flex-direction:column; gap:14px; }
.sb-item { }
.sb-header { display:flex; justify-content:space-between; margin-bottom:6px; font-size:13px; }
.sb-name { font-weight:700; }
.sb-pct { color:var(--text-3); font-weight:700; font-size:12px; }
.sb-track { height:6px; background:var(--glass-8); border-radius:999px; overflow:hidden; }
.sb-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--primary),#ff8c99); box-shadow:0 0 8px rgba(255,51,71,.35); width:0%; transition:width 1.2s ease; }
.sb-fill.purple { background:linear-gradient(90deg,#6c63ff,#a78bfa); box-shadow:0 0 8px rgba(108,99,255,.35); }
.sb-fill.teal { background:linear-gradient(90deg,#00c9a7,#6ee7d4); box-shadow:0 0 8px rgba(0,201,167,.35); }

/* ── PROJECTS ── */
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.proj-card { background:var(--glass-8); border:1px solid var(--border-mid); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); position:relative; transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s; display:flex; flex-direction:column; }
.proj-card::before { content:""; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); z-index:1; }
.proj-card:hover { transform:translateY(-10px) scale(1.01); box-shadow:var(--shadow-hover),0 0 50px rgba(255,51,71,.08); border-color:var(--border-red); }
.proj-card.featured { border-color:rgba(255,51,71,.3); background:rgba(255,51,71,.07); }

.proj-thumb { height:200px; position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(255,51,71,.12),rgba(108,99,255,.12)); display:flex; align-items:center; justify-content:center; }
.proj-thumb-mock { width:100%; height:100%; display:flex; flex-direction:column; padding:16px; gap:8px; }
.ptm-bar { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.ptm-dot { width:9px;height:9px;border-radius:50%; }
.ptm-d1{background:#ff5f57} .ptm-d2{background:#febc2e} .ptm-d3{background:#28c840}
.ptm-url { flex:1; background:var(--glass-4); border:1px solid var(--border-glass); border-radius:999px; padding:4px 12px; font-size:9px; color:var(--text-3); text-align:center; }
.ptm-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ptm-kpi { padding:8px 6px; background:var(--glass-4); border:1px solid var(--border-glass); border-radius:8px; text-align:center; }
.ptm-kpi-v { font-size:14px; font-weight:900; color:var(--text); }
.ptm-kpi-l { font-size:8px; color:var(--text-3); margin-top:2px; }
.ptm-kpi-v.r { color:var(--primary); }
.ptm-kpi-v.g { color:var(--success); }
.ptm-rows { display:flex; flex-direction:column; gap:5px; }
.ptm-row { height:24px; background:var(--glass-4); border:1px solid var(--border-glass); border-radius:6px; display:flex; align-items:center; padding:0 8px; gap:6px; }
.ptm-row-dot { width:6px;height:6px;border-radius:50%; }
.ptm-row-line { flex:1; height:4px; background:var(--glass-8); border-radius:999px; }
.ptm-row-badge { padding:2px 6px; border-radius:999px; font-size:8px; font-weight:700; }
.ptm-badge-r { background:rgba(255,51,71,.2);color:var(--primary) }
.ptm-badge-g { background:rgba(48,209,88,.2);color:var(--success) }
.ptm-badge-y { background:rgba(255,214,10,.2);color:#ffd60a }

.ptm-generic { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; height:100%; }
.ptm-generic-icon { font-size:52px; opacity:.6; }
.ptm-generic-label { font-size:13px; color:var(--text-3); font-weight:600; }

.proj-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6) 100%); }

.proj-body { padding:24px; flex:1; display:flex; flex-direction:column; gap:12px; }

.proj-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.proj-year { font-size:11px; color:var(--text-3); font-weight:700; }
.proj-status { padding:3px 10px; border-radius:999px; font-size:10px; font-weight:700; }
.proj-status.live { background:rgba(48,209,88,.18);color:var(--success);border:1px solid rgba(48,209,88,.28); }
.proj-status.dev  { background:rgba(255,214,10,.18);color:#ffd60a;border:1px solid rgba(255,214,10,.28); }
.proj-status.plan { background:var(--glass-8);color:var(--text-3);border:1px solid var(--border-glass); }

.proj-name { font-size:20px; font-weight:900; letter-spacing:-.02em; }
.proj-desc { font-size:14px; color:var(--text-2); line-height:1.65; flex:1; }

.proj-tech { display:flex; flex-wrap:wrap; gap:7px; }
.proj-tech span { padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; background:var(--glass-4); border:1px solid var(--border-glass); color:var(--text-3); transition:color .2s,border-color .2s; }
.proj-card:hover .proj-tech span { color:var(--text-2); border-color:var(--border-mid); }

.proj-link { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--primary); transition:gap .2s; }
.proj-link:hover { gap:11px; }

/* Placeholder card */
.proj-card.placeholder { border-style:dashed; border-color:var(--border-glass); background:var(--glass-4); }
.proj-card.placeholder:hover { border-color:var(--border-mid); border-style:dashed; transform:none; box-shadow:var(--shadow); }
.proj-placeholder-body { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:48px 24px; text-align:center; flex:1; }
.placeholder-icon { font-size:40px; opacity:.35; }
.placeholder-title { font-size:16px; font-weight:800; color:var(--text-3); }
.placeholder-desc { font-size:13px; color:var(--text-3); line-height:1.6; }

/* ── CONTACT ── */
.contact-wrap { position:relative; z-index:1; padding:100px 40px; max-width:860px; margin:0 auto; }
.contact-card { padding:60px 56px; background:var(--glass-8); border:1px solid var(--border-mid); border-radius:var(--r-2xl); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg); box-shadow:0 52px 130px rgba(0,0,0,.68),0 0 80px rgba(255,51,71,.06),var(--specular); position:relative; overflow:hidden; }
.contact-card::before { content:""; position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); }
.contact-card::after  { content:""; position:absolute;inset:0; background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,51,71,.07),transparent); pointer-events:none; }
.contact-head { text-align:center; margin-bottom:48px; position:relative; z-index:1; }
.contact-head h2 { font-size:clamp(28px,4vw,46px); font-weight:900; letter-spacing:-.03em; margin-bottom:14px; }
.contact-head p  { font-size:17px; color:var(--text-2); line-height:1.65; max-width:500px; margin:0 auto; }
.c-form { position:relative; z-index:1; display:flex; flex-direction:column; gap:16px; }
.c-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.c-field { display:flex; flex-direction:column; gap:8px; }
.c-field label { font-size:11px; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; }
.c-field input, .c-field select, .c-field textarea { padding:14px 18px; background:rgba(10,12,28,.72); border:1px solid var(--border-mid); border-radius:var(--r-md); color:var(--text); font:inherit; font-size:15px; outline:none; backdrop-filter:var(--blur-sm); transition:border-color .25s,box-shadow .25s,background .25s; }
.c-field input::placeholder, .c-field textarea::placeholder { color:var(--text-3); }
.c-field input:focus, .c-field select:focus, .c-field textarea:focus { border-color:var(--border-red); background:rgba(15,17,38,.9); box-shadow:0 0 0 4px rgba(255,51,71,.15); }
.c-field select option { background:#12142a; color:rgba(255,255,255,.92); }
.c-field textarea { resize:vertical; min-height:120px; }
.c-submit { margin-top:8px; padding:18px; background:var(--primary); color:#fff; border:none; border-radius:var(--r-lg); font-size:17px; font-weight:800; cursor:pointer; width:100%; box-shadow:var(--primary-glow); position:relative; overflow:hidden; transition:transform .25s,box-shadow .25s,background .25s; }
.c-submit::before { content:""; position:absolute;inset:0; background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 55%); pointer-events:none; }
.c-submit:hover { transform:translateY(-3px); box-shadow:var(--primary-glow-strong); background:#e8001a; }
.c-note { text-align:center; font-size:13px; color:var(--text-3); margin-top:4px; position:relative; z-index:1; }
.c-success { display:none; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:24px; position:relative; z-index:1; }
.c-success.show { display:flex; }
.c-form.hidden { display:none; }
.success-icon { width:74px;height:74px; border-radius:50%; background:rgba(48,209,88,.18); border:1px solid rgba(48,209,88,.38); display:flex;align-items:center;justify-content:center; font-size:36px; box-shadow:0 0 50px rgba(48,209,88,.22); animation:s-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes s-pop { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }
.success-title { font-size:26px; font-weight:900; letter-spacing:-.02em; }
.success-sub { font-size:16px; color:var(--text-2); line-height:1.65; max-width:420px; }

/* ── FOOTER ── */
.pf-footer { position:relative;z-index:1; padding:36px 44px; border-top:1px solid var(--border-glass); display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; background:rgba(7,8,18,.55); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); }
.footer-brand { font-size:15px; font-weight:800; letter-spacing:-.02em; }
.footer-brand span { color:var(--primary); }
.footer-copy { font-size:13px; color:var(--text-3); }
.footer-links { display:flex;gap:4px; }
.footer-links a { font-size:13px;color:var(--text-3);padding:6px 12px;border-radius:var(--r-sm);transition:color .2s,background .2s; }
.footer-links a:hover { color:var(--text-2);background:var(--glass-4); }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .pf-nav{padding:0 20px}.pf-nav-links .pf-link{display:none}
  .pf-hero{padding:100px 24px 56px}
  .section{padding:72px 24px}
  .about-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr 1fr;gap:16px}
  .contact-wrap{padding:72px 24px}.contact-card{padding:36px 26px}
  .c-row{grid-template-columns:1fr}
  .pf-footer{padding:28px 24px}
}
@media(max-width:600px){
  .projects-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn-primary,.btn-ghost{justify-content:center;text-align:center}
  .pf-footer{flex-direction:column;text-align:center}
  .footer-links{justify-content:center}
}

@media(max-width:480px){
  .pf-hero{padding:90px 20px 48px;gap:20px}
  .hero-desc{font-size:14px}
  .chip{padding:5px 12px;font-size:12px}
  .btn-primary,.btn-ghost{padding:13px 28px;font-size:14px}
  .about-card{padding:24px}
  .about-avatar{width:68px;height:68px;font-size:30px}
  .skill-card{padding:20px}
  .proj-body{padding:18px}
  .contact-card{padding:28px 20px}
  .contact-head p{font-size:15px}
  .section{padding:68px 20px}
  .contact-wrap{padding:60px 20px}
  .section-head{margin-bottom:44px}
  .s-desc{font-size:15px}
}

@media(max-width:360px){
  .pf-hero{padding:84px 16px 44px;gap:16px}
  .hero-name{font-size:32px;letter-spacing:-.03em}
  .hero-role{font-size:16px}
  .hero-desc{font-size:13px}
  .hero-chips{gap:6px}
  .chip{padding:5px 11px;font-size:11px}
  .btn-primary,.btn-ghost{padding:12px 20px;font-size:14px}
  .pf-nav{padding:0 14px}
  .pf-nav-name{font-size:14px}
  .pf-cta{padding:7px 14px;font-size:12px}
  .pf-av{width:32px;height:32px;font-size:14px}
  .about-card{padding:20px}
  .about-avatar{width:58px;height:58px;font-size:24px}
  .about-av-name{font-size:18px}
  .about-avatar-wrap{gap:14px;margin-bottom:20px}
  .skill-card{padding:16px}
  .skill-icon{width:40px;height:40px;font-size:18px}
  .skill-title{font-size:14px}
  .proj-body{padding:14px}
  .proj-name{font-size:17px}
  .contact-card{padding:20px 14px}
  .contact-head h2{font-size:24px}
  .contact-head{margin-bottom:32px}
  .c-field input,.c-field select,.c-field textarea{padding:11px 13px;font-size:14px}
  .c-submit{padding:15px;font-size:15px}
  .section{padding:52px 16px}
  .section-head{margin-bottom:36px}
  .s-title{font-size:24px}
  .s-desc{font-size:13px}
  .contact-wrap{padding:52px 16px}
  .pf-footer{padding:20px 16px}
  .about-fact{padding:10px 12px;font-size:13px}
  .sb-header{font-size:12px}
}

.about-actions {
  margin-top: 8px;
  justify-content: flex-start;
}

.btn-about {
  padding: 12px 28px;
  font-size: 14px;
}

.skill-tags-compact {
  margin-top: 4px;
}

.ptm-dot-red {
  background: #ff5f57;
}

.ptm-dot-green {
  background: #28c840;
}

.ptm-dot-yellow {
  background: #febc2e;
}

.btn-placeholder {
  margin-top: 12px;
  padding: 12px 24px;
  font-size: 13px;
}

.contact-tag {
  margin: 0 auto 16px;
}

.pf-imp-page {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 40px 80px;
}

.pf-imp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  padding: 9px 18px;
  border-radius: var(--r-md);
  background: var(--glass-8);
  border: 1px solid var(--border-mid);
  margin-bottom: 32px;
  transition: color .2s, background .2s, transform .2s;
}

.pf-imp-back:hover {
  color: var(--text);
  background: var(--glass-12);
  transform: translateX(-4px);
}

.pf-imp-card {
  padding: 48px 52px;
  background: var(--glass-8);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-2xl);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.pf-imp-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}

.pf-imp-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.pf-imp-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #9f1239);
  box-shadow: 0 10px 28px rgba(255,51,71,.3), var(--specular);
}

.pf-imp-brand-name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.pf-imp-brand-name span {
  color: var(--primary);
}

.pf-imp-title {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

.pf-imp-subtitle {
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-glass);
}

.pf-imp-section {
  margin-bottom: 32px;
}

.pf-imp-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-imp-section-title::before {
  content: "";
  display: block;
  width: 3px;
  height: 14px;
  background: var(--primary);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255,51,71,.5);
}

.pf-imp-block {
  padding: 20px 22px;
  background: var(--glass-4);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-2);
}

.pf-imp-block strong {
  color: var(--text);
  font-weight: 700;
}

.pf-imp-block a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pf-imp-block a:hover {
  color: #ff6b7a;
}

.pf-imp-divider {
  border: none;
  border-top: 1px solid var(--border-glass);
  margin: 32px 0;
}

.pf-imp-text-small {
  font-size: 14px;
}

.pf-imp-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pf-imp-footer-note {
  font-size: 13px;
  color: var(--text-3);
}

.pf-imp-footer-actions {
  display: flex;
  gap: 4px;
}

.pf-imp-footer-link {
  font-size: 13px;
  color: var(--text-3);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  transition: color .2s, background .2s;
}

.pf-imp-footer-link:hover {
  color: var(--text-2);
  background: var(--glass-4);
}

@media(max-width:600px) {
  .pf-imp-page {
    padding: 100px 20px 60px;
  }

  .pf-imp-card {
    padding: 28px 22px;
  }
}