:root{
  --bd-ink: #0e0b14;
  --bd-bg: #0b0910;
  --bd-card: rgba(255,255,255,.08);
  --bd-card2: rgba(255,255,255,.06);
  --bd-border: rgba(255,255,255,.12);
  --bd-text: rgba(255,255,255,.92);
  --bd-muted: rgba(255,255,255,.68);
  --bd-pink:#ff6ea8;
  --bd-purple:#9b87ff;
  --bd-cyan:#55e6ff;
  --bd-peach:#ffb26a;
  --bd-shadow: 0 18px 60px rgba(0,0,0,.55);
  --bd-radius: 22px;
}

html, body{ height:100%; }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 15% -10%, rgba(155,135,255,.28), transparent 60%),
              radial-gradient(900px 700px at 90% 0%, rgba(255,110,168,.18), transparent 55%),
              radial-gradient(900px 700px at 80% 100%, rgba(85,230,255,.12), transparent 60%),
              linear-gradient(180deg, #0b0910 0%, #07060c 100%);
  color: var(--bd-text);
  overflow-x: hidden;
}

a{ color: rgba(255,255,255,.92); }
a:hover{ color: white; }

.navbar{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(10,8,14,.62) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.navbar-brand{
  letter-spacing: -0.02em;
}


.brand-photo-sm{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 30px rgba(155,135,255,.20);
}

.brand-photo-lg{
  width: 72px;
  height: 72px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}


.brand-mark{
  width: 38px; height: 38px; border-radius: 14px;
  background: radial-gradient(16px 16px at 25% 25%, rgba(255,255,255,.9), transparent 70%),
              radial-gradient(22px 22px at 70% 30%, rgba(255,255,255,.65), transparent 75%),
              linear-gradient(135deg, rgba(255,110,168,1), rgba(155,135,255,1));
  box-shadow: 0 14px 30px rgba(155,135,255,.25);
}

.navbar .nav-link{
  color: rgba(255,255,255,.75);
  font-weight: 600;
}
.navbar .nav-link:hover, .navbar .nav-link:focus{ color: rgba(255,255,255,.95); }
.navbar .nav-link.active{ color: #fff; }

.hero{
  position: relative;
  overflow: hidden;
  padding: 6.2rem 0 4.5rem;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-240px;
  background:
    radial-gradient(520px 420px at 12% 20%, rgba(255,110,168,.45), transparent 62%),
    radial-gradient(620px 480px at 58% 18%, rgba(155,135,255,.50), transparent 64%),
    radial-gradient(680px 520px at 92% 55%, rgba(255,178,106,.30), transparent 66%),
    radial-gradient(680px 520px at 20% 88%, rgba(85,230,255,.22), transparent 68%);
  filter: blur(32px);
  opacity: .95;
  animation: floatGlow 14s ease-in-out infinite alternate;
  transform: translateZ(0);
}

@keyframes floatGlow{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-28px,0) scale(1.03); }
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(7,6,12,.15) 0%, rgba(7,6,12,.82) 80%, rgba(7,6,12,1) 100%);
  pointer-events:none;
}

.hero-photo-wrap{
  position: relative;
  overflow: hidden;
  border-radius: var(--bd-radius);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

.hero-photo{
  width: 100%;
  height: clamp(240px, 32vw, 360px);
  object-fit: cover;
  object-position: 50% 35%;
  object-position: 50% 35%;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.hero-photo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(7,6,12,0) 0%, rgba(7,6,12,.40) 68%, rgba(7,6,12,.70) 100%);
  pointer-events:none;
}

.hero-photo-caption{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1rem .9rem;
  z-index: 1;
}

.hero .container{ position:relative; z-index:1; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding: .45rem .85rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.kicker-dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--bd-pink), var(--bd-purple));
  box-shadow: 0 0 18px rgba(155,135,255,.35);
}

h1{
  letter-spacing: -0.03em;
}
.lead{ color: var(--bd-muted); }

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--bd-radius);
  box-shadow: var(--bd-shadow);
}

.badge-skill{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  border-radius: 999px;
  padding: .45rem .75rem;
  font-weight: 600;
}

.btn-primary{
  border: 0;
  background: linear-gradient(135deg, rgba(255,110,168,1), rgba(155,135,255,1));
  box-shadow: 0 16px 36px rgba(155,135,255,.20);
}
.btn-primary:hover, .btn-primary:focus{ filter: brightness(.98) saturate(1.06); }
.btn-outline-light{
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.88);
}
.btn-outline-light:hover, .btn-outline-light:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.36);
  color: #fff;
}

.section{
  padding: 4.5rem 0;
}

.section-title{
  letter-spacing: -0.02em;
}

.icon-pill{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.card-tilt{
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card-tilt:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

.timeline{
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: 1.25rem;
}
.timeline .item{
  position:relative;
  padding: 0 0 1.35rem 0;
}
.timeline .item::before{
  content:"";
  position:absolute;
  left:-1.52rem;
  top:.25rem;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--bd-cyan), var(--bd-purple));
  box-shadow: 0 0 16px rgba(85,230,255,.25);
}

.gallery-thumb{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gallery-thumb:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.gallery-thumb img{
  width:100%; height:auto; display:block;
  filter: saturate(1.05) contrast(1.02);
}

.form-control, .form-select, textarea{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.form-control:focus, textarea:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(155,135,255,.55);
  box-shadow: 0 0 0 .25rem rgba(155,135,255,.18);
  color: #fff;
}

footer{
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(10,8,14,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.small-note{ color: rgba(255,255,255,.65); }
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .hero::before{ animation: none !important; }
  .reveal{ transition: none !important; }
}