/* Weodone marketing site — shared styles (ported 1:1 from design_handoff_weodone_rebrand/website-ref) */

body{margin:0;background:#F1EFE7;font-family:'Be Vietnam Pro',sans-serif;-webkit-font-smoothing:antialiased;color:#16130F}
::selection{background:#E7FF4A}
mascot-wall{display:block}

.ms{font-family:'Material Symbols Rounded';font-weight:normal;line-height:1;font-variation-settings:'FILL' 0,'wght' 500,'opsz' 24;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';display:inline-block}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 500,'opsz' 24}

@keyframes wsBob{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
@keyframes wsUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes wsMarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes statReel{from{transform:translateY(0)}to{transform:translateY(-72px)}}
@keyframes wsReel{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-25%)}66%,92%{transform:translateY(-50%)}100%{transform:translateY(-75%)}}
@keyframes wsFlash{0%,100%{opacity:0}45%,60%{opacity:1}}
@keyframes wsRise{0%{transform:translateY(8px);opacity:0}30%{opacity:1}100%{transform:translateY(-20px);opacity:0}}
@keyframes pgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-in{animation:wsUp .9s cubic-bezier(.2,.7,.2,1) both}
.rv{animation:wsUp .85s cubic-bezier(.2,.7,.2,1) both;animation-delay:.15s}

.hcard{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.hcard:hover{transform:translateY(-10px) rotate(-.6deg);box-shadow:0 26px 52px rgba(22,19,15,.13)}
.hbtn{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;cursor:pointer}
.hbtn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 32px rgba(22,19,15,.28)}
.hbtn:active{transform:scale(.97)}
.hlink{transition:opacity .2s ease}
.hlink:hover{opacity:.65}

.sr{animation:statReel 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:.5s}
.ncard{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.ncard:hover{transform:translateY(-8px);box-shadow:0 26px 52px rgba(22,19,15,.13)}
.ncard .narr{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ncard:hover .narr{transform:translateX(6px)}

.mlink{transition:transform .3s cubic-bezier(.2,.7,.2,1),color .2s ease}
.mlink:hover{transform:translateX(14px)}
.mlink:hover span:last-child{color:#FF6FB0}

.howrow{transition:background .2s ease;border-radius:14px;padding:12px 14px;margin:0 -14px}
.howrow:hover{background:#F1EFE7}

.wreel{display:inline-block;height:1.28em;overflow:hidden;vertical-align:bottom;text-shadow:none;margin-bottom:-.14em}
.wreel .wr{display:block;animation:wsReel 8s cubic-bezier(.65,0,.35,1) infinite}
.wreel .wr span{display:block;height:1.28em;line-height:1.28em}

.ibtn{position:relative;overflow:hidden}
.ibtn .ibg{position:absolute;left:22px;top:50%;width:9px;height:9px;border-radius:50%;background:#16130F;transform:translate(0,-50%) scale(1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ibtn:hover .ibg{transform:translate(0,-50%) scale(70)}
.ibtn .itx{position:relative;display:flex;align-items:center;gap:8px;margin-left:16px;transition:color .25s ease .08s}
.ibtn:hover .itx{color:#E7FF4A}

.marq:hover{animation-play-state:paused}

.faq details{background:#fff;border-radius:20px;padding:0;overflow:hidden;transition:box-shadow .3s ease}
.faq details:hover{box-shadow:0 14px 34px rgba(22,19,15,.09)}
.faq summary{list-style:none;display:flex;align-items:center;gap:14px;padding:22px 26px;cursor:pointer;font:700 16px 'Be Vietnam Pro',sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fx{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;background:#F1EFE7;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s ease}
.faq details[open] summary .fx{transform:rotate(45deg);background:#E7FF4A}
.faq .fa{padding:0 26px 22px 26px;font:400 14.5px/1.65 'Be Vietnam Pro',sans-serif;color:#6E6A5E;max-width:640px}

/* Home: yellow glow on cards */
.page-home .hcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(340px circle at 50% 0%,rgba(231,255,74,.4),transparent 65%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.page-home .hcard:hover::after{opacity:1}

@supports (animation-timeline: view()){
.page-home .rv{animation:wsUp linear both;animation-timeline:view();animation-range:entry 0% entry 42%;animation-delay:0s !important}
}

/* Home: "how it works" tabs */
.howtab{display:flex;align-items:center;gap:9px;border-radius:999px;padding:13px 24px;font:700 15px 'Be Vietnam Pro',sans-serif;cursor:pointer;background:#fff;color:#16130F;border:1.5px solid #E4DFD3;user-select:none}
.howtab.on{background:#16130F;color:#F6EEE7;border-color:#16130F}
.howpanel{display:none}
.howpanel.on{display:block}

/* Home: fullscreen menu overlay */
.menuov{display:none;position:fixed;inset:0;z-index:99;background:#E7FF4A;flex-direction:column;padding:22px 48px 40px;overflow:auto}
.menuov.open{display:flex;animation:wsUp .35s cubic-bezier(.2,.7,.2,1) both}

/* Blog listing */
.page-blog .hcard>div:first-child{overflow:hidden}
.page-blog .hcard>div:first-child svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.page-blog .hcard:hover>div:first-child svg{transform:scale(1.14) rotate(-4deg)}
.fchip{font:600 13px 'Be Vietnam Pro',sans-serif;border:1.5px solid #E4DFD3;border-radius:999px;padding:9px 16px;background:#fff;color:#16130F;transition:all .2s ease;cursor:pointer;white-space:nowrap}
.fchip:hover{background:#16130F;color:#F6EEE7;border-color:#16130F}
.fchip.on{background:#16130F;color:#F6EEE7;border-color:#16130F}

/* Blog post */
.pbar{position:fixed;top:0;left:0;width:100%;height:5px;background:#FF6FB0;transform-origin:0 50%;transform:scaleX(0);z-index:100}
@supports (animation-timeline: scroll()){.pbar{animation:pgrow linear both;animation-timeline:scroll()}}
.art p{font:400 17px/1.85 'Be Vietnam Pro',sans-serif;color:#3D382E;margin:0 0 22px}
.art h2{font:800 26px/1.3 'Be Vietnam Pro',sans-serif;letter-spacing:-.01em;color:#16130F;margin:38px 0 14px}
.art p:first-of-type::first-letter{font:800 52px/0.9 'Bricolage Grotesque',sans-serif;float:left;background:#E7FF4A;border-radius:12px;padding:8px 12px;margin:5px 12px 0 0}
.art b{color:#16130F;font-weight:700}

/* Responsive ≤700px */
@media (max-width:700px){
.navl{display:none}
.nav{padding:16px 18px !important;gap:14px !important}
.h1x{font-size:36px !important;line-height:1.12 !important}
.page-home .h1x{font-size:38px !important;line-height:1.1 !important}
.page-post .h1x{font-size:32px !important;line-height:1.18 !important}
.sec{padding-left:20px !important;padding-right:20px !important}
.g4{grid-template-columns:repeat(2,1fr) !important;gap:26px 10px !important}
.g4 .sr>div{font-size:44px !important}
.g3{grid-template-columns:1fr !important}
.g2{grid-template-columns:1fr !important}
.g2m{grid-template-columns:1fr !important}
.howpan{flex-direction:column-reverse !important;align-items:stretch !important;gap:22px !important}
.illu{width:100% !important;height:230px !important}
.padx{padding:22px 16px !important}
.padx2{padding:30px 22px !important}
.split{flex-direction:column !important;align-items:flex-start !important;gap:22px !important}
.wrapr{flex-wrap:wrap !important;justify-content:center !important}
.ncard{flex-wrap:wrap !important;padding:20px !important;gap:14px 16px !important}
.menuov{padding:16px 20px 28px !important}
.menuov .mlink span:last-child{font-size:32px !important}
.marq>div{font-size:16px !important}
.page-home mascot-wall>div{height:520px !important}
.split svg[width="230"]{width:170px;height:170px}
.split svg[width="300"]{width:210px;height:190px}
}