Homepage Update

client-assets/css/home.css

@@ -0,0 +1,1024 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+    --soil: #2c1a0e;
+    --earth: #4a2e1a;
+    --clay: #7a4a2a;
+    --harvest: #c8853a;
+    --straw: #e8c87a;
+    --sage: #6b8c5a;
+    --leaf: #3d6b42;
+    --mist: #f5f0e8;
+    --cream: #faf7f2;
+    --white: #ffffff;
+    --text-dark: #1a1209;
+    --text-mid: #4a3828;
+    --text-light: #8a7060;
+    --border: rgba(122,74,42,0.15);
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--cream);
+    color: var(--text-dark);
+    overflow-x: hidden;
+}
+
+/* ── NAV ────────────────────────────────── */
+nav {
+    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 4rem;
+    height: 72px;
+    background: rgba(250,247,242,0.92);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+}
+.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
+.nav-logo-mark {
+    width: 36px; height: 36px;
+    background: var(--leaf);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 18px;
+}
+.nav-logo-text {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--soil);
+    letter-spacing: 0.02em;
+}
+.nav-links { display: flex; gap: 2.5rem; list-style: none; }
+.nav-links a {
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--text-mid);
+    letter-spacing: 0.03em;
+    transition: color 0.2s;
+}
+.nav-links a:hover { color: var(--leaf); }
+.nav-cta {
+    display: flex; gap: 1rem; align-items: center;
+}
+.btn-outline {
+    padding: 0.5rem 1.25rem;
+    border: 1.5px solid var(--clay);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    color: var(--clay);
+    text-decoration: none;
+    transition: all 0.2s;
+    font-weight: 500;
+}
+.btn-outline:hover { background: var(--clay); color: white; }
+.btn-primary {
+    padding: 0.5rem 1.4rem;
+    background: var(--leaf);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.2s;
+}
+.btn-primary:hover { background: var(--sage); }
+
+/* ── HERO ───────────────────────────────── */
+.hero {
+    min-height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    position: relative;
+    overflow: hidden;
+}
+.hero-left {
+    padding: 10rem 4rem 6rem 4rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    z-index: 2;
+}
+.hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.72rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--harvest);
+    margin-bottom: 1.5rem;
+}
+.hero-eyebrow::before {
+    content: '';
+    display: inline-block;
+    width: 24px; height: 1px;
+    background: var(--harvest);
+}
+.hero h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
+    font-weight: 700;
+    line-height: 1.1;
+    color: var(--soil);
+    margin-bottom: 1.5rem;
+}
+.hero h1 em {
+    font-style: normal;
+    color: var(--leaf);
+}
+.hero-desc {
+    font-size: 1.05rem;
+    line-height: 1.7;
+    color: var(--text-mid);
+    max-width: 480px;
+    margin-bottom: 2.5rem;
+    font-weight: 300;
+}
+.hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
+.btn-hero {
+    padding: 0.9rem 2.2rem;
+    background: var(--soil);
+    color: white;
+    border-radius: 4px;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.95rem;
+    transition: background 0.2s;
+    letter-spacing: 0.02em;
+}
+.btn-hero:hover { background: var(--earth); }
+.btn-hero-sec {
+    padding: 0.9rem 2.2rem;
+    border: 1.5px solid var(--clay);
+    color: var(--clay);
+    border-radius: 4px;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.95rem;
+    transition: all 0.2s;
+}
+.btn-hero-sec:hover { background: var(--mist); }
+
+.hero-stats {
+    display: flex;
+    gap: 2.5rem;
+    margin-top: 3.5rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border);
+}
+.hero-stat {}
+.hero-stat-num {
+    font-family: 'Playfair Display', serif;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--soil);
+    line-height: 1;
+}
+.hero-stat-label {
+    font-size: 0.78rem;
+    color: var(--text-light);
+    letter-spacing: 0.05em;
+    margin-top: 4px;
+}
+
+.hero-right {
+    position: relative;
+    background: var(--soil);
+    overflow: hidden;
+}
+.hero-right::before {
+    content: '';
+    position: absolute; inset: 0;
+    background: 
+    radial-gradient(ellipse at 30% 50%, rgba(107,140,90,0.25) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 20%, rgba(200,133,58,0.2) 0%, transparent 50%);
+}
+.hero-soil-diagram {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    width: 340px;
+}
+.soil-layer {
+    padding: 1rem 1.5rem;
+    border-left: 3px solid transparent;
+    margin-bottom: 2px;
+    transition: border-color 0.3s;
+    cursor: default;
+}
+.soil-layer:nth-child(1) { background: rgba(255,255,255,0.05); border-color: var(--straw); }
+.soil-layer:nth-child(2) { background: rgba(255,255,255,0.08); border-color: var(--harvest); }
+.soil-layer:nth-child(3) { background: rgba(255,255,255,0.11); border-color: var(--clay); }
+.soil-layer:nth-child(4) { background: rgba(255,255,255,0.07); border-color: var(--sage); }
+.soil-layer-label {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.45);
+    margin-bottom: 4px;
+}
+.soil-layer-name {
+    font-family: 'Playfair Display', serif;
+    font-size: 1rem;
+    color: rgba(255,255,255,0.9);
+    font-weight: 600;
+}
+.soil-layer-detail {
+    font-size: 0.75rem;
+    color: rgba(255,255,255,0.5);
+    margin-top: 3px;
+}
+.hero-cation-ring {
+    position: absolute;
+    bottom: 2rem; right: 2rem;
+    width: 160px; height: 160px;
+}
+.cation-ring-label {
+    position: absolute; inset: 0;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    text-align: center;
+}
+.cation-ring-label span:first-child {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.6rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.4);
+}
+.cation-ring-label strong {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.4rem;
+    color: rgba(255,255,255,0.9);
+}
+
+/* ── MARQUEE BAND ───────────────────────── */
+.marquee-band {
+    background: var(--soil);
+    padding: 1rem 0;
+    overflow: hidden;
+    display: flex;
+}
+.marquee-track {
+    display: flex;
+    gap: 3rem;
+    animation: marquee 30s linear infinite;
+    white-space: nowrap;
+}
+.marquee-item {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.5);
+    display: flex; align-items: center; gap: 1rem;
+}
+.marquee-item::after {
+    content: '◆';
+    color: var(--harvest);
+    font-size: 0.5rem;
+}
+@keyframes marquee {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+}
+
+/* ── SECTION SHARED ─────────────────────── */
+section { padding: 7rem 4rem; }
+.section-eyebrow {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--harvest);
+    margin-bottom: 1rem;
+    display: flex; align-items: center; gap: 8px;
+}
+.section-eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--harvest); }
+.section-title {
+    font-family: 'Playfair Display', serif;
+    font-size: clamp(2rem, 3vw, 2.8rem);
+    font-weight: 700;
+    color: var(--soil);
+    line-height: 1.15;
+    margin-bottom: 1rem;
+}
+.section-sub {
+    font-size: 1rem;
+    color: var(--text-light);
+    line-height: 1.7;
+    font-weight: 300;
+}
+
+/* ── ALBRECHT / SCIENCE SECTION ─────────── */
+.albrecht {
+    background: var(--mist);
+    padding: 7rem 4rem;
+}
+.albrecht-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6rem;
+    align-items: start;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.albrecht-left {}
+.albrecht-body {
+    margin-top: 1.5rem;
+    font-size: 0.95rem;
+    line-height: 1.8;
+    color: var(--text-mid);
+    font-weight: 300;
+}
+.albrecht-body p + p { margin-top: 1rem; }
+.albrecht-quote {
+    margin: 2rem 0;
+    padding: 1.5rem 1.5rem 1.5rem 2rem;
+    border-left: 3px solid var(--harvest);
+    background: white;
+    border-radius: 0 6px 6px 0;
+}
+.albrecht-quote p {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.05rem;
+    font-style: italic;
+    color: var(--soil);
+    line-height: 1.6;
+}
+.albrecht-quote cite {
+    display: block;
+    margin-top: 0.75rem;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-light);
+    font-style: normal;
+}
+.albrecht-right {}
+
+/* Cation Ratio Visual */
+.cation-chart {
+    background: var(--soil);
+    border-radius: 12px;
+    padding: 2rem;
+    color: white;
+}
+.cation-chart-title {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.4);
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+.cation-bar-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.2rem;
+}
+.cation-label {
+    width: 70px;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.75rem;
+    color: rgba(255,255,255,0.6);
+    flex-shrink: 0;
+}
+.cation-bar-track {
+    flex: 1;
+    height: 8px;
+    background: rgba(255,255,255,0.08);
+    border-radius: 4px;
+    overflow: hidden;
+}
+.cation-bar-fill {
+    height: 100%;
+    border-radius: 4px;
+    animation: barGrow 1.5s ease-out both;
+}
+@keyframes barGrow {
+    from { width: 0 !important; }
+}
+.cation-val {
+    font-family: 'Playfair Display', serif;
+    font-size: 0.9rem;
+    color: rgba(255,255,255,0.9);
+    width: 40px;
+    text-align: right;
+    flex-shrink: 0;
+}
+.cation-note {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(255,255,255,0.1);
+    font-size: 0.78rem;
+    color: rgba(255,255,255,0.35);
+    line-height: 1.6;
+    text-align: center;
+}
+
+.principle-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+.principle-card {
+    background: white;
+    border-radius: 8px;
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    border: 1px solid var(--border);
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+.principle-card:hover {
+    border-color: var(--sage);
+    box-shadow: 0 4px 20px rgba(61,107,66,0.08);
+}
+.principle-icon {
+    width: 40px; height: 40px;
+    border-radius: 8px;
+    background: var(--mist);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1.1rem;
+    flex-shrink: 0;
+}
+.principle-card h4 {
+    font-family: 'Playfair Display', serif;
+    font-size: 0.95rem;
+    color: var(--soil);
+    margin-bottom: 4px;
+}
+.principle-card p {
+    font-size: 0.82rem;
+    color: var(--text-light);
+    line-height: 1.6;
+}
+
+/* ── SERVICES ───────────────────────────── */
+.services {
+    background: white;
+}
+.services-inner { max-width: 1200px; margin: 0 auto; }
+.services-header { text-align: center; max-width: 600px; margin: 0 auto 4rem; }
+.services-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2px;
+    background: var(--border);
+}
+.service-card {
+    background: white;
+    padding: 3rem 2.5rem;
+    position: relative;
+    overflow: hidden;
+    transition: background 0.3s;
+}
+.service-card::before {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 3px;
+    background: var(--leaf);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s;
+}
+.service-card:hover { background: var(--cream); }
+.service-card:hover::before { transform: scaleX(1); }
+.service-num {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.12em;
+    color: var(--harvest);
+    margin-bottom: 1.5rem;
+}
+.service-icon-wrap {
+    width: 56px; height: 56px;
+    background: var(--mist);
+    border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+.service-card h3 {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.3rem;
+    color: var(--soil);
+    margin-bottom: 0.75rem;
+}
+.service-card p {
+    font-size: 0.875rem;
+    color: var(--text-light);
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+}
+.service-link {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--leaf);
+    text-decoration: none;
+    letter-spacing: 0.05em;
+    display: flex; align-items: center; gap: 6px;
+    transition: gap 0.2s;
+}
+.service-link:hover { gap: 10px; }
+
+/* ── SOIL HEALTH TRIANGLE ───────────────── */
+.science {
+    background: var(--cream);
+}
+.science-inner { max-width: 1200px; margin: 0 auto; }
+.science-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5rem;
+    align-items: center;
+}
+.pillars {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+.pillar {
+    display: flex;
+    gap: 1.5rem;
+    align-items: flex-start;
+    padding: 1.5rem;
+    border-radius: 10px;
+    background: white;
+    border: 1px solid var(--border);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+.pillar:hover { transform: translateX(6px); box-shadow: -4px 0 0 0 var(--harvest), 0 4px 20px rgba(0,0,0,0.06); }
+.pillar-number {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--mist);
+    line-height: 1;
+    flex-shrink: 0;
+    width: 2rem;
+}
+.pillar h4 {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.1rem;
+    color: var(--soil);
+    margin-bottom: 0.4rem;
+}
+.pillar p {
+    font-size: 0.85rem;
+    color: var(--text-light);
+    line-height: 1.6;
+}
+.science-visual {
+    position: relative;
+}
+.soil-profile-card {
+    background: var(--soil);
+    border-radius: 16px;
+    overflow: hidden;
+    padding: 2.5rem;
+}
+.soil-profile-title {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.35);
+    margin-bottom: 2rem;
+}
+.nutrient-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.4rem;
+}
+.nutrient-name {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.8rem;
+    color: rgba(255,255,255,0.5);
+    width: 100px;
+    flex-shrink: 0;
+}
+.nutrient-bar-track {
+    flex: 1;
+    height: 6px;
+    background: rgba(255,255,255,0.07);
+    border-radius: 3px;
+    overflow: hidden;
+}
+.nutrient-bar-fill {
+    height: 100%;
+    border-radius: 3px;
+}
+.nutrient-status {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    flex-shrink: 0;
+    width: 60px;
+    text-align: right;
+}
+.status-optimal { color: #7dc87a; }
+.status-low { color: var(--harvest); }
+.status-high { color: #e07070; }
+.status-caution { color: #e8c87a; }
+.soil-profile-footer {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(255,255,255,0.08);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.soil-score {
+    display: flex; flex-direction: column;
+}
+.soil-score-label {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.6rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.3);
+}
+.soil-score-val {
+    font-family: 'Playfair Display', serif;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #7dc87a;
+    line-height: 1.1;
+}
+.soil-score-sub {
+    font-size: 0.72rem;
+    color: rgba(255,255,255,0.3);
+}
+.soil-alert {
+    background: rgba(200,133,58,0.15);
+    border: 1px solid rgba(200,133,58,0.3);
+    border-radius: 6px;
+    padding: 0.6rem 1rem;
+    font-size: 0.75rem;
+    color: var(--straw);
+    max-width: 160px;
+    text-align: center;
+    line-height: 1.4;
+}
+
+/* ── HOW IT WORKS ───────────────────────── */
+.process {
+    background: var(--mist);
+}
+.process-inner { max-width: 1100px; margin: 0 auto; }
+.process-header { text-align: center; max-width: 580px; margin: 0 auto 4rem; }
+.steps {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    position: relative;
+}
+.steps::before {
+    content: '';
+    position: absolute;
+    top: 32px;
+    left: 12.5%; right: 12.5%;
+    height: 1px;
+    background: var(--border);
+}
+.step {
+    padding: 0 1.5rem;
+    text-align: center;
+}
+.step-num {
+    width: 64px; height: 64px;
+    background: white;
+    border: 2px solid var(--border);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Playfair Display', serif;
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: var(--soil);
+    margin: 0 auto 1.5rem;
+    position: relative;
+    z-index: 1;
+    transition: background 0.2s, border-color 0.2s;
+}
+.step:hover .step-num {
+    background: var(--soil);
+    border-color: var(--soil);
+    color: white;
+}
+.step h4 {
+    font-family: 'Playfair Display', serif;
+    font-size: 1rem;
+    color: var(--soil);
+    margin-bottom: 0.6rem;
+}
+.step p {
+    font-size: 0.82rem;
+    color: var(--text-light);
+    line-height: 1.6;
+}
+
+/* ── ABOUT / TEAM ───────────────────────── */
+.about {
+    background: var(--soil);
+    color: white;
+}
+.about-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6rem;
+    align-items: center;
+}
+.about .section-eyebrow { color: var(--straw); }
+.about .section-eyebrow::before { background: var(--straw); }
+.about .section-title { color: white; }
+.about-text {
+    font-size: 0.95rem;
+    line-height: 1.8;
+    color: rgba(255,255,255,0.6);
+    font-weight: 300;
+    margin-top: 1rem;
+}
+.about-text p + p { margin-top: 1rem; }
+.about-metrics {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-top: 2.5rem;
+}
+.about-metric {
+    padding: 1.5rem;
+    background: rgba(255,255,255,0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(255,255,255,0.08);
+}
+.about-metric-num {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: var(--straw);
+    line-height: 1;
+}
+.about-metric-label {
+    font-size: 0.8rem;
+    color: rgba(255,255,255,0.4);
+    margin-top: 6px;
+    letter-spacing: 0.03em;
+}
+.team-cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+}
+.team-card {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 10px;
+    padding: 1.5rem;
+    transition: background 0.2s;
+}
+.team-card:hover { background: rgba(255,255,255,0.09); }
+.team-avatar {
+    width: 52px; height: 52px;
+    border-radius: 50%;
+    background: var(--earth);
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Playfair Display', serif;
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--straw);
+    margin-bottom: 1rem;
+}
+.team-card h4 {
+    font-family: 'Playfair Display', serif;
+    color: white;
+    font-size: 1rem;
+    margin-bottom: 2px;
+}
+.team-card span {
+    font-size: 0.75rem;
+    color: var(--harvest);
+    font-family: 'DM Mono', monospace;
+    letter-spacing: 0.05em;
+}
+
+/* ── CONTACT ────────────────────────────── */
+.contact-section {
+    background: white;
+}
+.contact-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6rem;
+}
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.form-field label {
+    font-size: 0.78rem;
+    font-weight: 500;
+    color: var(--text-mid);
+    letter-spacing: 0.03em;
+}
+.form-field input,
+.form-field textarea,
+.form-field select {
+    padding: 0.75rem 1rem;
+    border: 1.5px solid var(--border);
+    border-radius: 6px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.9rem;
+    color: var(--text-dark);
+    background: var(--cream);
+    transition: border-color 0.2s;
+    outline: none;
+}
+.form-field input:focus,
+.form-field textarea:focus,
+.form-field select:focus { border-color: var(--leaf); }
+.form-field textarea { resize: vertical; min-height: 120px; }
+.form-submit {
+    padding: 0.9rem 2rem;
+    background: var(--soil);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
+    align-self: flex-start;
+}
+.form-submit:hover { background: var(--earth); }
+.contact-info { padding-top: 3rem; }
+.contact-info-item {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+}
+.contact-info-icon {
+    width: 42px; height: 42px;
+    background: var(--mist);
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1rem;
+    flex-shrink: 0;
+}
+.contact-info-label {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-light);
+    margin-bottom: 3px;
+}
+.contact-info-val {
+    font-size: 0.9rem;
+    color: var(--text-dark);
+}
+
+/* ── FOOTER ─────────────────────────────── */
+footer {
+    background: var(--soil);
+    padding: 3rem 4rem 2rem;
+}
+.footer-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.footer-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    margin-bottom: 2rem;
+}
+.footer-logo {
+    display: flex; align-items: center; gap: 10px;
+    text-decoration: none;
+}
+.footer-logo-mark {
+    width: 32px; height: 32px;
+    background: var(--leaf);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px;
+}
+.footer-logo-text {
+    font-family: 'Playfair Display', serif;
+    color: rgba(255,255,255,0.85);
+    font-size: 1rem;
+}
+.footer-tagline {
+    font-size: 0.8rem;
+    color: rgba(255,255,255,0.3);
+    margin-top: 6px;
+    max-width: 200px;
+}
+.footer-nav-group h5 {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.35);
+    margin-bottom: 1rem;
+}
+.footer-nav-group ul { list-style: none; }
+.footer-nav-group li + li { margin-top: 0.6rem; }
+.footer-nav-group a {
+    text-decoration: none;
+    font-size: 0.85rem;
+    color: rgba(255,255,255,0.55);
+    transition: color 0.2s;
+}
+.footer-nav-group a:hover { color: rgba(255,255,255,0.9); }
+.footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.footer-copy {
+    font-size: 0.78rem;
+    color: rgba(255,255,255,0.25);
+}
+.footer-badge {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.2);
+}
+
+/* ── FADE IN ANIMATIONS ─────────────────── */
+.fade-up {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: opacity 0.7s ease, transform 0.7s ease;
+}
+.fade-up.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+.fade-up:nth-child(1) { transition-delay: 0.1s; }
+.fade-up:nth-child(2) { transition-delay: 0.2s; }
+.fade-up:nth-child(3) { transition-delay: 0.3s; }
+.fade-up:nth-child(4) { transition-delay: 0.4s; }
+
+/* ── RESPONSIVE ─────────────────────────── */
+@media (max-width: 900px) {
+    nav { padding: 0 1.5rem; }
+    .nav-links { display: none; }
+    section { padding: 5rem 1.5rem; }
+    .hero { grid-template-columns: 1fr; min-height: auto; }
+    .hero-left { padding: 8rem 1.5rem 4rem; }
+    .hero-right { height: 340px; }
+    .albrecht-grid,
+    .science-layout,
+    .about-inner,
+    .contact-inner { grid-template-columns: 1fr; gap: 3rem; }
+    .services-grid,
+    .team-cards,
+    .steps { grid-template-columns: 1fr 1fr; }
+    .steps::before { display: none; }
+    footer { padding: 3rem 1.5rem 2rem; }
+    .footer-top { flex-direction: column; gap: 2rem; }
+    .footer-bottom { flex-direction: column; gap: 1rem; }
+}
+@media (max-width: 600px) {
+    .services-grid,
+    .team-cards,
+    .about-metrics,
+    .steps { grid-template-columns: 1fr; }
+    .form-row { grid-template-columns: 1fr; }
+}

