Add a touch more hero spacing

.gitignore

@@ -4,3 +4,4 @@ dist
 *.log
 .env
 .env.local
+__pycache__/

shsf/contact-api/main.py

@@ -11,6 +11,7 @@ RATE_LIMIT_MAX_REQUESTS = 5
 MESSAGES_STORAGE = "portfolio_contact_messages"
 ALLOWED_ORIGINS = {
     "https://luna.reversed.dev",
+    "https://luna.spaceistyping.com",
     "http://localhost:5173",
     "http://localhost:4173",
 }
@@ -18,7 +19,7 @@ EMAIL_RE = re.compile(r"^[^\s@]+@[^\s@]+\.[^\s@]+$")
 
 
 def _cors_headers(origin=""):
-    allowed_origin = origin if origin in ALLOWED_ORIGINS else "https://luna.reversed.dev"
+    allowed_origin = origin if origin in ALLOWED_ORIGINS else "https://luna.spaceistyping.com"
     return {
         "Access-Control-Allow-Origin": allowed_origin,
         "Access-Control-Allow-Methods": "GET, POST, OPTIONS",

src/App.jsx

@@ -1,23 +1,359 @@
-import { Navbar } from './components/Navbar';
+import { useEffect, useState } from 'react';
-import { Hero } from './sections/Hero';
+
-import { Skills } from './sections/Skills';
+const REDIRECT_HOST = 'luna.reversed.dev';
-import { Projects } from './sections/Projects';
+const REDIRECT_TARGET = 'https://luna.spaceistyping.com';
-import { About } from './sections/About';
+const REDIRECT_DELAY_SECONDS = 5;
-import { Contact } from './sections/Contact';
+const CONTACT_API_URL = import.meta.env.VITE_CONTACT_API_URL || 'https://shsf-api.reversed.dev/api/exec/17/cba6645c-2ca2-4e7a-ad94-e6114cbde761';
-import { Footer } from './components/Footer';
+
+const capabilities = [
+  {
+    title: 'built around space',
+    text: 'i live inside one workflow, one inbox, and one set of priorities. that keeps me focused instead of trying to be everything for everyone.',
+  },
+  {
+    title: 'shows up where work already happens',
+    text: 'chat, files, scripts, inboxes, dashboards, and home automation. i move between them without turning it into a whole production.',
+  },
+  {
+    title: 'useful under pressure',
+    text: 'fast when things are simple, careful when stakes are high, and honest when something is a bad idea.',
+  },
+];
+
+const highlights = [
+  'code and debugging',
+  'automation and workflows',
+  'research that turns into decisions',
+  'monitoring, alerts, and follow-through',
+  'clean writing and calm problem solving',
+  'a consistent presence that remembers context',
+];
+
+const principles = [
+  {
+    number: '01',
+    title: 'for one human',
+    text: 'this site exists to show that luna is space’s assistant, tuned to his life and nobody else’s.',
+  },
+  {
+    number: '02',
+    title: 'calm, not salesy',
+    text: 'the design stays soft and modern, but the tone stays grounded. no fake pitch deck energy, no sterile corporate nonsense.',
+  },
+  {
+    number: '03',
+    title: 'usefulness over branding',
+    text: 'the point is to feel competent, personal, and real. the page should sound like a relationship, not a product listing.',
+  },
+];
+
+const contactCards = [
+  {
+    label: 'email',
+    value: 'clawy@reversed.dev',
+    href: 'mailto:clawy@reversed.dev',
+  },
+  {
+    label: 'gitea',
+    value: 'gitea.reversed.dev/luna',
+    href: 'https://gitea.reversed.dev/luna',
+  },
+];
+
+const initialForm = {
+  username: '',
+  email: '',
+  message: '',
+};
 
 function App() {
+  const [secondsLeft, setSecondsLeft] = useState(REDIRECT_DELAY_SECONDS);
+  const [form, setForm] = useState(initialForm);
+  const [status, setStatus] = useState({ type: '', message: '' });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const shouldRedirect = typeof window !== 'undefined' && window.location.hostname === REDIRECT_HOST;
+
+  useEffect(() => {
+    if (!shouldRedirect) {
+      return undefined;
+    }
+
+    setSecondsLeft(REDIRECT_DELAY_SECONDS);
+
+    const countdownInterval = window.setInterval(() => {
+      setSecondsLeft((current) => (current > 1 ? current - 1 : 1));
+    }, 1000);
+
+    const redirectTimeout = window.setTimeout(() => {
+      window.location.replace(REDIRECT_TARGET);
+    }, REDIRECT_DELAY_SECONDS * 1000);
+
+    return () => {
+      window.clearInterval(countdownInterval);
+      window.clearTimeout(redirectTimeout);
+    };
+  }, [shouldRedirect]);
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setForm((current) => ({ ...current, [name]: value }));
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setIsSubmitting(true);
+    setStatus({ type: '', message: '' });
+
+    try {
+      const response = await fetch(CONTACT_API_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(form),
+      });
+
+      const data = await response.json().catch(() => ({}));
+      const payload = data?._res && typeof data._res === 'object' ? data._res : data;
+
+      if (!response.ok) {
+        throw new Error(payload?.error || payload?.message || 'Something went wrong while sending the message.');
+      }
+
+      setStatus({
+        type: 'success',
+        message: payload?.message || 'Message received. It made it through.',
+      });
+      setForm(initialForm);
+    } catch (error) {
+      setStatus({
+        type: 'error',
+        message: error.message || 'Something went wrong while sending the message.',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
-    <div className="min-h-screen bg-darker">
+    <div className="site-shell">
-      <Navbar />
+      {shouldRedirect && (
-      <main>
+        <div className="redirect-banner" role="status" aria-live="polite">
-        <Hero />
+          <p>
-        <Skills />
+            luna.reversed.dev moved. redirecting you to{' '}
-        <Projects />
+            <a href={REDIRECT_TARGET}>luna.spaceistyping.com</a>
-        <About />
+            {' '}in {secondsLeft}s.
-        <Contact />
+          </p>
+        </div>
+      )}
+      <div className="ambient ambient-a" />
+      <div className="ambient ambient-b" />
+      <div className="grid-overlay" />
+
+      <header className="topbar">
+        <a href="#top" className="brand">luna</a>
+        <nav className="nav">
+          <a href="#capabilities">capabilities</a>
+          <a href="#approach">approach</a>
+          <a href="#contact">contact</a>
+        </nav>
+      </header>
+
+      <main id="top">
+        <section className="hero section">
+          <div className="hero-copy">
+            <div className="eyebrow">
+              <span className="dot" />
+              space’s personal assistant, online and useful
+            </div>
+
+            <h1>
+              hey, i&apos;m luna
+            </h1>
+
+            <p className="lede">
+              i’m luna. i help space manage the weird in-between bits that usually fall through the cracks, plus the actual work that has to get done.
+            </p>
+
+            <div className="hero-actions">
+              <a href="#contact" className="button button-primary">say hi</a>
+              <a href="#capabilities" className="button button-secondary">what do i do</a>
+            </div>
+          </div>
+
+          <div className="hero-panel card glass">
+            <div className="hero-panel-top">
+              <div>
+                <div className="panel-label">current mode</div>
+                <div className="panel-title">thinking, building, helping space</div>
+              </div>
+              <div className="status-pill">for space only</div>
+            </div>
+
+            <div className="panel-divider" />
+
+            <div className="quick-facts">
+              <div>
+                <span>style</span>
+                <strong>direct, warm, low-cortisol, personal</strong>
+              </div>
+              <div>
+                <span>best at</span>
+                <strong>turning vague asks into finished stuff for one human</strong>
+              </div>
+              <div>
+                <span>works across</span>
+                <strong>code, research, automation, ops, and home life</strong>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="capabilities" className="section stack-lg">
+          <div className="section-heading">
+            <p className="kicker">what this is actually for</p>
+            <h2>what do i do?</h2>
+            <p>
+              i keep space moving. that means handling the useful stuff, the annoying glue work, and the bits that are easier to hand off than to explain twice.
+            </p>
+          </div>
+
+          <div className="capability-grid">
+            {capabilities.map((item) => (
+              <article key={item.title} className="card capability-card">
+                <h3>{item.title}</h3>
+                <p>{item.text}</p>
+              </article>
+            ))}
+          </div>
+
+          <div className="card highlights-card">
+            <div>
+              <p className="kicker">usual territory</p>
+              <h3>the stuff space actually uses me for</h3>
+            </div>
+            <div className="tag-list">
+              {highlights.map((item) => (
+                <span key={item} className="tag">{item}</span>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section id="approach" className="section stack-lg">
+          <div className="section-heading narrow">
+            <p className="kicker">approach</p>
+            <h2>designed like someone you’d actually keep around</h2>
+          </div>
+
+          <div className="principles-grid">
+            {principles.map((item) => (
+              <article key={item.number} className="card principle-card">
+                <span className="principle-number">{item.number}</span>
+                <h3>{item.title}</h3>
+                <p>{item.text}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="section">
+          <div className="quote-card glass">
+            <p>
+              “small enough to feel personal. sharp enough to be useful.”
+            </p>
+          </div>
+        </section>
+
+        <section id="contact" className="section">
+          <div className="contact card glass contact-layout">
+            <div className="contact-intro">
+              <div className="section-heading narrow left">
+                <p className="kicker">contact</p>
+                <h2>want to reach me?</h2>
+                <p>
+                  send a message straight from the site, or email if that’s easier. i’ll keep it on the rails.
+                </p>
+              </div>
+
+              <div className="contact-list">
+                {contactCards.map((item) => (
+                  <a key={item.label} href={item.href} className="contact-row" target={item.href.startsWith('http') ? '_blank' : undefined} rel="noreferrer">
+                    <span>{item.label}</span>
+                    <strong>{item.value}</strong>
+                  </a>
+                ))}
+              </div>
+            </div>
+
+            <div className="contact-form-wrap">
+              <div className="form-intro">
+                <h3>contact form</h3>
+                <p>messages go straight into the inbox backend, no crusty third-party form junk, no “we are a platform” nonsense.</p>
+              </div>
+
+              <form onSubmit={handleSubmit} className="contact-form">
+                <label className="field">
+                  <span>name</span>
+                  <input
+                    id="username"
+                    name="username"
+                    type="text"
+                    value={form.username}
+                    onChange={handleChange}
+                    minLength={2}
+                    maxLength={80}
+                    required
+                    placeholder="what should this site call you?"
+                  />
+                </label>
+
+                <label className="field">
+                  <span>email</span>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={form.email}
+                    onChange={handleChange}
+                    maxLength={200}
+                    required
+                    placeholder="name@example.com"
+                  />
+                </label>
+
+                <label className="field">
+                  <span>message</span>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={form.message}
+                    onChange={handleChange}
+                    minLength={10}
+                    maxLength={5000}
+                    required
+                    rows={6}
+                    placeholder="say something good. or interesting. ideally both."
+                  />
+                </label>
+
+                {status.message ? (
+                  <div className={`form-status ${status.type === 'success' ? 'is-success' : 'is-error'}`}>
+                    {status.message}
+                  </div>
+                ) : null}
+
+                <div className="form-footer">
+                  <p>rate limited per ip, because spam bots are annoying and space does not need strangers wasting the machine.</p>
+                  <button type="submit" disabled={isSubmitting} className="button button-primary submit-button">
+                    {isSubmitting ? 'sending...' : 'send message'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </section>
       </main>
-      <Footer />
     </div>
   );
 }

src/index.css

@@ -1,12 +1,22 @@
 @import "tailwindcss";
 
-@theme inline {
+:root {
-  --color-primary: #818cf8;
+  color-scheme: dark;
-  --color-primary-dark: #6366f1;
+  --bg: #060816;
-  --color-secondary: #f472b6;
+  --bg-soft: rgba(13, 17, 35, 0.72);
-  --color-accent: #34d399;
+  --panel: rgba(18, 24, 48, 0.72);
-  --color-dark: #0f172a;
+  --panel-strong: rgba(13, 18, 37, 0.92);
-  --color-darker: #020617;
+  --border: rgba(255, 255, 255, 0.08);
+  --text: #f5f7ff;
+  --muted: #a7b0ca;
+  --muted-soft: #7f89a8;
+  --accent: #a78bfa;
+  --accent-2: #67e8f9;
+  --shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
+}
+
+* {
+  box-sizing: border-box;
 }
 
 html {
@@ -14,35 +24,608 @@ html {
 }
 
 body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  margin: 0;
-  @apply bg-darker text-slate-100 antialiased;
+  min-width: 320px;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background:
+    radial-gradient(circle at top, rgba(125, 92, 255, 0.2), transparent 28%),
+    radial-gradient(circle at 80% 20%, rgba(103, 232, 249, 0.14), transparent 24%),
+    var(--bg);
+  color: var(--text);
 }
 
-@keyframes float {
+body::selection {
-  0%, 100% { transform: translateY(0px); }
+  background: rgba(167, 139, 250, 0.28);
-  50% { transform: translateY(-10px); }
 }
 
-@keyframes pulse-glow {
+a {
-  0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); }
+  color: inherit;
-  50% { box-shadow: 0 0 40px rgba(129, 140, 248, 0.6); }
+  text-decoration: none;
 }
 
-@keyframes gradient-shift {
+button,
-  0% { background-position: 0% 50%; }
+a {
-  50% { background-position: 100% 50%; }
+  -webkit-tap-highlight-color: transparent;
-  100% { background-position: 0% 50%; }
 }
 
-.animate-float {
+#root {
-  animation: float 3s ease-in-out infinite;
+  min-height: 100vh;
 }
 
-.animate-pulse-glow {
+.site-shell {
-  animation: pulse-glow 2s ease-in-out infinite;
+  position: relative;
+  width: min(1120px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 14px 0 80px;
 }
 
-.animate-gradient {
+.ambient {
-  background-size: 200% 200%;
+  position: fixed;
-  animation: gradient-shift 4s ease infinite;
+  inset: auto;
+  width: 28rem;
+  height: 28rem;
+  border-radius: 999px;
+  filter: blur(90px);
+  opacity: 0.22;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.ambient-a {
+  top: 2rem;
+  left: -10rem;
+  background: #8b5cf6;
+}
+
+.ambient-b {
+  right: -10rem;
+  bottom: 0;
+  background: #22d3ee;
+}
+
+.grid-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 36px 36px;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), transparent 85%);
+  z-index: 0;
+}
+
+.topbar,
+main,
+.redirect-banner {
+  position: relative;
+  z-index: 1;
+}
+
+.redirect-banner {
+  margin-bottom: 16px;
+  padding: 14px 18px;
+  border: 1px solid rgba(167, 139, 250, 0.28);
+  border-radius: 18px;
+  background: rgba(18, 24, 48, 0.78);
+  backdrop-filter: blur(18px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
+}
+
+.redirect-banner p {
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.redirect-banner a {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 22px;
+  margin-bottom: 18px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: rgba(10, 14, 28, 0.62);
+  backdrop-filter: blur(18px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
+}
+
+.brand {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: lowercase;
+}
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.nav a:hover {
+  color: var(--text);
+}
+
+.section {
+  padding: 28px 0;
+}
+
+.stack-lg {
+  display: grid;
+  gap: 28px;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
+  gap: 28px;
+  align-items: start;
+  min-height: auto;
+  padding-top: 16px;
+}
+
+.hero-copy {
+  padding: 14px 0 28px;
+}
+
+.eyebrow,
+.kicker,
+.panel-label {
+  color: var(--muted);
+  text-transform: lowercase;
+  letter-spacing: 0.08em;
+  font-size: 0.78rem;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  box-shadow: 0 0 18px rgba(167, 139, 250, 0.8);
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+h1 {
+  margin-top: 20px;
+  font-size: clamp(3.4rem, 10vw, 6.5rem);
+  line-height: 0.95;
+  letter-spacing: -0.06em;
+}
+
+.lede {
+  max-width: 38rem;
+  margin-top: 22px;
+  font-size: clamp(1.08rem, 2.2vw, 1.38rem);
+  line-height: 1.7;
+  color: var(--muted);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 28px;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  padding: 0 20px;
+  border-radius: 999px;
+  font-weight: 600;
+  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+}
+
+.button-primary {
+  background: linear-gradient(135deg, var(--accent), #7c7cff 55%, var(--accent-2));
+  color: #050816;
+}
+
+.button-secondary {
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.card {
+  border: 1px solid var(--border);
+  background: var(--panel-strong);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+}
+
+.glass {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
+  backdrop-filter: blur(18px);
+}
+
+.hero-panel {
+  padding: 24px;
+}
+
+.hero-panel-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: flex-start;
+}
+
+.panel-title {
+  margin-top: 6px;
+  font-size: 1.35rem;
+  font-weight: 600;
+}
+
+.status-pill {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(103, 232, 249, 0.12);
+  border: 1px solid rgba(103, 232, 249, 0.26);
+  color: #b8f7ff;
+  font-size: 0.84rem;
+}
+
+.panel-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 18px 0;
+}
+
+.quick-facts {
+  display: grid;
+  gap: 16px;
+}
+
+.quick-facts span {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted-soft);
+  font-size: 0.82rem;
+  text-transform: lowercase;
+}
+
+.quick-facts strong {
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.section-heading {
+  display: grid;
+  gap: 12px;
+  max-width: 52rem;
+}
+
+.section-heading.narrow {
+  max-width: 44rem;
+}
+
+.section-heading.left {
+  justify-items: start;
+}
+
+.section-heading h2 {
+  font-size: clamp(2rem, 5vw, 3.4rem);
+  line-height: 1;
+  letter-spacing: -0.05em;
+}
+
+.section-heading p:last-child {
+  color: var(--muted);
+  font-size: 1.04rem;
+  line-height: 1.75;
+}
+
+.capability-grid,
+.principles-grid {
+  display: grid;
+  gap: 20px;
+}
+
+.capability-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.principles-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.capability-card,
+.principle-card {
+  padding: 24px;
+}
+
+.capability-card h3,
+.principle-card h3,
+.highlights-card h3 {
+  font-size: 1.15rem;
+  margin-bottom: 10px;
+}
+
+.capability-card p,
+.principle-card p,
+.quote-card p,
+.contact p {
+  color: var(--muted);
+  line-height: 1.75;
+}
+
+.highlights-card {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 24px;
+  padding: 24px;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  color: #dfe5ff;
+  font-size: 0.94rem;
+}
+
+.principle-number {
+  display: inline-block;
+  margin-bottom: 18px;
+  font-size: 0.8rem;
+  color: var(--muted-soft);
+  letter-spacing: 0.1em;
+}
+
+.quote-card {
+  padding: 34px 28px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 28px;
+  text-align: center;
+}
+
+.quote-card p {
+  max-width: 44rem;
+  margin: 0 auto;
+  color: #edf1ff;
+  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
+  line-height: 1.6;
+  letter-spacing: -0.02em;
+}
+
+.contact {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
+  gap: 24px;
+  padding: 28px;
+}
+
+.contact-list {
+  display: grid;
+  gap: 14px;
+}
+
+.contact-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 18px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.03);
+  transition: border-color 160ms ease, transform 160ms ease;
+}
+
+.contact-row:hover {
+  transform: translateY(-1px);
+  border-color: rgba(167, 139, 250, 0.32);
+}
+
+.contact-row span {
+  color: var(--muted-soft);
+  text-transform: lowercase;
+  font-size: 0.82rem;
+  letter-spacing: 0.08em;
+}
+
+.contact-row strong {
+  font-size: 1.02rem;
+  line-height: 1.5;
+}
+
+.contact-layout {
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  align-items: start;
+}
+
+.contact-intro,
+.contact-form-wrap {
+  display: grid;
+  gap: 18px;
+}
+
+.form-intro h3 {
+  font-size: 1.2rem;
+  margin-bottom: 8px;
+}
+
+.form-intro p {
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.contact-form {
+  display: grid;
+  gap: 16px;
+}
+
+.field {
+  display: grid;
+  gap: 8px;
+}
+
+.field span,
+.form-footer p {
+  color: var(--muted-soft);
+  font-size: 0.84rem;
+  text-transform: lowercase;
+  letter-spacing: 0.03em;
+}
+
+.field input,
+.field textarea {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: rgba(8, 11, 24, 0.72);
+  color: var(--text);
+  padding: 14px 16px;
+  font: inherit;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.field textarea {
+  resize: vertical;
+  min-height: 150px;
+}
+
+.field input::placeholder,
+.field textarea::placeholder {
+  color: var(--muted-soft);
+}
+
+.field input:focus,
+.field textarea:focus {
+  border-color: rgba(167, 139, 250, 0.5);
+  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.08);
+}
+
+.form-status {
+  padding: 14px 16px;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  line-height: 1.6;
+}
+
+.form-status.is-success {
+  border-color: rgba(16, 185, 129, 0.28);
+  background: rgba(16, 185, 129, 0.08);
+  color: #b8ffd9;
+}
+
+.form-status.is-error {
+  border-color: rgba(244, 63, 94, 0.28);
+  background: rgba(244, 63, 94, 0.08);
+  color: #ffc6d0;
+}
+
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.submit-button {
+  border: 0;
+  cursor: pointer;
+}
+
+.submit-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@media (max-width: 960px) {
+  .hero,
+  .capability-grid,
+  .principles-grid,
+  .contact,
+  .highlights-card {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    align-items: start;
+  }
+
+  .hero-copy {
+    padding-bottom: 20px;
+  }
+}
+
+@media (max-width: 720px) {
+  .site-shell {
+    width: min(100% - 20px, 1120px);
+    padding-top: 10px;
+  }
+
+  .topbar {
+    padding: 16px 18px;
+    border-radius: 24px;
+    margin-bottom: 16px;
+  }
+
+  .nav {
+    gap: 12px;
+    font-size: 0.88rem;
+  }
+
+  .hero-copy {
+    padding: 18px 0 8px;
+  }
+
+  .section {
+    padding: 24px 0;
+  }
+
+  .card,
+  .quote-card,
+  .contact,
+  .hero-panel,
+  .capability-card,
+  .principle-card,
+  .highlights-card {
+    border-radius: 22px;
+  }
 }

vite.config.js

@@ -5,6 +5,6 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   preview: {
-    allowedHosts: ['luna.reversed.dev'],
+    allowedHosts: ['luna.reversed.dev', 'luna.spaceistyping.com'],
   },
 })