/* ============================================================
   Pann Studio — Home Hero v3 "ปั้น" (sculpt)
   ตัวหนังสือยักษ์ + clay blob มีชีวิต + marquee ผลงาน live
   ============================================================ */
.hero-pann{position:relative;min-height:min(96vh,900px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:140px 0 0}
/* grain บางๆ ให้ผิวเว็บมีเนื้อ */
.hero-pann:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- ก้อนดิน gradient ที่ถูก "ปั้น" ตลอดเวลา ---- */
.clay{position:absolute;z-index:0;filter:blur(52px);opacity:.55;background:var(--gradient);animation:clayMorph 14s ease-in-out infinite alternate,clayHue 26s linear infinite}
.clay-a{width:min(58vw,720px);aspect-ratio:1;top:-18%;right:-10%}
.clay-b{width:min(34vw,420px);aspect-ratio:1;bottom:-14%;left:-8%;animation-delay:-7s,-13s;opacity:.38}
@keyframes clayMorph{
  0%{border-radius:58% 42% 63% 37%/45% 58% 42% 55%;transform:rotate(0) scale(1)}
  33%{border-radius:38% 62% 44% 56%/62% 36% 64% 38%;transform:rotate(14deg) scale(1.08)}
  66%{border-radius:64% 36% 58% 42%/38% 60% 40% 62%;transform:rotate(-8deg) scale(.94)}
  100%{border-radius:45% 55% 38% 62%/58% 44% 56% 42%;transform:rotate(6deg) scale(1.04)}
}
@keyframes clayHue{to{filter:blur(52px) hue-rotate(28deg)}}
/* ก้อนเล็กวิ่งตามเมาส์ */
.clay-cursor{position:absolute;z-index:0;width:190px;height:190px;border-radius:50%;background:var(--gradient);filter:blur(42px);opacity:.4;pointer-events:none;will-change:transform;display:none}
@media (hover:hover) and (pointer:fine){.clay-cursor{display:block}}

/* ---- typography ยักษ์ ---- */
.hero-pann .wrap{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.pann-kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);background:rgba(255,255,255,.7);border:1px solid var(--line);backdrop-filter:blur(8px);padding:9px 20px;border-radius:100px;margin-bottom:34px}
.pann-kick .dot{width:8px;height:8px;border-radius:50%;background:#2FBD84;box-shadow:0 0 10px #2FBD84;animation:cinePulse 1.8s infinite}
@keyframes cinePulse{50%{opacity:.35}}
.hero-pann h1{font-size:clamp(40px,6.6vw,92px);line-height:1.16;letter-spacing:-.025em;color:var(--ink)}
.hero-pann h1 .ln{display:block;overflow:hidden;padding:.14em 0 .1em;margin:-.06em 0}
.hero-pann h1 .wd{display:inline-block;transform:translateY(110%);animation:wdUp 1s var(--ease) forwards}
.hero-pann h1 .ln:nth-child(1) .wd{animation-delay:.15s}
.hero-pann h1 .ln:nth-child(2) .wd{animation-delay:.32s}
@keyframes wdUp{to{transform:none}}
.hero-pann h1 em{font-style:normal}
.hero-pann h1 .brand{font-size:.52em;letter-spacing:.01em;font-weight:800;color:var(--ink)}
.hero-pann h1 .brand .p{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.pann-lead{max-width:56ch;font-size:clamp(16px,1.35vw,19.5px);line-height:1.8;color:var(--ink-soft);margin:30px 0 36px;opacity:0;animation:fadeUp .9s .6s var(--ease) forwards}
.pann-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;opacity:0;animation:fadeUp .9s .75s var(--ease) forwards}
.pann-cta .btn-gold{padding:18px 40px;font-size:15.5px;position:relative}
.pann-cta .btn-gold:before{content:"";position:absolute;inset:-3px;border-radius:100px;background:var(--gradient);z-index:-1;opacity:0;transition:.3s}
.pann-cta .btn-gold:hover:before{opacity:1}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .clay,.clay-cursor{animation:none;display:none}
  .hero-pann h1 .wd,.pann-lead,.pann-cta{animation:none;transform:none;opacity:1}
  }
@media (max-width:760px){
  .hero-pann{padding-top:120px;min-height:min(92vh,780px)}
  .hero-pann h1{font-size:clamp(44px,12.5vw,64px)}
  
}

/* ---- stats: ตัวเลขถูกปั้นก่อตัว + spotlight + jelly ---- */
.stats .spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(126,99,255,.28),transparent 65%)}
.stats:hover .spot{opacity:1}
.stat{cursor:default}
.stat:hover .n{animation:jelly .55s var(--ease)}
@keyframes jelly{0%{transform:scale(1,1)}30%{transform:scale(1.14,.86)}55%{transform:scale(.92,1.08)}75%{transform:scale(1.04,.97)}100%{transform:scale(1,1)}}
@media (prefers-reduced-motion:reduce){.stat:hover .n{animation:none}.stats .spot{display:none}}