dashboard/inbox.php

@@ -1,4 +1,7 @@
 <?php
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+
 require_once __DIR__ . '/../config/database.php';
 require_once __DIR__ . '/../lib/auth.php';
 

index.php

@@ -1,568 +1,550 @@
 <?php
-$pageTitle = 'Crop Monitor';
+$pageTitle = 'Precision Soil Science for Australian Farms';
 $siteName  = 'Crop Monitor';
 $siteUrl   = '/';
 ?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <title><?= htmlspecialchars($pageTitle . ' | ' . $siteName, ENT_QUOTES, 'UTF-8') ?></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="keywords" content="crop monitor, soil analysis, plant analysis, water analysis, irrigation, agriculture" />
-    <meta name="description" content="Centralise records for irrigation, weather and soil moisture. Real-time crop monitoring for Australian conditions." />
-
-    <!-- css files -->
-    <link rel="stylesheet" href="client-assets/FredTemplate/css/bootstrap.css">
-    <link rel="stylesheet" href="client-assets/FredTemplate/css/style.css" type="text/css" media="all" />
-    <link rel="stylesheet" href="client-assets/FredTemplate/css/font-awesome.css">
-    <link href="client-assets/FredTemplate/css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
-    <link rel="stylesheet" href="client-assets/FredTemplate/css/lightbox.css" type="text/css" media="all">
-    <link rel="stylesheet" href="client-assets/FredTemplate/css/flexslider.css" type="text/css" media="screen" />
-    <!-- web-fonts -->
-    <link href="//fonts.googleapis.com/css?family=Economica:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">
-    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
-    <link href="//fonts.googleapis.com/css?family=Rasa:300,400,500,600,700" rel="stylesheet">
+  <meta charset="UTF-8">
+  <title><?= htmlspecialchars($pageTitle . ' | ' . $siteName, ENT_QUOTES, 'UTF-8') ?></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Centralise records for irrigation, weather and soil moisture. Real-time crop monitoring built on Albrecht Method soil science for Australian conditions.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&display=swap" rel="stylesheet">
+  <link href="client-assets/home/css/home.css" rel="stylesheet" type="text/css" media="screen" />
 </head>
