:root {

```
--green-950: #05251e;
--green-900: #08362c;
--green-800: #0c4a3b;
--green-700: #11654f;
--green-600: #198267;
--green-400: #59b291;
--green-100: #e3f4ec;
--green-50: #f2faf6;

--gold: #c7a25a;
--gold-light: #ead8a8;

--cream: #faf9f4;

--white: #ffffff;

--text: #1b3029;
--muted: #64756e;

--border: #dce8e1;

--shadow:
    0 20px 60px rgba(5, 37, 30, 0.08);

--max-width: 1180px;
```

}

/* =========================================================
RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {

```
font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

color: var(--text);

background: var(--white);

line-height: 1.6;

overflow-x: hidden;
```

}

a {
color: inherit;
text-decoration: none;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

.container {
width: min(92%, var(--max-width));

```
margin: auto;
```

}

/* =========================================================
HEADER
========================================================= */

.header {

```
position: sticky;

top: 0;

z-index: 1000;

background:
    rgba(255, 255, 255, 0.94);

border-bottom:
    1px solid var(--border);

backdrop-filter:
    blur(16px);
```

}

.nav {

```
min-height: 78px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 25px;
```

}

.brand {

```
display: flex;

align-items: center;

gap: 11px;

color: var(--green-950);
```

}

.brand-logo {

```
width: 41px;

height: 41px;

display: grid;

place-items: center;

border-radius: 11px;

background:
    linear-gradient(
        135deg,
        var(--green-950),
        var(--green-600)
    );

color: white;

font-size: 12px;

font-weight: 900;

letter-spacing: -0.5px;
```

}

.brand-name {

```
display: flex;

flex-direction: column;

line-height: 1;
```

}

.brand-name strong {

```
font-size: 17px;

letter-spacing: -0.3px;
```

}

.brand-name span {

```
margin-top: 5px;

color: var(--green-600);

font-size: 8px;

font-weight: 900;

letter-spacing: 3px;
```

}

.navigation {

```
display: flex;

align-items: center;

gap: 25px;

font-size: 12px;

font-weight: 700;
```

}

.navigation a {

```
color: #52655d;

transition: 0.2s ease;
```

}

.navigation a:hover {

```
color: var(--green-600);
```

}

.nav-cta {

```
padding: 11px 17px;

border-radius: 6px;

background: var(--green-950);

color: white;

font-size: 12px;

font-weight: 800;

transition: 0.2s ease;
```

}

.nav-cta:hover {

```
background: var(--green-600);

transform: translateY(-1px);
```

}

/* =========================================================
HERO
========================================================= */

.hero {

```
position: relative;

min-height: 760px;

display: flex;

align-items: center;

overflow: hidden;

background:

    radial-gradient(
        circle at 78% 35%,
        rgba(89, 178, 145, 0.20),
        transparent 28%
    ),

    linear-gradient(
        135deg,
        #f7fcf9,
        #e6f3ed
    );
```

}

.hero-grid-pattern {

```
position: absolute;

inset: 0;

opacity: 0.35;

background-image:

    linear-gradient(
        rgba(25, 130, 103, 0.07) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(25, 130, 103, 0.07) 1px,
        transparent 1px
    );

background-size: 65px 65px;

mask-image:
    linear-gradient(
        to right,
        transparent,
        black 45%,
        black
    );
```

}

.hero-glow {

```
position: absolute;

border-radius: 50%;

background: var(--green-600);

opacity: 0.08;

filter: blur(1px);
```

}

.glow-one {

```
width: 180px;
height: 180px;

top: 8%;
right: 18%;
```

}

.glow-two {

```
width: 70px;
height: 70px;

bottom: 15%;
right: 8%;
```

}

.hero-content {

```
position: relative;

z-index: 2;

display: grid;

grid-template-columns: 1.05fr 0.95fr;

align-items: center;

gap: 55px;
```

}

.hero-copy {

```
padding: 80px 0;
```

}

.eyebrow {

```
display: flex;

align-items: center;

gap: 10px;

margin-bottom: 23px;

color: var(--green-600);

font-size: 10px;

font-weight: 900;

letter-spacing: 2.2px;
```

}

.eyebrow span {

```
width: 4px;

height: 4px;

border-radius: 50%;

background: var(--gold);
```

}

