:root{ --bg:#000; --text:#fff; --muted:#b5b5b5; --line:#232323; --radius:18px; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1040px;margin:0 auto;padding:24px;text-align:center}

.site-header{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.6);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:900;letter-spacing:.12em}
.nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.nav a{border:1px solid var(--line);padding:8px 12px;border-radius:999px;opacity:.9;transition:opacity .2s ease, background .2s ease, box-shadow .2s ease}
.nav a:hover{opacity:1;background:#111;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.nav a.active{background:#111;opacity:1}

.section{position:relative;padding:40px 0}
.hero{display:grid;place-items:center;text-align:center;padding:72px 0}
h1{font-size:clamp(42px,9vw,96px);line-height:1.02;margin:0}
h2{font-size:clamp(28px,6vw,46px);margin:.2em 0}
.sub{color:var(--muted);margin:12px 0 18px}

.shine{
  position:relative;display:inline-block;
  background:linear-gradient(100deg, #ffffff 0%, #bfbfbf 25%, #ffffff 50%, #bfbfbf 75%, #ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;
  animation:glare 2.8s linear infinite;
}
@keyframes glare{0%{background-position:200% 0}100%{background-position:-200% 0}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;justify-items:center}
.center-text{text-align:center}
.card{border:1px solid var(--line);border-radius:16px;background:#0a0a0a;box-shadow:0 10px 30px rgba(0,0,0,.6);padding:16px}
.card.logo{background:transparent}
.lead{color:var(--muted);max-width:760px;margin:8px auto 20px}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.button{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:#0a0a0a;color:var(--text);font-weight:700;transition:transform .18s ease,opacity .18s ease, box-shadow .18s ease}
.button:hover{transform:translateY(-2px);opacity:.95;box-shadow:0 8px 26px rgba(0,0,0,.5)}

.site-footer{border-top:1px solid var(--line);}
.socials{display:flex;gap:14px;justify-content:center;align-items:center;padding:18px}
.icon{
  width:28px;height:28px;display:inline-grid;place-items:center;border:1px solid var(--line);
  border-radius:12px;padding:6px;
  background:linear-gradient(180deg, rgba(30,30,30,1) 0%, rgba(10,10,10,1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease, border-color .2s ease;
}
.icon:hover{transform:translateY(-2px) scale(1.02);box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 14px 28px rgba(0,0,0,.6);border-color:#2f2f2f}

.page{opacity:0;animation:fadeIn .45s ease .05s forwards}
@keyframes fadeIn{to{opacity:1}}

@media (max-width: 900px){
  .container{padding:18px}
  .split{grid-template-columns:1fr}
  .split .art{order:1}
  .split .text{order:2}
  .section{padding:28px 0}
  .site-header .header-inner{flex-direction:column;justify-content:center;align-items:center}
  .brand{margin-top:6px;margin-bottom:6px}
  .nav{justify-content:center}
  body{height:100dvh; overflow:hidden;}
  .hero h1{font-size:clamp(120px, 24vw, 260px); line-height:.92; margin:0; white-space:nowrap; overflow:hidden; max-width:92vw;}
}

.about-wrap{max-width:820px;margin:0 auto;text-align:center}
.about-wrap h1{font-size:clamp(42px,8vw,88px);margin-bottom:12px}
.about-body{color:var(--muted);font-size:clamp(18px,2.6vw,22px);line-height:1.6}
.about-body p{margin:16px 0}
.about-body strong{color:#fff}
.about-body em{font-style:italic;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.about-body p{opacity:0;animation:fadeUp .9s ease forwards}
.about-body p:nth-child(1){animation-delay:0.15s; transform: scaleX(-1); transform-origin:center;}
.inline-link{border-bottom:1px dashed rgba(255,255,255,.18);}
.inline-link:hover{border-bottom-color: rgba(255,255,255,.36);}

@media (max-width: 900px){
  .site-footer{
    position: fixed;
    left: 0; right: 0;
    bottom: clamp(14px, 2.8vh, 28px);
  }
  .site-footer .socials a,
  .site-footer a.social,
  .site-footer .social a,
  .site-footer a,
  .site-footer button{
    box-shadow:
      0 10px 24px rgba(0,0,0,.35),
      0 2px 8px rgba(255,255,255,.06);
    -webkit-backdrop-filter: saturate(140%) blur(4px);
    backdrop-filter: saturate(140%) blur(4px);
  }
}


/* ===== Creative micro-animations (mobile-friendly) ===== */

/* Buttons: subtle glow + lift */
.button{will-change: transform, box-shadow;}
.button:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset}

/* Cards / logos: soft tilt on hover (desktop only) */
@media (min-width: 901px){
  .card{transition:transform .25s ease, box-shadow .25s ease}
  .card:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-2deg); box-shadow:0 18px 40px rgba(0,0,0,.55)}
}

/* Nav pills: glow on hover */
.nav a{box-shadow:0 0 0 rgba(255,255,255,0);}
.nav a:hover{box-shadow:0 6px 22px rgba(255,255,255,.08)}

/* Hero name: add slow breathing scale (very subtle) */
@keyframes breathe{0%{transform:scale(1)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
.home .hero h1{animation:breathe 6s ease-in-out infinite}

/* Icon hover: gentle pulse */
.icon{transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease}
.icon:hover{transform:translateY(-2px) scale(1.04)}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  .shine{animation:none}
  .home .hero h1{animation:none}
  .about-body p{animation:none; opacity:1; transform:none}
}


/* v9: Mobile-only spacing so About's last line doesn't touch footer separator
   while keeping overall no-scroll layout balanced. */
@media (max-width: 900px){
  .about .about-body{
    margin-top: clamp(2px, 1.2vh, 10px) !important;
    margin-bottom: clamp(18px, 3.2vh, 28px) !important;
  }
  /* preserve no-scroll by giving hero/about wrapper a tiny negative gap */
  .about main{
    padding-top: clamp(2px, 0.8vh, 10px);
    padding-bottom: clamp(10px, 2.8vh, 22px);
  }
}