/* ============ Khiat Faten — Portfolio (version statique) ============ */

* { box-sizing: border-box; }

:root {
  --brand-50: #fff1f6;
  --brand-100: #ffe4ee;
  --brand-200: #fecdd9;
  --brand-300: #fda4bf;
  --brand-400: #fb7199;
  --brand-500: #f43f76;
  --brand-600: #e11d5f;
  --brand-700: #be185d;
  --brand-800: #9d174d;
  --brand-900: #831843;
  --brand-950: #4c0519;

  --ink-900: #0b0410;
  --ink-800: #140718;
  --ink-700: #1d0a22;
  --ink-600: #2a1030;

  --font-sans: "Poppins", "Cairo", ui-sans-serif, system-ui, sans-serif;
  --font-ar: "Cairo", "Poppins", ui-sans-serif, sans-serif;

  --bg: #ffffff;
  --text: #1b0a17;
  --muted: #64748b;
  --muted-dark: #94a3b8;
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(190, 24, 93, 0.16);
}

html { scroll-behavior: smooth; }
html, body, #root { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}

html[dir="rtl"] body { font-family: var(--font-ar); }

html.dark body {
  --bg: #0b0410;
  --text: #f8e8f0;
  --card-bg: rgba(20, 7, 24, 0.66);
  --card-border: rgba(251, 113, 153, 0.2);
}

::selection { background: #be185d; color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--brand-50); }
html.dark ::-webkit-scrollbar-track { background: var(--ink-800); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-800));
  border-radius: 999px;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
.container-md { max-width: 1024px; margin: 0 auto; padding: 0 1.25rem; }

.gradient-text {
  background: linear-gradient(100deg, #be185d, #f43f76 45%, #9d174d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.dark .gradient-text {
  background: linear-gradient(100deg, #fb7199, #ffe4ee 45%, #f43f76);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(190, 24, 93, 0.12);
}
html.dark .glass {
  background: rgba(20, 7, 24, 0.66);
  border: 1px solid rgba(251, 113, 153, 0.18);
}

.card {
  border-radius: 1.5rem;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(10px);
}
.card-hover {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px -24px rgba(190, 24, 93, 0.5);
}

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============ keyframes ============ */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(4deg); }
}
.animate-floaty { animation: floaty 7s ease-in-out infinite; }

@keyframes blob {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0,0) scale(1); }
  33% { border-radius: 63% 37% 41% 59% / 58% 63% 37% 42%; transform: translate(24px,-18px) scale(1.06); }
  66% { border-radius: 37% 63% 58% 42% / 63% 37% 59% 41%; transform: translate(-18px,14px) scale(.96); }
}
.animate-blob { animation: blob 16s ease-in-out infinite; }

@keyframes shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.animate-shine {
  background: linear-gradient(100deg,#be185d,#f43f76,#9d174d,#f43f76,#be185d);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 5s linear infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(.85); opacity: .8; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}
.animate-pulse-ring { animation: pulse-ring 2.6s cubic-bezier(.22,1,.36,1) infinite; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 26s linear infinite; }

@keyframes caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.caret { animation: caret 1s step-end infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 22s linear infinite; }

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}
.animate-fade-down { animation: fade-down .45s ease both; }

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1.4s cubic-bezier(0,0,.2,1) infinite; }

@keyframes bounce {
  0%, 100% { transform: translateY(-8%); animation-timing-function: cubic-bezier(.8,0,1,1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,.2,1); }
}
.animate-bounce { animation: bounce 1.4s infinite; }

.grid-bg {
  background-image: linear-gradient(rgba(190,24,93,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,24,93,.07) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 72%);
}
html.dark .grid-bg {
  background-image: linear-gradient(rgba(251,113,153,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,113,153,.09) 1px, transparent 1px);
}

/* ============ background ============ */
.bg-wrap { position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; }
.bg-base { position: absolute; inset: 0; background: var(--bg); transition: background .7s ease; }
.blob { position: absolute; filter: blur(60px); }
.blob-1 { top: -8rem; left: -6rem; width: 28rem; height: 28rem; background: linear-gradient(135deg, rgba(253,164,191,.6), rgba(225,29,95,.4)); }
html.dark .blob-1 { background: linear-gradient(135deg, rgba(157,23,77,.4), rgba(76,5,25,.5)); }
.blob-2 { top: 33%; right: -7rem; width: 26rem; height: 26rem; background: linear-gradient(135deg, rgba(254,205,217,.7), rgba(244,63,118,.4)); animation-delay: 3s; }
html.dark .blob-2 { background: linear-gradient(135deg, rgba(131,24,67,.4), rgba(225,29,95,.3)); }
.blob-3 { bottom: 0; left: 33%; width: 22rem; height: 22rem; background: linear-gradient(135deg, rgba(255,228,238,.8), rgba(251,113,153,.4)); animation-delay: 6s; }
html.dark .blob-3 { background: linear-gradient(135deg, rgba(76,5,25,.5), rgba(157,23,77,.3)); }
.spark { position: absolute; border-radius: 999px; background: rgba(244,63,118,.5); }
html.dark .spark { background: rgba(251,113,153,.6); }

