/* ==========================================================================
   Unlonely — BOLD Headspace-style pass.
   Saturated colour-blocked panels + smiling blob characters + chunky type.
   Loaded last, overrides the softer cream theme. All artwork original.
   ========================================================================== */
@import "/fonts/fredoka.css";

/* ---- Chunky, rounded display type for headlines ------------------------- */
h1, h2{
  font-family:'Fredoka','Poppins',sans-serif !important;
  font-weight:700 !important; letter-spacing:-0.005em;
}

/* ========================================================================== */
/*  COLOUR-BLOCKED PANELS                                                      */
/* ========================================================================== */

/* 1 · Connect, Share, Grow  ->  bold cobalt (calm "night", keeps moon+stars) */
section.bg-gray-900.sm\:py-32:not(.overflow-hidden){ background:#2f6fe3 !important; }
section.bg-gray-900.sm\:py-32:not(.overflow-hidden) .bg-gray-800{
  background:rgba(255,255,255,.15) !important;
}

/* 3 · Get things off your chest  ->  bold orange (swap moon for a sun) */
section.bg-gray-900.overflow-hidden{ background:#ff7a1e !important; }
section.bg-gray-900.overflow-hidden::after{
  background-image:url(/_next/static/media/il-sun-bold.svg) !important;
  width:154px !important; height:154px !important; right:6% !important; top:46px !important;
}

/* 2 · Your Safe Haven  ->  sunny yellow, solid white cards */
section.py-20.sm\:py-32:not(.bg-gray-900):not(.border-t){ background:#ffce4a !important; }
section.py-20.sm\:py-32:not(.bg-gray-900):not(.border-t) li.rounded-2xl.border{
  background:#ffffff !important; border-color:rgba(0,0,0,.05) !important;
  box-shadow:0 14px 30px -18px rgba(120,80,20,.4) !important;
}
/* bold peeking characters instead of pastel blobs here */
section.py-20.sm\:py-32:not(.bg-gray-900):not(.border-t)::before{
  background-image:url(/_next/static/media/il-blob-pink.svg) !important;
  width:150px !important; height:150px !important; left:-46px !important; top:auto !important; bottom:-38px !important; opacity:1 !important;
}
section.py-20.sm\:py-32:not(.bg-gray-900):not(.border-t)::after{
  background-image:url(/_next/static/media/il-speech-orange.svg) !important;
  width:170px !important; height:145px !important; right:-30px !important; bottom:auto !important; top:70px !important; opacity:1 !important;
}

/* 4 · Reviews  ->  soft pink, blob characters */
section.pt-20.pb-16{ background:#ffe6ec !important; }
section.pt-20.pb-16::before{
  background-image:url(/_next/static/media/il-blob-blue.svg) !important;
  width:132px !important; height:132px !important; right:-40px !important; top:150px !important; opacity:1 !important;
}
section.pt-20.pb-16::after{
  background-image:url(/_next/static/media/il-blob-yellow.svg) !important;
  width:120px !important; height:120px !important; left:-40px !important; top:440px !important; opacity:1 !important;
}

/* 5 · FAQ -> keep light cream, add a peeking green buddy + sparkle */
section.border-t.border-gray-200{ position:relative; overflow:hidden; }
section.border-t.border-gray-200::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:140px; height:140px; left:-44px; bottom:-40px;
  background:url(/_next/static/media/il-blob-green.svg) center/contain no-repeat;
}
section.border-t.border-gray-200::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:54px; height:54px; right:8%; top:60px;
  background:url(/_next/static/media/il-star-bold.svg) center/contain no-repeat;
}
section.border-t.border-gray-200 > *{ position:relative; z-index:1; }

/* footer: friendly teal buddy sitting by the hills */
footer::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  width:96px; height:96px; right:5%; bottom:20px;
  background:url(/_next/static/media/il-blob-teal.svg) center/contain no-repeat;
}

/* legible light body text on the cobalt + orange panels */
section.bg-gray-900.sm\:py-32:not(.overflow-hidden) .text-gray-400,
section.bg-gray-900.sm\:py-32:not(.overflow-hidden) .text-gray-300,
section.bg-gray-900.overflow-hidden .text-gray-400,
section.bg-gray-900.overflow-hidden .text-gray-300{ color:rgba(255,255,255,.85) !important; }

/* ---- Hero: warmer sunny wash + a bold blob grounding the bottom --------- */
main > div:first-of-type{ background:linear-gradient(180deg,#fff2cf 0%, #fff8ee 46%); }
main > div:first-of-type > div{ position:relative; }
main > div:first-of-type > div::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  width:116px; height:116px; left:44%; bottom:-44px;
  background:url(/_next/static/media/il-blob-yellow.svg) center/contain no-repeat;
  animation:il-float-slow 7s ease-in-out infinite;
}