:root{--blue:#1e88e5;--orange:#ff5722;--bg:#f5fbff;}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',sans-serif;background:var(--bg);color:#333}
header{
  background:linear-gradient(to top,#d7ecff,#ffffff);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 40px;
  border-bottom:4px solid var(--blue);
  box-shadow:0 8px 16px rgba(0,0,0,.08);
  position:sticky;top:0;z-index:50;
}
header img{height:60px}
nav a{margin:0 12px;color:var(--blue);text-decoration:none;font-weight:800}
nav a:hover{color:#ff7043}

.hero{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:22px;
  padding:38px 40px 46px;
  background:linear-gradient(120deg,#a7d6ff,#e3f2fd 55%,#ffffff);
}
.hero h1{color:var(--orange);font-size:2.55rem;margin:0 0 10px}
.hero p{font-size:1.1rem;margin:0;max-width:46ch}

.right-stack{display:flex;flex-direction:column;gap:18px}

.panel{
  background:#fff;border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  overflow:hidden;
}

.floaty{animation:float 3.2s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

.carousel{position:relative;background:#000}
.carousel iframe{display:block;width:100%;height:240px;border:0}
.carousel .navbtn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 18px rgba(0,0,0,.25);
  font-size:22px;font-weight:900;line-height:44px;
}
.carousel .navbtn:hover{background:#fff}
.carousel .prev{left:10px}
.carousel .next{right:10px}
.carousel .dots{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;gap:6px;justify-content:center;
}
.carousel .dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.55)}
.carousel .dot.active{background:rgba(255,255,255,.95)}

.insta{padding:12px 12px 10px}
.insta h3{margin:6px 0 10px;text-align:center;color:#0d47a1}
.insta iframe{width:100%;height:360px;border:0;border-radius:14px}

section{padding:46px 40px;max-width:1100px;margin:auto}
.why{
  background:linear-gradient(135deg,#ffcc80,#ffd54f,#81d4fa);
  border-radius:30px;padding:38px 34px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}
.why h2{margin:0 0 18px;text-align:center;color:#0d47a1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{
  background:#fff;padding:22px;border-radius:22px;text-align:center;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 26px rgba(0,0,0,.18)}
.card span{font-size:2.1rem;display:block;margin-bottom:8px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:#444}

.embed-wrap{max-width:1000px;margin:auto}
.embed-wrap .carousel iframe{height:360px}

footer{background:var(--blue);color:#fff;text-align:center;padding:20px;margin-top:40px}

@media (max-width:900px){
  header{padding:12px 18px;gap:10px;flex-wrap:wrap}
  .hero{grid-template-columns:1fr;padding:28px 18px 34px}
  section{padding:38px 18px}
  .embed-wrap .carousel iframe{height:260px}
}

/* Home layout: keep content above the fold, Why Zbytez beside the right stack */
.home-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:22px;
  padding:38px 40px 46px;
  background:linear-gradient(120deg,#a7d6ff,#e3f2fd 55%,#ffffff);
}
.home-left{display:flex;flex-direction:column;gap:18px}
.home-left .intro{
  padding-right:10px;
}
.home-left .intro h1{
  margin: 0 0 10px;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.08;
  color: #0b2a4a; /* deep professional navy */
}

.home-left .intro h1 span{
  background: linear-gradient(90deg, #1e88e5, #00bcd4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-left .intro p{font-size:1.1rem;margin:0;max-width:46ch}
.home-left .why{
  margin:0;
  padding:28px 24px;
}
/* Remove default section padding for home-only components */
.home-left section{padding:0;max-width:none;margin:0}
/* Keep cards slightly tighter on home */
.home-left .cards{gap:14px}
@media (max-width:900px){
  .home-grid{grid-template-columns:1fr;padding:28px 18px 34px}
}
/* Premium Home Page Heading */
.hero h1{
  margin: 0 0 10px;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.08;
  color: #0b2a4a; /* deep professional navy */
}

/* Soft gradient highlight for emphasis word */
.hero h1 span{
  background: linear-gradient(90deg, #1e88e5, #00bcd4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* About page styling - colorful but professional */
.about-hero{
  padding: 34px 40px;
  background: linear-gradient(120deg, #a7d6ff, #e3f2fd 55%, #ffffff);
}
.about-hero-inner{
  max-width: 1100px;
  margin: auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.about-hero h1{
  margin:0 0 6px;
  color:#0b2a4a;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing:-0.4px;
}
.about-hero p{margin:0;color:#234}
.about-badge{
  background:#ffffffcc;
  border:1px solid #d7ecff;
  padding:10px 14px;
  border-radius:999px;
  color:#0d47a1;
  font-weight:800;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

.about-wrap{padding: 46px 40px; max-width:1100px; margin:auto;}
.about-card{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 22px;
  background:#fff;
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  overflow:hidden;
}
.about-card.about-right{
  grid-template-columns: 1.1fr 0.9fr;
}
.about-card.about-right .about-photo{order:2;}
.about-card.about-right .about-content{order:1;}

.about-photo{
  background: linear-gradient(135deg, #ffcc80, #ffd54f, #81d4fa);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-photo img{
  width: 100%;
  max-width: 360px;
  border-radius: 22px;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  object-fit: cover;
}

.about-content{padding: 26px 26px 30px;}
.about-content h2{margin:0 0 12px;color:#0d47a1}
.about-content p{margin:0 0 14px;line-height:1.65;color:#233}
.about-highlight{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #e3f2fd;
  border-left: 6px solid #1e88e5;
  font-weight: 800;
  color:#0b2a4a;
}

@media (max-width: 900px){
  .about-hero{padding: 26px 18px}
  .about-hero-inner{flex-direction:column;align-items:flex-start}
  .about-wrap{padding: 38px 18px}
  .about-card, .about-card.about-right{
    grid-template-columns: 1fr;
  }
  .about-card.about-right .about-photo{order:0;}
  .about-card.about-right .about-content{order:0;}
}