-
 <body>
 
-<div class="main-agile">
-    <!-- banner -->
-    <div class="trans-header"></div>
-    <div class="agile-top">
-        <div class="col-xs-4 logo">
-            <a href="<?= $siteUrl ?>" class="logo">
-                <img class="img-res" src="client-assets/images/crop-monitor-logo.png" alt="Cropmonitor" width="50%">
-            </a>
-            <h1>Monitor your crops health in real-time</h1>
-        </div>
-        <div class="col-xs-6 header-w3l">
-            <ul>
-                <li>
-                    <a href="/login/login.php">
-                        <span class="fa fa-unlock-alt" aria-hidden="true"></span> Sign In
-                    </a>
-                </li>
-                <li>
-                    <a href="/login/register.php">
-                        <span class="fa fa-pencil-square-o" aria-hidden="true"></span> Sign Up
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <!-- navigation -->
-        <div class="col-xs-2 menu">
-            <a href="" id="menuToggle">
-                <span class="navClosed"></span>
-            </a>
-            <ul>
-                <li><a href="#about">About</a></li>
-                <li><a href="#services">Services</a></li>
-                <li><a href="#team">Team</a></li>
-                <li><a href="#contact">Contact</a></li>
-                <li><a href="/login/login.php">Login</a></li>
-            </ul>
-        </div>
-        <!-- //navigation -->
-    </div>
-</div>
-
-<!-- banner slider -->
-<div class="slider">
-    <div class="callbacks_container">
-        <ul class="rslides callbacks callbacks1" id="slider4">
-            <li>
-                <div class="w3layouts-banner-top banner">
-                    <div class="container">
-                        <div class="agileits-banner-info">
-                            <div>
-                                <h3>Comprehensive Soil Analysis</h3>
-                                <p>Plant nutrient levels are valuable to identify nutrient deficiency or toxicity and to monitor the fertiliser programme</p>
-                            </div>
-                            <div class="video-pop-wthree">
-                                <a href="#small-dialog1" class="view play-icon popup-with-zoom-anim">
-                                    <i class="fa fa-play-circle" aria-hidden="true"></i>Watch Our Video</a>
-                                <div id="small-dialog1" class="mfp-hide w3ls_small_dialog wthree_pop">
-                                    <iframe src="https://player.vimeo.com/video/19251347"></iframe>
-                                </div>
-                            </div>
-                            <div class="thim-click-to-bottom">
-                                <a href="#about" class="scroll">
-                                    <i class="fa fa-chevron-down"></i>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-            <li>
-                <div class="w3layouts-banner-top banner-2">
-                    <div class="container">
-                        <div class="agileits-banner-info">
-                            <div>
-                                <h3>Comprehensive Plant Analysis</h3>
-                                <p>Plant nutrient levels are valuable to identify nutrient deficiency or toxicity and to monitor the fertiliser programme</p>
-                            </div>
-                            <div class="video-pop-wthree">
-                                <a href="#small-dialog2" class="view play-icon popup-with-zoom-anim">
-                                    <i class="fa fa-play-circle" aria-hidden="true"></i>Watch Our Video</a>
-                                <div id="small-dialog2" class="mfp-hide w3ls_small_dialog wthree_pop">
-                                    <iframe src="https://player.vimeo.com/video/19251347"></iframe>
-                                </div>
-                            </div>
-                            <div class="thim-click-to-bottom">
-                                <a href="#about" class="scroll">
-                                    <i class="fa fa-chevron-down"></i>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
+<!-- ── NAVIGATION ──────────────────────────── -->
+<nav>
+  <a href="/" class="nav-logo">
+    <div class="nav-logo-mark">🌿</div>
+    <span class="nav-logo-text">Crop Monitor</span>
+  </a>
+  <ul class="nav-links">
+    <li><a href="#science">Science</a></li>
+    <li><a href="#services">Services</a></li>
+    <li><a href="#how-it-works">How It Works</a></li>
+    <li><a href="#team">Team</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ul>
+  <div class="nav-cta">
+    <a href="/login/login.php" class="btn-outline">Sign In</a>
+    <a href="/login/register.php" class="btn-primary">Get Started</a>
+  </div>
+</nav>
 
