diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index 657a098..e26f594 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -88,6 +88,10 @@ export default function Hero() { type: "lines,words", linesClass: "hero__line", }); + // Apply the brand gradient to the final word ("revenue.") AFTER splitting. + // A pre-nested got clipped by the line mask and never + // revealed; as a normal split word it animates + shows correctly. + split.words[split.words.length - 1]?.classList.add("grad"); gsap.set(".hero__h1", { autoAlpha: 1 }); gsap.set(".hero__line", { overflow: "hidden" }); // Fast, tight cascade so the FULL headline — including the last word @@ -255,7 +259,7 @@ export default function Hero() {

- Marketing that grows your revenue. + Marketing that grows your revenue.

diff --git a/audit2/desktop-faq.png b/audit2/desktop-faq.png new file mode 100644 index 0000000..e700a6c Binary files /dev/null and b/audit2/desktop-faq.png differ diff --git a/audit2/desktop-final.png b/audit2/desktop-final.png new file mode 100644 index 0000000..67fecb5 Binary files /dev/null and b/audit2/desktop-final.png differ diff --git a/audit2/desktop-fold.png b/audit2/desktop-fold.png new file mode 100644 index 0000000..bde9882 Binary files /dev/null and b/audit2/desktop-fold.png differ diff --git a/audit2/desktop-full.png b/audit2/desktop-full.png new file mode 100644 index 0000000..207fc20 Binary files /dev/null and b/audit2/desktop-full.png differ diff --git a/audit2/desktop-h1.png b/audit2/desktop-h1.png new file mode 100644 index 0000000..18cb446 Binary files /dev/null and b/audit2/desktop-h1.png differ diff --git a/audit2/desktop-hero-full.png b/audit2/desktop-hero-full.png new file mode 100644 index 0000000..a51c923 Binary files /dev/null and b/audit2/desktop-hero-full.png differ diff --git a/audit2/desktop-hero-line2.png b/audit2/desktop-hero-line2.png new file mode 100644 index 0000000..a7a76ad Binary files /dev/null and b/audit2/desktop-hero-line2.png differ diff --git a/audit2/desktop-hero-top.png b/audit2/desktop-hero-top.png new file mode 100644 index 0000000..a8f98fd Binary files /dev/null and b/audit2/desktop-hero-top.png differ diff --git a/audit2/desktop-howitworks-tile1.png b/audit2/desktop-howitworks-tile1.png new file mode 100644 index 0000000..3254746 Binary files /dev/null and b/audit2/desktop-howitworks-tile1.png differ diff --git a/audit2/desktop-howitworks-tile2.png b/audit2/desktop-howitworks-tile2.png new file mode 100644 index 0000000..c84a04c Binary files /dev/null and b/audit2/desktop-howitworks-tile2.png differ diff --git a/audit2/desktop-howitworks-tile3.png b/audit2/desktop-howitworks-tile3.png new file mode 100644 index 0000000..216791a Binary files /dev/null and b/audit2/desktop-howitworks-tile3.png differ diff --git a/audit2/desktop-howitworks-tile4.png b/audit2/desktop-howitworks-tile4.png new file mode 100644 index 0000000..9853c96 Binary files /dev/null and b/audit2/desktop-howitworks-tile4.png differ diff --git a/audit2/desktop-howitworks.png b/audit2/desktop-howitworks.png new file mode 100644 index 0000000..62e4c89 Binary files /dev/null and b/audit2/desktop-howitworks.png differ diff --git a/audit2/desktop-loop-steplist.png b/audit2/desktop-loop-steplist.png new file mode 100644 index 0000000..95f1bea Binary files /dev/null and b/audit2/desktop-loop-steplist.png differ diff --git a/audit2/desktop-manifesto.png b/audit2/desktop-manifesto.png new file mode 100644 index 0000000..c705b36 Binary files /dev/null and b/audit2/desktop-manifesto.png differ diff --git a/audit2/desktop-scoreboard.png b/audit2/desktop-scoreboard.png new file mode 100644 index 0000000..a46a360 Binary files /dev/null and b/audit2/desktop-scoreboard.png differ diff --git a/audit2/desktop-services.png b/audit2/desktop-services.png new file mode 100644 index 0000000..8f28953 Binary files /dev/null and b/audit2/desktop-services.png differ diff --git a/audit2/desktop-testimonials.png b/audit2/desktop-testimonials.png new file mode 100644 index 0000000..ee2d0f1 Binary files /dev/null and b/audit2/desktop-testimonials.png differ diff --git a/audit2/desktop-trustedby.png b/audit2/desktop-trustedby.png new file mode 100644 index 0000000..22aac2c Binary files /dev/null and b/audit2/desktop-trustedby.png differ diff --git a/audit2/desktop-work.png b/audit2/desktop-work.png new file mode 100644 index 0000000..ba2c4bb Binary files /dev/null and b/audit2/desktop-work.png differ diff --git a/audit2/mobile-fold.png b/audit2/mobile-fold.png new file mode 100644 index 0000000..3aa75bf Binary files /dev/null and b/audit2/mobile-fold.png differ diff --git a/audit2/mobile-full.png b/audit2/mobile-full.png new file mode 100644 index 0000000..35a9541 Binary files /dev/null and b/audit2/mobile-full.png differ diff --git a/audit2/mobile-hero-top.png b/audit2/mobile-hero-top.png new file mode 100644 index 0000000..f88d619 Binary files /dev/null and b/audit2/mobile-hero-top.png differ diff --git a/audit2/mobile-howitworks.png b/audit2/mobile-howitworks.png new file mode 100644 index 0000000..f34d346 Binary files /dev/null and b/audit2/mobile-howitworks.png differ diff --git a/audit2/mobile-scoreboard.png b/audit2/mobile-scoreboard.png new file mode 100644 index 0000000..b0b1427 Binary files /dev/null and b/audit2/mobile-scoreboard.png differ diff --git a/audit2/mobile-testimonials.png b/audit2/mobile-testimonials.png new file mode 100644 index 0000000..49ef96c Binary files /dev/null and b/audit2/mobile-testimonials.png differ diff --git a/audit2/mobile-trustedby.png b/audit2/mobile-trustedby.png new file mode 100644 index 0000000..959ef30 Binary files /dev/null and b/audit2/mobile-trustedby.png differ diff --git a/audit2/page.html b/audit2/page.html new file mode 100644 index 0000000..f2063c4 --- /dev/null +++ b/audit2/page.html @@ -0,0 +1 @@ +Results-driven digital marketing agency | Feedback Studios

Feedback Studios
Get a growth audit

Results-driven digital marketing agency

We run paid, SEO, and content programs built around your revenue targets, then show you exactly what they returned. Every month.

Get your growth auditSee the results
$40M+
in client revenue generated
50+
brands grown
Scroll

The problem with most agencies

Most budgets buy activity, not outcomes. Dashboards fill with impressions while the sales number sits still.

We started Feedback Studios to fix that. Every campaign we run is built to move revenue, and we report on it the way your CFO would. No vanity metrics. No mystery. Just the number that pays the bills.

  • MonthlyAvg. reporting cadence
  • 6+Channels we run
  • Your revenueBuilt around