.hero h1 {

```
max-width: 760px;

color: var(--green-950);

font-size:
    clamp(
        45px,
        5.4vw,
        73px
    );

line-height: 1.01;

letter-spacing: -3.5px;
```

}

.hero h1 strong {

```
display: block;

color: var(--green-600);

font-weight: 800;
```

}

.hero-lead {

```
max-width: 700px;

margin-top: 29px;

color: #40564e;

font-size: 19px;

line-height: 1.72;
```

}

.hero-description {

```
max-width: 650px;

margin-top: 13px;

color: var(--muted);

font-size: 14px;
```

}

.hero-actions {

```
display: flex;

gap: 12px;

margin-top: 33px;
```

}

.button {

```
min-height: 49px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 13px;

padding: 0 21px;

border-radius: 6px;

font-size: 12px;

font-weight: 800;

transition: 0.22s ease;
```

}

.button-primary {

```
background: var(--green-950);

color: white;

box-shadow:
    0 10px 25px rgba(5, 37, 30, 0.16);
```

}

.button-primary:hover {

```
background: var(--green-600);

transform: translateY(-2px);
```

}

.button-secondary {

```
border: 1px solid var(--green-800);

color: var(--green-800);
```

}

.button-secondary:hover {

```
background: var(--green-950);

color: white;
```

}

.hero-proof {

```
display: flex;

gap: 30px;

margin-top: 45px;
```

}

.hero-proof div {

```
padding-left: 14px;

border-left:
    2px solid var(--green-400);
```

}

.hero-proof strong {

```
display: block;

color: var(--green-950);

font-size: 17px;
```

}

.hero-proof span {

```
display: block;

margin-top: 2px;

color: var(--muted);

font-size: 9px;

line-height: 1.4;
```

}

/* =========================================================
HERO MATERIAL GRAPHIC
========================================================= */

.hero-visual {

```
position: relative;

min-height: 530px;

display: grid;

place-items: center;
```

}

.visual-orbit {

```
position: absolute;

border-radius: 50%;

border:
    1px solid rgba(
        25,
        130,
        103,
        0.20
    );
```

}

.orbit-one {

```
width: 440px;
height: 440px;
```

}

.orbit-two {

```
width: 330px;
height: 330px;

border-style: dashed;

animation:
    spin 30s linear infinite;
```

}

.orbit-three {

```
width: 230px;
height: 230px;

border-color:
    rgba(
        199,
        162,
        90,
        0.30
    );
```

}

@keyframes spin {

```
from {
    transform: rotate(0deg);
}

to {
    transform: rotate(360deg);
}
```

}

.material-core {

```
position: relative;

z-index: 5;

width: 220px;

height: 220px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

border-radius: 50%;

background:

    radial-gradient(
        circle at 32% 25%,
        #51ad89,
        var(--green-950)
    );

color: white;

box-shadow:

    0 30px 70px
    rgba(5, 37, 30, 0.27),

    0 0 0 20px
    rgba(25, 130, 103, 0.06);
```

}

.material-core span {

```
color: #a8dcc6;

font-size: 8px;

font-weight: 900;

letter-spacing: 2.3px;
```

}

.material-core strong {

```
margin: 4px 0;

font-size: 51px;

line-height: 1;

letter-spacing: -2px;
```

}

.material-core small {

```
color: #d6e9e1;

font-size: 11px;
```

}

.atom {

```
position: absolute;

z-index: 8;

border-radius: 50%;

background: var(--gold);

box-shadow:
    0 0 0 9px
    rgba(199, 162, 90, 0.08);
```

}

.atom-a {

```
width: 18px;
height: 18px;

top: 75px;
right: 75px;
```

}

.atom-b {

```
width: 12px;
height: 12px;

bottom: 75px;
left: 75px;
```

}

.atom-c {

```
width: 24px;
height: 24px;

top: 175px;
left: 48px;
```

}

.atom-d {

```
width: 10px;
height: 10px;

bottom: 120px;
right: 43px;
```

}

.atom-e {

```
width: 14px;
height: 14px;

top: 45%;
right: 25px;
```

}

