@charset "utf-8";

:root { --ff-sage: #243447; --ff-sage-dk: #31465F; --ff-sage-lt: #DDE5D8; --ff-cream: #FAFAF8; --ff-peach: #E7C9C9; --ff-peach-lt: #F2DFDF; --ff-lav: #BCC8B4; --ff-lav-lt: #DDE5D8; --ff-sky: #50657D; --ff-sky-lt: #E8F0F5; --ff-yel: #E7E5E4; --ff-yel-lt: #F1EFED; --ff-char: #1e2d3d; --ff-brown: #5B6470; --ff-r: 20px; }

.ff2-hero { background: linear-gradient(135deg, rgb(18, 33, 58) 0%, rgb(27, 46, 74) 100%); padding: 48px 24px 40px; text-align: center; color: rgb(255, 255, 255); border-radius: 0px 0px 32px 32px; position: relative; }

.ff2-hero::before { content: ""; position: absolute; top: -100px; right: -100px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(232, 244, 233, 0.55) 0%, transparent 65%); pointer-events: none; }

.ff2-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--ff-sage-lt); border: 1px solid rgba(36, 52, 71, 0.22); border-radius: 50px; padding: 5px 15px 5px 10px; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-sage-dk); margin-bottom: 20px; }

.ff2-hero h1 { font-family: Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; color: var(--ff-char); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 16px; }

.ff2-hero h1 em { font-style: normal; -webkit-text-fill-color: transparent; background-clip: text; }

.ff2-hero-sub { font-size: 1.07rem; color: var(--ff-brown); line-height: 1.75; max-width: 540px; margin: 0px auto 10px; font-weight: 300; }

.ff2-hero-support { font-size: 0.88rem; color: rgba(107, 91, 78, 0.7); margin: 0px auto 34px; max-width: 460px; line-height: 1.65; }

.ff2-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.ff2-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg,var(--ff-sage),var(--ff-sage-dk)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 14px 28px; border-radius: 50px; font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: rgba(36, 52, 71, 0.1) 0px 4px 18px; transition: 0.22s; }

.ff2-btn-primary:hover { transform: translateY(-2px); box-shadow: rgba(36, 52, 71, 0.15) 0px 7px 26px; }

.ff2-btn-outline { display: inline-flex; align-items: center; gap: 7px; background: rgb(255, 255, 255); color: var(--ff-char); border: 1.5px solid rgba(30, 45, 61, 0.16); padding: 12px 26px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.22s; }

.ff2-btn-outline:hover { background: var(--ff-sage-lt); border-color: var(--ff-sage); color: var(--ff-sage-dk); }

.ff2-bowl { background: linear-gradient(135deg, rgb(247, 248, 246), rgb(221, 229, 216)); border-radius: 50%; width: 200px; height: 150px; margin: 40px auto 0px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; box-shadow: rgba(36, 52, 71, 0.18) 0px 8px 40px; }

.ff2-float-ing { position: absolute; font-size: 1.5rem; animation: 4s ease-in-out 0s infinite normal none running ff2Float; }

.ff2-float-ing:nth-child(2) { top: -18px; left: 18px; animation-delay: -1s; }

.ff2-float-ing:nth-child(3) { top: -8px; right: 28px; animation-delay: -2s; }

.ff2-float-ing:nth-child(4) { bottom: -14px; left: 8px; animation-delay: -0.5s; }

.ff2-float-ing:nth-child(5) { bottom: -4px; right: 18px; animation-delay: -2.5s; }

@keyframes ff2Float { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

.ff2-section { padding: var(--section-gap) var(--content-pad); }

.ff2-inner { max-width: 1100px; margin: 0px auto; }

.ff2-sec-eyebrow { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-sage); text-align: center; margin-bottom: 9px; }

.ff2-sec-title { font-family: Georgia, serif; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--ff-char); text-align: center; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 9px; }

.ff2-sec-sub { font-size: 0.95rem; color: var(--ff-brown); line-height: 1.75; text-align: center; max-width: 520px; margin: 0px auto 44px; font-weight: 300; }

