/* Knight Web Co. V4 motion + polish layer */

/* --- Hero motion / depth --- */
.hero{position:relative}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--hero-x,72%) var(--hero-y,32%),rgba(64,87,255,.10),transparent 58%);opacity:.9;transition:opacity .35s ease}
.hero .wrap{position:relative;z-index:1}
.stage{will-change:transform;transform:translateY(var(--stage-scroll,0px));transition:transform .12s linear}
.stage .browser{translate:0 0;animation:kwcBrowserFloat 8.5s ease-in-out infinite;will-change:translate,transform}
.stage .phone{translate:0 0;animation:kwcPhoneFloat 6.8s ease-in-out infinite .4s;will-change:translate,transform}
.stage .badge-card{translate:0 0;animation:kwcBadgeFloat 5.6s ease-in-out infinite .15s;will-change:translate,transform}
.mocksite:after{animation:kwcMockShape 11s ease-in-out infinite;transform-origin:60% 70%}
@keyframes kwcBrowserFloat{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes kwcPhoneFloat{0%,100%{translate:0 0}45%{translate:7px -16px}72%{translate:-3px -8px}}
@keyframes kwcBadgeFloat{0%,100%{translate:0 0}50%{translate:-4px -11px}}
@keyframes kwcMockShape{0%,100%{scale:1;rotate:0deg}50%{scale:1.045;rotate:1.2deg}}

/* moving capability strip */
.capability-ticker{overflow:hidden;background:#11131a;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.capability-track{display:flex;width:max-content;align-items:center;min-height:60px;animation:kwcTicker 28s linear infinite;will-change:transform}
.capability-ticker:hover .capability-track{animation-play-state:paused}
.capability-item{display:inline-flex;align-items:center;gap:11px;padding:0 30px;font-size:11px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;color:#e9eaf0}
.capability-item i{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(64,87,255,.14)}
@keyframes kwcTicker{to{transform:translateX(-50%)}}

/* smoother, slightly more Apple-like reveal */
.reveal{filter:blur(5px);transform:translateY(24px) scale(.992);transition:opacity .78s cubic-bezier(.2,.7,.2,1),transform .78s cubic-bezier(.2,.7,.2,1),filter .78s ease}
.reveal.visible{filter:none;transform:none}

/* hover polish without changing page structure */
.realwork-card,.route,.price,.panel,.mini-review{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
@media(pointer:fine){
  .realwork-card:hover,.route:hover,.panel:hover{transform:translateY(-5px);box-shadow:0 24px 55px rgba(17,19,26,.09);border-color:rgba(64,87,255,.22)}
  .price:hover{transform:translateY(-4px);box-shadow:0 22px 55px rgba(17,19,26,.09)}
  .price.featured:hover{transform:translateY(-12px)}
}

/* button light sweep */
.btn-blue{position:relative;overflow:hidden;isolation:isolate}
.btn-blue:before{content:"";position:absolute;inset:-2px auto -2px -45%;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);animation:kwcSheen 5.4s ease-in-out infinite;z-index:-1}
@keyframes kwcSheen{0%,66%{left:-45%}88%,100%{left:125%}}

/* --- Local listing comparison --- */
.listing-compare{background:#fff;border:1px solid #deddd8;border-radius:24px;padding:16px;box-shadow:0 24px 65px rgba(17,19,26,.09)}
.listing-searchbar{display:flex;align-items:center;gap:10px;border:1px solid #deddd8;border-radius:999px;padding:13px 17px;color:#51545c;font-size:13px;background:#fafafa;margin-bottom:14px}
.listing-searchbar b{color:#4285f4;font-size:18px;letter-spacing:-.08em}
.listing-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.business-listing{border:1px solid #e0dfda;border-radius:18px;padding:18px;background:#f8f7f3;min-height:270px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.business-listing:after{content:"";position:absolute;inset:auto -25% -55% 20%;height:170px;background:radial-gradient(circle,rgba(17,19,26,.06),transparent 66%);pointer-events:none}
.business-listing.strong{background:linear-gradient(145deg,#f7f8ff,#fff);border-color:#cbd1ff;box-shadow:0 16px 35px rgba(64,87,255,.08)}
.listing-head{display:flex;align-items:flex-start;gap:11px}.listing-logo{width:45px;height:45px;flex:0 0 45px;border-radius:12px;display:grid;place-items:center;background:#deddd7;color:#6a6c72;font-size:12px;font-weight:900}.strong .listing-logo{background:var(--blue);color:white;box-shadow:0 10px 22px rgba(64,87,255,.22)}.listing-profile{width:52px;height:52px;flex:0 0 52px;border-radius:14px;object-fit:cover;object-position:center 32%;border:2px solid #fff;box-shadow:0 9px 22px rgba(17,19,26,.16)}
.listing-head strong{display:block;font-size:15px;margin-bottom:3px}.listing-rating{font-size:11px;color:#5f626a}.listing-rating .gold{color:#e0a329;letter-spacing:.03em}.listing-muted{font-size:12px;line-height:1.55;color:#85878c}.listing-actions{display:flex;gap:7px;flex-wrap:wrap}.listing-action{border:1px solid #d9d8d3;border-radius:999px;padding:7px 10px;background:white;font-size:10px;font-weight:800;color:#555861}.strong .listing-action.primary{background:var(--blue);border-color:var(--blue);color:white}.listing-services{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}.listing-services span{font-size:9px;font-weight:800;padding:6px 8px;border-radius:999px;background:#eef0ff;color:#4450a9}.listing-site-preview{margin-top:auto;border-radius:11px;padding:13px;background:#11131a;color:white;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.listing-site-preview small{display:block;color:#aeb3c6;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.listing-site-preview strong{font-size:12px}.listing-site-preview i{font-style:normal;font-size:18px;color:#9eb0ff}.no-site{margin-top:auto;padding-top:14px;border-top:1px solid #deddd8;color:#9b5b4d;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}

/* --- About page studio visual --- */
.studio-visual{min-height:520px;border-radius:28px;background:linear-gradient(145deg,#0d1018,#1c2340 58%,#4759ff);position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(17,19,26,.18);isolation:isolate}
.studio-visual:before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-140px;top:-135px;background:radial-gradient(circle,rgba(139,155,255,.85),rgba(64,87,255,.22) 40%,transparent 68%);filter:blur(2px);animation:kwcOrb 8s ease-in-out infinite}
.studio-visual:after{content:"KNIGHT WEB CO.";position:absolute;left:28px;bottom:25px;color:#fff;font-size:21px;font-weight:950;letter-spacing:-.04em;z-index:5}
.studio-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,black,transparent 92%)}
.studio-browser{position:absolute;left:12%;right:10%;top:16%;height:54%;border-radius:18px;background:#f8f7f3;box-shadow:0 26px 60px rgba(0,0,0,.34);overflow:hidden;transform:rotate(-3deg);animation:kwcStudioBrowser 7.4s ease-in-out infinite;z-index:2}
.studio-browser-top{height:34px;background:#e7e7e4;display:flex;align-items:center;gap:5px;padding:0 11px}.studio-browser-top i{width:7px;height:7px;border-radius:50%;background:#b6b7ba}.studio-browser-url{height:10px;width:45%;background:#d4d5d7;border-radius:999px;margin-left:7px}
.studio-browser-body{height:calc(100% - 34px);padding:24px;background:linear-gradient(135deg,#f7f5f0 0 54%,#141722 54%);display:flex;align-items:center}.studio-browser-copy{width:58%;position:relative;z-index:2}.studio-browser-copy small{font-size:8px;letter-spacing:.15em;font-weight:900;color:#59606d}.studio-browser-copy strong{font-size:31px;line-height:.95;letter-spacing:-.055em;display:block;margin:10px 0 12px}.studio-browser-copy span{font-size:9px;color:#6a6d75}.studio-cursor{position:absolute;right:17%;top:44%;width:34px;height:42px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));animation:kwcCursor 4.6s ease-in-out infinite;z-index:4}.studio-cursor:before{content:"";display:block;width:0;height:0;border-top:34px solid white;border-right:19px solid transparent;transform:rotate(-15deg)}
.studio-chip{position:absolute;z-index:4;padding:10px 13px;border-radius:999px;background:white;color:#11131a;font-size:9px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.22)}.studio-chip.one{left:8%;top:69%;animation:kwcChip 5.7s ease-in-out infinite}.studio-chip.two{right:7%;top:70%;background:#4057ff;color:white;animation:kwcChip 6.2s ease-in-out infinite .6s}.studio-mark{position:absolute;right:9%;bottom:15%;width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:#fff;color:#11131a;font-weight:950;font-size:28px;letter-spacing:-.08em;box-shadow:0 16px 35px rgba(0,0,0,.25);z-index:3}
@keyframes kwcOrb{0%,100%{translate:0 0;scale:1}50%{translate:-18px 24px;scale:1.08}}
@keyframes kwcStudioBrowser{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -12px;rotate:-1.5deg}}
@keyframes kwcCursor{0%,100%{translate:0 0}40%{translate:-34px 18px}70%{translate:10px 30px}}
@keyframes kwcChip{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* --- Monthly care plans --- */
.care-intro{max-width:760px;margin-bottom:34px}.care-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.care-plan{background:#fff;border:1px solid rgba(17,19,26,.1);border-radius:24px;padding:30px;position:relative;overflow:hidden}.care-plan.featured{background:#11131a;color:#fff}.care-plan.featured:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-110px;top:-120px;background:radial-gradient(circle,rgba(64,87,255,.65),transparent 70%)}.care-plan>*{position:relative;z-index:1}.care-plan h3{font-size:30px;margin-bottom:8px}.care-price{font-size:44px;font-weight:900;letter-spacing:-.055em;margin:22px 0}.care-price small{font-size:12px;font-weight:800;letter-spacing:.02em;color:#777a81}.care-plan.featured .care-price small,.care-plan.featured p,.care-plan.featured li{color:#cbd0dd}.care-plan ul{padding-left:18px;margin:22px 0 0}.care-plan li{margin:9px 0;color:#666a72;font-size:14px}.care-note{font-size:12px;color:#73767d;margin-top:16px}

/* UK currency overlays for static concept screenshots */
.design-scroll-content,.demo-image-wrap{position:relative;width:100%}.design-scroll-content{transition:transform 10s cubic-bezier(.2,.7,.2,1);will-change:transform}.design-scroll-content img,.demo-image-wrap img{width:100%;height:auto;display:block}.currency-patch{position:absolute;display:grid;place-items:center;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:900;line-height:1;z-index:3}
.currency-patch.athlete{top:34.35%;width:10.5%;height:2.2%;background:#101010;color:#fff;font-size:clamp(7px,1.05vw,15px)}
.currency-patch.athlete.a1{left:33.2%}.currency-patch.athlete.a2{left:52.7%}.currency-patch.athlete.a3{left:72.2%}
.currency-patch.coffee{left:24.5%;width:5.9%;height:1.55%;background:#faf8f2;color:#3e2920;font-size:clamp(5px,.65vw,11px);justify-items:end;padding-right:.25%}
.currency-patch.coffee.c1{top:44.05%}.currency-patch.coffee.c2{top:47.95%}.currency-patch.coffee.c3{top:51.85%}.currency-patch.coffee.c4{top:55.72%}

/* nav scroll state */
.nav{transition:box-shadow .3s ease,background .3s ease}.nav.scrolled{background:rgba(245,243,238,.96);box-shadow:0 9px 30px rgba(17,19,26,.07)}

@media(max-width:820px){
  .listing-grid,.care-grid{grid-template-columns:1fr}
  .business-listing{min-height:230px}
  .studio-visual{min-height:430px}
  .studio-browser{left:8%;right:7%;top:15%}
  .capability-track{animation-duration:23s}
  .stage{transform:none}
}
@media(max-width:520px){
  .capability-track{min-height:52px}.capability-item{padding:0 20px;font-size:10px}
  .listing-compare{padding:11px;border-radius:19px}.business-listing{padding:15px;border-radius:15px}.listing-grid{gap:9px}
  .studio-visual{min-height:365px;border-radius:22px}.studio-browser{height:52%;left:6%;right:6%}.studio-browser-body{padding:17px}.studio-browser-copy strong{font-size:24px}.studio-chip{font-size:8px;padding:8px 10px}.studio-mark{width:55px;height:55px;font-size:22px}
  .care-plan{padding:24px}.care-price{font-size:38px}
}
@media(prefers-reduced-motion:reduce){
  .stage .browser,.stage .phone,.stage .badge-card,.mocksite:after,.capability-track,.btn-blue:before,.studio-visual:before,.studio-browser,.studio-cursor,.studio-chip{animation:none!important}
  .reveal{filter:none!important;transform:none!important;transition:none!important}
  .design-scroll-content{transition:none!important}
}

/* --- V5 hosting-only option --- */
.hosting-only{margin-top:22px;display:grid;grid-template-columns:1.1fr auto;gap:28px;align-items:center;padding:26px 30px;border:1px solid rgba(17,19,26,.1);border-radius:22px;background:linear-gradient(135deg,#ffffff,#f4f5ff)}.hosting-only h3{font-size:27px;margin:5px 0 7px}.hosting-only p{margin:0;color:#666a72;max-width:760px}.hosting-only-price{font-size:34px;font-weight:950;letter-spacing:-.045em;text-align:right;white-space:nowrap}.hosting-only-price small{display:block;font-size:11px;color:#72757d;letter-spacing:.02em}.hosting-only-note{font-size:11px!important;margin-top:8px!important;color:#83858b!important}@media(max-width:720px){.hosting-only{grid-template-columns:1fr}.hosting-only-price{text-align:left}}