.floating-label {

```
position: absolute;

z-index: 10;

min-width: 105px;

padding: 12px 15px;

background: rgba(255,255,255,0.92);

border:
    1px solid
    rgba(25, 130, 103, 0.16);

border-radius: 8px;

box-shadow:
    0 15px 35px
    rgba(5, 37, 30, 0.09);

backdrop-filter: blur(10px);
```

}

.floating-label span {

```
display: block;

color: var(--muted);

font-size: 8px;

font-weight: 800;

letter-spacing: 1.3px;
```

}

.floating-label strong {

```
display: block;

margin-top: 3px;

color: var(--green-800);

font-size: 17px;
```

}

.label-top {

```
top: 75px;

left: 20px;
```

}

.label-bottom {

```
right: 20px;

bottom: 75px;
```

}

/* =========================================================
SNAPSHOT
========================================================= */

.snapshot {

```
padding: 95px 0;

background: var(--green-950);

color: white;
```

}

.snapshot-header {

```
max-width: 750px;

margin-bottom: 50px;
```

}

.section-label {

```
color: var(--green-600);

font-size: 10px;

font-weight: 900;

letter-spacing: 2px;
```

}

.snapshot .section-label {

```
color: #77c4a5;
```

}

.snapshot-header h2 {

```
margin-top: 13px;

font-size:
    clamp(
        34px,
        4vw,
        51px
    );

line-height: 1.08;

letter-spacing: -1.8px;
```

}

.metric-grid {

```
display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 13px;
```

}

.metric-card {

```
min-height: 280px;

padding: 28px;

border:
    1px solid
    rgba(255,255,255,0.10);

border-radius: 9px;

background:
    rgba(255,255,255,0.035);
```

}

.metric-card.featured {

```
background:
    linear-gradient(
        145deg,
        rgba(31, 131, 103, 0.45),
        rgba(31, 131, 103, 0.10)
    );

border-color:
    rgba(89, 178, 145, 0.30);
```

}

.metric-number {

```
color: var(--gold);

font-size: 10px;

font-weight: 900;

letter-spacing: 1px;
```

}

.metric-value {

```
margin-top: 45px;

color: white;

font-size: 36px;

font-weight: 800;

letter-spacing: -1.5px;
```

}

.metric-unit {

```
margin-top: 3px;

color: #9ed0bd;

font-size: 11px;

font-weight: 700;
```

}

.metric-card p {

```
margin-top: 20px;

color: #aebfb8;

font-size: 12px;
```

}

/* =========================================================
GENERAL SECTIONS
========================================================= */

.section {

```
padding: 110px 0;
```

}

.two-column {

```
display: grid;

grid-template-columns:
    0.88fr 1.12fr;

gap: 100px;
```

}

.section-heading h2,
.center-heading h2,
.contact h2 {

```
margin-top: 15px;

color: var(--green-950);

font-size:
    clamp(
        35px,
        4vw,
        53px
    );

line-height: 1.08;

letter-spacing: -1.8px;
```

}

.section-heading h2 span {

```
color: var(--green-600);
```

}

.section-copy {

```
color: var(--muted);

font-size: 17px;
```

}

.section-copy p + p {

```
margin-top: 20px;
```

}

.center-heading {

```
max-width: 760px;

margin:
    0 auto
    55px;

text-align: center;
```

}

.center-heading p {

```
margin-top: 17px;

color: var(--muted);

font-size: 15px;
```

}

/* =========================================================
OPPORTUNITY
========================================================= */

.opportunity {

```
background: white;
```

}

/* =========================================================
BUSINESS MODEL
========================================================= */

.business-model {

```
padding: 110px 0;

background: var(--cream);
```

}

.business-flow {

```
display: grid;

grid-template-columns:
    1fr 35px
    1fr 35px
    1fr 35px
    1fr;

align-items: center;
```

}

.flow-card {

```
min-height: 230px;

padding: 27px;

background: white;

border:
    1px solid
    var(--border);

border-radius: 9px;

box-shadow:
    0 10px 35px
    rgba(5, 37, 30, 0.035);
```

}

.flow-icon {

```
width: 48px;
height: 48px;

display: grid;

place-items: center;

margin-bottom: 35px;

border-radius: 50%;

background: var(--green-100);

color: var(--green-700);

font-size: 11px;

font-weight: 900;
```

}