.ff2-texture-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.ff2-tex-card { background: rgb(255, 255, 255); border-radius: var(--ff-r); padding: 22px 16px 20px; text-align: center; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 16px; border: 1px solid rgba(30, 45, 61, 0.05); cursor: pointer; transition: 0.22s; }

.ff2-tex-card:hover { transform: translateY(-4px); box-shadow: rgba(30, 45, 61, 0.11) 0px 8px 32px; }

.ff2-tex-icon { font-size: 1.8rem; margin-bottom: 10px; display: block; }

.ff2-tex-name { font-size: 0.92rem; font-weight: 700; color: var(--ff-char); margin-bottom: 5px; }

.ff2-tex-desc { font-size: 0.77rem; color: var(--ff-brown); line-height: 1.5; margin-bottom: 12px; }

.ff2-tex-btn { font-size: 0.75rem; font-weight: 600; color: var(--ff-sage-dk); background: var(--ff-sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 5px 14px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-tex-btn:hover { background: var(--ff-sage); color: rgb(255, 255, 255); }

.ff2-library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }

.ff2-lib-card { background: rgb(255, 255, 255); border-radius: var(--ff-r); padding: 26px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 16px; border: 1px solid rgba(30, 45, 61, 0.05); cursor: pointer; transition: 0.22s; }

.ff2-lib-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 7px 26px; }

.ff2-lib-icon { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 13px; }

.ff2-lib-card h4 { font-size: 0.96rem; font-weight: 700; color: var(--ff-char); margin-bottom: 6px; }

.ff2-lib-card p { font-size: 0.8rem; color: var(--ff-brown); line-height: 1.65; margin-bottom: 12px; }

.ff2-lib-btn { font-size: 0.76rem; font-weight: 600; color: var(--ff-sage-dk); background: var(--ff-sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 6px 14px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-lib-btn:hover { background: var(--ff-sage); color: rgb(255, 255, 255); }

.ff2-library-note { background: linear-gradient(135deg,var(--ff-sage-lt),#F7F8F6); border: 1px solid rgba(36, 52, 71, 0.2); border-radius: 16px; padding: 18px 22px; text-align: center; font-size: 0.86rem; color: var(--ff-brown); line-height: 1.65; }

.ff2-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }

.ff2-chip { padding: 8px 18px; border-radius: 50px; font-size: 0.81rem; font-weight: 500; cursor: pointer; border: 1.5px solid rgba(36, 52, 71, 0.22); background: rgb(255, 255, 255); color: var(--ff-brown); transition: 0.2s; font-family: inherit; white-space: nowrap; }

.ff2-chip:hover { border-color: var(--ff-sage); color: var(--ff-sage-dk); background: rgb(242, 248, 242); }

.ff2-chip.active { background: var(--ff-sage); color: rgb(255, 255, 255); border-color: var(--ff-sage); box-shadow: rgba(36, 52, 71, 0.28) 0px 3px 12px; }

.ff2-recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.ff2-rec-card { background: rgb(255, 255, 255); border-radius: var(--ff-r); padding: 24px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 16px; border: 1px solid rgba(30, 45, 61, 0.05); transition: 0.22s; }

.ff2-rec-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 8px 28px; }

.ff2-rec-emoji { font-size: 2.8rem; margin-bottom: 12px; display: block; }

.ff2-rec-card h4 { font-size: 1rem; font-weight: 700; color: var(--ff-char); margin-bottom: 8px; }

.ff2-rec-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

.ff2-rec-tag { font-size: 0.68rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; }

.ff2-tag-feel { background: var(--ff-sage-lt); color: var(--ff-sage-dk); }

.ff2-tag-tex { background: var(--ff-peach-lt); color: rgb(160, 74, 26); }

.ff2-tag-mood { background: var(--ff-lav-lt); color: rgb(90, 74, 138); }

.ff2-rec-note { font-size: 0.79rem; color: var(--ff-brown); line-height: 1.6; margin-bottom: 14px; }

.ff2-rec-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.05); }

