/* phookit.co.uk – fun & bouncy */
body { background: var(--pk-bg); }
.pk-header { background: color-mix(in srgb, var(--pk-menu-bg) 85%, transparent); border-bottom: 0; }
.pk-brand__mark { background: linear-gradient(135deg, var(--pk-accent), var(--pk-accent-2)); border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%; transform: rotate(-6deg); }
.pk-nav__link { font-weight: 700; border-radius: 999px; }
.pk-btn { border-radius: 999px; }
.fun-btn { padding: .8rem 1.5rem; font-size: 1.05rem; box-shadow: 0 6px 0 color-mix(in srgb, var(--pk-fg) 20%, transparent); }
.fun-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 color-mix(in srgb, var(--pk-fg) 20%, transparent); }
.fun-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--pk-fg) 20%, transparent); }
.pk-main { padding-block: 0 0; }
.fun-sticker { display: inline-block; background: var(--pk-accent-2); color: #2a1b3d; font-weight: 800; padding: .3rem 1rem; border-radius: 999px; transform: rotate(-3deg); font-size: .9rem; box-shadow: 0 3px 0 rgba(0,0,0,.15); }

/* hero with floating blobs */
.fun-hero { position: relative; overflow: hidden; padding: clamp(3rem, 10vw, 7rem) 0 6rem; }
.fun-hero__inner { position: relative; z-index: 1; max-width: 56rem; }
.fun-hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 700; margin: 1rem 0 1.25rem; max-width: none; }
.fun-blob { position: absolute; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; opacity: .55; filter: blur(2px); animation: fun-float 14s ease-in-out infinite; z-index: 0; }
.fun-blob--1 { width: 26rem; height: 26rem; right: -6rem; top: -8rem; background: var(--pk-accent-2); }
.fun-blob--2 { width: 18rem; height: 18rem; left: -6rem; bottom: -4rem; background: var(--pk-accent-3); animation-delay: -5s; }
.fun-blob--3 { width: 12rem; height: 12rem; right: 22%; bottom: 0; background: var(--pk-accent-4); animation-delay: -9s; }
@keyframes fun-float { 0%, 100% { transform: translate(0, 0) rotate(0); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { transform: translate(-1.5rem, 1.5rem) rotate(12deg); border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%; } }
.fun-wobble { display: inline-block; background: linear-gradient(90deg, var(--pk-accent), var(--pk-accent-4)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: fun-wobble 3s ease-in-out infinite; }
@keyframes fun-wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.fun-highlight { background: linear-gradient(transparent 55%, var(--pk-accent-2) 55%); padding: 0 .2em; border-radius: 4px; }
.fun-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; }

/* tilted cards */
.fun-cards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: 2.5rem; }
.fun-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem; background: var(--pk-surface); color: var(--pk-fg); text-decoration: none; border-radius: var(--pk-radius); border: 3px solid var(--pk-fg); box-shadow: 8px 8px 0 var(--fun-shadow, var(--pk-accent)); transition: transform .2s, box-shadow .2s; }
.fun-card:nth-child(odd) { transform: rotate(-1.5deg); } .fun-card:nth-child(even) { transform: rotate(1.5deg); }
.fun-card:hover { transform: rotate(0) translateY(-6px); box-shadow: 12px 12px 0 var(--fun-shadow, var(--pk-accent)); color: var(--pk-fg); }
.fun-card--pink { --fun-shadow: var(--pk-accent); } .fun-card--teal { --fun-shadow: var(--pk-accent-3); } .fun-card--yellow { --fun-shadow: var(--pk-accent-2); } .fun-card--purple { --fun-shadow: var(--pk-accent-4); }
.fun-card--soon { opacity: .85; border-style: dashed; }
.fun-card__emoji { font-size: 2.5rem; line-height: 1; }
.fun-card__domain { font-family: var(--pk-font-mono); font-size: .8rem; color: var(--pk-fg-muted); }
.fun-card h3 { font-size: 1.4rem; }
.fun-card p { margin: 0; flex: 1; }
.fun-card__cta { font-weight: 800; color: var(--pk-accent); margin-top: .5rem; }
.pk-section--alt { background: var(--pk-bg-alt); }

/* how it works */
.fun-how__grid { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: center; }
.fun-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; font-weight: 600; }
.fun-terminal { background: #1e1233; color: #f7e6ff; border-radius: var(--pk-radius); box-shadow: 0 25px 60px rgba(42,27,61,.3); transform: rotate(2deg); font-family: var(--pk-font-mono); }
.fun-terminal__bar { display: flex; gap: .4rem; padding: .75rem 1rem; }
.fun-terminal__bar span { width: .8rem; height: .8rem; border-radius: 50%; background: #ff5f57; } .fun-terminal__bar span:nth-child(2) { background: #febc2e; } .fun-terminal__bar span:nth-child(3) { background: #28c840; }
.fun-terminal pre { background: none; border: 0; margin: 0; padding: 0 1.5rem 1.5rem; color: inherit; font-size: .9rem; }
.fun-cta h2 { font-size: clamp(2rem, 5vw, 3rem); }
.fun-about h1 { margin-top: 1rem; }
.fun-404 .pk-error__code { color: var(--pk-accent-2); }
.pk-footer { border-top: 0; }
.pk-footer__about strong { color: var(--pk-accent-2); }
/* editor access page & auth */
.fun-hero--small { padding-bottom: 3rem; }
.fun-access { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.fun-card--flat, .fun-card--flat:nth-child(odd), .fun-card--flat:nth-child(even) { transform: none; }
.fun-card--flat:hover { transform: translateY(-4px); }
.fun-list--small { font-weight: 600; font-size: .95rem; }
.pk-auth .fun-card--flat { border: 3px solid var(--pk-fg); box-shadow: 8px 8px 0 var(--pk-accent-2); }
.pk-header .pk-btn--primary { border-radius: 999px; }