:root { --ink:#10251f; --green:#087b65; --green-bright:#16a77f; --mint:#dff8ed; --line:#d9e4df; --muted:#66766f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fbfcfa; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.site-header { height:82px; max-width:1240px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand-mark { width:39px; height:39px; border-radius:12px; display:grid; place-items:center; background:var(--green); color:white; font:800 22px/1 Georgia,serif; box-shadow:inset 0 0 0 1px rgb(255 255 255/.25); }
.brand>span:last-child { display:flex; flex-direction:column; line-height:1.05; }
.brand strong { font:800 19px/1 Arial,sans-serif; letter-spacing:-.5px; }
.brand small { margin-top:4px; color:var(--muted); font:700 9px/1 Arial,sans-serif; letter-spacing:1.5px; text-transform:uppercase; }
.site-header nav { display:flex; gap:34px; color:#40524b; font-size:14px; font-weight:700; }
.site-header nav a:hover { color:var(--green); }
.header-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border:1px solid #b7cbc3; border-radius:99px; font-size:13px; font-weight:800; transition:.2s ease; }
.header-cta:hover { background:var(--ink); color:white; border-color:var(--ink); }

.hero { min-height:700px; padding:80px max(28px,calc((100vw - 1240px)/2)) 100px; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:64px; overflow:hidden; background:radial-gradient(circle at 72% 16%,#d9f7e8 0,transparent 32%),linear-gradient(180deg,#fbfcfa 0%,#f5f8f4 100%); border-bottom:1px solid #e7ece9; }
.hero-copy { max-width:565px; position:relative; z-index:2; }
.eyebrow,.kicker { display:inline-flex; align-items:center; gap:9px; color:var(--green); text-transform:uppercase; letter-spacing:1.8px; font-size:11px; font-weight:900; }
.eyebrow span { width:24px; height:2px; background:var(--green-bright); }
.hero h1 { margin:25px 0 22px; max-width:700px; font:500 clamp(48px,5vw,76px)/.99 Georgia,'Times New Roman',serif; letter-spacing:-3.2px; }
.hero h1 em { color:var(--green); font-style:italic; }
.hero-copy>p { max-width:560px; margin:0; color:#53665e; font-size:18px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { min-height:50px; padding:0 22px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:14px; font-weight:850; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:var(--green); color:white; box-shadow:0 12px 28px rgb(8 123 101/.18); }
.button.primary:hover { background:#066c59; box-shadow:0 16px 34px rgb(8 123 101/.24); }
.button.secondary { border:1px solid #c8d6d0; background:rgb(255 255 255/.7); }
.trust-row { margin-top:30px; display:flex; flex-wrap:wrap; gap:17px; color:#62746c; font-size:11px; font-weight:700; }
.trust-row span { display:flex; align-items:center; gap:5px; }
.trust-row svg { color:var(--green); }

.product-stage { width:min(760px,54vw); border:1px solid #bcd1c8; border-radius:18px; background:white; box-shadow:0 35px 90px rgb(26 65 54/.18),0 4px 16px rgb(26 65 54/.08); overflow:hidden; transform:perspective(1500px) rotateY(-3deg) rotateX(1deg); transform-origin:center; }
.browser-bar { height:47px; padding:0 15px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid #e2eae6; color:#71817a; font-size:10px; font-weight:800; }
.browser-dots { display:flex; gap:6px; }
.browser-dots i { width:8px; height:8px; border-radius:50%; background:#d2dcd8; }
.live-pill { justify-self:end; display:flex; align-items:center; gap:5px; color:#137f66; }
.live-pill i { width:6px; height:6px; border-radius:50%; background:#19b886; box-shadow:0 0 0 4px #dbf7ed; }
.app-shell { min-height:480px; display:grid; grid-template-columns:58px 1fr; background:#f6f9f7; }
.app-sidebar { background:#0e2a23; padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:11px; }
.app-logo { width:31px; height:31px; margin-bottom:18px; border-radius:9px; display:grid; place-items:center; background:#1db58b; color:white; font:800 17px Georgia,serif; }
.app-sidebar button { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#91aaa1; }
.app-sidebar button.active { background:#1d493d; color:#7cf2cc; }
.app-main { padding:26px; }
.app-heading { display:flex; align-items:center; justify-content:space-between; }
.app-heading>div { display:flex; flex-direction:column; gap:5px; }
.app-heading span,.metric-row span,.card-title span { color:#819089; font-size:9px; font-weight:750; }
.app-heading strong { font:500 21px Georgia,serif; }
.app-heading button { height:35px; padding:0 13px; display:flex; align-items:center; gap:6px; border:0; border-radius:8px; background:var(--green); color:white; font-size:9px; font-weight:800; }
.metric-row { margin-top:25px; display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.metric-row>div { min-width:0; padding:16px; display:flex; flex-direction:column; border:1px solid #dee8e3; border-radius:11px; background:white; }
.metric-row strong { margin:8px 0 6px; font:600 25px Georgia,serif; }
.metric-row em { color:#4b9b82; font-size:8px; font-style:normal; font-weight:700; }
.dashboard-grid { margin-top:12px; display:grid; grid-template-columns:1.25fr .9fr; gap:11px; }
.campaign-card,.agenda-card { min-height:190px; padding:17px; border:1px solid #dee8e3; border-radius:11px; background:white; }
.card-title { display:flex; align-items:center; justify-content:space-between; }
.card-title>div { display:flex; flex-direction:column; gap:4px; }
.card-title strong { font-size:11px; }
.card-title .status { padding:5px 8px; border-radius:99px; background:#dff8ed; color:#0b7f64; font-size:7px; }
.progress { height:7px; margin-top:31px; border-radius:99px; overflow:hidden; background:#e8efeb; }
.progress i { display:block; width:65%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0a7c66,#25c898); }
.progress-meta { margin-top:9px; display:flex; justify-content:space-between; color:#7a8b84; font-size:8px; }
.progress-meta strong { color:var(--green); }
.campaign-tags { display:flex; gap:7px; margin-top:26px; }
.campaign-tags span { padding:7px 8px; display:flex; gap:5px; align-items:center; border-radius:6px; background:#f3f7f5; color:#63746d; font-size:7px; font-weight:700; }
.agenda-card>.card-title { margin-bottom:15px; }
.agenda-item { min-height:35px; margin-top:7px; padding:0 8px; display:grid; grid-template-columns:38px 1fr; align-items:center; border-left:3px solid; border-radius:4px; color:#405049; font-size:8px; }
.agenda-item b { color:#1e342c; }
.agenda-item.yellow { border-color:#e0b72e; background:#fff8db; }
.agenda-item.blue { border-color:#667bc6; background:#eef0ff; }
.agenda-item.pink { border-color:#ad1457; background:#fce9f1; }

.proof-strip { max-width:1240px; margin:0 auto; padding:38px 28px; display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.proof-strip div { padding-left:26px; display:flex; flex-direction:column; gap:5px; border-left:1px solid var(--line); }
.proof-strip div:first-child { padding-left:0; border-left:0; }
.proof-strip strong { font:500 24px Georgia,serif; }
.proof-strip span { color:var(--muted); font-size:11px; }
.section { max-width:1240px; margin:0 auto; padding:120px 28px; }
.section-heading { max-width:710px; }
.section-heading h2,.workflow h2,.price-copy h2,.final-cta h2 { margin:18px 0; font:500 clamp(38px,4vw,57px)/1.05 Georgia,serif; letter-spacing:-1.8px; }
.section-heading>p,.workflow-copy>p,.price-copy>p { max-width:610px; color:var(--muted); font-size:16px; line-height:1.7; }
.feature-grid { margin-top:58px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feature-card { min-height:260px; padding:26px; position:relative; border:1px solid var(--line); border-radius:14px; background:white; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.feature-card:hover { transform:translateY(-4px); border-color:#a7cabe; box-shadow:0 18px 45px rgb(24 67 55/.08); }
.feature-index { position:absolute; top:23px; right:25px; color:#b4c2bc; font:600 11px Georgia,serif; }
.feature-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:11px; background:var(--mint); color:var(--green); }
.feature-card h3 { margin:32px 0 12px; font:600 20px Georgia,serif; }
.feature-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }

.workflow { padding:110px max(28px,calc((100vw - 1184px)/2)); display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; background:var(--ink); color:white; }
.kicker.light { color:#72e0bd; }
.workflow-copy p { color:#a9bbb4; }
.workflow-copy>a { margin-top:25px; display:inline-flex; align-items:center; gap:8px; color:#7ae4c1; font-size:13px; font-weight:800; }
.steps { border-top:1px solid #355047; }
.step { min-height:116px; padding:23px 0; display:grid; grid-template-columns:60px 1fr; border-bottom:1px solid #355047; }
.step>span { color:#6c877d; font:italic 17px Georgia,serif; }
.step strong { font:500 20px Georgia,serif; }
.step p { margin:8px 0 0; color:#a9bbb4; font-size:12px; line-height:1.6; }

.product-section { background:#eef5f1; border-top:1px solid #dfe9e4; border-bottom:1px solid #dfe9e4; }
.product-section-inner { max-width:1320px; }
.product-view-grid { margin-top:58px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.product-view { min-width:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid #d3e0da; border-radius:17px; background:white; box-shadow:0 16px 44px rgb(25 65 54/.07); }
.product-view-image { height:270px; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; background:#e8eeeb; border-bottom:1px solid #dbe5e0; }
.product-view-image img { width:100%; height:100%; display:block; object-fit:cover; object-position:top left; }
.product-view:first-child .product-view-image img { object-fit:contain; background:#fff; }
.product-view-copy { padding:24px; }
.product-view-copy>span { color:var(--green); font-size:10px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; }
.product-view-copy h3 { margin:10px 0 9px; font:600 21px Georgia,serif; }
.product-view-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.manual-link { width:max-content; max-width:100%; margin-top:26px; padding:13px 17px; display:flex; align-items:center; gap:8px; border:1px solid #b8ccc3; border-radius:10px; background:white; color:var(--green); font-size:13px; font-weight:850; }
.video-section { max-width:1240px; }
.video-grid { margin-top:54px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.video-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:white; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.video-card:hover { transform:translateY(-4px); border-color:#a7cabe; box-shadow:0 20px 48px rgb(24 67 55/.11); }
.video-thumb { aspect-ratio:16/9; position:relative; overflow:hidden; background:#dbe6e1; }
.video-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.video-thumb:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgb(10 32 26/.36)); }
.video-thumb>span { width:62px; height:62px; position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; background:rgb(255 255 255/.94); color:var(--green); font-size:30px; box-shadow:0 10px 28px rgb(0 0 0/.2); }
.video-copy { padding:23px; display:grid; grid-template-columns:34px 1fr; gap:10px; }
.video-copy small { color:#a5b5ae; font:italic 14px Georgia,serif; }
.video-copy h3 { margin:0; font:600 22px Georgia,serif; }
.video-copy p { min-height:42px; margin:9px 0 18px; color:var(--muted); font-size:12px; line-height:1.65; }
.video-copy strong { display:flex; align-items:center; gap:7px; color:var(--green); font-size:11px; }

.pricing { padding-top:110px; padding-bottom:110px; }
.pricing>.section-heading { margin-bottom:50px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.plan-card { min-height:310px; padding:30px; position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:17px; background:white; }
.plan-card.featured { border:2px solid var(--green); background:linear-gradient(150deg,#effaf5,#fff 60%); box-shadow:0 20px 52px rgb(8 123 101/.13); }
.plan-badge { width:max-content; margin-bottom:17px; padding:6px 9px; border-radius:99px; background:var(--green); color:white; font-size:9px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; }
.plan-card h3 { margin:0; min-height:48px; font:600 23px/1.15 Georgia,serif; }
.plan-price { margin:28px 0 17px; display:flex; align-items:end; gap:7px; }
.plan-price strong { font:500 50px/.8 Georgia,serif; }
.plan-price small { color:var(--muted); font-size:12px; }
.plan-card>p { margin:0 0 26px; color:var(--muted); font-size:13px; line-height:1.6; }
.plan-card>a { margin-top:auto; display:flex; align-items:center; gap:8px; color:var(--green); font-size:12px; font-weight:850; }
.onboarding-card { margin-top:18px; padding:24px 28px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; border:1px solid #d4e2dc; border-radius:16px; background:#eff7f3; }
.onboarding-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:var(--green); color:white; }
.onboarding-card span { color:var(--green); font-size:9px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; }
.onboarding-card h3 { margin:5px 0 5px; font:600 20px Georgia,serif; }
.onboarding-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.onboarding-card>strong { font:500 40px Georgia,serif; }
.price-card { padding:62px; display:grid; grid-template-columns:1fr 350px; align-items:center; gap:80px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(135deg,#f4faf7,#edf5ef); }
.price-copy ul { margin:26px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:13px 22px; list-style:none; }
.price-copy li { display:flex; align-items:center; gap:8px; color:#41564d; font-size:12px; font-weight:750; }
.price-copy li svg { color:var(--green); }
.price-box { padding:35px; display:flex; flex-direction:column; border-radius:16px; background:white; box-shadow:0 18px 50px rgb(25 65 54/.12); }
.price-box>span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.3px; }
.price-box>div { margin-top:18px; display:flex; align-items:end; gap:7px; }
.price-box strong { font:500 56px/.8 Georgia,serif; }
.price-box small { color:var(--muted); font-size:12px; }
.price-box p { color:var(--muted); font-size:12px; }
.price-box .button { margin-top:16px; }
.text-link { margin-top:16px; text-align:center; color:var(--green); font-size:11px; font-weight:800; }
.final-cta { padding:78px max(28px,calc((100vw - 1184px)/2)); display:flex; align-items:center; justify-content:space-between; gap:40px; background:var(--green); color:white; }
.final-cta h2 { margin-bottom:0; font-size:clamp(34px,4vw,50px); }
.button.white { flex:0 0 auto; background:white; color:var(--green); }
.final-actions { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:12px; }
.final-manual { color:white; font-size:12px; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
footer { max-width:1240px; margin:0 auto; padding:42px 28px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; color:var(--muted); font-size:11px; }
.footer-brand .brand-mark { width:34px; height:34px; font-size:18px; }
footer p { text-align:center; }
footer>div { display:flex; gap:18px; }
footer a:hover { color:var(--green); }

@media(max-width:1020px){
  .site-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:60px;gap:60px}.hero-copy{max-width:760px}.product-stage{width:100%;max-width:800px;justify-self:center;transform:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.product-view-grid,.video-grid{grid-template-columns:1fr 1fr}.product-view:last-child,.video-card:last-child{grid-column:span 2}.workflow{grid-template-columns:1fr;gap:55px}.pricing-grid{grid-template-columns:1fr 1fr}.plan-card:last-child{grid-column:span 2}.price-card{grid-template-columns:1fr 310px;gap:40px;padding:45px}
}
@media(max-width:700px){
  .site-header{height:70px;padding:0 18px}.header-cta{padding:10px 12px;font-size:11px}.hero{min-height:0;padding:55px 20px 75px}.hero h1{font-size:48px;letter-spacing:-2px}.hero-copy>p{font-size:16px}.trust-row{display:grid}.product-stage{border-radius:13px}.app-shell{min-height:390px;grid-template-columns:47px 1fr}.app-main{padding:15px;overflow:hidden}.metric-row{grid-template-columns:1fr 1fr}.metric-row>div:last-child{display:none}.dashboard-grid{grid-template-columns:1fr}.agenda-card{display:none}.proof-strip{grid-template-columns:1fr 1fr;gap:28px 0}.proof-strip div:nth-child(3){padding-left:0;border-left:0}.section{padding:80px 20px}.feature-grid,.product-view-grid,.video-grid,.pricing-grid{grid-template-columns:1fr}.product-view:last-child,.video-card:last-child,.plan-card:last-child{grid-column:auto}.product-view-image{height:240px}.feature-card{min-height:225px}.workflow{padding:80px 20px}.onboarding-card{grid-template-columns:auto 1fr}.onboarding-card>strong{grid-column:2}.price-card{padding:26px;grid-template-columns:1fr}.price-copy ul{grid-template-columns:1fr}.final-cta{padding:65px 20px;flex-direction:column;align-items:flex-start}.final-actions{align-items:flex-start}footer{padding:35px 20px;grid-template-columns:1fr;text-align:left}footer p{text-align:left}
}