.flow-card h3 {

```
color: var(--green-950);

font-size: 18px;
```

}

.flow-card p {

```
margin-top: 9px;

color: var(--muted);

font-size: 13px;
```

}

.flow-arrow {

```
color: var(--green-400);

text-align: center;

font-size: 23px;
```

}

/* =========================================================
TECHNOLOGY
========================================================= */

.technology {

```
background: white;
```

}

.technology-grid {

```
display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 16px;
```

}

.technology-card {

```
min-height: 270px;

padding: 28px;

border:
    1px solid
    var(--border);

border-radius: 9px;

background: var(--green-50);

transition: 0.22s ease;
```

}

.technology-card:hover {

```
transform: translateY(-5px);

box-shadow: var(--shadow);
```

}

.tech-number {

```
color: var(--gold);

font-size: 10px;

font-weight: 900;

letter-spacing: 1px;
```

}

.technology-card h3 {

```
margin-top: 42px;

color: var(--green-950);

font-size: 19px;
```

}

.technology-card p {

```
margin-top: 11px;

color: var(--muted);

font-size: 13px;
```

}

/* =========================================================
VALIDATION
========================================================= */

.validation {

```
padding: 105px 0;

background:

    radial-gradient(
        circle at 85% 30%,
        rgba(89,178,145,0.13),
        transparent 30%
    ),

    var(--green-50);
```

}

.validation-grid {

```
display: grid;

grid-template-columns:
    0.9fr 1.1fr;

gap: 90px;

align-items: center;
```

}

.validation-copy h2 {

```
margin-top: 15px;

color: var(--green-950);

font-size:
    clamp(
        35px,
        4vw,
        51px
    );

line-height: 1.08;

letter-spacing: -1.8px;
```

}

.validation-copy > p {

```
margin-top: 23px;

color: var(--muted);

font-size: 16px;
```

}

.small-note {

```
font-size: 11px !important;

color: #82928c !important;
```

}

.validation-results {

```
display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 12px;
```

}

.validation-result {

```
min-height: 165px;

display: flex;

align-items: center;

gap: 17px;

padding: 25px;

background: white;

border:
    1px solid
    var(--border);

border-radius: 9px;
```

}

.result-icon {

```
width: 57px;
height: 57px;

flex-shrink: 0;

display: grid;

place-items: center;

border-radius: 12px;

background: var(--green-900);

color: white;

font-size: 11px;

font-weight: 900;
```

}

.validation-result strong {

```
display: block;

color: var(--green-950);

font-size: 25px;
```

}

.validation-result span {

```
display: block;

margin-top: 4px;

color: var(--muted);

font-size: 10px;

line-height: 1.4;
```

}

/* =========================================================
PRODUCT
========================================================= */

.product {

```
padding: 110px 0;

background:

    radial-gradient(
        circle at 80% 30%,
        rgba(89,178,145,0.16),
        transparent 28%
    ),

    var(--green-950);

color: white;
```

}

.product-grid {

```
display: grid;

grid-template-columns:
    1.1fr 0.9fr;

gap: 90px;

align-items: center;
```

}

.product .section-label {

```
color: #80c8a9;
```

}

.product-copy h2 {

```
margin-top: 15px;

color: white;

font-size:
    clamp(
        38px,
        4vw,
        56px
    );

line-height: 1.05;

letter-spacing: -2px;
```

}

.product-copy h2 span {

```
display: block;

color: #7ec8a8;
```

}

.product-copy p {

```
max-width: 620px;

margin-top: 23px;

color: #cadcd5;

font-size: 16px;
```

}

.material-tags {

```
display: flex;

flex-wrap: wrap;

gap: 9px;

margin-top: 28px;
```

}

.material-tags span {

```
padding: 7px 12px;

border:
    1px solid
    rgba(255,255,255,0.17);

border-radius: 50px;

color: #c9ded5;

font-size: 10px;
```

}

.material-display {

```
min-height: 350px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

border:
    1px solid
    rgba(255,255,255,0.12);

border-radius: 20px;

background:
    rgba(255,255,255,0.035);
```

}

.formula-circle {

```
width: 125px;
height: 125px;

display: grid;

place-items: center;

border-radius: 50%;

background:

    radial-gradient(
        circle at 35% 25%,
        #4cae88,
        #0a3a2f
    );

box-shadow:
    0 0 0 16px
    rgba(89,178,145,0.06);
```

}

