/* ===== Rubbrief home hub + agency page ===== */
.hub{--hub-green:#3DFF8C;--hub-purple:#7B14E7;--hub-card:#0C0C11;--hub-line:rgba(255,255,255,0.10);--hub-dim:#B9BCC8;--hub-mute:#A3A8B5;color:var(--text-white,#F2F2F5);}
.hub-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.hub-sec{padding-bottom:96px;}
.hub-hero{padding:96px 24px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:1120px;margin:0 auto;}
.hub-kicker{font-size:13px;font-weight:700;color:var(--hub-green);letter-spacing:2px;}
.hub-hero h1{margin:0;font-size:clamp(34px,5.6vw,66px);line-height:1.2;font-weight:800;letter-spacing:-1px;color:var(--text-white,#F2F2F5);}
.hub-hero p{margin:0;max-width:580px;font-size:18px;line-height:1.7;color:var(--hub-dim);}
.hub-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px;}
.hub-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:16px;padding:14px 28px;border-radius:999px;transition:transform .2s,background .2s,border-color .2s;cursor:pointer;font-family:inherit;}
.hub-btn:hover{transform:translateY(-2px);}
.hub-btn.pri{color:#fff;background:var(--hub-purple);border:1px solid var(--hub-purple);}
.hub-btn.pri:hover{background:#6A0FCC;color:#fff;}
.hub-btn.out{color:var(--text-white,#F2F2F5);border:1px solid rgba(255,255,255,0.22);background:transparent;font-weight:600;}
.hub-btn.out:hover{border-color:rgba(255,255,255,0.45);color:var(--text-white,#fff);}
.hub-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:24px;}
.hub-head h2{margin:0;font-size:28px;font-weight:800;color:var(--text-white,#F2F2F5);}
.hub-head a{font-size:15px;font-weight:600;text-decoration:none;color:#C4B5FD;}
.hub-sub{margin:-16px 0 24px;font-size:15px;color:var(--hub-mute);}
.hub-pill{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;color:#0B0B0F;background:var(--hub-green);}
.hub-pill.ghost{background:transparent;color:#E9E3FF;border:1px solid rgba(196,181,253,0.5);}
/* two paths */
.hub-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
.hub-path{text-decoration:none;color:inherit;border-radius:24px;padding:34px;display:flex;flex-direction:column;gap:14px;min-height:250px;background:var(--hub-card);border:1px solid var(--hub-line);transition:transform .25s,border-color .25s;}
.hub-path:hover{transform:translateY(-4px);border-color:rgba(167,139,250,0.55);}
.hub-path.main{background:linear-gradient(160deg,#22103D,#0E0B16);border-color:rgba(123,20,231,0.55);}
.hub-path h2{margin:0;font-size:30px;font-weight:800;line-height:1.3;color:#F2F2F5;}
.hub-path p{margin:0;font-size:16px;line-height:1.7;color:var(--hub-dim);flex:1;}
.hub-path b{font-size:16px;color:#fff;}
/* works */
.hub-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;}
.hub-work{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;}
.hub-work-thumb{aspect-ratio:9/16;border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(160deg,#1C1A26,#0E0E13);border:1px solid rgba(255,255,255,0.09);display:flex;align-items:center;justify-content:center;transition:transform .25s,border-color .25s;}
.hub-work:hover .hub-work-thumb{transform:translateY(-3px);border-color:rgba(61,255,140,0.5);}
.hub-work-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hub-work-thumb svg{position:relative;z-index:1;}
.hub-work-cat{position:absolute;top:10px;left:10px;z-index:2;font-size:11px;font-weight:700;color:#0B0B0F;background:var(--hub-green);padding:3px 9px;border-radius:999px;}
.hub-work-title{font-size:14px;font-weight:600;color:var(--text-white,#E4E5EB);}
.hub-chips{display:flex;flex-wrap:wrap;gap:8px;}
.hub-chip{font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:8px 16px;border-radius:999px;cursor:pointer;background:transparent;color:#C9CBD6;border:1px solid rgba(255,255,255,0.18);}
.hub-chip.on{background:#F2F2F5;color:#0B0B0F;border-color:#F2F2F5;}
/* products */
.hub-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.hub-prod{text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;background:var(--hub-card);border:1px solid var(--hub-line);display:flex;flex-direction:column;transition:transform .25s,border-color .25s;}
.hub-prod:hover{transform:translateY(-3px);border-color:rgba(167,139,250,0.5);}
.hub-prod-img{aspect-ratio:16/10;position:relative;background:linear-gradient(140deg,#2A1650,#121018);}
.hub-prod-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hub-prod-img span{position:absolute;left:12px;bottom:12px;font-size:12px;font-weight:700;color:#E9E3FF;background:rgba(0,0,0,0.55);padding:4px 10px;border-radius:999px;}
.hub-prod-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;}
.hub-prod-body b{font-size:16px;color:var(--text-white,#F2F2F5);}
.hub-prod-body em{font-style:normal;font-size:15px;font-weight:700;color:var(--hub-green);}
/* packages */
.hub-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.hub-pack{border:1px solid var(--hub-line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px;background:var(--hub-card);position:relative;}
.hub-pack.hot{border:2px solid var(--hub-purple);background:#120A1E;}
.hub-pack.hot .hub-pill{position:absolute;top:-13px;left:24px;}
.hub-pack h3{margin:0;font-size:20px;font-weight:800;color:#F2F2F5;}
.hub-pack p{margin:0;font-size:15px;line-height:1.7;color:var(--hub-mute);}
.hub-pack ul{margin:0;padding-left:18px;color:var(--hub-dim);font-size:15px;line-height:2;flex:1;}
.hub-pack .hub-btn{justify-content:center;font-size:15px;padding:12px 18px;}
/* steps */
.hub-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.hub-steps li{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:16px;background:var(--hub-card);border:1px solid rgba(255,255,255,0.08);}
.hub-steps span{font-size:13px;font-weight:800;color:var(--hub-green);}
.hub-steps b{font-size:17px;color:#F2F2F5;}
.hub-steps small{font-size:14px;color:var(--hub-mute);line-height:1.6;}
/* board band + brief form */
.hub-band{border-radius:24px;padding:40px clamp(22px,5vw,48px);background:var(--hub-card);border:1px solid var(--hub-line);display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;}
.hub-band>div:first-child{flex:1 1 380px;display:flex;flex-direction:column;gap:10px;}
.hub-band h2{margin:0;font-size:28px;font-weight:800;line-height:1.3;color:#F2F2F5;}
.hub-band p{margin:0;font-size:16px;line-height:1.7;color:var(--hub-dim);}
.hub-pill.free{background:transparent;color:#6EE7B7;border:1px solid rgba(110,231,183,0.45);}
.hub-form-box{max-width:760px;margin:0 auto;border-radius:24px;padding:36px clamp(20px,5vw,44px);background:linear-gradient(160deg,#1A0F2E,#0C0C11);border:1px solid rgba(123,20,231,0.45);display:flex;flex-direction:column;gap:20px;}
.hub-form-box h2{margin:0 0 6px;font-size:30px;font-weight:800;color:#F2F2F5;}
.hub-form-box>div>p{margin:0;color:var(--hub-dim);font-size:15px;}
.hub-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.hub-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#C9CBD6;}
.hub-form .full{grid-column:1/-1;}
.hub-form input,.hub-form select,.hub-form textarea{font:inherit;font-size:16px;font-weight:400;color:#F2F2F5;background:#08080B;border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:12px 14px;outline:none;color-scheme:dark;}
.hub-form input:focus,.hub-form select:focus,.hub-form textarea:focus{border-color:#A78BFA;}
.hub-form textarea{resize:vertical;}
.hub-form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hub-form-msg{font-size:14px;color:var(--hub-dim);}
.hub-form-msg.ok{color:#6EE7B7;}.hub-form-msg.err{color:#FCA5A5;}
.hub-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
@media (max-width:640px){.hub-hero{padding:64px 18px 40px;}.hub-sec{padding-bottom:64px;}.hub-path{padding:26px;min-height:0;}.hub-head h2{font-size:24px;}.hub-works{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* light theme */
[data-theme="light"] .hub{--hub-card:#FFFFFF;--hub-line:#E2E8F0;--hub-dim:#475569;--hub-mute:#64748B;}
[data-theme="light"] .hub-kicker,[data-theme="light"] .hub-steps span,[data-theme="light"] .hub-prod-body em{color:#059669;}
[data-theme="light"] .hub-btn.out{color:#1E293B;border-color:#CBD5E1;}
[data-theme="light"] .hub-path:not(.main) h2,[data-theme="light"] .hub-path:not(.main) b,[data-theme="light"] .hub-pack h3,[data-theme="light"] .hub-steps b,[data-theme="light"] .hub-band h2{color:#1E293B;}
[data-theme="light"] .hub-pack.hot{background:#F5F0FF;}
[data-theme="light"] .hub-pill.ghost{color:#6D28D9;border-color:#C4B5FD;}
[data-theme="light"] .hub-pill.free{color:#047857;border-color:#6EE7B7;}
[data-theme="light"] .hub-chip{color:#334155;border-color:#CBD5E1;}
[data-theme="light"] .hub-chip.on{background:#1E293B;color:#fff;border-color:#1E293B;}
[data-theme="light"] .hub-head a{color:#6D28D9;}
[data-theme="light"] .hub-work-thumb{background:linear-gradient(160deg,#E9E5F5,#F8FAFC);border-color:#E2E8F0;}
[data-theme="light"] .hub-work-thumb svg circle{fill:rgba(124,58,237,0.15);stroke:rgba(124,58,237,0.35);}
[data-theme="light"] .hub-work-thumb svg path{fill:#7C3AED;}

/* ===== Agency page motion ===== */
.ag-hero{position:relative;overflow:visible;}
.ag-hero>*:not(.ag-float){position:relative;z-index:1;}
.ag-float{position:absolute;inset:0;pointer-events:none;z-index:0;}
.ag-phone{position:absolute;width:118px;aspect-ratio:9/16;border-radius:20px;border:1px solid rgba(255,255,255,0.14);background:linear-gradient(160deg,#2A1650 0%,#130E22 55%,#0B2A1C 100%);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 40px rgba(123,20,231,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:agFloat 7s ease-in-out infinite;}
.ag-phone svg{width:40px;height:40px;}
.ag-phone span{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34px;height:4px;border-radius:3px;background:rgba(255,255,255,.18);}
.ag-phone i{position:absolute;left:12px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);}
.ag-phone i:nth-of-type(1){bottom:26px;width:62%;}.ag-phone i:nth-of-type(2){bottom:15px;width:40%;background:rgba(61,255,140,.55);}
.ag-phone::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 62%);transform:translateX(-120%);animation:agSweep 5s ease-in-out infinite;}
.ag-p1{left:4%;top:16%;transform:rotate(-12deg);animation-delay:0s;}
.ag-p2{left:12%;top:58%;width:96px;transform:rotate(8deg);animation-delay:-2s;opacity:.75;}
.ag-p3{right:5%;top:12%;transform:rotate(10deg);animation-delay:-4s;}
.ag-p4{right:13%;top:56%;width:96px;transform:rotate(-7deg);animation-delay:-1s;opacity:.75;}
.ag-p2::after,.ag-p4::after{animation-delay:-2.5s;}
@keyframes agFloat{0%,100%{translate:0 0;}50%{translate:0 -18px;}}
@keyframes agSweep{0%,55%{transform:translateX(-120%);}85%,100%{transform:translateX(120%);}}
.ag-shine{background:linear-gradient(90deg,#A78BFA 0%,#3DFF8C 35%,#F472B6 65%,#A78BFA 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:agShine 6s linear infinite;}
@keyframes agShine{to{background-position:-220% 0;}}
.ag-glow{position:relative;overflow:hidden;box-shadow:0 10px 30px -8px rgba(123,20,231,.8);}
.ag-glow::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:agBtn 3.2s ease-in-out infinite;}
@keyframes agBtn{0%,60%{left:-60%;}100%{left:130%;}}
/* cards follow the mouse light */
.hub-path,.hub-pack{position:relative;overflow:hidden;}
.hub-path::before,.hub-pack::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,.18),transparent 60%);}
.hub-path:hover::before,.hub-pack:hover::before{opacity:1;}
.hub-path>*,.hub-pack>*{position:relative;}
.hub-pack.hot{animation:agPulse 3s ease-in-out infinite;}
@keyframes agPulse{0%,100%{box-shadow:0 0 0 0 rgba(123,20,231,0);}50%{box-shadow:0 0 40px -6px rgba(123,20,231,.55);}}
.hub-pack.hot .hub-pill{position:absolute;}
/* ticker */
.ag-ticker{overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:18px 0;margin:0 0 80px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.ag-ticker-track{display:flex;align-items:center;gap:26px;width:max-content;animation:agTick 32s linear infinite;}
.ag-ticker-track span{font-size:22px;font-weight:800;white-space:nowrap;color:var(--text-white,#F2F2F5);}
.ag-ticker-track b{color:var(--hub-green);font-size:16px;}
@keyframes agTick{to{transform:translateX(-50%);}}
/* scroll reveal + steps */
.ag-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms);}
.ag-reveal.in{opacity:1;transform:none;}
.hub-steps li{transition:border-color .4s,transform .4s;}
.hub-steps li.in span{display:inline-block;animation:agPop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:var(--d,0ms);}
@keyframes agPop{from{transform:scale(.4);opacity:0;}to{transform:none;opacity:1;}}
.hub-steps li:hover{transform:translateY(-4px);border-color:rgba(61,255,140,.45);}
@media (max-width:900px){.ag-p2,.ag-p4{display:none;}.ag-phone{width:84px;}.ag-p1{left:-14px;top:6%;}.ag-p3{right:-14px;top:auto;bottom:4%;}}
@media (max-width:520px){.ag-float{opacity:.45;}.ag-ticker-track span{font-size:17px;}}
[data-theme="light"] .ag-ticker{border-color:#E2E8F0;}
@media (prefers-reduced-motion:reduce){.ag-phone,.ag-phone::after,.ag-shine,.ag-glow::after,.ag-ticker-track,.hub-pack.hot{animation:none!important;}.ag-reveal{opacity:1;transform:none;transition:none;}}
/* brief form: neon in dark, clean white in light */
.hub-form-box{position:relative;background:radial-gradient(120% 90% at 100% 0%,rgba(61,255,140,.10),transparent 55%),radial-gradient(110% 90% at 0% 100%,rgba(123,20,231,.28),transparent 60%),#0D0B14;border:1px solid rgba(167,139,250,.5);box-shadow:0 0 0 1px rgba(61,255,140,.08) inset,0 30px 80px -30px rgba(123,20,231,.65);}
.hub-form-box h2{background:linear-gradient(90deg,#fff 0%,#C4B5FD 60%,#3DFF8C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hub-form input:focus,.hub-form select:focus,.hub-form textarea:focus{border-color:#3DFF8C;box-shadow:0 0 0 3px rgba(61,255,140,.18);}
[data-theme="light"] .hub-form-box{background:radial-gradient(120% 90% at 100% 0%,rgba(16,185,129,.08),transparent 55%),radial-gradient(110% 90% at 0% 100%,rgba(124,58,237,.10),transparent 60%),#FFFFFF;border-color:#DDD6FE;box-shadow:0 24px 60px -30px rgba(124,58,237,.35);}
[data-theme="light"] .hub-form-box h2{background:linear-gradient(90deg,#1E1B4B 0%,#6D28D9 70%,#059669 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
[data-theme="light"] .hub-form-box>div>p{color:#475569;}
[data-theme="light"] .hub-form label{color:#334155;}
[data-theme="light"] .hub-form input,[data-theme="light"] .hub-form select,[data-theme="light"] .hub-form textarea{background:#F8FAFC;color:#0F172A;border-color:#CBD5E1;color-scheme:light;}
[data-theme="light"] .hub-form input::placeholder,[data-theme="light"] .hub-form textarea::placeholder{color:#94A3B8;}
[data-theme="light"] .hub-form input:focus,[data-theme="light"] .hub-form select:focus,[data-theme="light"] .hub-form textarea:focus{border-color:#7C3AED;box-shadow:0 0 0 3px rgba(124,58,237,.15);background:#fff;}
[data-theme="light"] .hub-form-msg.ok{color:#047857;}[data-theme="light"] .hub-form-msg.err{color:#B91C1C;}
/* keep the "ยอดนิยม" badge from being clipped */
.hub-pack{overflow:visible;}
.hub-path::before,.hub-pack::before{border-radius:inherit;}
.hub-pack.hot{margin-top:6px;}
.ag-line{background:#06C755;color:#fff;border:0;}
.ag-line:hover{background:#05B34C;}
#brief,#packs{scroll-margin-top:90px;}
/* ===== light mode polish for the agency page ===== */
[data-theme="light"] .ag-phone{background:linear-gradient(160deg,#FFFFFF 0%,#F3EEFF 55%,#E7FBF1 100%);border-color:#E4DDFB;box-shadow:0 24px 50px -22px rgba(91,33,182,.35),0 2px 6px rgba(15,23,42,.06);}
[data-theme="light"] .ag-phone span{background:#E2E8F0;}
[data-theme="light"] .ag-phone i{background:#DDD6FE;}
[data-theme="light"] .ag-phone i:nth-of-type(2){background:#34D399;}
[data-theme="light"] .ag-phone svg circle{fill:rgba(124,58,237,.12);stroke:rgba(124,58,237,.35);}
[data-theme="light"] .ag-phone svg path{fill:#7C3AED;}
[data-theme="light"] .ag-phone::after{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 48%,transparent 62%);}
[data-theme="light"] .ag-p2,[data-theme="light"] .ag-p4{opacity:.9;}
[data-theme="light"] .ag-shine{background-image:linear-gradient(90deg,#6D28D9 0%,#059669 35%,#DB2777 65%,#6D28D9 100%);}
[data-theme="light"] .hub-path.main{background:linear-gradient(150deg,#7C3AED 0%,#5B21B6 100%);border-color:#6D28D9;box-shadow:0 24px 50px -26px rgba(91,33,182,.6);}
[data-theme="light"] .hub-path.main h2,[data-theme="light"] .hub-path.main b{color:#fff;}
[data-theme="light"] .hub-path.main p{color:rgba(255,255,255,.86);}
[data-theme="light"] .hub-path.main .hub-pill{background:#3DFF8C;color:#0B0B0F;}
[data-theme="light"] .hub-path.main::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 60%);}
[data-theme="light"] .ag-ticker-track span{color:#1E293B;}
[data-theme="light"] .ag-ticker-track b{color:#059669;}
[data-theme="light"] .ag-glow{box-shadow:0 10px 26px -10px rgba(124,58,237,.6);}