/* Source CSS for .fi (What You'll Find Inside) section */

.fi {
  --purple: #6e5cf5;
  --blue:   #2d7fff;
  --teal:   #0dcfb4;
  --pink:   #c155f0;
  --text:   #4B5563;
  --muted:  #6B7280;
  --ease:   cubic-bezier(.22,1,.36,1);

  background: #ffffff;
  padding: 90px 40px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: 'F37 Moon', sans-serif;
}

.fi::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(110,92,245,.055) 0%, transparent 70%);
  top: -150px; right: -100px;
  pointer-events: none;
}

.fi::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(45,127,255,.04) 0%, transparent 70%);
  bottom: -80px; left: -80px;
  pointer-events: none;
}

.fi__inner { max-width: 1140px; margin: 0 auto; position: relative; z-index: 1; }

.fi__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  margin-bottom: 72px;
}

.fi__label {
  display: inline-flex;
  padding: 5px 14px; border-radius: 100px;
  background: rgba(110,92,245,.1);
  color: var(--purple);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 18px;
}

.fi__headline {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.06; color: var(--text);
  margin-bottom: 18px;
}

.fi__body {
  font-size: 16px; line-height: 1.65; color: var(--muted);
  margin-bottom: 24px;
}

.fi__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 36px;
}

.fi__list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--muted);
}

.fi__list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(110,92,245,.1);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%236e5cf5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

.fi__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 100px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  background: #6e5cf5; color: #fff !important;
  border: none; cursor: pointer;
  text-decoration: none !important;
  transition: transform .2s var(--ease), box-shadow .2s;
}

.fi__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(110,92,245,.35);
  color: #fff !important;
}

.fi__right-text {
  padding: 36px;
  background: rgba(110,92,245,.04);
  border: 1px solid rgba(110,92,245,.1);
  border-radius: 24px;
}

.fi__right-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--purple);
  margin-bottom: 14px; opacity: .8;
}

.fi__right-headline {
  font-size: 20px; font-weight: 900; line-height: 1.25;
  letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 14px;
}

.fi__right-body {
  font-size: 14px; line-height: 1.65; color: var(--muted);
  margin-bottom: 16px;
}

.fi__right-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--purple); font-weight: 600;
}

.fi__right-hint svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Cards grid */
.fi__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.fi__card { perspective: 900px; cursor: default; }

.fi__card-inner {
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(110,92,245,.09);
  box-shadow: 0 4px 20px rgba(110,92,245,.06), 0 1px 3px rgba(0,0,0,.04);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .4s var(--ease), border-color .4s;
}

.fi__card:hover .fi__card-inner {
  box-shadow: 0 24px 56px rgba(110,92,245,.17), 0 4px 12px rgba(0,0,0,.06);
  border-color: rgba(110,92,245,.2);
}

/* Preview window */
.fi__preview {
  height: 220px;
  position: relative;
  overflow: hidden;
}

.fi__veil {
  position: absolute; inset: 0; z-index: 2;
  backdrop-filter: blur(5px) saturate(1.2);
  -webkit-backdrop-filter: blur(5px) saturate(1.2);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 100%);
  transition: backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease, background .5s ease;
}

.fi__card:hover .fi__veil {
  backdrop-filter: blur(2.5px) saturate(1.1);
  -webkit-backdrop-filter: blur(2.5px) saturate(1.1);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.35) 100%);
}

