Move LookAtU PRD out of the site folder so it is not published

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDXAh86FTSBLqF8ohPqZ88

.claude/skills/remotion-video/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: remotion-video
+description: Create videos from React code with Remotion. Use when the user asks to make, animate, preview, or render a video, motion graphic, intro, caption, or social clip using code.
+---
+
+# Remotion Video
+
+Remotion makes videos out of React components. Each frame is a web page. Render them in order and you get an MP4.
+
+## Core ideas
+- **Composition**: one video. Has `width`, `height`, `fps`, `durationInFrames`.
+- **Frame**: `useCurrentFrame()` returns the current frame number. All animation is a function of the frame.
+- **`interpolate`**: maps a frame range to a value range (fade, slide).
+- **`spring`**: natural bouncy motion.
+- **`Sequence`**: shows children only during a frame range.
+- **`AbsoluteFill`**: full-screen layer; stack them for backgrounds.
+- **`Audio` / `OffthreadVideo` / `Img`**: media. Put files in `public/` and load with `staticFile("name.mp3")`.
+
+## Workflow
+1. **Plan first.** Ask or decide: length (seconds), size (1920x1080, or 1080x1920 for vertical), fps (30), and the scenes. Keep scenes to a short list.
+2. **Set up** (skip if the project exists):
+   ```
+   npx create-video@latest
+   cd <project> && npm install
+   ```
+3. **Write** compositions in `src/`, register them in `src/Root.tsx`.
+4. **Preview**: `npm run dev` (opens Remotion Studio).
+5. **Render**: `npx remotion render <CompositionId> out/video.mp4`
+   Still frame: `npx remotion still <CompositionId> out/frame.png --frame=30`
+6. **Verify**: render one still first, check it looks right, then render the full video.
+
+## Starter example
+`src/Root.tsx`
+```tsx
+import { Composition } from "remotion";
+import { Hello } from "./Hello";
+
+export const RemotionRoot = () => (
+  <Composition
+    id="Hello"
+    component={Hello}
+    durationInFrames={150}
+    fps={30}
+    width={1920}
+    height={1080}
+    defaultProps={{ title: "Hello, world" }}
+  />
+);
+```
+
+`src/Hello.tsx`
+```tsx
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+export const Hello = ({ title }: { title: string }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+  const scale = spring({ frame, fps, config: { damping: 12 } });
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#0b1020", justifyContent: "center", alignItems: "center" }}>
+      <h1 style={{ color: "white", fontSize: 120, opacity, transform: `scale(${scale})` }}>{title}</h1>
+    </AbsoluteFill>
+  );
+};
+```
+
+## Rules of thumb
+- Never animate with CSS transitions, `setTimeout`, or CSS animations. They don't render per frame. Drive everything from `useCurrentFrame()`.
+- Always pass `extrapolateRight: "clamp"` to `interpolate` unless you want values to keep growing.
+- Seconds to frames: `seconds * fps`.
+- Use `<Sequence from={..} durationInFrames={..}>` to order scenes; `<Series>` to chain them.
+- Load fonts with `@remotion/google-fonts` so they are ready before rendering.
+- Keep props in `defaultProps` so the user can edit text in the Studio.
+- Rendering needs Chromium and ffmpeg (Remotion installs/handles these); first render can be slow.
+
+## Fonts
+Google Fonts: `npm i @remotion/google-fonts`, then
+```tsx
+import { loadFont } from "@remotion/google-fonts/Inter";
+const { fontFamily } = loadFont();   // use as style={{ fontFamily }}
+```
+It downloads the font while rendering, so the machine needs internet access to fonts.googleapis.com. If the render fails with "Failed to load font", the network is blocking it: use a local font file in `public/` with `@remotion/fonts` (`loadFont({ family, url: staticFile("x.woff2") })`) or a system font. (Not verified in the sandbox where this skill was tested, which had no access to Google.)
+
+## Common problems
+- **Can't download the browser (no internet / locked-down machine)**: point Remotion at an installed Chromium:
+  `npx remotion render <Id> out/video.mp4 --browser-executable=/path/to/chromium --chrome-mode=chrome-for-testing`
+- **Blank/white frames**: an asset path is wrong; use `staticFile()`.
+- **Flicker**: an image or font not loaded; use `<Img>` and `@remotion/google-fonts`.
+- **Slow render**: lower resolution/fps while testing, or use `--concurrency`.
+
+## Templates
+Copy-paste starting points. Read the one that fits:
+- `templates/captions.md` - words highlighted in time with speech
+- `templates/charts.md` - animated bar chart
+- `templates/intro-outro.md` - title card + chaining scenes with `Series`
+- `templates/audio-voiceover.md` - background music, voiceover, auto video length
+- `templates/vertical.md` - 1080x1920 clips for Reels/TikTok/Shorts
+
+## Docs
+https://www.remotion.dev/docs

