*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink-light: #fdf0f0;
  --pink-mid:   #f0c8c8;
  --pink-warm:  #e8a8a8;
  --blush:      #d47a7a;
  --rose:       #b55a5a;
  --green-mist: #c8d8c0;
  --sage:       #a8c0a0;
  --cream:      #fff8f5;
  --text:       #4a2525;
  --sub:        #8a5555;
  --light-text: #c09090;
  --border:     rgba(255,255,255,0.65);
  --glass:      rgba(255,255,255,0.38);
  --card-bg:    rgba(255,255,255,0.48);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: #f5d8d8;
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
}

/* ── Custom cursor ── */
.cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--blush);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  transition: transform 0.1s, width 0.3s, height 0.3s;
  mix-blend-mode: multiply;
}
.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid var(--blush);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%,-50%);
  transition: all 0.18s ease;
  opacity: 0.5;
}

/* ── Petals ── */
#petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Blobs ── */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: blobFloat 10s ease-in-out infinite alternate;
}
.b1 { width:500px;height:500px;background:#f0b0b0;opacity:.35;top:-100px;left:-150px;animation-delay:0s; }
.b2 { width:400px;height:400px;background:#c8d8b8;opacity:.3;bottom:-80px;right:-100px;animation-delay:3s; }
.b3 { width:250px;height:250px;background:#f5c8d0;opacity:.25;top:40%;left:55%;animation-delay:6s; }

@keyframes blobFloat {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(25px,20px) scale(1.06); }
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3rem;
  background: rgba(253,240,240,0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,200,200,0.3);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.nav-logo span { color: var(--blush); font-style: italic; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
  text-decoration: none;
  position: relative;
  transition: color 0.25s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--blush);
  transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--rose); }
.nav-links a:hover::after { width: 100%; }

/* ── HERO ── */
#hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 3rem 3rem;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.hero-text { flex: 1; }
.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: fadeUp 0.8s 0.2s forwards;
}
.hero-eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--blush); }

h1.hero-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.4rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.35s forwards;
}
h1.hero-name em { font-style: italic; color: var(--blush); }

.hero-role {
  font-size: 1rem;
  color: var(--sub);
  font-weight: 300;
  margin-bottom: 1.6rem;
  min-height: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.5s forwards;
}
.typing-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--blush);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-bio {
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--sub);
  max-width: 480px;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.65s forwards;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s 0.8s forwards;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--blush);
  color: white;
  border: none;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  cursor: none;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 20px rgba(212,122,122,0.35);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 28px rgba(212,122,122,0.45);
  background: var(--rose);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  background: transparent;
  color: var(--rose);
  border: 1.5px solid var(--pink-warm);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  cursor: none;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
}
.btn-outline:hover {
  background: var(--pink-light);
  border-color: var(--blush);
  transform: translateY(-3px);
}

/* ── Hero Photo ── */
.hero-photo {
  flex-shrink: 0;
  position: relative;
  opacity: 0;
  animation: fadeIn 1s 0.4s forwards;
}
@keyframes fadeIn { to { opacity:1; } }

.photo-frame {
  width: 340px;
  height: 400px;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
  overflow: hidden;
  position: relative;
  animation: morphShape 10s ease-in-out infinite;
  box-shadow: 0 20px 60px rgba(180,100,100,0.22);
}
@keyframes morphShape {
  0%   { border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; }
  33%  { border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%; }
  66%  { border-radius: 45% 55% 60% 40% / 40% 60% 55% 45%; }
  100% { border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; }
}
.photo-frame img { width:100%;height:100%;object-fit:cover;object-position:center top; }

.photo-ring {
  position: absolute;
  inset: -12px;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
  border: 1.5px dashed rgba(212,122,122,0.4);
  animation: morphShape 10s ease-in-out infinite, spin 20s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── SECTIONS ── */
section {
  position: relative;
  z-index: 1;
  padding: 6rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
.section-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::before { content:'';width:28px;height:1px;background:var(--blush); }
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 3rem;
}
.section-title em { color: var(--blush); font-style: italic; }

/* ── ABOUT ── */
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start; }
.about-text p { font-size:0.88rem;line-height:1.9;color:var(--sub);margin-bottom:1.2rem; }
.about-facts { display:flex;flex-direction:column;gap:1rem; }
.fact-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.fact-card:hover { transform:translateX(6px);box-shadow:0 4px 20px rgba(180,100,100,0.12); }
.fact-icon { font-size:1.5rem;flex-shrink:0; }
.fact-info { font-size:0.8rem; }
.fact-info strong { display:block;color:var(--text);margin-bottom:2px; }
.fact-info span { color:var(--sub);font-size:0.75rem; }