-            <li>
-                <div class="w3layouts-banner-top banner-3">
-                    <div class="container">
-                        <div class="agileits-banner-info">
-                            <div>
-                                <h3>Comprehensive Water Analysis</h3>
-                                <p>Monitor water quality in real-time to protect your crops and optimise irrigation.</p>
-                            </div>
-                            <div class="video-pop-wthree">
-                                <a href="#small-dialog3" class="view play-icon popup-with-zoom-anim">
-                                    <i class="fa fa-play-circle" aria-hidden="true"></i>Watch Our Video</a>
-                                <div id="small-dialog3" class="mfp-hide w3ls_small_dialog wthree_pop">
-                                    <iframe src="https://player.vimeo.com/video/19251347"></iframe>
-                                </div>
-                            </div>
-                            <div class="thim-click-to-bottom">
-                                <a href="#about" class="scroll">
-                                    <i class="fa fa-chevron-down"></i>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        </ul>
+<!-- ── HERO ────────────────────────────────── -->
+<section class="hero">
+  <div class="hero-left">
+    <div class="hero-eyebrow">Albrecht Method · Australian Conditions</div>
+    <h1>Soil Science<br>That <em>Feeds</em><br>Your Farm</h1>
+    <p class="hero-desc">Built on Dr. William Albrecht's proven base cation saturation ratios — monitor calcium, magnesium, potassium and moisture levels in real-time, with tailored recommendations for Australian broadacre, viticulture and dairy operations.</p>
+    <div class="hero-actions">
+      <a href="/login/register.php" class="btn-hero">Start Monitoring</a>
+      <a href="#science" class="btn-hero-sec">The Science</a>
+    </div>
+    <div class="hero-stats">
+      <div class="hero-stat">
+        <div class="hero-stat-num">768</div>
+        <div class="hero-stat-label">Blocks monitored</div>
+      </div>
+      <div class="hero-stat">
+        <div class="hero-stat-num">94%</div>
+        <div class="hero-stat-label">Nutrient accuracy</div>
+      </div>
+      <div class="hero-stat">
+        <div class="hero-stat-num">24/7</div>
+        <div class="hero-stat-label">Real-time alerts</div>
+      </div>
+    </div>
+  </div>
+  <div class="hero-right">
+    <div class="hero-soil-diagram">
+      <div style="font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:1rem;padding-left:1.5rem;">Soil Profile Analysis</div>
+      <div class="soil-layer">
+        <div class="soil-layer-label">0–15 cm</div>
+        <div class="soil-layer-name">Topsoil</div>
+        <div class="soil-layer-detail">Ca 68% · Mg 14% · K 4.2%</div>
+      </div>
+      <div class="soil-layer">
+        <div class="soil-layer-label">15–30 cm</div>
+        <div class="soil-layer-name">Sub-Surface</div>
+        <div class="soil-layer-detail">Ca 61% · Mg 17% · K 3.8%</div>
+      </div>
+      <div class="soil-layer">
+        <div class="soil-layer-label">30–60 cm</div>
+        <div class="soil-layer-name">B Horizon</div>
+        <div class="soil-layer-detail">Ca 54% · Mg 21% · K 2.9%</div>
+      </div>
+      <div class="soil-layer">
+        <div class="soil-layer-label">60+ cm</div>
+        <div class="soil-layer-name">Parent Material</div>
+        <div class="soil-layer-detail">CEC 12.4 meq/100g</div>
+      </div>
     </div>
-    <div class="clearfix"></div>
+    <!-- Donut chart SVG -->
+    <div class="hero-cation-ring">
+      <svg viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <!-- Ca 65% -->
+        <circle cx="80" cy="80" r="60" stroke="#4a7a42" stroke-width="16" stroke-dasharray="244 135" stroke-dashoffset="0" transform="rotate(-90 80 80)" opacity="0.85"/>
+        <!-- Mg 15% -->
+        <circle cx="80" cy="80" r="60" stroke="#c8853a" stroke-width="16" stroke-dasharray="56 323" stroke-dashoffset="-244" transform="rotate(-90 80 80)" opacity="0.75"/>
+        <!-- K 4% -->
+        <circle cx="80" cy="80" r="60" stroke="#e8c87a" stroke-width="16" stroke-dasharray="15 364" stroke-dashoffset="-300" transform="rotate(-90 80 80)" opacity="0.75"/>
+        <!-- Other -->
+        <circle cx="80" cy="80" r="60" stroke="rgba(255,255,255,0.1)" stroke-width="16" stroke-dasharray="64 315" stroke-dashoffset="-315" transform="rotate(-90 80 80)"/>
+      </svg>
+      <div class="cation-ring-label">
+        <span>BCSR</span>
+        <strong>65%</strong>
+        <span style="font-size:0.6rem;color:rgba(255,255,255,0.3);">Ca sat.</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── MARQUEE ──────────────────────────────── -->
+<div class="marquee-band">
+  <div class="marquee-track">
+    <span class="marquee-item">Albrecht BCSR Method</span>
+    <span class="marquee-item">Calcium 60–70% Saturation</span>
+    <span class="marquee-item">Cation Exchange Capacity</span>
+    <span class="marquee-item">Real-Time Soil Monitoring</span>
+    <span class="marquee-item">Fertiliser Recommendations</span>
+    <span class="marquee-item">Australian Conditions</span>
+    <span class="marquee-item">Plant Tissue Analysis</span>
+    <span class="marquee-item">Irrigation Optimisation</span>
+    <span class="marquee-item">Albrecht BCSR Method</span>
+    <span class="marquee-item">Calcium 60–70% Saturation</span>
+    <span class="marquee-item">Cation Exchange Capacity</span>
+    <span class="marquee-item">Real-Time Soil Monitoring</span>
+    <span class="marquee-item">Fertiliser Recommendations</span>
+    <span class="marquee-item">Australian Conditions</span>
+    <span class="marquee-item">Plant Tissue Analysis</span>
+    <span class="marquee-item">Irrigation Optimisation</span>
+  </div>
 </div>
-<!-- //banner -->
 
