/* ── DYNAMIC SCALING ── */
html { font-size: clamp(14px, 1.1vw, 22px); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green:      #3C9E6E;
    --green-dark: #2E7A55;
    --green-xd:   #1F5C3E;
    --yellow:     #FFD84D;
    --coral:      #E85D42;
    --cream:      #FFF8E8;
    --dark:       #1C1C1C;
    --white:      #FFFFFF;
    --wa:         #25D366;
    --blue:       #5BB8D4;
    --purple:     #9B82D4;
    --orange:     #E8874A;
    --teal:       #5DD4AE;
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--green);
    color: var(--dark);
    overflow-x: hidden;
}

/* ── UTILITY ── */
.pill {
    display: inline-block;
    border: 0.2rem solid var(--dark);
    border-radius: 100vw;
    box-shadow: 0.3rem 0.3rem 0 var(--dark);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Fredoka One', cursive;
    font-size: 1rem;
    letter-spacing: 0.02em;
    padding: 0.6rem 1.5rem;
    border-radius: 100vw;
    border: 0.2rem solid var(--dark);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.13s, box-shadow 0.13s;
    box-shadow: 0.25rem 0.25rem 0 var(--dark);
    line-height: 1;
}
.btn:hover  { transform: translate(-0.08rem,-0.08rem); box-shadow: 0.38rem 0.38rem 0 var(--dark); }
.btn:active { transform: translate(0.12rem,0.12rem);   box-shadow: 0.1rem 0.1rem 0 var(--dark); }
.btn-yellow { background: var(--yellow); color: var(--dark); }
.btn-coral  { background: var(--coral);  color: var(--white); }
.btn-white  { background: var(--white);  color: var(--dark); }
.btn-wa     { background: var(--wa);     color: var(--white); }
.btn-lg     { font-size: 1.2rem; padding: 0.8rem 2rem; box-shadow: 0.35rem 0.35rem 0 var(--dark); }
.btn-block  { width: 100%; justify-content: center; border-radius: 0.9rem; }

/* ════════════ HERO ════════════ */
.hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: 4rem 6%;
    position: relative;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1.5px, transparent 1.5px);
    background-size: 3rem 3rem;
    pointer-events: none;
}

.hero-left { position: relative; z-index: 1; }

.title-pill-1 {
    background: var(--yellow);
    padding: 0.4rem 1.8rem;
    transform: rotate(-3deg);
    display: inline-block;
    margin-bottom: 0.9rem;
}
.title-pill-1 span {
    font-family: 'Fredoka One', cursive;
    font-size: 3.8rem;
    color: var(--coral);
    -webkit-text-stroke: 0.06rem var(--dark);
    letter-spacing: 0.04em;
    line-height: 1;
    display: block;
}
.title-pill-2 {
    background: var(--white);
    padding: 0.3rem 1.3rem;
    margin-left: 1.5rem;
    transform: rotate(1deg);
    display: inline-block;
}
.title-pill-2 span {
    font-family: 'Fredoka One', cursive;
    font-size: 2rem;
    color: var(--green-dark);
    letter-spacing: 0.03em;
    line-height: 1;
    display: block;
}
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--green-dark);
    color: var(--white);
    border: 0.18rem solid var(--dark);
    border-radius: 100vw;
    padding: 0.38rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 1.3rem;
    letter-spacing: 0.03em;
}
.hero-tag i { color: var(--yellow); }
.hero-sub {
    margin-top: 1.1rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--cream);
    max-width: 22rem;
    line-height: 1.65;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.hero-btns {
    display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.9rem;
}

