Build a single-file HTML landing page for "SmartCare Solutions", a clinical AI platform, whose entire design system is one CSS control: a round power switch that lights up when it is on. Inter Tight from Google Fonts, GSAP 3.12 + ScrollTrigger from a CDN, everything else inline — every illustration, avatar and icon is inline SVG, and no asset is hotlinked.
BUILD THE SWITCH FIRST; EVERYTHING ELSE IS IT, RESIZED
A hidden checkbox, a circular label, an icon inside it.
- Unlit: a dark fill, a 2px grey rim, and `box-shadow: 0 0 3px rgb(2,2,2) inset` so the face sits below the surface. The icon's path is filled grey — fill, not stroke, so the glow has something solid to bloom off.
- Lit (`input:checked + .switch`): the rim goes white, the fill turns pale teal, and one shadow list does all the work — `0 0 1px`, `0 0 2px` and `0 0 10px` of rgb(151,243,255) inset, then `0 0 40px` and `0 0 100px` of it outside, then a `0 0 5px` rim. The icon gets `filter: drop-shadow(0 0 5px)` in the same cyan and a white fill.
- Put the size in a variable so the same control is a 70px power button or a 48px chip.
Then scale that recipe into the pill CTAs: idle keeps the dark inset, and hover, focus-within and a permanent `is-live` class all share one lit state built from the same stack. Soften only the two widest blooms to rgba there — at 40px and 100px of solid cyan a 300px pill lights the whole section instead of itself — and on any backdrop-filtered surface drop them entirely, since the filter's own layer clips them.
Because it is CSS, the button has no JS, no runtime and no loading state; the page renders lit with scripting off.
THE HERO'S LIGHT SOURCE
Behind the hero runs an iridescence shader, in plain WebGL in a script tag — no framework, no npm, no ogl. One full-screen triangle, one fragment shader: eight iterations where `a` feeds `d` and `d` feeds `a` (`a += cos(i - d - a * uv.x); d += sin(uv.y * i + a);`), then the result cosine-folded twice into RGB. That mutual feedback is what makes the bands fold into each other like oil on water instead of drifting in parallel.
Fit it to the page instead of dropping it on top: uColor multiplies the final sweep, so it is the palette knob — set it to the page's indigo (0.42, 0.46, 1.0) and the whole thing lands on this palette. Screen-blend the canvas so the dark board shows through rather than being covered, and mask it to an ellipse so it reads as a glow with an origin rather than a rectangle. The pointer moves the field through uMouse, smoothed at 0.06 — never by transforming the canvas, which would drag the mask along with it. Cap DPR at 1.5, pause when the hero scrolls out or the tab hides, and under reduced motion draw one settled frame and stop. No context: fall back to three blurred radial gradients in the same three hues.
ONE LIGHT, EVERYWHERE (the synthesis)
The shader sweeps cyan → blue → violet → magenta. Name that sweep once as a token and cut everything else from it, so the page has a single light source rather than a background and some accents:
- The confidence bars in the findings panel run the full sweep, starting on the switch's cyan.
- Every clay card carries a 1px hairline of it along its top edge, at zero opacity until hover — the card catches the sheen as you pass.
- The lit switch sits inside a slowly turning conic ring of the same sweep, masked to a 2px annulus: the cyan core stays the signal, the ring is where the signal comes from.
- The button's bloom leaves cyan and lands on violet and magenta at its outer edge, the way the shader's bands do.
- Section numbers are the sweep, background-clipped to the text.
DESIGN SYSTEM (sampled from the artboard, not invented)
- Board #05070e, pill idle #0e1343, pill hover #181f77, idle label #8789a1, hover label #ffffff.
- The two arcs are the only accents: magenta #ff3b7f along the top, electric blue #3d6cff along the bottom, with #7a3bff between them in gradients.
- Surfaces: #0b1030 cards on the board, hairlines rgba(124,146,255,.14/.26), text #eef1ff, muted #8789a1.
- Every raised thing wears the pill's own edge: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.5), then a deep ambient shadow and, when active, a blue bloom. Radius 999px for controls, 24px for cards.
- Nav pills, cohort tabs, chips and the FAQ signs are all CSS twins of the button: indigo fill, hairline, blue glow when active.
THE BUTTON COMPONENT — the part that takes care
The artboard paints its own near-black board and bakes the word "Button" into the pill, so it cannot be used as-is. Composite it instead:
1. Markup is a wrapper holding a