.fi__coming {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(110,92,245,.18);
  padding: 4px 14px; border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.fi__card:hover .fi__coming { opacity: 1; }

/* Mock UI: Flubb chat */
.mock-chat {
  padding: 14px 16px;
  background: linear-gradient(150deg, #f7f4fc 0%, #ede0f9 100%);
  height: 100%;
  display: flex; flex-direction: column; gap: 9px;
}
.mock-chat .sender { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6e5cf5; margin-bottom: 3px; }
.mock-chat .bub { border-radius: 14px; padding: 9px 12px; font-size: 10.5px; line-height: 1.45; max-width: 90%; }
.mock-chat .bub-app { background: linear-gradient(130deg, #ede0f9, #ddeeff); border: 1px solid rgba(110,92,245,.18); align-self: flex-start; border-bottom-left-radius: 4px; color: #4B5563; }
.mock-chat .bub-user { background: #fff; border: 1px solid rgba(0,0,0,.07); align-self: flex-end; border-bottom-right-radius: 4px; color: #6B7280; font-size: 11px; }
.mock-chat .typing { display: flex; gap: 4px; align-items: center; padding: 9px 12px; align-self: flex-start; background: linear-gradient(130deg, #ede0f9, #ddeeff); border: 1px solid rgba(110,92,245,.18); border-radius: 14px; border-bottom-left-radius: 4px; width: 50px; }
.mock-chat .typing span { width: 5px; height: 5px; border-radius: 50%; background: #6e5cf5; animation: td 1.2s ease-in-out infinite; }
.mock-chat .typing span:nth-child(2) { animation-delay: .18s; }
.mock-chat .typing span:nth-child(3) { animation-delay: .36s; }
@keyframes td { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

/* Mock UI: Emotion check-in */
.mock-emotion { padding: 14px 16px; background: linear-gradient(150deg, #f0f6ff 0%, #ddeeff 100%); height: 100%; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mock-emotion .eq { font-size: 11.5px; font-weight: 700; color: #4B5563; text-align: center; line-height: 1.4; }
.mock-emotion .emojis { display: flex; gap: 8px; }
.mock-emotion .em { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.65); border: 1.5px solid rgba(45,127,255,.12); display: flex; align-items: center; justify-content: center; font-size: 15px; transition: transform .2s; }
.mock-emotion .em img { width: 20px; height: 20px; object-fit: contain; }
.mock-emotion .em.active { background: rgba(45,127,255,.12); border-color: rgba(45,127,255,.38); transform: scale(1.18); }
.mock-emotion .bar-wrap { width: 100%; background: rgba(255,255,255,.5); border-radius: 10px; padding: 9px 11px; border: 1px solid rgba(45,127,255,.1); }
.mock-emotion .bar-label { font-size: 8.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #2d7fff; margin-bottom: 6px; }
.mock-emotion .bar { height: 5px; border-radius: 10px; background: rgba(45,127,255,.1); overflow: hidden; }
.mock-emotion .bar-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, #2d7fff, #6e5cf5); animation: bf 2.8s ease-in-out infinite alternate; }
@keyframes bf { from { width:38%; } to { width:65%; } }

/* Mock UI: Creative journal */
.mock-creative { padding: 14px 16px; background: linear-gradient(150deg, #fdf6d3 0%, #eed986 100%); height: 100%; display: flex; flex-direction: column; gap: 10px; }
.mock-creative .prompt { background: rgba(255,255,255,.7); border-radius: 10px; padding: 8px 10px; border: 1px solid rgba(238,217,134,.5); font-size: 11.5px; line-height: 1.5; color: #4B5563; }
.mock-creative .prompt-tag { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #b8960a; margin-bottom: 5px; }
.mock-creative .cursor { display: inline-block; width: 2px; height: 12px; background: #b8960a; animation: bl 1s step-end infinite; vertical-align: middle; margin-left: 1px; }
@keyframes bl { 0%,100%{opacity:1} 50%{opacity:0} }
.mock-creative .lines { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: rgba(255,255,255,.45); border-radius: 10px; border: 1px solid rgba(238,217,134,.4); }
.mock-creative .line { height: 5px; border-radius: 4px; background: rgba(184,150,10,.2); }
.mock-creative .line:nth-child(1) { width:92%; }
.mock-creative .line:nth-child(2) { width:68%; }
.mock-creative .line:nth-child(3) { width:80%; }

/* Mock UI: Habit planner */
.mock-habit { padding: 14px 16px; background: linear-gradient(150deg, #fdf4ff 0%, #f0d9ff 100%); height: 100%; display: flex; flex-direction: column; gap: 9px; }
.mock-habit .htitle { font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #c155f0; margin-bottom: 2px; }
.mock-habit .hrow { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.6); border-radius: 10px; padding: 6px 10px; border: 1px solid rgba(193,85,240,.1); }
.mock-habit .hcheck { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid rgba(193,85,240,.35); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mock-habit .hcheck.done { background: #c155f0; border-color: #c155f0; }
.mock-habit .hcheck.done::after { content: ''; width: 5px; height: 3.5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translateY(-1px); display: block; }
.mock-habit .htext { font-size: 10px; color: #4B5563; }
.mock-habit .htext.done { color: #9ca3af; text-decoration: line-through; }
.mock-habit .streak { display: flex; align-items: center; gap: 7px; background: rgba(193,85,240,.07); border-radius: 9px; padding: 7px 10px; margin-top: 1px; }
.mock-habit .streak-n { font-size: 17px; font-weight: 900; color: #c155f0; letter-spacing: -0.04em; line-height: 1; }
.mock-habit .streak-l { font-size: 9px; color: var(--muted); line-height: 1.3; }

/* Card body */
.fi__card-body { padding: 20px; }
.fi__card-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--purple); margin-bottom: 6px; }
.fi__card-body h3 { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-bottom: 7px; }
.fi__card-body p { font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* Responsive */
@media (max-width: 980px) {
  .fi__header { grid-template-columns: 1fr; gap: 32px; }
  .fi__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .fi { padding: 52px 20px; border-radius: 20px; }
  .fi__cards { grid-template-columns: 1fr; }
}