.cnt{display:inline-block;font-variant-numeric:tabular-nums;will-change:filter,opacity}
.hero-pann h1 .ln.fit{font-size:.6em;letter-spacing:-.015em}

/* ---- niche: การ์ดภาพถ่ายจริง 6 หมวด ---- */
.nx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nx-card{position:relative;aspect-ratio:3/3.4;border-radius:var(--radius);overflow:hidden;display:block;text-decoration:none;color:#fff;box-shadow:var(--shadow-sm);isolation:isolate}
.nx-card .im{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease);will-change:transform}
.nx-card:hover .im{transform:scale(1.09)}
.nx-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,13,22,.62) 0%,rgba(9,13,22,.12) 34%,transparent 55%);transition:.4s}
.nx-card:hover:after{background:linear-gradient(to top,rgba(9,13,22,.7) 0%,rgba(9,13,22,.16) 38%,transparent 60%)}
.nx-no{position:absolute;top:16px;left:18px;z-index:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);padding:6px 13px;border-radius:100px}
.nx-ov{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 26px 24px;transform:translateY(14px);transition:.45s var(--ease)}
.nx-card:hover .nx-ov{transform:none}
.nx-ov h3{font-family:var(--font);font-size:21px;font-weight:800;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 14px rgba(9,13,22,.6)}
.nx-ov h3:before{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--acc);margin-bottom:12px}
.nx-ov p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.9);margin-top:7px;text-shadow:0 1px 10px rgba(9,13,22,.65)}
.nx-go{display:inline-flex;align-items:center;margin-top:14px;font-family:var(--font);font-weight:700;font-size:13px;color:#fff;background:var(--acc);padding:9px 18px;border-radius:100px;opacity:0;transform:translateY(10px);transition:.4s var(--ease)}
.nx-card:hover .nx-go{opacity:1;transform:none}
@media (max-width:980px){.nx-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.nx-grid{grid-template-columns:1fr}.nx-card{aspect-ratio:4/3.4}.nx-ov{transform:none}.nx-go{opacity:1;transform:none}}

/* ---- industries hub: แถวหมวด photo panel + ลิสต์ลิงก์ ---- */
.ind-row{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
.ind-row:last-of-type{border-bottom:0}
.ind-row.flip .ind-visual{order:2}
.ind-visual{position:relative;aspect-ratio:4/4.4;border-radius:calc(var(--radius) + 4px);overflow:hidden;box-shadow:var(--shadow-sm)}
.ind-visual .im{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease)}
.ind-row:hover .ind-visual .im{transform:scale(1.06)}
.ind-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,13,22,.58) 0%,rgba(9,13,22,.1) 36%,transparent 56%)}
.ind-visual .tag{position:absolute;top:16px;left:18px;z-index:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);padding:6px 13px;border-radius:100px}
.ind-visual .nm{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 26px;color:#fff}
.ind-visual .nm h2{font-family:var(--font);font-size:clamp(21px,2vw,26px);font-weight:800;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 14px rgba(9,13,22,.6)}
.ind-visual .nm h2:before{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--acc,var(--blue));margin-bottom:12px}
.ind-visual .nm p{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:6px}
.ind-list{display:flex;flex-direction:column}
.ind-item{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:19px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.25s var(--ease);border-radius:10px}
.ind-item:hover{background:#fff;padding-left:16px;box-shadow:var(--shadow-sm);border-color:transparent}
.ind-item h3{font-family:var(--font);font-size:16.5px;font-weight:700}
.ind-item p{font-size:13.5px;color:var(--ink-soft);margin-top:3px}
.ind-item .ar{font-family:var(--font);font-weight:800;color:var(--acc,var(--blue));transition:.25s}
.ind-item:hover .ar{transform:translateX(5px)}
@media (max-width:880px){.ind-row{grid-template-columns:1fr;gap:22px;padding:40px 0}.ind-row.flip .ind-visual{order:0}.ind-visual{aspect-ratio:16/10}}

/* ===== services ledger rows (v20260714b) ===== */
.sv-rows{border-top:1px solid var(--line);margin-top:6px}
.sv-row{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:baseline;padding:27px 12px;border-bottom:1px solid var(--line);transition:background .35s ease,padding .35s ease}
.sv-num{font-family:var(--font-num);font-size:14px;font-weight:700;color:var(--ink-soft);opacity:.6;transition:color .3s,opacity .3s}
.sv-row h3{font-size:20px;letter-spacing:-.01em;margin:0 0 7px}
.sv-row h3 small{font-size:13px;color:var(--ink-soft);font-weight:600}
.sv-row p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.8;max-width:660px}
.sv-tag{font-family:var(--font-num);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);opacity:.5;transition:color .3s,opacity .3s}
@media(hover:hover){
.sv-row:hover{background:linear-gradient(90deg,var(--blue-soft),rgba(234,240,255,0) 72%);padding-left:26px;padding-right:0}
.sv-row:hover .sv-num{color:var(--blue);opacity:1}
.sv-row:hover .sv-tag{color:var(--blue);opacity:1}
}
@media(max-width:720px){.sv-row{grid-template-columns:42px 1fr;padding:21px 4px}.sv-tag{display:none}.sv-row h3{font-size:18px}}

