/*
Theme Name: Puy Studio
Theme URI: https://example.com
Author: puy
Author URI: https://example.com
Description: A vibrant, playful one-page portfolio theme for the puy design studio. This design is set as your site's homepage (front page).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: puy-studio
*/

:root{
  --cream:#FFFBF2;
  --ink:#211334;
  --coral:#FF6B57;
  --sun:#FFC93C;
  --sky:#43D2E0;
  --grape:#8C52FF;
  --bubble:#FF4FA3;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Poppins', sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--sun); color:var(--ink);}
.wrap{max-width:1100px; margin:0 auto; padding:0 28px;}

h1,h2,h3,.logo{font-family:'Fredoka', sans-serif; font-weight:600; margin:0;}
.tag-label{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
}

/* ---------- floating nav ---------- */
header.site-header{
  position:sticky; top:18px; z-index:30;
  display:flex; justify-content:center;
  margin-bottom:-70px;
}
.navpill{
  background:var(--ink);
  color:var(--cream);
  border-radius:999px;
  padding:10px 10px 10px 22px;
  display:flex; align-items:center; gap:22px;
  box-shadow:0 8px 20px rgba(33,19,52,0.25);
}
.navpill .logo{font-size:1.25rem; color:var(--sun); text-decoration:none;}
.navpill nav{display:flex; gap:18px;}
.navpill a{color:var(--cream); text-decoration:none; font-size:0.85rem; font-weight:500; opacity:0.85;}
.navpill a:hover{opacity:1;}
.navpill .cta{
  background:var(--bubble); color:var(--ink);
  padding:8px 18px; border-radius:999px; font-weight:600; font-size:0.82rem;
}
@media (max-width:640px){ .navpill nav{display:none;} }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:170px 0 110px;
  overflow:hidden;
  background:linear-gradient(160deg, var(--grape) 0%, var(--bubble) 55%, var(--coral) 100%);
  border-radius:0 0 48px 48px;
}
.blob{
  position:absolute;
  border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
  opacity:0.5;
  filter:blur(1px);
}
.b1{width:220px; height:220px; background:var(--sun); top:-40px; left:-60px; animation:float 9s ease-in-out infinite;}
.b2{width:160px; height:160px; background:var(--sky); bottom:-30px; right:8%; animation:float 7s ease-in-out infinite reverse;}
.b3{width:90px; height:90px; background:var(--cream); top:20%; right:14%; opacity:0.6; animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-18px) rotate(8deg);}}

.hero-inner{position:relative; z-index:2; text-align:center;}
.hero .tag-label{background:rgba(255,255,255,0.18); color:#fff; backdrop-filter:blur(4px);}
.hero h1{
  color:#fff;
  font-size:clamp(3rem, 9vw, 6rem);
  line-height:0.95;
  margin:22px 0 18px;
  text-shadow:0 6px 0 rgba(33,19,52,0.15);
}
.hero p{
  color:#fff;
  max-width:44ch;
  margin:0 auto 34px;
  font-size:1.1rem;
  opacity:0.95;
}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.btn{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  padding:14px 30px;
  border-radius:999px;
  text-decoration:none;
  display:inline-block;
  transition:transform .2s ease, box-shadow .2s ease;
  border:none;
  cursor:pointer;
}
.btn:hover{transform:translateY(-3px);}
.btn.sun{background:var(--sun); color:var(--ink); box-shadow:0 8px 0 #E0A82A;}
.btn.sun:hover{box-shadow:0 11px 0 #E0A82A;}
.btn.outline{background:transparent; color:#fff; border:2px solid #fff;}

/* ---------- sections ---------- */
section{padding:90px 0;}
.section-head{text-align:center; margin-bottom:52px;}
.section-head h2{font-size:clamp(2rem,4vw,2.8rem); margin-top:14px;}

/* about */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.about-card{
  background:#fff;
  border-radius:32px;
  padding:36px;
  box-shadow:0 14px 0 rgba(33,19,52,0.06);
}
.about-card p{font-size:1.05rem; line-height:1.7; color:#463A5A;}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.chip{
  padding:8px 16px; border-radius:999px; font-size:0.82rem; font-weight:600;
}
.chip.c1{background:var(--sky); color:var(--ink);}
.chip.c2{background:var(--sun); color:var(--ink);}
.chip.c3{background:var(--bubble); color:#fff;}
.chip.c4{background:var(--grape); color:#fff;}

.stat-stack{display:flex; flex-direction:column; gap:18px;}
.stat{
  border-radius:28px;
  padding:26px 30px;
  color:#fff;
  font-weight:600;
}
.stat small{display:block; font-family:'Space Mono',monospace; font-weight:500; font-size:0.72rem; opacity:0.85; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.08em;}
.stat.s1{background:var(--coral);}
.stat.s2{background:var(--grape);}
.stat.s3{background:var(--sky); color:var(--ink);}

/* work */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.work-card{
  aspect-ratio:1/1.1;
  border-radius:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  font-weight:600;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease;
}
.work-card:hover{transform:translateY(-6px) rotate(-1deg);}
.work-card .icon{font-size:2.4rem;}
.work-card span{font-family:'Space Mono',monospace; font-size:0.72rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; background:rgba(0,0,0,0.18); padding:4px 12px; border-radius:999px;}
.wc1{background:var(--coral);}
.wc2{background:var(--sky); color:var(--ink);}
.wc3{background:var(--grape);}
.wc4{background:var(--sun); color:var(--ink);}
.wc5{background:var(--bubble);}
.wc6{background:#463A5A;}

/* process */
.process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.step{
  background:#fff;
  border-radius:26px;
  padding:30px;
  text-align:center;
  box-shadow:0 10px 0 rgba(33,19,52,0.05);
}
.step .num{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  font-family:'Fredoka',sans-serif; font-weight:600; color:#fff;
}
.step:nth-child(1) .num{background:var(--coral);}
.step:nth-child(2) .num{background:var(--grape);}
.step:nth-child(3) .num{background:var(--sky); color:var(--ink);}
.step h3{font-size:1.2rem; margin-bottom:8px;}
.step p{color:#6B5E80; font-size:0.95rem; margin:0;}

/* contact */
.contact-outer{padding:0 28px;}
.contact{
  background:linear-gradient(135deg, var(--ink), #3B2A5C);
  border-radius:48px;
  padding:80px 40px;
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.contact h2{font-size:clamp(2rem,5vw,3rem); color:#fff; margin:18px 0 14px;}
.contact p{color:#D8CFE8; max-width:42ch; margin:0 auto 30px;}
.contact .blob{opacity:0.25;}

footer.site-footer{
  text-align:center;
  padding:36px 0;
  font-family:'Space Mono', monospace;
  font-size:0.75rem;
  color:#8C7FA0;
}

@media (max-width:820px){
  .about-grid, .process{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .work-grid{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){
  .blob{animation:none;}
  .btn:hover, .work-card:hover{transform:none;}
}