@import url('https://fonts.googleapis.com/css2?family=Titan+One&family=Outfit:wght@400;500;600;700;800;900&family=Caveat:wght@400;600;700;800&display=swap');

:root {
  --bg:       #07070f;
  --yellow:   #FFE94E;
  --pink:     #FF4ECD;
  --mint:     #4EFFB4;
  --blue:     #4E9EFF;
  --orange:   #FF8C4E;
  --purple:   #C44EFF;
  --white:    #ffffff;
  --card-bg:  #101020;
  --card-bg2: #0c0c1a;
  --border:   rgba(255,255,255,0.07);
  --font-display: 'Titan One', cursive;
  --font-body:    'Outfit', sans-serif;
  --font-hand:    'Caveat', cursive;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width:7px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--pink),var(--purple)); border-radius:4px; }

/* ====== CURSOR ====== */
.cursor {
  width:20px; height:20px; background:var(--yellow);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition:transform 0.05s;
}
.cursor-trail {
  width:42px; height:42px; border:2px solid var(--pink);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:left 0.12s ease, top 0.12s ease;
}

@media (hover:none), (pointer:coarse) {
  .cursor,
  .cursor-trail {
    display:none;
  }
}

/* ====== NAV ====== */
nav {
  position:fixed; top:0; width:100%; z-index:1000;
  padding:1rem 3rem;
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(7,7,15,0.88);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  transform:translateY(0);
  transition:transform 0.35s ease, background 0.3s ease, border-color 0.3s ease;
  will-change:transform;
}
nav.nav-hidden { transform:translateY(calc(-100% - 2px)); }
nav:hover,
nav:focus-within {
  transform:translateY(0);
}
.nav-logo {
  font-family:var(--font-display);
  font-size:1.5rem; color:var(--yellow);
  text-decoration:none; letter-spacing:1px;
  text-shadow:0 0 28px rgba(255,233,78,0.55);
}
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  color:rgba(255,255,255,0.65); text-decoration:none;
  font-weight:700; font-size:0.82rem;
  letter-spacing:2px; text-transform:uppercase;
  position:relative; padding-bottom:4px;
  transition:color 0.3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--pink);
  transition:width 0.3s; border-radius:2px;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-menu-btn { display:none; background:none; border:none; color:var(--yellow); font-size:1.5rem; cursor:pointer; }

