{
  "design": {
    "id": "tempo",
    "name": "Tempo",
    "niche": "Design subscription agency",
    "vibe": "Fluid, punchy, always in motion",
    "tailwindVersion": "4.3.3",
    "fonts": {
      "heading": "Bricolage Grotesque",
      "body": "Figtree",
      "label": "JetBrains Mono"
    },
    "colors": {
      "background": "#f4f2ec",
      "foreground": "#121218",
      "primary": "#2b45ff",
      "primary-foreground": "#ffffff",
      "card": "#ffffff",
      "card-foreground": "#121218",
      "muted": "#e8e5dc",
      "muted-foreground": "#55545d",
      "border": "#d8d4c9",
      "accent": "#ff7438",
      "accent-foreground": "#1d0c03",
      "secondary": "#121218",
      "secondary-foreground": "#f4f2ec",
      "popover": "#ffffff",
      "popover-foreground": "#121218",
      "destructive": "#b42318",
      "input": "#d8d4c9",
      "ring": "#2b45ff"
    },
    "typography": {
      "hero": "clamp(3.6rem,7vw,6.6rem)",
      "heroMobile": "clamp(2.8rem,12vw,4.4rem)",
      "headingTracking": "-.045em",
      "headingLineHeight": ".98",
      "headingWeight": "600",
      "bodySize": "1.0625rem",
      "bodyLineHeight": "1.6"
    },
    "spacing": {
      "unit": ".25rem",
      "contentWidth": "1240px",
      "gutter": "clamp(1.25rem,4vw,3.5rem)",
      "section": "7rem",
      "layoutGap": "1.5rem"
    },
    "radii": {
      "base": "28px"
    },
    "shadows": {
      "card": "0 24px 60px -24px #12121833"
    },
    "motifs": [
      "Floating glass pill navigation",
      "Endlessly scrolling columns of work tiles",
      "Words that light up as the reader scrolls",
      "Opposing marquees of style chips",
      "Cobalt panels with a single tangerine dot"
    ],
    "motion": {
      "character": "Always moving, never in the way: blur-in headlines, looping work columns and marquees, scroll-scrubbed text and a showreel that grows into view; every hover answers with a spring",
      "fast": "220ms",
      "easing": "cubic-bezier(.22,1,.36,1)",
      "respectReducedMotion": true,
      "pauseControl": true
    },
    "layoutGuidance": "Light paper ground, ink type and cobalt panels; motion carries the page, so keep sections simple and let one animation lead each. Big rounded cards (28px), pill buttons, mono labels. Additional section references: Scroll-lit manifesto paragraph with count-up stats; Showreel panel that scales into view; Stacking sticky process cards; Monthly/quarterly pricing switch with animated figures. Footer: Ink panel with a waving oversized wordmark, a magnetic start button and compact navigation. Choose the sections relevant to the new brief rather than repeating this sequence.",
    "reusePolicy": "Transfer typography, spacing rhythm, semantic colors, component treatments, imagery direction and motion principles. Compose a new layout for the user’s content; do not copy this page structure or fictional copy.",
    "shadcnMapping": {
      "btn": "Button",
      "card": "Card",
      "contact-dialog": "Dialog + Form + Input + Textarea",
      "mobile-nav": "Sheet",
      "badge": "Badge",
      "billing-switch": "Switch"
    },
    "demo": {
      "fictionalBrand": true,
      "backend": false
    },
    "revision": 1,
    "sectionIdeas": [
      "Scroll-lit manifesto paragraph with count-up stats",
      "Showreel panel that scales into view",
      "Stacking sticky process cards",
      "Monthly/quarterly pricing switch with animated figures"
    ],
    "footerDesign": "Ink panel with a waving oversized wordmark, a magnetic start button and compact navigation",
    "sortOrder": 11
  },
  "themeTokensCSS": ":root {\n  --background: #f4f2ec;\n  --foreground: #121218;\n  --primary: #2b45ff;\n  --primary-foreground: #ffffff;\n  --card: #ffffff;\n  --card-foreground: #121218;\n  --muted: #e8e5dc;\n  --muted-foreground: #55545d;\n  --border: #d8d4c9;\n  --accent: #ff7438;\n  --accent-foreground: #1d0c03;\n  --secondary: #121218;\n  --secondary-foreground: #f4f2ec;\n  --popover: #ffffff;\n  --popover-foreground: #121218;\n  --destructive: #b42318;\n  --input: #d8d4c9;\n  --ring: #2b45ff;\n  --font-heading: 'Bricolage Grotesque', sans-serif;\n  --font-body: 'Figtree', sans-serif; --font-label: 'JetBrains Mono', monospace;\n  --radius:28px; --shadow:0 24px 60px -24px #12121833; --hero-size:clamp(3.6rem,7vw,6.6rem); --hero-mobile:clamp(2.8rem,12vw,4.4rem);\n  --heading-tracking:-.045em; --heading-line:.98; --heading-weight:600;\n  --content-width:1240px; --gutter:clamp(1.25rem,4vw,3.5rem); --section-space:7rem; --layout-gap:1.5rem; --motion-fast:220ms; --ease-spring:cubic-bezier(.22,1,.36,1);\n}",
  "tailwindThemeCSS": "@theme inline {\n  --color-background:var(--background);\n  --color-foreground:var(--foreground);\n  --color-primary:var(--primary);\n  --color-primary-foreground:var(--primary-foreground);\n  --color-card:var(--card);\n  --color-card-foreground:var(--card-foreground);\n  --color-muted:var(--muted);\n  --color-muted-foreground:var(--muted-foreground);\n  --color-border:var(--border);\n  --color-accent:var(--accent);\n  --color-accent-foreground:var(--accent-foreground);\n  --color-secondary:var(--secondary);\n  --color-secondary-foreground:var(--secondary-foreground);\n  --color-popover:var(--popover);\n  --color-popover-foreground:var(--popover-foreground);\n  --color-destructive:var(--destructive);\n  --color-input:var(--input);\n  --color-ring:var(--ring);\n  --font-sans:var(--font-body); --font-display:var(--font-heading); --font-mono:var(--font-label);\n  --radius-sm:calc(var(--radius)*.5); --radius-md:var(--radius); --radius-lg:calc(var(--radius)*1.5);\n  --spacing-gutter:var(--gutter); --spacing-section:var(--section-space); --container-content:var(--content-width);\n  --ease-spring:var(--ease-spring);\n}",
  "componentAndMotifCSS": "\n*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:6rem}body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;overflow-x:clip}button,input,textarea,select{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}@layer base{h1,h2,h3,p{margin:0}p{max-width:62ch}}h1,h2,h3{font-family:var(--font-heading);font-weight:var(--heading-weight);text-wrap:balance}h1{font-size:var(--hero-size);line-height:var(--heading-line);letter-spacing:var(--heading-tracking)}h2{font-size:clamp(2.3rem,4.6vw,4.2rem);line-height:1.02;letter-spacing:var(--heading-tracking)}h3{font-size:1.45rem;line-height:1.15;letter-spacing:-.02em}section[id]{scroll-margin-top:6rem}.wrap{width:min(var(--content-width),calc(100% - var(--gutter)*2));margin-inline:auto}.section{padding-block:var(--section-space)}.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-label);font-size:.75rem;line-height:1.5;font-weight:500;text-transform:uppercase;letter-spacing:.12em}.eyebrow:before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}.muted{color:var(--muted-foreground)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.25rem;padding:.55rem .6rem .55rem 1.5rem;border:1px solid transparent;border-radius:999px;background:var(--secondary);color:var(--secondary-foreground);font-size:.95rem;font-weight:600;line-height:1.3;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) ease,background var(--motion-fast) ease}.btn .btn-dot{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--primary);color:var(--primary-foreground);transition:transform var(--motion-fast) var(--ease-spring)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.btn:hover .btn-dot{transform:rotate(-45deg) scale(1.08)}.btn.ghost{background:var(--card);color:var(--card-foreground);border-color:var(--border);padding-inline:1.5rem}.btn.cobalt{background:var(--primary);color:var(--primary-foreground)}.btn.cobalt .btn-dot{background:var(--card);color:var(--primary)}.icon{width:1.1rem;height:1.1rem;display:inline-block;flex-shrink:0;vertical-align:middle}.skip{position:fixed;z-index:100;left:1rem;top:-8rem;background:var(--primary);color:var(--primary-foreground);padding:1rem;border-radius:12px}.skip:focus{top:1rem}:focus-visible{outline:3px solid var(--ring);outline-offset:4px}.card{padding:2rem;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius)}.section-title{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:3.5rem}.section-title p{max-width:24rem}.section-title h2{max-width:16ch;margin-top:1.2rem}\n\n.site-header{position:sticky;top:.9rem;z-index:40;padding-top:.9rem}.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4rem;padding:.45rem .5rem .45rem 1.1rem;border:1px solid #ffffffb3;border-radius:999px;background:#f4f2ecd9;backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 10px 30px -18px #12121866}.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-heading);font-weight:700;font-size:1.35rem;letter-spacing:-.04em}.brand-mark{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--primary);position:relative}.brand-mark:after{content:'';position:absolute;right:.2rem;bottom:.2rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);animation:dot-orbit 6s var(--ease-spring) infinite}.nav-links{display:flex;gap:.3rem;font-size:.92rem}.nav-links a{padding:.55rem .9rem;border-radius:999px;transition:background var(--motion-fast) ease}.nav-links a:hover{background:var(--muted)}.nav .btn{min-height:2.9rem}.mobile-nav{display:none;position:relative}.mobile-nav summary{cursor:pointer;list-style:none;padding:.7rem 1.1rem;border-radius:999px;background:var(--secondary);color:var(--secondary-foreground);font-size:.9rem;font-weight:600}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-links{position:absolute;right:0;top:3.5rem;z-index:30;min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:22px;padding:.6rem;box-shadow:var(--shadow)}.mobile-links a{display:block;padding:.8rem 1rem;border-radius:14px}.mobile-links a:hover{background:var(--muted)}\n\n.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;min-height:min(820px,calc(100svh - 5.5rem));padding-block:3rem 4rem}.badge{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .9rem .35rem .4rem;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:.85rem}.badge b{padding:.15rem .6rem;border-radius:999px;background:var(--accent);color:var(--accent-foreground);font-size:.75rem;font-weight:600}.hero h1{margin-top:1.6rem}.hero h1 .word{display:inline-block}.js .hero h1 .word{animation:blur-in 900ms var(--ease-spring) both;animation-delay:calc(var(--i)*90ms + 120ms)}.hero h1 .hl{position:relative;color:var(--primary)}.hero h1 .hl:after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.12em;border-radius:99px;background:var(--accent);transform-origin:left;animation:draw 900ms var(--ease-spring) 900ms both}.hero-lede{margin-top:1.6rem;font-size:1.15rem;color:var(--muted-foreground);max-width:32rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}.hero-proof{display:flex;align-items:center;gap:.9rem;margin-top:2.4rem;font-size:.9rem;color:var(--muted-foreground)}.faces{display:flex}.faces span{width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid var(--background);margin-left:-.55rem;display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#fff}.faces span:first-child{margin-left:0}\n\n.work-columns{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;height:min(640px,72svh);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}.work-col{display:flex;flex-direction:column;gap:1rem;animation:col-up 26s linear infinite}.work-col.down{animation-name:col-down;animation-duration:32s}.work-col.slow{animation-duration:38s}.work-columns:hover .work-col{animation-play-state:paused}.tile{flex:none;aspect-ratio:4/5;border-radius:22px;padding:1.1rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}.tile small{font-family:var(--font-label);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}.tile strong{font-family:var(--font-heading);font-weight:600;font-size:1.75rem;line-height:.95;letter-spacing:-.04em}.tile.wide{aspect-ratio:1/1}.tile>*{position:relative;z-index:1}.t-cobalt{background:var(--primary);color:#fff}.t-tang{background:var(--accent);color:var(--accent-foreground)}.t-ink{background:var(--secondary);color:var(--secondary-foreground);background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);background-size:22px 22px}.t-paper{background:var(--card);color:var(--foreground);border:1px solid var(--border)}.t-paper:after{content:'';position:absolute;width:70%;aspect-ratio:1;right:-18%;bottom:-18%;border-radius:50%;background:var(--primary);opacity:.9}.t-lilac{background:#d9dcff;color:#141a5c}.t-sun{background:#ffe2c9;color:#4a1d03}.t-sun:after{content:'';position:absolute;width:44%;aspect-ratio:1;right:12%;top:18%;border-radius:50%;background:var(--accent);animation:pulse 3.4s ease-in-out infinite}.t-ui{background:var(--card);border:1px solid var(--border);color:var(--foreground)}.t-ui i{display:block;height:.55rem;border-radius:9px;background:var(--muted);margin-top:.45rem}.t-ui i:nth-of-type(1){width:70%;background:var(--primary)}.t-ui i:nth-of-type(2){width:90%}.t-ui i:nth-of-type(3){width:55%}\n\n.marquee{overflow:hidden;padding-block:1.6rem;border-block:1px solid var(--border)}.marquee-track{display:flex;width:max-content;animation:slide-left 36s linear infinite}.marquee-track span{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-heading);font-weight:600;font-size:1.35rem;letter-spacing:-.03em;color:#4b4a53;white-space:nowrap;padding-right:3.5rem}.marquee-track span:before{content:'';width:.8rem;height:.8rem;border-radius:4px;background:currentColor;transform:rotate(45deg)}\n\n.manifesto{display:grid;grid-template-columns:.32fr 1fr;gap:3rem}.lit{font-family:var(--font-heading);font-size:clamp(1.9rem,3.6vw,3.25rem);line-height:1.12;letter-spacing:-.035em;font-weight:500;max-width:none}.js .lit .w{color:#8f8b81;transition:color 260ms ease}.js .lit .w.on{color:var(--foreground)}.lit .pill-word{display:inline-block;padding:0 .35em;border-radius:999px;background:var(--primary);color:#fff!important;transform:rotate(-2deg)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-gap);margin-top:4.5rem;border-top:1px solid var(--border);padding-top:2.5rem}.stat strong{display:block;font-family:var(--font-heading);font-weight:600;font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.05em}.stat strong sup{font-size:.45em;color:var(--primary);vertical-align:top;margin-left:.08em}.stat>span{display:block;margin-top:.6rem;font-size:.95rem;color:var(--muted-foreground)}\n\n.reel-wrap{padding-block:1rem 2rem}.reel{--reel:1;position:relative;overflow:hidden;border-radius:calc(var(--radius) + (1 - var(--reel))*28px);min-height:min(620px,78svh);display:grid;place-items:center;text-align:center;padding:3rem 1.5rem;background:var(--primary);color:#fff;transform:scale(calc(.9 + var(--reel)*.1));transform-origin:center top;will-change:transform}.js .reel{--reel:0}.reel-blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9}.reel-blob.a{width:42%;aspect-ratio:1;left:-8%;top:-14%;background:radial-gradient(circle at 30% 30%,#6f80ff,transparent 70%);animation:drift 14s ease-in-out infinite}.reel-blob.b{width:36%;aspect-ratio:1;right:-6%;bottom:-16%;background:radial-gradient(circle at 60% 40%,#ff9a6b,transparent 68%);animation:drift 18s ease-in-out infinite reverse}.reel-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:56px 56px}.reel-copy{position:relative;z-index:1}.reel-copy p.eyebrow{color:#fff}.reel-copy p.eyebrow:before{background:var(--accent)}.reel-title{margin-top:1.2rem;font-family:var(--font-heading);font-weight:600;font-size:clamp(2.6rem,6vw,5.4rem);line-height:1;letter-spacing:-.05em}.rotator{display:inline-grid;height:1.05em;overflow:hidden;vertical-align:bottom;color:#ffc9ad}.rotator span{grid-area:1/1;animation:rotate-words 9s var(--ease-spring) infinite both}.rotator span:nth-child(2){animation-delay:3s}.rotator span:nth-child(3){animation-delay:6s}.reel-play{margin-top:2.2rem}.reel-play[aria-pressed=true] .play-on,.reel-play[aria-pressed=false] .play-off{display:none}.reel.still *{animation-play-state:paused!important}\n\n.styles{overflow:hidden}.chip-row{display:flex;width:max-content;animation:slide-left 40s linear infinite}.chip-row.reverse{animation-name:slide-right;margin-top:.8rem}.chip{display:inline-flex;margin-right:.8rem;align-items:center;gap:.5rem;padding:.75rem 1.2rem;border-radius:999px;background:var(--card);border:1px solid var(--border);font-weight:500;white-space:nowrap;transition:background var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) var(--ease-spring)}.chip:hover{background:var(--secondary);color:var(--secondary-foreground);transform:translateY(-3px) rotate(-2deg)}.chip i{width:.65rem;height:.65rem;border-radius:50%;background:var(--c,var(--primary))}\n\n.steps{display:grid;gap:1.4rem}.step{position:sticky;top:calc(6rem + var(--n)*1.1rem);display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;min-height:15rem;padding:2.4rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);box-shadow:0 -16px 40px -30px #12121866}.step:nth-child(2){background:#e7e9ff}.step:nth-child(3){background:var(--secondary);color:var(--secondary-foreground);border-color:transparent}.step:nth-child(3) .muted{color:#bdbbc6}.step-num{font-family:var(--font-heading);font-weight:600;font-size:clamp(4rem,9vw,7.5rem);line-height:.8;letter-spacing:-.06em;color:var(--primary)}.step:nth-child(3) .step-num{color:var(--accent)}.step h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}.step p{margin-top:.6rem}.step-art{width:7.5rem;height:7.5rem;border-radius:50%;border:1.5px dashed currentColor;display:grid;place-items:center;opacity:.9}.step-art span{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--accent);animation:dot-orbit 5s var(--ease-spring) infinite}\n\n.service{display:grid;grid-template-columns:4rem 1.3fr 1fr 3rem;gap:1.5rem;align-items:center;padding:1.8rem 1.2rem;border-top:1px solid var(--border);position:relative;isolation:isolate;transition:color 320ms var(--ease-spring)}.service:last-child{border-bottom:1px solid var(--border)}.service:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:20px;background:var(--primary);transform:scaleY(.2);opacity:0;transition:transform 420ms var(--ease-spring),opacity 260ms ease}.service:hover,.service:focus-within{color:#fff}.service:hover:before,.service:focus-within:before{transform:none;opacity:1}.service:hover .muted,.service:focus-within .muted{color:#dfe3ff}.service .idx{font-family:var(--font-label);font-size:.8rem}.service h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}.service .arrow{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;transition:transform 420ms var(--ease-spring)}.service:hover .arrow,.service:focus-within .arrow{transform:rotate(-45deg);background:var(--accent);border-color:var(--accent);color:var(--accent-foreground)}\n\n.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--layout-gap)}.project{display:block;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--border);transition:transform 420ms var(--ease-spring),box-shadow 420ms ease}.project:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:var(--shadow)}.project-art{aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden}.project-art b{font-family:var(--font-heading);font-weight:600;font-size:2.4rem;letter-spacing:-.05em;transition:transform 520ms var(--ease-spring)}.project:hover .project-art b{transform:scale(1.08) translateY(-4px)}.project-art:after{content:'';position:absolute;width:30%;aspect-ratio:1;border-radius:50%;right:-6%;top:-8%;background:var(--accent);transition:transform 520ms var(--ease-spring)}.project:hover .project-art:after{transform:translate(-40%,40%) scale(1.3)}.project-body{padding:1.5rem}.project-body dl{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}.project-body dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.project-body dd{margin:0;padding:.3rem .75rem;border-radius:999px;background:var(--muted);font-size:.8rem}\n\n.pricing-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3rem}.billing{display:inline-flex;align-items:center;gap:.9rem;font-weight:500}.switch{position:relative;width:4.2rem;height:2.4rem;border-radius:999px;border:0;background:var(--secondary);padding:0}.switch:after{content:'';position:absolute;top:.3rem;left:.3rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--accent);transition:transform 420ms var(--ease-spring)}.switch[aria-checked=true]:after{transform:translateX(1.8rem)}.save{padding:.25rem .65rem;border-radius:999px;background:#e7e9ff;color:var(--primary);font-size:.8rem;font-weight:600}.plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-gap)}.plan{position:relative;padding:2.4rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);overflow:hidden}.plan.featured{background:var(--primary);color:#fff;border-color:transparent}.plan.featured .muted{color:#dfe3ff}.plan-price{display:flex;align-items:baseline;gap:.4rem;margin-top:1.6rem}.plan-price strong{font-family:var(--font-heading);font-weight:600;font-size:clamp(3rem,5vw,4.4rem);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}.plan ul{list-style:none;padding:0;margin:2rem 0;display:grid;gap:.75rem}.plan li{display:flex;gap:.7rem;align-items:center}.plan li:before{content:'';width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);flex:none}.plan .btn{width:100%;justify-content:space-between}.plan.featured .btn{background:var(--card);color:var(--card-foreground)}.plan-tag{position:absolute;top:1.6rem;right:1.6rem;padding:.3rem .8rem;border-radius:999px;background:var(--accent);color:var(--accent-foreground);font-size:.78rem;font-weight:600}\n\n\n.tempo-footer{margin-top:4rem;padding:1rem}.footer-panel{border-radius:calc(var(--radius) + 8px);background:var(--secondary);color:var(--secondary-foreground);padding:clamp(2rem,5vw,4rem) clamp(1.25rem,4vw,3.5rem) 1.5rem;overflow:hidden}.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem}.footer-top h2{max-width:14ch}.magnet{display:inline-grid;place-items:center;width:clamp(9rem,15vw,12rem);aspect-ratio:1;border-radius:50%;border:0;background:var(--accent);color:var(--accent-foreground);font-family:var(--font-heading);font-weight:600;font-size:1.15rem;line-height:1.1;text-align:center;padding:1rem;transition:transform 380ms var(--ease-spring)}.magnet span{display:block;pointer-events:none}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-top:3.5rem;padding-top:2rem;border-top:1px solid #ffffff26;font-size:.92rem}.footer-grid nav a{display:block;width:fit-content;padding:.35rem 0;color:#cfcdd8}.footer-grid nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}.footer-grid h3{font-family:var(--font-label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:#9e9caa;margin-bottom:.6rem}.footer-word{display:flex;margin-top:2.5rem;padding-bottom:.12em;font-family:var(--font-heading);font-weight:700;font-size:clamp(4.5rem,22vw,20rem);line-height:.9;letter-spacing:-.02em;color:var(--primary)}.footer-word span{display:inline-block;animation:wave 3.2s var(--ease-spring) infinite;animation-delay:calc(var(--i)*120ms)}.footer-word span:last-child{color:var(--accent)}.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.5rem;font-size:.8rem;color:#9e9caa}.footer-bottom a{text-decoration:underline;text-underline-offset:4px}.motion-control{border:1px solid #ffffff40;border-radius:999px;background:transparent;color:inherit;font-size:.8rem;padding:.5rem 1rem;min-height:2.75rem}\n\n.contact-dialog{width:min(540px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;padding:2rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--card-foreground);box-shadow:var(--shadow)}.contact-dialog[open]{animation:pop 360ms var(--ease-spring)}.contact-dialog::backdrop{background:#12121866;backdrop-filter:blur(6px)}.contact-dialog h2{font-size:2.2rem;margin-block:.8rem}.contact-dialog label{display:block;font-size:.9rem;font-weight:500;margin-top:1rem}.contact-dialog input,.contact-dialog textarea{display:block;width:100%;margin-top:.4rem;padding:.85rem 1rem;border:1px solid var(--input);border-radius:16px;background:var(--background);color:var(--foreground)}.contact-dialog .close{float:right;background:var(--muted);border:0;width:2.75rem;height:2.75rem;border-radius:50%;font-size:1.3rem}.contact-dialog .status{margin-top:1rem;font-size:.9rem}\n\n.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--ease-spring),transform 800ms var(--ease-spring)}.js .reveal.in{opacity:1;transform:none}.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.motion-paused .contact-dialog{animation:none}[hidden]{display:none!important}\n\n@keyframes blur-in{from{opacity:0;filter:blur(14px);transform:translateY(.35em)}to{opacity:1;filter:none;transform:none}}@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes col-up{to{transform:translateY(calc(-50% - .5rem))}}@keyframes col-down{from{transform:translateY(calc(-50% - .5rem))}to{transform:none}}@keyframes slide-left{to{transform:translateX(-50%)}}@keyframes slide-right{from{transform:translateX(-50%)}to{transform:none}}@keyframes drift{50%{transform:translate(8%,10%) scale(1.12)}}@keyframes pulse{50%{transform:scale(1.18)}}@keyframes dot-orbit{0%,100%{transform:none}25%{transform:translate(-.55rem,0)}50%{transform:translate(-.55rem,-.55rem)}75%{transform:translate(0,-.55rem)}}@keyframes rotate-words{0%{transform:translateY(105%)}6%,30%{transform:none}36%,100%{transform:translateY(-105%)}}@keyframes wave{0%,60%,100%{transform:none}20%{transform:translateY(-.08em) rotate(-2deg)}}@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}\n\n@media(max-width:960px){.hero{grid-template-columns:1fr;min-height:0;padding-top:2.5rem}.work-columns{height:420px;grid-template-columns:repeat(2,1fr)}.work-col.slow{display:none}.manifesto{grid-template-columns:1fr;gap:1.5rem}.projects{grid-template-columns:1fr 1fr}.projects .project:last-child{grid-column:1/-1}.footer-grid{grid-template-columns:1fr 1fr}}\n@media(max-width:760px){.nav-links,.nav>.btn{display:none}.mobile-nav{display:block}.section{padding-block:4.5rem}h1{font-size:var(--hero-mobile)}.section-title{display:block}.section-title>p{margin-top:1.2rem}.stats{grid-template-columns:1fr 1fr;row-gap:2rem}.step{grid-template-columns:1fr;gap:1rem;min-height:0;padding:1.8rem}.step-art{display:none}.service{grid-template-columns:2.2rem 1fr 2.6rem;padding-inline:.6rem}.service p{grid-column:2}.service .arrow{grid-column:3;grid-row:1;width:2.6rem;height:2.6rem}.projects,.plans{grid-template-columns:1fr}.plan,.card{padding:1.8rem}.tile strong{font-size:1.35rem}.footer-grid{grid-template-columns:1fr}.reel{min-height:420px}}\n@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}.js .reel{--reel:1}.js .lit .w{color:var(--foreground)}.rotator span:not(:first-child){display:none}}\n",
  "implementationNotes": [
    "This is a style reference, not a layout to copy. Compose around the new content.",
    "Use the semantic colors and font roles. Preserve the spacing rhythm and contrast.",
    "In React, use the existing shadcn components and apply the supplied tokens.",
    "HTML dialog/details examples are native counterparts, not the actual shadcn React implementation.",
    "Keep reduced-motion support, keyboard operation, focus visibility and responsive layouts.",
    "Replace fictional business copy, sample prices, photos and all demo-only behavior.",
    "Compile Tailwind in the production builder; the browser CDN is for these references."
  ]
}