/* ===== enterprise band ===== */
.ent-band{grid-column:1/-1;position:relative;overflow:hidden;isolation:isolate;border-radius:22px;background:#0E1116;color:#fff;display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;padding:40px 44px;margin-top:4px}
.ent-glow{position:absolute;inset:-45%;z-index:-1;background:radial-gradient(460px 340px at 10% 115%,rgba(30,80,255,.55),transparent 62%),radial-gradient(430px 330px at 90% -15%,rgba(255,90,44,.4),transparent 60%),radial-gradient(340px 300px at 56% 55%,rgba(126,99,255,.24),transparent 66%);filter:blur(8px);animation:entFloat 16s ease-in-out infinite alternate}
@keyframes entFloat{from{transform:translate3d(-2%,1.5%,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.07)}}
.ent-eyebrow{font-family:var(--font);font-size:22px;font-weight:800;letter-spacing:-.01em;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.ent-band h3{font-size:18px;line-height:1.4;margin:0 0 8px;color:#fff;letter-spacing:-.01em}
.ent-band .ent-l p{margin:0 0 18px;color:#B9C2D8;font-size:14.5px;line-height:1.8;max-width:560px}
.ent-chips{display:flex;flex-wrap:wrap;gap:8px}
.ent-chips span{font-size:12.5px;padding:7px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#DDE4F5;background:rgba(255,255,255,.05);backdrop-filter:blur(2px)}
.ent-r{display:grid;gap:5px;justify-items:end;text-align:right}
.ent-price{font-family:var(--font-num);font-size:31px;font-weight:800;color:#fff;letter-spacing:-.01em}
.ent-price small{font-size:17px;font-weight:700}
.ent-unit{color:#8FA0C4;font-size:13px;margin-bottom:10px}
@media(max-width:780px){.ent-band{grid-template-columns:1fr;gap:24px;padding:30px 24px}.ent-r{justify-items:start;text-align:left}}
@media(prefers-reduced-motion:reduce){.ent-glow{animation:none}}

/* ===== popular chip ===== */
.biz-g{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.pop-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--gradient);border-radius:999px;padding:5px 12px 5px 10px;vertical-align:5px;margin-left:8px;box-shadow:0 6px 16px rgba(30,80,255,.3)}
.pop-chip .pc-ic{font-size:11px;transform:translateY(-.5px)}

/* ===== services bento (v20260714c) ===== */
.bx-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:12px}
.bx{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 20px 17px;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
.bx:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(14,17,22,.1)}
.bx-tag{position:absolute;top:15px;right:15px;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-num);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:99px;padding:6px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(14,17,22,.08);z-index:3}
.bx-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gradient)}
.bx:hover .bx-tag{color:var(--blue);border-color:rgba(30,80,255,.3)}
.bx-tag-st{position:static;display:inline-flex;margin-bottom:11px;box-shadow:none}
.bx h3{font-size:17.5px;letter-spacing:-.01em;margin:12px 0 5px}
.bx h3 small{font-size:12px;color:var(--ink-soft);font-weight:600}
.bx p{margin:0;font-size:13px;line-height:1.68;color:var(--ink-soft)}
.bx-design{grid-column:span 4;grid-row:span 2;background:linear-gradient(150deg,#F8F6F1,#fff);display:flex;flex-direction:column}
.bx-design h3,.bx-mobile h3{margin-top:auto;padding-top:12px}
.bx-mobile{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.bx-seo,.bx-booking,.bx-gallery{grid-column:span 2;display:flex;flex-direction:column}
.bx-seo h3,.bx-booking h3,.bx-gallery h3{margin-top:auto;padding-top:12px}
.bx-line{grid-column:span 6;display:grid;grid-template-columns:minmax(250px,340px) 1fr;gap:30px;align-items:center}
/* browser mockup */
.brw{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 38px rgba(14,17,22,.08);overflow:hidden;margin-top:18px}
.brw-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;border-bottom:1px solid var(--line);background:#FBFAF7}
.brw-bar>span{width:9px;height:9px;border-radius:50%}
.brw-bar>span:nth-child(1){background:#FF5F57}.brw-bar>span:nth-child(2){background:#FEBC2E}.brw-bar>span:nth-child(3){background:#28C840}
.brw-url{flex:0 1 230px;margin-left:10px;font-style:normal;font-family:var(--font-num);font-size:10px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px 12px;white-space:nowrap;overflow:hidden}
.brw-body{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;padding:16px;align-items:center}
.brw-lines .l{height:10px;border-radius:6px;background:#EDEBE4;margin-bottom:9px}
.brw-lines .l-h{height:18px;width:82%;background:linear-gradient(90deg,#1E50FF,#7E63FF,#FF5A2C,#1E50FF);background-size:250% 100%;animation:brwShift 6s linear infinite}
.brw-lines .l-a{width:94%}.brw-lines .l-b{width:58%}
.brw-btn{width:92px;height:24px;border-radius:99px;background:var(--ink);margin-top:8px}
.brw-blob{width:min(100%,140px);aspect-ratio:1;justify-self:center;background:var(--gradient);opacity:.92;animation:bnMorph 9s ease-in-out infinite}
.brw-cards{grid-column:1/-1;display:flex;gap:10px}
.brw-cards span{flex:1;height:46px;border-radius:10px;background:#F4F2EC;border:1px solid var(--line)}
@keyframes brwShift{to{background-position:250% 0}}
@keyframes bnMorph{0%,100%{border-radius:58% 42% 55% 45%/52% 55% 45% 48%}33%{border-radius:45% 55% 40% 60%/60% 42% 58% 40%}66%{border-radius:60% 40% 58% 42%/42% 60% 40% 58%}}
/* phone */
.phm{width:240px;align-self:center;margin:22px auto 8px;border:7px solid var(--ink);border-radius:44px;padding:6px;background:#fff;position:relative;box-shadow:0 24px 54px rgba(14,17,22,.16);animation:phFloat 6s ease-in-out infinite}
.pm-nav{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 11px}
.pm-burger{font-size:11px;color:var(--ink-soft)}
.pm-logo{font-family:Georgia,'Times New Roman',serif;letter-spacing:.24em;font-size:10.5px;font-weight:600;color:var(--ink)}
.pm-cta{background:var(--ink);color:#fff;border-radius:99px;padding:3px 10px;font-size:8.5px;font-weight:700}
.pm-hero{height:172px;border-radius:16px;background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.pm-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,30,40,.6),transparent 62%)}
.pm-hero span{position:relative;color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:14px;line-height:1.35;padding:12px 13px;text-shadow:0 1px 10px rgba(10,25,35,.4)}
.phm::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:52px;height:6px;border-radius:99px;background:var(--ink);z-index:2}
.phm .pl{height:9px;border-radius:5px;background:#EFEDE7;margin:9px 0}
.phm .pl-t{height:12px;width:76%;background:#DCD9CF}
.phm .plc{display:flex;gap:8px;margin-top:12px}
.phm .plc span{flex:1;height:48px;border-radius:10px;background:#F4F2EC;border:1px solid var(--line)}
.phm .pl.w60{width:60%}
.phm .pl-img{height:112px;border-radius:11px;background:url('assets/cover-beauty-400.webp') center/cover no-repeat,linear-gradient(135deg,#1E50FF22,#FF5A2C22)}
.phm .pl-btn{width:64%;height:18px;border-radius:99px;background:var(--blue);margin-top:12px}
@keyframes phFloat{50%{transform:translateY(-7px)}}
/* serp */
.serp{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;margin-top:18px}
.serp-bar{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:11.5px;color:var(--ink);margin-bottom:12px}
.serp-g{font-family:var(--font-num);font-weight:800;font-size:13px;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.serp-res{position:relative;padding:11px 12px;border-radius:11px;background:var(--blue-soft)}
.serp-res .u{height:7px;width:42%;border-radius:4px;background:#79A98A}
.serp-res .t{height:11px;width:76%;border-radius:6px;background:var(--blue);margin:7px 0}
.serp-res .d{height:7px;width:92%;border-radius:4px;background:#D9DFF2}
.serp-badge{position:absolute;top:-11px;right:10px;background:var(--gradient);color:#fff;font-family:var(--font-num);font-weight:700;font-size:10.5px;padding:4px 10px;border-radius:99px;box-shadow:0 6px 16px rgba(30,80,255,.35);animation:badgePulse 2.6s ease-in-out infinite}
.serp-res2{background:transparent;opacity:.4;padding-bottom:2px}
.serp-res2 .t{width:58%;background:#C9C6BD}
@keyframes badgePulse{50%{transform:translateY(-3px)}}
/* booking */
.bkm{border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:18px}
.bkm-head{font-family:var(--font-num);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.bkm-slots{display:flex;gap:8px}
.bkm-slots span{flex:1;text-align:center;font-family:var(--font-num);font-size:11px;padding:8px 0;border:1px solid var(--line);border-radius:9px;color:var(--ink-soft)}
.bkm-slots span.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(30,80,255,.3);animation:badgePulse 2.6s ease-in-out infinite}
.bkm-ok{margin-top:11px;font-size:11.5px;font-weight:700;color:#0B8A3E}
/* gallery */
.gal{position:relative;height:96px;margin:22px 0 2px}
.gal img{position:absolute;width:88px;height:88px;object-fit:cover;border-radius:13px;border:3px solid #fff;box-shadow:0 10px 24px rgba(14,17,22,.16);transition:transform .35s ease}
.gal img:nth-child(1){left:2%;top:8px;transform:rotate(-7deg)}
.gal img:nth-child(2){left:50%;top:0;transform:translateX(-50%);z-index:2}
.gal img:nth-child(3){right:2%;top:10px;transform:rotate(7deg)}
.bx-gallery:hover .gal img:nth-child(1){transform:rotate(-11deg) translateX(-6px)}
.bx-gallery:hover .gal img:nth-child(2){transform:translateX(-50%) translateY(-5px)}
.bx-gallery:hover .gal img:nth-child(3){transform:rotate(11deg) translateX(6px)}
.gal-stars{color:#FFB01F;font-size:13.5px;letter-spacing:2px;margin-top:2px}
.gal-stars span{color:var(--ink-soft);font-size:12px;letter-spacing:0;margin-left:4px}
/* line chat */
.bx-line .chat{display:flex;flex-direction:column;gap:9px}
.bub{position:relative;padding:10px 14px;border-radius:15px;font-size:12.5px;line-height:1.6;max-width:300px}
.bub .who{display:block;font-family:var(--font-num);font-size:9.5px;letter-spacing:.06em;opacity:.65;margin-bottom:3px}
.bub.in{background:#F2F0EA;border-top-left-radius:5px;align-self:flex-start}
.bub.lm{background:#06C755;color:#fff;border-top-right-radius:5px;align-self:flex-end;box-shadow:0 10px 24px rgba(6,199,85,.28);animation:badgePulse 3.2s ease-in-out infinite}
@media(max-width:980px){.bx-grid{grid-template-columns:1fr 1fr}.bx-design{grid-column:span 2;grid-row:auto}.bx-mobile{grid-column:span 2;grid-row:auto}.bx-seo,.bx-booking{grid-column:span 1}.bx-gallery,.bx-line{grid-column:span 2}.bx-line{grid-template-columns:1fr;gap:18px}}
@media(max-width:600px){.bx-grid{grid-template-columns:1fr}.bx-design,.bx-mobile,.bx-seo,.bx-booking,.bx-gallery,.bx-line{grid-column:span 1}.brw-body{grid-template-columns:1fr}.brw-blob{max-width:110px}}
@media(prefers-reduced-motion:reduce){.brw-lines .l-h,.brw-blob,.phm,.serp-badge,.bkm-slots span.on,.bub.lm{animation:none}}

/* ===== homepage section rhythm (v20260714g) ===== */
.manifesto{padding:100px 0}
@media(max-width:680px){.manifesto{padding:70px 0}}

/* ===== bento real-content mockups (v20260714j) ===== */
.brw-copy{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.m-eb{font-family:var(--font-num);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.m-h{font-size:22px;line-height:1.32;letter-spacing:-.01em;color:var(--ink);font-weight:800}
.m-p{font-size:11.5px;color:var(--ink-soft);line-height:1.65}
.m-btn{background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:8px 15px;border-radius:99px;margin-top:3px}
.brw-hero{position:relative;display:grid;place-items:center}
.brw-hero .brw-blob{position:absolute;width:78%;max-width:150px;right:-4%;top:-8%;z-index:0}
.brw-img{width:88%;aspect-ratio:4/3.1;object-fit:cover;border-radius:14px;position:relative;z-index:1;box-shadow:0 12px 28px rgba(14,17,22,.18)}
.brw-cards span{position:relative;height:58px;background-size:cover;background-position:center;border:0;overflow:hidden}
.brw-cards span::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,13,22,.5),transparent 62%)}
.brw-cards span i{position:absolute;left:9px;bottom:7px;z-index:1;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#fff;font-family:var(--font-num);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.pm-t{display:block;font-size:15px;font-weight:800;color:var(--ink);margin:11px 2px 4px;letter-spacing:-.01em}
.pm-p{display:block;font-size:11px;color:var(--ink-soft);line-height:1.6;margin:0 2px}
.pm-btn{display:block;text-align:center;background:#06C755;color:#fff;font-size:12px;font-weight:700;border-radius:99px;padding:8px 0;margin-top:11px}
.phm .plc span{background-size:cover;background-position:center;border:0;height:56px}
.s-url{display:block;font-family:var(--font-num);font-size:9.5px;color:#1B7F3B}
.s-title{display:block;font-size:12.5px;font-weight:700;color:var(--blue);line-height:1.45;margin:3px 0 2px}
.s-desc{display:block;font-size:10px;color:var(--ink-soft);line-height:1.55}
.serp-res2 .s-title{color:#8F8F88;font-weight:600}

/* ===== real warinspa hero in design card (v20260714n) ===== */
.brw-real{position:relative;overflow:hidden;aspect-ratio:16/8.4;background:linear-gradient(180deg,#B9C3C9 0%,#93A7B1 45%,#5E7580 100%)}
.brw-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.w-nav{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:12px 16px;z-index:2;color:#fff}
.w-logo{font-family:Georgia,'Times New Roman',serif;letter-spacing:.28em;font-size:11px;font-weight:600}
.w-menu{margin-left:auto;font-size:7.5px;letter-spacing:.16em;opacity:.85;font-weight:600;white-space:nowrap}
.w-book{font-size:8px;letter-spacing:.14em;font-weight:700;border:1px solid rgba(255,255,255,.65);border-radius:99px;padding:4px 11px;background:rgba(255,255,255,.14)}
.w-copy{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;text-shadow:0 1px 14px rgba(20,40,50,.3)}
.w-h1{font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.32;font-weight:500}
.w-line{display:block;width:34px;height:1px;background:rgba(255,255,255,.75);margin:9px 0}
.w-sub{font-size:10.5px;opacity:.95}
.brw-cards-pad{padding:12px 14px 14px}
@media(max-width:600px){.w-menu,.w-book{display:none}.w-h1{font-size:16px}}

/* ===== live site inside phone (v20260714p) ===== */
.phm .pm-screen{position:relative;width:100%;aspect-ratio:390/800;overflow:hidden;border-radius:26px;background:linear-gradient(180deg,#B9C3C9,#5E7580)}
.phm .pm-frame{position:absolute;left:0;top:0;width:390px;height:800px;border:0;transform:scale(.5487);transform-origin:0 0;pointer-events:none}


/* ===== why-website bento (v20260714q) ===== */
.wb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.wb{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
.wb:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(14,17,22,.1)}
.wb-v{margin-bottom:14px}
.wb-t{margin-top:auto}
.wb-n{font-family:var(--font-num);font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--blue);opacity:.85}
.wb h3{font-size:17px;letter-spacing:-.01em;margin:5px 0 6px}
.wb p{margin:0;font-size:13px;line-height:1.7;color:var(--ink-soft)}
/* layout: 3 wide-ish + 6 normal */
.wb-a{grid-column:span 3}.wb-b{grid-column:span 3}
.wb-c{grid-column:span 2}.wb-d{grid-column:span 2}.wb-e{grid-column:span 2}
.wb-f{grid-column:span 3}.wb-g{grid-column:span 3}
.wb-h{grid-column:span 3}.wb-i{grid-column:span 3}
/* 01 serp */
.wb-serp{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fff}
.wb-serp-bar{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:12px;color:var(--ink);margin-bottom:11px}
.wb-serp-bar b{font-family:var(--font-num);background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:13px}
.wb-serp-hit{position:relative;background:var(--blue-soft);border-radius:11px;padding:11px 12px}
.wb-serp-hit i{display:block;font-style:normal;font-family:var(--font-num);font-size:9.5px;color:#1B7F3B}
.wb-serp-hit b{display:block;font-size:12.5px;color:var(--blue);margin-top:3px}
.wb-rank{position:absolute;top:-10px;right:9px;background:var(--gradient);color:#fff;font-family:var(--font-num);font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;box-shadow:0 6px 14px rgba(30,80,255,.32);animation:wbPulse 2.6s ease-in-out infinite}
@keyframes wbPulse{50%{transform:translateY(-3px)}}
.wb-serp-dim{height:8px;width:70%;background:#EDEBE4;border-radius:4px;margin-top:11px}
.wb-serp-dim.s{width:46%;margin-top:6px}
/* 02 trust */
.wb-trust{position:relative;border-radius:14px;overflow:hidden;height:104px}
.wb-trust img{width:100%;height:100%;object-fit:cover}
.wb-badge{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:800;padding:5px 11px;border-radius:99px;box-shadow:0 6px 16px rgba(14,17,22,.18)}
.wb-badge::before{content:"✓ ";color:#0B8A3E}
.wb-stars{margin-top:9px;color:#FFB01F;font-size:13px;letter-spacing:2px}
.wb-stars span{color:var(--ink-soft);font-size:11.5px;letter-spacing:0;margin-left:6px}
/* 03 late night */
.wb-clock{border:1px solid var(--line);border-radius:13px;padding:12px}
.wb-time{font-family:var(--font-num);font-size:11px;font-weight:700;color:var(--ink-soft);letter-spacing:.1em;margin-bottom:9px}
.wb-chat{display:flex;flex-direction:column;gap:7px}
.wb-in,.wb-out{font-size:11.5px;line-height:1.55;padding:8px 11px;border-radius:12px;max-width:92%}
.wb-in{background:#F2F0EA;border-top-left-radius:4px;align-self:flex-start}
.wb-out{background:var(--blue);color:#fff;border-top-right-radius:4px;align-self:flex-end}
/* 04 ownership */
.wb-own{display:flex;flex-direction:column;gap:7px}
.wb-own-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:12px;color:var(--ink-soft)}
.wb-own-row .x{color:#E0432C}.wb-own-row .ok{color:#0B8A3E}
.wb-own-row.on{border-color:rgba(30,80,255,.3);background:var(--blue-soft);color:var(--ink);font-weight:700}
/* 05 funnel */
.wb-funnel{text-align:center}
.wb-fn{border-radius:11px;padding:9px 10px;font-size:11.5px;line-height:1.4}
.wb-fn.f1{background:#F2F0EA;color:var(--ink-soft)}
.wb-fn.f2{background:var(--blue-soft);color:var(--blue);font-weight:700;border:1px solid rgba(30,80,255,.22)}
.wb-fn.f3{background:#E7F5EC;color:#0B7036;font-weight:800}
.wb-arrow{font-size:12px;color:var(--ink-soft);line-height:1.5;opacity:.6}
/* 06 chart */
.wb-chart{border:1px solid var(--line);border-radius:13px;padding:12px}
.wb-bars{display:flex;align-items:flex-end;gap:6px;height:96px}
.wb-bars i{flex:1;border-radius:5px 5px 0 0;height:var(--h);animation:wbGrow 1.1s var(--ease) both}
.wb-bars i.ad{background:#DCD9CF}
.wb-bars i.seo{background:linear-gradient(180deg,#1E50FF,#7E63FF)}
.wb-bars i:nth-child(2){animation-delay:.06s}.wb-bars i:nth-child(3){animation-delay:.12s}.wb-bars i:nth-child(4){animation-delay:.18s}
.wb-bars i:nth-child(5){animation-delay:.24s}.wb-bars i:nth-child(6){animation-delay:.3s}.wb-bars i:nth-child(7){animation-delay:.36s}.wb-bars i:nth-child(8){animation-delay:.42s}
@keyframes wbGrow{from{height:6px;opacity:.2}}
.wb-legend{display:flex;gap:14px;margin-top:10px;font-size:11px;color:var(--ink-soft);flex-wrap:wrap}
.wb-legend span{display:flex;align-items:center;gap:6px}
.wb-legend span::before{content:"";width:9px;height:9px;border-radius:3px;background:#DCD9CF}
.wb-legend .l-seo::before{background:linear-gradient(180deg,#1E50FF,#7E63FF)}
/* 07 faq */
.wb-faq{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wb-q{background:#F2F0EA;color:var(--ink-soft);font-size:12px;padding:8px 13px;border-radius:99px}
.wb-auto{background:#E7F5EC;color:#0B7036;font-size:12px;font-weight:800;padding:8px 13px;border-radius:99px}
/* 08 ai */
.wb-ai{border:1px solid var(--line);border-radius:13px;padding:12px;background:linear-gradient(160deg,#F8F6F1,#fff)}
.wb-ai-q{font-size:12px;color:var(--ink-soft);margin-bottom:9px}
.wb-ai-a{position:relative;font-size:12.5px;line-height:1.6;color:var(--ink);font-weight:600;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px 10px 30px}
.wb-ai-dot{position:absolute;left:11px;top:12px;width:11px;height:11px;border-radius:50%;background:var(--gradient);animation:wbBlink 2.4s ease-in-out infinite}
@keyframes wbBlink{50%{transform:scale(.7);opacity:.5}}
/* 09 brand value */
.wb-brand{position:relative;border-radius:14px;overflow:hidden;height:118px}
.wb-brand img{width:100%;height:100%;object-fit:cover}
.wb-price{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.95);border-radius:12px;padding:8px 13px;text-align:right;box-shadow:0 8px 20px rgba(14,17,22,.18)}
.wb-price small{display:block;font-size:10px;color:var(--ink-soft);text-decoration:line-through}
.wb-price b{font-family:var(--font-num);font-size:13px;color:var(--blue)}
@media(max-width:980px){.wb-grid{grid-template-columns:1fr 1fr}.wb-a,.wb-b,.wb-f,.wb-g,.wb-h,.wb-i{grid-column:span 2}.wb-c,.wb-d,.wb-e{grid-column:span 1}}
@media(max-width:600px){.wb-grid{grid-template-columns:1fr}.wb-a,.wb-b,.wb-c,.wb-d,.wb-e,.wb-f,.wb-g,.wb-h,.wb-i{grid-column:span 1}}
@media(prefers-reduced-motion:reduce){.wb-rank,.wb-ai-dot,.wb-bars i{animation:none}}

/* ===== why-website: one visual + clean list (v20260714v) ===== */
.ws-wrap{display:grid;grid-template-columns:minmax(320px,470px) 1fr;gap:54px;align-items:start}
.ws-visual{position:sticky;top:110px}
.ws-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1341/1173;box-shadow:0 30px 70px -22px rgba(14,17,22,.4);animation:wsFloat 8s ease-in-out infinite}
.ws-photo img{width:100%;height:100%;object-fit:cover}
.ws-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,13,22,.72),rgba(9,13,22,.05) 55%)}
.ws-cap{position:absolute;left:20px;bottom:18px;right:20px;color:#fff;z-index:2}
.ws-cap b{display:block;font-size:15px;line-height:1.4;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.ws-cap span{display:block;font-size:12.5px;opacity:.88;margin-top:5px;line-height:1.55;text-shadow:0 2px 12px rgba(0,0,0,.45)}
/* laptop mockup */
.ws-mac{position:relative;z-index:3;margin:-84px 0 0;width:100%;border-radius:14px;background:#0E1116;padding:0 0 0;box-shadow:0 30px 64px -18px rgba(14,17,22,.5);overflow:hidden;animation:wsFloat 7s ease-in-out infinite}
.ws-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#1A1F27}
.ws-bar span{width:9px;height:9px;border-radius:50%;background:#3A424E}
.ws-bar span:nth-child(1){background:#FF5F57}.ws-bar span:nth-child(2){background:#FEBC2E}.ws-bar span:nth-child(3){background:#28C840}
.ws-bar i{flex:1;margin-left:10px;font-style:normal;font-family:var(--font-num);font-size:10px;color:#8A93A2;background:#0E1116;border-radius:99px;padding:3px 12px;text-align:center}
.ws-screen{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(180deg,#B9C3C9,#5E7580)}
.ws-frame{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none}
.ws-foot{height:12px;background:linear-gradient(180deg,#20262F,#0E1116);border-top:1px solid rgba(255,255,255,.06)}
@keyframes wsFloat{50%{transform:translateY(-9px)}}
/* list */
.ws-list{list-style:none;margin:0;padding:0}
.ws-list li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:20px 18px 20px 14px;border-bottom:1px solid var(--line);align-items:start;border-radius:14px;transition:background .3s ease,transform .3s ease}
.ws-list li:last-child{border-bottom:0}
.ws-n{font-family:var(--font-num);font-size:22px;font-weight:800;line-height:1;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--blue)}
.ws-list h3{font-size:18px;letter-spacing:-.01em;margin:0 0 5px;transition:color .3s}
.ws-list p{margin:0;font-size:14px;line-height:1.75;color:var(--ink-soft)}
@media(hover:hover){
  .ws-list li:hover{background:var(--blue-soft);transform:translateX(5px);border-bottom-color:transparent}
  .ws-list li:hover h3{color:var(--blue)}
}
@media(max-width:980px){
  .ws-wrap{grid-template-columns:1fr;gap:34px}
  .ws-visual{position:static;max-width:470px;margin:0 auto}
  .ws-list li{grid-template-columns:44px 1fr;gap:12px;padding:17px 12px}
  .ws-n{font-size:19px}
}
@media(max-width:520px){.ws-mac{margin-top:-52px}}
@media(prefers-reduced-motion:reduce){.ws-mac{animation:none}}

/* ===== upgrade / audit section (v20260714z) ===== */
.upsec{padding:100px 0}
.up-card{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;background:#0E1116;color:#fff;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:46px 50px}
.up-glow{position:absolute;inset:-45%;z-index:-1;background:radial-gradient(460px 340px at 8% 120%,rgba(30,80,255,.5),transparent 62%),radial-gradient(430px 330px at 96% -20%,rgba(255,90,44,.42),transparent 60%);filter:blur(8px);animation:entFloat 17s ease-in-out infinite alternate}
.up-eyebrow{font-family:var(--font-num);font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.up-card h2{font-size:clamp(23px,3vw,31px);line-height:1.28;margin:0 0 12px;color:#fff;letter-spacing:-.01em}
.up-l p{margin:0 0 20px;color:#B9C2D8;font-size:15px;line-height:1.8;max-width:560px}
.up-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.up-chips span{font-size:12.5px;padding:7px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#DDE4F5;background:rgba(255,255,255,.05)}
.up-r{display:grid;justify-items:center;gap:12px}
.up-gauge{position:relative;width:150px;height:150px}
.up-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.up-gauge circle{fill:none;stroke-width:9;stroke-linecap:round}
.up-gauge .g-bg{stroke:rgba(255,255,255,.1)}
.up-gauge .g-fg{stroke:url(#upg);stroke:#28C840;stroke-dasharray:327;stroke-dashoffset:327;animation:upFill 1.8s var(--ease) forwards}
@keyframes upFill{to{stroke-dashoffset:6}}
.up-gnum{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-family:var(--font-num)}
.up-gnum b{font-size:38px;font-weight:800;color:#fff;line-height:1}
.up-gnum small{font-size:12px;color:#8FA0C4}
.up-tag{font-size:12px;color:#8FA0C4;letter-spacing:.02em}
@media(max-width:820px){.up-card{grid-template-columns:1fr;gap:28px;padding:34px 26px}.up-r{justify-items:start}}
@media(prefers-reduced-motion:reduce){.up-glow{animation:none}.up-gauge .g-fg{animation:none;stroke-dashoffset:6}}