Trusted by teams that care about the sales number

  • E-commerce
  • B2B SaaS
  • Clinics
  • Professional services
  • DTC brands
  • Marketplaces

Services / 06

How we grow your business

  1. 01

    SEO that compounds

    Rank for the searches your buyers make, and keep ranking long after the invoice clears.

  2. 02

    Paid ads that pay back

    Google, Meta, TikTok, and LinkedIn, managed to ROAS and pipeline. Not vanity clicks.

  3. 03

    Content that converts

    Articles, landing pages, and assets that pull in qualified traffic and turn it into customers.

  4. 04

    Social that builds demand

    Feeds and creative that make people remember you before they're ready to buy.

  5. 05

    Web & landing pages

    Fast, on-brand pages built for one job: conversion.

  6. 06

    Creative & brand

    Scroll-stopping creative that still sells.

The scoreboard — sample data

Numbers we report on

client revenue generated
$40M+
average return on ad spend
3.8×
average organic traffic in 6 months
+183%
client retention
92%

Sample data — your numbers, reported monthly.

Selected work — sample

Proof, not promises

01E-commerce · Fashion

BeforeRising ad costs were eating the margin.

−34% CPA and +52% ROAS in 90 days

Meta + Google Shopping restructure.

+52%ROAS in 90 days
02B2B SaaS

BeforePlenty of traffic, no pipeline.

+217% qualified demo requests in 6 months

SEO + content + LinkedIn.

+217%demo requests
03Aesthetic clinic

BeforeEmpty calendar despite the ad spend.

+128 booked consultations a month

Paid + landing-page rebuild.

+128consultations / month
View all work

The Feedback Loop

How it works

  1. 01

    Audit

    We find where your revenue is leaking.

  2. 02

    Plan

    A channel mix and targets tied to your numbers, not guesswork.

  3. 03

    Execute

    We build, launch, and optimize. Fast.

  4. 04

    Report

    Every month: marketing tied straight to pipeline and sales.

In their words — sample

The number is the point

We were spending $20k a month on ads with nothing to show. Six months later, marketing is our most predictable growth channel.
Sarah Lin, Head of Growth, Lumen Apparel
They talk in revenue, not impressions. First agency that moved our pipeline.
Marcus Reyes, CMO, Northpeak SaaS

Partners

  • Google Partner
  • Meta Business Partner

FAQ

Questions about working with a digital marketing agency

  • A digital marketing agency plans and runs campaigns across search, paid media, social, and content to grow a business. Feedback Studios focuses on revenue, not vanity metrics, and puts your budget into the channels that convert.

The bottom line

Ready to grow?

No long contracts. No vanity reports. Marketing you can measure in sales.

