:root{
  --bg:#f6f7f7;
  --purple:#5b2aa6;
  --text:#231f2e;

  --red:#e24747;
  --blue:#2d74df;

  --shadow: 0 18px 55px rgba(0,0,0,.12);
  --radius: 22px;
  --panelRadius: 18px;

  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
}

.page{
  min-height:100%;
  padding: 26px 16px 40px;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
}

.top{
  text-align:center;
  margin-bottom: 0px;
}

.top h1{
  margin: 0 0 14px;
  font-size: clamp(26px, 3.3vw, 44px);
  line-height: 1.08;
  color: var(--purple);
  letter-spacing: .2px;
}

.pill{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 18px 55px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  color:#fff;
  /* brush stroke placeholder */
  background: url("../imgs/patch.png") center/cover no-repeat;
  /*background-color:#de5b43; /* fallback if brush image missing */*/
}
.pill .sep{opacity:.8}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* Make card feel clickable */
.card{
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
}

/* outer glow border (on hover) */
.card::after{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: calc(var(--radius) - 6px);
  pointer-events:none;
  opacity: 0;
  transition: opacity .25s ease;
  background:
    radial-gradient(1200px 220px at 50% -10%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(91,42,166,.22), rgba(45,116,223,.12), rgba(226,71,71,.10));
  mix-blend-mode: soft-light;
}

/* Lift + shadow + glow */
.card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 22px 65px rgba(0,0,0,.16);
}
.card:hover::after{ opacity: 1; }

/* Focus (keyboard) same quality as hover */
.card:focus-visible{
  transform: translateY(-4px) scale(1.01);
}

/* Panel subtle “depth” animation */
.panel{
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

.card:hover .panel{
  transform: translateY(-2px);
  filter: saturate(1.05) contrast(1.02);
  box-shadow: 0 10px 26px rgba(0,0,0,.08) inset;
}

/* Texture gentle zoom on hover (adds premium feel) */
.panel__texture{
  transition: transform .6s ease, opacity .35s ease;
  transform: scale(1);
}
.card:hover .panel__texture{
  transform: scale(1.03);
  opacity: .98;
}

/* Characters/Decor tiny float for life */
.decor,
.character{
  transition: transform .35s ease;
}
.card:hover .character{
  transform: translateY(-6px);
}
.card:hover .decor{
  transform: translateY(-3px);
}

/* ================================
   BUTTON HOVER (shine + lift)
================================ */
.btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

/* Shine sweep */
.btn::before{
  content:"";
  position:absolute;
  top: -30%;
  left: -60%;
  width: 50%;
  height: 160%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity: 0;
  transition: left .55s ease, opacity .25s ease;
}

/* On hover */
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  filter: brightness(1.03);
}
.btn:hover::before{
  left: 120%;
  opacity: 1;
}

/* Arrow slide */
.btnArrow{
  transition: transform .22s ease, background .22s ease;
}
.btn:hover .btnArrow{
  transform: translateX(4px);
  background: rgba(255,255,255,.28);
}

/* Press feedback */
.btn:active{
  transform: translateY(0px) scale(.99);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

/* Focus-visible for accessibility */
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(91,42,166,.22), 0 14px 28px rgba(0,0,0,.18);
}

/* Optional: slightly different glow per card */
.card--yellow:hover::after{
  background:
    radial-gradient(1200px 220px at 50% -10%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(255,208,80,.20), rgba(226,71,71,.10), rgba(91,42,166,.12));
}
.card--blue:hover::after{
  background:
    radial-gradient(1200px 220px at 50% -10%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(45,116,223,.18), rgba(120,210,255,.14), rgba(91,42,166,.10));
}

/* card backgrounds (outer light area like screenshot) */
/*.card--yellow{ background: linear-gradient(#ffffff, #f7f1e2); }
.card--blue{ background: linear-gradient(#ffffff, #eef6ff); }*/

/* wooden age board */
.ageBoard{
  position:absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  height: 50px;
  padding-top:0px;
  text-align:center;

  /* placeholder 
  background: url("../imgs/wood-board.png") center/contain no-repeat;
  background-color: #caa377; /* fallback */
   /* border-radius: 14px; */

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 2px;

  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
  font-weight: 800;
  z-index: 999;	
}
.ageBoard__label{ font-size: 16px; }
.ageBoard__value{ font-size: 20px; }

