
:root{
  --ink:#26222b; --muted:#756f7b; --line:#ece9ee; --white:#fff;
  --pink:#ff7fa8; --yellow:#ffd966; --teal:#2ab9ae; --purple:#8a6dd8; --orange:#ff9a5a;
  --soft:#fffdf9; --soft-pink:#fff0f5; --soft-yellow:#fff8d9; --soft-teal:#e9fbf8; --soft-purple:#f3efff;
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
button{font:inherit}
.topbar{background:var(--ink);color:#fff;text-align:center;padding:10px 16px;font-size:13px;letter-spacing:.02em}
.site-header{height:92px;max-width:1240px;margin:auto;padding:12px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;background:#fff}
.brand img{width:150px;height:68px;object-fit:contain;display:block}
.desktop-nav{display:flex;gap:30px;align-items:center}
.desktop-nav a{font-size:14px;font-weight:600}
.desktop-nav a:hover{color:var(--teal)}
.header-cta{justify-self:end;background:var(--teal);color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px}
.menu-btn{display:none;background:none;border:0;font-size:25px;justify-self:end}
.mobile-menu{display:none;padding:14px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.mobile-menu a{display:block;padding:10px 0;font-weight:600}
.hero{max-width:1240px;margin:20px auto 0;padding:62px 24px 72px;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--teal)}
.hero h1,.section h2,.about-card h2,.contact-banner h2{font-family:"Fredoka",sans-serif;margin:14px 0 18px;line-height:.98}
.hero h1{font-size:68px;max-width:650px}
.hero h1 span{color:var(--pink)}
.hero-copy>p{font-size:18px;line-height:1.7;color:var(--muted);max-width:590px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 22px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;font-weight:800;font-size:14px;transition:.2s}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{border:1.5px solid var(--ink);background:#fff}
.hero-points{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;font-weight:700;color:#5f5964}
.hero-art{min-height:500px;background:linear-gradient(145deg,#fff7dc,#fff0f6 45%,#eafbf8);border-radius:42px;position:relative;overflow:hidden;border:1px solid #f3eff1}
.hero-logo-card{position:absolute;inset:78px 72px 72px;background:#fff;border-radius:32px;box-shadow:0 20px 60px rgba(38,34,43,.09);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;z-index:2}
.hero-logo-card img{width:88%;max-height:240px;object-fit:contain}
.hero-logo-card p{font-weight:800;letter-spacing:.12em;font-size:12px;color:var(--purple)}
.blob{position:absolute;border-radius:50%;filter:blur(.1px)}
.blob-one{width:170px;height:170px;background:var(--pink);right:-50px;top:-40px;opacity:.7}
.blob-two{width:130px;height:130px;background:var(--teal);left:-40px;bottom:30px;opacity:.6}
.blob-three{width:90px;height:90px;background:var(--yellow);right:30px;bottom:-25px;opacity:.9}
.mini-card{position:absolute;z-index:3;background:#fff;padding:10px 16px;border-radius:999px;font-weight:800;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.mini-pink{top:38px;left:30px;color:#d84f7d}
.mini-yellow{right:26px;top:210px;color:#9f7700}
.mini-teal{bottom:36px;left:50px;color:#178a82}
.category-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:42px;flex-wrap:wrap;padding:18px 24px;font-weight:700;font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px}.dot-pink{background:var(--pink)}.dot-yellow{background:var(--yellow)}.dot-teal{background:var(--teal)}.dot-purple{background:var(--purple)}
.section{max-width:1240px;margin:auto;padding:90px 24px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:36px}
.section-heading h2{font-size:42px}
.section-heading p{color:var(--muted);max-width:460px;line-height:1.6}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff;transition:.2s}
.product-card:hover{transform:translateY(-4px);box-shadow:0 18px 48px rgba(38,34,43,.08)}
.product-image{aspect-ratio:4/4.7;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Fredoka",sans-serif;font-size:32px}
.product-image small{font:600 13px "DM Sans",sans-serif;margin-top:8px;color:#6f6972}
.p1{background:var(--soft-teal)}.p2{background:var(--soft-pink)}.p3{background:var(--soft-yellow)}
.product-info{padding:20px}
.product-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.product-top h3{margin:0;font-size:16px;line-height:1.4}.price{white-space:nowrap;font-weight:800;font-size:14px}
.muted{color:var(--muted);font-size:13px}
.sizes{display:flex;gap:8px;margin:16px 0}
.sizes button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer}
.sizes button:hover,.sizes button.active{border-color:var(--teal);background:var(--soft-teal)}
.product-order{display:block;text-align:center;background:var(--ink);color:#fff;padding:12px;border-radius:12px;font-size:13px;font-weight:800}
.about-section{max-width:1240px;margin:0 auto 30px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.about-card{background:var(--soft-purple);border-radius:32px;padding:62px}
.about-card h2{font-size:48px}.about-card p{color:var(--muted);line-height:1.7;font-size:16px}.btn-dark{background:var(--ink);color:#fff;margin-top:10px}
.about-pattern{min-height:460px;border-radius:32px;background:#f7fffd;position:relative;overflow:hidden;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.shape{position:absolute;border-radius:40% 60% 55% 45%}.s1{width:180px;height:180px;background:var(--yellow);left:35px;top:35px}.s2{width:140px;height:140px;background:var(--pink);right:45px;top:80px}.s3{width:190px;height:190px;background:var(--teal);right:80px;bottom:-55px}.s4{width:100px;height:100px;background:var(--purple);left:80px;bottom:65px}
.pattern-copy{font:700 48px/1 "Fredoka",sans-serif;text-align:center;z-index:2;background:#ffffffdd;padding:25px 30px;border-radius:28px}.pattern-copy span{color:var(--orange)}
.compact{margin-bottom:28px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:28px;border:1px solid var(--line);border-radius:22px}.step b{font:700 24px "Fredoka",sans-serif;color:var(--pink)}.step h3{margin:14px 0 8px}.step p{margin:0;color:var(--muted);line-height:1.6}
.contact-banner{max-width:1192px;margin:0 auto 80px;padding:48px 56px;border-radius:30px;background:var(--teal);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px}
.contact-banner h2{font-size:42px;margin-bottom:10px}.contact-banner p{margin:0;opacity:.9}.eyebrow.light{color:#dcfffb}.btn-white{background:#fff;color:var(--ink)}
footer{border-top:1px solid var(--line);max-width:1240px;margin:auto;padding:44px 24px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px}.footer-brand img{width:130px;height:60px;object-fit:contain}.footer-brand p{font-size:13px;color:var(--muted)}.footer-links{display:flex;gap:24px;font-size:13px;font-weight:700}.copyright{grid-column:1/-1;color:#999;font-size:12px;margin-top:14px}
.floating-wa{position:fixed;right:22px;bottom:22px;background:#25D366;color:#fff;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.16);z-index:10}
@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto;height:80px}.desktop-nav,.header-cta{display:none}.menu-btn{display:block}.brand img{width:125px;height:58px}
  .hero{grid-template-columns:1fr;padding-top:40px}.hero h1{font-size:52px}.hero-art{min-height:430px}
  .product-grid,.steps-grid{grid-template-columns:1fr 1fr}.about-section{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
  .topbar{font-size:11px}.hero{padding:34px 18px 56px;gap:30px}.hero h1{font-size:42px}.hero-copy>p{font-size:16px}.hero-actions{flex-direction:column}.btn{width:100%}
  .hero-art{min-height:360px;border-radius:28px}.hero-logo-card{inset:58px 34px 52px;padding:18px}.hero-logo-card img{width:100%}
  .category-strip{justify-content:flex-start;gap:14px 24px;padding-left:20px}
  .section{padding:64px 18px}.section-heading h2{font-size:34px}.product-grid,.steps-grid{grid-template-columns:1fr}
  .about-section{padding:18px}.about-card{padding:38px 26px}.about-card h2{font-size:38px}.about-pattern{min-height:340px}.pattern-copy{font-size:38px}
  .contact-banner{margin:0 18px 56px;padding:34px 24px;flex-direction:column;align-items:flex-start}.contact-banner h2{font-size:34px}
  footer{padding:36px 20px;grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.copyright{grid-column:auto}
}

.contact-actions{display:flex;gap:10px;flex-wrap:wrap}.footer-numbers{font-size:12px;color:#756f7b}