-<!-- about -->
-<div class="banner-bottom-w3l" id="about">
-    <div class="container">
-        <div class="title-div">
-            <h3 class="tittle">Crop Management Platform</h3>
-            <div class="tittle-style"></div>
-            <div><p>Nutrient, Moisture, Temperature and Irrigation Alerts all on one platform — save time, improve sustainability and performance.</p></div>
+<!-- ── ALBRECHT SCIENCE ─────────────────────── -->
+<div class="albrecht" id="science">
+  <div class="albrecht-grid">
+    <div class="albrecht-left fade-up">
+      <div class="section-eyebrow">The Albrecht Method</div>
+      <h2 class="section-title">Nutrient Balance,<br>Not Just Quantity</h2>
+      <div class="albrecht-body">
+        <p>Developed by Dr. William Albrecht at the University of Missouri in the 1930s and 40s, the <strong>Base Cation Saturation Ratio (BCSR)</strong> system changed how we understand soil fertility. Rather than simply applying fixed fertiliser quantities, Albrecht showed that the <em>balance</em> between calcium, magnesium and potassium is what determines soil health and plant performance.</p>
+        <p>Calcium should occupy 60–70% of your soil's cation exchange sites. Magnesium 10–20%. Potassium 3–5%. When these ratios are right, soil structure improves, nutrient uptake increases, and your crops can reach their genetic potential.</p>
+      </div>
+      <div class="albrecht-quote">
+        <p>"The soil is the basis of agriculture — and its fertility determines the health of everything that grows from it."</p>
+        <cite>— Dr. William Albert Albrecht, University of Missouri</cite>
+      </div>
+      <div class="principle-cards">
+        <div class="principle-card fade-up">
+          <div class="principle-icon">⚖️</div>
+          <div>
+            <h4>Cation Balance Over Quantity</h4>
+            <p>Optimal plant nutrition requires the right Ca:Mg:K ratio (approx. 13:2:1), not simply high levels of any single nutrient.</p>
+          </div>
         </div>
-        <div class="welcome-sub-wthree">
-            <div class="col-md-5 banner_bottom_left">
-                <h4>About <span>Crop Monitor</span></h4>
-                <p>The Animal Dietary Mineral Balance report assists Veterinarians and Consultants in their assessment of the mineral content of herbage and how well it supplies the animal's daily requirements. Our platform considers both plant and animal requirements to provide comprehensive recommendations.</p>
-                <h6 class="w3l-style">Farm Management</h6>
-            </div>
-            <!-- Stats -->
-            <div class="col-md-7 stats-info-agile">
-                <div class="w3l-right-stats">
-                    <div class="stats-grid stat-border">
-                        <div class="numscroller numscroller-big-bottom" data-slno="1" data-min="0" data-max="768" data-delay=".5" data-increment="1">768</div>
-                        <p>Trees planted</p>
-                    </div>
-                    <div class="stats-grid">
-                        <div class="numscroller numscroller-big-bottom" data-slno="1" data-min="0" data-max="678" data-delay=".5" data-increment="1">678</div>
-                        <p>Likes</p>
-                    </div>
-                    <div class="stats-grid stat-border border-st2">
-                        <div class="numscroller numscroller-big-bottom" data-slno="1" data-min="0" data-max="800" data-delay=".5" data-increment="1">800</div>
-                        <p>Volunteers</p>
-                    </div>
-                </div>
-            </div>
-            <!-- //Stats -->
-            <div class="clearfix"></div>
+        <div class="principle-card fade-up">
+          <div class="principle-icon">🧱</div>
+          <div>
+            <h4>Calcium Builds Soil Structure</h4>
+            <p>Calcium increases flocculation and pore space, improving drainage and root penetration. Excess magnesium compacts soil.</p>
+          </div>
+        </div>
+        <div class="principle-card fade-up">
+          <div class="principle-icon">🔬</div>
+          <div>
+            <h4>CEC-Based Amendment Strategy</h4>
+            <p>Amendment rates are calculated from your soil's Cation Exchange Capacity — ensuring targeted, economical applications.</p>
+          </div>
         </div>
+      </div>
     </div>
-</div>
-<!-- //about -->
+    <div class="albrecht-right fade-up">
+      <div class="cation-chart">
+        <div class="cation-chart-title">Target Base Saturation Ranges — Albrecht BCSR</div>
 
-<!-- services -->
-<div class="agileits-services" id="services">
-    <div class="container">
-        <div class="title-div">
-            <h3 class="tittle"><span>S</span>ervices</h3>
-            <div class="tittle-style"></div>
+        <div class="cation-bar-row">
+          <div class="cation-label">Calcium</div>
+          <div class="cation-bar-track"><div class="cation-bar-fill" style="width:65%;background:linear-gradient(90deg,#4a7a42,#7dc87a);animation-delay:0.1s;"></div></div>
+          <div class="cation-val">60–70%</div>
         </div>
-        <div class="agileits-services-row">
-            <div class="col-md-4 col-xs-6 agileits-services-grids">
-                <div class="col-xs-3 wthree-ser">
-                    <i class="fa fa-envira" aria-hidden="true"></i>
-                </div>
-                <div class="col-xs-9 wthree-heading"><h4>Soil Analysis</h4></div>
-                <div class="clearfix"></div>
-                <div>Comprehensive soil nutrient analysis with fertiliser programme recommendations.</div>
-                <a href="/login/login.php" class="w3-buttons">Get Started</a>
-            </div>
-
-            <div class="col-md-4 col-xs-6 agileits-services-grids">
-                <div class="col-xs-3 wthree-ser">
-                    <i class="fa fa-globe" aria-hidden="true"></i>
-                </div>
-                <div class="col-xs-9 wthree-heading"><h4>Plant Analysis</h4></div>
-                <div class="clearfix"></div>
-                <div>Plant tissue analysis to identify nutrient deficiency or toxicity in real-time.</div>
-                <a href="/login/login.php" class="w3-buttons">Get Started</a>
-            </div>
-
-            <div class="col-md-4 col-xs-6 agileits-services-grids">
-                <div class="col-xs-3 wthree-ser">
-                    <i class="fa fa-tint" aria-hidden="true"></i>
-                </div>
-                <div class="col-xs-9 wthree-heading"><h4>Water Analysis</h4></div>
-                <div class="clearfix"></div>
-                <div>Water quality monitoring to protect crops and optimise irrigation schedules.</div>
-                <a href="/login/login.php" class="w3-buttons">Get Started</a>
-            </div>
+        <div class="cation-bar-row">
+          <div class="cation-label">Magnesium</div>
+          <div class="cation-bar-track"><div class="cation-bar-fill" style="width:15%;background:linear-gradient(90deg,#c8853a,#e8a860);animation-delay:0.2s;"></div></div>
+          <div class="cation-val">10–20%</div>
         </div>
-        <div class="agileits-services-row-2">
-            <div class="clearfix"></div>
+        <div class="cation-bar-row">
+          <div class="cation-label">Potassium</div>
+          <div class="cation-bar-track"><div class="cation-bar-fill" style="width:4%;background:linear-gradient(90deg,#e8c87a,#f0dc9a);animation-delay:0.3s;"></div></div>
+          <div class="cation-val">3–5%</div>
         </div>
+        <div class="cation-bar-row">
+          <div class="cation-label">Hydrogen</div>
+          <div class="cation-bar-track"><div class="cation-bar-fill" style="width:10%;background:linear-gradient(90deg,rgba(255,255,255,0.3),rgba(255,255,255,0.5));animation-delay:0.4s;"></div></div>
+          <div class="cation-val">10–15%</div>
+        </div>
+        <div class="cation-bar-row">
+          <div class="cation-label">Sodium</div>
+          <div class="cation-bar-track"><div class="cation-bar-fill" style="width:1.5%;background:linear-gradient(90deg,rgba(200,133,58,0.5),rgba(200,133,58,0.7));animation-delay:0.5s;"></div></div>
+          <div class="cation-val">&lt;3%</div>
+        </div>
+
+        <div class="cation-note">Optimal ranges based on Albrecht's original research and modern CEC-adjusted field data. Best applied to soils with moderate CEC (10–25 meq/100g).</div>
+      </div>
     </div>
+  </div>
 </div>
-<!-- //services -->
 
