/* ===== TARA — Shared Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --yellow:#FFD93D;--yd:#C9A800;--yl:#FFFBE6;
  --teal:#3ECFCF;--td:#29AAAA;--tl:#E6FAFA;
  --coral:#FF6B6B;--cl:#FFF0F0;
  --mint:#6BCB77;--ml:#F0FAF1;
  --purple:#A855F7;--pl:#F5EEFF;
  --text:#1a1a2e;--muted:#6B7280;--border:#F0E4C8;
  --white:#FFFFFF;--bg:#FFFDF0;
}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--text);background:var(--white);overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;width:100%;background:rgba(255,253,240,.97);backdrop-filter:blur(12px);border-bottom:3px solid var(--yellow);z-index:999;padding:0 5%}
.nav-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-size:21px;font-weight:900;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:10px}
.logo-box{background:var(--yellow);border:2.5px solid var(--yd);border-radius:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 3px 0 var(--yd)}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:700;transition:color .2s}
.nav-links a:hover{color:var(--td)}
.nav-cta{background:var(--yellow);color:var(--text);padding:11px 24px;border-radius:50px;font-size:14px;font-weight:900;text-decoration:none;border:2.5px solid var(--yd);box-shadow:0 3px 0 var(--yd);transition:all .2s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--yd)}

/* MOBILE NAV */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:3px solid var(--yellow);z-index:999;justify-content:space-around;align-items:center;padding:10px 0 14px}
.mob-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--muted);font-size:10px;font-weight:800;font-family:'Fredoka One',cursive}
.mob-nav a span{font-size:20px}
.mob-nav a.active{color:var(--td)}
.mob-wa{background:#25D366 !important;color:#fff !important;padding:6px 14px;border-radius:50px;font-size:11px !important;font-weight:800 !important;display:flex;flex-direction:row !important;gap:6px;align-items:center}

/* SHARED TAGS */
.stag{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;font-size:18px;font-weight:800;margin-bottom:20px;border:3px solid}
.ty{background:var(--yl);color:#7a5200;border-color:var(--yd)}
.tt{background:var(--tl);color:var(--td);border-color:var(--teal)}
.tc{background:var(--cl);color:#cc2222;border-color:var(--coral)}
.tm{background:var(--ml);color:#1a6e2a;border-color:var(--mint)}
.tp{background:var(--pl);color:#7c22c9;border-color:var(--purple)}

h2{font-size:32px;font-weight:900;line-height:1.2;margin-bottom:12px}
.h2y{color:var(--yd)}.h2t{color:var(--td)}
.h1y{color:var(--yd)}.h1t{color:var(--td)}

/* FADE UP ANIMATION */
.fade-up{opacity:0;transform:translateY(24px);transition:all .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* FOOTER (simple) */
footer a{color:#94a3b8;text-decoration:none;font-size:13px;transition:color .2s}
footer a:hover{color:var(--yellow)}

/* ===== CLASSIC PREVIEW — SHARED ===== */
body.classic-preview{
  font-family:'Manrope','Segoe UI',system-ui,sans-serif !important;
  background:#fbfaf6;
  color:#1f2937;
}
body.classic-preview h1,
body.classic-preview h2,
body.classic-preview h3,
body.classic-preview .logo,
body.classic-preview .nav-cta,
body.classic-preview .nav-links a,
body.classic-preview .stag{
  font-family:'DM Serif Display',Georgia,serif !important;
  letter-spacing:0 !important;
}
body.classic-preview nav{
  background:rgba(251,250,246,.95) !important;
  backdrop-filter:blur(10px) !important;
  border-bottom:1px solid rgba(201,168,0,.35) !important;
}
body.classic-preview .logo-box,
body.classic-preview .flogo-i{
  background:#f7edd1 !important;
  border-color:#d0b36a !important;
  box-shadow:none !important;
}
body.classic-preview .h1y,
body.classic-preview .h1t,
body.classic-preview .h2y,
body.classic-preview .h2t{
  color:#800000 !important;
}
body.classic-preview .nav-cta{
  background:#213547 !important;
  color:#fff !important;
  border:1px solid #213547 !important;
  box-shadow:none !important;
}
body.classic-preview .stag{
  border-width:1px !important;
  border-color:#ddd4c1 !important;
  background:#f6f2e8 !important;
  color:#5a6470 !important;
  border-radius:999px !important;
  font-size:16px !important;
}
body.classic-preview footer{
  background:#f6f2e8 !important;
  border-top:1px solid #e0d7c6 !important;
}

/* CTA SOFT PREVIEW — SHARED */
body.cta-soft-preview .nav-cta{
  background:#efe6cf !important;
  color:#213547 !important;
  border:1px solid #d6c59b !important;
  box-shadow:none !important;
}
body.cta-soft-preview .nav-cta:hover{
  background:#f5edd9 !important;
  color:#1d3142 !important;
}

/* ===== MOBILE BREAKPOINTS — SHARED ===== */
@media(max-width:768px){
  nav{
    position:sticky;
    top:0;
    background:#FFFDF0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .nav-in{
    height:auto;
    padding:14px 0 12px;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-start;
  }
  .logo{font-size:18px}
  .logo-box{width:34px;height:34px;font-size:18px}
  .nav-links{
    display:flex;
    width:100%;
    gap:14px;
    overflow-x:auto;
    padding-bottom:2px;
    padding-right:20px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links li{flex:0 0 auto}
  .nav-links li:last-child{padding-right:16px}
  .nav-links a{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    font-size:12px;
  }
  .nav-cta{display:none}
  .mob-nav{display:none !important}
  body{padding-top:0;padding-bottom:0}
  .fade-up{opacity:1;transform:none}
}