/* Cogenita - Exact Concept + Spotify - Final - Clean */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Nunito',sans-serif; color:#4A4A5A; background:#FFFBF5; line-height:1.6; overflow-x:hidden; }
h1,h2,h3 { font-family:'Poppins',sans-serif; color:#3A4A62; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit; transition:.3s;}

.site-header { background:rgba(255,251,245,0.98); padding:14px 0; position:sticky; top:0; z-index:1000; backdrop-filter:blur(8px); box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.nav-container { display:flex; justify-content:space-between; align-items:center; }
.logo { font-family:'Poppins',sans-serif; font-size:22px; font-weight:700; color:#3A4A62; display:flex; align-items:center; gap:10px; }
.logo::before { content:''; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#7DA2D9 0%,#C9A8DD 50%,#F6B59D 100%); display:inline-block; }
.main-nav ul { display:flex; list-style:none; gap:28px; align-items:center; }
.main-nav a { font-weight:600; font-size:14px; color:#5A6A82; }
.btn-nav { background:linear-gradient(90deg,#F6B59D,#E89A8F); color:white !important; padding:10px 22px; border-radius:25px; font-weight:700; box-shadow:0 4px 12px rgba(232,154,143,0.3); }

.hero { position:relative; padding:70px 0 90px; background:linear-gradient(180deg,#FFFBF5 0%,#E8F6EC 40%,#FFEAD9 100%); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:0.9fr 1.2fr 0.9fr; gap:30px; align-items:center; position:relative; z-index:1; }
.hero-img { width:100%; height:380px; object-fit:cover; border-radius:22px; box-shadow:0 12px 32px rgba(0,0,0,0.08); }
.hero-content { text-align:center; }
.hero-content h1 { font-size:46px; line-height:1.1; margin-bottom:12px; }
.subtitle { font-size:17px; margin-bottom:28px; color:#6A7A8F; }
.btn-primary { display:inline-block; background:linear-gradient(90deg,#FF9A8A,#FF7A6A); color:white; padding:14px 32px; border-radius:30px; font-weight:700; font-size:15px; box-shadow:0 6px 20px rgba(255,122,106,0.35); border:none; cursor:pointer; }

.section { padding:64px 0; position:relative; }
.section-title { display:flex; align-items:center; justify-content:center; gap:20px; font-size:26px; margin-bottom:42px; text-align:center; }
.line { flex:1; max-width:110px; height:1px; background:linear-gradient(90deg,transparent,#C9B7E8,transparent); }

.value-section { background:#FFFBF5; }
.value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; max-width:980px; margin:0 auto; }
.value-card { display:flex; flex-direction:column; align-items:center; }
.dome { width:88px; height:46px; border-radius:88px 88px 0 0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px; box-shadow:0 -4px 12px rgba(0,0,0,0.05); }
.dome.coral { background:linear-gradient(135deg,#C9A8D9,#B89AC9); }
.dome.sand { background:linear-gradient(135deg,#F5B07B,#E89A6A); }
.dome.sage { background:linear-gradient(135deg,#8BC4A8,#7AB89A); }
.dome.lilac { background:linear-gradient(135deg,#D0A8D9,#C098C9); }
.label { background:white; padding:12px 18px; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,0.07); font-weight:700; font-size:14px; width:100%; text-align:center; margin-top:-1px; }

.transform-section { background:linear-gradient(180deg,#FFFBF5 0%,#FFF8F2 100%); text-align:center; }
.transform-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1100px; margin:0 auto 28px; }
.transform-card { position:relative; border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,0.08); background:white; }
.t-img { width:100%; height:320px; object-fit:cover; }
.badge { position:absolute; bottom:0; left:0; padding:8px 18px; font-weight:700; font-size:12px; color:white; border-radius:0 12px 0 0; }
.badge.before { background:#9C8AC8; }
.badge.after { background:linear-gradient(90deg,#F5B07B,#E99A8F); }
.cta-text { font-size:18px; font-weight:600; margin-bottom:18px; }

.plan-section { background:linear-gradient(180deg,#FFFBF5 0%,#F4F0FA 100%); text-align:center; }
.plan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1100px; margin:0 auto; }
.plan-card { padding:28px 18px; border-radius:16px; color:white; box-shadow:0 8px 20px rgba(0,0,0,0.08); text-align:center; }
.plan-card h3 { font-size:15px; color:white; font-family:'Nunito',sans-serif; }
.plan-card.blue { background:linear-gradient(135deg,#7A9AC5,#8AB0D6); }
.plan-card.orange { background:linear-gradient(135deg,#EFA87A,#F2BC8F); }
.plan-card.teal { background:linear-gradient(135deg,#7CB9A8,#8EC9B8); }
.plan-card.pink { background:linear-gradient(135deg,#E99AA0,#EEA8B0); }

.spotify-section { background:linear-gradient(180deg,#F4F0FA 0%,#FFFBF5 100%); text-align:center; padding-bottom:80px; }
.subtitle-text { max-width:680px; margin:0 auto 28px; font-size:15px; color:#6A7A8F; }
.spotify-wrapper { max-width:760px; margin:0 auto; background:white; padding:14px; border-radius:20px; box-shadow:0 12px 32px rgba(155,155,196,0.18); border:1px solid rgba(255,255,255,0.8); }

.testimonial-section { background:linear-gradient(180deg,#FFFBF5 0%,#D6F0E0 30%,#FFEAD9 100%); padding:70px 0; }
.quote-box { max-width:760px; margin:0 auto; background:rgba(255,255,255,0.92); padding:28px 32px; border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,0.06); display:flex; align-items:center; gap:22px; border:1px solid rgba(255,255,255,0.9); }
.quote-img { width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid #F4F0FA; flex-shrink:0; }
.quote-text { text-align:left; }
.quote-mark { font-size:42px; color:#E89A8F; opacity:0.5; line-height:0.8; margin-bottom:4px; }
.quote-text p:nth-of-type(2) { font-size:17px; font-style:italic; margin-bottom:8px; color:#3A4A62; }
.quote-text cite { font-weight:700; font-style:normal; font-size:13px; color:#7A8A9F; }

.site-footer { background:#2E2E3E; color:#FDFBF9; padding:50px 0 20px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:30px; }
.copyright { text-align:center; padding-top:20px; border-top:1px solid rgba(253,251,249,0.1); opacity:0.5; font-size:13px; }

/* iPad / Tablet - Fix images cutting off */
@media(max-width:1024px){
  .nav-container{flex-wrap:wrap; gap:12px;}
  .main-nav ul{gap:16px; flex-wrap:wrap; justify-content:center;}
  .hero{padding:40px 0 60px;}
  .hero-grid{grid-template-columns:1fr; gap:24px; text-align:center; max-width:700px; margin:0 auto;}
  .hero-image-left, .hero-image-right{order:1;}
  .hero-content{order:2;}
  .hero-img{height:auto !important; max-height:none !important; width:100%; object-fit:contain; object-position:center top; border-radius:20px; aspect-ratio:auto;}
  .hero-content h1{font-size:40px;}
}
@media(max-width:992px){
  .value-grid,.transform-grid,.plan-grid{grid-template-columns:repeat(2,1fr);}
  .quote-box{flex-direction:column; text-align:center;}
  .quote-text{text-align:center;}
  .t-img{height:auto !important; aspect-ratio:4/5; object-fit:contain; object-position:top center; background:white;}
}
@media(max-width:576px){
  .value-grid,.transform-grid,.plan-grid{grid-template-columns:1fr;}
  .hero-content h1{font-size:32px;}
  .hero-img{height:auto !important; max-height:none !important; object-fit:contain; object-position:center top;}
  .t-img{height:auto !important; aspect-ratio:auto; object-fit:contain;}
  .transform-card{height:auto;}
  .container{padding:0 16px;}
  .site-header{padding:10px 0;}
  .main-nav ul{gap:10px;}
  .btn-nav{padding:8px 16px; font-size:12px;}
}