/* ====== MARQUEE ====== */
.marquee-bar { background:var(--yellow); padding:0.5rem 0; overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-flex; animation:marquee 32s linear infinite; }
.marquee-track span { color:var(--bg); font-family:var(--font-hand); font-size:1.1rem; font-weight:700; padding:0 2.5rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ====== HERO ====== */
.hero {
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8rem 2rem 5rem;
  position:relative; overflow:hidden;
}
.hero-bg-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 20% 40%, rgba(255,78,205,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 25%, rgba(78,159,255,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 55% 80%, rgba(78,255,180,0.1) 0%, transparent 70%);
}
.floating-emojis { position:absolute; inset:0; pointer-events:none; }
.emoji-float { position:absolute; user-select:none; will-change:transform; }
.hero-badge {
  display:inline-block; background:var(--pink); color:#fff;
  font-family:var(--font-hand); font-size:1rem; font-weight:700;
  letter-spacing:1px; padding:0.4rem 1.5rem; border-radius:100px;
  margin-bottom:1.8rem; animation:badgePop 2.8s ease-in-out infinite;
}
@keyframes badgePop { 0%,100%{transform:scale(1) rotate(-1deg)} 50%{transform:scale(1.07) rotate(1deg)} }

.hero-name {
  font-family:var(--font-display);
  font-size:clamp(5rem, 22vw, 17rem);
  line-height:0.85; letter-spacing:-0.01em;
  background:linear-gradient(130deg, var(--yellow) 0%, var(--pink) 45%, var(--mint) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:1.2rem;
  animation:nameGlitch 9s infinite;
}
@keyframes nameGlitch {
  0%,88%,100%{ filter:none; transform:none; }
  89%{ transform:translate(-4px,0); filter:drop-shadow(4px 0 var(--pink)); }
  90%{ transform:translate(4px,0); filter:drop-shadow(-4px 0 var(--mint)); }
  91%{ transform:none; filter:none; }
}
.hero-tagline {
  font-family:var(--font-hand);
  font-size:clamp(1.2rem, 3.5vw, 2rem);
  color:rgba(255,255,255,0.8);
  margin-bottom:2.5rem;
  transform:rotate(-2deg); display:inline-block;
}
.hero-pills {
  display:flex; gap:1rem; flex-wrap:wrap;
  justify-content:center; margin-bottom:2.8rem;
}
.pill {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:100px; padding:0.55rem 1.3rem;
  font-size:0.88rem; font-weight:600;
  display:flex; align-items:center; gap:0.5rem;
  transition:transform 0.2s, border-color 0.3s;
}
.pill:hover { transform:translateY(-4px); border-color:var(--yellow); }
.hero-cta-row { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }

/* ====== BUTTONS ====== */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.85rem 2rem; border-radius:100px;
  font-family:var(--font-display); font-size:0.95rem; letter-spacing:0.5px;
  text-decoration:none; transition:transform 0.2s, box-shadow 0.3s;
  cursor:pointer; border:none;
}
.btn-primary {
  background:linear-gradient(135deg, var(--pink), var(--purple));
  color:#fff; box-shadow:0 4px 24px rgba(255,78,205,0.4);
}
.btn-primary:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 8px 32px rgba(255,78,205,0.6); }
.btn-outline { background:transparent; color:var(--white); border:2px solid var(--border); }
.btn-outline:hover { border-color:var(--mint); color:var(--mint); transform:translateY(-3px); }

/* ====== SECTION BASE ====== */
.section { padding:5.5rem 2rem; max-width:1200px; margin:0 auto; }
.section-label {
  display:inline-block;
  background:rgba(255,78,205,0.12); border:1px solid rgba(255,78,205,0.3);
  color:var(--pink); font-family:var(--font-hand); font-size:0.95rem; font-weight:700;
  letter-spacing:1px; padding:0.3rem 1rem; border-radius:100px; margin-bottom:0.8rem;
}
.section-title {
  font-family:var(--font-display);
  font-size:clamp(2.5rem, 7vw, 5rem);
  line-height:1; margin-bottom:0.5rem;
}
.section-sub {
  font-family:var(--font-hand); font-size:1.1rem;
  opacity:0.5; display:inline-block;
  transform:rotate(-1deg); margin-bottom:3rem;
}

/* ====== HOME FEATURE CARDS ====== */
.feature-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; }
.fcard {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:24px; padding:0; overflow:hidden;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s;
  text-decoration:none; color:inherit; display:block;
}
.fcard:hover { transform:translateY(-10px) rotate(1deg); box-shadow:0 24px 48px rgba(255,78,205,0.15); }
.fcard-img {
  width: 100%;
  aspect-ratio: 3 / 4; /* Portrait */
  object-fit: cover;
  display: block;
}
.fcard-body { padding:1.5rem; }
.fcard-case {
  font-family:var(--font-hand); font-size:0.9rem; font-weight:700;
  color:var(--pink); letter-spacing:1px; margin-bottom:0.3rem;
}
.fcard-title { font-family:var(--font-display); font-size:1.5rem; color:var(--yellow); margin-bottom:0.4rem; }
.fcard-text { font-size:0.9rem; line-height:1.7; opacity:0.7; }

/* ====== ABOUT PAGE ====== */
.about-hero-photo {
  width:100%;
  max-width:520px;
  margin:0 auto 3rem;
  aspect-ratio:4/3;
  border-radius:28px;
  overflow:hidden;
  position:relative;
}

.about-hero-photo {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 3rem;
  aspect-ratio: 4/3;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}

