:root {
    --forest:#133e32;
    --deep:#0d2f27;
    --ink:#172c27;
    --mint:#e6eddf;
    --lime:#d6ef55;
    --cream:#f7f6ef;
    --paper:#fffefa;
    --gold:#ceae60;
    --muted:#65746b;
    --line:#e5e7dd;
    --radius:20px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:92px
}
body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
    overflow-x:hidden
}
img {
    display:block;
    max-width:100%
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit;
    cursor:pointer
}
button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid #a9cf39;
    outline-offset:4px
}
h1,h2,h3,p {
    margin-top:0
}
h1,h2,h3 {
    line-height:1.13;
    letter-spacing:-.04em
}
h1,h2 {
    font-weight:780
}
h1 em,h2 em,.end-cta em {
    font-weight:500;
    font-style:italic;
    font-family:Georgia,"Times New Roman",serif;
    letter-spacing:-.05em
}
h2 {
    font-size:clamp(2.1rem,4.4vw,4.35rem)
}
h3 {
    font-size:1.4rem
}
.container {
    width:min(1240px,calc(100% - 64px));
    margin-inline:auto
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border-radius:999px;
    padding:14px 21px;
    font-weight:750;
    line-height:1.2;
    transition:transform .2s,background .2s,box-shadow .2s;
    white-space:nowrap
}
.btn:hover {
    transform:translateY(-2px)
}
.btn-lime {
    background:var(--lime);
    color:#16392f
}
.btn-lime:hover {
    background:#e5fa84;
    box-shadow:0 10px 28px #bce14a30
}
.btn-small {
    font-size:13px;
    padding:12px 20px
}
.btn-big {
    padding:18px 23px;
    font-size:15px
}
.btn-outline-white {
    color:#fff;
    border:1px solid #ffffff71;
    background:#ffffff12
}
.btn-outline-white:hover {
    background:#ffffff25
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#245f49;
    font-weight:770;
    border-bottom:1px solid #8baa69;
    padding-bottom:6px;
    font-size:14px
}
.kicker {
    display:block;
    letter-spacing:.16em;
    font-size:12px;
    font-weight:850;
    color:#5f8450;
    margin-bottom:17px
}
.kicker.light {
    color:#d6ef55
}
.header {
    position:sticky;
    top:0;
    z-index:100;
    background:#ffffffef;
    border-bottom:1px solid #e7ece3;
    backdrop-filter:blur(20px)
}
.nav-inner {
    min-height:86px;
    display:flex;
    align-items:center;
    gap:34px
}
.brand {
    display:flex;
    gap:8px;
    align-items:center;
    flex:none
}
.brand img {
    width:54px;
    height:54px;
    object-fit:contain
}
.brand span {
    font-size:17px;
    font-weight:850;
    color:#1b3529;
    line-height:1.04;
    letter-spacing:-.035em;
    display:flex;
    flex-direction:column
}
.nav-links {
    display:flex;
    align-items:center;
    gap:28px;
    margin-left:auto
}
.nav-links a {
    font-size:13.5px;
    font-weight:700;
    color:#405448
}
.nav-links a:hover,.login:hover {
    color:#7d9d34
}
.nav-actions {
    display:flex;
    align-items:center;
    gap:19px
}
.login {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#41554a;
    font-size:13px;
    font-weight:700
}
.hamburger {
    display:none;
    border:0;
    background:none;
    padding:10px;
    margin-left:auto
}
.mobile-nav {
    display:none
}
.hero {
    background:#113a2e;
    color:#fff;
    position:relative;
    overflow:hidden
}
.hero-photography {
    position:absolute;
    inset:0;
    opacity:.14;
    background:url('img/zeytin-dali.webp') center/cover;
    filter:saturate(.8)
}
.hero:after {
    content:'';
    position:absolute;
    width:600px;
    height:600px;
    background:#d6ef5511;
    border-radius:50%;
    filter:blur(80px);
    left:-300px;
    bottom:-280px
}
.hero-grid {
    display:grid;
    grid-template-columns:1.07fr .93fr;
    min-height:670px;
    align-items:center;
    gap:4%;
    position:relative;
    z-index:1;
    padding-block:75px 82px
}
.hero-copy {
    max-width:710px
}
.eyebrow {
    display:inline-flex;
    gap:10px;
    align-items:center;
    border:1px solid #ffffff3c;
    background:#ffffff10;
    padding:8px 14px;
    color:#d9edca;
    font-weight:750;
    font-size:11px;
    letter-spacing:.12em;
    border-radius:30px
}
.ping {
    width:7px;
    height:7px;
    border-radius:100%;
    background:var(--lime);
    box-shadow:0 0 0 5px #d6ef5520
}
.hero h1 {
    font-size:clamp(3.3rem,5.2vw,6.35rem);
    line-height:1.085;
    margin:25px 0 25px;
    letter-spacing:-.065em;
    white-space:nowrap
}
.hero h1 em {
    display:block;
    color:var(--lime);
    font-size:.83em;
    font-weight:400;
    white-space:normal
}
.hero-copy>p {
    max-width:580px;
    font-size:clamp(16px,1.45vw,19px);
    line-height:1.7;
    color:#d7e1db;
    margin-bottom:32px
}
.hero-actions {
    display:flex;
    gap:13px;
    flex-wrap:wrap
}
.hero-checks {
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    margin-top:34px;
    color:#c1d8ca;
    font-size:12.5px;
    font-weight:600
}
.hero-checks span {
    display:flex;
    align-items:center;
    gap:6px
}
.hero-checks svg {
    color:var(--lime)
}
.hero-art {
    position:relative;
    padding:12px 0 10px 28px
}
.hero-photo {
    position:relative;
    height:555px;
    border-radius:210px 210px 26px 26px;
    overflow:hidden;
    box-shadow:0 28px 70px #071d1655;
    border:7px solid #ffffff16
}
.hero-photo>img {
    width:100%;
    height:100%;
    object-fit:cover
}
.hero-photo:after {
    content:'';
    inset:0;
    position:absolute;
    background:linear-gradient(180deg,transparent 38%,#081d17ac 100%)
}
.hero-quote {
    position:absolute;
    bottom:45px;
    left:35px;
    right:20px;
    z-index:1;
    font-family:Georgia,serif;
    font-style:italic;
    color:#fff;
    font-size:clamp(26px,3vw,40px);
    font-weight:400;
    line-height:1.13;
    letter-spacing:-.04em
}
.hero-floating {
    position:absolute;
    right:-15px;
    top:58%;
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 20px 40px #071d1655;
    padding:15px 18px;
    color:#193b2e;
    z-index:4
}
.mini-icon {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border-radius:12px;
    background:#e5f1bd
}
.hero-floating strong,.hero-floating small {
    display:block
}
.hero-floating strong {
    font-size:18px
}
.hero-floating small {
    color:#647768;
    font-size:11px
}
.hero-tail {
    position:relative;
    z-index:1;
    background:#d6ef55;
    color:#173727
}
.hero-tail .container {
    display:flex;
    align-items:center;
    gap:14px;
    padding-block:17px
}
.hero-tail span {
    font-weight:550
}
.hero-tail b {
    font-weight:850
}
.hero-tail i {
    margin-left:auto;
    font-style:normal;
    font-size:11px;
    font-weight:850;
    letter-spacing:.14em
}
.section-heading {
    margin-bottom:45px
}
.section-heading h2 {
    margin:0
}
.section-heading p {
    color:#68786d;
    max-width:560px;
    line-height:1.75;
    margin:18px 0 0
}
.section-heading.centered {
    text-align:center
}
.section-heading.centered p {
    margin:18px auto 0
}
.intro-section {
    padding:110px 0 105px;
    background:#fbfaf5
}
.showcase {
    max-width:1090px;
    margin:auto;
    position:relative
}
.showcase-glow {
    position:absolute;
    inset:12% -4% -2%;
    background:#c7e6a6;
    filter:blur(80px);
    opacity:.4
}
.dash-window {
    background:#fff;
    position:relative;
    z-index:1;
    border:9px solid #25392f;
    border-radius:21px;
    overflow:hidden;
    box-shadow:0 26px 75px #102a2540
}
.browser-bar {
    background:#203c32;
    color:#b7d0c1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:12px 16px;
    font-size:11px;
    font-weight:650
}
.browser-dots {
    display:flex;
    gap:6px
}
.browser-dots i {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#a3c097
}
.browser-dots i:first-child {
    background:#e4aa82
}
.browser-dots i:nth-child(2) {
    background:#e7d187
}
.browser-secure {
    color:#d9ee91
}
.dash-layout {
    display:grid;
    grid-template-columns:190px 1fr;
    min-height:470px
}
.dash-side {
    background:linear-gradient(160deg,#0e877c,#0eaca0);
    padding:20px 16px;
    color:#fff
}
.dash-logo {
    font-size:12px;
    display:flex;
    align-items:center;
    gap:9px;
    line-height:1.2;
    margin-bottom:33px
}
.dash-logo b {
    font-size:13px
}
.dash-menu {
    display:flex;
    flex-direction:column;
    gap:7px
}
.dash-menu span {
    font-size:12px;
    padding:11px;
    border-radius:9px;
    color:#e8f4ef
}
.dash-menu .dash-selected {
    background:#ffffff36;
    font-weight:800
}
.dash-main {
    background:#f5f6fa;
    padding:26px
}
.dash-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:20px
}
.dash-top small,.dash-top strong {
    display:block
}
.dash-top small {
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    color:#86939f
}
.dash-top strong {
    font-size:20px;
    color:#233446
}
.dash-profile {
    background:#e5ebf3;
    border-radius:30px;
    padding:7px 12px;
    font-size:11px;
    font-weight:800;
    color:#50627a
}
.dash-stat-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px
}
.dash-stat {
    background:#fff;
    border:1px solid #e9eef3;
    box-shadow:0 2px 4px #102a2510;
    border-radius:12px;
    padding:17px 12px
}
.dash-stat>span {
    color:#8794a4;
    font-size:11px;
    font-weight:650;
    display:block
}
.dash-stat b {
    font-size:clamp(15px,2vw,24px);
    color:#182b42;
    display:block;
    line-height:1.4;
    margin:5px 0
}
.dash-stat b small {
    font-size:11px
}
.dash-stat em {
    font-style:normal;
    font-size:10px;
    color:#16a59b
}
.dash-bottom {
    display:grid;
    grid-template-columns:1.35fr .8fr;
    gap:12px;
    margin-top:12px
}
.dash-panel {
    background:#fff;
    border-radius:13px;
    border:1px solid #e8edf2;
    padding:18px
}
.dash-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:15px
}
.dash-panel-head b {
    font-size:13px;
    color:#28394a
}
.dash-panel-head small {
    font-size:10px;
    color:#95a2b0
}
.bars {
    height:132px;
    display:flex;
    align-items:end;
    justify-content:space-around;
    border-bottom:1px solid #e6edf1;
    background:repeating-linear-gradient(to top,#edf1f4 0,#edf1f4 1px,transparent 1px,transparent 33px)
}
.bars i {
    width:8%;
    background:linear-gradient(0deg,#0cae9a,#6cdbbd);
    border-radius:5px 5px 0 0
}
.week {
    display:flex;
    justify-content:space-around;
    margin-top:5px;
    font-size:9px;
    color:#929eac
}
.dash-list>div:not(:first-child) {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #edf1f3;
    padding:14px 0;
    font-size:12px;
    color:#6b7c8f
}
.dash-list b {
    color:#283849
}
.dot {
    width:7px;
    height:7px;
    display:inline-block;
    border-radius:50%;
    margin-left:5px;
    background:#e4aa51
}
.dot.green {
    background:#1baa91
}
.dot.blue {
    background:#6a94c9
}
.under-dashboard {
    max-width:1090px;
    margin:24px auto 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:13px;
    color:#64746d
}
.under-dashboard b {
    color:#24453a
}
.challenges {
    padding:102px 0;
    background:#eef1e6
}
.split-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:35px
}
.split-heading p {
    max-width:400px
}
.problem-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.problem {
    background:#fff;
    border:1px solid #dfe5d8;
    border-radius:22px;
    padding:32px 28px;
    position:relative;
    min-height:290px;
    transition:transform .2s
}
.problem:hover {
    transform:translateY(-5px)
}
.problem>span {
    color:#759376;
    font-size:11px;
    letter-spacing:.13em;
    font-weight:850
}
.problem h3 {
    font-size:24px;
    margin:35px 0 13px;
    max-width:310px
}
.problem p {
    color:#758379;
    font-size:14px;
    max-width:290px;
    line-height:1.6
}
.problem>svg {
    position:absolute;
    top:28px;
    right:25px;
    color:#95b089
}
.process-section {
    background:#fcfbf6;
    padding:105px 0
}
.process-grid {
    display:grid;
    grid-template-columns:.45fr 1fr;
    gap:34px
}
.process-menu {
    border-top:1px solid #dfe4da
}
.process-tab {
    background:transparent;
    border:0;
    border-bottom:1px solid #dfe4da;
    padding:26px 16px 26px 8px;
    color:#3f5245;
    display:flex;
    align-items:center;
    gap:19px;
    text-align:left;
    width:100%;
    transition:background .2s
}
.process-tab span {
    font-size:11px;
    font-weight:800;
    color:#819185
}
.process-tab b {
    font-size:19px;
    font-weight:720;
    flex:1
}
.process-tab svg {
    opacity:.3
}
.process-tab.is-active {
    background:#e9f0d9;
    color:#193e31;
    border-radius:12px;
    padding-inline:20px
}
.process-tab.is-active svg {
    opacity:1
}
.process-view {
    min-height:560px;
    position:relative;
    border-radius:24px;
    overflow:hidden;
    background:#182c22
}
.process-view>img {
    width:100%;
    height:100%;
    position:absolute;
    object-fit:cover
}
.process-view:after {
    content:'';
    position:absolute;
    inset:20% 0 0;
    background:linear-gradient(transparent,#09281ecc)
}
.process-overlay {
    position:absolute;
    z-index:2;
    bottom:0;
    color:#fff;
    padding:37px 43px;
    max-width:650px
}
.process-overlay>span {
    color:var(--lime);
    font-size:12px;
    letter-spacing:.14em;
    font-weight:850
}
.process-overlay h3 {
    font-size:clamp(25px,3.5vw,39px);
    margin:14px 0
}
.process-overlay p {
    font-size:15px;
    color:#e1e9e2;
    max-width:560px
}
.process-overlay>a {
    display:inline-flex;
    gap:10px;
    align-items:center;
    color:#e0f55e;
    font-weight:750;
    margin-top:5px
}
.role-section {
    background:#edf0e7;
    padding:105px 0
}
.role-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:21px
}
.role-card {
    border-radius:25px;
    overflow:hidden;
    min-height:565px;
    display:flex;
    flex-direction:column;
    position:relative;
    background:#174534;
    color:#fff
}
.role-card.role-accounting {
    background:#eadcbf;
    color:#29372b
}
.role-content {
    padding:38px 42px;
    position:relative;
    z-index:2
}
.eyebrow-mini {
    font-weight:850;
    color:#b9dc76;
    font-size:11px;
    letter-spacing:.14em
}
.role-accounting .eyebrow-mini {
    color:#6d8155
}
.role-card h3 {
    font-size:clamp(30px,3.4vw,45px);
    margin:18px 0 14px
}
.role-card p {
    font-size:14.5px;
    color:#d8e7da;
    max-width:450px
}
.role-accounting p {
    color:#566453
}
.role-card ul {
    padding:0;
    list-style:none;
    margin:20px 0 0;
    display:grid;
    gap:8px;
    font-size:13.5px;
    font-weight:650
}
.role-card li {
    display:flex;
    gap:9px;
    align-items:center
}
.role-card li svg {
    color:#d5ed67
}
.role-accounting li svg {
    color:#54723b
}
.role-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid currentColor;
    margin-top:24px;
    font-size:14px;
    font-weight:800;
    padding-bottom:5px
}
.role-card>img {
    width:100%;
    height:190px;
    position:absolute;
    bottom:0;
    object-fit:cover;
    object-position:center 55%;
    opacity:.83
}
.role-card:after {
    content:'';
    position:absolute;
    inset:55% 0 0;
    background:linear-gradient(#174534,#17453422)
}
.role-accounting:after {
    background:linear-gradient(#eadcbf,#eadcbf11)
}
.value-section {
    padding:100px 0;
    background:#133c30;
    color:#fff;
    background-image:radial-gradient(#72927040 1px,transparent 1px);
    background-size:22px 22px
}
.value-grid {
    display:grid;
    grid-template-columns:1.05fr .65fr;
    align-items:center;
    gap:95px
}
.value-section h2 {
    margin:0 0 20px
}
.value-section p {
    color:#cddcd0;
    max-width:570px;
    line-height:1.8
}
.value-section .btn {
    margin-top:20px
}
.value-stat {
    border:1px solid #ffffff40;
    border-radius:26px;
    padding:40px;
    background:#ffffff12;
    backdrop-filter:blur(20px)
}
.value-stat>strong {
    font-size:clamp(62px,8vw,108px);
    font-weight:880;
    display:block;
    line-height:1.05;
    letter-spacing:-.065em;
    color:#d6ef55
}
.value-stat>strong span {
    font-size:.7em
}
.value-stat>b {
    font-size:28px;
    color:#fff;
    display:block;
    margin-top:5px
}
.value-stat p {
    font-size:13px;
    margin-top:12px
}
.value-note {
    background:#d6ef55;
    color:#1d3f30;
    display:inline-block;
    border-radius:99px;
    font-size:12px;
    font-weight:800;
    padding:9px 13px;
    margin-top:17px
}
.blog-preview,.blog-archive,.related-posts {
    padding:100px 0;
    background:#fcfbf6
}
.blog-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:23px
}
.blog-card {
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #e4e8de;
    transition:transform .22s,box-shadow .22s;
    height:100%
}
.blog-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 45px #1f3e2c18
}
.blog-pic {
    position:relative;
    overflow:hidden;
    aspect-ratio:1.52
}
.blog-pic img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s
}
.blog-card:hover .blog-pic img {
    transform:scale(1.045)
}
.blog-tag {
    position:absolute;
    bottom:14px;
    left:15px;
    background:#fff;
    border-radius:40px;
    padding:6px 13px;
    font-size:11px;
    font-weight:800
}
.blog-info {
    padding:23px 25px 26px;
    display:flex;
    flex-direction:column;
    flex:1
}
.blog-date {
    font-size:11px;
    color:#78907c;
    font-weight:750;
    margin-bottom:10px
}
.blog-info h3 {
    font-size:21px;
    line-height:1.24;
    letter-spacing:-.03em;
    margin-bottom:12px
}
.blog-info>p:not(.blog-date) {
    color:#6d7b71;
    font-size:13px;
    line-height:1.65
}
.blog-link {
    font-weight:800;
    font-size:13px;
    color:#2b6544;
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    padding-top:20px
}
.faq-section {
    padding:100px 0;
    background:#edf1e6
}
.faq-grid {
    display:grid;
    grid-template-columns:.8fr 1fr;
    gap:90px
}
.faq-list details {
    border-bottom:1px solid #cad5c5;
    padding:22px 0
}
.faq-list details:first-child {
    border-top:1px solid #cad5c5
}
.faq-list summary {
    cursor:pointer;
    font-weight:800;
    list-style:none;
    padding-right:32px;
    position:relative
}
.faq-list summary::after {
    content:'+';
    position:absolute;
    right:4px;
    top:-8px;
    font-size:26px;
    font-weight:400
}
.faq-list details[open] summary::after {
    content:'−'
}
.faq-list p {
    font-size:14px;
    color:#677c69;
    margin:13px 0 0;
    max-width:600px
}
.end-cta {
    background:#dbeed2;
    position:relative;
    overflow:hidden;
    padding:85px 0
}
.end-cta:after {
    content:'';
    position:absolute;
    right:-110px;
    top:-80px;
    width:500px;
    height:500px;
    border:90px solid #c7e7b0;
    border-radius:50%;
    opacity:.75
}
.end-content {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:50px;
    position:relative;
    z-index:1
}
.end-content span {
    font-size:12px;
    font-weight:850;
    letter-spacing:.14em;
    color:#567654
}
.end-content h2 {
    font-size:clamp(2.2rem,4vw,4rem);
    margin:15px 0
}
.end-content p {
    max-width:560px;
    margin:0;
    color:#536d56
}
.end-actions {
    display:flex;
    flex-direction:column;
    align-items:start;
    gap:20px
}
.end-actions>a:not(.btn) {
    display:flex;
    gap:9px;
    align-items:center;
    font-weight:750;
    border-bottom:1px solid currentColor
}
.footer {
    background:#102f27;
    color:#fff;
    padding:66px 0 20px
}
.footer-main {
    display:grid;
    grid-template-columns:1.4fr .8fr .9fr 1fr;
    gap:50px
}
.footer-brand {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:22px;
    line-height:1.03;
    font-weight:850;
    letter-spacing:-.03em
}
.footer-brand img {
    width:64px;
    height:64px;
    object-fit:contain
}
.footer-main p {
    font-size:13px;
    color:#bad0c1;
    line-height:1.8;
    margin:18px 0
}
.footer-main small {
    color:#9aae9f
}
.footer-main>div:not(:first-child)>b {
    display:block;
    font-size:14px;
    margin-bottom:19px
}
.footer-main>div:not(:first-child)>a:not(.btn) {
    display:block;
    font-size:13px;
    margin-bottom:11px;
    color:#ccdad0
}
.footer-main a:hover {
    color:#e4f883
}
.footer-cta {
    background:#ffffff0e;
    border-radius:17px;
    padding:23px
}
.footer-cta .btn {
    color:#183c30;
    font-size:12px;
    padding:12px 14px;
    white-space:normal;
    text-align:center
}
.footer-cta span {
    display:block;
    margin-top:12px;
    font-size:11px;
    color:#b1c5b6
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #ffffff22;
    margin-top:57px;
    padding-top:20px;
    gap:20px;
    color:#adc3b2;
    font-size:11px
}
.float-wa {
    position:fixed;
    bottom:22px;
    right:22px;
    z-index:90;
    background:#d6ef55;
    border:2px solid #fff;
    color:#113b2b;
    border-radius:50px;
    padding:13px;
    display:flex;
    gap:9px;
    align-items:center;
    box-shadow:0 11px 35px #112d2950;
    font-size:12px;
    font-weight:850
}
.float-wa span {
    padding-right:7px
}
.subhero {
    position:relative;
    background:var(--deep);
    color:#fff;
    padding:94px 0 95px;
    overflow:hidden
}
.subhero:after {
    content:'';
    position:absolute;
    width:620px;
    height:620px;
    background:url('img/zeytin-dali.webp') center/cover;
    right:-120px;
    top:-150px;
    opacity:.18;
    mask-image:linear-gradient(to right,transparent,#000)
}
.subhero-inner {
    position:relative;
    z-index:1
}
.subhero h1 {
    font-size:clamp(3rem,6vw,6rem);
    margin:0 0 21px
}
.subhero h1 em {
    color:var(--lime)
}
.subhero p {
    max-width:680px;
    color:#d5e3d7;
    font-size:18px
}
.subhero .btn {
    margin-top:15px
}
.feature-list {
    padding:92px 0
}
.module-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.module-card {
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    border:1px solid #e6e9e0
}
.module-card>img {
    height:235px;
    object-fit:cover;
    width:100%
}
.module-card>div {
    padding:29px
}
.module-icon {
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#e7f4d3;
    color:#345d31
}
.module-card h3 {
    margin:20px 0 12px
}
.module-card p {
    font-size:14px;
    color:#718073
}
.archive-top {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:25px;
    margin-bottom:36px
}
.archive-top h2 {
    font-size:36px;
    margin:0
}
.filter-wrap {
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
.filter {
    padding:9px 13px;
    background:#e9eee4;
    border:0;
    border-radius:40px;
    color:#455c48;
    font-size:12px;
    font-weight:780
}
.filter.is-active {
    background:#214a37;
    color:white
}
.archive-grid {
    row-gap:26px
}
.filter-item[hidden] {
    display:none
}
.empty-blogs {
    color:#68766c
}
.article-hero {
    background:var(--deep);
    color:white;
    padding:85px 0 120px
}
.article-hero h1 {
    max-width:950px;
    font-size:clamp(2.7rem,5vw,5rem);
    margin-bottom:20px
}
.article-hero p {
    max-width:760px;
    font-size:19px;
    color:#d9e4dc
}
.breadcrumbs {
    font-size:12px;
    color:#c0d1c4;
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:55px
}
.breadcrumbs a {
    text-decoration:underline;
    text-underline-offset:3px
}
.article-date {
    color:#d5ed94;
    font-weight:750;
    font-size:12px
}
.article-image-wrap {
    margin-top:-70px;
    position:relative;
    z-index:1
}
.article-image-wrap img {
    width:100%;
    height:410px;
    object-fit:cover;
    border-radius:22px
}
.article-layout {
    display:grid;
    grid-template-columns:1fr 290px;
    gap:90px;
    align-items:start;
    padding-top:65px;
    padding-bottom:90px
}
.article-prose {
    max-width:810px;
    font-size:16.5px;
    line-height:1.95;
    color:#3b4c41
}
.article-prose p {
    margin:0 0 22px
}
.article-prose h2 {
    font-size:28px;
    margin:39px 0 16px;
    color:#143f2f
}
.article-prose ul {
    padding-left:25px
}
.article-prose a:not(.btn) {
    text-decoration:underline
}
.article-signoff {
    background:#e5eedb;
    padding:33px;
    border-radius:20px;
    margin-top:42px
}
.article-signoff h3 {
    margin:0 0 12px
}
.article-signoff p {
    font-size:14px
}
.article-aside {
    position:sticky;
    top:110px
}
.aside-card {
    background:#184b37;
    border-radius:19px;
    padding:26px;
    color:white
}
.aside-card span {
    color:var(--lime);
    font-size:10px;
    letter-spacing:.14em;
    font-weight:850
}
.aside-card b {
    display:block;
    font-size:23px;
    line-height:1.3;
    margin-top:15px
}
.aside-card p {
    font-size:13px;
    color:#c8dbcc;
    margin-top:14px
}
.aside-card a {
    display:flex;
    align-items:center;
    gap:9px;
    color:#daed69;
    font-weight:770;
    font-size:13px
}
.aside-help {
    padding:25px 5px
}
.aside-help b {
    display:block;
    font-size:14px;
    margin-bottom:12px
}
.aside-help a {
    display:flex;
    gap:7px;
    align-items:center;
    font-size:13px;
    color:#306b49
}
.related-posts {
    background:#edf1e6
}
.contact-section {
    padding:100px 0
}
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px
}
.contact-intro h2 {
    font-size:45px
}
.contact-intro p {
    color:#5f7466
}
.contact-intro>img {
    margin-top:30px;
    border-radius:20px;
    height:260px;
    width:100%;
    object-fit:cover
}
.contact-options {
    display:grid;
    gap:14px;
    align-content:start
}
.contact-option {
    background:#fff;
    display:flex;
    align-items:center;
    padding:24px;
    gap:18px;
    border:1px solid #e0e7dc;
    border-radius:19px
}
.contact-option>span {
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    background:#e2eed7;
    color:#27583b;
    border-radius:15px;
    flex:none
}
.contact-option>div {
    flex:1
}
.contact-option b {
    display:block;
    font-size:18px
}
.contact-option p {
    font-size:13px;
    color:#68776c;
    margin:5px 0 0
}
.contact-option>svg {
    color:#72906c
}
.contact-address {
    background:#e5ede0;
    border-radius:19px;
    padding:24px
}
.contact-address p {
    font-size:13px;
    color:#65776a;
    margin:8px 0 0
}
.legal-section {
    padding:90px 0
}
.legal-section .container {
    max-width:850px
}
.legal-section h2 {
    font-size:25px;
    margin:28px 0 10px
}
.legal-section p {
    color:#5d7062
}
.legal-section a {
    text-decoration:underline
}
.not-found {
    text-align:center;
    padding:160px 24px;
    min-height:60vh
}
.not-found h1 {
    font-size:45px
}
.not-found p {
    color:#637668
}
@media(max-width:1190px) {
    .nav-links {
        gap:15px
    }
    .nav-inner {
        gap:12px
    }
    .nav-actions {
        gap:12px
    }
    .hero h1 {
        font-size:clamp(3.4rem,5.5vw,5.5rem)
    }
    .hero-photo {
        height:520px
    }
    .footer-main {
        gap:20px
    }
}
@media(max-width:1000px) {
    .nav-links,.nav-actions {
        display:none
    }
    .hamburger {
        display:block
    }
    .mobile-nav:not([hidden]) {
        display:flex;
        flex-direction:column;
        background:#fff;
        padding:8px 30px 25px;
        border-top:1px solid #e8eae5;
        gap:0
    }
    .mobile-nav>a:not(.btn) {
        padding:12px 4px;
        border-bottom:1px solid #eef0e9;
        font-weight:750
    }
    .mobile-nav .btn {
        margin-top:14px
    }
    .hero-grid {
        min-height:0;
        grid-template-columns:1fr 1fr;
        gap:20px
    }
    .hero h1 {
        font-size:clamp(3rem,5.5vw,4.5rem)
    }
    .hero-photo {
        height:460px
    }
    .hero-art {
        padding-left:0
    }
    .hero-floating {
        right:-4px
    }
    .dash-layout {
        grid-template-columns:140px 1fr
    }
    .dash-stat-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .dash-side {
        padding:18px 10px
    }
    .dash-menu span {
        font-size:10px
    }
    .process-grid {
        grid-template-columns:.65fr 1fr
    }
    .process-view {
        min-height:470px
    }
    .role-content {
        padding:32px
    }
    .role-card {
        min-height:595px
    }
    .footer-main {
        grid-template-columns:1.2fr 1fr;
        gap:35px
    }
    .article-layout {
        gap:35px
    }
    .end-cta:after {
        opacity:.45
    }
}
@media(max-width:740px) {
    .container {
        width:min(100% - 34px,550px)
    }
    .nav-inner {
        min-height:70px
    }
    .brand img {
        width:48px;
        height:48px
    }
    .brand span {
        font-size:16px
    }
    .hero-grid {
        grid-template-columns:1fr;
        padding-block:55px 44px;
        gap:40px
    }
    .hero h1 {
        font-size:clamp(3.2rem,10.5vw,5rem);
        white-space:normal
    }
    .hero h1 em {
        font-size:.91em
    }
    .hero-copy>p {
        font-size:15px
    }
    .hero-actions .btn {
        width:100%;
        white-space:normal;
        text-align:center
    }
    .hero-checks {
        gap:12px
    }
    .hero-art {
        padding:0 17px 0 0;
        max-width:450px
    }
    .hero-photo {
        height:390px;
        border-radius:160px 160px 22px 22px
    }
    .hero-quote {
        font-size:31px;
        bottom:35px;
        left:25px
    }
    .hero-floating {
        right:-9px;
        top:52%;
        padding:10px;
        gap:9px
    }
    .hero-floating strong {
        font-size:14px
    }
    .hero-floating small {
        font-size:10px
    }
    .mini-icon {
        width:36px;
        height:36px
    }
    .hero-tail .container {
        font-size:12px;
        flex-wrap:wrap;
        gap:4px;
        padding-block:13px
    }
    .hero-tail i {
        margin-left:0;
        display:none
    }
    .intro-section,.challenges,.process-section,.role-section,.blog-preview,.faq-section,.blog-archive,.related-posts,.feature-list {
        padding:65px 0
    }
    .section-heading {
        margin-bottom:30px
    }
    .section-heading h2 {
        font-size:clamp(2.25rem,8.5vw,3.2rem)
    }
    .section-heading p {
        font-size:14px
    }
    .kicker {
        font-size:10.5px
    }
    .dash-window {
        border:5px solid #203e34;
        border-radius:13px
    }
    .browser-bar {
        padding:10px;
        font-size:9px
    }
    .browser-secure {
        display:none
    }
    .dash-layout {
        grid-template-columns:49px 1fr;
        min-height:370px
    }
    .dash-side {
        padding:13px 5px
    }
    .dash-logo {
        font-size:18px;
        justify-content:center;
        margin-bottom:27px
    }
    .dash-logo b,.dash-menu span {
        font-size:0
    }
    .dash-menu span {
        height:32px;
        position:relative;
        padding:0;
        text-align:center
    }
    .dash-menu span:before {
        content:'•';
        font-size:16px;
        position:absolute;
        inset:3px;
        color:#ffffffbb
    }
    .dash-main {
        padding:12px
    }
    .dash-top {
        margin-bottom:10px
    }
    .dash-top strong {
        font-size:12px
    }
    .dash-top small {
        font-size:8px
    }
    .dash-profile {
        font-size:8px;
        padding:5px
    }
    .dash-stat-grid {
        gap:5px
    }
    .dash-stat {
        padding:9px 6px;
        border-radius:7px
    }
    .dash-stat>span {
        font-size:8px
    }
    .dash-stat b {
        font-size:15px;
        margin:4px 0
    }
    .dash-stat b small {
        font-size:8px
    }
    .dash-stat em {
        font-size:8px
    }
    .dash-bottom {
        grid-template-columns:1fr;
        gap:6px;
        margin-top:7px
    }
    .dash-panel {
        padding:10px
    }
    .dash-panel-head b {
        font-size:10px
    }
    .dash-panel-head small {
        font-size:8px
    }
    .bars {
        height:100px
    }
    .dash-list {
        display:none
    }
    .under-dashboard {
        display:flex;
        flex-direction:column;
        align-items:start;
        font-size:12px
    }
    .split-heading {
        display:block
    }
    .split-heading p {
        margin-top:15px
    }
    .problem-grid,.blog-grid,.module-grid {
        grid-template-columns:1fr;
        gap:14px
    }
    .problem {
        min-height:225px;
        padding:27px
    }
    .problem h3 {
        margin-top:25px;
        font-size:22px
    }
    .process-grid,.role-grid,.faq-grid,.contact-grid,.article-layout,.value-grid {
        grid-template-columns:1fr;
        gap:25px
    }
    .process-menu {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
        border-top:0
    }
    .process-tab {
        padding:12px!important;
        border:1px solid #e2e7dd;
        border-radius:11px!important;
        gap:8px
    }
    .process-tab span {
        font-size:9px
    }
    .process-tab b {
        font-size:12px
    }
    .process-tab svg {
        display:none
    }
    .process-view {
        min-height:475px
    }
    .process-overlay {
        padding:28px
    }
    .process-overlay h3 {
        font-size:30px
    }
    .role-card {
        min-height:545px
    }
    .role-content {
        padding:28px
    }
    .role-card h3 {
        font-size:33px
    }
    .role-card>img {
        height:185px
    }
    .value-grid {
        gap:40px
    }
    .value-stat {
        padding:29px
    }
    .blog-info h3 {
        font-size:21px
    }
    .archive-top {
        display:block
    }
    .archive-top h2 {
        font-size:29px;
        margin-bottom:20px
    }
    .faq-grid {
        gap:20px
    }
    .end-content {
        display:block
    }
    .end-content h2 {
        font-size:clamp(2.2rem,7vw,3rem)
    }
    .end-actions {
        margin-top:30px
    }
    .footer-main {
        grid-template-columns:1fr 1fr;
        gap:35px
    }
    .footer-main>div:first-child,.footer-cta {
        grid-column:span 2
    }
    .footer-bottom {
        flex-direction:column;
        gap:7px
    }
    .subhero {
        padding:65px 0
    }
    .subhero h1 {
        font-size:3.1rem
    }
    .subhero p {
        font-size:16px
    }
    .module-card>img {
        height:230px
    }
    .article-hero {
        padding:62px 0 95px
    }
    .article-hero h1 {
        font-size:2.65rem
    }
    .article-hero p {
        font-size:15px
    }
    .article-image-wrap {
        margin-top:-58px
    }
    .article-image-wrap img {
        height:260px
    }
    .article-layout {
        padding-top:35px;
        gap:25px
    }
    .article-prose {
        font-size:15px
    }
    .article-prose h2 {
        font-size:24px
    }
    .article-aside {
        position:static
    }
    .contact-intro h2 {
        font-size:35px
    }
    .contact-option {
        padding:18px;
        gap:12px
    }
    .contact-option b {
        font-size:15px
    }
    .contact-option p {
        overflow-wrap:anywhere
    }
    .contact-option>span {
        width:44px;
        height:44px
    }
    .float-wa {
        padding:12px;
        bottom:13px;
        right:13px
    }
    .float-wa span {
        display:none
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    * {
        transition:none!important;
        animation:none!important
    }
}
/* Integrations preview - scoped to prevent conflicts with existing design */
.integration-teaser  {
    padding:90px 0;
    background:#f1f6eb;
    overflow:hidden;
    border-top:1px solid #e4eadb;
    border-bottom:1px solid #e4eadb
}
.integration-inner  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center
}
.integration-text h2  {
    font-family:inherit;
    font-size:clamp(32px,3.6vw,56px);
    line-height:1.14;
    letter-spacing:-.035em;
    color:#123d33;
    margin:14px 0 22px;
    font-weight:800
}
.integration-text h2 em  {
    color:#577f38;
    font-style:normal
}
.integration-text>p  {
    font-size:16px;
    line-height:1.75;
    color:#53615a;
    max-width:560px
}
.integration-actions  {
    display:flex;
    gap:15px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:28px
}
.integration-disclaimer  {
    font-size:12px!important;
    line-height:1.5!important;
    margin-top:22px;
    color:#758178!important
}
.integration-media  {
    background:#0f3b30;
    padding:16px;
    border-radius:24px;
    box-shadow:0 20px 55px rgba(12,51,36,.2)
}
.integration-media img  {
    display:block;
    width:100%;
    height:auto;
    border-radius:12px
}
.article-prose .tech-diagram  {
    margin:30px 0 35px;
    padding:0;
    border:1px solid #e4ebe2;
    border-radius:18px;
    overflow:hidden;
    background:#f3f7f1
}
.article-prose .tech-diagram img  {
    width:100%;
    height:auto;
    display:block
}
.article-prose .tech-diagram figcaption  {
    font-size:13px;
    color:#627368;
    line-height:1.5;
    padding:12px 16px
}
@media (max-width:850px) {
    .integration-teaser {
        padding:60px 0
    }
    .integration-inner {
        grid-template-columns:1fr;
        gap:26px
    }
    .integration-actions {
        align-items:stretch
    }
    .integration-actions .btn {
        justify-content:center
    }
}