/* ── TILE GRID (right side) ── */
.hero-right {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.hub-tile {
    background: var(--cream);
    border: 0.2rem solid var(--dark);
    border-radius: 1rem;
    box-shadow: 0.3rem 0.3rem 0 var(--dark);
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    cursor: pointer;
    text-decoration: none; color: var(--dark);
    transition: transform 0.13s, box-shadow 0.13s;
}
.hub-tile:hover  { transform: translate(-0.1rem,-0.1rem); box-shadow: 0.45rem 0.45rem 0 var(--dark); }
.hub-tile:active { transform: translate(0.12rem,0.12rem); box-shadow: 0.12rem 0.12rem 0 var(--dark); }
.hub-tile-wide   { grid-column: 1 / -1; }
.tile-icon {
    width: 2.9rem; height: 2.9rem;
    border-radius: 0.6rem;
    border: 0.15rem solid var(--dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--white); flex-shrink: 0;
}
.tile-label {
    font-family: 'Fredoka One', cursive;
    font-size: 0.92rem;
    line-height: 1.25;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

/* ════════════ PLANS ════════════ */
.plans-section { padding: 4rem 6%; }
.sec-heading { text-align: center; margin-bottom: 2.5rem; }
.sec-heading .pill {
    background: var(--yellow); padding: 0.35rem 1.8rem; margin-bottom: 0.5rem;
}
.sec-heading .pill span {
    font-family: 'Fredoka One', cursive;
    font-size: 2.3rem;
    color: var(--coral);
    -webkit-text-stroke: 0.04rem var(--dark);
    letter-spacing: 0.04em; line-height: 1;
}
.sec-heading p { color: var(--cream); font-size: 0.92rem; font-weight: 600; margin-top: 0.5rem; }

.plans-row {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; flex-wrap: wrap;
}
.plans-or {
    font-family: 'Fredoka One', cursive;
    font-size: 2rem;
    color: var(--yellow);
    -webkit-text-stroke: 0.04rem var(--dark);
    text-shadow: 0.15rem 0.15rem 0 var(--dark);
    flex-shrink: 0;
}

.plan-card {
    background: var(--cream);
    border: 0.22rem solid var(--dark);
    border-radius: 1.4rem;
    box-shadow: 0.4rem 0.4rem 0 var(--dark);
    padding: 2rem 1.8rem;
    flex: 1; min-width: 16rem; max-width: 21rem;
    transition: transform 0.13s, box-shadow 0.13s;
}
.plan-card:hover { transform: translate(-0.12rem,-0.12rem); box-shadow: 0.6rem 0.6rem 0 var(--dark); }
.plan-card.featured {
    background: var(--green-dark);
    color: var(--white); position: relative;
}
.plan-card.featured .plan-name,
.plan-card.featured .plan-detail,
.plan-card.featured .plan-price,
.plan-card.featured .plan-feat  { color: var(--white); }
.plan-card.featured .plan-div   { border-color: rgba(255,255,255,0.22); }
.plan-card.featured .plan-feat i { color: var(--yellow); }

.feat-badge {
    position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%);
    background: var(--yellow); border: 0.18rem solid var(--dark); border-radius: 100vw;
    padding: 0.18rem 0.9rem; font-family: 'Fredoka One', cursive;
    font-size: 0.78rem; color: var(--dark); white-space: nowrap;
    box-shadow: 0.18rem 0.18rem 0 var(--dark);
}
.plan-icon-box {
    width: 3.6rem; height: 3.6rem; border-radius: 0.8rem;
    border: 0.18rem solid var(--dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--white); margin-bottom: 0.9rem;
}
.plan-name  { font-family:'Fredoka One',cursive; font-size:1.85rem; line-height:1; margin-bottom:0.2rem; color:var(--dark); }
.plan-detail{ font-size:0.75rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--green-dark); margin-bottom:0.9rem; }
.plan-price { font-family:'Fredoka One',cursive; font-size:2.2rem; color:var(--dark); line-height:1; margin-bottom:0.2rem; }
.plan-unit  { font-size:0.78rem; font-weight:700; opacity:0.55; margin-bottom:0.85rem; }
.plan-div   { border:none; border-top:0.14rem solid rgba(28,28,28,0.15); margin-bottom:0.9rem; }
.plan-feats { list-style:none; display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.4rem; }
.plan-feat  { display:flex; align-items:center; gap:0.55rem; font-size:0.86rem; font-weight:700; }
.plan-feat i{ color:var(--green); font-size:0.78rem; }

/* ════════════ OFFER ════════════ */
.offer-section { padding: 0 6% 4rem; }
.offer-card {
    max-width: 50rem; margin: 0 auto;
    background: var(--yellow);
    border: 0.25rem solid var(--dark);
    border-radius: 1.8rem;
    box-shadow: 0.5rem 0.5rem 0 var(--dark);
    padding: 2.8rem 3.2rem;
    display: grid; grid-template-columns: auto 1fr;
    align-items: center; gap: 2.2rem;
    position: relative; overflow: hidden;
}
.offer-card::after {
    content: '🎁';
    position: absolute; bottom: -0.5rem; right: 1.2rem;
    font-size: 5.5rem; opacity: 0.12; line-height:1; pointer-events:none;
}
.offer-emoji { font-size: 4rem; line-height:1; }
.offer-label { font-family:'Fredoka One',cursive; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-dark); margin-bottom:0.25rem; }
.offer-title { font-family:'Fredoka One',cursive; font-size:2.4rem; color:var(--coral); -webkit-text-stroke:0.04rem var(--dark); line-height:1.1; margin-bottom:0.4rem; }
.offer-body  { font-size:0.9rem; font-weight:700; color:var(--dark); line-height:1.55; margin-bottom:1.1rem; }
.offer-row   { display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; }
.offer-deadline {
    display:inline-flex; align-items:center; gap:0.4rem;
    background:var(--white); border:0.18rem solid var(--dark); border-radius:100vw;
    padding:0.3rem 0.95rem; font-size:0.8rem; font-weight:800;
    box-shadow:0.18rem 0.18rem 0 var(--dark);
}
.offer-deadline i { color:var(--coral); }

