/* Vigglo — case study pages. Design source: Figma "Caso · Sikana / ISA / Vantify · Desktop 1440" (+ Mobile). */

/* ---------- Per-case tokens ---------- */
.vg-case { --lh-h: 1.1; --tt: none; --hw: 700; --mod-bg: transparent; --tag-bg: transparent; --tag-ink: inherit; --shot-line: transparent; --pad-mod: 0px; }

.vg-case[data-case="sikana"] {
	--fh: "Oswald", "Arial Narrow", sans-serif; --fb: "Instrument Sans", system-ui, sans-serif; --f-ey: "Instrument Sans", system-ui, sans-serif;
	--lh-h: .96; --tt: uppercase;
	--bg: #fdf7e7; --ink: #5e2e09; --ink-2: rgba(94, 46, 9, .9); --muted: rgba(94, 46, 9, .6);
	--ey: #f74007; --bullet: #f74007;
	--hero-bg: #fdf7e7; --hero-ink: #5e2e09; --hero-ey: #f74007; --hero-crumb: rgba(94, 46, 9, .6); --nav: #002b68;
	--a-bg: #ffefbc;
	--chip-bg: #e5eb7c; --chip-ink: #5e2e09;
	--shot-bg: #ffefbc; --shot-line: #5e2e09; --shot-ink: rgba(94, 46, 9, .55);
	--mod-card-ink: #5e2e09; --mod-label: #f74007; --mod-num: #f74007; --mod-bullet: #f74007; --mod-ink-2: rgba(94, 46, 9, .9);
	--tag-bg: #e5eb7c; --tag-ink: #5e2e09;
	--tier-bg: #e5eb7c; --tier-ink: #5e2e09; --tier-pct: #f74007;
	--fs-h1: clamp(72px, 13.9vw, 200px); --fs-ctx: clamp(40px, 4.72vw, 68px); --fs-role: clamp(38px, 3.89vw, 56px); --fs-prob: clamp(44px, 5.83vw, 84px); --fs-mod: clamp(36px, 4.17vw, 60px); --fs-band: clamp(42px, 5vw, 72px); --fs-res: clamp(48px, 6.67vw, 96px); --fs-close: clamp(56px, 8.33vw, 120px);
	--fs-card: clamp(26px, 2.36vw, 34px);
	--close-ink: #5e2e09; --btn-bg: #5e2e09; --btn-ink: #fdf7e7; --btn2: #5e2e09;
}
.vg-case[data-case="sikana"] .vg-band--b1 { --band-bg: #ffefbc; --band-ink: #5e2e09; --ey: #f74007; --card-bg: #fdf7e7; --card-ink: #5e2e09; --num: #f74007; }
.vg-case[data-case="sikana"] .vg-band--b2 { --band-bg: #5e2e09; --band-ink: #fdf7e7; --ey: #e5eb7c; --card-bg: #ffefbc; --card-ink: #5e2e09; --num: #f74007; }
.vg-case[data-case="sikana"] .vg-band--res { --band-bg: #e5eb7c; --band-ink: #5e2e09; --ey: #5e2e09; --card-bg: #fdf7e7; --card-ink: #5e2e09; --num: #f74007; }

.vg-case[data-case="isa"] {
	--fh: "Zilla Slab", Georgia, serif; --fb: "Open Sans", system-ui, sans-serif; --f-ey: "Zilla Slab", Georgia, serif;
	--bg: #faf7fa; --ink: #1a1a1a; --ink-2: #333; --muted: #555;
	--ey: #1a1a1a; --bullet: #ed0677;
	--hero-bg: #951b81; --hero-ink: #faf7fa; --hero-ey: #c3e236; --hero-crumb: rgba(250, 247, 250, .6); --nav: #fffdf9;
	--a-bg: #fff;
	--chip-bg: #f0d7ec; --chip-ink: #1a1a1a;
	--shot-bg: #f6e8f4; --shot-ink: #6b4a66;
	--mod-bg: #951b81; --pad-mod: 40px; --mod-card-ink: #fff; --mod-label: #fff; --mod-num: #fff; --mod-bullet: #ed0677; --mod-ink-2: #fff;
	--tier-bg: #f0d7ec; --tier-ink: #1a1a1a; --tier-pct: #951b81;
	--fs-h1: clamp(46px, 7.22vw, 104px); --fs-ctx: clamp(34px, 3.89vw, 56px); --fs-role: clamp(32px, 3.33vw, 48px); --fs-prob: clamp(38px, 5vw, 72px); --fs-mod: clamp(30px, 3.19vw, 46px); --fs-band: clamp(36px, 4.44vw, 64px); --fs-res: clamp(40px, 5vw, 72px); --fs-close: clamp(40px, 5.83vw, 84px);
	--fs-card: clamp(22px, 1.8vw, 26px);
	--close-ink: #1a1a1a; --btn-bg: #ed0677; --btn-ink: #faf7fa; --btn2: #1a1a1a;
}
.vg-case[data-case="isa"] .vg-band--b1 { --band-bg: #003878; --band-ink: #fff; --ey: #fff; }
.vg-case[data-case="isa"] .vg-band--b2 { --band-bg: #0091d0; --band-ink: #fff; --ey: #fff; --card-bg: #fff; --card-ink: #1a1a1a; --card-ink-2: #333; }
.vg-case[data-case="isa"] .vg-band--res { --band-bg: #951b81; --band-ink: #faf7fa; --ey: #c3e236; --card-bg: #003878; --card-ink: #faf7fa; --num: #c3e236; }

.vg-case[data-case="vantify"] {
	--fh: "Poppins", system-ui, sans-serif; --fb: "Poppins", system-ui, sans-serif; --f-ey: "Poppins", system-ui, sans-serif;
	--lh-h: 1.1;
	--bg: #000; --ink: #fff; --ink-2: rgba(255, 255, 255, .85); --muted: rgba(255, 255, 255, .6);
	--ey: #fff; --bullet: #ff6f32;
	--hero-bg: #0a0a0a; --hero-ink: #fff; --hero-ey: #00f678; --hero-crumb: rgba(255, 255, 255, .6); --nav: #fffdf9;
	--a-bg: #000;
	--chip-bg: #1a1a1a; --chip-ink: #fff;
	--shot-bg: #1a1a1a; --shot-ink: rgba(255, 255, 255, .55);
	--mod-bg: #1a1a1a; --pad-mod: 40px; --mod-card-ink: #fff; --mod-label: #fff; --mod-num: #fff; --mod-bullet: #ff6f32; --mod-ink-2: #fff;
	--tier-bg: #000; --tier-ink: #fff; --tier-pct: #00f678;
	--fs-h1: clamp(52px, 7.22vw, 104px); --fs-ctx: clamp(34px, 3.89vw, 56px); --fs-role: clamp(32px, 3.33vw, 48px); --fs-prob: clamp(38px, 5vw, 72px); --fs-mod: clamp(28px, 3.19vw, 46px); --fs-band: clamp(36px, 4.44vw, 64px); --fs-res: clamp(40px, 5vw, 72px); --fs-close: clamp(38px, 5.83vw, 84px);
	--fs-card: clamp(22px, 1.8vw, 26px);
	--close-ink: #fff; --btn-bg: #00f678; --btn-ink: #0a0a0a; --btn2: #fff;
}
.vg-case[data-case="vantify"] .vg-band--b2 { --band-bg: #0a0a0a; --band-ink: #fff; --ey: #fff; --card-bg: #1a1a1a; --card-ink: #fff; --card-ink-2: rgba(255, 255, 255, .85); }
.vg-case[data-case="vantify"] .vg-band--res { --band-bg: #0a0a0a; --band-ink: #fff; --ey: #00f678; --card-bg: #161616; --card-ink: #fff; --num: #00f678; }

/* ---------- Base ---------- */
.vg-case { background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 16px; line-height: 26px; }
.vg-case h1, .vg-case h2, .vg-case h3 { font-family: var(--fh); font-weight: var(--hw); text-transform: var(--tt); line-height: var(--lh-h); letter-spacing: 0; margin: 0; }
.vg-ey { font: 600 13px/18px var(--f-ey); letter-spacing: 3px; text-transform: uppercase; color: var(--ey); margin: 0; }
.vg-case[data-case="isa"] .vg-ey { font-weight: 500; }
.vg-case[data-case="vantify"] .vg-ey { font-weight: 500; }
.vg-p { font-size: 18px; line-height: 30px; color: var(--ink-2); margin: 0; }
.vg-case .vg-wrap { max-width: 1440px; }

/* Nav sits on the hero colour */
.vg-case .vg-nav { color: var(--nav); }
.vg-case .vg-logo { color: var(--nav); }
.vg-case .vg-burger span { background: var(--nav); }
.vg-case .vg-nav__links a::after { background: var(--electric); }
.vg-chero__nav { padding: 36px 0; }

/* ---------- Hero ---------- */
.vg-chero { background: var(--hero-bg); color: var(--hero-ink); }
.vg-chero__body { padding-bottom: 80px; }
.vg-chero__crumb { font: 500 15px/20px var(--fb); color: var(--hero-crumb); margin: 24px 0 0; }
.vg-chero__crumb a:hover { text-decoration: underline; }
.vg-chero__ey { color: var(--hero-ey); margin-top: 30px; }
.vg-chero__h1 { font-size: var(--fs-h1); margin-top: 28px; color: var(--hero-ink); overflow-wrap: anywhere; }
.vg-case[data-case="sikana"] .vg-chero__h1 span { display: block; }
.vg-case:not([data-case="sikana"]) .vg-chero__h1 { line-height: 1.04; letter-spacing: -.01em; }
.vg-chero__lede { max-width: 860px; font-size: clamp(18px, 1.53vw, 22px); line-height: 1.55; margin: 30px 0 0; color: var(--hero-ink); opacity: .88; }
.vg-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin: 40px 0 0; }
.vg-meta dt { color: var(--hero-ey); margin-bottom: 8px; }
.vg-meta dd { margin: 0; font: 500 16px/24px var(--fb); color: var(--hero-ink); }
.vg-meta dd a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.vg-meta dd a:hover { opacity: .75; }
.vg-chero .vg-shot { margin-top: 34px; }
.vg-case:not([data-case="sikana"]) .vg-chero .vg-shot { background: rgba(240, 215, 236, .12); color: var(--hero-crumb); }
.vg-case[data-case="vantify"] .vg-chero .vg-shot { background: rgba(237, 237, 237, .12); }
.vg-case:not([data-case="sikana"]) .vg-chero .vg-shot.has-img { background: none; }

/* ---------- Screenshots ---------- */
.vg-shot { margin: 0; height: var(--h, 360px); border-radius: 24px; background: var(--shot-bg); border: 1.5px solid var(--shot-line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 28px; font: 500 14px/20px var(--fb); color: var(--shot-ink); overflow: hidden; width: 100%; }
.vg-shot__ph { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.vg-shot__slot { font-style: normal; font-size: 11px; letter-spacing: .04em; opacity: .7; font-family: ui-monospace, Menlo, monospace; }
.vg-shot.has-img { height: auto; padding: 0; background: none; border: 0; display: block; }
.vg-shot.has-img img { width: 100%; height: auto; border-radius: 24px; }
.vg-shot__tags { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; text-align: center; }
.vg-shot__tags span { justify-self: center; font: 700 12px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--shot-line); color: var(--shot-ink); }
.vg-shotrow { display: grid; gap: 24px; }
.vg-shotrow--2 { grid-template-columns: 1fr 1fr; }
.vg-mod__shots { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ---------- Sections ---------- */
.vg-sec { padding: 110px 0; }
.vg-sec--a { background: var(--a-bg); }
.vg-sec--prob { padding-bottom: 40px; }
.vg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.vg-two > div { min-width: 0; }
.vg-h { color: inherit; }
.vg-h--ctx { font-size: var(--fs-ctx); margin: 20px 0 30px; }
.vg-h--role { font-size: var(--fs-role); margin: 20px 0 28px; }
.vg-h--prob { font-size: var(--fs-prob); margin-top: 22px; max-width: 1000px; }
.vg-p--intro { margin-top: 18px; }
.vg-two .vg-ey + .vg-p { margin-top: 18px; }

.vg-list { list-style: none; margin: 18px 0 0; padding: 0; }
.vg-list li { position: relative; padding-left: 22px; margin: 0 0 12px; font-size: 16px; line-height: 26px; }
.vg-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--bullet); }
.vg-p--intro + .vg-list { margin-top: 18px; }
.vg-list + .vg-p { margin-top: 18px; font-size: 18px; }
.vg-note { margin: 22px 0 0; font: 600 15px/24px var(--fb); color: var(--ink-2); }
.vg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
.vg-chips li { padding: 10px 18px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-ink); font: 600 15px/20px var(--fb); }

/* ---------- Modules ---------- */
.vg-mod { padding: 70px 0; }
.vg-mod__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.vg-mod.is-flip .vg-mod__text { order: 2; }
.vg-mod.is-flip .vg-mod__shots { order: 1; }
.vg-mod__text { min-width: 0; }
.vg-mod__card { background: var(--mod-bg); color: var(--mod-card-ink); border-radius: 24px; padding: var(--pad-mod); }
.vg-mod__card .vg-ey { color: var(--mod-label); margin-top: 28px; }
.vg-mod__card .vg-p--prob { font-size: 17px; line-height: 27px; margin-top: 12px; color: var(--mod-ink-2); }
.vg-mod__card .vg-list { margin-top: 14px; }
.vg-mod__card .vg-list li::before { background: var(--mod-bullet); }
.vg-mod__card .vg-list li { color: var(--mod-card-ink); }
.vg-mod__num { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vg-mod__num span { font: var(--hw) 30px/30px var(--fh); color: var(--mod-num); }
.vg-case[data-case="isa"] .vg-mod__num span { font-size: 26px; }
.vg-case[data-case="vantify"] .vg-mod__num span { font-size: 26px; }
.vg-tag { font: 600 12px/16px var(--fb); letter-spacing: 1.4px; text-transform: uppercase; font-style: normal; padding: 6px 14px; border-radius: 999px; background: var(--tag-bg); color: var(--tag-ink); }
.vg-h--mod { font-size: var(--fs-mod); margin-top: 20px; }
.vg-code { margin: 6px 0 0; font: 500 13px/20px ui-monospace, Menlo, Consolas, monospace; opacity: .85; overflow-wrap: anywhere; }
.vg-tiers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vg-tiers > div { flex: 1 1 88px; max-width: 104px; background: var(--tier-bg); color: var(--tier-ink); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; }
.vg-tiers b { font: var(--hw) 30px/30px var(--fh); }
.vg-tiers strong { font: var(--hw) 34px/34px var(--fh); color: var(--tier-pct); margin-top: 2px; }
.vg-tiers small { font: 500 12px/16px var(--fb); opacity: .6; margin-top: 4px; }

/* ---------- Bands ---------- */
.vg-band { background: var(--band-bg); color: var(--band-ink); padding: 110px 0; }
.vg-h--band { font-size: var(--fs-band); margin-top: 20px; max-width: 1000px; }
.vg-band--res .vg-h--band { font-size: var(--fs-res); }
.vg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; align-items: start; }
.vg-card2 { background: var(--card-bg); color: var(--card-ink); border-radius: 26px; padding: 34px; }
.vg-card2 h3 { font-size: var(--fs-card); }
.vg-card2 p { margin: 14px 0 0; font-size: 16px; line-height: 26px; color: var(--card-ink-2, var(--card-ink)); opacity: .92; }
.vg-case[data-case="isa"] .vg-card2, .vg-case[data-case="vantify"] .vg-card2 { border-radius: 24px; }
.vg-case[data-case="isa"] .vg-card2 p, .vg-case[data-case="vantify"] .vg-card2 p { font-weight: 600; font-size: 15px; }
.vg-case[data-case="vantify"] .vg-card2 p { font-weight: 500; }

.vg-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: start; }
.vg-rule { background: var(--card-bg); color: var(--card-ink); border-radius: 26px; padding: 32px; }
.vg-rule__n { display: block; font: var(--hw) 28px/28px var(--fh); color: var(--num); }
.vg-rule h3 { font-size: clamp(26px, 2.5vw, 36px); margin-top: 14px; }
.vg-rule p { margin: 14px 0 0; font-size: 16px; line-height: 26px; opacity: .92; }

/* Before / after (ISA) */
.vg-ba { margin-top: 44px; display: flex; flex-direction: column; gap: 16px; }
.vg-ba__head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vg-ba__head .vg-ey { padding-left: 4px; }
.vg-ba__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vg-ba__b, .vg-ba__a { border-radius: 20px; padding: 28px 30px; }
.vg-ba__b { background: #fff; color: #333; }
.vg-ba__a { background: #951b81; color: #faf7fa; }
.vg-ba__b p { margin: 0; font-size: 16px; line-height: 26px; }
.vg-ba__a p { margin: 0; font: 600 16px/26px var(--fb); }
.vg-ba__tag { display: none; margin-bottom: 8px; }
.vg-ba__b .vg-ba__tag { color: #333; }
.vg-ba__a .vg-ba__tag { color: #c3e236; }

/* Results */
.vg-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.vg-res__c { background: var(--card-bg); color: var(--card-ink); border-radius: 26px; padding: 40px 34px; display: flex; flex-direction: column; gap: 14px; }
.vg-res__c strong { font: var(--hw) clamp(36px, 3.6vw, 52px)/1 var(--fh); color: var(--num); }
.vg-case[data-case="isa"] .vg-res__c strong, .vg-case[data-case="vantify"] .vg-res__c strong { font-size: clamp(30px, 2.36vw, 34px); }
.vg-res__c span { font: 600 16px/24px var(--fb); }

/* ---------- Closing ---------- */
.vg-close { padding: 120px 0; text-align: center; color: var(--close-ink); }
.vg-h--close { font-size: var(--fs-close); max-width: 1200px; margin: 0 auto; }
.vg-close__btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.vg-cbtn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 30px; border-radius: 999px; font: 600 15px/20px var(--fb); border: 1.5px solid var(--btn2); color: var(--btn2); transition: transform .2s ease, opacity .2s ease; }
.vg-cbtn:hover { transform: translateY(-2px); }
.vg-cbtn--solid { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.vg-two { gap: 56px; }
	.vg-mod__grid { gap: 48px; }
	.vg-rules { grid-template-columns: 1fr 1fr; }
	.vg-meta { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
}
@media (max-width: 900px) {
	.vg-two, .vg-mod__grid { grid-template-columns: 1fr; }
	.vg-two { gap: 48px; }
	.vg-mod.is-flip .vg-mod__text, .vg-mod.is-flip .vg-mod__shots { order: initial; }
	.vg-mod__grid { gap: 32px; }
	.vg-cards { grid-template-columns: 1fr; }
	.vg-res { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.vg-chero__nav { padding: 24px 0; }
	.vg-case .vg-nav__links { background: var(--hero-bg); }
	.vg-chero__body { padding-bottom: 56px; }
	.vg-chero__crumb { margin-top: 12px; }
	.vg-chero__ey { margin-top: 22px; line-height: 20px; letter-spacing: 2.4px; }
	.vg-chero__h1 { margin-top: 18px; }
	.vg-chero__lede { margin-top: 22px; }
	.vg-meta { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
	.vg-shot { height: calc(var(--h, 360px) * .7); padding: 20px; }
	.vg-chero .vg-shot { margin-top: 28px; }
	.vg-shot.has-img { height: auto; }
	.vg-sec { padding: 64px 0; }
	.vg-sec--prob { padding-bottom: 16px; }
	.vg-mod { padding: 36px 0; }
	.vg-mod__card { padding: calc(var(--pad-mod) * .6); }
	.vg-band { padding: 64px 0; }
	.vg-cards, .vg-ba, .vg-res, .vg-rules { margin-top: 32px; }
	.vg-rules { grid-template-columns: 1fr; }
	.vg-card2 { padding: 26px; }
	.vg-rule { padding: 26px; }
	.vg-ba__head { display: none; }
	.vg-ba__row { grid-template-columns: 1fr; gap: 10px; }
	.vg-ba__tag { display: block; }
	.vg-ba { gap: 22px; }
	.vg-res__c { padding: 30px 26px; }
	.vg-close { padding: 72px 0; }
	.vg-close__btns { flex-direction: column; align-items: stretch; margin-top: 32px; }
	.vg-tiers > div { flex: 1 1 calc(33% - 10px); max-width: none; }
}
@media (max-width: 520px) {
	.vg-shotrow--2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vg-cbtn { transition: none; } }

/* =====================================================================
   Motion & flair (v1.2)
   ===================================================================== */
.vg-case[data-case="sikana"] { --ghost: rgba(94, 46, 9, .16); --hero-line: rgba(94, 46, 9, .25); --marq-bg: #f74007; --marq-ink: #fdf7e7; }
.vg-case[data-case="isa"] { --ghost: rgba(149, 27, 129, .22); --hero-line: rgba(250, 247, 250, .3); --marq-bg: #c3e236; --marq-ink: #1a1a1a; }
.vg-case[data-case="vantify"] { --ghost: rgba(255, 255, 255, .14); --hero-line: rgba(255, 255, 255, .22); --marq-bg: #00f678; --marq-ink: #0a0a0a; }

/* Scroll progress */
.vg-progress { position: fixed; left: 0; top: 0; right: 0; height: 4px; z-index: 9000; pointer-events: none; }
.vg-progress i { display: block; height: 100%; background: var(--electric); transform: scaleX(0); transform-origin: left; }

/* Hero stage */
.vg-chero { position: relative; overflow: hidden; isolation: isolate; }
.vg-chero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: translate; }
.vg-chero__nav, .vg-chero__body { position: relative; z-index: 2; }
.vg-meta > div { border-top: 1.5px solid var(--hero-line); padding-top: 14px; }

/* Vantify: liquid blobs (the same goo trick the case explains) */
.vg-fx-goo { position: absolute; inset: 0; filter: url(#vg-goo); opacity: .55; }
.vg-fx-goo .b { position: absolute; border-radius: 50%; width: 22vw; height: 22vw; max-width: 340px; max-height: 340px; min-width: 150px; min-height: 150px; animation: vgDrift 14s ease-in-out infinite alternate; }
.vg-fx-goo .b1 { background: #00f678; left: 58%; top: 8%; }
.vg-fx-goo .b2 { background: #ff6f32; left: 74%; top: 38%; animation-duration: 18s; animation-delay: -4s; width: 16vw; height: 16vw; }
.vg-fx-goo .b3 { background: #0372ff; left: 40%; top: 52%; animation-duration: 16s; animation-delay: -8s; }
.vg-fx-goo .b4 { background: #00f678; left: 8%; top: 62%; animation-duration: 20s; animation-delay: -2s; width: 14vw; height: 14vw; }
.vg-fx-goo .b5 { background: #ff6f32; left: 30%; top: 4%; animation-duration: 22s; animation-delay: -10s; width: 12vw; height: 12vw; }
.vg-fx-goo .b-follow { background: #00f678; width: 190px; height: 190px; left: 0; top: 0; animation: none; translate: 62vw 18vh; }
@keyframes vgDrift { from { transform: translate(-6vw, -3vh) scale(.9); } to { transform: translate(7vw, 6vh) scale(1.12); } }

/* ISA: dots, rings and a half moon */
.vg-fx-isa .dots { position: absolute; right: 0; top: 0; width: 56%; height: 100%; background-image: radial-gradient(#c3e236 1.6px, transparent 1.8px); background-size: 26px 26px; opacity: .35; -webkit-mask-image: linear-gradient(to left, #000 20%, transparent); mask-image: linear-gradient(to left, #000 20%, transparent); }
.vg-fx-isa .ring { position: absolute; border-radius: 50%; border: 2px solid #ed0677; }
.vg-fx-isa .r1 { width: 520px; height: 520px; right: -140px; top: 8%; animation: vgSpin 60s linear infinite; border-style: dashed; }
.vg-fx-isa .r2 { width: 300px; height: 300px; right: 14%; top: 42%; border-color: #c3e236; opacity: .8; animation: vgFloat 9s ease-in-out infinite alternate; }
.vg-fx-isa .half { position: absolute; width: 360px; height: 180px; left: -60px; bottom: 120px; background: #003878; border-radius: 360px 360px 0 0; transform: rotate(-14deg); opacity: .9; animation: vgFloat 11s ease-in-out infinite alternate-reverse; }

/* Sikana: sun circles and a spinning sticker */
.vg-fx-sik .c1 { position: absolute; width: 560px; height: 560px; right: -170px; top: 90px; border-radius: 50%; background: #e5eb7c; animation: vgFloat 12s ease-in-out infinite alternate; }
.vg-fx-sik .c2 { position: absolute; width: 190px; height: 190px; right: 22%; top: 620px; border-radius: 50%; background: #f74007; animation: vgFloat 8s ease-in-out infinite alternate-reverse; }
.vg-badge { position: absolute; right: calc(var(--gutter) + 40px); top: 190px; width: 170px; height: 170px; border-radius: 50%; background: #5e2e09; color: #fdf7e7; animation: vgSpin 22s linear infinite; }
.vg-badge svg { width: 100%; height: 100%; }
.vg-badge text { font: 600 14px var(--fb); fill: currentColor; }
.vg-badge path:last-child { fill: #e5eb7c; }
@keyframes vgSpin { to { transform: rotate(360deg); } }
@keyframes vgFloat { from { transform: translate(0, 0); } to { transform: translate(-30px, 34px); } }

/* Headline: words rise from a mask */
.vg-js .vg-chero__h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.vg-js .vg-chero__h1 .w i { display: inline-block; font-style: normal; transform: translateY(115%); animation: vgRise .95s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.1s * var(--i) + .15s); }
@keyframes vgRise { to { transform: none; } }

/* Marquee ribbon */
.vg-marq { overflow: hidden; background: var(--marq-bg); color: var(--marq-ink); padding: 20px 0; position: relative; z-index: 3; }
.vg-marq__t { display: flex; width: max-content; animation: vgMarq 38s linear infinite; }
.vg-marq__g { display: flex; align-items: center; flex-shrink: 0; }
.vg-marq span { font: var(--hw) clamp(22px, 2.3vw, 34px)/1.1 var(--fh); text-transform: uppercase; white-space: nowrap; padding: 0 clamp(16px, 2vw, 30px); }
.vg-marq b { font-size: 20px; line-height: 1; }
.vg-case[data-case="sikana"] .vg-marq span { letter-spacing: .02em; }
.vg-marq:hover .vg-marq__t { animation-play-state: paused; }
@keyframes vgMarq { to { transform: translateX(-50%); } }

/* Ghost numbers behind modules */
.vg-mod { position: relative; overflow: hidden; }
.vg-mod::before { content: attr(data-n); position: absolute; top: -30px; right: 2%; font: var(--hw) clamp(180px, 26vw, 380px)/1 var(--fh); color: transparent; -webkit-text-stroke: 2px var(--ghost); pointer-events: none; z-index: 0; }
.vg-mod.is-flip::before { right: auto; left: 2%; }
.vg-mod__grid { position: relative; z-index: 1; }

/* Hover life */
@media (hover: hover) {
	.vg-card2, .vg-rule, .vg-res__c, .vg-ba__b, .vg-ba__a, .vg-tiers > div { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
	.vg-card2:hover, .vg-rule:hover, .vg-res__c:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
	.vg-ba__b:hover, .vg-ba__a:hover { transform: translateX(6px); }
	.vg-tiers > div:hover { transform: translateY(-6px) rotate(-3deg); }
	.vg-shot { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
	.vg-mod__shots .vg-shot:hover { transform: scale(1.02) rotate(.4deg); }
	.vg-cbtn { transition: transform .25s ease, box-shadow .25s ease; }
	.vg-cbtn:hover { box-shadow: 0 10px 0 -2px rgba(0, 0, 0, .12); }
}

/* Scroll reveal */
.vg-js [data-r] { opacity: 0; transform: translateY(34px); transition: opacity .75s ease, transform .85s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.vg-js [data-r].in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
	.vg-fx-sik .c1 { width: 420px; height: 420px; right: -150px; }
	.vg-badge { width: 130px; height: 130px; top: 150px; }
}
@media (max-width: 760px) {
	.vg-fx-goo { filter: blur(34px); opacity: .5; }
	.vg-fx-goo .b-follow { translate: 55vw 20vh; width: 120px; height: 120px; }
	.vg-fx-isa .r1 { width: 320px; height: 320px; right: -150px; top: 14%; }
	.vg-fx-isa .r2 { width: 170px; height: 170px; right: 6%; top: 60%; }
	.vg-fx-isa .half { width: 220px; height: 110px; left: -50px; bottom: 60px; }
	.vg-fx-isa .dots { width: 100%; opacity: .25; }
	.vg-fx-sik .c1 { width: 300px; height: 300px; right: -110px; top: 120px; }
	.vg-fx-sik .c2 { width: 110px; height: 110px; right: 8%; top: 470px; }
	.vg-badge { width: 104px; height: 104px; right: 18px; top: 112px; }
	.vg-marq { padding: 14px 0; }
	.vg-marq__t { animation-duration: 26s; }
	.vg-mod::before { top: -10px; right: -2%; font-size: 150px; -webkit-text-stroke-width: 1.5px; }
	.vg-mod.is-flip::before { left: -2%; }
	.vg-meta > div { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.vg-marq__t, .vg-badge, .vg-fx-goo .b, .vg-fx-isa *, .vg-fx-sik * { animation: none !important; }
	.vg-js [data-r] { opacity: 1; transform: none; transition: none; }
	.vg-js .vg-chero__h1 .w i { transform: none; animation: none; }
}

.vg-dnote { display: inline-block; margin: 26px 0 0; padding: 10px 18px; border: 1.5px solid var(--hero-line); border-radius: 14px; font: 500 14px/22px var(--fb); color: var(--hero-ink); max-width: 760px; }
.vg-dnote::before { content: "✎ "; color: var(--hero-ey); }
@media (max-width: 760px) { .vg-dnote { margin-top: 20px; font-size: 13px; } }

/* Footer spacing on case pages */
.vg-case + .vg-footer { padding-top: 56px; }
@media (max-width: 760px) { .vg-case + .vg-footer { padding-top: 40px; } }
.vg-mod--solo .vg-mod__grid { grid-template-columns: minmax(0, 860px); }

/* Spanish accents/tildes (Á, É, Ñ, ¿) need room above the capitals */
.vg-case .vg-h--mod { margin-top: 20px; }
html[lang^="es"] .vg-case .vg-h, html[lang^="es"] .vg-case .vg-chero__h1 { padding-top: .16em; }
html[lang^="es"] .vg-case[data-case="sikana"] { --lh-h: 1.12; }

/* Fixed header support + desktop screenshots shown large (one per row) */
.vg-chero { z-index: 50; }
.vg-case[data-case="isa"] .vg-shotrow--2, .vg-case[data-case="vantify"] .vg-shotrow--2 { grid-template-columns: 1fr; }
.vg-case[data-case="isa"] .vg-shot.has-img img, .vg-case[data-case="vantify"] .vg-shot.has-img img { border-radius: 16px; }

.vg-shot.has-img video { display: block; width: 100%; height: auto; border-radius: 16px; background: #000; }

/* Vantify hero: deep green with a soft glow that follows the cursor (closer to the live site) */
.vg-case[data-case="vantify"] { --hero-bg: #0b2d17; }
.vg-case[data-case="vantify"] .vg-chero { background: radial-gradient(120% 90% at 88% 8%, #134226 0%, #0b2d17 55%, #07200f 100%); }
.vg-case .vg-fx-goo { filter: none; opacity: 1; }
.vg-case .vg-fx-goo .b1, .vg-case .vg-fx-goo .b2, .vg-case .vg-fx-goo .b3, .vg-case .vg-fx-goo .b5 { display: none; }
.vg-case .vg-fx-goo .b4 { width: 56vw; height: 56vw; max-width: 900px; max-height: 900px; left: -14%; top: 34%; background: radial-gradient(circle, rgba(60, 170, 100, .85) 0%, rgba(60, 170, 100, 0) 66%); animation-duration: 26s; }
.vg-case .vg-fx-goo .b-follow { width: 190px; height: 190px; background: radial-gradient(circle, rgba(72, 192, 118, .95) 0%, rgba(72, 192, 118, 0) 68%); transform: scale(3.6); }
@media (max-width: 760px) {
	.vg-case .vg-fx-goo { filter: none; opacity: 1; }
	.vg-case .vg-fx-goo .b-follow { width: 120px; height: 120px; transform: scale(4); }
}

/* Sikana mobile: keep the badge and the orange circle off the text */
@media (max-width: 760px) {
	.vg-case[data-case="sikana"] .vg-chero__ey { padding-right: 112px; }
	.vg-case[data-case="sikana"] .vg-badge { width: 96px; height: 96px; right: 18px; top: 118px; }
	.vg-case .vg-fx-sik .c2 { top: auto; bottom: 205px; width: 64px; height: 64px; right: 12%; }
}

/* Vantify hero: green blobs that drift slowly, merging and separating */
@keyframes vgW1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(14vw, 9vh) scale(1.15); } 50% { transform: translate(-5vw, 18vh) scale(.9); } 75% { transform: translate(-13vw, -4vh) scale(1.1); } }
@keyframes vgW2 { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(-16vw, 6vh) scale(1.12); } 60% { transform: translate(-8vw, -14vh) scale(.88); } 80% { transform: translate(6vw, 5vh) scale(1.05); } }
@keyframes vgW3 { 0%, 100% { transform: translate(0, 0) scale(1); } 20% { transform: translate(10vw, -12vh) scale(1.1); } 55% { transform: translate(18vw, 6vh) scale(.9); } 80% { transform: translate(-8vw, 10vh) scale(1.15); } }
.vg-case .vg-fx-goo { filter: url(#vg-goo) blur(12px); opacity: .6; }
.vg-case .vg-fx-goo .b { display: block; max-width: 380px; max-height: 380px; }
.vg-case .vg-fx-goo .b1 { width: 22vw; height: 22vw; left: 54%; top: 8%; background: #2fa863; animation: vgW1 26s ease-in-out infinite; }
.vg-case .vg-fx-goo .b2 { width: 18vw; height: 18vw; left: 72%; top: 38%; background: #3cc47a; animation: vgW2 31s ease-in-out infinite; }
.vg-case .vg-fx-goo .b3 { width: 24vw; height: 24vw; left: 36%; top: 48%; background: #238a52; animation: vgW3 34s ease-in-out infinite; }
.vg-case .vg-fx-goo .b4 { width: 22vw; height: 22vw; left: -2%; top: 38%; background: #2fa863; animation: vgW2 29s ease-in-out infinite reverse; }
.vg-case .vg-fx-goo .b5 { width: 16vw; height: 16vw; left: 24%; top: 6%; background: #44c97f; animation: vgW1 37s ease-in-out infinite reverse; }
.vg-case .vg-fx-goo .b-follow { width: 200px; height: 200px; background: #3cc47a; transform: none; animation: none; }
@media (max-width: 760px) {
	.vg-case .vg-fx-goo { filter: url(#vg-goo) blur(8px); opacity: .55; }
	.vg-case .vg-fx-goo .b { min-width: 110px; min-height: 110px; }
	.vg-case .vg-fx-goo .b-follow { width: 120px; height: 120px; transform: none; }
}

/* Vantify: bigger, softer blobs */
.vg-case .vg-fx-goo { filter: url(#vg-goo) blur(38px); opacity: .75; }
.vg-case .vg-fx-goo .b { max-width: 520px; max-height: 520px; }
.vg-case .vg-fx-goo .b1 { width: 28vw; height: 28vw; }
.vg-case .vg-fx-goo .b2 { width: 24vw; height: 24vw; }
.vg-case .vg-fx-goo .b3 { width: 30vw; height: 30vw; }
.vg-case .vg-fx-goo .b4 { width: 28vw; height: 28vw; }
.vg-case .vg-fx-goo .b5 { width: 22vw; height: 22vw; }
.vg-case .vg-fx-goo .b-follow { width: 260px; height: 260px; margin: -35px 0 0 -35px; }
@media (max-width: 760px) {
	.vg-case .vg-fx-goo { filter: url(#vg-goo) blur(26px); opacity: .7; }
	.vg-case .vg-fx-goo .b { min-width: 150px; min-height: 150px; }
	.vg-case .vg-fx-goo .b-follow { width: 170px; height: 170px; margin: 10px 0 0 10px; }
}

/* Header above the hero image; phones/tablets: no SVG filter (iOS ignores it), 3 blobs of different sizes */
.vg-case .vg-chero__nav { z-index: 60; }
@media (max-width: 760px), (hover: none) {
	.vg-case .vg-fx-goo { filter: blur(42px); opacity: .75; }
	.vg-case .vg-fx-goo .b { min-width: 0; min-height: 0; max-width: none; max-height: none; }
	.vg-case .vg-fx-goo .b2, .vg-case .vg-fx-goo .b5, .vg-case .vg-fx-goo .b-follow { display: none; }
	.vg-case .vg-fx-goo .b1 { width: 72vw; height: 72vw; left: 38%; top: 6%; }
	.vg-case .vg-fx-goo .b3 { width: 96vw; height: 96vw; left: -20%; top: 40%; }
	.vg-case .vg-fx-goo .b4 { width: 54vw; height: 54vw; left: 55%; top: 66%; }
}