/* ============ navbar ============ */
.progress-bar { position: fixed; inset-inline: 0; top: 0; z-index: 60; height: 3px; background: transparent; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-400), var(--brand-600), var(--brand-800)); transition: width .15s; }

header.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; padding: 1rem 0; transition: padding .5s ease; }
header.site-header.scrolled { padding: .5rem 0; }

nav.navbar {
  margin: 0 .75rem;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 1rem;
  padding: .75rem 1rem;
  transition: all .5s ease;
}
@media (min-width: 1024px) { nav.navbar { margin-inline: auto; padding-inline: 1.5rem; } }
header.site-header.scrolled nav.navbar { box-shadow: 0 18px 40px -28px rgba(190,24,93,.7); }

.brand-btn { display: flex; align-items: center; gap: .75rem; }
.brand-logo {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.75rem; width: 2.75rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
  font-weight: 700; color: #fff;
  box-shadow: 0 10px 25px -8px rgba(225,29,95,.4);
  transition: transform .5s ease;
}
.brand-btn:hover .brand-logo { transform: rotate(12deg); }
.ring { position: absolute; inset: 0; border-radius: .75rem; border: 1px solid rgba(251,113,153,.6); }
.brand-text { display: none; text-align: start; line-height: 1.2; }
@media (min-width: 640px) { .brand-text { display: block; } }
.brand-name { display: block; font-size: .875rem; font-weight: 700; letter-spacing: .02em; }
.brand-sub { display: block; font-size: .688rem; color: rgba(190,24,93,.7); }
html.dark .brand-sub { color: rgba(251,113,153,.6); }

.nav-links { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links button {
  position: relative;
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .3s ease;
}
html.dark .nav-links button { color: #cbd5e1; }
.nav-links button:hover, .nav-links button.active { color: var(--brand-700); }
html.dark .nav-links button:hover, html.dark .nav-links button.active { color: var(--brand-300); }
.nav-underline {
  position: absolute; inset-inline: .5rem; bottom: -1px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-700));
  transform: scaleX(0); transition: transform .3s ease;
}
.nav-links button.active .nav-underline { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  display: grid; place-items: center; height: 2.5rem; width: 2.5rem;
  border-radius: .75rem; border: 1px solid var(--brand-200);
  background: rgba(255,255,255,.7); transition: all .3s ease;
}
html.dark .icon-btn { border-color: rgba(244,63,118,.3); background: rgba(255,255,255,.05); }
.icon-btn:hover { transform: scale(1.1); border-color: var(--brand-500); }

.lang-wrap { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: .375rem; border-radius: .75rem;
  border: 1px solid var(--brand-200); background: rgba(255,255,255,.7);
  padding: .5rem .75rem; font-size: .875rem; font-weight: 600; color: var(--brand-800);
}
html.dark .lang-btn { border-color: rgba(244,63,118,.3); background: rgba(255,255,255,.05); color: var(--brand-200); }
.lang-menu {
  position: absolute; inset-inline-end: 0; margin-top: .5rem; width: 10rem;
  overflow: hidden; border-radius: .75rem; border: 1px solid rgba(190,24,93,.15);
  background: #fff; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); display: none; z-index: 20;
}
html.dark .lang-menu { border-color: rgba(244,63,118,.2); background: var(--ink-700); }
.lang-menu.open { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .625rem .75rem; font-size: .875rem; text-align: start; color: var(--muted);
}
html.dark .lang-menu button { color: #cbd5e1; }
.lang-menu button:hover { background: rgba(255,241,246,.7); }
html.dark .lang-menu button:hover { background: rgba(255,255,255,.05); }
.lang-menu button.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
html.dark .lang-menu button.active { background: rgba(244,63,118,.15); color: var(--brand-200); }

.hire-btn {
  display: none;
  border-radius: .75rem; padding: .625rem 1rem; font-size: .875rem; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-800));
  box-shadow: 0 10px 25px -8px rgba(157,23,77,.25); transition: transform .3s ease;
}
@media (min-width: 768px) { .hire-btn { display: block; } }
.hire-btn:hover { transform: translateY(-2px); }

.burger { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: .75rem; border: 1px solid var(--brand-200); background: rgba(255,255,255,.7); }
html.dark .burger { border-color: rgba(244,63,118,.3); background: rgba(255,255,255,.05); }
@media (min-width: 1024px) { .burger { display: none; } }
.burger span { display: flex; flex-direction: column; gap: 4px; }
.burger i { display: block; height: 2px; width: 20px; background: var(--brand-700); transition: all .3s ease; }
html.dark .burger i { background: var(--brand-300); }
.burger.open .b1 { transform: translateY(6px) rotate(45deg); }
.burger.open .b2 { opacity: 0; }
.burger.open .b3 { transform: translateY(-6px) rotate(-45deg); }