.about-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trait-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.2rem; }
.trait-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:20px; padding:1.8rem;
  transition:transform 0.3s;
}
.trait-card:hover { transform:translateY(-6px) rotate(-1deg); }
.trait-icon { font-size:2.2rem; margin-bottom:0.8rem; }
.trait-name {
  font-family:var(--font-display); font-size:1.2rem;
  color:var(--yellow); margin-bottom:0.4rem;
}
.trait-desc { font-size:0.88rem; line-height:1.7; opacity:0.7; }

/* ====== MOMENTS / PHOTO GRID ====== */
.photo-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:2rem;
}
.photo-slot {
  position:relative; background:#fff;
  padding:0.85rem 0.85rem 3.8rem;
  box-shadow:0 8px 28px rgba(0,0,0,0.5);
  transform:rotate(var(--r, -3deg));
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s, z-index 0s;
  cursor:pointer;
}
.photo-slot:hover { transform:rotate(0) scale(1.07); box-shadow:0 20px 60px rgba(0,0,0,0.65); z-index:20; }
.photo-slot-inner {
  width:100%; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; overflow:hidden; position:relative;
}
.photo-slot-inner img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-slot-caption {
  position:absolute; bottom:0.6rem; left:0; right:0;
  padding:0 0.8rem;
}
.photo-slot-caption .ps-case {
  font-family:var(--font-hand); font-size:0.7rem; font-weight:700;
  color:#999; letter-spacing:1px; text-transform:uppercase;
}
.photo-slot-caption .ps-title {
  font-family:var(--font-hand); font-size:1rem; font-weight:700;
  color:#222; line-height:1.3;
}

