body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0e0e13;
  color: #fff;
}
*, *::before, *::after { box-sizing: border-box; }
body { line-height: 1.5; }
body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
/* Prevent sticky header from covering anchors */
#home, #services, #about, #founder, #contact { scroll-margin-top: 90px; }
img { max-width: 100%; height: auto; display: block; }
.topbar {
  background: #000;
  color: #ffe066;
  font-size: 0.98rem;
  padding: 8px 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #23232c;
  box-shadow: 0 2px 10px #0008;
}
.topbar .left, .topbar .right { display:flex; align-items:center; gap: 18px; }
.topbar .left span { margin-right: 0; opacity: .95; letter-spacing: .2px; }
.topbar a { color:#ffe066; text-decoration:none; }
.topbar img { display:inline-block; vertical-align:middle; }
header {
  background: #19191f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 3vw;
  position: sticky;
  top: 0; z-index: 10;
}
.logo { font-size: 2rem; font-weight: 700; color: #03e0ff; letter-spacing:2px; display:flex; align-items:center; gap:10px; }
.logo img { height: 58px !important; width: auto; display:block; }
.socials a { margin-right: 15px; display: inline-block; }
nav a {
  color: #fff; text-decoration: none; margin-left: 22px; font-weight: 600; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: border-bottom 0.24s;
}
nav a:hover { border-bottom: 2px solid #01b9d6; }
.cta {
  background: #ffe066; color: #222; border: none; margin-left: 18px; padding: 10px 24px; border-radius: 5px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background .22s;
}
.cta:hover { background: #ffc300; }

/* Animated Home Section */
.hero {
  position: relative;
  min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background: linear-gradient(125deg, #14213d 40%, #226d99 100%);
  overflow: hidden;
}
.video-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.13; pointer-events: none; z-index: 0;
}
.hero-content {
  position: relative; z-index: 2; text-align: center;
  padding-top: 65px; padding-bottom: 65px;
}
.typed-text {color: #ffe066; font-weight:900; font-size:2rem; letter-spacing:2px;}
.hero-content h1 {
  font-size: 2.8rem; font-weight: 900; margin-bottom: 17px; color: #fff;
  animation: fadeInUp 1.2s;
}
@keyframes fadeInUp {
  0% { opacity:0; transform:translateY(40px);}
  100% {opacity:1; transform:translateY(0);}
}
.hero-content p { font-size: 1.22rem; margin: 0 auto 28px auto; max-width: 650px; color:#e9e9e9;}
.hero-btn {
  background: #ffe066;
  color: #212121;
  padding: 16px 40px;
  border-radius: 8px;
  font-size: 1.18rem;
  font-weight: bold;
  border: none;
  transition: background 0.2s;
  cursor: pointer;
  box-shadow: 0 6px 22px #19191f66;
  margin-top: 24px;
}
.hero-btn:hover { background: #ffc300; }

/* Animated Services */
.services-section {
padding: 70px 3vw 55px 3vw;
max-width: 1000px;
margin: 0 auto 70px auto;
text-align: center;
}
.services-title {
font-size: 2.8rem;
font-weight: 900;
margin-bottom: 48px;
color: #ffe066;
user-select: text;
}
.services {
display: grid;
grid-template-columns: repeat(2, minmax(280px, 1fr));
gap: 34px;
}
.service-box {
background: #181925;
border-radius: 18px;
padding: 44px 32px 35px 32px;
color: #ffe066;
box-shadow: 0 4px 26px #000c;
text-align: center;
opacity: 0;
transform: scale(0.92);
animation: fadeScaleIn 0.9s forwards;
font-size: 1.15rem;
user-select: text;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
}
.service-box:hover {
background-color: #222638;
transform: scale(1.06);
box-shadow: 0 13px 36px #ffe066aa, 0 4px 15px #fff0;
}
.service-box h3 {
font-weight: 900;
margin-bottom: 14px;
font-size: 1.3rem;
color: #fff;
}
.service-box p {
margin: 0 auto;
max-width: 290px;
color: #f0f0f0;
font-size: 1.1rem;
}

@keyframes fadeScaleIn {
to {
  opacity: 1;
  transform: scale(1);
}
}
.services .service-box:nth-child(1) { animation-delay: 0.1s; }
.services .service-box:nth-child(2) { animation-delay: 0.3s; }
.services .service-box:nth-child(3) { animation-delay: 0.5s; }
.services .service-box:nth-child(4) { animation-delay: 0.7s; }
.services .service-box:nth-child(5) { animation-delay: 0.9s; }
.services .service-box:nth-child(6) { animation-delay: 1.1s; }

@media (max-width: 800px) {
.services {
  grid-template-columns: 1fr;
}
.service-box {
  max-width: 85vw;
  margin-left: auto;
  margin-right: auto;
}
}

/* Reviews Section */
.reviews-section {
  background: #0b0b11;
  padding: 36px 3vw 16px 3vw;
}
.reviews-title {
text-align: center;
font-size: 2.4rem;
font-weight: 900;
margin-bottom: 40px;
color: #ffe066;
user-select: text;
letter-spacing: 0.2px;
}

.reviews {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
}
.review-card {
  background: #23232c;
  border-radius: 12px;
  min-width: 320px;
  max-width: 360px;
  padding: 25px 22px;
  color: #fff;
  box-shadow: 0 2px 14px #0117;
  margin-bottom: 15px;
  user-select: text;
  animation: fadeInUp 1s ease both;
}
.review-card .stars {
  color: #ffe066;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.review-card .author {
  font-weight: 700;
  margin-bottom: 4px;
}
.review-card .date {
  font-size: 0.9rem;
  margin-bottom: 14px;
  color: #a3a3a3;
}

/* Work Section */
.work-section {
background: #141422;
padding: 45px 2vw 60px 2vw;
}
.work-heading {
text-align: center;
color: #ffe066;
font-size: 2.7rem;
font-weight: 900;
letter-spacing: 0.5px;
margin-bottom: 40px;
animation: fadeInHeading 1s both;
}
@keyframes fadeInHeading {
0% { opacity:0; transform:translateY(-30px);}
100% {opacity:1; transform:translateY(0);}
}
.work-gallery {
display: flex;
flex-wrap: wrap;
gap: 38px;
justify-content: center;
align-items: flex-start;
}
.work-item {
width: 330px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 30px rgba(255,224,102,0.21), 0 6px 32px #10102933;
background: #0e0e13;
cursor:pointer;
position:relative;
transition: box-shadow 0.2s, transform 0.2s;
}
.work-item:hover {
transform: translateY(-8px) scale(1.045);
box-shadow: 0 14px 42px rgba(255,224,102,0.28), 0 16px 70px #10102967;
}
@keyframes fadeInWork {
0% {opacity:0; transform:translateY(50px) scale(0.98);}
100% {opacity:1; transform:translateY(0) scale(1);}
}
.work-item img {
width: 100%;
height: 170px;
object-fit: cover;
display:block;
transition: filter 0.35s;
}
.work-item:hover img {
filter: brightness(1.09) saturate(1.04);
}
.caption {
position: absolute;
bottom: 0; left:0; width:100%;
background: linear-gradient(0deg,rgba(14,14,19,0.96) 80%,rgba(24,21,37,0.45) 100%);
color: #ffe066;
font-weight: 800;
font-size: 1.19rem;
padding: 15px 25px 8px 18px;
letter-spacing: .2px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
@media (max-width:1050px) {
.work-gallery { flex-direction:column; align-items:center;}
.work-item {width:95%; max-width:420px;}
}

/* Mission Section */
.mission-section {
background: linear-gradient(120deg, #1f1f33 60%, #28284d 100%);
border-radius: 18px;
max-width: 1100px;
margin: 60px auto;
box-shadow: 0 8px 36px #18192550;
padding: 70px 7vw 74px 7vw;
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
animation: fadeInMissionBg 1s both;
}
@keyframes fadeInMissionBg {
from { opacity: 0; transform: translateY(45px);}
to { opacity: 1; transform: translateY(0);}
}
.mission-heading {
font-size: 2.8rem;
font-weight: 900;
color: #ffe066;
margin-bottom: 28px;
position: relative;
display: inline-block;
animation: fadeInMissionHead 1.1s both;
}
@keyframes fadeInMissionHead {
from { opacity:0; transform: translateY(-24px);}
to { opacity:1; transform: translateY(0);}
}
.mission-underline {
width: 80px;
height: 7px;
border-radius: 6px;
background: #ffe066;
margin: 14px auto 0 auto;
filter: blur(0.4px) brightness(1.5);
animation: underlineGlow 2s infinite alternate;
}
@keyframes underlineGlow {
0% { box-shadow: 0 0 5px #ffe06688; }
100% { box-shadow: 0 0 25px #ffe066dd, 0 0 38px #ffe06699; }
}
.mission-content {
font-size: 1.28rem;
color: #fff;
margin: 30px auto 0 auto;
max-width: 800px;
line-height: 1.7;
letter-spacing: 0.01em;
opacity: 0;
animation: fadeInMissionText 1.1s 0.45s both;
font-weight: 500;
}
@keyframes fadeInMissionText {
from { opacity:0; transform:translateY(25px);}
to   { opacity:1; transform:translateY(0);}
}
@media (max-width: 600px) {
.mission-section{
  padding: 38px 4vw 45px 4vw;
}
.mission-heading{ font-size:2.03rem;}
.mission-content{ font-size:1.07rem;}
}

/* Founder Section */
.founder-section {
background: #181925;
padding: 70px 2vw 50px 2vw;
text-align: center;
margin-top: 42px;
border-radius: 18px;
box-shadow: 0 8px 36px #10102a58;
animation: fadeInFounderBg 1.1s both;
position: relative;
}
@keyframes fadeInFounderBg {
from { opacity: 0; transform: translateY(45px);}
to { opacity: 1; transform: translateY(0);}
}
.founder-section h2 {
font-size: 2.4rem;
font-weight: 900;
margin-bottom: 28px;
color: #ffe066;
letter-spacing: .5px;
animation: fadeInFounderHead 1s both;
}
@keyframes fadeInFounderHead {
from { opacity:0; transform: translateY(-15px);}
to { opacity:1; transform: translateY(0);}
}
.founder-img {
width: 155px; height: 155px;
object-fit: cover; object-position: top center;
border-radius: 50%;
border: 6px solid #ffe066;
margin-bottom: 20px;
box-shadow: 0 0 30px #ffe06644, 0 0 0px #232338;
background: #0f0f1e;
display: block;
margin-left: auto;
margin-right: auto;
transition: box-shadow 0.38s, transform 0.28s;
animation: popScaleIn 1.1s .12s both;
position: relative;
z-index: 1;
}
.founder-img:hover {
box-shadow: 0 0 48px #ffe06699, 0 0 24px #017aff66;
transform: scale(1.08) rotate(-2deg);
}
@keyframes popScaleIn {
from { opacity: 0; transform: scale(0.56);}
to { opacity: 1; transform: scale(1);}
}
.founder-name {
font-size: 1.35rem;
font-weight: 900;
color: #fff;
margin-bottom: 0;
margin-top: 2px;
letter-spacing: .3px;
animation: fadeInFounderText 1s .28s both;
}
.founder-title {
font-size: 1.09rem;
color: #ffe066;
font-weight: 700;
margin-bottom: 17px;
letter-spacing: .15px;
animation: fadeInFounderText 1s .36s both;
}
.founder-journey {
max-width: 690px;
margin: 25px auto 0 auto;
font-size: 1.13rem;
color: #ececec;
background: #222339cc;
border-radius: 13px;
padding: 23px 25px 20px 25px;
box-shadow: 0 1px 18px #0000002A;
animation: fadeInFounderText 1.18s .50s both;
line-height: 1.6;
}
@keyframes fadeInFounderText {
from { opacity:0; transform: translateY(32px);}
to { opacity:1; transform: translateY(0);}
}

/* FAQ Section */
.faq-section {
background: #181925;
color: #fff;
max-width: 900px;
margin: 60px auto;
border-radius: 22px;
box-shadow: 0 6px 32px #0005;
padding: 45px 2vw 50px 2vw;
}
.faq-title {
font-size: 2.2rem;
text-align: center;
margin-bottom: 30px;
font-weight: 900;
color: #ffe066;
letter-spacing: 0.2px;
}
.faq-list {
border-radius: 17px;
overflow: hidden;
background: #232338;
box-shadow: 0 4px 18px #0001;
}
.faq-item {
background: #20213a;
border-top: 1px solid #242648;
cursor: pointer;
color: #ffd700;
transition: background 0.18s;
}
.faq-item:first-child {
border-top: none;
}
.faq-question {
padding: 17px 25px;
font-size: 1.14rem;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
color: #ffe066;
}
.faq-item.active .faq-question,
.faq-question:hover {
background: #222446;
}
.faq-answer {
display: none;
padding: 0 25px 16px 25px;
font-size: 1.07rem;
line-height: 1.6;
color: #fff;
}
.faq-item.active .faq-answer {
display: block;
}

.contact-section {
background: #181925;
border-radius: 22px;
max-width: 510px;
margin: 55px auto 50px auto;
box-shadow: 0 8px 32px #10102a66;
padding: 40px 30px;
width: 100%;
box-sizing: border-box;
}

.contact-section > h2 {
color: #ffe066;
font-size: 2.4rem;
font-weight: 900;
text-align: center;
margin-bottom: 36px;
letter-spacing: 0.2px;
}

.contact-form label {
color: #ffe066;
font-weight: 700;
font-size: 1.12rem;
margin-bottom: 7px;
display: block;
padding-left: 2px;
}

.contact-form { display: flex; flex-direction: column; gap: 12px; }

.contact-form input,
.contact-form textarea {
width: 100%;
margin-bottom: 21px;
padding: 14px 13px;
border-radius: 10px;
border: none;
background: #222337;
color: #fff;
font-size: 1.06rem;
box-shadow: 0 2px 7px #12122c20 inset;
transition: box-shadow 0.19s, background 0.18s;
outline: none;
box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
background: #202040;
box-shadow: 0 0 0 2px #ffe066cc;
}

.contact-form button {
width: 100%;
background: #ffe066;
color: #181925;
font-weight: 900;
font-size: 1.2rem;
border: none;
border-radius: 10px;
padding: 16px 0;
box-shadow: 0 4px 18px #ffe06630, 0 2px 7px #0001;
cursor: pointer;
margin-top: 12px;
letter-spacing: .5px;
transition: background 0.2s, box-shadow 0.2s;
}

.contact-form button:hover {
background: #e9c64a;
box-shadow: 0 9px 24px #ffe06650, 0 2px 7px #0003;
}

.form-message {
margin-top: 15px;
font-weight: 800;
font-size: 1rem;
color: #9cf252;
text-align: center;
}

.contact-form button:disabled {
background: #666;
cursor: not-allowed;
opacity: 0.7;
}

.contact-form button:disabled:hover {
background: #666;
}

@media (max-width: 650px) {
.contact-section {
  padding: 20px 2vw 28px 2vw;
  max-width: 99vw;
}
.contact-form input, .contact-form textarea {
   padding: 12px 7px;
   font-size: 1rem;
}
}

/* Contact section enhancements on small screens */
@media (max-width: 600px) {
.contact-section { border-radius: 16px; box-shadow: 0 6px 22px #0008; }
.contact-form { gap: 10px; }
.contact-form label { font-size: 1.02rem; margin-bottom: 4px; }
.contact-form input, .contact-form textarea { min-height: 46px; margin-bottom: 12px; }
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form button { margin-top: 6px; }
}

/* Additional responsive refinements */
@media (max-width: 900px) {
header { flex-wrap: wrap; gap: 10px; }
.logo { font-size: 1.6rem; }
nav a { margin-left: 14px; }
.socials a { margin-right: 10px; }
.hero-content h1 { font-size: 2.2rem; }
.typed-text { font-size: 1.4rem; }
.hero-content p { font-size: 1.05rem; padding: 0 4vw; }
.hero-btn { padding: 12px 26px; font-size: 1rem; }
.review-card { min-width: 280px; max-width: 300px; }
}

@media (max-width: 600px) {
.topbar { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px; text-align:center; padding: 8px 4vw; box-shadow: 0 2px 12px #000a; font-size: .9rem; width: 100%; }
.topbar .left, .topbar .right { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; }
.topbar .left { flex-wrap: nowrap; white-space: nowrap; gap: 10px; overflow: visible; text-overflow: unset; padding: 0; }
.topbar .left span { margin-right: 0; display: inline-block; letter-spacing: .1px; }
.topbar .right { justify-content: center; }
.topbar .socials { display:flex; justify-content:center; align-items:center; gap: 12px; }
.topbar .socials a { margin: 0; }
.topbar .socials img { height: 22px !important; width: auto; }
header { position: static; padding: 10px 4vw; }
.logo img { height: 44px !important; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
nav a { margin: 6px 8px 0 0; }
.cta { width: 100%; margin: 12px 0 0 0; padding: 12px 16px; }
.hero { min-height: 480px; }
.hero-content { padding-top: 26px; padding-bottom: 26px; max-width: 92vw; margin-left: auto; margin-right: auto; }
.hero-content h1 { font-size: 1.9rem; line-height: 1.25; word-break: break-word; }
.typed-text { font-size: 1.2rem; }
.hero-content p { max-width: 92vw; padding: 0; margin-left: auto; margin-right: auto; }
.hero-btn { width: 95%; max-width: 420px; }
.work-item { width: 100%; max-width: 100%; }
.reviews { padding-left: 3vw; padding-right: 3vw; }
.mission-section { margin: 30px 3vw; }
/* smaller offset on mobile */
#home, #services, #about, #founder, #contact { scroll-margin-top: 70px; }
/* Global section spacing */
.services-section { padding: 40px 4vw 35px 4vw; }
.reviews-section { padding: 26px 4vw 12px 4vw; }
.work-section { padding: 30px 3vw 40px 3vw; }
.work-heading { margin-bottom: 26px; font-size: 2.1rem; }
.services-section, .reviews-section, .work-section, .mission-section, .founder-section, .faq-section, .contact-section { width: 100%; box-sizing: border-box; margin-left: auto; margin-right: auto; text-align: center; }
.services, .work-gallery, .reviews, .faq-list { margin-left: auto; margin-right: auto; }
.cta, .hero-btn, .contact-form button { margin-left: auto; margin-right: auto; display: block; }
.founder-img { margin-left: auto; margin-right: auto; }
.services-title { font-size: 2rem; margin-bottom: 22px; }
.service-box { padding: 24px 18px 20px 18px; max-width: 520px; }
.review-card { min-width: 260px; }
.mission-heading { font-size: 2rem; }
.mission-content { font-size: 1.02rem; }
.founder-section { padding: 40px 3vw 32px 3vw; margin-top: 26px; }
.founder-journey { padding: 18px 16px; }
.faq-section { margin: 40px auto; max-width: 96vw; padding: 22px 14px 24px 14px; }
.faq-list { width: 100%; margin: 0 auto; }
.faq-item { border-top: 1px solid #242648; }
.faq-question { padding: 16px 16px; }
.faq-title { font-size: 1.8rem; margin-bottom: 20px; }
.faq-question { padding: 14px 16px; font-size: 1.02rem; }
.contact-section { margin: 40px auto 40px auto; max-width: 95vw; padding: 26px 16px; }
.contact-section > h2 { font-size: 2rem; margin-bottom: 20px; }
.contact-form input, .contact-form textarea { padding: 12px 10px; font-size: 1rem; }
.contact-form button { width: 100%; padding: 14px 0; font-size: 1.1rem; }
}

@media (max-width: 400px) {
.hero-content h1 { font-size: 1.7rem; }
.typed-text { font-size: 1.1rem; }
.hero-content p { font-size: 0.98rem; }
.hero-btn { width: 96%; }
}

/* Ultra-narrow phones */
@media (max-width: 360px) {
.hero-content h1 { font-size: 1.6rem; }
.services-title { font-size: 1.7rem; }
.work-heading { font-size: 1.8rem; }
}