/* Minimal modern portfolio styles */
:root{
  --bg: #F7FAFC;
  --panel: #FFFFFF;
  --text: #0F1724;
  --muted: #6B7A86;
  --accent: #8EC5FF;
  --btn-text: #0B3D6B;
  --tooltip-bg: #FFFFFF;
  --tooltip-text: #0F1724;
  --tooltip-shadow: rgba(2,6,23,0.06);
  --radius: 10px;
  --max-width: 900px;
}

/* Dark mode removed — site uses single light theme */

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

/* theme toggle removed (single light theme) */

/* Loader overlay */
#loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  z-index:9999;
  transition:opacity .4s ease, visibility .4s ease;
}
#loader.hidden{ opacity:0; visibility:hidden }
#loader .loader-inner{ text-align:center }
.spinner{ width:48px; height:48px; display:block; margin:0 auto 8px }
.spinner .path{
  stroke:var(--accent);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:1,200;
  stroke-dashoffset:0;
  transform-origin:center;
  animation:dash 1.8s ease-in-out infinite, spin 3s linear infinite;
}
.root-dark .ripple{}
.loading-text{ color:var(--muted); font-size:0.95rem; letter-spacing:0.04em; text-transform:none }

@keyframes spin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
@keyframes dash{ 0%{ stroke-dasharray:1,200; stroke-dashoffset:0 } 50%{ stroke-dasharray:100,200; stroke-dashoffset:-15px } 100%{ stroke-dasharray:1,200; stroke-dashoffset:-125px } }

.site{
  width:100%;
  padding:48px;
  transform:translateY(-3vh);
}
.content{
  max-width:var(--max-width);
  margin:0 auto;
  background:transparent;
  text-align:center;
}
.title{
  font-size:clamp(2.25rem,6vw,4rem);
  margin:0;
  font-weight:700;
  letter-spacing:-0.02em;
}
.subtitle{
  color:var(--muted);
  margin-top:0.5rem;
  font-size:1rem;
}
.actions{
  margin-top:2.25rem;
  display:flex;
  justify-content:center;
}
.btn{
  background:transparent !important;
  color:var(--accent);
  text-decoration:none;
  padding:0.35rem 0;
  font-weight:600;
  display:inline-block;
  border-radius:0;
  overflow:visible;
  transition:transform .12s ease, color .12s ease;
  position:relative;
}
/* removed .btn .icon (icons removed from markup) */
.btn::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .16s ease, opacity .16s ease;
  opacity:0.12;
  border-radius:2px;
}
.btn:hover::after{
  transform:scaleX(1);
  opacity:0.18;
}
.btn:active{
  transform:translateY(1px) scale(.985);
  opacity:0.9;
}
.ripple{
  position:absolute;
  border-radius:50%;
  background:currentColor;
  opacity:0.14;
  transform:scale(0);
  pointer-events:none;
  left:0;
  top:0;
  width:0;
  height:0;
  transform-origin:center;
  transition:transform .6s ease, opacity .6s ease;
  will-change:transform, opacity;
}
/* Social icons horizontal */
.social{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:center;
}
.icon-btn{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:var(--accent);
}
.icon-btn .icon{ width:20px; height:20px; display:block }
.icon-btn::after{ display:none }
.icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:10px }
.icon-btn .label{
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-6px);
  opacity:0;
  background:var(--tooltip-bg, var(--panel));
  color:var(--tooltip-text, var(--text));
  padding:6px 10px;
  border-radius:8px;
  font-weight:600;
  font-size:0.9rem;
  white-space:nowrap;
  transition:opacity .14s ease, transform .14s ease;
  pointer-events:auto;
  z-index:60;
  box-shadow: 0 8px 20px rgba(2,6,23,0.06);
}
.icon-btn:hover .label,
.icon-btn:focus .label{ opacity:1; transform:translateX(-50%) translateY(0) }
@media(max-width:600px){
  /* on small screens show tooltip above the icon */
  .icon-btn .label{ top:auto; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(6px) }
  .icon-btn:hover .label, .icon-btn:focus .label{ transform:translateX(-50%) translateY(0) }
}
@media(min-width:900px){
  .content{ text-align:center; padding-left:0; margin:0 auto; }
  .actions{ align-items:center}
}