@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-400.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-500.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-600.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-700.woff") format("woff")}
/* promptbutler.ai home: generated from the approved design. */
html{scroll-behavior:smooth}

body{margin:0}
*{box-sizing:border-box}
.pb{--navy:#0A2250;--navy-2:#071733;--blue:#0A64F2;--blue-2:#5C9DFF;--indigo:#3656E8;--teal:#0A9E9C;--teal-ink:#087C7A;--lav:#C7D3FD;--silver:#DCE4F0;--mist:#F3F6FA;--ink:#0A2250;--muted:#4A5B7A;--ease:cubic-bezier(.2,.7,.2,1);font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:26px;overflow-x:clip}
.pb a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font:600 15px/20px Poppins,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0) scale(.98)}
.pill-blue{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(10,100,242,.35)}
.pill-blue:hover{box-shadow:0 14px 34px rgba(10,100,242,.45)}
.pill-ghost-d{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.pill-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--silver)}
.label{font:600 13px/18px Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.nav-a{color:#C9D4EC;text-decoration:none;font-weight:500;font-size:15px;transition:color .2s}
.nav-a:hover{color:#fff}
/* hero intro */
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.in{animation:up .9s var(--ease) 2.9s both}
.d1{animation-delay:2.98s}.d2{animation-delay:3.08s}.d3{animation-delay:3.2s}.d4{animation-delay:3.35s}.d5{animation-delay:3.5s}
/* intro: the butler's tray */
.intro{position:fixed;inset:0;z-index:100;pointer-events:none;animation:iGone .1s 3.55s both}
@keyframes iGone{to{visibility:hidden}}
/* one seamless veil that dissolves (no split, no seam) */
.veil{cursor:pointer;position:absolute;inset:0;background:radial-gradient(1100px 700px at 50% 52%,#12306E 0%,#0A2250 48%,#06142D 100%);pointer-events:auto;animation:vOut 1.1s cubic-bezier(.4,0,.2,1) 2.45s both}
@keyframes vOut{to{opacity:0}}
.iscene{position:absolute;left:50%;top:50%;width:420px;height:300px;margin:-170px 0 0 -210px;animation:iOut 1s cubic-bezier(.4,0,.2,1) 2.3s both}
@keyframes iOut{to{opacity:0;transform:scale(1.04);filter:blur(6px)}}
.iglow{position:absolute;left:50%;top:150px;width:420px;height:240px;margin:-120px 0 0 -210px;border-radius:50%;background:radial-gradient(closest-side,rgba(92,157,255,.55),transparent);opacity:0;animation:iGlow 1.4s ease 1.05s both}
@keyframes iGlow{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:.5;transform:scale(1.1)}}
.ilogo{position:absolute;left:50%;top:150px;height:68px;width:auto;transform:translateX(-50%);opacity:0;animation:iLogo .8s var(--ease) 1.3s both}
@keyframes iLogo{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.92)}to{opacity:1;transform:translateX(-50%)}}
.itray{position:absolute;left:10px;top:222px;width:400px;animation:up .8s var(--ease) .15s both}
.idome{position:absolute;left:50px;top:66px;width:320px;transform-origin:85% 100%;animation:iDomeIn .8s var(--ease) .15s both,iDome 1s cubic-bezier(.5,0,.2,1) 1s forwards}
@keyframes iDomeIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes iDome{0%{transform:none;opacity:1}20%{transform:translateY(3px);opacity:1}65%{opacity:1}100%{transform:translate(36px,-150px) rotate(7deg);opacity:0}}
.itag{position:absolute;left:0;right:0;top:262px;text-align:center;color:#A9B7D0;font-size:15px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:0;animation:fade2 .7s ease 1.6s both}
@keyframes fade2{to{opacity:1}}

/* hero loop: reply -> save -> prompt */
@keyframes press{0%,22%{transform:scale(1);box-shadow:0 0 0 0 rgba(10,100,242,.0)}25%{transform:scale(.94)}28%{transform:scale(1.03);box-shadow:0 0 0 10px rgba(10,100,242,.18)}34%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(10,100,242,0)}}
@keyframes saved{0%,27%{opacity:0;transform:translateY(4px)}31%,86%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes card{0%,30%{opacity:0;transform:translate(40px,10px) rotate(2deg) scale(.96)}40%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes bar{0%,40%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes glow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}
@keyframes drift{from{background-position:0 0}to{background-position:64px 64px}}
.loop{animation-duration:9s;animation-iteration-count:infinite;animation-timing-function:var(--ease)}
.l-press{animation-name:press}
.l-saved{animation-name:saved}
.l-card{animation-name:card}
.ln{height:9px;border-radius:9px;transform-origin:left;animation:linegrow 9s var(--ease) infinite}
@keyframes linegrow{0%,38%{transform:scaleX(0)}48%,88%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.ln.b{animation-name:linegrow2}@keyframes linegrow2{0%,42%{transform:scaleX(0)}52%,88%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.ln.c{animation-name:linegrow3}@keyframes linegrow3{0%,46%{transform:scaleX(0)}56%,88%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.ln.d{animation-name:linegrow4}@keyframes linegrow4{0%,50%{transform:scaleX(0)}60%,88%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.grid-bg{background-image:linear-gradient(rgba(199,211,253,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(199,211,253,.07) 1px,transparent 1px);background-size:64px 64px;animation:drift 12s linear infinite}
/* marquee */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq{display:flex;gap:44px;width:max-content;animation:mq 38s linear infinite}
.mq span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:500;color:var(--muted)}
/* scroll reveal */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{animation:up linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    .rv-s{animation:scaleIn linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .zoom{animation:zoomy linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@keyframes scaleIn{from{opacity:0;transform:scale(.92) translateY(30px)}to{opacity:1;transform:none}}
@keyframes zoomy{from{transform:scale(.86);border-radius:40px}to{transform:scale(1);border-radius:28px}}
/* steps */
.step{display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;background:transparent;border:0;border-radius:16px;padding:16px 18px;cursor:pointer;font-family:inherit;color:inherit;transition:background .3s var(--ease)}
.step:hover{background:rgba(10,100,242,.05)}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .6s var(--ease),transform .8s var(--ease)}
/* cabinet */
.drawer{position:relative;display:flex;align-items:center;gap:14px;width:100%;height:96px;border:0;border-radius:14px;padding:0 22px;cursor:pointer;font-family:inherit;text-align:left;background:linear-gradient(180deg,#F8FAFD,#E6ECF5);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(10,34,80,.10),0 1px 0 rgba(10,34,80,.08);transition:transform .55s var(--ease),box-shadow .55s var(--ease),background .4s}
.drawer:hover{transform:translateX(6px)}
.drawer.open{transform:translateX(26px) scale(1.035);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(10,34,80,.10),0 22px 40px rgba(10,34,80,.28)}
.handle{width:64px;height:12px;border-radius:12px;background:linear-gradient(180deg,#A9B7D0,#7F90B0);box-shadow:inset 0 2px 0 rgba(255,255,255,.5);margin-left:auto;transition:width .4s var(--ease)}
.drawer:hover .handle{width:78px}
.tag{border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--silver);padding:6px 12px;font-weight:600;font-size:14px;line-height:18px;color:var(--ink)}
@keyframes fileIn{from{opacity:0;transform:translate(-60px,24px) rotate(-6deg)}to{opacity:1;transform:none}}
.file{animation:fileIn .6s var(--ease) both;position:relative;display:block;width:100%;text-align:left;border:0;cursor:pointer;font-family:inherit;color:inherit;background:#fff;border-radius:4px 16px 16px 16px;padding:16px 18px 16px;box-shadow:0 1px 0 rgba(10,34,80,.06),0 6px 18px rgba(10,34,80,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.file::before{content:"";position:absolute;left:0;top:-12px;width:92px;height:14px;border-radius:8px 8px 0 0;background:inherit}
.file:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 34px rgba(10,34,80,.16)}
.file.on{transform:translateY(-10px);box-shadow:0 0 0 2px var(--blue),0 22px 40px rgba(10,100,242,.22)}
@keyframes paper{from{opacity:0;transform:translateY(40px) scale(.96) rotate(1.5deg)}to{opacity:1;transform:none}}
.paper{animation:paper .7s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.row{animation:rowIn .5s var(--ease) both}
/* chips */
.chip{border:0;cursor:pointer;font:500 14px/20px Poppins,sans-serif;border-radius:999px;padding:8px 16px;transition:all .3s var(--ease)}
@keyframes swap{0%{background:rgba(10,158,156,.45)}100%{background:rgba(10,158,156,.14)}}
.var{border-radius:6px;padding:1px 6px;background:rgba(10,158,156,.14);color:var(--teal-ink);font-weight:600;animation:swap .9s var(--ease)}
/* plans */
.plan{background:#fff;border-radius:24px;padding:30px;box-shadow:inset 0 0 0 1px var(--silver);display:flex;flex-direction:column;gap:16px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px var(--silver),0 30px 60px rgba(10,34,80,.12)}
.plan.pop{box-shadow:inset 0 0 0 2px var(--blue),0 30px 60px rgba(10,100,242,.15)}
.tick{display:flex;gap:10px;align-items:flex-start}
/* faq */
.faq{border:0;background:transparent;width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:600 18px/26px Poppins,sans-serif;color:var(--ink);cursor:pointer}
.plus{transition:transform .4s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ans{animation:open .45s var(--ease) both}
.feat{background:#fff;border-radius:24px;padding:28px;box-shadow:inset 0 0 0 1px var(--silver);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.feat:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--silver),0 24px 48px rgba(10,34,80,.10)}
.foot-a{color:#A9B7D0;text-decoration:none}.foot-a:hover{color:#fff}
/* film */
@keyframes fk-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.f-idle *, .f-idle *::before, .f-idle *::after{animation-play-state:paused!important}
/* ---------- film ---------- */
.f-stage{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;container-type:inline-size;background:#071733;box-shadow:0 50px 100px rgba(10,34,80,.30),0 0 0 1px rgba(10,34,80,.10)}
.f-sc{position:absolute;inset:0;opacity:0;animation:fk-scn 1s 0s both cubic-bezier(.4,0,.2,1)}
.f-sc.f-last{animation-name:fk-scnLast}
@keyframes fk-scn{0%{opacity:0;transform:scale(1.03)}7%{opacity:1;transform:none}93%{opacity:1;transform:none}100%{opacity:0;transform:scale(.985)}}
@keyframes fk-scnLast{0%{opacity:0;transform:scale(1.03)}10%,100%{opacity:1;transform:none}}
.f-a{opacity:0;animation:fk-up .8s 0s both var(--ease)}
.f-a-fade{opacity:0;animation:fk-fade .7s 0s both ease}
@keyframes fk-fade{from{opacity:0}to{opacity:1}}
.f-a-out{animation:fk-fadeOut .45s 0s both ease}
@keyframes fk-fadeOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-.6cqw)}}
.f-a-swapin{opacity:0;animation:fk-swapIn .55s 0s both var(--ease)}
@keyframes fk-swapIn{from{opacity:0;transform:translateY(.8cqw)}to{opacity:1;transform:none}}
.f-a-type{clip-path:inset(0 100% 0 0);animation:fk-typeit 1s 0s both steps(40,end)}
@keyframes fk-typeit{to{clip-path:inset(0 0 0 0)}}
.f-a-pop{opacity:0;animation:fk-pop .6s 0s both cubic-bezier(.3,1.5,.5,1)}
@keyframes fk-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.f-a-press{animation:fk-press .5s 0s both ease}
@keyframes fk-press{0%{transform:scale(1)}40%{transform:scale(.9);filter:brightness(.9)}100%{transform:scale(1)}}
.f-a-slide{opacity:0;animation:fk-slideIn .8s 0s both var(--ease)}
@keyframes fk-slideIn{from{opacity:0;transform:translateX(30%)}to{opacity:1;transform:none}}
.f-a-file{opacity:0;animation:fk-fileIn .7s 0s both var(--ease)}
@keyframes fk-fileIn{from{opacity:0;transform:translate(-6cqw,2cqw) rotate(-8deg)}to{opacity:1;transform:none}}
.f-a-grow{transform:scaleX(0);transform-origin:left;animation:fk-grow .7s 0s both var(--ease)}
@keyframes fk-grow{to{transform:scaleX(1)}}
.f-dots{opacity:0;animation:fk-dotsLife 1s 0s both}
@keyframes fk-dotsLife{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}
.f-dots i{display:inline-block;width:.55cqw;height:.55cqw;border-radius:50%;background:#7F90B0;margin-right:.3cqw;animation:fk-blink .9s infinite}
.f-dots i:nth-child(2){animation-delay:.15s}.f-dots i:nth-child(3){animation-delay:.3s}
@keyframes fk-blink{0%,100%{opacity:.3}50%{opacity:1}}
.f-cursor{position:absolute;width:2.2cqw;height:2.2cqw;opacity:0;z-index:5;filter:drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.35))}
.f-cur1{animation:fk-cur1 2.8s 13s both var(--ease)}
@keyframes fk-cur1{0%{opacity:0;left:60%;top:80%}12%{opacity:1}55%{opacity:1;left:12.5%;top:83%}85%{opacity:1;left:12.5%;top:83%}100%{opacity:0;left:12.5%;top:83%}}
.f-cur1b{animation:fk-cur1b 1.4s 15.9s both var(--ease)}
@keyframes fk-cur1b{0%{opacity:0;left:40%;top:60%}20%{opacity:1}100%{opacity:1;left:88%;top:83.5%}}
.f-cur2{animation:fk-cur2 1.1s 31.9s both var(--ease)}
@keyframes fk-cur2{0%{opacity:0;left:70%;top:85%}20%{opacity:1}100%{opacity:1;left:62%;top:74%}}
.f-chip-ch{border:0;font:500 13px/18px Poppins,sans-serif;border-radius:999px;padding:7px 14px;background:#F3F6FA;color:#4A5B7A;cursor:pointer;animation:fk-chOn 1s 0s none linear;transition:transform .2s}
.f-chip-ch:hover{transform:translateY(-1px)}
@keyframes fk-chOn{0%,100%{background:#0A2250;color:#fff}}
.f-prog{height:100%;background:linear-gradient(90deg,#0A64F2,#2BC4C1);transform-origin:left;transform:scaleX(0);animation:fk-grow 46s 0s both linear}
.f-endcap{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:4cqw;opacity:0;visibility:hidden;animation:fk-endShow .6s 46s both ease}
@keyframes fk-endShow{to{opacity:1;visibility:visible}}
.f-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.f-var{border-radius:.4cqw;padding:0 .4cqw;background:rgba(43,196,193,.16);color:#2BC4C1;font-weight:500}
.f-swap{display:inline-grid}
.f-swap > span{grid-area:1/1}
.f-ctl{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 18px;font:600 14px/20px Poppins,sans-serif;transition:transform .2s}
.f-ctl:hover{transform:translateY(-1px)}
.f-chip-ch{background:rgba(255,255,255,.08);color:#C9D4EC}
@keyframes fk-chOn{0%,100%{background:#fff;color:#0A2250}}
@media (max-width:860px){
  .two{grid-template-columns:minmax(0,1fr)!important}
  .three{grid-template-columns:minmax(0,1fr)!important}
  .hide-sm{display:none!important}
  .drawer.open{transform:translateX(10px) scale(1.02)}
}
@media (prefers-reduced-motion: reduce){
  .intro{display:none}

  .pb *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.nojs{padding:48px 24px}