.formula-circle span {

```
font-size: 29px;

font-weight: 900;
```

}

.formula {

```
margin-top: 28px;

color: #b8dccd;

font-size: 27px;

font-weight: 700;
```

}

.material-display p {

```
margin-top: 7px;

font-weight: 700;
```

}

.material-display small {

```
margin-top: 3px;

color: #91aaa0;

font-size: 10px;
```

}

/* =========================================================
ECONOMICS
========================================================= */

.economics {

```
background: white;
```

}

.economics-table {

```
border:
    1px solid
    var(--border);

border-radius: 9px;

overflow: hidden;
```

}

.economic-row {

```
min-height: 70px;

display: grid;

grid-template-columns:
    1.1fr 0.75fr 1fr;

align-items: center;

gap: 20px;

padding: 0 25px;

border-bottom:
    1px solid
    var(--border);
```

}

.economic-row:last-child {

```
border-bottom: none;
```

}

.header-row {

```
min-height: 52px;

background: var(--green-950);

color: white;

font-size: 10px;

font-weight: 800;

text-transform: uppercase;

letter-spacing: 1px;
```

}

.economic-row strong {

```
color: var(--green-950);

font-size: 13px;
```

}

.economic-row span {

```
color: var(--muted);

font-size: 12px;
```

}

.economic-row .green-text {

```
color: var(--green-600);

font-size: 15px;

font-weight: 850;
```

}

.financial-disclaimer {

```
margin-top: 17px;

color: #87958f;

font-size: 10px;

line-height: 1.6;
```

}

/* =========================================================
APPLICATIONS
========================================================= */

.applications {

```
padding: 110px 0;

background: var(--cream);
```

}

.application-grid {

```
display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 16px;
```

}

.application-card {

```
min-height: 330px;

padding: 28px;

background: white;

border:
    1px solid
    var(--border);

border-radius: 9px;

transition: 0.22s ease;
```

}

.application-card:hover {

```
transform: translateY(-6px);

box-shadow: var(--shadow);
```

}

.application-card > span {

```
color: var(--gold);

font-size: 10px;

font-weight: 900;
```

}

.application-icon {

```
margin: 40px 0 17px;

font-size: 30px;
```

}

.application-card h3 {

```
color: var(--green-950);

font-size: 19px;
```

}

.application-card p {

```
margin-top: 10px;

color: var(--muted);

font-size: 13px;
```

}

/* =========================================================
IMPACT
========================================================= */

.impact {

```
background: white;
```

}

.impact-grid {

```
display: grid;

grid-template-columns:
    0.9fr 1.1fr;

gap: 100px;

align-items: center;
```

}

.impact-copy h2 {

```
margin-top: 15px;

color: var(--green-950);

font-size:
    clamp(
        35px,
        4vw,
        52px
    );

line-height: 1.08;

letter-spacing: -1.8px;
```

}

.impact-copy h2 span {

```
color: var(--green-600);
```

}

.impact-copy p {

```
margin-top: 22px;

color: var(--muted);

font-size: 16px;
```

}

.impact-visual {

```
position: relative;

min-height: 390px;

display: grid;

place-items: center;

border-radius: 20px;

background:

    radial-gradient(
        circle,
        rgba(89,178,145,0.20),
        transparent 55%
    ),

    var(--green-50);
```

}

.impact-number {

```
width: 220px;
height: 220px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

border-radius: 50%;

background: var(--green-950);

color: white;

box-shadow:
    0 0 0 20px
    rgba(25,130,103,0.06),

    0 25px 60px
    rgba(5,37,30,0.16);
```

}

.impact-number strong {

```
font-size: 65px;

line-height: 1;

color: #84c9aa;
```

}

.impact-number span {

```
margin-top: 3px;

color: var(--gold-light);

font-size: 10px;

font-weight: 900;

letter-spacing: 2px;
```

}

.impact-number small {

```
max-width: 130px;

margin-top: 12px;

color: #b9cbc4;

font-size: 9px;

line-height: 1.4;
```

}