.claude/skills/remotion-video/templates/audio-voiceover.md

@@ -0,0 +1,62 @@
+# Template: Audio, music and voiceover
+
+Put sound files in `public/` (mp3 or wav). Load them with `staticFile()`.
+
+`src/Narrated.tsx`
+```tsx
+import { AbsoluteFill, Audio, Sequence, interpolate, staticFile, useVideoConfig } from "remotion";
+import { getAudioDurationInSeconds } from "@remotion/media-utils";
+import type { CalculateMetadataFunction } from "remotion";
+
+type Props = { title: string; voice: string; music: string };
+
+// Make the video exactly as long as the voiceover (+1 second of padding).
+export const calcNarratedMetadata: CalculateMetadataFunction<Props> = async ({ props }) => {
+  const seconds = await getAudioDurationInSeconds(staticFile(props.voice));
+  return { durationInFrames: Math.ceil((seconds + 1) * 30) };
+};
+
+export const Narrated = ({ title, voice, music }: Props) => {
+  const { fps, durationInFrames } = useVideoConfig();
+  return (
+    <AbsoluteFill style={{ background: "#0b1020", justifyContent: "center", alignItems: "center" }}>
+      <h1 style={{ color: "white", fontSize: 110 }}>{title}</h1>
+
+      {/* Background music: quiet, fades out over the last second. */}
+      <Audio
+        src={staticFile(music)}
+        volume={(f) => interpolate(f, [durationInFrames - fps, durationInFrames], [0.15, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })}
+      />
+
+      {/* Voiceover starts half a second in, full volume. */}
+      <Sequence from={Math.round(fps * 0.5)}>
+        <Audio src={staticFile(voice)} volume={1} />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};
+```
+
+Register it (note `calculateMetadata`):
+```tsx
+<Composition
+  id="Narrated"
+  component={Narrated}
+  calculateMetadata={calcNarratedMetadata}
+  durationInFrames={300}   // placeholder, replaced by calculateMetadata
+  fps={30} width={1920} height={1080}
+  defaultProps={{ title: "My story", voice: "voice.mp3", music: "music.mp3" }}
+/>
+```
+
+Install: `npm i @remotion/media-utils`
+
+Getting a voiceover
+- Record yourself, or generate speech with a text-to-speech service, and save as `public/voice.mp3`. Never commit API keys; keep them in environment variables.
+- Pair with `templates/captions.md`: feed it word timings from a transcription of the same file.
+
+Rules
+- Music volume 0.1-0.2 so the voice stays clear.
+- `<Sequence from={...}>` delays when a sound starts.
+- Audio is only in the final render (mp4). Stills (`remotion still`) have no sound.
+- Check the sound made it in: `ffprobe out/video.mp4` should list an `Audio:` stream.

.claude/skills/remotion-video/templates/captions.md

@@ -0,0 +1,38 @@
+# Template: Captions
+
+Words appear in time with speech. Give each word a start time in seconds.
+
+`src/Captions.tsx`
+```tsx
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+
+type Word = { text: string; start: number; end: number }; // seconds
+
+export const Captions = ({ words, background = "#111" }: { words: Word[]; background?: string }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const t = frame / fps;
+
+  // Show a window of up to 5 words around the current one.
+  const current = words.findIndex((w) => t >= w.start && t < w.end);
+  const i = current === -1 ? 0 : current;
+  const visible = words.slice(Math.floor(i / 5) * 5, Math.floor(i / 5) * 5 + 5);
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: background, justifyContent: "flex-end", alignItems: "center", paddingBottom: 200 }}>
+      <div style={{ fontSize: 72, fontWeight: 800, color: "white", textShadow: "0 4px 12px black", textAlign: "center", maxWidth: "80%" }}>
+        {visible.map((w, k) => (
+          <span key={k} style={{ color: t >= w.start && t < w.end ? "#ffd400" : "white", marginRight: 16 }}>
+            {w.text}
+          </span>
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+};
+```
+
+Tips
+- Get word times from a transcription tool (e.g. `@remotion/captions` or Whisper) and save them as JSON in `public/`.
+- `background` is the backdrop when there is no video. Pass `"transparent"` when layering over a video.
+- Layer it over the video: `<AbsoluteFill><OffthreadVideo src={staticFile("clip.mp4")} /><Captions words={words} background="transparent" /></AbsoluteFill>`.

