/* myVets landing — template gratis (MIT), dibangun di atas Tabler/Bootstrap 5 */
:root {
  --lp-primary: #673AB7; --lp-primary-dark: #4E2A93; --lp-plum: #301451; --lp-accent: #F6B744;
  --lp-mint: #16A085; --lp-bg: #FBFAFE; --lp-text: #1E2430; --lp-muted: #615C78; --lp-border: #ECE7F4;
  --tblr-primary: #673AB7; --tblr-primary-rgb: 103, 58, 183;
}
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body.lp { background: var(--lp-bg); color: var(--lp-text); font-size: 1rem; -webkit-font-smoothing: antialiased; }
.lp a { text-decoration: none; }
.lp section { scroll-margin-top: 80px; }
.lp .container-lp { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .lp .container-lp { padding: 0 24px; } }
.lp h1, .lp h2, .lp h3 { letter-spacing: -.025em; color: var(--lp-plum); }
.lp .eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--lp-primary); background: #F1EAFC; padding: .35rem .75rem; border-radius: 999px; }
.lp .section { padding: 72px 0; }
@media (min-width: 992px) { .lp .section { padding: 104px 0; } }
.lp .section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.lp .section-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 800; margin: .9rem 0 .75rem; }
.lp .section-head p { color: var(--lp-muted); font-size: 1.06rem; }
.lp .btn { border-radius: 12px; font-weight: 700; min-height: 46px; padding: .65rem 1.3rem; }
.lp .btn-primary { background: var(--lp-primary); border-color: var(--lp-primary); box-shadow: 0 10px 24px rgba(103,58,183,.28); }
.lp .btn-primary:hover { background: var(--lp-primary-dark); border-color: var(--lp-primary-dark); }
.lp .btn-accent { background: var(--lp-accent); color: #3B2600; border: 0; box-shadow: 0 10px 24px rgba(246,183,68,.35); }
.lp .btn-accent:hover { background: #EBA52C; color: #3B2600; }
.lp .btn-ghost-light { color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.lp .btn-ghost-light:hover { background: rgba(255,255,255,.14); color: #fff; }
.lp :focus-visible { outline: 3px solid rgba(246,183,68,.8); outline-offset: 2px; }

/* Nav */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; transition: background .2s ease, box-shadow .2s ease; }
.lp-nav.scrolled { background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 6px 24px rgba(48,20,81,.08); }
.lp-nav .bar { display: flex; align-items: center; gap: 1rem; height: 72px; }
.lp-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.3rem; color: #fff; }
.lp-nav.scrolled .lp-brand, .lp-nav.scrolled .lp-links a { color: var(--lp-plum); }
.lp-brand .mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #8E5BDB, var(--lp-primary)); box-shadow: 0 8px 20px rgba(103,58,183,.4); }
.lp-brand .mark svg { width: 24px; height: 24px; }
.lp-links { display: none; gap: 1.6rem; margin-left: auto; }
.lp-links a { color: #EDE5FA; font-weight: 600; font-size: .95rem; }
.lp-links a:hover { color: var(--lp-accent); }
.lp-nav .cta { display: none; gap: .5rem; }
@media (min-width: 992px) { .lp-links { display: flex; } .lp-nav .cta { display: flex; margin-left: 1rem; } }
.lp-burger { margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.lp-nav.scrolled .lp-burger { color: var(--lp-plum); border-color: var(--lp-border); background: #fff; }
@media (min-width: 992px) { .lp-burger { display: none; } }
.lp-mobile-menu { background: #fff; border-radius: 0 0 20px 20px; box-shadow: 0 20px 40px rgba(48,20,81,.15); padding: .5rem 16px 1rem; }
.lp-mobile-menu a.link { display: block; padding: .85rem .25rem; color: var(--lp-plum); font-weight: 600; border-bottom: 1px solid var(--lp-border); }

/* Hero */
.lp-hero { position: relative; overflow: hidden; color: #fff; padding: 128px 0 72px;
  background: radial-gradient(900px 500px at 85% 15%, rgba(246,183,68,.22), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(142,91,219,.55), transparent 60%), linear-gradient(135deg, #241040 0%, var(--lp-plum) 40%, #4B2391 100%); }
@media (min-width: 992px) { .lp-hero { padding: 160px 0 120px; } }
.lp-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.lp-hero-grid { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 992px) { .lp-hero-grid { grid-template-columns: 1.05fr 1fr; } }
.lp-hero h1 { color: #fff; font-size: clamp(2.1rem, 5.4vw, 3.7rem); font-weight: 800; line-height: 1.05; margin: 1rem 0 1.1rem; }
.lp-hero h1 .hl { background: linear-gradient(90deg, var(--lp-accent), #FFD98E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero p.lead { color: #DCD0F2; font-size: 1.12rem; max-width: 540px; }
.lp-hero .eyebrow { background: rgba(255,255,255,.1); color: #FFE2A6; }
.lp-hero .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.lp-hero .proof { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.4rem; }
.lp-hero .proof div { display: flex; align-items: center; gap: .6rem; color: #E7DDF7; font-weight: 600; font-size: .93rem; }
.lp-hero .proof .ti { font-size: 1.4rem; color: var(--lp-accent); }

.lp-art { position: relative; max-width: 520px; margin: 0 auto; width: 100%; }
.lp-art .blob { width: 100%; aspect-ratio: 1; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; animation: lpFloat 9s ease-in-out infinite; }
.lp-art .blob svg { width: 82%; height: auto; }
.lp-float { position: absolute; background: #fff; color: var(--lp-text); border-radius: 16px; padding: .75rem .9rem; box-shadow: 0 18px 40px rgba(20,8,40,.3); display: flex; align-items: center; gap: .65rem; font-size: .85rem; animation: lpFloat 7s ease-in-out infinite; }
.lp-float .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.25rem; flex: 0 0 38px; }
.lp-float b { display: block; color: var(--lp-plum); font-size: .92rem; }
.lp-float small { color: var(--lp-muted); }
.lp-float.f1 { left: -4%; top: 12%; animation-delay: -2s; }
.lp-float.f2 { right: -4%; top: 46%; animation-delay: -4s; }
.lp-float.f3 { left: 6%; bottom: 2%; }
@media (max-width: 575.98px) { .lp-float { font-size: .78rem; padding: .55rem .65rem; } .lp-float.f1 { left: 0; } .lp-float.f2 { right: 0; } .lp-float .ic { width: 32px; height: 32px; flex-basis: 32px; } }
@keyframes lpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Feature strip */
.lp-strip { margin-top: -40px; position: relative; z-index: 2; }
.lp-strip .inner { background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(48,20,81,.1); border: 1px solid var(--lp-border); display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 992px) { .lp-strip .inner { grid-template-columns: repeat(4, 1fr); } }
.lp-strip .item { padding: 1.3rem 1.2rem; display: flex; gap: .8rem; align-items: flex-start; }
.lp-strip .item + .item { border-left: 1px solid var(--lp-border); }
@media (max-width: 991.98px) { .lp-strip .item:nth-child(3) { border-left: 0; } .lp-strip .item:nth-child(n+3) { border-top: 1px solid var(--lp-border); } }
.lp-strip .ti { font-size: 1.6rem; color: var(--lp-primary); }
.lp-strip b { display: block; color: var(--lp-plum); }
.lp-strip small { color: var(--lp-muted); }

/* Services */
.lp-services { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lp-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .lp-services { grid-template-columns: repeat(3, 1fr); } }
.lp-card { background: #fff; border: 1px solid var(--lp-border); border-radius: 20px; padding: 1.6rem; height: 100%; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative; overflow: hidden; }
.lp-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(48,20,81,.1); border-color: #D9CCF0; }
.lp-card .ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 1.1rem; }
.lp-card h3 { font-size: 1.18rem; font-weight: 800; margin-bottom: .5rem; }
.lp-card p { color: var(--lp-muted); margin: 0; }
.ic-purple { background: #F1EAFC; color: var(--lp-primary); } .ic-gold { background: #FEF3DC; color: #B7790B; } .ic-mint { background: #E1F5EF; color: var(--lp-mint); }
.ic-blue { background: #E4F0FB; color: #2686D8; } .ic-rose { background: #FCE8EC; color: #D23D5E; } .ic-plum { background: #EDE6F7; color: var(--lp-plum); }

/* Steps */
.lp-steps { display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 768px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lp-steps { grid-template-columns: repeat(4, 1fr); } }
.lp-step { position: relative; background: linear-gradient(180deg, #fff, #FBF9FE); border: 1px solid var(--lp-border); border-radius: 20px; padding: 1.6rem 1.4rem; }
.lp-step::before { counter-increment: s; content: "0" counter(s); font-size: 2.4rem; font-weight: 800; color: #E7DDF7; position: absolute; right: 1.1rem; top: .6rem; }
.lp-step .ti { font-size: 1.8rem; color: var(--lp-primary); }
.lp-step h3 { font-size: 1.08rem; font-weight: 800; margin: .9rem 0 .4rem; }
.lp-step p { color: var(--lp-muted); margin: 0; font-size: .95rem; }

/* Split (pet shop) */
.lp-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 992px) { .lp-split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lp-shop-visual { border-radius: 28px; padding: 28px; background: linear-gradient(145deg, #FFF6E3, #F4EDFF); border: 1px solid var(--lp-border); display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lp-tile { background: #fff; border-radius: 18px; padding: 1.1rem; box-shadow: 0 10px 26px rgba(48,20,81,.07); }
.lp-tile .ti { font-size: 1.8rem; }
.lp-tile b { display: block; margin-top: .6rem; color: var(--lp-plum); }
.lp-tile small { color: var(--lp-muted); }
.lp-check { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .75rem; }
.lp-check li { display: flex; gap: .65rem; align-items: flex-start; }
.lp-check .ti { color: var(--lp-mint); font-size: 1.3rem; flex: 0 0 auto; }

/* Pricing */
.lp-pricing { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .lp-pricing { grid-template-columns: repeat(3, 1fr); } }
.lp-price { background: #fff; border: 1px solid var(--lp-border); border-radius: 22px; padding: 1.8rem 1.6rem; display: flex; flex-direction: column; }
.lp-price.featured { background: linear-gradient(160deg, var(--lp-plum), #4B2391); color: #fff; border: 0; box-shadow: 0 26px 60px rgba(48,20,81,.3); }
.lp-price.featured h3, .lp-price.featured .amount { color: #fff; }
.lp-price.featured p, .lp-price.featured small { color: #D8CBF0; }
.lp-price h3 { font-size: 1.15rem; font-weight: 800; }
.lp-price .amount { font-size: 2rem; font-weight: 800; color: var(--lp-plum); margin: .6rem 0 .2rem; letter-spacing: -.02em; }
.lp-price p { color: var(--lp-muted); flex: 1; }
.lp-badge { align-self: flex-start; background: var(--lp-accent); color: #3B2600; font-size: .72rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .8rem; }

/* Branches */
.lp-branches { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .lp-branches { grid-template-columns: repeat(2, 1fr); } }
.lp-branch { background: #fff; border: 1px solid var(--lp-border); border-radius: 20px; padding: 1.5rem; display: flex; gap: 1rem; }
.lp-branch .pin { width: 50px; height: 50px; border-radius: 15px; background: #F1EAFC; color: var(--lp-primary); display: grid; place-items: center; font-size: 1.5rem; flex: 0 0 50px; }
.lp-branch h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .35rem; }
.lp-branch p { margin: 0 0 .25rem; color: var(--lp-muted); font-size: .95rem; overflow-wrap: anywhere; }

/* Booking */
.lp-booking { background: linear-gradient(135deg, #241040, var(--lp-plum) 50%, #4B2391); border-radius: 30px; overflow: hidden; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .lp-booking { grid-template-columns: .9fr 1.1fr; } }
.lp-booking .info { padding: 2.2rem 1.6rem; color: #E5DAF7; }
@media (min-width: 992px) { .lp-booking .info { padding: 3.2rem; } }
.lp-booking .info h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; }
.lp-booking .form { background: #fff; padding: 1.6rem; margin: 0 12px 12px; border-radius: 22px; }
@media (min-width: 992px) { .lp-booking .form { margin: 14px; padding: 2.2rem; } }
.lp-booking .form-control, .lp-booking .form-select { min-height: 48px; border-radius: 12px; }
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* FAQ */
.lp .accordion-item { border: 1px solid var(--lp-border); border-radius: 16px !important; margin-bottom: 12px; overflow: hidden; background: #fff; }
.lp .accordion-button { font-weight: 700; color: var(--lp-plum); padding: 1.1rem 1.25rem; }
.lp .accordion-button:not(.collapsed) { background: #F7F3FD; color: var(--lp-primary); box-shadow: none; }

/* CTA + footer */
.lp-cta { border-radius: 28px; padding: 2.4rem 1.6rem; background: linear-gradient(120deg, var(--lp-accent), #FFD98E); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.lp-cta h2 { margin: 0; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); color: #3B2600; }
.lp-footer { background: #1A0B30; color: #BBAAD8; padding: 64px 0 28px; margin-top: 72px; }
.lp-footer .cols { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .lp-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.lp-footer h4 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 1rem; }
.lp-footer a { color: #BBAAD8; display: block; padding: .25rem 0; }
.lp-footer a:hover { color: var(--lp-accent); }
.lp-footer .bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .85rem; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .lp-art .blob, .lp-float { animation: none; } html { scroll-behavior: auto; } }
.lp-whatsapp { position: fixed; right: 16px; bottom: 16px; z-index: 1040; width: 56px; height: 56px; border-radius: 50%; background: #16A085; color: #fff; display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 12px 28px rgba(22,160,133,.4); }
.lp-whatsapp:hover { color: #fff; transform: scale(1.05); }