-<!-- team -->
-<div class="team" id="team">
-    <div class="container">
-        <div class="title-div">
-            <h3 class="tittle"><span>M</span>eet Our Team</h3>
-            <div class="tittle-style"></div>
-        </div>
-        <div class="agileits-team-grids">
-            <div class="col-sm-3 col-xs-6 agileits-team-grid">
-                <div class="team-info">
-                    <img src="client-assets/FredTemplate/images/t1.jpg" alt="">
-                    <div class="team-caption">
-                        <h4>Mark Duncan</h4>
-                        <ul>
-                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
-                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
-                            <li><a href="#"><i class="fa fa-rss"></i></a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="col-sm-3 col-xs-6 agileits-team-grid">
-                <div class="team-info">
-                    <img src="client-assets/FredTemplate/images/t2.jpg" alt="">
-                    <div class="team-caption">
-                        <h4>Cynthia Baker</h4>
-                        <ul>
-                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
-                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
-                            <li><a href="#"><i class="fa fa-rss"></i></a></li>
-                        </ul>
-                    </div>
-                </div>
+<!-- ── SERVICES ─────────────────────────────── -->
+<section class="services" id="services">
+  <div class="services-inner">
+    <div class="services-header fade-up">
+      <div class="section-eyebrow">What We Offer</div>
+      <h2 class="section-title">Comprehensive Farm Analysis</h2>
+      <p class="section-sub">From cation balance to irrigation scheduling — every measurement your farm needs, on one platform.</p>
+    </div>
+    <div class="services-grid">
+      <div class="service-card fade-up">
+        <div class="service-num">01</div>
+        <div class="service-icon-wrap">🌱</div>
+        <h3>Soil Analysis</h3>
+        <p>Full BCSR analysis measuring CEC, base saturation percentages, pH, organic matter, and macro/micronutrient levels. Fertiliser recommendations tailored to your soil type and target crop.</p>
+        <a href="/login/login.php" class="service-link">Get started →</a>
+      </div>
+      <div class="service-card fade-up">
+        <div class="service-num">02</div>
+        <div class="service-icon-wrap">🌿</div>
+        <h3>Plant Analysis</h3>
+        <p>Tissue analysis to detect nutrient deficiency or toxicity in real-time. Identifies whether problems stem from soil imbalances or in-season factors — before symptoms become visible yield losses.</p>
+        <a href="/login/login.php" class="service-link">Get started →</a>
+      </div>
+      <div class="service-card fade-up">
+        <div class="service-num">03</div>
+        <div class="service-icon-wrap">💧</div>
+        <h3>Water Analysis</h3>
+        <p>Monitor irrigation water quality including sodium, bicarbonate, pH, and EC. Understand how your water chemistry interacts with soil cation ratios and adjust programmes accordingly.</p>
+        <a href="/login/login.php" class="service-link">Get started →</a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── SOIL HEALTH PILLARS ──────────────────── -->
+<section class="science" id="health">
+  <div class="science-inner">
+    <div class="science-layout">
+      <div class="fade-up">
+        <div class="section-eyebrow">Soil Health Framework</div>
+        <h2 class="section-title">Three Pillars of Healthy Soil</h2>
+        <p class="section-sub" style="margin-bottom:2rem;">True soil health integrates physical, chemical, and biological components. Albrecht's cation balance work addresses the chemical foundation — which in turn improves structure and biology.</p>
+        <div class="pillars">
+          <div class="pillar fade-up">
+            <div class="pillar-number" style="color:rgba(200,133,58,0.25);">01</div>
+            <div>
+              <h4>Physical</h4>
+              <p>Proper Ca:Mg ratios improve soil aggregation and pore space, enhancing drainage, aeration and root penetration. Good structure reduces compaction and tillage requirements over time.</p>
             </div>
-            <div class="col-sm-3 col-xs-6 agileits-team-grid">
-                <div class="team-info">
-                    <img src="client-assets/FredTemplate/images/t3.jpg" alt="">
-                    <div class="team-caption">
-                        <h4>Peter Wright</h4>
-                        <ul>
-                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
-                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
-                            <li><a href="#"><i class="fa fa-rss"></i></a></li>
-                        </ul>
-                    </div>
-                </div>
+          </div>
+          <div class="pillar fade-up">
+            <div class="pillar-number" style="color:rgba(107,140,90,0.25);">02</div>
+            <div>
+              <h4>Chemical</h4>
+              <p>Cation balance governs pH, nutrient availability, and plant uptake efficiency. Monitoring BCSR ratios enables targeted amendments rather than blanket fertiliser applications that can worsen imbalances.</p>
             </div>
-            <div class="col-sm-3 col-xs-6 agileits-team-grid">
-                <div class="team-info">
-                    <img src="client-assets/FredTemplate/images/t4.jpg" alt="">
-                    <div class="team-caption">
-                        <h4>Steven Wilson</h4>
-                        <ul>
-                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
-                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
-                            <li><a href="#"><i class="fa fa-rss"></i></a></li>
-                        </ul>
-                    </div>
-                </div>
+          </div>
+          <div class="pillar fade-up">
+            <div class="pillar-number" style="color:rgba(122,74,42,0.2);">03</div>
+            <div>
+              <h4>Biological</h4>
+              <p>Balanced soil chemistry creates optimal conditions for microbial populations, nutrient cycling, and nitrogen fixation. Soil biology thrives when chemistry and physics are in harmony.</p>
             </div>
-            <div class="clearfix"></div>
-        </div>
-    </div>
-</div>
-<!-- //team -->
-
-<!-- experts section -->
-<div class="what-w3ls">
-    <div class="container">
-        <div class="title-div">
-            <h3 class="tittle"><span>W</span>e are expert in</h3>
-            <div class="tittle-style"></div>
+          </div>
         </div>
-        <div class="what-grids">
-            <div class="col-md-6 what-grid">
-                <img src="client-assets/FredTemplate/images/work.png" class="img-responsive" alt="">
-            </div>
-            <div class="col-md-6 what-grid1">
-                <div class="what-top">
-                    <div class="what-left"><i class="fa fa-check" aria-hidden="true"></i></div>
-                    <div class="what-right">
-                        <h4>Real-time Monitoring</h4>
-                        <p>Monitor soil moisture, temperature and nutrient levels in real-time across all your farm blocks.</p>
-                    </div>
-                    <div class="clearfix"></div>
-                </div>
-                <div class="what-top1">
-                    <div class="what-left"><i class="fa fa-thumbs-up" aria-hidden="true"></i></div>
-                    <div class="what-right">
-                        <h4>Actionable Recommendations</h4>
-                        <p>Get fertiliser programme recommendations based on comprehensive soil, plant and water analysis.</p>
-                    </div>
-                    <div class="clearfix"></div>
-                </div>
-                <div class="what-top1">
-                    <div class="what-left"><i class="fa fa-leaf" aria-hidden="true"></i></div>
-                    <div class="what-right">
-                        <h4>Australian Conditions</h4>
-                        <p>Built specifically for Australian broadacre, viticulture, horticulture and dairy operations.</p>
-                    </div>
-                    <div class="clearfix"></div>
-                </div>
+      </div>
+      <div class="fade-up">
+        <div class="soil-profile-card">
+          <div class="soil-profile-title">Live Nutrient Dashboard — Block A3, Riverina</div>
+          <div class="nutrient-row">
+            <div class="nutrient-name">Calcium</div>
+            <div class="nutrient-bar-track"><div class="nutrient-bar-fill" style="width:65%;background:#7dc87a;"></div></div>
+            <div class="nutrient-status status-optimal">Optimal</div>
+          </div>
+          <div class="nutrient-row">
+            <div class="nutrient-name">Magnesium</div>
+            <div class="nutrient-bar-track"><div class="nutrient-bar-fill" style="width:22%;background:#e8a860;"></div></div>
+            <div class="nutrient-status status-high">High</div>
+          </div>
+          <div class="nutrient-row">
+            <div class="nutrient-name">Potassium</div>
+            <div class="nutrient-bar-track"><div class="nutrient-bar-fill" style="width:28%;background:#e8c87a;"></div></div>
+            <div class="nutrient-status status-caution">Watch</div>
+          </div>
+          <div class="nutrient-row">
+            <div class="nutrient-name">Phosphorus</div>
+            <div class="nutrient-bar-track"><div class="nutrient-bar-fill" style="width:40%;background:#7dc87a;"></div></div>
+            <div class="nutrient-status status-optimal">Optimal</div>
+          </div>
+          <div class="nutrient-row">
+            <div class="nutrient-name">Sulphur</div>
+            <div class="nutrient-bar-track"><div class="nutrient-bar-fill" style="width:15%;background:#e07070;"></div></div>
+            <div class="nutrient-status status-low">Low</div>
+          </div>
+          <div class="nutrient-row">
+            <div class="nutrient-name">Soil Moisture</div>
+            <div class="nutrient-bar-track"><div class="nutrient-bar-fill" style="width:58%;background:#7dc87a;"></div></div>
+            <div class="nutrient-status status-optimal">Optimal</div>
+          </div>
+          <div class="soil-profile-footer">
+            <div class="soil-score">
+              <span class="soil-score-label">Soil Health Score</span>
+              <span class="soil-score-val">74</span>
+              <span class="soil-score-sub">/ 100 · Updated 4 min ago</span>
             </div>
