/* =========================================================
   DIGITAL CREATIVE PATH — COMPLETE STATIC CSS VERSION
   Volledige styling + fonts + responsive + SVG-iconen in CSS
   ========================================================= */

/* ------------------------- */
/* GLOBAL RESETS + BASE     */
/* ------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter', sans-serif;
  background:#ffffff;
  color:#333;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* ------------------------- */
/* HERO SECTION             */
/* ------------------------- */
.hero{
  padding:6rem 0 7rem;
  text-align:center;
  background:linear-gradient(to top,#A352E2,#5A5FEC);
}

.badge{
  display:inline-block;
  background:#A352E2;
  color:#333;
  padding:.4rem .9rem;
  border-radius:50px;
  font-size:.9rem;
  font-weight:500;
  margin-bottom:1.2rem;
}

.hero h1{
  font-size:3.2rem;
  font-weight:800;
  max-width:850px;
  margin:0 auto 1rem;
  color:#ffffff;
  line-height:1.15;
}

.hero p{
  font-size:1.25rem;
  max-width:750px;
  margin:0 auto;
  color:#ffffff;
}

/* BUTTONS */
.cta{
  display:inline-block;
  margin-top:2.2rem;
  background:#1FB2A6;
  color:#fff;
  padding:1.05rem 1.9rem;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  font-size:1.05rem;
  transition:.25s;
}

.cta:hover{
  background:#333;
  transform:translateY(-2px);
}

/* ------------------------- */
/* FEATURES GRID             */
/* ------------------------- */
.features{
  padding:5.5rem 0;
  background:#ffffff;
}

.features h2{
  text-align:center;
  font-size:2.4rem;
  font-weight:700;
  margin-bottom:3.2rem;
  color: #5A5FEC;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:3.5rem;
}

.card{
  background:#fff;
  padding:2.3rem;
  border-radius:16px;
  border:1px solid #e6e6e6;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition:.25s;
  text-align:center;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}

/* SVG ICONS VIA CSS — INLINE BASE64 */
.icon{
  width:48px;
  height:48px;
  margin:0 auto 1rem;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* LIGHTBULB */
.svg-lightbulb{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12c0 1-.5 3-1 4h10c-.5-1-1-3-1-4a7 7 0 0 0-4-12z'/%3E%3C/svg%3E");
}

/* BRAIN */
.svg-brain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12a3 3 0 1 0 3 3'/%3E%3Cpath d='M9 12a3 3 0 1 1-3 3'/%3E%3Cpath d='M12 6v1'/%3E%3Cpath d='M12 3a3 3 0 0 0-3 3'/%3E%3Cpath d='M12 3a3 3 0 0 1 3 3'/%3E%3C/svg%3E");
}

/* ROCKET */
.svg-rocket{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-5 5-1 6-6a4 4 0 1 0-6-6l-6 6-1 5z'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
}

/* STORY */
.svg-story{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3z'/%3E%3Cpath d='M3 8h18'/%3E%3C/svg%3E");
}

/* PSYCHOLOGY */
.svg-psychology{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
}

/* PROJECT */
.svg-project{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

.card h3{
  font-size:1.35rem;
  font-weight:600;
  margin-bottom:.6rem;
}

.card p{
  color:#4c4c4c;
  font-size:1.05rem;
  line-height:1.55;
}

/* ------------------------- */
/* CTA SECTION               */
/* ------------------------- */
.cta-section{
  text-align:center;
  padding:5.5rem 0;
  background:#f6f6f6;
}

.cta-section h2{
  font-size:2.2rem;
  font-weight:700;
  margin-bottom:.7rem;
}

.cta-section p{
  font-size:1.1rem;
  color:#555;
  margin-bottom:2.1rem;
}

.cta.large{
  padding:1.25rem 2.2rem;
  font-size:1.15rem;
}

/* ------------------------- */
/* FOOTER                    */
/* ------------------------- */
.footer{
  text-align:center;
  padding:2.3rem;
  border-top:1px solid #e5e5e5;
  background:linear-gradient(to top,#A352E2,#5A5FEC);
  font-size:.95rem;
  color:#ffffff;
}

/* ------------------------- */
/* RESPONSIVE TUNING         */
/* ------------------------- */
@media(max-width:900px){
  .hero h1{font-size:2.6rem}
  .hero p{font-size:1.15rem}
}

@media(max-width:600px){
  .hero{padding:4.5rem 0 5.5rem}
  .hero h1{font-size:2.15rem}
  .hero p{font-size:1rem}
  .cta{padding:.9rem 1.6rem;font-size:.95rem}
  .grid{gap:1.3rem}
}