/* ── SKILLS ── */
.skills-section { background:rgba(255,245,245,0.4);border-radius:40px;max-width:none;padding:6rem 3rem; }
.skills-inner { max-width:1100px;margin:0 auto; }
.skills-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem; }
.skill-group {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.6rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.skill-group:hover { transform:translateY(-4px);box-shadow:0 8px 32px rgba(180,100,100,0.14); }
.skill-group-title { font-size:0.68rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--blush);margin-bottom:1rem;font-weight:600; }
.skill-tags { display:flex;flex-wrap:wrap;gap:6px; }
.stag {
  font-size:0.73rem;padding:5px 12px;border-radius:100px;
  background:rgba(255,255,255,0.6);border:1px solid rgba(212,160,160,0.25);
  color:var(--text);transition:all 0.25s;cursor:default;
}
.stag:hover { background:var(--blush);color:white;border-color:var(--blush);transform:translateY(-2px); }

/* ── PROJECTS ── */
.projects-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem; }
.project-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
}
.project-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--pink-warm),var(--sage));
  transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;
}
.project-card:hover::before { transform:scaleX(1); }
.project-card:hover { transform:translateY(-6px);box-shadow:0 12px 40px rgba(180,100,100,0.16); }
.project-emoji { font-size:2rem; }
.project-name { font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;color:var(--text); }
.project-desc { font-size:0.8rem;line-height:1.75;color:var(--sub);flex:1; }
.project-stack { display:flex;flex-wrap:wrap;gap:5px; }
.ptag {
  font-size:0.66rem;padding:3px 9px;border-radius:100px;
  background:rgba(212,122,122,0.1);border:1px solid rgba(212,122,122,0.2);color:var(--rose);
}
.project-links { display:flex;gap:10px;margin-top:0.5rem; }
.plink {
  font-size:0.73rem;color:var(--blush);text-decoration:none;
  display:flex;align-items:center;gap:4px;font-weight:500;transition:color 0.2s;
}
.plink:hover { color:var(--rose); }

/* ── CONTACT ── */
.contact-wrap { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start; }
.contact-info p { font-size:0.88rem;line-height:1.85;color:var(--sub);margin-bottom:2rem; }
.contact-links { display:flex;flex-direction:column;gap:12px; }
.contact-link {
  display:flex;align-items:center;gap:12px;font-size:0.82rem;
  color:var(--text);text-decoration:none;padding:12px 16px;
  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
  transition:all 0.3s cubic-bezier(.34,1.56,.64,1);backdrop-filter:blur(12px);
}
.contact-link:hover { transform:translateX(6px);box-shadow:0 4px 20px rgba(180,100,100,0.14);border-color:var(--pink-mid); }
.contact-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.6);font-size:1rem;flex-shrink:0; }
.contact-form { display:flex;flex-direction:column;gap:14px; }
.form-group { display:flex;flex-direction:column;gap:6px; }
.form-group label { font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--blush);font-weight:500; }
.form-group input, .form-group textarea {
  background:rgba(255,255,255,0.5);border:1px solid rgba(212,180,180,0.4);border-radius:12px;
  padding:12px 16px;font-family:'DM Sans',sans-serif;font-size:0.82rem;color:var(--text);
  outline:none;transition:all 0.25s;resize:none;
}
.form-group input:focus, .form-group textarea:focus {
  border-color:var(--blush);background:rgba(255,255,255,0.75);box-shadow:0 0 0 3px rgba(212,122,122,0.1);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--light-text); }

/* ── FOOTER ── */
footer {
  position:relative;z-index:1;text-align:center;padding:2rem;
  font-size:0.7rem;color:var(--light-text);letter-spacing:0.06em;
  border-top:1px solid rgba(212,180,180,0.2);
}

/* ── SCROLL REVEAL ── */
.reveal { opacity:0;transform:translateY(32px);transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }

@keyframes fadeUp {
  from { opacity:0;transform:translateY(24px); }
  to   { opacity:1;transform:translateY(0); }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  nav { padding:1rem 1.5rem; }
  .nav-links { display:none; }
  #hero { flex-direction:column-reverse;padding:7rem 1.5rem 3rem;gap:2rem; }
  .photo-frame { width:240px;height:280px; }
  section { padding:4rem 1.5rem; }
  .about-grid, .contact-wrap { grid-template-columns:1fr; }
}

/* ── Lang Toggle (added to style.css) ── */
.lang-toggle {{
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
  margin-left: 2rem;
}}
.lang-btn {{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 11px;
  border-radius: 100px;
  color: var(--sub);
  transition: all 0.25s;
  font-family: 'DM Sans', sans-serif;
}}
.lang-btn.active {{
  background: var(--blush);
  color: white;
}}