/* ════════════ CONTACT ════════════ */
.contact-section { padding: 0 6% 5rem; }
.contact-card {
    max-width: 50rem; margin: 0 auto;
    background: var(--cream);
    border: 0.25rem solid var(--dark);
    border-radius: 1.8rem;
    box-shadow: 0.5rem 0.5rem 0 var(--dark);
    padding: 2.8rem 3.2rem;
    display: grid; grid-template-columns: auto 1fr;
    align-items: center; gap: 2.2rem;
}
.avatar-wrap { position:relative; }
.avatar-img  {
    width: 7rem; height: 7rem; border-radius:50%; object-fit:cover;
    border:0.25rem solid var(--dark); display:block;
    box-shadow:0.3rem 0.3rem 0 var(--dark);
}
.avatar-dot {
    position:absolute; bottom:-0.3rem; right:-0.4rem;
    background:var(--wa); border:0.18rem solid var(--dark); border-radius:50%;
    width:2rem; height:2rem;
    display:flex; align-items:center; justify-content:center;
    color:var(--white); font-size:0.88rem;
}
.contact-head { font-family:'Fredoka One',cursive; font-size:1.9rem; line-height:1.1; margin-bottom:0.35rem; }
.contact-sub  { font-size:0.86rem; font-weight:600; color:var(--green-dark); margin-bottom:1.3rem; line-height:1.55; }
.contact-note { margin-top:0.75rem; font-size:0.73rem; font-weight:700; color:var(--green-xd); opacity:0.6; }
.contact-note i { color:var(--wa); }

/* ════════════ FOOTER ════════════ */
footer {
    background: var(--green-xd);
    text-align: center;
    padding: 1.4rem 6%;
    font-size: 0.75rem; font-weight:700;
    color: rgba(255,255,255,0.45);
    border-top: 0.2rem solid var(--dark);
}
footer span { color: var(--yellow); }

/* ════════════ OFFER TILE WOBBLE ════════════ */
.hub-tile-offer {
    animation: tile-wobble 3.5s ease-in-out infinite;
    transform-origin: center center;
}
.hub-tile-offer:hover { animation: none; }
@keyframes tile-wobble {
    0%,100% { transform: rotate(-3deg) scale(1);    }
    50%      { transform: rotate(3deg)  scale(1.04); }
}

/* ════════════ ANIMATIONS ════════════ */
@keyframes pop-in {
    0%   { opacity:0; transform:scale(0.85) translateY(1.2rem); }
    70%  { transform:scale(1.03) translateY(-0.15rem); }
    100% { opacity:1; transform:scale(1) translateY(0); }
}
.hero-left > * {
    opacity:0;
    animation: pop-in 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.hero-left > *:nth-child(1){ animation-delay:0.05s; }
.hero-left > *:nth-child(2){ animation-delay:0.15s; }
.hero-left > *:nth-child(3){ animation-delay:0.25s; }
.hero-left > *:nth-child(4){ animation-delay:0.35s; }
.hero-left > *:nth-child(5){ animation-delay:0.45s; }
.hero-right { opacity:0; animation:pop-in 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.3s forwards; }

/* ════════════ RESPONSIVE ════════════ */
@media(max-width:780px){
    .hero { grid-template-columns:1fr; padding:3rem 5% 2.5rem; gap:2rem; }
    .offer-card,.contact-card { grid-template-columns:1fr; text-align:center; gap:1.5rem; }
    .offer-emoji,.avatar-wrap { margin:0 auto; }
    .offer-row { justify-content:center; }
    .plans-row { flex-direction:column; align-items:center; }
    .plan-card { max-width:100%; width:100%; }
    .plans-or  { transform:none; }
}
@media(max-width:480px){
    .title-pill-1 span { font-size:3rem; }
    .title-pill-2 span { font-size:1.7rem; }
}