*{box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
a{color: inherit;}
.wrap{width: min(var(--max), calc(100% - 40px)); margin: 0 auto;}
.topline{background: var(--graphite); color: #e9f1ed; font-size: 13px;}
.topline-inner{display: flex; justify-content: space-between; gap: 24px; padding: 10px 0;}
.topline span{opacity: .76;}
.topline a{text-decoration: none; font-weight: 700;}
.brand-name small{display: block; font-size: 10px; color: var(--violet); letter-spacing: .05em; text-transform: uppercase; margin-top: 5px;}
nav a:hover{color: var(--ink);}
nav a.active::after{content: ""; position: absolute; height: 3px; border-radius: 3px; bottom: 0; left: 0; right: 0; background: var(--green);}
button{border: 0; cursor: pointer; font: inherit; font-weight: 800;}
main{overflow: hidden;}
.hero{padding: 84px 0 72px; position: relative;}
.hero::before{content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--violet-soft); top: -180px; right: -180px; z-index: -1; animation: heroOrb 14s ease-in-out infinite alternate; transform-origin: 50% 50%;}
.hero-grid{display: grid; grid-template-columns: .86fr 1.14fr; align-items: end; gap: 64px;}
.kicker{display: inline-flex; align-items: center; gap: 9px; color: var(--violet); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 900;}
.kicker::before{content: ""; width: 28px; height: 3px; background: var(--green);}
h1,h2,h3,p{margin-top: 0;}
h1{max-width: 620px; margin: 18px 0 24px; font-size: clamp(44px, 6vw, 78px); line-height: .98; letter-spacing: -.065em;}
.hero-copy{max-width: 460px; color: var(--muted); font-size: 18px;}
.hero-actions{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px;}
.button{display: inline-flex; justify-content: center; align-items: center; min-height: 50px; padding: 0 22px; border-radius: 11px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;}
.hero-actions .button{min-height: 62px; padding: 0 30px; font-size: 17px;}
.button:hover{transform: translateY(-2px); box-shadow: 0 11px 22px rgba(21,35,39,.12);}
.button-primary{background: var(--red); color: white;}
.button-secondary{color: var(--ink); border: 1px solid var(--line); background: var(--surface);}
.hero-meta{display: flex; gap: 18px; margin-top: 56px; color: var(--muted); font-size: 13px;}
.hero-meta strong{display: block; color: var(--ink); font-size: 24px; letter-spacing: -.04em;}
.service-panel{background: var(--graphite); color: white; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); position: relative;}
.service-panel::before{content: "01 / 02"; display: block; padding: 12px 13px 8px; color: #7f9190; font-size: 11px; letter-spacing: .14em;}
.service-item{display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 20px; border-radius: 15px; padding: 21px 18px; text-decoration: none; transition: transform .25s ease, background .25s ease;}
.service-item:hover{transform: translateX(5px); background: var(--graphite-2);}
.service-item + .service-item{border-top: 1px solid #3f4c4f;}
.service-icon{width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; color: var(--ink); font-size: 29px; background: var(--green);}
.service-item:nth-child(3) .service-icon{background: var(--violet); color: white;}
.service-item h2{font-size: clamp(19px, 2.4vw, 29px); line-height: 1.05; letter-spacing: -.04em; margin-bottom: 7px;}
.service-item p{margin: 0; color: #9eadab; font-size: 13px;}
.arrow{width: 36px; height: 36px; border: 1px solid #536265; border-radius: 50%; display: grid; place-items: center; color: var(--green); font-size: 22px;}
section{padding: 92px 0;}
.section-head{display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 38px;}
.section-head h2{font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -.06em; margin: 12px 0 0;}
.section-head p{color: var(--muted); max-width: 430px; margin: 0;}
.services{background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.service-columns{display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;}
.service-column{padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);}
.service-column h3{display: flex; align-items: center; gap: 12px; font-size: 22px; letter-spacing: -.04em; margin-bottom: 22px;}
.mini-icon{width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--green); font-size: 19px;}
.service-column:nth-child(2) .mini-icon{background: var(--violet); color: white;}
.service-column ul{list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; color: var(--muted);}
.service-column li::before{content: "↗"; color: var(--violet); font-weight: 900; margin-right: 9px;}
.proof{background: var(--green); color: var(--ink);}
.proof-grid{display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center;}
.proof h2{font-size: clamp(34px, 5vw, 64px); letter-spacing: -.07em; line-height: .94; margin-bottom: 18px;}
.proof p{max-width: 420px; color: #3f4c2f;}
.proof-list{border-top: 1px solid rgba(24,33,37,.22);}
.proof-row{display: grid; grid-template-columns: 35px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(24,33,37,.22); font-size: 18px;}
.check{width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-size: 14px; font-weight: 900;}
.reviews{background: var(--surface);}
.review-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;}
.review{padding: 25px 26px 28px; background: var(--paper); border-radius: 16px; box-shadow: inset 0 4px 0 var(--violet);}
.quote{color: var(--violet); font-size: 48px; line-height: .7; font-weight: 900;}
.review strong{display: block; margin: 17px 0 10px; line-height: 1.3;}
.review p{color: var(--muted); font-size: 14px;}
.review cite{display: block; text-align: right; color: var(--ink); font-size: 13px;}
.contact{background: var(--violet-soft);}
.contact-grid{display: grid; grid-template-columns: 1fr .86fr; gap: 56px; align-items: start;}
.contact h2{font-size: clamp(38px, 5vw, 66px); line-height: .96; letter-spacing: -.07em;}
.contact-form{background: var(--surface); padding: 30px; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(63, 56, 150, .12);}
.contact-form h3{font-size: 26px; letter-spacing: -.05em; margin-bottom: 6px;}
.contact-form > p{color: var(--muted); font-size: 14px; margin-bottom: 24px;}
label{display: grid; gap: 7px; font-size: 13px; font-weight: 800; margin-top: 15px;}
input{min-height: 47px; border: 1px solid var(--line); border-radius: 9px; padding: 0 13px; font: inherit; color: var(--ink); background: var(--paper);}
input:focus{outline: 3px solid rgba(113,103,217,.2); border-color: var(--violet);}
.form-submit{margin-top: 22px; width: 100%; background: var(--red); color: white; min-height: 50px; border-radius: 10px;}
.form-status{min-height: 24px; margin: 12px 0 0; font-size: 13px; color: #397c27;}
footer .brand-name small{color: var(--green);}
.copyright{border-top: 1px solid #3e4b4e; margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 18px; font-size: 12px; color: #7e908d;}
.reveal{animation: rise .8s cubic-bezier(.22,1,.36,1) both;}
@keyframes rise{ from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroOrb{ from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-28px, 24px, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce){.hero::before{animation: none;}}
@media (max-width: 900px){.hero-grid,.proof-grid,.contact-grid{grid-template-columns: 1fr; gap: 38px;}
.hero{padding-top: 58px;}
.hero-meta{margin-top: 32px;}
.proof-grid{gap: 34px;}}
@media (max-width: 680px){.wrap{width: min(100% - 28px, var(--max));}
.topline-inner{flex-direction: column; gap: 2px;}
.hero{padding: 55px 0 48px;}
h1{font-size: clamp(44px, 14vw, 64px);}
.hero-copy{font-size: 16px;}
.hero-meta{gap: 13px;}
.hero-meta strong{font-size: 20px;}
section{padding: 62px 0;}
.section-head{display: block;}
.section-head p{margin-top: 16px;}
.service-columns,.review-grid{grid-template-columns: 1fr;}
.service-column{padding: 22px;}
.service-item{grid-template-columns: 52px 1fr 30px; gap: 12px; padding: 17px 8px;}
.service-icon{width: 48px; height: 48px; font-size: 22px;}
.service-item h2{font-size: 18px;}
.arrow{width: 30px; height: 30px; font-size: 18px;}
.contact-grid{gap: 26px;}
.contact-form{padding: 22px;}
.copyright{flex-direction: column; margin-top: 28px;}}
.service-column{display: flex; flex-direction: column;}
.service-column ul{margin-bottom: 28px;}
.service-column .service-cta{margin-top: auto; align-self: flex-start; background: #7167d9; color: #fff;}
.service-column#about{order: 2;}
.service-column#mats{order: 1;}
.service-column#about{background: #9be83c; border-color: #9be83c;}
.service-column#about ul{color: #3f4c2f;}
.service-column#about li::before{color: var(--ink);}
.service-column#about{background: var(--paper); border-color: var(--line);}
.service-column#about li::before{color: #9be83c;}
.service-column#about .service-cta{background: #9be83c; color: var(--ink);}
.service-column .service-cta{min-height: 62px; padding: 0 30px; font-size: 17px;}
.form-submit{min-height: 62px; font-size: 17px;}
.service-column#about{border-color: #9be83c;}
.service-column#mats{border-color: #7167d9;}
.service-column h3 a{color: inherit; text-decoration: none;}
.proof{background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.proof p{color: var(--muted);}
.proof-list,.proof-row{border-color: var(--line);}
.hero-meta{display: inline-flex; gap: 24px; margin-top: 34px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72);}
.hero-meta strong{font-size: 16px;}
.hero-meta span{font-size: 11px;}
@media (max-width: 680px){.service-column .service-cta{width: 100%;}}
html,body,body *{font-family:Arial,"Helvetica Neue",sans-serif!important}
body *{letter-spacing:.001em!important}
h1,h2,h3,h4,.caption strong{letter-spacing:-.025em!important}