/* Gradient bg helpers for photo slots */
.gb-1{background:linear-gradient(135deg,#FFE94E,#FF8C4E)}
.gb-2{background:linear-gradient(135deg,#FF4ECD,#C44EFF)}
.gb-3{background:linear-gradient(135deg,#4EFFB4,#4E9EFF)}
.gb-4{background:linear-gradient(135deg,#4E9EFF,#C44EFF)}
.gb-5{background:linear-gradient(135deg,#FFE94E,#4EFFB4)}
.gb-6{background:linear-gradient(135deg,#FF4ECD,#FF8C4E)}
.gb-7{background:linear-gradient(135deg,#C44EFF,#4E9EFF)}
.gb-8{background:linear-gradient(135deg,#4EFFB4,#FFE94E)}
.gb-9{background:linear-gradient(135deg,#FF8C4E,#FF4ECD)}
.gb-10{background:linear-gradient(135deg,#4E9EFF,#FFE94E)}
.gb-11{background:linear-gradient(135deg,#C44EFF,#4EFFB4)}
.gb-12{background:linear-gradient(135deg,#FFE94E,#C44EFF)}
.gb-13{background:linear-gradient(135deg,#4EFFB4,#FF4ECD)}
.gb-14{background:linear-gradient(135deg,#FF4ECD,#4E9EFF)}
.gb-15{background:linear-gradient(135deg,#FF8C4E,#4EFFB4)}
.gb-16{background:linear-gradient(135deg,#4E9EFF,#FF4ECD)}

/* ====== PHOTO ADD SLOT ====== */
.photo-add {
  background:rgba(255,255,255,0.02);
  border:2px dashed rgba(255,255,255,0.1);
  border-radius:20px; aspect-ratio:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:0.6rem; cursor:pointer;
  transition:border-color 0.3s, background 0.3s;
}
.photo-add:hover { border-color:var(--pink); background:rgba(255,78,205,0.05); }
.photo-add span { font-size:2.5rem; }
.photo-add p { font-family:var(--font-hand); font-size:0.9rem; opacity:0.4; }

/* ====== FAMILY ====== */
.family-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:2rem; }
.fam-card {
  background:var(--card-bg); border-radius:28px; padding:0; overflow:hidden;
  position:relative; z-index:0;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.fam-card::before {
  content:''; position:absolute; inset:-2px; border-radius:30px; z-index:-1;
  background:linear-gradient(135deg,var(--pink),var(--mint),var(--yellow));
  opacity:0; transition:opacity 0.35s;
}
.fam-card:hover { transform:translateY(-12px); }
.fam-card:hover::before { opacity:1; }
.fam-card::after { content:''; position:absolute; inset:0; border-radius:28px; z-index:-1; background:var(--card-bg); }

.fam-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.fam-photo-label {
  position:absolute; top:0.75rem; left:0.75rem;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(8px);
  color:#fff; font-family:var(--font-hand); font-size:0.78rem; font-weight:700;
  padding:0.2rem 0.7rem; border-radius:100px;
}
.fam-body { padding:1.5rem; text-align:center; position:relative; z-index:1; }
.fam-role { font-family:var(--font-hand); font-size:0.9rem; font-weight:700; color:var(--pink); margin-bottom:0.3rem; }
.fam-name { font-family:var(--font-display); font-size:2rem; color:var(--yellow); margin-bottom:0.2rem; }
.fam-title { font-family:var(--font-hand); font-size:0.9rem; color:var(--mint); margin-bottom:0.8rem; display:inline-block; transform:rotate(-1.5deg); }
.fam-desc { font-size:0.87rem; opacity:0.65; line-height:1.7; }
.fam-tags { display:flex; flex-wrap:wrap; gap:0.4rem; justify-content:center; margin-top:1rem; }

/* ====== BADGES ====== */
.badge {
  display:inline-block; padding:0.25rem 0.8rem; border-radius:100px;
  font-size:0.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
}
.badge-y{ background:var(--yellow); color:var(--bg); }
.badge-p{ background:var(--pink); color:#fff; }
.badge-m{ background:var(--mint); color:var(--bg); }
.badge-b{ background:var(--blue); color:var(--bg); }
.badge-pr{ background:var(--purple); color:#fff; }

/* ====== CONTACT PAGE ====== */
.contact-hero-txt {
  font-family:var(--font-display);
  font-size:clamp(3rem,10vw,8rem);
  line-height:1;
  background:linear-gradient(130deg,var(--yellow) 0%,var(--pink) 55%,var(--mint) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:1rem;
}
.contact-form-wrap {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:32px; padding:3rem; position:relative; overflow:hidden;
  max-width:700px; margin:0 auto;
}
.contact-form-wrap::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,78,205,0.06),rgba(78,255,180,0.06));
}
.contact-form-wrap > * { position:relative; }
.form-group { margin-bottom:1.5rem; }
.form-label {
  display:block; font-family:var(--font-hand);
  font-size:1rem; font-weight:700; color:var(--yellow); margin-bottom:0.5rem;
}
.form-input, .form-textarea, .form-select {
  width:100%; background:rgba(255,255,255,0.05);
  border:1.5px solid var(--border); border-radius:16px;
  padding:0.9rem 1.2rem; color:var(--white);
  font-family:var(--font-body); font-size:0.95rem;
  transition:border-color 0.3s, background 0.3s;
  outline:none; resize:none;
  -webkit-appearance:none; appearance:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--pink); background:rgba(255,78,205,0.06);
}
.form-input::placeholder, .form-textarea::placeholder { opacity:0.35; }
.form-textarea { min-height:160px; }
.form-select option { background:var(--card-bg); color:var(--white); }

.emoji-picker { display:flex; gap:0.6rem; flex-wrap:wrap; }
.ep-btn {
  background:rgba(255,255,255,0.05); border:1.5px solid var(--border);
  border-radius:12px; padding:0.5rem 0.8rem; font-size:1.4rem;
  cursor:pointer; transition:transform 0.2s, border-color 0.2s, background 0.2s;
}
.ep-btn:hover, .ep-btn.picked { transform:scale(1.2); border-color:var(--yellow); background:rgba(255,233,78,0.1); }

.submit-btn {
  width:100%; padding:1rem; border:none; border-radius:16px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff; font-family:var(--font-display); font-size:1.1rem;
  cursor:pointer; letter-spacing:0.5px;
  transition:transform 0.2s, box-shadow 0.3s;
  box-shadow:0 4px 24px rgba(255,78,205,0.4);
}
.submit-btn:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(255,78,205,0.6); }
.submit-btn:active { transform:translateY(0); }

.message-wall { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem; margin-top:2rem; }
.message-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:24px; padding:1.5rem;
  position:relative; overflow:hidden;
  transition:transform 0.3s;
  animation:cardIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes cardIn { from{opacity:0; transform:translateY(20px) scale(0.9)} to{opacity:1; transform:none} }
.message-card:hover { transform:translateY(-5px) rotate(0.8deg); }
.message-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--pink),var(--mint));
}
.mc-header { display:flex; align-items:center; gap:0.8rem; margin-bottom:0.8rem; }
.mc-emoji { font-size:1.8rem; }
.mc-name { font-family:var(--font-display); font-size:1.1rem; color:var(--yellow); }
.mc-rel { font-family:var(--font-hand); font-size:0.8rem; color:var(--pink); }
.mc-text { font-size:0.9rem; line-height:1.7; opacity:0.75; }
.mc-date { font-family:var(--font-hand); font-size:0.78rem; opacity:0.35; margin-top:0.8rem; }

.success-msg {
  display:none; text-align:center; padding:2rem;
  font-family:var(--font-display); font-size:1.5rem; color:var(--mint);
}
.success-msg .s-icon { font-size:4rem; display:block; margin-bottom:1rem; animation:bounce 0.6s ease; }
@keyframes bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

.time-capsule-note {
  background:linear-gradient(135deg,rgba(78,255,180,0.08),rgba(78,159,255,0.08));
  border:1px solid rgba(78,255,180,0.15);
  border-radius:20px; padding:1.5rem 2rem;
  display:flex; gap:1rem; align-items:flex-start;
  margin-bottom:3rem;
}
.tc-icon { font-size:2rem; flex-shrink:0; }
.tc-text p { font-size:0.9rem; line-height:1.7; opacity:0.75; }
.tc-text strong { color:var(--mint); font-family:var(--font-hand); font-size:1rem; display:block; margin-bottom:0.3rem; }

/* ====== PAGE HERO ====== */
.page-hero { padding:9rem 2rem 4rem; text-align:center; position:relative; overflow:hidden; }
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at center, rgba(255,78,205,0.1) 0%, transparent 70%);
}
.page-hero h1 {
  font-family:var(--font-display);
  font-size:clamp(3.5rem,12vw,9rem); line-height:1;
  background:linear-gradient(130deg,var(--yellow) 0%,var(--pink) 55%,var(--mint) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:1rem;
}
.page-hero p { font-family:var(--font-hand); font-size:1.1rem; opacity:0.55; transform:rotate(-1deg); display:inline-block; }

/* ====== FOOTER ====== */
footer {
  background:var(--card-bg); border-top:1px solid var(--border);
  padding:4rem 2rem 3rem; text-align:center;
}
.footer-logo { font-family:var(--font-display); font-size:2.5rem; color:var(--yellow); text-shadow:0 0 30px rgba(255,233,78,0.4); margin-bottom:1rem; }
.footer-text { opacity:0.4; font-size:0.88rem; line-height:1.9; max-width:480px; margin:0 auto 1.5rem; }
.footer-hearts { font-size:1.8rem; animation:heartBeat 1.4s ease-in-out infinite; }
@keyframes heartBeat { 0%,100%{transform:scale(1)} 25%{transform:scale(1.15)} 75%{transform:scale(1.1)} }
.footer-links { display:flex; gap:2rem; justify-content:center; list-style:none; margin-bottom:2rem; }
.footer-links a {
  color:rgba(255,255,255,0.4); text-decoration:none;
  font-size:0.82rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  transition:color 0.3s;
}
.footer-links a:hover { color:var(--pink); }

/* ====== NOISE OVERLAY ====== */
.noise {
  position:fixed; inset:0; pointer-events:none; z-index:99997; opacity:0.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ====== GLOW DIVIDER ====== */
.glow-divider { width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--pink),transparent); }

/* ====== ANIMATE IN ====== */
.anim { opacity:0; transform:translateY(36px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.34,1.56,0.64,1); }
.anim.in { opacity:1; transform:translateY(0); }

/* ====== RESPONSIVE ====== */
@media (max-width:768px) {
  body { min-width:0; }
  nav {
    padding:0.75rem 1rem;
    align-items:center;
    transform:none !important;
  }
  nav.nav-hidden { transform:none !important; }
  .nav-logo {
    font-size:1.25rem;
    letter-spacing:0.5px;
  }
  .nav-links {
    display:none;
    list-style:none;
  }
  .nav-menu-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:2.5rem;
    height:2.5rem;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:999px;
    background:rgba(255,255,255,0.04);
    line-height:1;
    position:relative;
    z-index:10001;
  }
  .nav-links.open {
    display:flex;
    flex-direction:column;
    position:absolute;
    top:calc(100% + 0.6rem);
    left:1rem;
    right:1rem;
    background:rgba(12,12,26,0.96);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    box-shadow:0 22px 60px rgba(0,0,0,0.42);
    backdrop-filter:blur(22px);
    padding:0.65rem;
    gap:0.25rem;
    z-index:10000;
  }
  .nav-links.open li { width:100%; }
  .nav-links.open a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:0.9rem 1rem;
    border-radius:14px;
    font-size:0.88rem;
    letter-spacing:1.5px;
    background:rgba(255,255,255,0.025);
  }
  .nav-links.open a::after { display:none; }
  .nav-links.open a.active {
    color:var(--yellow);
    background:rgba(255,233,78,0.09);
  }
  .hero {
    min-height:100svh;
    padding:7rem 1rem 3.5rem;
  }
  .hero-name {
    width:100%;
    max-width:100%;
    overflow:visible;
    font-size:clamp(3rem, 15vw, 5.5rem);
    line-height:0.95;
    letter-spacing:0;
    padding:0 0.35rem;
    animation:none;
  }
  .hero-tagline {
    font-size:1.15rem;
    line-height:1.45;
  }
  .hero-pills {
    gap:0.65rem;
    margin-bottom:2rem;
  }
  .pill {
    width:100%;
    justify-content:center;
    padding:0.65rem 1rem;
  }
  .hero-cta-row,
  .btn {
    width:100%;
  }
  .btn {
    justify-content:center;
    padding:0.85rem 1rem;
  }
  .section { padding:3.5rem 1rem; }
  .section-title { font-size:clamp(2.05rem, 12vw, 3.2rem); }
  .page-hero {
    padding:7rem 1rem 3rem;
  }
  .contact-page-hero {
    min-height:auto !important;
    padding:7rem 1rem 3rem !important;
  }
  .envelope-hero {
    margin-bottom:1rem !important;
  }
  .page-hero h1,
  .contact-hero-txt,
  .contact-page-hero h1 {
    font-size:clamp(2.7rem, 16vw, 4.6rem) !important;
    letter-spacing:0 !important;
  }
  .feature-cards,
  .trait-grid,
  .family-grid,
  .message-wall {
    grid-template-columns:minmax(0, 1fr);
  }
  .contact-form-wrap {
    padding:1.5rem 1rem;
    border-radius:22px;
  }
  .time-capsule-note {
    flex-direction:column;
    padding:1.25rem;
  }
  .photo-grid {
    grid-template-columns:minmax(0, 1fr);
    gap:1.35rem;
  }
  .photo-slot {
    transform:rotate(0);
  }
  .footer-links {
    flex-wrap:wrap;
    gap:0.9rem 1.25rem;
  }
}

@media (max-width:420px) {
  .hero-name {
    font-size:clamp(2.65rem, 14vw, 3.6rem);
  }
  .hero-badge,
  .marquee-track span {
    font-size:0.95rem;
  }
  .section {
    padding-left:0.9rem;
    padding-right:0.9rem;
  }
  .fcard-body,
  .trait-card,
  .fam-body,
  .message-card {
    padding:1.25rem;
  }
}