.impact-pill {

```
position: absolute;

padding: 9px 13px;

border-radius: 50px;

background: white;

border:
    1px solid
    var(--border);

box-shadow:
    0 10px 25px
    rgba(5,37,30,0.07);

color: var(--green-800);

font-size: 10px;

font-weight: 800;
```

}

.pill-one {

```
top: 65px;

left: 55px;
```

}

.pill-two {

```
right: 45px;

top: 110px;
```

}

.pill-three {

```
right: 70px;

bottom: 65px;
```

}

/* =========================================================
INVESTMENT
========================================================= */

.investment {

```
padding: 115px 0;

background:

    radial-gradient(
        circle at 15% 30%,
        rgba(89,178,145,0.13),
        transparent 28%
    ),

    var(--green-950);

color: white;
```

}

.investment-grid {

```
display: grid;

grid-template-columns:
    0.9fr 1.1fr;

gap: 100px;

align-items: center;
```

}

.investment .section-label {

```
color: #7fc7a8;
```

}

.investment-copy h2 {

```
margin-top: 15px;

color: white;

font-size:
    clamp(
        60px,
        7vw,
        92px
    );

line-height: 0.95;

letter-spacing: -4px;
```

}

.usd {

```
margin-top: 15px;

color: var(--gold-light);

font-size: 15px;

font-weight: 700;
```

}

.investment-copy p {

```
max-width: 500px;

margin-top: 25px;

color: #c7d9d2;

font-size: 16px;
```

}

.investment-button {

```
margin-top: 30px;

background: white;

color: var(--green-950);
```

}

.investment-button:hover {

```
background: var(--gold-light);

color: var(--green-950);
```

}

.fund-use {

```
padding: 30px;

border:
    1px solid
    rgba(255,255,255,0.12);

border-radius: 12px;

background:
    rgba(255,255,255,0.035);
```

}

.fund-use h3 {

```
margin-bottom: 15px;

color: white;

font-size: 19px;
```

}

.fund-item {

```
display: flex;

gap: 17px;

padding: 21px 0;

border-top:
    1px solid
    rgba(255,255,255,0.10);
```

}

.fund-number {

```
width: 37px;
height: 37px;

flex-shrink: 0;

display: grid;

place-items: center;

border-radius: 8px;

background:
    rgba(89,178,145,0.13);

color: #7fc7a8;

font-size: 10px;

font-weight: 900;
```

}

.fund-item strong {

```
display: block;

color: white;

font-size: 14px;
```

}

.fund-item span {

```
display: block;

margin-top: 4px;

color: #91aaa0;

font-size: 11px;

line-height: 1.5;
```

}

/* =========================================================
FOUNDER CTA
========================================================= */

.founder-cta {

```
padding: 110px 0;

text-align: center;

background:

    linear-gradient(
        135deg,
        #e2f2eb,
        #f8faf6
    );
```

}

.founder-cta h2 {

```
max-width: 800px;

margin: 15px auto 0;

color: var(--green-950);

font-size:
    clamp(
        37px,
        4vw,
        55px
    );

line-height: 1.06;

letter-spacing: -2px;
```

}

.founder-cta p {

```
max-width: 670px;

margin: 20px auto 30px;

color: var(--muted);

font-size: 15px;
```

}

/* =========================================================
CONTACT
========================================================= */

.contact {

```
background: white;
```

}

.contact-grid {

```
display: grid;

grid-template-columns:
    0.9fr 1.1fr;

gap: 100px;

align-items: center;
```

}

.contact-copy p {

```
max-width: 520px;

margin-top: 20px;

color: var(--muted);

font-size: 16px;
```

}

.contact-card {

```
padding: 10px 28px;

background: var(--cream);

border:
    1px solid
    var(--border);

border-radius: 10px;
```

}

.contact-item {

```
display: flex;

align-items: center;

gap: 16px;

padding: 19px 0;

border-bottom:
    1px solid
    var(--border);
```

}

.contact-item:last-child {

```
border-bottom: none;
```

}

.contact-icon {

```
width: 42px;
height: 42px;

flex-shrink: 0;

display: grid;

place-items: center;

border-radius: 9px;

background: var(--green-100);

color: var(--green-700);

font-size: 10px;

font-weight: 900;
```

}

.contact-icon.whatsapp {

```
background:
    #e2f5e9;

color:
    #198754;
```

}