-            <div class="clearfix"></div>
+            <div class="soil-alert">⚠️ Apply gypsum to correct elevated Mg:Ca ratio in B horizon</div>
+          </div>
         </div>
+      </div>
     </div>
-</div>
-<!-- //experts section -->
+  </div>
+</section>
 
-<!-- contact -->
-<div class="contact" id="contact">
-    <div class="title-div">
-        <h3 class="tittle"><span>C</span>ontact Us</h3>
-        <div class="tittle-style"></div>
+<!-- ── HOW IT WORKS ─────────────────────────── -->
+<section class="process" id="how-it-works">
+  <div class="process-inner">
+    <div class="process-header fade-up">
+      <div class="section-eyebrow">The Process</div>
+      <h2 class="section-title">From Sample to Decision</h2>
+      <p class="section-sub">A structured four-step process that turns raw soil data into actionable farm management recommendations.</p>
     </div>
-    <div class="col-md-6 map">
-        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.948805392833!2d-73.99619098458929!3d40.71914347933105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27e2f24131%3A0x64ffc98d24069f02!2sCANADA!5e0!3m2!1sen!2sin!4v1479793484055" title="Map"></iframe>
+    <div class="steps">
+      <div class="step fade-up">
+        <div class="step-num">1</div>
+        <h4>Sample Collection</h4>
+        <p>Collect soil, plant or water samples using our guided protocols — designed to capture accurate profiles at every soil depth.</p>
+      </div>
+      <div class="step fade-up">
+        <div class="step-num">2</div>
+        <h4>Lab Analysis</h4>
+        <p>CEC, BCSR ratios, pH, organic matter, and full macro/micronutrient panels analysed by certified Australian laboratories.</p>
+      </div>
+      <div class="step fade-up">
+        <div class="step-num">3</div>
+        <h4>Albrecht Scoring</h4>
+        <p>Results are scored against Albrecht's target ranges, adjusted for your soil type, CEC and target crop requirements.</p>
+      </div>
+      <div class="step fade-up">
+        <div class="step-num">4</div>
+        <h4>Recommendations</h4>
+        <p>Receive a tailored fertiliser and amendment programme — with real-time monitoring alerts as conditions change.</p>
+      </div>
     </div>
-    <div class="col-md-6 contact_grids_info">
-        <h5 class="small-title">Visit Us</h5>
-        <div class="col-xs-4 contact_grid">
-            <div class="contact_grid_right">
-                <h4>OFFICE 1</h4>
-                <p>435 City hall,</p>
-                <p>NewYork City SD092.</p>
-            </div>
-            <div class="address-row">
-                <h5>Mail Us</h5>
-                <p><a href="mailto:info@example.com">mail@example.com</a></p>
-            </div>
-            <div class="address-row">
-                <h5>Call Us</h5>
-                <p>+01 222 333 4444</p>
-            </div>
+  </div>
+</section>
+
+<!-- ── ABOUT / TEAM ─────────────────────────── -->
+<section class="about" id="team">
+  <div class="about-inner">
+    <div class="fade-up">
+      <div class="section-eyebrow">About Us</div>
+      <h2 class="section-title">Australian Soil Science,<br>Built for Australian Farms</h2>
+      <div class="about-text">
+        <p>Crop Monitor was built by agronomists and soil scientists who saw a gap between laboratory soil data and practical farm management. We've taken the rigour of Albrecht's BCSR methodology and made it accessible to every Australian farmer — from Riverina broadacre to Barossa viticulture to Victorian dairy.</p>
+        <p>Our platform integrates lab results, weather data, soil moisture sensors and irrigation records into a single dashboard — so you spend less time compiling data and more time acting on it.</p>
+      </div>
+      <div class="about-metrics">
+        <div class="about-metric fade-up">
+          <div class="about-metric-num">768</div>
+          <div class="about-metric-label">Trees planted on client farms</div>
         </div>
-        <div class="col-xs-4 contact_grid">
-            <div class="contact_grid_right">
-                <h4>OFFICE 2</h4>
-                <p>088 Jasmine hall,</p>
-                <p>NewYork City SD092.</p>
-            </div>
-            <div class="address-row">
-                <h5>Mail Us</h5>
-                <p><a href="mailto:info@example.com">mail@example.com</a></p>
-            </div>
-            <div class="address-row">
-                <h5>Call Us</h5>
-                <p>+01 222 333 4444</p>
-            </div>
+        <div class="about-metric fade-up">
+          <div class="about-metric-num">678</div>
+          <div class="about-metric-label">Farms on platform</div>
         </div>
-        <div class="col-xs-4 contact_grid">
-            <div class="contact_grid_right">
-                <h4>OFFICE 3</h4>
-                <p>436 Honey hall,</p>
-                <p>NewYork City SD092.</p>
-            </div>
-            <div class="address-row">
-                <h5>Mail Us</h5>
-                <p><a href="mailto:info@example.com">mail@example.com</a></p>
-            </div>
-            <div class="address-row">
-                <h5>Call Us</h5>
-                <p>+01 222 333 4444</p>
-            </div>
+        <div class="about-metric fade-up">
+          <div class="about-metric-num">800+</div>
+          <div class="about-metric-label">Soil profiles analysed</div>
         </div>
+        <div class="about-metric fade-up">
+          <div class="about-metric-num">13:2:1</div>
+          <div class="about-metric-label">Target Ca:Mg:K ratio</div>
+        </div>
+      </div>
     </div>
-    <div class="clearfix"></div>
-</div>
-<div class="second-contact-agile">
-    <div class="col-md-6 form-bg">
-        <form action="#" method="post">
-            <div class="contact-fields">
-                <input type="text" name="Name" placeholder="Name" required>
-            </div>
-            <div class="contact-fields">
-                <input type="email" name="Email" placeholder="Email" required>
-            </div>
-            <div class="contact-fields">
-                <input type="text" name="Subject" placeholder="Subject" required>
-            </div>
-            <div class="contact-fields">
-                <textarea name="Message" placeholder="Message" required></textarea>
-            </div>
-            <input type="submit" value="Submit">
-        </form>
-    </div>
-    <div class="col-md-6 address-left-second">
-        <div class="address-grid">
-            <h5 class="small-title">Contact Info</h5>
-            <div class="address-grids">
-                <span class="fa fa-volume-control-phone" aria-hidden="true"></span>
-                <div class="contact-right">
-                    <p>Telephone</p>
-                    <span>+012-345-6789</span>
-                </div>
-                <div class="clearfix"></div>
-            </div>
-            <div class="address-grids">
-                <span class="fa fa-envelope-o" aria-hidden="true"></span>
-                <div class="contact-right">
-                    <p>Mail</p>
-                    <a href="mailto:info@example.com">info@example.com</a>
-                </div>
-                <div class="clearfix"></div>
-            </div>
-            <div class="address-grids">
-                <span class="fa fa-map-marker" aria-hidden="true"></span>
-                <div class="contact-right">
-                    <p>Location</p>
-                    <span>3136 NE 130th St, Seattle, WA 98125, USA.</span>
-                </div>
-                <div class="clearfix"></div>
-            </div>
-            <div class="address-grids">
-                <span class="fa fa-calendar" aria-hidden="true"></span>
-                <div class="contact-right">
-                    <p>Working Hours</p>
-                    <span>Mon - Sat : 8:00 am to 10:30 pm</span>
-                </div>
-                <div class="clearfix"></div>
-            </div>
+    <div class="fade-up">
+      <div class="team-cards">
+        <div class="team-card">
+          <div class="team-avatar">MD</div>
+          <h4>Mark Duncan</h4>
+          <span>Founder · Agronomist</span>
+        </div>
+        <div class="team-card">
+          <div class="team-avatar">CB</div>
+          <h4>Cynthia Baker</h4>
+          <span>Soil Scientist</span>
+        </div>
+        <div class="team-card">
+          <div class="team-avatar">PW</div>
+          <h4>Peter Wright</h4>
+          <span>Water Quality Lead</span>
         </div>