Book a callor hello@feedbackstudios.com
\ No newline at end of file diff --git a/audit2/sections.json b/audit2/sections.json new file mode 100644 index 0000000..3030b40 --- /dev/null +++ b/audit2/sections.json @@ -0,0 +1,165 @@ +{ + "scrollHeight": 11848, + "sections": [ + { + "i": 0, + "tag": "HEADER", + "cls": "site-head ", + "top": 0, + "h": 85, + "txt": "Feedback Studios Services Work About FAQ Get a growth audit" + }, + { + "i": 1, + "tag": "SECTION", + "cls": "hero", + "top": 0, + "h": 900, + "txt": "RESULTS-DRIVEN DIGITAL MARKETING AGENCY Marketing that grows your revenue. We run paid, SE" + }, + { + "i": 2, + "tag": "SECTION", + "cls": "tape", + "top": 900, + "h": 133, + "txt": "Revenue, not vanity metrics ✱ Paid ✱ SEO ✱ Content ✱ Social ✱ +52% ROAS ✱ +217% demos ✱ +1" + }, + { + "i": 3, + "tag": "SECTION", + "cls": "manifesto frame", + "top": 1033, + "h": 951, + "txt": "THE PROBLEM WITH MOST AGENCIES Most budgets buy activity, not outcomes. Dashboards fill wi" + }, + { + "i": 4, + "tag": "SECTION", + "cls": "proof", + "top": 1983, + "h": 296, + "txt": "TRUSTED BY TEAMS THAT CARE ABOUT THE SALES NUMBER E-commerce B2B SaaS Clinics Professional" + }, + { + "i": 5, + "tag": "SECTION", + "cls": "services frame", + "top": 2374, + "h": 1165, + "txt": "SERVICES / 06 How we grow your business 01 SEO that compounds Rank for the searches your b" + }, + { + "i": 6, + "tag": "HEADER", + "cls": "sec-head", + "top": 2504, + "h": 114, + "txt": "SERVICES / 06 How we grow your business" + }, + { + "i": 7, + "tag": "SECTION", + "cls": "score frame", + "top": 3539, + "h": 797, + "txt": "THE SCOREBOARD — SAMPLE DATA Numbers we report on client revenue generated $40M+ client re" + }, + { + "i": 8, + "tag": "HEADER", + "cls": "sec-head sec-head--center", + "top": 3669, + "h": 128, + "txt": "THE SCOREBOARD — SAMPLE DATA Numbers we report on" + }, + { + "i": 9, + "tag": "SECTION", + "cls": "work frame", + "top": 4336, + "h": 1077, + "txt": "SELECTED WORK — SAMPLE Proof, not promises 01 E-commerce · Fashion BEFORE Rising ad costs " + }, + { + "i": 10, + "tag": "HEADER", + "cls": "sec-head", + "top": 4466, + "h": 114, + "txt": "SELECTED WORK — SAMPLE Proof, not promises" + }, + { + "i": 11, + "tag": "SECTION", + "cls": "loop frame", + "top": 5413, + "h": 3094, + "txt": "THE FEEDBACK LOOP How it works 01 / 04 REVENUE LEAK — DETECTED −$14k/mo wasted spend CHANN" + }, + { + "i": 12, + "tag": "HEADER", + "cls": "sec-head loop__head", + "top": 5644, + "h": 128, + "txt": "THE FEEDBACK LOOP How it works 01 / 04" + }, + { + "i": 13, + "tag": "SECTION", + "cls": "quotes frame", + "top": 8507, + "h": 810, + "txt": "IN THEIR WORDS — SAMPLE The number is the point “ We were spending $20k a month on ads wit" + }, + { + "i": 14, + "tag": "HEADER", + "cls": "sec-head", + "top": 8637, + "h": 114, + "txt": "IN THEIR WORDS — SAMPLE The number is the point" + }, + { + "i": 15, + "tag": "SECTION", + "cls": "faq-sec frame", + "top": 9317, + "h": 1254, + "txt": "FAQ Questions about working with a digital marketing agency What does a digital marketing " + }, + { + "i": 16, + "tag": "HEADER", + "cls": "sec-head", + "top": 9447, + "h": 280, + "txt": "FAQ Questions about working with a digital marketing agency" + }, + { + "i": 17, + "tag": "SECTION", + "cls": "final frame", + "top": 10571, + "h": 737, + "txt": "THE BOTTOM LINE Ready to grow? No long contracts. No vanity reports. Marketing you can mea" + }, + { + "i": 18, + "tag": "HEADER", + "cls": "", + "top": 10724, + "h": 280, + "txt": "Ready to grow?" + }, + { + "i": 19, + "tag": "FOOTER", + "cls": "colophon frame", + "top": 11308, + "h": 540, + "txt": "Feedback Studios. Marketing that grows your revenue. Services Work About FAQ Contact Linke" + } + ] +} \ No newline at end of file diff --git a/audit2/site.css b/audit2/site.css new file mode 100644 index 0000000..faf74cb --- /dev/null +++ b/audit2/site.css @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:wght@400;500;600&display=swap");:root{--violet:#8b5cf6;--violet-600:#7c3aed;--blue:#3b82f6;--emerald:#10b981;--c-bg:#07070b;--c-bg-2:#0d0d14;--c-surface:#12121b;--c-line:rgba(255,255,255,0.09);--c-line-strong:rgba(255,255,255,0.16);--c-text:#f4f4f7;--c-text-dim:#c2c2cf;--c-text-faint:#9a9aac;--color-bg:var(--c-bg);--color-surface:var(--c-surface);--color-text:var(--c-text);--color-primary:var(--violet);--color-accent:var(--emerald);--color-ring:var(--violet);--grad-brand:linear-gradient(100deg,var(--blue),var(--violet) 52%,var(--emerald));--grad-btn:linear-gradient(100deg,#2563eb,#7c3aed 52%,#059669);--grad-text:linear-gradient(100deg,#7cb2ff,#b69bff 50%,#4ee3ad);--grad-text-ink:linear-gradient(100deg,#2563eb,#7c3aed 50%,#059669);--paper:#f4f1ea;--paper-2:#ece7db;--paper-ink:#14141a;--paper-dim:#44444f;--paper-line:rgba(20,20,26,0.14);--font-sans:"Satoshi",ui-sans-serif,system-ui,sans-serif;--font-mono:"Spline Sans Mono",ui-monospace,monospace;--step--1:clamp(0.83rem,0.79rem + 0.2vw,0.95rem);--step-0:clamp(1rem,0.95rem + 0.25vw,1.15rem);--step-1:clamp(1.2rem,1.1rem + 0.5vw,1.5rem);--step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);--step-3:clamp(2rem,1.6rem + 2vw,3.2rem);--step-4:clamp(2.6rem,1.9rem + 3.6vw,5rem);--step-5:clamp(3.2rem,2rem + 6vw,7.5rem);--wrap:1240px;--gutter:clamp(1.25rem,5vw,4rem);--section-y:clamp(4.5rem,9vw,9rem);--radius:18px;--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);--ease:var(--ease-out);--t-press:0.14s;--t-fast:0.18s;--t-mid:0.26s;--t-slow:0.5s;--t:var(--t-mid) var(--ease-out);--t-move:var(--t-mid) var(--ease-in-out);--scroll-progress:0;color-scheme:dark}*,:after,:before{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}img,svg,video{display:block;max-width:100%}a{color:inherit;text-decoration:none}ol,ul{list-style:none;padding:0}button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}:focus-visible{outline:3px solid #6ee7b7;outline-offset:3px;border-radius:4px}[data-invert] :focus-visible{outline-color:var(--violet-600)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:1rem;z-index:1000;padding:.7rem 1.1rem;background:var(--violet);color:#fff;border-radius:8px;font-weight:600;transition:top .2s var(--ease)}.skip-link:focus{top:1rem}.grain{inset:0;z-index:1;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.grain,body:before{position:fixed;pointer-events:none}body:before{content:"";inset:-20%;z-index:0;background:radial-gradient(40% 40% at 15% 10%,rgba(59,130,246,.18),transparent 70%),radial-gradient(45% 45% at 85% 20%,rgba(139,92,246,.16),transparent 70%),radial-gradient(40% 40% at 60% 90%,rgba(16,185,129,.12),transparent 70%);filter:blur(20px)}.wrap{width:min(100% - var(--gutter) * 2,var(--wrap));margin-inline:auto}.frame{position:relative;z-index:2;padding-block:var(--section-y)}.display{font-weight:900;line-height:1.02;letter-spacing:-.03em}.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}.strike{position:relative;color:var(--c-text-faint)}.strike:after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.09em;background:var(--emerald);transform:rotate(-3deg)}.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;color:var(--c-text-dim)}.kicker__dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald)}.rule{height:1px;background:var(--c-line)}.arrow{display:inline-block;transition:transform var(--t)}.sec-head{margin-bottom:clamp(2rem,4vw,3.5rem)}.sec-head--center{text-align:center}.sec-head--center .kicker{justify-content:center}.sec-head__title{font-size:var(--step-4);margin-top:1rem;max-width:16ch}.sec-head--center .sec-head__title{margin-inline:auto}[data-invert]{background:var(--paper);color:var(--paper-ink)}[data-invert] .kicker{color:var(--paper-dim)}[data-invert] .rule{background:var(--paper-line)}[data-invert] .grad{background-image:var(--grad-text-ink)}.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.6rem;border-radius:999px;font-weight:700;font-size:var(--step-0);letter-spacing:-.01em;border:1.5px solid transparent;transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),background-position .55s var(--ease-out),border-color var(--t-mid) var(--ease-out),color var(--t-mid) var(--ease-out);will-change:transform;overflow:hidden}.btn--sm{padding:.6rem 1.1rem;font-size:var(--step--1)}.btn--accent{color:#fff;background:var(--grad-btn);background-size:200% 200%;background-position:0 50%;box-shadow:0 8px 30px -8px rgba(139,92,246,.55)}.btn--accent:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);transform:translateX(-120%);transition:transform .7s var(--ease-out);pointer-events:none}@media (hover:hover) and (pointer:fine){.btn--accent:hover{background-position:100% 50%;box-shadow:0 16px 44px -8px rgba(139,92,246,.7);transform:translateY(-1px)}.btn--accent:hover:after{transform:translateX(120%)}}.btn--accent:active{transform:scale(.97);transition-duration:var(--t-press)}.btn--ghost{color:var(--c-text);border-color:var(--c-line-strong);background:rgba(255,255,255,.02)}@media (hover:hover) and (pointer:fine){.btn--ghost:hover{border-color:var(--violet);background:rgba(139,92,246,.1);transform:translateY(-1px)}.btn--ghost:hover .arrow{transform:translateX(5px)}}.btn--ghost:active{transform:scale(.97);transition-duration:var(--t-press)}[data-invert] .btn--ghost{color:var(--paper-ink);border-color:var(--paper-line)}@media (hover:hover) and (pointer:fine){[data-invert] .btn--ghost:hover{border-color:var(--violet-600);background:rgba(124,58,237,.08)}}.has-custom-cursor,.has-custom-cursor [data-cursor],.has-custom-cursor a,.has-custom-cursor button{cursor:none}.cursor-layer{position:fixed;inset:0;z-index:9999;pointer-events:none}.cursor-dot,.cursor-ring{position:absolute;top:0;left:0;border-radius:50%;pointer-events:none}.cursor-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--emerald);mix-blend-mode:difference;transition:transform var(--t-press) var(--ease-out),opacity var(--t-fast) var(--ease-out)}.cursor-dot.is-pressed{transform:scale(.5)}.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(255,255,255,.55);display:grid;place-items:center;transition:width var(--t-mid) var(--ease-out),height var(--t-mid) var(--ease-out),margin var(--t-mid) var(--ease-out),transform var(--t-press) var(--ease-out),background var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out)}.cursor-ring.is-hover{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(139,92,246,.18);border-color:var(--violet)}.cursor-ring.is-labelled{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--violet);border-color:var(--violet)}.cursor-ring.is-pressed{transform:scale(.82)}.cursor-ring__label{font-family:var(--font-mono);font-size:11px;font-weight:600;color:#fff;text-align:center;line-height:1.1;padding:0 6px}.site-head{position:fixed;top:0;left:0;right:0;z-index:100;transition:background var(--t),border-color var(--t),-webkit-backdrop-filter var(--t);transition:background var(--t),backdrop-filter var(--t),border-color var(--t);transition:background var(--t),backdrop-filter var(--t),border-color var(--t),-webkit-backdrop-filter var(--t);border-bottom:1px solid transparent}.site-head.is-scrolled{background:rgba(7,7,11,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--c-line)}.progress-bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--scroll-progress));background:var(--grad-brand)}.site-head__inner{width:min(100% - var(--gutter) * 2,1400px);margin-inline:auto;display:flex;align-items:center;gap:1.5rem;padding-block:clamp(.8rem,1.6vw,1.2rem)}.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em}.brand__mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--grad-brand);transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}@media (hover:hover) and (pointer:fine){.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06);box-shadow:0 6px 20px -6px rgba(139,92,246,.7)}}.brand:active .brand__mark{transform:scale(.94);transition-duration:var(--t-press)}.brand__dot{width:9px;height:9px;border-radius:3px;background:#fff;transition:transform var(--t-mid) var(--ease-drawer)}@media (hover:hover) and (pointer:fine){.brand:hover .brand__dot{transform:rotate(45deg);border-radius:2px}}.brand__name{font-size:var(--step-0)}.site-nav{margin-left:auto}.site-nav ul{display:flex;gap:clamp(1rem,2vw,2rem);font-size:var(--step--1);font-weight:500}.site-nav a{position:relative;color:var(--c-text-dim);transition:color var(--t-mid) var(--ease-out);padding-block:.3rem}.site-nav a:after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--ease-out)}.site-nav a:focus-visible,.site-nav a:hover{color:var(--c-text)}.site-nav a:focus-visible:after,.site-nav a:hover:after{transform:scaleX(1)}.site-nav a.is-active{color:var(--c-text)}.site-nav a.is-active:after{transform:scaleX(1);background:var(--grad-brand)}.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}.burger span{width:22px;height:2px;background:var(--c-text);transition:transform var(--t-mid) var(--ease-drawer),opacity var(--t-fast) var(--ease-out)}.burger:active{transform:scale(.92)}.burger.is-open span:first-child{transform:translateY(7px) rotate(45deg)}.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(.4)}.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-menu{display:none}@media (max-width:860px){.site-head__cta,.site-nav{display:none}.burger{display:flex}.mobile-menu{display:block;position:fixed;inset:0;z-index:99;background:rgba(7,7,11,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:6rem var(--gutter) 2rem;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}.mobile-menu.is-open{opacity:1;pointer-events:auto}.mobile-menu ul{display:flex;flex-direction:column;gap:1.5rem}.mobile-menu a:not(.btn){font-size:var(--step-3);font-weight:800;letter-spacing:-.02em}.mobile-menu .btn{margin-top:1rem}}.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(8rem,14vh,11rem) clamp(3rem,6vh,5rem);overflow:hidden;--mx:50%;--my:40%}.hero__media{position:absolute;inset:-12% 0;z-index:0;will-change:transform}.hero__video{width:100%;height:100%;object-fit:cover;opacity:.55}.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,11,.5),rgba(7,7,11,.82) 60%,var(--c-bg)),linear-gradient(90deg,rgba(7,7,11,.72),transparent 62%)}.hero__spotlight{position:absolute;inset:0;background:radial-gradient(440px circle at var(--mx) var(--my),rgba(139,92,246,.24),transparent 60%);mix-blend-mode:screen}.hero__noise{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.hero-svg{position:absolute;inset:auto 0 0 0;width:100%;height:70%;z-index:1;opacity:.9}.hero-svg__grid line{stroke:rgba(255,255,255,.07);stroke-width:1}.hero-svg__line{filter:drop-shadow(0 0 14px rgba(139,92,246,.5))}.hero-svg__dot{filter:drop-shadow(0 0 12px rgba(16,185,129,.9));animation:heroPulse 2.4s var(--ease-in-out) infinite}.hero-svg__dot-ring{transform-box:fill-box;transform-origin:center;animation:heroPing 2.8s var(--ease-out) infinite}@keyframes heroPulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes heroPing{0%{transform:scale(.6);opacity:.7}70%,to{transform:scale(2.1);opacity:0}}.hero__content{position:relative;z-index:2;width:min(100% - var(--gutter) * 2,var(--wrap));margin-inline:auto}.hero__eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--c-text-dim);margin-bottom:1.4rem}.hero__live{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:live 2s infinite}@keyframes live{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}to{box-shadow:0 0 0 0 rgba(16,185,129,0)}}.hero__h1{font-size:var(--step-5);font-weight:900;line-height:.95;letter-spacing:-.04em;max-width:15ch;visibility:hidden}.hero__line{overflow:hidden;padding-bottom:.06em}.hero__h1 .word{display:inline-block}.hero__stagger{opacity:0}@media (prefers-reduced-motion:reduce){.hero__stagger{opacity:1}}.hero__sub{margin-top:1.6rem;max-width:46ch;font-size:var(--step-1);color:var(--c-text-dim)}.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}.hero__trust{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.4rem);margin-top:3rem}.hero__trust dt{font-weight:900;font-size:var(--step-2);letter-spacing:-.03em}.hero__trust dd{font-size:var(--step--1);color:var(--c-text-faint);max-width:16ch}.hero__trust-div{width:1px;height:38px;background:var(--c-line-strong)}.hero__scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:2;display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.25em;color:var(--c-text-faint)}.hero__scroll-line{width:1px;height:36px;background:linear-gradient(var(--violet),transparent);animation:scrollHint 1.8s var(--ease) infinite}@keyframes scrollHint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}to{transform:scaleY(0);transform-origin:bottom}}.tape{position:relative;z-index:2;padding-block:clamp(1.4rem,3vw,2.4rem);border-block:1px solid var(--c-line);background:var(--c-bg-2);overflow:hidden}.marq{display:flex;white-space:nowrap;will-change:transform}.marq__track{display:flex;flex-shrink:0;align-items:center}.marq__item{display:inline-flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);padding-inline:clamp(.8rem,2vw,1.8rem);font-weight:800;font-size:var(--step-2);letter-spacing:-.02em;color:var(--c-text)}.marq__item:nth-child(2n){color:transparent;-webkit-text-stroke:1px var(--c-text-faint)}.marq__star{color:var(--violet);font-size:.6em;display:inline-block;animation:starSpin 9s linear infinite}@keyframes starSpin{to{transform:rotate(1turn)}}.manifesto__wrap{width:min(100% - var(--gutter) * 2,1100px)}.manifesto__lead{font-size:var(--step-4);margin:1.4rem 0 1.8rem;max-width:20ch}.manifesto__body{font-size:var(--step-1);color:var(--c-text-dim);max-width:52ch}.manifesto__stats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:clamp(1rem,3vw,2.5rem);gap:clamp(1rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--c-line)}.manifesto__stat{display:flex;flex-direction:column;gap:.4rem;position:relative;padding-left:1rem}.manifesto__stat:before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:2px;background:var(--grad-brand);border-radius:2px;transform:scaleY(.6);transform-origin:top;transition:transform var(--t-mid) var(--ease-out)}.manifesto__stat:hover:before{transform:scaleY(1)}.manifesto__stat-v{font-size:var(--step-2);letter-spacing:-.02em}.manifesto__stat-k{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;color:var(--c-text-faint)}@media (max-width:640px){.manifesto__stats{grid-template-columns:1fr;gap:1.4rem}}.divider{position:relative;z-index:2;display:flex;align-items:center;gap:1.2rem;padding-block:clamp(1.2rem,3vw,2.2rem)}.divider__label{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.2em;color:var(--c-text-faint);white-space:nowrap;flex-shrink:0}.divider__svg{flex:1 1;height:12px}.divider__line{will-change:stroke-dashoffset}.divider__node{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--emerald);box-shadow:0 0 12px rgba(16,185,129,.8);margin-left:-1.2rem;will-change:transform}.proof{position:relative;z-index:2;padding-block:clamp(2.1rem,4.2vw,3.5rem);border-bottom:1px solid var(--c-line)}.proof__label{display:block;margin-bottom:1.6rem}.proof__list{display:flex;flex-wrap:wrap;gap:.65rem .7rem;max-width:100%}.proof__item{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1rem;border:1px solid var(--c-line-strong);border-radius:999px;font-family:var(--font-mono);font-size:var(--step--1);white-space:nowrap;color:var(--c-text-dim);transition:color var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out),background var(--t-mid) var(--ease-out),transform var(--t-fast) var(--ease-out)}.proof__item-dot{width:6px;height:6px;border-radius:50%;background:var(--c-text-faint);transition:background var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}@media (hover:hover) and (pointer:fine){.proof__item:hover{color:var(--c-text);border-color:var(--violet);background:rgba(139,92,246,.08);transform:translateY(-3px)}.proof__item:hover .proof__item-dot{background:var(--emerald);box-shadow:0 0 8px var(--emerald)}}.proof__logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.4rem,4vw,3rem);margin-top:clamp(1.4rem,3vw,2.2rem);padding-top:clamp(1.2rem,3vw,1.8rem);border-top:1px solid var(--c-line)}.proof__logo,.proof__logo-svg{display:inline-flex}.proof__logo-svg{color:#c2c2cf;opacity:.85;transition:color var(--t-mid) var(--ease-out),opacity var(--t-mid) var(--ease-out)}.proof__logo-svg svg{height:24px;width:auto}@media (hover:hover) and (pointer:fine){.proof__logo:hover .proof__logo-svg{color:var(--c-text);opacity:1}}.ledger{border-top:1px solid var(--c-line)}.ledger__row{display:grid;grid-template-columns:4rem minmax(0,1.1fr) minmax(0,1.4fr) 2.5rem;align-items:center;grid-gap:1.5rem;gap:1.5rem;padding-block:clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid var(--c-line);position:relative;transition:padding-left var(--t-mid) var(--ease-out),transform var(--t-press) var(--ease-out)}.ledger__row:before{inset:0;opacity:0;transition:opacity var(--t-mid) var(--ease-out);z-index:-1}.ledger__row:after,.ledger__row:before{content:"";position:absolute;background:var(--grad-brand)}.ledger__row:after{left:0;top:0;bottom:0;width:3px;transform:scaleY(0);transform-origin:center;transition:transform var(--t-mid) var(--ease-out)}@media (hover:hover) and (pointer:fine){.ledger__row:hover{padding-left:1.4rem}.ledger__row:hover:before{opacity:.08}.ledger__row:hover:after{transform:scaleY(1)}}.ledger__row:active{transform:scale(.992);transition-duration:var(--t-press)}.ledger__no{font-family:var(--font-mono);font-size:var(--step--1);color:var(--c-text-faint)}.ledger__name,.ledger__no{transition:color var(--t-mid) var(--ease-out)}.ledger__name{font-size:var(--step-2)}@media (hover:hover) and (pointer:fine){.ledger__row:hover .ledger__no{color:var(--emerald)}.ledger__row:hover .ledger__name{color:transparent;background:var(--grad-text);-webkit-background-clip:text;background-clip:text}}.ledger__desc{color:var(--c-text-dim);font-size:var(--step-0)}.ledger__arrow{justify-self:end;font-size:1.4rem;color:var(--c-text-faint);transition:transform var(--t-mid) var(--ease-out),color var(--t-mid) var(--ease-out)}@media (hover:hover) and (pointer:fine){.ledger__row:hover .ledger__arrow{color:var(--violet);transform:translate(5px,-5px)}}@media (max-width:760px){.ledger__row{grid-template-columns:3rem 1fr 2rem;grid-template-areas:"no name arrow" "no desc desc";gap:.4rem 1rem}.ledger__no{grid-area:no}.ledger__name{grid-area:name;font-size:var(--step-1)}.ledger__desc{grid-area:desc}.ledger__arrow{grid-area:arrow}}.score.frame{padding-bottom:clamp(2.7rem,5.4vw,5.4rem)}.score__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:clamp(1rem,3vw,2.5rem);gap:clamp(1rem,3vw,2.5rem);text-align:center}.score__num{font-size:var(--step-4);line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.score__num.is-accent{color:transparent;background:var(--grad-text-ink);-webkit-background-clip:text;background-clip:text}.score__lab{margin-top:.7rem;font-size:var(--step--1);color:var(--paper-dim);max-width:18ch;margin-inline:auto}.score__chart{margin-top:clamp(2.5rem,5vw,4rem);max-width:600px;margin-inline:auto}.score__foot{margin-top:clamp(1.4rem,3vw,2.2rem);text-align:center;font-family:var(--font-mono);font-size:15px;letter-spacing:.02em;color:#6b675f}.score__bars{display:flex;align-items:flex-end;gap:clamp(.6rem,2vw,1.4rem);height:130px}.score-bar{position:relative;flex:1 1;border-radius:6px 6px 0 0;background:var(--grad-brand);opacity:.9}.score-bar__cap{position:absolute;top:-5px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px rgba(16,185,129,.7)}.score__axis{width:100%;height:8px;margin-top:4px}.score__baseline{stroke:var(--paper-ink);stroke-width:2}@media (max-width:720px){.score__grid{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}}.work__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:clamp(1.2rem,2.5vw,2rem);gap:clamp(1.2rem,2.5vw,2rem)}@media (max-width:980px){.work__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}.case{transform-style:preserve-3d}.case__inner{position:relative;height:100%;padding:clamp(1.4rem,2.5vw,2rem);border-radius:var(--radius);background:linear-gradient(180deg,var(--c-surface),var(--c-bg-2));border:1px solid var(--c-line);overflow:hidden;transition:border-color var(--t-mid) var(--ease-out),box-shadow var(--t-slow) var(--ease-out),transform var(--t-mid) var(--ease-out)}@media (hover:hover) and (pointer:fine){.case:hover .case__inner{border-color:color-mix(in srgb,var(--case-accent) 55%,transparent);box-shadow:0 28px 70px -24px color-mix(in srgb,var(--case-accent) 60%,transparent);transform:translateZ(40px)}}.case__glare{position:absolute;inset:0;pointer-events:none}.case__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--font-mono);font-size:var(--step--1)}.case__no{color:var(--case-accent);font-weight:600}.case__tag{color:var(--c-text-dim);text-align:right}.case__viz{margin:1.4rem 0 1.6rem;padding:1rem;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--c-line)}.case__bars{display:flex;align-items:flex-end;gap:8px;height:84px}.case__bar{flex:1 1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(var(--case-accent),color-mix(in srgb,var(--case-accent) 30%,transparent));transform:scaleY(0);transform-origin:bottom;animation:barGrow .85s var(--ease-out) forwards;animation-delay:var(--d)}@keyframes barGrow{0%{transform:scaleY(0)}72%{transform:scaleY(1.04)}to{transform:scaleY(1)}}.case__spark{width:100%;height:26px;margin-top:8px}.case__body{position:relative;z-index:1}.case__problem{display:flex;flex-direction:column;gap:.2rem;color:var(--c-text-faint);font-size:var(--step--1)}.case__k{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--case-accent)}.case__result{font-size:var(--step-1);margin:.7rem 0 .4rem}.case__how{font-size:var(--step--1);color:var(--c-text-dim)}.case__metric{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--c-line);display:flex;align-items:baseline;gap:.7rem}.case__metric-num{font-size:var(--step-3);color:var(--case-accent)}.case__metric-lab{font-size:var(--step--1);color:var(--c-text-faint)}.work__cta{margin-top:clamp(2.5rem,5vw,4rem);text-align:center}.loop{--loop-accent:#3b82f6}.loop-pin{min-height:100svh;display:flex;align-items:center}.loop__inner{width:100%}.loop__stage{display:grid;grid-template-columns:1fr 1fr;grid-gap:clamp(2rem,5vw,4.5rem);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(2rem,4vw,3rem)}.loop-card{position:relative;aspect-ratio:4/3;width:100%;border-radius:var(--radius);background:linear-gradient(180deg,#0c0c12,#08080d);border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px -40px rgba(20,20,26,.45),inset 0 2px 0 rgba(255,255,255,.04);overflow:hidden;display:grid;place-items:center;padding:clamp(1.4rem,3vw,2.4rem)}.loop-card__glow{position:absolute;inset:-30% -10% auto -10%;height:90%;background:radial-gradient(60% 70% at 50% 0,color-mix(in srgb,var(--loop-accent) 30%,transparent),transparent 70%);filter:blur(10px);opacity:.7;transition:background var(--t-slow) var(--ease-out);pointer-events:none}.loop-glyph{position:absolute;top:clamp(1rem,3vw,1.8rem);left:50%;transform:translateX(-50%);aspect-ratio:1;width:min(34%,130px);display:grid;place-items:center}.loop-glyph svg{width:100%;filter:drop-shadow(0 10px 28px rgba(139,92,246,.45))}.loop-panels{position:absolute;inset:auto clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,2rem);display:grid}.loop-panel{grid-area:1/1;width:100%;opacity:0;transform:translateY(10px);filter:blur(3px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),filter .5s var(--ease-out);pointer-events:none}.loop-panel.is-active{opacity:1;transform:translateY(0);filter:blur(0)}.loop-panel__cap{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;color:#c8c8d6;margin-bottom:.8rem}.loop-panel__dot{width:7px;height:7px;border-radius:50%;background:var(--loop-accent);box-shadow:0 0 10px var(--loop-accent)}.loop-panel__note{margin-top:.7rem;font-size:var(--step--1);color:#aeaebd}.loop-panel__lab{font-weight:800;color:#f4f4f7}.loop-panel__svg{width:100%;height:clamp(70px,12vw,110px)}.loop-matrix{display:grid;grid-template-columns:4.5rem repeat(3,1fr);grid-gap:6px;gap:6px;align-items:center}.loop-matrix__h,.loop-matrix__r{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:#c8c8d6}.loop-matrix__h{text-align:center}.loop-matrix__r{text-align:left}.loop-matrix__c{height:clamp(20px,3.2vw,30px);border-radius:6px;background:color-mix(in srgb,var(--loop-accent) 18%,transparent);border:1px solid rgba(255,255,255,.08)}.loop-matrix__c[data-lvl="2"]{background:color-mix(in srgb,var(--loop-accent) 42%,transparent)}.loop-matrix__c[data-lvl="3"]{background:color-mix(in srgb,var(--loop-accent) 78%,transparent);border-color:transparent}.loop-bars{display:flex;align-items:flex-end;gap:clamp(6px,1.5vw,12px);height:clamp(70px,12vw,110px)}.loop-bar{flex:1 1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(var(--loop-accent),color-mix(in srgb,var(--loop-accent) 25%,transparent));transform:scaleY(.18);transform-origin:bottom}.loop-panel.is-active .loop-bar{animation:loopBarGrow .7s var(--ease-out) forwards;animation-delay:calc(var(--i) * 70ms)}@keyframes loopBarGrow{0%{transform:scaleY(.18)}72%{transform:scaleY(1.04)}to{transform:scaleY(1)}}.loop-metric{display:grid;grid-gap:.3rem;gap:.3rem}.loop-metric__num{font-size:var(--step-4);line-height:1;color:transparent;background:var(--grad-text);-webkit-background-clip:text;background-clip:text}.loop-metric__lab{font-size:var(--step--1);color:#aeaebd}.loop-metric__trend{display:flex;align-items:center;gap:.7rem;margin-top:.6rem}.loop-metric__trend svg{width:70px;height:22px}.loop-metric__trend em{font-style:normal;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald)}.loop__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}.loop__count{display:inline-flex;align-items:baseline;gap:.2rem;font-family:var(--font-mono);font-size:var(--step-2);font-weight:600;color:var(--paper-ink);letter-spacing:-.02em}.loop__count-cur{color:var(--violet-600);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.loop__count-sep,.loop__count-tot{color:var(--paper-dim)}.loop__steps{position:relative;padding-left:2.4rem}.loop-rail{left:.7rem;top:.5rem;bottom:.5rem;width:2px;background:var(--paper-line)}.loop-rail,.loop-rail__fill{position:absolute;border-radius:2px}.loop-rail__fill{inset:0;background:var(--grad-brand);transform:scaleY(0);transform-origin:top}.loop-rail__node{position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--violet-600);box-shadow:0 0 0 4px rgba(124,58,237,.18),0 0 14px rgba(124,58,237,.5)}.loop__steps ol{display:flex;flex-direction:column;gap:clamp(1.2rem,2.5vw,2rem)}.loop-step{display:flex;gap:1.2rem;opacity:.92;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}.loop-step.is-active{opacity:1;transform:translateX(8px)}.loop-step__n{font-family:var(--font-mono);font-weight:600;font-size:var(--step-0);color:#6b675f}.loop-step.is-active .loop-step__n{color:var(--violet-600)}.loop-step__name{font-size:var(--step-2);font-weight:900;letter-spacing:-.02em;color:#6b675f;transition:color .45s var(--ease-out)}.loop-step.is-active .loop-step__name{color:#14141a}.loop-step__desc{margin-top:.3rem;color:#726e63;font-size:var(--step-0);max-width:42ch;transition:color .45s var(--ease-out)}.loop-step.is-active .loop-step__desc{color:var(--paper-dim)}@media (max-width:860px){.loop__stage{grid-template-columns:1fr}.loop-card{aspect-ratio:5/4;max-width:480px;margin-inline:auto}}.quotes__grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:clamp(1.5rem,3vw,2.5rem);gap:clamp(1.5rem,3vw,2.5rem)}@media (max-width:760px){.quotes__grid{grid-template-columns:1fr}}.quote{position:relative;padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--radius);background:linear-gradient(180deg,var(--c-surface),var(--c-bg-2));border:1px solid var(--c-line);overflow:hidden;transition:border-color var(--t-mid) var(--ease-out),box-shadow var(--t-slow) var(--ease-out),transform var(--t-mid) var(--ease-out)}.quote:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0,rgba(139,92,246,.12),transparent 60%);opacity:0;transition:opacity var(--t-slow) var(--ease-out);pointer-events:none}@media (hover:hover) and (pointer:fine){.quote:hover{border-color:var(--c-line-strong);box-shadow:0 24px 60px -28px rgba(139,92,246,.5);transform:translateY(-4px)}.quote:hover:before{opacity:1}}.quote__mark{position:relative;font-size:4rem;line-height:.5;color:var(--violet);opacity:.5;transition:opacity var(--t-mid) var(--ease-out)}@media (hover:hover) and (pointer:fine){.quote:hover .quote__mark{opacity:.85}}.quote__text{position:relative;font-size:var(--step-1);font-weight:500;line-height:1.35;letter-spacing:-.01em;margin-top:1rem}.quote__by{display:flex;align-items:center;gap:.7rem;margin-top:1.4rem;font-family:var(--font-mono);font-size:var(--step--1);color:var(--c-text-faint)}.quote__rule{width:24px;height:1px;background:var(--violet)}.partners{margin-top:clamp(2.5rem,5vw,4rem);align-items:center}.partners,.partners__list{display:flex;gap:1.5rem;flex-wrap:wrap}.partners__list li{font-weight:700;color:var(--c-text-dim)}.faq-sec__wrap{width:min(100% - var(--gutter) * 2,920px)}.faq{border-top:1px solid var(--paper-line)}.faq__item{border-bottom:1px solid var(--paper-line)}.faq__q{margin:0}.faq__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:clamp(1.1rem,2.5vw,1.6rem);text-align:left;font-size:var(--step-1);font-weight:700;letter-spacing:-.01em;color:var(--paper-ink);transition:color var(--t-mid) var(--ease-out),padding-left var(--t-mid) var(--ease-out)}@media (hover:hover) and (pointer:fine){.faq__btn:hover{color:var(--violet-600);padding-left:.4rem}}.faq__item.is-open .faq__btn{color:var(--violet-600)}.faq__icon{position:relative;flex-shrink:0;width:20px;height:20px}.faq__icon span{position:absolute;top:50%;left:50%;width:14px;height:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform var(--t-mid) var(--ease-drawer)}.faq__icon span:last-child{transform:translate(-50%,-50%) rotate(90deg)}.faq__item.is-open .faq__icon span:last-child{transform:translate(-50%,-50%) rotate(180deg)}.faq__panel{overflow:hidden}.faq__a{padding-bottom:clamp(1.1rem,2.5vw,1.6rem);max-width:64ch;color:var(--paper-dim);font-size:var(--step-0)}.final{text-align:center}.final__wrap{width:min(100% - var(--gutter) * 2,760px);display:flex;flex-direction:column;align-items:center}.final__h{font-size:var(--step-5);margin:1.2rem 0}.final__sub{font-size:var(--step-1);color:var(--c-text-dim);max-width:40ch}.final__cta{justify-content:center;gap:1rem;margin-top:2.2rem}.colophon__top,.final__cta{display:flex;flex-wrap:wrap}.colophon__top{justify-content:space-between;gap:2rem;margin-bottom:2.5rem}.colophon__brand{display:flex;align-items:center;gap:.8rem;font-weight:700;max-width:28ch}.colophon__nav{display:flex;gap:clamp(2rem,6vw,5rem)}.colophon__nav ul{display:flex;flex-direction:column;gap:.7rem}.colophon__nav a{color:var(--paper-dim);transition:color var(--t)}.colophon__nav a:hover{color:var(--paper-ink)}.colophon__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;font-size:var(--step--1);color:var(--paper-dim)}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.hero__h1{visibility:visible!important}.hero__stagger{opacity:1!important}.case__bar{transform:scaleY(1);animation:none}.hero__video{display:none}.hero-svg__dot,.hero-svg__dot-ring,.hero__live,.hero__scroll-line,.kicker__dot,.marq__star{animation:none!important}.loop-step{opacity:1!important;filter:none!important;transform:none!important}.loop-step__name{color:#14141a!important}.loop-step__desc{color:var(--paper-dim)!important}.loop-step__n{color:var(--violet-600)!important}.loop-rail__fill{transform:scaleY(1)!important}.loop-panel{opacity:0;transform:none!important;filter:none!important}.loop-panel.is-active{opacity:1!important}.loop-bar{transform:scaleY(1)!important;animation:none!important}.divider__line{stroke-dasharray:none!important}} \ No newline at end of file diff --git a/capture2.js b/capture2.js new file mode 100644 index 0000000..42ebba9 --- /dev/null +++ b/capture2.js @@ -0,0 +1,85 @@ +const { chromium } = require('playwright'); +const fs = require('fs'); + +const URL = 'https://studiosfeedback.com'; +const OUT = '/home/claude/agency-web/audit2'; +const UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'; + +const VIEWPORTS = [ + ['desktop', 1440, 900], + ['mobile', 390, 844], +]; + +// slow scroll, ~250ms per step, to trigger scroll-driven animations & count-ups +async function slowScroll(page, perStep = 250, frac = 0.55) { + await page.evaluate(async ({ perStep, frac }) => { + const step = Math.max(200, Math.round(window.innerHeight * frac)); + for (let y = 0; y < document.body.scrollHeight; y += step) { + window.scrollTo(0, y); + await new Promise((r) => setTimeout(r, perStep)); + } + window.scrollTo(0, document.body.scrollHeight); + await new Promise((r) => setTimeout(r, 1500)); + }, { perStep, frac }); +} + +(async () => { + const browser = await chromium.launch(); + for (const [name, w, h] of VIEWPORTS) { + const ctx = await browser.newContext({ + viewport: { width: w, height: h }, + userAgent: UA, + deviceScaleFactor: 2, + }); + const page = await ctx.newPage(); + await page.goto(URL, { waitUntil: 'networkidle', timeout: 60000 }).catch(async () => { + await page.goto(URL, { waitUntil: 'load', timeout: 60000 }); + }); + + for (const sel of [ + 'text=/^(accept|aceptar|agree|ok|entendido|got it)/i', + "[id*='cookie' i] button", + "[class*='consent' i] button", + ]) { + try { await page.locator(sel).first().click({ timeout: 700 }); } catch (e) {} + } + await page.keyboard.press('Escape').catch(() => {}); + + // two full slow passes so count-ups & per-step reveals reach final state + await slowScroll(page, 250, 0.55); + await slowScroll(page, 200, 0.45); + + // fold (top) + await page.evaluate(() => window.scrollTo(0, 0)); + await page.waitForTimeout(1000); + await page.screenshot({ path: `${OUT}/${name}-fold.png` }); + + // full page in final animated state + await page.screenshot({ path: `${OUT}/${name}-full.png`, fullPage: true }); + + if (name === 'desktop') { + fs.writeFileSync(`${OUT}/page.html`, await page.content(), 'utf-8'); + const meta = await page.evaluate(() => { + const out = []; + document.querySelectorAll('section, header, footer').forEach((el, i) => { + const r = el.getBoundingClientRect(); + out.push({ + i, + tag: el.tagName, + cls: (el.className || '').toString().slice(0, 70), + top: Math.round(r.top + window.scrollY), + h: Math.round(r.height), + txt: (el.innerText || '').replace(/\s+/g, ' ').slice(0, 90), + }); + }); + return { scrollHeight: document.body.scrollHeight, sections: out }; + }); + fs.writeFileSync(`${OUT}/sections.json`, JSON.stringify(meta, null, 2), 'utf-8'); + console.log('desktop scrollHeight =', meta.scrollHeight, 'sections =', meta.sections.length); + } + console.log('captured', name); + await ctx.close(); + } + await browser.close(); + console.log('done'); +})(); diff --git a/crops.js b/crops.js new file mode 100644 index 0000000..165df87 --- /dev/null +++ b/crops.js @@ -0,0 +1,85 @@ +const { chromium } = require('playwright'); + +const URL = 'https://studiosfeedback.com'; +const OUT = '/home/claude/agency-web/audit2'; +const UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'; + +async function slowScroll(page, perStep = 250, frac = 0.55) { + await page.evaluate(async ({ perStep, frac }) => { + const step = Math.max(200, Math.round(window.innerHeight * frac)); + for (let y = 0; y < document.body.scrollHeight; y += step) { + window.scrollTo(0, y); + await new Promise((r) => setTimeout(r, perStep)); + } + window.scrollTo(0, document.body.scrollHeight); + await new Promise((r) => setTimeout(r, 1500)); + }, { perStep, frac }); +} + +// crop targets by CSS selector -> filename +const TARGETS = [ + { sel: 'section.proof', name: 'trustedby' }, + { sel: 'section.score', name: 'scoreboard' }, + { sel: 'section.loop', name: 'howitworks' }, + { sel: 'section.quotes', name: 'testimonials' }, +]; + +(async () => { + const browser = await chromium.launch(); + + // DESKTOP crops + let ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, userAgent: UA, deviceScaleFactor: 2 }); + let page = await ctx.newPage(); + await page.goto(URL, { waitUntil: 'networkidle', timeout: 60000 }).catch(async () => { + await page.goto(URL, { waitUntil: 'load', timeout: 60000 }); + }); + await page.keyboard.press('Escape').catch(() => {}); + await slowScroll(page, 250, 0.55); + await slowScroll(page, 200, 0.45); + await page.waitForTimeout(800); + + for (const t of TARGETS) { + const el = page.locator(t.sel).first(); + try { + await el.scrollIntoViewIfNeeded(); + await page.waitForTimeout(900); + await el.screenshot({ path: `${OUT}/desktop-${t.name}.png` }); + console.log('crop desktop', t.name); + } catch (e) { + console.log('FAIL desktop', t.name, e.message); + } + } + + // For the long "How it works" loop, also grab the 4 per-step panels individually if present + const steps = await page.locator('section.loop [class*="step" i], section.loop article, section.loop .loop__panel').count().catch(() => 0); + console.log('loop step-like elements:', steps); + + await ctx.close(); + + // MOBILE crops + ctx = await browser.newContext({ viewport: { width: 390, height: 844 }, userAgent: UA, deviceScaleFactor: 2 }); + page = await ctx.newPage(); + await page.goto(URL, { waitUntil: 'networkidle', timeout: 60000 }).catch(async () => { + await page.goto(URL, { waitUntil: 'load', timeout: 60000 }); + }); + await page.keyboard.press('Escape').catch(() => {}); + await slowScroll(page, 250, 0.55); + await slowScroll(page, 200, 0.45); + await page.waitForTimeout(800); + + for (const t of TARGETS) { + const el = page.locator(t.sel).first(); + try { + await el.scrollIntoViewIfNeeded(); + await page.waitForTimeout(900); + await el.screenshot({ path: `${OUT}/mobile-${t.name}.png` }); + console.log('crop mobile', t.name); + } catch (e) { + console.log('FAIL mobile', t.name, e.message); + } + } + + await ctx.close(); + await browser.close(); + console.log('done'); +})(); diff --git a/looptiles.js b/looptiles.js new file mode 100644 index 0000000..e9f9a75 --- /dev/null +++ b/looptiles.js @@ -0,0 +1,44 @@ +const { chromium } = require('playwright'); +const OUT = '/home/claude/agency-web/audit2'; +const URL = 'https://studiosfeedback.com'; +const UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'; + +async function slowScroll(page, perStep, frac) { + await page.evaluate(async ({ perStep, frac }) => { + const step = Math.max(200, Math.round(window.innerHeight * frac)); + for (let y = 0; y < document.body.scrollHeight; y += step) { + window.scrollTo(0, y); + await new Promise((r) => setTimeout(r, perStep)); + } + window.scrollTo(0, document.body.scrollHeight); + await new Promise((r) => setTimeout(r, 1500)); + }, { perStep, frac }); +} + +(async () => { + const b = await chromium.launch(); + const ctx = await b.newContext({ viewport: { width: 1440, height: 900 }, userAgent: UA, deviceScaleFactor: 2 }); + const page = await ctx.newPage(); + await page.goto(URL, { waitUntil: 'networkidle', timeout: 60000 }).catch(() => {}); + await page.keyboard.press('Escape').catch(() => {}); + await slowScroll(page, 250, 0.55); + + const box = await page.evaluate(() => { + const loop = document.querySelector('section.loop'); + const r = loop.getBoundingClientRect(); + return { top: Math.round(r.top + window.scrollY), h: Math.round(r.height) }; + }); + console.log('loop box', JSON.stringify(box)); + + const vh = 900; + const tiles = Math.ceil(box.h / vh); + for (let i = 0; i < tiles; i++) { + const y = box.top + i * vh; + await page.evaluate((yy) => window.scrollTo(0, yy), y); + await page.waitForTimeout(900); + await page.screenshot({ path: `${OUT}/desktop-howitworks-tile${i + 1}.png` }); + console.log('tile', i + 1, 'at y=', y); + } + await b.close(); + console.log('done'); +})();