:root{
  --bg:#fff7fb;
  --ink:#2b2430;
  --pink:#ff8ebe;
  --pink-2:#ffc3de;
  --blue:#bfe8ff;
  --blue-2:#e8f7ff;
  --yellow:#fff1a7;
  --mint:#d6f4dd;
  --lav:#e3ddff;
  --white:#ffffff;
  --shadow:0 20px 60px rgba(105,74,120,.18);
  --shadow-soft:0 12px 30px rgba(110,88,130,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  font-family:"IBM Plex Sans Thai",system-ui,sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,202,223,.9), transparent 22%),
    radial-gradient(circle at 80% 10%, rgba(205,239,255,.95), transparent 21%),
    radial-gradient(circle at 15% 75%, rgba(255,239,176,.85), transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(220,255,231,.9), transparent 22%),
    linear-gradient(180deg,#fff8fc 0%, #fffaf2 45%, #f8fbff 100%);
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.18'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='100' cy='50' r='2'/%3E%3Ccircle cx='160' cy='130' r='2'/%3E%3Ccircle cx='40' cy='150' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  mix-blend-mode:screen;
  z-index:-2;
}
.shell{width:min(1180px,calc(100% - 28px));margin-inline:auto}
.main-shell{padding-bottom:36px}
.bg-blobs{position:fixed;inset:0;pointer-events:none;z-index:-3;filter:blur(18px)}
.blob{position:absolute;border-radius:999px;opacity:.58;animation:floatBlob 14s ease-in-out infinite}
.blob-1{width:320px;height:320px;background:#ffd4e6;left:-60px;top:90px}
.blob-2{width:260px;height:260px;background:#d9f1ff;right:-40px;top:160px;animation-delay: -4s}
.blob-3{width:240px;height:240px;background:#fff1b5;left:20%;bottom:80px;animation-delay:-8s}
.blob-4{width:280px;height:280px;background:#ddf8e5;right:16%;bottom:40px;animation-delay:-2s}
.blob-5{width:180px;height:180px;background:#eadfff;left:56%;top:42%;animation-delay:-6s}
@keyframes floatBlob{50%{transform:translateY(-26px) translateX(16px) scale(1.05)}}
.sparkle-field i{
  position:fixed; font-style:normal; pointer-events:none; opacity:.55; z-index:-1;
  animation:floatSpark 6s ease-in-out infinite;
  filter:drop-shadow(0 4px 12px rgba(255,255,255,.55));
}
.sparkle-field i:nth-child(1){left:4%;top:18%;font-size:26px;color:#ff8ebe}
.sparkle-field i:nth-child(2){left:10%;top:56%;font-size:20px;color:#8fcaf0;animation-delay:-2s}
.sparkle-field i:nth-child(3){right:7%;top:20%;font-size:28px;color:#ffc96a;animation-delay:-1s}
.sparkle-field i:nth-child(4){right:10%;top:64%;font-size:24px;color:#9fdcab;animation-delay:-3s}
.sparkle-field i:nth-child(5){left:34%;top:10%;font-size:18px;color:#c4b3ff;animation-delay:-4s}
.sparkle-field i:nth-child(6){right:27%;top:12%;font-size:18px;color:#ff8ebe;animation-delay:-1.5s}
.sparkle-field i:nth-child(7){left:18%;bottom:8%;font-size:22px;color:#ffc96a;animation-delay:-2.5s}
.sparkle-field i:nth-child(8){right:20%;bottom:14%;font-size:26px;color:#c4b3ff;animation-delay:-3.5s}
.sparkle-field i:nth-child(9){left:46%;top:32%;font-size:24px;color:#9fdcab;animation-delay:-5s}
.sparkle-field i:nth-child(10){right:38%;bottom:30%;font-size:17px;color:#8fcaf0;animation-delay:-6s}
@keyframes floatSpark{50%{transform:translateY(-18px) rotate(10deg)}}
.topbar{
  margin-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 14px 20px;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft);
  border-radius:24px;
  position:sticky; top:10px; z-index:30;
}
.brand{text-decoration:none;color:var(--ink);display:flex;align-items:flex-end;gap:8px}
.brand-badge{
  font-family:"Baloo 2",system-ui,sans-serif; font-size:34px; line-height:1;
  background:linear-gradient(135deg,#ff8ebe,#ffb4d4);
  color:#fff; padding:9px 16px 8px; border-radius:18px;
  box-shadow:0 8px 18px rgba(255,142,190,.34);
}
.brand-sub{font-family:"Baloo 2",system-ui,sans-serif;font-size:19px;color:#6b5f73;padding-bottom:4px}
.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;padding:10px 14px;border-radius:999px}
.nav a:hover{background:rgba(255,255,255,.7)}
.nav-cta{background:#2b2430;color:#fff !important;box-shadow:0 8px 18px rgba(43,36,48,.16)}
.panel{
  position:relative;
  border-radius:34px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
}
.dreamy-panel{margin-top:24px;padding:56px;display:grid;grid-template-columns:1.03fr .97fr;gap:24px;overflow:hidden}
.hero-copy{padding-right:10px;position:relative;z-index:2}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.82);
  color:#8e6e88;font-size:11px;font-weight:800;letter-spacing:.14em;
  padding:7px 12px;border-radius:999px;text-transform:uppercase;
}
.hero h1,.section-head h2,.pricing h2,.why-card h2,.contact h2{
  font-family:"Baloo 2",system-ui,sans-serif;
  font-size:clamp(46px,6.3vw,92px);
  line-height:.95; letter-spacing:-.04em;
  margin:18px 0 14px;
}
.hero h1 span,.contact h2 span{color:#ff7db4}
.hero-text{font-size:18px;line-height:1.8;color:#5b5562;max-width:590px;margin:0}
.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 30px}
.tag-row span{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,253,.85));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(120,102,136,.10);
  border-radius:999px;padding:10px 13px;font-size:13px;font-weight:700;color:#5f5667;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  border:0; text-decoration:none; cursor:pointer; font-family:inherit; font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:18px;padding:15px 20px; transition:.18s transform,.18s box-shadow;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:#2b2430;color:#fff;box-shadow:0 12px 24px rgba(43,36,48,.20)}
.btn-soft{background:linear-gradient(180deg,#fff8cb,#fff1a8);color:#2b2430;box-shadow:0 12px 24px rgba(255,213,90,.18)}
.hero-showcase{height:520px;position:relative}
.floating-card,.browser-card{
  position:absolute; border-radius:30px; box-shadow:var(--shadow-soft);
}
.floating-card small{font-size:11px;font-weight:800;letter-spacing:.12em;color:#6b5f73}
.floating-card strong{font-family:"Baloo 2",system-ui,sans-serif;font-size:46px;line-height:1;margin:10px 0 6px}
.floating-card span{font-weight:700;color:#5a5261}
.jumbo-card{
  left:0; top:16px; width:210px; min-height:180px; padding:22px;
  background:linear-gradient(180deg,#ffb1d0,#ffdeec); transform:rotate(-7deg);
  animation:wiggleA 7s ease-in-out infinite;
}
.glass-card{
  right:10px; top:20px; width:230px; min-height:170px; padding:20px;
  background:rgba(255,255,255,.48); backdrop-filter:blur(16px); transform:rotate(8deg);
  border:1px solid rgba(255,255,255,.8); animation:wiggleB 8s ease-in-out infinite;
}
.note-card{
  left:48px; bottom:20px; width:220px; min-height:165px; padding:22px;
  background:linear-gradient(180deg,#fff3ad,#fff9da); transform:rotate(6deg);
  animation:wiggleC 8.5s ease-in-out infinite;
}
.otp-row{display:flex;gap:8px;margin:12px 0 10px}
.otp-row b{width:38px;height:48px;border-radius:14px;background:#2b2430;color:#fff;display:grid;place-items:center;font-size:22px}
.browser-card{
  right:28px; bottom:18px; width:280px; padding:14px 14px 22px;
  background:#fff; transform:rotate(-5deg); animation:wiggleD 9s ease-in-out infinite;
}
.browser-top{display:flex;gap:6px;padding:4px 0 10px}
.browser-top i{width:9px;height:9px;border-radius:50%;background:#c8c1ce}
.browser-screen{background:linear-gradient(180deg,#f8eaff,#f3fbff);border-radius:18px;padding:16px;height:220px}
.mini-hero{height:70px;border-radius:18px;background:linear-gradient(135deg,#ffb3d1,#e0f4ff)}
.mini-pill-row{display:flex;gap:8px;margin:14px 0}
.mini-pill-row span{height:14px;flex:1;border-radius:999px;background:#fff}
.mini-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini-card-grid b{height:62px;border-radius:16px;background:#fff}
.browser-card p{margin:12px 0 0;text-align:center;font-family:"Baloo 2",system-ui,sans-serif;font-size:20px;color:#7a6674}
@keyframes wiggleA{50%{transform:rotate(-4deg) translateY(-10px)}}
@keyframes wiggleB{50%{transform:rotate(5deg) translateY(-14px)}}
@keyframes wiggleC{50%{transform:rotate(3deg) translateY(-10px)}}
@keyframes wiggleD{50%{transform:rotate(-2deg) translateY(-12px)}}
.sticker{
  position:absolute; font-family:"Baloo 2",system-ui,sans-serif; font-size:22px; color:#fff;
  padding:10px 16px; border-radius:999px; box-shadow:0 10px 20px rgba(100,83,116,.18);
}
.sticker-1{left:42%; top:22px; background:#8ccff7; transform:rotate(-12deg)}
.sticker-2{right:16%; top:150px; background:#ff93c0; transform:rotate(10deg)}
.sticker-3{left:46%; bottom:72px; background:#ffd46a; color:#755e00; transform:rotate(-8deg)}
.marquee-wrap{overflow:hidden;margin:22px 0 52px}
.marquee{
  width:max-content; display:flex; gap:36px; align-items:center;
  padding:14px 20px; border-radius:999px; color:#fff;
  background:linear-gradient(90deg,#ff94c0,#b6dfff,#ffe48c,#bfeccd,#e0d7ff,#ff94c0);
  box-shadow:var(--shadow-soft); animation:marq 22s linear infinite; font-weight:800; letter-spacing:.08em;
}
.marquee span{white-space:nowrap;font-size:13px}
@keyframes marq{to{transform:translateX(-50%)}}
.section-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start;margin-bottom:52px}
.section-head h2,.pricing h2,.why-card h2,.contact h2{font-size:clamp(38px,4.8vw,62px)}
.section-head p,.pricing-copy p,.why-card li,.contact p{font-size:16px;line-height:1.8;color:#5f5866}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.service-card{
  position:relative; overflow:hidden; border-radius:30px; padding:26px;
  box-shadow:var(--shadow-soft); min-height:240px; background:#fff;
}
.service-card::before{
  content:""; position:absolute; right:-18px; top:-18px; width:110px; height:110px; border-radius:30px;
  background:rgba(255,255,255,.45); filter:blur(1px);
}
.service-card h3{font-family:"Baloo 2",system-ui,sans-serif;font-size:30px;line-height:1;margin:10px 0 10px}
.service-card p{margin:0 0 18px;line-height:1.75;color:#5d5564}
.service-card strong{display:inline-flex;background:rgba(255,255,255,.82);padding:10px 13px;border-radius:999px;font-size:13px}
.num{font-family:"Baloo 2",system-ui,sans-serif;font-size:42px;line-height:1;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.08)}
.pink{background:linear-gradient(180deg,#ff9fc9,#ffd4e6)}
.blue{background:linear-gradient(180deg,#aee1ff,#ddf3ff)}
.yellow{background:linear-gradient(180deg,#ffe487,#fff3bf)}
.mint{background:linear-gradient(180deg,#bfeecb,#e6faeb)}
.soft-panel{padding:44px;display:grid;grid-template-columns:.78fr 1.22fr;gap:28px;margin-bottom:52px}
.price-stack{display:grid;gap:16px;align-self:center}
.price-item{
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-soft);
  padding:18px 18px;border-radius:22px;
}
.price-item span{font-weight:900;color:#ff7db4}
.price-item b{font-size:18px}
.price-item strong{font-family:"Baloo 2",system-ui,sans-serif;font-size:30px}
.bubble-stamp{
  position:absolute; right:22px; bottom:22px; width:124px; height:124px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#ffd8ea); color:#ff70ae;
  display:grid;place-items:center;text-align:center; font-family:"Baloo 2",system-ui,sans-serif;
  box-shadow:0 16px 30px rgba(255,134,180,.18); transform:rotate(-10deg); font-size:24px;
}
.bubble-stamp small{font-size:12px}
.why-wrap{display:grid;grid-template-columns:1fr .86fr;gap:18px;align-items:stretch;margin-bottom:52px}
.giant-card{
  padding:34px; border-radius:34px; background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.50));
  border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow);
}
.why-card h2{margin-top:14px}
.why-card ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.why-card li{
  background:rgba(255,255,255,.7); border-radius:18px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
}
.why-card li span{font-size:18px;line-height:1.2}
.mini-benefits{display:grid;gap:16px}
.mini-benefits article{
  padding:24px; border-radius:28px; background:rgba(255,255,255,.70); border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow-soft);
}
.mini-benefits h3{margin:0 0 8px;font-family:"Baloo 2",system-ui,sans-serif;font-size:30px;color:#7d6ee8;line-height:1}
.mini-benefits p{margin:0;color:#5e5665;line-height:1.7}
.contact-panel{padding:38px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;overflow:hidden}
.big-btn{min-width:260px;font-size:18px;padding:18px 22px}
.contact-actions{display:flex;flex-direction:column;gap:12px}
.float-badge{
  position:absolute; font-family:"Baloo 2",system-ui,sans-serif; font-size:20px; font-weight:700;
  padding:10px 16px; border-radius:999px; box-shadow:var(--shadow-soft);
}
.badge-a{left:48%; bottom:20px; background:#dff3ff; color:#5b88aa; transform:rotate(-8deg)}
.badge-b{right:18%; top:18px; background:#ffe7b1; color:#916b00; transform:rotate(9deg)}
.footer{display:flex;justify-content:space-between;gap:12px;padding-bottom:30px;color:#72687a;font-size:13px}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,18px);
  opacity:0; pointer-events:none; transition:.2s;
  background:#2b2430; color:#fff; padding:11px 16px; border-radius:999px; z-index:99;
  box-shadow:0 12px 30px rgba(43,36,48,.22)
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){
  .dreamy-panel,.section-grid,.soft-panel,.why-wrap,.contact-panel{grid-template-columns:1fr}
  .hero-showcase{height:470px}
  .service-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .topbar{padding:12px 14px}
  .nav a:not(.nav-cta){display:none}
  .dreamy-panel{padding:28px 22px;border-radius:28px}
  .hero h1{font-size:52px}
  .hero-text{font-size:16px}
  .hero-showcase{height:430px}
  .jumbo-card,.note-card,.glass-card{width:165px;min-height:140px;padding:16px}
  .jumbo-card strong,.note-card strong{font-size:34px}
  .glass-card{right:0}
  .otp-row b{width:30px;height:38px;font-size:18px}
  .browser-card{width:225px;right:10px}
  .browser-screen{height:170px}
  .service-grid,.price-stack{grid-template-columns:1fr}
  .service-card{min-height:auto}
}
@media(max-width:560px){
  .shell{width:min(100% - 18px,1180px)}
  .brand-badge{font-size:28px}
  .brand-sub{font-size:17px}
  .dreamy-panel{padding:24px 18px}
  .hero h1,.section-head h2,.pricing h2,.why-card h2,.contact h2{font-size:42px}
  .tag-row{gap:8px}
  .tag-row span{font-size:12px}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  .hero-showcase{height:370px}
  .jumbo-card{left:0;top:8px}
  .glass-card{top:14px}
  .note-card{left:8px;bottom:8px}
  .browser-card{width:190px;bottom:0}
  .browser-screen{height:145px;padding:12px}
  .browser-card p{font-size:16px}
  .service-grid{grid-template-columns:1fr}
  .soft-panel{padding:26px 18px}
  .price-item{grid-template-columns:40px 1fr auto;padding:15px 14px}
  .price-item strong{font-size:22px}
  .bubble-stamp{display:none}
  .contact-panel{padding:28px 18px}
  .contact-actions,.big-btn{width:100%}
  .big-btn{min-width:0}
  .footer{flex-direction:column;text-align:center}
  .sticker,.float-badge{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ===== POMU V5: richer decoration + motion ===== */
.decor-layer{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.deco{position:absolute;font-family:"Baloo 2",system-ui,sans-serif;opacity:.5;filter:drop-shadow(0 6px 14px rgba(255,255,255,.7))}
.deco.cloud{font-size:64px;color:#fff;animation:cloudDrift 16s ease-in-out infinite}
.deco.star{font-size:30px;color:#ffd46d;animation:twinkle 2.8s ease-in-out infinite}
.deco.flower{font-size:34px;color:#ff98c4;animation:spinFloat 10s linear infinite}
.deco.heart{font-size:34px;color:#a9d8f7;animation:heartPulse 4s ease-in-out infinite}
.deco.ribbon{font-size:28px;color:#bca6ff;animation:ribbonFloat 6s ease-in-out infinite}
.c1{left:1%;top:8%}.c2{right:2%;bottom:14%;animation-delay:-7s}
.s1{left:7%;bottom:28%}.s2{right:7%;top:34%;animation-delay:-1.4s}
.f1{left:28%;top:5%}.f2{right:24%;bottom:6%;animation-delay:-5s}
.h1{left:2%;top:68%}.h2{right:3%;top:12%;animation-delay:-2s}
.r1{left:13%;bottom:5%}.r2{right:14%;top:7%;animation-delay:-3s}
@keyframes cloudDrift{50%{transform:translate(22px,-12px) scale(1.08)}}
@keyframes twinkle{50%{transform:scale(1.35) rotate(18deg);opacity:.95}}
@keyframes spinFloat{50%{transform:translateY(-18px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes heartPulse{50%{transform:translateY(-14px) scale(1.18);opacity:.85}}
@keyframes ribbonFloat{50%{transform:translateY(-12px) rotate(-6deg)}}

.dreamy-panel:before,
.dreamy-panel:after{
  content:"";position:absolute;border-radius:50%;filter:blur(8px);opacity:.45;pointer-events:none
}
.dreamy-panel:before{width:180px;height:180px;background:#ffd8e8;left:-40px;bottom:-40px;animation:orbFloat 8s ease-in-out infinite}
.dreamy-panel:after{width:150px;height:150px;background:#d9f4ff;right:-25px;top:-30px;animation:orbFloat 9s ease-in-out infinite reverse}
@keyframes orbFloat{50%{transform:translateY(-18px) scale(1.08)}}

.hero-orbit{position:absolute;z-index:3;font-size:26px;pointer-events:none;filter:drop-shadow(0 7px 15px rgba(130,100,150,.18));animation:heroBop 5s ease-in-out infinite}
.orbit-1{left:3%;top:9%;color:#ff95c1}
.orbit-2{left:49%;top:12%;color:#8fcaf0;animation-delay:-1s}
.orbit-3{right:4%;top:8%;color:#ffd36e;animation-delay:-2s}
.orbit-4{left:4%;bottom:8%;color:#fff;animation-delay:-1.5s}
.orbit-5{right:7%;bottom:8%;color:#bca6ff;animation-delay:-2.8s}
.orbit-6{left:50%;bottom:4%;color:#9fdcab;animation-delay:-3.2s}
@keyframes heroBop{50%{transform:translateY(-16px) rotate(12deg) scale(1.15)}}

.floating-card,.browser-card,.service-card,.mini-benefits article,.price-item{
  will-change:transform;
}
.service-card:hover{
  transform:translateY(-8px) rotate(0deg) scale(1.015);
}
.service-card.pink{animation:cardBob1 7s ease-in-out infinite}
.service-card.blue{animation:cardBob2 7.5s ease-in-out infinite}
.service-card.yellow{animation:cardBob3 8s ease-in-out infinite}
.service-card.mint{animation:cardBob4 8.5s ease-in-out infinite}
@keyframes cardBob1{50%{transform:translateY(-7px) rotate(-.8deg)}}
@keyframes cardBob2{50%{transform:translateY(-9px) rotate(.8deg)}}
@keyframes cardBob3{50%{transform:translateY(-6px) rotate(-.6deg)}}
@keyframes cardBob4{50%{transform:translateY(-8px) rotate(.6deg)}}

.service-side-decor{display:flex;gap:12px;margin:8px 0 16px;align-items:center}
.service-side-decor span{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.72);box-shadow:var(--shadow-soft);font-size:18px;
  animation:miniFloat 4.5s ease-in-out infinite
}
.service-side-decor span:nth-child(2){animation-delay:-1.2s}
.service-side-decor span:nth-child(3){animation-delay:-2.2s}
@keyframes miniFloat{50%{transform:translateY(-8px) rotate(8deg)}}

.price-decor{position:absolute;z-index:3;font-size:26px;animation:miniFloat 4.6s ease-in-out infinite}
.pd1{left:3%;bottom:7%;color:#ff8ebe}
.pd2{right:20%;top:6%;color:#ffd46a;animation-delay:-1.8s}
.pd3{right:5%;top:38%;color:#9fdcab;animation-delay:-3s}

.price-item{
  transition:.2s transform,.2s box-shadow;
}
.price-item:hover{transform:translateX(7px) scale(1.01);box-shadow:0 18px 34px rgba(130,105,150,.16)}

.bubble-stamp{animation:stampBounce 6s ease-in-out infinite}
@keyframes stampBounce{50%{transform:rotate(-6deg) translateY(-10px) scale(1.05)}}

.mini-benefits article{position:relative;overflow:hidden;transition:.2s transform}
.mini-benefits article:before{
  content:"";position:absolute;inset:auto -30px -35px auto;width:110px;height:110px;border-radius:50%;
  background:rgba(255,255,255,.42)
}
.mini-benefits article:hover{transform:translateY(-7px) rotate(-1deg)}
.benefit-icon{
  position:absolute;right:18px;top:14px;font-size:28px;opacity:.6;
  animation:heroBop 4.8s ease-in-out infinite
}
.mini-benefits article:nth-child(2) .benefit-icon{animation-delay:-1.6s}
.mini-benefits article:nth-child(3) .benefit-icon{animation-delay:-2.8s}

.contact-panel:before,.contact-panel:after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(8px);opacity:.48
}
.contact-panel:before{width:160px;height:160px;background:#ffd9e8;left:-45px;top:-45px;animation:orbFloat 8s ease-in-out infinite}
.contact-panel:after{width:170px;height:170px;background:#daf4ff;right:-55px;bottom:-55px;animation:orbFloat 10s ease-in-out infinite reverse}
.contact-copy,.contact-actions{position:relative;z-index:2}
.contact-spark{position:absolute;z-index:2;font-size:24px;animation:heroBop 4.5s ease-in-out infinite}
.cs1{left:42%;top:15%;color:#ffd36e}
.cs2{left:47%;bottom:15%;color:#ff8ebe;animation-delay:-1.4s}
.cs3{right:7%;top:20%;color:#9fdcab;animation-delay:-2.2s}
.cs4{right:4%;bottom:18%;color:#bca6ff;animation-delay:-3.1s}

.topbar{animation:headerFloat 7s ease-in-out infinite}
@keyframes headerFloat{50%{transform:translateY(2px)}}

.brand-badge{animation:logoPulse 5s ease-in-out infinite}
@keyframes logoPulse{50%{transform:rotate(-2deg) scale(1.045);box-shadow:0 12px 24px rgba(255,142,190,.42)}}

.marquee-wrap{position:relative}
.marquee-wrap:before,.marquee-wrap:after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:80px;height:80px;border-radius:50%;z-index:2;filter:blur(18px);opacity:.55;pointer-events:none
}
.marquee-wrap:before{left:-25px;background:#ffd7e7}
.marquee-wrap:after{right:-25px;background:#d8efff}

@media(max-width:760px){
  .decor-layer .cloud,.decor-layer .ribbon{opacity:.28}
  .hero-orbit{font-size:20px}
  .service-side-decor{justify-content:center}
}

.service-card,.price-item,.mini-benefits article,.why-card,.contact-panel{
  opacity:0;filter:blur(8px);transition:opacity .7s ease,filter .7s ease,transform .7s ease
}
.reveal-in{opacity:1!important;filter:blur(0)!important}
.floating-card,.browser-card,.hero-orbit,.sticker{
  translate:var(--px,0) var(--py,0);
}


/* ===== V6 balance fixes + more animation ===== */
body::after{
  content:"";
  position:fixed; inset:-10%;
  pointer-events:none; z-index:-3;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 18%),
    radial-gradient(circle at 65% 20%, rgba(255,255,255,.18), transparent 15%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.22), transparent 16%);
  animation:bgGlow 16s ease-in-out infinite;
}
@keyframes bgGlow{
  50%{transform:scale(1.05) translateY(-12px); opacity:.92}
}

.section-grid{
  position:relative;
  display:block;
  margin-bottom:54px;
  padding:34px 26px 28px;
  border-radius:34px;
  background:rgba(255,255,255,.40);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.section-grid::before,
.section-grid::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; filter:blur(8px); opacity:.44;
}
.section-grid::before{width:160px;height:160px;background:#ffd9e8;left:-42px;top:-42px;animation:orbFloat 7s ease-in-out infinite}
.section-grid::after{width:180px;height:180px;background:#d8f2ff;right:-54px;bottom:-54px;animation:orbFloat 10s ease-in-out infinite reverse}
.section-head{
  max-width:780px;
  margin:0 auto 20px;
  text-align:center;
}
.section-head p{max-width:680px;margin:0 auto}
.service-side-decor{
  justify-content:center;
  margin:0 0 20px;
}
.service-grid{
  max-width:980px;
  margin:0 auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.service-card{
  min-height:255px;
}
.service-card h3{font-size:32px}
.service-card p{font-size:15px}
.section-cloud,.section-spark{
  position:absolute; pointer-events:none; z-index:2; opacity:.72;
}
.section-cloud{font-size:48px;color:#fff;filter:drop-shadow(0 8px 18px rgba(255,255,255,.55));animation:cloudDrift 8s ease-in-out infinite}
.sc-left{left:4%;top:18%}
.sc-right{right:5%;bottom:10%;animation-delay:-3s}
.section-spark{font-size:22px;animation:heroBop 4.5s ease-in-out infinite}
.ss-1{left:16%;bottom:14%;color:#ffd36e}
.ss-2{right:16%;top:26%;color:#ff8ebe;animation-delay:-1.4s}
.ss-3{right:8%;bottom:20%;color:#9fdcab;animation-delay:-2.4s}

.pricing{
  overflow:hidden;
}
.soft-panel{
  padding:44px 34px 56px;
  grid-template-columns:.82fr 1.18fr;
}
.pricing-copy{
  position:relative;
  padding-bottom:118px;
  z-index:2;
}
.price-mini-note{
  margin-top:18px;
  display:inline-flex;
  max-width:290px;
  background:rgba(255,255,255,.82);
  border-radius:18px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.6;
  color:#665c6e;
  box-shadow:var(--shadow-soft);
  animation:miniFloat 5s ease-in-out infinite;
}
.price-stack{position:relative;z-index:3}
.bubble-stamp{
  left:40px;
  bottom:28px;
  right:auto;
  width:102px;
  height:102px;
  font-size:21px;
  z-index:1;
}
.price-decor{z-index:1}
.pd1{left:22%;bottom:16%}
.pd2{right:8%;top:10%}
.pd3{right:3%;bottom:14%}
.price-item{
  position:relative;
  overflow:hidden;
}
.price-item::after{
  content:""; position:absolute; right:-14px; top:-10px; width:92px; height:92px; border-radius:28px;
  background:rgba(255,255,255,.28); transform:rotate(18deg);
}
.price-item:hover{transform:translateX(10px) scale(1.01)}

.why-wrap{
  position:relative;
  padding-top:10px;
  overflow:hidden;
}
.why-decor{
  position:absolute; pointer-events:none; z-index:1; font-size:26px; opacity:.75; animation:heroBop 4.8s ease-in-out infinite;
}
.wd-1{left:48%;top:4%;color:#ffd36e}
.wd-2{right:4%;top:34%;font-size:36px;color:#fff;animation-delay:-1.4s}
.wd-3{left:2%;bottom:18%;color:#ff8ebe;animation-delay:-2.8s}
.giant-card,.mini-benefits{position:relative;z-index:2}
.why-card li{
  box-shadow:0 8px 18px rgba(120,102,136,.08);
  transition:.2s transform;
}
.why-card li:hover{transform:translateX(6px)}
.mini-benefits article{
  min-height:142px;
}
.mini-benefits h3{font-size:34px}

.contact-panel{
  margin-top:6px;
}
.contact-panel .btn{
  box-shadow:0 14px 28px rgba(120,102,136,.16);
}
.contact-spark{
  font-size:28px;
}
.badge-a,.badge-b{
  animation:miniFloat 5.5s ease-in-out infinite;
}
.badge-b{animation-delay:-2s}

.ambient-sparkle{
  position:fixed;
  pointer-events:none;
  z-index:-1;
  opacity:.52;
  filter:drop-shadow(0 5px 10px rgba(255,255,255,.7));
  animation:ambientFloat linear infinite;
}
@keyframes ambientFloat{
  from{transform:translateY(10px) rotate(0deg); opacity:.0}
  10%{opacity:.55}
  50%{opacity:.85}
  100%{transform:translateY(-120px) rotate(90deg); opacity:0}
}

@media(max-width:980px){
  .soft-panel{grid-template-columns:1fr; padding:36px 24px 46px}
  .pricing-copy{padding-bottom:86px}
  .bubble-stamp{left:26px;bottom:20px}
}
@media(max-width:760px){
  .section-grid{padding:26px 16px 20px}
  .service-grid{grid-template-columns:1fr}
  .section-cloud{font-size:38px;opacity:.45}
  .soft-panel{padding:26px 18px 34px}
  .pricing-copy{padding-bottom:20px}
  .bubble-stamp{display:none}
  .price-mini-note{max-width:none;width:100%}
}

/* Admin-configurable presentation hooks */
:root{
  --admin-radius:34px;
  --admin-shadow-alpha:.18;
  --motion-speed:1;
}
.panel,.section-grid,.giant-card,.mini-benefits article{border-radius:var(--admin-radius)}
.service-card{border-radius:calc(var(--admin-radius) - 4px)}
.panel,.section-grid,.giant-card{box-shadow:0 20px 60px rgba(105,74,120,var(--admin-shadow-alpha))}
.brand-logo-image{height:46px;max-width:180px;object-fit:contain;display:block}
body.no-decorations .decor-layer,
body.no-decorations .sparkle-field,
body.no-decorations .hero-orbit,
body.no-decorations .sticker,
body.no-decorations .section-cloud,
body.no-decorations .section-spark,
body.no-decorations .price-decor,
body.no-decorations .why-decor,
body.no-decorations .contact-spark,
body.no-decorations .float-badge{display:none!important}
body.no-ambient .ambient-sparkle{display:none!important}
.hero-main-text{color:var(--ink)!important;font-family:"Baloo 2",system-ui,sans-serif!important;font-weight:700!important}