/* inner panel like screenshot (rounded rectangle) */
.panel{
  position:relative;
  height: 100%;
  border-radius: var(--panelRadius);
  padding: 75px 22px 16px;
  overflow:hidden;
  min-height: 610px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06) inset;
}

/* panel texture placeholder */
.panel__texture{
  position:absolute;
  inset:0;
  opacity:.95;
  background:
    url("../imgs/t1.png") center/cover no-repeat;
  /* fallback tint */
  background-color: rgba(255,255,255,.55);
  pointer-events:none;
}
.texture2{
  position:absolute;
  inset:0;
  opacity:.95;
  background:
    url("../imgs/t2.png") center/cover no-repeat !important;
  /* fallback tint */
  background-color: rgba(255,255,255,.55);
  pointer-events:none;
}
/* panel tint per card */
.card--yellow .panel__texture{
  background-blend-mode: multiply;
  filter: saturate(1.05);
}
.card--blue .panel__texture{
  background-color: rgba(215,235,255,.7);
}

/* content */
.brandMark{
  position:relative;
  z-index:1;
  text-align:center;
  margin-top: 30px;
}
.brandMark img{
 width: auto;
    height: 110px;
  object-fit: contain;
  display:block;
  margin: 0 auto 6px;
}
.brandMark small{
  display:block;
  font-weight: 700;
  letter-spacing:.6px;
color:#24327d
}

.bigTitle{
  position:relative;
  z-index:1;
  margin: 14px 0 14px;
  text-align:center;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  color: #26318a;
  letter-spacing: 1px;
}
.card--blue .bigTitle{ color:#24327d; }

.ticks{
  position:relative;
  z-index:1;
  margin: 0;
  padding: 0;
  list-style:none;
  max-width: 55%;
  margin-inline:auto;
  display:grid;
  gap: 10px;
  font-size: 15px;
  text-align:center;
}
.ticks li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(28,28,36,.86);
}
.ticks li::before{
  content:"";
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 18px;
  background: url("../imgs/icon-tick.png") center/contain no-repeat;
 /* background-color: #3bb54a; /* fallback */*/
  border-radius: 50%;
}

/* bottom art row */
.bottomRow{
  position:absolute;
  left: 0px;
  right: 0px;
  bottom: -17px;
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  z-index:1;
  pointer-events:none;
}

.bottomRow--right{
  justify-content: space-between;
}

.decor{
  width: 180px;
  height: auto;
  opacity: .95;
}
.character{
  width: 220px;
  height:auto;
}
.character--right{
  width: 225px;
}

/* CTA */
.ctaRow{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display:flex;
  justify-content:center;
  z-index:2;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration:none;
  color:#fff;
  font-weight: 800;
  letter-spacing:.4px;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
}
.btnArrow{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.22);
  font-size: 18px;
  line-height: 0.2;
}
.btn--red{ background: var(--red); }
.btn--blue{ background: var(--blue); }

.cardDesc{
  position: relative;
  z-index: 1;
  margin: 6px auto 12px;
  max-width: 50%;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(28,28,36,.86);
}

/* Tags */
.tagList{
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0 auto 12px;
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.tag{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(36,50,125,.18);
  background: rgba(255,255,255,.55);
  color: #24327d;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
}

/* Optional: subtle hover */
.card:hover .tag{
  transform: translateY(-1px);
  transition: transform .2s ease, background .2s ease;
}
@media (max-width: 480px){
  .cardDesc{ max-width: 85%; }
}

/* Responsive */
@media (max-width: 940px){
  .grid{ grid-template-columns: 1fr; }
  .panel{ min-height: 500px; }
}

@media (max-width: 480px){
  .card{ padding: 12px 12px 12px; }
  .panel{ padding: 18px 16px 14px; min-height: 520px; }
  .decor{ width: 100px; }
  .character{ width: 130px; }
  .character--right{ width: 130px; }
  .ageBoard{width:150px; top:0px}
  
.page {
    min-height: 100%;
    padding: 26px 0px 40px;
}

.brandMark {margin-top: 51px;}
.ticks {max-width:90%}
.bottomRow{bottom:0}
.panel{position: static;}
}