/* Reset / base */
:root{
  --bg1: #eef4f9;
  --bg2: #f7fbfd;
  --muted: #6b7a8a;
  --accent: #5a6ef2;
  --accent-2: #6fd3d8;
  --card: #ffffff;
  --glass: rgba(255,255,255,0.7);
  --container: 1100px;
  --radius: 18px;
  --shadow: 0 18px 40px rgba(35,50,80,0.08);
  --soft-shadow: 0 8px 24px rgba(35,50,80,0.06);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  color:#1c2340;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* header */
.site-header{position:sticky;top:0;z-index:30;background:transparent;padding:22px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:1px}
.logo-dot{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.brand-text{font-size:14px}
.top-nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:600;font-size:13px}

/* HERO layout */
.hero{padding:60px 0 120px}
.hero-inner{display:grid;grid-template-columns:1fr 520px;gap:40px;align-items:center}

/* left card */
.intro-card{background:var(--card);border-radius:20px;padding:34px;width:430px;box-shadow:var(--shadow)}
.intro-card .small{font-size:13px;color:var(--muted);margin-bottom:6px}
.intro-card h1{margin:0;font-size:34px;display:flex;align-items:center;gap:12px}
.emoji{font-size:26px}
.subtitle{color:var(--muted);margin-top:10px;margin-bottom:14px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{background:linear-gradient(90deg,#eef4ff,#f6f6ff);padding:8px 10px;border-radius:999px;font-weight:700;font-size:12px;color:#2b3b6b}

/* mini stats card */
.mini-card.stats{margin-top:20px;background:linear-gradient(180deg,#ffffff,#fbfbff);padding:16px;border-radius:14px;box-shadow:var(--soft-shadow);display:flex;gap:12px}
.mini-card.stats div{display:flex;flex-direction:column;align-items:flex-start}
.mini-card.stats strong{color:var(--accent);font-size:16px}
.mini-card.stats span{font-size:12px;color:var(--muted)}

/* hero right */
.hero-right{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.hero-image-wrap{position:relative;width:480px;height:480px;display:flex;align-items:center;justify-content:center}
.hero-photo{width:420px;height:420px;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px rgba(20,30,60,0.12);position:relative;z-index:3;transform:translateY(6px)}
.back-ring{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(90,110,242,0.12), transparent 35%), radial-gradient(circle at 70% 70%, rgba(111,211,216,0.08), transparent 40%);z-index:2;filter:blur(14px)}

/* floating buttons */
.float-buttons{position:absolute;right:-18px;top:60px;display:flex;flex-direction:column;gap:28px;z-index:5}
.float-btn{display:flex;align-items:center;gap:12px;text-decoration:none}
.float-btn .circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(180deg,#fff,#f6f8ff);box-shadow:var(--soft-shadow)}
.float-btn .label{background:var(--card);padding:10px 12px;border-radius:10px;box-shadow:var(--soft-shadow);font-weight:700;color:#28304b;font-size:13px}

/* sections */
.section{padding:70px 0}
.section h2{font-size:24px;margin:0 0 14px}
.section p{color:var(--muted);max-width:860px}

/* projects grid */
.project-grid{display:flex;gap:18px;margin-top:20px}
.project{width:220px;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--soft-shadow);text-align:center;padding:12px}
.project img{width:100%;height:120px;object-fit:cover;border-radius:8px}
.project h4{margin:10px 0 0;font-size:15px}

/* videos grid */
.videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:24px}
.video-card {
  background: var(--card);
  padding: 12px 12px 8px; /* reduce bottom padding since <p> removed */
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  text-align: center;
}

.video-card h4 {
  margin-top: 8px; /* space between iframe and title */
  font-size: 15px;
}
.video-card iframe{width:100%;height:170px;border-radius:8px;}

/* contact & socials */
.socials{display:flex;gap:12px;margin-top:12px}
.socials a{color:var(--accent);text-decoration:none;font-weight:700}

/* footer */
.site-footer{padding:22px 0;background:transparent;text-align:center;color:var(--muted)}

/* responsive */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr 1fr}
  .hero-photo{width:320px;height:320px}
  .hero-image-wrap{width:360px;height:360px}
  .intro-card{width:100%}
}
@media (max-width:720px){
  .hero-inner{grid-template-columns:1fr}
  .hero-right{order:-1;padding-bottom:30px}
  .float-buttons{position:static;flex-direction:row;justify-content:center;margin-top:18px}
  .float-btn .circle{width:54px;height:54px;font-size:20px}
  .intro-card{padding:22px}
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; 
  background: rgba(255, 255, 255, 0.7); /* slight glass effect */
  backdrop-filter: blur(8px);           /* smooth blur */
}
/* Featured Works Section */
.featured-works h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.featured-card {
  background: #fff;
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  text-decoration: none;
  color: #333;
  transition: 0.3s ease;
}

.featured-card:hover {
  transform: translateY(-8px);
}

.featured-card iframe {
  width: 100%;
  height: 190px;
  border-radius: 15px;
}

/* Gallery Card Hover */
.gallery-card {
  position: relative;
  overflow: hidden;
}

.gallery-hover {
  display: flex;
  gap: 5px;
}

.gallery-thumb {
  width: 33%;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  opacity: 0.8;
  transition: 0.3s ease;
}

.gallery-card:hover .gallery-thumb {
  opacity: 1;
  transform: scale(1.05);
}

/* Gallery Section */
.gallery-section h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.gallery-wrapper {
  position: relative;
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.gallery-slider {
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  gap: 15px;
  padding: 10px 0;
}

.gallery-slider::-webkit-scrollbar {
  height: 8px;
}

.gallery-slider::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.gallery-slider img {
  width: 260px;
  height: 180px;
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.gallery-slider img:hover {
  transform: scale(1.05);
}

/* Next / Prev Buttons */
.gallery-btn {
  background: #000;
  color: #fff;
  border: none;
  font-size: 30px;
  padding: 5px 15px;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.25s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-btn:hover {
  background: #444;
}

.gallery-btn.prev {
  left: -10px;
}

.gallery-btn.next {
  right: -10px;
}

@media (max-width: 600px) {
  .gallery-slider img {
    width: 200px;
    height: 150px;
  }
  .gallery-btn {
    font-size: 22px;
  }
}
/* --- CLEAN & BALANCED SECTION SPACING --- */

/* Keep hero separate but tight */
.hero {
  padding-bottom: 30px;
}

/* Featured Works */
.featured-works.section {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* About Section */
.about.section {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* Store Outlets */
.projects.section {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* Socials Section */
.contact.section {
  padding-top: 30px !important;
  padding-bottom: 20px !important;
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.featured-card {
  background: #fff;
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  text-decoration: none;
  color: #333;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.featured-card h4 {
  margin-top: 12px;
  font-size: 16px;
  text-align: center;
}

.featured-card p {
  font-size: 13px;
  text-align: center;
  color: #6b7a8a;
}

.featured-card blockquote.tiktok-embed {
  width: 100% !important;
  height: 480px;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 10px;
}

.gallery-card .gallery-hover {
  display: flex;
  gap: 5px;
}

.gallery-card .gallery-thumb {
  width: 33%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.3s ease;
}

.gallery-card:hover .gallery-thumb {
  transform: scale(1.05);
  opacity: 1;
}



.socials-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px; /* space between icons */
  padding: 20px 0;
  background: transparent;
}

.socials-footer a {
  font-size: 24px;  /* slightly smaller */
  transition: transform 0.25s;
}

/* Brand colors */
.socials-footer a.fb { color: #1877f2; }       /* Facebook Blue */
.socials-footer a.ig { color: #e4405f; }       /* Instagram gradient pink */
.socials-footer a.tt { color: #000000; }       /* TikTok Black */
.socials-footer a.yt { color: #ff0000; }       /* YouTube Red */

/* Hover effect */
.socials-footer a:hover {
  transform: scale(1.3);
}
html {
  scroll-behavior: smooth;
}