+        <div class="team-card">
+          <div class="team-avatar">SW</div>
+          <h4>Steven Wilson</h4>
+          <span>Platform Engineer</span>
+        </div>
+      </div>
     </div>
-    <div class="clearfix"></div>
-</div>
-<!-- //contact -->
+  </div>
+</section>
 
-<!-- footer -->
-<div class="footer-bot">
-    <div class="container">
-        <div class="col-xs-3 logo2">
-            <h2>
-                <a href="<?= $siteUrl ?>" class="logo">
-                    <img class="img-res" src="client-assets/images/crop-monitor-logo.png" alt="Cropmonitor" width="100%">
-                </a>
-            </h2>
+<!-- ── CONTACT ──────────────────────────────── -->
+<section class="contact-section" id="contact">
+  <div class="contact-inner">
+    <div class="fade-up">
+      <div class="section-eyebrow">Contact Us</div>
+      <h2 class="section-title">Let's Talk About<br>Your Soil</h2>
+      <p class="section-sub" style="margin-bottom:2rem;">Whether you're curious about the Albrecht Method, looking to start monitoring, or want a consult on existing soil test results — we're here.</p>
+      <form class="contact-form" action="#" method="post">
+        <div class="form-row">
+          <div class="form-field">
+            <label>First Name</label>
+            <input type="text" name="first_name" placeholder="Mark" required>
+          </div>
+          <div class="form-field">
+            <label>Last Name</label>
+            <input type="text" name="last_name" placeholder="Duncan" required>
+          </div>
         </div>
-        <ul class="footer-nav">
-            <li><a href="#about">About</a></li>
-            <li><a href="#services">Services</a></li>
-            <li><a href="#team">Team</a></li>
-            <li><a href="#contact">Contact</a></li>
-            <li><a href="/login/login.php">Login</a></li>
-            <li><a href="/login/register.php">Register</a></li>
-        </ul>
-        <div class="clearfix"></div>
-        <div class="copy-right">
-            <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($siteName, ENT_QUOTES, 'UTF-8') ?>. All Rights Reserved.</p>
+        <div class="form-field">
+          <label>Email Address</label>
+          <input type="email" name="email" placeholder="mark@example.com.au" required>
         </div>
+        <div class="form-field">
+          <label>Farm Type</label>
+          <select name="farm_type">
+            <option value="">Select your operation type</option>
+            <option>Broadacre</option>
+            <option>Viticulture</option>
+            <option>Horticulture</option>
+            <option>Dairy</option>
+            <option>Mixed Farming</option>
+          </select>
+        </div>
+        <div class="form-field">
+          <label>Message</label>
+          <textarea name="message" placeholder="Tell us about your farm and what you're trying to achieve…"></textarea>
+        </div>
+        <button type="submit" class="form-submit">Send Message</button>
+      </form>
     </div>
-</div>
-<!-- //footer -->
+    <div class="contact-info fade-up">
+      <div class="contact-info-item">
+        <div class="contact-info-icon">📞</div>
+        <div>
+          <div class="contact-info-label">Phone</div>
+          <div class="contact-info-val">+61 2 1234 5678</div>
+        </div>
+      </div>
+      <div class="contact-info-item">
+        <div class="contact-info-icon">✉️</div>
+        <div>
+          <div class="contact-info-label">Email</div>
+          <div class="contact-info-val">hello@cropmonitor.com.au</div>
+        </div>
+      </div>
+      <div class="contact-info-item">
+        <div class="contact-info-icon">📍</div>
+        <div>
+          <div class="contact-info-label">Office</div>
+          <div class="contact-info-val">Level 4, 123 Collins Street<br>Melbourne VIC 3000</div>
+        </div>
+      </div>
+      <div class="contact-info-item">
+        <div class="contact-info-icon">🕐</div>
+        <div>
+          <div class="contact-info-label">Hours</div>
+          <div class="contact-info-val">Mon–Fri 8:00am – 5:30pm AEST</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ── FOOTER ───────────────────────────────── -->
+<footer>
+  <div class="footer-inner">
+    <div class="footer-top">
+      <div>
+        <a href="/" class="footer-logo">
+          <div class="footer-logo-mark">🌿</div>
+          <span class="footer-logo-text">Crop Monitor</span>
+        </a>
+        <p class="footer-tagline">Albrecht Method soil science for Australian conditions.</p>
+      </div>
+      <div class="footer-nav-group">
+        <h5>Platform</h5>
+        <ul>
+          <li><a href="#science">The Science</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#how-it-works">How It Works</a></li>
+          <li><a href="/login/login.php">Sign In</a></li>
+        </ul>
+      </div>
+      <div class="footer-nav-group">
+        <h5>Company</h5>
+        <ul>
+          <li><a href="#team">Our Team</a></li>
+          <li><a href="#contact">Contact</a></li>
+          <li><a href="/login/register.php">Register</a></li>
+        </ul>
+      </div>
+      <div class="footer-nav-group">
+        <h5>Resources</h5>
+        <ul>
+          <li><a href="#">Albrecht Method Guide</a></li>
+          <li><a href="#">Sampling Protocols</a></li>
+          <li><a href="#">BCSR Calculator</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p class="footer-copy">© 2026 Crop Monitor. All Rights Reserved.</p>
+      <p class="footer-badge">Built on Albrecht BCSR Methodology</p>
+    </div>
+  </div>
+</footer>
 
-<!-- js-scripts -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
-<script src="client-assets/FredTemplate/js/bootstrap.js"></script>
-<script src="client-assets/FredTemplate/js/lightbox-plus-jquery.min.js"></script>
-<script src="client-assets/FredTemplate/js/numscroller-1.0.js"></script>
-<script src="client-assets/FredTemplate/js/responsiveslides.min.js"></script>
-<script>
-    $(function () {
-        $("#slider4").responsiveSlides({
-            auto: true,
-            pager: true,
-            nav: false,
-            speed: 200,
-            namespace: "callbacks"
-        });
-    });
-</script>
-<script>
-    (function ($) {
-        $(document).ready(function () {
-            $('#menuToggle').click(function (e) {
-                var $parent = $(this).parent('.menu');
-                $parent.toggleClass("open");
-                var navState = $parent.hasClass('open') ? "hide" : "show";
-                $(this).attr("title", navState + " navigation");
-                setTimeout(function () {
-                    $('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
-                }, 200);
-                e.preventDefault();
-            });
-        });
-    })(jQuery);
-</script>
-<script src="client-assets/FredTemplate/js/jquery.magnific-popup.js"></script>
-<script>
-    $(document).ready(function () {
-        $('.popup-with-zoom-anim').magnificPopup({
-            type: 'inline',
-            fixedContentPos: false,
-            fixedBgPos: true,
-            overflowY: 'auto',
-            closeBtnInside: true,
-            preloader: false,
-            midClick: true,
-            removalDelay: 300,
-            mainClass: 'my-mfp-zoom-in'
-        });
-    });
-</script>
-<script src="client-assets/FredTemplate/js/jquery.vide.min.js"></script>
-<script src="client-assets/FredTemplate/js/SmoothScroll.min.js"></script>
-<script src="client-assets/FredTemplate/js/move-top.js"></script>
-<script src="client-assets/FredTemplate/js/easing.js"></script>
 <script>
-    jQuery(document).ready(function ($) {
-        $(".scroll").click(function (event) {
-            event.preventDefault();
-            $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
-        });
-        $().UItoTop({ easingType: 'easeOutQuart' });
+  // Fade-up on scroll
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => {
+      if (e.isIntersecting) { e.target.classList.add('visible'); }
     });
-</script>
-<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
-<script defer src="client-assets/FredTemplate/js/jquery.flexslider.js"></script>
-<script>
-    $(window).on('load', function () {
-        $('.flexslider').flexslider({
-            animation: "slide",
-            start: function (slider) {
-                $('body').removeClass('loading');
-            }
-        });
+  }, { threshold: 0.12 });
+  document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
+
+  // Nav scroll shadow
+  window.addEventListener('scroll', () => {
+    document.querySelector('nav').style.boxShadow =
+      window.scrollY > 10 ? '0 2px 20px rgba(0,0,0,0.06)' : 'none';
+  });
+
+  // Smooth scroll for nav links
+  document.querySelectorAll('a[href^="#"]').forEach(a => {
+    a.addEventListener('click', e => {
+      const target = document.querySelector(a.getAttribute('href'));
+      if (target) {
+        e.preventDefault();
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
     });
+  });
 </script>
-<!-- //js-scripts -->
-
 </body>
-</html>
+</html>