
:root{
  --navy:#071b3b;
  --navy-2:#0c2a55;
  --navy-3:#123c72;
  --aqua:#18b9c7;
  --aqua-2:#59d8dc;
  --orange:#be4d25;
  --orange-dark:#9f3e1d;
  --ink:#13213b;
  --muted:#61708a;
  --line:#dfe6ee;
  --soft:#f5f8fb;
  --white:#fff;
  --shadow:0 20px 60px rgba(7,27,59,.10);
  --radius:20px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Aptos,Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.narrow{max-width:850px}
.center{text-align:center}

.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(223,230,238,.75)}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:block;width:205px}
.brand img{width:100%;height:auto}
.site-nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}
.site-nav>a:not(.nav-cta){position:relative;color:#3e4d65;padding:8px 0}
.site-nav>a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--aqua);transition:.25s}
.site-nav>a:not(.nav-cta):hover:after,.site-nav>a.active:after{right:0}
.nav-cta{background:var(--orange);color:white;padding:12px 19px;border-radius:8px;box-shadow:0 8px 20px rgba(190,77,37,.22);transition:.2s}
.nav-cta:hover{background:var(--orange-dark);transform:translateY(-1px)}
.nav-cta span{margin-left:8px}
.menu-toggle{display:none;border:0;background:none;padding:8px}
.menu-toggle span{display:block;width:25px;height:2px;background:var(--navy);margin:5px 0}

