*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4f2ec;color:#111}a{color:inherit;text-decoration:none}.topbar{height:72px;display:flex;align-items:center;gap:34px;padding:0 5vw;border-bottom:1px solid #c9c5ba;position:sticky;top:0;background:rgba(244,242,236,.94);backdrop-filter:blur(12px);z-index:20}.brand{font-weight:900;font-size:22px;letter-spacing:-1px}.brand span{color:#6558d3}.topbar nav{display:flex;gap:24px;margin-left:auto}.topbar nav a{font-size:14px;color:#514f49}.ghost,.secondary,.primary{border:0;border-radius:7px;padding:11px 15px;font-weight:750;cursor:pointer}.ghost{background:transparent;border:1px solid #c7c2b7}.secondary{background:#e9e6de;border:1px solid #c9c5ba}.primary{background:#111;color:#fff;display:inline-block}.hero{min-height:560px;padding:90px 8vw;display:grid;grid-template-columns:1.15fr .85fr;gap:7vw;align-items:center;border-bottom:1px solid #c9c5ba}.eyebrow,.sell span{font-size:12px;letter-spacing:2px;font-weight:800;color:#6558d3}.hero h1{font-size:clamp(56px,8vw,105px);line-height:.86;letter-spacing:-6px;margin:18px 0 28px}.hero h1 span{color:#6558d3}.hero p{max-width:620px;font-size:19px;line-height:1.55;color:#59564e;margin-bottom:28px}.hero-card{background:#111;color:#fff;padding:28px;border-radius:12px;box-shadow:18px 18px 0 #d6d1c5}.mini-head{display:flex;justify-content:space-between;color:#aaa;font-size:13px}.mini-head b{color:#fff}.big-number{font-size:58px;font-weight:850;letter-spacing:-3px;margin:40px 0}.mini-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #333;border-bottom:1px solid #333}.mini-grid div{padding:18px 0}.mini-grid div+div{border-left:1px solid #333;padding-left:20px}.mini-grid span{display:block;color:#999;font-size:12px}.mini-grid b{font-size:26px}.statusline{font-size:12px;color:#999;margin-top:20px}.statusline i{width:7px;height:7px;background:#78d39a;border-radius:50%;display:inline-block;margin-right:8px}.section{padding:78px 8vw}.section.alt{background:#dedad0}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-title>div{display:flex;align-items:center;gap:15px}.section-title span{font-weight:900;color:#6558d3}.section-title h2{font-size:42px;letter-spacing:-2px;margin:0}.section-title p{color:#666158}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stats article,.panel{background:#fff;border:1px solid #cbc7bd;border-radius:9px}.stats article{padding:22px}.stats span{display:block;color:#6a665e;font-size:12px;text-transform:uppercase;letter-spacing:1px}.stats strong{font-size:27px;display:block;margin-top:8px}.panel{padding:22px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel h3{margin:0 0 20px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 10px;border-top:1px solid #e4e1da;font-size:14px}th{font-size:11px;color:#777168;text-transform:uppercase;letter-spacing:1px}.pill{padding:5px 9px;border-radius:20px;background:#eee;font-size:11px;font-weight:800}.pill.overdue{background:#ffe1dc;color:#a92e1c}.pill.paid{background:#dcf4e3;color:#176b31}.actions button{font-size:11px;padding:6px 8px;margin-right:5px}.empty{text-align:center;color:#777;padding:30px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-panel label,.reminder-grid label{display:block;font-size:12px;font-weight:800;color:#4f4b44;margin:14px 0}.form-panel input,.form-panel textarea,.form-panel select,.reminder-grid select,.message{width:100%;padding:13px;margin-top:6px;border:1px solid #c8c3b8;border-radius:6px;background:#fbfaf7;font:inherit}.form-panel textarea{min-height:90px;resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{width:100%;text-align:center}.preview{background:#c9c5ba}.invoice-paper{background:#fff;min-height:480px;padding:35px;box-shadow:0 10px 25px rgba(0,0,0,.08);margin-bottom:15px}.invoice-top{display:flex;justify-content:space-between;border-bottom:3px solid #111;padding-bottom:20px}.invoice-top b{color:#6558d3}.invoice-top strong{font-size:25px}.invoice-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:30px 0}.invoice-meta small,.invoice-meta span{display:block;color:#777;font-size:10px;margin:5px 0}.invoice-meta b{display:block}.right{text-align:right}.line{display:flex;justify-content:space-between;padding:16px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.total{display:flex;justify-content:flex-end;gap:30px;align-items:center;padding:24px 0}.total strong{font-size:24px}.payinfo{font-size:12px;color:#666;border-top:1px solid #ddd;padding-top:18px;white-space:pre-wrap}.reminder-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:16px}.message{height:210px;resize:vertical;line-height:1.55}.sell{padding:80px 8vw;background:#111;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}.sell h2{font-size:48px;letter-spacing:-2px;margin:12px 0 0}.sell p{color:#aaa;line-height:1.7}footer{display:flex;justify-content:space-between;padding:24px 8vw;background:#111;color:#777;border-top:1px solid #333}footer b{color:#fff}@media(max-width:800px){.topbar nav{display:none}.topbar{padding:0 18px}.topbar .ghost{margin-left:auto}.hero{grid-template-columns:1fr;padding:60px 22px}.hero h1{letter-spacing:-4px}.section{padding:55px 22px}.section-title{display:block}.section-title p{margin-top:8px}.stats{grid-template-columns:1fr 1fr}.form-grid,.reminder-grid,.sell{grid-template-columns:1fr}.two{grid-template-columns:1fr}.sell{padding:55px 22px}.sell h2{font-size:38px}.section-title h2{font-size:34px}.hero-card{box-shadow:9px 9px 0 #d6d1c5}}@media print{body *{visibility:hidden}.invoice-paper,.invoice-paper *{visibility:visible}.invoice-paper{position:absolute;left:0;top:0;width:100%;box-shadow:none}}
/* Premium motion layer */
body{overflow-x:hidden}
.hero{position:relative;overflow:hidden;isolation:isolate;background:
radial-gradient(circle at 18% 10%,rgba(101,88,211,.10),transparent 34%),
linear-gradient(135deg,#f6f4ee 0%,#eeebe3 100%)}
.hero>div:not(.motion-bg){position:relative;z-index:2}
.motion-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:999px;filter:blur(4px);opacity:.58;will-change:transform}
.orb-a{width:390px;height:390px;right:-90px;top:-130px;background:radial-gradient(circle at 35% 35%,rgba(122,105,255,.55),rgba(122,105,255,.04) 68%);animation:floatA 12s ease-in-out infinite alternate}
.orb-b{width:260px;height:260px;left:42%;bottom:-150px;background:radial-gradient(circle at 50% 50%,rgba(85,205,177,.30),rgba(85,205,177,0) 70%);animation:floatB 15s ease-in-out infinite alternate}
.orb-c{width:170px;height:170px;left:-55px;top:90px;background:radial-gradient(circle,rgba(255,176,96,.26),rgba(255,176,96,0) 72%);animation:floatC 10s ease-in-out infinite alternate}
.grid-glow{position:absolute;inset:-50%;opacity:.22;background-image:linear-gradient(rgba(17,17,17,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.10) 1px,transparent 1px);background-size:52px 52px;transform:perspective(600px) rotateX(62deg) rotateZ(-8deg);animation:gridDrift 24s linear infinite}
.hero-card{position:relative;overflow:hidden;transform:translateZ(0);animation:cardFloat 6s ease-in-out infinite}
.hero-card:before{content:"";position:absolute;width:180px;height:500px;top:-180px;left:-220px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:rotate(24deg);animation:sheen 7s ease-in-out infinite}
.activity{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px;border:1px solid #292929;border-radius:8px;background:#161616}
.activity small{display:block;color:#777;font-size:9px;letter-spacing:1px}.activity b{display:block;font-size:12px;margin-top:2px}
.pulse{width:9px;height:9px;border-radius:50%;background:#78d39a;box-shadow:0 0 0 0 rgba(120,211,154,.55);animation:pulseRing 2s infinite}
.primary{transition:transform .2s ease,box-shadow .2s ease}.primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.panel,.stats article{transition:transform .25s ease,box-shadow .25s ease}.panel:hover,.stats article:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.055)}
@keyframes floatA{to{transform:translate(-95px,90px) scale(1.14)}}
@keyframes floatB{to{transform:translate(100px,-80px) scale(.88)}}
@keyframes floatC{to{transform:translate(80px,65px) scale(1.15)}}
@keyframes gridDrift{to{transform:perspective(600px) rotateX(62deg) rotateZ(-8deg) translate(52px,52px)}}
@keyframes cardFloat{0%,100%{transform:translateY(0) rotate(.15deg)}50%{transform:translateY(-9px) rotate(-.15deg)}}
@keyframes sheen{0%,55%{left:-220px}80%,100%{left:130%}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(120,211,154,.55)}70%{box-shadow:0 0 0 9px rgba(120,211,154,0)}100%{box-shadow:0 0 0 0 rgba(120,211,154,0)}}
@media(prefers-reduced-motion:reduce){.orb,.grid-glow,.hero-card,.hero-card:before,.pulse{animation:none!important}}

/* Fully custom dropdowns — matches PayChaser UI */
.custom-select{position:relative;margin-top:6px}
.select-trigger{width:100%;min-height:45px;padding:12px 42px 12px 13px;border:1px solid #c8c3b8;border-radius:6px;background:#fbfaf7;color:#111;font:inherit;text-align:left;cursor:pointer;position:relative;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.select-trigger:hover{background:#fff;border-color:#aaa49a}
.select-trigger:focus{outline:none;border-color:#6558d3;box-shadow:0 0 0 3px rgba(101,88,211,.12)}
.select-trigger i{position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:2px solid #6c675f;border-bottom:2px solid #6c675f;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.custom-select.open .select-trigger i{transform:translateY(-25%) rotate(225deg)}
.select-menu{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 7px);padding:6px;background:#fbfaf7;border:1px solid #c8c3b8;border-radius:8px;box-shadow:0 16px 40px rgba(17,17,17,.13);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:top;transition:opacity .16s ease,transform .16s ease,visibility .16s;max-height:230px;overflow:auto}
.custom-select.open .select-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.select-menu button{display:block;width:100%;border:0;background:transparent;border-radius:5px;padding:11px 12px;color:#36322d;font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:background .13s ease,color .13s ease}
.select-menu button:hover{background:#ebe8e0;color:#111}
.select-menu button.selected{background:#111;color:#fff;font-weight:750}
.select-menu::-webkit-scrollbar{width:7px}.select-menu::-webkit-scrollbar-thumb{background:#c5c0b6;border-radius:10px}.select-menu::-webkit-scrollbar-track{background:transparent}

/* Feedback page */
.feedback-section{background:linear-gradient(180deg,#f4f2ec,#ebe7dd)}
.feedback-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:start}
.feedback-form-card{position:sticky;top:92px}
.feedback-intro{padding-bottom:18px;border-bottom:1px solid #e1ddd4;margin-bottom:16px}
.feedback-intro h3{font-size:27px;letter-spacing:-1px;margin:8px 0}.feedback-intro p{margin:0;color:#6b665e;line-height:1.5}
.tiny-label{font-size:10px;letter-spacing:1.7px;color:#6558d3;font-weight:900}
.feedback-form-card label{display:block;font-size:12px;font-weight:800;color:#4f4b44;margin:14px 0}
.feedback-form-card input,.feedback-form-card textarea{width:100%;padding:13px;margin-top:6px;border:1px solid #c8c3b8;border-radius:6px;background:#fbfaf7;font:inherit}
.feedback-form-card textarea{min-height:120px;resize:vertical}
.star-picker{display:flex;gap:5px;margin-top:7px}
.star-picker button{border:0;background:transparent;color:#c7c2b7;font-size:30px;line-height:1;padding:2px;cursor:pointer;transition:transform .15s,color .15s}
.star-picker button:hover{transform:translateY(-2px)}
.star-picker button.active{color:#6558d3}
.local-note{font-size:10px;color:#8b857b;line-height:1.45;margin:12px 0 0}
.feedback-score{display:flex;align-items:center;gap:20px;margin-bottom:12px}
.feedback-score strong{font-size:45px;letter-spacing:-2px}.feedback-score span{color:#777}.feedback-score b{display:block;color:#6558d3;letter-spacing:2px;font-size:18px}.feedback-score small{color:#777}
.review-list{display:grid;gap:12px}
.review-card{background:#fff;border:1px solid #cbc7bd;border-radius:9px;padding:20px;animation:reviewIn .3s ease}
.review-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.review-head b{font-size:14px}.review-head span{color:#6558d3;letter-spacing:1px}
.review-card p{color:#59564e;line-height:1.6;margin:12px 0 0;white-space:pre-wrap}.review-empty{padding:40px 20px;text-align:center;border:1px dashed #c8c3b8;border-radius:9px;color:#817b72}
@keyframes reviewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:800px){.feedback-layout{grid-template-columns:1fr}.feedback-form-card{position:static}.feedback-score{align-items:flex-start}}

/* v6: stronger visible motion + softer interface */
.hero{
  background:
    radial-gradient(circle at 12% 12%,rgba(112,67,255,.22),transparent 30%),
    radial-gradient(circle at 78% 70%,rgba(85,205,177,.10),transparent 30%),
    linear-gradient(135deg,#f8f5ff 0%,#eee9fa 45%,#f4f2ec 100%);
}
.orb{filter:blur(1px);opacity:.9}
.orb-a{
  width:520px;height:520px;right:-110px;top:-180px;
  background:radial-gradient(circle at 38% 38%,rgba(103,57,255,.88) 0%,rgba(122,80,255,.55) 27%,rgba(155,120,255,.20) 53%,rgba(122,105,255,0) 72%);
  animation:purpleTravel 7s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
.orb-b{
  width:330px;height:330px;left:34%;bottom:-175px;
  background:radial-gradient(circle,rgba(83,53,200,.50),rgba(119,92,230,.14) 55%,transparent 72%);
  animation:purpleTravelB 9s ease-in-out infinite alternate;
}
.orb-c{
  width:210px;height:210px;left:-55px;top:70px;
  background:radial-gradient(circle,rgba(173,137,255,.72),rgba(130,87,245,.18) 55%,transparent 72%);
  animation:purpleTravelC 6s ease-in-out infinite alternate;
}
.grid-glow{opacity:.30;background-size:46px 46px;animation:gridDriftStrong 12s linear infinite}
@keyframes purpleTravel{0%{transform:translate(0,0) scale(.92)}35%{transform:translate(-150px,100px) scale(1.13)}70%{transform:translate(-290px,35px) scale(.98)}100%{transform:translate(-190px,190px) scale(1.2)}}
@keyframes purpleTravelB{0%{transform:translate(-40px,20px) scale(.9)}50%{transform:translate(170px,-125px) scale(1.2)}100%{transform:translate(330px,-35px) scale(.95)}}
@keyframes purpleTravelC{0%{transform:translate(0,0)}50%{transform:translate(120px,130px) scale(1.25)}100%{transform:translate(250px,20px) scale(.85)}}
@keyframes gridDriftStrong{to{transform:perspective(600px) rotateX(62deg) rotateZ(-8deg) translate(92px,92px)}}

/* Make rigid cards feel alive */
.stats article,.panel,.invoice-paper,.select-trigger,.primary,.secondary,.ghost{
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .25s ease,background .25s ease;
}
.stats article:hover{transform:translateY(-7px) scale(1.018);box-shadow:0 16px 35px rgba(66,46,130,.12)}
.panel:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(66,46,130,.10)}
.invoice-paper:hover{transform:translateY(-4px) rotate(.25deg);box-shadow:0 18px 35px rgba(45,35,80,.12)}
.secondary:hover,.ghost:hover{transform:translateY(-2px);border-color:#8d7bdd;background:#f4f0ff}
.primary:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 12px 26px rgba(65,48,135,.25)}
.reveal-card,.reveal-group>*{opacity:0;transform:translateY(22px)}
.reveal-card.visible,.reveal-group>.visible{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal-group>*:nth-child(2){transition-delay:.08s!important}.reveal-group>*:nth-child(3){transition-delay:.16s!important}.reveal-group>*:nth-child(4){transition-delay:.24s!important}

/* Five-star animation */
.star-picker button{transform-origin:center;position:relative}
.star-picker.five-star-celebrate button{
  animation:starWave .72s cubic-bezier(.2,.9,.2,1) both;
  color:#6558d3;
  text-shadow:0 0 18px rgba(101,88,211,.34);
}
.star-picker.five-star-celebrate button:nth-child(1){animation-delay:0s}
.star-picker.five-star-celebrate button:nth-child(2){animation-delay:.07s}
.star-picker.five-star-celebrate button:nth-child(3){animation-delay:.14s}
.star-picker.five-star-celebrate button:nth-child(4){animation-delay:.21s}
.star-picker.five-star-celebrate button:nth-child(5){animation-delay:.28s}
.star-picker.five-star-celebrate:after{
  content:"★★★★★";position:absolute;pointer-events:none;color:#9a83ff;letter-spacing:8px;font-size:18px;
  animation:starDust .9s ease-out forwards;opacity:0;
}
@keyframes starWave{0%{transform:scale(1) rotate(0)}40%{transform:translateY(-10px) scale(1.42) rotate(-10deg)}70%{transform:translateY(2px) scale(.92) rotate(7deg)}100%{transform:scale(1) rotate(0)}}
@keyframes starDust{0%{opacity:0;transform:translateY(8px) scale(.7)}35%{opacity:.5}100%{opacity:0;transform:translateY(-34px) scale(1.25)}}
@media(prefers-reduced-motion:reduce){.reveal-card,.reveal-group>*{opacity:1;transform:none}.star-picker.five-star-celebrate button{animation:none}}