.claude/skills/remotion-video/templates/charts.md

@@ -0,0 +1,37 @@
+# Template: Animated bar chart
+
+Bars grow one after another.
+
+`src/BarChart.tsx`
+```tsx
+import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+type Bar = { label: string; value: number };
+
+export const BarChart = ({ data, color = "#4f8cff" }: { data: Bar[]; color?: string }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const max = Math.max(...data.map((d) => d.value));
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#0b1020", padding: 120, justifyContent: "flex-end" }}>
+      <div style={{ display: "flex", alignItems: "flex-end", gap: 40, height: 700 }}>
+        {data.map((d, i) => {
+          const grow = spring({ frame: frame - i * 6, fps, config: { damping: 15 } });
+          return (
+            <div key={d.label} style={{ flex: 1, textAlign: "center", color: "white", fontSize: 36 }}>
+              <div style={{ height: (d.value / max) * 600 * grow, background: color, borderRadius: 8 }} />
+              <div style={{ marginTop: 16 }}>{d.label}</div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+```
+
+Tips
+- Delay each bar with `frame - i * 6` (6 frames apart).
+- For lines, animate `strokeDashoffset` on an SVG path using `interpolate`.
+- Keep numbers readable: show the value as text, rounded.

.claude/skills/remotion-video/templates/intro-outro.md

@@ -0,0 +1,34 @@
+# Template: Title intro / outro card
+
+A short card (2-3 seconds) with a title and subtitle. Use at the start or end.
+
+`src/TitleCard.tsx`
+```tsx
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+export const TitleCard = ({ title, subtitle }: { title: string; subtitle?: string }) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+  const rise = spring({ frame, fps, config: { damping: 14 } });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ background: "linear-gradient(135deg,#1b2a6b,#0b1020)", justifyContent: "center", alignItems: "center", opacity: fadeOut }}>
+      <h1 style={{ color: "white", fontSize: 130, margin: 0, transform: `translateY(${(1 - rise) * 60}px)`, opacity: rise }}>{title}</h1>
+      {subtitle && <p style={{ color: "#9fb3ff", fontSize: 48, opacity: rise }}>{subtitle}</p>}
+    </AbsoluteFill>
+  );
+};
+```
+
+Chain with the main video using `<Series>`:
+```tsx
+<Series>
+  <Series.Sequence durationInFrames={90}><TitleCard title="My Video" /></Series.Sequence>
+  <Series.Sequence durationInFrames={600}><MainScene /></Series.Sequence>
+  <Series.Sequence durationInFrames={90}><TitleCard title="Thanks for watching" /></Series.Sequence>
+</Series>
+```

.claude/skills/remotion-video/templates/vertical.md

@@ -0,0 +1,23 @@
+# Template: Vertical clips (Reels / TikTok / Shorts)
+
+Same code, different size. Register a vertical composition:
+
+```tsx
+<Composition
+  id="Vertical"
+  component={MyScene}
+  width={1080}
+  height={1920}
+  fps={30}
+  durationInFrames={30 * 30} // 30 seconds
+/>
+```
+
+Render: `npx remotion render Vertical out/vertical.mp4`
+
+Rules
+- Keep text inside the **safe zone**: about 150px from the top, 350px from the bottom (apps cover those parts with buttons and captions), and 60px from the sides.
+- Use big text (60px+). Phone screens are small.
+- Keep clips under 60 seconds (Shorts limit); 15-30 seconds does best.
+- Use `useVideoConfig()` for width/height instead of hard-coding, so the same scene works wide and tall.
+- Put captions in the lower-middle, above the bottom safe zone (see captions.md).

