/* SavyBytes palette: #A74FE6 purple, #4EE68D green, #E6AE4E amber, #7D6191 muted purple, #56665C slate */
:root{--sb-purple:#A74FE6;--sb-green:#4EE68D;--sb-amber:#E6AE4E;--sb-mauve:#7D6191;--sb-slate:#56665C}

/* Logo wordmark (header) */
.o-logo svg{display:none}
.o-logo__text{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1;position:relative;padding-top:6px}
.o-logo__text .lg-word{font:700 1.75rem/1 Figtree,Arial,sans-serif;letter-spacing:-.045em;background:linear-gradient(90deg,#e6e6f0 0%,#A74FE6 58%,#7D6191 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;position:relative}
.o-logo__text .lg-b{font-weight:800}
.o-logo__text .lg-word::before{content:"";position:absolute;left:46%;top:-5px;width:5px;height:5px;background:#E6AE4E;box-shadow:6px 0 #E6AE4E,3px 5px #E6AE4E;-webkit-text-fill-color:initial}
.o-logo__text small{font:700 .52rem/1 Figtree,Arial,sans-serif;letter-spacing:.14em;color:#4EE68D;margin-top:3px}

/* 3D text + stage */
.o-h2,.in-title,.o-hero__title{filter:drop-shadow(0 2px 0 #5a4378) drop-shadow(0 4px 0 #3d2c58) drop-shadow(0 12px 16px rgba(0,0,0,.55))}
.card,.panel,.o-steps li,.o-principles li,.o-stat,.in-points li,.in-note,.o-formwrap,.o-h2,.in-title,.in-photo,.in-art,.panel__art,.o-orbring,.o-badge{will-change:translate,rotate}
.in-photo img{transition:transform .5s,box-shadow .5s}.in-photo:hover img{transform:scale(1.04)}

/* Crew + coins */
#crew{display:none;position:fixed;left:0;right:0;bottom:0;height:0;z-index:66;pointer-events:none}
body.is-transforming #crew{display:block}
.wk{position:absolute;left:0;bottom:0}
.coin{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 Figtree,Arial,sans-serif;color:#7a4b00;background:radial-gradient(circle at 30% 30%,#fff1c2,#E6AE4E);box-shadow:0 0 12px rgba(230,174,78,.8)}

/* Logo image on a light plate so the dark letters stay readable on the dark header */
.o-logo{display:inline-flex;align-items:center;background:#f6f6fb;border-radius:12px;padding:5px 14px;box-shadow:0 4px 18px rgba(167,79,230,.25)}
.o-logo__img{height:36px;width:auto;display:block}
@media(max-width:600px){.o-logo__img{height:30px}}

/* ---- logo can never overflow the header ---- */
.o-header .o-logo{flex:none;max-width:60vw}
.o-header .o-logo__img{height:34px!important;width:auto!important;max-width:none}

/* ---- marketing background (whole online site) ---- */
#mk-bg{display:none;position:fixed;inset:0;z-index:0;overflow:hidden;perspective:900px;perspective-origin:50% 50%;pointer-events:none}
body[data-view="online"] #mk-bg{display:block}
.mk-p{position:absolute;left:0;top:0;will-change:translate}
.mk-f{width:var(--s);height:var(--s);display:grid;place-items:center;color:var(--c);border-radius:26%;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:0 0 34px color-mix(in srgb,var(--c) 40%,transparent),inset 0 0 18px rgba(255,255,255,.06);backdrop-filter:blur(2px);opacity:.78;animation:mkfloat 7s ease-in-out infinite}
.mk-f svg{width:56%;height:56%;filter:drop-shadow(0 0 8px var(--c))}
@keyframes mkfloat{0%,100%{transform:translateY(0) rotateX(0) rotateY(-16deg)}50%{transform:translateY(-16px) rotateX(12deg) rotateY(18deg)}}

/* ---- marketing images that pop out of the screen ---- */
.o-sec>.o-wrap{position:relative}
.mk-shot{position:absolute;z-index:0;width:min(30vw,340px);pointer-events:none;top:-40px}
.mk-shot--r{right:-40px}.mk-shot--l{left:-40px}
.mk-shot img,.in-mk img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(167,79,230,.35));animation:mkfloat 8s ease-in-out infinite}
.in-mk{max-width:400px;margin:auto;width:100%}
.o-sec .o-head,.o-sec .o-cards,.o-sec .o-panels,.o-sec .o-steps,.o-sec .o-about>*,.o-sec .o-contact>*{position:relative;z-index:1}
@media(max-width:900px){.mk-shot{width:150px;opacity:.55;top:-20px}.mk-shot--r{right:-10px}.mk-shot--l{left:-10px}}

/* ---- real depth inside cards ---- */
.card__inner{transform-style:preserve-3d}
.card__icon{transform:translateZ(46px)}
.card h3{transform:translateZ(30px)}
.card p{transform:translateZ(14px)}
.card__go{transform:translateZ(36px)}

/* Project panel images: paste at the end of theme.css */
.panel__art--img{background:radial-gradient(circle at 50% 60%,rgba(167,79,230,.28),transparent 70%)!important;display:grid;place-items:center;overflow:visible}
.panel__art--img i{display:none}
.panel__art--img img{width:88%;max-width:none;height:auto;margin-top:-18px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));animation:mkfloat 8s ease-in-out infinite}
.panel:has(.panel__art--img){overflow:visible}