.drawer-overlay {
  position: fixed; inset: 0; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
@media (min-width: 1024px) { .drawer-overlay { display: none; } }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer-bg { position: absolute; inset: 0; background: rgba(76,5,25,.4); backdrop-filter: blur(4px); }
.drawer {
  position: absolute; inset-inline: 1rem; top: 6rem; border-radius: 1.5rem;
  border: 1px solid rgba(190,24,93,.2); background: #fff; padding: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.3);
  transform: translateY(-1.5rem) scale(.95); transition: all .4s ease;
}
html.dark .drawer { border-color: rgba(244,63,118,.2); background: var(--ink-800); }
.drawer-overlay.open .drawer { transform: none; }
.drawer button.nav-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  border-radius: .75rem; padding: .75rem 1rem; text-align: start; font-size: 1rem; font-weight: 500;
  color: #374151;
}
html.dark .drawer button.nav-item { color: #e2e8f0; }
.drawer button.nav-item:hover { background: var(--brand-50); color: var(--brand-700); }
html.dark .drawer button.nav-item:hover { background: rgba(255,255,255,.05); }
.drawer .hire-btn-mobile {
  margin-top: .5rem; width: 100%; border-radius: .75rem; padding: .75rem 1rem; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-800));
}

/* ============ section title ============ */
.section-title { margin-bottom: 3.5rem; max-width: 42rem; }
.section-title.center { margin-inline: auto; text-align: center; }
.tag-pill {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
  border: 1px solid rgba(253,164,191,.7); background: rgba(255,241,246,.8);
  padding: .375rem 1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--brand-700);
}
html.dark .tag-pill { border-color: rgba(244,63,118,.3); background: rgba(244,63,118,.1); color: var(--brand-300); }
.tag-dot { height: .375rem; width: .375rem; border-radius: 999px; background: var(--brand-600); }
html.dark .tag-dot { background: var(--brand-400); }
.section-title h2 { margin: 1.25rem 0 0; font-size: 2rem; font-weight: 800; line-height: 1.15; }
@media (min-width: 640px) { .section-title h2 { font-size: 2.5rem; } }
@media (min-width: 768px) { .section-title h2 { font-size: 3rem; } }
.section-title p { margin-top: 1rem; font-size: 1rem; line-height: 1.6; color: var(--muted); }
html.dark .section-title p { color: #cbd5e1; opacity: .85; }
.title-underline { margin-top: 1.5rem; height: 4px; width: 6rem; border-radius: 999px; background: linear-gradient(90deg, var(--brand-400), var(--brand-800)); }
.section-title.center .title-underline { margin-inline: auto; }

section { position: relative; padding: 6rem 0; }

/* ============ hero ============ */
#home { min-height: 100vh; display: flex; align-items: center; padding-top: 7rem; padding-bottom: 4rem; }
.hero-grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }

.hero-badge { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.7); padding: .5rem 1rem; font-size: .75rem; font-weight: 600; color: var(--brand-700); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
html.dark .hero-badge { border-color: rgba(244,63,118,.3); background: rgba(255,255,255,.05); color: var(--brand-300); }
.dot-wrap { position: relative; display: flex; height: .625rem; width: .625rem; }
.dot-ping { position: absolute; display: inline-flex; height: 100%; width: 100%; border-radius: 999px; background: #22c55e; opacity: .7; }
.dot-solid { position: relative; display: inline-flex; height: .625rem; width: .625rem; border-radius: 999px; background: #22c55e; }

.hero-hello { margin-top: 1.75rem; font-size: 1.125rem; font-weight: 500; color: var(--muted); }
html.dark .hero-hello { color: #cbd5e1; }
.hero-name { margin: .5rem 0 0; font-size: 3rem; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
@media (min-width: 640px) { .hero-name { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero-name { font-size: 4.5rem; } }

.typed-line { margin-top: 1rem; min-height: 2.6rem; display: flex; align-items: center; font-size: 1.25rem; font-weight: 600; color: #334155; }
html.dark .typed-line { color: #e2e8f0; }
@media (min-width: 640px) { .typed-line { font-size: 1.5rem; } }
.typed-line .chev { color: var(--brand-600); }
html.dark .typed-line .chev { color: var(--brand-400); }
.typed-line .caret { margin-inline-start: 2px; display: inline-block; height: 1.5rem; width: 3px; background: var(--brand-600); }
html.dark .typed-line .caret { background: var(--brand-400); }

.hero-desc { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.7; color: var(--muted); }
html.dark .hero-desc { color: rgba(203,213,225,.85); }
@media (min-width: 640px) { .hero-desc { font-size: 1.125rem; } }

.hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.btn-primary {
  position: relative; overflow: hidden; border-radius: 1rem; padding: .875rem 1.75rem; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-800));
  box-shadow: 0 20px 40px -12px rgba(157,23,77,.3); transition: transform .3s ease;
}
.btn-primary:hover { transform: translateY(-3px); }
.btn-outline {
  border-radius: 1rem; padding: .875rem 1.75rem; font-weight: 600; color: var(--brand-700);
  border: 2px solid rgba(190,24,93,.7); transition: all .3s ease;
}
.btn-outline:hover { background: var(--brand-600); color: #fff; transform: translateY(-3px); }
html.dark .btn-outline { color: var(--brand-300); border-color: rgba(251,113,153,.6); }
html.dark .btn-outline:hover { background: var(--brand-600); color: #fff; }

.hero-mail { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--muted); }
html.dark .hero-mail { color: #94a3b8; }
.hero-mail:hover { color: var(--brand-700); text-decoration: underline; }
.hero-mail .env { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 999px; border: 1px solid var(--brand-200); background: rgba(255,255,255,.7); transition: transform .3s; }
html.dark .hero-mail .env { border-color: rgba(244,63,118,.3); background: rgba(255,255,255,.05); }
.hero-mail:hover .env { transform: scale(1.1); }

.stats-row { margin-top: 3rem; display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; max-width: 32rem; border-top: 1px solid rgba(253,164,191,.6); padding-top: 2rem; }
@media (min-width: 640px) { .stats-row { grid-template-columns: repeat(4,1fr); } }
html.dark .stats-row { border-color: rgba(244,63,118,.2); }
.stat { text-align: center; }
.stat-num { display: block; font-size: 1.875rem; font-weight: 800; }
@media (min-width: 640px) { .stat-num { font-size: 2.25rem; } }
.stat-label { margin-top: .25rem; display: block; font-size: .688rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
html.dark .stat-label { color: #94a3b8; }

.portrait-wrap { position: relative; margin-inline: auto; width: 100%; max-width: 26rem; }
.portrait-inner { position: relative; }
.portrait-ring { position: absolute; inset: -1.5rem; border-radius: 42%; border: 2px dashed rgba(251,113,153,.5); }
.portrait-glow { position: absolute; inset: -.75rem; background: linear-gradient(135deg, rgba(251,113,153,.4), rgba(225,29,95,.3), rgba(76,5,25,.3)); filter: blur(24px); }
.portrait-card {
  position: relative; overflow: hidden; border-radius: 2.2rem; border: 1px solid rgba(253,164,191,.7);
  background: rgba(255,255,255,.6); padding: .5rem; box-shadow: 0 30px 60px -20px rgba(157,23,77,.25); backdrop-filter: blur(6px);
}
html.dark .portrait-card { border-color: rgba(244,63,118,.25); background: rgba(255,255,255,.05); }
.portrait-card img { height: 26rem; width: 100%; border-radius: 1.8rem; object-fit: cover; object-position: top; transition: transform .7s; }
.portrait-card:hover img { transform: scale(1.05); }
.portrait-caption { position: absolute; inset-inline: .5rem; bottom: .5rem; border-radius: 1.5rem; background: linear-gradient(to top, rgba(76,5,25,.8), rgba(76,5,25,.1), transparent); padding: 4rem 1.25rem 1.25rem; }
.portrait-caption p:first-child { margin: 0; font-size: .875rem; font-weight: 600; color: #fff; }
.portrait-caption p:last-child { margin: 0; font-size: .75rem; color: rgba(255,241,246,.9); }

.float-chip {
  position: absolute; border-radius: 1rem; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.9);
  padding: .75rem 1rem; font-size: .75rem; font-weight: 700; box-shadow: 0 20px 40px -15px rgba(0,0,0,.2);
}
html.dark .float-chip { border-color: rgba(244,63,118,.25); background: rgba(29,10,34,.9); }
.float-chip span { display: block; font-size: 1.125rem; }
.chip-1 { inset-inline-start: -1.5rem; top: 4rem; }
.chip-2 { inset-inline-end: -1rem; top: 33%; animation-delay: 1.4s; }
.chip-3 { inset-inline-start: -.5rem; bottom: 2.5rem; animation-delay: 2.6s; }

.scroll-hint { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 500; color: rgba(190,24,93,.7); }
html.dark .scroll-hint { color: rgba(251,113,153,.7); }
@media (min-width: 768px) { .scroll-hint { display: flex; } }
.scroll-pill { display: flex; height: 2.25rem; width: 1.25rem; justify-content: center; border-radius: 999px; border: 2px solid rgba(244,63,118,.6); padding: .25rem; }
.scroll-pill i { height: .5rem; width: .25rem; border-radius: 999px; background: var(--brand-600); }
html.dark .scroll-pill i { background: var(--brand-400); }

/* ============ marquee ============ */
.marquee-wrap { position: relative; overflow: hidden; border-block: 1px solid rgba(253,164,191,.6); background: linear-gradient(90deg, var(--brand-50), #fff, var(--brand-50)); padding: 1.25rem 0; }
html.dark .marquee-wrap { border-color: rgba(244,63,118,.15); background: linear-gradient(90deg, var(--ink-800), var(--ink-900, #0b0410), var(--ink-800)); }
.marquee-track { display: flex; width: max-content; gap: 2.5rem; white-space: nowrap; }
.marquee-item { display: flex; align-items: center; gap: .75rem; font-size: 1.125rem; font-weight: 700; color: rgba(157,23,77,.7); }
html.dark .marquee-item { color: rgba(255,228,238,.6); }
.marquee-item i { height: .5rem; width: .5rem; border-radius: 999px; background: var(--brand-500); }
.marquee-fade { position: absolute; inset-block: 0; width: 6rem; pointer-events: none; }
.marquee-fade.start { inset-inline-start: 0; background: linear-gradient(90deg, #fff, transparent); }
.marquee-fade.end { inset-inline-end: 0; background: linear-gradient(270deg, #fff, transparent); }
html.dark .marquee-fade.start { background: linear-gradient(90deg, var(--ink-900, #0b0410), transparent); }
html.dark .marquee-fade.end { background: linear-gradient(270deg, var(--ink-900, #0b0410), transparent); }

/* ============ about ============ */
.about-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.code-card-wrap { position: relative; }
.code-glow { position: absolute; inset: -1rem; border-radius: 1.5rem; background: linear-gradient(135deg, rgba(251,113,153,.3), rgba(157,23,77,.2)); filter: blur(30px); }
.code-card { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(253,164,191,.7); background: #fff; box-shadow: 0 30px 60px -20px rgba(157,23,77,.2); }
html.dark .code-card { border-color: rgba(244,63,118,.2); background: var(--ink-800); }
.code-topbar { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--brand-100); background: rgba(255,241,246,.7); padding: .75rem 1rem; }
html.dark .code-topbar { border-color: rgba(244,63,118,.15); background: rgba(255,255,255,.05); }
.code-topbar .dot { height: .75rem; width: .75rem; border-radius: 999px; }
.code-topbar .dot.red { background: #f87171; }
.code-topbar .dot.amber { background: #fbbf24; }
.code-topbar .dot.green { background: #4ade80; }
.code-topbar span.fname { margin-inline-start: .75rem; font-size: .75rem; font-weight: 500; color: var(--muted); }
html.dark .code-topbar span.fname { color: #94a3b8; }
.code-card pre { direction: ltr; text-align: left; overflow-x: auto; padding: 1.5rem; font-size: .8rem; line-height: 1.75; margin: 0; }
.code-card code { white-space: pre; }
.tok-comment { color: #94a3b8; }
.tok-kw { color: var(--brand-600); }
html.dark .tok-kw { color: var(--brand-400); }
.tok-key { color: var(--brand-700); }
html.dark .tok-key { color: var(--brand-300); }
.tok-str { color: #059669; }
html.dark .tok-str { color: #34d399; }
.tok-punc { color: #94a3b8; }

.about-text p { font-size: 1rem; line-height: 1.75; color: var(--muted); }
html.dark .about-text p { color: rgba(203,213,225,.85); }
@media (min-width: 640px) { .about-text p { font-size: 1.125rem; } }
.facts-grid { margin-top: 2rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
.fact-card { border-radius: 1rem; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.7); padding: 1rem; backdrop-filter: blur(6px); }
html.dark .fact-card { border-color: rgba(244,63,118,.2); background: rgba(255,255,255,.05); }
.fact-card .icon { font-size: 1.5rem; }
.fact-card .label { margin: .5rem 0 0; font-size: .875rem; font-weight: 700; color: var(--brand-800); }
html.dark .fact-card .label { color: var(--brand-200); }
.fact-card .value { margin: .125rem 0 0; font-size: .75rem; color: var(--muted); word-break: break-word; }
html.dark .fact-card .value { color: #94a3b8; }
.about-cta { margin-top: 2rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: 1rem; padding: .875rem 1.5rem; font-weight: 600; color: #fff; background: linear-gradient(90deg, var(--brand-600), var(--brand-800)); box-shadow: 0 20px 40px -12px rgba(157,23,77,.25); transition: transform .3s; }
.about-cta:hover { transform: translateY(-3px); }

/* ============ skills ============ */
.skills-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .skills-grid { grid-template-columns: 1fr 1fr; } }
.skill-card { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.75); padding: 1.75rem; backdrop-filter: blur(6px); }
html.dark .skill-card { border-color: rgba(244,63,118,.2); background: rgba(255,255,255,.05); }
.skill-head { display: flex; align-items: center; gap: .75rem; }
.skill-icon { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 1rem; background: linear-gradient(135deg, var(--brand-500), var(--brand-800)); font-size: 1.25rem; box-shadow: 0 15px 25px -10px rgba(157,23,77,.3); }
.skill-head h3 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--brand-800); }
html.dark .skill-head h3 { color: var(--brand-200); }
.skill-items { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.skill-bar-row { display: flex; align-items: center; justify-content: space-between; font-size: .875rem; }
.skill-bar-row .name { font-weight: 500; color: #334155; }
html.dark .skill-bar-row .name { color: #e2e8f0; }
.skill-bar-row .pct { font-family: monospace; font-size: .75rem; color: var(--brand-700); }
html.dark .skill-bar-row .pct { color: var(--brand-300); }
.skill-track { margin-top: .5rem; height: .625rem; overflow: hidden; border-radius: 999px; background: var(--brand-100); }
html.dark .skill-track { background: rgba(255,255,255,.1); }
.skill-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-400), var(--brand-600), var(--brand-800)); transition: width 1.4s ease-out; }

/* ============ services ============ */
.services-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3,1fr); } }
.service-card { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.75); padding: 1.75rem; backdrop-filter: blur(6px); }
html.dark .service-card { border-color: rgba(244,63,118,.2); background: rgba(255,255,255,.05); }
.service-topline { position: absolute; inset-inline: 0; top: 0; height: 4px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--brand-400), var(--brand-800)); transition: transform .5s; }
.service-card:hover .service-topline { transform: scaleX(1); }
.service-icon { display: grid; place-items: center; height: 3.5rem; width: 3.5rem; border-radius: 1rem; background: linear-gradient(135deg, var(--brand-50), var(--brand-200)); font-size: 1.5rem; box-shadow: inset 0 2px 4px rgba(0,0,0,.06); }
html.dark .service-icon { background: linear-gradient(135deg, rgba(244,63,118,.2), rgba(157,23,77,.3)); }
.service-card h3 { margin: 1.25rem 0 0; font-size: 1.125rem; font-weight: 700; color: var(--brand-800); }
html.dark .service-card h3 { color: #ffe4ee; }
.service-card p { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: var(--muted); }
html.dark .service-card p { color: rgba(203,213,225,.8); }
.service-arrow { margin-top: 1.25rem; display: inline-block; font-size: .875rem; font-weight: 600; color: var(--brand-600); opacity: 0; transition: opacity .5s; }
html.dark .service-arrow { color: var(--brand-400); }
.service-card:hover .service-arrow { opacity: 1; }

/* ============ projects ============ */
.filters { margin-bottom: 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.filter-btn { border-radius: 999px; padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; border: 1px solid var(--brand-200); background: rgba(255,255,255,.7); color: var(--brand-700); transition: all .3s; }
html.dark .filter-btn { border-color: rgba(244,63,118,.25); background: rgba(255,255,255,.05); color: var(--brand-200); }
.filter-btn:hover { border-color: var(--brand-500); background: var(--brand-50); }
.filter-btn.active { transform: scale(1.05); background: linear-gradient(90deg, var(--brand-600), var(--brand-800)); color: #fff; border-color: transparent; box-shadow: 0 15px 25px -10px rgba(157,23,77,.3); }

.projects-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .projects-grid { grid-template-columns: repeat(3,1fr); } }
.project-card { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.8); cursor: pointer; backdrop-filter: blur(6px); }
html.dark .project-card { border-color: rgba(244,63,118,.2); background: rgba(255,255,255,.05); }
.project-thumb { position: relative; height: 13rem; overflow: hidden; }
.project-thumb img { height: 100%; width: 100%; object-fit: cover; transition: transform .9s; }
.project-card:hover .project-thumb img { transform: scale(1.1); }
.thumb-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(76,5,25,.7), transparent 60%); }
.year-badge { position: absolute; top: .75rem; inset-inline-end: .75rem; border-radius: 999px; background: rgba(255,255,255,.9); padding: .25rem .75rem; font-size: .688rem; font-weight: 700; color: var(--brand-800); }
.cat-badges { position: absolute; bottom: .75rem; inset-inline-start: 1rem; display: flex; gap: .5rem; }
.cat-badge { border-radius: 999px; background: rgba(225,29,95,.9); padding: .25rem .625rem; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.project-body { padding: 1.5rem; }
.project-body h3 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--brand-800); }
html.dark .project-body h3 { color: #ffe4ee; }
.project-body .tagline { margin: .25rem 0 0; font-size: .875rem; font-weight: 500; color: rgba(225,29,95,.9); }
html.dark .project-body .tagline { color: rgba(253,164,191,.8); }
.project-body .desc { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.dark .project-body .desc { color: rgba(203,213,225,.75); }
.stack-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.stack-tag { border-radius: 999px; border: 1px solid var(--brand-200); padding: .25rem .625rem; font-size: .688rem; font-weight: 600; color: var(--brand-700); }
html.dark .stack-tag { border-color: rgba(244,63,118,.25); color: var(--brand-300); }
.details-link { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; color: var(--brand-700); }
html.dark .details-link { color: var(--brand-300); }

.modal-overlay { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal-bg { position: absolute; inset: 0; background: rgba(76,5,25,.6); backdrop-filter: blur(8px); }
.modal-box { position: relative; max-height: 88vh; width: 100%; max-width: 56rem; overflow-y: auto; border-radius: 1.5rem; border: 1px solid rgba(253,164,191,.7); background: #fff; box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); }
html.dark .modal-box { border-color: rgba(244,63,118,.25); background: var(--ink-800); }
.modal-hero { position: relative; }
.modal-hero img { height: 16rem; width: 100%; object-fit: cover; }
@media (min-width: 640px) { .modal-hero img { height: 20rem; } }
.modal-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(76,5,25,.85), rgba(76,5,25,.2), transparent); }
.modal-close { position: absolute; top: 1rem; inset-inline-end: 1rem; display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 999px; background: rgba(255,255,255,.9); font-size: 1.125rem; font-weight: 700; color: var(--brand-800); transition: all .3s; }
.modal-close:hover { transform: rotate(90deg); background: var(--brand-600); color: #fff; }
.modal-hero-text { position: absolute; bottom: 1.25rem; inset-inline: 1.5rem; }
.modal-hero-text .year { border-radius: 999px; background: rgba(255,255,255,.9); padding: .25rem .75rem; font-size: .75rem; font-weight: 700; color: var(--brand-800); }
.modal-hero-text h3 { margin: .75rem 0 0; font-size: 1.875rem; font-weight: 800; color: #fff; }
.modal-hero-text p { margin: 0; color: var(--brand-100); }
.modal-content { padding: 1.5rem; }
@media (min-width: 640px) { .modal-content { padding: 2rem; } }
.modal-content > p { font-size: 1rem; line-height: 1.75; color: var(--muted); }
html.dark .modal-content > p { color: rgba(203,213,225,.85); }
.modal-content h4 { margin-top: 1.75rem; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-700); }
html.dark .modal-content h4 { color: var(--brand-300); }
.features-grid { margin-top: 1rem; display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .features-grid { grid-template-columns: 1fr 1fr; } }
.feature-item { display: flex; align-items: flex-start; gap: .75rem; border-radius: 1rem; border: 1px solid var(--brand-100); background: rgba(255,241,246,.6); padding: .75rem; font-size: .875rem; color: #334155; }
html.dark .feature-item { border-color: rgba(244,63,118,.15); background: rgba(255,255,255,.05); color: #e2e8f0; }
.feature-item .check { margin-top: .125rem; color: var(--brand-600); }
html.dark .feature-item .check { color: var(--brand-400); }
.stack-pills { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.stack-pill { border-radius: 999px; background: linear-gradient(90deg, var(--brand-600), var(--brand-800)); padding: .375rem .875rem; font-size: .75rem; font-weight: 600; color: #fff; }

/* ============ journey ============ */
.timeline { position: relative; }
.timeline-line { position: absolute; inset-block: 0; inset-inline-start: 1.25rem; width: 2px; background: linear-gradient(to bottom, var(--brand-400), var(--brand-600), transparent); }
@media (min-width: 768px) { .timeline-line { inset-inline-start: 50%; transform: translateX(-50%); } }
.timeline-item { position: relative; margin-bottom: 2.5rem; display: flex; align-items: flex-start; gap: 1.5rem; padding-inline-start: 3.5rem; }
@media (min-width: 768px) { .timeline-item { padding-inline-start: 0; } .timeline-item.right { flex-direction: row-reverse; } }
.timeline-card-wrap { width: 100%; }
@media (min-width: 768px) { .timeline-card-wrap { width: 50%; padding-inline: 2rem; } }
.timeline-card { border-radius: 1.5rem; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.8); padding: 1.5rem; backdrop-filter: blur(6px); }
html.dark .timeline-card { border-color: rgba(244,63,118,.2); background: rgba(255,255,255,.05); }
.timeline-card .period { display: inline-block; border-radius: 999px; background: linear-gradient(90deg, var(--brand-600), var(--brand-800)); padding: .25rem .75rem; font-size: .75rem; font-weight: 700; color: #fff; }
.timeline-card h3 { margin: .75rem 0 0; font-size: 1.125rem; font-weight: 800; color: var(--brand-800); }
html.dark .timeline-card h3 { color: #ffe4ee; }
.timeline-card .place { margin: .25rem 0 0; font-size: .875rem; font-weight: 600; color: rgba(225,29,95,.9); }
html.dark .timeline-card .place { color: rgba(253,164,191,.9); }
.timeline-card .desc { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: var(--muted); }
html.dark .timeline-card .desc { color: rgba(203,213,225,.8); }
.timeline-icon { position: absolute; top: 1rem; inset-inline-start: 0; display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 999px; border: 4px solid #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-800)); font-size: 1rem; box-shadow: 0 15px 25px -10px rgba(0,0,0,.3); }
html.dark .timeline-icon { border-color: var(--ink-900); }
@media (min-width: 768px) { .timeline-icon { position: static; margin-top: 1rem; } }
.timeline-spacer { display: none; }
@media (min-width: 768px) { .timeline-spacer { display: block; width: 50%; } }

/* ============ contact ============ */
.contact-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: .85fr 1.15fr; } }
.contact-info { display: flex; flex-direction: column; gap: 1rem; }
.info-card { display: flex; align-items: center; gap: 1rem; border-radius: 1.5rem; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.8); padding: 1.25rem; backdrop-filter: blur(6px); }
html.dark .info-card { border-color: rgba(244,63,118,.2); background: rgba(255,255,255,.05); }
.info-icon { display: grid; place-items: center; flex-shrink: 0; height: 3.5rem; width: 3.5rem; border-radius: 1rem; font-size: 1.5rem; color: #fff; box-shadow: 0 15px 25px -10px rgba(157,23,77,.3); }
.info-icon.mail { background: linear-gradient(135deg, var(--brand-500), var(--brand-800)); }
.info-icon.pin { background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); }
.info-icon.bolt { background: linear-gradient(135deg, var(--brand-600), var(--brand-900)); }
.info-text .k { display: block; font-size: .688rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-600); }
html.dark .info-text .k { color: var(--brand-300); }
.info-text .v { display: block; font-size: .875rem; font-weight: 600; color: #334155; }
html.dark .info-text .v { color: #e2e8f0; }
.contact-cta-card { position: relative; overflow: hidden; border-radius: 1.5rem; background: linear-gradient(135deg, var(--brand-600), var(--brand-900)); padding: 1.5rem; color: #fff; }
.contact-cta-card p.name { font-size: 1.125rem; font-weight: 700; margin: 0; }
.contact-cta-card p.role { margin-top: .25rem; font-size: .875rem; color: var(--brand-100); }
.contact-cta-card p.langs { margin-top: 1rem; font-size: .75rem; color: rgba(255,241,246,.8); }

.contact-form { border-radius: 1.5rem; border: 1px solid rgba(253,164,191,.7); background: rgba(255,255,255,.8); padding: 1.5rem; backdrop-filter: blur(6px); }
@media (min-width: 640px) { .contact-form { padding: 2rem; } }
html.dark .contact-form { border-color: rgba(244,63,118,.2); background: rgba(255,255,255,.05); }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field {
  width: 100%; border-radius: 1rem; border: 1px solid var(--brand-200); background: rgba(255,255,255,.8);
  padding: .875rem 1rem; font-size: .875rem; outline: none; transition: all .3s;
}
html.dark .field { border-color: rgba(244,63,118,.25); background: rgba(255,255,255,.05); color: #f1f5f9; }
.field::placeholder { color: #94a3b8; }
.field:focus { border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(244,63,118,.15); }
.field.mt { margin-top: 1rem; }
textarea.field { resize: none; }
.submit-btn { position: relative; overflow: hidden; margin-top: 1.25rem; width: 100%; border-radius: 1rem; padding: 1rem 1.5rem; font-weight: 700; color: #fff; background: linear-gradient(90deg, var(--brand-600), var(--brand-800)); box-shadow: 0 20px 40px -12px rgba(157,23,77,.25); transition: transform .3s; }
.submit-btn:hover { transform: translateY(-3px); }
.sent-msg { margin-top: 1rem; border-radius: 1rem; background: #f0fdf4; padding: .75rem 1rem; text-align: center; font-size: .875rem; font-weight: 600; color: #15803d; display: none; }
html.dark .sent-msg { background: rgba(34,197,94,.1); color: #86efac; }
.sent-msg.show { display: block; }

/* ============ footer ============ */
footer.site-footer { position: relative; border-top: 1px solid rgba(253,164,191,.6); background: linear-gradient(to bottom, transparent, rgba(255,241,246,.6)); padding: 3rem 0; }
html.dark footer.site-footer { border-color: rgba(244,63,118,.15); background: linear-gradient(to bottom, transparent, var(--ink-800)); }
.footer-top { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
@media (min-width: 768px) { .footer-top { flex-direction: row; justify-content: space-between; text-align: start; } }
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-logo { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 1rem; background: linear-gradient(135deg, var(--brand-500), var(--brand-800)); font-weight: 700; color: #fff; box-shadow: 0 10px 20px -8px rgba(0,0,0,.3); }
.footer-brand .name { display: block; font-weight: 800; }
.footer-brand a.mail { font-size: .75rem; color: var(--muted); }
html.dark .footer-brand a.mail { color: #94a3b8; }
.footer-brand a.mail:hover { color: var(--brand-700); text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem; }
.footer-links button { font-size: .875rem; font-weight: 500; color: var(--muted); }
html.dark .footer-links button { color: #cbd5e1; }
.footer-links button:hover { color: var(--brand-700); }
html.dark .footer-links button:hover { color: var(--brand-300); }
.to-top { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 1rem; border: 1px solid var(--brand-300); color: var(--brand-700); transition: all .3s; }
html.dark .to-top { border-color: rgba(244,63,118,.3); color: var(--brand-300); }
.to-top:hover { background: var(--brand-600); color: #fff; transform: translateY(-3px); }
.footer-bottom { margin-top: 2rem; border-top: 1px solid rgba(253,164,191,.6); padding-top: 1.5rem; text-align: center; font-size: .75rem; color: var(--muted); }
html.dark .footer-bottom { border-color: rgba(244,63,118,.15); color: #94a3b8; }
.footer-bottom p { margin: .25rem 0; }