.hero{overflow:hidden;background:linear-gradient(135deg,#f7fafc 0%,#fff 62%)}
.hero-grid{min-height:670px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px;padding:70px 0}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:.20em;font-weight:800;color:var(--aqua);text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:9px}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 5px rgba(24,185,199,.12)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(48px,6vw,76px);line-height:1.03;letter-spacing:-.045em;margin:22px 0 24px;color:var(--navy);font-weight:800}
h1 span,h2 span{color:var(--aqua)}
.hero-text{max-width:610px;color:var(--muted);font-size:18px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin:32px 0 40px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:9px;padding:13px 21px;font-weight:700;font-size:14px;border:1px solid transparent;transition:.2s}
.btn-primary{background:var(--orange);color:white;box-shadow:0 10px 25px rgba(190,77,37,.22)}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(190,77,37,.27)}
.btn-ghost{border-color:var(--line);background:white;color:var(--navy)}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--navy);background:var(--navy);color:white}
.btn-outline{border-color:#cbd5e1;color:var(--navy);margin-top:22px}
.btn-light{background:white;color:var(--navy)}
.btn-light:hover{background:#edf6f8;transform:translateY(-2px)}
.hero-proof{display:flex;gap:28px;flex-wrap:wrap}
.hero-proof div{padding-left:13px;border-left:2px solid var(--aqua)}
.hero-proof strong{display:block;font-size:13px;color:var(--navy)}
.hero-proof span{display:block;font-size:11px;color:var(--muted)}

.hero-visual{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center}
.automation-card{position:relative;z-index:2;width:min(500px,100%);background:white;border:1px solid #dfe8ef;border-radius:22px;box-shadow:0 30px 80px rgba(7,27,59,.15);padding:25px}
.automation-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--navy)}
.live-dot{color:#2b8a5a;letter-spacing:.08em}.live-dot:before{content:"";display:inline-block;width:6px;height:6px;background:#2b8a5a;border-radius:50%;margin-right:6px}
.flow-map{display:flex;align-items:center;justify-content:space-between;margin:50px 0 42px}
.flow-node{width:92px;height:92px;border-radius:50%;border:2px solid #dbe5ed;display:grid;place-items:center;text-align:center;font-size:10px;font-weight:800;color:var(--navy);background:#fbfdff}
.flow-node.active{border-color:var(--aqua);box-shadow:0 0 0 9px rgba(24,185,199,.10),0 10px 30px rgba(24,185,199,.15)}
.flow-line{height:2px;background:#dfe8ef;flex:1;position:relative;margin:0 -2px}
.flow-line i{position:absolute;width:38%;height:2px;background:var(--aqua);left:0;top:0;animation:flow 1.8s infinite linear}
@keyframes flow{from{left:0;width:20%}to{left:80%;width:20%}}
.mini-stats{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;font-size:10px;color:var(--muted)}
.mini-stats b{color:var(--aqua);margin-right:5px}
.orb{position:absolute;border-radius:50%;filter:blur(1px)}
.orb-one{width:300px;height:300px;background:rgba(24,185,199,.11);right:-30px;top:20px}
.orb-two{width:180px;height:180px;background:rgba(7,27,59,.08);left:0;bottom:30px}
.floating-tag{position:absolute;z-index:3;background:white;border:1px solid var(--line);padding:9px 12px;border-radius:9px;box-shadow:0 10px 25px rgba(7,27,59,.1);font-size:11px;font-weight:700}
.floating-tag b{color:var(--aqua);margin-left:8px}
.tag-one{top:80px;left:10px}.tag-two{right:0;bottom:85px}.tag-three{left:50px;bottom:30px}

.section{padding:105px 0}
.section-soft{background:var(--soft)}
.intro-section{padding-top:95px;padding-bottom:90px}
.section-kicker{display:block;margin-bottom:13px}
h2{font-size:clamp(34px,4vw,50px);line-height:1.12;letter-spacing:-.035em;color:var(--navy);margin-bottom:20px}
.narrow>p,.intro-section .narrow>p{font-size:17px;color:var(--muted)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:42px}
.section-heading h2{margin-bottom:0}
.text-link{font-weight:700;font-size:13px;color:var(--navy);white-space:nowrap}
.text-link span{color:var(--orange);margin-left:5px}
.card-grid{display:grid;gap:18px}.card-grid.four{grid-template-columns:repeat(4,1fr)}.card-grid.three{grid-template-columns:repeat(3,1fr)}
.service-card{background:white;border:1px solid var(--line);border-radius:16px;padding:27px;transition:.25s}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#c9d9e4}
.feature-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:#e8f8f9;color:var(--aqua);margin-bottom:23px}
.feature-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-card h3{font-size:17px;line-height:1.25;color:var(--navy);margin-bottom:10px}
.service-card p,.principle p{font-size:13px;color:var(--muted);margin-bottom:22px}
.service-card a{font-size:12px;font-weight:800;color:var(--navy)}
.split-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}
.split-section p{color:var(--muted)}
.split-section .lead{font-size:18px;color:var(--navy)}
.process-graphic{min-height:410px;position:relative;background:linear-gradient(145deg,#f7fbfc,#fff);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.process-circle{position:absolute;width:92px;height:92px;border-radius:50%;background:var(--navy);color:white;display:grid;place-items:center;font-size:13px;font-weight:800;left:20%;top:17%;box-shadow:0 0 0 13px rgba(7,27,59,.05)}
.process-circle.small{width:70px;height:70px;background:var(--aqua);left:54%;top:45%;box-shadow:0 0 0 12px rgba(24,185,199,.10)}
.process-circle.result{width:100px;height:100px;background:var(--orange);left:67%;top:67%;box-shadow:0 0 0 13px rgba(190,77,37,.08)}
.process-path{position:absolute;height:2px;background:var(--aqua);transform-origin:left center}
.path-a{width:260px;left:28%;top:38%;transform:rotate(20deg)}
.path-b{width:220px;left:59%;top:55%;transform:rotate(39deg)}
.process-label{position:absolute;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.label-a{left:14%;top:43%}.label-b{left:47%;top:34%}.label-c{right:10%;bottom:18%}
.section-navy{background:var(--navy);color:white}
.section-heading.light h2,.section-navy h2{color:white}
.section-navy .section-kicker{color:var(--aqua-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13)}
.step{padding:35px;background:var(--navy);display:grid;grid-template-columns:45px 1fr;gap:20px}
.step>span{color:var(--aqua);font-size:12px;font-weight:800}
.step h3{color:white;margin-bottom:8px}.step p{color:#aebdd1;font-size:13px;margin:0}
.zoho-wrap{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.zoho-wrap p{color:var(--muted);max-width:550px}
.app-cloud{display:flex;gap:10px;flex-wrap:wrap;align-content:center}
.app-cloud span{border:1px solid var(--line);padding:12px 16px;border-radius:8px;font-size:10px;font-weight:800;color:var(--navy);background:#fff;box-shadow:0 5px 15px rgba(7,27,59,.04)}
.cta-section{padding:35px 0 95px}
.cta-box{background:var(--orange);color:white;border-radius:22px;padding:50px 60px;display:flex;justify-content:space-between;align-items:center;gap:35px;box-shadow:0 25px 60px rgba(190,77,37,.20)}
.cta-box h2{color:white;margin-bottom:8px}.cta-box p{margin:0;color:#ffe9df}.cta-box .section-kicker{color:#ffd5c5}

.page-hero{padding:110px 0 95px;background:linear-gradient(135deg,#f6fafc,#fff);border-bottom:1px solid var(--line)}
.page-hero h1{max-width:900px}.page-hero p{max-width:700px;font-size:18px;color:var(--muted)}
.principle{border:1px solid var(--line);padding:32px;border-radius:18px;background:white}
.principle>span{font-size:11px;font-weight:800;color:var(--aqua)}
.principle h3{margin:22px 0 10px;color:var(--navy)}
.capability-list{border-top:1px solid var(--line)}
.capability-list div{display:flex;justify-content:space-between;align-items:center;padding:21px 5px;border-bottom:1px solid var(--line);font-size:17px;font-weight:700;color:var(--navy)}
.capability-list b{font-size:11px;color:var(--aqua)}

.solution-block{display:grid;grid-template-columns:110px 1fr;gap:42px;padding:60px 0;border-bottom:1px solid var(--line);align-items:start}
.solution-block.reverse{grid-template-columns:110px 1fr}
.solution-block .feature-icon{width:78px;height:78px;border-radius:18px}
.solution-block .feature-icon svg{width:40px;height:40px}
.solution-block h2{font-size:37px;margin-bottom:10px}
.solution-block p{color:var(--muted);max-width:760px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag-list span{font-size:10px;font-weight:700;padding:7px 10px;background:var(--soft);border:1px solid var(--line);border-radius:99px;color:var(--navy)}
.zoho-mark{width:78px;height:78px;border-radius:18px;display:grid;place-items:center;background:var(--navy);color:white;font-size:42px;font-weight:800}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;align-items:start}
.contact-info>p{color:var(--muted);max-width:500px;margin-bottom:38px}
.contact-detail{display:flex;gap:15px;margin:25px 0}
.detail-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#e8f8f9;color:var(--aqua);font-weight:800}
.contact-detail small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.contact-detail strong,.contact-detail a{display:block;color:var(--navy);font-size:14px;margin-top:3px}
.contact-detail a:hover{color:var(--orange)}
.form-card{background:white;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{margin-bottom:19px}
.form-field label{display:block;font-size:11px;font-weight:800;color:var(--navy);margin-bottom:7px}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid #d7e0e8;border-radius:8px;background:#fbfdff;padding:12px 13px;color:var(--ink);outline:none;transition:.2s}
.form-field textarea{resize:vertical;min-height:135px}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--aqua);box-shadow:0 0 0 4px rgba(24,185,199,.09)}
.form-submit{width:100%;border:0;margin-top:4px}
.form-submit[disabled]{opacity:.65;cursor:wait;transform:none}
.form-status{font-size:12px;margin:13px 0 0;text-align:center;min-height:18px}.form-status.success{color:#2b8a5a}.form-status.error{color:#b33b2c}

.site-footer{background:#06162f;color:#aebdd1;padding-top:70px}
.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .9fr 1.2fr;gap:55px;padding-bottom:55px}
.footer-logo{width:235px;filter:brightness(0) invert(1);margin-bottom:12px}
.footer-brand>p:first-of-type{color:var(--aqua-2);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.footer-copy{font-size:12px;max-width:300px}
.site-footer h3{color:white;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
.site-footer .footer-grid>div:not(.footer-brand)>a{display:block;font-size:12px;margin:9px 0;color:#aebdd1}.site-footer a:hover{color:white}
.footer-contact p{font-size:12px;margin-bottom:12px}.footer-contact a{display:block;font-size:12px;margin:7px 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#7588a2}

@media(max-width:1000px){
  .card-grid.four{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding:75px 0}
  .hero-visual{min-height:420px}
  .split-section,.zoho-wrap{grid-template-columns:1fr;gap:50px}
  .process-graphic{max-width:650px}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
  .footer-contact{grid-column:2/4}
}
@media(max-width:760px){
  .container{width:min(var(--max),calc(100% - 34px))}
  .nav-wrap{height:72px}
  .brand{width:180px}
  .menu-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:72px;background:white;border-bottom:1px solid var(--line);padding:18px 20px 25px;flex-direction:column;align-items:stretch;gap:7px;box-shadow:0 15px 30px rgba(7,27,59,.08)}
  .site-nav.open{display:flex}
  .site-nav>a:not(.nav-cta){padding:12px 4px}
  .nav-cta{text-align:center;margin-top:6px}
  h1{font-size:48px}
  .section{padding:78px 0}
  .section-heading{display:block}
  .section-heading .text-link{display:inline-block;margin-top:18px}
  .card-grid.four,.card-grid.three{grid-template-columns:1fr}
  .hero-proof{gap:15px}
  .hero-visual{min-height:360px}
  .automation-card{padding:19px}
  .flow-node{width:70px;height:70px;font-size:8px}
  .floating-tag{display:none}
  .steps{grid-template-columns:1fr}
  .step{padding:26px}
  .cta-box{padding:35px 28px;display:block}
  .cta-box .btn{margin-top:22px}
  .page-hero{padding:80px 0 70px}
  .solution-block,.solution-block.reverse{grid-template-columns:1fr;gap:25px;padding:45px 0}
  .solution-block .feature-icon,.zoho-mark{width:62px;height:62px}
  .solution-block h2{font-size:32px}
  .contact-grid{grid-template-columns:1fr;gap:45px}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-card{padding:23px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:35px}
  .footer-contact{grid-column:1/3}
  .footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}
}
@media(max-width:430px){
  h1{font-size:41px}
  h2{font-size:34px}
  .hero-actions .btn{width:100%}
  .hero-proof{display:grid;grid-template-columns:1fr 1fr}
  .hero-proof div:last-child{grid-column:1/3}
  .flow-map{margin:38px 0 30px}
  .flow-node{width:58px;height:58px}
  .footer-grid{grid-template-columns:1fr}
  .footer-contact{grid-column:auto}
}
