:root{--bg:#fdf6e9;--card:#fffbf3;--line:#ecdcc0;--text:#4a3728;--mute:#8a7560;--pink:#f472b6;--violet:#a78bfa;--cyan:#38bdf8;--yellow:#f59e0b;--green:#10b981;--red:#f43f5e;--shadow:0 8px 24px rgba(160,120,70,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Nunito,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
h1,h2,h3,.logo{font-family:"Baloo 2",cursive}
.bg-blobs span{position:fixed;width:420px;height:420px;border-radius:50%;filter:blur(120px);opacity:.28;z-index:-1;animation:float 14s ease-in-out infinite}
.bg-blobs span:nth-child(1){background:#fbcfe8;top:-100px;left:-100px}
.bg-blobs span:nth-child(2){background:#fde68a;bottom:-120px;right:-80px;animation-delay:-5s}
.bg-blobs span:nth-child(3){background:#bae6fd;top:40%;left:45%;animation-delay:-9s}
@keyframes float{50%{transform:translate(60px,-40px) scale(1.15)}}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 6%;background:rgba(253,246,233,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font-size:1.6rem;color:var(--text);text-decoration:none;font-weight:800}
.logo span{color:var(--pink)}
.nav nav a{color:var(--mute);text-decoration:none;margin-left:20px;font-weight:700;transition:.2s}
.nav nav a:hover{color:var(--pink)}
main{max-width:1100px;margin:auto;padding:0 5%}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;min-height:85vh}
.badge{display:inline-block;padding:6px 14px;border-radius:99px;background:#fff1d6;border:1px solid var(--line);font-weight:800;color:#b45309}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.15;margin:16px 0}
.grad{background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mute);font-size:1.15rem;margin-bottom:28px}
.btn{display:inline-block;border:none;cursor:pointer;padding:14px 30px;border-radius:99px;font:800 1.1rem Nunito;color:#fff;background:linear-gradient(90deg,#fb923c,var(--pink));text-decoration:none;box-shadow:0 8px 24px rgba(244,114,182,.35);transition:.25s}
.btn:hover{transform:translateY(-3px) scale(1.04)}
.btn.small{padding:10px 22px;font-size:1rem}
.hidden{display:none}
.hero-chat{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.bubble{max-width:85%;padding:12px 16px;border-radius:18px;opacity:0;animation:pop .5s forwards}
.bubble.me{align-self:flex-end;color:#fff;background:linear-gradient(135deg,#fb923c,var(--pink));border-bottom-right-radius:4px}
.bubble.ai{background:#f5ead6;border-bottom-left-radius:4px}
.bubble:nth-child(2){animation-delay:.8s}.bubble:nth-child(3){animation-delay:1.8s}.bubble:nth-child(4){animation-delay:2.8s}
@keyframes pop{from{opacity:0;transform:translateY(15px) scale(.9)}to{opacity:1;transform:none}}
.section{padding:80px 0}
.section h2{font-size:clamp(1.9rem,4vw,2.6rem);text-align:center;margin-bottom:10px}
.sub{text-align:center;color:var(--mute);margin-bottom:30px}
.cards{display:grid;gap:22px;margin-top:30px}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;transition:.3s;position:relative;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-8px) rotate(-1deg);border-color:var(--pink);box-shadow:0 14px 34px rgba(244,114,182,.2)}
.card .ico{font-size:2.6rem}
.card h3{font-size:1.35rem;margin:6px 0}
.card p{color:var(--mute)}
.tip span{position:absolute;top:-14px;right:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#fb923c,var(--pink))}
.pieces{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.piece{border:none;cursor:pointer;padding:30px 10px;border-radius:20px;font:700 1.25rem "Baloo 2";color:var(--text);transition:.25s;box-shadow:var(--shadow)}
.piece:hover,.piece.active{transform:translateY(-6px) scale(1.05);box-shadow:0 12px 26px rgba(160,120,70,.25)}
.p1{background:#fecdd3}.p2{background:#fde68a}.p3{background:#bbf7d0}.p4{background:#bfdbfe}
.info-box{margin-top:22px;padding:22px;border-radius:18px;background:var(--card);border:2px dashed var(--line);text-align:center;font-size:1.1rem;min-height:70px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.cmp{padding:24px;border-radius:20px;border:2px solid}
.cmp p{font-size:1.1rem;font-weight:700;margin:8px 0}
.cmp small{color:var(--mute)}
.bad{border-color:#fda4af;background:#fff1f2}
.good{border-color:#6ee7b7;background:#ecfdf5}
.builder{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fields{display:flex;flex-direction:column;gap:14px}
.fields label{font-weight:800;display:flex;flex-direction:column;gap:6px}
.fields input{padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--text);font:1rem Nunito;outline:none;transition:.2s}
.fields input:focus{border-color:#fb923c;box-shadow:0 0 0 3px rgba(251,146,60,.2)}
.output{background:linear-gradient(135deg,#fff1d6,#fce7f3);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.out-head{display:flex;justify-content:space-between;font-weight:800;color:#b45309}
#prompt-out{flex:1;font-size:1.1rem;white-space:pre-wrap}
.quiz{max-width:700px;margin:30px auto 0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.q-progress{height:10px;background:#f1e4cc;border-radius:99px;overflow:hidden;margin-bottom:20px}
#q-bar{height:100%;width:0;background:linear-gradient(90deg,#fb923c,var(--pink));transition:.4s}
.q-text{font-size:1.25rem;font-weight:800;margin-bottom:16px}
.q-options{display:flex;flex-direction:column;gap:12px}
.q-options button{text-align:left;padding:14px 18px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--text);font:600 1rem Nunito;cursor:pointer;transition:.2s}
.q-options button:hover:not(:disabled){border-color:#fb923c;transform:translateX(6px)}
.q-options .right{border-color:var(--green);background:#d1fae5}
.q-options .wrong{border-color:var(--red);background:#ffe4e6;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.q-feedback{margin:16px 0;font-weight:700;min-height:24px}
footer{text-align:center;padding:40px;color:var(--mute);border-top:1px solid var(--line)}
.page{display:none}
.hero-img{width:100%;border-radius:20px;margin-bottom:6px}
.banner{display:block;width:100%;max-width:820px;margin:20px auto 10px;border-radius:26px;box-shadow:var(--shadow);border:4px solid #fff;transition:.4s}
.banner:hover{transform:scale(1.02) rotate(-.5deg)}
.page.active{display:block;animation:pageIn .45s ease}
.hero.page.active{display:grid}
@keyframes pageIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.section{min-height:75vh}
.nav nav a{padding:6px 12px;border-radius:99px}
.nav nav a.active{background:linear-gradient(90deg,#fb923c,var(--pink));color:#fff}
.page-nav{display:flex;justify-content:space-between;gap:12px;margin-top:50px}
.page-nav a{padding:12px 22px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:800;box-shadow:var(--shadow);transition:.2s}
.page-nav a:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px)}
.page-nav .next{margin-left:auto}
@media(max-width:800px){.hero,.builder,.compare{grid-template-columns:1fr}.pieces{grid-template-columns:1fr 1fr}.hero{padding-top:40px}
.nav{flex-direction:column;gap:8px}.nav nav{display:flex;overflow-x:auto;max-width:100%;white-space:nowrap}.nav nav a{margin-left:4px}}