:root {
  --ink:#091713;
  --deep:#071d17;
  --forest:#123d30;
  --green:#45d17d;
  --sand:#efeee6;
  --paper:#f8f7f1;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit}
em{color:var(--green);font-style:normal}
.section-wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.section-wrap.narrow{width:min(900px,calc(100% - 48px));}
.section-number,.eyebrow,.kicker{margin:0 0 24px;font-size:11px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:#718078}
.site-header{position:fixed;z-index:1000;top:0;left:0;right:0;height:76px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:30px;color:white;background:rgba(5,23,18,.72);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px)}
.brand{text-decoration:none}
.brand-word{font-size:clamp(19px,2vw,27px);font-weight:900;letter-spacing:-.05em}
.brand-word span,.footer-brand span{color:var(--green)}
.desktop-nav{display:flex;align-items:center;gap:clamp(18px,2.5vw,38px)}
.desktop-nav a,.login-link{color:white;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.desktop-nav a{opacity:.72}
.desktop-nav a:hover{opacity:1}
.header-actions{display:flex;align-items:center;gap:18px}
.language-switch{display:flex;align-items:center;gap:7px}
.language-switch button{border:0;padding:4px;background:transparent;color:white;opacity:.45;font-size:11px;font-weight:900;cursor:pointer}
.language-switch button.active{opacity:1}
.language-switch span{width:1px;height:12px;background:rgba(255,255,255,.3)}
.join-small{padding:11px 16px;border-radius:999px;background:var(--green);color:var(--ink);text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.08em}
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:130px clamp(24px,8vw,130px) 90px;background:radial-gradient(circle at 74% 45%,rgba(74,209,126,.16),transparent 22%),radial-gradient(circle at 70% 45%,rgba(62,133,112,.18),transparent 38%),linear-gradient(135deg,#061611 0%,#09271e 48%,#071812 100%);color:white}
.hero::after{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:90px 90px}
.hero-content{position:relative;z-index:5;width:min(720px,70vw)}
.hero .kicker{color:var(--green)}
.hero h1,.join-content h2{margin:0;font-size:clamp(55px,8vw,125px);line-height:.88;letter-spacing:-.07em;font-weight:900}
.hero-copy{max-width:600px;margin:34px 0 0;color:rgba(255,255,255,.72);font-size:clamp(17px,1.6vw,23px);line-height:1.55}
.hero-buttons,.join-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.button{min-height:54px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.11em}
.button-primary{background:var(--green);color:var(--ink)}
.button-ghost{color:white;border:1px solid rgba(255,255,255,.35)}
.hero-earth{position:absolute;right:-8vw;top:50%;width:min(60vw,850px);aspect-ratio:1;transform:translateY(-47%)}
.earth-glow{position:absolute;inset:4%;border-radius:50%;background:rgba(84,223,143,.11);filter:blur(55px)}
.earth-shape{position:absolute;inset:12%;overflow:hidden;border-radius:50%;border:1px solid rgba(169,255,207,.28);box-shadow:inset -60px -30px 100px rgba(0,0,0,.6),inset 40px 15px 80px rgba(92,225,150,.15),0 0 80px rgba(68,209,125,.1);background:radial-gradient(ellipse at 28% 28%,rgba(80,178,120,.5) 0 8%,transparent 9%),radial-gradient(ellipse at 45% 38%,rgba(68,158,108,.4) 0 11%,transparent 12%),radial-gradient(ellipse at 62% 57%,rgba(74,167,110,.35) 0 14%,transparent 15%),radial-gradient(ellipse at 35% 70%,rgba(73,162,112,.35) 0 9%,transparent 10%),radial-gradient(circle at 40% 35%,#164d3e,#0b2b24 55%,#06140f 100%)}
.hero-orbit{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.hero-orbit-one{width:70vw;height:70vw;right:-15vw}
.hero-orbit-two{width:90vw;height:90vw;right:-27vw}
.scroll-cue{position:absolute;z-index:5;bottom:28px;left:clamp(24px,8vw,130px);display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.5);font-size:9px;font-weight:900;letter-spacing:.2em}
.scroll-cue i{width:50px;height:1px;background:rgba(255,255,255,.35)}
.section-dark{padding:120px 0 0;background:#091813;color:white}
.nature-intro h2{margin:0;font-size:clamp(50px,7vw,100px);line-height:.9;letter-spacing:-.06em;font-weight:900}
.large-copy{max-width:720px;margin:36px 0 70px;font-size:clamp(20px,2.3vw,32px);line-height:1.4;color:rgba(255,255,255,.68)}
.nature-grid{display:grid;grid-template-columns:1.25fr .85fr 1fr;height:min(58vw,660px)}
.nature-panel{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;padding:24px}
.nature-panel::before{content:"";position:absolute;inset:0;transition:transform .7s ease}
.nature-panel:hover::before{transform:scale(1.04)}
.nature-ocean::before{background:linear-gradient(to top,rgba(3,21,18,.6),transparent 60%),linear-gradient(165deg,#8ed1d0 0 34%,#278d95 35% 60%,#0b4e59 61%)}
.nature-forest::before{background:linear-gradient(to top,rgba(3,21,18,.7),transparent),radial-gradient(circle at 50% 0,#b4d59d,transparent 35%),repeating-linear-gradient(100deg,#153d29 0 13%,#285d38 14% 25%,#0c2e20 26% 38%)}
.nature-river::before{background:linear-gradient(to top,rgba(3,21,18,.65),transparent),linear-gradient(130deg,#345d35 0 28%,#71a681 29% 42%,#367c83 43% 60%,#173f30 61%)}
.nature-panel span{position:relative;z-index:2;color:white;font-size:11px;font-weight:900;letter-spacing:.18em}
.statement-wrap{padding:90px 0 120px}
.statement-wrap blockquote{margin:0;max-width:930px;font-size:clamp(30px,4vw,60px);line-height:1.08;letter-spacing:-.045em;font-weight:800}
.vision-section{background:var(--paper)}
.split-section{min-height:800px;display:grid;grid-template-columns:130px 1fr}
.split-label{padding:120px 20px;border-right:1px solid #d8dcd7;display:flex;flex-direction:column;align-items:center}
.vertical-word{margin-top:100px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:900;letter-spacing:.3em}
.split-content{width:min(980px,calc(100% - 60px));padding:120px 0 130px 9vw}
.split-content h2{margin:0;font-size:clamp(48px,7vw,100px);line-height:.9;letter-spacing:-.06em;font-weight:900}
.split-content .lead{max-width:800px;margin:45px 0 24px;font-size:clamp(22px,2.4vw,34px);line-height:1.4}
.split-content>p:not(.eyebrow):not(.lead){max-width:690px;color:#68756f;font-size:17px;line-height:1.7}
.manifesto{margin-top:70px;padding-top:30px;border-top:1px solid #cfd5d1;display:flex;flex-direction:column;gap:8px;font-size:clamp(24px,3vw,42px);letter-spacing:-.035em}
.manifesto strong{color:#159459}
.mission-section{padding:120px 0;background:#103b2e;color:white}
.section-number.light{color:rgba(255,255,255,.48)}
.mission-heading{display:grid;grid-template-columns:1.4fr .6fr;gap:70px;align-items:end}
.mission-heading h2{margin:0;font-size:clamp(48px,6.5vw,92px);line-height:.9;letter-spacing:-.06em;font-weight:900}
.mission-copy{padding-bottom:8px;color:rgba(255,255,255,.68);font-size:17px;line-height:1.65}
.mission-line{margin-top:90px;display:flex;align-items:center;gap:20px}
.mission-line div{min-width:150px}
.mission-line span{display:block;margin-bottom:9px;color:var(--green);font-size:10px;font-weight:900}
.mission-line strong{font-size:clamp(19px,2vw,29px)}
.mission-line i{flex:1;height:1px;background:rgba(255,255,255,.2)}
.begin-section{position:relative;overflow:hidden;padding:130px 0;background:var(--sand)}
.begin-background{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.begin-word{margin-left:-3vw;color:rgba(8,28,22,.035);font-size:30vw;line-height:.8;font-weight:900;letter-spacing:-.1em}
.begin-content{position:relative}
.begin-content h2{margin:0;font-size:clamp(60px,9vw,130px);line-height:.86;letter-spacing:-.07em;font-weight:900}
.begin-story{width:min(750px,100%);margin:65px 0 0 auto}
.begin-story p{color:#596861;font-size:17px;line-height:1.7}
.begin-story .begin-lead{color:var(--ink);font-size:clamp(22px,2.5vw,34px);line-height:1.45}
.growth{margin:55px 0;padding:32px 0;border-top:1px solid #cdd2ce;border-bottom:1px solid #cdd2ce;display:flex;align-items:center;justify-content:space-between}
.growth div{text-align:center}
.growth strong{display:block;font-size:clamp(35px,4vw,60px)}
.growth span{display:block;margin-top:4px;color:#6f7b75;font-size:9px;font-weight:900;letter-spacing:.15em}
.growth b{color:#9aa49f;font-weight:400}
.start-now{display:block;margin-top:28px;color:#159459;font-size:clamp(28px,4vw,55px);letter-spacing:-.04em}
.how-section{padding:120px 0;background:#fafaf6}
.center-heading{max-width:760px;margin:0 auto 70px;text-align:center}
.center-heading h2{margin:0;font-size:clamp(55px,7vw,100px);line-height:.88;letter-spacing:-.065em;font-weight:900}
.center-heading>p:last-child{max-width:620px;margin:30px auto 0;color:#68756f;font-size:18px;line-height:1.65}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.role-card{position:relative;min-height:520px;padding:45px;overflow:hidden;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start}
.scout-card{background:#0b2c22;color:white}
.collector-card{background:var(--green);color:#082017}
.role-number{position:absolute;right:30px;top:25px;font-size:11px;font-weight:900;opacity:.5}
.role-symbol{width:74px;height:74px;margin-bottom:auto;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:30px}
.role-type{margin:45px 0 8px;font-size:10px;font-weight:900;letter-spacing:.22em;opacity:.6}
.role-card h3{margin:0;font-size:clamp(48px,6vw,82px);line-height:.9;letter-spacing:-.06em}
.role-card>p:not(.role-type){max-width:480px;margin:24px 0;color:inherit;opacity:.7;font-size:16px;line-height:1.6}
.role-card a{margin-top:18px;padding-bottom:6px;border-bottom:1px solid currentColor;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.1em}
.simple-section{padding:120px 0;background:#08231b;color:white}
.simple-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end}
.simple-layout h2{margin:0;font-size:clamp(48px,6.5vw,92px);line-height:.9;letter-spacing:-.06em;font-weight:900}
.simple-items{border-top:1px solid rgba(255,255,255,.18)}
.simple-items div{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:25px}
.simple-items span{color:var(--green);font-size:10px;font-weight:900}
.simple-items strong{font-size:clamp(19px,2vw,28px)}
.simple-final{max-width:900px;margin:80px 0 0;font-size:clamp(28px,4vw,58px);line-height:1.08;letter-spacing:-.045em;font-weight:800}
.community-section{min-height:760px;display:grid;grid-template-columns:1.05fr .95fr;background:#e8e9e2}
.community-visual{position:relative;min-height:600px;overflow:hidden;background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.75),transparent 18%),linear-gradient(145deg,#a7c6ad 0 22%,#4d8465 23% 44%,#244f3c 45% 68%,#153629 69%)}
.community-visual::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:58%;background:radial-gradient(circle at 20% 75%,#102e24 0 7%,transparent 7.5%),radial-gradient(circle at 42% 66%,#1a4534 0 8%,transparent 8.5%),radial-gradient(circle at 64% 76%,#0f3024 0 7%,transparent 7.5%),radial-gradient(circle at 80% 62%,#234f39 0 8%,transparent 8.5%)}
.community-copy{padding:110px clamp(35px,7vw,100px);display:flex;flex-direction:column;justify-content:center}
.community-copy h2{margin:0;font-size:clamp(46px,5.8vw,84px);line-height:.9;letter-spacing:-.06em;font-weight:900}
.community-copy>p:last-child{max-width:570px;margin-top:35px;color:#607069;font-size:18px;line-height:1.7}
.map-teaser{padding:120px 0;background:#f7f7f2}
.map-teaser-head{display:grid;grid-template-columns:1fr .5fr;gap:60px;align-items:end;margin-bottom:60px}
.map-teaser-head h2{margin:0;font-size:clamp(48px,6vw,88px);line-height:.9;letter-spacing:-.06em;font-weight:900}
.map-teaser-head>p{color:#66756e;font-size:17px;line-height:1.7}
.map-preview{position:relative;height:min(60vw,650px);min-height:440px;overflow:hidden;background:#dfe8df;border:1px solid #d1d9d2}
.fake-map-grid{position:absolute;inset:-50px;background-image:linear-gradient(rgba(34,70,54,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(34,70,54,.12) 1px,transparent 1px);background-size:70px 70px;transform:rotate(-8deg) scale(1.2)}
.map-preview::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,transparent 0 10%,rgba(247,247,242,.15) 11%),linear-gradient(130deg,transparent 35%,rgba(28,103,86,.15) 36% 45%,transparent 46%)}
.map-dot{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;font-size:9px;font-weight:900;letter-spacing:.12em}
.map-dot span{width:18px;height:18px;border:4px solid white;border-radius:50%;box-shadow:0 3px 12px rgba(0,0,0,.22)}
.dot-red{left:19%;top:28%}.dot-red span{background:#d94b45}
.dot-orange{right:20%;top:24%}.dot-orange span{background:#d89a24}
.dot-green{right:30%;bottom:21%}.dot-green span{background:#1b9a5a}
.map-center-copy{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,75%);padding:36px;background:rgba(7,29,23,.94);color:white;text-align:center}
.map-center-copy strong{display:block;font-size:clamp(25px,3vw,42px);letter-spacing:-.05em}
.map-center-copy span{display:block;margin-top:5px;color:var(--green);font-size:9px;font-weight:900;letter-spacing:.2em}
.map-center-copy a{display:inline-block;margin-top:28px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.5);text-decoration:none;font-size:10px;font-weight:900;letter-spacing:.1em}
.join-section{position:relative;min-height:88svh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:110px 24px;background:#071c16;color:white;text-align:center}
.join-content{position:relative;z-index:4;width:min(1100px,100%)}
.join-content h2{font-size:clamp(52px,8vw,118px)}
.join-content>p{max-width:600px;margin:35px auto 0;color:rgba(255,255,255,.68);font-size:19px;line-height:1.6}
.join-buttons{justify-content:center}
.button-light{background:white;color:#0a2119}
.button-outline-light{border:1px solid rgba(255,255,255,.38);color:white}
.join-globe{position:absolute;width:min(75vw,900px);aspect-ratio:1;border:1px solid rgba(91,222,144,.14);border-radius:50%;box-shadow:0 0 120px rgba(69,209,125,.08)}
.site-footer{padding:45px clamp(24px,5vw,70px);background:#04110d;color:white;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:35px}
.footer-brand{font-size:24px;font-weight:900;letter-spacing:-.05em}
.site-footer>p{margin:0;color:rgba(255,255,255,.5);font-size:13px}
.footer-links{display:flex;gap:20px}
.footer-links a{color:rgba(255,255,255,.65);text-decoration:none;font-size:11px;font-weight:800}
.site-footer small{grid-column:1/-1;color:rgba(255,255,255,.28);font-size:10px}
@media(max-width:900px){
.desktop-nav{display:none}
.site-header{height:68px;padding:0 18px;gap:12px}
.header-actions{gap:10px}
.login-link{font-size:10px}
.join-small{padding:9px 12px;font-size:9px}
.hero{min-height:100svh;padding:120px 24px 85px;align-items:flex-end}
.hero-content{width:100%}
.hero h1{font-size:clamp(52px,14vw,88px)}
.hero-copy{max-width:90%;font-size:17px}
.hero-earth{width:95vw;right:-35vw;top:34%;opacity:.75}
.hero-orbit-one{width:110vw;height:110vw;right:-45vw}
.hero-orbit-two{width:145vw;height:145vw;right:-65vw}
.scroll-cue{left:24px}
.nature-grid{grid-template-columns:1fr;height:auto}
.nature-panel{min-height:55vw}
.split-section{display:block;min-height:0}
.split-label{display:none}
.split-content{width:min(100% - 48px,900px);margin:0 auto;padding:95px 0}
.mission-heading{grid-template-columns:1fr;gap:35px}
.mission-line{align-items:flex-start;gap:10px}
.mission-line div{min-width:0;flex:1}
.mission-line i{margin-top:22px}
.begin-section,.how-section,.simple-section,.map-teaser{padding:90px 0}
.begin-story{margin-top:45px}
.growth{gap:7px}
.growth strong{font-size:32px}
.growth b{font-size:12px}
.role-grid{grid-template-columns:1fr}
.role-card{min-height:450px;padding:32px}
.simple-layout{grid-template-columns:1fr;gap:55px}
.community-section{grid-template-columns:1fr}
.community-visual{min-height:70vw}
.community-copy{padding:80px 24px}
.map-teaser-head{grid-template-columns:1fr;gap:25px}
.map-preview{height:70svh;min-height:480px}
.join-section{min-height:82svh;padding:90px 24px}
.join-content h2{font-size:clamp(48px,13vw,84px)}
.site-footer{grid-template-columns:1fr;gap:18px}
.site-footer small{grid-column:auto}
}
@media(max-width:520px){
.brand-word{font-size:19px}
.language-switch{gap:3px}
.join-small{display:none}
.hero{padding-left:20px;padding-right:20px}
.hero h1{font-size:15vw}
.hero-buttons{flex-direction:column;align-items:stretch}
.button{width:100%}
.section-wrap,.section-wrap.narrow{width:calc(100% - 40px)}
.nature-panel{min-height:70vw}
.statement-wrap{padding-top:70px;padding-bottom:85px}
.mission-line{display:grid;grid-template-columns:1fr}
.mission-line i{width:100%;margin:3px 0;height:1px}
.growth{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}
.growth strong{font-size:27px}
.growth span{font-size:7px}
.map-dot small{display:none}
.map-center-copy{width:82%;padding:28px 18px}
.footer-links{flex-wrap:wrap}
}

/* MOVE2EARTH OCEAN LIVE IMAGE */
.nature-ocean::before{background:linear-gradient(to top,rgba(3,21,18,.38),rgba(3,21,18,.04) 65%),url("/assets/images/landing/ocean.webp") center center/cover no-repeat}

/* =========================================================
   MOVE2EARTH – ACTIVE LANDING IMAGES V1
   ========================================================= */

.nature-ocean::before {
    background:
        linear-gradient(
            to top,
            rgba(3,21,18,.34),
            rgba(3,21,18,.02) 65%
        ),
        url("/assets/images/landing/active/ocean.webp")
        center center / cover
        no-repeat;
}

.nature-forest::before {
    background:
        linear-gradient(
            to top,
            rgba(3,21,18,.38),
            rgba(3,21,18,.03) 65%
        ),
        url("/assets/images/landing/active/forest.webp")
        center center / cover
        no-repeat;
}

.nature-river::before {
    background:
        linear-gradient(
            to top,
            rgba(3,21,18,.36),
            rgba(3,21,18,.02) 65%
        ),
        url("/assets/images/landing/active/river.webp")
        center center / cover
        no-repeat;
}

.community-visual {
    background:
        linear-gradient(
            90deg,
            rgba(5,25,19,.08),
            rgba(5,25,19,.02)
        ),
        url("/assets/images/landing/active/community.webp")
        center center / cover
        no-repeat;
}

.community-visual::after {
    display: none;
}


/* =========================================================
   MOVE2EARTH – HERO BRAND LOGO V1
   ========================================================= */

.hero-earth {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-earth .earth-shape {
    inset: auto;
    width: 68%;
    height: 68%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
        url("/assets/images/landing/active/brand.webp")
        center center / contain
        no-repeat;
    filter:
        drop-shadow(
            0 28px 45px
            rgba(0,0,0,.24)
        );
}

.hero-earth .earth-glow {
    inset: 15%;
    background:
        radial-gradient(
            circle,
            rgba(69,209,125,.23),
            rgba(45,153,129,.10) 45%,
            transparent 72%
        );
    filter: blur(42px);
}

@media (max-width:900px) {
    .hero-earth .earth-shape {
        width: 72%;
        height: 72%;
    }
}


/* MOVE2EARTH – HERO LOGO POSITION 212PX RIGHT GAP */
@media (min-width:901px) {
    .hero-earth {
        transform:
            translateY(-47%)
            translateX(-159px);
    }
}



/* =========================================================
   MOVE2EARTH – SPOT TO CLEAN STORY V1
   ========================================================= */

.spot-story {
    padding: 130px 0;
    overflow: hidden;
    background: #071d17;
    color: white;
}

.spot-story-head {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 80px;
    align-items: end;
}

.spot-story-head .section-number {
    grid-column: 1 / -1;
    margin-bottom: -20px;
    color: #45d17d;
}

.spot-story h2 {
    margin: 0;
    font-size: clamp(48px,6.2vw,90px);
    line-height: .9;
    letter-spacing: -.06em;
    font-weight: 900;
}

.spot-story h2 em {
    color: #45d17d;
}

.spot-story-intro {
    padding-bottom: 8px;
    color: rgba(255,255,255,.62);
    font-size: 16px;
    line-height: 1.7;
}

.spot-story-lead {
    color: rgba(255,255,255,.9);
    font-size: clamp(18px,1.5vw,22px);
}

.move-flow {
    margin-top: 90px;
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;
    gap: 14px;
    align-items: stretch;
}

.move-step {
    min-width: 0;
    padding: 26px 20px 24px;
    border-top: 1px solid rgba(255,255,255,.2);
}

.move-step-number {
    display: block;
    margin-bottom: 30px;
    color: #45d17d;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .16em;
}

.move-step-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.move-step h3 {
    margin: 0;
    font-size: clamp(21px,1.8vw,30px);
    letter-spacing: -.035em;
}

.move-step p {
    margin: 15px 0 0;
    color: rgba(255,255,255,.54);
    font-size: 13px;
    line-height: 1.55;
}

.move-arrow {
    align-self: center;
    color: rgba(255,255,255,.22);
    font-size: 24px;
}

.spot-proof {
    margin-top: 90px;
    padding-top: 45px;
    border-top: 1px solid rgba(255,255,255,.16);
}

.spot-proof-status {
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(255,255,255,.42);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}

.spot-proof-status i {
    width: 55px;
    height: 1px;
    background: rgba(255,255,255,.22);
}

.spot-proof-status strong {
    color: #45d17d;
}

.spot-proof > p {
    max-width: 1000px;
    margin: 42px 0 0;
    font-size: clamp(31px,4.2vw,62px);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 900;
}

.spot-proof > p em {
    color: #45d17d;
}


@media(max-width:900px) {

    .spot-story {
        padding: 90px 0;
    }

    .spot-story-head {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .spot-story-head .section-number {
        margin-bottom: 0;
    }

    .move-flow {
        margin-top: 65px;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .move-step {
        display: grid;
        grid-template-columns: 55px 1fr;
        column-gap: 18px;
        padding: 25px 0;
    }

    .move-step-number {
        grid-column: 1;
        margin: 0;
    }

    .move-step-icon {
        grid-column: 1;
        width: 42px;
        height: 42px;
        margin: 12px 0 0;
    }

    .move-step h3,
    .move-step p {
        grid-column: 2;
    }

    .move-step h3 {
        grid-row: 1;
    }

    .move-step p {
        grid-row: 2 / span 2;
        margin-top: 10px;
    }

    .move-arrow {
        display: none;
    }

    .spot-proof-status {
        flex-wrap: wrap;
    }
}



/* =========================================================
   MOVE2EARTH – SMARTPHONE MESSAGE V1
   ========================================================= */

.phone-message {
    margin-top: 32px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.16);
    border-bottom: 1px solid rgba(255,255,255,.16);
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    align-items: start;
}

.phone-symbol {
    width: 42px;
    height: 58px;
    border: 2px solid #45d17d;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #45d17d;
    font-size: 0;
}

.phone-symbol::after {
    content: "";
    width: 6px;
    height: 6px;
    align-self: end;
    margin-bottom: 5px;
    border-radius: 50%;
    background: #45d17d;
}

.phone-message strong {
    display: block;
    color: #45d17d;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
}

.phone-message p {
    margin: 8px 0 5px;
    color: rgba(255,255,255,.88);
    font-size: 15px;
    line-height: 1.5;
}

.phone-message small {
    color: rgba(255,255,255,.42);
    font-size: 11px;
    line-height: 1.5;
}

@media(max-width:520px) {

    .phone-message {
        grid-template-columns: 38px 1fr;
        gap: 14px;
    }

    .phone-symbol {
        width: 34px;
        height: 48px;
    }
}



/* =========================================================
   MOVE2EARTH – MOBILE HERO FIX V1
   Desktop bleibt unverändert
   ========================================================= */

@media (max-width:900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .hero {
        width: 100%;
        max-width: 100%;
        min-height: 100svh;
        overflow: hidden;
        padding:
            118px
            24px
            82px;
        align-items: flex-end;
    }

    .hero-content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 100%;
    }

    .hero-earth {
        top: 29%;
        right: -7vw;
        width: 64vw;
        max-width: 520px;
        opacity: .72;
        transform: translateY(-50%);
    }

    .hero-earth .earth-shape {
        width: 78%;
        height: 78%;
    }

    .hero-earth .earth-glow {
        inset: 8%;
    }

    .hero-orbit-one {
        width: 100vw;
        height: 100vw;
        right: -42vw;
    }

    .hero-orbit-two {
        width: 125vw;
        height: 125vw;
        right: -58vw;
    }

    .hero h1 {
        position: relative;
        z-index: 6;
        max-width: 82%;
    }

    .hero-copy {
        position: relative;
        z-index: 6;
        max-width: 92%;
    }

    .hero-buttons {
        position: relative;
        z-index: 6;
    }

    .scroll-cue {
        z-index: 6;
    }
}


@media (max-width:520px) {

    .site-header {
        width: 100%;
        max-width: 100%;
        padding:
            0
            14px;
    }

    .brand-word {
        font-size: 18px;
    }

    .header-actions {
        gap: 7px;
    }

    .language-switch button {
        font-size: 9px;
    }

    .login-link {
        font-size: 9px;
    }

    .hero {
        padding:
            112px
            20px
            78px;
    }

    .hero-earth {
        top: 27%;
        right: -9vw;
        width: 68vw;
    }

    .hero h1 {
        max-width: 88%;
        font-size: 14vw;
        line-height: .9;
    }

    .hero-copy {
        max-width: 100%;
        font-size: 16px;
    }

    .hero-buttons {
        width: 100%;
    }
}



/* =========================================================
   MOVE2EARTH – MOBILE VISION FIX V1
   ========================================================= */

@media (max-width:520px) {

    .vision-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .vision-section .split-content {
        width: calc(100% - 40px);
        max-width: 100%;
        margin:
            0
            auto;
    }

    .vision-section .split-content h2 {
        width: 100%;
        max-width: 100%;
        font-size: 7.8vw;
        line-height: .94;
        letter-spacing: -.055em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .vision-section .split-content .lead {
        width: 100%;
        max-width: 100%;
        font-size: 22px;
        line-height: 1.45;
    }

    .vision-section .split-content > p:not(.eyebrow):not(.lead) {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.65;
    }

}


/* =========================================================
   MOVE2EARTH – PUBLIC LIVE MAP V1
   Öffentliche Read-Only-Karte auf der Landingpage
   ========================================================= */

.public-live-map-wrap {
    position: relative;
    overflow: hidden;
    background: #dfe8e3;
}

.public-live-map {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 620px;
    min-height: 480px;
}

.public-map-controls {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 500;
}

.public-locate-button {
    appearance: none;
    border: 0;
    border-radius: 0;

    padding: 12px 16px;

    background: #173f35;
    color: #ffffff;

    font: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .07em;

    cursor: pointer;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .18);
}

.public-locate-button:hover {
    background: #1b9a5a;
}

.public-locate-button:disabled {
    opacity: .7;
    cursor: wait;
}

.public-map-legend {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 500;

    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;

    max-width:
        calc(100% - 36px);

    padding: 10px 13px;

    background:
        rgba(255, 255, 255, .94);

    color: #173f35;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, .14);
}

.public-map-legend > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.public-map-dot {
    display: inline-block;

    width: 10px;
    height: 10px;

    border-radius: 50%;
}

.public-map-dot.available {
    background: #d94b45;
}

.public-map-dot.claimed {
    background: #d89a24;
}

.public-map-dot.cleaned {
    background: #1b9a5a;
}

.public-zone-box {
    display: inline-block;

    width: 11px;
    height: 11px;

    background: #7657a6;

    opacity: .78;
}

.public-map-status {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 500;

    padding: 9px 12px;

    background:
        rgba(23, 63, 53, .93);

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    pointer-events: none;

    box-shadow:
        0 4px 16px
        rgba(0, 0, 0, .14);
}


/*
 * Leaflet soll innerhalb des bestehenden
 * MOVE2EARTH-Kartenblocks sauber bleiben.
 */
.public-live-map-wrap
.leaflet-container {
    font-family: inherit;
}


/*
 * Mobil bleibt die Karte groß genug,
 * ohne die Landingpage unnötig zu verlängern.
 */
@media (max-width: 760px) {

    .public-live-map {
        height: 500px;
        min-height: 420px;
    }

    .public-map-controls {
        top: 12px;
        right: 12px;
    }

    .public-locate-button {
        padding: 10px 12px;
        font-size: 10px;
    }

    .public-map-status {
        top: 58px;
        left: 12px;

        max-width:
            calc(100% - 24px);
    }

    .public-map-legend {
        left: 12px;
        bottom: 12px;

        max-width:
            calc(100% - 24px);

        gap: 8px 12px;
    }
}


/* =========================================================
   MOVE2EARTH – PUBLIC MAP LAYOUT V2
   Desktop breit / Mobile responsiv
   ========================================================= */

/*
 * Überschrift bleibt im normalen Seitenraster.
 * Nur die eigentliche Karte darf breiter werden.
 */
.map-teaser .public-live-map-wrap {
    width: min(96vw, 1600px);

    margin-left: 50%;
    transform: translateX(-50%);
}


/*
 * Desktop:
 * breite, dominante Karte.
 */
.public-live-map {
    height: min(68vh, 720px);
    min-height: 560px;
}


/*
 * Leaflet Zoom oben links bewusst freihalten.
 *
 * Status sitzt deshalb unterhalb der Zoom-Navigation.
 */
.public-map-status {
    top: 92px;
    left: 18px;
}


/*
 * Standort bleibt oben rechts.
 */
.public-map-controls {
    top: 18px;
    right: 18px;
}


/*
 * Tablet
 */
@media (max-width: 1100px) {

    .map-teaser .public-live-map-wrap {
        width: calc(100vw - 32px);
    }

    .public-live-map {
        height: 620px;
        min-height: 520px;
    }
}


/*
 * Mobile
 */
@media (max-width: 760px) {

    .map-teaser .public-live-map-wrap {
        width: calc(100vw - 20px);
    }

    .public-live-map {
        height: 72svh;
        min-height: 500px;
        max-height: 680px;
    }

    /*
     * Zoom bleibt links oben komplett frei.
     */
    .public-map-status {
        top: 92px;
        left: 12px;

        max-width:
            calc(100% - 24px);
    }

    .public-map-controls {
        top: 12px;
        right: 12px;
    }

    .public-locate-button {
        padding: 10px 11px;

        font-size: 9px;
        letter-spacing: .04em;
    }

    /*
     * Legende darf auf kleinen Displays
     * sauber umbrechen.
     */
    .public-map-legend {
        left: 10px;
        right: 10px;
        bottom: 10px;

        max-width: none;

        gap: 7px 11px;

        padding: 9px 10px;

        font-size: 9px;
    }
}


/*
 * Sehr schmale Smartphones
 */
@media (max-width: 420px) {

    .map-teaser .public-live-map-wrap {
        width: calc(100vw - 12px);
    }

    .public-live-map {
        height: 70svh;
        min-height: 480px;
    }

    .public-locate-button {
        max-width: 150px;
    }

    .public-map-legend {
        font-size: 8px;
    }
}


/* =========================================================
   MOVE2EARTH – PROCESS LABEL SIZE V1
   Mobile Feinabstimmung
   ========================================================= */

@media(max-width:900px) {

    .move-step-number {
        font-size: 12px;
    }

    .spot-proof-status {
        font-size: 11px;
    }
}



/* =========================================================
   IOS PWA SAFE AREA V1
   Nur installierte MOVE2EARTH Web-App
   ========================================================= */

html.m2e-standalone .site-header {
    height:
        calc(
            68px +
            env(safe-area-inset-top)
        );

    padding-top:
        env(safe-area-inset-top);
}


@media(max-width:520px) {

    html.m2e-standalone .site-header {
        height:
            calc(
                68px +
                env(safe-area-inset-top)
            );

        padding-top:
            env(safe-area-inset-top);
    }


    html.m2e-standalone .hero {
        padding-top:
            calc(
                112px +
                env(safe-area-inset-top)
            );
    }

}