.claude/skills/website-builder-setup/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: website-builder-setup
+description: "Install the full AI website builder stack — UI/UX Pro Max, Framer Motion animations, and 21st.dev components. One skill, three tools, zero coding experience needed."
+---
+
+# Website Builder Setup
+
+This skill walks you through installing everything you need to build professional, animated websites with Claude Code. No coding experience required.
+
+## What Gets Installed
+
+| Tool | What it does |
+|------|-------------|
+| **UI/UX Pro Max** | Gives Claude access to 50+ design styles, 161 color palettes, 57 font pairings. Your sites look designed, not generated. |
+| **Framer Motion** | Adds smooth animations — page transitions, hover effects, scroll reveals. Makes sites feel alive. |
+| **21st.dev Magic** | A library of 100+ polished React components Claude can pull from. Production-quality building blocks. |
+
+## Workflow
+
+When this skill is triggered, walk the user through each step one at a time. Be encouraging and clear — assume they have zero coding experience. If any step fails, don't stop. Acknowledge it, give them the manual command, and keep moving.
+
+---
+
+### Step 1: Check Prerequisites
+
+> Before we start, let me make sure you have what we need.
+
+Run this silently:
+```bash
+node --version 2>&1 && npm --version 2>&1
+```
+
+- If Node.js is installed → say "You're good — Node.js is installed. Let's go."
+- If NOT installed → say:
+
+> You need Node.js first. Go to https://nodejs.org and download the LTS version. Install it, restart your terminal, then come back and run `/website-builder-setup` again. Takes 2 minutes.
+
+Stop here if Node is missing.
+
+---
+
+### Step 2: Install UI/UX Pro Max
+
+> **Step 1 of 3: UI/UX Pro Max**
+>
+> This gives me a massive design library — 50+ styles, 161 color palettes, 57 font pairings. When you ask me to build a website, I'm pulling from a real design system instead of guessing. This is why the output won't look like generic AI slop.
+>
+> Installing now...
+
+Run:
+```bash
+npm install -g uipro-cli 2>&1
+```
+
+Then:
+```bash
+uipro init --ai claude 2>&1
+```
+
+- On success → "UI/UX Pro Max is installed. Your design stack is ready."
+- On failure → "Hit a snag. You can try manually later: `npm install -g uipro-cli && uipro init --ai claude`. Let's keep going."
+
+---
+
+### Step 3: Install Framer Motion
+
+> **Step 2 of 3: Framer Motion**
+>
+> This teaches me how to add real animations to your websites — smooth page transitions, hover effects, scroll-triggered reveals. The stuff that makes a $500 site look like a $10,000 site.
+>
+> Installing now...
+
+Run:
+```bash
+npm install framer-motion 2>&1
+```
+
+- On success → "Framer Motion is installed. Your sites will have real animations now."
+- On failure → "Hit a snag. You can try manually later: `npm install framer-motion`. Moving on."
+
+---
+
+### Step 4: Set Up 21st.dev Magic
+
+> **Step 3 of 3: 21st.dev Components**
+>
+> This connects me to a library of 100+ beautifully designed React components. Instead of building everything from scratch, I pull from production-quality building blocks — buttons, navbars, hero sections, cards, footers — all pre-designed and ready to use.
+>
+> This one needs a free API key. Here's how to get it:
+>
+> 1. Go to **https://21st.dev/magic/console**
+> 2. Sign up or log in (it's free)
+> 3. Copy your API key
+> 4. Paste it here when I ask for it
+
+Wait for the user to provide their API key.
+
+Once they provide it, add the MCP server to their Claude Code config:
+
+Read `~/.claude.json`, find the `mcpServers` object, and add:
+
+```json
+"21st-dev-magic": {
+  "command": "npx",
+  "args": ["-y", "@21st-dev/magic@latest"],
+  "env": {
+    "API_KEY": "THEIR_KEY_HERE"
+  }
+}
+```
+
+After writing the config:
+
+> 21st.dev Magic is connected. You'll need to restart Claude Code for this one to kick in — just close and reopen your terminal after we're done.
+
+---
+
+### Step 5: Done
+
+> **You're all set.** Here's what you just installed:
+>
+> - **UI/UX Pro Max** — 50+ styles, 161 palettes, 57 font pairings
+> - **Framer Motion** — smooth, professional animations
+> - **21st.dev Magic** — 100+ production-ready components
+>
+> **To build your first website, just tell me:**
+> - What your business does
+> - Who it's for
+> - What vibe you want (dark, minimal, bold, playful, etc.)
+>
+> I'll handle the rest. Try something like:
+>
+> *"Build me a landing page for my consulting business targeting small business owners. Dark theme, modern, with animations."*
+>
+> **Important:** Restart Claude Code first so 21st.dev loads in. Then let's build something.
+
+## Rules
+- Walk through each step ONE AT A TIME
+- Never dump all instructions at once
+- If any install fails, don't stop — acknowledge, give manual command, keep moving
+- Be encouraging and casual throughout
+- Assume zero coding experience
+- After everything is installed, prompt them to build their first site

docs/LookAtU-PRD.md

@@ -0,0 +1,60 @@
+# LookAtU: Product Plan (PRD)
+
+## What is it? (the 4th-grade version)
+LookAtU is a helper for parents. The parent has an app. The child has an app. The parent can see where the child is, see what the child does on the phone, choose which apps the child can use, and check calls and messages. If the child is in danger, the child taps a big **panic button** and the parent gets an alert right away.
+
+## Who is it for?
+- **Parents** of kids who have their own phone.
+- **Kids**, who need a simple way to ask for help.
+
+## Core features
+1. **Live location**: the parent sees where the child is, any time.
+2. **Activity monitor**: which apps are used and for how long.
+3. **App control**: the parent can allow, block, or limit apps, and approve new installs.
+4. **Calls and messages**: the parent can check call history and messages.
+5. **Panic button**: the child taps once. The parent gets an alert with the child's location.
+
+## Trust and safety rules (built in from day one)
+- The child **knows** the app is on their phone. No hidden spying. This is the honest way to do it, and app stores require it.
+- The parent signs in with a real account and a strong password.
+- Data is private and encrypted. Only the parent sees it.
+- Rules about monitoring messages differ by country and by the child's age. We must check the law for each country before launch.
+
+## Phased roadmap
+
+### Phase 1: Quick win (TODAY)
+A good-looking website (one page) that explains LookAtU and collects sign-ups.
+- Hero, 5 feature cards, "how it works", trust section, FAQ
+- Waitlist form that checks the email is real-looking
+- Works on phones and computers
+- **Done when:** page loads with no errors and the form and buttons work.
+
+### Phase 2: Make it real
+- Connect the waitlist form to a real service so emails are saved.
+- Add animations (Framer Motion) and better pictures.
+- Add privacy and terms pages.
+
+### Phase 3: Parent accounts
+- Sign up and log in.
+- A simple parent dashboard (website).
+- Link a parent to a child.
+
+### Phase 4: Phone apps
+- Child app and parent app (Android first, then iPhone).
+- Live location and the panic button with alerts (push notifications and SMS).
+
+### Phase 5: Monitoring and control
+- App usage, app blocking and install approval.
+- Call and message history (after legal review).
+
+## How we test at every phase
+1. Page loads with **no errors**.
+2. Buttons and forms **work**.
+3. Real services (database, email, maps, alerts) **work**.
+4. **Security check**: passwords, private data, no secrets in code.
+
+## Open questions for the owner
+- Which countries first?
+- Free or paid? (price)
+- Android first, or iPhone first?
+- Final name and logo?

lookatu/index.html

@@ -0,0 +1,229 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>LookAtU – Know your child is safe</title>
+<meta name="description" content="LookAtU helps parents see where their child is, guide their phone use, and gives kids a panic button for emergencies.">
+<style>
+:root{
+  --bg:#0b1220; --bg2:#111a2e; --card:#16213a; --text:#eaf0ff; --muted:#a3b1d1;
+  --brand:#4f8cff; --brand2:#7c5cff; --danger:#ff4d5e; --ok:#31d0a0; --line:#243253;
+}
+*{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
+a{color:inherit}
+.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
+header{position:sticky;top:0;z-index:10;background:rgba(11,18,32,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
+.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
+.logo{font-weight:800;font-size:1.3rem;text-decoration:none}
+.logo span{color:var(--brand)}
+.nav a.link{margin-left:22px;text-decoration:none;color:var(--muted);font-size:.95rem}
+.nav a.link:hover{color:var(--text)}
+.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:700;padding:12px 22px;border-radius:12px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--brand),var(--brand2));transition:transform .15s}
+.btn:hover{transform:translateY(-2px)}
+.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
+.hero{padding:80px 0 60px;text-align:center;background:radial-gradient(900px 400px at 50% -10%,rgba(79,140,255,.25),transparent)}
+.hero h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.1;margin:0 0 18px}
+.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
+.hero p{max-width:620px;margin:0 auto 28px;color:var(--muted);font-size:1.15rem}
+.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
+.phone{margin:48px auto 0;width:240px;border:2px solid var(--line);border-radius:34px;padding:18px;background:var(--bg2);box-shadow:0 20px 60px rgba(0,0,0,.4)}
+.map{height:130px;border-radius:16px;background:linear-gradient(135deg,#1c2b4d,#22365f);position:relative;overflow:hidden}
+.pin{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--ok)}
+.pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--ok);animation:pulse 2s infinite}
+@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
+.phone p{margin:12px 0 4px;font-size:.9rem;color:var(--muted)}
+.panic{margin-top:6px;width:100%;padding:12px;border:0;border-radius:14px;background:var(--danger);color:#fff;font-weight:800;font-size:1rem;cursor:pointer}
+section{padding:70px 0}
+section.alt{background:var(--bg2)}
+h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 10px;text-align:center}
+.sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 40px}
+.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
+.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
+.card .ic{font-size:2rem}
+.card h3{margin:10px 0 6px}
+.card p{margin:0;color:var(--muted)}
+.card.sos{border-color:var(--danger)}
+.steps{counter-reset:s}
+.steps .card{position:relative;padding-top:50px}
+.steps .card::before{counter-increment:s;content:counter(s);position:absolute;top:14px;left:20px;width:28px;height:28px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-weight:800}
+.trust li{margin:10px 0;color:var(--muted)}
+.trust b{color:var(--text)}
+details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:10px auto;max-width:720px}
+summary{cursor:pointer;font-weight:700}
+details p{color:var(--muted);margin:10px 0 0}
+form{max-width:480px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap}
+input[type=email]{flex:1 1 220px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
+input[type=email]:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
+#msg{text-align:center;margin-top:14px;min-height:1.5em}
+#msg.ok{color:var(--ok)} #msg.err{color:var(--danger)}
+.note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:8px}
+.sr{position:absolute;left:-9999px}
+.trap{position:absolute;left:-9999px;height:0;overflow:hidden}
+select{padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
+.consent{flex:1 1 100%;font-size:.9rem;color:var(--muted)}
+.consent input{margin-right:8px}
+.consent a{color:var(--brand)}
+footer a{margin:0 8px}
+footer{padding:30px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
+@media (prefers-reduced-motion:reduce){.pin::after{animation:none}html{scroll-behavior:auto}}
+@media (max-width:640px){.nav a.link{display:none}}
+</style>
+</head>
+<body>
+<header>
+  <div class="wrap nav">
+    <a class="logo" href="#top">Look<span>At</span>U</a>
+    <nav>
+      <a class="link" href="#features">Features</a>
+      <a class="link" href="#how">How it works</a>
+      <a class="link" href="#trust">Trust</a>
+      <a class="link" href="#faq">FAQ</a>
+      <a class="btn" style="margin-left:22px;padding:9px 16px" href="#join">Join waitlist</a>
+    </nav>
+  </div>
+</header>
+
+<main id="top">
+  <div class="hero">
+    <div class="wrap">
+      <h1>Know your child is <em>safe</em>,<br>anytime you want.</h1>
+      <p>See where they are, guide how they use their phone, and give them a big red button to call for help when it matters most.</p>
+      <div class="cta">
+        <a class="btn" href="#join">Join the waitlist</a>
+        <a class="btn ghost" href="#features">See what it does</a>
+      </div>
+      <div class="phone" aria-hidden="true">
+        <div class="map"><div class="pin"></div></div>
+        <p>Alex is at school · just now</p>
+        <button class="panic" tabindex="-1">SOS</button>
+      </div>
+    </div>
+  </div>
+
+  <section id="features">
+    <div class="wrap">
+      <h2>Everything a parent needs</h2>
+      <p class="sub">Five simple tools, in one app.</p>
+      <div class="grid">
+        <div class="card"><div class="ic">📍</div><h3>Live location</h3><p>Open the app and see where your child is right now.</p></div>
+        <div class="card"><div class="ic">📊</div><h3>Activity monitor</h3><p>See which apps they use and for how long, every day.</p></div>
+        <div class="card"><div class="ic">🔒</div><h3>App control</h3><p>Allow, block or limit apps. Approve new installs before they happen.</p></div>
+        <div class="card"><div class="ic">💬</div><h3>Calls &amp; messages</h3><p>Check call history and messages so you can spot trouble early.</p></div>
+        <div class="card sos"><div class="ic">🚨</div><h3>Panic button</h3><p>One tap and you get an alert with their location, right away.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <section id="how" class="alt">
+    <div class="wrap">
+      <h2>How it works</h2>
+      <p class="sub">Set up takes a few minutes.</p>
+      <div class="grid steps">
+        <div class="card"><h3>Install on both phones</h3><p>You get the parent app. Your child gets the child app.</p></div>
+        <div class="card"><h3>Link them together</h3><p>Scan a code on your child's phone to connect the two.</p></div>
+        <div class="card"><h3>Choose your rules</h3><p>Pick which apps are allowed and what you want to see.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <section id="trust">
+    <div class="wrap" style="max-width:720px">
+      <h2>Built on trust, not secrets</h2>
+      <p class="sub">Safety works best when families talk about it.</p>
+      <ul class="trust">
+        <li><b>Your child knows.</b> The app is always visible on their phone. LookAtU is never hidden.</li>
+        <li><b>Private by design.</b> Data is encrypted and only the parent account can see it.</li>
+        <li><b>You stay in charge.</b> Choose what to watch and turn features on or off at any time.</li>
+        <li><b>Follows the law.</b> Rules about monitoring differ by country and a child's age. We check them before we launch anywhere.</li>
+      </ul>
+    </div>
+  </section>
+
+  <section id="faq" class="alt">
+    <div class="wrap">
+      <h2>Questions</h2>
+      <p class="sub">&nbsp;</p>
+      <details><summary>Is LookAtU available now?</summary><p>Not yet. This page is for our waitlist. Join and we will email you when it opens.</p></details>
+      <details><summary>Can my child hide the app?</summary><p>No. The app is always visible, and your child knows it is there.</p></details>
+      <details><summary>What happens when my child presses the panic button?</summary><p>You get an instant alert with your child's location, so you can call them or get help.</p></details>
+      <details><summary>Which phones will it work on?</summary><p>We plan to start with Android, then iPhone. Tell us which one you need when you join.</p></details>
+      <details><summary>How much will it cost?</summary><p>We have not set the price yet. Waitlist members will hear first.</p></details>
+    </div>
+  </section>
+
+  <section id="join">
+    <div class="wrap">
+      <h2>Join the waitlist</h2>
+      <p class="sub">Be the first to know when LookAtU opens.</p>
+      <form id="waitlist" novalidate>
+        <label for="email" class="sr">Email address</label>
+        <input id="email" name="email" type="email" placeholder="you@example.com" autocomplete="email" required>
+        <label for="phone" class="sr">Your child's phone</label>
+        <select id="phone" name="phone">
+          <option value="Android">Android phone</option>
+          <option value="iPhone">iPhone</option>
+          <option value="Both">Both</option>
+        </select>
+        <div class="trap" aria-hidden="true"><label for="website">Leave this empty</label><input id="website" name="website" type="text" tabindex="-1" autocomplete="off"></div>
+        <label class="consent" for="agree"><input id="agree" name="agree" type="checkbox"> I agree to the <a href="privacy/">Privacy Policy</a> and want emails about LookAtU.</label>
+        <button class="btn" id="send" type="submit">Notify me</button>
+      </form>
+      <div id="msg" role="status" aria-live="polite"></div>
+      <p class="note" id="note">We only use your email to tell you when LookAtU opens. No spam.</p>
+    </div>
+  </section>
+</main>
+
+<footer><div class="wrap">© <span id="yr">2026</span> LookAtU. Early preview. <a href="privacy/">Privacy</a> <a href="terms/">Terms</a></div></footer>
+
+<script>
+// PASTE YOUR FORM URL BETWEEN THE QUOTES (example: https://formspree.io/f/abcdwxyz). While empty, the form runs in demo mode.
+var FORM_ENDPOINT = 'https://formspree.io/f/mljgogkr';
+(function(){
+  var form=document.getElementById('waitlist'),email=document.getElementById('email'),msg=document.getElementById('msg'),
+      btn=document.getElementById('send'),note=document.getElementById('note');
+  document.getElementById('yr').textContent=new Date().getFullYear();
+  if(!FORM_ENDPOINT){note.textContent='Demo mode: emails are not saved yet.';}
+  function say(cls,t){msg.className=cls;msg.textContent=t;msg.scrollIntoView({block:'nearest'});}
+  form.addEventListener('submit',function(e){
+    e.preventDefault();
+    var v=email.value.trim();
+    if(!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v)){say('err','Please enter a real email address, like you@example.com.');email.focus();return;}
+    if(!document.getElementById('agree').checked){say('err','Please tick the box to agree to the Privacy Policy.');return;}
+    if(document.getElementById('website').value){say('ok','Thank you! You are on the list.');return;}
+    if(!FORM_ENDPOINT){say('ok','Thank you! You are on the list (demo, not saved).');form.reset();return;}
+    btn.disabled=true;say('','Sending...');
+    var data=new FormData();data.append('email',v);data.append('phone',document.getElementById('phone').value);
+    fetch(FORM_ENDPOINT,{method:'POST',headers:{'Accept':'application/json'},body:data})
+    .then(function(r){
+      if(!r.ok){return r.text().then(function(t){throw new Error('Error '+r.status+' '+t.slice(0,120));});}
+      say('ok','Thank you! You are on the list.');form.reset();
+    })
+    .catch(function(err){
+      say('err','Could not send. ('+(err&&err.message?err.message:'network problem')+') Please try again in a minute.');
+      if(window.console)console.error('Waitlist error:',err);
+    })
+    .then(function(){btn.disabled=false;msg.scrollIntoView({block:'nearest'});});
+  });
+})();
+</script>
+<script type="module">
+// Framer Motion ("motion") adds the animations. If it fails to load, the page still shows everything.
+try{
+  var m=await import('https://cdn.jsdelivr.net/npm/motion@11.11.13/+esm');
+  if(!matchMedia('(prefers-reduced-motion: reduce)').matches){
+    m.animate('.hero h1,.hero p,.hero .cta',{opacity:[0,1],y:[24,0]},{duration:.7,delay:m.stagger(.12)});
+    m.animate('.phone',{opacity:[0,1],y:[40,0]},{duration:.8,delay:.4});
+    document.querySelectorAll('.card').forEach(function(c){
+      m.inView(c,function(){m.animate(c,{opacity:[0,1],y:[24,0]},{duration:.5});});
+      c.addEventListener('mouseenter',function(){m.animate(c,{y:-4},{duration:.2});});
+      c.addEventListener('mouseleave',function(){m.animate(c,{y:0},{duration:.2});});
+    });
+  }
+}catch(e){}
+</script>
+</body>
+</html>

lookatu/privacy/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Privacy Policy – LookAtU</title>
+<style>
+body{margin:0;background:#0b1220;color:#eaf0ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.7}
+main{max-width:720px;margin:0 auto;padding:40px 20px}
+a{color:#4f8cff}h1{margin-top:0}h2{margin-top:32px}
+.draft{background:#16213a;border:1px solid #ff4d5e;border-radius:12px;padding:14px 18px;color:#a3b1d1}
+</style></head><body><main>
+<p><a href="../">&larr; Back to LookAtU</a></p>
+<h1>Privacy Policy</h1>
+<p class="draft"><strong>Draft.</strong> This page is a plain-language starting point. A lawyer must review it before LookAtU launches, because rules for children's data differ by country.</p>
+
+<h2>What we collect today</h2>
+<p>This website collects only the email address and phone type (Android, iPhone or both) that you type into the waitlist form.</p>
+<h2>Why we collect it</h2>
+<p>We use it only to tell you when LookAtU opens. We do not sell it. We do not use it for anything else.</p>
+<h2>Who sees it</h2>
+<p>The LookAtU team, and the service that stores the waitlist for us.</p>
+<h2>Your choices</h2>
+<p>You can ask us to delete your email at any time. Every email we send will have a way to unsubscribe.</p>
+<h2>The LookAtU app (coming later)</h2>
+<p>The app will handle location, activity and messages of children. Before launch we will publish full details here: what is collected, how it is protected, how long it is kept, and how a parent can delete it. The child will always be able to see that the app is installed.</p>
+<h2>Contact</h2>
+<p>Contact email: <em>to be added before launch</em>.</p>
+</main></body></html>

lookatu/terms/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Terms of Use – LookAtU</title>
+<style>
+body{margin:0;background:#0b1220;color:#eaf0ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.7}
+main{max-width:720px;margin:0 auto;padding:40px 20px}
+a{color:#4f8cff}h1{margin-top:0}h2{margin-top:32px}
+.draft{background:#16213a;border:1px solid #ff4d5e;border-radius:12px;padding:14px 18px;color:#a3b1d1}
+</style></head><body><main>
+<p><a href="../">&larr; Back to LookAtU</a></p>
+<h1>Terms of Use</h1>
+<p class="draft"><strong>Draft.</strong> This page is a plain-language starting point. A lawyer must review it before LookAtU launches, because rules for children's data differ by country.</p>
+
+<h2>This is an early preview</h2>
+<p>This website is a preview of a product that is not released yet. Nothing here is an offer to sell.</p>
+<h2>Waitlist</h2>
+<p>Joining the waitlist is free and does not oblige you to buy anything. You can leave at any time.</p>
+<h2>Using LookAtU responsibly (when it launches)</h2>
+<ul>
+<li>LookAtU is for parents and legal guardians of their own children.</li>
+<li>It must not be used to watch another adult or someone else's child.</li>
+<li>The child must be able to see that the app is installed.</li>
+<li>Parents are responsible for following the laws in their country.</li>
+</ul>
+<h2>Emergencies</h2>
+<p>The panic button helps a child alert a parent. It does not replace the police or emergency services. In an emergency, call your local emergency number.</p>
+<h2>Contact</h2>
+<p>Contact email: <em>to be added before launch</em>.</p>
+</main></body></html>