.contact-item span {

```
display: block;

color: var(--muted);

font-size: 9px;

font-weight: 900;

text-transform: uppercase;

letter-spacing: 1.1px;
```

}

.contact-item a,
.contact-item strong {

```
display: block;

margin-top: 3px;

color: var(--green-950);

font-size: 15px;

font-weight: 700;

word-break: break-word;
```

}

.contact-item a:hover {

```
color: var(--green-600);
```

}

/* =========================================================
FOOTER
========================================================= */

.footer {

```
padding: 45px 0 20px;

background: #041e18;

color: white;
```

}

.footer-top {

```
display: flex;

align-items: center;

justify-content: space-between;

gap: 40px;

padding-bottom: 30px;

border-bottom:
    1px solid
    rgba(255,255,255,0.09);
```

}

.footer-brand .brand {

```
color: white;
```

}

.footer-brand p {

```
margin-top: 10px;

color: #87a39a;

font-size: 12px;
```

}

.footer-links {

```
display: flex;

flex-wrap: wrap;

gap: 20px;

color: #9eb5ad;

font-size: 11px;

font-weight: 650;
```

}

.footer-links a:hover {

```
color: white;
```

}

.footer-bottom {

```
display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding-top: 18px;

color: #607d73;

font-size: 10px;
```

}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

```
.navigation {
    display: none;
}

.hero-content,
.two-column,
.validation-grid,
.product-grid,
.impact-grid,
.investment-grid,
.contact-grid {

    grid-template-columns: 1fr;

    gap: 55px;
}

.hero {

    min-height: auto;
}

.hero-copy {

    padding-bottom: 20px;
}

.hero-visual {

    min-height: 450px;
}

.metric-grid,
.technology-grid,
.application-grid {

    grid-template-columns:
        repeat(2, 1fr);
}

.business-flow {

    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;
}

.flow-arrow {

    display: none;
}

.contact-grid {

    align-items: start;
}
```

}

@media (max-width: 650px) {

```
.container {

    width: 90%;
}

.nav-cta {

    padding: 9px 11px;

    font-size: 10px;
}

.brand-name strong {

    font-size: 14px;
}

.brand-logo {

    width: 34px;
    height: 34px;
}

.hero h1 {

    font-size: 43px;

    letter-spacing: -2.2px;
}

.hero-lead {

    font-size: 16px;
}

.hero-actions {

    flex-direction: column;

    align-items: stretch;
}

.hero-proof {

    flex-direction: column;

    gap: 15px;
}

.hero-visual {

    min-height: 360px;
}

.orbit-one {

    width: 300px;
    height: 300px;
}

.orbit-two {

    width: 230px;
    height: 230px;
}

.orbit-three {

    width: 160px;
    height: 160px;
}

.material-core {

    width: 165px;
    height: 165px;
}

.material-core strong {

    font-size: 39px;
}

.floating-label {

    transform: scale(0.85);
}

.label-top {

    left: 0;
    top: 40px;
}

.label-bottom {

    right: 0;
    bottom: 40px;
}

.section,
.business-model,
.applications,
.investment,
.founder-cta {

    padding: 75px 0;
}

.metric-grid,
.technology-grid,
.application-grid,
.business-flow,
.validation-results {

    grid-template-columns: 1fr;
}

.metric-card {

    min-height: 240px;
}

.validation-result {

    min-height: 130px;
}

.economic-row {

    grid-template-columns:
        1fr;

    gap: 5px;

    padding: 16px 20px;
}

.header-row {

    display: none;
}

.economic-row strong {

    font-size: 12px;
}

.investment-copy h2 {

    font-size: 63px;

    letter-spacing: -3px;
}

.impact-visual {

    min-height: 350px;
}

.impact-number {

    width: 190px;
    height: 190px;
}

.impact-number strong {

    font-size: 55px;
}

.impact-pill {

    font-size: 8px;

    padding: 7px 10px;
}

.pill-one {

    left: 15px;
    top: 40px;
}

.pill-two {

    right: 15px;
    top: 75px;
}

.pill-three {

    right: 25px;
    bottom: 40px;
}

.footer-top,
.footer-bottom {

    flex-direction: column;

    align-items: flex-start;
}

.footer-links {

    gap: 13px;
}
```

}