:root{
    --bg:#f4efe6;
    --surface:#fbf8f2;
    --surface-2:#f5f0e7;
    --dark:#0e171d;
    --dark-2:#122822;
    --text:#182126;
    --muted:#5f6970;
    --line:rgba(24,33,38,.12);
    --line-dark:rgba(255,255,255,.12);
    --brand:#2f8a63;
    --brand-2:#dd7c38;
    --brand-3:#eec46b;
    --radius:8px;
    --radius-sm:6px;
    --max:1180px;
    --shadow:0 18px 40px rgba(18,24,28,.08);
}

@font-face{
    font-family:"remixicon";
    src:url("assets/fonts/remixicon.woff2") format("woff2");
    font-display:swap;
}

.ri{
    font-family:"remixicon" !important;
    font-size:1em;
    font-style:normal;
    font-weight:400;
    line-height:1;
    display:inline-block;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.ri-checkbox-circle-fill:before{content:"\eb80";}
.ri-close-line:before{content:"\eb99";}
.ri-copyright-line:before{content:"\ebe2";}
.ri-double-quotes-l:before{content:"\ec51";}
.ri-download-line:before{content:"\ec5a";}
.ri-earth-line:before{content:"\ec7a";}
.ri-group-line:before{content:"\ede3";}
.ri-hand-heart-line:before{content:"\edf3";}
.ri-heart-fill:before{content:"\ee0e";}
.ri-information-line:before{content:"\ee59";}
.ri-leaf-line:before{content:"\eea3";}
.ri-menu-line:before{content:"\ef3e";}
.ri-phone-line:before{content:"\efec";}
.ri-recycle-line:before{content:"\f05e";}
.ri-restaurant-2-fill:before{content:"\f081";}
.ri-seedling-line:before{content:"\f0d5";}
.ri-time-line:before{content:"\f20f";}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--text);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(47,138,99,.12), transparent 22%),
        radial-gradient(circle at top right, rgba(221,124,56,.10), transparent 24%),
        linear-gradient(180deg, #f7f3ec 0%, #efe8db 100%);
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(transparent 0 0),
        radial-gradient(circle at 1px 1px, rgba(24,33,38,.05) 1px, transparent 0);
    background-size:auto,18px 18px;
    opacity:.35;
    mix-blend-mode:multiply;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,p{margin:0}

.shell{
    min-height:100vh;
    position:relative;
    overflow:hidden;
}

.wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:0 20px;
}

.nav{
    position:sticky;
    top:0;
    z-index:60;
    backdrop-filter:blur(18px);
    background:rgba(14,23,29,.84);
    border-bottom:1px solid var(--line-dark);
    color:#f7f5ef;
}

.nav-inner{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    letter-spacing:0;
}

.brand-mark{
    width:40px;
    height:40px;
    border-radius:10px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow:0 10px 22px rgba(47,138,99,.28);
    font-size:20px;
}

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

.nav-links{
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
}

.nav-links a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:999px;
    color:rgba(247,245,239,.82);
    transition:background .18s ease,color .18s ease,transform .18s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible{
    background:rgba(255,255,255,.08);
    color:#fff;
    outline:none;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(24,33,38,.12);
    background:rgba(255,255,255,.88);
    color:var(--text);
    cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover,
.btn:focus-visible{
    transform:translateY(-1px);
    box-shadow:var(--shadow);
    outline:none;
}

.btn.primary{
    background:linear-gradient(135deg, var(--brand), #3ba06f);
    color:#fff;
    border-color:transparent;
}

.btn.ghost{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.18);
    color:#fff;
}

.icon{
    display:inline-grid;
    place-items:center;
    font-size:18px;
    line-height:1;
}

.mobile-toggle{
    display:none;
    width:46px;
    height:46px;
    padding:0;
}

.hero{
    padding:42px 0 54px;
    background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.10), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(221,124,56,.18), transparent 20%),
        linear-gradient(135deg, #0d151b 0%, #10261f 48%, #0b1318 100%);
    color:#f8f6ef;
    position:relative;
}

.hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:28px;
    align-items:stretch;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    color:#d4f0df;
    font-size:13px;
    font-weight:700;
}

.hero h1{
    margin-top:18px;
    max-width:9ch;
    font-size:64px;
    line-height:1.05;
    letter-spacing:0;
}

.highlight{
    color:#f1c970;
}

.lede{
    margin-top:16px;
    max-width:36rem;
    font-size:18px;
    line-height:1.8;
    color:rgba(247,245,239,.82);
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
}

.hero-actions .btn{
    background:rgba(255,255,255,.92);
    color:var(--text);
    border-color:transparent;
}

.hero-actions .btn.primary{
    background:linear-gradient(135deg, var(--brand), #39a370);
    color:#fff;
}

.hero-meta{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin-top:28px;
}

.meta{
    padding:14px 16px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
}

.meta strong{
    display:block;
    font-size:24px;
    line-height:1;
    color:#fff;
    margin-bottom:6px;
}

.meta span{
    font-size:13px;
    color:rgba(247,245,239,.75);
}

.hero-aside{
    min-height:100%;
}

.hero-art{
    position:relative;
    min-height:100%;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    background:
        radial-gradient(circle at 24% 20%, rgba(61,179,123,.20), transparent 18%),
        radial-gradient(circle at 80% 25%, rgba(221,124,56,.18), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}

.hero-art::before,
.hero-art::after{
    content:"";
    position:absolute;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
}

.hero-art::before{
    width:280px;
    height:280px;
    right:-110px;
    top:-40px;
    background:rgba(255,255,255,.05);
}

.hero-art::after{
    width:220px;
    height:220px;
    left:-70px;
    bottom:-60px;
    background:rgba(47,138,99,.12);
}

.art-card{
    position:absolute;
    inset:22px;
    z-index:1;
    padding:22px;
    border-radius:var(--radius);
    background:rgba(251,248,242,.96);
    color:var(--text);
    display:grid;
    gap:16px;
    box-shadow:0 28px 60px rgba(0,0,0,.22);
}

.art-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.art-top strong{
    display:block;
    font-size:22px;
    line-height:1.15;
    margin-top:8px;
}

.fine{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(47,138,99,.10);
    color:var(--brand);
    font-size:12px;
    font-weight:700;
}

.route{
    position:relative;
    min-height:170px;
    border-radius:var(--radius);
    background:
        linear-gradient(180deg, #f5efe4, #ede3d3);
    overflow:hidden;
}

.route::before{
    content:"";
    position:absolute;
    inset:50% 24px auto;
    height:2px;
    background:linear-gradient(90deg, rgba(47,138,99,.18), rgba(221,124,56,.28), rgba(47,138,99,.18));
}

.route::after{
    content:"";
    position:absolute;
    left:34px;
    top:38px;
    right:34px;
    bottom:38px;
    border-radius:20px;
    border:1px dashed rgba(24,33,38,.08);
}

.node{
    position:absolute;
    z-index:1;
    width:18px;
    height:18px;
    border-radius:50%;
    border:4px solid #fff;
    box-shadow:0 0 0 1px rgba(24,33,38,.12), 0 8px 18px rgba(24,33,38,.12);
}

.node.start{left:18%;top:34%;background:var(--brand);}
.node.mid{left:49%;top:62%;background:var(--brand-2);}
.node.end{right:18%;top:36%;background:var(--brand-3);}

.node-label{
    position:absolute;
    z-index:1;
    padding:8px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(24,33,38,.08);
    font-size:12px;
    color:var(--text);
}

.node-label.a{left:11%;top:22%;}
.node-label.b{left:43%;top:70%;}
.node-label.c{right:10%;top:24%;}

.service-strip{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
}

.service{
    padding:13px 12px;
    border-radius:var(--radius);
    background:#f4efe6;
    border:1px solid rgba(24,33,38,.08);
}

.service strong{
    display:block;
    font-size:18px;
    margin-bottom:4px;
}

.service span{
    font-size:13px;
    color:var(--muted);
    line-height:1.45;
}

.section{
    padding:36px 0;
}

.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.section-title{
    font-size:30px;
    line-height:1.1;
    letter-spacing:0;
}

.section-sub{
    margin-top:10px;
    max-width:52rem;
    line-height:1.7;
    color:var(--muted);
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}

.feature{
    padding:18px;
    border-radius:var(--radius);
    border:1px solid rgba(24,33,38,.10);
    background:rgba(255,255,255,.78);
    box-shadow:0 10px 24px rgba(18,24,28,.04);
}

.feature .icon{
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(47,138,99,.10);
    color:var(--brand);
    margin-bottom:14px;
    font-size:20px;
}

.feature h3{
    font-size:18px;
    margin-bottom:8px;
}

.feature p{
    line-height:1.7;
    color:var(--muted);
    font-size:14px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}

.stat{
    padding:20px;
    border-radius:var(--radius);
    background:linear-gradient(180deg, #fff, #fbf8f2);
    border:1px solid rgba(24,33,38,.10);
    box-shadow:var(--shadow);
}

.stat strong{
    display:block;
    font-size:34px;
    line-height:1;
    color:var(--brand);
    margin-bottom:8px;
}

.stat span{
    color:var(--muted);
    font-size:14px;
}

.proof{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.proof span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border-radius:999px;
    background:rgba(47,138,99,.10);
    color:var(--brand);
    font-size:13px;
    font-weight:700;
}

.timeline{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}

.step{
    position:relative;
    padding:38px 16px 18px;
    border-radius:var(--radius);
    border:1px solid rgba(24,33,38,.10);
    background:rgba(255,255,255,.78);
}

.step::before{
    content:"";
    position:absolute;
    left:16px;
    top:18px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--brand);
    box-shadow:0 0 0 6px rgba(47,138,99,.12);
}

.step strong{
    display:block;
    font-size:20px;
    margin-bottom:10px;
}

.step p{
    line-height:1.65;
    color:var(--muted);
}

.value{
    display:grid;
    grid-template-columns:1.03fr .97fr;
    gap:14px;
    align-items:stretch;
}

.value-panel,
.quote{
    border-radius:var(--radius);
    border:1px solid rgba(24,33,38,.10);
    background:rgba(255,255,255,.78);
    box-shadow:var(--shadow);
}

.value-panel{
    padding:24px;
}

.value-panel h2{
    font-size:36px;
    margin-bottom:12px;
}

.value-panel p{
    font-size:16px;
    line-height:1.8;
    color:var(--muted);
    max-width:34rem;
}

.value-tags{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.value-tags span{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(221,124,56,.12);
    color:var(--brand-2);
    font-size:13px;
    font-weight:700;
}

.quote{
    padding:24px;
    display:grid;
    gap:18px;
    align-content:start;
    background:
        linear-gradient(180deg, rgba(47,138,99,.10), rgba(255,255,255,.78));
}

.quote .icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:#fff;
    color:var(--brand);
    font-size:22px;
    box-shadow:0 8px 16px rgba(24,33,38,.06);
}

.quote p{
    font-size:22px;
    line-height:1.55;
}

.quote small{
    color:var(--muted);
    font-weight:700;
}

.quote-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.quote-meta div{
    padding:12px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.72);
    border:1px solid rgba(24,33,38,.08);
}

.quote-meta span{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:4px;
}

.quote-meta strong{
    display:block;
    font-size:14px;
    line-height:1.45;
}

.cta{
    padding:44px 0 62px;
}

.cta-box{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:28px;
    border-radius:var(--radius);
    border:1px solid rgba(24,33,38,.10);
    background:
        linear-gradient(135deg, rgba(13,21,27,.96), rgba(16,38,31,.94));
    color:#f7f5ef;
    box-shadow:0 24px 60px rgba(18,24,28,.16);
}

.cta h2{
    font-size:34px;
    margin-bottom:10px;
}

.cta p{
    max-width:40rem;
    line-height:1.75;
    color:rgba(247,245,239,.78);
}

.cta-line{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.cta-line span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font-size:13px;
}

.cta-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:190px;
}

.cta-actions .btn{
    width:100%;
    justify-content:center;
}

.cta-actions .btn.ghost{
    background:rgba(255,255,255,.10);
    color:#fff;
    border-color:rgba(255,255,255,.14);
}

.footer{
    padding:20px 0 34px;
    border-top:1px solid rgba(24,33,38,.10);
    background:rgba(255,255,255,.28);
}

.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

.footer-links{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.footer-links a{
    color:var(--muted);
    padding:6px 0;
}

.footer-links a:hover,
.footer-links a:focus-visible{
    color:var(--text);
    outline:none;
}

.copyright{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
}

.menu-panel{
    display:none;
}

.overlay{
    display:none;
}

.toast{
    position:fixed;
    left:50%;
    bottom:22px;
    transform:translateX(-50%) translateY(16px);
    opacity:0;
    pointer-events:none;
    padding:12px 16px;
    border-radius:999px;
    background:rgba(14,23,29,.94);
    color:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
    transition:opacity .2s ease, transform .2s ease;
    z-index:80;
}

.toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.modal{
    position:fixed;
    inset:0;
    display:none;
    place-items:center;
    padding:20px;
    z-index:90;
    background:rgba(12,16,18,.56);
    backdrop-filter:blur(8px);
}

.modal.show{
    display:grid;
}

.dialog{
    width:min(520px, 100%);
    padding:22px;
    border-radius:var(--radius);
    background:var(--surface);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 30px 60px rgba(0,0,0,.20);
}

.dialog-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.dialog h3{
    font-size:22px;
}

.dialog p{
    margin-top:8px;
    color:var(--muted);
    line-height:1.7;
}

.dialog .actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

[data-count]{
    display:inline-block;
    min-width:5ch;
}

@media (max-width: 980px){
    .hero-grid,
    .value,
    .grid-4,
    .stats,
    .timeline{
        grid-template-columns:1fr 1fr;
    }

    .nav-links{
        display:none;
    }

    .mobile-toggle{
        display:inline-grid;
    }

    .menu-panel{
        display:block;
        position:fixed;
        inset:72px 12px auto 12px;
        z-index:65;
        padding:12px;
        border-radius:var(--radius);
        background:rgba(18,28,33,.98);
        color:#fff;
        border:1px solid rgba(255,255,255,.08);
        box-shadow:var(--shadow);
        transform:translateY(-8px);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease, transform .2s ease;
    }

    .menu-panel.open{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    .menu-panel a{
        display:flex;
        align-items:center;
        gap:10px;
        padding:13px 12px;
        border-radius:var(--radius);
        color:#fff;
    }

    .menu-panel a:hover{
        background:rgba(255,255,255,.08);
    }

    .overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:64;
        background:rgba(0,0,0,.20);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
    }

    .overlay.open{
        opacity:1;
        pointer-events:auto;
    }

    .cta-box{
        flex-direction:column;
    }

    .cta-actions{
        width:100%;
        min-width:0;
        flex-direction:row;
    }
}

@media (max-width: 720px){
    .hero{
        padding-top:34px;
    }

    .hero h1{
        font-size:48px;
        max-width:none;
    }

    .hero-grid,
    .value,
    .grid-4,
    .stats,
    .timeline{
        grid-template-columns:1fr;
    }

    .hero-meta,
    .service-strip,
    .quote-meta{
        grid-template-columns:1fr;
    }

    .cta h2,
    .value-panel h2{
        font-size:28px;
    }

    .art-card{
        inset:14px;
        padding:18px;
    }

    .route{
        min-height:150px;
    }

    .cta-actions{
        flex-direction:column;
    }
}