/*
Theme Name: RecapMood Theme
Theme URI: https://recapmood.com
Author: Zalwa Zalirah Ghazali
Description: Theme WordPress Company Profile RecapMood
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recapmood
*/
:root{--pink:#63b3f3;--lav:#8b9cf5;--peach:#ffe8a3;--ink:#2c3e50;--bg:#f6faff;--glass:rgba(255,255,255,.65);--r:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito',sans-serif;line-height:1.7;background-image:linear-gradient(160deg,#bfe0ff 0%,#e4f1ff 38%,#fff8d6 72%,#ffeaa0 100%);background-attachment:fixed;min-height:100vh}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.25;margin:0 0 12px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.sec-title{text-align:center;font-size:clamp(1.6rem,4vw,2.3rem)}
.sec-sub{text-align:center;max-width:680px;margin:0 auto 36px;opacity:.85}
.site-header{position:sticky;top:0;z-index:50;background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid rgba(139,156,245,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;max-width:1120px;margin:auto}
.brand{display:flex;align-items:center;gap:8px;font:700 1.2rem Poppins;color:var(--ink);text-decoration:none}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--pink),var(--lav));color:#fff;font-size:1.4rem;cursor:pointer}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}.nav a:hover{color:var(--pink)}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;background:linear-gradient(135deg,var(--pink),var(--lav));color:#fff;font:600 .95rem Poppins;text-decoration:none;box-shadow:0 8px 20px rgba(99,179,243,.35);margin:6px 6px 0 0}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--lav);box-shadow:none}
.chip{display:inline-block;background:var(--peach);padding:5px 14px;border-radius:999px;font-weight:700;font-size:.82rem;margin-bottom:14px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem)}.lead{font-size:1.1rem}
.phone{width:290px;max-width:100%;margin:auto;background:#2c3e50;border-radius:44px;padding:12px;box-shadow:0 30px 60px rgba(139,156,245,.4);transform:rotate(3deg)}
.screen{background:linear-gradient(180deg,#e3f1ff,#fff6cf);border-radius:34px;padding:22px 16px;min-height:480px}
.screen h4{text-align:center;font-size:1rem}.screen small{display:block;text-align:center;opacity:.7;margin-bottom:16px}
.moods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mood{background:#fff;border-radius:18px;padding:12px 4px;text-align:center;font-weight:700;font-size:.8rem;box-shadow:0 4px 12px rgba(139,156,245,.2)}
.mood span{display:block;font-size:2rem;transform-origin:center bottom}
.mood:nth-child(1) span{animation:bob 1.4s ease-in-out infinite}
.mood:nth-child(2) span{animation:sway 3s ease-in-out infinite}
.mood:nth-child(3) span{animation:shake 1.1s ease-in-out infinite}
.mood:nth-child(4) span{animation:tremble .35s linear infinite}
.mood:nth-child(5) span{animation:breathe 3.6s ease-in-out infinite}
.mood:nth-child(6) span{animation:glance 3.2s ease-in-out infinite}
.mood{transition:transform .2s}.mood:hover{transform:scale(1.08)}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.15)}}
@keyframes sway{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(3px)}}
@keyframes shake{0%,55%,100%{transform:translateX(0) rotate(0)}10%,30%{transform:translateX(-4px) rotate(-6deg)}20%,40%{transform:translateX(4px) rotate(6deg)}}
@keyframes tremble{0%,100%{transform:translate(0,0)}25%{transform:translate(1.5px,-1px)}50%{transform:translate(-1.5px,1px)}75%{transform:translate(1px,1.5px)}}
@keyframes breathe{0%,100%{transform:scale(.95)}50%{transform:scale(1.2)}}
@keyframes glance{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.mood span{animation:none!important}}
.fake-input{margin-top:14px;background:#fff;border-radius:14px;padding:10px;font-size:.78rem;opacity:.75}
.fake-btn{margin-top:10px;text-align:center;background:linear-gradient(135deg,var(--pink),var(--lav));color:#fff;border-radius:999px;padding:9px;font-weight:700;font-size:.85rem}
.grid{display:grid;gap:22px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.glass{background:var(--glass);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);border-radius:var(--r);padding:26px;box-shadow:0 10px 30px rgba(139,156,245,.15);transition:transform .25s}
.glass:hover{transform:translateY(-5px)}
.ico{font-size:2.2rem;display:block;margin-bottom:8px}
.problem{border-left:6px solid var(--pink)}.solution{border-left:6px solid var(--lav)}
.glass ul{padding-left:20px;margin:8px 0 0}
.tag{display:inline-block;background:var(--lav);color:#fff;border-radius:8px;padding:2px 10px;font-size:.8rem;margin:2px}
.arch{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.swot .s{border-top:6px solid #7bd3a8}.swot .w{border-top:6px solid var(--peach)}.swot .o{border-top:6px solid var(--lav)}.swot .t{border-top:6px solid var(--pink)}
.bmc{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.bmc .glass{padding:18px;font-size:.88rem}.bmc .glass h4{font-size:.95rem;color:#3a6fb5}
.bmc .kp{grid-row:span 2}.bmc .vp{grid-row:span 2}.bmc .kr{}.bmc .cs{grid-row:span 2}
.bmc .wide{grid-column:span 2.5}
.price{text-align:center}.price .amt{font:700 2.2rem Poppins;color:var(--pink)}
.price.plus{background:linear-gradient(160deg,rgba(99,179,243,.25),rgba(139,156,245,.3))}
.price ul{list-style:none;padding:0;text-align:left}.price li{padding:5px 0}.price li:before{content:'✅ '}
.site-footer{background:var(--ink);color:#eee;padding:40px 0;text-align:center}
.site-footer a{color:var(--peach)}
#rm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
#rm-tabs button{border:2px solid var(--lav);background:#fff;border-radius:999px;padding:8px 16px;font:700 .9rem Nunito;cursor:pointer;color:var(--ink)}
#rm-tabs button.on{background:linear-gradient(135deg,var(--pink),var(--lav));color:#fff;border-color:transparent}
#rm-out{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#rm-out .box{background:rgba(255,255,255,.7);border-radius:16px;padding:18px}
#rm-out blockquote{margin:0;font-style:italic}
.badge{display:inline-block;background:var(--peach);border-radius:8px;padding:2px 10px;font-size:.75rem;font-weight:700;margin-bottom:8px}
.note{font-size:.82rem;opacity:.8;margin-top:10px}
@media(max-width:860px){#rm-out{grid-template-columns:1fr}}
@media(max-width:860px){.hero-grid,.g2,.g3,.arch{grid-template-columns:1fr}.bmc{grid-template-columns:1fr 1fr}.bmc .wide{grid-column:span 2}.phone{transform:none}
.nav-toggle{display:inline-flex}
.nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px 20px 14px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(139,156,245,.3);box-shadow:0 14px 24px rgba(99,179,243,.2)}
.nav ul.open{display:flex}
.nav ul a{display:block;padding:12px 4px;font-size:1rem;border-bottom:1px solid rgba(139,156,245,.18)}}
@media(prefers-color-scheme:dark){.glass{color:var(--ink)}}