.ff2-rec-save { font-size: 0.75rem; font-weight: 600; color: var(--ff-brown); background: rgb(255, 255, 255); border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: 50px; padding: 6px 14px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-rec-save:hover { background: var(--ff-sage-lt); border-color: var(--ff-sage); color: var(--ff-sage-dk); }

.ff2-rec-cta { font-size: 0.75rem; font-weight: 700; color: rgb(255, 255, 255); background: linear-gradient(135deg,var(--ff-sage),var(--ff-sage-dk)); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 7px 14px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-profile-wrap { background: linear-gradient(145deg, rgb(247, 248, 246), rgb(250, 250, 248), rgb(240, 245, 251)); border-radius: 24px; padding: 40px; border: 1px solid rgba(36, 52, 71, 0.14); }

.ff2-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 28px; }

.ff2-profile-field { background: rgb(255, 255, 255); border-radius: 16px; padding: 20px; box-shadow: rgba(30, 45, 61, 0.05) 0px 1px 10px; }

.ff2-profile-field label { display: block; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ff-sage-dk); margin-bottom: 8px; }

.ff2-tags-row { display: flex; flex-wrap: wrap; gap: 6px; }

.ff2-ptag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 50px; font-size: 0.77rem; font-weight: 500; cursor: pointer; background: var(--ff-sage-lt); color: var(--ff-sage-dk); border: 1.5px solid transparent; transition: 0.18s; user-select: none; }

.ff2-ptag.selected { background: var(--ff-sage); color: rgb(255, 255, 255); }

.ff2-ptag.avoid { background: rgb(255, 240, 241); color: rgb(138, 58, 64); }

.ff2-ptag.avoid.selected { background: rgb(192, 112, 110); color: rgb(255, 255, 255); }

.ff2-profile-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.ff2-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.ff2-tool-card { background: rgb(255, 255, 255); border-radius: var(--ff-r); padding: 24px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.05); transition: 0.22s; }

.ff2-tool-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 7px 26px; }

.ff2-tool-icon { font-size: 1.8rem; margin-bottom: 11px; }

.ff2-tool-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--ff-char); margin-bottom: 6px; }

.ff2-tool-card p { font-size: 0.8rem; color: var(--ff-brown); line-height: 1.65; margin-bottom: 13px; }

.ff2-tool-btn { font-size: 0.76rem; font-weight: 600; color: var(--ff-sage-dk); background: var(--ff-sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 7px 15px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-tool-btn:hover { background: var(--ff-sage); color: rgb(255, 255, 255); }

.ff2-connect-band { background: linear-gradient(145deg, rgb(30, 45, 61), rgb(45, 61, 90)); padding: 56px 24px; text-align: center; }

.ff2-connect-band h3 { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 10px; }

.ff2-connect-band p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.7); max-width: 460px; margin: 0px auto 28px; line-height: 1.7; }

.ff2-connect-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.ff2-connect-chip { padding: 9px 20px; border-radius: 50px; font-size: 0.82rem; font-weight: 600; cursor: pointer; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); border: 1.5px solid rgba(255, 255, 255, 0.2); transition: 0.2s; font-family: inherit; }

.ff2-connect-chip:hover { background: rgba(255, 255, 255, 0.22); }

@media (max-width: 900px) {
  .ff2-texture-grid { grid-template-columns: repeat(3, 1fr); }
  .ff2-library-grid { grid-template-columns: 1fr 1fr; }
  .ff2-recipe-grid { grid-template-columns: 1fr 1fr; }
  .ff2-tools-grid { grid-template-columns: 1fr 1fr; }
  .ff2-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ff2-section { padding: 52px 18px; }
  .ff2-hero { padding: 56px 18px 64px; }
  .ff2-texture-grid { grid-template-columns: 1fr 1fr; }
  .ff2-library-grid { grid-template-columns: 1fr; }
  .ff2-recipe-grid { grid-template-columns: 1fr; }
  .ff2-tools-grid { grid-template-columns: 1fr; }
  .ff2-profile-wrap { padding: 24px 16px; }
  .ff2-connect-grid { flex-direction: column; align-items: center; }
}