diff --git a/src/App.jsx b/src/App.jsx
index 9f1e20a..d65bd0c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as tf from '@tensorflow/tfjs';
 
 const statusLabel = (performance, threshold) => (performance >= threshold ? 'Passed' : 'Not passed');
@@ -9,38 +9,79 @@ const round = (value, decimals = 1) => {
   return Math.round(value * factor) / factor;
 };
 
-const Section = ({ id, title, description, isOpen, onToggle, children }) => (
-  <section
-    id={id}
-    className={`rounded-3xl border border-white/40 bg-white/75 p-6 shadow-soft transition-all duration-300 ${
-      isOpen ? 'ring-2 ring-brand/40' : 'hover:ring-1 hover:ring-brand/30'
-    }`}
-  >
-    <button
-      type="button"
-      className="flex w-full items-start justify-between gap-4 text-left"
-      onClick={onToggle}
-    >
-      <div>
-        <h2 className="text-xl font-semibold text-brand-dark">{title}</h2>
-        {description ? <p className="mt-1 text-sm text-slate-600">{description}</p> : null}
+const Section = ({
+  id,
+  title,
+  description,
+  isOpen = true,
+  onToggle,
+  children,
+  variant = 'default',
+  meta,
+  className = '',
+}) => {
+  const collapsible = typeof onToggle === 'function';
+  const containerClasses =
+    variant === 'compact'
+      ? 'rounded-2xl border border-white/40 bg-white/65 p-6 shadow-lg shadow-slate-900/5 backdrop-blur-xl'
+      : 'rounded-3xl border border-white/50 bg-white/70 p-8 shadow-xl shadow-slate-900/10 backdrop-blur-2xl';
+
+  return (
+    <section id={id} className={`relative overflow-hidden transition-all ${containerClasses} ${className}`}>
+      <div className="relative space-y-6">
+        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+          <div className="space-y-2">
+            <span className="text-xs font-semibold uppercase tracking-[0.32em] text-slate-400">Assessment Module</span>
+            <h2 className="text-2xl font-display font-semibold text-slate-900">{title}</h2>
+            {description ? <p className="text-sm text-slate-600">{description}</p> : null}
+          </div>
+          <div className="flex items-start gap-3">
+            {meta}
+            {collapsible ? (
+              <button
+                type="button"
+                onClick={onToggle}
+                aria-expanded={isOpen}
+                aria-controls={`${id}-content`}
+                className={`flex h-10 w-10 items-center justify-center rounded-full border transition-all ${
+                  isOpen
+                    ? 'border-slate-200 bg-slate-900 text-white'
+                    : 'border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-900'
+                }`}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+            ) : null}
+          </div>
+        </div>
+        {!collapsible || isOpen ? (
+          <div id={`${id}-content`} className="space-y-6">
+            {children}
+          </div>
+        ) : null}
       </div>
-      <span className="flex h-8 w-8 items-center justify-center rounded-full bg-brand text-white">
-        {isOpen ? '-' : '+'}
-      </span>
-    </button>
-    {isOpen ? <div className="mt-6 space-y-6">{children}</div> : null}
-  </section>
-);
+    </section>
+  );
+};
 
 const SelectField = ({ id, label, options, value, onChange, required }) => (
-  <label className="flex flex-col gap-2 text-sm font-medium text-slate-700" htmlFor={id}>
+  <label className="flex flex-col gap-2 text-sm font-medium text-slate-600" htmlFor={id}>
     {label}
     <select
       id={id}
       value={value}
       onChange={(event) => onChange(event.target.value)}
-      className="w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-800 shadow-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/30"
+      className="w-full rounded-xl border border-white/50 bg-white/60 px-4 py-2 text-sm font-medium text-slate-800 shadow-inner shadow-white/20 backdrop-blur focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/30"
       required={required}
     >
       <option value="" disabled>
@@ -56,7 +97,7 @@ const SelectField = ({ id, label, options, value, onChange, required }) => (
 );
 
 const NumberField = ({ id, label, value, onChange, placeholder, min, step }) => (
-  <label className="flex flex-col gap-2 text-sm font-medium text-slate-700" htmlFor={id}>
+  <label className="flex flex-col gap-2 text-sm font-medium text-slate-600" htmlFor={id}>
     {label}
     <input
       id={id}
@@ -66,7 +107,7 @@ const NumberField = ({ id, label, value, onChange, placeholder, min, step }) =>
       placeholder={placeholder}
       min={min}
       step={step ?? 'any'}
-      className="w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-800 shadow-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/30"
+      className="w-full rounded-xl border border-white/50 bg-white/60 px-4 py-2 text-sm font-medium text-slate-800 shadow-inner shadow-white/20 backdrop-blur focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/30"
     />
   </label>
 );
@@ -75,10 +116,10 @@ const ToggleCard = ({ active, title, description, onClick }) => (
   <button
     type="button"
     onClick={onClick}
-    className={`flex w-full flex-col gap-1 rounded-2xl border px-4 py-3 text-left transition-all ${
+    className={`relative flex w-full flex-col gap-1 rounded-2xl border px-4 py-3 text-left transition-all ${
       active
-        ? 'border-brand bg-brand text-white shadow-soft'
-        : 'border-slate-200 bg-white text-slate-700 hover:border-brand/50 hover:bg-brand-light'
+        ? 'border-brand bg-gradient-to-br from-brand to-brand-dark text-white shadow-soft'
+        : 'border-white/60 bg-white/80 text-slate-700 hover:-translate-y-0.5 hover:shadow-md'
     }`}
   >
     <span className="text-sm font-semibold tracking-wide">{title}</span>
@@ -114,6 +155,149 @@ const SliderField = ({ id, label, min = 0, max = 1, step = 0.01, value, onChange
   </div>
 );
 
+const getStatusBadgeClasses = (status) =>
+  status === 'Passed'
+    ? 'border border-emerald-200 bg-emerald-50 text-emerald-600'
+    : 'border border-amber-200 bg-amber-50 text-amber-600';
+
+const StatusBadge = ({ status }) => (
+  <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold ${getStatusBadgeClasses(status)}`}>
+    <span className="h-1.5 w-1.5 rounded-full bg-current" />
+    {status}
+  </span>
+);
+
+const StepItem = ({ title, status, description }) => {
+  const stepStyles = {
+    done: {
+      border: 'border-emerald-100',
+      background: 'bg-emerald-50/80',
+      iconBg: 'bg-emerald-500 text-white',
+      iconPath: 'M5 13l4 4L19 7',
+    },
+    'in-progress': {
+      border: 'border-sky-100',
+      background: 'bg-sky-50/70',
+      iconBg: 'bg-sky-500 text-white',
+      iconPath: 'M12 6v6l3 3',
+    },
+    pending: {
+      border: 'border-slate-200',
+      background: 'bg-white',
+      iconBg: 'bg-slate-100 text-slate-500',
+      iconPath: 'M12 6v6l3 3',
+    },
+    skipped: {
+      border: 'border-slate-200',
+      background: 'bg-slate-50',
+      iconBg: 'bg-slate-200 text-slate-500',
+      iconPath: 'M6 6l12 12M6 18L18 6',
+    },
+  };
+
+  const { border, background, iconBg, iconPath } = stepStyles[status] ?? stepStyles.pending;
+
+  return (
+    <div className={`flex items-start gap-3 rounded-xl border ${border} ${background} p-3`}>
+      <div className={`mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full ${iconBg}`}>
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+          <path strokeLinecap="round" strokeLinejoin="round" d={iconPath} />
+        </svg>
+      </div>
+      <div className="space-y-1">
+        <p className="text-sm font-semibold text-slate-800">{title}</p>
+        <p className="text-xs text-slate-500">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+const RecommendationCard = ({ suggestion, totalImages, inspectionScore, logisticScore, performanceScore }) => {
+  const overallValue = Number.parseFloat(suggestion.overall);
+  const metrics = [
+    {
+      id: 'inspection',
+      label: 'Inspection score',
+      value: inspectionScore.percentage,
+      status: inspectionScore.status,
+    },
+    {
+      id: 'logistic',
+      label: 'Logistic feasibility',
+      value: logisticScore.percentage,
+      status: logisticScore.status,
+    },
+    {
+      id: 'performance',
+      label: 'Structural performance',
+      value: performanceScore.percentage,
+      status: performanceScore.status,
+    },
+  ];
+
+  return (
+    <article className="relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-3xl border border-white/40 bg-white/55 p-8 shadow-xl shadow-slate-900/10 backdrop-blur-2xl">
+      <div
+        className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${
+          suggestion.tone === 'success'
+            ? 'from-emerald-500/20 via-emerald-400/10 to-emerald-500/5'
+            : 'from-amber-500/20 via-amber-400/10 to-amber-500/5'
+        } opacity-80`}
+        aria-hidden="true"
+      />
+      <div className="relative flex flex-col gap-8">
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center justify-between gap-4">
+            <div className="space-y-1">
+              <span className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">End-of-life readiness</span>
+              <h3 className="text-2xl font-display font-semibold text-slate-900">{suggestion.label}</h3>
+            </div>
+            <span
+              className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide ${
+                suggestion.tone === 'success'
+                  ? 'bg-emerald-500/10 text-emerald-700'
+                  : 'bg-amber-500/10 text-amber-700'
+              }`}
+            >
+              <span className="h-1.5 w-1.5 rounded-full bg-current" />
+              {suggestion.tone === 'success' ? 'High readiness' : 'Needs caution'}
+            </span>
+          </div>
+          <p className="text-sm text-slate-600">
+            Composite readiness based on structural inspection, logistics, and performance intelligence.
+          </p>
+        </div>
+        <div className="relative rounded-3xl border border-white/40 bg-white/60 p-6 shadow-inner shadow-white/20 backdrop-blur-xl">
+          <p className="text-xs font-semibold uppercase tracking-[0.32em] text-slate-500">Overall readiness</p>
+          <div className="mt-3 flex items-end gap-3">
+            <p className="text-5xl font-display font-semibold text-slate-900">{overallValue.toFixed(1)}%</p>
+            <p className="text-xs font-medium uppercase tracking-[0.28em] text-slate-400">Composite score</p>
+          </div>
+          <p className="mt-2 text-xs text-slate-500">
+            Weighted perspective of all active assessment modules.
+          </p>
+        </div>
+        <div className="grid gap-4 sm:grid-cols-3">
+          {metrics.map((metric) => (
+            <div key={metric.id} className="rounded-2xl border border-white/40 bg-white/65 p-4 shadow-sm shadow-white/30 backdrop-blur">
+              <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">{metric.label}</p>
+              <div className="mt-3 flex items-center justify-between">
+                <p className="text-2xl font-display font-semibold text-slate-900">{metric.value.toFixed(1)}%</p>
+                <StatusBadge status={metric.status} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <p className="relative text-xs font-medium text-slate-500">
+        {totalImages
+          ? `${totalImages} classified image${totalImages === 1 ? '' : 's'} enriched this insight.`
+          : 'Manual scoring currently informs this insight.'}
+      </p>
+    </article>
+  );
+};
+
 const loadImageElement = (src) =>
   new Promise((resolve, reject) => {
     const image = new Image();
@@ -139,9 +323,10 @@ function App() {
   const [modelError, setModelError] = useState(null);
 
   const [visualOpen, setVisualOpen] = useState(true);
-  const [logisticOpen, setLogisticOpen] = useState(false);
-  const [performanceOpen, setPerformanceOpen] = useState(false);
-  const [lcaOpen, setLcaOpen] = useState(false);
+  const [logisticOpen, setLogisticOpen] = useState(true);
+  const [performanceOpen, setPerformanceOpen] = useState(true);
+  const [lcaOpen, setLcaOpen] = useState(true);
+  const [activeTab, setActiveTab] = useState('assessment');
 
   const [previews, setPreviews] = useState([]);
   const [isDragging, setIsDragging] = useState(false);
@@ -192,11 +377,20 @@ function App() {
     cD: '-0.413',
   });
   const [lcaResult, setLcaResult] = useState(null);
+  const disclaimerShownRef = useRef(false);
 
   useEffect(() => {
-    alert(
-      'Disclaimer:\n\nReuST is currently under development and is intended for testing purposes only. As the accuracy and reliability of the results are limited, the provided results should not be used in real-world scenarios. Use the results with caution and always consult with relevant experts for reliable assessments.'
-    );
+    if (disclaimerShownRef.current) return;
+    disclaimerShownRef.current = true;
+    const storageKey = 'reust-disclaimer-shown';
+    if (typeof window === 'undefined') return;
+    const hasSeenDisclaimer = sessionStorage.getItem(storageKey);
+    if (!hasSeenDisclaimer) {
+      alert(
+        'Disclaimer:\n\nReuST is currently under development and is intended for testing purposes only. As the accuracy and reliability of the results are limited, the provided results should not be used in real-world scenarios. Use the results with caution and always consult with relevant experts for reliable assessments.'
+      );
+      sessionStorage.setItem(storageKey, 'true');
+    }
   }, []);
 
   useEffect(() => {
@@ -431,6 +625,98 @@ function App() {
     )}% not damaged.`;
   }, [classification]);
 
+  const classificationBreakdown = useMemo(() => {
+    if (!classification || !classification.total) {
+      return null;
+    }
+
+    const total = classification.total || 1;
+    return [
+      {
+        id: 'not-corroded',
+        label: 'Not corroded',
+        value: round((classification.notCorroded / total) * 100),
+        tone: 'border-emerald-200 bg-emerald-50 text-emerald-600',
+      },
+      {
+        id: 'corroded',
+        label: 'Corroded',
+        value: round((classification.corroded / total) * 100),
+        tone: 'border-amber-200 bg-amber-50 text-amber-600',
+      },
+      {
+        id: 'bolted',
+        label: 'Bolted',
+        value: round((classification.bolted / total) * 100),
+        tone: 'border-sky-200 bg-sky-50 text-sky-600',
+      },
+      {
+        id: 'welded',
+        label: 'Welded',
+        value: round((classification.welded / total) * 100),
+        tone: 'border-indigo-200 bg-indigo-50 text-indigo-600',
+      },
+      {
+        id: 'not-damaged',
+        label: 'Not damaged',
+        value: round((classification.notDamaged / total) * 100),
+        tone: 'border-emerald-200 bg-emerald-50 text-emerald-600',
+      },
+      {
+        id: 'damaged',
+        label: 'Damaged',
+        value: round((classification.damaged / total) * 100),
+        tone: 'border-rose-200 bg-rose-50 text-rose-600',
+      },
+    ];
+  }, [classification]);
+
+  const hasEvidence = previews.length > 0 || noImageData;
+
+  const visualSteps = useMemo(() => {
+    const steps = [];
+    steps.push({
+      id: 'evidence',
+      title: 'Evidence captured',
+      status: hasEvidence ? 'done' : 'pending',
+      description: hasEvidence
+        ? noImageData
+          ? 'Manual inspection inputs enabled.'
+          : `${previews.length} image${previews.length === 1 ? '' : 's'} ready for review.`
+        : 'Upload imagery or switch to manual scoring.',
+    });
+
+    steps.push({
+      id: 'classification',
+      title: noImageData ? 'Manual scoring in progress' : 'AI classification',
+      status: noImageData ? 'skipped' : isClassifying ? 'in-progress' : classification ? 'done' : 'pending',
+      description: noImageData
+        ? 'Image classification skipped because manual scoring is active.'
+        : classification
+        ? 'Latest run completed successfully.'
+        : 'Run classification to unlock decision guidance.',
+    });
+
+    steps.push({
+      id: 'decision',
+      title: 'Decision summary prepared',
+      status: classification || noImageData ? 'done' : 'pending',
+      description:
+        classification || noImageData
+          ? `${suggestion.label} · Overall ${suggestion.overall}%`
+          : 'Decision pending classification results.',
+    });
+
+    return steps;
+  }, [classification, hasEvidence, isClassifying, noImageData, previews.length, suggestion.label, suggestion.overall]);
+
+  const tabSliderStyle = useMemo(
+    () => ({
+      transform: activeTab === 'assessment' ? 'translateX(0%)' : 'translateX(100%)',
+    }),
+    [activeTab]
+  );
+
   const calculateCarbon = useCallback(() => {
     let totalWeight = 0;
     if (lcaMode === 'weight') {
@@ -463,587 +749,754 @@ function App() {
     });
   }, [lcaInputs, lcaMode]);
 
-  const overallTone = suggestion.tone === 'success' ? 'bg-emerald-500 text-white' : 'bg-amber-200 text-amber-900';
-
   return (
-    <div className="min-h-screen bg-gradient-to-br from-brand-dark via-brand to-brand-light pb-16">
-      <main className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-12 text-slate-900">
-        <header className="rounded-3xl border border-white/40 bg-white/80 p-8 shadow-soft backdrop-blur">
-          <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
-            <div>
-              <div className="flex items-center gap-3">
-                <img src="/assets/logo.png" alt="ReuST logo" className="h-16 w-auto" />
-                <h1 className="text-4xl font-bold tracking-tight text-brand-dark">ReuST</h1>
+    <div className="relative min-h-screen overflow-hidden">
+      <div
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(24,65,99,0.16),transparent_55%),radial-gradient(circle_at_bottom_right,rgba(16,185,129,0.16),transparent_55%)]"
+        aria-hidden="true"
+      />
+      <div
+        className="pointer-events-none absolute inset-0 bg-[url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1800&q=80')] bg-cover bg-fixed bg-center opacity-10"
+        aria-hidden="true"
+      />
+      <main className="relative mx-auto flex w-full max-w-7xl flex-col gap-12 px-6 pb-24 pt-12 text-slate-900">
+        <header className="relative overflow-hidden rounded-3xl border border-white/50 bg-white/60 p-10 shadow-2xl shadow-slate-900/10 backdrop-blur-2xl">
+          <div className="absolute -left-24 -top-32 h-64 w-64 rounded-full bg-brand/30 blur-3xl" aria-hidden="true" />
+          <div className="absolute -bottom-24 right-[-6rem] h-72 w-72 rounded-full bg-emerald-400/25 blur-3xl" aria-hidden="true" />
+          <div className="relative flex flex-col gap-8">
+            <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
+              <div className="max-w-3xl space-y-4">
+                <span className="inline-flex items-center gap-2 self-start rounded-full bg-white/60 px-3 py-1 text-xs font-semibold uppercase tracking-[0.32em] text-slate-500">
+                  Beta workspace
+                </span>
+                <h1 className="text-5xl font-display font-semibold tracking-tight text-slate-900">ReuST</h1>
+                <p className="text-base text-slate-600">
+                  A decision making framework for efficient end-of-life scenarios of structural steel elements.
+                </p>
+              </div>
+              <div className="flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-end lg:max-w-sm">
+                <div className="relative flex w-full max-w-xs items-center rounded-full bg-white/70 p-1.5 shadow-inner shadow-white/40 backdrop-blur">
+                  <span
+                    className="absolute inset-y-1 left-1 w-[calc(50%-0.75rem)] rounded-full bg-slate-900 transition-transform duration-300 ease-out"
+                    style={tabSliderStyle}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setActiveTab('assessment')}
+                    className={`relative z-[1] flex-1 rounded-full px-4 py-2 text-[0.68rem] font-semibold uppercase tracking-[0.35em] transition-colors ${
+                      activeTab === 'assessment' ? 'text-white' : 'text-slate-500 hover:text-slate-900'
+                    }`}
+                  >
+                    Assessment workspace
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setActiveTab('life-cycle')}
+                    className={`relative z-[1] flex-1 rounded-full px-4 py-2 text-[0.68rem] font-semibold uppercase tracking-[0.35em] transition-colors ${
+                      activeTab === 'life-cycle' ? 'text-white' : 'text-slate-500 hover:text-slate-900'
+                    }`}
+                  >
+                    Life cycle (LCA)
+                  </button>
+                </div>
+                <a
+                  href="mailto:alper.kanyilmaz@polimi.it"
+                  className="inline-flex items-center gap-2 self-start rounded-full bg-gradient-to-r from-brand to-brand-dark px-5 py-2 text-sm font-semibold text-white shadow-[0_18px_34px_rgba(24,65,99,0.22)] transition hover:shadow-soft"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth="1.8"
+                    aria-hidden="true"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-18 8h18a2 2 0 002-2V8a2 2 0 00-2-2H3a2 2 0 00-2 2v6a2 2 0 002 2z" />
+                  </svg>
+                  Need support
+                </a>
               </div>
-              <p className="mt-4 max-w-3xl text-base text-slate-700">
-                A decision making framework for efficient end-of-life scenarios of structural steel elements. Evaluate visual
-                inspection data, logistic feasibility, structural performance, and life cycle impacts in one cohesive workspace.
-              </p>
             </div>
-            <div className="flex flex-col items-start gap-2 text-sm text-slate-600">
-              <span className="font-semibold uppercase tracking-wider text-brand-dark">Contact</span>
-              <a href="mailto:alper.kanyilmaz@polimi.it" className="font-medium text-brand hover:underline">
-                alper.kanyilmaz@polimi.it
-              </a>
+            <div className="rounded-2xl border border-white/50 bg-white/40 p-4 text-xs font-medium text-slate-500 shadow-inner shadow-white/30">
+              Prototype for evaluation purposes only. Validate the outputs with your engineering team before implementation.
             </div>
+            {loadingModels ? (
+              <div className="flex items-center gap-3 rounded-2xl border border-amber-300/70 bg-amber-100/70 px-4 py-3 text-sm text-amber-800 shadow-sm">
+                <span className="inline-flex h-2 w-2 animate-ping rounded-full bg-amber-500" aria-hidden="true" />
+                Loading machine learning models. This may take a few seconds…
+              </div>
+            ) : null}
+            {modelError ? (
+              <div className="rounded-2xl border border-rose-300/70 bg-rose-100/70 px-4 py-3 text-sm text-rose-700 shadow-sm">{modelError}</div>
+            ) : null}
           </div>
-          {loadingModels ? (
-            <div className="mt-6 flex items-center gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
-              <span className="h-2 w-2 animate-ping rounded-full bg-amber-500" aria-hidden="true" />
-              Loading machine learning models. This may take a few seconds…
-            </div>
-          ) : null}
-          {modelError ? (
-            <div className="mt-6 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{modelError}</div>
-          ) : null}
         </header>
 
-        <Section
-          id="visual-inspection"
-          title="Structural Visual Inspection"
-          description="Upload images to leverage the convolutional neural network or switch to manual scoring if images are unavailable."
-          isOpen={visualOpen}
-          onToggle={() => setVisualOpen((value) => !value)}
-        >
-          <div className="grid gap-6 lg:grid-cols-2">
-            <div className="space-y-6">
-              <div>
-                <label className="flex items-center gap-3 text-sm font-medium text-slate-700">
-                  <input
-                    type="checkbox"
-                    className="h-4 w-4 rounded border-slate-300 text-brand focus:ring-brand"
-                    checked={noImageData}
-                    onChange={(event) => {
-                      const checked = event.target.checked;
-                      setNoImageData(checked);
-                      if (checked) {
-                        setPreviews([]);
-                        setClassification(null);
-                      }
-                    }}
-                    disabled={previews.length > 0}
-                  />
-                  Don't have image files?
-                </label>
-                <p className="mt-2 text-sm text-slate-500">
-                  Enable this option to provide manual inspection data instead of image-based classification.
-                </p>
-              </div>
-
-              {!noImageData ? (
-                <div
-                  onDragEnter={(event) => {
-                    event.preventDefault();
-                    setIsDragging(true);
-                  }}
-                  onDragOver={(event) => {
-                    event.preventDefault();
-                    setIsDragging(true);
-                  }}
-                  onDragLeave={(event) => {
-                    event.preventDefault();
-                    setIsDragging(false);
-                  }}
-                  onDrop={handleDrop}
-                  className={`flex min-h-[220px] cursor-pointer flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed p-6 text-center transition-all ${
-                    isDragging ? 'border-brand bg-brand-light/60' : 'border-slate-300 bg-white'
-                  }`}
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => document.getElementById('image-input')?.click()}
-                >
-                  <img
-                    src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/upload-512.png"
-                    alt="Upload"
-                    className="h-16 w-16 opacity-70"
-                  />
-                  <div className="text-sm text-slate-600">
-                    <span className="font-semibold text-brand">Click to upload</span> or drag and drop structural element images.
+        {activeTab === 'assessment' ? (
+          <>
+            <div className="grid gap-8 xl:grid-cols-[minmax(0,1.7fr)_minmax(0,1fr)]">
+              <Section
+                id="visual-inspection"
+                title="Structural visual inspection"
+                description="Hero workspace for imagery-led assessment with manual override controls."
+                isOpen={visualOpen}
+                onToggle={() => setVisualOpen((value) => !value)}
+                meta={
+                  <div className="text-right">
+                    <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">Inspection score</p>
+                    <p className="mt-2 text-3xl font-display font-semibold text-slate-900">{inspectionScore.percentage.toFixed(1)}%</p>
+                    <StatusBadge status={inspectionScore.status} />
                   </div>
-                  <input
-                    id="image-input"
-                    type="file"
-                    accept="image/*"
-                    multiple
-                    onChange={(event) => handleFiles(event.target.files)}
-                    className="hidden"
-                  />
-                  {previews.length ? (
-                    <button
-                      type="button"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        resetImages();
-                      }}
-                      className="rounded-full bg-slate-100 px-4 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-200"
-                    >
-                      Clear images
-                    </button>
-                  ) : null}
-                </div>
-              ) : null}
+                }
+              >
+                <div className="grid gap-8 lg:grid-cols-[minmax(0,1.25fr)_minmax(0,1fr)]">
+                  <div className="space-y-6">
+                    {!noImageData ? (
+                      <div
+                        onDragEnter={(event) => {
+                          event.preventDefault();
+                          setIsDragging(true);
+                        }}
+                        onDragOver={(event) => {
+                          event.preventDefault();
+                          setIsDragging(true);
+                        }}
+                        onDragLeave={(event) => {
+                          event.preventDefault();
+                          setIsDragging(false);
+                        }}
+                        onDrop={handleDrop}
+                        className={`group relative flex min-h-[280px] cursor-pointer flex-col justify-between gap-6 overflow-hidden rounded-3xl border-2 border-dashed p-8 transition-all duration-300 ${
+                          isDragging
+                            ? 'border-brand bg-brand-light/70 shadow-[0_35px_60px_rgba(24,65,99,0.25)]'
+                            : 'border-white/60 bg-white/70 shadow-[0_35px_60px_rgba(15,23,42,0.14)]'
+                        }`}
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => document.getElementById('image-input')?.click()}
+                      >
+                        <div className="flex items-start justify-between gap-6">
+                          <div className="space-y-3">
+                            <span className="inline-flex items-center gap-2 rounded-full bg-brand-light/70 px-3 py-1 text-xs font-semibold uppercase tracking-[0.32em] text-brand">
+                              Visual evidence
+                            </span>
+                            <h3 className="text-2xl font-display font-semibold text-slate-900">Upload structural imagery</h3>
+                            <p className="max-w-md text-sm text-slate-600">
+                              Drop recent site captures or browse your device to initialise automated classification.
+                            </p>
+                          </div>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="h-14 w-14 text-brand/60 transition-transform duration-300 group-hover:-translate-y-1"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            strokeWidth="1.6"
+                            aria-hidden="true"
+                          >
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M16 7l-4-4m00L8 7m4-4v12" />
+                          </svg>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-3 text-sm font-medium text-brand">
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-2 rounded-full bg-brand px-5 py-2 text-sm font-semibold text-white shadow-[0_14px_28px_rgba(24,65,99,0.25)] transition hover:bg-brand-dark"
+                            onClick={() => document.getElementById('image-input')?.click()}
+                          >
+                            Browse files
+                          </button>
+                          <span className="text-xs font-medium uppercase tracking-[0.28em] text-brand/70">or drag & drop</span>
+                        </div>
+                        <input
+                          id="image-input"
+                          type="file"
+                          accept="image/*"
+                          multiple
+                          onChange={(event) => handleFiles(event.target.files)}
+                          className="hidden"
+                        />
+                      </div>
+                    ) : null}
 
-              {previews.length ? (
-                <div className="grid max-h-60 grid-cols-3 gap-2 overflow-y-auto rounded-2xl border border-slate-200 bg-white p-2">
-                  {previews.map((src, index) => (
-                    <img key={index} src={src} alt={`Uploaded preview ${index + 1}`} className="h-20 w-full rounded-xl object-cover" />
-                  ))}
-                </div>
-              ) : null}
+                    <div className="flex items-start gap-3 rounded-2xl border border-white/50 bg-white/60 p-4 shadow-sm shadow-white/40 backdrop-blur">
+                      <input
+                        type="checkbox"
+                        className="mt-1 h-4 w-4 rounded border-slate-300 text-slate-700 focus:ring-slate-500"
+                        checked={noImageData}
+                        onChange={(event) => {
+                          const checked = event.target.checked;
+                          setNoImageData(checked);
+                          if (checked) {
+                            setPreviews([]);
+                            setClassification(null);
+                          }
+                        }}
+                        disabled={previews.length > 0}
+                      />
+                      <div>
+                        <p className="text-sm font-semibold text-slate-800">Work without imagery</p>
+                        <p className="text-xs text-slate-500">Toggle to rely on manual scoring when photos are unavailable.</p>
+                      </div>
+                    </div>
+
+                    {previews.length ? (
+                      <div className="rounded-3xl border border-white/50 bg-white/60 p-4 shadow-inner shadow-white/30 backdrop-blur">
+                        <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">Loaded imagery</p>
+                        <div className="mt-3 grid max-h-44 grid-cols-3 gap-2 overflow-y-auto pr-1 sm:grid-cols-4">
+                          {previews.map((src, index) => (
+                            <img
+                              key={index}
+                              src={src}
+                              alt={`Uploaded preview ${index + 1}`}
+                              className="aspect-square w-full rounded-xl object-cover"
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    ) : null}
 
-              {!noImageData ? (
-                <div className="flex flex-wrap items-center gap-3">
-                  <button
-                    type="button"
-                    onClick={classifyImages}
-                    className="inline-flex items-center gap-2 rounded-full bg-brand px-5 py-2 text-sm font-semibold text-white shadow-soft transition hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand/40"
-                    disabled={isClassifying}
-                  >
-                    {isClassifying ? (
-                      <svg
-                        className="h-4 w-4 animate-spin"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
-                      >
-                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-                      </svg>
+                    <div className="flex flex-wrap items-center gap-3">
+                      {!noImageData ? (
+                        <button
+                          type="button"
+                          onClick={classifyImages}
+                          className="inline-flex items-center gap-3 rounded-full bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-soft transition hover:bg-slate-800 disabled:opacity-70"
+                          disabled={isClassifying}
+                        >
+                          {isClassifying ? (
+                            <svg
+                              className="h-4 w-4 animate-spin"
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              aria-hidden="true"
+                            >
+                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                            </svg>
+                          ) : (
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              className="h-4 w-4"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                              strokeWidth="1.6"
+                              aria-hidden="true"
+                            >
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+                            </svg>
+                          )}
+                          {isClassifying ? 'Running classification…' : 'Run AI classification'}
+                        </button>
+                      ) : null}
+                      {(previews.length || noImageData) && (
+                        <button
+                          type="button"
+                          onClick={resetImages}
+                          className="inline-flex items-center gap-2 rounded-full border border-white/50 bg-white/50 px-4 py-2 text-xs font-semibold text-slate-600 transition hover:border-white/70 hover:text-slate-900"
+                        >
+                          Reset evidence
+                        </button>
+                      )}
+                      {classification ? (
+                        <span className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">
+                          {classification.total} image{classification.total === 1 ? '' : 's'} analysed
+                        </span>
+                      ) : null}
+                    </div>
+
+                    <div className="rounded-3xl border border-white/50 bg-white/65 p-6 shadow-lg shadow-slate-900/5 backdrop-blur">
+                      <h3 className="text-base font-semibold text-slate-900">
+                        {noImageData ? 'Manual inspection scoring' : 'Refine inspection inputs'}
+                      </h3>
+                      <p className="mt-2 text-xs text-slate-500">
+                        {noImageData
+                          ? 'Enter qualitative observations to estimate the inspection score.'
+                          : 'Fine-tune the automated output with on-site knowledge.'}
+                      </p>
+                      <div className="mt-4 space-y-4">
+                        <SliderField
+                          id="connection-type"
+                          label="Connection type [fully welded - fully bolted]?"
+                          value={connectionSlider}
+                          onChange={setConnectionSlider}
+                        />
+                        <SelectField
+                          id="corroded"
+                          label="Is the element corroded?"
+                          value={visualInputs.corroded}
+                          onChange={(value) => setVisualInputs((state) => ({ ...state, corroded: value }))}
+                          options={[
+                            { value: '0', label: 'Yes' },
+                            { value: '1', label: 'No' },
+                          ]}
+                        />
+                        <SelectField
+                          id="damaged"
+                          label="Is the element damaged or distorted?"
+                          value={visualInputs.damaged}
+                          onChange={(value) => setVisualInputs((state) => ({ ...state, damaged: value }))}
+                          options={[
+                            { value: '0', label: 'Yes' },
+                            { value: '1', label: 'No' },
+                          ]}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="rounded-3xl border border-white/50 bg-white/60 p-6 shadow-lg shadow-slate-900/5 backdrop-blur">
+                      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                        <h3 className="text-base font-semibold text-slate-900">Extended building context</h3>
+                        <label className="inline-flex items-center gap-2 text-xs font-semibold text-slate-600">
+                          <input
+                            type="checkbox"
+                            className="h-4 w-4 rounded border-slate-300 text-slate-700 focus:ring-slate-500"
+                            checked={optionalVisualData}
+                            onChange={(event) => setOptionalVisualData(event.target.checked)}
+                          />
+                          Provide additional information
+                        </label>
+                      </div>
+                      {optionalVisualData ? (
+                        <div className="mt-4 grid gap-4 md:grid-cols-2">
+                          <SelectField
+                            id="composite-connection"
+                            label="Are there steel-concrete composite connections?"
+                            value={visualInputs.compositeConnection}
+                            onChange={(value) => setVisualInputs((state) => ({ ...state, compositeConnection: value }))}
+                            options={[
+                              { value: '0', label: 'Yes' },
+                              { value: '1', label: 'No' },
+                            ]}
+                          />
+                          <SelectField
+                            id="fire-protection"
+                            label="Is there fire protection on the element?"
+                            value={visualInputs.fireProtection}
+                            onChange={(value) => setVisualInputs((state) => ({ ...state, fireProtection: value }))}
+                            options={[
+                              { value: '1', label: 'Yes' },
+                              { value: '0', label: 'No' },
+                            ]}
+                          />
+                          <SelectField
+                            id="sufficient-amount"
+                            label="Availability of sufficient reusable elements?"
+                            value={visualInputs.sufficientAmount}
+                            onChange={(value) => setVisualInputs((state) => ({ ...state, sufficientAmount: value }))}
+                            options={[
+                              { value: '1', label: 'Yes' },
+                              { value: '0', label: 'No' },
+                            ]}
+                          />
+                          <SelectField
+                            id="geometry-check"
+                            label="Passes geometric checks without modification?"
+                            value={visualInputs.geometryCheck}
+                            onChange={(value) => setVisualInputs((state) => ({ ...state, geometryCheck: value }))}
+                            options={[
+                              { value: '1', label: 'Yes' },
+                              { value: '0', label: 'No' },
+                            ]}
+                          />
+                        </div>
+                      ) : (
+                        <p className="mt-3 text-xs text-slate-500">Enable the toggle to capture detailed project context.</p>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="space-y-6">
+                    <div className="rounded-3xl border border-white/50 bg-white/65 p-6 shadow-lg shadow-slate-900/10 backdrop-blur">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="space-y-2">
+                          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">Inspection analytics</p>
+                          <p className="text-3xl font-display font-semibold text-slate-900">{inspectionScore.percentage.toFixed(1)}%</p>
+                          <p className="text-xs text-slate-500">
+                            {classification?.total
+                              ? `AI-assisted evaluation across ${classification.total} uploaded image${classification.total === 1 ? '' : 's'}.`
+                              : noImageData
+                              ? 'Manual scoring active. Update dropdowns to refine the score.'
+                              : 'Upload and classify imagery to activate AI scoring.'}
+                          </p>
+                        </div>
+                        <StatusBadge status={inspectionScore.status} />
+                      </div>
+                      {classifySummary ? <p className="mt-4 text-xs text-slate-500">{classifySummary}</p> : null}
+                    </div>
+
+                    <div className="rounded-3xl border border-white/50 bg-white/60 p-6 shadow-lg shadow-slate-900/5 backdrop-blur">
+                      <p className="text-sm font-semibold text-slate-900">Progress tracker</p>
+                      <div className="mt-4 space-y-3">
+                        {visualSteps.map((step) => (
+                          <StepItem key={step.id} {...step} />
+                        ))}
+                      </div>
+                    </div>
+
+                    {classificationBreakdown ? (
+                      <div className="rounded-3xl border border-white/50 bg-white/60 p-6 shadow-lg shadow-slate-900/5 backdrop-blur">
+                        <p className="text-sm font-semibold text-slate-900">Classification breakdown</p>
+                        <div className="mt-4 grid gap-3 sm:grid-cols-2">
+                          {classificationBreakdown.map((item) => (
+                            <div key={item.id} className={`rounded-xl border px-4 py-3 ${item.tone}`}>
+                              <p className="text-xs uppercase tracking-[0.28em] text-slate-500">{item.label}</p>
+                              <p className="mt-2 text-2xl font-semibold">{item.value}%</p>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
                     ) : null}
-                    {isClassifying ? 'Classifying…' : 'Classify and Decide'}
-                  </button>
-                  {classification ? (
-                    <span className="text-xs font-semibold uppercase tracking-wider text-brand">{classification.total} image(s) analysed</span>
-                  ) : null}
+                  </div>
                 </div>
-              ) : null}
-
-              {classifySummary ? (
-                <p className="rounded-2xl border border-brand/30 bg-brand-light/60 p-4 text-sm text-brand-dark">{classifySummary}</p>
-              ) : null}
+              </Section>
+              <div className="h-full">
+                <RecommendationCard
+                  suggestion={suggestion}
+                  totalImages={classification?.total ?? 0}
+                  inspectionScore={inspectionScore}
+                  logisticScore={logisticScore}
+                  performanceScore={performanceScore}
+                />
+              </div>
             </div>
-
-            <div className="space-y-6">
-              <div className="rounded-2xl border border-slate-200 bg-white p-5">
-                <h3 className="text-lg font-semibold text-brand-dark">
-                  {noImageData ? 'Provide inspection scores' : 'Manual adjustments'}
-                </h3>
-                <p className="mt-1 text-sm text-slate-500">
-                  {noImageData
-                    ? 'Enter your qualitative assessment to estimate the visual inspection score.'
-                    : 'Fine tune inspection outcomes if additional context is available.'}
-                </p>
-                <div className="mt-4 space-y-4">
-                  <SliderField
-                    id="connection-type"
-                    label="Connection type [fully welded - fully bolted]?"
-                    value={connectionSlider}
-                    onChange={setConnectionSlider}
+            <div className="grid gap-6 lg:grid-cols-2">
+              <Section
+                id="logistic-feasibility"
+                title="Logistic feasibility"
+                description="Capture dismantling, handling, and storage considerations to understand feasibility constraints."
+                isOpen={logisticOpen}
+                onToggle={() => setLogisticOpen((value) => !value)}
+                variant="compact"
+                className="h-full"
+                meta={
+                  <div className="text-right space-y-1">
+                    <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">Score</p>
+                    <p className="text-2xl font-display font-semibold text-slate-900">{logisticScore.percentage.toFixed(1)}%</p>
+                    <StatusBadge status={logisticScore.status} />
+                  </div>
+                }
+              >
+                <div className="grid gap-3 md:grid-cols-2">
+                  <SelectField
+                    id="item-weight"
+                    label="Weight of the structural element"
+                    value={logisticInputs.itemWeight}
+                    onChange={(value) => setLogisticInputs((state) => ({ ...state, itemWeight: value }))}
+                    options={[
+                      { value: '3', label: 'Very light (<0.1 t)' },
+                      { value: '2', label: 'Light (0.1–0.2 t)' },
+                      { value: '1', label: 'Heavy (0.2–0.5 t)' },
+                      { value: '0', label: 'Very heavy (>0.5 t)' },
+                    ]}
                   />
                   <SelectField
-                    id="corroded"
-                    label="Is the element corroded?"
-                    value={visualInputs.corroded}
-                    onChange={(value) => setVisualInputs((state) => ({ ...state, corroded: value }))}
+                    id="easy-handle"
+                    label="Ease to handle, transport, store, and process?"
+                    value={logisticInputs.easyHandle}
+                    onChange={(value) => setLogisticInputs((state) => ({ ...state, easyHandle: value }))}
                     options={[
-                      { value: '0', label: 'Yes' },
-                      { value: '1', label: 'No' },
+                      { value: '1', label: 'Yes' },
+                      { value: '0', label: 'No' },
                     ]}
                   />
                   <SelectField
-                    id="damaged"
-                    label="Is the element damaged or distorted?"
-                    value={visualInputs.damaged}
-                    onChange={(value) => setVisualInputs((state) => ({ ...state, damaged: value }))}
+                    id="exist-infrastructure"
+                    label="Availability of dismantle-sort-repair infrastructure"
+                    value={logisticInputs.existInfrastructure}
+                    onChange={(value) => setLogisticInputs((state) => ({ ...state, existInfrastructure: value }))}
                     options={[
-                      { value: '0', label: 'Yes' },
-                      { value: '1', label: 'No' },
+                      { value: '1', label: 'Yes' },
+                      { value: '0', label: 'No' },
                     ]}
                   />
-                </div>
-              </div>
-
-              <div className="rounded-2xl border border-slate-200 bg-white p-5">
-                <label className="flex items-center gap-3 text-sm font-semibold text-slate-700">
-                  <input
-                    type="checkbox"
-                    className="h-4 w-4 rounded border-slate-300 text-brand focus:ring-brand"
-                    checked={optionalVisualData}
-                    onChange={(event) => setOptionalVisualData(event.target.checked)}
+                  <SelectField
+                    id="special-protection"
+                    label="Need special protective measures for components?"
+                    value={logisticInputs.specialProtection}
+                    onChange={(value) => setLogisticInputs((state) => ({ ...state, specialProtection: value }))}
+                    options={[
+                      { value: '1', label: 'Yes' },
+                      { value: '0', label: 'No' },
+                    ]}
                   />
-                  Do you have additional information on the building?
-                </label>
-                {optionalVisualData ? (
-                  <div className="mt-4 grid gap-4 md:grid-cols-2">
-                    <SelectField
-                      id="composite-connection"
-                      label="Are there steel-concrete composite connections?"
-                      value={visualInputs.compositeConnection}
-                      onChange={(value) => setVisualInputs((state) => ({ ...state, compositeConnection: value }))}
-                      options={[
-                        { value: '0', label: 'Yes' },
-                        { value: '1', label: 'No' },
-                      ]}
-                    />
-                    <SelectField
-                      id="fire-protection"
-                      label="Is there fire protection on the element?"
-                      value={visualInputs.fireProtection}
-                      onChange={(value) => setVisualInputs((state) => ({ ...state, fireProtection: value }))}
-                      options={[
-                        { value: '1', label: 'Yes' },
-                        { value: '0', label: 'No' },
-                      ]}
-                    />
-                    <SelectField
-                      id="sufficient-amount"
-                      label="Availability of sufficient amount of potential reusable elements?"
-                      value={visualInputs.sufficientAmount}
-                      onChange={(value) => setVisualInputs((state) => ({ ...state, sufficientAmount: value }))}
-                      options={[
-                        { value: '1', label: 'Yes' },
-                        { value: '0', label: 'No' },
-                      ]}
-                    />
-                    <SelectField
-                      id="geometry-check"
-                      label="Does the element pass standard geometric check without modification?"
-                      value={visualInputs.geometryCheck}
-                      onChange={(value) => setVisualInputs((state) => ({ ...state, geometryCheck: value }))}
-                      options={[
-                        { value: '1', label: 'Yes' },
-                        { value: '0', label: 'No' },
-                      ]}
-                    />
-                  </div>
-                ) : (
-                  <p className="mt-3 text-sm text-slate-500">Enable the toggle above to provide additional building insights.</p>
-                )}
-              </div>
-            </div>
-          </div>
-        </Section>
-
-        <Section
-          id="logistic-feasibility"
-          title="Logistic Feasibility"
-          description="Assess the practical considerations for dismantling, handling, and storing structural elements."
-          isOpen={logisticOpen}
-          onToggle={() => setLogisticOpen((value) => !value)}
-        >
-          <div className="grid gap-4 md:grid-cols-2">
-            <SelectField
-              id="item-weight"
-              label="Weight of the structural element"
-              value={logisticInputs.itemWeight}
-              onChange={(value) => setLogisticInputs((state) => ({ ...state, itemWeight: value }))}
-              options={[
-                { value: '3', label: 'Very light [< 0.1 ton]' },
-                { value: '2', label: 'Light [0.1 - 0.2 ton]' },
-                { value: '1', label: 'Heavy [0.2 - 0.5 ton]' },
-                { value: '0', label: 'Very heavy [> 0.5 ton]' },
-              ]}
-            />
-            <SelectField
-              id="easy-handle"
-              label="Ease to handle, transport, store, and process?"
-              value={logisticInputs.easyHandle}
-              onChange={(value) => setLogisticInputs((state) => ({ ...state, easyHandle: value }))}
-              options={[
-                { value: '1', label: 'Yes' },
-                { value: '0', label: 'No' },
-              ]}
-            />
-            <SelectField
-              id="exist-infrastructure"
-              label="Availability of dismantle-sort-repair infrastructure"
-              value={logisticInputs.existInfrastructure}
-              onChange={(value) => setLogisticInputs((state) => ({ ...state, existInfrastructure: value }))}
-              options={[
-                { value: '1', label: 'Yes' },
-                { value: '0', label: 'No' },
-              ]}
-            />
-            <SelectField
-              id="special-protection"
-              label="Special protection is needed for transportation?"
-              value={logisticInputs.specialProtection}
-              onChange={(value) => setLogisticInputs((state) => ({ ...state, specialProtection: value }))}
-              options={[
-                { value: '0', label: 'Yes' },
-                { value: '1', label: 'No' },
-              ]}
-            />
-            <SelectField
-              id="dismantle-phase"
-              label="Dismantle phase is compatible with demolition work?"
-              value={logisticInputs.dismantlePhase}
-              onChange={(value) => setLogisticInputs((state) => ({ ...state, dismantlePhase: value }))}
-              options={[
-                { value: '1', label: 'Yes' },
-                { value: '0', label: 'No' },
-              ]}
-            />
-            <SelectField
-              id="storage-availability"
-              label="Availability of storage"
-              value={logisticInputs.storageAvailability}
-              onChange={(value) => setLogisticInputs((state) => ({ ...state, storageAvailability: value }))}
-              options={[
-                { value: '1', label: 'Yes' },
-                { value: '0', label: 'No' },
-              ]}
-            />
-          </div>
-        </Section>
-
-        <Section
-          id="structural-performance"
-          title="Structural Performance"
-          description="Evaluate the documentation, maintenance, and adaptability of the structural elements."
-          isOpen={performanceOpen}
-          onToggle={() => setPerformanceOpen((value) => !value)}
-        >
-          <div className="grid gap-4 md:grid-cols-2">
-            <SelectField
-              id="data-quality"
-              label="Quality of available data?"
-              value={performanceInputs.dataQuality}
-              onChange={(value) => setPerformanceInputs((state) => ({ ...state, dataQuality: value }))}
-              options={[
-                { value: '0', label: 'No documentation' },
-                { value: '1', label: 'Only drawing available' },
-                { value: '2', label: 'Drawings and calculation report available' },
-                { value: '3', label: 'All detailed documentation available' },
-              ]}
-            />
-            <SelectField
-              id="construction-period"
-              label="Is the building designed and constructed after year 2005?"
-              value={performanceInputs.constructionPeriod}
-              onChange={(value) => setPerformanceInputs((state) => ({ ...state, constructionPeriod: value }))}
-              options={[
-                { value: '1', label: 'Yes' },
-                { value: '0', label: 'No' },
-              ]}
-            />
-            <SelectField
-              id="maintenance"
-              label="Did the structure have maintenance before?"
-              value={performanceInputs.maintenance}
-              onChange={(value) => setPerformanceInputs((state) => ({ ...state, maintenance: value }))}
-              options={[
-                { value: '1', label: 'Yes' },
-                { value: '0', label: 'No' },
-              ]}
-            />
-            <SelectField
-              id="purpose"
-              label="Is the structural element unique for its purpose?"
-              value={performanceInputs.purpose}
-              onChange={(value) => setPerformanceInputs((state) => ({ ...state, purpose: value }))}
-              options={[
-                { value: '0', label: 'Yes' },
-                { value: '1', label: 'No' },
-              ]}
-            />
-            <SelectField
-              id="testing"
-              label="Is it possible to conduct sample testing?"
-              value={performanceInputs.testing}
-              onChange={(value) => setPerformanceInputs((state) => ({ ...state, testing: value }))}
-              options={[
-                { value: '1', label: 'Yes' },
-                { value: '0', label: 'No' },
-              ]}
-            />
-          </div>
-        </Section>
-
-        <Section
-          id="life-cycle"
-          title="Life Cycle Assessment (LCA)"
-          description="Estimate embodied carbon through simplified cradle-to-cradle calculations."
-          isOpen={lcaOpen}
-          onToggle={() => setLcaOpen((value) => !value)}
-        >
-          <div className="grid gap-6 lg:grid-cols-[1.1fr_1fr]">
-            <div className="space-y-4">
-              <p className="text-sm text-slate-600">Select how you prefer to input the weight of the elements.</p>
-              <div className="grid gap-3 md:grid-cols-3">
-                <ToggleCard
-                  active={lcaMode === 'weight'}
-                  title="Weight"
-                  description="Weight × quantity"
-                  onClick={() => setLcaMode('weight')}
-                />
-                <ToggleCard
-                  active={lcaMode === 'dimensions'}
-                  title="Dimensions"
-                  description="Volume × unit weight"
-                  onClick={() => setLcaMode('dimensions')}
-                />
-                <ToggleCard
-                  active={lcaMode === 'bulk'}
-                  title="Bulk weight"
-                  description="Direct total mass"
-                  onClick={() => setLcaMode('bulk')}
-                />
-              </div>
-
-              {lcaMode === 'weight' ? (
-                <div className="grid gap-4 md:grid-cols-2">
-                  <NumberField
-                    id="lca-weight"
-                    label="Weight of single element [kg]"
-                    value={lcaInputs.weight}
-                    onChange={(value) => setLcaInputs((state) => ({ ...state, weight: value }))}
-                    placeholder="150"
-                    min="0"
+                  <SelectField
+                    id="dismantle-phase"
+                    label="Dismantling phase complexity"
+                    value={logisticInputs.dismantlePhase}
+                    onChange={(value) => setLogisticInputs((state) => ({ ...state, dismantlePhase: value }))}
+                    options={[
+                      { value: '1', label: 'Straightforward' },
+                      { value: '0', label: 'Complex' },
+                    ]}
                   />
-                  <NumberField
-                    id="lca-items"
-                    label="Number of items"
-                    value={lcaInputs.items}
-                    onChange={(value) => setLcaInputs((state) => ({ ...state, items: value }))}
-                    placeholder="50"
-                    min="0"
+                  <SelectField
+                    id="storage-availability"
+                    label="Is there storage availability on-site?"
+                    value={logisticInputs.storageAvailability}
+                    onChange={(value) => setLogisticInputs((state) => ({ ...state, storageAvailability: value }))}
+                    options={[
+                      { value: '1', label: 'Yes' },
+                      { value: '0', label: 'No' },
+                    ]}
                   />
                 </div>
-              ) : null}
-
-              {lcaMode === 'dimensions' ? (
-                <div className="grid gap-4 md:grid-cols-2">
-                  <NumberField
-                    id="lca-height"
-                    label="Height of the element [mm]"
-                    value={lcaInputs.height}
-                    onChange={(value) => setLcaInputs((state) => ({ ...state, height: value }))}
-                    placeholder="500"
-                    min="0"
+              </Section>
+
+              <Section
+                id="structural-performance"
+                title="Structural performance"
+                description="Evaluate documentation quality, maintenance history, adaptability, and testing feasibility."
+                isOpen={performanceOpen}
+                onToggle={() => setPerformanceOpen((value) => !value)}
+                variant="compact"
+                className="h-full"
+                meta={
+                  <div className="text-right space-y-1">
+                    <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">Score</p>
+                    <p className="text-2xl font-display font-semibold text-slate-900">{performanceScore.percentage.toFixed(1)}%</p>
+                    <StatusBadge status={performanceScore.status} />
+                  </div>
+                }
+              >
+                <div className="grid gap-3 md:grid-cols-2">
+                  <SelectField
+                    id="data-quality"
+                    label="Quality of available data?"
+                    value={performanceInputs.dataQuality}
+                    onChange={(value) => setPerformanceInputs((state) => ({ ...state, dataQuality: value }))}
+                    options={[
+                      { value: '0', label: 'No documentation' },
+                      { value: '1', label: 'Only drawings available' },
+                      { value: '2', label: 'Drawings and calculation report' },
+                      { value: '3', label: 'Comprehensive documentation' },
+                    ]}
                   />
-                  <NumberField
-                    id="lca-width"
-                    label="Width of the element [mm]"
-                    value={lcaInputs.width}
-                    onChange={(value) => setLcaInputs((state) => ({ ...state, width: value }))}
-                    placeholder="250"
-                    min="0"
+                  <SelectField
+                    id="construction-period"
+                    label="Designed and constructed after 2005?"
+                    value={performanceInputs.constructionPeriod}
+                    onChange={(value) => setPerformanceInputs((state) => ({ ...state, constructionPeriod: value }))}
+                    options={[
+                      { value: '1', label: 'Yes' },
+                      { value: '0', label: 'No' },
+                    ]}
                   />
-                  <NumberField
-                    id="lca-length"
-                    label="Length of the element [m]"
-                    value={lcaInputs.length}
-                    onChange={(value) => setLcaInputs((state) => ({ ...state, length: value }))}
-                    placeholder="12"
-                    min="0"
+                  <SelectField
+                    id="maintenance"
+                    label="Has the structure undergone maintenance?"
+                    value={performanceInputs.maintenance}
+                    onChange={(value) => setPerformanceInputs((state) => ({ ...state, maintenance: value }))}
+                    options={[
+                      { value: '1', label: 'Yes' },
+                      { value: '0', label: 'No' },
+                    ]}
                   />
-                  <NumberField
-                    id="lca-unit-weight"
-                    label="Material unit weight [kg/m³]"
-                    value={lcaInputs.unitWeight}
-                    onChange={(value) => setLcaInputs((state) => ({ ...state, unitWeight: value }))}
-                    placeholder="7850"
-                    min="0"
+                  <SelectField
+                    id="purpose"
+                    label="Is the element unique for its purpose?"
+                    value={performanceInputs.purpose}
+                    onChange={(value) => setPerformanceInputs((state) => ({ ...state, purpose: value }))}
+                    options={[
+                      { value: '0', label: 'Yes' },
+                      { value: '1', label: 'No' },
+                    ]}
                   />
-                  <NumberField
-                    id="lca-quantity"
-                    label="Number of items"
-                    value={lcaInputs.quantity}
-                    onChange={(value) => setLcaInputs((state) => ({ ...state, quantity: value }))}
-                    placeholder="12"
-                    min="0"
+                  <SelectField
+                    id="testing"
+                    label="Is sample testing feasible?"
+                    value={performanceInputs.testing}
+                    onChange={(value) => setPerformanceInputs((state) => ({ ...state, testing: value }))}
+                    options={[
+                      { value: '1', label: 'Yes' },
+                      { value: '0', label: 'No' },
+                    ]}
                   />
                 </div>
-              ) : null}
-
-              {lcaMode === 'bulk' ? (
-                <div className="grid gap-4 md:grid-cols-2">
-                  <NumberField
-                    id="lca-bulk"
-                    label="Bulk weight of the material [kg]"
-                    value={lcaInputs.bulkWeight}
-                    onChange={(value) => setLcaInputs((state) => ({ ...state, bulkWeight: value }))}
-                    placeholder="1500"
-                    min="0"
+              </Section>
+            </div>
+          </>
+        ) : (
+          <Section
+            id="life-cycle"
+            title="Life cycle assessment (LCA)"
+            description="Estimate embodied carbon through simplified cradle-to-cradle calculations."
+            isOpen={lcaOpen}
+            onToggle={() => setLcaOpen((value) => !value)}
+          >
+            <div className="grid gap-6 lg:grid-cols-[1.1fr_1fr]">
+              <div className="space-y-4">
+                <p className="text-sm text-slate-600">Select how you prefer to input the weight of the elements.</p>
+                <div className="grid gap-3 md:grid-cols-3">
+                  <ToggleCard
+                    active={lcaMode === 'weight'}
+                    title="Weight"
+                    description="Weight × quantity"
+                    onClick={() => setLcaMode('weight')}
+                  />
+                  <ToggleCard
+                    active={lcaMode === 'dimensions'}
+                    title="Dimensions"
+                    description="Volume × unit weight"
+                    onClick={() => setLcaMode('dimensions')}
+                  />
+                  <ToggleCard
+                    active={lcaMode === 'bulk'}
+                    title="Bulk weight"
+                    description="Direct total mass"
+                    onClick={() => setLcaMode('bulk')}
                   />
                 </div>
-              ) : null}
-            </div>
 
-            <div className="space-y-6">
-              <div className="grid gap-4 md:grid-cols-2">
-                <NumberField
-                  id="lca-ca1a3"
-                  label="Product stage A1-A3 coefficient [kgCO₂e]"
-                  value={lcaInputs.cA1A3}
-                  onChange={(value) => setLcaInputs((state) => ({ ...state, cA1A3: value }))}
-                  step="0.01"
-                />
-                <NumberField
-                  id="lca-cc1c4"
-                  label="End of life stage C1-C4 coefficient [kgCO₂e]"
-                  value={lcaInputs.cC1C4}
-                  onChange={(value) => setLcaInputs((state) => ({ ...state, cC1C4: value }))}
-                  step="0.01"
-                />
-                <NumberField
-                  id="lca-cd"
-                  label="Reuse/recycle stage D coefficient [kgCO₂e]"
-                  value={lcaInputs.cD}
-                  onChange={(value) => setLcaInputs((state) => ({ ...state, cD: value }))}
-                  step="0.01"
-                />
+                {lcaMode === 'weight' ? (
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <NumberField
+                      id="lca-weight"
+                      label="Weight of single element [kg]"
+                      value={lcaInputs.weight}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, weight: value }))}
+                      placeholder="150"
+                      min="0"
+                    />
+                    <NumberField
+                      id="lca-items"
+                      label="Number of items"
+                      value={lcaInputs.items}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, items: value }))}
+                      placeholder="50"
+                      min="0"
+                    />
+                  </div>
+                ) : null}
+
+                {lcaMode === 'dimensions' ? (
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <NumberField
+                      id="lca-height"
+                      label="Height [mm]"
+                      value={lcaInputs.height}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, height: value }))}
+                      placeholder="320"
+                      min="0"
+                    />
+                    <NumberField
+                      id="lca-width"
+                      label="Width [mm]"
+                      value={lcaInputs.width}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, width: value }))}
+                      placeholder="120"
+                      min="0"
+                    />
+                    <NumberField
+                      id="lca-length"
+                      label="Length [m]"
+                      value={lcaInputs.length}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, length: value }))}
+                      placeholder="6"
+                      min="0"
+                    />
+                    <NumberField
+                      id="lca-unit-weight"
+                      label="Unit weight [kg/m³]"
+                      value={lcaInputs.unitWeight}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, unitWeight: value }))}
+                      placeholder="7850"
+                      min="0"
+                    />
+                    <NumberField
+                      id="lca-quantity"
+                      label="Quantity"
+                      value={lcaInputs.quantity}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, quantity: value }))}
+                      placeholder="12"
+                      min="0"
+                    />
+                  </div>
+                ) : null}
+
+                {lcaMode === 'bulk' ? (
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <NumberField
+                      id="lca-bulk-weight"
+                      label="Total bulk weight [kg]"
+                      value={lcaInputs.bulkWeight}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, bulkWeight: value }))}
+                      placeholder="12000"
+                      min="0"
+                    />
+                  </div>
+                ) : null}
               </div>
 
-              <button
-                type="button"
-                onClick={calculateCarbon}
-                className="inline-flex items-center justify-center rounded-full bg-brand px-6 py-2 text-sm font-semibold text-white shadow-soft transition hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand/40"
-              >
-                Compute the embodied carbon
-              </button>
-
-              {lcaResult ? (
-                <div className="rounded-2xl border border-brand/30 bg-brand-light/60 p-5 text-sm text-brand-dark">
-                  <p>
-                    Total weight of structural element: <strong>{lcaResult.totalWeight} kg</strong>
-                  </p>
-                  <p>
-                    Product stage A1-A3: <strong>{lcaResult.product} kgCO₂e</strong>
-                  </p>
-                  <p>
-                    End of life stage C1-C4: <strong>{lcaResult.endOfLife} kgCO₂e</strong>
-                  </p>
-                  <p>
-                    Reuse, recycle and recovery stage D: <strong>{lcaResult.recovery} kgCO₂e</strong>
-                  </p>
+              <div className="space-y-5">
+                <div className="rounded-3xl border border-white/50 bg-white/60 p-6 shadow-lg shadow-slate-900/5 backdrop-blur">
+                  <p className="text-sm font-semibold text-slate-800">Emission factors (kgCO₂e/kg)</p>
+                  <div className="mt-4 grid gap-4 md:grid-cols-2">
+                    <NumberField
+                      id="lca-ca1a3"
+                      label="Product stage (A1-A3)"
+                      value={lcaInputs.cA1A3}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, cA1A3: value }))}
+                      placeholder="1.13"
+                    />
+                    <NumberField
+                      id="lca-cc1c4"
+                      label="End-of-life (C1-C4)"
+                      value={lcaInputs.cC1C4}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, cC1C4: value }))}
+                      placeholder="0.018"
+                    />
+                    <NumberField
+                      id="lca-cd"
+                      label="Benefits beyond (D)"
+                      value={lcaInputs.cD}
+                      onChange={(value) => setLcaInputs((state) => ({ ...state, cD: value }))}
+                      placeholder="-0.413"
+                    />
+                  </div>
                 </div>
-              ) : null}
-            </div>
-          </div>
-        </Section>
-
-        <section className="rounded-3xl border border-white/40 bg-white/80 p-6 shadow-soft">
-          <div className="flex flex-col gap-3">
-            <h2 className="text-2xl font-semibold text-brand-dark">Suggestion for the End-of-Life Scenario</h2>
-            {classifySummary ? <p className="text-sm text-slate-600">{classifySummary}</p> : null}
-            <ul className="list-disc space-y-2 pl-5 text-sm text-slate-700">
-              <li>Structural visual inspection: {inspectionScore.percentage.toFixed(2)}% | {inspectionScore.status}</li>
-              <li>Logistic feasibility: {logisticScore.percentage.toFixed(2)}% | {logisticScore.status}</li>
-              <li>Structural performance: {performanceScore.percentage.toFixed(2)}% | {performanceScore.status}</li>
-            </ul>
-            <div className={`mt-4 flex items-center justify-between rounded-2xl px-6 py-4 text-base font-semibold ${overallTone}`}>
-              <span>Based on the input evaluation, the efficient end-of-life scenario is:</span>
-              <span>{suggestion.label}</span>
+
+                <button
+                  type="button"
+                  onClick={calculateCarbon}
+                  className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-gradient-to-r from-brand to-brand-dark px-6 py-3 text-sm font-semibold text-white shadow-[0_18px_36px_rgba(24,65,99,0.28)] transition hover:shadow-soft"
+                >
+                  Calculate carbon impact
+                </button>
+
+                {lcaResult ? (
+                  <div className="rounded-3xl border border-white/50 bg-white/60 p-6 shadow-lg shadow-slate-900/5 backdrop-blur">
+                    <p className="text-sm font-semibold text-slate-800">Results</p>
+                    <dl className="mt-4 grid gap-4 text-sm text-slate-600">
+                      <div className="flex items-center justify-between">
+                        <dt>Total weight</dt>
+                        <dd className="font-semibold text-slate-900">{lcaResult.totalWeight} kg</dd>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <dt>Product stage (A1-A3)</dt>
+                        <dd className="font-semibold text-slate-900">{lcaResult.product} kgCO₂e</dd>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <dt>End-of-life (C1-C4)</dt>
+                        <dd className="font-semibold text-slate-900">{lcaResult.endOfLife} kgCO₂e</dd>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <dt>Benefits beyond (D)</dt>
+                        <dd className="font-semibold text-slate-900">{lcaResult.recovery} kgCO₂e</dd>
+                      </div>
+                    </dl>
+                  </div>
+                ) : null}
+              </div>
             </div>
-            <p className="text-center text-sm font-semibold text-brand-dark">The overall reusability performance {suggestion.overall}%</p>
-          </div>
-        </section>
+          </Section>
+        )}
       </main>
     </div>
   );
 }
 
+
 export default App;
diff --git a/src/index.css b/src/index.css
index 88857f0..6f0cb15 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,47 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-  font-family: 'Roboto Condensed', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: #0f172a;
+  background-color: #f5f7fb;
 }
 
 body {
+  position: relative;
   min-height: 100vh;
+  margin: 0;
+  overflow-x: hidden;
+  background:
+    linear-gradient(180deg, rgba(247, 249, 252, 0.88) 0%, rgba(240, 245, 250, 0.92) 48%, rgba(233, 242, 247, 0.94) 100%);
+}
+
+body::before,
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+body::before {
+  background:
+    radial-gradient(45% 55% at 18% 22%, rgba(24, 65, 99, 0.12), transparent 72%),
+    radial-gradient(38% 50% at 78% 18%, rgba(14, 116, 144, 0.1), transparent 72%),
+    radial-gradient(36% 52% at 52% 82%, rgba(5, 150, 105, 0.1), transparent 78%);
+  animation: aurora-shift 26s ease-in-out infinite alternate;
+}
+
+body::after {
+  background-image:
+    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
+  background-size: 160px 160px, 160px 160px;
+  opacity: 0.16;
 }
 
 a {
@@ -16,9 +50,24 @@ a {
 
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-  @apply appearance-none m-0;
+  @apply m-0 appearance-none;
 }
 
 input[type='number'] {
   @apply appearance-none;
 }
+
+@keyframes aurora-shift {
+  0% {
+    transform: translate3d(-2%, -2%, 0) scale(1.02);
+    opacity: 0.55;
+  }
+  50% {
+    transform: translate3d(1%, 1%, 0) scale(1.04);
+    opacity: 0.85;
+  }
+  100% {
+    transform: translate3d(3%, -1%, 0) scale(1.02);
+    opacity: 0.6;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 4cb6670..57ff770 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,24 @@ export default {
       },
       boxShadow: {
         soft: '0 20px 45px rgba(15, 23, 42, 0.12)'
+      },
+      fontFamily: {
+        sans: ['"Inter"', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'sans-serif'],
+        display: ['"Space Grotesk"', '"Inter"', 'system-ui', 'sans-serif']
+      },
+      keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-12px)' }
+        },
+        'pulse-soft': {
+          '0%, 100%': { opacity: 0.35 },
+          '50%': { opacity: 0.65 }
+        }
+      },
+      animation: {
+        float: 'float 12s ease-in-out infinite',
+        'pulse-soft': 'pulse-soft 16s ease-in-out infinite'
       }
     }
   },